@wallarm-org/design-system 0.41.0 → 0.42.0

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

@@ -1,19 +1,20 @@
 import { useMemo } from "react";
-import { QUERY_BAR_SELECTOR, buildContainerAnchoredRect } from "../lib/index.js";
-const useFilterInputPositioning = ({ anchorRef, containerRef, getAnchorLeft }, deps = [])=>useMemo(()=>({
+import { QUERY_BAR_SELECTOR, buildAnchoredRect, toAnchorBounds } from "../lib/index.js";
+const useFilterInputPositioning = ({ anchorRef, containerRef, getAnchorBounds, gutter = 12 }, deps = [])=>useMemo(()=>({
             placement: 'bottom-start',
-            gutter: 4,
+            gutter,
             getAnchorRect: ()=>{
                 const containerEl = containerRef?.current ?? anchorRef?.current?.closest(QUERY_BAR_SELECTOR);
                 const containerRect = containerEl?.getBoundingClientRect();
                 if (!containerRect) return null;
-                const left = getAnchorLeft ? getAnchorLeft(containerRect) : anchorRef?.current?.getBoundingClientRect().left ?? containerRect.left;
-                return buildContainerAnchoredRect(containerRect, left);
+                const anchor = getAnchorBounds ? getAnchorBounds(containerRect) : toAnchorBounds(anchorRef?.current?.getBoundingClientRect() ?? containerRect);
+                return buildAnchoredRect(anchor, containerRect);
             }
         }), [
         anchorRef,
         containerRef,
-        getAnchorLeft,
+        getAnchorBounds,
+        gutter,
         ...deps
     ]);
 export { useFilterInputPositioning };

package/dist/components/FilterInput/hooks/useFilterInputSelection/lib/dom.d.ts

@@ -11,12 +11,12 @@ interface VisualEntry {
 }
 /** Snapshot registry entries with cached rects, sorted by visual position (top→bottom, left→right) */
 export declare const getVisualEntries: (registry: Map<string, HTMLElement>) => VisualEntry[];
-/** Resolve the condition chip ID at the mousedown point (called once per drag). */
+/** Resolve the condition chip ID at the mousedown point (once per drag). */
 export declare const resolveAnchorChipId: (registry: Map<string, HTMLElement>, target: HTMLElement, x: number, y: number) => string | null;
 /**
- * Mark chips as drag-selected from a fixed anchor chip to the current cursor position.
- * Both anchor and end are resolved in the same visually-sorted array so indices always match.
- * Connectors between selected condition chips are included automatically.
+ * Mark chips drag-selected from anchor to cursor. Both ends resolve in the
+ * same visually-sorted array so indices match; intermediate connectors are
+ * included automatically.
  */
 export declare const updateDragSelection: (all: VisualEntry[], anchorChipId: string, currentX: number, currentY: number) => boolean;
 export {};

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

@@ -10,9 +10,9 @@ interface UseFilterInputSelectionOptions {
     clearAll: () => void;
     setInputText: (text: string) => void;
     closeMenu: () => void;
-    /** Replace the entire expression — used by paste so local state stays in sync even when uncontrolled. */
+    /** Replace the entire expression (paste path keeps local state in sync). */
     replaceExpression: (expression: ExprNode | null) => void;
-    /** Reset transient autocomplete state after paste (insertIndex, selectedField, menuState, …). */
+    /** Reset transient autocomplete state after paste. */
     resetAutocompleteState: () => void;
 }
 export declare const useFilterInputSelection: ({ conditions, connectors, fields, containerRef, chipRegistryRef, inputRef, clearAll, setInputText, closeMenu, replaceExpression, resetAutocompleteState, }: UseFilterInputSelectionOptions) => {

package/dist/components/FilterInput/hooks/useFilterInputSelection/useSelectionClipboard.d.ts

@@ -11,11 +11,8 @@ interface UseSelectionClipboardOptions {
     closeMenu: () => void;
     /** Replace the whole expression. Updates local state so paste works in uncontrolled mode too. */
     replaceExpression: (expression: ExprNode | null) => void;
-    /**
-     * Reset transient autocomplete state (insertIndex, selectedField/Operator, menuState, etc.)
-     * after a successful paste — otherwise a stale `insertIndex` from a prior gap-click or
-     * Backspace puts the input cursor between newly-pasted chips instead of at the end.
-     */
+    /** Reset transient autocomplete state after paste; otherwise stale
+     *  insertIndex puts the cursor between newly-pasted chips. */
     resetAutocompleteState: () => void;
 }
 export declare const useSelectionClipboard: ({ conditions, connectors, fields, chipRegistryRef, clearSelection, setPasteError, setInputText, closeMenu, replaceExpression, resetAutocompleteState, }: UseSelectionClipboardOptions) => {

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

@@ -0,0 +1,14 @@
+/**
+ * Pokes floating-ui (via @zag-js / Ark UI) to recompute when `dep` changes.
+ * floating-ui's autoUpdate listens for resize/scroll but not sibling reflow,
+ * so a laterally-shifting anchor would lag one paint. Must be useLayoutEffect
+ * — useEffect runs after paint.
+ *
+ * Two scoping rules:
+ * - `enabled = false` short-circuits entirely (no event while menu closed).
+ * - First mount is skipped (no transition has occurred yet).
+ *
+ * The dispatch is still a global `resize` (autoUpdate's only listener) — keep
+ * dep-change rate low at the call site.
+ */
+export declare const useFloatingRecomputeOn: (dep: unknown, enabled?: boolean) => void;

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

@@ -0,0 +1,18 @@
+import { useLayoutEffect, useRef } from "react";
+const useFloatingRecomputeOn = (dep, enabled = true)=>{
+    const prevDepRef = useRef(dep);
+    useLayoutEffect(()=>{
+        if (!enabled) {
+            prevDepRef.current = dep;
+            return;
+        }
+        if ("u" < typeof window) return;
+        if (Object.is(prevDepRef.current, dep)) return;
+        prevDepRef.current = dep;
+        window.dispatchEvent(new Event('resize'));
+    }, [
+        dep,
+        enabled
+    ]);
+};
+export { useFloatingRecomputeOn };

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

@@ -0,0 +1,10 @@
+/**
+ * Observes up to three elements with one ResizeObserver and returns a counter
+ * that increments on every resize — use as a memo/effect dep to force
+ * recompute when a tracked element changes size. Null entries are skipped.
+ *
+ * Observing a detached element is safe: ResizeObserver simply doesn't fire
+ * until the element re-attaches and lays out, then resumes — no leak. We do
+ * NOT filter detached nodes so re-attach is picked up without ref churn.
+ */
+export declare const useResizeTracker: (el1: HTMLElement | null, el2?: HTMLElement | null, el3?: HTMLElement | null) => number;

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

@@ -0,0 +1,21 @@
+import { useEffect, useReducer } from "react";
+const useResizeTracker = (el1, el2, el3)=>{
+    const [tick, bump] = useReducer((x)=>x + 1, 0);
+    useEffect(()=>{
+        const targets = [
+            el1,
+            el2,
+            el3
+        ].filter((el)=>null != el);
+        if (0 === targets.length) return;
+        const observer = new ResizeObserver(()=>bump());
+        for (const el of targets)observer.observe(el);
+        return ()=>observer.disconnect();
+    }, [
+        el1,
+        el2,
+        el3
+    ]);
+    return tick;
+};
+export { useResizeTracker };

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

@@ -1,7 +1,6 @@
 /**
- * Strip characters from `text` that fail the field's `acceptChar` predicate.
- * Commas and spaces always pass through so multi-select delimiters keep
- * working. Returns the original string unchanged when no filtering was
- * needed, so callers can cheaply compare identity to detect a no-op.
+ * Strip chars failing `acceptChar`. Commas/spaces pass through (multi-select
+ * delimiters). Returns the same string when no filtering happens, so callers
+ * can identity-compare to detect a no-op.
  */
 export declare const applyAcceptChar: (text: string, acceptChar: (c: string) => boolean) => string;

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

@@ -1,34 +1,22 @@
 import type { FieldMetadata } from '../types';
 /**
- * Decorate `fields` in place with design-system helpers for known field names.
- * `FilterInput` calls this on the `fields` prop before rendering.
+ * Decorate `fields` with design-system helpers for reserved names. DS-supplied
+ * callbacks **override** consumer values for the same slot — the field
+ * semantics (mask range, accepted chars, backend form) are fixed by DS.
  *
- * Reserved names and what the design system owns:
+ * Reserved names:
+ * | `name`        | DS owns                                                  |
+ * | ------------- | -------------------------------------------------------- |
+ * | `status_code` | acceptChar, normalize, getSuggestions, validate, serializeValue |
  *
- * | `name`        | DS owns                                                                                    |
- * | ------------- | ------------------------------------------------------------------------------------------ |
- * | `status_code` | HTTP status code: `acceptChar`, `normalize`, `getSuggestions`, `validate`, `serializeValue` |
- *
- * For reserved names, DS-supplied callbacks **override** any consumer-supplied
- * value for the same slot. This is intentional: the field semantics (mask
- * range `1XX..5XX`, accepted characters, backend form) are fixed by the
- * design system. Consumer-supplied `options`/`getSuggestions` would otherwise
- * fight the canonical mask UX.
- *
- * If the backend uses a different name (e.g. `http_status_code`), the helpers
- * are NOT applied — the consumer must either rename the field to match or
- * wire the factories (`createStatusCode*`) manually.
- *
- * The returned array has **reference-stable identity** when no field matches,
- * so downstream `useMemo` that depends on it does not invalidate unnecessarily.
+ * Backend with a different name (e.g. `http_status_code`) must either rename
+ * or wire factories (`createStatusCode*`) manually. Returns the input array
+ * by reference when no field matches (stable identity for downstream memos).
  */
 export declare const applyKnownFieldHelpers: (fields: FieldMetadata[]) => FieldMetadata[];
 /**
- * Look up the backend-form serializer for a reserved field name. Returns
- * `undefined` for unknown names. Useful for consumers that hold their own
- * expression shape (not DS `ExprNode`) but need to apply the same backend
- * transform that the FilterInput's `serializeValue` slot would produce — so
- * they can drive the lookup off the field name without hard-coding which
- * names are reserved.
+ * Look up the backend-form serializer for a reserved field name; returns
+ * undefined for unknown names. For consumers that hold their own expression
+ * shape but want the same transform as FilterInput's `serializeValue`.
  */
 export declare const getKnownFieldSerializer: (fieldName: string) => NonNullable<FieldMetadata["serializeValue"]> | undefined;

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

@@ -1,45 +1,27 @@
 import type { FieldType, FilterInputChipVariant, FilterOperator } from '../types';
-/**
- * Operators that require no value (unary)
- */
+/** Operators that require no value (unary). */
 export declare const NO_VALUE_OPERATORS: readonly FilterOperator[];
-/**
- * Operators that support multi-select values
- */
+/** Operators that support multi-select values. */
 export declare const MULTI_SELECT_OPERATORS: readonly FilterOperator[];
-/**
- * Pattern to extract condition index from chip ID (e.g. "chip-2" → 2)
- */
+/** Extract condition index from chip ID (e.g. "chip-2" → 2). */
 export declare const CHIP_ID_PATTERN: RegExp;
-/**
- * Pattern to extract condition index from connector ID (e.g. "connector-2" → 2)
- */
+/** Extract condition index from connector ID. */
 export declare const CONNECTOR_ID_PATTERN: RegExp;
-/**
- * DOM selector for the FilterInput root element
- */
+/** DOM selector for the FilterInput root element. */
 export declare const QUERY_BAR_SELECTOR = "[data-slot=\"filter-input\"]";
-/**
- * Labels for non-chip filter chip variants (connectors, brackets)
- */
+/** Gap between the dropdown and the field border in the empty/initial state. */
+export declare const MENU_BASE_GUTTER = 4;
+/** Extra vertical offset added to the anchor's bottom when the dropdown is
+ *  anchored to a chip / input — total visual gap becomes
+ *  MENU_BASE_GUTTER + MENU_CHIP_GUTTER_OFFSET (12). */
+export declare const MENU_CHIP_GUTTER_OFFSET = 8;
+/** Labels for non-chip filter chip variants (connectors, brackets). */
 export declare const VARIANT_LABELS: Partial<Record<FilterInputChipVariant, string>>;
-/**
- * Operator Symbol Mapping
- * Maps operators to their raw symbol displayed on the right side of menus
- */
+/** Raw operator symbols shown on the right side of menus. */
 export declare const OPERATOR_SYMBOLS: Record<FilterOperator, string>;
-/**
- * Operator Label Mapping
- * Maps operator symbols to human-readable labels
- */
+/** Human-readable labels for operator symbols. */
 export declare const OPERATOR_LABELS: Record<FilterOperator, string>;
-/**
- * Field type-specific operator labels
- * Some operators have different labels depending on field type
- */
+/** Field-type-specific operator labels (some override the generic ones). */
 export declare const OPERATOR_LABELS_BY_TYPE: Record<FieldType, Partial<Record<FilterOperator, string>>>;
-/**
- * Operators by Field Type Mapping (with groups for separators)
- * Maps field types to their available operators, grouped logically
- */
+/** Operators per field type, grouped for menu separators. */
 export declare const OPERATORS_BY_TYPE: Record<FieldType, FilterOperator[][]>;

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

@@ -9,6 +9,8 @@ const MULTI_SELECT_OPERATORS = [
 const CHIP_ID_PATTERN = /^chip-(\d+)$/;
 const CONNECTOR_ID_PATTERN = /^connector-(\d+)$/;
 const QUERY_BAR_SELECTOR = '[data-slot="filter-input"]';
+const MENU_BASE_GUTTER = 4;
+const MENU_CHIP_GUTTER_OFFSET = 8;
 const VARIANT_LABELS = {
     and: 'AND',
     or: 'OR',
@@ -163,4 +165,4 @@ const OPERATORS_BY_TYPE = {
         ]
     ]
 };
-export { CHIP_ID_PATTERN, CONNECTOR_ID_PATTERN, MULTI_SELECT_OPERATORS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS };
+export { CHIP_ID_PATTERN, CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, MULTI_SELECT_OPERATORS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS };

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

@@ -1,19 +1,23 @@
 /**
- * Check if an element belongs to a FilterInput-owned menu/portal overlay.
- *
- * Menus are marked with `data-filter-input-menu` on their `DropdownMenuContent`
- * root. Generic Ark UI selectors (`[role="menu"]`, `[data-part="content"]`,
- * `[data-scope="date-picker"]`) intentionally DO NOT match — otherwise blur
- * handlers mistake unrelated page popups (tenant switcher, other dropdowns)
- * for FilterInput's own menu and refuse to close. See AS-882.
+ * True if element belongs to a FilterInput-owned menu overlay. Marked by
+ * `data-filter-input-menu` on DropdownMenuContent — generic Ark UI selectors
+ * are intentionally NOT used so blur handlers don't confuse unrelated page
+ * popups (tenant switcher etc.) for FilterInput's own menu. AS-882.
  */
 export declare const isMenuRelated: (el: HTMLElement | null) => boolean;
+export interface AnchorBounds {
+    top: number;
+    bottom: number;
+    left: number;
+}
+/** Extract anchor bounds from a DOMRect (right edge is computed at build time). */
+export declare const toAnchorBounds: (rect: DOMRect) => AnchorBounds;
 /**
- * Build a DOMRect-compatible object anchored vertically to the container
- * and horizontally to the given left position. Used by all FilterInput dropdowns
- * so they share the same vertical gap from the container bottom edge.
+ * Build a DOMRect-compatible object from the anchor's vertical bounds + left
+ * edge; right edge stays at the container's right so the dropdown can expand
+ * to full container width below the actual interaction target.
  */
-export declare const buildContainerAnchoredRect: (containerRect: DOMRect, anchorLeft: number, anchorRight?: number) => {
+export declare const buildAnchoredRect: (anchor: AnchorBounds, containerRect: DOMRect, anchorRight?: number) => {
     x: number;
     y: number;
     width: number;

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

@@ -1,12 +1,17 @@
 const isMenuRelated = (el)=>!!el?.closest('[data-filter-input-menu]');
-const buildContainerAnchoredRect = (containerRect, anchorLeft, anchorRight = containerRect.right)=>({
-        x: anchorLeft,
-        y: containerRect.top,
-        width: anchorRight - anchorLeft,
-        height: containerRect.height,
-        top: containerRect.top,
-        bottom: containerRect.bottom,
-        left: anchorLeft,
+const toAnchorBounds = (rect)=>({
+        top: rect.top,
+        bottom: rect.bottom,
+        left: rect.left
+    });
+const buildAnchoredRect = (anchor, containerRect, anchorRight = containerRect.right)=>({
+        x: anchor.left,
+        y: anchor.top,
+        width: anchorRight - anchor.left,
+        height: anchor.bottom - anchor.top,
+        top: anchor.top,
+        bottom: anchor.bottom,
+        left: anchor.left,
         right: anchorRight
     });
-export { buildContainerAnchoredRect, isMenuRelated };
+export { buildAnchoredRect, isMenuRelated, toAnchorBounds };

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

@@ -1,34 +1,25 @@
 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.
+ * Find an option in `field.values` matching the value (stringified compare).
+ * Loose-match needed because parser/serializer round-trip stringifies typed
+ * primitives (5 → "5") and strict === would miss the canonical option.
  */
 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}`).
- *
- * `context.selectedValues` is forwarded to `getSuggestions` so helpers can
- * include the currently-committed values in their output (e.g. to preserve a
- * badge style on a concrete code once suggestions have narrowed to masks).
+ * Get value options for a field — priority: getSuggestions > values > options.
+ * `context.selectedValues` lets helpers preserve a committed value's badge
+ * style once suggestions have narrowed.
  */
 export declare const getFieldValues: (field: FieldMetadata, inputText?: string, context?: {
     selectedValues?: Array<string | number | boolean>;
 }) => FieldValueOption[];
 /**
- * Check whether a field has a source of value suggestions — dynamic callback, static
- * `values`, or `options`. Used to decide whether to render a value dropdown at all.
- * Fields with `getSuggestions` always get a dropdown (empty list is still a list).
+ * True if a field has any value suggestions (dynamic, values, or options).
+ * Decides whether to render a value dropdown. getSuggestions always yields one.
  */
 export declare const hasFieldValues: (field: FieldMetadata) => boolean;
 /**
- * Whether the field has an exhaustive static allowlist of accepted values.
- * Used by validation code to decide whether to reject values outside the list.
- * Fields with `getSuggestions` return false — their suggestion list is a hint,
- * not an allowlist (consumer may accept freeform values that aren't currently suggested).
+ * True if the field has an exhaustive static allowlist. getSuggestions
+ * fields return false — their list is a hint, not a strict allowlist.
  */
 export declare const hasStaticAllowlist: (field: FieldMetadata) => boolean;

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

@@ -4,12 +4,14 @@ export { applyAcceptChar } from './applyAcceptChar';
 export { applyFieldValueTransforms } from './applyFieldValueTransforms';
 export { applyKnownFieldHelpers, getKnownFieldSerializer } 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 { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
+export { type AnchorBounds, buildAnchoredRect, isMenuRelated, toAnchorBounds } from './dom';
 export { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist } from './fields';
 export { filterAndSort } from './filterSort';
 export { getCurrentValueTokenText, getValueFilterText } from './menuFilterText';
 export { getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, NO_VALUE_PLACEHOLDER, nextBuildingMenu, } from './operators';
 export { type FilterParseError, isFilterParseError, parseExpression } from './parseExpression';
+export { SEGMENT_TO_MENU } from './segmentMenu';
 export { serializeExpression } from './serializeExpression';
 export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, } from './statusCode';
+export { findMatchingFieldValue, getInvalidValueIndices, isValidFieldValue, validateValueForField, } from './validation';

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

@@ -3,13 +3,15 @@ import { applyAcceptChar } from "./applyAcceptChar.js";
 import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
 import { applyKnownFieldHelpers, getKnownFieldSerializer } 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 { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
+import { buildAnchoredRect, isMenuRelated, toAnchorBounds } from "./dom.js";
 import { findOptionByValue, getFieldValues, hasFieldValues, hasStaticAllowlist } from "./fields.js";
 import { filterAndSort } from "./filterSort.js";
 import { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.js";
 import { NO_VALUE_PLACEHOLDER, getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu } from "./operators.js";
 import { isFilterParseError, parseExpression } from "./parseExpression/index.js";
+import { SEGMENT_TO_MENU } from "./segmentMenu.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, NO_VALUE_PLACEHOLDER, 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, getFieldOperators, getFieldValues, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isBuildingComplete, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu, parseExpression, serializeExpression };
+import { findMatchingFieldValue, getInvalidValueIndices, isValidFieldValue, validateValueForField } from "./validation.js";
+export { CONNECTOR_ID_PATTERN, DATE_PRESETS, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, NO_VALUE_PLACEHOLDER, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, SEGMENT_TO_MENU, VARIANT_LABELS, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, findMatchingFieldValue, findOptionByValue, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldOperators, getFieldValues, getInvalidValueIndices, getKnownFieldSerializer, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isBuildingComplete, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValidFieldValue, isValueShapeCompatible, nextBuildingMenu, parseExpression, serializeExpression, toAnchorBounds, validateValueForField };

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

@@ -1,24 +1,14 @@
+import { type ChipSegment } from '../FilterInputField/FilterInputChip';
 import type { FieldValueOption, FilterOperator } from '../types';
 /**
- * Derive the "current value token" — the substring the user is actively typing.
- *
- * For multi-select operators (like `in` / `any of`), the field input may contain
- * a comma-separated list such as `"2XX, 3XX, 4"`. Only the last token (`"4"`)
- * represents the value currently being composed; prior tokens are already
- * committed as checked items. Callers use this to feed both `getSuggestions`
- * and the dropdown's filter/sort so the active token drives the menu.
- *
- * For single-value operators the raw input is returned unchanged.
+ * The substring the user is actively typing. For multi-select operators with
+ * comma-separated input ("2XX, 3XX, 4"), returns only the last token ("4").
+ * Single-value operators get the raw input.
  */
-export declare const getCurrentValueTokenText: (editingSegment: string | null, inputText: string, segmentMenuFilterText: string, selectedOperator: FilterOperator | null) => string;
+export declare const getCurrentValueTokenText: (editingSegment: ChipSegment | null, inputText: string, segmentMenuFilterText: string, selectedOperator: FilterOperator | null) => string;
 /**
- * Derive the filter text for the value menu.
- *
- * For multi-select operators, uses the current value token (the one the user
- * is actively typing). If that token already matches a known value, returns
- * `''` so the dropdown shows all options — the user just finished a selection
- * and is about to start the next one.
- *
- * For single-value operators, returns the token as-is.
+ * Filter text for the value menu. Multi-select: returns the current token, or
+ * '' when it already matches a known value (just-completed selection).
+ * Single-value: returns token as-is.
  */
 export declare const getValueFilterText: (currentTokenText: string, selectedOperator: FilterOperator | null, fieldValues: FieldValueOption[]) => string;

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

@@ -1,18 +1,13 @@
 import type { FieldMetadata, FieldType, FilterOperator, MenuState } from '../types';
 /**
- * Filler text shown in the value slot of no-value operator chips so every
- * chip visually has three segments. Kept here next to `isNoValueOperator`
- * so committed (buildChips) and building-preview (deriveAutocompleteValues)
- * paths can never drift.
+ * Placeholder in no-value operator chips so every chip visually has 3
+ * segments. Co-located with isNoValueOperator so committed and
+ * building-preview paths can't drift.
  */
 export declare const NO_VALUE_PLACEHOLDER = "\u2014";
-/**
- * Helper to get operator label for specific field type
- */
+/** Get operator label for a specific field type. */
 export declare const getOperatorLabel: (operator: FilterOperator, fieldType: FieldType) => string;
-/**
- * Reverse lookup: get raw FilterOperator from its display label and field type
- */
+/** Reverse lookup: FilterOperator from display label and field type. */
 export declare const getOperatorFromLabel: (label: string, fieldType: FieldType) => FilterOperator | null;
 /** Check if operator supports multi-select */
 export declare const isMultiSelectOperator: (op: FilterOperator | null) => op is FilterOperator;
@@ -25,22 +20,17 @@ export declare const getFieldOperators: (field: FieldMetadata) => FilterOperator
 /** Check whether an operator is supported by a field's type/override list */
 export declare const isOperatorAllowedForField: (field: FieldMetadata, operator: FilterOperator) => boolean;
 /**
- * The menu that should open to continue building a chip from its current
- * state. Returns null when the chip is fully built and nothing should open.
- * Reused by the refocus path (useFocusManagement) and the main-input click
- * path (useInputHandlers) so both stay in sync.
+ * Next menu to open to continue building a chip; null when fully built.
+ * Shared by useFocusManagement (refocus) and useInputHandlers (click).
  */
 export declare const nextBuildingMenu: (field: FieldMetadata | null, operator: FilterOperator | null) => MenuState | null;
 /**
- * Decide whether the in-progress (field, operator, value) triple is fully
- * built — i.e. has all the segments the chip needs. No-value operators
- * (is_null / is_not_null) are complete without a value: the chip renders a
- * value-placeholder in that slot so it still visually has three segments.
+ * True if the in-progress (field, operator, value) triple has all segments.
+ * No-value operators (is_null/is_not_null) are complete without a value.
  */
 export declare const isBuildingComplete: (field: FieldMetadata | null, operator: FilterOperator | null, value: string | number | boolean | Array<string | number | boolean> | null | undefined) => boolean;
 /**
- * Check whether two operators handle values in compatible shapes
- * (multi-select / between / no-value categories match), meaning a value
- * preview built for `a` can be reused as-is for `b`.
+ * True when two operators share value shape (multi-select/between/no-value
+ * categories match) — a value preview built for `a` is reusable for `b`.
  */
 export declare const isValueShapeCompatible: (a: FilterOperator | null, b: FilterOperator | null) => boolean;

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

@@ -0,0 +1,4 @@
+import { type SegmentVariant } from '../FilterInputField/FilterInputChip/segmentVariant';
+import type { MenuState } from '../types';
+/** Open-menu state for each chip segment (segment click, Backspace cascade). */
+export declare const SEGMENT_TO_MENU: Record<SegmentVariant, MenuState>;

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

@@ -0,0 +1,7 @@
+import { SEGMENT_VARIANT } from "../FilterInputField/FilterInputChip/segmentVariant.js";
+const SEGMENT_TO_MENU = {
+    [SEGMENT_VARIANT.attribute]: 'field',
+    [SEGMENT_VARIANT.operator]: 'operator',
+    [SEGMENT_VARIANT.value]: 'value'
+};
+export { SEGMENT_TO_MENU };

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

@@ -1,16 +1,9 @@
 import type { ExprNode, FieldMetadata } from '../types';
 /**
- * Serialize an expression tree to a canonical text string.
- * Top-level conditions are sorted alphabetically by field name.
- *
- * **Pass `fields` when the output targets the backend.** Per-field
- * `serializeValue` hooks run first, so values like the status-code mask
- * `"2XX"` become `"2"` in the emitted string. Omitting `fields` keeps the
- * UI-facing values verbatim — useful for clipboard round-trip, debug
- * display, or any case where the output feeds `parseExpression` back. If
- * you forget `fields` on the path to the backend, the placeholder `X`s
- * ride through silently — name the backend call-site helper explicitly
- * (e.g. `const query = serializeExpression(expr, fields)`) to make the
- * intent obvious at callsite.
+ * Serialize an expression tree to canonical text. Top-level conditions sort
+ * by field name. Pass `fields` for backend output — per-field `serializeValue`
+ * runs first (e.g. `"2XX"` → `"2"`). Omitting `fields` keeps UI-facing values
+ * verbatim (clipboard round-trip, parseExpression input). Forgetting `fields`
+ * on the backend path silently emits placeholder Xs.
  */
 export declare const serializeExpression: (expr: ExprNode | null, fields?: FieldMetadata[]) => string;

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

@@ -0,0 +1,9 @@
+import type { Condition, FieldMetadata, FieldValueOption } from '../types';
+/** Find a field value option matching by label or value (case-insensitive) */
+export declare const findMatchingFieldValue: (fieldValues: FieldValueOption[], text: string) => FieldValueOption | undefined;
+/** 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;

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

@@ -0,0 +1,24 @@
+import { getFieldValues, hasStaticAllowlist } from "./fields.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;
+};
+export { findMatchingFieldValue, getInvalidValueIndices, isValidFieldValue, validateValueForField };