4d: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"] 4e: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"] 4f:T89e5,"use client" import * as React from "react" import { ChevronDown as ChevronDownIcon, Funnel as FunnelIcon, X as CloseIcon, } from "honestui/icons" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Popover, PopoverPopup, PopoverTrigger, } from "@/components/ui/popover" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import { Sheet, SheetFooter, SheetPopup, SheetTitle, SheetTrigger, } from "@/components/ui/sheet" import { Toolbar } from "@/components/ui/toolbar" import type { FilterDateRangePreset, FilterDefinition, FilterOption, FilterRenderProps, FilterType, FilterValue, } from "./filter-bar-types" import { DEFAULT_FILTER_BAR_LABELS, cloneFilterValues, FilterBarControllerContext, useController, type FilterBarControllerValue, type FilterBarLabels, type FilterBarMode, } from "./filter-bar-context" import { renderFilterControl } from "./filter-bar-fields" import { createFilterDefinitionMap, formatFilterValueText, getActiveFilterCount, isActiveFilterValue, isValuelessOperator, resolveDefaultOperator, } from "./filter-bar-utils" export type { FilterDateRangePreset, FilterDefinition, FilterOption, FilterRenderProps, FilterType, FilterValue, } function useNarrowViewport(maxWidthPx: number) { const subscribe = React.useCallback( (onMediaChange: () => void) => { const mediaQueryList = window.matchMedia( `(max-width: ${maxWidthPx - 1}px)` ) mediaQueryList.addEventListener("change", onMediaChange) return () => mediaQueryList.removeEventListener("change", onMediaChange) }, [maxWidthPx] ) return React.useSyncExternalStore( subscribe, () => window.matchMedia(`(max-width: ${maxWidthPx - 1}px)`).matches, () => false ) } export interface FilterBarProps extends Omit, "defaultValue" | "onChange"> { /** Every filter the application offers. */ filters: FilterDefinition[] /** Committed filters owned by your application. */ value?: FilterValue[] | undefined /** Initial filters when uncontrolled. */ defaultValue?: FilterValue[] | undefined onValueChange?: ((values: FilterValue[]) => void) | undefined /** instant commits each change; apply holds work behind an Apply press. */ mode?: FilterBarMode open?: boolean | undefined defaultOpen?: boolean | undefined onOpenChange?: ((open: boolean) => void) | undefined /** Shows every chip or collapses overflow into one "+N" control. */ valuesDisplay?: "collapse" | "wrap" /** Option lists grow a search input past this many entries. */ searchableThreshold?: number /** Renders result counts supplied on filter options. */ showOptionCounts?: boolean /** Panels become a Sheet below this viewport width. */ mobileBreakpoint?: number popoverAlign?: "start" | "center" | "end" disabled?: boolean /** Overrides English strings listed under Labels in the docs. */ labels?: Partial /** * Composed arrangement of FilterBar* parts for custom layouts such as a * pinned side rail. Omit for the complete default bar plus panel. */ children?: React.ReactNode } /** * One consistent way to add, view, edit, and clear filters above Data Table, * Kanban lists, search results, admin pages, or any collection. The bar owns * filter UI and values; applications own querying and interpretation. */ export function FilterBar({ filters, value, defaultValue, onValueChange, mode = "instant", open: openProp, defaultOpen = false, onOpenChange, valuesDisplay = "collapse", searchableThreshold = 10, showOptionCounts = true, mobileBreakpoint = 640, popoverAlign = "start", disabled = false, labels: labelOverrides, className, children, ...rootProps }: FilterBarProps) { if ( process.env.NODE_ENV !== "production" && (!filters || filters.length === 0) ) { console.warn( "FilterBar received no filter definitions; nothing useful opens. Unmount FilterBar until definitions exist." ) } const definitionMap = React.useMemo( () => createFilterDefinitionMap(filters ?? []), [filters] ) const [internalCommitted, setInternalCommitted] = React.useState(defaultValue ?? []) const isControlled = value !== undefined const resolvedLabels = React.useMemo( () => ({ ...DEFAULT_FILTER_BAR_LABELS, ...labelOverrides }), [labelOverrides] ) const sourceCommitted = isControlled ? value : internalCommitted const committed = React.useMemo( () => sourceCommitted?.filter((entry) => isActiveFilterValue(definitionMap.get(entry.key), entry) ) ?? [], [sourceCommitted, definitionMap] ) const [internalOpen, setInternalOpen] = React.useState(defaultOpen) const open = openProp !== undefined ? openProp : internalOpen // Drafts exist only between opening and resolving in apply mode. Declared // before the callbacks so they close over live state instead of refs. const [draft, setDraft] = React.useState([]) const hasDraft = mode === "apply" && open const editing = hasDraft ? draft : committed function baseSetOpen(next: boolean) { if (openProp === undefined) { setInternalOpen(next) } onOpenChange?.(next) } /** * Every closing path discards unfinished draft work; Apply is the only * writer while a draft exists, so outside clicks and Escape behave like * Cancel exactly as documented. */ function setOpen(next: boolean) { if (mode === "apply") { setDraft(next ? cloneFilterValues(committed) : []) } baseSetOpen(next) } const focusGroups = React.useRef(new Map()) const pendingFocusKey = React.useRef(undefined) React.useEffect(() => { if (!open || !pendingFocusKey.current) return const focusKey = pendingFocusKey.current pendingFocusKey.current = undefined window.requestAnimationFrame(() => { const target = focusGroups.current.get(focusKey) target?.scrollIntoView({ block: "nearest", inline: "nearest" }) target?.focus({ preventScroll: true }) }) }, [open]) function registerFocusGroup(key: string, element: HTMLElement | null) { if (element) { focusGroups.current.set(key, element) } else { focusGroups.current.delete(key) } } /** * Field writes land on the draft while one exists and commit straight to * the application otherwise, which is what instant mode should do. */ function writeEditing( next: | FilterValue[] | ((current: FilterValue[]) => FilterValue[]) ) { if (disabled) return const resolved = typeof next === "function" ? next(hasDraft ? draft : committed) : next if (hasDraft) { setDraft(resolved) return } if (!isControlled) setInternalCommitted(resolved) onValueChange?.(resolved) } function setEntry(key: string, nextValue: unknown, nextOperator?: string) { const definition = definitionMap.get(key) if (!definition || definition.disabled || disabled) return const current = hasDraft ? draft : committed const existing = current.find((entry) => entry.key === key) const operator = nextOperator ?? existing?.operator ?? resolveDefaultOperator(definition) const cleaned = current.filter((entry) => entry.key !== key) const isEmptyWrite = !isValuelessOperator(operator) && (nextValue == null || (typeof nextValue === "string" && nextValue.trim() === "") || (Array.isArray(nextValue) && nextValue.length === 0)) const value = isValuelessOperator(operator) ? undefined : nextValue writeEditing( isEmptyWrite ? cleaned : [...cleaned, { key, operator, value }] ) } function setEntryOperator(key: string, nextOperator: string) { if (definitionMap.get(key)?.disabled) return writeEditing((current) => current.map((entry) => entry.key === key ? { ...entry, operator: nextOperator } : entry ) ) } function removeEditingEntry(key: string) { if (definitionMap.get(key)?.disabled) return writeEditing((current) => current.filter((entry) => entry.key !== key)) } function clearEditingEntries() { writeEditing([]) } function commitDirect(next: FilterValue[]) { if (disabled) return if (!isControlled) setInternalCommitted(next) onValueChange?.(next) } function removeCommittedKey(key: string) { commitDirect(committed.filter((entry) => entry.key !== key)) } function clearAllCommitted() { commitDirect([]) } function applyDraftPress() { const pruned = draft.filter((entry) => isActiveFilterValue(definitionMap.get(entry.key), entry) ) commitDirect(pruned) baseSetOpen(false) setDraft([]) } function cancelDraftPress() { baseSetOpen(false) } const activeCount = getActiveFilterCount(committed, filters ?? []) const controller: FilterBarControllerValue = { mode, orderedDefinitions: definitionMap.ordered(), definitionOf: definitionMap.get, committed, editing, hasDraft, open, activeCount, activeEntries: committed, labels: resolvedLabels, searchThreshold: searchableThreshold, showOptionCounts, valuesDisplay, disabled, openPanel: (options: { focusKey?: string } = {}) => { if (disabled) return const { focusKey } = options pendingFocusKey.current = focusKey setOpen(true) }, closePanel: () => baseSetOpen(false), applyDraft: applyDraftPress, cancelDraft: cancelDraftPress, setEntry, setEntryOperator, removeEditing: removeEditingEntry, clearEditing: clearEditingEntries, removeCommitted: removeCommittedKey, clearCommitted: clearAllCommitted, registerFocusGroup, } return (

{children ?? ( )}

) } /* ------------------------------------------------------------------ */ /* Default arrangement */ /* ------------------------------------------------------------------ */ /** Trigger, chips, Clear all, then a panel anchored to the trigger. */ function FilterBarDefaultSurface({ mobileBreakpoint, popoverAlign, }: { mobileBreakpoint: number popoverAlign: "start" | "center" | "end" }) { const isNarrow = useNarrowViewport(mobileBreakpoint) const controller = useController("FilterBar") const panelColumnCount = Math.min( Math.max(controller.orderedDefinitions.length, 1), 2 ) const defaultPanelMaxWidth = `${4 + panelColumnCount * 20}rem` const chipsRow = ( <> ) // Base UI triggers attach their ref and click behavior to whatever element // they render, so the trigger must be a real Button, not a wrapper that // swallows props. const triggerElement = ( ) return (

{isNarrow ? ( next ? controller.openPanel() : controller.closePanel() } > {chipsRow} ) : ( <> next ? controller.openPanel() : controller.closePanel() } > {chipsRow} )}

) } /** The removable record of everything currently filtering the view. */ const CHIP_ROW_GAP_PX = 8 const OVERFLOW_INDICATOR_CLASS = "shrink-0 rounded-[var(--hui-radius-full)] px-(--hui-space-2) py-(--hui-space-1) text-[var(--hui-color-foreground-base-secondary)] [font-size:var(--hui-font-size-mini)]" /** * Shows one chip per active filter, trimmed with its human-readable value. * In collapse mode a pre-paint measurement keeps the row stable, then hides * whatever does not fit behind a single "+N" control. */ function FilterBarChipsRow({ className }: { className?: string }) { const { activeEntries, orderedDefinitions, definitionOf, valuesDisplay, labels, } = useController("FilterBarChipsRow") const containerRef = React.useRef(null) // null means every chip fits or the first pre-paint measure has not run. const [fitCount, setFitCount] = React.useState(null) const orderedChips = React.useMemo(() => { const byPriority = orderedDefinitions.flatMap((definition) => { const matching = activeEntries.find((entry) => entry.key === definition.key) return matching ? [{ entry: matching, definition }] : [] }) const withoutDefinitions = activeEntries .filter((entry) => !definitionOf(entry.key)) .map((entry) => ({ entry, definition: { key: entry.key, label: entry.key, type: "custom" as FilterType, }, })) return [...byPriority, ...withoutDefinitions] }, [activeEntries, orderedDefinitions, definitionOf]) const isWrap = valuesDisplay === "wrap" React.useLayoutEffect(() => { const container = containerRef.current if (!container || isWrap || typeof ResizeObserver === "undefined") return let frame = requestAnimationFrame(measure) function measure() { if (!container) return const limit = container.clientWidth const chipSlots = Array.from(container.children).filter( (node): node is HTMLElement => node instanceof HTMLElement && node.dataset.chipSlot != null ) const totalChipWidth = chipSlots.reduce( (width, slot, index) => width + slot.getBoundingClientRect().width + (index === 0 ? 0 : CHIP_ROW_GAP_PX), 0 ) if (totalChipWidth <= limit) { setFitCount(null) return } const overflowMeasure = container.querySelector( "[data-overflow-measure]" ) const chipLimit = Math.max( 0, limit - (overflowMeasure?.getBoundingClientRect().width ?? 0) - CHIP_ROW_GAP_PX ) let usedWidth = 0 let visible = 0 for (const slot of chipSlots) { const slotWidth = slot.getBoundingClientRect().width const gap = visible === 0 ? 0 : CHIP_ROW_GAP_PX if (usedWidth + gap + slotWidth > chipLimit) break usedWidth += gap + slotWidth visible += 1 } setFitCount(visible) } const observer = new ResizeObserver(() => { cancelAnimationFrame(frame) frame = requestAnimationFrame(measure) }) observer.observe(container) return () => { observer.disconnect() cancelAnimationFrame(frame) } }, [isWrap, orderedChips, labels]) if (orderedChips.length === 0) { return (

) } const collapsed = !isWrap && fitCount != null const visibleChipCount = collapsed ? fitCount : orderedChips.length const hiddenCount = orderedChips.length - visibleChipCount return (

{orderedChips.map(({ entry, definition }, index) => { const isChipHidden = collapsed && index >= visibleChipCount return (

) })} {!isWrap ? ( ) : null} {hiddenCount > 0 ? ( ) : null}

) } function OverflowIndicator({ hiddenCount }: { hiddenCount: number }) { const { labels, openPanel, disabled } = useController("OverflowIndicator") return (

) } /** * One active filter: label plus readable value, opening its group again on * click, removing it straight away through the cross control. */ export function FilterBarChip({ entry, definition, }: { entry: FilterValue definition: FilterDefinition }) { const { openPanel, removeCommitted, disabled, labels } = useController("FilterBarChip") const valueText = formatFilterValueText(definition, entry) const isDisabled = disabled || Boolean(definition.disabled) return (

) } /* ------------------------------------------------------------------ */ /* Composable parts */ /* ------------------------------------------------------------------ */ /** Standalone chip list for custom toolbar arrangements. */ export function FilterBarValues({ className }: { className?: string }) { return } /** One committed filter rendered with the shared chip presentation. */ export function FilterBarValue({ filterKey }: { filterKey: string }) { const { committed, definitionOf } = useController("FilterBarValue") const definition = definitionOf(filterKey) const entry = committed.find((item) => item.key === filterKey) if (!definition || !entry) return null return } /** Action row for apply mode; defaults to Cancel plus Apply filters. */ export function FilterBarFooter({ className, children, }: { className?: string children?: React.ReactNode }) { return ( ) } export function FilterBarClear() { return } function FilterBarClearAction() { const { activeCount, clearCommitted, labels, disabled } = useController("FilterBarClear") // Nothing to clear means nothing to show; never render a dead action. if (activeCount === 0) return null return ( ) } export function FilterBarToolbar({ className, children, }: { className?: string children: React.ReactNode }) { return ( {children} ) } /** * Toggles the Filter Bar panel from anywhere inside a FilterBar. The default * surface wires this automatically; composed layouts embed it wherever their * design needs it. */ export function FilterBarTrigger(props: Omit, "onClick" | "children">) { const { open, openPanel, closePanel, labels, activeCount, disabled } = useController("FilterBarTrigger") return ( (open ? closePanel() : openPanel())} labels={labels} activeCount={activeCount} disabled={disabled || props.disabled} /> ) } interface TriggerCoreProps extends Omit, "children"> { isOpen: boolean onToggle: () => void labels: FilterBarLabels activeCount: number } function FilterBarTriggerCore({ isOpen, onToggle, labels, activeCount, ...props }: TriggerCoreProps) { return ( ) } /** * Presentational panel card for pinned layouts. The default FilterBar owns * the floating Popover and Sheet; this part shares their inner structure. */ export function FilterBarContent({ className, children, }: { className?: string children?: React.ReactNode }) { return (

{children ?? ( <> )}

) } export function FilterBarHeader({ className, children, }: { className?: string children?: React.ReactNode }) { const { labels } = useController("FilterBarHeader") return (

{children ?? {labels.title}}

) } function DraftClearAction() { const { hasDraft, editing, clearEditing, labels, disabled } = useController("DraftClearAction") // Instant mode holds nothing back, so clearing a draft would lie about state. if (!hasDraft || editing.length === 0) return null return ( ) } export function FilterBarTitle(props: React.ComponentProps<"h2">) { const { labels } = useController("FilterBarTitle") return (

{props.children ?? labels.title}

) } export function FilterBarGroups({ className }: { className?: string }) { const { orderedDefinitions } = useController("FilterBarGroups") return (

{orderedDefinitions.map((definition) => ( ))}

) } /** Renders exactly one filter's controls inside the shared group chrome. */ export function FilterBarGroup({ filterKey }: { filterKey: string }) { const { definitionOf } = useController("FilterBarGroup") const definition = definitionOf(filterKey) if (!definition) return null return } function countSelectedOptions( definition: FilterDefinition, entry: FilterValue | undefined ) { if (definition.type !== "multi-select" || !Array.isArray(entry?.value)) { return 0 } return entry.value.length } function FilterBarGroupSection({ definition, }: { definition: FilterDefinition }) { const { editing, registerFocusGroup, disabled } = useController("FilterBarGroupSection") const entry = editing.find((item) => item.key === definition.key) const selectedOptionCount = countSelectedOptions(definition, entry) const sectionRef = React.useCallback( (node: HTMLElement | null) => { registerFocusGroup(definition.key, node) }, [registerFocusGroup, definition.key] ) return (

{definition.label} {selectedOptionCount > 0 ? selectedOptionCount : ""}

{renderFilterControl(definition, entry)}

) } export function FilterBarGroupLabel({ children }: { children: React.ReactNode }) { return ( {children} ) } /** Commits the draft, reports it upward, and closes the panel. */ export function FilterBarApply(props: Omit, "onClick">) { const { applyDraft, labels, disabled } = useController("FilterBarApply") return ( ) } /** Throws away draft changes and closes the panel. */ export function FilterBarCancel(props: Omit, "onClick" | "variant">) { const { cancelDraft, labels } = useController("FilterBarCancel") return ( ) } /* ------------------------------------------------------------------ */ /* Panel body shared by popover and sheet */ /* ------------------------------------------------------------------ */ function FilterBarPanelBody({ variant }: { variant: "popover" | "sheet" }) { const { mode, labels } = useController("FilterBarPanelBody") const isSheet = variant === "sheet" return (

{isSheet ? {labels.title} : null}

{mode === "apply" ? ( <> {isSheet ? ( ) : ( )} ) : null}

) } 50:Tf98,"use client" import * as React from "react" import type { FilterDefinition, FilterValue, } from "./filter-bar-types" export type FilterBarMode = "instant" | "apply" export interface FilterBarLabels { /** Accessible name of the trigger button. */ trigger: string /** Announced after the trigger name along with the active count. */ triggerActiveSuffix: (count: number) => string /** Heading inside the filter panel. */ title: string /** Removes every committed filter from the bar. */ clearAll: string /** Removes every draft filter from the open panel header. */ clearPanel: string cancel: string apply: string moreCount: (count: number) => string removeFilter: (label: string) => string loadingOptions: string retryOptions: string optionsError: string noMatches: (query: string) => string } export const DEFAULT_FILTER_BAR_LABELS: FilterBarLabels = { trigger: "Filter", triggerActiveSuffix: (count) => `${count} active filter${count === 1 ? "" : "s"}`, title: "Filters", clearAll: "Clear all", clearPanel: "Clear all filters", cancel: "Cancel", apply: "Apply filters", moreCount: (count) => `+${count}`, removeFilter: (label) => `Remove ${label} filter`, loadingOptions: "Loading...", retryOptions: "Try again", optionsError: "Could not load these options.", noMatches: (query) => `No results match "${query}".`, } /** * Keeps Date objects intact across draft copies so committed ranges and * drafts stay comparable without serialization surprises. */ export function cloneFilterEntryValue(value: unknown): unknown { if (value instanceof Date) return new Date(value.getTime()) if (Array.isArray(value)) return value.map(cloneFilterEntryValue) if (typeof value === "object" && value != null) { const copy: Record = {} for (const [part, partValue] of Object.entries( value as Record )) { copy[part] = cloneFilterEntryValue(partValue) } return copy } return value } export function cloneFilterValues(values: FilterValue[]): FilterValue[] { return values.map((entry) => ({ ...entry, value: cloneFilterEntryValue(entry.value), })) } /* ------------------------------------------------------------------ */ /* Controller shared by every part */ /* ------------------------------------------------------------------ */ interface FilterBarControllerValue { mode: FilterBarMode orderedDefinitions: FilterDefinition[] definitionOf: (key: string) => FilterDefinition | undefined /** Filters owned by the application right now. */ committed: FilterValue[] /** The surface fields read and write while a panel is open. */ editing: FilterValue[] hasDraft: boolean open: boolean activeCount: number activeEntries: FilterValue[] labels: FilterBarLabels searchThreshold: number showOptionCounts: boolean valuesDisplay: "collapse" | "wrap" disabled: boolean openPanel: (options?: { focusKey?: string }) => void closePanel: () => void applyDraft: () => void cancelDraft: () => void setEntry: (key: string, value: unknown, operator?: string) => void setEntryOperator: (key: string, operator: string) => void removeEditing: (key: string) => void clearEditing: () => void removeCommitted: (key: string) => void clearCommitted: () => void registerFocusGroup: (key: string, element: HTMLElement | null) => void } export const FilterBarControllerContext = React.createContext(null) export function useController(componentName: string): FilterBarControllerValue { const controller = React.useContext(FilterBarControllerContext) if (!controller) { throw new Error(`${componentName} must be used within FilterBar`) } return controller } /** Field controls read the same controller through the friendlier name. */ export const useFilterBarContext = useController export type { FilterBarControllerValue } 51:T8ce0,"use client" import * as React from "react" import { LoaderCircle as LoaderCircleIcon } from "honestui/icons" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Empty, EmptyDescription, EmptyHeader, EmptyTitle, } from "@/components/ui/empty" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { NumberField, NumberFieldInput, } from "@/components/ui/number-field" import { Radio, RadioGroup } from "@/components/ui/radio-group" import { ScrollArea } from "@/components/ui/scroll-area" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Skeleton } from "@/components/ui/skeleton" import { Switch } from "@/components/ui/switch" import { DateRangePicker, getDateRangePresets, } from "../date-range-picker/date-range-picker" // Type-only import through the sibling component's barrel keeps the served // registry dependency list limited to whole components. import type { DateRange } from "../date-range-picker/date-range-picker" import { useFilterBarContext } from "./filter-bar-context" import type { FilterDefinition, FilterOption, FilterValue, } from "./filter-bar-types" import { getOperatorsFor, isSameDay, OPERATOR_LABELS, resolveDefaultOperator, resolveFilterOptionValue, } from "./filter-bar-utils" function optionKey(option: FilterOption) { return String(option.value) } interface FilterFieldScopeValue { scopeId: string } const FilterFieldScope = React.createContext(null) /** * Wraps every filter control with its group label. Choice groups reference * the label through aria-labelledby; form widgets receive an explicit id. */ export function FilterField({ definition, children, hideLabel = false, }: { definition: FilterDefinition children: React.ReactNode /** For controls whose own row carries the visible label. */ hideLabel?: boolean }) { const scopeId = React.useId() const { disabled } = useFilterBarContext("FilterField") return (

{definition.label} {children}

) } /** Returns ids that connect controls back to their field label. */ export function useFilterFieldIds() { const scope = React.useContext(FilterFieldScope) if (!scope) { throw new Error( "Filter field controls must be rendered inside FilterField" ) } return { label: `${scope.scopeId}-label`, control: `${scope.scopeId}-control`, description: `${scope.scopeId}-description`, } } function DisabledReasonNotice({ definition }: { definition: FilterDefinition }) { const { description } = useFilterFieldIds() if (!definition.disabledReason) return null return (

{definition.disabledReason}

) } /** Renders the built-in control matching one definition's type. */ export function renderFilterControl( definition: FilterDefinition, entry?: FilterValue ) { switch (definition.type) { case "text": return case "select": return case "multi-select": return case "number": return case "date": return case "date-range": return case "boolean": return case "custom": return default: return null } } /* ------------------------------------------------------------------ */ /* Operators */ /* ------------------------------------------------------------------ */ const OPERATOR_ARIA_SUFFIX = " rule" function OperatorChoice({ definition, current, onSelect, }: { definition: FilterDefinition current: string | undefined onSelect: (operator: string) => void }) { const { disabled } = useFilterBarContext("OperatorChoice") const { description } = useFilterFieldIds() const operators = getOperatorsFor(definition) const resolved = current ?? resolveDefaultOperator(definition) // A rule picker adds nothing until one value can mean several things. if (operators.length <= 1) return null return ( ) } function RuleValueRow({ definition, current, onSelect, children, }: { definition: FilterDefinition current: string | undefined onSelect: (operator: string) => void children?: React.ReactNode }) { if (getOperatorsFor(definition).length <= 1) return children return (

{children}

) } /* ------------------------------------------------------------------ */ /* Text */ /* ------------------------------------------------------------------ */ function FilterText({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { return ( ) } function FilterTextControl({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const { setEntry, removeEditing, disabled } = useFilterBarContext("FilterText") const { control, label, description } = useFilterFieldIds() const operator = entry?.operator ?? resolveDefaultOperator(definition) const hidesInput = operator === "is-empty" || operator === "is-not-empty" const value = typeof entry?.value === "string" ? entry.value : "" return ( <> setEntry(definition.key, hidesInput ? undefined : value, next) } > {hidesInput ? null : ( event.target.value.trim() === "" ? removeEditing(definition.key) : setEntry(definition.key, event.target.value) } disabled={disabled || definition.disabled} /> )} ) } /* ------------------------------------------------------------------ */ /* Single choice */ /* ------------------------------------------------------------------ */ function FilterSelect({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { return ( ) } function FilterSelectControl({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const { setEntry, removeEditing, disabled } = useFilterBarContext("FilterSelect") const { description } = useFilterFieldIds() const hasSelection = entry?.value != null && entry.value !== "" const selected = hasSelection ? String(entry?.value) : null return ( <> setEntry(definition.key, hasSelection ? entry?.value : undefined, next) } > ) } /* ------------------------------------------------------------------ */ /* Multi choice */ /* ------------------------------------------------------------------ */ interface AsyncListSnapshot { options: FilterOption[] query: string status: "idle" | "loading" | "error" } const ASYNC_REQUEST_DEBOUNCE_MS = 250 /** * Checkbox list behind multi-select filters. Search runs locally until a * loader exists, selected values survive filtering, and failures never wipe * what the user already sees. */ function MultiChoiceList({ definition, selectedValues, onToggle, }: { definition: FilterDefinition selectedValues: Set onToggle: (option: FilterOption, checked: boolean) => void }) { const { labels, searchThreshold, showOptionCounts, disabled } = useFilterBarContext("FilterMultiSelect") const { label, description } = useFilterFieldIds() const isDisabled = disabled || Boolean(definition.disabled) const EMPTY_OPTIONS: FilterOption[] = [] const staticOptions = definition.options ?? EMPTY_OPTIONS const loadOptions = definition.loadOptions const searchesLocally = definition.searchable ?? (!loadOptions && staticOptions.length > Math.max(searchThreshold, 0)) const [query, setQuery] = React.useState("") const [retryToken, setRetryToken] = React.useState(0) const requestCounter = React.useRef(0) const debounceTimerRef = React.useRef(undefined) const [snapshot, setSnapshot] = React.useState({ options: [], query: "", status: "idle", }) React.useEffect(() => { if (!loadOptions) return // Requests cancel by comparing nonces; aborting fetches the app owns // stays out of scope here. const nonce = ++requestCounter.current debounceTimerRef.current = window.setTimeout(() => { setSnapshot((current) => ({ ...current, status: "loading" })) loadOptions(query) .then((options) => { if (requestCounter.current !== nonce) return setSnapshot({ options, query, status: "idle" }) }) .catch(() => { if (requestCounter.current !== nonce) return // Previous results stay on screen; only status changes. setSnapshot((current) => ({ ...current, status: "error" })) }) }, ASYNC_REQUEST_DEBOUNCE_MS) return () => window.clearTimeout(debounceTimerRef.current) }, [query, retryToken, loadOptions]) const baseOptions = loadOptions ? snapshot.options : staticOptions const matched = React.useMemo(() => { if (loadOptions) { return baseOptions } const needle = query.trim().toLowerCase() if (!searchesLocally || !needle) return baseOptions return baseOptions.filter((option) => option.label.toLowerCase().includes(needle) ) }, [baseOptions, query, searchesLocally, loadOptions]) // Selected values filtered out of view stay listed so users find them. const visible = React.useMemo(() => { const matchedKeys = new Set(matched.map(optionKey)) const missingSelected = [...selectedValues] .filter((key) => !matchedKeys.has(key)) .map((key) => [...staticOptions, ...matched].find( (option) => optionKey(option) === key ) ) .filter((option): option is FilterOption => option != null) return [...missingSelected, ...matched] }, [matched, selectedValues, staticOptions]) const isLoading = Boolean(loadOptions) && snapshot.status === "loading" const isError = Boolean(loadOptions) && snapshot.status === "error" const emptyResult = !isLoading && (searchesLocally || loadOptions) && visible.length === 0 const scrollable = visible.length > 6 return (

{searchesLocally || loadOptions ? ( setQuery(event.target.value)} disabled={isDisabled} /> ) : null}

onToggle(option, checked === true) } /> {option.label} {showOptionCounts && option.count != null ? ( {option.count.toLocaleString()} ) : null}

{isLoading && snapshot.options.length > 0 ? (

{labels.loadingOptions}

) : null} {isError ? (

{labels.optionsError}

) : null} {emptyResult ? ( No matches {labels.noMatches(query)} ) : null}

) } function FilterMultiSelect({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const { setEntry } = useFilterBarContext("FilterMultiSelect") const selectedEntries = Array.isArray(entry?.value) ? entry.value : [] const selectedValues = new Set(selectedEntries.map(String)) function toggleOption(option: FilterOption, checked: boolean) { const nextValues = new Map( selectedEntries.map((selected) => [String(selected), selected]) ) if (checked) { nextValues.set(optionKey(option), option.value) } else { nextValues.delete(optionKey(option)) } setEntry(definition.key, [...nextValues.values()], "is") } return ( ) } /* ------------------------------------------------------------------ */ /* Number */ /* ------------------------------------------------------------------ */ function finiteNumber(input: unknown): number | undefined { return typeof input === "number" && Number.isFinite(input) ? input : undefined } function AmountInput({ definition, idSuffix, amount, onAmountChange, }: { definition: FilterDefinition idSuffix: string amount: number | undefined onAmountChange: (amount: number | undefined) => void }) { const { control, description } = useFilterFieldIds() const { disabled } = useFilterBarContext("AmountInput") const { prefix, suffix, min, max, step, maximumFractionDigits } = definition.meta ?? {} return ( onAmountChange(finiteNumber(next))} disabled={disabled || definition.disabled} className="w-full min-w-0" >

{prefix ? ( ) : null} {suffix ? ( ) : null}

) } function FilterNumber({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const { setEntry } = useFilterBarContext("FilterNumber") const operator = entry?.operator ?? resolveDefaultOperator(definition) const between = operator === "between" const hidesInput = operator === "is-empty" || operator === "is-not-empty" const range = between && typeof entry?.value === "object" && entry.value != null ? (entry.value as { min?: number; max?: number }) : {} function writeRange(part: "min" | "max", amount: number | undefined) { const merged = { ...range, [part]: amount } if (merged.min == null && merged.max == null) { setEntry(definition.key, null) return } setEntry(definition.key, merged, "between") } return ( setEntry(definition.key, entry?.value ?? undefined, next) } > {between ? (

writeRange("min", amount)} /> writeRange("max", amount)} />

) : hidesInput ? null : ( setEntry(definition.key, amount ?? null) } /> )} ) } /* ------------------------------------------------------------------ */ /* Dates */ /* ------------------------------------------------------------------ */ function toDateInputString(date: unknown): string { if (!(date instanceof Date) || isNaN(date.getTime())) return "" const year = String(date.getFullYear()).padStart(4, "0") const month = String(date.getMonth() + 1).padStart(2, "0") return `${year}-${month}-${String(date.getDate()).padStart(2, "0")}` } function fromDateInputString(input: string): Date | undefined { if (!input) return undefined const [year, month, day] = input.split("-").map(Number) if (!year || !month || !day) return undefined return new Date(year, month - 1, day) } function FilterDate({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { return ( ) } function FilterDateControl({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const { setEntry, disabled } = useFilterBarContext("FilterDate") const { control, label, description } = useFilterFieldIds() const operator = entry?.operator ?? resolveDefaultOperator(definition) const presets = definition.meta?.datePresets const pickedDay = entry?.value instanceof Date ? entry.value : undefined const activePresetLabel = pickedDay != null && presets ? presets.find((preset) => { const resolved = preset.value() if (resolved.to != null) { // Range presets belong to FilterDateRange. return false } return resolved.from != null && isSameDay(resolved.from, pickedDay) })?.label ?? "" : "" return ( <> setEntry(definition.key, pickedDay ?? undefined, next) } > { const date = fromDateInputString(event.target.value) setEntry(definition.key, date ?? null) }} disabled={disabled || definition.disabled} aria-describedby={ definition.disabledReason ? description : undefined } aria-label={ presets && presets.length > 0 ? `${definition.label}, exact date` : `${definition.label} ${operator.replace(/-/g, " ")}` } /> {presets && presets.length > 0 ? ( { const preset = presets.find((candidate) => candidate.label === next) if (!preset) { setEntry(definition.key, null) return } const resolved = preset.value() if (resolved.from) { setEntry(definition.key, resolved.from) } }} className="gap-y-0.5" > {presets.map((preset) => ( {preset.label} ))} ) : null} ) } type PickerPresets = NonNullable< React.ComponentProps["presets"] > function adaptDateRangePresets( presets: NonNullable["datePresets"] ): PickerPresets { if (!presets) { return getDateRangePresets() as unknown as PickerPresets } const source = presets return source.map((preset) => ({ label: preset.label, getValue: () => { const resolved = preset.value() return { from: resolved.from instanceof Date ? resolved.from : undefined, to: resolved.to instanceof Date ? resolved.to : undefined, } as DateRange }, })) } function FilterDateRange({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { return ( ) } function FilterDateRangeControl({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const { setEntry, removeEditing, disabled } = useFilterBarContext("FilterDateRange") const { description } = useFilterFieldIds() const raw = (entry?.value ?? {}) as { from?: Date; to?: Date } const value: DateRange = { from: raw.from instanceof Date ? raw.from : undefined, to: raw.to instanceof Date ? raw.to : undefined, } const complete = value.from != null && value.to != null const pickerPresets = React.useMemo( () => adaptDateRangePresets(definition.meta?.datePresets), [definition.meta?.datePresets] ) return ( <> { if (next?.from && next.to) { setEntry(definition.key, { from: next.from, to: next.to }) return } removeEditing(definition.key) }} presets={pickerPresets} confirmMode numberOfMonths={1} clearable={false} disabled={disabled || definition.disabled} aria-label={definition.label} aria-describedby={ definition.disabledReason ? description : undefined } /> ) } /* ------------------------------------------------------------------ */ /* Boolean */ /* ------------------------------------------------------------------ */ const BOOLEAN_CHOICES = [ { label: "Any", stored: "any" }, { label: "Yes", stored: "yes" }, { label: "No", stored: "no" }, ] as const function BooleanRadioChoice({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const { setEntry, removeEditing, disabled } = useFilterBarContext("FilterBoolean") const { label, description } = useFilterFieldIds() return ( { if (next === "any") { removeEditing(definition.key) return } setEntry(definition.key, next === "yes") }} className="gap-y-0.5" > {BOOLEAN_CHOICES.map((choice) => ( {choice.label} ))} ) } function BooleanSwitchChoice({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const { setEntry, disabled } = useFilterBarContext("FilterBoolean") const { label, description } = useFilterFieldIds() // The switch keeps Yes/No meaning even when off, so the chip reports state // while the filter being present means active. return (

setEntry(definition.key, checked, "is")} disabled={disabled || definition.disabled} />

) } function FilterBoolean({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const style = definition.meta?.booleanStyle ?? "radio" const control = style === "switch" ? ( ) : ( ) return ( {control} ) } /* ------------------------------------------------------------------ */ /* Custom renderer */ /* ------------------------------------------------------------------ */ function FilterCustom({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { return ( ) } function FilterCustomControl({ definition, entry, }: { definition: FilterDefinition entry?: FilterValue }) { const { setEntry, removeEditing, disabled } = useFilterBarContext("FilterCustom") const { label, description } = useFilterFieldIds() if (!definition.render) return null return ( <> {definition.render({ value: entry?.value, operator: entry?.operator, onChange: (next) => next == null ? removeEditing(definition.key) : setEntry(definition.key, next), clear: () => removeEditing(definition.key), disabled: disabled || Boolean(definition.disabled), definition, labelId: label, descriptionId: definition.disabledReason ? description : undefined, })} ) } 52:Tce1,import type * as React from "react" export type FilterType = | "text" | "select" | "multi-select" | "number" | "date" | "date-range" | "boolean" | "custom" export type TextOperator = | "contains" | "does-not-contain" | "is" | "is-not" | "starts-with" | "ends-with" | "is-empty" | "is-not-empty" export type SelectOperator = "is" | "is-not" export type NumberOperator = | "equals" | "not-equals" | "greater-than" | "greater-than-or-equal" | "less-than" | "less-than-or-equal" | "between" | "is-empty" | "is-not-empty" export type DateOperator = "on" | "before" | "after" export type BooleanOperator = "is" | "any" export type FilterOperator = | TextOperator | SelectOperator | NumberOperator | DateOperator | BooleanOperator /** * One active filter. This is Filter Bar UI state; applications transform it * into their own query shape for tables, URLs, or APIs. */ export interface FilterValue { key: string operator?: string value: unknown } /** One choice inside a select, multi-select, radio, or checkbox list. */ export interface FilterOption { label: string /** Use strings or numbers so defaults like chips and forms stay simple. */ value: string | number count?: number disabled?: boolean } export interface FilterTextMeta { placeholder?: string } export interface FilterNumberMeta { prefix?: string suffix?: string min?: number max?: number step?: number /** Rough number formatting controls forwarded to NumberField. */ maximumFractionDigits?: number } export interface FilterDateRangePreset { label: string value: () => { from: Date; to?: Date } } export interface FilterDefinition { key: string label: string type: FilterType /** Operators follow each type's documented order. */ operators?: FilterOperator[] options?: FilterOption[] /** Turns on search below this many options too. */ searchable?: boolean /** Options may change after other selections do. */ disabled?: boolean /** Explain why a disabled filter cannot be used yet. */ disabledReason?: string defaultOperator?: string /** Replaces the automatic chip text for one filter. */ formatValue?: (value: unknown) => string /** Lower sorts earlier in the panel and among initial values. */ priority?: number placeholder?: string /** Extra settings passed straight to the matching control. */ meta?: FilterTextMeta & FilterNumberMeta & { datePresets?: FilterDateRangePreset[] /** "switch" hides yes/no uncertainty behind one toggle. */ booleanStyle?: "radio" | "switch" } /** Loads server-backed options. Provide your own debounce when needed. */ loadOptions?: (query: string) => Promise /** Renders controls for values outside the built-in types. */ render?: FilterCustomRenderer } export interface FilterRenderProps { value: unknown operator?: string onChange: (value: unknown) => void clear: () => void disabled: boolean definition: FilterDefinition /** Connect the custom control to Filter Bar's field label. */ labelId: string /** Connect the custom control to its disabled explanation when present. */ descriptionId?: string } type FilterCustomRenderer = (props: FilterRenderProps) => React.ReactNode 53:T29ec,import type { FilterDefinition, FilterOperator, FilterType, FilterValue, } from "./filter-bar-types" export const OPERATOR_LABELS: Record = { contains: "Contains", "does-not-contain": "Does not contain", is: "Is", "is-not": "Is not", "starts-with": "Starts with", "ends-with": "Ends with", "is-empty": "Is empty", "is-not-empty": "Is not empty", equals: "Equals", "not-equals": "Does not equal", "greater-than": "Greater than", "greater-than-or-equal": "Greater than or equal", "less-than": "Less than", "less-than-or-equal": "Less than or equal", between: "Between", on: "On", before: "Before", after: "After", any: "Any of", } const DEFAULT_OPERATORS: Record = { text: ["contains", "does-not-contain", "is", "is-not", "starts-with", "ends-with", "is-empty", "is-not-empty"], select: ["is", "is-not"], "multi-select": ["is"], number: [ "equals", "not-equals", "greater-than", "greater-than-or-equal", "less-than", "less-than-or-equal", "between", "is-empty", "is-not-empty", ], date: ["on", "before", "after"], "date-range": ["between"], boolean: ["is"], custom: ["is"], } export function getDefaultOperators(type: FilterType) { return DEFAULT_OPERATORS[type] ?? ["is"] } export function getOperatorsFor( definition: FilterDefinition ): FilterOperator[] { if (definition.operators && definition.operators.length > 0) { return definition.operators } return getDefaultOperators(definition.type) } export function resolveDefaultOperator(definition: FilterDefinition) { const operators = getOperatorsFor(definition) if (definition.defaultOperator && operators.includes(definition.defaultOperator as FilterOperator)) { return definition.defaultOperator } return operators[0] } /** Operators where the selected rule carries the meaning on its own. */ export function isValuelessOperator(operator: string | undefined) { return operator === "is-empty" || operator === "is-not-empty" } export function needsTwoValues(operator: string | undefined) { return operator === "between" } export interface ResolvedDateRange { from?: Date to?: Date } function startOfDate(date: Date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()) } export function isSameDay(a: Date | undefined, b: Date | undefined) { if (!a || !b) return false const aDay = startOfDate(a).getTime() const bDay = startOfDate(b).getTime() return aDay === bDay } /** * Matches committed ranges against known presets so chips can read * "Last 30 days" instead of two raw dates. */ export function matchDatePresets( range: ResolvedDateRange, presets: Array<{ label: string; value: () => ResolvedDateRange }> ) { if (!range.from || !range.to) return undefined for (const preset of presets) { const candidate = preset.value() if ( candidate.from && candidate.to && isSameDay(candidate.from, range.from) && isSameDay(candidate.to, range.to) ) { return preset.label } } return undefined } const numberFormatCache = new Map() function formatNumberForDisplay(input: number, fractionDigits?: number) { if (Number.isInteger(input)) { return String(input) } const digits = fractionDigits ?? 2 let formatter = numberFormatCache.get(digits) if (!formatter) { formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: digits, }) numberFormatCache.set(digits, formatter) } return formatter.format(input) } function formatOptionLabels(definition: FilterDefinition, values: unknown[]) { const labels = new Map( (definition.options ?? []).map((option) => [String(option.value), option.label]) ) return values .map((value) => value == null ? "" : labels.get(String(value)) ?? String(value) ) .filter(Boolean) } /** Restores the public option value after string-only UI primitives select it. */ export function resolveFilterOptionValue( definition: Pick, key: string ): string | number { return ( definition.options?.find((option) => String(option.value) === key)?.value ?? key ) } function formatMultiSelectLabels(labels: string[]) { if (labels.length <= 3) return labels.join(", ") return `${labels[0]} +${labels.length - 1}` } export interface FilterNumberDisplayContext { meta?: { prefix?: string; suffix?: string; maximumFractionDigits?: number } } function formatNumberTerm( amount: unknown, context: FilterNumberDisplayContext ) { if (typeof amount !== "number" || !Number.isFinite(amount)) return "" const { prefix = "", suffix = "", maximumFractionDigits } = context.meta ?? {} return `${prefix}${formatNumberForDisplay(amount, maximumFractionDigits)}${suffix}` } function formatNumericPhrase( definition: FilterDefinition, operator: string, value: unknown, context: FilterNumberDisplayContext ) { const term = formatNumberTerm(value, context) if (!term) return "" switch (operator) { case "greater-than": return `Over ${term}` case "less-than": return `Under ${term}` case "greater-than-or-equal": return `${term} or higher` case "less-than-or-equal": return `${term} or lower` case "not-equals": return `Not ${term}` default: return term } } function compactDate(date: Date) { return date.toLocaleDateString(undefined, { month: "short", day: "numeric", }) } /** Returns the readable text shown inside an active filter chip. */ export function formatFilterValueText( definition: FilterDefinition, filterValue: FilterValue ): string { const operator = filterValue.operator ?? resolveDefaultOperator(definition) if (isValuelessOperator(operator)) { return OPERATOR_LABELS[operator] ?? operator } if (definition.formatValue) { return definition.formatValue(filterValue.value) } switch (definition.type) { case "text": { return typeof filterValue.value === "string" ? filterValue.value : "" } case "select": { return formatOptionLabels(definition, [filterValue.value]).join("") || (filterValue.value == null ? "" : String(filterValue.value)) } case "multi-select": { const values = Array.isArray(filterValue.value) ? filterValue.value : [filterValue.value] return formatMultiSelectLabels(formatOptionLabels(definition, values)) } case "number": { if (operator === "between" && typeof filterValue.value === "object") { const range = filterValue.value as { min?: number; max?: number } const min = formatNumberTerm(range.min, { meta: definition.meta }) const max = formatNumberTerm(range.max, { meta: definition.meta }) if (min && max) return `${min} to ${max}` return min || max } return formatNumericPhrase(definition, operator, filterValue.value, { meta: definition.meta, }) } case "date": { if (filterValue.value instanceof Date && !isNaN(filterValue.value.getTime())) { return filterValue.value.toLocaleDateString() } return typeof filterValue.value === "string" ? filterValue.value : "" } case "date-range": { const range = filterValue.value as ResolvedDateRange if (!range?.from && !range?.to) return "" const presets = definition.meta?.datePresets ?? [] const presetLabel = matchDatePresets(range, presets) if (presetLabel) return presetLabel const parts = [ range.from ? compactDate(range.from) : "", range.to ? compactDate(range.to) : "", ].filter(Boolean) return parts.join(" to ") } case "boolean": { if (filterValue.value === true) return "Yes" if (filterValue.value === false) return "No" return "" } default: { if (typeof filterValue.value === "string") return filterValue.value if (Array.isArray(filterValue.value)) { return filterValue.value.map(String).join(", ") } if (filterValue.value == null) return "" return String(filterValue.value) } } } export interface FilterDefinitionMap { get(key: string): FilterDefinition | undefined } export function createFilterDefinitionMap( definitions: FilterDefinition[] ): FilterDefinitionMap & { ordered(): FilterDefinition[] } { const byKey = new Map(definitions.map((definition) => [definition.key, definition])) const orderedDefinitions = [...definitions].sort((a, b) => { const priorityA = a.priority ?? Number.MAX_SAFE_INTEGER const priorityB = b.priority ?? Number.MAX_SAFE_INTEGER return priorityA - priorityB }) return { get: (key) => byKey.get(key), ordered: () => orderedDefinitions, } } function findFilterEntry( values: FilterValue[], key: string ): FilterValue | undefined { return values.find((entry) => entry.key === key) } export { findFilterEntry as getFilterEntry } function normalizeBoolean( definition: FilterDefinition, value: unknown ): boolean { return !(definition.type === "boolean" && value === false) } function hasMeaningfulScalarValue(value: unknown): boolean { if (value == null) return false if (typeof value === "string") return value.trim() !== "" if (typeof value === "number") return Number.isFinite(value) if (Array.isArray(value)) return value.length > 0 if (value instanceof Date) return !isNaN(value.getTime()) if (typeof value === "object") { const record = value as Record return Object.values(record).some(hasMeaningfulScalarValue) } return Boolean(value) } /** * Whether one entry counts as active. Switch-style boolean filters stay * active while present so turning the switch off keeps its meaning. */ export function isActiveFilterValue( definition: FilterDefinition | undefined, entry: FilterValue | undefined ): boolean { if (!definition || !entry) return false if (isValuelessOperator(entry.operator)) return true if (normalizeBoolean(definition, entry.value)) { return hasMeaningfulScalarValue(entry.value) } return true } export function getActiveFilterValues( values: FilterValue[], definitions: Iterable ) { const map = createFilterDefinitionMap([...definitions]) return values.filter((entry) => isActiveFilterValue(map.get(entry.key), entry)) } /** The trigger count counts active fields, never selected options. */ export function getActiveFilterCount(values: FilterValue[], definitions: Iterable) { return getActiveFilterValues(values, definitions).length } 4c:["$","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","honestui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/honestui","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":"honestui"}]]}]}]]}],["$","$L4d",null,{"namespace":"@honestui","registryDependencies":["https://www.honestui.com/r/badge.json","https://www.honestui.com/r/button.json","https://www.honestui.com/r/checkbox.json","https://www.honestui.com/r/date-range-picker.json","https://www.honestui.com/r/empty.json","https://www.honestui.com/r/input.json","https://www.honestui.com/r/label.json","https://www.honestui.com/r/number-field.json","https://www.honestui.com/r/popover.json","https://www.honestui.com/r/radio-group.json","https://www.honestui.com/r/scroll-area.json","https://www.honestui.com/r/select.json","https://www.honestui.com/r/separator.json","https://www.honestui.com/r/sheet.json","https://www.honestui.com/r/skeleton.json","https://www.honestui.com/r/switch.json","https://www.honestui.com/r/toolbar.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"filter-bar.tsx","content":"$4f","type":"registry:component","target":"components/ui/filter-bar/filter-bar.tsx"},{"path":"filter-bar-context.tsx","content":"$50","type":"registry:component","target":"components/ui/filter-bar/filter-bar-context.tsx"},{"path":"filter-bar-fields.tsx","content":"$51","type":"registry:component","target":"components/ui/filter-bar/filter-bar-fields.tsx"},{"path":"filter-bar-types.ts","content":"$52","type":"registry:component","target":"components/ui/filter-bar/filter-bar-types.ts"},{"path":"filter-bar-utils.ts","content":"$53","type":"registry:component","target":"components/ui/filter-bar/filter-bar-utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]