@wallarm-org/design-system 0.60.0 → 0.61.0

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

@@ -19,6 +19,21 @@ export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     onChange?: (expression: ExprNode | null) => void;
     placeholder?: string;
     error?: boolean;
+    /**
+     * Field names whose values were rejected by the backend. Matching chips are
+     * rendered with a value error (red). Purely presentational: conditions and
+     * `onChange` output are unaffected, and the consumer is expected to render
+     * its own message (e.g. an alert with the backend error text) and clear the
+     * prop when the filter changes or the query succeeds.
+     */
+    externalErrors?: string[];
+    /**
+     * Notified whenever the set of validation messages FilterInput renders below
+     * the input changes (empty array = no visible error). Lets a consumer avoid
+     * stacking its own message (e.g. a backend-error alert) on top of one the
+     * input already shows. Pass a stable (memoized) callback.
+     */
+    onErrorsChange?: (errors: string[]) => void;
     showKeyboardHint?: boolean;
 }
 export declare const FilterInput: FC<FilterInputProps>;

package/dist/components/FilterInput/FilterInput.js

@@ -7,7 +7,7 @@ import { FilterInputField } from "./FilterInputField/index.js";
 import { FilterInputMenu } from "./FilterInputMenu/FilterInputMenu.js";
 import { useFilterInputAutocomplete, useFilterInputExpression, useFilterInputSelection } from "./hooks/index.js";
 import { applyKnownFieldHelpers } from "./lib/applyKnownFieldHelpers.js";
-const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'Type to filter...', error = false, showKeyboardHint = false, className, ...props })=>{
+const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'Type to filter...', error = false, externalErrors, onErrorsChange, showKeyboardHint = false, className, ...props })=>{
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const buildingChipRef = useRef(null);
@@ -23,7 +23,8 @@ const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'T
         fields,
         value,
         onChange,
-        error
+        error,
+        externalErrors
     });
     const autocomplete = useFilterInputAutocomplete({
         fields,
@@ -82,6 +83,12 @@ const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'T
         pasteError,
         fieldErrors
     ]);
+    useEffect(()=>{
+        onErrorsChange?.(errors);
+    }, [
+        errors,
+        onErrorsChange
+    ]);
     return /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
         className: cn('group/filter-input relative flex w-full flex-col gap-4', className),

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

@@ -1,5 +1,5 @@
 import { useCallback, useRef } from "react";
-import { OPERATOR_SYMBOLS, applyAcceptChar, getOperatorFromLabel, hasFieldValues, nextBuildingMenu } from "../../lib/index.js";
+import { OPERATOR_SYMBOLS, applyAcceptChar, getOperatorFromLabel, hasStaticAllowlist, nextBuildingMenu } from "../../lib/index.js";
 const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperator, isFocused, fields, inputRef, blurCommitRef, commitBuildingForceRef, conditionsRef, conditionsLengthRef, effectiveInsertIndexRef, setInputText, setMenuState, setInsertIndex, resetMenuAnchor, removeConditionAtIndex, handleFieldSelect, handleOperatorSelect, handleCustomValueCommit, stepBackBuildingMenu })=>{
     const menuRef = useRef(null);
     const handleInputChange = useCallback((e)=>{
@@ -82,7 +82,7 @@ const useInputHandlers = ({ inputText, menuState, selectedField, selectedOperato
                 return;
             }
         }
-        if ('Enter' === e.key && 'value' === menuState && selectedField && !hasFieldValues(selectedField) && inputText.trim()) {
+        if ('Enter' === e.key && 'value' === menuState && selectedField && !hasStaticAllowlist(selectedField) && inputText.trim()) {
             e.preventDefault();
             handleCustomValueCommit(inputText);
             return;

package/dist/components/FilterInput/hooks/useFilterInputExpression/applyExternalErrors.d.ts

@@ -0,0 +1,11 @@
+import type { Condition, FilterInputChipData } from '../../types';
+/**
+ * Display-only overlay for backend-rejected fields: marks built chips whose
+ * condition's field is listed, leaving conditions untouched. Working on chips
+ * (not conditions) keeps `condition.error` clear, so the flag never leaks into
+ * `onChange` round-trips, `parseFilterInputErrors` produces no duplicate
+ * message, and `buildChips`' cross-field label resolution (which keys off
+ * `condition.error`) is not falsely activated for raw freeform values.
+ * The consumer owns the error text (e.g. an alert with the backend response).
+ */
+export declare const applyExternalErrors: (chips: FilterInputChipData[], conditions: Condition[], externalErrors: string[] | undefined) => FilterInputChipData[];

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

@@ -0,0 +1,16 @@
+import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
+const applyExternalErrors = (chips, conditions, externalErrors)=>{
+    if (!externalErrors?.length) return chips;
+    const errored = new Set(externalErrors);
+    let conditionIdx = -1;
+    return chips.map((chip)=>{
+        if ('chip' !== chip.variant) return chip;
+        conditionIdx += 1;
+        const condition = conditions[conditionIdx];
+        return condition && !chip.disabled && !chip.error && errored.has(condition.field) ? {
+            ...chip,
+            error: SEGMENT_VARIANT.value
+        } : chip;
+    });
+};
+export { applyExternalErrors };

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

@@ -22,15 +22,14 @@ const makeEmptyChip = (i, error)=>({
         value: '',
         error: error || void 0
     });
-const resolveValueLabel = (value, field, fields, crossField)=>{
+const resolveValueLabel = (value, field, fields)=>{
     const own = findOptionByValue(field, value)?.label;
     if (void 0 !== own) return own;
-    if (!crossField) return;
     return findValueLabelInFields(value, fields);
 };
-const resolveDisplayValue = (condition, field, fields, crossField)=>{
+const resolveDisplayValue = (condition, field, fields)=>{
     const raw = String(condition.value ?? '');
-    return resolveValueLabel(condition.value, field, fields, crossField) ?? raw;
+    return resolveValueLabel(condition.value, field, fields) ?? raw;
 };
 const buildBaseChip = (i, condition, field)=>({
         id: chipId(i),
@@ -67,9 +66,9 @@ const buildDateChip = (baseChip, condition, chipError)=>{
         error: chipError || (displayValue === INVALID_DATE ? SEGMENT_VARIANT.value : void 0)
     };
 };
-const buildMultiValueChip = (baseChip, condition, field, fields, chipError, crossField)=>{
+const buildMultiValueChip = (baseChip, condition, field, fields, chipError)=>{
     const values = condition.value;
-    const valueParts = values.map((v)=>resolveValueLabel(v, field, fields, crossField) ?? String(v));
+    const valueParts = values.map((v)=>resolveValueLabel(v, field, fields) ?? String(v));
     const invalidIndices = field ? getInvalidValueIndices(field, values) : [];
     return {
         ...baseChip,
@@ -89,17 +88,16 @@ const makeConditionChip = (i, conditions, fields, error)=>{
     const chipError = condition.error || (error ? true : void 0);
     const field = fields.find((f)=>f.name === condition.field);
     const baseChip = buildBaseChip(i, condition, field);
-    const crossField = chipError === SEGMENT_VARIANT.value || true === chipError;
     if (condition.operator && isNoValueOperator(condition.operator)) return {
         ...baseChip,
         value: NO_VALUE_PLACEHOLDER,
         error: chipError
     };
     if (field?.type === 'date') return Array.isArray(condition.value) ? buildDateRangeChip(baseChip, condition, chipError) : buildDateChip(baseChip, condition, chipError);
-    if (Array.isArray(condition.value)) return buildMultiValueChip(baseChip, condition, field, fields, chipError, crossField);
+    if (Array.isArray(condition.value)) return buildMultiValueChip(baseChip, condition, field, fields, chipError);
     return {
         ...baseChip,
-        value: resolveDisplayValue(condition, field, fields, crossField),
+        value: resolveDisplayValue(condition, field, fields),
         error: chipError
     };
 };

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

@@ -4,8 +4,9 @@ interface UseFilterInputExpressionOptions {
     value?: ExprNode | null;
     onChange?: (expression: ExprNode | null) => void;
     error: boolean;
+    externalErrors?: string[];
 }
-export declare const useFilterInputExpression: ({ fields, value, onChange, error, }: UseFilterInputExpressionOptions) => {
+export declare const useFilterInputExpression: ({ fields, value, onChange, error, externalErrors, }: UseFilterInputExpressionOptions) => {
     conditions: Condition[];
     connectors: ("and" | "or")[];
     chips: import("../..").FilterInputChipData[];

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

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, 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";
 import { buildChips } from "./buildChips.js";
 import { buildExpression, expressionToConditions } from "./expression.js";
 const EMPTY_STATE = {
@@ -91,7 +92,7 @@ const addConnectorIfNeeded = (connectors, newConditionsLength, editingChipId, at
         ...new Array(missing).fill(DEFAULT_CONNECTOR)
     ] : connectors;
 };
-const useFilterInputExpression = ({ fields, value, onChange, error })=>{
+const useFilterInputExpression = ({ fields, value, onChange, error, externalErrors })=>{
     const [state, setState] = useState(EMPTY_STATE);
     useEffect(()=>{
         if (void 0 !== value) {
@@ -105,11 +106,12 @@ const useFilterInputExpression = ({ fields, value, onChange, error })=>{
         value,
         fields
     ]);
-    const chips = useMemo(()=>buildChips(state.conditions, state.connectors, fields, error), [
+    const chips = useMemo(()=>applyExternalErrors(buildChips(state.conditions, state.connectors, fields, error), state.conditions, externalErrors), [
         state.conditions,
         state.connectors,
         fields,
-        error
+        error,
+        externalErrors
     ]);
     const upsertCondition = useCallback((field, operator, val, editingChipId, atIndex, error, dateOrigin)=>{
         const condition = buildCondition(field, operator, val, error, dateOrigin);

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

@@ -27,6 +27,7 @@ export declare const getFieldValues: (field: FieldMetadata, inputText?: string,
 export declare const hasFieldValues: (field: FieldMetadata) => boolean;
 /**
  * True if the field has an exhaustive static allowlist. getSuggestions
- * fields return false — their list is a hint, not a strict allowlist.
+ * fields and `strictValues: false` fields return false — their list is a
+ * hint, not a strict allowlist.
  */
 export declare const hasStaticAllowlist: (field: FieldMetadata) => boolean;

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

@@ -26,6 +26,7 @@ const hasFieldValues = (field)=>{
     return (field.options?.length ?? 0) > 0;
 };
 const hasStaticAllowlist = (field)=>{
+    if (false === field.strictValues) return false;
     if (field.getSuggestions) return false;
     if ((field.values?.length ?? 0) > 0) return true;
     return (field.options?.length ?? 0) > 0;

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

@@ -68,6 +68,13 @@ export interface FieldMetadata {
      * Empty array `[]` means freeform input — no dropdown, user types any value.
      */
     options?: string[];
+    /**
+     * When `false`, `values`/`options` are suggestions rather than an exhaustive
+     * allowlist: the dropdown still offers them, but any typed value commits
+     * without an allowlist error. Data-type validation (`isValueOfType`) still
+     * applies. Defaults to `true` (options are a strict allowlist).
+     */
+    strictValues?: boolean;
     /**
      * Optional callback to compute value suggestions dynamically from the current
      * input text. When provided, takes precedence over `values` and `options`.

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.59.0",
-  "generatedAt": "2026-06-14T20:20:21.089Z",
+  "version": "0.60.0",
+  "generatedAt": "2026-06-16T08:44:33.684Z",
   "components": [
     {
       "name": "Accordion",
@@ -22031,6 +22031,12 @@
           "required": false,
           "defaultValue": "false"
         },
+        {
+          "name": "externalErrors",
+          "type": "string[] | undefined",
+          "required": false,
+          "description": "Field names whose values were rejected by the backend. Matching chips are\nrendered with a value error (red). Purely presentational: conditions and\n`onChange` output are unaffected, and the consumer is expected to render\nits own message (e.g. an alert with the backend error text) and clear the\nprop when the filter changes or the query succeeds."
+        },
         {
           "name": "showKeyboardHint",
           "type": "boolean | undefined",

package/package.json

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