@wallarm-org/design-system 2.5.0 → 2.7.0

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

@@ -56,6 +56,7 @@ export interface TableContextValue<T extends RowData> {
     onMasterCellClick?: (rowId: string) => void;
     activeRowId: string | null;
     onSettingsOpenChange?: (open: boolean) => void;
+    deferColumnVisibility: boolean;
 }
 export interface TableProviderProps<T extends RowData> extends Omit<TableProps<T>, 'children' | 'aria-label'> {
     children: ReactNode;

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

@@ -13,7 +13,7 @@ import { VStack } from "../../Stack/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
 import { TABLE_DRAG_HANDLE_COLUMN_ID, TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, collectDirectChildren, withTableState } from "../lib/index.js";
 import { useTableContext } from "../TableContext/index.js";
-import { TableSettingsMenuContentProvider } from "./TableSettingsMenuContentContext.js";
+import { EMPTY_VISIBILITY_DRAFT, TableSettingsMenuContentProvider } from "./TableSettingsMenuContentContext.js";
 import { useTableSettingsMenuContext } from "./TableSettingsMenuContext.js";
 import { TableSettingsMenuItem } from "./TableSettingsMenuItem.js";
 import { TableSettingsMenuReset } from "./TableSettingsMenuReset.js";
@@ -24,18 +24,31 @@ const TableSettingsMenu = ({ 'data-testid': testIdProp, children, ...rest })=>{
     const testId = useTestId('settings-menu', testIdProp);
     const { anchorNode } = useTableSettingsMenuContext();
     const ctx = useTableContext();
-    const { table, alwaysPinnedLeft, masterColumnId, columnGroups, onSettingsOpenChange } = ctx;
+    const { table, alwaysPinnedLeft, masterColumnId, columnGroups, onSettingsOpenChange, deferColumnVisibility, defaultColumnVisibility } = ctx;
     const hasTextDescription = table.getAllLeafColumns().some((col)=>col.columnDef.meta?.description?.type === 'text');
     const [search, setSearch] = useState('');
     const [menuOpen, setMenuOpen] = useState(false);
+    const [visibilityDraft, setVisibilityDraft] = useState(EMPTY_VISIBILITY_DRAFT);
     const contentRef = useRef(null);
     const [lockedWidth, setLockedWidth] = useState();
     const handleOpenChange = (open)=>{
         setMenuOpen(open);
         if (open) setSearch('');
         else setLockedWidth(void 0);
+        if (!open && deferColumnVisibility) applyVisibilityDraft();
+        setVisibilityDraft(EMPTY_VISIBILITY_DRAFT);
         onSettingsOpenChange?.(open);
     };
+    const applyVisibilityDraft = ()=>{
+        const { fromDefault, toggles } = visibilityDraft;
+        const base = fromDefault ? defaultColumnVisibility ?? {} : table.atoms.columnVisibility.get();
+        const changed = Object.entries(toggles).filter(([id, visible])=>false !== base[id] !== visible);
+        if (!fromDefault && 0 === changed.length) return;
+        table.setColumnVisibility({
+            ...base,
+            ...Object.fromEntries(changed)
+        });
+    };
     useLayoutEffect(()=>{
         if (!menuOpen) return;
         let raf = requestAnimationFrame(function measure() {
@@ -137,7 +150,9 @@ const TableSettingsMenu = ({ 'data-testid': testIdProp, children, ...rest })=>{
     const content = /*#__PURE__*/ jsx(TableSettingsMenuContentProvider, {
         value: {
             search,
-            setSearch
+            setSearch,
+            visibilityDraft,
+            setVisibilityDraft
         },
         children: /*#__PURE__*/ jsx("div", {
             "data-testid": testId,

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuContentContext.d.ts

@@ -1,7 +1,20 @@
 interface TableSettingsMenuContentContextValue {
     search: string;
     setSearch: (value: string) => void;
+    /**
+     * Visibility held while the menu is open (`deferColumnVisibility`), applied
+     * to the table on close. Untouched when not deferring.
+     */
+    visibilityDraft: VisibilityDraft;
+    setVisibilityDraft: (draft: VisibilityDraft) => void;
 }
+export interface VisibilityDraft {
+    /** "Reset to default" was pressed: the draft starts from the default, not the table. */
+    fromDefault: boolean;
+    /** Per-column toggles on top of that base. */
+    toggles: Record<string, boolean>;
+}
+export declare const EMPTY_VISIBILITY_DRAFT: VisibilityDraft;
 export declare const TableSettingsMenuContentProvider: import("react").Provider<TableSettingsMenuContentContextValue | null>;
 export declare const useTableSettingsMenuContentContext: () => TableSettingsMenuContentContextValue;
 export {};

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

@@ -1,4 +1,8 @@
 import { createContext, useContext } from "react";
+const EMPTY_VISIBILITY_DRAFT = {
+    fromDefault: false,
+    toggles: {}
+};
 const TableSettingsMenuContentContext = /*#__PURE__*/ createContext(null);
 const TableSettingsMenuContentProvider = TableSettingsMenuContentContext.Provider;
 const useTableSettingsMenuContentContext = ()=>{
@@ -6,4 +10,4 @@ const useTableSettingsMenuContentContext = ()=>{
     if (!ctx) throw new Error("TableSettingsMenu item components must be rendered inside <TableSettingsMenu>");
     return ctx;
 };
-export { TableSettingsMenuContentProvider, useTableSettingsMenuContentContext };
+export { EMPTY_VISIBILITY_DRAFT, TableSettingsMenuContentProvider, useTableSettingsMenuContentContext };

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

@@ -8,8 +8,9 @@ import { useTestId } from "../../../utils/testId.js";
 import { Switch, SwitchControl, SwitchLabel } from "../../Switch/index.js";
 import { useTableValue } from "../lib/index.js";
 import { useTableContext } from "../TableContext/index.js";
+import { useTableSettingsMenuContentContext } from "./TableSettingsMenuContentContext.js";
 const TableSettingsMenuItem = (t0)=>{
-    const $ = c(53);
+    const $ = c(57);
     let className;
     let columnId;
     let rest;
@@ -27,7 +28,8 @@ const TableSettingsMenuItem = (t0)=>{
         rest = $[3];
         testIdProp = $[4];
     }
-    const { masterColumnId, columnDndEnabled, columnGroups, table } = useTableContext();
+    const { masterColumnId, columnDndEnabled, columnGroups, table, deferColumnVisibility, defaultColumnVisibility } = useTableContext();
+    const { visibilityDraft, setVisibilityDraft } = useTableSettingsMenuContentContext();
     const grouped = !!columnGroups;
     const slotTestId = useTestId("settings-menu-item");
     const switchTestId = useTestId(`settings-menu-item-${columnId}`, testIdProp);
@@ -45,7 +47,8 @@ const TableSettingsMenuItem = (t0)=>{
         $[8] = column;
         $[9] = t2;
     } else t2 = $[9];
-    const isVisible = useTableValue(t2);
+    const isTableVisible = useTableValue(t2);
+    const isVisible = visibilityDraft.toggles[columnId] ?? (visibilityDraft.fromDefault ? defaultColumnVisibility?.[columnId] !== false : isTableVisible);
     let t3;
     if ($[10] !== column) {
         t3 = ()=>column?.getCanHide() ?? false;
@@ -121,33 +124,43 @@ const TableSettingsMenuItem = (t0)=>{
         $[30] = t13;
     } else t13 = $[30];
     let t14;
-    if ($[31] !== column) {
-        t14 = (details)=>column.toggleVisibility(details.checked);
+    if ($[31] !== column || $[32] !== columnId || $[33] !== deferColumnVisibility || $[34] !== setVisibilityDraft || $[35] !== visibilityDraft) {
+        t14 = (details)=>deferColumnVisibility ? setVisibilityDraft({
+                ...visibilityDraft,
+                toggles: {
+                    ...visibilityDraft.toggles,
+                    [columnId]: details.checked
+                }
+            }) : column.toggleVisibility(details.checked);
         $[31] = column;
-        $[32] = t14;
-    } else t14 = $[32];
+        $[32] = columnId;
+        $[33] = deferColumnVisibility;
+        $[34] = setVisibilityDraft;
+        $[35] = visibilityDraft;
+        $[36] = t14;
+    } else t14 = $[36];
     const t15 = isMasterColumn || !canHide;
     let t16;
-    if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
         t16 = cn("flex-1 truncate");
-        $[33] = t16;
-    } else t16 = $[33];
+        $[37] = t16;
+    } else t16 = $[37];
     let t17;
-    if ($[34] !== header) {
+    if ($[38] !== header) {
         t17 = /*#__PURE__*/ jsx(SwitchLabel, {
             className: t16,
             children: header
         });
-        $[34] = header;
-        $[35] = t17;
-    } else t17 = $[35];
+        $[38] = header;
+        $[39] = t17;
+    } else t17 = $[39];
     let t18;
-    if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
         t18 = /*#__PURE__*/ jsx(SwitchControl, {});
-        $[36] = t18;
-    } else t18 = $[36];
+        $[40] = t18;
+    } else t18 = $[40];
     let t19;
-    if ($[37] !== isVisible || $[38] !== rest || $[39] !== switchTestId || $[40] !== t13 || $[41] !== t14 || $[42] !== t15 || $[43] !== t17) {
+    if ($[41] !== isVisible || $[42] !== rest || $[43] !== switchTestId || $[44] !== t13 || $[45] !== t14 || $[46] !== t15 || $[47] !== t17) {
         t19 = /*#__PURE__*/ jsxs(Switch, {
             ...rest,
             "data-testid": switchTestId,
@@ -160,17 +173,17 @@ const TableSettingsMenuItem = (t0)=>{
                 t18
             ]
         });
-        $[37] = isVisible;
-        $[38] = rest;
-        $[39] = switchTestId;
-        $[40] = t13;
-        $[41] = t14;
-        $[42] = t15;
-        $[43] = t17;
-        $[44] = t19;
-    } else t19 = $[44];
+        $[41] = isVisible;
+        $[42] = rest;
+        $[43] = switchTestId;
+        $[44] = t13;
+        $[45] = t14;
+        $[46] = t15;
+        $[47] = t17;
+        $[48] = t19;
+    } else t19 = $[48];
     let t20;
-    if ($[45] !== setNodeRef || $[46] !== slotTestId || $[47] !== style || $[48] !== t10 || $[49] !== t11 || $[50] !== t12 || $[51] !== t19) {
+    if ($[49] !== setNodeRef || $[50] !== slotTestId || $[51] !== style || $[52] !== t10 || $[53] !== t11 || $[54] !== t12 || $[55] !== t19) {
         t20 = /*#__PURE__*/ jsxs("div", {
             ref: setNodeRef,
             style: style,
@@ -182,15 +195,15 @@ const TableSettingsMenuItem = (t0)=>{
                 t19
             ]
         });
-        $[45] = setNodeRef;
-        $[46] = slotTestId;
-        $[47] = style;
-        $[48] = t10;
-        $[49] = t11;
-        $[50] = t12;
-        $[51] = t19;
-        $[52] = t20;
-    } else t20 = $[52];
+        $[49] = setNodeRef;
+        $[50] = slotTestId;
+        $[51] = style;
+        $[52] = t10;
+        $[53] = t11;
+        $[54] = t12;
+        $[55] = t19;
+        $[56] = t20;
+    } else t20 = $[56];
     return t20;
 };
 TableSettingsMenuItem.displayName = "TableSettingsMenuItem";

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

@@ -4,8 +4,9 @@ import { isEqual } from "../../../utils/isEqual.js";
 import { useTestId } from "../../../utils/testId.js";
 import { Button } from "../../Button/index.js";
 import { useTableContext } from "../TableContext/index.js";
+import { useTableSettingsMenuContentContext } from "./TableSettingsMenuContentContext.js";
 const TableSettingsMenuReset = (t0)=>{
-    const $ = c(23);
+    const $ = c(32);
     let onClick;
     let rest;
     let testIdProp;
@@ -21,47 +22,71 @@ const TableSettingsMenuReset = (t0)=>{
         testIdProp = $[3];
     }
     const testId = useTestId("settings-menu-reset", testIdProp);
-    const { table, visibilityEnabled, columnDndEnabled, defaultColumnVisibility, defaultColumnOrder, setColumnOrder } = useTableContext();
+    const { table, visibilityEnabled, columnDndEnabled, defaultColumnVisibility, defaultColumnOrder, setColumnOrder, deferColumnVisibility } = useTableContext();
+    const { visibilityDraft, setVisibilityDraft } = useTableSettingsMenuContentContext();
     let t1;
-    if ($[4] !== columnDndEnabled || $[5] !== defaultColumnOrder || $[6] !== defaultColumnVisibility || $[7] !== onClick || $[8] !== setColumnOrder || $[9] !== table || $[10] !== visibilityEnabled) {
+    if ($[4] !== columnDndEnabled || $[5] !== defaultColumnOrder || $[6] !== defaultColumnVisibility || $[7] !== deferColumnVisibility || $[8] !== onClick || $[9] !== setColumnOrder || $[10] !== setVisibilityDraft || $[11] !== table || $[12] !== visibilityEnabled) {
         t1 = (event)=>{
             onClick?.(event);
             if (event.defaultPrevented) return;
-            if (defaultColumnVisibility && visibilityEnabled) table.setColumnVisibility(defaultColumnVisibility);
+            if (defaultColumnVisibility && visibilityEnabled) if (deferColumnVisibility) setVisibilityDraft({
+                fromDefault: true,
+                toggles: {}
+            });
+            else table.setColumnVisibility(defaultColumnVisibility);
             if (defaultColumnOrder && columnDndEnabled) setColumnOrder(defaultColumnOrder);
         };
         $[4] = columnDndEnabled;
         $[5] = defaultColumnOrder;
         $[6] = defaultColumnVisibility;
-        $[7] = onClick;
-        $[8] = setColumnOrder;
-        $[9] = table;
-        $[10] = visibilityEnabled;
-        $[11] = t1;
-    } else t1 = $[11];
+        $[7] = deferColumnVisibility;
+        $[8] = onClick;
+        $[9] = setColumnOrder;
+        $[10] = setVisibilityDraft;
+        $[11] = table;
+        $[12] = visibilityEnabled;
+        $[13] = t1;
+    } else t1 = $[13];
     const handleClick = t1;
     const { columnVisibility: currentVisibility, columnOrder: currentOrder } = table.state;
     const effectiveOrder = 0 === currentOrder.length ? defaultColumnOrder : currentOrder;
+    const { fromDefault, toggles } = visibilityDraft;
     let t2;
-    if ($[12] !== currentVisibility || $[13] !== defaultColumnVisibility) {
-        t2 = !defaultColumnVisibility || isEqual(currentVisibility, defaultColumnVisibility);
-        $[12] = currentVisibility;
-        $[13] = defaultColumnVisibility;
-        $[14] = t2;
-    } else t2 = $[14];
-    const visibilityMatch = t2;
+    if ($[14] !== fromDefault || $[15] !== toggles) {
+        t2 = fromDefault || Object.keys(toggles).length > 0;
+        $[14] = fromDefault;
+        $[15] = toggles;
+        $[16] = t2;
+    } else t2 = $[16];
+    const hasDraft = t2;
     let t3;
-    if ($[15] !== defaultColumnOrder || $[16] !== effectiveOrder) {
-        t3 = !defaultColumnOrder || isEqual(effectiveOrder, defaultColumnOrder);
-        $[15] = defaultColumnOrder;
-        $[16] = effectiveOrder;
-        $[17] = t3;
-    } else t3 = $[17];
-    const orderMatch = t3;
-    const isDefaultState = visibilityMatch && orderMatch;
+    if ($[17] !== currentVisibility || $[18] !== defaultColumnVisibility || $[19] !== fromDefault || $[20] !== hasDraft || $[21] !== table || $[22] !== toggles) {
+        t3 = !defaultColumnVisibility || (hasDraft ? table.getAllLeafColumns().every((column)=>{
+            const base = fromDefault ? defaultColumnVisibility : currentVisibility;
+            const shown = toggles[column.id] ?? false !== base[column.id];
+            return shown === (false !== defaultColumnVisibility[column.id]);
+        }) : isEqual(currentVisibility, defaultColumnVisibility));
+        $[17] = currentVisibility;
+        $[18] = defaultColumnVisibility;
+        $[19] = fromDefault;
+        $[20] = hasDraft;
+        $[21] = table;
+        $[22] = toggles;
+        $[23] = t3;
+    } else t3 = $[23];
+    const visibilityMatch = t3;
     let t4;
-    if ($[18] !== handleClick || $[19] !== isDefaultState || $[20] !== rest || $[21] !== testId) {
-        t4 = /*#__PURE__*/ jsx(Button, {
+    if ($[24] !== defaultColumnOrder || $[25] !== effectiveOrder) {
+        t4 = !defaultColumnOrder || isEqual(effectiveOrder, defaultColumnOrder);
+        $[24] = defaultColumnOrder;
+        $[25] = effectiveOrder;
+        $[26] = t4;
+    } else t4 = $[26];
+    const orderMatch = t4;
+    const isDefaultState = visibilityMatch && orderMatch;
+    let t5;
+    if ($[27] !== handleClick || $[28] !== isDefaultState || $[29] !== rest || $[30] !== testId) {
+        t5 = /*#__PURE__*/ jsx(Button, {
             ...rest,
             type: "button",
             "data-testid": testId,
@@ -73,13 +98,13 @@ const TableSettingsMenuReset = (t0)=>{
             fullWidth: true,
             children: "Reset to default"
         });
-        $[18] = handleClick;
-        $[19] = isDefaultState;
-        $[20] = rest;
-        $[21] = testId;
-        $[22] = t4;
-    } else t4 = $[22];
-    return t4;
+        $[27] = handleClick;
+        $[28] = isDefaultState;
+        $[29] = rest;
+        $[30] = testId;
+        $[31] = t5;
+    } else t5 = $[31];
+    return t5;
 };
 TableSettingsMenuReset.displayName = "TableSettingsMenuReset";
 export { TableSettingsMenuReset };

package/dist/components/Table/lib/createExpandColumn.d.ts

@@ -2,6 +2,10 @@ import type { ColumnDef, RowData } from '@tanstack/react-table';
 import type { DSTableFeatures } from './dsTableFeatures.js';
 /**
  * Creates an expand/collapse column for use in Table.
- * Automatically injected by Table when `renderExpandedRow` is provided.
+ * Automatically injected by Table when `renderExpandedRow` is provided, or
+ * with `groupExpandColumn` in sub-row grouping mode — where every row can
+ * expand, so `groupsOnly` limits the toggle to rows that have sub-rows.
  */
-export declare const createExpandColumn: <T extends RowData>() => ColumnDef<DSTableFeatures, T, unknown>;
+export declare const createExpandColumn: <T extends RowData>({ groupsOnly, }?: {
+    groupsOnly?: boolean;
+}) => ColumnDef<DSTableFeatures, T, unknown>;

package/dist/components/Table/lib/createExpandColumn.js

@@ -3,7 +3,7 @@ import { ChevronDown, ChevronRight } from "../../../icons/index.js";
 import { ToggleButton } from "../../ToggleButton/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
 import { TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH } from "./constants.js";
-const createExpandColumn = ()=>({
+const createExpandColumn = ({ groupsOnly = false } = {})=>({
         id: TABLE_EXPAND_COLUMN_ID,
         size: TABLE_EXPAND_COLUMN_WIDTH,
         minSize: TABLE_EXPAND_COLUMN_WIDTH,
@@ -18,7 +18,7 @@ const createExpandColumn = ()=>({
         },
         header: ()=>null,
         cell: ({ row })=>{
-            if (!row.getCanExpand()) return null;
+            if (!row.getCanExpand() || groupsOnly && 0 === row.subRows.length) return null;
             const expanded = row.getIsExpanded();
             return /*#__PURE__*/ jsxs(Tooltip, {
                 children: [

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

@@ -241,6 +241,13 @@ export interface TableProps<T> extends TestableProps {
      *   right edge of the table. Requires `renderGroupRow`.
      */
     groupRowSpan?: 'master' | 'full';
+    /**
+     * Keep the expand column in sub-row grouping mode (`renderGroupRow`), which
+     * otherwise drops it and leaves the toggle to the group row's content. The
+     * column comes first, ahead of the drag handle, and shows a toggle on group
+     * rows only — so the rows of a group, drag handle included, sit inside it.
+     */
+    groupExpandColumn?: boolean;
     /** Sub-row accessor for hierarchical/tree data (used with renderGroupRow) */
     getSubRows?: (row: T) => T[] | undefined;
     /**
@@ -271,6 +278,13 @@ export interface TableProps<T> extends TestableProps {
      * the close edge here.
      */
     onSettingsOpenChange?: (open: boolean) => void;
+    /**
+     * Hold column-visibility toggles in the built-in settings menu until it
+     * closes, then apply them as one `columnVisibility` change. Without it each
+     * switch shows or hides its column at once — a column whose data the consumer
+     * only fetches on close then sits empty while the menu is open.
+     */
+    deferColumnVisibility?: boolean;
     /**
      * Enable row virtualization. `'container'` virtualizes within the table's own scroll container;
      * `'window'` follows the page scroll — the nearest scrollable ancestor, or the browser window.

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.4.0",
-  "generatedAt": "2026-10-13T09:13:52.244Z",
+  "version": "2.6.0",
+  "generatedAt": "2026-10-13T14:34:30.624Z",
   "components": [
     {
       "name": "Accordion",
@@ -101537,6 +101537,12 @@
           "required": false,
           "description": "How a group row lays out its content.\n\n- `'master'` (default): the master column's cell, then empty filler cells —\n  the content is confined to the master column width.\n- `'full'`: `renderGroupRow(row)` in a single cell spanning every data\n  column (system cells — selection, drag handle — keep their own cells).\n  Use for a group header with a title on the left and actions pinned to the\n  right edge of the table. Requires `renderGroupRow`."
         },
+        {
+          "name": "groupExpandColumn",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Keep the expand column in sub-row grouping mode (`renderGroupRow`), which\notherwise drops it and leaves the toggle to the group row's content. The\ncolumn comes first, ahead of the drag handle, and shows a toggle on group\nrows only — so the rows of a group, drag handle included, sit inside it."
+        },
         {
           "name": "getSubRows",
           "type": "((row: T) => T[] | undefined) | undefined",
@@ -101580,6 +101586,12 @@
           "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": "deferColumnVisibility",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Hold column-visibility toggles in the built-in settings menu until it\ncloses, then apply them as one `columnVisibility` change. Without it each\nswitch shows or hides its column at once — a column whose data the consumer\nonly fetches on close then sits empty while the menu is open."
+        },
         {
           "name": "virtualized",
           "type": "TableVirtualized | undefined",
@@ -107828,6 +107840,11 @@
           "code": "() => {\n  const [data, setData] = useState<SecurityHeaderEntry[]>(() => [\n    {\n      ...groupedHeaderData[0]!,\n      children: [\n        { ...groupedHeaderData[0]!, id: `${BANNER_ROW_PREFIX}csp`, children: undefined },\n        ...(groupedHeaderData[0]!.children ?? []),\n      ],\n    },\n    ...groupedHeaderData.slice(1, 3),\n    { ...groupedHeaderData[0]!, id: 'group-empty', objectName: 'Nothing here yet', children: [] },\n  ]);\n  const [expanded, setExpanded] = useState<TableExpandedState>(true);\n\n  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {\n    setData(prev =>\n      prev.map(group => {\n        const children = group.children ?? [];\n        const oldIndex = children.findIndex(row => row.id === event.activeRowId);\n        const newIndex = children.findIndex(row => row.id === event.overRowId);\n        if (oldIndex === -1 || newIndex === -1) return group;\n        return { ...group, children: arrayMove(children, oldIndex, newIndex) };\n      }),\n    );\n  }, []);\n\n  return (\n    <Table<SecurityHeaderEntry>\n      data={data}\n      columns={headerColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      showEmptyGroups\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      onRowReorder={handleRowReorder}\n      groupRowSpan='full'\n      renderGroupRow={row => {\n        const isExpanded = row.getIsExpanded();\n        return (\n          <HStack gap={8} align='center'>\n            <Button\n              variant='ghost'\n              color='neutral'\n              size='small'\n              aria-expanded={isExpanded}\n              aria-label={isExpanded ? 'Collapse group' : 'Expand group'}\n              onClick={row.getToggleExpandedHandler()}\n            >\n              {isExpanded ? <ChevronDown /> : <ChevronRight />}\n            </Button>\n            <Text weight='medium'>{row.original.objectName}</Text>\n            <Badge color='gray' type='secondary' size='medium'>\n              {row.subRows.filter(r => !r.id.startsWith(BANNER_ROW_PREFIX)).length}\n            </Badge>\n            <HStack gap={4} className='ml-auto'>\n              <Button variant='ghost' color='neutral' size='small'>\n                <Plus />\n                Add header\n              </Button>\n              <Button variant='ghost' color='neutral' size='small' aria-label='More actions'>\n                <Ellipsis />\n              </Button>\n            </HStack>\n          </HStack>\n        );\n      }}\n      renderFullWidthRow={row =>\n        row.id.startsWith(BANNER_ROW_PREFIX) ? (\n          <HStack gap={8} align='center'>\n            <Shield size='sm' />\n            <Text size='sm' weight='medium'>\n              Wallarm baseline headers\n            </Text>\n            <Text size='sm' color='secondary'>\n              · applied first · built-in, always on\n            </Text>\n            <Button variant='ghost' color='neutral' size='small' className='ml-auto'>\n              Manage baseline →\n            </Button>\n          </HStack>\n        ) : undefined\n      }\n      getRowCanDrag={row => !row.id.startsWith(BANNER_ROW_PREFIX) && !LOCKED_ROW_IDS.has(row.id)}\n      data-testid='grouped-full-width-table'\n    />\n  );\n}",
           "description": "`groupRowSpan: 'full'` draws `renderGroupRow` across every data column — title on the left,\nactions on the right edge; the content owns the collapse toggle. `renderFullWidthRow` turns a\nregular row into a single spanning banner, and `getRowCanDrag` keeps the banner and the locked\nfirst header in place while the other rows of the group reorder around them."
         },
+        {
+          "name": "GroupedWithExpandColumn",
+          "code": "() => {\n  const [data, setData] = useState<SecurityHeaderEntry[]>(() => [\n    ...groupedHeaderData,\n    { ...groupedHeaderData[0]!, id: 'group-empty', objectName: 'Nothing here yet', children: [] },\n  ]);\n  const [expanded, setExpanded] = useState<TableExpandedState>(true);\n\n  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {\n    setData(prev =>\n      prev.map(group => {\n        const children = group.children ?? [];\n        const oldIndex = children.findIndex(row => row.id === event.activeRowId);\n        const newIndex = children.findIndex(row => row.id === event.overRowId);\n        if (oldIndex === -1 || newIndex === -1) return group;\n        return { ...group, children: arrayMove(children, oldIndex, newIndex) };\n      }),\n    );\n  }, []);\n\n  return (\n    <Table<SecurityHeaderEntry>\n      data={data}\n      columns={headerColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      showEmptyGroups\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      onRowReorder={handleRowReorder}\n      groupRowSpan='full'\n      groupExpandColumn\n      renderGroupRow={row => (\n        <HStack gap={8} align='center'>\n          <Text weight='medium'>{row.original.objectName}</Text>\n          <Badge color='gray' type='secondary' size='medium'>\n            {row.subRows.length}\n          </Badge>\n          <Button variant='ghost' color='neutral' size='small' className='ml-auto'>\n            <Plus />\n            Add header\n          </Button>\n        </HStack>\n      )}\n      data-testid='grouped-expand-column-table'\n    />\n  );\n}",
+          "description": "`groupExpandColumn` keeps the expand column in grouping mode: the toggle sits in its own column,\nfirst, and every row of a group — drag handle included — sits to the right of it, while\n`renderGroupRow` keeps the title and the actions."
+        },
         {
           "name": "RowReorderingWithSelection",
           "code": "() => {\n  const [data, setData] = useState(() => securityEvents.slice(0, 6));\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n\n  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {\n    setData(prev => {\n      const oldIndex = prev.findIndex(row => row.id === event.activeRowId);\n      const newIndex = prev.findIndex(row => row.id === event.overRowId);\n      if (oldIndex === -1 || newIndex === -1) return prev;\n      return arrayMove(prev, oldIndex, newIndex);\n    });\n  }, []);\n\n  return (\n    <Table\n      data={data}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      onRowReorder={handleRowReorder}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    />\n  );\n}",

package/package.json

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