@wheelhouse/ui 0.1.6 → 0.2.0

package/dist/components/filters/filters.js

@@ -0,0 +1,733 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { ButtonGroup, ButtonGroupText } from '../button-group';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../dropdown-menu';
+import { Input } from '../input';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '../input-group';
+import { Kbd } from '../kbd';
+import { ScrollArea } from '../scroll-area';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import { CheckIcon, WarningCircleIcon, XIcon } from '@phosphor-icons/react/dist/ssr';
+import { createOperatorsFromI18n, DEFAULT_I18N } from './filters-defaults';
+import { createFilter } from './filters-utils';
+const FilterContext = createContext({
+    variant: 'default',
+    size: 'default',
+    radius: 'default',
+    i18n: DEFAULT_I18N,
+    className: undefined,
+    showSearchInput: true,
+    trigger: undefined,
+    allowMultiple: true,
+});
+const useFilterContext = () => useContext(FilterContext);
+// Container variant for filters wrapper
+const filtersContainerVariants = cva('flex flex-wrap items-center', {
+    variants: {
+        variant: {
+            solid: 'gap-2',
+            default: '',
+        },
+        size: {
+            sm: 'gap-1.5',
+            default: 'gap-2.5',
+            lg: 'gap-3.5',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function FilterInput({ field, onBlur, onKeyDown, className, ...props }) {
+    const context = useFilterContext();
+    const [isValid, setIsValid] = useState(true);
+    const [validationMessage, setValidationMessage] = useState('');
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (props.autoFocus) {
+            const timer = setTimeout(() => {
+                inputRef.current?.focus();
+            }, 300);
+            return () => clearTimeout(timer);
+        }
+    }, [props.autoFocus]);
+    // Validation function to check if input matches pattern
+    const validateInput = (value, pattern) => {
+        if (!pattern || !value)
+            return true;
+        const regex = new RegExp(pattern);
+        return regex.test(value);
+    };
+    // Get validation message for field type
+    const getValidationMessage = () => {
+        return context.i18n.validation.invalid;
+    };
+    // Handle blur event - validate when user leaves input
+    const handleBlur = (e) => {
+        const value = e.target.value;
+        const pattern = field?.pattern || props.pattern;
+        // Only validate if there's a value and (pattern or validation function)
+        if (value && (pattern || field?.validation)) {
+            let valid = true;
+            let customMessage = '';
+            // If there's a custom validation function, use it
+            if (field?.validation) {
+                const result = field.validation(value);
+                // Handle both boolean and object return types
+                if (typeof result === 'boolean') {
+                    valid = result;
+                }
+                else {
+                    valid = result.valid;
+                    customMessage = result.message || '';
+                }
+            }
+            else if (pattern) {
+                // Use pattern validation
+                valid = validateInput(value, pattern);
+            }
+            setIsValid(valid);
+            setValidationMessage(valid ? '' : customMessage || getValidationMessage());
+        }
+        else {
+            // Reset validation state for empty values or no validation
+            setIsValid(true);
+            setValidationMessage('');
+        }
+        // Call the original onBlur if provided
+        onBlur?.(e);
+    };
+    // Handle keydown event - hide validation error when user starts typing
+    const handleKeyDown = (e) => {
+        // Hide validation error when user starts typing (any key except special keys)
+        if (!isValid && !['Tab', 'Escape', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+            setIsValid(true);
+            setValidationMessage('');
+        }
+        // Call the original onKeyDown if provided
+        onKeyDown?.(e);
+    };
+    return (_jsxs(InputGroup, { className: cn('w-36', context.size == 'sm' && 'h-7!', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!', className), children: [field?.prefix && (_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: field.prefix }) })), _jsx(InputGroupInput, { ref: inputRef, "aria-invalid": !isValid, "aria-describedby": !isValid && validationMessage ? `${field?.key || 'input'}-error` : undefined, onBlur: handleBlur, onKeyDown: handleKeyDown, className: cn(context.size == 'sm' && 'h-7! text-xs', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!'), ...props }), !isValid && validationMessage && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(InputGroupButton, { size: "icon-xs" }), children: _jsx(WarningCircleIcon, { className: "size-3.5 text-destructive" }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "text-sm", children: validationMessage }) })] }) })), field?.suffix && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: field.suffix }) }))] }));
+}
+function FilterRemoveButton({ className, icon = _jsx(XIcon, {}), ...props }) {
+    const context = useFilterContext();
+    return (_jsx(Button, { variant: "outline", size: context.size === 'sm' ? 'icon-sm' : context.size === 'lg' ? 'icon-lg' : 'icon', className: className, ...props, children: icon }));
+}
+// Helper functions to handle both flat and grouped field configurations
+const isFieldGroup = (item) => {
+    return 'fields' in item && Array.isArray(item.fields);
+};
+// Helper function to check if a FilterFieldConfig is a group-level configuration
+const isGroupLevelField = (field) => {
+    return Boolean(field.group && field.fields);
+};
+const flattenFields = (fields) => {
+    return fields.reduce((acc, item) => {
+        if (isFieldGroup(item)) {
+            return [...acc, ...item.fields];
+        }
+        // Handle group-level fields (new structure)
+        if (isGroupLevelField(item)) {
+            return [...acc, ...item.fields];
+        }
+        return [...acc, item];
+    }, []);
+};
+const getFieldsMap = (fields) => {
+    const flatFields = flattenFields(fields);
+    return flatFields.reduce((acc, field) => {
+        // Only add fields that have a key (skip group-level configurations)
+        if (field.key) {
+            acc[field.key] = field;
+        }
+        return acc;
+    }, {});
+};
+// Helper function to get operators for a field
+const getOperatorsForField = (field, values, i18n) => {
+    if (field.operators)
+        return field.operators;
+    const operators = createOperatorsFromI18n(i18n);
+    // Determine field type for operator selection
+    let fieldType = field.type || 'select';
+    // If it's a select field but has multiple values, treat as multiselect
+    if (fieldType === 'select' && values.length > 1) {
+        fieldType = 'multiselect';
+    }
+    // If it's a multiselect field or has multiselect operators, use multiselect operators
+    if (fieldType === 'multiselect' || field.type === 'multiselect') {
+        return operators.multiselect;
+    }
+    return operators[fieldType] || operators.select;
+};
+function FilterOperatorDropdown({ field, operator, values, onChange }) {
+    const context = useFilterContext();
+    const operators = getOperatorsForField(field, values, context.i18n);
+    // Find the operator label, with fallback to formatted operator name
+    const operatorLabel = operators.find((op) => op.value === operator)?.label || context.i18n.helpers.formatOperator(operator);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: context.size, className: "text-muted-foreground hover:text-foreground", children: operatorLabel }) }), _jsx(DropdownMenuContent, { align: "start", className: "w-fit min-w-fit", children: operators.map((op) => (_jsxs(DropdownMenuItem, { onClick: () => onChange(op.value), className: cn('flex items-center justify-between data-highlighted:bg-accent data-highlighted:text-accent-foreground'), children: [_jsx("span", { children: op.label }), _jsx(CheckIcon, { className: cn('ms-auto text-primary', op.value === operator ? 'opacity-100' : 'opacity-0') })] }, op.value))) })] }));
+}
+function SelectOptionsPopover({ field, values, onChange, onClose, inline = false }) {
+    const [open, setOpen] = useState(false);
+    const [searchInput, setSearchInput] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const context = useFilterContext();
+    const baseId = useId();
+    useEffect(() => {
+        if (open) {
+            inputRef.current?.focus();
+        }
+    }, [open]);
+    useEffect(() => {
+        if (highlightedIndex >= 0 && open) {
+            const element = document.getElementById(`${baseId}-item-${highlightedIndex}`);
+            element?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [highlightedIndex, open, baseId]);
+    const isMultiSelect = field.type === 'multiselect' || values.length > 1;
+    const effectiveValues = (field.value !== undefined ? field.value : values) || [];
+    const selectedOptions = field.options?.filter((opt) => effectiveValues.includes(opt.value)) || [];
+    const triggerPreviewIcons = selectedOptions.slice(0, 3).filter((option) => option.icon != null);
+    const unselectedOptions = field.options?.filter((opt) => !effectiveValues.includes(opt.value)) || [];
+    // Filter options based on search input
+    const filteredSelectedOptions = selectedOptions; // Keep all selected visible
+    const filteredUnselectedOptions = unselectedOptions.filter((opt) => opt.label.toLowerCase().includes(searchInput.toLowerCase()));
+    const allFilteredOptions = [...filteredSelectedOptions, ...filteredUnselectedOptions];
+    const handleClose = () => {
+        setHighlightedIndex(-1);
+        setOpen(false);
+        onClose?.();
+    };
+    const renderMenuContent = () => (_jsxs(_Fragment, { children: [field.searchable !== false && (_jsxs(_Fragment, { children: [_jsx(Input, { ref: inputRef, role: "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-haspopup": "listbox", "aria-controls": `${baseId}-listbox`, "aria-activedescendant": highlightedIndex >= 0 ? `${baseId}-item-${highlightedIndex}` : undefined, placeholder: context.i18n.placeholders.searchField(field.label || ''), className: cn('h-8 rounded-none border-0 border-input bg-transparent! px-2 text-sm shadow-none', 'focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0', open && 'placeholder:text-foreground'), value: searchInput, onChange: (e) => {
+                            setSearchInput(e.target.value);
+                            setHighlightedIndex(-1);
+                        }, onBlur: () => open && inputRef.current?.focus(), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                            if (e.key === 'ArrowDown') {
+                                e.preventDefault();
+                                if (allFilteredOptions.length > 0) {
+                                    setHighlightedIndex((prev) => (prev < allFilteredOptions.length - 1 ? prev + 1 : 0));
+                                }
+                            }
+                            else if (e.key === 'ArrowUp') {
+                                e.preventDefault();
+                                if (allFilteredOptions.length > 0) {
+                                    setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : allFilteredOptions.length - 1));
+                                }
+                            }
+                            else if (e.key === 'ArrowLeft') {
+                                e.preventDefault();
+                                setHighlightedIndex(-1);
+                                setOpen(false);
+                            }
+                            else if (e.key === 'Enter' && highlightedIndex >= 0) {
+                                e.preventDefault();
+                                const option = allFilteredOptions[highlightedIndex];
+                                if (option) {
+                                    const isSelected = effectiveValues.includes(option.value);
+                                    const next = isSelected
+                                        ? effectiveValues.filter((v) => v !== option.value)
+                                        : isMultiSelect
+                                            ? [...effectiveValues, option.value]
+                                            : [option.value];
+                                    if (!isSelected && isMultiSelect && field.maxSelections && next.length > field.maxSelections) {
+                                        return;
+                                    }
+                                    if (field.onValueChange) {
+                                        field.onValueChange(next);
+                                    }
+                                    else {
+                                        onChange(next);
+                                    }
+                                    if (!isMultiSelect)
+                                        handleClose();
+                                }
+                            }
+                            e.stopPropagation();
+                        } }), _jsx(DropdownMenuSeparator, {})] })), _jsx("div", { className: "relative flex max-h-full", children: _jsx("div", { className: "flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain", role: "listbox", id: `${baseId}-listbox`, children: _jsxs(ScrollArea, { className: "size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 [&_[data-slot=scroll-area-viewport]]:h-full [&_[data-slot=scroll-area-viewport]]:overscroll-contain", children: [allFilteredOptions.length === 0 && _jsx("div", { className: "py-2 text-center text-sm text-muted-foreground", children: context.i18n.noResultsFound }), filteredSelectedOptions.length > 0 && (_jsx(DropdownMenuGroup, { className: "px-1", children: filteredSelectedOptions.map((option, index) => {
+                                    const isHighlighted = highlightedIndex === index;
+                                    const itemId = `${baseId}-item-${index}`;
+                                    return (_jsxs(DropdownMenuCheckboxItem, { id: itemId, role: "option", "aria-selected": isHighlighted, "data-highlighted": isHighlighted || undefined, onMouseEnter: () => setHighlightedIndex(index), checked: true, className: cn('data-highlighted:bg-accent data-highlighted:text-accent-foreground', option.className), onSelect: (e) => {
+                                            if (isMultiSelect)
+                                                e.preventDefault();
+                                        }, onCheckedChange: () => {
+                                            const next = effectiveValues.filter((v) => v !== option.value);
+                                            if (field.onValueChange) {
+                                                field.onValueChange(next);
+                                            }
+                                            else {
+                                                onChange(next);
+                                            }
+                                            if (!isMultiSelect)
+                                                handleClose();
+                                        }, children: [option.icon && option.icon, _jsx("span", { className: "truncate", children: option.label })] }, String(option.value)));
+                                }) })), filteredSelectedOptions.length > 0 && filteredUnselectedOptions.length > 0 && _jsx(DropdownMenuSeparator, { className: "mx-0" }), filteredUnselectedOptions.length > 0 && (_jsx(DropdownMenuGroup, { className: "px-1", children: filteredUnselectedOptions.map((option, index) => {
+                                    const overallIndex = index + filteredSelectedOptions.length;
+                                    const isHighlighted = highlightedIndex === overallIndex;
+                                    const itemId = `${baseId}-item-${overallIndex}`;
+                                    return (_jsxs(DropdownMenuCheckboxItem, { id: itemId, role: "option", "aria-selected": isHighlighted, "data-highlighted": isHighlighted || undefined, onMouseEnter: () => setHighlightedIndex(overallIndex), checked: false, className: cn('data-highlighted:bg-accent data-highlighted:text-accent-foreground', option.className), onSelect: (e) => {
+                                            if (isMultiSelect)
+                                                e.preventDefault();
+                                        }, onCheckedChange: () => {
+                                            const next = isMultiSelect ? [...effectiveValues, option.value] : [option.value];
+                                            if (isMultiSelect && field.maxSelections && next.length > field.maxSelections) {
+                                                return;
+                                            }
+                                            if (field.onValueChange) {
+                                                field.onValueChange(next);
+                                            }
+                                            else {
+                                                onChange(next);
+                                            }
+                                            if (!isMultiSelect)
+                                                handleClose();
+                                        }, children: [option.icon && option.icon, _jsx("span", { className: "truncate", children: option.label })] }, String(option.value)));
+                                }) }))] }) }) })] }));
+    if (inline) {
+        return _jsx("div", { className: "w-full", children: renderMenuContent() });
+    }
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: (nextOpen) => {
+            setOpen(nextOpen);
+            setHighlightedIndex(-1);
+            if (!nextOpen) {
+                setTimeout(() => setSearchInput(''), 200);
+            }
+        }, children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: context.size, children: _jsx("div", { className: "flex items-center gap-1.5", children: field.customValueRenderer ? (field.customValueRenderer(values, field.options || [])) : (_jsxs(_Fragment, { children: [triggerPreviewIcons.length > 0 && (_jsx("div", { className: "flex items-center -space-x-1.5", children: triggerPreviewIcons.map((option) => (_jsx("div", { children: option.icon }, String(option.value)))) })), selectedOptions.length === 1
+                                    ? selectedOptions[0].label
+                                    : selectedOptions.length > 1
+                                        ? `${selectedOptions.length} ${context.i18n.selectedCount}`
+                                        : context.i18n.select] })) }) }) }), _jsx(DropdownMenuContent, { align: "start", className: cn('w-[200px] px-0', field.className), children: renderMenuContent() })] }));
+}
+function FilterValueSelector({ field, values, onChange, operator, autoFocus }) {
+    if (operator === 'empty' || operator === 'not_empty') {
+        return null;
+    }
+    if (field.customRenderer) {
+        return (_jsx(ButtonGroupText, { className: "bg-background text-start whitespace-nowrap outline-hidden hover:bg-accent aria-expanded:bg-accent dark:bg-input/30", children: field.customRenderer({ field, values, onChange, operator }) }));
+    }
+    if (field.type === 'text') {
+        return (_jsx(FilterInput, { type: "text", value: values[0] || '', onChange: (e) => onChange([e.target.value]), placeholder: field.placeholder, pattern: field.pattern, field: field, className: cn('w-36', field.className), autoFocus: autoFocus }));
+    }
+    if (field.type === 'select' || field.type === 'multiselect') {
+        return _jsx(SelectOptionsPopover, { field: field, values: values, onChange: onChange });
+    }
+    return _jsx(SelectOptionsPopover, { field: field, values: values, onChange: onChange });
+}
+export const FiltersContent = ({ filters, fields, onChange }) => {
+    const context = useFilterContext();
+    const fieldsMap = useMemo(() => getFieldsMap(fields), [fields]);
+    const updateFilter = useCallback((filterId, updates) => {
+        onChange(filters.map((filter) => {
+            if (filter.id === filterId) {
+                const updatedFilter = { ...filter, ...updates };
+                if (updates.operator === 'empty' || updates.operator === 'not_empty') {
+                    updatedFilter.values = [];
+                }
+                return updatedFilter;
+            }
+            return filter;
+        }));
+    }, [filters, onChange]);
+    const removeFilter = useCallback((filterId) => {
+        onChange(filters.filter((filter) => filter.id !== filterId));
+    }, [filters, onChange]);
+    return (_jsx("div", { className: cn(filtersContainerVariants({
+            variant: context.variant,
+            size: context.size,
+        }), context.className), children: filters.map((filter) => {
+            const field = fieldsMap[filter.field];
+            if (!field)
+                return null;
+            return (_jsxs(ButtonGroup, { children: [_jsxs(ButtonGroupText, { children: [field.icon && field.icon, field.label] }), _jsx(FilterOperatorDropdown, { field: field, operator: filter.operator, values: filter.values, onChange: (operator) => updateFilter(filter.id, { operator }) }), _jsx(FilterValueSelector, { field: field, values: filter.values, onChange: (values) => updateFilter(filter.id, { values }), operator: filter.operator, autoFocus: false }), _jsx(FilterRemoveButton, { onClick: () => removeFilter(filter.id) })] }, filter.id));
+        }) }));
+};
+function FilterSubmenuContent({ field, currentValues, isMultiSelect, onToggle, i18n, isActive, onActive, onBack, onClose, }) {
+    const [searchInput, setSearchInput] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const baseId = useId();
+    useEffect(() => {
+        if (isActive) {
+            if (field.searchable !== false) {
+                inputRef.current?.focus();
+            }
+            else {
+                const listbox = document.getElementById(`${baseId}-listbox`);
+                listbox?.focus();
+            }
+        }
+    }, [isActive, field.searchable, baseId]);
+    const filteredOptions = useMemo(() => {
+        return (field.options?.filter((option) => {
+            const isSelected = currentValues.includes(option.value);
+            if (isSelected)
+                return true;
+            if (!searchInput)
+                return true;
+            return option.label.toLowerCase().includes(searchInput.toLowerCase());
+        }) || []);
+    }, [field.options, searchInput, currentValues]);
+    const resolvedHighlight = useMemo(() => {
+        if (!isActive || filteredOptions.length === 0) {
+            return -1;
+        }
+        if (highlightedIndex >= 0) {
+            return Math.min(highlightedIndex, filteredOptions.length - 1);
+        }
+        return 0;
+    }, [isActive, filteredOptions.length, highlightedIndex]);
+    useEffect(() => {
+        if (resolvedHighlight >= 0 && isActive) {
+            const element = document.getElementById(`${baseId}-item-${resolvedHighlight}`);
+            element?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [resolvedHighlight, isActive, baseId]);
+    return (_jsxs("div", { className: "flex flex-col", onMouseEnter: onActive, children: [field.searchable !== false && (_jsxs(_Fragment, { children: [_jsx(Input, { ref: inputRef, role: "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-haspopup": "listbox", "aria-controls": `${baseId}-listbox`, "aria-activedescendant": resolvedHighlight >= 0 ? `${baseId}-item-${resolvedHighlight}` : undefined, placeholder: i18n.placeholders.searchField(field.label || ''), className: cn('h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none', 'focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0', isActive && 'placeholder:text-foreground'), value: searchInput, onBlur: () => isActive && inputRef.current?.focus(), onChange: (e) => {
+                            setSearchInput(e.target.value);
+                            setHighlightedIndex(-1);
+                        }, onFocus: () => onActive?.(), onMouseEnter: (e) => {
+                            onActive?.();
+                            e.stopPropagation();
+                        }, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                            if (e.key === 'ArrowDown') {
+                                e.preventDefault();
+                                if (filteredOptions.length > 0) {
+                                    setHighlightedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : 0));
+                                }
+                            }
+                            else if (e.key === 'ArrowUp') {
+                                e.preventDefault();
+                                if (filteredOptions.length > 0) {
+                                    setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredOptions.length - 1));
+                                }
+                            }
+                            else if (e.key === 'ArrowLeft') {
+                                e.preventDefault();
+                                onBack?.();
+                            }
+                            else if (e.key === 'Enter' && resolvedHighlight >= 0) {
+                                e.preventDefault();
+                                const option = filteredOptions[resolvedHighlight];
+                                if (option) {
+                                    onToggle(option.value, currentValues.includes(option.value));
+                                    if (!isMultiSelect) {
+                                        onBack?.();
+                                    }
+                                }
+                            }
+                            else if (e.key === 'Escape') {
+                                e.preventDefault();
+                                onClose?.();
+                            }
+                            e.stopPropagation();
+                        } }), _jsx(DropdownMenuSeparator, {})] })), _jsx("div", { className: "relative flex max-h-full", children: _jsx("div", { className: "flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain outline-hidden", role: "listbox", id: `${baseId}-listbox`, tabIndex: field.searchable === false ? 0 : -1, onKeyDown: (e) => {
+                        if (field.searchable === false) {
+                            if (e.key === 'ArrowDown') {
+                                e.preventDefault();
+                                if (filteredOptions.length > 0) {
+                                    setHighlightedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : 0));
+                                }
+                            }
+                            else if (e.key === 'ArrowUp') {
+                                e.preventDefault();
+                                if (filteredOptions.length > 0) {
+                                    setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredOptions.length - 1));
+                                }
+                            }
+                            else if (e.key === 'ArrowLeft') {
+                                e.preventDefault();
+                                onBack?.();
+                            }
+                            else if (e.key === 'Enter' && resolvedHighlight >= 0) {
+                                e.preventDefault();
+                                const option = filteredOptions[resolvedHighlight];
+                                if (option) {
+                                    onToggle(option.value, currentValues.includes(option.value));
+                                    if (!isMultiSelect) {
+                                        onBack?.();
+                                    }
+                                }
+                            }
+                            else if (e.key === 'Escape') {
+                                e.preventDefault();
+                                onClose?.();
+                            }
+                            e.stopPropagation();
+                        }
+                    }, children: _jsx(ScrollArea, { className: "size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 [&_[data-slot=scroll-area-viewport]]:h-full [&_[data-slot=scroll-area-viewport]]:overscroll-contain", children: filteredOptions.length === 0 ? (_jsx("div", { className: "py-2 text-center text-sm text-muted-foreground", children: i18n.noResultsFound })) : (_jsx(DropdownMenuGroup, { children: filteredOptions.map((option, index) => {
+                                const isSelected = currentValues.includes(option.value);
+                                const isHighlighted = resolvedHighlight === index;
+                                const itemId = `${baseId}-item-${index}`;
+                                return (_jsxs(DropdownMenuCheckboxItem, { id: itemId, role: "option", "aria-selected": isHighlighted, "data-highlighted": isHighlighted || undefined, onMouseEnter: () => setHighlightedIndex(index), checked: isSelected, className: cn('data-highlighted:bg-accent data-highlighted:text-accent-foreground', option.className), onSelect: (e) => {
+                                        if (isMultiSelect)
+                                            e.preventDefault();
+                                    }, onCheckedChange: () => onToggle(option.value, isSelected), children: [option.icon && option.icon, _jsx("span", { className: "truncate", children: option.label })] }, String(option.value)));
+                            }) })) }) }) })] }));
+}
+export function Filters({ filters, fields, onChange, className, variant = 'default', size = 'default', radius = 'default', i18n, showSearchInput = true, trigger, allowMultiple = true, menuPopupClassName, enableShortcut = false, shortcutKey = 'f', shortcutLabel = 'F', }) {
+    const [addFilterOpen, setAddFilterOpen] = useState(false);
+    const [menuSearchInput, setMenuSearchInput] = useState('');
+    const [activeMenu, setActiveMenu] = useState('root');
+    const [openSubMenu, setOpenSubMenu] = useState(null);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [lastAddedFilterId, setLastAddedFilterId] = useState(null);
+    const rootInputRef = useRef(null);
+    const rootId = useId();
+    useEffect(() => {
+        if (!enableShortcut)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key.toLowerCase() === shortcutKey.toLowerCase() &&
+                !addFilterOpen &&
+                !(document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLTextAreaElement)) {
+                e.preventDefault();
+                setAddFilterOpen(true);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [enableShortcut, shortcutKey, addFilterOpen]);
+    useEffect(() => {
+        if (addFilterOpen && activeMenu === 'root') {
+            rootInputRef.current?.focus();
+        }
+    }, [addFilterOpen, activeMenu]);
+    // Track which filter instance is being built in the current Add Filter menu session
+    // Maps fieldKey -> unique filterId created during this open session
+    const [sessionFilterIds, setSessionFilterIds] = useState({});
+    useEffect(() => {
+        if (lastAddedFilterId) {
+            const timer = setTimeout(() => {
+                setLastAddedFilterId(null);
+            }, 1000);
+            return () => clearTimeout(timer);
+        }
+    }, [lastAddedFilterId]);
+    const mergedI18n = {
+        ...DEFAULT_I18N,
+        ...i18n,
+        operators: { ...DEFAULT_I18N.operators, ...i18n?.operators },
+        placeholders: { ...DEFAULT_I18N.placeholders, ...i18n?.placeholders },
+        validation: { ...DEFAULT_I18N.validation, ...i18n?.validation },
+    };
+    const fieldsMap = useMemo(() => getFieldsMap(fields), [fields]);
+    const updateFilter = useCallback((filterId, updates) => {
+        onChange(filters.map((filter) => {
+            if (filter.id === filterId) {
+                const updatedFilter = { ...filter, ...updates };
+                if (updates.operator === 'empty' || updates.operator === 'not_empty') {
+                    updatedFilter.values = [];
+                }
+                return updatedFilter;
+            }
+            return filter;
+        }));
+    }, [filters, onChange]);
+    const removeFilter = useCallback((filterId) => {
+        onChange(filters.filter((filter) => filter.id !== filterId));
+    }, [filters, onChange]);
+    const addFilter = useCallback((fieldKey) => {
+        const field = fieldsMap[fieldKey];
+        if (field && field.key) {
+            const defaultOperator = field.defaultOperator || (field.type === 'multiselect' ? 'is_any_of' : 'is');
+            const defaultValues = field.type === 'text' ? [''] : [];
+            const newFilter = createFilter(fieldKey, defaultOperator, defaultValues);
+            setLastAddedFilterId(newFilter.id);
+            onChange([...filters, newFilter]);
+            setAddFilterOpen(false);
+            setMenuSearchInput('');
+        }
+    }, [fieldsMap, filters, onChange]);
+    const selectableFields = useMemo(() => {
+        const flatFields = flattenFields(fields);
+        return flatFields.filter((field) => {
+            if (!field.key || field.type === 'separator')
+                return false;
+            if (allowMultiple)
+                return true;
+            return !filters.some((filter) => filter.field === field.key);
+        });
+    }, [fields, filters, allowMultiple]);
+    const filteredFields = useMemo(() => {
+        return selectableFields.filter((f) => !menuSearchInput || f.label?.toLowerCase().includes(menuSearchInput.toLowerCase()));
+    }, [selectableFields, menuSearchInput]);
+    const rootResolvedHighlight = useMemo(() => {
+        if (!addFilterOpen || filteredFields.length === 0) {
+            return -1;
+        }
+        if (highlightedIndex < 0) {
+            return 0;
+        }
+        return Math.min(highlightedIndex, filteredFields.length - 1);
+    }, [addFilterOpen, filteredFields.length, highlightedIndex]);
+    useEffect(() => {
+        if (rootResolvedHighlight >= 0 && addFilterOpen) {
+            const element = document.getElementById(`${rootId}-item-${rootResolvedHighlight}`);
+            element?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [rootResolvedHighlight, addFilterOpen, rootId]);
+    const triggerButton = useRender({
+        render: trigger,
+        defaultTagName: 'button',
+    });
+    return (_jsx(FilterContext.Provider, { value: {
+            variant,
+            size,
+            radius,
+            i18n: mergedI18n,
+            className,
+            trigger,
+            allowMultiple,
+        }, children: _jsxs("div", { className: cn(filtersContainerVariants({ variant, size }), className), children: [selectableFields.length > 0 && (_jsxs(DropdownMenu, { open: addFilterOpen, onOpenChange: (open) => {
+                        setAddFilterOpen(open);
+                        if (!open) {
+                            setMenuSearchInput('');
+                            setSessionFilterIds({});
+                            setOpenSubMenu(null);
+                            setHighlightedIndex(-1);
+                        }
+                        else {
+                            setActiveMenu('root');
+                            setHighlightedIndex(-1);
+                        }
+                    }, children: [_jsx(DropdownMenuTrigger, { render: triggerButton }), _jsxs(DropdownMenuContent, { className: cn('w-[220px]', menuPopupClassName), align: "start", children: [showSearchInput && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative", children: [_jsx(Input, { ref: rootInputRef, role: "combobox", "aria-controls": `${rootId}-listbox`, "aria-activedescendant": rootResolvedHighlight >= 0 ? `${rootId}-item-${rootResolvedHighlight}` : undefined, placeholder: mergedI18n.searchFields, className: cn('h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none', 'focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0', activeMenu === 'root' && 'placeholder:text-foreground'), value: menuSearchInput, onFocus: () => setActiveMenu('root'), onMouseEnter: () => setActiveMenu('root'), onBlur: () => activeMenu === 'root' && rootInputRef.current?.focus(), onChange: (e) => {
+                                                        setMenuSearchInput(e.target.value);
+                                                        setHighlightedIndex(-1);
+                                                    }, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                                                        if (e.key === 'ArrowDown') {
+                                                            e.preventDefault();
+                                                            if (filteredFields.length > 0) {
+                                                                setHighlightedIndex((prev) => (prev < filteredFields.length - 1 ? prev + 1 : 0));
+                                                            }
+                                                        }
+                                                        else if (e.key === 'ArrowUp') {
+                                                            e.preventDefault();
+                                                            if (filteredFields.length > 0) {
+                                                                setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredFields.length - 1));
+                                                            }
+                                                        }
+                                                        else if ((e.key === 'ArrowRight' || e.key === 'ArrowLeft') && rootResolvedHighlight >= 0) {
+                                                            const field = filteredFields[rootResolvedHighlight];
+                                                            const hasSubMenu = field && (field.type === 'select' || field.type === 'multiselect') && field.options?.length;
+                                                            if (e.key === 'ArrowRight' && hasSubMenu) {
+                                                                e.preventDefault();
+                                                                setOpenSubMenu(field.key || null);
+                                                                setActiveMenu(field.key || 'root');
+                                                            }
+                                                            else if (e.key === 'ArrowLeft') {
+                                                                e.preventDefault();
+                                                                if (openSubMenu) {
+                                                                    setOpenSubMenu(null);
+                                                                    setActiveMenu('root');
+                                                                }
+                                                            }
+                                                        }
+                                                        else if (e.key === 'Enter' && rootResolvedHighlight >= 0) {
+                                                            e.preventDefault();
+                                                            const field = filteredFields[rootResolvedHighlight];
+                                                            if (field.key) {
+                                                                const hasSubMenu = (field.type === 'select' || field.type === 'multiselect') && field.options?.length;
+                                                                if (!hasSubMenu) {
+                                                                    addFilter(field.key);
+                                                                }
+                                                                else {
+                                                                    if (openSubMenu === field.key) {
+                                                                        setOpenSubMenu(null);
+                                                                        setActiveMenu('root');
+                                                                    }
+                                                                    else {
+                                                                        setOpenSubMenu(field.key);
+                                                                        setActiveMenu(field.key);
+                                                                    }
+                                                                }
+                                                            }
+                                                        }
+                                                        else if (e.key === 'Escape') {
+                                                            setAddFilterOpen(false);
+                                                        }
+                                                        e.stopPropagation();
+                                                    } }), enableShortcut && shortcutLabel && (_jsx(Kbd, { className: "absolute top-1/2 right-2 -translate-y-1/2 border bg-background", children: shortcutLabel }))] }), _jsx(DropdownMenuSeparator, {})] })), _jsx("div", { className: "relative flex max-h-full", children: _jsx("div", { className: "flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain", role: "listbox", tabIndex: showSearchInput ? -1 : 0, id: `${rootId}-listbox`, onMouseEnter: () => setActiveMenu('root'), children: _jsx(ScrollArea, { className: "**:data-[slot=scroll-area-scrollbar]:m-0", children: (() => {
+                                                if (filteredFields.length === 0) {
+                                                    return _jsx("div", { className: "py-2 text-center text-sm text-muted-foreground", children: mergedI18n.noFieldsFound });
+                                                }
+                                                return filteredFields.map((field, index) => {
+                                                    const isHighlighted = rootResolvedHighlight === index;
+                                                    const itemId = `${rootId}-item-${index}`;
+                                                    const hasSubMenu = (field.type === 'select' || field.type === 'multiselect') && field.options?.length;
+                                                    if (hasSubMenu) {
+                                                        const isMultiSelect = field.type === 'multiselect';
+                                                        const fieldKey = field.key;
+                                                        const sessionFilterId = sessionFilterIds[fieldKey];
+                                                        const sessionFilter = sessionFilterId ? filters.find((f) => f.id === sessionFilterId) : null;
+                                                        const currentValues = sessionFilter?.values || [];
+                                                        return (_jsxs(DropdownMenuSub, { open: openSubMenu === fieldKey, onOpenChange: (open) => {
+                                                                if (open) {
+                                                                    setOpenSubMenu(fieldKey);
+                                                                }
+                                                                else {
+                                                                    if (openSubMenu === fieldKey) {
+                                                                        setOpenSubMenu(null);
+                                                                        setActiveMenu('root');
+                                                                    }
+                                                                }
+                                                            }, children: [_jsxs(DropdownMenuSubTrigger, { id: itemId, role: "option", "aria-selected": isHighlighted, "data-highlighted": isHighlighted || undefined, onMouseEnter: () => {
+                                                                        setHighlightedIndex(index);
+                                                                        setActiveMenu('root');
+                                                                    }, className: "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground", children: [field.icon, _jsx("span", { children: field.label })] }), _jsx(DropdownMenuSubContent, { className: "w-[200px]", side: "right", children: _jsx(FilterSubmenuContent, { field: field, currentValues: currentValues, isMultiSelect: isMultiSelect, i18n: mergedI18n, isActive: activeMenu === fieldKey, onActive: () => {
+                                                                            if (field.searchable !== false) {
+                                                                                setActiveMenu(fieldKey);
+                                                                            }
+                                                                        }, onBack: () => {
+                                                                            setOpenSubMenu(null);
+                                                                            setActiveMenu('root');
+                                                                        }, onClose: () => setAddFilterOpen(false), onToggle: (value, isSelected) => {
+                                                                            if (isMultiSelect) {
+                                                                                const nextValues = isSelected
+                                                                                    ? currentValues.filter((v) => v !== value)
+                                                                                    : [...currentValues, value];
+                                                                                if (sessionFilter) {
+                                                                                    if (nextValues.length === 0) {
+                                                                                        onChange(filters.filter((f) => f.id !== sessionFilter.id));
+                                                                                        setSessionFilterIds((prev) => ({
+                                                                                            ...prev,
+                                                                                            [fieldKey]: '',
+                                                                                        }));
+                                                                                    }
+                                                                                    else {
+                                                                                        onChange(filters.map((f) => f.id === sessionFilter.id ? { ...f, values: nextValues } : f));
+                                                                                    }
+                                                                                }
+                                                                                else {
+                                                                                    const newFilter = createFilter(fieldKey, field.defaultOperator || 'is_any_of', nextValues);
+                                                                                    onChange([...filters, newFilter]);
+                                                                                    setSessionFilterIds((prev) => ({
+                                                                                        ...prev,
+                                                                                        [fieldKey]: newFilter.id,
+                                                                                    }));
+                                                                                }
+                                                                            }
+                                                                            else {
+                                                                                const newFilter = createFilter(fieldKey, field.defaultOperator || 'is', [
+                                                                                    value,
+                                                                                ]);
+                                                                                setLastAddedFilterId(newFilter.id);
+                                                                                onChange([...filters, newFilter]);
+                                                                                setAddFilterOpen(false);
+                                                                            }
+                                                                        } }) })] }, fieldKey));
+                                                    }
+                                                    return (_jsxs(DropdownMenuItem, { id: itemId, role: "option", "aria-selected": isHighlighted, "data-highlighted": isHighlighted || undefined, onMouseEnter: () => setHighlightedIndex(index), onClick: () => field.key && addFilter(field.key), className: "data-highlighted:bg-accent data-highlighted:text-accent-foreground", children: [field.icon, _jsx("span", { children: field.label })] }, field.key));
+                                                });
+                                            })() }) }) })] })] })), filters.map((filter) => {
+                    const field = fieldsMap[filter.field];
+                    if (!field)
+                        return null;
+                    return (_jsxs(ButtonGroup, { children: [_jsxs(ButtonGroupText, { className: "bg-background dark:bg-input/30", children: [field.icon && field.icon, field.label] }), _jsx(FilterOperatorDropdown, { field: field, operator: filter.operator, values: filter.values, onChange: (operator) => updateFilter(filter.id, { operator }) }), _jsx(FilterValueSelector, { field: field, values: filter.values, operator: filter.operator, onChange: (values) => updateFilter(filter.id, { values }), autoFocus: filter.id === lastAddedFilterId }), _jsx(FilterRemoveButton, { onClick: () => removeFilter(filter.id) })] }, filter.id));
+                })] }) }));
+}