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:T4973,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Badge } from "@/registry/default/badge/badge"; import { Button } from "@/registry/default/button/button"; import { ButtonGroup, ButtonGroupText, } from "@/registry/default/button-group/button-group"; import { Combobox, ComboboxItem, ComboboxTrigger, } from "@/registry/default/combobox/combobox"; import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/registry/default/dropdown-menu/dropdown-menu"; import { Kbd } from "@/registry/default/kbd/kbd"; import { useControllableState } from "@/registry/default/hooks/use-controllable-state"; import { HugeiconsIcon } from "@hugeicons/react"; import { Cancel01Icon, PlusSignIcon } from "@hugeicons/core-free-icons"; import { FilterChipContext, FiltersActionsContext, FiltersAutoOpenContext, FiltersStateContext, useFilterChip, useFiltersActions, useFiltersAutoOpen, useFiltersState, } from "./filters-context"; import { FilterChipValue, FilterSearchPopup } from "./filters-value-controls"; import { createFilter, describeFilter, FILTER_SIZES, patchFilter, resolveOperators, } from "./lib/filters-utils"; import type { FilterChipProps, FilterField, FiltersBarProps, FiltersLabels, FiltersProps, FiltersProviderProps, FilterValue, } from "./lib/filters-types"; const DEFAULT_LABELS: FiltersLabels = { add: "Add filter", clear: "Clear", searchFields: "Filter...", searchValues: "Search...", noFields: "No filters found.", noResults: "No results found.", selectValue: "Select...", enterValue: "Enter value", value: "Value", min: "Min", max: "Max", operator: "operator", removeFilter: (fieldLabel) => `Remove ${fieldLabel} filter`, }; const LABEL_KEYS = Object.keys(DEFAULT_LABELS) as (keyof FiltersLabels)[]; /** Small muted wrapper that normalizes field icons to 14px. */ function FieldIcon({ children }: { children?: React.ReactNode }) { if (!children) return null; return ( {children} ); } /** * Moves focus to the adjacent chip's remove button (or the add-filter trigger) * before a chip is removed, so focus never falls to ``. */ function focusAdjacentChip(chip: HTMLElement | null) { const bar = chip?.closest('[data-slot="filters"]'); if (!chip || !bar) return; const chips = Array.from( bar.querySelectorAll('[data-slot="filter-chip"]'), ); const index = chips.indexOf(chip); const neighbor = chips[index + 1] ?? chips[index - 1]; const target = neighbor?.querySelector('[data-slot="filter-chip-remove"]') ?? bar.querySelector('[data-slot="filter-add"]'); target?.focus(); } /** * Owns filter state and provides it via context, without rendering any layout. * Wrap it around a `FiltersBar` plus any external UI (a results count, saved * views, an apply button) that should share the state through `useFilters`. */ function FiltersProvider({ fields, value, defaultValue = [], onValueChange, size = "default", allowDuplicateFields = false, labels: labelsProp, children, }: FiltersProviderProps) { const [filters, setFilters] = useControllableState({ value, defaultValue, onValueChange, }); // Tracks the freshly added filter so its value control opens on mount. The // chip consumes (clears) the flag once mounted, so later remounts of the // value control don't spuriously re-open it. const [lastAddedId, setLastAddedId] = React.useState(null); const clearAutoOpen = React.useCallback(() => setLastAddedId(null), []); const labels = React.useMemo( () => ({ ...DEFAULT_LABELS, ...labelsProp }), // Value-level deps (constant length — FiltersLabels is a closed shape) so // an inline `labels={{ ... }}` object doesn't churn the actions context. // Caveat: `removeFilter` is a function, so an inline arrow for it is a // new identity every render and still churns; hoist it in that case. // eslint-disable-next-line react-hooks/exhaustive-deps LABEL_KEYS.map((key) => labelsProp?.[key]), ); const fieldsById = React.useMemo( () => new Map(fields.map((field) => [field.id, field])), [fields], ); // Keyed by content (not the filters array identity) so the Set stays // referentially stable while a filter's value is being typed. const usedFieldsKey = filters .map((filter) => filter.field) .sort() .join("\u0000"); const usedFieldIds = React.useMemo( () => new Set(usedFieldsKey ? usedFieldsKey.split("\u0000") : []), [usedFieldsKey], ); const addFilter = React.useCallback( (filter: FilterValue) => { setFilters((prev) => [...prev, filter]); setLastAddedId(filter.id); }, [setFilters], ); const removeFilter = React.useCallback( (id: string) => setFilters((prev) => prev.filter((f) => f.id !== id)), [setFilters], ); const clearAll = React.useCallback(() => setFilters([]), [setFilters]); const updateFilter = React.useCallback( (id: string, patch: Partial>) => { setFilters((prev) => prev.map((filter) => filter.id === id ? patchFilter(fieldsById.get(filter.field), filter, patch) : filter, ), ); }, [setFilters, fieldsById], ); // Split contexts: `state` changes per keystroke, `actions` stays stable // (so leaves subscribed via useFiltersActions don't re-render while // typing), and the transient auto-open signal is isolated so its set/consume // cycle per add doesn't churn the actions context either. const stateContext = React.useMemo(() => ({ filters }), [filters]); const autoOpenContext = React.useMemo( () => ({ lastAddedId, clearAutoOpen }), [lastAddedId, clearAutoOpen], ); const actionsContext = React.useMemo( () => ({ fields, size, labels, fieldsById, usedFieldIds, allowDuplicateFields, addFilter, updateFilter, removeFilter, clearAll, }), [ fields, size, labels, fieldsById, usedFieldIds, allowDuplicateFields, addFilter, updateFilter, removeFilter, clearAll, ], ); return ( {children} ); } /** * The flex row. Renders the default layout unless `children` is passed. Only * the default leaves subscribe to filter state, so a bar with custom children * doesn't re-render while a value is being typed. */ function FiltersBar({ shortcut, className, children, ...props }: FiltersBarProps) { return (

{children ?? ( <> )}

); } /** `FiltersProvider` + `FiltersBar` in one component, for the common case. */ function Filters({ fields, value, defaultValue, onValueChange, size, allowDuplicateFields, labels, ...barProps }: FiltersProps) { return ( ); } /** Renders a `FilterChip` for every active filter. */ function FilterChips() { const { filters } = useFiltersState(); const { fieldsById } = useFiltersActions(); return ( <> {filters.map((filter) => { const field = fieldsById.get(filter.field); if (!field) return null; return ; })} ); } // Memoized: chips subscribe only to the stable actions context and untouched // `filter` objects keep their identity across edits, so typing in one chip's // value doesn't re-render the others. const FilterChip = React.memo(function FilterChip({ filter, field: fieldProp, className, children, ...props }: FilterChipProps) { const { size, removeFilter, fieldsById } = useFiltersActions(); const { lastAddedId, clearAutoOpen } = useFiltersAutoOpen(); const field = fieldProp ?? fieldsById.get(filter.field); const autoOpen = filter.id === lastAddedId; // Consume the auto-open flag once this chip has mounted, so later remounts // of the value control (e.g. an operator shape change) don't re-open it. React.useEffect(() => { if (autoOpen) clearAutoOpen(); }, [autoOpen, clearAutoOpen]); const chipContext = React.useMemo( () => (field ? { filter, field, size, autoOpen } : null), [filter, field, size, autoOpen], ); if (!field || !chipContext) return null; return ( { if (event.key !== "Backspace" && event.key !== "Delete") return; // Only remove when focus is on one of the chip's own button // segments; inputs and custom controls keep their editing keys. const target = event.target; const isChipButton = target instanceof HTMLElement && target.tagName === "BUTTON" && (target.dataset.slot === "filter-chip-value" || target.closest( '[data-slot="filter-chip-remove"], [data-slot="filter-chip-operator"]', ) !== null); if (!isChipButton) return; event.preventDefault(); focusAdjacentChip(event.currentTarget); removeFilter(filter.id); }} {...props} > {children ?? ( <> )} ); }); function FilterChipField({ className, children, ...props }: React.ComponentProps<"div">) { const { field, size } = useFilterChip(); return ( {children ?? ( <> {field.icon} {field.label} )} ); } function FilterChipOperator({ className, ...props }: React.ComponentProps) { const { filter, field, size } = useFilterChip(); const { updateFilter, labels } = useFiltersActions(); const operators = resolveOperators(field); const current = operators.find((operator) => operator.id === filter.operator); return ( } > {current?.label ?? filter.operator} updateFilter(filter.id, { operator: next })} > {operators.map((operator) => ( {operator.label} ))} ); } function FilterChipRemove({ className, ...props }: React.ComponentProps) { const { filter, field } = useFilterChip(); const { removeFilter, size, labels } = useFiltersActions(); return ( ); } function FilterAddButton({ children, shortcut, className, ...props }: React.ComponentProps & { /** Key that opens this menu from the keyboard (e.g. `"f"`). */ shortcut?: string; }) { const { fields, usedFieldIds, allowDuplicateFields, addFilter, labels, size, } = useFiltersActions(); const [open, setOpen] = React.useState(false); React.useEffect(() => { if (!shortcut) return; const handleKeyDown = (event: KeyboardEvent) => { // `defaultPrevented` also dedupes multiple Filters instances: the first // listener to accept the key prevents it for the rest. if (event.defaultPrevented) return; if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) { return; } if (event.key.toLowerCase() !== shortcut.toLowerCase()) return; const target = event.target; if (target instanceof HTMLElement) { if ( target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target.isContentEditable ) { return; } // Don't steal the key from open popups (menu typeahead, dialogs). if ( target.closest( '[role="menu"], [role="listbox"], [role="dialog"], [role="alertdialog"]', ) ) { return; } } event.preventDefault(); setOpen(true); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [shortcut]); return ( items={fields} value={null} open={open} onOpenChange={setOpen} onValueChange={(field) => { if (field) addFilter(createFilter(field)); }} itemToStringLabel={(field) => field.label} > ( )} /> {(field: FilterField) => ( {field.icon} {field.label} )} ); } /** Clears every filter. Renders nothing while no filters are active. */ function FilterClearButton({ className, children, ...props }: React.ComponentProps) { const { clearAll, labels, size } = useFiltersActions(); const { filters } = useFiltersState(); if (filters.length === 0) return null; return ( ); } function FilterActiveCount({ className, ...props }: React.ComponentProps) { const { filters } = useFiltersState(); return ( {filters.length} ); } export { Filters, FiltersProvider, FiltersBar, FilterChips, FilterChip, FilterChipField, FilterChipOperator, FilterChipValue, FilterChipRemove, FilterAddButton, FilterClearButton, FilterActiveCount, }; export { useFilters, useFiltersState, useFiltersActions, useFilterChip, } from "./filters-context"; export { createFilter, patchFilter, resolveOperators, defaultOperatorsFor, operatorShape, operatorShapeFor, isValuelessOperator, emptyValueFor, formatFilterValue, describeFilter, asFilterValues, } from "./lib/filters-utils"; export type { FilterField, FilterFieldType, FilterOption, FilterOperator, FilterOperatorShape, FilterValue, FilterSize, FiltersLabels, FiltersProps, FiltersProviderProps, FiltersBarProps, FilterChipProps, FilterValueControlProps, NumberRange, SelectFilterField, MultiSelectFilterField, TextFilterField, NumberFilterField, CustomFilterField, } from "./lib/filters-types"; 53:T13ad,import type * as React from "react"; /** Size of the filter bar and its pills. */ export type FilterSize = "sm" | "default" | "lg"; /** Built-in field types. `custom` renders its own value control. */ export type FilterFieldType = | "select" | "multiselect" | "text" | "number" | "custom"; /** A selectable option for `select` / `multiselect` fields. */ export interface FilterOption { value: string; label: string; icon?: React.ReactNode; } /** * The value shape an operator expects: `"none"` hides the value segment * (`is empty`), `"range"` renders paired min/max inputs on number fields * (`between`), and `"scalar"` renders the field's normal single control. */ export type FilterOperatorShape = "none" | "scalar" | "range"; /** An operator shown in the middle segment of a pill (`is`, `contains`, ...). */ export interface FilterOperator { id: string; label: string; /** Value shape this operator expects. Defaults to `"scalar"`. */ shape?: FilterOperatorShape; /** Sugar for `shape: "none"`, e.g. `is empty` / `is not empty`. */ valueless?: boolean; } interface FilterFieldBase { /** Stable key stored on each filter as `FilterValue.field`. */ id: string; label: string; icon?: React.ReactNode; /** Override the default operators for this field's type. */ operators?: FilterOperator[]; /** Hide specific default operators by id. */ disabledOperators?: string[]; } export interface SelectFilterField extends FilterFieldBase { type: "select"; options: FilterOption[]; placeholder?: string; } export interface MultiSelectFilterField extends FilterFieldBase { type: "multiselect"; options: FilterOption[]; placeholder?: string; /** Maximum number of options that can be selected. */ maxSelections?: number; } export interface TextFilterField extends FilterFieldBase { type: "text"; placeholder?: string; /** Content shown before the input, e.g. `@` or an icon. */ prefix?: React.ReactNode; /** Content shown after the input, e.g. a unit label. */ suffix?: React.ReactNode; } export interface NumberFilterField extends FilterFieldBase { type: "number"; placeholder?: string; step?: number; /** Content shown before the input, e.g. `$`. */ prefix?: React.ReactNode; /** Content shown after the input, e.g. `%` or `hrs`. */ suffix?: React.ReactNode; } export interface CustomFilterField extends FilterFieldBase { type: "custom"; /** Renders the value segment and reports changes back to the filter. */ renderValue: (props: FilterValueControlProps) => React.ReactNode; /** Seed value for a fresh filter of this field. */ defaultValue?: unknown; } export type FilterField = | SelectFilterField | MultiSelectFilterField | TextFilterField | NumberFilterField | CustomFilterField; /** Props passed to a `custom` field's `renderValue`. */ export interface FilterValueControlProps { value: unknown; operator: string; onValueChange: (value: unknown) => void; size: FilterSize; field: FilterField; } /** Value shape for a `number` field when the operator is `between`. */ export interface NumberRange { min: number | null; max: number | null; } /** * A single active filter. `value` is typed by the field: * `select → string | null`, `multiselect → string[]`, `text → string`, * `number → number | null | NumberRange`, `custom → unknown`. */ export interface FilterValue { id: string; field: string; operator: string; value: unknown; } /** Copy overrides for the bar's chrome. */ export interface FiltersLabels { add: string; clear: string; searchFields: string; searchValues: string; noFields: string; noResults: string; selectValue: string; enterValue: string; value: string; min: string; max: string; /** Word used in the operator trigger's accessible name. */ operator: string; /** Builds the accessible label for a pill's remove button. */ removeFilter: (fieldLabel: string) => string; } export interface FiltersProviderProps { /** Field definitions the bar can filter on. */ fields: FilterField[]; /** Controlled list of active filters. */ value?: FilterValue[]; /** Initial filters in uncontrolled mode. */ defaultValue?: FilterValue[]; onValueChange?: (value: FilterValue[]) => void; size?: FilterSize; /** Allow the same field to be added more than once. Defaults to `false`. */ allowDuplicateFields?: boolean; labels?: Partial; children?: React.ReactNode; } export interface FiltersBarProps extends Omit< React.ComponentProps<"div">, "onChange" | "defaultValue" > { /** Key that opens the add-filter menu, forwarded to the default `FilterAddButton`. */ shortcut?: string; } export interface FiltersProps extends Omit, FiltersBarProps {} export interface FilterChipProps extends Omit< React.ComponentProps<"div">, "onChange" > { filter: FilterValue; /** Field definition. Resolved from the `Filters` context when omitted. */ field?: FilterField; } 54:T27c7,import type { FilterField, FilterFieldType, FilterOperator, FilterOperatorShape, FilterSize, FilterValue, NumberRange, } from "./filters-types"; /** * Per-size styling contract shared by every segment of a pill. Restyle here * rather than in the individual components. */ export const FILTER_SIZES: Record< FilterSize, { /** `Button` size for icon-only segments (the remove button). */ iconButton: "icon_sm" | "icon" | "icon_lg"; /** `Input` size for inline text inputs. */ input: "sm" | "default"; /** Height matching the `Button` size, for non-button segments. */ height: string; /** Padding + text classes for the field-label segment. */ fieldLabel: string; } > = { sm: { iconButton: "icon_sm", input: "sm", height: "h-9 sm:h-8", fieldLabel: "px-2.5 text-xs", }, default: { iconButton: "icon", input: "default", height: "h-10 sm:h-9", fieldLabel: "px-3", }, lg: { iconButton: "icon_lg", input: "default", height: "h-11 sm:h-10", fieldLabel: "px-4", }, }; // ----- Value coercers --------------------------------------------------- // `FilterValue.value` is `unknown` (it may arrive from URL state or other // untrusted sources, e.g. `JSON.parse`), so every read goes through a coercer // that rebuilds the expected shape instead of trusting a cast. /** Coerces an unknown filter value to a string (`""` when absent). */ export function asString(value: unknown): string { return typeof value === "string" ? value : ""; } /** Coerces an unknown filter value to a string array. */ export function asStringArray(value: unknown): string[] { return Array.isArray(value) ? value.filter((item): item is string => typeof item === "string") : []; } /** Coerces an unknown filter value to a finite number or `null`. */ export function asNumberOrNull(value: unknown): number | null { return typeof value === "number" && Number.isFinite(value) ? value : null; } /** Rebuilds a `NumberRange`, coercing each bound independently. */ export function asNumberRange(value: unknown): NumberRange { if (typeof value === "object" && value !== null) { const candidate = value as Partial>; return { min: asNumberOrNull(candidate.min), max: asNumberOrNull(candidate.max), }; } return { min: null, max: null }; } /** * Coerces unknown JSON (e.g. a parsed URL param) into a `FilterValue` array, * dropping entries whose envelope (`id` / `field` / `operator`) is malformed. * `value` stays `unknown`; the per-field coercers above handle it downstream. */ export function asFilterValues(value: unknown): FilterValue[] { if (!Array.isArray(value)) return []; return value .filter( (item): item is Record => typeof item === "object" && item !== null, ) .filter( (item) => typeof item.id === "string" && typeof item.field === "string" && typeof item.operator === "string", ) .map((item) => ({ id: item.id as string, field: item.field as string, operator: item.operator as string, value: item.value, })); } /** Default English labels for the built-in operators. */ const OPERATOR_LABELS: Record = { is: "is", is_not: "is not", is_empty: "is empty", is_not_empty: "is not empty", is_any_of: "is any of", is_not_any_of: "is not any of", includes_all: "includes all", contains: "contains", not_contains: "does not contain", starts_with: "starts with", ends_with: "ends with", eq: "=", neq: "≠", gt: ">", lt: "<", between: "between", }; function op(id: string, shape: FilterOperatorShape = "scalar"): FilterOperator { return { id, label: OPERATOR_LABELS[id] ?? id, shape }; } /** The default operator set for a field type, in display order. */ export function defaultOperatorsFor(type: FilterFieldType): FilterOperator[] { switch (type) { case "select": return [ op("is"), op("is_not"), op("is_empty", "none"), op("is_not_empty", "none"), ]; case "multiselect": return [ op("is_any_of"), op("is_not_any_of"), op("includes_all"), op("is_empty", "none"), ]; case "text": return [ op("contains"), op("not_contains"), op("starts_with"), op("ends_with"), op("is"), op("is_empty", "none"), ]; case "number": return [op("eq"), op("neq"), op("gt"), op("lt"), op("between", "range")]; case "custom": default: return [op("is")]; } } /** Resolves the operators available for a field, honoring overrides. */ export function resolveOperators(field: FilterField): FilterOperator[] { const base = field.operators ?? defaultOperatorsFor(field.type); if (!field.disabledOperators?.length) return base; const disabled = new Set(field.disabledOperators); return base.filter((operator) => !disabled.has(operator.id)); } /** The value shape an operator declares (`valueless` is sugar for `"none"`). */ export function operatorShape(operator: FilterOperator): FilterOperatorShape { return operator.shape ?? (operator.valueless ? "none" : "scalar"); } /** Resolves the value shape for a field's operator by id. */ export function operatorShapeFor( field: FilterField, operatorId: string, ): FilterOperatorShape { const operator = resolveOperators(field).find((o) => o.id === operatorId); return operator ? operatorShape(operator) : "scalar"; } /** Whether the given operator hides the value segment. */ export function isValuelessOperator( field: FilterField, operatorId: string, ): boolean { return operatorShapeFor(field, operatorId) === "none"; } /** A typed empty value for a fresh filter of `field` with `operatorId`. */ export function emptyValueFor(field: FilterField, operatorId: string): unknown { const shape = operatorShapeFor(field, operatorId); if (shape === "none") return null; if (shape === "range") { return { min: null, max: null } satisfies NumberRange; } switch (field.type) { case "multiselect": return [] as string[]; case "text": return ""; case "number": return null; case "custom": return field.defaultValue ?? null; case "select": default: return null; } } /** * Classifies the value shape for an operator so a shape change (e.g. `eq` to * `between`, or entering a valueless operator) can trigger a value reset. */ export function valueShape(field: FilterField, operatorId: string): string { const shape = operatorShapeFor(field, operatorId); if (shape === "none") return "none"; if (shape === "range") return "range"; return field.type; } function generateId(): string { // Filter ids only need list-key uniqueness. `crypto.randomUUID` is absent // in non-secure contexts (plain-HTTP LAN dev), hence the cheap fallback. if ( typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ) { return crypto.randomUUID(); } return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`; } /** * Creates a `FilterValue` with a stable id. The operator defaults to the * field's first resolved operator and the value to a typed empty seed. */ export function createFilter( field: FilterField, partial?: Partial>, ): FilterValue { const operators = resolveOperators(field); const operator = partial?.operator ?? operators[0]?.id ?? "is"; return { id: partial?.id ?? generateId(), field: field.id, operator, value: partial && "value" in partial ? partial.value : emptyValueFor(field, operator), }; } /** * Applies a patch to a filter. When only the operator changes and the new * operator expects a different value shape (e.g. `eq` to `between`, or into a * valueless operator), the value is reseeded to a typed empty. */ export function patchFilter( field: FilterField | undefined, filter: FilterValue, patch: Partial>, ): FilterValue { const next: FilterValue = { ...filter, ...patch }; const operatorChanged = patch.operator !== undefined && patch.operator !== filter.operator; if ( operatorChanged && !("value" in patch) && field && valueShape(field, filter.operator) !== valueShape(field, next.operator) ) { next.value = emptyValueFor(field, next.operator); } return next; } /** * Formats a filter's value as a human-readable string. Shared by the visible * value controls and the aria summary so the two never diverge. */ export function formatFilterValue( field: FilterField, filter: FilterValue, ): string { const shape = operatorShapeFor(field, filter.operator); if (shape === "none") return ""; if (shape === "range") { const { min, max } = asNumberRange(filter.value); if (min === null && max === null) return ""; if (min === null) return `up to ${max}`; if (max === null) return `from ${min}`; return `${min} to ${max}`; } switch (field.type) { case "select": return ( field.options.find((option) => option.value === filter.value)?.label ?? "" ); case "multiselect": { const values = asStringArray(filter.value); return field.options .filter((option) => values.includes(option.value)) .map((option) => option.label) .join(", "); } case "text": return asString(filter.value); case "number": { const numeric = asNumberOrNull(filter.value); return numeric === null ? "" : String(numeric); } default: return ""; } } /** Builds a plain-language summary of a filter, e.g. for screen readers. */ export function describeFilter( field: FilterField, filter: FilterValue, ): string { const operatorLabel = resolveOperators(field).find((operator) => operator.id === filter.operator) ?.label ?? filter.operator; const summary = formatFilterValue(field, filter); return summary ? `${field.label} ${operatorLabel} ${summary}` : `${field.label} ${operatorLabel}`; } 55:T1067,"use client"; import * as React from "react"; import type { FilterField, FilterSize, FilterValue, FiltersLabels, } from "./lib/filters-types"; /** * Fast-changing state: `filters` gets a new identity on every edit (including * each keystroke in a text or number filter). Subscribe only when you render * the filters themselves. */ interface FiltersStateContextValue { filters: FilterValue[]; } /** * Configuration and actions. Referentially stable across value edits (it only * changes when the field config changes or a filter is added/removed), so * leaves like the add/clear buttons and memoized chips can subscribe without * re-rendering per keystroke. */ interface FiltersActionsContextValue { fields: FilterField[]; size: FilterSize; labels: FiltersLabels; fieldsById: Map; /** Field ids with at least one active filter. Stable across value edits. */ usedFieldIds: Set; allowDuplicateFields: boolean; addFilter: (filter: FilterValue) => void; updateFilter: (id: string, patch: Partial>) => void; removeFilter: (id: string) => void; clearAll: () => void; } /** * The transient auto-open signal, isolated in its own context so the two * invalidations per add (set, then consume) don't churn the actions context. */ interface FiltersAutoOpenContextValue { /** Id of the most recently added filter, used to auto-open its value control. */ lastAddedId: string | null; /** Clears `lastAddedId`; called by the freshly added chip once it mounts. */ clearAutoOpen: () => void; } type FiltersContextValue = FiltersStateContextValue & FiltersActionsContextValue & FiltersAutoOpenContextValue; const FiltersStateContext = React.createContext(null); const FiltersActionsContext = React.createContext(null); const FiltersAutoOpenContext = React.createContext(null); /** The bar's fast-changing state (`filters`). Re-renders on every edit. */ function useFiltersState(): FiltersStateContextValue { const context = React.use(FiltersStateContext); if (!context) { throw new Error("useFiltersState must be used within a FiltersProvider."); } return context; } /** The bar's config and actions. Stable while a filter value is being edited. */ function useFiltersActions(): FiltersActionsContextValue { const context = React.use(FiltersActionsContext); if (!context) { throw new Error("useFiltersActions must be used within a FiltersProvider."); } return context; } /** The auto-open signal for freshly added chips. */ function useFiltersAutoOpen(): FiltersAutoOpenContextValue { const context = React.use(FiltersAutoOpenContext); if (!context) { throw new Error( "useFiltersAutoOpen must be used within a FiltersProvider.", ); } return context; } /** * Everything from all contexts. Convenient, but re-renders on every filter * edit; subscribe to `useFiltersActions` alone when that matters. */ function useFilters(): FiltersContextValue { const state = useFiltersState(); const actions = useFiltersActions(); const autoOpen = useFiltersAutoOpen(); return React.useMemo( () => ({ ...state, ...actions, ...autoOpen }), [state, actions, autoOpen], ); } interface FilterChipContextValue { filter: FilterValue; field: FilterField; size: FilterSize; /** True when this chip was just added, so its value control opens itself. */ autoOpen: boolean; } const FilterChipContext = React.createContext( null, ); function useFilterChip(): FilterChipContextValue { const context = React.use(FilterChipContext); if (!context) { throw new Error("useFilterChip must be used within a FilterChip."); } return context; } export { FiltersStateContext, FiltersActionsContext, FiltersAutoOpenContext, useFilters, useFiltersState, useFiltersActions, useFiltersAutoOpen, FilterChipContext, useFilterChip, }; export type { FiltersContextValue, FiltersStateContextValue, FiltersActionsContextValue, FiltersAutoOpenContextValue, FilterChipContextValue, }; 56:T34af,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/default/button/button"; import { Combobox, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxTrigger, } from "@/registry/default/combobox/combobox"; import { Input } from "@/registry/default/input/input"; import { NumberField as BaseNumberField } from "@base-ui/react/number-field"; import { useFilterChip, useFiltersActions } from "./filters-context"; import { asNumberOrNull, asNumberRange, asString, asStringArray, FILTER_SIZES, operatorShapeFor, } from "./lib/filters-utils"; import type { FilterField, FilterOption, FilterSize, FilterValue, MultiSelectFilterField, NumberFilterField, SelectFilterField, TextFilterField, } from "./lib/filters-types"; interface ValueControlProps { field: F; filter: FilterValue; size: FilterSize; autoOpen: boolean; onValueChange: (value: unknown) => void; } /** * The value segment of a pill. Renders the control matching the field type, * or nothing when the operator's shape is `"none"` (`is empty`), so custom * chip compositions are correct without re-implementing that rule. */ function FilterChipValue() { const { field, filter, size, autoOpen } = useFilterChip(); const { updateFilter } = useFiltersActions(); const onValueChange = React.useCallback( (nextValue: unknown) => updateFilter(filter.id, { value: nextValue }), [updateFilter, filter.id], ); if (operatorShapeFor(field, filter.operator) === "none") return null; switch (field.type) { case "select": case "multiselect": return ( ); case "text": return ( ); case "number": return ( ); case "custom": return (

{field.renderValue({ value: filter.value, operator: filter.operator, onValueChange, size, field, })}

); default: return null; } } /** Accessible name for a value input, folding in string affixes ("$", "hrs"). */ function valueAriaLabel( field: TextFilterField | NumberFilterField, part: string, ): string { const affixes = [field.prefix, field.suffix].filter( (affix): affix is string => typeof affix === "string", ); return [`${field.label} ${part}`, ...affixes].join(" "); } // ----- Select / multiselect ---------------------------------------------- const VALUE_TRIGGER_CLASSES = "text-foreground data-popup-open:bg-surface-hover rounded-none font-normal focus-visible:-outline-offset-2"; function OptionContent({ option }: { option: FilterOption }) { return ( {option.icon} {option.label} ); } interface OptionsTriggerProps { size: FilterSize; icon?: React.ReactNode; text: string; isPlaceholder: boolean; /** Accessible name with field context, e.g. "Status value: Done". */ "aria-label": string; } /** Shared ghost trigger for the single- and multi-select value popups. */ function OptionsTrigger({ size, icon, text, isPlaceholder, "aria-label": ariaLabel, }: OptionsTriggerProps) { return ( ( )} /> ); } /** * The searchable popup shell shared by the value pickers and the add-filter * menu: bordered search header, empty state, and the option list. */ function FilterSearchPopup({ placeholder, empty, className, children, }: { placeholder: string; empty: React.ReactNode; className?: string; children: React.ComponentProps["children"]; }) { return (

{empty} {children} ); } function OptionsPopup({ children, }: { children: React.ComponentProps["children"]; }) { const { labels } = useFiltersActions(); return ( {children} ); } /** Value control for `select` and `multiselect` fields. */ function OptionsValueControl({ field, filter, size, autoOpen, onValueChange, }: ValueControlProps) { const { labels } = useFiltersActions(); // Capture once at mount so the uncontrolled open state never changes. const [initialOpen] = React.useState(autoOpen); const placeholder = field.placeholder ?? labels.selectValue; if (field.type === "multiselect") { const values = asStringArray(filter.value); const selected = field.options.filter((option) => values.includes(option.value), ); const atMax = field.maxSelections != null && values.length >= field.maxSelections; const display = selected.length === 0 ? placeholder : selected.length === 1 ? selected[0].label : `${selected[0].label} +${selected.length - 1}`; return ( items={field.options} multiple value={selected} defaultOpen={initialOpen} onValueChange={(next) => { // Reject selections past the cap; the controlled value snaps back. if ( field.maxSelections != null && next.length > field.maxSelections ) { return; } onValueChange(next.map((option) => option.value)); }} itemToStringLabel={(option) => option.label} > {(option: FilterOption) => ( )} ); } const selected = field.options.find((option) => option.value === filter.value) ?? null; return ( items={field.options} value={selected} defaultOpen={initialOpen} onValueChange={(next) => onValueChange(next ? next.value : null)} itemToStringLabel={(option) => option.label} > {(option: FilterOption) => ( )} ); } // ----- Text / number ------------------------------------------------------ /** * The value segment wrapper for inline inputs. Owns the `filter-chip-value` * slot and flanks the input with muted prefix/suffix text (e.g. `$`, `%`). */ function ValueSegment({ prefix, suffix, children, }: { prefix?: React.ReactNode; suffix?: React.ReactNode; children: React.ReactNode; }) { return (

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

); } function TextValueControl({ field, filter, size, autoOpen, onValueChange, }: ValueControlProps) { const { labels } = useFiltersActions(); return ( onValueChange(event.target.value)} /> ); } function NumberValueField({ value, size, step, placeholder, autoFocus, prefix, suffix, "aria-label": ariaLabel, onValueChange, }: { value: number | null; size: FilterSize; step?: number; placeholder?: string; autoFocus?: boolean; prefix?: React.ReactNode; suffix?: React.ReactNode; "aria-label": string; onValueChange: (value: number | null) => void; }) { // Base UI's NumberField.Input is a text input with numeric semantics (no // native spinner) and handles parsing, arrow-key stepping, and clamping. // `allowWheelScrub` lets the wheel adjust the value while the input is // focused and hovered (it won't hijack ordinary page scrolling). return ( onValueChange(next)} className={cn("flex flex-none items-center", FILTER_SIZES[size].height)} > ); } function NumberValueControl({ field, filter, size, autoOpen, onValueChange, }: ValueControlProps) { const { labels } = useFiltersActions(); if (operatorShapeFor(field, filter.operator) === "range") { const range = asNumberRange(filter.value); return ( <> onValueChange({ ...range, min })} /> onValueChange({ ...range, max })} /> ); } return ( ); } export { FilterChipValue, FilterSearchPopup }; 4f:["$","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","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L50",null,{"namespace":"@cubby-ui","registryDependencies":["@cubby-ui/badge","@cubby-ui/button","@cubby-ui/button-group","@cubby-ui/combobox","@cubby-ui/dropdown-menu","@cubby-ui/kbd","@cubby-ui/input","@cubby-ui/use-controllable-state"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/filters/filters.tsx","content":"$52","type":"registry:ui","target":"components/ui/cubby-ui/filters/filters.tsx"},{"path":"registry/default/filters/lib/filters-types.ts","content":"$53","type":"registry:lib","target":"components/ui/cubby-ui/filters/lib/filters-types.ts"},{"path":"registry/default/filters/lib/filters-utils.ts","content":"$54","type":"registry:lib","target":"components/ui/cubby-ui/filters/lib/filters-utils.ts"},{"path":"registry/default/filters/filters-context.tsx","content":"$55","type":"registry:ui","target":"components/ui/cubby-ui/filters/filters-context.tsx"},{"path":"registry/default/filters/filters-value-controls.tsx","content":"$56","type":"registry:ui","target":"components/ui/cubby-ui/filters/filters-value-controls.tsx"}],"className":"h-[70svh] min-h-80"}]]}]