@dbcdk/react-components 0.0.195 → 0.0.196

package/dist/components/table/components/TableSkeletonBody.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SkeletonLoaderItem } from '../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import { cx } from '../table.classes';
+import styles from '../Table.module.css';
+
+function TableSkeletonBody({ columns, rows, hasSelection }) {
+  return /* @__PURE__ */ jsx("tbody", { className: styles.body, "aria-busy": "true", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxs("tr", { className: styles.row, children: [
+    hasSelection ? /* @__PURE__ */ jsx("td", { className: cx(styles.cell, styles.selectionCell) }) : null,
+    columns.map((column, columnIndex) => {
+      var _a;
+      return /* @__PURE__ */ jsx("td", { className: styles.cell, "data-align": (_a = column.align) != null ? _a : "left", children: /* @__PURE__ */ jsx("div", { className: styles.skeletonCellContent, children: /* @__PURE__ */ jsx(
+        SkeletonLoaderItem,
+        {
+          width: `${55 + (rowIndex + columnIndex) % 3 * 15}%`,
+          height: 12,
+          radius: 4,
+          ariaLabel: "Indl\xE6ser r\xE6kke"
+        }
+      ) }) }, column.id);
+    })
+  ] }, rowIndex)) });
+}
+
+export { TableSkeletonBody };

package/dist/components/table/components/table-settings/TableHeaderSettings.cjs

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var TableSettings = require('./TableSettings');
+
+function TableHeaderSettings({
+  settings,
+  options,
+  columns
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableSettings.TableSettings,
+    {
+      ...options,
+      triggerVariant: "icon",
+      columns,
+      viewMode: settings.viewMode,
+      handleChangeViewMode: settings.setViewMode,
+      striped: settings.striped,
+      onStripedChange: settings.setStriped,
+      visibleColumnIds: settings.visibleColumnIds,
+      onVisibleColumnIdsChange: settings.setVisibleColumnIds
+    }
+  );
+}
+
+exports.TableHeaderSettings = TableHeaderSettings;

package/dist/components/table/components/table-settings/TableHeaderSettings.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+import type { ColumnItem, TableSettingsColumn, TableSettingsController, TableSettingsMenuOptions } from '../../Table.types';
+/**
+ * The icon-only settings trigger that `Table`/`TanstackTable` render in their
+ * header when given `settings`. Internal - apps pass `settings` to the table.
+ */
+export declare function TableHeaderSettings<T extends Record<string, any>>({ settings, options, columns, }: {
+    settings: TableSettingsController;
+    options?: TableSettingsMenuOptions;
+    columns: ReadonlyArray<ColumnItem<T> | TableSettingsColumn>;
+}): JSX.Element;

package/dist/components/table/components/table-settings/TableHeaderSettings.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { TableSettings } from './TableSettings';
+
+function TableHeaderSettings({
+  settings,
+  options,
+  columns
+}) {
+  return /* @__PURE__ */ jsx(
+    TableSettings,
+    {
+      ...options,
+      triggerVariant: "icon",
+      columns,
+      viewMode: settings.viewMode,
+      handleChangeViewMode: settings.setViewMode,
+      striped: settings.striped,
+      onStripedChange: settings.setStriped,
+      visibleColumnIds: settings.visibleColumnIds,
+      onVisibleColumnIdsChange: settings.setVisibleColumnIds
+    }
+  );
+}
+
+export { TableHeaderSettings };

package/dist/components/table/components/table-settings/TableSettings.cjs

@@ -7,10 +7,13 @@ var react = require('react');
 var Button = require('../../../button/Button');
 var Menu = require('../../../menu/Menu');
 var Popover = require('../../../popover/Popover');
+var tableSettings_utils = require('../../tableSettings.utils');
 
 function TableSettingsMenuSection({
   viewMode,
   handleChangeViewMode,
+  striped,
+  onStripedChange,
   columns = [],
   visibleColumnIds = [],
   onVisibleColumnIdsChange,
@@ -20,31 +23,36 @@ function TableSettingsMenuSection({
   additionalSettings,
   close
 }) {
-  const handleViewModeChange = (mode, close2) => {
+  const handleViewModeChange = (mode) => {
     handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
-    close2 == null ? void 0 : close2();
   };
-  const hideableColumns = react.useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
-  const allPresetIds = react.useMemo(() => hideableColumns.map((c) => c.id), [hideableColumns]);
+  const hideableColumns = react.useMemo(() => columns.filter(tableSettings_utils.canHideSettingsColumn), [columns]);
+  const allPresetIds = react.useMemo(
+    () => hideableColumns.map(tableSettings_utils.getSettingsColumnId).filter((id) => !!id),
+    [hideableColumns]
+  );
   const standardPresetIds = react.useMemo(
-    () => hideableColumns.filter((c) => {
-      var _a;
-      return ((_a = c.meta) == null ? void 0 : _a.hidden) !== true;
-    }).map((c) => c.id),
+    () => hideableColumns.filter((c) => !tableSettings_utils.isSettingsColumnHidden(c)).map(tableSettings_utils.getSettingsColumnId).filter((id) => !!id),
     [hideableColumns]
   );
   const visibleSet = react.useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]);
   const visibleCount = react.useMemo(() => {
-    return hideableColumns.reduce((acc, c) => {
-      var _a;
-      return acc + (visibleSet.has((_a = c.id) != null ? _a : "") ? 1 : 0);
-    }, 0);
+    return hideableColumns.reduce(
+      (acc, c) => {
+        var _a;
+        return acc + (visibleSet.has((_a = tableSettings_utils.getSettingsColumnId(c)) != null ? _a : "") ? 1 : 0);
+      },
+      0
+    );
   }, [hideableColumns, visibleSet]);
   const setVisibleIds = (nextIds) => {
     if (!onVisibleColumnIdsChange) return;
     const safe = nextIds.length > 0 ? nextIds : standardPresetIds.length > 0 ? standardPresetIds : allPresetIds;
+    const lockedVisibleIds = columns.filter((column) => !tableSettings_utils.canHideSettingsColumn(column)).map(tableSettings_utils.getSettingsColumnId).filter((id) => id != null && visibleSet.has(id));
     onVisibleColumnIdsChange(
-      safe.filter((id) => typeof id === "string" && Boolean(id))
+      Array.from(/* @__PURE__ */ new Set([...safe, ...lockedVisibleIds])).filter(
+        (id) => typeof id === "string" && Boolean(id)
+      )
     );
   };
   const toggleColumn = (id, nextVisible) => {
@@ -55,20 +63,32 @@ function TableSettingsMenuSection({
   };
   const isAllActive = react.useMemo(() => {
     if (!hideableColumns.length) return false;
-    return hideableColumns.every((c) => c.id && visibleSet.has(c.id));
-  }, [hideableColumns, visibleSet]);
+    return allPresetIds.length > 0 && allPresetIds.every((id) => visibleSet.has(id));
+  }, [hideableColumns, allPresetIds, visibleSet]);
   const isStandardActive = react.useMemo(() => {
     if (!hideableColumns.length) return false;
     const std = new Set(standardPresetIds);
-    return hideableColumns.every((c) => c.id && visibleSet.has(c.id) === std.has(c.id));
-  }, [hideableColumns, visibleSet, standardPresetIds]);
+    return allPresetIds.length > 0 && allPresetIds.every((id) => visibleSet.has(id) === std.has(id));
+  }, [hideableColumns, allPresetIds, visibleSet, standardPresetIds]);
   const presetRadioName = "table-columns-preset";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     additionalSettings == null ? void 0 : additionalSettings(close),
-    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsUpDown, {}),
-      "Ombryd tekst"
-    ] }) }),
+    onStripedChange ? /* @__PURE__ */ jsxRuntime.jsx(
+      Menu.Menu.SwitchItem,
+      {
+        checked: Boolean(striped),
+        label: "Stribet",
+        onCheckedChange: (nextChecked) => onStripedChange(nextChecked)
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Menu.Menu.SwitchItem,
+      {
+        checked: viewMode === "wrapped",
+        label: "Ombryd tekst",
+        onCheckedChange: () => handleViewModeChange(viewMode)
+      }
+    ),
     hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
@@ -83,7 +103,6 @@ function TableSettingsMenuSection({
             setVisibleIds(
               allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
             );
-            close == null ? void 0 : close();
           }
         }
       ),
@@ -100,15 +119,16 @@ function TableSettingsMenuSection({
                 (id) => typeof id === "string" && Boolean(id)
               )
             );
-            close == null ? void 0 : close();
           }
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
       hideableColumns.map((col) => {
-        const isVisible = col.id ? visibleSet.has(col.id) : false;
+        const colId = tableSettings_utils.getSettingsColumnId(col);
+        const isVisible = colId ? visibleSet.has(colId) : false;
         const disableUncheckingLast = isVisible && visibleCount <= 1;
-        const label = col.header;
+        const header = col.header;
+        const label = typeof header === "function" && header.length === 0 ? header() : typeof header === "string" || typeof header === "number" || react.isValidElement(header) ? header : colId;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Menu.Menu.CheckItem,
           {
@@ -116,11 +136,11 @@ function TableSettingsMenuSection({
             disabled: disableUncheckingLast,
             label,
             onCheckedChange: (nextChecked) => {
-              if (disableUncheckingLast) return;
-              toggleColumn(col.id, nextChecked);
+              if (disableUncheckingLast || !colId) return;
+              toggleColumn(colId, nextChecked);
             }
           },
-          col.id
+          colId != null ? colId : String(label)
         );
       })
     ] }) : null
@@ -128,15 +148,45 @@ function TableSettingsMenuSection({
 }
 function TableSettings({
   buttonSize = "sm",
+  triggerLabel = "Visningsindstillinger",
+  triggerVariant = "button",
   ...sectionProps
 }) {
+  const isIcon = triggerVariant === "icon";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover.Popover,
     {
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: buttonSize, onClick, type: "button", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, {}),
-        icon
-      ] }),
+      matchTriggerWidth: !isIcon,
+      minWidth: isIcon ? "220px" : void 0,
+      trigger: (onClick, icon, isOpen) => isIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "inline",
+          shape: "round",
+          "aria-label": triggerLabel,
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? true : false,
+          tooltip: triggerLabel,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { size: 16 }),
+          "data-table-settings-trigger": "true",
+          onClick
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        Button.Button,
+        {
+          size: buttonSize,
+          onClick,
+          type: "button",
+          "aria-label": triggerLabel,
+          tooltip: triggerLabel,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, {}),
+            icon
+          ]
+        }
+      ),
       children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(TableSettingsMenuSection, { ...sectionProps, close }) })
     }
   );

package/dist/components/table/components/table-settings/TableSettings.d.ts

@@ -1,27 +1,35 @@
-import { ColumnDef } from '@tanstack/react-table';
 import type { JSX, ReactNode } from 'react';
-import { ViewMode } from '../../../../hooks/useTableSettings';
 import { ButtonSize } from '../../../button/Button';
+import type { ColumnItem, TableSettingsColumn, ViewMode } from '../../Table.types';
 export interface TableSettingsMenuSectionProps<T extends Record<string, any>> {
     handleChangeViewMode: (mode: ViewMode) => void;
     viewMode: ViewMode;
-    columns?: ColumnDef<T>[];
+    striped?: boolean;
+    onStripedChange?: (nextStriped: boolean) => void;
+    columns?: ReadonlyArray<ColumnItem<T> | TableSettingsColumn>;
     visibleColumnIds?: string[];
     onVisibleColumnIdsChange?: (nextVisibleIds: string[]) => void;
     columnsLabel?: string;
     allPresetLabel?: string;
     standardPresetLabel?: string;
     additionalSettings?: (close?: () => void) => ReactNode;
-    /** Called after an action closes the surrounding menu/popover, if any. */
+    /** Closes the surrounding menu/popover, if any. Only passed on to `additionalSettings`. */
     close?: () => void;
 }
 export interface TableSettingsProps<T extends Record<string, any>> extends Omit<TableSettingsMenuSectionProps<T>, 'close'> {
     buttonSize?: ButtonSize;
+    /** Accessible name and tooltip for the icon-only trigger button. */
+    triggerLabel?: string;
+    /**
+     * `button` (default) is a regular button with a dropdown chevron, for
+     * toolbars. `icon` is a small round icon button, as used in the table header.
+     */
+    triggerVariant?: 'button' | 'icon';
 }
 /**
  * The table settings menu items (view mode toggle + column visibility), with
  * no `Menu`/`Popover`/trigger wrapper. Use this to fold table settings into
  * another menu; use `TableSettings` for the standalone button + popover.
  */
-export declare function TableSettingsMenuSection<T extends Record<string, any>>({ viewMode, handleChangeViewMode, columns, visibleColumnIds, onVisibleColumnIdsChange, columnsLabel, allPresetLabel, standardPresetLabel, additionalSettings, close, }: TableSettingsMenuSectionProps<T>): JSX.Element;
-export declare function TableSettings<T extends Record<string, any>>({ buttonSize, ...sectionProps }: TableSettingsProps<T>): JSX.Element;
+export declare function TableSettingsMenuSection<T extends Record<string, any>>({ viewMode, handleChangeViewMode, striped, onStripedChange, columns, visibleColumnIds, onVisibleColumnIdsChange, columnsLabel, allPresetLabel, standardPresetLabel, additionalSettings, close, }: TableSettingsMenuSectionProps<T>): JSX.Element;
+export declare function TableSettings<T extends Record<string, any>>({ buttonSize, triggerLabel, triggerVariant, ...sectionProps }: TableSettingsProps<T>): JSX.Element;

package/dist/components/table/components/table-settings/TableSettings.js

@@ -1,14 +1,17 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { ListChevronsUpDown, Settings } from 'lucide-react';
-import { useMemo } from 'react';
+import { SlidersHorizontal } from 'lucide-react';
+import { useMemo, isValidElement } from 'react';
 import { Button } from '../../../button/Button';
 import { Menu } from '../../../menu/Menu';
 import { Popover } from '../../../popover/Popover';
+import { canHideSettingsColumn, getSettingsColumnId, isSettingsColumnHidden } from '../../tableSettings.utils';
 
 function TableSettingsMenuSection({
   viewMode,
   handleChangeViewMode,
+  striped,
+  onStripedChange,
   columns = [],
   visibleColumnIds = [],
   onVisibleColumnIdsChange,
@@ -18,31 +21,36 @@ function TableSettingsMenuSection({
   additionalSettings,
   close
 }) {
-  const handleViewModeChange = (mode, close2) => {
+  const handleViewModeChange = (mode) => {
     handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
-    close2 == null ? void 0 : close2();
   };
-  const hideableColumns = useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
-  const allPresetIds = useMemo(() => hideableColumns.map((c) => c.id), [hideableColumns]);
+  const hideableColumns = useMemo(() => columns.filter(canHideSettingsColumn), [columns]);
+  const allPresetIds = useMemo(
+    () => hideableColumns.map(getSettingsColumnId).filter((id) => !!id),
+    [hideableColumns]
+  );
   const standardPresetIds = useMemo(
-    () => hideableColumns.filter((c) => {
-      var _a;
-      return ((_a = c.meta) == null ? void 0 : _a.hidden) !== true;
-    }).map((c) => c.id),
+    () => hideableColumns.filter((c) => !isSettingsColumnHidden(c)).map(getSettingsColumnId).filter((id) => !!id),
     [hideableColumns]
   );
   const visibleSet = useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]);
   const visibleCount = useMemo(() => {
-    return hideableColumns.reduce((acc, c) => {
-      var _a;
-      return acc + (visibleSet.has((_a = c.id) != null ? _a : "") ? 1 : 0);
-    }, 0);
+    return hideableColumns.reduce(
+      (acc, c) => {
+        var _a;
+        return acc + (visibleSet.has((_a = getSettingsColumnId(c)) != null ? _a : "") ? 1 : 0);
+      },
+      0
+    );
   }, [hideableColumns, visibleSet]);
   const setVisibleIds = (nextIds) => {
     if (!onVisibleColumnIdsChange) return;
     const safe = nextIds.length > 0 ? nextIds : standardPresetIds.length > 0 ? standardPresetIds : allPresetIds;
+    const lockedVisibleIds = columns.filter((column) => !canHideSettingsColumn(column)).map(getSettingsColumnId).filter((id) => id != null && visibleSet.has(id));
     onVisibleColumnIdsChange(
-      safe.filter((id) => typeof id === "string" && Boolean(id))
+      Array.from(/* @__PURE__ */ new Set([...safe, ...lockedVisibleIds])).filter(
+        (id) => typeof id === "string" && Boolean(id)
+      )
     );
   };
   const toggleColumn = (id, nextVisible) => {
@@ -53,20 +61,32 @@ function TableSettingsMenuSection({
   };
   const isAllActive = useMemo(() => {
     if (!hideableColumns.length) return false;
-    return hideableColumns.every((c) => c.id && visibleSet.has(c.id));
-  }, [hideableColumns, visibleSet]);
+    return allPresetIds.length > 0 && allPresetIds.every((id) => visibleSet.has(id));
+  }, [hideableColumns, allPresetIds, visibleSet]);
   const isStandardActive = useMemo(() => {
     if (!hideableColumns.length) return false;
     const std = new Set(standardPresetIds);
-    return hideableColumns.every((c) => c.id && visibleSet.has(c.id) === std.has(c.id));
-  }, [hideableColumns, visibleSet, standardPresetIds]);
+    return allPresetIds.length > 0 && allPresetIds.every((id) => visibleSet.has(id) === std.has(id));
+  }, [hideableColumns, allPresetIds, visibleSet, standardPresetIds]);
   const presetRadioName = "table-columns-preset";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     additionalSettings == null ? void 0 : additionalSettings(close),
-    /* @__PURE__ */ jsx(Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
-      /* @__PURE__ */ jsx(ListChevronsUpDown, {}),
-      "Ombryd tekst"
-    ] }) }),
+    onStripedChange ? /* @__PURE__ */ jsx(
+      Menu.SwitchItem,
+      {
+        checked: Boolean(striped),
+        label: "Stribet",
+        onCheckedChange: (nextChecked) => onStripedChange(nextChecked)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Menu.SwitchItem,
+      {
+        checked: viewMode === "wrapped",
+        label: "Ombryd tekst",
+        onCheckedChange: () => handleViewModeChange(viewMode)
+      }
+    ),
     hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Menu.Separator, {}),
       /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
@@ -81,7 +101,6 @@ function TableSettingsMenuSection({
             setVisibleIds(
               allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
             );
-            close == null ? void 0 : close();
           }
         }
       ),
@@ -98,15 +117,16 @@ function TableSettingsMenuSection({
                 (id) => typeof id === "string" && Boolean(id)
               )
             );
-            close == null ? void 0 : close();
           }
         }
       ),
       /* @__PURE__ */ jsx(Menu.Separator, {}),
       hideableColumns.map((col) => {
-        const isVisible = col.id ? visibleSet.has(col.id) : false;
+        const colId = getSettingsColumnId(col);
+        const isVisible = colId ? visibleSet.has(colId) : false;
         const disableUncheckingLast = isVisible && visibleCount <= 1;
-        const label = col.header;
+        const header = col.header;
+        const label = typeof header === "function" && header.length === 0 ? header() : typeof header === "string" || typeof header === "number" || isValidElement(header) ? header : colId;
         return /* @__PURE__ */ jsx(
           Menu.CheckItem,
           {
@@ -114,11 +134,11 @@ function TableSettingsMenuSection({
             disabled: disableUncheckingLast,
             label,
             onCheckedChange: (nextChecked) => {
-              if (disableUncheckingLast) return;
-              toggleColumn(col.id, nextChecked);
+              if (disableUncheckingLast || !colId) return;
+              toggleColumn(colId, nextChecked);
             }
           },
-          col.id
+          colId != null ? colId : String(label)
         );
       })
     ] }) : null
@@ -126,15 +146,45 @@ function TableSettingsMenuSection({
 }
 function TableSettings({
   buttonSize = "sm",
+  triggerLabel = "Visningsindstillinger",
+  triggerVariant = "button",
   ...sectionProps
 }) {
+  const isIcon = triggerVariant === "icon";
   return /* @__PURE__ */ jsx(
     Popover,
     {
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxs(Button, { size: buttonSize, onClick, type: "button", children: [
-        /* @__PURE__ */ jsx(Settings, {}),
-        icon
-      ] }),
+      matchTriggerWidth: !isIcon,
+      minWidth: isIcon ? "220px" : void 0,
+      trigger: (onClick, icon, isOpen) => isIcon ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "inline",
+          shape: "round",
+          "aria-label": triggerLabel,
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? true : false,
+          tooltip: triggerLabel,
+          icon: /* @__PURE__ */ jsx(SlidersHorizontal, { size: 16 }),
+          "data-table-settings-trigger": "true",
+          onClick
+        }
+      ) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: buttonSize,
+          onClick,
+          type: "button",
+          "aria-label": triggerLabel,
+          tooltip: triggerLabel,
+          children: [
+            /* @__PURE__ */ jsx(SlidersHorizontal, {}),
+            icon
+          ]
+        }
+      ),
       children: (close) => /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(TableSettingsMenuSection, { ...sectionProps, close }) })
     }
   );

package/dist/components/table/table.utils.cjs

@@ -2,6 +2,7 @@
 
 const SELECTION_COLUMN_PX = 32;
 const ACTIONS_COLUMN_PX = 0;
+const ROW_ACTIONS_RESERVE_PX = 32;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -47,6 +48,7 @@ function getCellDisplayValue(row, column) {
 
 exports.ACTIONS_COLUMN_PX = ACTIONS_COLUMN_PX;
 exports.DEFAULT_COLUMN_PX = DEFAULT_COLUMN_PX;
+exports.ROW_ACTIONS_RESERVE_PX = ROW_ACTIONS_RESERVE_PX;
 exports.SELECTION_COLUMN_PX = SELECTION_COLUMN_PX;
 exports.getAriaSort = getAriaSort;
 exports.getCellDisplayValue = getCellDisplayValue;

package/dist/components/table/table.utils.d.ts

@@ -2,6 +2,12 @@ import type { ReactNode } from 'react';
 import type { ColumnItem } from './Table.types';
 export declare const SELECTION_COLUMN_PX: 32;
 export declare const ACTIONS_COLUMN_PX: 0;
+/**
+ * Space kept free at the inline end of the last column for the row actions
+ * button and header actions. Must match `--table-row-actions-reserve-inline`
+ * in Table.module.css (component-size-sm 30px + spacing-2xs 2px).
+ */
+export declare const ROW_ACTIONS_RESERVE_PX: 32;
 export declare const DEFAULT_COLUMN_PX: 150;
 export type SortDirection = 'asc' | 'desc' | null;
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;

package/dist/components/table/table.utils.js

@@ -1,5 +1,6 @@
 const SELECTION_COLUMN_PX = 32;
 const ACTIONS_COLUMN_PX = 0;
+const ROW_ACTIONS_RESERVE_PX = 32;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -43,4 +44,4 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
-export { ACTIONS_COLUMN_PX, DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };
+export { ACTIONS_COLUMN_PX, DEFAULT_COLUMN_PX, ROW_ACTIONS_RESERVE_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };

package/dist/components/table/tableSettings.utils.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+function getSettingsColumnId(column) {
+  if (typeof column.id === "string" && column.id.length > 0) return column.id;
+  if (typeof column.accessorKey === "string" && column.accessorKey.length > 0) {
+    return column.accessorKey;
+  }
+  return void 0;
+}
+function isSettingsColumnHidden(column) {
+  if (column.hidden != null) return column.hidden;
+  return typeof column.meta === "object" && column.meta !== null && "hidden" in column.meta && column.meta.hidden === true;
+}
+function canHideSettingsColumn(column) {
+  return column.canHide !== false && column.enableHiding !== false;
+}
+function filterColumnsBySettings(columns, visibleColumnIds) {
+  const visible = new Set(visibleColumnIds);
+  return columns.filter((column) => {
+    if (!canHideSettingsColumn(column)) return column.hidden !== true;
+    const id = getSettingsColumnId(column);
+    return id != null && visible.has(id);
+  });
+}
+
+exports.canHideSettingsColumn = canHideSettingsColumn;
+exports.filterColumnsBySettings = filterColumnsBySettings;
+exports.getSettingsColumnId = getSettingsColumnId;
+exports.isSettingsColumnHidden = isSettingsColumnHidden;

package/dist/components/table/tableSettings.utils.d.ts

@@ -0,0 +1,9 @@
+import type { TableSettingsColumn } from './Table.types';
+export declare function getSettingsColumnId(column: TableSettingsColumn): string | undefined;
+export declare function isSettingsColumnHidden(column: TableSettingsColumn): boolean;
+export declare function canHideSettingsColumn(column: TableSettingsColumn): boolean;
+/**
+ * Columns to render for a set of visible ids from table settings. Columns that
+ * can't be hidden stay governed by their own `hidden` flag.
+ */
+export declare function filterColumnsBySettings<C extends TableSettingsColumn>(columns: ReadonlyArray<C>, visibleColumnIds: ReadonlyArray<string>): C[];

package/dist/components/table/tableSettings.utils.js

@@ -0,0 +1,24 @@
+function getSettingsColumnId(column) {
+  if (typeof column.id === "string" && column.id.length > 0) return column.id;
+  if (typeof column.accessorKey === "string" && column.accessorKey.length > 0) {
+    return column.accessorKey;
+  }
+  return void 0;
+}
+function isSettingsColumnHidden(column) {
+  if (column.hidden != null) return column.hidden;
+  return typeof column.meta === "object" && column.meta !== null && "hidden" in column.meta && column.meta.hidden === true;
+}
+function canHideSettingsColumn(column) {
+  return column.canHide !== false && column.enableHiding !== false;
+}
+function filterColumnsBySettings(columns, visibleColumnIds) {
+  const visible = new Set(visibleColumnIds);
+  return columns.filter((column) => {
+    if (!canHideSettingsColumn(column)) return column.hidden !== true;
+    const id = getSettingsColumnId(column);
+    return id != null && visible.has(id);
+  });
+}
+
+export { canHideSettingsColumn, filterColumnsBySettings, getSettingsColumnId, isSettingsColumnHidden };