60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T1a27,"use client" import * as React from "react" import { SlidersHorizontal } from "lucide-react" import { Button, buttonVariants } from "@/components/ui/button" import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "@/components/ui/sheet" import { FilterPanel, type FilterPanelProps } from "@/components/ecomcn/filter-panel" import { countActiveFilters, isSameFilters, type FilterState, } from "@/lib/filter-params" import { cn } from "@/lib/utils" const subscribeNothing = () => () => {} /** * Your locale, or the visitor's once hydrated. The server can't know the * visitor's locale, and its HTML must match the first client render — a * server in en-IN prints "1,24,000" where an en-US browser prints * "124,000" — so until hydration it formats in en-US. */ function useFormatLocale(locale?: string) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) return locale ?? (hydrated ? undefined : "en-US") } export interface FilterSheetProps extends Pick { /** The applied filters — usually straight from `useFilterParams`. */ value: FilterState /** Called once with the staged filters when the sheet applies — never per tap. */ onValueChange: (next: FilterState) => void /** Result count for the *staged* filters, shown on the apply button. */ getResultCount?: (staged: FilterState) => number | undefined /** * Fires on every staged change. When counting needs a request, fetch here * and pass the answer back as `resultCount`. */ onStagedChange?: (staged: FilterState) => void /** Wins over `getResultCount`. `undefined` renders a plain "Show results". */ resultCount?: number /** What Escape, the close button and the overlay do with staged changes. */ dismissBehavior?: "apply" | "discard" side?: "left" | "right" | "bottom" title?: string /** Trigger label. */ label?: string /** Applied to the trigger button. */ className?: string contentClassName?: string noun?: { one: string; other: string } /** * A custom panel layout built from FilterPanel parts. They render inside a * FilterPanel that holds the *staged* value, so the same layout you use on * desktop stages here without any changes. */ children?: React.ReactNode } export function FilterSheet({ facets, value, onValueChange, getResultCount, onStagedChange, resultCount, dismissBehavior = "apply", side = "left", title = "Filters", label = "Filters", currency, locale: localeProp, loading, className, contentClassName, noun = { one: "result", other: "results" }, children, }: FilterSheetProps) { const locale = useFormatLocale(localeProp) const [open, setOpen] = React.useState(false) // Changes made inside the sheet are staged here, not pushed to the URL: // applying live would re-fetch the listing behind the sheet on every tap. const [staged, setStaged] = React.useState(value) const applied = countActiveFilters(value, facets) const stagedCount = countActiveFilters(staged, facets) const dirty = !isSameFilters(staged, value, facets) const count = resultCount ?? (open ? getResultCount?.(staged) : undefined) const stage = (next: FilterState) => { setStaged(next) onStagedChange?.(next) } const plural = new Intl.PluralRules(locale) const results = count === undefined ? null : `${new Intl.NumberFormat(locale).format(count)} ${ plural.select(count) === "one" ? noun.one : noun.other }` // Only a real change reaches onValueChange, so closing an untouched sheet // never adds a history entry or fires a request. const commit = () => { if (dirty) onValueChange(staged) } const handleOpenChange = (next: boolean) => { if (next) stage(value) else if (dismissBehavior === "apply") commit() setOpen(next) } return ( {/* A real SheetTrigger, not a button that sets `open`: the dialog primitive only knows where to return focus if it owns the trigger. Styled with buttonVariants rather than asChild so it works on both the Radix and Base UI flavours of shadcn/ui. */} {label} {applied > 0 && ( {applied} applied )} {title} {dismissBehavior === "apply" ? "Changes apply when you close this panel." : "Changes apply when you press Show."}

{children}

{/* Outside the scroller, so the footer rule runs edge to edge and the primary action never scrolls away. */} {dirty && results ? results : ""} ) } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["button","sheet","@ecomcn/filter-panel"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"src/registry/ecomcn/filter-sheet/filter-sheet.tsx","content":"$62","type":"registry:component","target":"components/ecomcn/filter-sheet.tsx"}],"className":"h-[70svh] min-h-80"}]]}]