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

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

@@ -22,10 +22,10 @@ export interface FilterInputContextValue {
     onInputKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
     onInputClick: () => void;
     onGapClick: (conditionIndex: number, afterConnector: boolean) => void;
-    onChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    onChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => 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;
+    onBuildingChipClick: (segment: ChipSegment, anchorEl: HTMLElement) => void;
     /** Switch the inline-edit to a different segment within the chip currently
      *  being edited — used by Backspace-on-empty to walk back through segments. */
     onSwitchEditSegment: (targetSegment: ChipSegment) => boolean;

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

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

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

@@ -1,6 +1,5 @@
 import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/index.js";
-import { isValidFieldValue } from "../hooks/useFilterInputAutocomplete/valueCommitHelpers.js";
-import { getFieldValues, hasStaticAllowlist } from "../lib/index.js";
+import { getFieldValues, hasStaticAllowlist, isValidFieldValue } 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, anchorRect: DOMRect) => void;
+    onChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => 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, anchorRect)=>onChipClick(chip.id, segment, anchorRect)
+                onSegmentClick: chip.disabled ? void 0 : (segment, anchorEl)=>onChipClick(chip.id, segment, anchorEl)
             })
         }, 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, anchorRect: DOMRect) => void;
+    onSegmentClick?: (segment: ChipSegment, anchorEl: HTMLElement) => 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 = segment === SEGMENT_VARIANT.attribute ? internalRef.current : e.currentTarget;
+        const anchorEl = internalRef.current;
         if (!anchorEl) return;
-        onSegmentClick(segment, anchorEl.getBoundingClientRect());
+        onSegmentClick(segment, anchorEl);
     }, [
         onSegmentClick,
         activeSegment

package/dist/components/FilterInput/FilterInputField/hooks/useSegmentEditKeyboard.d.ts

@@ -24,7 +24,8 @@ interface UseSegmentEditKeyboardOptions {
  *   attribute) and, if the attribute is empty with no operator/value left,
  *   removes the chip.
  * - Enter commits the typed text via the segment-specific commit callback.
- * - ArrowDown moves focus into the open menu.
+ * - ArrowDown is intercepted (preventDefault) but focus stays on the input —
+ *   highlight navigation runs through useKeyboardNav's window-capture listener.
  *
  * Returns the keydown + blur handlers fed to `EditingProvider` so every
  * segment input dispatches through the same logic.

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

@@ -141,7 +141,11 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
                 return;
             }
             const isSegmentInput = e.target?.closest?.('[data-slot^="segment-"]');
-            if (isSegmentInput && 'Escape' !== e.key && 'ArrowDown' !== e.key && 'ArrowUp' !== e.key) return;
+            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;
+            }
             const { items: list, onSelect: select, onClose: close, onArrowRight: arrowRight } = stateRef.current;
             if (0 === list.length) return;
             switch(e.key){
@@ -154,7 +158,6 @@ 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/{deriveAutocompleteValues.d.ts → lib/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;

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

@@ -1,4 +1,4 @@
-import { NO_VALUE_PLACEHOLDER, chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator, isNoValueOperator } from "../../lib/index.js";
+import { NO_VALUE_PLACEHOLDER, chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator, isNoValueOperator } from "../../../lib/index.js";
 const getEditingCondition = (editingChipId, conditions)=>{
     if (!editingChipId) return null;
     const idx = chipIdToConditionIndex(editingChipId);

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

@@ -1,5 +1,5 @@
-import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
-import type { FieldMetadata, FilterOperator } from '../../types';
+import { type ChipSegment } from '../../../FilterInputField/FilterInputChip';
+import type { FieldMetadata, FilterOperator } from '../../../types';
 /**
  * Initial text shown in a building chip's inline-edit input for the given
  * segment. Mirrors what the chip is currently displaying so the user can

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/{getInitialSegmentText.js → lib/getInitialSegmentText.js}

@@ -1,5 +1,5 @@
-import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { getOperatorLabel } from "../../lib/index.js";
+import { SEGMENT_VARIANT } from "../../../FilterInputField/FilterInputChip/index.js";
+import { getOperatorLabel } from "../../../lib/index.js";
 const getInitialSegmentText = (segment, selectedField, selectedOperator, buildingMultiValue)=>{
     if (segment === SEGMENT_VARIANT.attribute) return selectedField.label;
     if (segment === SEGMENT_VARIANT.operator) return selectedOperator ? getOperatorLabel(selectedOperator, selectedField.type) : '';

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

@@ -0,0 +1,3 @@
+export { deriveAutocompleteValues } from './deriveAutocompleteValues';
+export { getInitialSegmentText } from './getInitialSegmentText';
+export { displayDateToIso, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue, } from './valueResolution';

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

@@ -0,0 +1,4 @@
+import { deriveAutocompleteValues } from "./deriveAutocompleteValues.js";
+import { getInitialSegmentText } from "./getInitialSegmentText.js";
+import { displayDateToIso, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue } from "./valueResolution.js";
+export { deriveAutocompleteValues, displayDateToIso, getInitialSegmentText, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue };

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

@@ -1,10 +1,4 @@
-import type { Condition, FieldMetadata, FieldValueOption } from '../../types';
-/** Check if a single value matches any option in the field's values list */
-export declare const isValidFieldValue: (fieldValues: FieldValueOption[], v: string | number | boolean) => boolean;
-/** Return indices of values that don't match any field option. Empty array = all valid. */
-export declare const getInvalidValueIndices: (field: FieldMetadata, values: Array<string | number | boolean>) => number[];
-/** Check if condition value(s) are valid for the given field. Returns true if error. */
-export declare const validateValueForField: (field: FieldMetadata, value: Condition["value"]) => boolean;
+import type { Condition, FieldMetadata } from '../../../types';
 /** Resolve a text input to the actual field value (e.g. label "Active" → value "active") */
 export declare const resolveFieldValue: (field: FieldMetadata, text: string) => string | number | boolean;
 /** Resolve and validate a single-select value from text */

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/{valueCommitHelpers.js → lib/valueResolution.js}

@@ -1,27 +1,5 @@
-import { MIN_DATE_STRING_LENGTH } from "../../FilterInputMenu/FilterInputDateValueMenu/constants.js";
-import { chipIdToConditionIndex, getFieldValues, hasStaticAllowlist, isDatePreset } from "../../lib/index.js";
-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 [];
-    return values.reduce((acc, v, idx)=>{
-        if (!isValidFieldValue(fv, v)) acc.push(idx);
-        return acc;
-    }, []);
-};
-const validateValueForField = (field, value)=>{
-    if (null == value) return false;
-    const values = Array.isArray(value) ? value : [
-        value
-    ];
-    return getInvalidValueIndices(field, values).length > 0;
-};
+import { MIN_DATE_STRING_LENGTH } from "../../../FilterInputMenu/FilterInputDateValueMenu/constants.js";
+import { chipIdToConditionIndex, findMatchingFieldValue, getFieldValues, getInvalidValueIndices, hasStaticAllowlist, isDatePreset } from "../../../lib/index.js";
 const resolveFieldValue = (field, text)=>{
     const match = findMatchingFieldValue(getFieldValues(field), text);
     return match ? match.value : text;
@@ -90,4 +68,4 @@ const resolveDateValue = (trimmed, editingChipId, conditions)=>{
         dateOrigin
     };
 };
-export { displayDateToIso, getInvalidValueIndices, isValidFieldValue, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue, validateValueForField };
+export { displayDateToIso, resolveDateRangeValue, resolveDateValue, resolveFieldValue, resolveMultiValues, resolveSingleValue };

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

@@ -0,0 +1,41 @@
+import type { Condition, FieldMetadata, FilterOperator, MenuState } from '../../types';
+interface UseAutocompleteStateOptions {
+    conditions: Condition[];
+}
+/**
+ * Owns the entire useState / useRef surface of the autocomplete hook. Splitting
+ * this out of the orchestrator keeps `useFilterInputAutocomplete` focused on
+ * wiring sub-hooks together rather than reading 30 lines of declarations.
+ *
+ * Each ref intentionally mirrors a piece of state — sub-hooks read the ref
+ * synchronously to avoid re-creating callbacks on every keystroke that mutates
+ * conditions / insertIndex / etc.
+ */
+export declare const useAutocompleteState: ({ conditions }: UseAutocompleteStateOptions) => {
+    inputText: string;
+    setInputText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    menuState: MenuState;
+    setMenuState: import("react").Dispatch<import("react").SetStateAction<MenuState>>;
+    selectedField: FieldMetadata | null;
+    setSelectedField: import("react").Dispatch<import("react").SetStateAction<FieldMetadata | null>>;
+    selectedOperator: FilterOperator | null;
+    setSelectedOperator: import("react").Dispatch<import("react").SetStateAction<FilterOperator | null>>;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    buildingMultiValue: string | undefined;
+    setBuildingMultiValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    insertIndex: number | null;
+    setInsertIndex: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    insertAfterConnector: boolean;
+    setInsertAfterConnector: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    effectiveInsertIndex: number;
+    effectiveInsertIndexRef: import("react").RefObject<number>;
+    conditionsRef: import("react").RefObject<Condition[]>;
+    conditionsLengthRef: import("react").RefObject<number>;
+    blurCommitRef: import("react").RefObject<(() => boolean) | null>;
+    segmentAttributeInputRef: import("react").RefObject<HTMLInputElement | null>;
+    segmentOperatorInputRef: import("react").RefObject<HTMLInputElement | null>;
+    segmentValueInputRef: import("react").RefObject<HTMLInputElement | null>;
+    commitBuildingOnBlurRef: import("react").RefObject<() => boolean>;
+};
+export {};

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

@@ -0,0 +1,51 @@
+import { useRef, useState } from "react";
+const useAutocompleteState = ({ conditions })=>{
+    const [inputText, setInputText] = useState('');
+    const [menuState, setMenuState] = useState('closed');
+    const [selectedField, setSelectedField] = useState(null);
+    const [selectedOperator, setSelectedOperator] = useState(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [buildingMultiValue, setBuildingMultiValue] = useState(void 0);
+    const [insertIndex, setInsertIndex] = useState(null);
+    const [insertAfterConnector, setInsertAfterConnector] = useState(false);
+    const effectiveInsertIndex = insertIndex ?? conditions.length;
+    const effectiveInsertIndexRef = useRef(effectiveInsertIndex);
+    effectiveInsertIndexRef.current = effectiveInsertIndex;
+    const conditionsRef = useRef(conditions);
+    conditionsRef.current = conditions;
+    const conditionsLengthRef = useRef(conditions.length);
+    conditionsLengthRef.current = conditions.length;
+    const blurCommitRef = useRef(null);
+    const segmentAttributeInputRef = useRef(null);
+    const segmentOperatorInputRef = useRef(null);
+    const segmentValueInputRef = useRef(null);
+    const commitBuildingOnBlurRef = useRef(()=>false);
+    return {
+        inputText,
+        setInputText,
+        menuState,
+        setMenuState,
+        selectedField,
+        setSelectedField,
+        selectedOperator,
+        setSelectedOperator,
+        isFocused,
+        setIsFocused,
+        buildingMultiValue,
+        setBuildingMultiValue,
+        insertIndex,
+        setInsertIndex,
+        insertAfterConnector,
+        setInsertAfterConnector,
+        effectiveInsertIndex,
+        effectiveInsertIndexRef,
+        conditionsRef,
+        conditionsLengthRef,
+        blurCommitRef,
+        segmentAttributeInputRef,
+        segmentOperatorInputRef,
+        segmentValueInputRef,
+        commitBuildingOnBlurRef
+    };
+};
+export { useAutocompleteState };

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

@@ -5,7 +5,7 @@ interface UseChipActionsDeps {
     inputRef: RefObject<HTMLInputElement | null>;
     removeCondition: (chipId: string) => void;
     clearAll: () => void;
-    resetMenuOffset: () => void;
+    resetMenuAnchor: () => void;
     resetState: () => void;
     setInsertIndex: Dispatch<SetStateAction<number | null>>;
     setInsertAfterConnector: Dispatch<SetStateAction<boolean>>;
@@ -18,7 +18,7 @@ interface UseChipActionsDeps {
  * - clicking a gap between chips to insert a new condition there
  * - closing the menu (used by external consumers like the connector chip)
  */
-export declare const useChipActions: ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuOffset, resetState, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseChipActionsDeps) => {
+export declare const useChipActions: ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuAnchor, resetState, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseChipActionsDeps) => {
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;
     handleGapClick: (conditionIndex: number, afterConnector: boolean) => void;

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

@@ -1,17 +1,17 @@
 import { useCallback } from "react";
 import { flushSync } from "react-dom";
 import { chipIdToConditionIndex } from "../../lib/index.js";
-const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuOffset, resetState, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
+const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, clearAll, resetMenuAnchor, resetState, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
     const handleChipRemove = useCallback((chipId)=>{
         const chipCondIdx = chipIdToConditionIndex(chipId);
         if (null !== chipCondIdx && chipCondIdx < effectiveInsertIndexRef.current) setInsertIndex((prev)=>null != prev ? prev - 1 : prev);
         removeCondition(chipId);
-        resetMenuOffset();
+        resetMenuAnchor();
         setMenuState('closed');
         inputRef.current?.focus();
     }, [
         removeCondition,
-        resetMenuOffset,
+        resetMenuAnchor,
         inputRef,
         effectiveInsertIndexRef,
         setInsertIndex,
@@ -29,14 +29,14 @@ const useChipActions = ({ effectiveInsertIndexRef, inputRef, removeCondition, cl
         flushSync(()=>{
             setInsertIndex(conditionIndex);
             setInsertAfterConnector(afterConnector);
-            resetMenuOffset();
+            resetMenuAnchor();
             setMenuState('closed');
         });
         setMenuState('field');
         inputRef.current?.focus();
     }, [
         resetState,
-        resetMenuOffset,
+        resetMenuAnchor,
         inputRef,
         setInsertIndex,
         setInsertAfterConnector,

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

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { SEGMENT_TO_MENU, chipIdToConditionIndex } from "../../lib/index.js";
-import { getInitialSegmentText } from "./getInitialSegmentText.js";
+import { getInitialSegmentText } from "./lib/index.js";
 const useChipCascade = ({ editing, chips, fields, conditionsRef, effectiveInsertIndexRef, selectedField, selectedOperator, buildingMultiValue, upsertCondition, removeCondition, resetState, setInputText, setMenuState, setSelectedOperator, setBuildingMultiValue, setInsertIndex })=>{
     const switchEditSegment = useCallback((targetSegment)=>{
         const sourceSegment = editing.editingSegment;

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

@@ -1,12 +1,10 @@
-import type { RefObject } from 'react';
 import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
 import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
 interface UseChipEditingOptions {
     conditions: Condition[];
     chips: FilterInputChipData[];
     fields: FieldMetadata[];
-    containerRef: RefObject<HTMLElement | null>;
-    setMenuOffset: (offset: number) => void;
+    setMenuAnchor: (el: HTMLElement | null) => void;
     setSelectedField: (field: FieldMetadata | null) => void;
     setSelectedOperator: (op: FilterOperator | null) => void;
     setMenuState: (state: MenuState) => void;
@@ -17,7 +15,7 @@ interface UseChipEditingOptions {
  * 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, upsertCondition, }: UseChipEditingOptions) => {
+export declare const useChipEditing: ({ conditions, chips, fields, setMenuAnchor, setSelectedField, setSelectedOperator, setMenuState, upsertCondition, }: UseChipEditingOptions) => {
     editingChipId: string | null;
     editingSegment: import("../../FilterInputField/FilterInputChip").SegmentVariant | null;
     setEditingSegment: import("react").Dispatch<import("react").SetStateAction<import("../../FilterInputField/FilterInputChip").SegmentVariant | null>>;
@@ -25,7 +23,7 @@ export declare const useChipEditing: ({ conditions, chips, fields, containerRef,
     segmentMenuFilterText: string;
     setSegmentFilterText: (text: string) => void;
     resetSegmentTyping: () => void;
-    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
+    handleChipClick: (chipId: string, segment: ChipSegment, anchorEl: HTMLElement) => void;
     startBuildingEdit: (segment: ChipSegment, currentText: string) => void;
     switchEditSegment: (segment: ChipSegment, currentText: string) => void;
     clearEditing: () => void;

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

@@ -12,7 +12,7 @@ const getFirstIncompleteSegment = (condition, fields)=>{
     if (null === condition.value || '' === condition.value || condition.error === SEGMENT_VARIANT.value) return SEGMENT_VARIANT.value;
     return null;
 };
-const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset, setSelectedField, setSelectedOperator, setMenuState, upsertCondition })=>{
+const useChipEditing = ({ conditions, chips, fields, setMenuAnchor, setSelectedField, setSelectedOperator, setMenuState, upsertCondition })=>{
     const [editingChipId, setEditingChipId] = useState(null);
     const [editingSegment, setEditingSegment] = useState(null);
     const [segmentFilterText, setSegmentFilterText] = useState('');
@@ -23,7 +23,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
     chipsRef.current = chips;
     const fieldsRef = useRef(fields);
     fieldsRef.current = fields;
-    const handleChipClick = useCallback((chipId, segment, anchorRect)=>{
+    const handleChipClick = useCallback((chipId, segment, anchorEl)=>{
         const condition = getConditionByChipId(chipId, conditionsRef.current);
         if (!condition) return;
         const field = fieldsRef.current.find((f)=>f.name === condition.field);
@@ -34,8 +34,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         const targetSegment = incompleteSegment ?? (isPlaceholderValueClick ? SEGMENT_VARIANT.operator : segment);
         if (!field && targetSegment !== SEGMENT_VARIANT.attribute) return;
         if (incompleteSegment && field) upsertCondition(field, condition.operator, condition.value, chipId);
-        const containerRect = containerRef.current?.getBoundingClientRect();
-        setMenuOffset(containerRect ? anchorRect.left - containerRect.left : 0);
+        setMenuAnchor(anchorEl);
         setEditingChipId(chipId);
         setSelectedField(field ?? null);
         const rawOperator = targetSegment === SEGMENT_VARIANT.value || targetSegment === SEGMENT_VARIANT.operator ? getOperatorFromLabel(chip.operator || '', field?.type ?? 'string') ?? condition.operator : null;
@@ -50,8 +49,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         setUserHasTyped(false);
         setMenuState(SEGMENT_TO_MENU[targetSegment]);
     }, [
-        containerRef,
-        setMenuOffset,
+        setMenuAnchor,
         setSelectedField,
         setSelectedOperator,
         setMenuState,

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

@@ -1,6 +1,5 @@
 import type { RefObject } from 'react';
-import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
-import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
+import type { Condition, FieldMetadata, FilterInputChipData, UpsertCondition } from '../../types';
 interface UseFilterInputAutocompleteOptions {
     fields: FieldMetadata[];
     conditions: Condition[];
@@ -16,9 +15,9 @@ interface UseFilterInputAutocompleteOptions {
 }
 export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue, containerRef, buildingChipRef, inputRef, }: UseFilterInputAutocompleteOptions) => {
     inputText: string;
-    menuState: MenuState;
+    menuState: import("../../types").MenuState;
     selectedField: FieldMetadata | null;
-    selectedOperator: FilterOperator | null;
+    selectedOperator: import("../..").FilterOperator | null;
     isBuilding: boolean;
     buildingChipData: import("../../FilterInputContext").BuildingChipData | null;
     menuPositioning: {
@@ -41,7 +40,7 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     inputRef: RefObject<HTMLInputElement | null>;
     handleInputChange: (e: import("react").ChangeEvent<HTMLInputElement>) => void;
     handleFieldSelect: (field: FieldMetadata) => void;
-    handleOperatorSelect: (operator: FilterOperator) => void;
+    handleOperatorSelect: (operator: import("../..").FilterOperator) => void;
     handleValueSelect: (val: string | number | boolean) => void;
     handleMultiCommit: (values: Array<string | number | boolean>) => void;
     handleBuildingValueChange: (preview: string | undefined) => void;
@@ -52,9 +51,9 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
      *  the conditions array is replaced and any in-progress building must be
      *  scrapped, regardless of inline-edit mode. */
     resetAutocompleteState: (continueBuilding?: boolean) => void;
-    handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
-    handleBuildingChipClick: (segment: ChipSegment, anchorRect: DOMRect) => void;
-    switchEditSegment: (targetSegment: ChipSegment) => boolean;
+    handleChipClick: (chipId: string, segment: import("../../FilterInputField").ChipSegment, anchorEl: HTMLElement) => void;
+    handleBuildingChipClick: (segment: import("../../FilterInputField").ChipSegment, anchorEl: HTMLElement) => void;
+    switchEditSegment: (targetSegment: import("../../FilterInputField").ChipSegment) => boolean;
     removeEditingChip: () => void;
     handleConnectorChange: (connectorId: string, value: "and" | "or") => void;
     handleChipRemove: (chipId: string) => void;