@wheelhouse/ui 0.2.2 → 0.2.3

package/dist/components/filters/filters.js

@@ -1,38 +1,42 @@
 '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 { createContext, Fragment, 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 { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, 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 { AlertCircle, Check, X } from 'lucide-react';
-import { createOperatorsFromI18n, DEFAULT_I18N } from './filters-defaults';
-import { createFilter } from './filters-utils';
+import { AlertCircle, Check, ChevronDown, Plus, X } from 'lucide-react';
+import { FilterDateMetricBarPeriodSegments, FilterDateMetricBarValueSegment } from './filter-date-metric-value';
+import { DEFAULT_I18N } from './filters-defaults';
+import { createDefaultDateMetricPayload, createFilter, getOperatorsForField, mergeFilterUpdate } from './filters-utils';
+/** Default for `Filters` `submenuSearchMinOptions`. */
+export const DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS = 10;
+function shouldShowSubmenuSearchField(field, minOptions) {
+    if (field.searchable === false)
+        return false;
+    const threshold = Number.isFinite(minOptions) && minOptions >= 0 ? minOptions : DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS;
+    return (field.options?.length ?? 0) >= threshold;
+}
 const FilterContext = createContext({
-    variant: 'default',
-    size: 'default',
+    size: 'sm',
     radius: 'default',
+    submenuSearchMinOptions: DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS,
     i18n: DEFAULT_I18N,
     className: undefined,
-    showSearchInput: true,
     trigger: undefined,
     allowMultiple: true,
 });
 const useFilterContext = () => useContext(FilterContext);
-// Container variant for filters wrapper
+// Container spacing for the filters wrapper (chip wrap gap by `size` only).
 const filtersContainerVariants = cva('flex flex-wrap items-center', {
     variants: {
-        variant: {
-            solid: 'gap-2',
-            default: '',
-        },
         size: {
             sm: 'gap-1.5',
             default: 'gap-2.5',
@@ -40,8 +44,7 @@ const filtersContainerVariants = cva('flex flex-wrap items-center', {
         },
     },
     defaultVariants: {
-        variant: 'default',
-        size: 'default',
+        size: 'sm',
     },
 });
 function FilterInput({ field, onBlur, onKeyDown, className, ...props }) {
@@ -139,6 +142,31 @@ const flattenFields = (fields) => {
         return [...acc, item];
     }, []);
 };
+/** True when the config uses top-level `{ group?, fields }` containers (add-filter menu shows section labels). */
+const hasTopLevelFieldGroups = (config) => {
+    return config.some((item) => {
+        if (!item || typeof item !== 'object')
+            return false;
+        return 'fields' in item && Array.isArray(item.fields);
+    });
+};
+const parseTopLevelSections = (config) => {
+    const sections = [];
+    for (const raw of config) {
+        const item = raw;
+        if (item && typeof item === 'object' && 'fields' in item && Array.isArray(item.fields)) {
+            const groupLabel = 'group' in item && item.group ? String(item.group) : undefined;
+            sections.push({ groupLabel, fields: item.fields });
+        }
+        else {
+            const f = raw;
+            if (f.key && f.type !== 'separator') {
+                sections.push({ groupLabel: undefined, fields: [f] });
+            }
+        }
+    }
+    return sections;
+};
 const getFieldsMap = (fields) => {
     const flatFields = flattenFields(fields);
     return flatFields.reduce((acc, field) => {
@@ -149,42 +177,34 @@ const getFieldsMap = (fields) => {
         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(Check, { className: cn('ms-auto text-primary', op.value === operator ? 'opacity-100' : 'opacity-0') })] }, op.value))) })] }));
+    const currentOp = operators.find((op) => op.value === operator);
+    const operatorLabel = currentOp?.label || context.i18n.helpers.formatOperator(operator);
+    const compactTrigger = Boolean(currentOp?.icon);
+    const triggerButton = (_jsx(Button, { variant: "outline", size: context.size, className: cn('text-muted-foreground hover:text-foreground', compactTrigger && 'min-w-8 px-2 text-foreground text-muted-foreground [&_svg]:size-3.5 [&_svg]:shrink-0'), "aria-label": compactTrigger ? operatorLabel : undefined, children: compactTrigger ? currentOp?.icon : operatorLabel }));
+    return (_jsxs(DropdownMenu, { children: [compactTrigger ? (_jsxs(Tooltip, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(TooltipTrigger, { render: triggerButton }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: operatorLabel })] })) : (_jsx(DropdownMenuTrigger, { render: triggerButton })), _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: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [op.icon ? _jsx("span", { className: "inline-flex shrink-0 text-muted-foreground [&_svg]:size-3.5", children: op.icon }) : null, _jsx("span", { className: "truncate", children: op.label })] }), _jsx(Check, { className: cn('ms-auto shrink-0 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 listboxRef = useRef(null);
     const context = useFilterContext();
     const baseId = useId();
+    const showSubmenuSearch = shouldShowSubmenuSearchField(field, context.submenuSearchMinOptions);
     useEffect(() => {
-        if (open) {
+        if (!open)
+            return;
+        if (showSubmenuSearch) {
             inputRef.current?.focus();
         }
-    }, [open]);
+        else {
+            listboxRef.current?.focus();
+        }
+    }, [open, showSubmenuSearch]);
     useEffect(() => {
         if (highlightedIndex >= 0 && open) {
             const element = document.getElementById(`${baseId}-item-${highlightedIndex}`);
@@ -192,65 +212,70 @@ function SelectOptionsPopover({ field, values, onChange, onClose, inline = false
         }
     }, [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 effectiveValues = useMemo(() => (field.value !== undefined ? field.value : values) || [], [field.value, values]);
+    const selectedOptions = useMemo(() => field.options?.filter((opt) => effectiveValues.includes(opt.value)) || [], [field.options, effectiveValues]);
     const triggerPreviewIcons = selectedOptions.slice(0, 3).filter((option) => option.icon != null);
-    const unselectedOptions = field.options?.filter((opt) => !effectiveValues.includes(opt.value)) || [];
+    const unselectedOptions = useMemo(() => field.options?.filter((opt) => !effectiveValues.includes(opt.value)) || [], [field.options, effectiveValues]);
     // 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 = () => {
+    const filteredUnselectedOptions = useMemo(() => unselectedOptions.filter((opt) => opt.label.toLowerCase().includes(searchInput.toLowerCase())), [unselectedOptions, searchInput]);
+    const allFilteredOptions = useMemo(() => [...filteredSelectedOptions, ...filteredUnselectedOptions], [filteredSelectedOptions, filteredUnselectedOptions]);
+    const handleClose = useCallback(() => {
         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) => {
+    }, [onClose]);
+    const onSelectOptionsListKeyDown = useCallback((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();
+    }, [allFilteredOptions, highlightedIndex, effectiveValues, isMultiSelect, field, onChange, handleClose]);
+    const renderMenuContent = () => (_jsxs(_Fragment, { children: [showSubmenuSearch && (_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) => {
+                        }, onBlur: () => open && showSubmenuSearch && inputRef.current?.focus(), onClick: (e) => e.stopPropagation(), onKeyDown: onSelectOptionsListKeyDown }), _jsx(DropdownMenuSeparator, {})] })), _jsx("div", { className: "relative flex max-h-full", children: _jsx("div", { ref: listboxRef, className: cn('flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain', !showSubmenuSearch && 'outline-hidden'), role: "listbox", id: `${baseId}-listbox`, tabIndex: !showSubmenuSearch ? 0 : -1, onKeyDown: (e) => {
+                        if (!showSubmenuSearch) {
+                            onSelectOptionsListKeyDown(e);
+                        }
+                    }, 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) => {
@@ -305,11 +330,12 @@ function SelectOptionsPopover({ field, values, onChange, onClose, inline = false
                                         : context.i18n.select] })) }) }) }), _jsx(DropdownMenuContent, { align: "start", className: cn('w-[200px] px-0', field.className), children: renderMenuContent() })] }));
 }
 function FilterValueSelector({ field, values, onChange, operator, autoFocus }) {
+    const context = useFilterContext();
     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 }) }));
+        return (_jsx(ButtonGroupText, { size: context.size, 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 }));
@@ -319,32 +345,30 @@ function FilterValueSelector({ field, values, onChange, operator, autoFocus }) {
     }
     return _jsx(SelectOptionsPopover, { field: field, values: values, onChange: onChange });
 }
-export const FiltersContent = ({ filters, fields, onChange }) => {
+function FilterBarRow({ filter, field, i18n, size, radius, lastAddedFilterId, onUpdateFilter, onRemove, filterLabelClassName, }) {
+    return (_jsxs(ButtonGroup, { className: cn(radius === 'full' &&
+            '*:data-[slot]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:!rounded-r-full [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0'), children: [_jsxs(ButtonGroupText, { size: size, className: cn(filterLabelClassName, radius === 'full' && '!rounded-l-full !rounded-r-none'), children: [field.icon && field.icon, field.label] }), field.type === 'date_metric' ? (_jsx(FilterDateMetricBarPeriodSegments, { field: field, values: filter.values, onChange: (values) => onUpdateFilter({ values }), i18n: i18n, size: size, autoFocus: filter.id === lastAddedFilterId })) : null, _jsx(FilterOperatorDropdown, { field: field, operator: filter.operator, values: filter.values, onChange: (operator) => onUpdateFilter({ operator }) }), field.type === 'date_metric' ? (_jsx(FilterDateMetricBarValueSegment, { field: field, values: filter.values, onChange: (values) => onUpdateFilter({ values }), operator: filter.operator, i18n: i18n, size: size, onOperatorChange: (operator) => onUpdateFilter({ operator }) }, `${filter.id}-${filter.operator}`)) : (_jsx(FilterValueSelector, { field: field, values: filter.values, onChange: (values) => onUpdateFilter({ values }), operator: filter.operator, autoFocus: filter.id === lastAddedFilterId })), _jsx(FilterRemoveButton, { onClick: onRemove, className: cn(radius === 'full' && 'shrink-0 !rounded-l-none !rounded-r-full') })] }));
+}
+export const FiltersContent = ({ filters, fields, onChange, lastAddedFilterId = null }) => {
     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;
+            if (filter.id !== filterId)
+                return filter;
+            return mergeFilterUpdate(filter, updates, fieldsMap[filter.field]);
         }));
-    }, [filters, onChange]);
+    }, [filters, onChange, fieldsMap]);
     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));
+            return (_jsx(FilterBarRow, { filter: filter, field: field, i18n: context.i18n, size: context.size, radius: context.radius, lastAddedFilterId: lastAddedFilterId, onUpdateFilter: (updates) => updateFilter(filter.id, updates), onRemove: () => removeFilter(filter.id) }, filter.id));
         }) }));
 };
 function FilterSubmenuContent({ field, currentValues, isMultiSelect, onToggle, i18n, isActive, onActive, onBack, onClose, }) {
@@ -352,9 +376,11 @@ function FilterSubmenuContent({ field, currentValues, isMultiSelect, onToggle, i
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const inputRef = useRef(null);
     const baseId = useId();
+    const filterCtx = useFilterContext();
+    const showSubmenuSearch = shouldShowSubmenuSearchField(field, filterCtx.submenuSearchMinOptions);
     useEffect(() => {
         if (isActive) {
-            if (field.searchable !== false) {
+            if (showSubmenuSearch) {
                 inputRef.current?.focus();
             }
             else {
@@ -362,7 +388,7 @@ function FilterSubmenuContent({ field, currentValues, isMultiSelect, onToggle, i
                 listbox?.focus();
             }
         }
-    }, [isActive, field.searchable, baseId]);
+    }, [isActive, showSubmenuSearch, baseId]);
     const filteredOptions = useMemo(() => {
         return (field.options?.filter((option) => {
             const isSelected = currentValues.includes(option.value);
@@ -388,77 +414,48 @@ function FilterSubmenuContent({ field, currentValues, isMultiSelect, onToggle, i
             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) => {
+    const onFilterSubmenuListKeyDown = useCallback((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();
+    }, [filteredOptions, resolvedHighlight, currentValues, isMultiSelect, onToggle, onBack, onClose]);
+    return (_jsxs("div", { className: "flex flex-col", onMouseEnter: onActive, children: [showSubmenuSearch && (_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 && showSubmenuSearch && 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();
+                        }, onClick: (e) => e.stopPropagation(), onKeyDown: onFilterSubmenuListKeyDown }), _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: !showSubmenuSearch ? 0 : -1, onKeyDown: (e) => {
+                        if (!showSubmenuSearch) {
+                            onFilterSubmenuListKeyDown(e);
                         }
                     }, 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);
@@ -470,14 +467,16 @@ function FilterSubmenuContent({ field, currentValues, isMultiSelect, onToggle, i
                                     }, 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', }) {
+export function Filters({ filters, fields, onChange, className, size = 'sm', radius = 'default', i18n, showSearchInput = true, submenuSearchMinOptions = DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS, trigger, allowMultiple = true, menuPopupClassName, collapsibleAddFilterGroups = false, defaultAddFilterGroupsCollapsed = false, nestedAddFilterGroups = false, collapseAddButton = false, 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 [openAddFilterSectionIndex, setOpenAddFilterSectionIndex] = useState(null);
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const [lastAddedFilterId, setLastAddedFilterId] = useState(null);
     const rootInputRef = useRef(null);
+    const prevAddFilterOpenRef = useRef(false);
     const rootId = useId();
     useEffect(() => {
         if (!enableShortcut)
@@ -501,6 +500,7 @@ export function Filters({ filters, fields, onChange, className, variant = 'defau
     // 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({});
+    const [collapsedAddFilterGroupIndices, setCollapsedAddFilterGroupIndices] = useState(() => new Set());
     useEffect(() => {
         if (lastAddedFilterId) {
             const timer = setTimeout(() => {
@@ -509,34 +509,30 @@ export function Filters({ filters, fields, onChange, className, variant = 'defau
             return () => clearTimeout(timer);
         }
     }, [lastAddedFilterId]);
-    const mergedI18n = {
+    const mergedI18n = useMemo(() => ({
         ...DEFAULT_I18N,
         ...i18n,
         operators: { ...DEFAULT_I18N.operators, ...i18n?.operators },
         placeholders: { ...DEFAULT_I18N.placeholders, ...i18n?.placeholders },
         validation: { ...DEFAULT_I18N.validation, ...i18n?.validation },
-    };
+        helpers: { ...DEFAULT_I18N.helpers, ...i18n?.helpers },
+    }), [i18n]);
     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;
+            if (filter.id !== filterId)
+                return filter;
+            return mergeFilterUpdate(filter, updates, fieldsMap[filter.field]);
         }));
-    }, [filters, onChange]);
+    }, [filters, onChange, fieldsMap]);
     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 defaultOperator = field.defaultOperator || (field.type === 'multiselect' ? 'is_any_of' : field.type === 'date_metric' ? 'value_greater_than' : 'is');
+            const defaultValues = field.type === 'text' ? [''] : field.type === 'date_metric' ? [createDefaultDateMetricPayload()] : [];
             const newFilter = createFilter(fieldKey, defaultOperator, defaultValues);
             setLastAddedFilterId(newFilter.id);
             onChange([...filters, newFilter]);
@@ -544,6 +540,18 @@ export function Filters({ filters, fields, onChange, className, variant = 'defau
             setMenuSearchInput('');
         }
     }, [fieldsMap, filters, onChange]);
+    const toggleAddFilterGroupCollapsed = useCallback((sectionIndex) => {
+        setCollapsedAddFilterGroupIndices((prev) => {
+            const next = new Set(prev);
+            if (next.has(sectionIndex)) {
+                next.delete(sectionIndex);
+            }
+            else {
+                next.add(sectionIndex);
+            }
+            return next;
+        });
+    }, []);
     const selectableFields = useMemo(() => {
         const flatFields = flattenFields(fields);
         return flatFields.filter((field) => {
@@ -554,96 +562,322 @@ export function Filters({ filters, fields, onChange, className, variant = 'defau
             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 useGroupedAddMenu = useMemo(() => hasTopLevelFieldGroups(fields), [fields]);
+    const { filteredFields, filteredSections } = useMemo(() => {
+        const matchesSearch = (f, groupLabel) => {
+            if (!menuSearchInput)
+                return true;
+            const ql = menuSearchInput.toLowerCase();
+            if (f.label?.toLowerCase().includes(ql))
+                return true;
+            if (groupLabel?.toLowerCase().includes(ql))
+                return true;
+            return false;
+        };
+        const isSelectableLeaf = (f) => {
+            if (!f.key || f.type === 'separator')
+                return false;
+            if (allowMultiple)
+                return true;
+            return !filters.some((filter) => filter.field === f.key);
+        };
+        if (!useGroupedAddMenu) {
+            return {
+                filteredFields: selectableFields.filter((f) => matchesSearch(f, undefined)),
+                filteredSections: undefined,
+            };
+        }
+        const sections = parseTopLevelSections(fields)
+            .map((sec) => ({
+            groupLabel: sec.groupLabel,
+            fields: sec.fields.filter(isSelectableLeaf).filter((f) => matchesSearch(f, sec.groupLabel)),
+        }))
+            .filter((sec) => sec.fields.length > 0);
+        return {
+            filteredFields: sections.flatMap((s) => s.fields),
+            filteredSections: sections,
+        };
+    }, [fields, filters, allowMultiple, menuSearchInput, useGroupedAddMenu, selectableFields]);
+    const nestedRootRows = useMemo(() => {
+        if (!useGroupedAddMenu || !nestedAddFilterGroups) {
+            return null;
+        }
+        if (!filteredSections?.length) {
+            return [];
+        }
+        return filteredSections.map((section, sectionIndex) => {
+            const needsSectionSubmenu = Boolean(section.groupLabel) || section.fields.length > 1;
+            if (needsSectionSubmenu) {
+                return {
+                    rowType: 'section',
+                    sectionIndex,
+                    label: section.groupLabel ?? mergedI18n.addFilterUngroupedSection,
+                    fields: section.fields,
+                };
+            }
+            return { rowType: 'inlineField', sectionIndex, field: section.fields[0] };
+        });
+    }, [useGroupedAddMenu, nestedAddFilterGroups, filteredSections, mergedI18n.addFilterUngroupedSection]);
+    const flatAddMenuKeyboardFields = useMemo(() => {
+        if (nestedAddFilterGroups && useGroupedAddMenu) {
+            return filteredFields;
+        }
+        if (!useGroupedAddMenu || !collapsibleAddFilterGroups || !filteredSections?.length) {
+            return filteredFields;
+        }
+        return filteredSections.flatMap((sec, si) => (collapsedAddFilterGroupIndices.has(si) ? [] : sec.fields));
+    }, [nestedAddFilterGroups, useGroupedAddMenu, collapsibleAddFilterGroups, filteredSections, collapsedAddFilterGroupIndices, filteredFields]);
+    const rootMenuLength = nestedRootRows !== null ? nestedRootRows.length : flatAddMenuKeyboardFields.length;
+    useEffect(() => {
+        const justOpened = addFilterOpen && !prevAddFilterOpenRef.current;
+        prevAddFilterOpenRef.current = addFilterOpen;
+        if (!justOpened) {
+            return;
+        }
+        if (nestedAddFilterGroups && useGroupedAddMenu) {
+            setCollapsedAddFilterGroupIndices(new Set());
+            return;
+        }
+        if (collapsibleAddFilterGroups && defaultAddFilterGroupsCollapsed && filteredSections?.length) {
+            setCollapsedAddFilterGroupIndices(new Set(filteredSections.map((_, i) => i)));
+        }
+        else {
+            setCollapsedAddFilterGroupIndices(new Set());
+        }
+    }, [addFilterOpen, collapsibleAddFilterGroups, defaultAddFilterGroupsCollapsed, filteredSections, nestedAddFilterGroups, useGroupedAddMenu]);
     const rootResolvedHighlight = useMemo(() => {
-        if (!addFilterOpen || filteredFields.length === 0) {
+        if (!addFilterOpen || rootMenuLength === 0) {
             return -1;
         }
         if (highlightedIndex < 0) {
             return 0;
         }
-        return Math.min(highlightedIndex, filteredFields.length - 1);
-    }, [addFilterOpen, filteredFields.length, highlightedIndex]);
+        return Math.min(highlightedIndex, rootMenuLength - 1);
+    }, [addFilterOpen, rootMenuLength, highlightedIndex]);
     useEffect(() => {
         if (rootResolvedHighlight >= 0 && addFilterOpen) {
             const element = document.getElementById(`${rootId}-item-${rootResolvedHighlight}`);
             element?.scrollIntoView({ block: 'nearest' });
         }
     }, [rootResolvedHighlight, addFilterOpen, rootId]);
+    const addMenuCollapsed = Boolean(collapseAddButton && filters.length > 0);
     const triggerButton = useRender({
-        render: trigger,
+        render: (addMenuCollapsed ? (_jsx(Button, { variant: "outline", size: size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon', "aria-label": mergedI18n.addFilterTitle, children: _jsx(Plus, { className: "size-4 shrink-0", "aria-hidden": true }) })) : (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) => {
+    const filterContextValue = useMemo(() => ({
+        size,
+        radius,
+        submenuSearchMinOptions,
+        i18n: mergedI18n,
+        className,
+        trigger,
+        allowMultiple,
+    }), [size, radius, submenuSearchMinOptions, mergedI18n, className, trigger, allowMultiple]);
+    const renderAddFilterMenuFieldRow = (field, index, rowOpts) => {
+        const rootListHi = rowOpts?.rootListHighlightIndex;
+        const isHighlighted = rootListHi === null ? false : rootResolvedHighlight === (rootListHi === undefined ? index : rootListHi);
+        const itemId = rowOpts?.itemId ?? `${rootId}-item-${index}`;
+        const hasSubMenu = (field.type === 'select' || field.type === 'multiselect') && field.options?.length;
+        const syncRootListHighlight = () => {
+            if (rowOpts?.rootListHighlightIndex === null)
+                return;
+            const hi = rowOpts?.rootListHighlightIndex ?? index;
+            setHighlightedIndex(hi);
+            setActiveMenu('root');
+        };
+        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: syncRootListHighlight, 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 (shouldShowSubmenuSearchField(field, filterContextValue.submenuSearchMinOptions)) {
+                                    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: syncRootListHighlight, 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));
+    };
+    return (_jsx(FilterContext.Provider, { value: filterContextValue, children: _jsxs("div", { className: cn(filtersContainerVariants({ size }), className), children: [selectableFields.length > 0 && (_jsxs(DropdownMenu, { open: addFilterOpen, onOpenChange: (open) => {
                         setAddFilterOpen(open);
                         if (!open) {
                             setMenuSearchInput('');
                             setSessionFilterIds({});
                             setOpenSubMenu(null);
+                            setOpenAddFilterSectionIndex(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) => {
+                    }, 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: (e) => {
+                                                        const rt = e.relatedTarget;
+                                                        const menuSurface = e.currentTarget.closest('[data-slot="dropdown-menu-content"]');
+                                                        const focusStaysInsideMenu = Boolean(rt) &&
+                                                            (Boolean(menuSurface?.contains(rt)) ||
+                                                                Boolean(rt?.closest?.('[data-slot="dropdown-menu-sub-content"]')));
+                                                        if (activeMenu === 'root' && !focusStaysInsideMenu) {
+                                                            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));
+                                                            if (rootMenuLength > 0) {
+                                                                setHighlightedIndex((prev) => (prev < rootMenuLength - 1 ? prev + 1 : 0));
                                                             }
                                                         }
                                                         else if (e.key === 'ArrowUp') {
                                                             e.preventDefault();
-                                                            if (filteredFields.length > 0) {
-                                                                setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredFields.length - 1));
+                                                            if (rootMenuLength > 0) {
+                                                                setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : rootMenuLength - 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');
+                                                            if (nestedRootRows) {
+                                                                const row = nestedRootRows[rootResolvedHighlight];
+                                                                if (e.key === 'ArrowRight' && row) {
+                                                                    e.preventDefault();
+                                                                    if (row.rowType === 'section') {
+                                                                        setOpenAddFilterSectionIndex(row.sectionIndex);
+                                                                        setOpenSubMenu(null);
+                                                                        setActiveMenu('root');
+                                                                    }
+                                                                    else {
+                                                                        const field = row.field;
+                                                                        const hasSubMenu = (field.type === 'select' || field.type === 'multiselect') && field.options?.length;
+                                                                        if (hasSubMenu && field.key) {
+                                                                            setOpenSubMenu(field.key);
+                                                                            setActiveMenu(field.key);
+                                                                        }
+                                                                    }
+                                                                }
+                                                                else if (e.key === 'ArrowLeft') {
+                                                                    e.preventDefault();
+                                                                    if (openSubMenu) {
+                                                                        setOpenSubMenu(null);
+                                                                        setActiveMenu('root');
+                                                                    }
+                                                                    else if (openAddFilterSectionIndex !== null) {
+                                                                        setOpenAddFilterSectionIndex(null);
+                                                                        setActiveMenu('root');
+                                                                    }
+                                                                }
                                                             }
-                                                            else if (e.key === 'ArrowLeft') {
-                                                                e.preventDefault();
-                                                                if (openSubMenu) {
-                                                                    setOpenSubMenu(null);
-                                                                    setActiveMenu('root');
+                                                            else {
+                                                                const field = flatAddMenuKeyboardFields[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);
+                                                            if (nestedRootRows) {
+                                                                const row = nestedRootRows[rootResolvedHighlight];
+                                                                if (row?.rowType === 'section') {
+                                                                    if (openAddFilterSectionIndex === row.sectionIndex) {
+                                                                        setOpenAddFilterSectionIndex(null);
+                                                                        setOpenSubMenu(null);
+                                                                        setActiveMenu('root');
+                                                                    }
+                                                                    else {
+                                                                        setOpenAddFilterSectionIndex(row.sectionIndex);
+                                                                        setOpenSubMenu(null);
+                                                                        setActiveMenu('root');
+                                                                    }
                                                                 }
-                                                                else {
-                                                                    if (openSubMenu === field.key) {
+                                                                else if (row?.field.key) {
+                                                                    const fieldKey = row.field.key;
+                                                                    const field = row.field;
+                                                                    const hasSubMenu = (field.type === 'select' || field.type === 'multiselect') && field.options?.length;
+                                                                    if (!hasSubMenu) {
+                                                                        addFilter(fieldKey);
+                                                                    }
+                                                                    else if (openSubMenu === fieldKey) {
                                                                         setOpenSubMenu(null);
                                                                         setActiveMenu('root');
                                                                     }
                                                                     else {
-                                                                        setOpenSubMenu(field.key);
-                                                                        setActiveMenu(field.key);
+                                                                        setOpenSubMenu(fieldKey);
+                                                                        setActiveMenu(fieldKey);
+                                                                    }
+                                                                }
+                                                            }
+                                                            else {
+                                                                const field = flatAddMenuKeyboardFields[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);
+                                                                        }
                                                                     }
                                                                 }
                                                             }
@@ -656,78 +890,47 @@ export function Filters({ filters, fields, onChange, className, variant = 'defau
                                                 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: () => {
+                                                if (useGroupedAddMenu && filteredSections?.length) {
+                                                    if (nestedRootRows !== null) {
+                                                        return nestedRootRows.map((row, ri) => (_jsx(Fragment, { children: row.rowType === 'inlineField' ? (_jsx(DropdownMenuGroup, { children: renderAddFilterMenuFieldRow(row.field, ri, {
+                                                                    itemId: `${rootId}-item-${ri}`,
+                                                                    rootListHighlightIndex: ri,
+                                                                }) })) : (_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuSub, { open: openAddFilterSectionIndex === row.sectionIndex, onOpenChange: (open) => {
+                                                                        if (open) {
+                                                                            setOpenAddFilterSectionIndex(row.sectionIndex);
+                                                                            setOpenSubMenu(null);
+                                                                            setActiveMenu('root');
+                                                                        }
+                                                                        else {
+                                                                            setOpenAddFilterSectionIndex((prev) => prev === row.sectionIndex ? null : prev);
                                                                             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));
+                                                                        }
+                                                                    }, children: [_jsx(DropdownMenuSubTrigger, { id: `${rootId}-item-${ri}`, role: "option", "aria-selected": rootResolvedHighlight === ri, "data-highlighted": rootResolvedHighlight === ri || undefined, onMouseEnter: () => {
+                                                                                setHighlightedIndex(ri);
+                                                                                setActiveMenu('root');
+                                                                            }, className: "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground", children: _jsx("span", { className: "min-w-0 flex-1 truncate", children: row.label }) }), _jsx(DropdownMenuSubContent, { className: cn('w-[220px]', menuPopupClassName), side: "right", align: "start", children: _jsx(ScrollArea, { className: "max-h-[min(var(--available-height),22rem)] **:data-[slot=scroll-area-scrollbar]:m-0", children: _jsx(DropdownMenuGroup, { children: row.fields.map((field, fi) => renderAddFilterMenuFieldRow(field, fi, {
+                                                                                        itemId: `${rootId}-s${row.sectionIndex}-i${fi}`,
+                                                                                        rootListHighlightIndex: null,
+                                                                                    })) }) }) })] }) })) }, `add-filter-root-${row.rowType}-${row.sectionIndex}`)));
                                                     }
-                                                    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));
-                                                });
+                                                    let running = 0;
+                                                    return filteredSections.map((section, si) => {
+                                                        const showCollapsibleHeader = collapsibleAddFilterGroups && (!!section.groupLabel || section.fields.length > 1);
+                                                        const isCollapsed = collapsibleAddFilterGroups && showCollapsibleHeader && collapsedAddFilterGroupIndices.has(si);
+                                                        return (_jsxs(Fragment, { children: [_jsxs(DropdownMenuGroup, { children: [collapsibleAddFilterGroups && showCollapsibleHeader ? (_jsxs("button", { type: "button", "aria-expanded": !isCollapsed, className: cn('flex w-full items-center gap-1 rounded-md px-1.5 py-1.5 text-left text-xs font-medium text-muted-foreground outline-none select-none', 'hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring'), onClick: (e) => {
+                                                                                e.preventDefault();
+                                                                                e.stopPropagation();
+                                                                                toggleAddFilterGroupCollapsed(si);
+                                                                            }, children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: section.groupLabel ?? mergedI18n.addFilterUngroupedSection }), _jsx(ChevronDown, { className: cn('size-4 shrink-0 opacity-70 transition-transform', isCollapsed && '-rotate-90'), "aria-hidden": true })] })) : section.groupLabel ? (_jsx(DropdownMenuLabel, { children: section.groupLabel })) : null, (!collapsibleAddFilterGroups || !showCollapsibleHeader || !isCollapsed) &&
+                                                                            section.fields.map((field) => renderAddFilterMenuFieldRow(field, running++))] }), collapsibleAddFilterGroups && filteredSections.length > 1 && si < filteredSections.length - 1 ? (_jsx(DropdownMenuSeparator, {})) : null] }, `add-filter-section-${si}`));
+                                                    });
+                                                }
+                                                return flatAddMenuKeyboardFields.map((field, index) => renderAddFilterMenuFieldRow(field, index));
                                             })() }) }) })] })] })), 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));
+                    return (_jsx(FilterBarRow, { filter: filter, field: field, i18n: mergedI18n, size: size, radius: radius, lastAddedFilterId: lastAddedFilterId, onUpdateFilter: (updates) => updateFilter(filter.id, updates), onRemove: () => removeFilter(filter.id), filterLabelClassName: "bg-background dark:bg-input/30" }, filter.id));
                 })] }) }));
 }