@wallarm-org/design-system 1.8.0 → 1.10.0

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -12,9 +12,14 @@ const DropdownMenuContent = ({ className, children, ref, ...props })=>{
     const testId = useTestId('content');
     const cascadeBase = useTestId();
     const childArray = Children.toArray(children);
-    const inputChildren = childArray.filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type === DropdownMenuInput);
+    const isInputChild = (child)=>{
+        if (!/*#__PURE__*/ isValidElement(child)) return false;
+        if (child.type === DropdownMenuInput) return true;
+        return 'function' == typeof child.type && 'input' === child.type.dropdownMenuSlot;
+    };
+    const inputChildren = childArray.filter(isInputChild);
     const footerChildren = childArray.filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type === DropdownMenuFooter);
-    const menuChildren = childArray.filter((child)=>!/*#__PURE__*/ (isValidElement(child) && (child.type === DropdownMenuFooter || child.type === DropdownMenuInput)));
+    const menuChildren = childArray.filter((child)=>!isInputChild(child) && !/*#__PURE__*/ (isValidElement(child) && child.type === DropdownMenuFooter));
     return /*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsx(Menu.Positioner, {
             children: /*#__PURE__*/ jsxs(Menu.Content, {

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

@@ -21,9 +21,11 @@ export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement
     /** When true, the chip cannot be edited or removed (dimmed appearance) */
     disabled?: boolean;
     /** Caps the applied value segment at this width (px), truncating with an
-     *  ellipsis; lifts the chip's default max-width so it grows to fit (AS-1064). */
+     *  ellipsis; lifts the chip's default max-width so it grows to fit. Defaults
+     *  to 500; a paired chip caps its whole width there instead (AS-1064). */
     valueMaxWidth?: number;
-    /** `'end'` places the caret at the end on value inline-edit; omit to select all (AS-1064). */
+    /** Caret placement on value inline-edit: `'end'` (default) puts it at the
+     *  tail — better for long values; pass explicitly to keep the API visible (AS-1064). */
     caretMode?: 'end';
     /** Second paired triplet (two-step fields). The paired attribute is fixed. */
     pair?: FilterInputChipData['pair'];

package/dist/components/FilterInput/FilterInputField/FilterInputChip/FilterInputChip.js

@@ -9,7 +9,7 @@ import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
 import { PairSeparator } from "./PairSeparator.js";
 import { Segment } from "./Segment.js";
 import { SEGMENT_VARIANT } from "./segmentVariant.js";
-const FilterInputChip = ({ ref, chipId, attribute, attributeDescription, operator, value, error = false, valueParts, valueSeparator, errorValueIndices, building = false, disabled = false, valueMaxWidth, caretMode, pair, onRemove, onSegmentClick, onPairSegmentClick, className, style, ...props })=>{
+const FilterInputChip = ({ ref, chipId, attribute, attributeDescription, operator, value, error = false, valueParts, valueSeparator, errorValueIndices, building = false, disabled = false, valueMaxWidth = 500, caretMode = 'end', pair, onRemove, onSegmentClick, onPairSegmentClick, className, style, ...props })=>{
     const interactive = !disabled;
     const internalRef = useRef(null);
     const editing = useEditingContext();
@@ -74,11 +74,14 @@ const FilterInputChip = ({ ref, chipId, attribute, attributeDescription, operato
             interactive,
             disabled,
             building
-        }), pair ? 'max-w-[380px]' : 'max-w-[320px]', className),
-        style: valueMaxWidth && !pair ? {
+        }), pair ? void 0 : 'max-w-[320px]', className),
+        style: pair ? {
+            maxWidth: valueMaxWidth,
+            ...style
+        } : {
             maxWidth: 'none',
             ...style
-        } : style,
+        },
         "data-slot": "filter-input-condition-chip",
         ...building && {
             'data-building': ''
@@ -144,6 +147,8 @@ const FilterInputChip = ({ ref, chipId, attribute, attributeDescription, operato
                         variant: SEGMENT_VARIANT.value,
                         className: pair.value ? 'min-w-0' : emptyValueHitTarget,
                         error: pairActiveSegment !== SEGMENT_VARIANT.value && (true === effectivePairError || effectivePairError === SEGMENT_VARIANT.value),
+                        caretMode: caretMode,
+                        valueMaxWidth: valueMaxWidth,
                         onClick: interactive ? (e)=>handlePairSegmentClick('value', e) : void 0,
                         ...segmentEditProps(SEGMENT_VARIANT.value, 1),
                         children: pair.value ?? ''

package/dist/components/Table/TableContext/TableProvider.js

@@ -15,7 +15,7 @@ const toTanStackPinning = (p, pinnedLeft)=>({
         end: p?.right ?? []
     });
 const TableProvider = (props)=>{
-    const { data, columns, isLoading = false, isLoadingPrevious = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, manualSorting = false, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId, onMasterCellClick, activeRowId: activeRowIdProp, onSettingsOpenChange } = props;
+    const { data, columns, isLoading = false, isLoadingPrevious = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, manualSorting = false, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, columnGroups, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId, onMasterCellClick, activeRowId: activeRowIdProp, onSettingsOpenChange } = props;
     const masterCellActiveRowId = activeRowIdProp ?? null;
     const sortingEnabled = !!onSortingChange;
     const selectionEnabled = !!onRowSelectionChange;
@@ -201,6 +201,7 @@ const TableProvider = (props)=>{
             allLeafColumns,
             defaultColumnVisibility,
             defaultColumnOrder,
+            columnGroups,
             setColumnOrder,
             alwaysPinnedLeft,
             masterColumnId,
@@ -236,6 +237,7 @@ const TableProvider = (props)=>{
         allLeafColumns,
         defaultColumnVisibility,
         defaultColumnOrder,
+        columnGroups,
         setColumnOrder,
         alwaysPinnedLeft,
         masterColumnId,

package/dist/components/Table/TableContext/types.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode, RefObject } from 'react';
 import type { Column, ColumnVisibilityState, ReactTable, Row, RowData } from '@tanstack/react-table';
 import type { Virtualizer } from '@tanstack/react-virtual';
 import type { DSTableFeatures } from '../lib';
-import type { TableProps, TableVirtualized } from '../types';
+import type { TableColumnGroup, TableProps, TableVirtualized } from '../types';
 /**
  * Union covers both virtualizer flavors used by the Table (`useVirtualizer`
  * with HTMLElement scroll container and `useWindowVirtualizer` with Window).
@@ -29,6 +29,7 @@ export interface TableContextValue<T extends RowData> {
     allLeafColumns: Column<DSTableFeatures, T, unknown>[];
     defaultColumnVisibility?: ColumnVisibilityState;
     defaultColumnOrder?: string[];
+    columnGroups?: TableColumnGroup[];
     setColumnOrder: (order: string[]) => void;
     lastSelectedRowIndexRef: RefObject<number | null>;
     alwaysPinnedLeft: string[];

package/dist/components/Table/TableSettingsMenu/TableSettingsMenu.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
@@ -24,7 +24,7 @@ const TableSettingsMenu = ({ 'data-testid': testIdProp, children, ...rest })=>{
     const testId = useTestId('settings-menu', testIdProp);
     const { anchorNode } = useTableSettingsMenuContext();
     const ctx = useTableContext();
-    const { table, alwaysPinnedLeft, masterColumnId, onSettingsOpenChange } = ctx;
+    const { table, alwaysPinnedLeft, masterColumnId, columnGroups, onSettingsOpenChange } = ctx;
     const hasTextDescription = table.getAllLeafColumns().some((col)=>col.columnDef.meta?.description?.type === 'text');
     const [search, setSearch] = useState('');
     const [menuOpen, setMenuOpen] = useState(false);
@@ -59,6 +59,30 @@ const TableSettingsMenu = ({ 'data-testid': testIdProp, children, ...rest })=>{
         allColumns,
         search
     ]);
+    const labeledSections = useMemo(()=>{
+        if (!columnGroups) return null;
+        const byId = new Map(filteredColumns.map((col)=>[
+                col.id,
+                col
+            ]));
+        const claimed = new Set();
+        const sections = columnGroups.map((group)=>{
+            const cols = group.columns.map((id)=>byId.get(id)).filter((col)=>null != col);
+            for (const col of cols)claimed.add(col.id);
+            return {
+                label: group.label,
+                cols
+            };
+        }).filter((section)=>section.cols.length > 0);
+        const ungrouped = filteredColumns.filter((col)=>!claimed.has(col.id));
+        return {
+            sections,
+            ungrouped
+        };
+    }, [
+        columnGroups,
+        filteredColumns
+    ]);
     const { pinnedColumns, unpinnedColumns } = useMemo(()=>{
         const pinned = [];
         const unpinned = [];
@@ -147,15 +171,30 @@ const TableSettingsMenu = ({ 'data-testid': testIdProp, children, ...rest })=>{
                                     }),
                                     /*#__PURE__*/ jsxs(DropdownMenuContent, {
                                         ref: contentRef,
-                                        className: cn('min-w-256 max-h-[430px]'),
-                                        style: lockedWidth ? {
+                                        className: cn('min-w-256'),
+                                        style: {
+                                            maxHeight: 'min(430px, var(--available-height))',
                                             width: lockedWidth
-                                        } : void 0,
+                                        },
                                         children: [
                                             searchOverride ?? /*#__PURE__*/ jsx(TableSettingsMenuSearch, {}),
                                             /*#__PURE__*/ jsx(VStack, {
                                                 gap: 1,
-                                                children: /*#__PURE__*/ jsx(DndContext, {
+                                                children: labeledSections ? /*#__PURE__*/ jsxs(Fragment, {
+                                                    children: [
+                                                        labeledSections.sections.map((section)=>/*#__PURE__*/ jsxs("div", {
+                                                                className: "flex flex-col gap-1",
+                                                                children: [
+                                                                    /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                                                                        sticky: true,
+                                                                        children: section.label
+                                                                    }),
+                                                                    section.cols.map(renderColumnItem)
+                                                                ]
+                                                            }, section.label)),
+                                                        labeledSections.ungrouped.map(renderColumnItem)
+                                                    ]
+                                                }) : /*#__PURE__*/ jsx(DndContext, {
                                                     sensors: sensors,
                                                     collisionDetection: closestCenter,
                                                     onDragEnd: handleDragEnd,

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuItem.js

@@ -7,7 +7,8 @@ import { useTestId } from "../../../utils/testId.js";
 import { Switch, SwitchControl, SwitchLabel } from "../../Switch/index.js";
 import { useTableContext } from "../TableContext/index.js";
 const TableSettingsMenuItem = ({ columnId, className, 'data-testid': testIdProp, ...rest })=>{
-    const { masterColumnId, columnDndEnabled, table } = useTableContext();
+    const { masterColumnId, columnDndEnabled, columnGroups, table } = useTableContext();
+    const grouped = !!columnGroups;
     const slotTestId = useTestId('settings-menu-item');
     const switchTestId = useTestId(`settings-menu-item-${columnId}`, testIdProp);
     const column = table.getColumn(columnId);
@@ -29,10 +30,10 @@ const TableSettingsMenuItem = ({ columnId, className, 'data-testid': testIdProp,
         ref: setNodeRef,
         style: style,
         "data-testid": slotTestId,
-        className: cn('relative flex items-center w-full rounded-6 pl-20 pr-8 py-6', 'hover:bg-states-primary-hover transition-colors', 'data-disabled:opacity-50 data-disabled:pointer-events-none'),
+        className: cn('relative flex items-center w-full rounded-6 pr-8 py-6', grouped ? 'pl-8' : 'pl-20', 'hover:bg-states-primary-hover transition-colors', 'data-disabled:opacity-50 data-disabled:pointer-events-none'),
         "data-disabled": isMasterColumn || void 0,
         children: [
-            /*#__PURE__*/ jsx("span", {
+            !grouped && /*#__PURE__*/ jsx("span", {
                 className: cn('absolute left-4 top-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing text-icon-secondary hover:text-icon-primary data-disabled:opacity-50 data-disabled:pointer-events-none'),
                 ...attributes,
                 ...listeners,

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuSearch.js

@@ -14,4 +14,7 @@ const TableSettingsMenuSearch = ({ 'data-testid': testIdProp, placeholder = 'Sea
     });
 };
 TableSettingsMenuSearch.displayName = 'TableSettingsMenuSearch';
+Object.assign(TableSettingsMenuSearch, {
+    dropdownMenuSlot: 'input'
+});
 export { TableSettingsMenuSearch };

package/dist/components/Table/index.d.ts

@@ -10,4 +10,4 @@ export { TableEmptyState } from './TableEmptyState';
 export { TableScrollHandler, TableScrollHandlerLeft, type TableScrollHandlerLeftProps, type TableScrollHandlerProps, TableScrollHandlerRight, type TableScrollHandlerRightProps, } from './TableScrollHandler';
 export { TableSettingsMenu, TableSettingsMenuItem, type TableSettingsMenuItemProps, type TableSettingsMenuProps, TableSettingsMenuReset, type TableSettingsMenuResetProps, TableSettingsMenuSearch, type TableSettingsMenuSearchProps, } from './TableSettingsMenu';
 export { TableSortTrigger, type TableSortTriggerProps } from './TableSortTrigger';
-export type { TableAccessorColumnDef, TableCellContext, TableColumnBase, TableColumnDef, TableColumnMeta, TableColumnPinningState, TableColumnSizingState, TableDisplayColumnDef, TableExpandedState, TableGroupingState, TableHandle, TableOnChangeFn, TableProps, TableRow, TableRowSelectionState, TableScrollToRowOptions, TableSortingState, TableUpdater, TableVirtualized, TableVisibilityState, } from './types';
+export type { TableAccessorColumnDef, TableCellContext, TableColumnBase, TableColumnDef, TableColumnGroup, TableColumnMeta, TableColumnPinningState, TableColumnSizingState, TableDisplayColumnDef, TableExpandedState, TableGroupingState, TableHandle, TableOnChangeFn, TableProps, TableRow, TableRowSelectionState, TableScrollToRowOptions, TableSortingState, TableUpdater, TableVirtualized, TableVisibilityState, } from './types';

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

@@ -42,6 +42,19 @@ export type TableExpandedState = true | Record<string, boolean>;
 export type TableGroupingState = string[];
 /** Column visibility state: `{ [columnId]: boolean }` */
 export type TableVisibilityState = Record<string, boolean>;
+/**
+ * Labeled grouping for the column-settings menu. When `columnGroups` is passed
+ * to the Table, the settings menu renders these labeled sections (in the given
+ * order) instead of the default pinned/unpinned + drag-reorder list — the same
+ * flat, non-reorderable pattern the FilterInput field menu uses. `columns` are
+ * column ids; ids absent from every group fall into a trailing headerless
+ * section, and empty groups (or groups whose columns are all filtered out by
+ * search) render nothing.
+ */
+export interface TableColumnGroup {
+    label: string;
+    columns: string[];
+}
 /** State updater — value or functional update */
 export type TableUpdater<T> = T | ((prev: T) => T);
 /** Options for the imperative `scrollToRow` method */
@@ -190,6 +203,13 @@ export interface TableProps<T> extends TestableProps {
     onColumnVisibilityChange?: TableOnChangeFn<TableVisibilityState>;
     defaultColumnVisibility?: TableVisibilityState;
     defaultColumnOrder?: string[];
+    /**
+     * Labeled sections for the column-settings menu. When set, the menu renders
+     * these groups (flat, non-reorderable — like the FilterInput field menu)
+     * instead of the default pinned/unpinned drag-reorder list. See
+     * {@link TableColumnGroup}.
+     */
+    columnGroups?: TableColumnGroup[];
     /**
      * Fired when the built-in column-settings menu opens (`true`) or closes
      * (`false`). The menu's open state otherwise lives inside the DS and is not

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.7.0",
-  "generatedAt": "2026-08-26T12:08:30.982Z",
+  "version": "1.9.0",
+  "generatedAt": "2026-08-27T14:32:57.789Z",
   "components": [
     {
       "name": "Accordion",
@@ -30385,13 +30385,13 @@
               "name": "valueMaxWidth",
               "type": "number | undefined",
               "required": false,
-              "description": "Caps the applied value segment at this width (px), truncating with an\n ellipsis; lifts the chip's default max-width so it grows to fit (AS-1064)."
+              "description": "Caps the applied value segment at this width (px), truncating with an\n ellipsis; lifts the chip's default max-width so it grows to fit. Defaults\n to 500; a paired chip caps its whole width there instead (AS-1064)."
             },
             {
               "name": "caretMode",
               "type": "\"end\" | undefined",
               "required": false,
-              "description": "`'end'` places the caret at the end on value inline-edit; omit to select all (AS-1064)."
+              "description": "Caret placement on value inline-edit: `'end'` (default) puts it at the\n tail — better for long values; pass explicitly to keep the API visible (AS-1064)."
             },
             {
               "name": "pair",
@@ -76989,6 +76989,12 @@
           "type": "string[] | undefined",
           "required": false
         },
+        {
+          "name": "columnGroups",
+          "type": "TableColumnGroup[] | undefined",
+          "required": false,
+          "description": "Labeled sections for the column-settings menu. When set, the menu renders\nthese groups (flat, non-reorderable — like the FilterInput field menu)\ninstead of the default pinned/unpinned drag-reorder list. See\n{@link TableColumnGroup}."
+        },
         {
           "name": "virtualized",
           "type": "TableVirtualized | undefined",
@@ -83091,6 +83097,11 @@
           "code": "() => {\n  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n  const [columnOrder, setColumnOrder] = useState<string[]>([]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnVisibility={columnVisibility}\n      onColumnVisibilityChange={setColumnVisibility}\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n      defaultColumnVisibility={{}}\n      defaultColumnOrder={securityColumnIds}\n    />\n  );\n}",
           "description": "The gear at the end of the header — search the columns, show and hide them, reorder them,\nreset — writing the same visibility and order state as the header menu."
         },
+        {
+          "name": "SettingsMenuGrouped",
+          "code": "() => {\n  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n\n  const columnGroups: TableColumnGroup[] = [\n    {\n      label: 'Threat classification',\n      columns: ['objectName', 'status', 'firstDetected', 'lastSeen'],\n    },\n    { label: 'Request features', columns: ['sourceIp', 'parameter', 'endpoint', 'requests'] },\n  ];\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnVisibility={columnVisibility}\n      onColumnVisibilityChange={setColumnVisibility}\n      columnGroups={columnGroups}\n    />\n  );\n}",
+          "description": "`columnGroups` turns the settings menu into labeled, non-reorderable sections\n(the FilterInput field-menu pattern): no drag handle, columns rendered under\ntheir group header in the given order. Column ids absent from every group\n(`cweId` here) fall into a trailing headerless section."
+        },
         {
           "name": "Virtualization",
           "code": "() => {\n  const largeData = useMemo(() => createLargeSecurityEvents(1000), []);\n\n  return (\n    <Table\n      className='h-500'\n      data={largeData}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      virtualized='container'\n    />\n  );\n}",

package/package.json

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