@wallarm-org/design-system 0.66.3 → 0.67.1

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
 import { CONNECTOR_ID_PATTERN, chipIdToConditionIndex, validateValueForField } from "../../lib/index.js";
 import { applyExternalErrors } from "./applyExternalErrors.js";
@@ -94,13 +94,24 @@ const addConnectorIfNeeded = (connectors, newConditionsLength, editingChipId, at
 };
 const useFilterInputExpression = ({ fields, value, onChange, error, externalErrors })=>{
     const [state, setState] = useState(EMPTY_STATE);
+    const stateRef = useRef(state);
+    const applyState = useCallback((next, emit)=>{
+        stateRef.current = next;
+        setState(next);
+        if (emit) onChange?.(buildExpression(next.conditions, next.connectors, fields));
+    }, [
+        onChange,
+        fields
+    ]);
     useEffect(()=>{
         if (void 0 !== value) {
-            const result = expressionToConditions(value);
-            setState({
+            const result = expressionToConditions(value, fields);
+            const next = {
                 conditions: revalidateConditions(result.conditions, fields),
                 connectors: result.connectors
-            });
+            };
+            stateRef.current = next;
+            setState(next);
         }
     }, [
         value,
@@ -113,100 +124,117 @@ const useFilterInputExpression = ({ fields, value, onChange, error, externalErro
         error,
         externalErrors
     ]);
-    const upsertCondition = useCallback((field, operator, val, editingChipId, atIndex, error, dateOrigin)=>{
-        const condition = buildCondition(field, operator, val, error, dateOrigin);
-        setState((prev)=>{
-            const newConditions = applyCondition(prev.conditions, condition, editingChipId, atIndex);
-            const newConnectors = addConnectorIfNeeded(prev.connectors, newConditions.length, editingChipId, atIndex, prev.conditions.length);
-            const next = {
-                conditions: newConditions,
-                connectors: newConnectors
+    const upsertCondition = useCallback((field, operator, val, editingChipId, atIndex, error, dateOrigin, side)=>{
+        const prev = stateRef.current;
+        if (1 === side) {
+            const idx = null != editingChipId ? chipIdToConditionIndex(editingChipId) : prev.conditions.length - 1;
+            if (null == idx || idx < 0 || idx >= prev.conditions.length) return;
+            const base = prev.conditions[idx];
+            const updated = [
+                ...prev.conditions
+            ];
+            updated[idx] = {
+                ...base,
+                pair: {
+                    ...operator && {
+                        operator
+                    },
+                    value: val,
+                    ...error && {
+                        error
+                    },
+                    ...dateOrigin && {
+                        dateOrigin
+                    }
+                }
             };
-            onChange?.(buildExpression(next.conditions, next.connectors));
-            return next;
-        });
+            applyState({
+                conditions: updated,
+                connectors: prev.connectors
+            }, true);
+            return;
+        }
+        const condition = buildCondition(field, operator, val, error, dateOrigin);
+        const newConditions = applyCondition(prev.conditions, condition, editingChipId, atIndex);
+        const newConnectors = addConnectorIfNeeded(prev.connectors, newConditions.length, editingChipId, atIndex, prev.conditions.length);
+        applyState({
+            conditions: newConditions,
+            connectors: newConnectors
+        }, true);
     }, [
-        onChange
+        applyState
     ]);
     const removeCondition = useCallback((chipId)=>{
         const idx = chipIdToConditionIndex(chipId);
         if (null === idx) return;
-        setState((prev)=>{
-            if (prev.conditions[idx]?.disabled) return prev;
-            const newConditions = prev.conditions.filter((_, i)=>i !== idx);
-            const newConnectors = removeConnectorAtConditionIndex(prev.connectors, idx);
-            const next = {
-                conditions: newConditions,
-                connectors: newConnectors
-            };
-            onChange?.(buildExpression(next.conditions, next.connectors));
-            return next;
-        });
+        const prev = stateRef.current;
+        if (prev.conditions[idx]?.disabled) return;
+        const newConditions = prev.conditions.filter((_, i)=>i !== idx);
+        const newConnectors = removeConnectorAtConditionIndex(prev.connectors, idx);
+        applyState({
+            conditions: newConditions,
+            connectors: newConnectors
+        }, true);
     }, [
-        onChange
+        applyState
     ]);
     const removeConditionAtIndex = useCallback((idx)=>{
-        setState((prev)=>{
-            if (idx < 0 || idx >= prev.conditions.length) return prev;
-            if (prev.conditions[idx]?.disabled) return prev;
-            const newConditions = prev.conditions.filter((_, i)=>i !== idx);
-            const newConnectors = removeConnectorAtConditionIndex(prev.connectors, idx);
-            const next = {
-                conditions: newConditions,
-                connectors: newConnectors
-            };
-            onChange?.(buildExpression(next.conditions, next.connectors));
-            return next;
-        });
+        const prev = stateRef.current;
+        if (idx < 0 || idx >= prev.conditions.length) return;
+        if (prev.conditions[idx]?.disabled) return;
+        const newConditions = prev.conditions.filter((_, i)=>i !== idx);
+        const newConnectors = removeConnectorAtConditionIndex(prev.connectors, idx);
+        applyState({
+            conditions: newConditions,
+            connectors: newConnectors
+        }, true);
     }, [
-        onChange
+        applyState
     ]);
     const clearAll = useCallback(()=>{
-        setState((prev)=>{
-            const disabledConditions = prev.conditions.filter((c)=>c.disabled);
-            if (0 === disabledConditions.length) {
-                onChange?.(null);
-                return EMPTY_STATE;
-            }
-            const next = {
-                conditions: disabledConditions,
-                connectors: []
-            };
-            onChange?.(buildExpression(next.conditions, next.connectors));
-            return next;
-        });
+        const prev = stateRef.current;
+        const disabledConditions = prev.conditions.filter((c)=>c.disabled);
+        if (0 === disabledConditions.length) {
+            applyState(EMPTY_STATE, false);
+            onChange?.(null);
+            return;
+        }
+        applyState({
+            conditions: disabledConditions,
+            connectors: []
+        }, true);
     }, [
+        applyState,
         onChange
     ]);
     const replaceExpression = useCallback((expr)=>{
-        const result = expressionToConditions(expr);
-        setState({
+        const result = expressionToConditions(expr, fields);
+        applyState({
             conditions: result.conditions,
             connectors: result.connectors
-        });
+        }, false);
         onChange?.(expr);
     }, [
-        onChange
+        applyState,
+        onChange,
+        fields
     ]);
     const setConnectorValue = useCallback((connectorId, value)=>{
         const match = connectorId.match(CONNECTOR_ID_PATTERN);
         if (!match) return;
         const condIdx = Number(match[1]);
         const connectorIdx = condIdx - 1;
-        setState((prev)=>{
-            const updated = [
-                ...prev.connectors
-            ];
-            if (connectorIdx >= 0 && connectorIdx < updated.length) updated[connectorIdx] = value;
-            const next = {
-                conditions: prev.conditions,
-                connectors: updated
-            };
-            onChange?.(buildExpression(next.conditions, next.connectors));
-            return next;
-        });
+        const prev = stateRef.current;
+        const updated = [
+            ...prev.connectors
+        ];
+        if (connectorIdx >= 0 && connectorIdx < updated.length) updated[connectorIdx] = value;
+        applyState({
+            conditions: prev.conditions,
+            connectors: updated
+        }, true);
     }, [
-        onChange
+        applyState
     ]);
     return {
         conditions: state.conditions,

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

@@ -28,8 +28,8 @@ const OPERATOR_SYMBOLS = {
     not_like: '!~',
     in: 'IN',
     not_in: 'NOT IN',
-    is_null: '= null',
-    is_not_null: '!= null',
+    is_null: '!= null',
+    is_not_null: '= null',
     between: '<>'
 };
 const OPERATOR_LABELS = {

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

@@ -14,7 +14,10 @@ export type ChipErrorSegment = boolean | 'attribute' | 'value';
  * 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 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', 
+/** When 1, write the paired (second) triplet onto the target condition instead
+ *  of replacing the base triplet. Defaults to 0 (base triplet). */
+side?: 0 | 1) => void;
 export interface FilterInputChipData {
     id: string;
     variant: FilterInputChipVariant;
@@ -30,6 +33,13 @@ export interface FilterInputChipData {
     errorValueIndices?: number[];
     /** When true, the chip cannot be edited or removed */
     disabled?: boolean;
+    /** Second paired triplet (display) for two-step fields. */
+    pair?: {
+        attribute: string;
+        operator?: string;
+        value?: string;
+        error?: ChipErrorSegment;
+    };
 }
 /**
  * Field Type for filter attributes
@@ -120,6 +130,13 @@ export interface FieldMetadata {
      * emitting the query. Display in the chip is unaffected.
      */
     serializeValue?: (value: string | number | boolean) => string | number | boolean;
+    /**
+     * When set, this field is a two-step paired field: the chip holds a second
+     * attribute/operator/value triplet. The paired segment is a full field
+     * definition (label, type, operators, values, validate, …). Nesting is one
+     * level only — a pairedField's own `pairedField` is ignored.
+     */
+    pairedField?: FieldMetadata;
 }
 /**
  * Expression Tree Types
@@ -139,6 +156,13 @@ export interface Condition {
     dateOrigin?: 'relative' | 'absolute';
     /** When true, the condition cannot be edited or removed */
     disabled?: boolean;
+    /** Second paired triplet. Present only for fields with `pairedField`. */
+    pair?: {
+        operator?: FilterOperator;
+        value: string | number | boolean | null | Array<string | number | boolean>;
+        error?: ChipErrorSegment;
+        dateOrigin?: 'relative' | 'absolute';
+    };
 }
 /**
  * Group Node - Represents a grouped expression with AND/OR logic

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.66.2",
-  "generatedAt": "2026-06-23T09:25:43.087Z",
+  "version": "0.67.0",
+  "generatedAt": "2026-06-24T17:08:52.641Z",
   "components": [
     {
       "name": "Accordion",
@@ -29593,6 +29593,12 @@
               "required": false,
               "description": "When true, the chip cannot be edited or removed (dimmed appearance)"
             },
+            {
+              "name": "pair",
+              "type": "complex",
+              "required": false,
+              "description": "Second paired triplet (two-step fields). The paired attribute is fixed."
+            },
             {
               "name": "defaultChecked",
               "type": "boolean | undefined",

package/package.json

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