@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/table/components/TableRow.cjs

@@ -0,0 +1,151 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Checkbox = require('../../../components/forms/checkbox/Checkbox');
+var RadioButton = require('../../../components/forms/radio-buttons/RadioButton');
+var severity = require('../../../constants/severity');
+var useTableRowInteractions = require('../hooks/useTableRowInteractions');
+var table_classes = require('../table.classes');
+var styles = require('../Table.module.css');
+var table_utils = require('../table.utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TableRow({
+  row,
+  rowId,
+  columns,
+  selectedRows,
+  hasSelection,
+  selectionMode,
+  selectionInputName,
+  viewMode,
+  getRowSeverity,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect
+}) {
+  var _a;
+  const isSelected = (_a = selectedRows == null ? void 0 : selectedRows.has(rowId)) != null ? _a : false;
+  const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
+  const canSelect = Boolean(selectedRows && onRowSelect);
+  const { handleRowClick, handleRowKeyDown } = useTableRowInteractions.useTableRowInteractions({
+    row,
+    rowId,
+    isSelected,
+    canSelect,
+    onRowClick,
+    onRowSelect
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "tr",
+    {
+      className: table_classes.cx(
+        styles__default.default.row,
+        onRowClick && styles__default.default.clickableRow,
+        isSelected && styles__default.default.selectedRow,
+        rowSeverity && styles__default.default.severity
+      ),
+      style: {
+        ["--row-severity-color"]: rowSeverity ? severity.SeverityBorderColor[rowSeverity] : void 0
+      },
+      tabIndex: onRowClick ? 0 : -1,
+      onKeyDown: handleRowKeyDown,
+      onMouseEnter: () => onRowMouseEnter == null ? void 0 : onRowMouseEnter(row),
+      onClick: handleRowClick,
+      children: [
+        hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: table_classes.cx(styles__default.default.cell, styles__default.default.selectionCell), "data-selection-control": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.selectionHitArea,
+            "data-selection-control": "true",
+            onClick: (e) => {
+              if (e.target !== e.currentTarget) return;
+              e.stopPropagation();
+              onRowSelect == null ? void 0 : onRowSelect(rowId, !isSelected);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: styles__default.default.selectionControlWrap,
+                "data-selection-control": "true",
+                onMouseDown: (e) => {
+                  if (selectionMode !== "single" || !isSelected) return;
+                  e.preventDefault();
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (selectionMode === "single" && isSelected) {
+                    e.preventDefault();
+                    onRowSelect == null ? void 0 : onRowSelect(rowId, false);
+                  }
+                },
+                children: selectionMode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  RadioButton.RadioButton,
+                  {
+                    noContainer: true,
+                    name: selectionInputName,
+                    value: String(rowId),
+                    checked: isSelected,
+                    size: "sm",
+                    variant: "primary",
+                    onChange: (_value, e) => {
+                      e.stopPropagation();
+                      onRowSelect == null ? void 0 : onRowSelect(rowId, true);
+                    }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox.Checkbox,
+                  {
+                    noContainer: true,
+                    variant: "primary",
+                    checked: isSelected,
+                    size: "sm",
+                    onChange: (checked, e) => {
+                      e.stopPropagation();
+                      onRowSelect == null ? void 0 : onRowSelect(rowId, checked);
+                    }
+                  }
+                )
+              }
+            )
+          }
+        ) }) : null,
+        columns.map((column) => {
+          var _a2, _b, _c, _d;
+          const allowWrap = table_utils.shouldAllowWrap(column.allowWrap, isSelected, viewMode);
+          column.allowOverflow;
+          const cellValue = table_utils.getCellDisplayValue(row, column);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              className: table_classes.cx(
+                styles__default.default.cell,
+                allowWrap ? styles__default.default.allowWrap : styles__default.default.nowrap,
+                column.divider === "left" && styles__default.default.dividerLeft,
+                column.divider === "right" && styles__default.default.dividerRight
+              ),
+              "data-align": (_a2 = column.align) != null ? _a2 : "left",
+              "data-vertical-align": (_b = column.verticalAlign) != null ? _b : "top",
+              "data-divider": column.divider,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: styles__default.default.cellContent,
+                  "data-align": (_c = column.align) != null ? _c : "left",
+                  "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellValueEllipsis, children: cellValue })
+                }
+              )
+            },
+            column.id
+          );
+        })
+      ]
+    }
+  );
+}
+
+exports.TableRow = TableRow;

package/dist/components/table/components/TableRow.js

@@ -0,0 +1,145 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
+import { RadioButton } from '../../../components/forms/radio-buttons/RadioButton';
+import { SeverityBorderColor } from '../../../constants/severity';
+import { useTableRowInteractions } from '../hooks/useTableRowInteractions';
+import { cx } from '../table.classes';
+import styles from '../Table.module.css';
+import { shouldAllowWrap, getCellDisplayValue } from '../table.utils';
+
+function TableRow({
+  row,
+  rowId,
+  columns,
+  selectedRows,
+  hasSelection,
+  selectionMode,
+  selectionInputName,
+  viewMode,
+  getRowSeverity,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect
+}) {
+  var _a;
+  const isSelected = (_a = selectedRows == null ? void 0 : selectedRows.has(rowId)) != null ? _a : false;
+  const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
+  const canSelect = Boolean(selectedRows && onRowSelect);
+  const { handleRowClick, handleRowKeyDown } = useTableRowInteractions({
+    row,
+    rowId,
+    isSelected,
+    canSelect,
+    onRowClick,
+    onRowSelect
+  });
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: cx(
+        styles.row,
+        onRowClick && styles.clickableRow,
+        isSelected && styles.selectedRow,
+        rowSeverity && styles.severity
+      ),
+      style: {
+        ["--row-severity-color"]: rowSeverity ? SeverityBorderColor[rowSeverity] : void 0
+      },
+      tabIndex: onRowClick ? 0 : -1,
+      onKeyDown: handleRowKeyDown,
+      onMouseEnter: () => onRowMouseEnter == null ? void 0 : onRowMouseEnter(row),
+      onClick: handleRowClick,
+      children: [
+        hasSelection ? /* @__PURE__ */ jsx("td", { className: cx(styles.cell, styles.selectionCell), "data-selection-control": "true", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.selectionHitArea,
+            "data-selection-control": "true",
+            onClick: (e) => {
+              if (e.target !== e.currentTarget) return;
+              e.stopPropagation();
+              onRowSelect == null ? void 0 : onRowSelect(rowId, !isSelected);
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.selectionControlWrap,
+                "data-selection-control": "true",
+                onMouseDown: (e) => {
+                  if (selectionMode !== "single" || !isSelected) return;
+                  e.preventDefault();
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (selectionMode === "single" && isSelected) {
+                    e.preventDefault();
+                    onRowSelect == null ? void 0 : onRowSelect(rowId, false);
+                  }
+                },
+                children: selectionMode === "single" ? /* @__PURE__ */ jsx(
+                  RadioButton,
+                  {
+                    noContainer: true,
+                    name: selectionInputName,
+                    value: String(rowId),
+                    checked: isSelected,
+                    size: "sm",
+                    variant: "primary",
+                    onChange: (_value, e) => {
+                      e.stopPropagation();
+                      onRowSelect == null ? void 0 : onRowSelect(rowId, true);
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    noContainer: true,
+                    variant: "primary",
+                    checked: isSelected,
+                    size: "sm",
+                    onChange: (checked, e) => {
+                      e.stopPropagation();
+                      onRowSelect == null ? void 0 : onRowSelect(rowId, checked);
+                    }
+                  }
+                )
+              }
+            )
+          }
+        ) }) : null,
+        columns.map((column) => {
+          var _a2, _b, _c, _d;
+          const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
+          column.allowOverflow;
+          const cellValue = getCellDisplayValue(row, column);
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cx(
+                styles.cell,
+                allowWrap ? styles.allowWrap : styles.nowrap,
+                column.divider === "left" && styles.dividerLeft,
+                column.divider === "right" && styles.dividerRight
+              ),
+              "data-align": (_a2 = column.align) != null ? _a2 : "left",
+              "data-vertical-align": (_b = column.verticalAlign) != null ? _b : "top",
+              "data-divider": column.divider,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: styles.cellContent,
+                  "data-align": (_c = column.align) != null ? _c : "left",
+                  "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
+                  children: /* @__PURE__ */ jsx("div", { className: styles.cellValueEllipsis, children: cellValue })
+                }
+              )
+            },
+            column.id
+          );
+        })
+      ]
+    }
+  );
+}
+
+export { TableRow };

package/dist/components/table/components/TableSelectionCell.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Checkbox = require('../../../components/forms/checkbox/Checkbox');
+var table_classes = require('../table.classes');
+var styles = require('../Table.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TableSelectionCell({ checked, isHeader, multiple, onToggle }) {
+  const Tag = isHeader ? "th" : "td";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
+    {
+      className: table_classes.cx(styles__default.default.headerCell, styles__default.default.selectionCell),
+      scope: isHeader ? "col" : void 0,
+      onClick: (e) => {
+        if (isHeader && !multiple) return;
+        e.stopPropagation();
+        onToggle(!checked, e);
+      },
+      children: isHeader && !multiple ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.selectionHitArea, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox.Checkbox,
+        {
+          noContainer: true,
+          size: "sm",
+          variant: "primary",
+          checked,
+          onChange: (nextChecked, e) => {
+            e.stopPropagation();
+            onToggle(nextChecked, e);
+          }
+        }
+      ) })
+    }
+  );
+}
+
+exports.TableSelectionCell = TableSelectionCell;

package/dist/components/table/components/TableSelectionCell.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
+import { cx } from '../table.classes';
+import styles from '../Table.module.css';
+
+function TableSelectionCell({ checked, isHeader, multiple, onToggle }) {
+  const Tag = isHeader ? "th" : "td";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cx(styles.headerCell, styles.selectionCell),
+      scope: isHeader ? "col" : void 0,
+      onClick: (e) => {
+        if (isHeader && !multiple) return;
+        e.stopPropagation();
+        onToggle(!checked, e);
+      },
+      children: isHeader && !multiple ? null : /* @__PURE__ */ jsx("div", { className: styles.selectionHitArea, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          noContainer: true,
+          size: "sm",
+          variant: "primary",
+          checked,
+          onChange: (nextChecked, e) => {
+            e.stopPropagation();
+            onToggle(nextChecked, e);
+          }
+        }
+      ) })
+    }
+  );
+}
+
+export { TableSelectionCell };

package/dist/components/table/components/column-resizer/ColumnResizer.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./ColumnResizer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const ColumnResizer = ({ id, handler }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    className: styles__default.default.resizer,
+    "data-resizer": "true",
+    onMouseDown: handler,
+    onTouchStart: handler,
+    role: "separator",
+    "aria-orientation": "vertical",
+    "aria-label": `Resize ${id}`
+  }
+);
+var ColumnResizer_default = ColumnResizer;
+
+module.exports = ColumnResizer_default;

package/dist/components/table/components/column-resizer/ColumnResizer.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import styles from './ColumnResizer.module.css';
+
+const ColumnResizer = ({ id, handler }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: styles.resizer,
+    "data-resizer": "true",
+    onMouseDown: handler,
+    onTouchStart: handler,
+    role: "separator",
+    "aria-orientation": "vertical",
+    "aria-label": `Resize ${id}`
+  }
+);
+var ColumnResizer_default = ColumnResizer;
+
+export { ColumnResizer_default as default };

package/dist/components/table/components/column-resizer/ColumnResizer.module.css

@@ -0,0 +1,22 @@
+.resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 10px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  z-index: 20;
+}
+
+.resizer::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  width: 1px; /* visual thickness */
+  height: 60%;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--opac-bg-default);
+}

package/dist/components/table/components/empty-state/EmptyState.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+const defaultEmptyConfig = {
+  enabled: true,
+  title: "Ingen resultater",
+  description: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Ingen data at vise." }),
+  showBack: false,
+  showRefresh: false,
+  showClearFilters: true,
+  backLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { size: 16 }),
+    "Tilbage"
+  ] }),
+  refreshLabel: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Indl\xE6s igen" }),
+  clearFiltersLabel: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Nulstil alle filtre" }),
+  className: "dbc-flex dbc-flex-column dbc-items-start dbc-justify-start dbc-text-left dbc-gap-sm dbc-py-lg"
+};
+function TableEmptyState({ config }) {
+  const merged = {
+    ...defaultEmptyConfig,
+    ...config != null ? config : {}
+  };
+  if (!merged.enabled) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-pt-sm dbc-pb-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-text-sm  dbc-muted-text", children: merged.description }),
+    merged.actions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-flex dbc-gap-sm", children: merged.actions }) : null
+  ] });
+}
+
+exports.TableEmptyState = TableEmptyState;

package/dist/components/table/components/empty-state/EmptyState.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ArrowLeft } from 'lucide-react';
+
+const defaultEmptyConfig = {
+  enabled: true,
+  title: "Ingen resultater",
+  description: /* @__PURE__ */ jsx("span", { children: "Ingen data at vise." }),
+  showBack: false,
+  showRefresh: false,
+  showClearFilters: true,
+  backLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ArrowLeft, { size: 16 }),
+    "Tilbage"
+  ] }),
+  refreshLabel: /* @__PURE__ */ jsx(Fragment, { children: "Indl\xE6s igen" }),
+  clearFiltersLabel: /* @__PURE__ */ jsx(Fragment, { children: "Nulstil alle filtre" }),
+  className: "dbc-flex dbc-flex-column dbc-items-start dbc-justify-start dbc-text-left dbc-gap-sm dbc-py-lg"
+};
+function TableEmptyState({ config }) {
+  const merged = {
+    ...defaultEmptyConfig,
+    ...config != null ? config : {}
+  };
+  if (!merged.enabled) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-pt-sm dbc-pb-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "dbc-text-sm  dbc-muted-text", children: merged.description }),
+    merged.actions ? /* @__PURE__ */ jsx("span", { className: "dbc-flex dbc-gap-sm", children: merged.actions }) : null
+  ] });
+}
+
+export { TableEmptyState };

package/dist/components/table/components/empty-state/EmptyState.module.css

@@ -0,0 +1,4 @@
+.container,
+.icon {
+  display: none;
+}

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

@@ -0,0 +1,139 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Button = require('../../../button/Button');
+var Menu = require('../../../menu/Menu');
+var Popover = require('../../../popover/Popover');
+
+function TableSettings({
+  viewMode,
+  handleChangeViewMode,
+  columns = [],
+  visibleColumnIds = [],
+  onVisibleColumnIdsChange,
+  columnsLabel = "Kolonner",
+  allPresetLabel = "Alle",
+  standardPresetLabel = "Standard",
+  buttonSize = "sm",
+  additionalSettings
+}) {
+  const handleViewModeChange = (mode, close) => {
+    handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
+    close == null ? void 0 : close();
+  };
+  const hideableColumns = react.useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
+  const allPresetIds = react.useMemo(() => hideableColumns.map((c) => c.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]
+  );
+  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);
+  }, [hideableColumns, visibleSet]);
+  const setVisibleIds = (nextIds) => {
+    if (!onVisibleColumnIdsChange) return;
+    const safe = nextIds.length > 0 ? nextIds : standardPresetIds.length > 0 ? standardPresetIds : allPresetIds;
+    onVisibleColumnIdsChange(
+      safe.filter((id) => typeof id === "string" && Boolean(id))
+    );
+  };
+  const toggleColumn = (id, nextVisible) => {
+    const next = new Set(visibleColumnIds);
+    if (nextVisible) next.add(id);
+    else next.delete(id);
+    setVisibleIds(Array.from(next));
+  };
+  const isAllActive = react.useMemo(() => {
+    if (!hideableColumns.length) return false;
+    return hideableColumns.every((c) => c.id && visibleSet.has(c.id));
+  }, [hideableColumns, 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]);
+  const presetRadioName = "table-columns-preset";
+  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
+      ] }),
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { 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.ListChevronsDownUp, {}),
+          "Ombryd tekst"
+        ] }) }),
+        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 }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Menu.Menu.RadioItem,
+            {
+              name: presetRadioName,
+              value: "all",
+              checked: isAllActive,
+              label: allPresetLabel,
+              onValueChange: () => {
+                setVisibleIds(
+                  allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
+                );
+                close == null ? void 0 : close();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Menu.Menu.RadioItem,
+            {
+              name: presetRadioName,
+              value: "standard",
+              checked: isStandardActive,
+              label: standardPresetLabel,
+              onValueChange: () => {
+                setVisibleIds(
+                  standardPresetIds.filter(
+                    (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 disableUncheckingLast = isVisible && visibleCount <= 1;
+            const label = col.header;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Menu.Menu.CheckItem,
+              {
+                checked: isVisible,
+                disabled: disableUncheckingLast,
+                label,
+                onCheckedChange: (nextChecked) => {
+                  if (disableUncheckingLast) return;
+                  toggleColumn(col.id, nextChecked);
+                }
+              },
+              col.id
+            );
+          })
+        ] }) : null
+      ] })
+    }
+  );
+}
+
+exports.TableSettings = TableSettings;