50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T712e,"use client" import * as React from "react" import { Popover as PopoverPrimitive } from "@base-ui/react/popover" import { AnimatePresence, motion, animate, useIsPresent, useMotionValue, useReducedMotion, type HTMLMotionProps, type Transition, } from "motion/react" import { ChevronLeftIcon, ChevronRightIcon, ListFilterIcon, SearchIcon, } from "lucide-react" import { Button } from "@/components/ui/button" import { CheckboxMark } from "@/components/ui/checkbox" import { Count } from "@/components/ui/count" import { EmptyState, EmptyStateTitle, } from "@/components/ui/empty-state" import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group" import { cn } from "@/lib/utils" type FilterOption = { value: string label: string icon?: React.ReactNode } type FilterField = { id: string label: string icon?: React.ReactNode options: FilterOption[] } /** The chosen values for each field, keyed by field id. */ type FilterValue = Record type Row = | { kind: "field"; key: string; field: FilterField } | { kind: "option"; key: string; field: FilterField; option: FilterOption } type Group = { field: FilterField | null; rows: Row[] } /* * Which of three views the popup shows. With no query it's a menu of * fields, or one field's values once a field is open. Any text turns it * into a search: across every field from the menu, or within the open * field. */ type View = "fields" | "values" | "search" const MOVE: Transition = { duration: 0.22, ease: [0.22, 1, 0.36, 1] } const INSTANT: Transition = { duration: 0 } function matches(text: string, query: string) { return text.toLowerCase().includes(query.toLowerCase()) } function Highlight({ text, query }: { text: string; query: string }) { const at = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1 if (at < 0) return <>{text} return ( <> {text.slice(0, at)} {text.slice(at, at + query.length)} {text.slice(at + query.length)} ) } function useControllable( value: T | undefined, defaultValue: T, onChange: ((value: T) => void) | undefined ) { const [own, setOwn] = React.useState(defaultValue) const current = value ?? own const set = (next: T) => { if (value === undefined) setOwn(next) onChange?.(next) } return [current, set] as const } /* * The popup's height follows its content, so views of different lengths * grow and shrink into each other instead of jumping. The content only * changes size when what it shows changes, which `shape` sums up, so it's * measured then rather than watched with a ResizeObserver, which would * fight the popover's own observer as the height animates. The height * lives in a motion value, so it animates without re-rendering. */ function useHeight(shape: string, transition: Transition) { // A callback ref, so the content mounting (a render after the popup // opens) also triggers a measurement. const [node, setNode] = React.useState(null) const height = useMotionValue("auto") React.useLayoutEffect(() => { if (!node) return height.set("auto") const next = node.offsetHeight // The first measurement after opening sets the height without // animating; later ones grow or shrink to it. if (height.get() === "auto") return height.set(next) const controls = animate(height, next, transition) return () => controls.stop() }, [node, shape, height, transition]) return [setNode, height] as const } // A view on its way out stays in the DOM while it fades, so it's made inert // and hidden: its rows can't be clicked or read, or answer to an id. function View(props: HTMLMotionProps<"div">) { const present = useIsPresent() return ( ) } type FilterMenuLabels = { /** The back button in a field's values. */ backToFields: string /** The back button that leaves a search started from the field menu. */ backToFilters: string /** The back button that leaves a search started inside a field. */ backToField: (field: string) => string /** Announces how many rows a search found. */ results: (count: number) => string } const DEFAULT_LABELS: FilterMenuLabels = { backToFields: "Back to fields", backToFilters: "Back to filters", backToField: (field) => `Back to ${field}`, results: (count) => `${count} ${count === 1 ? "result" : "results"}`, } type FilterMenuProps = { /** The fields people can filter by, each with the values it offers. */ fields: FilterField[] /** The chosen values, keyed by field id, when you control the state. */ value?: FilterValue /** The chosen values to start with, when the menu keeps its own state. */ defaultValue?: FilterValue /** Called with every field's chosen values each time one is toggled. */ onValueChange?: (value: FilterValue) => void /** What the trigger button says. */ triggerLabel?: React.ReactNode /** Hint in the inline search box while the field menu is showing. */ placeholder?: string /** Shown when a search matches nothing. */ emptyText?: React.ReactNode /** Names the popup for assistive technology. */ label?: string /** Names the search box for assistive technology. */ searchLabel?: string /** Wording the menu writes for itself, for translation. */ labels?: Partial /** Whether the menu is open, when you control it. */ open?: boolean /** Whether the menu starts open, when it keeps its own state. */ defaultOpen?: boolean /** Called when the menu opens or closes. */ onOpenChange?: (open: boolean) => void /** Which side of the trigger the popup opens on. Flips when there's no room. */ side?: PopoverPrimitive.Positioner.Props["side"] /** Which edge of the trigger the popup lines up with. */ align?: "start" | "center" | "end" /** Where the popup portals to. Defaults to the body. */ container?: PopoverPrimitive.Portal.Props["container"] /** * An element to use as the trigger instead of the default button. It must * forward its ref and props, as fibo's Button does. */ trigger?: React.ReactElement /** * How search starts. `button`, the default, shows a Search filters button * at the top, and the menu slides over to its search state when it's * used. `inline` keeps a search box there instead, and typing turns the * menu into results. */ search?: "inline" | "button" /** Classes for the trigger button. */ className?: string /** Classes for the popup. */ popupClassName?: string } /** * A filter button whose menu lists fields, then each field's values, and * turns into a search across all of them as soon as you type. It only picks * filters; showing the applied ones is up to the app. */ function FilterMenu({ fields, value, defaultValue = {}, onValueChange, triggerLabel = "Filter", placeholder = "Filter by…", emptyText = "No matching filters", label = "Filters", searchLabel = "Search filters", labels, open: openProp, defaultOpen = false, onOpenChange, side = "bottom", align = "start", container, trigger, search = "button", className, popupClassName, }: FilterMenuProps) { const [selected, setSelected] = useControllable( value, defaultValue, onValueChange ) const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange) const text = { ...DEFAULT_LABELS, ...labels } const [query, setQuery] = React.useState("") const [fieldId, setFieldId] = React.useState(null) const [highlight, setHighlight] = React.useState(0) // Only the button style has a search state of its own; inline, any text // is a search. const [searching, setSearching] = React.useState(false) // Which way the next view slides: in from the right going deeper, from // the left coming back, and not at all into or out of a search. const [direction, setDirection] = React.useState<1 | -1 | 0>(1) const reduceMotion = useReducedMotion() const inputRef = React.useRef(null) const listRef = React.useRef(null) const id = React.useId() const field = fields.find((f) => f.id === fieldId) ?? null const term = query.trim() const inSearch = search === "button" ? searching : Boolean(term) const view: View = inSearch ? "search" : field ? "values" : "fields" // Where focus lives: the search box whenever there is one, otherwise the // list itself, which then carries aria-activedescendant. const usesInput = search === "inline" || inSearch const home = usesInput ? inputRef : listRef // Row ids come from positions, not from app data that may hold spaces, // and carry the view so an outgoing view never shares an id with the // incoming one. const viewKey = view === "search" ? "search" : field ? `field-${fields.indexOf(field)}` : "fields" // The open field can vanish if `fields` changes while the menu is open; // the menu then falls back to the field list for good. if (fieldId && !field) setFieldId(null) const groups: Group[] = React.useMemo(() => { const option = (f: FilterField, o: FilterOption): Row => ({ kind: "option", key: `${f.id}:${o.value}`, field: f, option: o, }) if (view === "fields") return [ { field: null, rows: fields.map((f) => ({ kind: "field", key: f.id, field: f })), }, ] if (view === "values" && field) return [{ field: null, rows: field.options.map((o) => option(field, o)) }] // A search inside an open field stays within it; from the menu it // covers every field, and a field whose name matches brings all of // its values. return (field ? [field] : fields) .map((f) => ({ field: field ? null : f, rows: f.options .filter((o) => matches(o.label, term) || matches(f.label, term)) .map((o) => option(f, o)), })) .filter((group) => group.rows.length > 0) }, [view, fields, field, term]) const rows = groups.flatMap((group) => group.rows) const active = rows[Math.min(highlight, rows.length - 1)] const ids = new Map( groups.flatMap((group, g) => group.rows.map((row, r) => [row, `${id}-${viewKey}-${g}-${r}`] as const) ) ) const rowId = (row: Row) => ids.get(row) ?? "" const transition = reduceMotion ? INSTANT : MOVE const [contentRef, height] = useHeight( `${open}:${viewKey}:${groups.length}:${rows.length}`, transition ) // Views mount and unmount the search box, so focus follows each change. React.useEffect(() => { if (open) home.current?.focus({ preventScroll: true }) }, [open, view, home]) // Scrolls only the list, where scrollIntoView would also scroll the page // to reach a menu that is partly off screen. const activeId = active ? rowId(active) : "" React.useEffect(() => { const list = listRef.current if (!activeId || !list) return const row = list.querySelector(`[id="${CSS.escape(activeId)}"]`) if (!row) return const bounds = list.getBoundingClientRect() const target = row.getBoundingClientRect() // A menu drawn inside a scaled element measures scaled on screen. const scale = bounds.height / list.offsetHeight || 1 if (target.top < bounds.top) { list.scrollTop -= (bounds.top - target.top) / scale } else if (target.bottom > bounds.bottom) { list.scrollTop += (target.bottom - bounds.bottom) / scale } }, [activeId]) const reset = () => { setQuery("") setFieldId(null) setSearching(false) setHighlight(0) } // A search started inside a field stays within it, as it does inline, // and leaving the search goes back to that field. const enterSearch = (initial = "") => { setDirection(1) setSearching(true) setQuery(initial) setHighlight(0) } const exitSearch = () => { setDirection(-1) setSearching(false) setQuery("") setHighlight(0) } const openField = (next: FilterField) => { setDirection(1) setFieldId(next.id) setQuery("") setHighlight(0) } const back = () => { setDirection(-1) const index = fields.findIndex((f) => f.id === fieldId) setFieldId(null) setHighlight(Math.max(0, index)) } const toggle = (f: FilterField, option: FilterOption) => { const current = selected[f.id] ?? [] const next = current.includes(option.value) ? current.filter((v) => v !== option.value) : [...current, option.value] const rest = { ...selected } if (next.length) rest[f.id] = next else delete rest[f.id] setSelected(rest) } const activate = (row: Row) => { if (row.kind === "field") openField(row.field) else toggle(row.field, row.option) home.current?.focus({ preventScroll: true }) } const onKeyDown = (event: React.KeyboardEvent) => { const count = rows.length // With the button style, typing on the list starts a search with that // letter, so the keyboard path doesn't need the button. if ( !usesInput && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey && event.key !== " " ) { event.preventDefault() enterSearch(event.key) return } switch (event.key) { case "ArrowDown": event.preventDefault() if (count) setHighlight((h) => (Math.min(h, count - 1) + 1) % count) break case "ArrowUp": event.preventDefault() if (count) setHighlight((h) => (Math.min(h, count - 1) - 1 + count) % count) break case "Home": if (query) break event.preventDefault() setHighlight(0) break case "End": if (query) break event.preventDefault() setHighlight(Math.max(0, count - 1)) break case "Enter": event.preventDefault() if (active) activate(active) break case "ArrowRight": if (!query && active?.kind === "field") { event.preventDefault() openField(active.field) } break case "ArrowLeft": case "Backspace": if (query) break if (field) { event.preventDefault() back() } else if (search === "button" && searching) { event.preventDefault() exitSearch() } break } } const slide = reduceMotion ? 0 : 16 const count = rows.length const slides = { custom: direction, variants: { enter: (d: number) => ({ opacity: 0, x: d * slide }), center: { opacity: 1, x: 0 }, // The old view leaves faster than the new one arrives, so two lists // never blur into each other. exit: (d: number) => ({ opacity: 0, x: d * -slide, transition: { ...transition, duration: reduceMotion ? 0 : 0.1 }, }), }, initial: "enter", animate: "center", exit: "exit", transition, } const backButton = (onBack: () => void, name: string) => ( ) const searchInput = (