@wallarm-org/design-system 0.16.4 → 0.16.5

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

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+/**
+ * Inline search input rendered inside a building chip.
+ * Reads input state from FilterInputContext.
+ * Uses a hidden sizer span to measure width (same approach as Segment).
+ * Renders nothing when used outside of FilterInput (e.g. in Storybook or tests).
+ */
+export declare const ChipSearchInput: FC;

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

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useRef } from "react";
+import { cn } from "../../../../utils/cn.js";
+import { FilterInputContext } from "../../FilterInputContext/FilterInputContext.js";
+import { segmentTextVariants } from "./classes.js";
+import { useSizerWidth } from "./model/useSizerWidth.js";
+const ChipSearchInput = ()=>{
+    const ctx = useContext(FilterInputContext);
+    const sizerRef = useRef(null);
+    const inputText = ctx?.inputText ?? '';
+    const inputWidth = useSizerWidth({
+        sizerRef,
+        text: inputText
+    });
+    if (!ctx) return null;
+    const { inputRef, error, menuOpen, onInputChange, onInputKeyDown, onInputClick } = ctx;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                ref: inputRef,
+                type: "text",
+                role: "combobox",
+                "aria-expanded": menuOpen,
+                "aria-invalid": error,
+                "aria-label": "Filter value",
+                "aria-autocomplete": "list",
+                value: inputText,
+                onChange: onInputChange,
+                onKeyDown: onInputKeyDown,
+                onClick: onInputClick,
+                style: {
+                    width: `${inputWidth}px`
+                },
+                className: "h-22 border-none bg-transparent p-0 text-sm shadow-none outline-none ring-0"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                ref: sizerRef,
+                className: cn(segmentTextVariants({
+                    variant: 'value'
+                }), 'invisible absolute whitespace-pre'),
+                "aria-hidden": true,
+                children: inputText || ' '
+            })
+        ]
+    });
+};
+ChipSearchInput.displayName = 'ChipSearchInput';
+export { ChipSearchInput };

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

@@ -1,7 +1,8 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC, HTMLAttributes, Ref } from 'react';
 import type { ChipErrorSegment } from '../../types';
 export type ChipSegment = 'attribute' | 'operator' | 'value';
 export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
     chipId?: string;
     attribute: string;
     operator?: string;

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

@@ -1,16 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
+import { ChipSearchInput } from "./ChipSearchInput.js";
 import { chipVariants } from "./classes.js";
-import { useEditingContext } from "./EditingContext.js";
+import { useEditingContext } from "./context/EditingContext.js";
 import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
-import { OperatorSegment } from "./OperatorSegment.js";
 import { Segment } from "./Segment.js";
-import { ValueSegment } from "./ValueSegment.js";
-const FilterInputChip = ({ chipId, attribute, operator, value, error = false, valueParts, valueSeparator, errorValueIndices, building = false, onRemove, onSegmentClick, className, ...props })=>{
+const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = false, valueParts, valueSeparator, errorValueIndices, building = false, onRemove, onSegmentClick, className, ...props })=>{
     const interactive = !building;
     const hasError = !!error;
-    const chipRef = useRef(null);
+    const internalRef = useRef(null);
     const editing = useEditingContext();
     const isEditingThisChip = null != editing && null != chipId && editing.editingChipId === chipId;
     const activeSegment = isEditingThisChip ? editing.editingSegment : null;
@@ -18,7 +17,7 @@ const FilterInputChip = ({ chipId, attribute, operator, value, error = false, va
         if (!onSegmentClick) return;
         if (activeSegment === segment) return;
         e.stopPropagation();
-        const anchorEl = 'attribute' === segment ? chipRef.current : e.currentTarget;
+        const anchorEl = 'attribute' === segment ? internalRef.current : e.currentTarget;
         if (!anchorEl) return;
         onSegmentClick(segment, anchorEl.getBoundingClientRect());
     }, [
@@ -32,8 +31,15 @@ const FilterInputChip = ({ chipId, attribute, operator, value, error = false, va
             onEditKeyDown: editing.onSegmentEditKeyDown,
             onEditBlur: editing.onSegmentEditBlur
         } : {};
+    const setRefs = useCallback((node)=>{
+        internalRef.current = node;
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        ref
+    ]);
     return /*#__PURE__*/ jsxs("div", {
-        ref: chipRef,
+        ref: setRefs,
         className: cn(chipVariants({
             error: hasError,
             interactive
@@ -49,21 +55,25 @@ const FilterInputChip = ({ chipId, attribute, operator, value, error = false, va
                 ...segmentEditProps('attribute'),
                 children: attribute
             }),
-            operator && /*#__PURE__*/ jsx(OperatorSegment, {
+            (operator || 'operator' === activeSegment) && /*#__PURE__*/ jsx(Segment, {
+                variant: "operator",
                 className: "shrink-0",
                 onClick: interactive ? (e)=>handleSegmentClick('operator', e) : void 0,
-                children: operator
+                ...segmentEditProps('operator'),
+                children: operator ?? ''
             }),
-            value && /*#__PURE__*/ jsx(ValueSegment, {
-                className: "min-w-0 max-w-[400px]",
+            (value || 'value' === activeSegment) && /*#__PURE__*/ jsx(Segment, {
+                variant: "value",
+                className: "shrink-0",
                 error: 'value' !== activeSegment && (true === error || 'value' === error),
                 valueParts: valueParts,
                 valueSeparator: valueSeparator,
                 errorValueIndices: errorValueIndices,
                 onClick: interactive ? (e)=>handleSegmentClick('value', e) : void 0,
                 ...segmentEditProps('value'),
-                children: value
+                children: value ?? ''
             }),
+            building && /*#__PURE__*/ jsx(ChipSearchInput, {}),
             onRemove && /*#__PURE__*/ jsx(FilterInputRemoveButton, {
                 error: hasError,
                 onRemove: onRemove

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

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes } from 'react';
+interface MultiValueSegmentProps extends HTMLAttributes<HTMLDivElement> {
+    valueParts: string[];
+    valueSeparator: string;
+    errorValueIndices: number[];
+}
+/** Value segment with per-part error highlighting for multi-value chips. */
+export declare const MultiValueSegment: FC<MultiValueSegmentProps>;
+export {};

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

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../utils/cn.js";
+import { segmentContainer, segmentTextVariants } from "./classes.js";
+const MultiValueSegment = ({ valueParts, valueSeparator, errorValueIndices, className, ...props })=>{
+    const isInteractive = !!props.onClick;
+    return /*#__PURE__*/ jsx("div", {
+        className: cn(segmentContainer, className),
+        "data-slot": "segment-value",
+        ...isInteractive && {
+            role: 'button',
+            'aria-label': 'Edit filter value'
+        },
+        ...props,
+        children: /*#__PURE__*/ jsx("p", {
+            className: segmentTextVariants({
+                variant: 'value'
+            }),
+            children: valueParts.map((part, idx)=>/*#__PURE__*/ jsxs("span", {
+                    className: errorValueIndices.includes(idx) ? segmentTextVariants({
+                        variant: 'value',
+                        error: true
+                    }) : void 0,
+                    children: [
+                        part,
+                        idx < valueParts.length - 1 && valueSeparator
+                    ]
+                }, idx))
+        })
+    });
+};
+MultiValueSegment.displayName = 'MultiValueSegment';
+export { MultiValueSegment };

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

@@ -1,6 +1,6 @@
 import type { FC, FocusEvent, HTMLAttributes, KeyboardEvent } from 'react';
 type SegmentVariant = 'attribute' | 'operator' | 'value';
-type SegmentProps = HTMLAttributes<HTMLDivElement> & {
+export type SegmentProps = HTMLAttributes<HTMLDivElement> & {
     variant: SegmentVariant;
     children: string;
     error?: boolean;
@@ -9,6 +9,12 @@ type SegmentProps = HTMLAttributes<HTMLDivElement> & {
     onEditChange?: (text: string) => void;
     onEditKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
     onEditBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /** Individual display parts for multi-value chips (value variant only) */
+    valueParts?: string[];
+    /** Separator between parts (default: ", ") */
+    valueSeparator?: string;
+    /** Indices of invalid values in valueParts */
+    errorValueIndices?: number[];
 };
 export declare const Segment: FC<SegmentProps>;
 export {};

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

@@ -1,16 +1,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
 import { segmentContainer, segmentTextVariants } from "./classes.js";
-const Segment = ({ variant, children, className, error, editing, editText, onEditChange, onEditKeyDown, onEditBlur, ...props })=>{
+import { CHAR_WIDTH_PX } from "./constants.js";
+import { MultiValueSegment } from "./MultiValueSegment.js";
+import { useSizerWidth } from "./model/useSizerWidth.js";
+const Segment = ({ variant, children, className, error, editing, editText, onEditChange, onEditKeyDown, onEditBlur, valueParts, valueSeparator = ', ', errorValueIndices, ...props })=>{
     const textRef = useRef(null);
     const inputRef = useRef(null);
     const sizerRef = useRef(null);
     const lastTextWidthRef = useRef(0);
-    const [inputWidth, setInputWidth] = useState(void 0);
     useEffect(()=>{
         if (editing) return;
-        const width = textRef.current?.getBoundingClientRect().width ?? 8 * children.length;
+        const width = textRef.current?.getBoundingClientRect().width ?? children.length * CHAR_WIDTH_PX;
         lastTextWidthRef.current = width;
     }, [
         editing,
@@ -33,15 +35,19 @@ const Segment = ({ variant, children, className, error, editing, editText, onEdi
     }, [
         editing
     ]);
-    useEffect(()=>{
-        if (!editing) return void setInputWidth(void 0);
-        const sizerWidth = sizerRef.current?.getBoundingClientRect().width ?? (editText?.length ?? 0) * 8;
-        setInputWidth(Math.max(20, lastTextWidthRef.current, sizerWidth));
-    }, [
-        editing,
-        editText
-    ]);
+    const inputWidth = useSizerWidth({
+        sizerRef,
+        text: editText ?? ''
+    });
     const isInteractive = !!props.onClick;
+    const hasMultiValueErrors = 'value' === variant && !!valueParts && !!errorValueIndices && errorValueIndices.length > 0 && !editing;
+    if (hasMultiValueErrors) return /*#__PURE__*/ jsx(MultiValueSegment, {
+        valueParts: valueParts,
+        valueSeparator: valueSeparator,
+        errorValueIndices: errorValueIndices,
+        className: className,
+        ...props
+    });
     return /*#__PURE__*/ jsx("div", {
         className: cn(segmentContainer, className),
         "data-slot": `segment-${variant}`,
@@ -63,9 +69,9 @@ const Segment = ({ variant, children, className, error, editing, editText, onEdi
                     className: cn(segmentTextVariants({
                         variant,
                         error
-                    }), 'bg-transparent border-none outline-none p-0 m-0'),
+                    }), 'bg-transparent outline-none p-0 m-0'),
                     style: {
-                        width: `${inputWidth ?? Math.max(20, lastTextWidthRef.current)}px`
+                        width: `${inputWidth}px`
                     }
                 }),
                 /*#__PURE__*/ jsx("span", {

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

@@ -4,7 +4,7 @@ export declare const chipVariants: (props?: ({
     interactive?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Segment container */
-export declare const segmentContainer = "flex flex-col justify-center overflow-hidden p-2 leading-none";
+export declare const segmentContainer = "flex flex-col justify-center overflow-hidden leading-none";
 /** Segment text styles by variant */
 export declare const segmentTextVariants: (props?: ({
     variant?: "operator" | "value" | "attribute" | null | undefined;

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

@@ -1,21 +1,28 @@
 import { cva } from "class-variance-authority";
-const chipVariants = cva('group/chip relative flex items-center justify-center pl-4 pr-0 py-0 border border-solid rounded-8', {
+const chipVariants = cva('h-22 group/chip relative flex items-center justify-center px-5 py-0 border border-solid rounded-8 gap-4', {
     variants: {
         error: {
             true: 'bg-bg-light-danger border-border-danger',
             false: 'bg-badge-badge-bg border-border-primary'
         },
         interactive: {
-            true: 'cursor-pointer px-4 h-24',
-            false: 'h-[22px]'
+            true: 'cursor-pointer',
+            false: ''
         }
     },
+    compoundVariants: [
+        {
+            interactive: false,
+            error: false,
+            className: 'border-border-strong-primary'
+        }
+    ],
     defaultVariants: {
         error: false,
         interactive: false
     }
 });
-const segmentContainer = 'flex flex-col justify-center overflow-hidden p-2 leading-none';
+const segmentContainer = 'flex flex-col justify-center overflow-hidden leading-none';
 const segmentTextVariants = cva('truncate text-sm', {
     variants: {
         variant: {
@@ -49,7 +56,7 @@ const segmentTextVariants = cva('truncate text-sm', {
         error: false
     }
 });
-const removeButtonVariants = cva('absolute -right-12 top-[-1px] bottom-[-1px] flex items-center justify-center p-0 cursor-pointer w-[18px] border border-solid border-l-0 rounded-r-8 opacity-0 group-hover/chip:opacity-100 focus:opacity-100 transition-opacity', {
+const removeButtonVariants = cva('absolute -right-[13px] top-[-1px] bottom-[-1px] flex items-center justify-center p-0 cursor-pointer w-[18px] border border-solid border-l-0 rounded-r-8 opacity-0 group-hover/chip:opacity-100 focus:opacity-100 transition-opacity', {
     variants: {
         error: {
             true: 'border-border-danger bg-bg-light-danger text-text-danger',

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

@@ -0,0 +1,6 @@
+/** Minimum input width in px */
+export declare const MIN_INPUT_WIDTH = 4;
+/** Extra pixels added to measured width to prevent text clipping */
+export declare const WIDTH_OFFSET = 1;
+/** Approximate width of a single character in px (text-sm fallback) */
+export declare const CHAR_WIDTH_PX = 8;

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

@@ -0,0 +1,4 @@
+const MIN_INPUT_WIDTH = 4;
+const WIDTH_OFFSET = 1;
+const CHAR_WIDTH_PX = 8;
+export { CHAR_WIDTH_PX, MIN_INPUT_WIDTH, WIDTH_OFFSET };

package/dist/components/FilterInput/FilterInputField/FilterInputChip/{EditingContext.d.ts → context/EditingContext.d.ts}

@@ -1,5 +1,5 @@
 import { type FC, type FocusEvent, type KeyboardEvent, type ReactNode } from 'react';
-import type { ChipSegment } from './FilterInputChip';
+import type { ChipSegment } from '../FilterInputChip';
 export interface EditingContextValue {
     editingChipId: string | null;
     editingSegment: ChipSegment | null;

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

@@ -1,5 +1,5 @@
 export { type ConnectorVariant, FilterInputConnectorChip, type FilterInputConnectorChipProps, } from '../FilterInputConnectorChip';
-export { type EditingContextValue, EditingProvider, useEditingContext } from './EditingContext';
+export { type EditingContextValue, EditingProvider, useEditingContext, } from './context/EditingContext';
 export { type ChipSegment, FilterInputChip, type FilterInputChipProps } from './FilterInputChip';
 export { FilterInputRemoveButton } from './FilterInputRemoveButton';
-export { Segment } from './Segment';
+export { Segment, type SegmentProps } from './Segment';

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

@@ -1,5 +1,5 @@
 import { FilterInputConnectorChip } from "../FilterInputConnectorChip/index.js";
-import { EditingProvider, useEditingContext } from "./EditingContext.js";
+import { EditingProvider, useEditingContext } from "./context/EditingContext.js";
 import { FilterInputChip } from "./FilterInputChip.js";
 import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
 import { Segment } from "./Segment.js";

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

@@ -0,0 +1,16 @@
+import type { RefObject } from 'react';
+interface UseSizerWidthOptions {
+    /** Ref to the hidden sizer span */
+    sizerRef: RefObject<HTMLSpanElement | null>;
+    /** Current text to measure */
+    text: string;
+    /** Minimum width floor (defaults to MIN_INPUT_WIDTH) */
+    minWidth?: number;
+}
+/**
+ * Measures input width from a hidden sizer span.
+ * Falls back to character count * CHAR_WIDTH_PX when the DOM element is unavailable.
+ * Returns the measured width + WIDTH_OFFSET to prevent text clipping.
+ */
+export declare const useSizerWidth: ({ sizerRef, text, minWidth, }: UseSizerWidthOptions) => number;
+export {};

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

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+import { CHAR_WIDTH_PX, MIN_INPUT_WIDTH, WIDTH_OFFSET } from "../constants.js";
+const useSizerWidth = ({ sizerRef, text, minWidth = MIN_INPUT_WIDTH })=>{
+    const [width, setWidth] = useState(minWidth);
+    useEffect(()=>{
+        const sizerWidth = sizerRef.current?.getBoundingClientRect().width ?? text.length * CHAR_WIDTH_PX;
+        setWidth(Math.max(minWidth, sizerWidth));
+    }, [
+        text,
+        minWidth
+    ]);
+    return width + WIDTH_OFFSET;
+};
+export { useSizerWidth };

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

@@ -6,8 +6,8 @@ import { ScrollArea, ScrollAreaScrollbar, ScrollAreaViewport } from "../../Scrol
 import { useFilterInputContext } from "../FilterInputContext/index.js";
 import { isMenuRelated } from "../lib/index.js";
 import { ChipsWithGaps, TrailingGap } from "./ChipsWithGaps.js";
-import { ACTIONS_PADDING, COLLAPSED_MAX_HEIGHT, buildingChipWrapperClass, filterInputContainerVariants, filterInputInnerVariants } from "./classes.js";
-import { EditingProvider } from "./FilterInputChip/EditingContext.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 { FilterInputFieldActions } from "./FilterInputFieldActions.js";
 import { FilterInputSearch } from "./FilterInputSearch.js";
@@ -104,21 +104,13 @@ const FilterInputField = ({ className, ...props })=>{
                                         hideTrailingGap: hideTrailingGap,
                                         ...chipsGapProps
                                     }),
-                                    buildingChipData ? /*#__PURE__*/ jsxs("div", {
+                                    buildingChipData ? /*#__PURE__*/ jsx(FilterInputChip, {
                                         ref: buildingChipRef,
-                                        className: buildingChipWrapperClass,
-                                        children: [
-                                            /*#__PURE__*/ jsx(FilterInputChip, {
-                                                building: true,
-                                                attribute: buildingChipData.attribute ?? '',
-                                                operator: buildingChipData.operator,
-                                                value: buildingChipData.value,
-                                                className: "border-none"
-                                            }),
-                                            /*#__PURE__*/ jsx(FilterInputSearch, {
-                                                hasContent: true
-                                            })
-                                        ]
+                                        building: true,
+                                        attribute: buildingChipData.attribute ?? '',
+                                        operator: buildingChipData.operator,
+                                        value: buildingChipData.value,
+                                        className: "mx-4"
                                     }) : /*#__PURE__*/ jsx(FilterInputSearch, {
                                         hasContent: hasContent
                                     }),

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

@@ -11,8 +11,6 @@ export declare const filterInputContainerVariants: (props?: ({
 export declare const filterInputInnerVariants: (props?: ({
     hasContent?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/** Wrapper that visually groups the building chip and the filter input */
-export declare const buildingChipWrapperClass = "flex items-center min-w-0 h-24 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg ml-8";
 /** Native input element inside the query bar */
 export declare const filterInputInputVariants: (props?: ({
     hasContent?: boolean | null | undefined;

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

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 const VISIBLE_ROWS = 3;
-const CHIP_ROW_HEIGHT = 24;
+const CHIP_ROW_HEIGHT = 22;
 const ROW_GAP = 4;
 const PADDING_Y = 16;
 const EDGE_GAP = 8;
@@ -38,11 +38,10 @@ const filterInputInnerVariants = cva('flex min-h-[40px] w-full cursor-text flex-
         hasContent: false
     }
 });
-const buildingChipWrapperClass = 'flex items-center min-w-0 h-24 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg ml-8';
 const filterInputInputVariants = cva('h-24 border-none bg-transparent p-0 text-sm shadow-none outline-none ring-0', {
     variants: {
         hasContent: {
-            true: 'mx-4',
+            true: 'ml-4',
             false: 'flex-1'
         }
     },
@@ -50,4 +49,4 @@ const filterInputInputVariants = cva('h-24 border-none bg-transparent p-0 text-s
         hasContent: false
     }
 });
-export { ACTIONS_PADDING, COLLAPSED_MAX_HEIGHT, buildingChipWrapperClass, filterInputContainerVariants, filterInputInnerVariants, filterInputInputVariants };
+export { ACTIONS_PADDING, COLLAPSED_MAX_HEIGHT, filterInputContainerVariants, filterInputInnerVariants, filterInputInputVariants };

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

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getFieldValues, isBetweenOperator, isMultiSelectOperator } from "../lib/index.js";
+import { 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";
@@ -7,19 +7,13 @@ 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 fieldFilterText = 'attribute' === editingSegment ? segmentMenuFilterText : inputText;
-    const operatorFilterText = editingSegment ? '' : inputText;
+    const operatorFilterText = 'operator' === editingSegment ? segmentMenuFilterText : inputText;
     const selectedFieldValues = selectedField ? getFieldValues(selectedField) : [];
-    const valueFilterText = (()=>{
-        if ('value' !== editingSegment) return inputText;
-        if (!isMultiSelectOperator(selectedOperator)) return segmentMenuFilterText;
-        const lastToken = segmentMenuFilterText.split(',').pop()?.trim() ?? '';
-        if (!lastToken) return '';
-        if (selectedFieldValues.length > 0) {
-            const isKnownValue = selectedFieldValues.some((v)=>v.label.toLowerCase() === lastToken.toLowerCase() || String(v.value).toLowerCase() === lastToken.toLowerCase());
-            if (isKnownValue) return '';
-        }
-        return lastToken;
-    })();
+    const valueFilterText = getValueFilterText(editingSegment, inputText, segmentMenuFilterText, selectedOperator, selectedFieldValues);
+    const showOperatorMenu = !!selectedField;
+    const showValueMenu = !!selectedField && !!selectedOperator;
+    const isDateField = selectedField?.type === 'date';
+    const hasValueOptions = selectedFieldValues.length > 0;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(FilterInputFieldMenu, {
@@ -27,29 +21,29 @@ const FilterInputMenu = ({ fields, autocomplete })=>{
                 filterText: fieldFilterText,
                 open: 'field' === menuState,
                 onSelect: handleFieldSelect,
-                onOpenChange: ()=>handleMenuClose(),
+                onOpenChange: handleMenuClose,
                 onEscape: handleMenuDiscard,
                 positioning: menuPositioning,
                 inputRef: inputRef,
                 menuRef: menuRef
             }),
-            selectedField && /*#__PURE__*/ jsx(FilterInputOperatorMenu, {
+            showOperatorMenu && /*#__PURE__*/ jsx(FilterInputOperatorMenu, {
                 fieldType: selectedField.type,
                 operators: selectedField.operators,
                 open: 'operator' === menuState,
                 onSelect: handleOperatorSelect,
-                onOpenChange: ()=>handleMenuClose(),
+                onOpenChange: handleMenuClose,
                 onEscape: handleMenuDiscard,
                 positioning: menuPositioning,
                 inputRef: inputRef,
                 menuRef: menuRef,
                 filterText: operatorFilterText
             }),
-            selectedField && selectedOperator && ('date' === selectedField.type ? /*#__PURE__*/ jsx(FilterInputDateValueMenu, {
+            showValueMenu && (isDateField ? /*#__PURE__*/ jsx(FilterInputDateValueMenu, {
                 open: 'value' === menuState,
                 onSelect: handleValueSelect,
                 onRangeSelect: handleRangeSelect,
-                onOpenChange: ()=>handleMenuClose(),
+                onOpenChange: handleMenuClose,
                 onEscape: handleMenuDiscard,
                 positioning: menuPositioning,
                 range: isBetweenOperator(selectedOperator),
@@ -57,12 +51,12 @@ const FilterInputMenu = ({ fields, autocomplete })=>{
                 initialValue: null != editingSingleValue ? String(editingSingleValue) : void 0,
                 initialRangeValue: editingDateRange,
                 filterText: valueFilterText
-            }) : selectedFieldValues.length > 0 && /*#__PURE__*/ jsx(FilterInputValueMenu, {
+            }) : hasValueOptions && /*#__PURE__*/ jsx(FilterInputValueMenu, {
                 values: selectedFieldValues,
                 open: 'value' === menuState,
                 onSelect: handleValueSelect,
                 onCommit: handleMultiCommit,
-                onOpenChange: ()=>handleMenuClose(),
+                onOpenChange: handleMenuClose,
                 onEscape: handleMenuDiscard,
                 multiSelect: isMultiSelectOperator(selectedOperator),
                 initialValues: editingMultiValues,

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

@@ -10,15 +10,17 @@ interface UseChipEditingOptions {
     setSelectedField: (field: FieldMetadata | null) => void;
     setSelectedOperator: (op: FilterOperator | null) => void;
     setMenuState: (state: MenuState) => void;
+    upsertCondition: (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null) => void;
 }
 /**
  * Manages editing of existing filter chips.
  * Handles chip click → open appropriate menu based on segment,
  * then advances through the full flow (field → operator → value).
  */
-export declare const useChipEditing: ({ conditions, chips, fields, containerRef, setMenuOffset, setSelectedField, setSelectedOperator, setMenuState, }: UseChipEditingOptions) => {
+export declare const useChipEditing: ({ conditions, chips, fields, containerRef, setMenuOffset, setSelectedField, setSelectedOperator, setMenuState, upsertCondition, }: UseChipEditingOptions) => {
     editingChipId: string | null;
     editingSegment: ChipSegment | null;
+    setEditingSegment: import("react").Dispatch<import("react").SetStateAction<ChipSegment | null>>;
     segmentFilterText: string;
     segmentMenuFilterText: string;
     setSegmentFilterText: (text: string) => void;