@wallarm-org/design-system 0.78.1 → 0.79.0

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

@@ -1,13 +1,27 @@
+const isValueGroup = (option)=>Array.isArray(option?.children);
+const collectLeaves = (options)=>{
+    if (!options) return [];
+    const leaves = [];
+    for (const option of options)if (isValueGroup(option)) leaves.push(...collectLeaves(option.children));
+    else leaves.push(option);
+    return leaves;
+};
+const findLeafInOptions = (options, key)=>{
+    if (!options) return;
+    for (const option of options)if (isValueGroup(option)) {
+        const found = findLeafInOptions(option.children, key);
+        if (found) return found;
+    } else if (String(option.value) === key) return option;
+};
 const findOptionByValue = (field, value)=>{
     if (!field?.values || null == value) return;
-    const key = String(value);
-    return field.values.find((opt)=>String(opt.value) === key);
+    return findLeafInOptions(field.values, String(value));
 };
 const findValueLabelInFields = (value, fields)=>{
     if (null == value) return;
     const key = String(value);
     for (const f of fields){
-        const opt = f.values?.find((o)=>String(o.value) === key);
+        const opt = findLeafInOptions(f.values, key);
         if (opt) return opt.label;
     }
 };
@@ -31,4 +45,4 @@ const hasStaticAllowlist = (field)=>{
     if ((field.values?.length ?? 0) > 0) return true;
     return (field.options?.length ?? 0) > 0;
 };
-export { findOptionByValue, findValueLabelInFields, getFieldValues, hasFieldValues, hasStaticAllowlist };
+export { collectLeaves, findOptionByValue, findValueLabelInFields, getFieldValues, hasFieldValues, hasStaticAllowlist, isValueGroup };

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

@@ -4,11 +4,13 @@ export { applyAcceptChar } from './applyAcceptChar';
 export { applyFieldValueTransforms } from './applyFieldValueTransforms';
 export { applyKnownFieldHelpers, getKnownFieldSerializer } from './applyKnownFieldHelpers';
 export { buildFieldMenuSections, type FieldMenuSection } from './buildFieldMenuSections';
+export { buildValueMenuSections, type ValueMenuRow, type ValueMenuSection, } from './buildValueMenuSections';
+export { type CollapseToken, collapseValues } from './collapseValuesToLabels';
 export { chipIdToConditionIndex, findChipSplitIndex, incompleteTripletError, isEmptyFilterValue, } from './conditions';
 export { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
 export { COUNTRY_OPTIONS } from './country';
 export { type AnchorBounds, buildAnchoredRect, isMenuRelated, toAnchorBounds } from './dom';
-export { findOptionByValue, findValueLabelInFields, getFieldValues, hasFieldValues, hasStaticAllowlist, } from './fields';
+export { collectLeaves, findOptionByValue, findValueLabelInFields, getFieldValues, hasFieldValues, hasStaticAllowlist, isValueGroup, } from './fields';
 export { filterAndSort } from './filterSort';
 export { getCurrentValueTokenText, getValueFilterText } from './menuFilterText';
 export { getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, NO_VALUE_PLACEHOLDER, nextBuildingMenu, } from './operators';

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

@@ -3,11 +3,13 @@ export { applyAcceptChar } from "./applyAcceptChar.js";
 export { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
 export { applyKnownFieldHelpers, getKnownFieldSerializer } from "./applyKnownFieldHelpers.js";
 export { buildFieldMenuSections } from "./buildFieldMenuSections.js";
+export { buildValueMenuSections } from "./buildValueMenuSections.js";
+export { collapseValues } from "./collapseValuesToLabels.js";
 export { chipIdToConditionIndex, findChipSplitIndex, incompleteTripletError, isEmptyFilterValue } from "./conditions.js";
 export { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
 export { COUNTRY_OPTIONS } from "./country/index.js";
 export { buildAnchoredRect, isMenuRelated, toAnchorBounds } from "./dom.js";
-export { findOptionByValue, findValueLabelInFields, getFieldValues, hasFieldValues, hasStaticAllowlist } from "./fields.js";
+export { collectLeaves, findOptionByValue, findValueLabelInFields, getFieldValues, hasFieldValues, hasStaticAllowlist, isValueGroup } from "./fields.js";
 export { filterAndSort } from "./filterSort.js";
 export { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.js";
 export { NO_VALUE_PLACEHOLDER, getFieldOperators, getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isBuildingComplete, isMultiSelectOperator, isNoValueOperator, isOperatorAllowedForField, isValueShapeCompatible, nextBuildingMenu } from "./operators.js";

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

@@ -1,5 +1,5 @@
 import { isDatePreset } from "../FilterInputMenu/FilterInputDateValueMenu/constants.js";
-import { getFieldValues, hasStaticAllowlist } from "./fields.js";
+import { collectLeaves, getFieldValues, hasStaticAllowlist } from "./fields.js";
 const isValueOfType = (value, type)=>{
     switch(type){
         case 'integer':
@@ -43,7 +43,7 @@ const getInvalidValueIndices = (field, values)=>{
         return acc;
     }, []);
     if (field.getSuggestions) return [];
-    const allowlist = hasStaticAllowlist(field) ? getFieldValues(field) : null;
+    const allowlist = hasStaticAllowlist(field) ? collectLeaves(getFieldValues(field)) : null;
     return values.reduce((acc, v, idx)=>{
         if (null == v) return acc;
         if (!isValueOfType(v, field.type)) {

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

@@ -50,10 +50,25 @@ export type FieldType = 'string' | 'integer' | 'date' | 'float' | 'boolean' | 'e
  */
 export type FilterOperator = '=' | '!=' | '>' | '<' | '>=' | '<=' | 'like' | 'not_like' | 'in' | 'not_in' | 'is_null' | 'is_not_null' | 'between';
 /**
- * Value option for enum/select fields
+ * Value option for enum/select fields.
+ *
+ * A value option is one of two shapes:
+ * - a **leaf**: carries a committable `value` (the only thing that reaches the
+ *   expression tree / backend);
+ * - a **group**: carries `children` and **no** `value` — a purely presentational
+ *   node. Top-level groups render as section headers in the value menu; nested
+ *   groups render as a submenu trigger row (e.g. an "Attack type" like
+ *   `SQL injection` that opens a submenu of concrete leaf sub-types). Selecting
+ *   or toggling a group is a bulk shortcut for its descendant leaves; the group
+ *   itself is never committed. Nesting is recursive.
  */
 export interface FieldValueOption {
-    value: string | number | boolean;
+    /**
+     * The committable value. Present on **leaf** options only. Group options
+     * (those with `children`) omit it — they are presentational and never
+     * committed; only their descendant leaves reach the expression.
+     */
+    value?: string | number | boolean;
     label: string;
     badge?: {
         color: BadgeColor;
@@ -67,6 +82,20 @@ export interface FieldValueOption {
      * share a label (two `request-id` rows with different paths).
      */
     description?: string;
+    /**
+     * Nested sub-values. When present, this option is a **group** (no own
+     * `value`): a section header at the top level, or a submenu trigger when
+     * nested. Recursive — a group's children may themselves be groups. Only the
+     * leaves (options without `children`) are committable.
+     */
+    children?: FieldValueOption[];
+    /**
+     * Optional section-header label used to bucket top-level value options under
+     * a heading in the value menu (parallel to `FieldGroup` for the field menu).
+     * An alternative to wrapping options in a top-level group node; ignored for
+     * options nested inside a group.
+     */
+    section?: string;
 }
 /**
  * Field Metadata Interface

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.78.0",
-  "generatedAt": "2026-07-30T09:07:02.172Z",
+  "version": "0.78.1",
+  "generatedAt": "2026-07-31T19:42:49.319Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

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

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/ValueMenuFooter.d.ts

@@ -1,6 +0,0 @@
-import type { FC } from 'react';
-interface ValueMenuFooterProps {
-    multiSelect: boolean;
-}
-export declare const ValueMenuFooter: FC<ValueMenuFooterProps>;
-export {};

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

@@ -1,72 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { DropdownMenuFooter } from "../../../DropdownMenu/index.js";
-import { Kbd } from "../../../Kbd/Kbd.js";
-import { KbdGroup } from "../../../Kbd/KbdGroup.js";
-const ValueMenuFooter = ({ multiSelect })=>/*#__PURE__*/ jsx(DropdownMenuFooter, {
-        children: multiSelect ? /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsxs("span", {
-                    className: "flex items-center gap-4",
-                    children: [
-                        /*#__PURE__*/ jsx(KbdGroup, {
-                            children: /*#__PURE__*/ jsx(Kbd, {
-                                children: "↵"
-                            })
-                        }),
-                        "to select"
-                    ]
-                }),
-                /*#__PURE__*/ jsxs("span", {
-                    className: "flex items-center gap-4",
-                    children: [
-                        /*#__PURE__*/ jsxs(KbdGroup, {
-                            children: [
-                                /*#__PURE__*/ jsx(Kbd, {
-                                    children: "⌘"
-                                }),
-                                /*#__PURE__*/ jsx(Kbd, {
-                                    children: "↑"
-                                }),
-                                /*#__PURE__*/ jsx(Kbd, {
-                                    children: "↓"
-                                })
-                            ]
-                        }),
-                        "to multi-select"
-                    ]
-                })
-            ]
-        }) : /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsxs("span", {
-                    className: "flex items-center gap-4",
-                    children: [
-                        /*#__PURE__*/ jsxs(KbdGroup, {
-                            children: [
-                                /*#__PURE__*/ jsx(Kbd, {
-                                    children: "↑"
-                                }),
-                                /*#__PURE__*/ jsx(Kbd, {
-                                    children: "↓"
-                                })
-                            ]
-                        }),
-                        "to navigate"
-                    ]
-                }),
-                /*#__PURE__*/ jsxs("span", {
-                    className: "flex items-center gap-4",
-                    children: [
-                        /*#__PURE__*/ jsx(KbdGroup, {
-                            children: /*#__PURE__*/ jsx(Kbd, {
-                                children: "↵"
-                            })
-                        }),
-                        "to select"
-                    ]
-                })
-            ]
-        })
-    });
-ValueMenuFooter.displayName = 'ValueMenuFooter';
-export { ValueMenuFooter };