@wallarm-org/design-system 2.7.0 → 2.7.1

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

@@ -5,6 +5,7 @@ import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, us
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { Settings } from "../../../icons/index.js";
 import { cn } from "../../../utils/cn.js";
+import { isEqual } from "../../../utils/isEqual.js";
 import { useTestId } from "../../../utils/testId.js";
 import { Button } from "../../Button/index.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuLabel, DropdownMenuTrigger } from "../../DropdownMenu/index.js";
@@ -13,7 +14,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 { EMPTY_VISIBILITY_DRAFT, TableSettingsMenuContentProvider } from "./TableSettingsMenuContentContext.js";
+import { EMPTY_VISIBILITY_DRAFT, TableSettingsMenuContentProvider, resolveVisibilityDraft } from "./TableSettingsMenuContentContext.js";
 import { useTableSettingsMenuContext } from "./TableSettingsMenuContext.js";
 import { TableSettingsMenuItem } from "./TableSettingsMenuItem.js";
 import { TableSettingsMenuReset } from "./TableSettingsMenuReset.js";
@@ -40,14 +41,9 @@ const TableSettingsMenu = ({ 'data-testid': testIdProp, children, ...rest })=>{
         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)
-        });
+        const current = table.atoms.columnVisibility.get();
+        const next = resolveVisibilityDraft(visibilityDraft, current, defaultColumnVisibility);
+        if (!isEqual(next, current)) table.setColumnVisibility(next);
     };
     useLayoutEffect(()=>{
         if (!menuOpen) return;

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

@@ -15,6 +15,15 @@ export interface VisibilityDraft {
     toggles: Record<string, boolean>;
 }
 export declare const EMPTY_VISIBILITY_DRAFT: VisibilityDraft;
+/**
+ * The visibility the draft would leave: the object the same switches and reset
+ * would have written one by one without deferral. Toggles that match their base
+ * are dropped, so a switch flipped back adds no explicit entry. Both the close
+ * (write only when this differs from the current object) and the Reset button
+ * (disabled only when this equals the default) read it, so the deferred menu
+ * behaves like the immediate one apart from timing.
+ */
+export declare const resolveVisibilityDraft: ({ fromDefault, toggles }: VisibilityDraft, current: Record<string, boolean>, defaults: Record<string, boolean> | undefined) => Record<string, boolean>;
 export declare const TableSettingsMenuContentProvider: import("react").Provider<TableSettingsMenuContentContextValue | null>;
 export declare const useTableSettingsMenuContentContext: () => TableSettingsMenuContentContextValue;
 export {};

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

@@ -3,6 +3,14 @@ const EMPTY_VISIBILITY_DRAFT = {
     fromDefault: false,
     toggles: {}
 };
+const resolveVisibilityDraft = ({ fromDefault, toggles }, current, defaults)=>{
+    const base = fromDefault ? defaults ?? {} : current;
+    const changed = Object.entries(toggles).filter(([id, visible])=>false !== base[id] !== visible);
+    return 0 === changed.length ? base : {
+        ...base,
+        ...Object.fromEntries(changed)
+    };
+};
 const TableSettingsMenuContentContext = /*#__PURE__*/ createContext(null);
 const TableSettingsMenuContentProvider = TableSettingsMenuContentContext.Provider;
 const useTableSettingsMenuContentContext = ()=>{
@@ -10,4 +18,4 @@ const useTableSettingsMenuContentContext = ()=>{
     if (!ctx) throw new Error("TableSettingsMenu item components must be rendered inside <TableSettingsMenu>");
     return ctx;
 };
-export { EMPTY_VISIBILITY_DRAFT, TableSettingsMenuContentProvider, useTableSettingsMenuContentContext };
+export { EMPTY_VISIBILITY_DRAFT, TableSettingsMenuContentProvider, resolveVisibilityDraft, useTableSettingsMenuContentContext };

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

@@ -4,9 +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";
+import { resolveVisibilityDraft, useTableSettingsMenuContentContext } from "./TableSettingsMenuContentContext.js";
 const TableSettingsMenuReset = (t0)=>{
-    const $ = c(32);
+    const $ = c(26);
     let onClick;
     let rest;
     let testIdProp;
@@ -50,43 +50,27 @@ const TableSettingsMenuReset = (t0)=>{
     const handleClick = t1;
     const { columnVisibility: currentVisibility, columnOrder: currentOrder } = table.state;
     const effectiveOrder = 0 === currentOrder.length ? defaultColumnOrder : currentOrder;
-    const { fromDefault, toggles } = visibilityDraft;
     let 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;
+    if ($[14] !== currentVisibility || $[15] !== defaultColumnVisibility || $[16] !== visibilityDraft) {
+        t2 = !defaultColumnVisibility || isEqual(resolveVisibilityDraft(visibilityDraft, currentVisibility, defaultColumnVisibility), defaultColumnVisibility);
+        $[14] = currentVisibility;
+        $[15] = defaultColumnVisibility;
+        $[16] = visibilityDraft;
+        $[17] = t2;
+    } else t2 = $[17];
+    const visibilityMatch = t2;
     let t3;
-    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 ($[24] !== defaultColumnOrder || $[25] !== effectiveOrder) {
-        t4 = !defaultColumnOrder || isEqual(effectiveOrder, defaultColumnOrder);
-        $[24] = defaultColumnOrder;
-        $[25] = effectiveOrder;
-        $[26] = t4;
-    } else t4 = $[26];
-    const orderMatch = t4;
+    if ($[18] !== defaultColumnOrder || $[19] !== effectiveOrder) {
+        t3 = !defaultColumnOrder || isEqual(effectiveOrder, defaultColumnOrder);
+        $[18] = defaultColumnOrder;
+        $[19] = effectiveOrder;
+        $[20] = t3;
+    } else t3 = $[20];
+    const orderMatch = t3;
     const isDefaultState = visibilityMatch && orderMatch;
-    let t5;
-    if ($[27] !== handleClick || $[28] !== isDefaultState || $[29] !== rest || $[30] !== testId) {
-        t5 = /*#__PURE__*/ jsx(Button, {
+    let t4;
+    if ($[21] !== handleClick || $[22] !== isDefaultState || $[23] !== rest || $[24] !== testId) {
+        t4 = /*#__PURE__*/ jsx(Button, {
             ...rest,
             type: "button",
             "data-testid": testId,
@@ -98,13 +82,13 @@ const TableSettingsMenuReset = (t0)=>{
             fullWidth: true,
             children: "Reset to default"
         });
-        $[27] = handleClick;
-        $[28] = isDefaultState;
-        $[29] = rest;
-        $[30] = testId;
-        $[31] = t5;
-    } else t5 = $[31];
-    return t5;
+        $[21] = handleClick;
+        $[22] = isDefaultState;
+        $[23] = rest;
+        $[24] = testId;
+        $[25] = t4;
+    } else t4 = $[25];
+    return t4;
 };
 TableSettingsMenuReset.displayName = "TableSettingsMenuReset";
 export { TableSettingsMenuReset };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.6.0",
-  "generatedAt": "2026-10-13T14:34:30.624Z",
+  "version": "2.7.0",
+  "generatedAt": "2026-10-13T16:31:03.367Z",
   "components": [
     {
       "name": "Accordion",
@@ -107735,6 +107735,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": "SettingsMenuDeferred",
+          "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      deferColumnVisibility\n    />\n  );\n}",
+          "description": "`deferColumnVisibility` holds switch toggles and \"Reset to default\" while the\nsettings menu is open and applies them as one `columnVisibility` change on\nclose — for consumers that fetch a column's data only once the menu closes,\nso a new column never sits empty behind the open 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}",

package/package.json

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