@dbcdk/react-components 0.0.194 → 0.0.196

package/dist/components/table/TanstackTable.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactTable = require('@tanstack/react-table');
 var React = require('react');
 var ColumnResizer = require('./components/column-resizer/ColumnResizer');
+var TableHeaderSettings = require('./components/table-settings/TableHeaderSettings');
 var Table = require('./Table');
 var table_utils = require('./table.utils');
 var tanstackTable_utils = require('./tanstackTable.utils');
@@ -40,12 +41,18 @@ function TanstackTable(props) {
     sorting: controlledSorting,
     onSortingChange,
     optimisticSortingUi = true,
-    visibleColumnIds,
+    visibleColumnIds: visibleColumnIdsProp,
     manualSorting,
+    viewMode,
+    striped,
+    settings,
+    settingsOptions,
+    headerActions: headerActionsProp,
     selectedRows,
     onRowSelect,
     ...tableProps
   } = props;
+  const visibleColumnIds = visibleColumnIdsProp != null ? visibleColumnIdsProp : settings == null ? void 0 : settings.visibleColumnIds;
   const isControlledSorting = controlledSorting != null;
   const [uiSorting, setUiSorting] = React__namespace.useState(controlledSorting != null ? controlledSorting : []);
   React__namespace.useEffect(() => {
@@ -116,7 +123,11 @@ function TanstackTable(props) {
     return tanstackTable_utils.buildDistributedColumnWidths({
       table,
       hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
-      hasContextMenu: Boolean(tableProps.getContextMenuItems),
+      // Row actions (context menu, expand toggle) and header actions (e.g. the
+      // settings menu) all reserve space at the end of the last column.
+      hasContextMenu: Boolean(
+        tableProps.getContextMenuItems || tableProps.expandableRows || settings || headerActionsProp != null
+      ),
       defaultMinPx: 80,
       columnSizing,
       availableWidth
@@ -127,6 +138,9 @@ function TanstackTable(props) {
     onRowSelect,
     dataKey,
     tableProps.getContextMenuItems,
+    tableProps.expandableRows,
+    settings,
+    headerActionsProp,
     columnSizing,
     availableWidth
   ]);
@@ -168,10 +182,24 @@ function TanstackTable(props) {
     },
     [table]
   );
+  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    headerActionsProp,
+    settings ? /* @__PURE__ */ jsxRuntime.jsx(
+      TableHeaderSettings.TableHeaderSettings,
+      {
+        settings,
+        options: settingsOptions,
+        columns
+      }
+    ) : null
+  ] }) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Table.Table,
     {
       ...tableProps,
+      viewMode: viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode,
+      striped: striped != null ? striped : settings == null ? void 0 : settings.striped,
+      headerActions,
       tableRootRef: containerRef,
       onSortChange: handleSortChange,
       dataKey,

package/dist/components/table/TanstackTable.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import * as React from 'react';
 import ColumnResizer from './components/column-resizer/ColumnResizer';
+import { TableHeaderSettings } from './components/table-settings/TableHeaderSettings';
 import { Table } from './Table';
 import { DEFAULT_COLUMN_PX } from './table.utils';
 import { sortingEqual, buildColumnVisibilityFromVisibleIds, buildDistributedColumnWidths, mapDefsToColumnItems, getSortPropsFromSorting } from './tanstackTable.utils';
@@ -15,12 +16,18 @@ function TanstackTable(props) {
     sorting: controlledSorting,
     onSortingChange,
     optimisticSortingUi = true,
-    visibleColumnIds,
+    visibleColumnIds: visibleColumnIdsProp,
     manualSorting,
+    viewMode,
+    striped,
+    settings,
+    settingsOptions,
+    headerActions: headerActionsProp,
     selectedRows,
     onRowSelect,
     ...tableProps
   } = props;
+  const visibleColumnIds = visibleColumnIdsProp != null ? visibleColumnIdsProp : settings == null ? void 0 : settings.visibleColumnIds;
   const isControlledSorting = controlledSorting != null;
   const [uiSorting, setUiSorting] = React.useState(controlledSorting != null ? controlledSorting : []);
   React.useEffect(() => {
@@ -91,7 +98,11 @@ function TanstackTable(props) {
     return buildDistributedColumnWidths({
       table,
       hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
-      hasContextMenu: Boolean(tableProps.getContextMenuItems),
+      // Row actions (context menu, expand toggle) and header actions (e.g. the
+      // settings menu) all reserve space at the end of the last column.
+      hasContextMenu: Boolean(
+        tableProps.getContextMenuItems || tableProps.expandableRows || settings || headerActionsProp != null
+      ),
       defaultMinPx: 80,
       columnSizing,
       availableWidth
@@ -102,6 +113,9 @@ function TanstackTable(props) {
     onRowSelect,
     dataKey,
     tableProps.getContextMenuItems,
+    tableProps.expandableRows,
+    settings,
+    headerActionsProp,
     columnSizing,
     availableWidth
   ]);
@@ -143,10 +157,24 @@ function TanstackTable(props) {
     },
     [table]
   );
+  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    headerActionsProp,
+    settings ? /* @__PURE__ */ jsx(
+      TableHeaderSettings,
+      {
+        settings,
+        options: settingsOptions,
+        columns
+      }
+    ) : null
+  ] }) : void 0;
   return /* @__PURE__ */ jsx(
     Table,
     {
       ...tableProps,
+      viewMode: viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode,
+      striped: striped != null ? striped : settings == null ? void 0 : settings.striped,
+      headerActions,
       tableRootRef: containerRef,
       onSortChange: handleSortChange,
       dataKey,

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

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ViewMode } from '../../../hooks/useTableSettings';
-import type { ColumnItem, TableContextMenuItem } from '../Table.types';
+import type { ViewMode, ColumnItem, TableContextMenuItem } from '../../../components/table/Table.types';
 type Props<T extends Record<string, any>> = {
     data: T[];
     dataKey: keyof T;

package/dist/components/table/components/TableHeader.cjs

@@ -20,14 +20,15 @@ function TableHeader({
   sortDirection,
   onSortChange,
   headerExtras,
-  stickyTop
+  stickyTop,
+  headerActions
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "thead",
     {
       className: styles__default.default.header,
       "data-sticky": Boolean(stickyTop),
-      style: stickyTop ? { top: stickyTop, position: "sticky", zIndex: 2 } : void 0,
+      style: stickyTop ? { top: stickyTop, position: "sticky" } : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles__default.default.headerRow, children: [
         hasSelection ? /* @__PURE__ */ jsxRuntime.jsx(
           TableSelectionCell.TableSelectionCell,
@@ -43,13 +44,14 @@ function TableHeader({
           {
             column,
             index,
-            reserveInlineEnd: hasRowContextMenu && index === columns.length - 1,
+            reserveInlineEnd: (hasRowContextMenu || headerActions != null) && index === columns.length - 1,
+            endAction: index === columns.length - 1 ? headerActions : void 0,
             sortById,
             sortDirection,
             onSortChange,
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
-          column.id
+          index === columns.length - 1 && headerActions != null ? "__last" : column.id
         ))
       ] })
     }

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

@@ -12,6 +12,7 @@ type Props<T> = {
     onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     stickyTop?: string;
+    headerActions?: ReactNode;
 };
-export declare function TableHeader<T>({ columns, hasSelection, selectionMode, hasRowContextMenu, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, selectionMode, hasRowContextMenu, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, headerActions, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableHeader.js

@@ -14,14 +14,15 @@ function TableHeader({
   sortDirection,
   onSortChange,
   headerExtras,
-  stickyTop
+  stickyTop,
+  headerActions
 }) {
   return /* @__PURE__ */ jsx(
     "thead",
     {
       className: styles.header,
       "data-sticky": Boolean(stickyTop),
-      style: stickyTop ? { top: stickyTop, position: "sticky", zIndex: 2 } : void 0,
+      style: stickyTop ? { top: stickyTop, position: "sticky" } : void 0,
       children: /* @__PURE__ */ jsxs("tr", { className: styles.headerRow, children: [
         hasSelection ? /* @__PURE__ */ jsx(
           TableSelectionCell,
@@ -37,13 +38,14 @@ function TableHeader({
           {
             column,
             index,
-            reserveInlineEnd: hasRowContextMenu && index === columns.length - 1,
+            reserveInlineEnd: (hasRowContextMenu || headerActions != null) && index === columns.length - 1,
+            endAction: index === columns.length - 1 ? headerActions : void 0,
             sortById,
             sortDirection,
             onSortChange,
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
-          column.id
+          index === columns.length - 1 && headerActions != null ? "__last" : column.id
         ))
       ] })
     }

package/dist/components/table/components/TableHeaderCell.cjs

@@ -17,7 +17,8 @@ function TableHeaderCell({
   sortById,
   sortDirection,
   onSortChange,
-  extraContent
+  extraContent,
+  endAction
 }) {
   const active = table_utils.isActiveSort(sortById, column.id);
   const ariaSort = table_utils.getAriaSort(column.sortable, active, sortDirection != null ? sortDirection : null);
@@ -59,10 +60,10 @@ function TableHeaderCell({
             ]
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: alignClasses.label, children: table_utils.getHeaderLabel(column.header) }) }) }),
-        extraContent != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thOverlayExtras, children: extraContent }) : null
+        extraContent != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thOverlayExtras, children: extraContent }) : null,
+        endAction != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thEndAction, children: endAction }) : null
       ]
-    },
-    column.id
+    }
   );
 }
 

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

@@ -8,6 +8,8 @@ type Props<T> = {
     sortDirection?: SortDirection;
     onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
     extraContent?: ReactNode;
+    /** Rendered at the cell's inline end, in the space kept free by `reserveInlineEnd`. */
+    endAction?: ReactNode;
 };
-export declare function TableHeaderCell<T>({ column, index, reserveInlineEnd, sortById, sortDirection, onSortChange, extraContent, }: Props<T>): ReactNode;
+export declare function TableHeaderCell<T>({ column, index, reserveInlineEnd, sortById, sortDirection, onSortChange, extraContent, endAction, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableHeaderCell.js

@@ -11,7 +11,8 @@ function TableHeaderCell({
   sortById,
   sortDirection,
   onSortChange,
-  extraContent
+  extraContent,
+  endAction
 }) {
   const active = isActiveSort(sortById, column.id);
   const ariaSort = getAriaSort(column.sortable, active, sortDirection != null ? sortDirection : null);
@@ -53,10 +54,10 @@ function TableHeaderCell({
             ]
           }
         ) : /* @__PURE__ */ jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }) }) }),
-        extraContent != null ? /* @__PURE__ */ jsx("div", { className: styles.thOverlayExtras, children: extraContent }) : null
+        extraContent != null ? /* @__PURE__ */ jsx("div", { className: styles.thOverlayExtras, children: extraContent }) : null,
+        endAction != null ? /* @__PURE__ */ jsx("div", { className: styles.thEndAction, children: endAction }) : null
       ]
-    },
-    column.id
+    }
   );
 }
 

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

@@ -48,7 +48,7 @@ function TableRow({
     rowId,
     open: () => onRowClick == null ? void 0 : onRowClick(row)
   });
-  const hasContextMenu = Boolean(contextMenuItems == null ? void 0 : contextMenuItems.length);
+  const hasContextMenu = Boolean(contextMenuItems == null ? void 0 : contextMenuItems.length) || canExpand && viewMode !== "wrapped";
   const { handleRowClick, handleRowKeyDown } = useTableRowInteractions.useTableRowInteractions({
     row,
     rowId,

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { ViewMode } from '../../../hooks/useTableSettings';
-import type { ColumnItem, TableContextMenuItem } from '../Table.types';
+import type { ViewMode, ColumnItem, TableContextMenuItem } from '../../../components/table/Table.types';
 type Props<T extends Record<string, any>> = {
     row: T;
     rowId: string | number;

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

@@ -42,7 +42,7 @@ function TableRow({
     rowId,
     open: () => onRowClick == null ? void 0 : onRowClick(row)
   });
-  const hasContextMenu = Boolean(contextMenuItems == null ? void 0 : contextMenuItems.length);
+  const hasContextMenu = Boolean(contextMenuItems == null ? void 0 : contextMenuItems.length) || canExpand && viewMode !== "wrapped";
   const { handleRowClick, handleRowKeyDown } = useTableRowInteractions({
     row,
     rowId,

package/dist/components/table/components/TableSkeletonBody.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SkeletonLoaderItem = require('../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+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 TableSkeletonBody({ columns, rows, hasSelection }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: styles__default.default.body, "aria-busy": "true", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles__default.default.row, children: [
+    hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: table_classes.cx(styles__default.default.cell, styles__default.default.selectionCell) }) : null,
+    columns.map((column, columnIndex) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsx("td", { className: styles__default.default.cell, "data-align": (_a = column.align) != null ? _a : "left", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.skeletonCellContent, children: /* @__PURE__ */ jsxRuntime.jsx(
+        SkeletonLoaderItem.SkeletonLoaderItem,
+        {
+          width: `${55 + (rowIndex + columnIndex) % 3 * 15}%`,
+          height: 12,
+          radius: 4,
+          ariaLabel: "Indl\xE6ser r\xE6kke"
+        }
+      ) }) }, column.id);
+    })
+  ] }, rowIndex)) });
+}
+
+exports.TableSkeletonBody = TableSkeletonBody;

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { ColumnItem } from '../Table.types';
+type Props<T> = {
+    columns: ColumnItem<T>[];
+    rows: number;
+    hasSelection: boolean;
+};
+/**
+ * Placeholder rows shown while a table loads, laid out in the table's own
+ * columns so the header stays in place and the skeleton starts at the top.
+ */
+export declare function TableSkeletonBody<T>({ columns, rows, hasSelection }: Props<T>): ReactNode;
+export {};

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 };