@wallarm-org/design-system 0.29.2-rc-feature-AS-882.1 → 0.29.2

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-import type { ChipErrorSegment, FieldMetadata, FilterOperator } from '../../types';
+import type { FieldMetadata, FilterOperator, UpsertCondition } from '../../types';
 interface UseBlurCommitDeps {
     selectedField: FieldMetadata | null;
     selectedOperator: FilterOperator | null;
@@ -7,7 +7,7 @@ interface UseBlurCommitDeps {
     editingChipId: string | null;
     effectiveInsertIndexRef: RefObject<number>;
     handleCustomValueCommit: (text: string) => void;
-    upsertCondition: (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: 'relative' | 'absolute') => void;
+    upsertCondition: UpsertCondition;
     resetState: () => void;
     /**
      * Indirection ref consumed by useMenuFlow to break the circular dependency

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

@@ -6,22 +6,29 @@ const useBlurCommit = ({ selectedField, selectedOperator, inputText, editingChip
     selectedOperatorRef.current = selectedOperator;
     const inputTextRef = useRef(inputText);
     inputTextRef.current = inputText;
+    const committingRef = useRef(false);
     const commitBuildingOnBlur = useCallback(()=>{
+        if (committingRef.current) return false;
         const field = selectedFieldRef.current;
         const operator = selectedOperatorRef.current;
         const text = inputTextRef.current.trim();
         if (!field) return false;
         if (editingChipId) return false;
-        selectedFieldRef.current = null;
-        selectedOperatorRef.current = null;
-        inputTextRef.current = '';
-        if (operator && text) {
-            handleCustomValueCommit(text);
+        committingRef.current = true;
+        try {
+            selectedFieldRef.current = null;
+            selectedOperatorRef.current = null;
+            inputTextRef.current = '';
+            if (operator && text) {
+                handleCustomValueCommit(text);
+                return true;
+            }
+            upsertCondition(field, operator ?? void 0, null, void 0, effectiveInsertIndexRef.current, true);
+            resetState();
             return true;
+        } finally{
+            committingRef.current = false;
         }
-        upsertCondition(field, operator ?? void 0, null, void 0, effectiveInsertIndexRef.current, true);
-        resetState();
-        return true;
     }, [
         editingChipId,
         handleCustomValueCommit,

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

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
-import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState } from '../../types';
+import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
 interface UseChipEditingOptions {
     conditions: Condition[];
     chips: FilterInputChipData[];
@@ -10,7 +10,7 @@ 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;
+    upsertCondition: UpsertCondition;
 }
 /**
  * Manages editing of existing filter chips.

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

@@ -1,10 +1,10 @@
 import type { RefObject } from 'react';
-import type { ChipErrorSegment, Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState } from '../../types';
+import type { Condition, FieldMetadata, FilterInputChipData, FilterOperator, MenuState, UpsertCondition } from '../../types';
 interface UseFilterInputAutocompleteOptions {
     fields: FieldMetadata[];
     conditions: Condition[];
     chips: FilterInputChipData[];
-    upsertCondition: (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: 'relative' | 'absolute') => void;
+    upsertCondition: UpsertCondition;
     removeCondition: (chipId: string) => void;
     removeConditionAtIndex: (index: number) => void;
     clearAll: () => void;

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

@@ -58,7 +58,12 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
                 const active = document.activeElement;
                 if (active && !container.contains(active) && !isMenuRelated(active)) return;
                 if (editingSegment) {
-                    const segmentInput = editingSegment === SEGMENT_VARIANT.attribute ? segmentAttributeInputRef.current : editingSegment === SEGMENT_VARIANT.operator ? segmentOperatorInputRef.current : editingSegment === SEGMENT_VARIANT.value ? segmentValueInputRef.current : null;
+                    const segmentInputRefs = {
+                        [SEGMENT_VARIANT.attribute]: segmentAttributeInputRef,
+                        [SEGMENT_VARIANT.operator]: segmentOperatorInputRef,
+                        [SEGMENT_VARIANT.value]: segmentValueInputRef
+                    };
+                    const segmentInput = segmentInputRefs[editingSegment]?.current ?? null;
                     if (segmentInput && document.activeElement !== segmentInput) {
                         segmentInput.focus();
                         segmentInput.select();

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

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import { type ChipSegment } from '../../FilterInputField/FilterInputChip';
-import type { ChipErrorSegment, Condition, FieldMetadata, FilterOperator, MenuState } from '../../types';
+import type { Condition, FieldMetadata, FilterOperator, MenuState, UpsertCondition } from '../../types';
 interface MenuFlowDeps {
     editing: {
         editingChipId: string | null;
@@ -14,7 +14,7 @@ interface MenuFlowDeps {
     fields: FieldMetadata[];
     inputRef: RefObject<HTMLInputElement | null>;
     insertIndex: number;
-    upsertCondition: (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: 'relative' | 'absolute') => void;
+    upsertCondition: UpsertCondition;
     conditions: Condition[];
     resetState: (continueBuilding?: boolean) => void;
     /** Try to commit the building chip on menu close. Returns true if committed. */

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

@@ -21,11 +21,22 @@ interface UseResetStateDeps {
 /**
  * Resets all autocomplete state and conditionally returns focus to the main input.
  *
- * Focus restoration policy: only refocus when activeElement still "belongs" to us
- * — inside container, inside a FilterInput-owned menu, or `document.body`. The
- * body case here means activeElement just dropped because a chip/menu was removed
- * on re-render — keep focus in the input. Contrast with useFocusManagement's rAF
- * guard, which treats body-focus as outside. AS-882.
+ * ── Body-focus policy (READ THIS) ─────────────────────────────────────────────
+ * `document.activeElement === document.body` is treated **as "stayed inside"** here
+ * — i.e. we DO refocus the main input. The reasoning: state mutations in
+ * `doReset()` (e.g. `editing.clearEditing()`) can synchronously unmount the
+ * element that previously had focus (a chip's inline input, a menu item), and
+ * the browser drops focus to body in that case. We want to honor "user is still
+ * working in the FilterInput" intent and put the caret back in the input.
+ *
+ * The opposite policy lives in `useFocusManagement.ts`'s rAF effect: there,
+ * body-focus means "user clicked outside" (e.g. tenant switcher) and we MUST
+ * NOT recapture. The two policies coexist because the triggers are different
+ * (state-driven re-render vs. genuine outside click).
+ *
+ * If you find yourself unifying these — make sure the "DOM dropped focus on
+ * re-render" case still refocuses, otherwise resetState during commit chains
+ * breaks. AS-882.
  */
 export declare const useResetState: ({ editing, dateRange, containerRef, inputRef, resetMenuOffset, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInsertIndex, setInsertAfterConnector, setMenuState, }: UseResetStateDeps) => (continueBuilding?: boolean) => void;
 export {};

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

@@ -1,7 +1,8 @@
 import { useCallback } from "react";
 import { flushSync } from "react-dom";
 import { isMenuRelated } from "../../lib/index.js";
-const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuOffset, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInsertIndex, setInsertAfterConnector, setMenuState })=>useCallback((continueBuilding = false)=>{
+const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuOffset, setInputText, setSelectedField, setSelectedOperator, setBuildingMultiValue, setInsertIndex, setInsertAfterConnector, setMenuState })=>{
+    const resetState = useCallback((continueBuilding = false)=>{
         const doReset = ()=>{
             setInputText('');
             setSelectedField(null);
@@ -35,4 +36,6 @@ const useResetState = ({ editing, dateRange, containerRef, inputRef, resetMenuOf
         setInsertAfterConnector,
         setMenuState
     ]);
+    return resetState;
+};
 export { useResetState };

package/dist/components/FilterInput/hooks/useFilterInputExpression/buildChips.js

@@ -1,5 +1,5 @@
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
-import { getDateDisplayLabel, getOperatorLabel } from "../../lib/index.js";
+import { findOptionByValue, getDateDisplayLabel, getOperatorLabel } from "../../lib/index.js";
 import { getInvalidValueIndices } from "../useFilterInputAutocomplete/valueCommitHelpers.js";
 const INVALID_DATE = 'Invalid Date';
 const DATE_RANGE_SEPARATOR = ' – ';
@@ -25,9 +25,7 @@ const makeEmptyChip = (i, error)=>({
     });
 const resolveDisplayValue = (condition, field)=>{
     const raw = String(condition.value ?? '');
-    if (!field?.values) return raw;
-    const opt = field.values.find((o)=>String(o.value) === raw);
-    return opt?.label ?? raw;
+    return findOptionByValue(field, condition.value)?.label ?? raw;
 };
 const buildBaseChip = (i, condition, field)=>({
         id: chipId(i),
@@ -66,10 +64,7 @@ const buildDateChip = (baseChip, condition, chipError)=>{
 };
 const buildMultiValueChip = (baseChip, condition, field, chipError)=>{
     const values = condition.value;
-    const valueParts = values.map((v)=>{
-        const key = String(v);
-        return field?.values?.find((opt)=>String(opt.value) === key)?.label ?? key;
-    });
+    const valueParts = values.map((v)=>findOptionByValue(field, v)?.label ?? String(v));
     const invalidIndices = field ? getInvalidValueIndices(field, values) : [];
     return {
         ...baseChip,

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

@@ -1,4 +1,13 @@
 import type { FieldMetadata, FieldValueOption } from '../types';
+/**
+ * Find an option in `field.values` matching the given value, using stringified
+ * comparison. Loose-match is required because parser/serializer round-trip
+ * coerces typed primitives to strings (e.g. integer field value `5` → string
+ * `"5"` after `(field = "5")` parses back), and strict `===` would miss the
+ * canonical option. Returns undefined when there is no match or the field
+ * has no `values` allowlist.
+ */
+export declare const findOptionByValue: (field: FieldMetadata | undefined, value: string | number | boolean | null | undefined) => FieldValueOption | undefined;
 /**
  * Get value options for a field.
  * Priority: `getSuggestions(inputText, context)` > `values` > `options` (converted to `{value, label}`).

package/dist/components/FilterInput/lib/fields.js

@@ -1,3 +1,8 @@
+const findOptionByValue = (field, value)=>{
+    if (!field?.values || null == value) return;
+    const key = String(value);
+    return field.values.find((opt)=>String(opt.value) === key);
+};
 const getFieldValues = (field, inputText = '', context)=>{
     if (field.getSuggestions) return field.getSuggestions(inputText, context);
     const fromValues = field.values ?? [];
@@ -17,4 +22,4 @@ const hasStaticAllowlist = (field)=>{
     if ((field.values?.length ?? 0) > 0) return true;
     return (field.options?.length ?? 0) > 0;
 };
-export { getFieldValues, hasFieldValues, hasStaticAllowlist };
+export { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist };

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

@@ -6,7 +6,7 @@ export { applyKnownFieldHelpers } from './applyKnownFieldHelpers';
 export { chipIdToConditionIndex, findChipSplitIndex } from './conditions';
 export { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
 export { buildContainerAnchoredRect, isMenuRelated } from './dom';
-export { getFieldValues, hasFieldValues, hasStaticAllowlist } from './fields';
+export { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist } from './fields';
 export { filterAndSort } from './filterSort';
 export { getCurrentValueTokenText, getValueFilterText } from './menuFilterText';
 export { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator, } from './operators';

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

@@ -5,11 +5,11 @@ import { applyKnownFieldHelpers } from "./applyKnownFieldHelpers.js";
 import { chipIdToConditionIndex, findChipSplitIndex } from "./conditions.js";
 import { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
 import { buildContainerAnchoredRect, isMenuRelated } from "./dom.js";
-import { getFieldValues, hasFieldValues, hasStaticAllowlist } from "./fields.js";
+import { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist } from "./fields.js";
 import { filterAndSort } from "./filterSort.js";
 import { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.js";
 import { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator } from "./operators.js";
 import { isFilterParseError, parseExpression } from "./parseExpression/index.js";
 import { serializeExpression } from "./serializeExpression.js";
 import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
-export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };
+export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findOptionByValue, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };

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

@@ -9,6 +9,12 @@ export type FilterInputChipVariant = 'chip' | 'and' | 'or' | '(' | ')';
  */
 /** Which segment of a chip has an error: attribute or value (true = whole chip) */
 export type ChipErrorSegment = boolean | 'attribute' | 'value';
+/**
+ * Shared signature of the upsertCondition callback owned by useFilterInputExpression.
+ * Re-declared in several option interfaces — exported here to keep the source of
+ * truth single-rooted (changes to the signature reach all consumers).
+ */
+export type UpsertCondition = (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: 'relative' | 'absolute') => void;
 export interface FilterInputChipData {
     id: string;
     variant: FilterInputChipVariant;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "0.29.1",
-  "generatedAt": "2026-04-27T08:22:17.184Z",
+  "generatedAt": "2026-04-27T09:32:45.403Z",
   "components": [
     {
       "name": "Alert",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.29.2-rc-feature-AS-882.1",
+  "version": "0.29.2",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",