@wallarm-org/design-system 0.76.2 → 0.77.0

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

@@ -1,5 +1,5 @@
 import type { FC, HTMLAttributes } from 'react';
-import type { ExprNode, FieldMetadata } from './types';
+import type { ExprNode, FieldGroup, FieldMetadata } from './types';
 export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
     /**
      * Filter-field configurations driving the autocomplete. A few names are
@@ -15,6 +15,14 @@ export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, '
      * (`createStatusCodeSuggestions`, …) manually.
      */
     fields?: FieldMetadata[];
+    /**
+     * Optional grouping for the field-selection menu. When omitted, fields
+     * render as a flat list. When provided, fields render under labeled group
+     * headers (group order = array order; field order = listed order). Fields
+     * not referenced by any group fall into a trailing headerless section.
+     * Referenced by field `name`; unknown names are ignored.
+     */
+    fieldGroups?: FieldGroup[];
     value?: ExprNode | null;
     onChange?: (expression: ExprNode | null) => void;
     placeholder?: string;

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, externalErrors, onErrorsChange, showKeyboardHint = false, className, ...props })=>{
+const FilterInput = ({ fields: rawFields = [], fieldGroups, 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);
@@ -112,6 +112,7 @@ const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'T
             }),
             /*#__PURE__*/ jsx(FilterInputMenu, {
                 fields: fields,
+                fieldGroups: fieldGroups,
                 autocomplete: autocomplete
             }),
             /*#__PURE__*/ jsx(FilterInputErrors, {

package/dist/components/FilterInput/FilterInputMenu/FilterInputFieldMenu/FieldMenuSections.d.ts

@@ -1,4 +1,5 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
+import type { FieldMenuSection } from '../../lib';
 import type { Condition, FieldMetadata } from '../../types';
 interface RecentSectionProps {
     conditions: Condition[];
@@ -19,4 +20,10 @@ interface OperatorsSectionProps {
     registerItem: (id: string) => (el: HTMLElement | null) => void;
 }
 export declare const OperatorsSection: FC<OperatorsSectionProps>;
+interface FieldSectionsProps {
+    sections: FieldMenuSection[];
+    onSelect: (field: FieldMetadata) => void;
+    registerItem: (id: string) => (el: HTMLElement | null) => void;
+}
+export declare const FieldSections: FC<FieldSectionsProps>;
 export {};

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

@@ -1,4 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as external_react_Fragment } from "react";
 import { CirclePlus } from "../../../../icons/CirclePlus.js";
 import { CircleSlash } from "../../../../icons/CircleSlash.js";
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator } from "../../../DropdownMenu/index.js";
@@ -108,4 +109,25 @@ const OperatorsSection = ({ onSelectAnd, onSelectOr, registerItem })=>/*#__PURE_
         ]
     });
 OperatorsSection.displayName = 'OperatorsSection';
-export { OperatorsSection, RecentSection, SuggestionsSection };
+const FieldSections = ({ sections, onSelect, registerItem })=>/*#__PURE__*/ jsx(Fragment, {
+        children: sections.map((section, index)=>/*#__PURE__*/ jsxs(external_react_Fragment, {
+                children: [
+                    index > 0 && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                    section.label && /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                        children: section.label
+                    }),
+                    /*#__PURE__*/ jsx(DropdownMenuGroup, {
+                        children: section.fields.map((field)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
+                                value: `field-${field.name}`,
+                                ref: registerItem(`field-${field.name}`),
+                                onSelect: ()=>onSelect(field),
+                                children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                                    children: field.label
+                                })
+                            }, field.name))
+                    })
+                ]
+            }, `${section.label ?? 'ungrouped'}-${index}`))
+    });
+FieldSections.displayName = 'FieldSections';
+export { FieldSections, OperatorsSection, RecentSection, SuggestionsSection };

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

@@ -1,6 +1,5 @@
-import type { RefObject } from 'react';
-import { type FC } from 'react';
-import type { Condition, FieldMetadata } from '../../types';
+import { type FC, type RefObject } from 'react';
+import type { Condition, FieldGroup, FieldMetadata } from '../../types';
 export interface FilterInputFieldMenuProps {
     fields: FieldMetadata[];
     /** Text from the input to filter displayed fields */
@@ -10,6 +9,8 @@ export interface FilterInputFieldMenuProps {
     onOpenChange?: (open: boolean) => void;
     recentConditions?: Condition[];
     suggestedFields?: FieldMetadata[];
+    /** Optional grouping for the field list. When omitted, fields render flat. */
+    fieldGroups?: FieldGroup[];
     onSelectAnd?: () => void;
     onSelectOr?: () => void;
     onEscape?: () => void;

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

@@ -1,85 +1,36 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cn } from "../../../../utils/cn.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemText } from "../../../DropdownMenu/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter } from "../../../DropdownMenu/index.js";
 import { Kbd } from "../../../Kbd/Kbd.js";
 import { KbdGroup } from "../../../Kbd/KbdGroup.js";
-import { filterAndSort } from "../../lib/index.js";
+import { buildFieldMenuSections } from "../../lib/index.js";
+import { useFieldMenuNavItems } from "../hooks/useFieldMenuNavItems.js";
 import { useKeyboardNav } from "../hooks/useKeyboardNav.js";
 import { MenuEmptyState } from "../MenuEmptyState.js";
-import { OperatorsSection, RecentSection, SuggestionsSection } from "./FieldMenuSections.js";
-const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false, onOpenChange, recentConditions = [], suggestedFields = [], onSelectAnd, onSelectOr, onEscape, positioning, inputRef, menuRef, className })=>{
+import { FieldSections, OperatorsSection, RecentSection, SuggestionsSection } from "./FieldMenuSections.js";
+const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false, onOpenChange, recentConditions = [], suggestedFields = [], fieldGroups, onSelectAnd, onSelectOr, onEscape, positioning, inputRef, menuRef, className })=>{
     const limitedRecentConditions = useMemo(()=>recentConditions.slice(0, 3), [
         recentConditions
     ]);
     const showRecent = limitedRecentConditions.length > 0;
     const showSuggestions = suggestedFields.length > 0;
-    const filteredFields = useMemo(()=>filterAndSort(fields, filterText, (f)=>[
-                f.label,
-                f.name
-            ]), [
+    const sections = useMemo(()=>buildFieldMenuSections(fields, fieldGroups, filterText), [
         fields,
+        fieldGroups,
         filterText
     ]);
-    const flatItems = useMemo(()=>{
-        const items = [];
-        if (!filterText && showRecent) limitedRecentConditions.forEach((condition, index)=>{
-            const fieldMeta = fields.find((f)=>f.name === condition.field);
-            items.push({
-                id: `recent-${index}`,
-                label: fieldMeta?.label || condition.field,
-                value: {
-                    type: 'recent',
-                    field: fieldMeta
-                }
-            });
-        });
-        if (!filterText && showSuggestions && !showRecent) suggestedFields.forEach((field, index)=>{
-            items.push({
-                id: `suggested-${index}`,
-                label: field.label,
-                value: {
-                    type: 'field',
-                    field
-                }
-            });
-        });
-        filteredFields.forEach((field)=>{
-            items.push({
-                id: `field-${field.name}`,
-                label: field.label,
-                value: {
-                    type: 'field',
-                    field
-                }
-            });
-        });
-        if (!filterText && onSelectAnd) items.push({
-            id: 'and',
-            label: 'AND',
-            value: {
-                type: 'and'
-            }
-        });
-        if (!filterText && onSelectOr) items.push({
-            id: 'or',
-            label: 'OR',
-            value: {
-                type: 'or'
-            }
-        });
-        return items;
-    }, [
-        filteredFields,
+    const flatItems = useFieldMenuNavItems({
+        sections,
         fields,
+        filterText,
         limitedRecentConditions,
-        suggestedFields,
         showRecent,
+        suggestedFields,
         showSuggestions,
         onSelectAnd,
-        onSelectOr,
-        filterText
-    ]);
+        onSelectOr
+    });
     const handleItemSelect = (item)=>{
         const data = item.value;
         if ('recent' === data.type || 'field' === data.type) {
@@ -97,7 +48,7 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
         inputRef,
         menuRef
     });
-    const hasResults = filteredFields.length > 0 || !filterText;
+    const hasResults = sections.length > 0 || !filterText;
     return /*#__PURE__*/ jsx(DropdownMenu, {
         open: open && hasResults,
         onOpenChange: onOpenChange,
@@ -122,15 +73,10 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
                     onSelect: onSelect,
                     registerItem: registerItem
                 }),
-                filteredFields.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
-                    children: filteredFields.map((field)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
-                            value: `field-${field.name}`,
-                            ref: registerItem(`field-${field.name}`),
-                            onSelect: ()=>onSelect(field),
-                            children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                children: field.label
-                            })
-                        }, field.name))
+                sections.length > 0 ? /*#__PURE__*/ jsx(FieldSections, {
+                    sections: sections,
+                    onSelect: onSelect,
+                    registerItem: registerItem
                 }) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
                 !filterText && (onSelectAnd || onSelectOr) && /*#__PURE__*/ jsx(OperatorsSection, {
                     onSelectAnd: onSelectAnd,

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

@@ -1,6 +1,6 @@
 import { type FC, type RefObject } from 'react';
 import { type ChipSegment } from '../FilterInputField/FilterInputChip';
-import type { FieldMetadata, FilterOperator, MenuState } from '../types';
+import type { FieldGroup, FieldMetadata, FilterOperator, MenuState } from '../types';
 export interface FilterInputAutocompleteState {
     inputText: string;
     menuState: MenuState;
@@ -29,6 +29,7 @@ export interface FilterInputAutocompleteState {
 }
 export interface FilterInputMenuProps {
     fields: FieldMetadata[];
+    fieldGroups?: FieldGroup[];
     autocomplete: FilterInputAutocompleteState;
 }
 export declare const FilterInputMenu: FC<FilterInputMenuProps>;

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

@@ -6,7 +6,7 @@ import { FilterInputDateValueMenu } from "./FilterInputDateValueMenu/index.js";
 import { FilterInputFieldMenu } from "./FilterInputFieldMenu/index.js";
 import { FilterInputOperatorMenu } from "./FilterInputOperatorMenu.js";
 import { FilterInputValueMenu } from "./FilterInputValueMenu/index.js";
-const FilterInputMenu = ({ fields, autocomplete })=>{
+const FilterInputMenu = ({ fields, fieldGroups, autocomplete })=>{
     const { inputText, menuState, selectedField, selectedOperator, menuPositioning, editingMultiValues, editingSingleValue, editingDateRange, inputRef, menuRef, handleFieldSelect, handleOperatorSelect, handleValueSelect, handleMultiCommit, handleRangeSelect, handleMenuClose, handleMenuDiscard, handleBuildingValueChange, handleMultiSelectToggle, segmentMenuFilterText, editingSegment, blurCommitRef } = autocomplete;
     const fieldFilterText = editingSegment === SEGMENT_VARIANT.attribute ? segmentMenuFilterText : inputText;
     const operatorFilterText = editingSegment === SEGMENT_VARIANT.operator ? segmentMenuFilterText : inputText;
@@ -74,6 +74,7 @@ const FilterInputMenu = ({ fields, autocomplete })=>{
         children: [
             /*#__PURE__*/ jsx(FilterInputFieldMenu, {
                 fields: fields,
+                fieldGroups: fieldGroups,
                 filterText: fieldFilterText,
                 open: 'field' === menuState,
                 onSelect: handleFieldSelect,

package/dist/components/FilterInput/FilterInputMenu/hooks/useFieldMenuNavItems.d.ts

@@ -0,0 +1,19 @@
+import type { FieldMenuSection } from '../../lib';
+import type { Condition, FieldMetadata, FilterInputDropdownItem } from '../../types';
+interface UseFieldMenuNavItemsParams {
+    sections: FieldMenuSection[];
+    fields: FieldMetadata[];
+    filterText: string;
+    limitedRecentConditions: Condition[];
+    showRecent: boolean;
+    suggestedFields: FieldMetadata[];
+    showSuggestions: boolean;
+    onSelectAnd?: () => void;
+    onSelectOr?: () => void;
+}
+/**
+ * Builds the flat, ordered list of keyboard-navigable items for the field menu:
+ * recent → suggestions → grouped section fields → and → or.
+ */
+export declare const useFieldMenuNavItems: ({ sections, fields, filterText, limitedRecentConditions, showRecent, suggestedFields, showSuggestions, onSelectAnd, onSelectOr, }: UseFieldMenuNavItemsParams) => FilterInputDropdownItem[];
+export {};

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

@@ -0,0 +1,63 @@
+import { useMemo } from "react";
+const useFieldMenuNavItems = ({ sections, fields, filterText, limitedRecentConditions, showRecent, suggestedFields, showSuggestions, onSelectAnd, onSelectOr })=>useMemo(()=>{
+        const items = [];
+        if (!filterText && showRecent) limitedRecentConditions.forEach((condition, index)=>{
+            const fieldMeta = fields.find((f)=>f.name === condition.field);
+            items.push({
+                id: `recent-${index}`,
+                label: fieldMeta?.label || condition.field,
+                value: {
+                    type: 'recent',
+                    field: fieldMeta
+                }
+            });
+        });
+        if (!filterText && showSuggestions && !showRecent) suggestedFields.forEach((field, index)=>{
+            items.push({
+                id: `suggested-${index}`,
+                label: field.label,
+                value: {
+                    type: 'field',
+                    field
+                }
+            });
+        });
+        sections.forEach((section)=>{
+            section.fields.forEach((field)=>{
+                items.push({
+                    id: `field-${field.name}`,
+                    label: field.label,
+                    value: {
+                        type: 'field',
+                        field
+                    }
+                });
+            });
+        });
+        if (!filterText && onSelectAnd) items.push({
+            id: 'and',
+            label: 'AND',
+            value: {
+                type: 'and'
+            }
+        });
+        if (!filterText && onSelectOr) items.push({
+            id: 'or',
+            label: 'OR',
+            value: {
+                type: 'or'
+            }
+        });
+        return items;
+    }, [
+        sections,
+        fields,
+        limitedRecentConditions,
+        suggestedFields,
+        showRecent,
+        showSuggestions,
+        onSelectAnd,
+        onSelectOr,
+        filterText
+    ]);
+export { useFieldMenuNavItems };

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

@@ -0,0 +1,14 @@
+import type { FieldGroup, FieldMetadata } from '../types';
+/** A render-ready field-menu section. `label` undefined = headerless. */
+export interface FieldMenuSection {
+    label?: string;
+    fields: FieldMetadata[];
+}
+/**
+ * Bucket `fields` into ordered, filtered menu sections. With no `fieldGroups`,
+ * returns a single headerless section (today's flat list). With groups: fields
+ * render under group headers in group/listed order, unclaimed fields fall into
+ * a trailing headerless section, each section is filtered by `filterText`, and
+ * sections with no surviving fields are dropped.
+ */
+export declare function buildFieldMenuSections(fields: FieldMetadata[], fieldGroups: FieldGroup[] | undefined, filterText: string): FieldMenuSection[];

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

@@ -0,0 +1,44 @@
+import { filterAndSort } from "./filterSort.js";
+const getText = (field)=>[
+        field.label,
+        field.name
+    ];
+function buildFieldMenuSections(fields, fieldGroups, filterText) {
+    if (!fieldGroups || 0 === fieldGroups.length) {
+        const flat = filterAndSort(fields, filterText, getText);
+        return flat.length > 0 ? [
+            {
+                fields: flat
+            }
+        ] : [];
+    }
+    const byName = new Map(fields.map((field)=>[
+            field.name,
+            field
+        ]));
+    const claimed = new Set();
+    const sections = [];
+    for (const group of fieldGroups){
+        const groupFields = [];
+        for (const name of group.fields){
+            if (claimed.has(name)) continue;
+            const field = byName.get(name);
+            if (field) {
+                claimed.add(name);
+                groupFields.push(field);
+            }
+        }
+        const filtered = filterAndSort(groupFields, filterText, getText);
+        if (filtered.length > 0) sections.push({
+            label: group.label,
+            fields: filtered
+        });
+    }
+    const ungrouped = fields.filter((field)=>!claimed.has(field.name));
+    const filteredUngrouped = filterAndSort(ungrouped, filterText, getText);
+    if (filteredUngrouped.length > 0) sections.push({
+        fields: filteredUngrouped
+    });
+    return sections;
+}
+export { buildFieldMenuSections };

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

@@ -3,6 +3,7 @@ export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset, } f
 export { applyAcceptChar } from './applyAcceptChar';
 export { applyFieldValueTransforms } from './applyFieldValueTransforms';
 export { applyKnownFieldHelpers, getKnownFieldSerializer } from './applyKnownFieldHelpers';
+export { buildFieldMenuSections, type FieldMenuSection } from './buildFieldMenuSections';
 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';

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

@@ -2,6 +2,7 @@ export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } fr
 export { applyAcceptChar } from "./applyAcceptChar.js";
 export { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
 export { applyKnownFieldHelpers, getKnownFieldSerializer } from "./applyKnownFieldHelpers.js";
+export { buildFieldMenuSections } from "./buildFieldMenuSections.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";

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

@@ -146,6 +146,19 @@ export interface FieldMetadata {
      */
     pairedField?: FieldMetadata;
 }
+/**
+ * A labeled group of filter fields for the field-selection menu, referenced by
+ * field `name`. Passed to `FilterInput` via the optional `fieldGroups` prop.
+ * Groups render in array order; fields within a group in listed order; fields
+ * not referenced by any group fall into a trailing headerless section. Unknown
+ * names are ignored; a field listed in multiple groups resolves to its first.
+ */
+export interface FieldGroup {
+    /** Section header text (e.g. "Threat classification"). */
+    label: string;
+    /** Field names in display order. */
+    fields: string[];
+}
 /**
  * Expression Tree Types
  */

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.76.1",
-  "generatedAt": "2026-07-16T11:30:32.825Z",
+  "version": "0.76.2",
+  "generatedAt": "2026-07-16T14:33:05.767Z",
   "components": [
     {
       "name": "Accordion",
@@ -29800,6 +29800,12 @@
           "required": false,
           "description": "Filter-field configurations driving the autocomplete. A few names are\n**reserved** and auto-wired with design-system helpers — DS-supplied\ncallbacks **override** consumer values for the reserved slots, because\nthe field semantics (mask range, accepted chars, backend form) are fixed\nby DS:\n\n  - `status_code` — HTTP status code field (mask suggestions, format\n    validation, digit-or-X input filter, partial-input normalization).\n\nTo opt out, use a different `name` and attach the factories\n(`createStatusCodeSuggestions`, …) manually."
         },
+        {
+          "name": "fieldGroups",
+          "type": "FieldGroup[] | undefined",
+          "required": false,
+          "description": "Optional grouping for the field-selection menu. When omitted, fields\nrender as a flat list. When provided, fields render under labeled group\nheaders (group order = array order; field order = listed order). Fields\nnot referenced by any group fall into a trailing headerless section.\nReferenced by field `name`; unknown names are ignored."
+        },
         {
           "name": "value",
           "type": "ExprNode | null | undefined",
@@ -30463,6 +30469,12 @@
               "type": "FieldMetadata[] | undefined",
               "required": false
             },
+            {
+              "name": "fieldGroups",
+              "type": "FieldGroup[] | undefined",
+              "required": false,
+              "description": "Optional grouping for the field list. When omitted, fields render flat."
+            },
             {
               "name": "positioning",
               "type": "Record<string, unknown> | undefined",

package/package.json

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