@wallarm-org/design-system 0.78.1 → 0.80.0

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useNestedValueMenuState.d.ts

@@ -0,0 +1,65 @@
+import type { RefObject } from 'react';
+import type { CheckboxCheckedState } from '@ark-ui/react/checkbox';
+import type { ValueMenuRow, ValueMenuSection } from '../../lib/buildValueMenuSections';
+import type { FieldValueOption } from '../../types';
+type ConditionValue = string | number | boolean;
+/** Sentinel id for the submenu's "Select all / Unselect all" toggle row. */
+export declare const SELECT_ALL_ID = "__filter_value_select_all__";
+interface UseNestedValueMenuStateOptions {
+    /** Filtered, ordered top-level sections. */
+    sections: ValueMenuSection[];
+    /** Full (unfiltered) value tree — used for leaf-label resolution / preview. */
+    allValues: FieldValueOption[];
+    open: boolean;
+    multiSelect: boolean;
+    initialValues: ConditionValue[];
+    onSelect: (value: ConditionValue) => void;
+    onCommit?: (values: ConditionValue[]) => void;
+    onEscape?: () => void;
+    onOpenChange?: (open: boolean) => void;
+    onBuildingValueChange?: (preview: string | undefined) => void;
+    onItemToggle?: () => void;
+    inputRef?: RefObject<HTMLInputElement | null>;
+    menuRef?: RefObject<HTMLDivElement | null>;
+    submenuRef?: RefObject<HTMLDivElement | null>;
+    blurCommitRef?: RefObject<(() => boolean) | null>;
+}
+/**
+ * Selection + two-level keyboard navigation for the **nested** value menu
+ * (sections + a right-side submenu of leaf sub-values). Selection state is a
+ * single flat array of committed **leaf** values — group rows are never stored;
+ * toggling one is a bulk shortcut for its descendant leaves.
+ *
+ * Only one level listens for keys at a time: the two `useKeyboardNav` instances
+ * are gated on `open` so the top-level listener detaches while the submenu is
+ * open and vice-versa (no double navigation).
+ */
+export declare const useNestedValueMenuState: ({ sections, allValues, open, multiSelect, initialValues, onSelect, onCommit, onEscape, onOpenChange, onBuildingValueChange, onItemToggle, inputRef, menuRef, submenuRef, blurCommitRef, }: UseNestedValueMenuStateOptions) => {
+    checkedValues: ConditionValue[];
+    openParentId: string | null;
+    openParent: (id: string) => void;
+    closeParent: () => void;
+    cancelClose: () => void;
+    scheduleClose: () => void;
+    openParentRow: ValueMenuRow | undefined;
+    submenuRows: ValueMenuRow[];
+    selectRow: (row: ValueMenuRow, fromSubmenu: boolean) => void;
+    toggleGroup: (option: FieldValueOption) => void;
+    isLeafChecked: (value: ConditionValue) => boolean;
+    getRowCheckState: (row: ValueMenuRow) => CheckboxCheckedState;
+    allLeavesChecked: (option: FieldValueOption) => boolean;
+    commitChecked: () => boolean;
+    topHighlightedValue: string;
+    onTopHighlightChange: (details: {
+        highlightedValue: string | null;
+    }) => void;
+    topPendingIds: Set<string>;
+    registerTopItem: (id: string) => (el: HTMLElement | null) => void;
+    submenuHighlightedValue: string;
+    onSubmenuHighlightChange: (details: {
+        highlightedValue: string | null;
+    }) => void;
+    submenuPendingIds: Set<string>;
+    registerSubmenuItem: (id: string) => (el: HTMLElement | null) => void;
+};
+export {};

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useNestedValueMenuState.js

@@ -0,0 +1,293 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { collectLeaves } from "../../lib/index.js";
+import { useKeyboardNav } from "../hooks/useKeyboardNav.js";
+const SELECT_ALL_ID = '__filter_value_select_all__';
+const leafKeys = (option)=>collectLeaves(option.children).map((leaf)=>String(leaf.value));
+const useNestedValueMenuState = ({ sections, allValues, open, multiSelect, initialValues, onSelect, onCommit, onEscape, onOpenChange, onBuildingValueChange, onItemToggle, inputRef, menuRef, submenuRef, blurCommitRef })=>{
+    const [checkedValues, setCheckedValues] = useState(initialValues);
+    const checkedValuesRef = useRef(checkedValues);
+    checkedValuesRef.current = checkedValues;
+    const [openParentId, setOpenParentId] = useState(null);
+    const checkedSet = useMemo(()=>new Set(checkedValues.map(String)), [
+        checkedValues
+    ]);
+    const prevSerializedRef = useRef(null);
+    useEffect(()=>{
+        const serialized = initialValues.map(String).sort().join('\0');
+        if (serialized === prevSerializedRef.current) return;
+        prevSerializedRef.current = serialized;
+        setCheckedValues(initialValues);
+    }, [
+        initialValues
+    ]);
+    const prevOpenRef = useRef(open);
+    useEffect(()=>{
+        if (!open && prevOpenRef.current) setOpenParentId(null);
+        prevOpenRef.current = open;
+    }, [
+        open
+    ]);
+    const topRows = useMemo(()=>sections.flatMap((section)=>section.rows), [
+        sections
+    ]);
+    const topRowsRef = useRef(topRows);
+    topRowsRef.current = topRows;
+    const openParentRow = useMemo(()=>topRows.find((row)=>row.id === openParentId && row.isGroup), [
+        topRows,
+        openParentId
+    ]);
+    const submenuRows = useMemo(()=>{
+        if (!openParentRow) return [];
+        return (openParentRow.option.children ?? []).map((child)=>({
+                id: 'value' in child && null != child.value ? `leaf:${String(child.value)}` : `group:${child.label}`,
+                option: child,
+                isGroup: Array.isArray(child.children)
+            }));
+    }, [
+        openParentRow
+    ]);
+    const toggleValue = useCallback((value)=>{
+        setCheckedValues((prev)=>{
+            const key = String(value);
+            return prev.some((v)=>String(v) === key) ? prev.filter((v)=>String(v) !== key) : [
+                ...prev,
+                value
+            ];
+        });
+    }, []);
+    const toggleMany = useCallback((values, on)=>{
+        if (0 === values.length) return;
+        setCheckedValues((prev)=>{
+            const keys = new Set(values.map(String));
+            const without = prev.filter((v)=>!keys.has(String(v)));
+            return on ? [
+                ...without,
+                ...values
+            ] : without;
+        });
+    }, []);
+    const onCommitRef = useRef(onCommit);
+    onCommitRef.current = onCommit;
+    const committingRef = useRef(false);
+    const commitChecked = useCallback(()=>{
+        if (committingRef.current) return false;
+        if (0 === checkedValuesRef.current.length || !onCommitRef.current) return false;
+        committingRef.current = true;
+        try {
+            onCommitRef.current(checkedValuesRef.current);
+            return true;
+        } finally{
+            committingRef.current = false;
+        }
+    }, []);
+    useEffect(()=>{
+        if (!blurCommitRef) return;
+        blurCommitRef.current = multiSelect ? commitChecked : null;
+        return ()=>{
+            blurCommitRef.current = null;
+        };
+    }, [
+        multiSelect,
+        blurCommitRef,
+        commitChecked
+    ]);
+    const isLeafChecked = useCallback((value)=>checkedSet.has(String(value)), [
+        checkedSet
+    ]);
+    const getRowCheckState = useCallback((row)=>{
+        if (!row.isGroup) return isLeafChecked(row.option.value);
+        const keys = leafKeys(row.option);
+        const present = keys.filter((key)=>checkedSet.has(key)).length;
+        if (0 === present) return false;
+        if (present === keys.length) return true;
+        return 'indeterminate';
+    }, [
+        checkedSet,
+        isLeafChecked
+    ]);
+    const allLeavesChecked = useCallback((option)=>{
+        const keys = leafKeys(option);
+        return keys.length > 0 && keys.every((key)=>checkedSet.has(key));
+    }, [
+        checkedSet
+    ]);
+    const closeTimerRef = useRef(null);
+    const cancelClose = useCallback(()=>{
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }, []);
+    const scheduleClose = useCallback(()=>{
+        cancelClose();
+        closeTimerRef.current = setTimeout(()=>{
+            closeTimerRef.current = null;
+            setOpenParentId(null);
+        }, 220);
+    }, [
+        cancelClose
+    ]);
+    const openParent = useCallback((id)=>{
+        cancelClose();
+        setOpenParentId(id);
+    }, [
+        cancelClose
+    ]);
+    const closeParent = useCallback(()=>{
+        cancelClose();
+        setOpenParentId(null);
+    }, [
+        cancelClose
+    ]);
+    useEffect(()=>()=>cancelClose(), [
+        cancelClose
+    ]);
+    const toggleGroup = useCallback((option)=>{
+        const leaves = collectLeaves(option.children).map((l)=>l.value);
+        toggleMany(leaves, !allLeavesChecked(option));
+        onItemToggle?.();
+    }, [
+        toggleMany,
+        allLeavesChecked,
+        onItemToggle
+    ]);
+    const selectRow = useCallback((row, fromSubmenu)=>{
+        if (row.isGroup) {
+            if (multiSelect) toggleGroup(row.option);
+            else if (!fromSubmenu) openParent(row.id);
+            return;
+        }
+        const value = row.option.value;
+        if (multiSelect) {
+            toggleValue(value);
+            onItemToggle?.();
+        } else onSelect(value);
+    }, [
+        multiSelect,
+        toggleGroup,
+        openParent,
+        toggleValue,
+        onItemToggle,
+        onSelect
+    ]);
+    const handleClose = useCallback(()=>{
+        if (multiSelect) commitChecked();
+        onOpenChange?.(false);
+    }, [
+        multiSelect,
+        commitChecked,
+        onOpenChange
+    ]);
+    const topNavItems = useMemo(()=>topRows.map((row)=>({
+                id: row.id,
+                label: row.option.label,
+                value: row.option.value
+            })), [
+        topRows
+    ]);
+    const topHighlightRef = useRef('');
+    const handleTopSelect = useCallback((item)=>{
+        const row = topRowsRef.current.find((r)=>r.id === item.id);
+        if (row) selectRow(row, false);
+    }, [
+        selectRow
+    ]);
+    const handleTopArrowRight = useCallback(()=>{
+        const row = topRowsRef.current.find((r)=>r.id === topHighlightRef.current);
+        if (row?.isGroup) openParent(row.id);
+        else if (multiSelect) commitChecked();
+    }, [
+        openParent,
+        multiSelect,
+        commitChecked
+    ]);
+    const top = useKeyboardNav({
+        items: topNavItems,
+        open: open && null == openParentId,
+        onSelect: handleTopSelect,
+        onClose: onEscape ?? handleClose,
+        onArrowRight: handleTopArrowRight,
+        onPendingCommit: multiSelect ? commitChecked : void 0,
+        inputRef,
+        menuRef
+    });
+    topHighlightRef.current = top.highlightedValue;
+    const submenuNavItems = useMemo(()=>{
+        if (!openParentRow) return [];
+        return [
+            {
+                id: SELECT_ALL_ID,
+                label: 'Select all',
+                value: SELECT_ALL_ID
+            },
+            ...submenuRows.map((row)=>({
+                    id: row.id,
+                    label: row.option.label,
+                    value: row.option.value
+                }))
+        ];
+    }, [
+        openParentRow,
+        submenuRows
+    ]);
+    const handleSubmenuSelect = useCallback((item)=>{
+        if (!openParentRow) return;
+        if (item.id === SELECT_ALL_ID) return void toggleGroup(openParentRow.option);
+        const row = submenuRows.find((r)=>r.id === item.id);
+        if (row) selectRow(row, true);
+    }, [
+        openParentRow,
+        submenuRows,
+        toggleGroup,
+        selectRow
+    ]);
+    const submenu = useKeyboardNav({
+        items: submenuNavItems,
+        open: open && null != openParentId,
+        onSelect: handleSubmenuSelect,
+        onClose: closeParent,
+        onArrowLeft: closeParent,
+        onPendingCommit: multiSelect ? commitChecked : void 0,
+        inputRef,
+        menuRef: submenuRef
+    });
+    const labelByValue = useMemo(()=>{
+        const map = new Map();
+        for (const leaf of collectLeaves(allValues))map.set(String(leaf.value), leaf.label);
+        return map;
+    }, [
+        allValues
+    ]);
+    const buildingMultiValue = multiSelect && checkedValues.length > 0 ? checkedValues.map((v)=>labelByValue.get(String(v)) ?? String(v)).join(', ') : void 0;
+    useEffect(()=>{
+        onBuildingValueChange?.(buildingMultiValue);
+    }, [
+        buildingMultiValue,
+        onBuildingValueChange
+    ]);
+    return {
+        checkedValues,
+        openParentId,
+        openParent,
+        closeParent,
+        cancelClose,
+        scheduleClose,
+        openParentRow,
+        submenuRows,
+        selectRow,
+        toggleGroup,
+        isLeafChecked,
+        getRowCheckState,
+        allLeavesChecked,
+        commitChecked,
+        topHighlightedValue: top.highlightedValue,
+        onTopHighlightChange: top.onHighlightChange,
+        topPendingIds: top.pendingIds,
+        registerTopItem: top.registerItem,
+        submenuHighlightedValue: submenu.highlightedValue,
+        onSubmenuHighlightChange: submenu.onHighlightChange,
+        submenuPendingIds: submenu.pendingIds,
+        registerSubmenuItem: submenu.registerItem
+    };
+};
+export { SELECT_ALL_ID, useNestedValueMenuState };

package/dist/components/FilterInput/FilterInputMenu/hooks/useKeyboardNav.d.ts

@@ -6,6 +6,8 @@ interface UseKeyboardNavOptions {
     onSelect: (item: FilterInputDropdownItem) => void;
     onClose?: () => void;
     onArrowRight?: () => void;
+    /** ArrowLeft handler — used to exit a submenu level back to its parent. */
+    onArrowLeft?: () => void;
     /** Called after all pending items are selected via Cmd+Enter */
     onPendingCommit?: () => void;
     /** When true, ArrowRight selects the active item (like Enter) instead of calling onArrowRight */
@@ -24,7 +26,7 @@ interface UseKeyboardNavOptions {
  * Multi-select shortcut: Cmd/Ctrl+Arrow marks items as pending (highlighted),
  * then Enter selects all pending items at once.
  */
-export declare const useKeyboardNav: ({ items, open, onSelect, onClose, onArrowRight, onPendingCommit, arrowRightSelectsActive, inputRef, menuRef, }: UseKeyboardNavOptions) => {
+export declare const useKeyboardNav: ({ items, open, onSelect, onClose, onArrowRight, onArrowLeft, onPendingCommit, arrowRightSelectsActive, inputRef, menuRef, }: UseKeyboardNavOptions) => {
     activeIndex: number;
     setActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
     highlightedValue: string;

package/dist/components/FilterInput/FilterInputMenu/hooks/useKeyboardNav.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendingCommit, arrowRightSelectsActive = false, inputRef, menuRef })=>{
+const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onArrowLeft, onPendingCommit, arrowRightSelectsActive = false, inputRef, menuRef })=>{
     const [activeIndex, setActiveIndex] = useState(-1);
     const [pendingIds, setPendingIds] = useState(new Set());
     const itemRegistryRef = useRef(new Map());
@@ -15,6 +15,7 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
         onSelect,
         onClose,
         onArrowRight,
+        onArrowLeft,
         onPendingCommit,
         arrowRightSelectsActive,
         inputRef,
@@ -25,6 +26,7 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
         onSelect,
         onClose,
         onArrowRight,
+        onArrowLeft,
         onPendingCommit,
         arrowRightSelectsActive,
         inputRef,
@@ -132,6 +134,14 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
                     } else arrowRight();
                     return;
                 }
+                if ('ArrowLeft' === e.key) {
+                    const { onArrowLeft: arrowLeft } = stateRef.current;
+                    if (!arrowLeft) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    arrowLeft();
+                    return;
+                }
                 const { inputRef: iRef } = stateRef.current;
                 if ('ArrowUp' === e.key && iRef?.current && 0 === activeIndexRef.current) {
                     e.preventDefault();
@@ -198,6 +208,15 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
                         } else arrowRight();
                         break;
                     }
+                case 'ArrowLeft':
+                    {
+                        const { onArrowLeft: arrowLeft } = stateRef.current;
+                        if (!arrowLeft) break;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        arrowLeft();
+                        break;
+                    }
                 case 'Escape':
                     e.preventDefault();
                     e.stopPropagation();

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/lib/deriveAutocompleteValues.js

@@ -1,6 +1,6 @@
-import { NO_VALUE_PLACEHOLDER, chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator, isNoValueOperator } from "../../../lib/index.js";
+import { NO_VALUE_PLACEHOLDER, chipIdToConditionIndex, collectLeaves, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator, isNoValueOperator } from "../../../lib/index.js";
 const displayBaseValue = (value, field)=>{
-    const options = getFieldValues(field);
+    const options = collectLeaves(getFieldValues(field));
     const resolve = (v)=>options.find((opt)=>String(opt.value) === String(v))?.label ?? String(v ?? '');
     return Array.isArray(value) ? value.map(resolve).join(', ') : resolve(value);
 };
@@ -23,7 +23,7 @@ const deriveAutocompleteValues = ({ editingChipId, selectedField, selectedOperat
             editingCondition.value
         ] : [];
         if (editingCondition.error && selectedField && hasStaticAllowlist(selectedField)) {
-            const fieldValues = getFieldValues(selectedField);
+            const fieldValues = collectLeaves(getFieldValues(selectedField));
             if (fieldValues.length > 0) return values.filter((v)=>fieldValues.some((opt)=>opt.value === v));
         }
         return values;

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/lib/valueResolution.js

@@ -1,13 +1,13 @@
 import { MIN_DATE_STRING_LENGTH } from "../../../FilterInputMenu/FilterInputDateValueMenu/constants.js";
-import { chipIdToConditionIndex, findMatchingFieldValue, getFieldValues, getInvalidValueIndices, hasStaticAllowlist, isDatePreset } from "../../../lib/index.js";
+import { chipIdToConditionIndex, collectLeaves, findMatchingFieldValue, getFieldValues, getInvalidValueIndices, hasStaticAllowlist, isDatePreset } from "../../../lib/index.js";
 const resolveFieldValue = (field, text)=>{
-    const match = findMatchingFieldValue(getFieldValues(field), text);
-    return match ? match.value : text;
+    const match = findMatchingFieldValue(collectLeaves(getFieldValues(field)), text);
+    return match?.value ?? text;
 };
 const resolveSingleValue = (field, trimmed)=>{
-    const fv = getFieldValues(field);
+    const fv = collectLeaves(getFieldValues(field));
     const match = findMatchingFieldValue(fv, trimmed);
-    const raw = match ? match.value : trimmed;
+    const raw = match?.value ?? trimmed;
     const resolved = field.normalize ? field.normalize(raw) : raw;
     if (field.validate) return {
         resolved,

package/dist/components/FilterInput/hooks/useFilterInputExpression/buildChips.js

@@ -1,5 +1,5 @@
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { NO_VALUE_PLACEHOLDER, canBorrowCrossFieldLabel, findOptionByValue, findValueLabelInFields, getDateDisplayLabel, getInvalidValueIndices, getOperatorLabel, incompleteTripletError, isEmptyFilterValue, isNoValueOperator } from "../../lib/index.js";
+import { NO_VALUE_PLACEHOLDER, canBorrowCrossFieldLabel, collapseValues, findOptionByValue, findValueLabelInFields, getDateDisplayLabel, getInvalidValueIndices, getOperatorLabel, incompleteTripletError, isEmptyFilterValue, isNoValueOperator } from "../../lib/index.js";
 const INVALID_DATE = 'Invalid Date';
 const DATE_RANGE_SEPARATOR = ' – ';
 const MULTI_VALUE_SEPARATOR = ', ';
@@ -69,8 +69,8 @@ const buildDateChip = (baseChip, condition, chipError)=>{
 };
 const buildMultiValueChip = (baseChip, condition, field, fields, chipError)=>{
     const values = condition.value;
-    const valueParts = values.map((v)=>resolveValueLabel(v, field, fields) ?? String(v));
     const invalidIndices = field ? getInvalidValueIndices(field, values) : [];
+    const valueParts = field && 0 === invalidIndices.length ? collapseValues(field, values).map((token)=>'group' === token.kind ? null != token.count ? `${token.label} (${token.count})` : token.label : resolveValueLabel(token.value, field, fields) ?? String(token.value)) : values.map((v)=>resolveValueLabel(v, field, fields) ?? String(v));
     return {
         ...baseChip,
         value: valueParts.join(MULTI_VALUE_SEPARATOR),

package/dist/components/FilterInput/lib/buildValueMenuSections.d.ts

@@ -0,0 +1,33 @@
+import type { FieldValueOption } from '../types';
+/**
+ * A single navigable row in the value menu. `isGroup` rows are presentational
+ * parent categories that open a submenu of their `option.children`; leaf rows
+ * carry a committable `option.value`.
+ */
+export interface ValueMenuRow {
+    /** Stable id for keyboard-nav + DOM registry (unique within its level). */
+    id: string;
+    option: FieldValueOption;
+    isGroup: boolean;
+}
+/** A render-ready value-menu section. `label` undefined = headerless. */
+export interface ValueMenuSection {
+    label?: string;
+    rows: ValueMenuRow[];
+}
+/**
+ * Bucket value options into ordered, filtered menu sections.
+ *
+ * Three shapes, in priority order:
+ * 1. **Top-level groups** — each top-level group node becomes a section (its
+ *    `label` is the header, its `children` are the rows); any top-level leaves
+ *    fall into a leading headerless section.
+ * 2. **`section` field sugar** — leaves tagged with `section` are bucketed under
+ *    that header in first-appearance order; untagged leaves lead headerless.
+ * 3. **Flat** — no grouping: a single headerless section (today's behavior, so
+ *    existing fields are visually unchanged).
+ *
+ * Each section is filtered by `filterText`; sections with no surviving rows are
+ * dropped. A group row survives if its label OR any descendant leaf matches.
+ */
+export declare function buildValueMenuSections(values: FieldValueOption[], filterText: string): ValueMenuSection[];

package/dist/components/FilterInput/lib/buildValueMenuSections.js

@@ -0,0 +1,68 @@
+import { collectLeaves, isValueGroup } from "./fields.js";
+import { filterAndSort } from "./filterSort.js";
+const rowSearchText = (option)=>{
+    const text = [
+        option.label,
+        String(option.value ?? '')
+    ];
+    if (option.description) text.push(option.description);
+    for (const leaf of collectLeaves(option.children))text.push(leaf.label, String(leaf.value ?? ''));
+    return text;
+};
+const rowId = (option)=>isValueGroup(option) ? `group:${option.label}` : `leaf:${String(option.value)}`;
+const toRows = (options, filterText)=>filterAndSort(options, filterText, rowSearchText).map((option)=>({
+            id: rowId(option),
+            option,
+            isGroup: isValueGroup(option)
+        }));
+function buildValueMenuSections(values, filterText) {
+    const topGroups = values.filter(isValueGroup);
+    if (topGroups.length > 0) {
+        const sections = [];
+        const topLeaves = values.filter((v)=>!isValueGroup(v));
+        const leafRows = toRows(topLeaves, filterText);
+        if (leafRows.length > 0) sections.push({
+            rows: leafRows
+        });
+        for (const group of topGroups){
+            const rows = toRows(group.children ?? [], filterText);
+            if (rows.length > 0) sections.push({
+                label: group.label,
+                rows
+            });
+        }
+        return sections;
+    }
+    if (values.some((v)=>v.section)) {
+        const order = [];
+        const buckets = new Map();
+        const unsectioned = [];
+        for (const option of values)if (option.section) {
+            if (!buckets.has(option.section)) {
+                buckets.set(option.section, []);
+                order.push(option.section);
+            }
+            buckets.get(option.section).push(option);
+        } else unsectioned.push(option);
+        const sections = [];
+        const unsectionedRows = toRows(unsectioned, filterText);
+        if (unsectionedRows.length > 0) sections.push({
+            rows: unsectionedRows
+        });
+        for (const label of order){
+            const rows = toRows(buckets.get(label), filterText);
+            if (rows.length > 0) sections.push({
+                label,
+                rows
+            });
+        }
+        return sections;
+    }
+    const rows = toRows(values, filterText);
+    return rows.length > 0 ? [
+        {
+            rows
+        }
+    ] : [];
+}
+export { buildValueMenuSections };

package/dist/components/FilterInput/lib/collapseValuesToLabels.d.ts

@@ -0,0 +1,32 @@
+import type { FieldMetadata } from '../types';
+/**
+ * A display token for a multi-value chip. A `group` token stands in for a
+ * **submenu** parent category (e.g. "SQL injection"): `count` present means a
+ * partial selection ("SQL injection (4)"), `count` absent means every sub-value
+ * is selected ("SQL injection"). A `leaf` token is a single committed value.
+ */
+export type CollapseToken = {
+    kind: 'group';
+    label: string;
+    count?: number;
+} | {
+    kind: 'leaf';
+    value: string | number | boolean;
+};
+/**
+ * Collapse a committed leaf-value array into display tokens, folding a submenu
+ * parent category into a single group token. Display-only: the stored
+ * `Condition.value` array is never mutated and always holds leaf values.
+ *
+ * For a field with no nested groups this returns one leaf token per value in
+ * the original committed order (identical to the previous flat behavior). For a
+ * nested field it walks the config in declaration order:
+ * - **Top-level groups are section headers** (no checkbox) — never collapsed;
+ *   we recurse so their direct leaves render individually.
+ * - **Nested groups are submenu categories** — any selection collapses to a
+ *   single group token: fully selected → just the label; partially selected →
+ *   label + selected-leaf `count`.
+ *
+ * Committed values absent from the config (freeform) trail in committed order.
+ */
+export declare const collapseValues: (field: FieldMetadata, values: Array<string | number | boolean>) => CollapseToken[];

package/dist/components/FilterInput/lib/collapseValuesToLabels.js

@@ -0,0 +1,55 @@
+import { collectLeaves, isValueGroup } from "./fields.js";
+const collapseValues = (field, values)=>{
+    const options = field.values;
+    const hasGroups = options?.some(isValueGroup) ?? false;
+    if (!options || !hasGroups) return values.map((value)=>({
+            kind: 'leaf',
+            value
+        }));
+    const committed = new Set(values.map(String));
+    const consumed = new Set();
+    const tokens = [];
+    const walk = (opts, depth)=>{
+        for (const option of opts)if (isValueGroup(option)) {
+            if (0 === depth) {
+                walk(option.children, depth + 1);
+                continue;
+            }
+            const leafKeys = collectLeaves(option.children).map((leaf)=>String(leaf.value));
+            const selected = leafKeys.filter((key)=>committed.has(key));
+            if (0 === selected.length) continue;
+            const isFull = selected.length === leafKeys.length;
+            tokens.push(isFull ? {
+                kind: 'group',
+                label: option.label
+            } : {
+                kind: 'group',
+                label: option.label,
+                count: selected.length
+            });
+            for (const key of selected)consumed.add(key);
+        } else if (null != option.value) {
+            const key = String(option.value);
+            if (committed.has(key) && !consumed.has(key)) {
+                tokens.push({
+                    kind: 'leaf',
+                    value: option.value
+                });
+                consumed.add(key);
+            }
+        }
+    };
+    walk(options, 0);
+    for (const value of values){
+        const key = String(value);
+        if (!consumed.has(key)) {
+            tokens.push({
+                kind: 'leaf',
+                value
+            });
+            consumed.add(key);
+        }
+    }
+    return tokens;
+};
+export { collapseValues };