@wallarm-org/design-system 0.26.0 → 0.27.0

package/dist/components/Badge/index.d.ts

@@ -1,2 +1,3 @@
 export { Badge, type BadgeProps } from './Badge';
 export { badgeVariants } from './classes';
+export type { BadgeColor, BadgeType } from './types';

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

@@ -11,6 +11,17 @@ const parseFilterInputErrors = (conditions, fields)=>{
                 errors.push(`Unknown field ${condition.field}`);
                 break;
             case 'value':
+                if (field?.validate) {
+                    const values = Array.isArray(condition.value) ? condition.value : [
+                        condition.value
+                    ];
+                    const invalidValues = values.filter((v)=>null != v && field.validate(v));
+                    if (invalidValues.length > 0) {
+                        const formatted = invalidValues.map((v)=>String(v)).join(', ');
+                        errors.push(`Invalid value for ${label}: ${formatted}`);
+                        break;
+                    }
+                }
                 if (field && hasStaticAllowlist(field) && Array.isArray(condition.value)) {
                     const fv = getFieldValues(field);
                     if (fv.length > 0) {

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

@@ -1,4 +1,4 @@
-import type { FC, RefObject } from 'react';
+import { type FC, type RefObject } from 'react';
 import type { ChipSegment } from '../FilterInputField/FilterInputChip';
 import type { FieldMetadata, FilterOperator, MenuState } from '../types';
 export interface FilterInputAutocompleteState {
@@ -20,6 +20,7 @@ export interface FilterInputAutocompleteState {
     handleMenuClose: () => void;
     handleMenuDiscard: () => void;
     handleBuildingValueChange: (preview: string | undefined) => void;
+    handleMultiSelectToggle: () => void;
     segmentFilterText: string;
     segmentMenuFilterText: string;
     editingSegment: ChipSegment | null;

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

@@ -1,16 +1,28 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getFieldValues, getValueFilterText, isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
+import { useMemo } from "react";
+import { getCurrentValueTokenText, getFieldValues, getValueFilterText, isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
 import { FilterInputDateValueMenu } from "./FilterInputDateValueMenu/index.js";
 import { FilterInputFieldMenu } from "./FilterInputFieldMenu/index.js";
 import { FilterInputOperatorMenu } from "./FilterInputOperatorMenu.js";
 import { FilterInputValueMenu } from "./FilterInputValueMenu/index.js";
 const FilterInputMenu = ({ fields, autocomplete })=>{
-    const { inputText, menuState, selectedField, selectedOperator, menuPositioning, editingMultiValues, editingSingleValue, editingDateRange, inputRef, menuRef, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleRangeSelect, handleMenuClose, handleMenuDiscard, handleBuildingValueChange, segmentMenuFilterText, editingSegment, blurCommitRef } = autocomplete;
+    const { inputText, menuState, selectedField, selectedOperator, menuPositioning, editingMultiValues, editingSingleValue, editingDateRange, inputRef, menuRef, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleRangeSelect, handleMenuClose, handleMenuDiscard, handleBuildingValueChange, handleMultiSelectToggle, segmentMenuFilterText, editingSegment, blurCommitRef } = autocomplete;
     const fieldFilterText = 'attribute' === editingSegment ? segmentMenuFilterText : inputText;
     const operatorFilterText = 'operator' === editingSegment ? segmentMenuFilterText : inputText;
-    const valueInputText = 'value' === editingSegment ? segmentMenuFilterText : inputText;
-    const selectedFieldValues = selectedField ? getFieldValues(selectedField, valueInputText) : [];
-    const valueFilterText = getValueFilterText(editingSegment, inputText, segmentMenuFilterText, selectedOperator, selectedFieldValues);
+    const currentTokenText = getCurrentValueTokenText(editingSegment, inputText, segmentMenuFilterText, selectedOperator);
+    const selectedContext = useMemo(()=>({
+            selectedValues: [
+                ...editingMultiValues,
+                ...null != editingSingleValue ? [
+                    editingSingleValue
+                ] : []
+            ]
+        }), [
+        editingMultiValues,
+        editingSingleValue
+    ]);
+    const selectedFieldValues = selectedField ? getFieldValues(selectedField, currentTokenText, selectedContext) : [];
+    const valueFilterText = getValueFilterText(currentTokenText, selectedOperator, selectedFieldValues);
     const showOperatorMenu = !!selectedField;
     const showValueMenu = !!selectedField && !!selectedOperator;
     const isDateField = selectedField?.type === 'date';
@@ -64,6 +76,7 @@ const FilterInputMenu = ({ fields, autocomplete })=>{
                 highlightValue: editingSingleValue,
                 positioning: menuPositioning,
                 onBuildingValueChange: handleBuildingValueChange,
+                onItemToggle: handleMultiSelectToggle,
                 inputRef: inputRef,
                 menuRef: menuRef,
                 filterText: valueFilterText,

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

@@ -1,9 +1,10 @@
 import { type FC, type RefObject } from 'react';
+import type { BadgeColor } from '../../../Badge';
 export interface ValueOption {
     value: string | number | boolean;
     label: string;
     badge?: {
-        color: string;
+        color: BadgeColor;
         text: string;
     };
     hasSubmenu?: boolean;
@@ -22,6 +23,9 @@ export interface FilterInputValueMenuProps {
     width?: 'standard' | 'compact' | number;
     positioning?: Record<string, unknown>;
     onBuildingValueChange?: (preview: string | undefined) => void;
+    /** Fires on explicit multi-select toggle (click or keyboard) — use to react
+     *  only to user-initiated toggles, not to initialization. */
+    onItemToggle?: () => void;
     /** Ref to the query bar input — ArrowUp on first item returns focus here */
     inputRef?: RefObject<HTMLInputElement | null>;
     /** Text to filter values by label */

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

@@ -1,14 +1,14 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 { Kbd } from "../../../Kbd/Kbd.js";
-import { KbdGroup } from "../../../Kbd/KbdGroup.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";
-const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange, onEscape, multiSelect = false, initialValues = [], highlightValue, width = 'standard', positioning, onBuildingValueChange, inputRef, filterText = '', menuRef, blurCommitRef, className })=>{
+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, (v)=>[
                 v.label,
                 String(v.value)
@@ -27,26 +27,18 @@ const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpen
         onEscape,
         onOpenChange,
         onBuildingValueChange,
+        onItemToggle,
         inputRef,
         menuRef,
         blurCommitRef
     });
-    const displayValues = useMemo(()=>{
-        if (!multiSelect) return filteredValues;
-        const checkedSet = new Set(checkedValues.map(String));
-        if (0 === checkedSet.size) return filteredValues;
-        const checkedItems = values.filter((v)=>checkedSet.has(String(v.value)));
-        const uncheckedFiltered = filteredValues.filter((v)=>!checkedSet.has(String(v.value)));
-        return [
-            ...checkedItems,
-            ...uncheckedFiltered
-        ];
-    }, [
-        filteredValues,
+    const displayValues = useValueMenuDisplayValues({
         values,
+        filteredValues,
         multiSelect,
-        checkedValues
-    ]);
+        checkedValues,
+        highlightValue
+    });
     const widthClass = 'compact' === width ? 'w-[172px]' : 'w-[300px]';
     const widthStyle = 'number' == typeof width ? {
         width: `${width}px`
@@ -76,71 +68,8 @@ const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpen
                                 })
                         }, String(option.value)))
                 }) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
-                /*#__PURE__*/ jsx(DropdownMenuFooter, {
-                    children: 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"
-                                ]
-                            })
-                        ]
-                    })
+                /*#__PURE__*/ jsx(ValueMenuFooter, {
+                    multiSelect: multiSelect
                 })
             ]
         })

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

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+interface ValueMenuFooterProps {
+    multiSelect: boolean;
+}
+export declare const ValueMenuFooter: FC<ValueMenuFooterProps>;
+export {};

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

@@ -0,0 +1,72 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DropdownMenuFooter } from "../../../DropdownMenu/index.js";
+import { Kbd } from "../../../Kbd/Kbd.js";
+import { KbdGroup } from "../../../Kbd/KbdGroup.js";
+const ValueMenuFooter = ({ multiSelect })=>/*#__PURE__*/ jsx(DropdownMenuFooter, {
+        children: 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"
+                    ]
+                })
+            ]
+        })
+    });
+ValueMenuFooter.displayName = 'ValueMenuFooter';
+export { ValueMenuFooter };

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "../../../../icons/ChevronRight.js";
+import { Badge } from "../../../Badge/index.js";
 import { Checkmark } from "../../../Checkmark/index.js";
 import { DropdownMenuItem } from "../../../DropdownMenu/index.js";
 import { Text } from "../../../Text/index.js";
@@ -8,15 +9,11 @@ const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect })=
         onSelect: onSelect,
         className: isPending ? 'bg-states-primary-hover' : void 0,
         children: [
-            option.badge ? /*#__PURE__*/ jsx("div", {
-                className: "flex items-center gap-4 px-6 py-2 rounded-4 text-xs font-medium max-w-[320px] min-h-[20px] overflow-clip",
-                style: {
-                    backgroundColor: option.badge.color
-                },
-                children: /*#__PURE__*/ jsx("span", {
-                    className: "min-w-0 truncate leading-4",
-                    children: option.badge.text
-                })
+            option.badge ? /*#__PURE__*/ jsx(Badge, {
+                color: option.badge.color,
+                type: "secondary",
+                variant: "default",
+                children: option.badge.text
             }) : /*#__PURE__*/ jsx("div", {
                 className: "min-w-0",
                 children: /*#__PURE__*/ jsx(Text, {

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

@@ -0,0 +1,31 @@
+import type { ValueOption } from './FilterInputValueMenu';
+type ConditionValue = string | number | boolean;
+interface UseValueMenuDisplayValuesOptions {
+    /** Raw option list coming from the parent (e.g. `getSuggestions` output). */
+    values: ValueOption[];
+    /** Filtered / sorted view of `values` used for normal rendering. */
+    filteredValues: ValueOption[];
+    multiSelect: boolean;
+    /** Currently checked values when `multiSelect` is true. */
+    checkedValues: ConditionValue[];
+    /** Currently highlighted value when `multiSelect` is false. */
+    highlightValue?: ConditionValue;
+}
+/**
+ * Compose the final dropdown list shown to the user.
+ *
+ * The parent helper (`values`) is free to change shape between renders — for
+ * instance a dynamic `getSuggestions` may narrow its result after a selection
+ * is made. This hook keeps the user's currently-selected entries pinned at
+ * the top of the list with a stable presentation:
+ *
+ *  1. Every option the menu has ever rendered is remembered in a `Map` keyed
+ *     by value. When a selected entry is no longer in the current `values`,
+ *     the remembered option (with its original label/badge) is used.
+ *  2. If nothing has been seen for that value either, a plain-text option is
+ *     fabricated so the user can still see and toggle it.
+ *  3. Unchecked items come from `filteredValues` (already filter-sorted) so
+ *     the search query still applies to them.
+ */
+export declare const useValueMenuDisplayValues: ({ values, filteredValues, multiSelect, checkedValues, highlightValue, }: UseValueMenuDisplayValuesOptions) => ValueOption[];
+export {};

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

@@ -0,0 +1,39 @@
+import { useEffect, useMemo, useRef } from "react";
+const useValueMenuDisplayValues = ({ values, filteredValues, multiSelect, checkedValues, highlightValue })=>{
+    const optionMemoryRef = useRef(new Map());
+    useEffect(()=>{
+        for (const opt of values)optionMemoryRef.current.set(String(opt.value), opt);
+    }, [
+        values
+    ]);
+    return useMemo(()=>{
+        const selectedList = multiSelect ? checkedValues : null != highlightValue ? [
+            highlightValue
+        ] : [];
+        if (0 === selectedList.length) return filteredValues;
+        const selectedSet = new Set(selectedList.map(String));
+        const selectedItems = selectedList.map((v)=>{
+            const key = String(v);
+            const match = values.find((opt)=>String(opt.value) === key);
+            if (match) return match;
+            const remembered = optionMemoryRef.current.get(key);
+            if (remembered) return remembered;
+            return {
+                value: v,
+                label: key
+            };
+        });
+        const restFiltered = filteredValues.filter((v)=>!selectedSet.has(String(v.value)));
+        return [
+            ...selectedItems,
+            ...restFiltered
+        ];
+    }, [
+        filteredValues,
+        values,
+        multiSelect,
+        checkedValues,
+        highlightValue
+    ]);
+};
+export { useValueMenuDisplayValues };

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

@@ -13,12 +13,17 @@ interface UseValueMenuStateOptions {
     onEscape?: () => void;
     onOpenChange?: (open: boolean) => void;
     onBuildingValueChange?: (preview: string | undefined) => void;
+    /** Fires whenever the user explicitly toggles an item in multi-select mode
+     *  (click or keyboard). Distinct from onBuildingValueChange, which also fires
+     *  on mount with the initial preview — use this when you need to react only
+     *  to actual user-initiated toggles. */
+    onItemToggle?: () => void;
     inputRef?: RefObject<HTMLInputElement | null>;
     menuRef?: RefObject<HTMLDivElement | null>;
     /** Ref to register blur commit function — called by blur handler before state reset. Returns true if committed. */
     blurCommitRef?: RefObject<(() => boolean) | null>;
 }
-export declare const useValueMenuState: ({ values, open, multiSelect, initialValues, highlightValue, onSelect, onCommit, onEscape, onOpenChange, onBuildingValueChange, inputRef, menuRef, blurCommitRef, }: UseValueMenuStateOptions) => {
+export declare const useValueMenuState: ({ values, open, multiSelect, initialValues, highlightValue, onSelect, onCommit, onEscape, onOpenChange, onBuildingValueChange, onItemToggle, inputRef, menuRef, blurCommitRef, }: UseValueMenuStateOptions) => {
     checkedValues: ConditionValue[];
     selectedValues: ConditionValue[];
     highlightedValue: string;

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useKeyboardNav } from "../hooks/useKeyboardNav.js";
-const useValueMenuState = ({ values, open, multiSelect, initialValues, highlightValue, onSelect, onCommit, onEscape, onOpenChange, onBuildingValueChange, inputRef, menuRef, blurCommitRef })=>{
+const useValueMenuState = ({ values, open, multiSelect, initialValues, highlightValue, onSelect, onCommit, onEscape, onOpenChange, onBuildingValueChange, onItemToggle, inputRef, menuRef, blurCommitRef })=>{
     const [checkedValues, setCheckedValues] = useState(initialValues);
     const checkedValuesRef = useRef(checkedValues);
     checkedValuesRef.current = checkedValues;
@@ -59,8 +59,10 @@ const useValueMenuState = ({ values, open, multiSelect, initialValues, highlight
         values
     ]);
     const handleItemSelect = (item)=>{
-        if (multiSelect) toggleValue(item.value);
-        else onSelect(item.value);
+        if (multiSelect) {
+            toggleValue(item.value);
+            onItemToggle?.();
+        } else onSelect(item.value);
     };
     const handleClose = ()=>{
         if (multiSelect) commitChecked();

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.d.ts

@@ -24,6 +24,7 @@ export declare const useChipEditing: ({ conditions, chips, fields, containerRef,
     segmentFilterText: string;
     segmentMenuFilterText: string;
     setSegmentFilterText: (text: string) => void;
+    resetSegmentTyping: () => void;
     handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
     clearEditing: () => void;
     cancelSegmentEdit: () => void;

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.js

@@ -82,6 +82,9 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         setSegmentFilterText(text);
         setUserHasTyped(true);
     }, []);
+    const resetSegmentTyping = useCallback(()=>{
+        setUserHasTyped(false);
+    }, []);
     const segmentDisplayText = segmentFilterText;
     const segmentMenuFilterText = userHasTyped ? segmentFilterText : '';
     return useMemo(()=>({
@@ -91,6 +94,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
             segmentFilterText: segmentDisplayText,
             segmentMenuFilterText,
             setSegmentFilterText: handleSegmentFilterChange,
+            resetSegmentTyping,
             handleChipClick,
             clearEditing,
             cancelSegmentEdit
@@ -100,6 +104,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         segmentDisplayText,
         segmentMenuFilterText,
         handleSegmentFilterChange,
+        resetSegmentTyping,
         handleChipClick,
         clearEditing,
         cancelSegmentEdit

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.d.ts

@@ -44,6 +44,7 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     handleValueSelect: (val: string | number | boolean) => void;
     handleMultiCommit: (values: Array<string | number | boolean>) => void;
     handleBuildingValueChange: (preview: string | undefined) => void;
+    handleMultiSelectToggle: () => void;
     handleMenuClose: () => void;
     handleMenuDiscard: (continueBuilding?: boolean) => void;
     handleChipClick: (chipId: string, segment: import("../../FilterInputField").ChipSegment, anchorRect: DOMRect) => void;

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

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { useDateRange } from "../../FilterInputMenu/FilterInputDateValueMenu/hooks.js";
-import { chipIdToConditionIndex } from "../../lib/index.js";
+import { applyAcceptChar, chipIdToConditionIndex } from "../../lib/index.js";
 import { deriveAutocompleteValues } from "./deriveAutocompleteValues.js";
 import { useChipEditing } from "./useChipEditing.js";
 import { useFocusManagement } from "./useFocusManagement.js";
@@ -75,7 +75,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
     const inputTextRef = useRef(inputText);
     inputTextRef.current = inputText;
     const commitBuildingOnBlurRef = useRef(()=>false);
-    const { handleMenuClose, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleBuildingValueChange, handleRangeSelect, handleCustomValueCommit, handleCustomAttributeCommit } = useMenuFlow({
+    const { handleMenuClose, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleBuildingValueChange, handleMultiSelectToggle, handleRangeSelect, handleCustomValueCommit, handleCustomAttributeCommit } = useMenuFlow({
         editing,
         selectedField,
         selectedOperator,
@@ -209,6 +209,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         handleValueSelect,
         handleMultiCommit,
         handleBuildingValueChange,
+        handleMultiSelectToggle,
         handleMenuClose,
         handleMenuDiscard: resetState,
         handleChipClick: editing.handleChipClick,
@@ -227,7 +228,11 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         editingSegment: editing.editingSegment,
         segmentFilterText: editing.segmentFilterText,
         segmentMenuFilterText: editing.segmentMenuFilterText,
-        handleSegmentFilterChange: editing.setSegmentFilterText,
+        handleSegmentFilterChange: (text)=>{
+            const accept = selectedField?.acceptChar;
+            const next = 'value' === editing.editingSegment && accept ? applyAcceptChar(text, accept) : text;
+            editing.setSegmentFilterText(next);
+        },
         cancelSegmentEdit: editing.cancelSegmentEdit,
         handleCustomValueCommit,
         handleCustomAttributeCommit,

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useInputHandlers.js

@@ -1,13 +1,18 @@
 import { useCallback, useRef } from "react";
-import { OPERATOR_SYMBOLS, getOperatorFromLabel, hasFieldValues } from "../../lib/index.js";
+import { OPERATOR_SYMBOLS, applyAcceptChar, getOperatorFromLabel, hasFieldValues } from "../../lib/index.js";
 const useInputHandlers = ({ inputText, menuState, selectedField, isFocused, fields, inputRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuOffset, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit })=>{
     const menuRef = useRef(null);
     const handleInputChange = useCallback((e)=>{
-        const text = e.target.value;
+        let text = e.target.value;
+        if ('value' === menuState && selectedField?.acceptChar) {
+            text = applyAcceptChar(text, selectedField.acceptChar);
+            if (text !== e.target.value) e.target.value = text;
+        }
         setInputText(text);
         if (text && !selectedField) setMenuState('field');
         else if (!text && !selectedField) setMenuState(isFocused && 0 === conditionsLengthRef.current ? 'field' : 'closed');
     }, [
+        menuState,
         selectedField,
         isFocused,
         setInputText,

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useMenuFlow.d.ts

@@ -7,6 +7,7 @@ interface MenuFlowDeps {
         editingSegment: string | null;
         setEditingSegment: (segment: ChipSegment | null) => void;
         setSegmentFilterText: (text: string) => void;
+        resetSegmentTyping: () => void;
     };
     selectedField: FieldMetadata | null;
     selectedOperator: FilterOperator | null;
@@ -34,6 +35,7 @@ export declare const useMenuFlow: ({ editing, selectedField, selectedOperator, f
     handleValueSelect: (val: string | number | boolean) => void;
     handleMultiCommit: (values: Array<string | number | boolean>) => void;
     handleBuildingValueChange: (preview: string | undefined) => void;
+    handleMultiSelectToggle: () => void;
     handleRangeSelect: (from: string, to: string) => void;
     handleCustomValueCommit: (customText: string) => void;
     handleCustomAttributeCommit: (customText: string) => void;

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useMenuFlow.js

@@ -109,6 +109,13 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
     }, [
         setBuildingMultiValue
     ]);
+    const handleMultiSelectToggle = useCallback(()=>{
+        if ('value' === editing.editingSegment) editing.resetSegmentTyping();
+        else setInputText('');
+    }, [
+        editing,
+        setInputText
+    ]);
     const handleRangeSelect = useCallback((from, to)=>{
         if (!selectedField || !selectedOperator) return;
         const isEditing = !!editing.editingChipId;
@@ -184,6 +191,7 @@ const useMenuFlow = ({ editing, selectedField, selectedOperator, fields, inputRe
         handleValueSelect,
         handleMultiCommit,
         handleBuildingValueChange,
+        handleMultiSelectToggle,
         handleRangeSelect,
         handleCustomValueCommit,
         handleCustomAttributeCommit

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/valueCommitHelpers.js

@@ -3,6 +3,10 @@ import { chipIdToConditionIndex, getFieldValues, hasStaticAllowlist, isDatePrese
 const findMatchingFieldValue = (fieldValues, text)=>fieldValues.find((v)=>v.label.toLowerCase() === text.toLowerCase() || String(v.value).toLowerCase() === text.toLowerCase());
 const isValidFieldValue = (fieldValues, v)=>fieldValues.some((opt)=>opt.value === v || String(opt.value).toLowerCase() === String(v).toLowerCase());
 const getInvalidValueIndices = (field, values)=>{
+    if (field.validate) return values.reduce((acc, v, idx)=>{
+        if (field.validate(v)) acc.push(idx);
+        return acc;
+    }, []);
     if (!hasStaticAllowlist(field)) return [];
     const fv = getFieldValues(field);
     if (0 === fv.length) return [];
@@ -25,14 +29,21 @@ const resolveFieldValue = (field, text)=>{
 const resolveSingleValue = (field, trimmed)=>{
     const fv = getFieldValues(field);
     const match = findMatchingFieldValue(fv, trimmed);
+    const raw = match ? match.value : trimmed;
+    const resolved = field.normalize ? field.normalize(raw) : raw;
+    if (field.validate) return {
+        resolved,
+        error: field.validate(resolved) ? true : void 0
+    };
     return {
-        resolved: match ? match.value : trimmed,
+        resolved,
         error: hasStaticAllowlist(field) && fv.length > 0 && !match ? true : void 0
     };
 };
 const resolveMultiValues = (field, trimmed)=>{
     const parts = trimmed.split(',').map((s)=>s.trim()).filter(Boolean);
-    const resolved = parts.map((part)=>resolveFieldValue(field, part));
+    const raw = parts.map((part)=>resolveFieldValue(field, part));
+    const resolved = field.normalize ? raw.map((v)=>field.normalize(v)) : raw;
     const error = getInvalidValueIndices(field, resolved).length > 0 ? true : void 0;
     return {
         resolved,

package/dist/components/FilterInput/index.d.ts

@@ -1,5 +1,5 @@
 export { FilterInput, type FilterInputProps } from './FilterInput';
 export { FilterInputChip, type FilterInputChipProps } from './FilterInputField';
 export { FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, FilterInputValueMenu, type FilterInputValueMenuProps, type ValueOption, } from './FilterInputMenu';
-export { createStatusCodeSuggestions, type FilterParseError, isFilterParseError, parseExpression, type StatusCodeSuggestionsOptions, serializeExpression, } from './lib';
+export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, isFilterParseError, parseExpression, type StatusCodeSuggestionsOptions, serializeExpression, } from './lib';
 export type { Condition, ExprNode, FieldMetadata, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';