@wallarm-org/design-system 0.26.0 → 0.27.0

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 { createStatusCodeSuggestions, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
-export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, createStatusCodeSuggestions, isFilterParseError, parseExpression, serializeExpression };
+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 };

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export declare const applyAcceptChar: (text: string, acceptChar: (c: string) => boolean) => string;

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

@@ -0,0 +1,5 @@
+const applyAcceptChar = (text, acceptChar)=>{
+    const filtered = Array.from(text).filter((c)=>',' === c || ' ' === c || acceptChar(c)).join('');
+    return filtered === text ? text : filtered;
+};
+export { applyAcceptChar };

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

@@ -1,9 +1,15 @@
 import type { FieldMetadata, FieldValueOption } from '../types';
 /**
  * Get value options for a field.
- * Priority: `getSuggestions(inputText)` > `values` > `options` (converted to `{value, label}`).
+ * 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).
  */
-export declare const getFieldValues: (field: FieldMetadata, inputText?: string) => FieldValueOption[];
+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.

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

@@ -1,5 +1,5 @@
-const getFieldValues = (field, inputText = '')=>{
-    if (field.getSuggestions) return field.getSuggestions(inputText);
+const getFieldValues = (field, inputText = '', context)=>{
+    if (field.getSuggestions) return field.getSuggestions(inputText, context);
     const fromValues = field.values ?? [];
     if (fromValues.length > 0) return fromValues;
     return field.options?.map((s)=>({

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

@@ -1,12 +1,13 @@
 export type { DatePreset } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
 export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset, } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
+export { applyAcceptChar } from './applyAcceptChar';
 export { chipIdToConditionIndex, findChipSplitIndex } from './conditions';
 export { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
 export { buildContainerAnchoredRect, isMenuRelated } from './dom';
 export { getFieldValues, hasFieldValues, hasStaticAllowlist } from './fields';
 export { filterAndSort } from './filterSort';
-export { getValueFilterText } from './menuFilterText';
+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 { createStatusCodeSuggestions, type StatusCodeSuggestionsOptions, } from './statusCodeSuggestions';
+export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, type StatusCodeSuggestionsOptions, } from './statusCode';

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

@@ -1,12 +1,13 @@
 import { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } from "../FilterInputMenu/FilterInputDateValueMenu/constants.js";
+import { applyAcceptChar } from "./applyAcceptChar.js";
 import { chipIdToConditionIndex, findChipSplitIndex } from "./conditions.js";
 import { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
 import { buildContainerAnchoredRect, isMenuRelated } from "./dom.js";
 import { getFieldValues, hasFieldValues, hasStaticAllowlist } from "./fields.js";
 import { filterAndSort } from "./filterSort.js";
-import { getValueFilterText } from "./menuFilterText.js";
+import { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.js";
 import { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator } from "./operators.js";
 import { isFilterParseError, parseExpression } from "./parseExpression/index.js";
 import { serializeExpression } from "./serializeExpression.js";
-import { createStatusCodeSuggestions } from "./statusCodeSuggestions.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, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeSuggestions, filterAndSort, findChipSplitIndex, formatDateForChip, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };
+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 };

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

@@ -1,9 +1,24 @@
 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.
+ */
+export declare const getCurrentValueTokenText: (editingSegment: string | null, inputText: string, segmentMenuFilterText: string, selectedOperator: FilterOperator | null) => string;
 /**
  * Derive the filter text for the value menu.
  *
- * For multi-select operators, extracts the last comma-separated token
- * (the one the user is currently typing) and uses it for filtering.
- * If that token already matches a known value, returns '' to show all options.
+ * 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.
  */
-export declare const getValueFilterText: (editingSegment: string | null, inputText: string, segmentMenuFilterText: string, selectedOperator: FilterOperator | null, fieldValues: FieldValueOption[]) => string;
+export declare const getValueFilterText: (currentTokenText: string, selectedOperator: FilterOperator | null, fieldValues: FieldValueOption[]) => string;

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

@@ -1,13 +1,16 @@
 import { isMultiSelectOperator } from "./operators.js";
-const getValueFilterText = (editingSegment, inputText, segmentMenuFilterText, selectedOperator, fieldValues)=>{
-    if ('value' !== editingSegment) return inputText;
-    if (!isMultiSelectOperator(selectedOperator)) return segmentMenuFilterText;
-    const lastToken = segmentMenuFilterText.split(',').pop()?.trim() ?? '';
-    if (!lastToken) return '';
+const getCurrentValueTokenText = (editingSegment, inputText, segmentMenuFilterText, selectedOperator)=>{
+    const raw = 'value' === editingSegment ? segmentMenuFilterText : inputText;
+    if (!isMultiSelectOperator(selectedOperator)) return raw;
+    return raw.split(',').pop()?.trim() ?? '';
+};
+const getValueFilterText = (currentTokenText, selectedOperator, fieldValues)=>{
+    if (!isMultiSelectOperator(selectedOperator)) return currentTokenText;
+    if (!currentTokenText) return '';
     if (fieldValues.length > 0) {
-        const isKnownValue = fieldValues.some((v)=>v.label.toLowerCase() === lastToken.toLowerCase() || String(v.value).toLowerCase() === lastToken.toLowerCase());
+        const isKnownValue = fieldValues.some((v)=>v.label.toLowerCase() === currentTokenText.toLowerCase() || String(v.value).toLowerCase() === currentTokenText.toLowerCase());
         if (isKnownValue) return '';
     }
-    return lastToken;
+    return currentTokenText;
 };
-export { getValueFilterText };
+export { getCurrentValueTokenText, getValueFilterText };

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

@@ -0,0 +1,6 @@
+/**
+ * Per-character input filter for the HTTP status code field. Accepts only
+ * digits and the `X` mask marker (case-insensitive). Meant to be wired to
+ * `FieldMetadata.acceptChar` so typing in the value segment is constrained.
+ */
+export declare const createStatusCodeInputFilter: () => ((char: string) => boolean);

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

@@ -0,0 +1,2 @@
+const createStatusCodeInputFilter = ()=>(c)=>/^[0-9xX]$/.test(c);
+export { createStatusCodeInputFilter };

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

@@ -0,0 +1,10 @@
+/**
+ * Commit-time normalizer for the HTTP status code field. Pads partial input
+ * to three characters and uppercases the mask marker:
+ *   - "2"  → "2XX"
+ *   - "22" → "22X"
+ *   - "2x" → "2XX"
+ *   - "222", "4XX", "40X" → unchanged (already 3 chars)
+ * Leaves anything unrecognised alone so `validate` can still flag it.
+ */
+export declare const createStatusCodeNormalizer: () => ((value: string | number | boolean) => string | number | boolean);

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

@@ -0,0 +1,9 @@
+const createStatusCodeNormalizer = ()=>(value)=>{
+        if ('string' != typeof value && 'number' != typeof value) return value;
+        const s = String(value).toUpperCase();
+        if (!/^\d[0-9X]{0,2}$/.test(s)) return value;
+        if (1 === s.length) return `${s}XX`;
+        if (2 === s.length) return `${s}X`;
+        return s;
+    };
+export { createStatusCodeNormalizer };

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

@@ -0,0 +1,16 @@
+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 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
+ */
+export declare const createStatusCodeSuggestions: (options?: StatusCodeSuggestionsOptions) => ((inputText: string, context?: {
+    selectedValues?: Array<string | number | boolean>;
+}) => FieldValueOption[]);

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

@@ -0,0 +1,21 @@
+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));
+    return (inputText, context)=>{
+        const norm = inputText.trim();
+        const selected = resolveSelected(context?.selectedValues);
+        const seen = new Set(selected.map((o)=>String(o.value)));
+        const merge = (primary)=>[
+                ...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 (!mask) return selected;
+        return merge([
+            makeMask(mask)
+        ]);
+    };
+};
+export { createStatusCodeSuggestions };

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

@@ -0,0 +1,19 @@
+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
+ * remaining two characters form one of:
+ *   - `XX` (mask like `4XX`)
+ *   - `dX` (narrowed mask like `40X`)
+ *   - `dd` (concrete code like `401`)
+ *
+ * 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);

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

@@ -0,0 +1,8 @@
+import { STATUS_CODE_LENGTH, VALID_MASK_ROOTS } from "./utils/index.js";
+const createStatusCodeValidator = (_options)=>(value)=>{
+        const s = String(value);
+        if (s.length !== STATUS_CODE_LENGTH) return true;
+        if (!VALID_MASK_ROOTS.has(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

@@ -0,0 +1,5 @@
+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/index.js

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

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

@@ -0,0 +1,20 @@
+/**
+ * Normalize the user-typed input (up to 3 chars, digits + X, case-insensitive)
+ * into the canonical mask it represents. Returns `null` if the shape isn't a
+ * valid status-code fragment.
+ *
+ * Accepted inputs:
+ *   "3"   → "3XX"    (single digit pads to full class mask)
+ *   "3X"  → "3XX"    (partial mask)
+ *   "3XX" → "3XX"    (full mask)
+ *   "30"  → "30X"    (two digits pad to narrowed mask)
+ *   "30X" → "30X"    (full narrowed mask)
+ *   "301" → "301"    (concrete code)
+ *
+ * Rejected:
+ *   "3X0"            (digit after placeholder)
+ *   "X30"            (starts with placeholder)
+ *   "6..."           (leading digit not in `maskRoots`)
+ *   "ab..."          (non-digit, non-X)
+ */
+export declare const canonicalizeStatusCodeInput: (input: string, maskRoots: string[]) => string | null;

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

@@ -0,0 +1,19 @@
+import { MASK_PLACEHOLDER, STATUS_CODE_LENGTH } from "./constants.js";
+const canonicalizeStatusCodeInput = (input, maskRoots)=>{
+    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 (1 === s.length) return `${d1}XX`;
+    const c2 = s.charAt(1);
+    if (c2 === MASK_PLACEHOLDER) {
+        if (3 === s.length && s.charAt(2) !== MASK_PLACEHOLDER) return null;
+        return `${d1}XX`;
+    }
+    if (2 === s.length) return `${d1}${c2}X`;
+    const c3 = s.charAt(2);
+    if (c3 === MASK_PLACEHOLDER) return `${d1}${c2}X`;
+    return `${d1}${c2}${c3}`;
+};
+export { canonicalizeStatusCodeInput };

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

@@ -0,0 +1,14 @@
+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>;
+/** 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. */
+export declare const HTTP_CLASS_BADGE_COLOR: Record<string, BadgeColor>;
+/** Fixed length of a status-code value (mask or concrete). Exposed as a
+ *  constant so downstream helpers stay in sync. */
+export declare const STATUS_CODE_LENGTH = 3;
+/** Placeholder character used inside masks (e.g. the `X` in `4XX`). */
+export declare const MASK_PLACEHOLDER = "X";

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

@@ -0,0 +1,17 @@
+const VALID_MASK_ROOTS = new Set([
+    '1',
+    '2',
+    '3',
+    '4',
+    '5'
+]);
+const HTTP_CLASS_BADGE_COLOR = {
+    1: 'slate',
+    2: 'green',
+    3: 'blue',
+    4: 'amber',
+    5: 'red'
+};
+const STATUS_CODE_LENGTH = 3;
+const MASK_PLACEHOLDER = 'X';
+export { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, STATUS_CODE_LENGTH, VALID_MASK_ROOTS };

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

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

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

@@ -0,0 +1,5 @@
+import { canonicalizeStatusCodeInput } from "./canonicalize.js";
+import { HTTP_CLASS_BADGE_COLOR, MASK_PLACEHOLDER, STATUS_CODE_LENGTH, VALID_MASK_ROOTS } 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 };

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

@@ -0,0 +1,7 @@
+import type { FieldValueOption } from '../../../types';
+/** Build a `FieldValueOption` for a status-code mask or concrete code. Badge
+ *  color is derived from the leading digit via `HTTP_CLASS_BADGE_COLOR`.
+ *  Throws if the leading digit has no color mapping — this is unreachable in
+ *  practice because callers gate on `maskRoots`, but the check is kept as a
+ *  safety net so a future refactor can't silently emit a colorless pill. */
+export declare const makeMask: (label: string) => FieldValueOption;

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

@@ -0,0 +1,14 @@
+import { HTTP_CLASS_BADGE_COLOR } from "./constants.js";
+const makeMask = (label)=>{
+    const color = HTTP_CLASS_BADGE_COLOR[label.charAt(0)];
+    if (!color) throw new Error(`statusCode: no badge color for mask "${label}"`);
+    return {
+        value: label,
+        label,
+        badge: {
+            color,
+            text: label
+        }
+    };
+};
+export { makeMask };

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

@@ -0,0 +1,4 @@
+/** 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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,8 @@
+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.js

@@ -1,8 +1,10 @@
 const MOCK_STATUS_CODES = [
+    '1',
     '2',
     '3',
     '4',
     '5',
+    '101',
     '200',
     '201',
     '301',

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { BadgeColor } from '../Badge';
 /**
  * FilterInput Chip Variant Types
  */
@@ -39,7 +40,7 @@ export interface FieldValueOption {
     value: string | number | boolean;
     label: string;
     badge?: {
-        color: string;
+        color: BadgeColor;
         text: string;
     };
 }
@@ -66,8 +67,37 @@ export interface FieldMetadata {
      * input text. When provided, takes precedence over `values` and `options`.
      * The returned list is still post-filtered by `filterAndSort`, so prefix/includes
      * matching still applies — return items that contain the input text.
+     *
+     * The optional `context.selectedValues` carries any values already committed
+     * to the chip (in single- or multi-select form) so the helper can include
+     * them in its output with their canonical presentation (e.g. a badge color)
+     * even when they fall outside the current input-driven suggestions.
+     */
+    getSuggestions?: (inputText: string, context?: {
+        selectedValues?: Array<string | number | boolean>;
+    }) => FieldValueOption[];
+    /**
+     * Optional freeform-value validator. When provided, it runs in place of the
+     * static-allowlist check — return `true` to mark the value invalid. Useful
+     * for fields that accept arbitrary input but still have format rules
+     * (e.g. HTTP status code must be 3 chars, first digit in [1..5]).
+     */
+    validate?: (value: string | number | boolean) => boolean;
+    /**
+     * Optional per-character input filter. When the user is entering a value
+     * for this field (building or inline-editing the value segment), any
+     * character for which this returns `false` is stripped from the input
+     * on change. Separators that the filter should preserve (comma, space)
+     * are allowed through unconditionally.
+     */
+    acceptChar?: (char: string) => boolean;
+    /**
+     * Optional value normalizer. Runs on commit (after Enter / blur) before
+     * `validate`, so consumers can auto-complete partial input — e.g. a status
+     * code helper can turn "2" into "2XX" or "22" into "22X". Multi-select
+     * commits apply this per token.
      */
-    getSuggestions?: (inputText: string) => FieldValueOption[];
+    normalize?: (value: string | number | boolean) => string | number | boolean;
 }
 /**
  * Expression Tree Types

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.25.1",
-  "generatedAt": "2026-04-20T10:37:05.301Z",
+  "version": "0.26.0",
+  "generatedAt": "2026-04-20T13:27:55.627Z",
   "components": [
     {
       "name": "Alert",

package/package.json

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

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

@@ -1,10 +0,0 @@
-import type { FieldValueOption } from '../types';
-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[];
-}
-export declare const createStatusCodeSuggestions: (options?: StatusCodeSuggestionsOptions) => ((inputText: string) => FieldValueOption[]);

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

@@ -1,45 +0,0 @@
-const VALID_MASK_ROOTS = new Set([
-    '1',
-    '2',
-    '3',
-    '4',
-    '5'
-]);
-const HTTP_CLASS_BADGE_COLOR = {
-    1: 'var(--color-bg-light-success)',
-    2: 'var(--color-bg-success)',
-    3: 'var(--color-bg-info)',
-    4: 'var(--color-bg-warning)',
-    5: 'var(--color-bg-danger)'
-};
-const createStatusCodeSuggestions = (options)=>{
-    const maskRoots = (options?.codes ?? []).filter((c)=>1 === c.length && VALID_MASK_ROOTS.has(c));
-    const makeMask = (label)=>{
-        const color = HTTP_CLASS_BADGE_COLOR[label.charAt(0)];
-        if (!color) throw new Error(`statusCodeSuggestions: no badge color for mask "${label}"`);
-        return {
-            value: label,
-            label,
-            badge: {
-                color,
-                text: label
-            }
-        };
-    };
-    return (inputText)=>{
-        const norm = inputText.trim();
-        if (norm.length > 3) return [];
-        if (norm.length > 0 && !/^\d+$/.test(norm)) return [];
-        if (0 === norm.length) return maskRoots.map((d)=>makeMask(`${d}XX`));
-        const d1 = norm.charAt(0);
-        if (!maskRoots.includes(d1)) return [];
-        if (1 === norm.length) return [
-            makeMask(`${norm}XX`)
-        ];
-        if (2 === norm.length) return [
-            makeMask(`${norm}X`)
-        ];
-        return [];
-    };
-};
-export { createStatusCodeSuggestions };