@wallarm-org/design-system 0.40.0-rc-feature-AS-982.7 → 0.40.0

package/dist/components/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -0,0 +1,15 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { dropdownMenuItemVariants } from './classes';
+type DropdownMenuCheckboxItemVariantsProps = VariantProps<typeof dropdownMenuItemVariants>;
+export interface DropdownMenuCheckboxItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'>, DropdownMenuCheckboxItemVariantsProps {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Optional — auto-generated via useId() if omitted */
+    value?: string;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DropdownMenuCheckboxItem: FC<DropdownMenuCheckboxItemProps>;
+export {};

package/dist/components/DropdownMenu/DropdownMenuCheckboxItem.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Menu } from "@ark-ui/react/menu";
+import { Check } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { dropdownMenuItemVariants } from "./classes.js";
+import { DropdownMenuItemIndicator } from "./DropdownMenuItemIndicator.js";
+const DropdownMenuCheckboxItem = ({ children, checked, onCheckedChange, value, disabled, closeOnSelect, variant = 'default', className, ...props })=>{
+    const autoId = useId();
+    const testId = useTestId('checkbox-item');
+    return /*#__PURE__*/ jsxs(Menu.CheckboxItem, {
+        ...props,
+        value: value ?? autoId,
+        checked: checked,
+        onCheckedChange: onCheckedChange,
+        disabled: disabled,
+        closeOnSelect: closeOnSelect ?? false,
+        "data-testid": testId,
+        className: cn(dropdownMenuItemVariants({
+            variant
+        }), className),
+        children: [
+            children,
+            /*#__PURE__*/ jsx(DropdownMenuItemIndicator, {
+                children: /*#__PURE__*/ jsx(Check, {})
+            })
+        ]
+    });
+};
+DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
+export { DropdownMenuCheckboxItem };

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -3,13 +3,14 @@ import { Children, isValidElement } from "react";
 import { Menu } from "@ark-ui/react/menu";
 import { Portal } from "@ark-ui/react/portal";
 import { cn } from "../../utils/cn.js";
-import { useTestId } from "../../utils/testId.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
 import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "../ScrollArea/index.js";
 import { dropdownMenuClassNames } from "./classes.js";
 import { DropdownMenuFooter } from "./DropdownMenuFooter.js";
 import { DropdownMenuInput } from "./DropdownMenuInput.js";
 const DropdownMenuContent = ({ className, children, ref, ...props })=>{
     const testId = useTestId('content');
+    const cascadeBase = useTestId();
     const childArray = Children.toArray(children);
     const inputChildren = childArray.filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type === DropdownMenuInput);
     const footerChildren = childArray.filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type === DropdownMenuFooter);
@@ -32,7 +33,10 @@ const DropdownMenuContent = ({ className, children, ref, ...props })=>{
                             /*#__PURE__*/ jsx(ScrollAreaViewport, {
                                 children: /*#__PURE__*/ jsx(ScrollAreaContent, {
                                     className: cn('flex flex-col gap-1 !min-w-0'),
-                                    children: menuChildren
+                                    children: /*#__PURE__*/ jsx(TestIdProvider, {
+                                        value: cascadeBase,
+                                        children: menuChildren
+                                    })
                                 })
                             }),
                             /*#__PURE__*/ jsx(ScrollAreaScrollbar, {}),

package/dist/components/DropdownMenu/DropdownMenuItemIndicator.d.ts

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const DropdownMenuItemIndicator: FC<PropsWithChildren>;

package/dist/components/DropdownMenu/DropdownMenuItemIndicator.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@ark-ui/react/menu";
+import { useTestId } from "../../utils/testId.js";
+import { dropdownMenuItemIndicatorClassName } from "./classes.js";
+const DropdownMenuItemIndicator = ({ children })=>{
+    const testId = useTestId('item-indicator');
+    return /*#__PURE__*/ jsx(Menu.ItemIndicator, {
+        "data-testid": testId,
+        className: dropdownMenuItemIndicatorClassName,
+        children: children
+    });
+};
+DropdownMenuItemIndicator.displayName = 'DropdownMenuItemIndicator';
+export { DropdownMenuItemIndicator };

package/dist/components/DropdownMenu/DropdownMenuRadioGroup.d.ts

@@ -0,0 +1,9 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+export interface DropdownMenuRadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value?: string;
+    onValueChange?: (details: {
+        value: string;
+    }) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DropdownMenuRadioGroup: FC<DropdownMenuRadioGroupProps>;

package/dist/components/DropdownMenu/DropdownMenuRadioGroup.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { Menu } from "@ark-ui/react/menu";
+import { useTestId } from "../../utils/testId.js";
+const DropdownMenuRadioGroup = ({ value, onValueChange, ...props })=>{
+    const id = useId();
+    const testId = useTestId('radio-group');
+    return /*#__PURE__*/ jsx(Menu.RadioItemGroup, {
+        ...props,
+        id: id,
+        value: value,
+        onValueChange: onValueChange,
+        "data-testid": testId
+    });
+};
+DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup';
+export { DropdownMenuRadioGroup };

package/dist/components/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -0,0 +1,13 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { dropdownMenuItemVariants } from './classes';
+type DropdownMenuRadioItemVariantsProps = VariantProps<typeof dropdownMenuItemVariants>;
+export interface DropdownMenuRadioItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'>, DropdownMenuRadioItemVariantsProps {
+    /** Required — identifies this radio within the group */
+    value: string;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DropdownMenuRadioItem: FC<DropdownMenuRadioItemProps>;
+export {};

package/dist/components/DropdownMenu/DropdownMenuRadioItem.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@ark-ui/react/menu";
+import { Check } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { dropdownMenuItemVariants } from "./classes.js";
+import { DropdownMenuItemIndicator } from "./DropdownMenuItemIndicator.js";
+const DropdownMenuRadioItem = ({ children, value, disabled, closeOnSelect, variant = 'default', className, ...props })=>{
+    const testId = useTestId('radio-item');
+    return /*#__PURE__*/ jsxs(Menu.RadioItem, {
+        ...props,
+        value: value,
+        disabled: disabled,
+        closeOnSelect: closeOnSelect ?? false,
+        "data-testid": testId,
+        className: cn(dropdownMenuItemVariants({
+            variant
+        }), className),
+        children: [
+            children,
+            /*#__PURE__*/ jsx(DropdownMenuItemIndicator, {
+                children: /*#__PURE__*/ jsx(Check, {})
+            })
+        ]
+    });
+};
+DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
+export { DropdownMenuRadioItem };

package/dist/components/DropdownMenu/classes.d.ts

@@ -3,6 +3,7 @@ export declare const dropdownMenuItemVariants: (props?: ({
     variant?: "destructive" | "brand" | "default" | null | undefined;
     inset?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const dropdownMenuItemIndicatorClassName: string;
 export declare const dropdownMenuLabelVariants: (props?: ({
     inset?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/DropdownMenu/classes.js

@@ -18,6 +18,7 @@ const dropdownMenuItemVariants = cva([
         }
     }
 });
+const dropdownMenuItemIndicatorClassName = cn('ml-auto flex items-center justify-center', 'size-16 shrink-0', '[&_svg]:icon-md [&_svg]:shrink-0 [&_svg]:text-current');
 const dropdownMenuLabelVariants = cva('flex justify-between gap-8 px-8 pt-8 pb-2 text-xs font-medium text-text-secondary', {
     variants: {
         inset: {
@@ -25,4 +26,4 @@ const dropdownMenuLabelVariants = cva('flex justify-between gap-8 px-8 pt-8 pb-2
         }
     }
 });
-export { dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVariants };
+export { dropdownMenuClassNames, dropdownMenuItemIndicatorClassName, dropdownMenuItemVariants, dropdownMenuLabelVariants };

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

@@ -1,5 +1,6 @@
 export { dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVariants, } from './classes';
 export { DropdownMenu } from './DropdownMenu';
+export { DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, } from './DropdownMenuCheckboxItem';
 export { DropdownMenuContent } from './DropdownMenuContent';
 export { DropdownMenuContextTrigger } from './DropdownMenuContextTrigger';
 export { DropdownMenuFooter } from './DropdownMenuFooter';
@@ -11,6 +12,8 @@ export { DropdownMenuItemDescription } from './DropdownMenuItemDescription';
 export { DropdownMenuItemIcon } from './DropdownMenuItemIcon';
 export { DropdownMenuItemText } from './DropdownMenuItemText';
 export { DropdownMenuLabel } from './DropdownMenuLabel';
+export { DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, } from './DropdownMenuRadioGroup';
+export { DropdownMenuRadioItem, type DropdownMenuRadioItemProps, } from './DropdownMenuRadioItem';
 export { DropdownMenuSeparator } from './DropdownMenuSeparator';
 export { DropdownMenuShortcut } from './DropdownMenuShortcut';
 export { DropdownMenuTrigger } from './DropdownMenuTrigger';

package/dist/components/DropdownMenu/index.js

@@ -1,5 +1,6 @@
 import { dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVariants } from "./classes.js";
 import { DropdownMenu } from "./DropdownMenu.js";
+import { DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.js";
 import { DropdownMenuContent } from "./DropdownMenuContent.js";
 import { DropdownMenuContextTrigger } from "./DropdownMenuContextTrigger.js";
 import { DropdownMenuFooter } from "./DropdownMenuFooter.js";
@@ -11,8 +12,10 @@ import { DropdownMenuItemDescription } from "./DropdownMenuItemDescription.js";
 import { DropdownMenuItemIcon } from "./DropdownMenuItemIcon.js";
 import { DropdownMenuItemText } from "./DropdownMenuItemText.js";
 import { DropdownMenuLabel } from "./DropdownMenuLabel.js";
+import { DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.js";
+import { DropdownMenuRadioItem } from "./DropdownMenuRadioItem.js";
 import { DropdownMenuSeparator } from "./DropdownMenuSeparator.js";
 import { DropdownMenuShortcut } from "./DropdownMenuShortcut.js";
 import { DropdownMenuTrigger } from "./DropdownMenuTrigger.js";
 import { DropdownMenuTriggerItem } from "./DropdownMenuTriggerItem.js";
-export { DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVariants };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVariants };

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

@@ -2,15 +2,18 @@ import type { FC, HTMLAttributes } from 'react';
 import type { ExprNode, FieldMetadata } from './types';
 export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
     /**
-     * Filter-field configurations driving the autocomplete. A few names are
-     * **reserved** and auto-wired with design-system helpers (consumer-supplied
-     * callbacks always override the auto-wiring):
+     * Filter-field configurations driving the autocomplete. Most fields are
+     * passed through as-is, but a few names are **reserved** and auto-wired
+     * with design-system helpers (`acceptChar` / `normalize` / `getSuggestions`
+     * / `validate`). Current reserved names:
      *
      *   - `status_code` — HTTP status code field (mask suggestions, format
      *     validation, digit-or-X input filter, partial-input normalization).
      *
-     * For the same helpers on a different `name`, import the factories
-     * (`createStatusCodeSuggestions`, …) and attach them manually.
+     * Consumer-supplied callbacks always override the auto-wiring, so you can
+     * opt out per-field. For the same helpers on a field with a different
+     * `name`, import the factories (`createStatusCodeSuggestions`, …) and
+     * attach them manually.
      */
     fields?: FieldMetadata[];
     value?: ExprNode | null;

package/dist/components/FilterInput/FilterInputContext/types.d.ts

@@ -22,13 +22,10 @@ export interface FilterInputContextValue {
     onInputKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
     onInputClick: () => void;
     onGapClick: (conditionIndex: number, afterConnector: boolean) => void;
-    onChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
-    /** Click on a building-chip segment — reopens its menu and enters inline-edit. */
-    onBuildingChipClick: (segment: ChipSegment, anchorEl: HTMLElement) => void;
-    /** Move inline-edit to another segment of the edited chip (Backspace cascade). */
-    onSwitchEditSegment: (targetSegment: ChipSegment) => boolean;
-    /** Remove the inline-edited chip — Backspace on empty attribute w/o op/value. */
-    onRemoveEditingChip: () => void;
+    onChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    /** Click on a segment of the *building* (in-progress) chip — re-opens the
+     *  corresponding menu and enters inline-edit without committing the chip. */
+    onBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
     onConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     onChipRemove: (chipId: string) => void;
     onClear: () => void;
@@ -42,14 +39,14 @@ export interface FilterInputContextValue {
     onCustomOperatorCommit: (customText: string) => void;
     /** Ref to the currently open menu content element */
     menuRef: RefObject<HTMLDivElement | null>;
-    /** Close autocomplete menu (connector chip enforces single-dropdown). */
+    /** Close autocomplete menu (used by connector chip to enforce single-dropdown constraint) */
     closeAutocompleteMenu: () => void;
-    /** Register/unregister a chip DOM element for selection tracking. */
+    /** Register/unregister a chip DOM element for selection tracking */
     registerChipRef: (id: string, el: HTMLElement | null) => void;
-    /** Attribute segment input ref — set by Segment when editing. */
+    /** Direct ref to the attribute segment <input> — attached by Segment when editing. */
     segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
-    /** Operator segment input ref — set by Segment when editing. */
+    /** Direct ref to the operator segment <input> — attached by Segment when editing. */
     segmentOperatorInputRef: RefObject<HTMLInputElement | null>;
-    /** Value segment input ref — set by Segment when editing. */
+    /** Direct ref to the value segment <input> — attached by Segment when editing. */
     segmentValueInputRef: RefObject<HTMLInputElement | null>;
 }

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.d.ts

@@ -9,10 +9,8 @@ interface AutocompleteForContext {
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleInputClick: () => void;
-    handleChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
-    handleBuildingChipClick: (segment: ChipSegment, anchorEl: HTMLElement) => void;
-    switchEditSegment: (targetSegment: ChipSegment) => boolean;
-    removeEditingChip: () => void;
+    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    handleBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
     handleConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.js

@@ -17,8 +17,6 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onInputClick: autocomplete.handleInputClick,
             onChipClick: autocomplete.handleChipClick,
             onBuildingChipClick: autocomplete.handleBuildingChipClick,
-            onSwitchEditSegment: autocomplete.switchEditSegment,
-            onRemoveEditingChip: autocomplete.removeEditingChip,
             onConnectorChange: autocomplete.handleConnectorChange,
             onChipRemove: autocomplete.handleChipRemove,
             onClear: autocomplete.handleClear,
@@ -49,8 +47,6 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.handleInputClick,
         autocomplete.handleChipClick,
         autocomplete.handleBuildingChipClick,
-        autocomplete.switchEditSegment,
-        autocomplete.removeEditingChip,
         autocomplete.handleConnectorChange,
         autocomplete.handleChipRemove,
         autocomplete.handleClear,

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

@@ -1,5 +1,6 @@
 import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
-import { getFieldValues, hasStaticAllowlist, isValidFieldValue } from "../lib/index.js";
+import { isValidFieldValue } from "../hooks/useFilterInputAutocomplete/valueCommitHelpers.js";
+import { getFieldValues, hasStaticAllowlist } from "../lib/index.js";
 const parseFilterInputErrors = (conditions, fields)=>{
     const errors = [];
     for (const condition of conditions){

package/dist/components/FilterInput/FilterInputField/ChipsWithGaps.d.ts

@@ -5,7 +5,7 @@ interface ChipsWithGapsProps {
     chips: FilterInputChipData[];
     hideLeadingGap?: boolean;
     hideTrailingGap?: boolean;
-    onChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
+    onChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
     onConnectorChange: (chipId: string, value: 'and' | 'or') => void;
     onChipRemove: (chipId: string) => void;
     onGapClick: (conditionIndex: number, afterConnector: boolean) => void;

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

@@ -30,7 +30,7 @@ const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, on
                 errorValueIndices: chip.errorValueIndices,
                 disabled: chip.disabled,
                 onRemove: chip.disabled ? void 0 : ()=>onChipRemove(chip.id),
-                onSegmentClick: chip.disabled ? void 0 : (segment, anchorEl)=>onChipClick(chip.id, segment, anchorEl)
+                onSegmentClick: chip.disabled ? void 0 : (segment, anchorRect)=>onChipClick(chip.id, segment, anchorRect)
             })
         }, chip.id));
         else if (isConnector) {

package/dist/components/FilterInput/FilterInputField/FilterInputChip/FilterInputChip.d.ts

@@ -16,6 +16,6 @@ export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement
     /** When true, the chip cannot be edited or removed (dimmed appearance) */
     disabled?: boolean;
     onRemove?: () => void;
-    onSegmentClick?: (segment: ChipSegment, anchorEl: HTMLElement) => void;
+    onSegmentClick?: (segment: ChipSegment, anchorRect: DOMRect) => void;
 }
 export declare const FilterInputChip: FC<FilterInputChipProps>;

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

@@ -18,9 +18,9 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
         if (!onSegmentClick) return;
         if (activeSegment === segment) return;
         e.stopPropagation();
-        const anchorEl = internalRef.current;
+        const anchorEl = segment === SEGMENT_VARIANT.attribute ? internalRef.current : e.currentTarget;
         if (!anchorEl) return;
-        onSegmentClick(segment, anchorEl);
+        onSegmentClick(segment, anchorEl.getBoundingClientRect());
     }, [
         onSegmentClick,
         activeSegment

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

@@ -1,19 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
 import { cn } from "../../../utils/cn.js";
 import { inputVariants } from "../../Input/classes.js";
 import { ScrollArea, ScrollAreaScrollbar, ScrollAreaViewport } from "../../ScrollArea/index.js";
 import { useFilterInputContext } from "../FilterInputContext/index.js";
+import { isMenuRelated } from "../lib/index.js";
 import { ChipsWithGaps, TrailingGap } from "./ChipsWithGaps.js";
 import { ACTIONS_PADDING, COLLAPSED_MAX_HEIGHT, filterInputContainerVariants, filterInputInnerVariants } from "./classes.js";
 import { EditingProvider } from "./FilterInputChip/context/EditingContext.js";
 import { FilterInputChip } from "./FilterInputChip/FilterInputChip.js";
+import { SEGMENT_VARIANT } from "./FilterInputChip/segmentVariant.js";
 import { FilterInputFieldActions } from "./FilterInputFieldActions.js";
 import { FilterInputSearch } from "./FilterInputSearch.js";
 import { useChipsSplitting } from "./hooks/useChipsSplitting.js";
 import { useExpandCollapse } from "./hooks/useExpandCollapse.js";
-import { useSegmentEditKeyboard } from "./hooks/useSegmentEditKeyboard.js";
 const FilterInputField = ({ className, ...props })=>{
-    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onInputClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, onSwitchEditSegment, onRemoveEditingChip, menuRef } = useFilterInputContext();
+    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onInputClick, onGapClick, onChipClick, onBuildingChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, onCustomOperatorCommit, menuRef } = useFilterInputContext();
     const hasContent = chips.length > 0 || null != buildingChipData;
     const { isExpanded, isOverflowing, innerRef, toggleExpand, multiRow } = useExpandCollapse();
     const { chipsBefore, chipsAfter, hideTrailingGap, hideLeadingGap } = useChipsSplitting(chips, insertIndex, insertAfterConnector);
@@ -23,20 +25,47 @@ const FilterInputField = ({ className, ...props })=>{
         onChipRemove,
         onGapClick
     };
-    const { handleSegmentEditKeyDown, handleSegmentEditBlur } = useSegmentEditKeyboard({
-        editingChipId,
+    const handleSegmentEditKeyDown = useCallback((e)=>{
+        if ('Escape' === e.key) {
+            e.preventDefault();
+            onCancelSegmentEdit();
+            return;
+        }
+        if ('Enter' === e.key && !e.defaultPrevented) {
+            if (editingSegment === SEGMENT_VARIANT.value) {
+                e.preventDefault();
+                onCustomValueCommit(segmentFilterText);
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.attribute) {
+                e.preventDefault();
+                onCustomAttributeCommit(segmentFilterText);
+                return;
+            }
+            if (editingSegment === SEGMENT_VARIANT.operator) {
+                e.preventDefault();
+                onCustomOperatorCommit(segmentFilterText);
+                return;
+            }
+        }
+        if ('ArrowDown' === e.key) {
+            e.preventDefault();
+            menuRef.current?.focus();
+        }
+    }, [
+        onCancelSegmentEdit,
         editingSegment,
         segmentFilterText,
-        chips,
-        buildingChipData,
-        menuRef,
-        onCancelSegmentEdit,
         onCustomValueCommit,
         onCustomAttributeCommit,
         onCustomOperatorCommit,
-        onSwitchEditSegment,
-        onRemoveEditingChip
-    });
+        menuRef
+    ]);
+    const handleSegmentEditBlur = useCallback((e)=>{
+        if (!isMenuRelated(e.relatedTarget)) onCancelSegmentEdit();
+    }, [
+        onCancelSegmentEdit
+    ]);
     return /*#__PURE__*/ jsx(EditingProvider, {
         editingChipId: editingChipId,
         editingSegment: editingSegment,

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

@@ -10,8 +10,8 @@ export interface DatePreset {
 export declare const DATE_PRESETS: DatePreset[];
 /** Check if a value string is a relative date preset (e.g. "30m", "7d") */
 export declare const isDatePreset: (value: string) => boolean;
-/** Format a date string for chip display (e.g. "Mar 4, 2026"). ISO parsed as
- *  UTC, locale strings as local time. */
+/** Format a date string for chip display (e.g. "Mar 4, 2026").
+ *  Handles both ISO (YYYY-MM-DD, parsed as UTC) and locale formats (parsed as local time). */
 export declare const formatDateForChip: (value: string) => string;
 /** Get display label for a date value — preset label or formatted date */
 export declare const getDateDisplayLabel: (value: string) => string;

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

@@ -16,7 +16,7 @@ export interface FilterInputFieldMenuProps {
     positioning?: Record<string, unknown>;
     /** Ref to the query bar input — ArrowUp on first item returns focus here */
     inputRef?: RefObject<HTMLInputElement | null>;
-    /** Ref to the menu content (shared across menus for focus management). */
+    /** Ref to the menu content element — shared across menus for focus management */
     menuRef?: RefObject<HTMLDivElement | null>;
     className?: string;
 }

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

@@ -24,7 +24,7 @@ export interface FilterInputAutocompleteState {
     segmentFilterText: string;
     segmentMenuFilterText: string;
     editingSegment: ChipSegment | null;
-    /** Multi-select blur commit; set by value menu, called by blur handler. */
+    /** Ref for multi-select blur commit — set by value menu, called by blur handler */
     blurCommitRef: RefObject<(() => boolean) | null>;
 }
 export interface FilterInputMenuProps {

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

@@ -23,15 +23,16 @@ export interface FilterInputValueMenuProps {
     width?: 'standard' | 'compact' | number;
     positioning?: Record<string, unknown>;
     onBuildingValueChange?: (preview: string | undefined) => void;
-    /** Fires only on user-initiated multi-select toggle (not on init). */
+    /** Fires on explicit multi-select toggle (click or keyboard) — use to react
+     *  only to user-initiated toggles, not to initialization. */
     onItemToggle?: () => void;
-    /** Query bar input — ArrowUp on first item returns focus here. */
+    /** Ref to the query bar input — ArrowUp on first item returns focus here */
     inputRef?: RefObject<HTMLInputElement | null>;
-    /** Filter values by label. */
+    /** Text to filter values by label */
     filterText?: string;
-    /** Menu content ref (shared across menus for focus management). */
+    /** Ref to the menu content element — shared across menus for focus management */
     menuRef?: RefObject<HTMLDivElement | null>;
-    /** Set here so blur handler can commit multi-select values. */
+    /** Ref set by this component to allow blur handler to commit multi-select values */
     blurCommitRef?: RefObject<(() => boolean) | null>;
     className?: string;
 }

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

@@ -12,10 +12,20 @@ interface UseValueMenuDisplayValuesOptions {
     highlightValue?: ConditionValue;
 }
 /**
- * Compose the dropdown list, pinning selected entries at the top.
- * Remembers every option ever rendered so a narrowed `values` (e.g. dynamic
- * getSuggestions) can still display the selected label/badge; fabricates a
- * plain-text option as last resort. Unselected items still respect the filter.
+ * 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/useValueMenuState.d.ts

@@ -13,12 +13,14 @@ interface UseValueMenuStateOptions {
     onEscape?: () => void;
     onOpenChange?: (open: boolean) => void;
     onBuildingValueChange?: (preview: string | undefined) => void;
-    /** Fires only on user-initiated toggles in multi-select (unlike
-     *  onBuildingValueChange which also fires on mount). */
+    /** 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>;
-    /** Register blur commit fn — called by blur handler before state reset. */
+    /** 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, onItemToggle, inputRef, menuRef, blurCommitRef, }: UseValueMenuStateOptions) => {

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

@@ -12,7 +12,7 @@ interface UseKeyboardNavOptions {
     arrowRightSelectsActive?: boolean;
     /** When provided, ArrowUp on the first item returns focus to this input */
     inputRef?: RefObject<HTMLInputElement | null>;
-    /** Ref to the menu content element for scoped queries. */
+    /** Ref to the menu content element — used for scoped queries and focus management */
     menuRef?: RefObject<HTMLDivElement | null>;
 }
 /**

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

@@ -141,11 +141,7 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
                 return;
             }
             const isSegmentInput = e.target?.closest?.('[data-slot^="segment-"]');
-            if (isSegmentInput) {
-                const isEnterWithHighlight = 'Enter' === e.key && activeIndexRef.current >= 0;
-                const isNavOrClose = 'Escape' === e.key || 'ArrowDown' === e.key || 'ArrowUp' === e.key;
-                if (!isNavOrClose && !isEnterWithHighlight) return;
-            }
+            if (isSegmentInput && 'Escape' !== e.key && 'ArrowDown' !== e.key && 'ArrowUp' !== e.key) return;
             const { items: list, onSelect: select, onClose: close, onArrowRight: arrowRight } = stateRef.current;
             if (0 === list.length) return;
             switch(e.key){
@@ -158,6 +154,7 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
                     e.preventDefault();
                     e.stopPropagation();
                     navigate('ArrowDown' === e.key ? 1 : -1);
+                    stateRef.current.menuRef?.current?.focus();
                     break;
                 case 'Enter':
                     {

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/{lib/deriveAutocompleteValues.d.ts → deriveAutocompleteValues.d.ts}

@@ -1,5 +1,5 @@
-import type { BuildingChipData } from '../../../FilterInputContext/types';
-import type { Condition, FieldMetadata, FilterOperator } from '../../../types';
+import type { BuildingChipData } from '../../FilterInputContext/types';
+import type { Condition, FieldMetadata, FilterOperator } from '../../types';
 interface DeriveOptions {
     editingChipId: string | null;
     selectedField: FieldMetadata | null;
@@ -7,7 +7,7 @@ interface DeriveOptions {
     conditions: Condition[];
     buildingMultiValue: string | undefined;
     dateRangeFromValue: string | null | undefined;
-    /** Segment text when inline-editing a value. */
+    /** Segment text when inline-editing a value — used to derive checked values from text */
     segmentFilterText?: string;
 }
 export interface DerivedAutocompleteValues {