@wallarm-org/design-system 1.0.0-rc-feature-AS-877-fix-filter-code.2 → 1.0.0-rc-feature-AS-877-fix-filter-code.4

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

@@ -1,6 +1,20 @@
 import type { FC, HTMLAttributes } from 'react';
 import type { ExprNode, FieldMetadata } from './types';
 export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /**
+     * Filter-field configurations driving the autocomplete. Most fields are
+     * passed through as-is, but a few names are **reserved** and auto-wired
+     * with design-system helpers (`acceptChar` / `normalize` / `getSuggestions`
+     * / `validate`). Current reserved names:
+     *
+     *   - `status_code` — HTTP status code field (mask suggestions, format
+     *     validation, digit-or-X input filter, partial-input normalization).
+     *
+     * Consumer-supplied callbacks always override the auto-wiring, so you can
+     * opt out per-field. For the same helpers on a field with a different
+     * `name`, import the factories (`createStatusCodeSuggestions`, …) and
+     * attach them manually.
+     */
     fields?: FieldMetadata[];
     value?: ExprNode | null;
     onChange?: (expression: ExprNode | null) => void;

package/dist/components/FilterInput/FilterInput.js

@@ -6,7 +6,7 @@ import { FilterInputErrors, parseFilterInputErrors } from "./FilterInputErrors/i
 import { FilterInputField } from "./FilterInputField/index.js";
 import { FilterInputMenu } from "./FilterInputMenu/FilterInputMenu.js";
 import { useFilterInputAutocomplete, useFilterInputExpression, useFilterInputSelection } from "./hooks/index.js";
-import { applyFieldPresets } from "./lib/applyFieldPresets.js";
+import { applyKnownFieldHelpers } from "./lib/applyKnownFieldHelpers.js";
 const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'Type to filter...', error = false, showKeyboardHint = false, className, ...props })=>{
     const inputRef = useRef(null);
     const containerRef = useRef(null);
@@ -16,7 +16,7 @@ const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'T
         if (el) chipRegistryRef.current.set(id, el);
         else chipRegistryRef.current.delete(id);
     }, []);
-    const fields = useMemo(()=>applyFieldPresets(rawFields), [
+    const fields = useMemo(()=>applyKnownFieldHelpers(rawFields), [
         rawFields
     ]);
     const { conditions, connectors, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue } = useFilterInputExpression({

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

@@ -1,5 +1,5 @@
 export { FilterInput, type FilterInputProps } from './FilterInput';
 export { FilterInputChip, type FilterInputChipProps } from './FilterInputField';
 export { FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, FilterInputValueMenu, type FilterInputValueMenuProps, type ValueOption, } from './FilterInputMenu';
-export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, isFilterParseError, parseExpression, serializeExpression, } from './lib';
-export type { Condition, ExprNode, FieldMetadata, FieldPreset, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';
+export { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, isFilterParseError, parseExpression, serializeExpression, } from './lib';
+export type { Condition, ExprNode, FieldMetadata, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';

package/dist/components/FilterInput/index.js

@@ -1,5 +1,5 @@
 import { FilterInput } from "./FilterInput.js";
 import { FilterInputChip } from "./FilterInputField/index.js";
 import { FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu } from "./FilterInputMenu/index.js";
-import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
-export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression };
+import { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
+export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression };

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

@@ -0,0 +1,11 @@
+import type { ExprNode, FieldMetadata } from '../types';
+/**
+ * Walk an expression tree and apply each field's `serializeValue` hook to the
+ * matching condition's value. Typical use: consumer has the UI-facing
+ * `ExprNode` (e.g. status code chip with `"2XX"`) and wants the backend
+ * payload to carry the transformed form (`"2"`).
+ *
+ * Returns the original node (by reference) when nothing changed, so
+ * downstream memoization stays stable.
+ */
+export declare const applyFieldValueTransforms: (expr: ExprNode | null, fields: FieldMetadata[]) => ExprNode | null;

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

@@ -0,0 +1,43 @@
+const transformConditionValue = (condition, fieldsByName)=>{
+    const field = fieldsByName.get(condition.field);
+    const transform = field?.serializeValue;
+    if (!transform) return condition;
+    const { value } = condition;
+    if (null == value) return condition;
+    if (Array.isArray(value)) {
+        const next = value.map((v)=>transform(v));
+        if (next.every((v, i)=>v === value[i])) return condition;
+        return {
+            ...condition,
+            value: next
+        };
+    }
+    const next = transform(value);
+    if (next === value) return condition;
+    return {
+        ...condition,
+        value: next
+    };
+};
+const transformGroup = (group, fieldsByName)=>{
+    const children = group.children.map((child)=>transformNode(child, fieldsByName));
+    if (children.every((c, i)=>c === group.children[i])) return group;
+    return {
+        ...group,
+        children
+    };
+};
+const transformNode = (node, fieldsByName)=>{
+    if ('condition' === node.type) return transformConditionValue(node, fieldsByName);
+    return transformGroup(node, fieldsByName);
+};
+const applyFieldValueTransforms = (expr, fields)=>{
+    if (!expr) return expr;
+    if (!fields.some((f)=>f.serializeValue)) return expr;
+    const fieldsByName = new Map(fields.map((f)=>[
+            f.name,
+            f
+        ]));
+    return transformNode(expr, fieldsByName);
+};
+export { applyFieldValueTransforms };

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

@@ -0,0 +1,21 @@
+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.
+ *
+ * Reserved names and what they auto-attach (unless the consumer already
+ * provided a value for that slot):
+ *
+ * | `name`        | Attaches                                                                                   |
+ * | ------------- | ------------------------------------------------------------------------------------------ |
+ * | `status_code` | HTTP status code: `acceptChar`, `normalize`, `getSuggestions`, `validate`, `serializeValue` |
+ *
+ * Consumer-supplied callbacks always win over the auto-wired ones. 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.
+ */
+export declare const applyKnownFieldHelpers: (fields: FieldMetadata[]) => FieldMetadata[];

package/dist/components/FilterInput/lib/{applyFieldPresets.js → applyKnownFieldHelpers.js}

@@ -1,27 +1,29 @@
-import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
-const PRESET_HELPERS = {
+import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
+const KNOWN_FIELD_HELPERS = {
     status_code: ()=>({
             acceptChar: createStatusCodeInputFilter(),
             normalize: createStatusCodeNormalizer(),
             getSuggestions: createStatusCodeSuggestions(),
-            validate: createStatusCodeValidator()
+            validate: createStatusCodeValidator(),
+            serializeValue: createStatusCodeSerializer()
         })
 };
-const applyFieldPresets = (fields)=>{
+const applyKnownFieldHelpers = (fields)=>{
     let changed = false;
     const out = fields.map((field)=>{
-        if (!field.preset) return field;
-        const helpers = PRESET_HELPERS[field.preset]?.();
-        if (!helpers) return field;
+        const factory = KNOWN_FIELD_HELPERS[field.name];
+        if (!factory) return field;
+        const helpers = factory();
         changed = true;
         return {
             ...field,
             acceptChar: field.acceptChar ?? helpers.acceptChar,
             normalize: field.normalize ?? helpers.normalize,
             getSuggestions: field.getSuggestions ?? helpers.getSuggestions,
-            validate: field.validate ?? helpers.validate
+            validate: field.validate ?? helpers.validate,
+            serializeValue: field.serializeValue ?? helpers.serializeValue
         };
     });
     return changed ? out : fields;
 };
-export { applyFieldPresets };
+export { applyKnownFieldHelpers };

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

@@ -1,7 +1,8 @@
 export type { DatePreset } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
 export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset, } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
 export { applyAcceptChar } from './applyAcceptChar';
-export { applyFieldPresets } from './applyFieldPresets';
+export { applyFieldValueTransforms } from './applyFieldValueTransforms';
+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';
@@ -11,4 +12,4 @@ export { getCurrentValueTokenText, getValueFilterText } from './menuFilterText';
 export { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator, } from './operators';
 export { type FilterParseError, isFilterParseError, parseExpression } from './parseExpression';
 export { serializeExpression } from './serializeExpression';
-export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, } from './statusCode';
+export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, } from './statusCode';

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

@@ -1,6 +1,7 @@
 import { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } from "../FilterInputMenu/FilterInputDateValueMenu/constants.js";
 import { applyAcceptChar } from "./applyAcceptChar.js";
-import { applyFieldPresets } from "./applyFieldPresets.js";
+import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
+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";
@@ -10,5 +11,5 @@ import { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.j
 import { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator } from "./operators.js";
 import { isFilterParseError, parseExpression } from "./parseExpression/index.js";
 import { serializeExpression } from "./serializeExpression.js";
-import { createStatusCodeInputFilter, createStatusCodeNormalizer, 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, applyFieldPresets, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };
+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 };

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

@@ -1,6 +1,16 @@
-import type { ExprNode } from '../types';
+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.
  */
-export declare const serializeExpression: (expr: ExprNode | null) => string;
+export declare const serializeExpression: (expr: ExprNode | null, fields?: FieldMetadata[]) => string;

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

@@ -1,3 +1,4 @@
+import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
 const quoteValue = (v)=>`"${v}"`;
 const serializeValue = (condition)=>{
     if ('is_null' === condition.operator || 'is_not_null' === condition.operator) return '';
@@ -27,8 +28,10 @@ const serializeNode = (node, isTopLevel)=>{
     if ('condition' === node.type) return serializeCondition(node);
     return serializeGroup(node, isTopLevel);
 };
-const serializeExpression = (expr)=>{
+const serializeExpression = (expr, fields)=>{
     if (!expr) return '';
-    return serializeNode(expr, true);
+    const normalized = fields ? applyFieldValueTransforms(expr, fields) : expr;
+    if (!normalized) return '';
+    return serializeNode(normalized, true);
 };
 export { serializeExpression };

package/dist/components/FilterInput/lib/statusCode/createStatusCodeSerializer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Build the `serializeValue` callback for the HTTP status code field. Strips
+ * trailing mask placeholders (`X` / `x`) from the UI value so the backend
+ * receives the shorter class form:
+ *
+ *   "2XX" → "2"
+ *   "22X" → "22"
+ *   "222" → "222"
+ *   "4XX" → "4"
+ *   "40X" → "40"
+ *
+ * Anything that isn't a status-code-shaped string (e.g. a number, boolean,
+ * or freeform text) is returned unchanged so invalid committed values still
+ * surface in the backend payload for the parser to reject.
+ */
+export declare const createStatusCodeSerializer: () => ((value: string | number | boolean) => string | number | boolean);

package/dist/components/FilterInput/lib/statusCode/createStatusCodeSerializer.js

@@ -0,0 +1,6 @@
+const createStatusCodeSerializer = ()=>(value)=>{
+        if ('string' != typeof value) return value;
+        if (!/^\d[\dX]{0,2}$/i.test(value)) return value;
+        return value.replace(/X+$/i, '');
+    };
+export { createStatusCodeSerializer };

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

@@ -1,4 +1,5 @@
 export { createStatusCodeInputFilter } from './createStatusCodeInputFilter';
 export { createStatusCodeNormalizer } from './createStatusCodeNormalizer';
+export { createStatusCodeSerializer } from './createStatusCodeSerializer';
 export { createStatusCodeSuggestions } from './createStatusCodeSuggestions';
 export { createStatusCodeValidator } from './createStatusCodeValidator';

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

@@ -1,5 +1,6 @@
 import { createStatusCodeInputFilter } from "./createStatusCodeInputFilter.js";
 import { createStatusCodeNormalizer } from "./createStatusCodeNormalizer.js";
+import { createStatusCodeSerializer } from "./createStatusCodeSerializer.js";
 import { createStatusCodeSuggestions } from "./createStatusCodeSuggestions.js";
 import { createStatusCodeValidator } from "./createStatusCodeValidator.js";
-export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator };
+export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator };

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

@@ -44,13 +44,6 @@ export interface FieldValueOption {
         text: string;
     };
 }
-/**
- * Built-in field presets. Setting `preset` on a `FieldMetadata` wires the
- * corresponding factory helpers into `acceptChar` / `normalize` /
- * `getSuggestions` / `validate` automatically. Consumer-supplied callbacks
- * always win over the preset.
- */
-export type FieldPreset = 'status_code';
 /**
  * Field Metadata Interface
  * Matches backend structure for field definitions
@@ -63,12 +56,6 @@ export interface FieldMetadata {
     operators?: FilterOperator[];
     default?: string | number | boolean;
     values?: FieldValueOption[];
-    /**
-     * Built-in DS preset that wires masking / validation / suggestions without
-     * requiring the consumer to import the factory helpers themselves. Any
-     * callback explicitly provided on this `FieldMetadata` wins over the preset.
-     */
-    preset?: FieldPreset;
     /**
      * Shorthand for simple string values (e.g. `["GET", "POST", "PUT"]`).
      * Automatically converted to `FieldValueOption[]` where `value === label`.
@@ -111,6 +98,15 @@ export interface FieldMetadata {
      * commits apply this per token.
      */
     normalize?: (value: string | number | boolean) => string | number | boolean;
+    /**
+     * Optional backend-value transformer. The UI stores whatever
+     * `normalize` produced (e.g. `"2XX"`), but some backends want a
+     * stripped form (e.g. `"2"`). Pass the expression tree through
+     * `applyFieldValueTransforms(expr, fields)` — or a string through
+     * `serializeExpression(expr, fields)` — to apply this hook when
+     * emitting the query. Display in the chip is unaffected.
+     */
+    serializeValue?: (value: string | number | boolean) => string | number | boolean;
 }
 /**
  * Expression Tree Types

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "0.27.0",
-  "generatedAt": "2026-04-20T14:56:46.717Z",
+  "generatedAt": "2026-04-20T18:41:23.104Z",
   "components": [
     {
       "name": "Alert",
@@ -15197,7 +15197,8 @@
         {
           "name": "fields",
           "type": "FieldMetadata[] | undefined",
-          "required": false
+          "required": false,
+          "description": "Filter-field configurations driving the autocomplete. Most fields are\npassed through as-is, but a few names are **reserved** and auto-wired\nwith design-system helpers (`acceptChar` / `normalize` / `getSuggestions`\n/ `validate`). Current reserved names:\n\n  - `status_code` — HTTP status code field (mask suggestions, format\n    validation, digit-or-X input filter, partial-input normalization).\n\nConsumer-supplied callbacks always override the auto-wiring, so you can\nopt out per-field. For the same helpers on a field with a different\n`name`, import the factories (`createStatusCodeSuggestions`, …) and\nattach them manually."
         },
         {
           "name": "value",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.0.0-rc-feature-AS-877-fix-filter-code.2",
+  "version": "1.0.0-rc-feature-AS-877-fix-filter-code.4",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",

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

@@ -1,8 +0,0 @@
-import type { FieldMetadata } from '../types';
-/**
- * Resolve `FieldMetadata.preset` into concrete helpers. Consumer-supplied
- * callbacks (`acceptChar` / `normalize` / `getSuggestions` / `validate`)
- * always win over the preset so individual fields can still override parts
- * of a preset when needed.
- */
-export declare const applyFieldPresets: (fields: FieldMetadata[]) => FieldMetadata[];