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

package/dist/components/FilterInput/FilterInput.js

@@ -6,7 +6,8 @@ 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";
-const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filter...', error = false, showKeyboardHint = false, className, ...props })=>{
+import { applyFieldPresets } from "./lib/applyFieldPresets.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);
     const buildingChipRef = useRef(null);
@@ -15,6 +16,9 @@ const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filt
         if (el) chipRegistryRef.current.set(id, el);
         else chipRegistryRef.current.delete(id);
     }, []);
+    const fields = useMemo(()=>applyFieldPresets(rawFields), [
+        rawFields
+    ]);
     const { conditions, connectors, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue } = useFilterInputExpression({
         fields,
         value,

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, type StatusCodeSuggestionsOptions, serializeExpression, } from './lib';
-export type { Condition, ExprNode, FieldMetadata, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';
+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';

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

@@ -0,0 +1,8 @@
+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[];

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

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

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

@@ -1,6 +1,7 @@
 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 { 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';
@@ -10,4 +11,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, type StatusCodeSuggestionsOptions, } from './statusCode';
+export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, } from './statusCode';

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

@@ -1,5 +1,6 @@
 import { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } from "../FilterInputMenu/FilterInputDateValueMenu/constants.js";
 import { applyAcceptChar } from "./applyAcceptChar.js";
+import { applyFieldPresets } from "./applyFieldPresets.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,4 +11,4 @@ import { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelec
 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, 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 };
+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 };

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

@@ -1,16 +1,17 @@
 import type { FieldValueOption } from '../../types';
-import { type StatusCodeSuggestionsOptions } from './utils';
 /**
  * Build the `getSuggestions` callback for an HTTP status code field. The
  * returned function:
- *   - reads the active `maskRoots` from `options.codes`
- *   - on empty input, offers every available class mask
+ *   - on empty input, offers every HTTP class mask (`1XX..5XX`)
  *   - on partial input (`"3"`, `"3X"`, `"30"`, …), expands it via
  *     `canonicalizeStatusCodeInput` and offers the single matching mask
  *   - merges any `context.selectedValues` (values already committed to the
  *     chip) in front of the input-driven output so they always appear with
  *     their canonical badge styling
+ *
+ * No backend config is required — the status-code class range is fixed to
+ * `[1..5]` per the HTTP spec.
  */
-export declare const createStatusCodeSuggestions: (options?: StatusCodeSuggestionsOptions) => ((inputText: string, context?: {
+export declare const createStatusCodeSuggestions: () => ((inputText: string, context?: {
     selectedValues?: Array<string | number | boolean>;
 }) => FieldValueOption[]);

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

@@ -1,7 +1,6 @@
-import { canonicalizeStatusCodeInput, getMaskRoots, makeMask } from "./utils/index.js";
-const createStatusCodeSuggestions = (options)=>{
-    const maskRoots = getMaskRoots(options?.codes);
-    const resolveSelected = (selectedValues)=>(selectedValues ?? []).map((v)=>String(v)).filter((s)=>/^\d[\dX]{0,2}$/.test(s) && maskRoots.includes(s.charAt(0))).map((s)=>makeMask(s));
+import { MASK_ROOTS, canonicalizeStatusCodeInput, makeMask } from "./utils/index.js";
+const createStatusCodeSuggestions = ()=>{
+    const resolveSelected = (selectedValues)=>(selectedValues ?? []).map((v)=>String(v)).filter((s)=>/^\d[\dX]{0,2}$/.test(s) && MASK_ROOTS.includes(s.charAt(0))).map((s)=>makeMask(s));
     return (inputText, context)=>{
         const norm = inputText.trim();
         const selected = resolveSelected(context?.selectedValues);
@@ -10,8 +9,8 @@ const createStatusCodeSuggestions = (options)=>{
                 ...selected,
                 ...primary.filter((o)=>!seen.has(String(o.value)))
             ];
-        if (0 === norm.length) return merge(maskRoots.map((d)=>makeMask(`${d}XX`)));
-        const mask = canonicalizeStatusCodeInput(norm, maskRoots);
+        if (0 === norm.length) return merge(MASK_ROOTS.map((d)=>makeMask(`${d}XX`)));
+        const mask = canonicalizeStatusCodeInput(norm);
         if (!mask) return selected;
         return merge([
             makeMask(mask)

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

@@ -1,4 +1,3 @@
-import { type StatusCodeSuggestionsOptions } from './utils';
 /**
  * Build a validator for the HTTP status code field. Accepts only 3-character
  * values whose leading digit is a valid HTTP class (`[1..5]`) and whose
@@ -9,11 +8,5 @@ import { type StatusCodeSuggestionsOptions } from './utils';
  *
  * Returns `true` when the value is invalid, matching the
  * `FieldMetadata.validate` contract.
- *
- * The `options` argument is accepted for API symmetry with
- * `createStatusCodeSuggestions` (same wiring on the field), but validity is
- * bound to the static `[1..5]` HTTP class range rather than `codes` — the
- * backend's available-data list doesn't narrow what the user may legitimately
- * type.
  */
-export declare const createStatusCodeValidator: (_options?: StatusCodeSuggestionsOptions) => ((value: string | number | boolean) => boolean);
+export declare const createStatusCodeValidator: () => ((value: string | number | boolean) => boolean);

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

@@ -1,8 +1,8 @@
-import { STATUS_CODE_LENGTH, VALID_MASK_ROOTS } from "./utils/index.js";
-const createStatusCodeValidator = (_options)=>(value)=>{
+import { MASK_ROOTS, STATUS_CODE_LENGTH } from "./utils/index.js";
+const createStatusCodeValidator = ()=>(value)=>{
         const s = String(value);
         if (s.length !== STATUS_CODE_LENGTH) return true;
-        if (!VALID_MASK_ROOTS.has(s.charAt(0))) return true;
+        if (!MASK_ROOTS.includes(s.charAt(0))) return true;
         return !/^(XX|\dX|\d\d)$/.test(s.slice(1));
     };
 export { createStatusCodeValidator };

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

@@ -2,4 +2,3 @@ export { createStatusCodeInputFilter } from './createStatusCodeInputFilter';
 export { createStatusCodeNormalizer } from './createStatusCodeNormalizer';
 export { createStatusCodeSuggestions } from './createStatusCodeSuggestions';
 export { createStatusCodeValidator } from './createStatusCodeValidator';
-export type { StatusCodeSuggestionsOptions } from './utils';

package/dist/components/FilterInput/lib/statusCode/utils/canonicalize.d.ts

@@ -14,7 +14,7 @@
  * Rejected:
  *   "3X0"            (digit after placeholder)
  *   "X30"            (starts with placeholder)
- *   "6..."           (leading digit not in `maskRoots`)
+ *   "6..."           (leading digit outside the `[1..5]` HTTP class range)
  *   "ab..."          (non-digit, non-X)
  */
-export declare const canonicalizeStatusCodeInput: (input: string, maskRoots: string[]) => string | null;
+export declare const canonicalizeStatusCodeInput: (input: string) => string | null;

package/dist/components/FilterInput/lib/statusCode/utils/canonicalize.js

@@ -1,10 +1,10 @@
-import { MASK_PLACEHOLDER, STATUS_CODE_LENGTH } from "./constants.js";
-const canonicalizeStatusCodeInput = (input, maskRoots)=>{
+import { MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH } from "./constants.js";
+const canonicalizeStatusCodeInput = (input)=>{
     const s = input.toUpperCase();
     if (0 === s.length || s.length > STATUS_CODE_LENGTH) return null;
     if (!/^[\dX]+$/.test(s)) return null;
     const d1 = s.charAt(0);
-    if (d1 === MASK_PLACEHOLDER || !maskRoots.includes(d1)) return null;
+    if (d1 === MASK_PLACEHOLDER || !MASK_ROOTS.includes(d1)) return null;
     if (1 === s.length) return `${d1}XX`;
     const c2 = s.charAt(1);
     if (c2 === MASK_PLACEHOLDER) {

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

@@ -1,8 +1,12 @@
 import type { BadgeColor } from '../../../../Badge';
 /** The five valid HTTP status-code classes, used both for suggestion-building
- *  and validation. Backed by the standard HTTP spec, independent of what the
- *  backend happens to carry. */
-export declare const VALID_MASK_ROOTS: Set<string>;
+ *  and validation. Backed by the standard HTTP spec — entirely frontend-driven,
+ *  independent of what the backend config carries.
+ *
+ *  Typed as `readonly string[]` (not `as const`) so `.includes(someString)`
+ *  stays callable without casting; declaration-file generation rejects the
+ *  tuple-narrowed overload of `.includes`. */
+export declare const MASK_ROOTS: readonly string[];
 /** Badge color per HTTP class, keyed by the leading digit. Derived from the
  *  AS-877 Figma designs: informational greys, success greens, redirect blues,
  *  client-error ambers, server-error reds. */

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

@@ -1,10 +1,10 @@
-const VALID_MASK_ROOTS = new Set([
+const MASK_ROOTS = [
     '1',
     '2',
     '3',
     '4',
     '5'
-]);
+];
 const HTTP_CLASS_BADGE_COLOR = {
     1: 'slate',
     2: 'green',
@@ -14,4 +14,4 @@ const HTTP_CLASS_BADGE_COLOR = {
 };
 const STATUS_CODE_LENGTH = 3;
 const MASK_PLACEHOLDER = 'X';
-export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, STATUS_CODE_LENGTH, VALID_MASK_ROOTS };
+export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH };

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

@@ -1,5 +1,3 @@
 export { canonicalizeStatusCodeInput } from './canonicalize';
-export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, STATUS_CODE_LENGTH, VALID_MASK_ROOTS, } from './constants';
+export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH, } from './constants';
 export { makeMask } from './makeMask';
-export { getMaskRoots } from './maskRoots';
-export type { StatusCodeSuggestionsOptions } from './types';

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

@@ -1,5 +1,4 @@
 import { canonicalizeStatusCodeInput } from "./canonicalize.js";
-import { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, STATUS_CODE_LENGTH, VALID_MASK_ROOTS } from "./constants.js";
+import { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH } from "./constants.js";
 import { makeMask } from "./makeMask.js";
-import { getMaskRoots } from "./maskRoots.js";
-export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, STATUS_CODE_LENGTH, VALID_MASK_ROOTS, canonicalizeStatusCodeInput, getMaskRoots, makeMask };
+export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, MASK_ROOTS, STATUS_CODE_LENGTH, canonicalizeStatusCodeInput, makeMask };

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

@@ -44,6 +44,13 @@ 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
@@ -56,6 +63,12 @@ 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`.

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.26.0",
-  "generatedAt": "2026-04-20T13:27:55.627Z",
+  "version": "0.27.0",
+  "generatedAt": "2026-04-20T14:56:46.717Z",
   "components": [
     {
       "name": "Alert",
@@ -15197,8 +15197,7 @@
         {
           "name": "fields",
           "type": "FieldMetadata[] | undefined",
-          "required": false,
-          "defaultValue": "[]"
+          "required": false
         },
         {
           "name": "value",

package/package.json

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

package/dist/components/FilterInput/lib/statusCode/utils/maskRoots.d.ts

@@ -1,4 +0,0 @@
-/** Extract the HTTP class digits (`1`..`5`) that actually appear as single-
- *  character entries in the backend `codes` list. These become the "available"
- *  class masks the helper is willing to emit. */
-export declare const getMaskRoots: (codes: string[] | undefined) => string[];

package/dist/components/FilterInput/lib/statusCode/utils/maskRoots.js

@@ -1,3 +0,0 @@
-import { VALID_MASK_ROOTS } from "./constants.js";
-const getMaskRoots = (codes)=>(codes ?? []).filter((c)=>1 === c.length && VALID_MASK_ROOTS.has(c));
-export { getMaskRoots };

package/dist/components/FilterInput/lib/statusCode/utils/types.d.ts

@@ -1,8 +0,0 @@
-export interface StatusCodeSuggestionsOptions {
-    /**
-     * Raw backend status-code list. The helper keeps only 1-char entries in
-     * `[1..5]` as mask roots; everything else is ignored. When omitted or
-     * empty, the helper returns `[]` for every input.
-     */
-    codes?: string[];
-}

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

@@ -1,6 +0,0 @@
-/**
- * Example HTTP status code backend response used by FilterInput stories.
- * Mixes 1-char HTTP classes with 3-char concrete codes — the same shape the
- * real backend produces. See AS-877 design spec.
- */
-export declare const MOCK_STATUS_CODES: string[];

package/dist/components/FilterInput/stories/mockStatusCodes.js

@@ -1,20 +0,0 @@
-const MOCK_STATUS_CODES = [
-    '1',
-    '2',
-    '3',
-    '4',
-    '5',
-    '101',
-    '200',
-    '201',
-    '301',
-    '302',
-    '400',
-    '401',
-    '403',
-    '404',
-    '500',
-    '502',
-    '503'
-];
-export { MOCK_STATUS_CODES };