@wallarm-org/design-system 0.78.1 → 0.79.0

package/dist/components/FilterInput/FilterInputErrors/parseFilterInputErrors.js

@@ -1,5 +1,5 @@
 import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
-import { getFieldValues, hasStaticAllowlist, incompleteTripletError, isEmptyFilterValue, isNoValueOperator, isValidFieldValue } from "../lib/index.js";
+import { collectLeaves, getFieldValues, hasStaticAllowlist, incompleteTripletError, isEmptyFilterValue, isNoValueOperator, isValidFieldValue } from "../lib/index.js";
 const isPairValueMissing = (condition)=>{
     const pair = condition.pair;
     if (!pair) return true;
@@ -34,7 +34,7 @@ const parseFilterInputErrors = (conditions, fields)=>{
                     }
                 }
                 if (field && hasStaticAllowlist(field) && Array.isArray(condition.value)) {
-                    const fv = getFieldValues(field);
+                    const fv = collectLeaves(getFieldValues(field));
                     if (fv.length > 0) {
                         const invalidValues = condition.value.filter((v)=>!isValidFieldValue(fv, v));
                         if (invalidValues.length > 0) {

package/dist/components/FilterInput/FilterInputField/ChipsWithGaps.js

@@ -18,7 +18,7 @@ const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, on
         const isConnector = 'and' === chip.variant || 'or' === chip.variant;
         if (isCondition) elements.push(/*#__PURE__*/ jsx("div", {
             ref: chipRef(chip.id),
-            className: "shrink-0 cursor-pointer hover:z-10",
+            className: "shrink-0 cursor-pointer hover:z-30",
             children: /*#__PURE__*/ jsx(FilterInputChip, {
                 chipId: chip.id,
                 attribute: chip.attribute ?? '',

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

@@ -1,7 +1,11 @@
-import { type FC, type RefObject } from 'react';
+import type { FC, RefObject } from 'react';
 import type { BadgeColor } from '../../../Badge';
 export interface ValueOption {
-    value: string | number | boolean;
+    /**
+     * Committable value — present on **leaf** options only. Group options (those
+     * with `children`) omit it; they are presentational and never committed.
+     */
+    value?: string | number | boolean;
     label: string;
     badge?: {
         color: BadgeColor;
@@ -9,12 +13,20 @@ export interface ValueOption {
     };
     /** Muted secondary line rendered beneath the bold `label`. Display-only. */
     description?: string;
+    /**
+     * Nested sub-values. When present this option is a group: a section header at
+     * the top level, or a submenu trigger when nested. Only leaves are committed.
+     */
+    children?: ValueOption[];
+    /** Optional section-header label to bucket top-level options under a heading. */
+    section?: string;
+    /** @deprecated superseded by `children`; kept for back-compat. */
     hasSubmenu?: boolean;
 }
 type ConditionValue = string | number | boolean;
 export interface FilterInputValueMenuProps {
     values: ValueOption[];
-    onSelect: (value: ValueOption['value']) => void;
+    onSelect: (value: ConditionValue) => void;
     onCommit?: (values: ConditionValue[]) => void;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -37,5 +49,11 @@ export interface FilterInputValueMenuProps {
     blurCommitRef?: RefObject<(() => boolean) | null>;
     className?: string;
 }
+/**
+ * Value dropdown (third autocomplete step). Dispatches to the nested menu
+ * (sections + submenu) when the field's values contain groups or `section`
+ * tags, otherwise to the flat single-list menu. Owns no hooks itself so each
+ * variant's hooks mount/unmount cleanly.
+ */
 export declare const FilterInputValueMenu: FC<FilterInputValueMenuProps>;
 export {};

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

@@ -1,78 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { cn } from "../../../../utils/cn.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup } from "../../../DropdownMenu/index.js";
-import { filterAndSort } from "../../lib/index.js";
-import { MenuEmptyState } from "../MenuEmptyState.js";
-import { useValueMenuDisplayValues } from "./useValueMenuDisplayValues.js";
-import { useValueMenuState } from "./useValueMenuState.js";
-import { ValueMenuFooter } from "./ValueMenuFooter.js";
-import { ValueMenuItem } from "./ValueMenuItem.js";
-import { valueOptionSearchText } from "./valueOptionSearchText.js";
-const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange, onEscape, multiSelect = false, initialValues = [], highlightValue, width = 'standard', positioning, onBuildingValueChange, onItemToggle, inputRef, filterText = '', menuRef, blurCommitRef, className })=>{
-    const filteredValues = useMemo(()=>filterAndSort(values, filterText, valueOptionSearchText), [
-        values,
-        filterText
-    ]);
-    const { selectedValues, checkedValues, highlightedValue, onHighlightChange, pendingIds, registerItem, handleItemSelect } = useValueMenuState({
-        values: filteredValues,
-        open,
-        multiSelect,
-        initialValues,
-        highlightValue,
-        onSelect,
-        onCommit,
-        onEscape,
-        onOpenChange,
-        onBuildingValueChange,
-        onItemToggle,
-        inputRef,
-        menuRef,
-        blurCommitRef
-    });
-    const displayValues = useValueMenuDisplayValues({
-        values,
-        filteredValues,
-        multiSelect,
-        checkedValues,
-        highlightValue
-    });
-    const widthClass = 'compact' === width ? 'w-[172px]' : 'w-[300px]';
-    const widthStyle = 'number' == typeof width ? {
-        width: `${width}px`
-    } : void 0;
-    return /*#__PURE__*/ jsx(DropdownMenu, {
-        open: open,
-        onOpenChange: onOpenChange,
-        closeOnSelect: false,
-        positioning: positioning,
-        highlightedValue: highlightedValue,
-        onHighlightChange: onHighlightChange,
-        children: /*#__PURE__*/ jsxs(DropdownMenuContent, {
-            ref: menuRef,
-            className: cn(widthClass, 'max-h-[430px]', className),
-            style: widthStyle,
-            "data-filter-input-menu": "true",
-            children: [
-                displayValues.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
-                    children: displayValues.map((option)=>/*#__PURE__*/ jsx(ValueMenuItem, {
-                            option: option,
-                            isChecked: selectedValues.some((v)=>String(v) === String(option.value)),
-                            isPending: pendingIds.has(String(option.value)),
-                            multiSelect: multiSelect,
-                            registerItem: registerItem,
-                            onSelect: ()=>handleItemSelect({
-                                    id: String(option.value),
-                                    label: option.label,
-                                    value: option.value
-                                })
-                        }, String(option.value)))
-                }) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
-                /*#__PURE__*/ jsx(ValueMenuFooter, {
-                    multiSelect: multiSelect
-                })
-            ]
-        })
+import { jsx } from "react/jsx-runtime";
+import { isValueGroup } from "../../lib/index.js";
+import { FlatValueMenu } from "./FlatValueMenu.js";
+import { NestedValueMenu } from "./NestedValueMenu.js";
+const FilterInputValueMenu = (props)=>{
+    const isNested = props.values.some((v)=>isValueGroup(v) || null != v.section);
+    return isNested ? /*#__PURE__*/ jsx(NestedValueMenu, {
+        ...props
+    }) : /*#__PURE__*/ jsx(FlatValueMenu, {
+        ...props
     });
 };
 FilterInputValueMenu.displayName = 'FilterInputValueMenu';

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

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import type { FilterInputValueMenuProps } from './FilterInputValueMenu';
+/**
+ * Flat (non-nested) value menu — the original single-list implementation.
+ * Rendered by `FilterInputValueMenu` for fields whose values have no groups or
+ * sections. Behavior is unchanged from before nesting was introduced.
+ */
+export declare const FlatValueMenu: FC<FilterInputValueMenuProps>;

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

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../../../../utils/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuGroup } from "../../../DropdownMenu/index.js";
+import { filterAndSort } from "../../lib/index.js";
+import { MenuEmptyState } from "../MenuEmptyState.js";
+import { useValueMenuDisplayValues } from "./useValueMenuDisplayValues.js";
+import { useValueMenuState } from "./useValueMenuState.js";
+import { ValueMenuFooterHints } from "./ValueMenuFooterHints.js";
+import { ValueMenuItem } from "./ValueMenuItem.js";
+import { valueOptionSearchText } from "./valueOptionSearchText.js";
+const FlatValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange, onEscape, multiSelect = false, initialValues = [], highlightValue, width = 'standard', positioning, onBuildingValueChange, onItemToggle, inputRef, filterText = '', menuRef, blurCommitRef, className })=>{
+    const filteredValues = useMemo(()=>filterAndSort(values, filterText, valueOptionSearchText), [
+        values,
+        filterText
+    ]);
+    const { selectedValues, checkedValues, highlightedValue, onHighlightChange, pendingIds, registerItem, handleItemSelect } = useValueMenuState({
+        values: filteredValues,
+        open,
+        multiSelect,
+        initialValues,
+        highlightValue,
+        onSelect,
+        onCommit,
+        onEscape,
+        onOpenChange,
+        onBuildingValueChange,
+        onItemToggle,
+        inputRef,
+        menuRef,
+        blurCommitRef
+    });
+    const displayValues = useValueMenuDisplayValues({
+        values,
+        filteredValues,
+        multiSelect,
+        checkedValues,
+        highlightValue
+    });
+    const widthClass = 'compact' === width ? 'w-[172px]' : 'w-[300px]';
+    const widthStyle = 'number' == typeof width ? {
+        width: `${width}px`
+    } : void 0;
+    return /*#__PURE__*/ jsx(DropdownMenu, {
+        open: open,
+        onOpenChange: onOpenChange,
+        closeOnSelect: false,
+        positioning: positioning,
+        highlightedValue: highlightedValue,
+        onHighlightChange: onHighlightChange,
+        children: /*#__PURE__*/ jsxs(DropdownMenuContent, {
+            ref: menuRef,
+            className: cn(widthClass, 'max-h-[430px]', className),
+            style: widthStyle,
+            "data-filter-input-menu": "true",
+            children: [
+                displayValues.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
+                    children: displayValues.map((option)=>/*#__PURE__*/ jsx(ValueMenuItem, {
+                            option: option,
+                            isChecked: selectedValues.some((v)=>String(v) === String(option.value)),
+                            isPending: pendingIds.has(String(option.value)),
+                            multiSelect: multiSelect,
+                            registerItem: registerItem,
+                            onSelect: ()=>handleItemSelect({
+                                    id: String(option.value),
+                                    label: option.label,
+                                    value: option.value
+                                })
+                        }, String(option.value)))
+                }) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
+                /*#__PURE__*/ jsx(DropdownMenuFooter, {
+                    children: /*#__PURE__*/ jsx(ValueMenuFooterHints, {
+                        multiSelect: multiSelect
+                    })
+                })
+            ]
+        })
+    });
+};
+FlatValueMenu.displayName = 'FlatValueMenu';
+export { FlatValueMenu };

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

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import type { FilterInputValueMenuProps } from './FilterInputValueMenu';
+/**
+ * Value menu with nesting: top-level options are grouped under section headers
+ * and a parent category opens a right-side submenu of its leaf sub-values
+ * (multi-select). Only committable leaves reach the expression — sections and
+ * parent categories are presentational. Rendered by `FilterInputValueMenu` when
+ * the field's values contain groups/sections; the flat menu handles the rest.
+ */
+export declare const NestedValueMenu: FC<FilterInputValueMenuProps>;

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

@@ -0,0 +1,145 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as external_react_Fragment, useMemo, useRef } from "react";
+import { cn } from "../../../../utils/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "../../../DropdownMenu/index.js";
+import { Text } from "../../../Text/index.js";
+import { buildValueMenuSections } from "../../lib/buildValueMenuSections.js";
+import { MenuEmptyState } from "../MenuEmptyState.js";
+import { NestedValueMenuItem } from "./NestedValueMenuItem.js";
+import { SELECT_ALL_ID, useNestedValueMenuState } from "./useNestedValueMenuState.js";
+import { ValueMenuFooterHints } from "./ValueMenuFooterHints.js";
+const NestedValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange, onEscape, multiSelect = false, initialValues = [], width = 'standard', positioning, onBuildingValueChange, onItemToggle, inputRef, filterText = '', menuRef, blurCommitRef, className })=>{
+    const submenuRef = useRef(null);
+    const rowElsRef = useRef(new Map());
+    const sections = useMemo(()=>buildValueMenuSections(values, filterText), [
+        values,
+        filterText
+    ]);
+    const state = useNestedValueMenuState({
+        sections,
+        allValues: values,
+        open,
+        multiSelect,
+        initialValues,
+        onSelect,
+        onCommit,
+        onEscape,
+        onOpenChange,
+        onBuildingValueChange,
+        onItemToggle,
+        inputRef,
+        menuRef,
+        submenuRef,
+        blurCommitRef
+    });
+    const widthClass = 'compact' === width ? 'w-[172px]' : 'w-[300px]';
+    const widthStyle = 'number' == typeof width ? {
+        width: `${width}px`
+    } : void 0;
+    const setRowRef = (id)=>(el)=>{
+            state.registerTopItem(id)(el);
+            if (el) rowElsRef.current.set(id, el);
+            else rowElsRef.current.delete(id);
+        };
+    const submenuPositioning = useMemo(()=>({
+            placement: 'right-start',
+            gutter: 8,
+            getAnchorRect: ()=>state.openParentId && rowElsRef.current.get(state.openParentId)?.getBoundingClientRect() || null
+        }), [
+        state.openParentId
+    ]);
+    const openParentRow = state.openParentRow;
+    const allChecked = openParentRow ? state.allLeavesChecked(openParentRow.option) : false;
+    const hasRows = sections.some((section)=>section.rows.length > 0);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(DropdownMenu, {
+                open: open,
+                onOpenChange: onOpenChange,
+                closeOnSelect: false,
+                positioning: positioning,
+                highlightedValue: state.topHighlightedValue,
+                onHighlightChange: state.onTopHighlightChange,
+                children: /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                    ref: menuRef,
+                    className: cn(widthClass, 'max-h-[430px]', className),
+                    style: widthStyle,
+                    "data-filter-input-menu": "true",
+                    children: [
+                        hasRows ? sections.map((section, index)=>/*#__PURE__*/ jsxs(external_react_Fragment, {
+                                children: [
+                                    index > 0 && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                                    section.label && /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                                        children: section.label
+                                    }),
+                                    /*#__PURE__*/ jsx(DropdownMenuGroup, {
+                                        children: section.rows.map((row)=>/*#__PURE__*/ jsx(NestedValueMenuItem, {
+                                                id: row.id,
+                                                option: row.option,
+                                                isGroup: row.isGroup,
+                                                checkedState: state.getRowCheckState(row),
+                                                isPending: state.topPendingIds.has(row.id),
+                                                multiSelect: multiSelect,
+                                                onSelect: ()=>state.selectRow(row, false),
+                                                onMouseEnter: row.isGroup ? ()=>state.openParent(row.id) : void 0,
+                                                onMouseLeave: row.isGroup ? ()=>state.scheduleClose() : void 0,
+                                                registerRef: setRowRef(row.id),
+                                                expanded: state.openParentId === row.id
+                                            }, row.id))
+                                    })
+                                ]
+                            }, section.label ?? `section-${index}`)) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
+                        /*#__PURE__*/ jsx(DropdownMenuFooter, {
+                            children: /*#__PURE__*/ jsx(ValueMenuFooterHints, {
+                                multiSelect: multiSelect
+                            })
+                        })
+                    ]
+                })
+            }),
+            openParentRow && /*#__PURE__*/ jsx(DropdownMenu, {
+                open: null != state.openParentId,
+                closeOnSelect: false,
+                positioning: submenuPositioning,
+                highlightedValue: state.submenuHighlightedValue,
+                onHighlightChange: state.onSubmenuHighlightChange,
+                children: /*#__PURE__*/ jsx(DropdownMenuContent, {
+                    ref: submenuRef,
+                    className: cn(widthClass, 'max-h-[430px]'),
+                    style: widthStyle,
+                    "data-filter-input-menu": "true",
+                    onMouseEnter: state.cancelClose,
+                    onMouseLeave: state.scheduleClose,
+                    children: /*#__PURE__*/ jsxs(DropdownMenuGroup, {
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuItem, {
+                                value: SELECT_ALL_ID,
+                                ref: state.registerSubmenuItem(SELECT_ALL_ID),
+                                onSelect: ()=>state.toggleGroup(openParentRow.option),
+                                className: state.submenuPendingIds.has(SELECT_ALL_ID) ? 'bg-states-primary-hover' : void 0,
+                                children: /*#__PURE__*/ jsx(Text, {
+                                    size: "sm",
+                                    color: "secondary",
+                                    children: allChecked ? 'Unselect all' : 'Select all'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                            state.submenuRows.map((row)=>/*#__PURE__*/ jsx(NestedValueMenuItem, {
+                                    id: row.id,
+                                    option: row.option,
+                                    isGroup: row.isGroup,
+                                    checkedState: state.getRowCheckState(row),
+                                    isPending: state.submenuPendingIds.has(row.id),
+                                    multiSelect: multiSelect,
+                                    onSelect: ()=>state.selectRow(row, true),
+                                    registerRef: state.registerSubmenuItem(row.id)
+                                }, row.id))
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+NestedValueMenu.displayName = 'NestedValueMenu';
+export { NestedValueMenu };

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

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import type { CheckboxCheckedState } from '@ark-ui/react/checkbox';
+import type { ValueOption } from './FilterInputValueMenu';
+interface NestedValueMenuItemProps {
+    id: string;
+    option: ValueOption;
+    /** Whether this row is a group (parent category → opens a submenu on hover). */
+    isGroup: boolean;
+    checkedState: CheckboxCheckedState;
+    isPending: boolean;
+    multiSelect: boolean;
+    onSelect: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    registerRef?: (el: HTMLElement | null) => void;
+    /** For group rows: whether its submenu is currently open. */
+    expanded?: boolean;
+}
+/**
+ * A single row in the nested value menu — a committable leaf or a group
+ * (parent category). Both render a (tri-state, for groups) checkbox; a group's
+ * submenu opens on hover. No chevron: selection and bulk-selection are driven
+ * entirely by the checkbox.
+ */
+export declare const NestedValueMenuItem: FC<NestedValueMenuItemProps>;
+export {};

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

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../../../Badge/index.js";
+import { Checkmark } from "../../../Checkmark/index.js";
+import { DropdownMenuItem } from "../../../DropdownMenu/index.js";
+import { Text } from "../../../Text/index.js";
+const NestedValueMenuItem = ({ id, option, isGroup, checkedState, isPending, multiSelect, onSelect, onMouseEnter, onMouseLeave, registerRef, expanded })=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+        value: id,
+        ref: registerRef,
+        onSelect: onSelect,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        className: isPending ? 'bg-states-primary-hover' : void 0,
+        "aria-checked": multiSelect ? 'indeterminate' === checkedState ? 'mixed' : !!checkedState : void 0,
+        ...isGroup && {
+            'aria-haspopup': 'menu',
+            'aria-expanded': !!expanded
+        },
+        children: [
+            option.badge ? /*#__PURE__*/ jsx(Badge, {
+                color: option.badge.color,
+                type: "secondary",
+                variant: "default",
+                children: option.badge.text
+            }) : /*#__PURE__*/ jsxs("div", {
+                className: "min-w-0",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        truncate: true,
+                        children: option.label
+                    }),
+                    option.description && /*#__PURE__*/ jsx(Text, {
+                        size: "xs",
+                        color: "secondary",
+                        truncate: true,
+                        children: option.description
+                    })
+                ]
+            }),
+            multiSelect ? /*#__PURE__*/ jsx("div", {
+                className: "flex shrink-0 items-start justify-end py-2 ml-auto",
+                children: /*#__PURE__*/ jsx(Checkmark, {
+                    checkedState: checkedState
+                })
+            }) : !isGroup && checkedState ? /*#__PURE__*/ jsx("div", {
+                className: "flex shrink-0 items-start justify-end py-2 ml-auto",
+                children: /*#__PURE__*/ jsx(Checkmark, {
+                    checkedState: true
+                })
+            }) : null
+        ]
+    });
+NestedValueMenuItem.displayName = 'NestedValueMenuItem';
+export { NestedValueMenuItem };

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

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+interface ValueMenuFooterHintsProps {
+    multiSelect: boolean;
+}
+/**
+ * Keyboard-hint content for the value menu footer. Rendered *inside* a
+ * `DropdownMenuFooter` at the call site (not a footer itself) so the footer
+ * element stays a direct child of `DropdownMenuContent` and is pinned outside
+ * the scrolling list instead of scrolling away with the options.
+ */
+export declare const ValueMenuFooterHints: FC<ValueMenuFooterHintsProps>;
+export {};

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

@@ -0,0 +1,69 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Kbd } from "../../../Kbd/Kbd.js";
+import { KbdGroup } from "../../../Kbd/KbdGroup.js";
+const ValueMenuFooterHints = ({ multiSelect })=>multiSelect ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                className: "flex items-center gap-4",
+                children: [
+                    /*#__PURE__*/ jsx(KbdGroup, {
+                        children: /*#__PURE__*/ jsx(Kbd, {
+                            children: "↵"
+                        })
+                    }),
+                    "to select"
+                ]
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                className: "flex items-center gap-4",
+                children: [
+                    /*#__PURE__*/ jsxs(KbdGroup, {
+                        children: [
+                            /*#__PURE__*/ jsx(Kbd, {
+                                children: "⌘"
+                            }),
+                            /*#__PURE__*/ jsx(Kbd, {
+                                children: "↑"
+                            }),
+                            /*#__PURE__*/ jsx(Kbd, {
+                                children: "↓"
+                            })
+                        ]
+                    }),
+                    "to multi-select"
+                ]
+            })
+        ]
+    }) : /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                className: "flex items-center gap-4",
+                children: [
+                    /*#__PURE__*/ jsxs(KbdGroup, {
+                        children: [
+                            /*#__PURE__*/ jsx(Kbd, {
+                                children: "↑"
+                            }),
+                            /*#__PURE__*/ jsx(Kbd, {
+                                children: "↓"
+                            })
+                        ]
+                    }),
+                    "to navigate"
+                ]
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                className: "flex items-center gap-4",
+                children: [
+                    /*#__PURE__*/ jsx(KbdGroup, {
+                        children: /*#__PURE__*/ jsx(Kbd, {
+                            children: "↵"
+                        })
+                    }),
+                    "to select"
+                ]
+            })
+        ]
+    });
+ValueMenuFooterHints.displayName = 'ValueMenuFooterHints';
+export { ValueMenuFooterHints };

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 {};