@dbcdk/react-components 0.0.169 → 0.0.171

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

@@ -0,0 +1,281 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { MoreVertical, ChevronsUpDown } from 'lucide-react';
+import { useRef } from 'react';
+import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
+import { RadioButton } from '../../../components/forms/radio-buttons/RadioButton';
+import { Popover } from '../../../components/popover/Popover';
+import { SeverityBgColor } from '../../../constants/severity';
+import { Button } from '../../button/Button';
+import { Menu } from '../../menu/Menu';
+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,
+  getContextMenuItems,
+  showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect,
+  onToggleRowExpand
+}) {
+  var _a, _b;
+  const isSelected = (_a = selectedRows == null ? void 0 : selectedRows.has(rowId)) != null ? _a : false;
+  const isExpanded = (_b = expandedRows == null ? void 0 : expandedRows.has(rowId)) != null ? _b : false;
+  const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
+  const canSelect = Boolean(selectedRows && onRowSelect);
+  const canExpand = Boolean(expandableRows && onToggleRowExpand);
+  const contextMenuItems = getContextMenuItems == null ? void 0 : getContextMenuItems({
+    row,
+    rowId,
+    open: () => onRowClick == null ? void 0 : onRowClick(row)
+  });
+  const hasContextMenu = Boolean(contextMenuItems == null ? void 0 : contextMenuItems.length);
+  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,
+        hasContextMenu && showContextMenuOnHover && styles.contextMenuHoverOnly
+      ),
+      "data-context-menu-visibility": hasContextMenu ? showContextMenuOnHover ? "hover" : "always" : void 0,
+      style: {
+        ["--row-severity-color"]: rowSeverity ? `color-mix(in srgb, ${SeverityBgColor[rowSeverity]} 65%, var(--table-component-row-bg))` : 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, index) => {
+          var _a2, _b2, _c, _d;
+          const allowWrap = shouldAllowWrap(column.allowWrap, isSelected || isExpanded, viewMode);
+          const allowOverflow = column.allowOverflow;
+          const cellValue = getCellDisplayValue(row, column);
+          const showRowActions = index === columns.length - 1 && hasContextMenu;
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cx(
+                styles.cell,
+                showRowActions && styles.actionCell,
+                allowOverflow && styles.allowOverflow,
+                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": (_b2 = column.verticalAlign) != null ? _b2 : "top",
+              "data-divider": column.divider,
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cx(styles.cellContent, showRowActions && styles.cellContentWithActions),
+                  "data-align": (_c = column.align) != null ? _c : "left",
+                  "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: allowOverflow ? styles.cellValueNoEllipsis : styles.cellValueEllipsis,
+                        children: cellValue
+                      }
+                    ),
+                    showRowActions ? /* @__PURE__ */ jsx(
+                      RowActions,
+                      {
+                        rowId,
+                        items: contextMenuItems,
+                        expandable: canExpand && viewMode !== "wrapped",
+                        isExpanded,
+                        onToggleExpand: onToggleRowExpand ? () => onToggleRowExpand(rowId) : void 0,
+                        onRowClick: onRowClick ? () => onRowClick(row) : void 0
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            },
+            column.id
+          );
+        })
+      ]
+    }
+  );
+}
+function RowActions({
+  rowId,
+  items,
+  expandable,
+  isExpanded,
+  onToggleExpand,
+  onRowClick
+}) {
+  const toggleRef = useRef(null);
+  const expandItem = expandable ? {
+    label: "Udvid r\xE6kke",
+    active: isExpanded,
+    icon: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 16 }),
+    onClick: () => onToggleExpand == null ? void 0 : onToggleExpand()
+  } : null;
+  const menuItems = [...expandItem ? [expandItem] : [], ...items != null ? items : []];
+  const hasMenu = Boolean(menuItems.length);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles.contextMenuOverlay,
+      "data-row-context-menu": "true",
+      onClick: (e) => {
+        var _a;
+        if (!hasMenu) return;
+        e.stopPropagation();
+        (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
+      },
+      onContextMenu: (e) => {
+        if (!hasMenu) return;
+        e.preventDefault();
+        e.stopPropagation();
+        onRowClick == null ? void 0 : onRowClick();
+      },
+      children: hasMenu ? /* @__PURE__ */ jsx(
+        Popover,
+        {
+          matchTriggerWidth: false,
+          minWidth: "180px",
+          trigger: (toggle, _icon, isOpen) => {
+            toggleRef.current = toggle;
+            return /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "inline",
+                shape: "round",
+                className: styles.contextMenuTrigger,
+                "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
+                "aria-haspopup": "menu",
+                "aria-expanded": isOpen ? true : false,
+                icon: /* @__PURE__ */ jsx(MoreVertical, { size: 16 }),
+                "data-row-context-menu": "true",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggle(e);
+                }
+              }
+            );
+          },
+          children: (close) => /* @__PURE__ */ jsx(Menu, { children: menuItems.map(
+            (item, index) => item.type === "header" ? /* @__PURE__ */ jsx(Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsx(
+              Menu.Item,
+              {
+                active: item.active,
+                selected: item.selected,
+                disabled: item.disabled,
+                variant: item.variant,
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-row-context-menu": "true",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      item.onClick();
+                      close();
+                    },
+                    children: /* @__PURE__ */ jsxs("span", { className: styles.contextMenuItemLabel, children: [
+                      item.icon,
+                      /* @__PURE__ */ jsx("span", { className: styles.contextMenuItemText, children: item.label })
+                    ] })
+                  }
+                )
+              },
+              index
+            )
+          ) })
+        }
+      ) : null
+    }
+  );
+}
+
+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.d.ts

@@ -0,0 +1,9 @@
+import React, { type JSX } from 'react';
+type Props = {
+    checked?: boolean;
+    isHeader?: boolean;
+    multiple?: boolean;
+    onToggle: (checked: boolean, e: React.MouseEvent | React.KeyboardEvent | any) => void;
+};
+export declare function TableSelectionCell({ checked, isHeader, multiple, onToggle }: Props): JSX.Element;
+export {};

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.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ColumnResizerProps {
+    id: string | number;
+    handler: (event: React.MouseEvent | React.TouchEvent) => void;
+}
+declare const ColumnResizer: React.FC<ColumnResizerProps>;
+export default ColumnResizer;

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,24 @@
+.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);
+  opacity: 0;
+  transition: opacity 0.15s;
+}

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.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode, JSX } from 'react';
+export type TableEmptyConfig = {
+    enabled?: boolean;
+    /** Keep it short + system-like */
+    title?: string;
+    description?: ReactNode;
+    actions?: ReactNode;
+    onBack?: () => void;
+    onRefresh?: () => void;
+    onClearFilters?: () => void;
+    showClearFilters?: boolean;
+    clearFiltersLabel?: ReactNode;
+    showBack?: boolean;
+    showRefresh?: boolean;
+    backLabel?: ReactNode;
+    refreshLabel?: ReactNode;
+    className?: string;
+};
+export declare function TableEmptyState({ config }: {
+    config?: TableEmptyConfig;
+}): JSX.Element | null;

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.ListChevronsUpDown, {}),
+          "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;