@wallarm-org/design-system 0.25.1 → 0.26.0

package/dist/components/FilterInput/FilterInputErrors/parseFilterInputErrors.js

@@ -1,5 +1,5 @@
 import { isValidFieldValue } from "../hooks/useFilterInputAutocomplete/valueCommitHelpers.js";
-import { getFieldValues } from "../lib/index.js";
+import { getFieldValues, hasStaticAllowlist } from "../lib/index.js";
 const parseFilterInputErrors = (conditions, fields)=>{
     const errors = [];
     for (const condition of conditions){
@@ -11,7 +11,7 @@ const parseFilterInputErrors = (conditions, fields)=>{
                 errors.push(`Unknown field ${condition.field}`);
                 break;
             case 'value':
-                if (field && Array.isArray(condition.value)) {
+                if (field && hasStaticAllowlist(field) && Array.isArray(condition.value)) {
                     const fv = getFieldValues(field);
                     if (fv.length > 0) {
                         const invalidValues = condition.value.filter((v)=>!isValidFieldValue(fv, v));

package/dist/components/FilterInput/FilterInputMenu/FilterInputMenu.js

@@ -8,7 +8,8 @@ const FilterInputMenu = ({ fields, autocomplete })=>{
     const { inputText, menuState, selectedField, selectedOperator, menuPositioning, editingMultiValues, editingSingleValue, editingDateRange, inputRef, menuRef, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleRangeSelect, handleMenuClose, handleMenuDiscard, handleBuildingValueChange, segmentMenuFilterText, editingSegment, blurCommitRef } = autocomplete;
     const fieldFilterText = 'attribute' === editingSegment ? segmentMenuFilterText : inputText;
     const operatorFilterText = 'operator' === editingSegment ? segmentMenuFilterText : inputText;
-    const selectedFieldValues = selectedField ? getFieldValues(selectedField) : [];
+    const valueInputText = 'value' === editingSegment ? segmentMenuFilterText : inputText;
+    const selectedFieldValues = selectedField ? getFieldValues(selectedField, valueInputText) : [];
     const valueFilterText = getValueFilterText(editingSegment, inputText, segmentMenuFilterText, selectedOperator, selectedFieldValues);
     const showOperatorMenu = !!selectedField;
     const showValueMenu = !!selectedField && !!selectedOperator;

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/ValueMenuItem.js

@@ -8,20 +8,15 @@ const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect })=
         onSelect: onSelect,
         className: isPending ? 'bg-states-primary-hover' : void 0,
         children: [
-            option.badge ? /*#__PURE__*/ jsxs("div", {
+            option.badge ? /*#__PURE__*/ jsx("div", {
                 className: "flex items-center gap-4 px-6 py-2 rounded-4 text-xs font-medium max-w-[320px] min-h-[20px] overflow-clip",
                 style: {
                     backgroundColor: option.badge.color
                 },
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "size-6 rounded-full bg-current"
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        className: "min-w-0 truncate leading-4",
-                        children: option.badge.text
-                    })
-                ]
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "min-w-0 truncate leading-4",
+                    children: option.badge.text
+                })
             }) : /*#__PURE__*/ jsx("div", {
                 className: "min-w-0",
                 children: /*#__PURE__*/ jsx(Text, {

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/deriveAutocompleteValues.js

@@ -1,4 +1,4 @@
-import { chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, isMultiSelectOperator } from "../../lib/index.js";
+import { chipIdToConditionIndex, getDateDisplayLabel, getFieldValues, getOperatorLabel, hasStaticAllowlist, isMultiSelectOperator } from "../../lib/index.js";
 const getEditingCondition = (editingChipId, conditions)=>{
     if (!editingChipId) return null;
     const idx = chipIdToConditionIndex(editingChipId);
@@ -12,7 +12,7 @@ const deriveAutocompleteValues = ({ editingChipId, selectedField, selectedOperat
         const values = Array.isArray(editingCondition.value) ? editingCondition.value : null != editingCondition.value ? [
             editingCondition.value
         ] : [];
-        if (editingCondition.error && selectedField) {
+        if (editingCondition.error && selectedField && hasStaticAllowlist(selectedField)) {
             const fieldValues = getFieldValues(selectedField);
             if (fieldValues.length > 0) return values.filter((v)=>fieldValues.some((opt)=>opt.value === v));
         }

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/valueCommitHelpers.js

@@ -1,8 +1,9 @@
 import { MIN_DATE_STRING_LENGTH } from "../../FilterInputMenu/FilterInputDateValueMenu/constants.js";
-import { chipIdToConditionIndex, getFieldValues, isDatePreset } from "../../lib/index.js";
+import { chipIdToConditionIndex, getFieldValues, hasStaticAllowlist, isDatePreset } from "../../lib/index.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 (!hasStaticAllowlist(field)) return [];
     const fv = getFieldValues(field);
     if (0 === fv.length) return [];
     return values.reduce((acc, v, idx)=>{
@@ -26,7 +27,7 @@ const resolveSingleValue = (field, trimmed)=>{
     const match = findMatchingFieldValue(fv, trimmed);
     return {
         resolved: match ? match.value : trimmed,
-        error: fv.length > 0 && !match ? true : void 0
+        error: hasStaticAllowlist(field) && fv.length > 0 && !match ? true : void 0
     };
 };
 const resolveMultiValues = (field, trimmed)=>{

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

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

@@ -1,12 +1,19 @@
 import type { FieldMetadata, FieldValueOption } from '../types';
 /**
- * Get normalized value options for a field.
- * `values` (full FieldValueOption[]) takes precedence over `options` (string[] shorthand).
- * `options` strings are converted to `{ value: s, label: s }`.
+ * Get value options for a field.
+ * Priority: `getSuggestions(inputText)` > `values` > `options` (converted to `{value, label}`).
  */
-export declare const getFieldValues: (field: FieldMetadata) => FieldValueOption[];
+export declare const getFieldValues: (field: FieldMetadata, inputText?: string) => FieldValueOption[];
 /**
- * Check if a field has predefined values (from `values` or `options`).
- * Returns false for freeform fields (`options: []` or no values at all).
+ * 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).
  */
 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).
+ */
+export declare const hasStaticAllowlist: (field: FieldMetadata) => boolean;

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

@@ -1,10 +1,20 @@
-const getFieldValues = (field)=>{
+const getFieldValues = (field, inputText = '')=>{
+    if (field.getSuggestions) return field.getSuggestions(inputText);
     const fromValues = field.values ?? [];
-    const fromOptions = field.options?.map((s)=>({
+    if (fromValues.length > 0) return fromValues;
+    return field.options?.map((s)=>({
             value: s,
             label: s
         })) ?? [];
-    return fromValues.length > 0 ? fromValues : fromOptions;
 };
-const hasFieldValues = (field)=>getFieldValues(field).length > 0;
-export { getFieldValues, hasFieldValues };
+const hasFieldValues = (field)=>{
+    if (field.getSuggestions) return true;
+    if ((field.values ?? []).length > 0) return true;
+    return (field.options?.length ?? 0) > 0;
+};
+const hasStaticAllowlist = (field)=>{
+    if (field.getSuggestions) return false;
+    if ((field.values?.length ?? 0) > 0) return true;
+    return (field.options?.length ?? 0) > 0;
+};
+export { getFieldValues, hasFieldValues, hasStaticAllowlist };

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

@@ -3,9 +3,10 @@ export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset, } f
 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 } from './fields';
+export { getFieldValues, hasFieldValues, hasStaticAllowlist } from './fields';
 export { filterAndSort } from './filterSort';
 export { 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';

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

@@ -2,10 +2,11 @@ import { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } fr
 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 } from "./fields.js";
+import { getFieldValues, hasFieldValues, hasStaticAllowlist } from "./fields.js";
 import { filterAndSort } from "./filterSort.js";
 import { 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";
-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, filterAndSort, findChipSplitIndex, formatDateForChip, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };
+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 };

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

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

@@ -0,0 +1,45 @@
+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 };

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

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

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

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

@@ -61,6 +61,13 @@ export interface FieldMetadata {
      * Empty array `[]` means freeform input — no dropdown, user types any value.
      */
     options?: string[];
+    /**
+     * Optional callback to compute value suggestions dynamically from the current
+     * 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.
+     */
+    getSuggestions?: (inputText: string) => FieldValueOption[];
 }
 /**
  * Expression Tree Types

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.25.0",
-  "generatedAt": "2026-04-17T10:31:02.556Z",
+  "version": "0.25.1",
+  "generatedAt": "2026-04-20T10:37:05.301Z",
   "components": [
     {
       "name": "Alert",

package/package.json

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