@dbcdk/react-components 0.0.195 → 0.0.197

package/dist/components/table/Table.module.css

@@ -58,7 +58,9 @@
   --table-component-cell-fg: var(--table-cell-fg);
   --table-component-cell-border: var(--table-border-subtle);
   --table-component-divider: var(--table-divider);
-  --table-row-actions-reserve-inline: calc(var(--component-size-md) + 4px + var(--spacing-2xs));
+  /* Row actions button (component-size-sm) plus its inline-end offset. Keep in
+     sync with ROW_ACTIONS_RESERVE_PX in table.utils.ts. */
+  --table-row-actions-reserve-inline: calc(var(--component-size-sm) + var(--spacing-2xs));
 
   display: flex;
   flex-direction: column;
@@ -78,7 +80,7 @@
 
 .embedded {
   --table-component-header-bg: transparent;
-  --table-component-header-fg: var(--color-fg-subtle);
+  --table-component-header-fg: var(--color-fg-muted);
   --table-component-header-font-weight: var(--font-weight-default);
   --table-component-row-bg: transparent;
   --table-component-row-bg-hover: var(--color-bg-contextual-subtle);
@@ -101,6 +103,9 @@
   min-block-size: 0;
   min-inline-size: 0;
   overflow: auto;
+  /* Always reserve the scrollbar's space, so the column widths don't change
+     when the body starts or stops scrolling (e.g. skeleton rows vs. data). */
+  scrollbar-gutter: stable;
   background: var(--table-component-row-bg);
   -webkit-overflow-scrolling: touch;
 }
@@ -450,6 +455,75 @@
   pointer-events: auto;
 }
 
+/*
+ * Header actions (e.g. the settings trigger) sit at the inline end of the last
+ * header cell, lined up with the row-actions buttons below. Stacked above
+ * .thOverlayExtras so the column resizer doesn't swallow clicks on them.
+ */
+.thEndAction {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--spacing-2xs);
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  z-index: 8;
+}
+
+.headerActions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+}
+
+/*
+ * Keep header actions low-key: the settings trigger uses the same colour as
+ * the header's sort arrows and a compact square button, and header actions are
+ * only shown while the table is hovered - like the row-actions buttons. They
+ * stay visible while focused or while their menu is open, and always on
+ * devices without hover. They remain clickable while faded out.
+ * `button[data-…]` outranks Button's own `.button.inline` colour rule.
+ */
+.thEndAction button[data-table-settings-trigger] {
+  color: var(--color-disabled-fg);
+  inline-size: var(--component-size-sm);
+  min-inline-size: var(--component-size-sm);
+  padding: 0;
+}
+
+.thEndAction button[data-table-settings-trigger]:hover,
+.thEndAction button[data-table-settings-trigger][aria-expanded='true'] {
+  color: var(--color-fg-subtle);
+}
+
+.thEndAction {
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.tableElement:hover .thEndAction,
+.thEndAction:focus-within,
+.thEndAction:has([aria-expanded='true']) {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .thEndAction {
+    opacity: 1;
+  }
+}
+
+.toolbarWithHeaderActions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+
+.toolbarWithHeaderActions > .headerActions {
+  margin-inline-start: auto;
+}
+
 .sortIndicator {
   display: inline-flex;
   flex: 0 0 auto;
@@ -475,6 +549,22 @@
   color: var(--color-disabled-fg);
 }
 
+/* Loading placeholder: a full text line (the cell's line-height) with the bar
+   centred in it, matching the height of a real single-line row. */
+.skeletonCellContent {
+  display: flex;
+  align-items: center;
+  block-size: 1lh;
+}
+
+/* Table rows (incl. striped ones) need stronger bars than the default
+   skeleton to be visible. [role='status'] outranks .skeletonLoader, which
+   sets these variables on the item itself. */
+.skeletonCellContent > [role='status'] {
+  --skeleton-base: var(--opac-bg-dark);
+  --skeleton-sheen: var(--opac-bg-default);
+}
+
 .cellContent {
   display: flex;
   inline-size: 100%;
@@ -558,8 +648,19 @@
   text-overflow: clip;
 }
 
-.row:focus-within > .cell:not(.selectionCell) .cellContent,
-.row:focus-within > .cell:not(.selectionCell) .cellValueEllipsis {
+/*
+ * Unwrap the row's content only for keyboard focus. Mouse clicks on the row
+ * don't match :focus-visible, so the row keeps its height.
+ * The row-actions button is excluded outright: its menu returns focus to it
+ * programmatically on close, and browsers (notably Safari/Firefox on macOS,
+ * where clicking a button doesn't focus it) may treat that as :focus-visible.
+ */
+.row:focus-visible > .cell:not(.selectionCell) .cellContent,
+.row:focus-visible > .cell:not(.selectionCell) .cellValueEllipsis,
+.row:has(:focus-visible:not([data-row-context-menu])) > .cell:not(.selectionCell) .cellContent,
+.row:has(:focus-visible:not([data-row-context-menu]))
+  > .cell:not(.selectionCell)
+  .cellValueEllipsis {
   white-space: normal;
   overflow-wrap: break-word;
   word-break: normal;
@@ -569,8 +670,8 @@
 
 .contextMenuTrigger {
   color: var(--color-fg-subtle);
-  min-inline-size: calc(var(--component-size-md) + 4px);
-  min-block-size: calc(var(--component-size-md) + 4px);
+  min-inline-size: var(--component-size-sm);
+  min-block-size: var(--component-size-sm);
   border-radius: 999px;
   background-color: transparent;
   position: relative;
@@ -578,9 +679,17 @@
   overflow: hidden;
 }
 
+/*
+ * The row-actions button is centred on the cell's first line of text (cell
+ * padding + half the 20px line height) rather than on the whole cell, so it
+ * stays put when the row grows (wrapping, selection, expansion). For a
+ * single-line row this is the same spot as centring on the cell.
+ */
 .contextMenuOverlay {
+  --table-row-actions-cell-padding-block: 6px;
+
   position: absolute;
-  inset-block-start: 50%;
+  inset-block-start: calc(var(--table-row-actions-cell-padding-block) + 10px);
   inset-inline-end: var(--spacing-2xs);
   transform: translateY(-50%);
   display: inline-flex;
@@ -595,6 +704,25 @@
   z-index: 2;
 }
 
+.md .contextMenuOverlay {
+  --table-row-actions-cell-padding-block: var(--spacing-xs);
+}
+
+.sm .contextMenuOverlay {
+  --table-row-actions-cell-padding-block: var(--spacing-xxs);
+}
+
+/* Follow the cell's own vertical alignment when it isn't top-aligned. */
+.cell[data-vertical-align='middle'] .contextMenuOverlay {
+  inset-block-start: 50%;
+}
+
+.cell[data-vertical-align='bottom'] .contextMenuOverlay {
+  inset-block-start: auto;
+  inset-block-end: calc(var(--table-row-actions-cell-padding-block) + 10px);
+  transform: translateY(50%);
+}
+
 .contextMenuHoverOnly .contextMenuOverlay {
   opacity: 0;
   pointer-events: none;

package/dist/components/table/Table.types.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes, ReactNode, Ref } from 'react';
 import type { PageChangeEvent } from '../../components/pagination/Pagination';
 import type { Severity } from '../../constants/severity.types';
-import type { ViewMode } from '../../hooks/useTableSettings';
+export type ViewMode = 'compact' | 'wrapped';
 export interface ColumnItem<T> {
     id: string;
     header: string | (() => ReactNode);
@@ -21,6 +21,35 @@ export interface ColumnItem<T> {
     severity?: any;
     allowOverflow?: boolean;
 }
+/** Visibility fields shared by Table columns and accessor-shaped adapters. */
+export interface TableSettingsColumn extends Partial<Pick<ColumnItem<unknown>, 'id' | 'hidden' | 'canHide'>> {
+    accessorKey?: PropertyKey;
+    header?: unknown;
+    enableHiding?: boolean;
+    meta?: unknown;
+}
+/**
+ * Settings state + setters that drive the table's built-in header settings
+ * menu. This is the shape `useTableSettings` returns, so its result can be
+ * passed straight through: `settings={useTableSettings(...)}`.
+ */
+export interface TableSettingsController {
+    viewMode: ViewMode;
+    setViewMode: (mode: ViewMode) => void;
+    visibleColumnIds?: string[];
+    setVisibleColumnIds?: (ids: string[]) => void;
+    striped?: boolean;
+    setStriped?: (nextStriped: boolean) => void;
+}
+/** Labels and extra items for the table's built-in header settings menu. */
+export interface TableSettingsMenuOptions {
+    /** Accessible name and tooltip for the trigger. Defaults to "Visningsindstillinger". */
+    triggerLabel?: string;
+    columnsLabel?: string;
+    allPresetLabel?: string;
+    standardPresetLabel?: string;
+    additionalSettings?: (close?: () => void) => ReactNode;
+}
 export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
@@ -57,16 +86,33 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     variant?: TableVariant;
     size?: 'sm' | 'md';
     viewMode?: ViewMode;
+    striped?: boolean;
     fillViewport?: boolean;
     /** Extra space below the table, in addition to measured layout/pagination spacing. Defaults to 0. */
     fillViewportBottomOffset?: number;
     containScrolling?: boolean;
+    /**
+     * Pins the header while scrolling. Defaults to the top of the table's own
+     * scroll area when `containScrolling` is on; `false` turns it off.
+     */
     stickyHeader?: StickyHeader;
     tableWidth?: number;
     tableRootRef?: Ref<HTMLDivElement>;
     measuringLayout?: boolean;
     toolbar?: ReactNode;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
+    /**
+     * Content rendered at the inline end of the header row, above the row
+     * actions column. Falls back to the toolbar when `showHeader` is false.
+     */
+    headerActions?: ReactNode;
+    /**
+     * Shows a settings menu (stripes, text wrapping, column visibility) in the
+     * header and applies its state to the table. Pass the result of
+     * `useTableSettings`. Explicit `viewMode`/`striped` props take precedence.
+     */
+    settings?: TableSettingsController;
+    settingsOptions?: TableSettingsMenuOptions;
     take?: number;
     skip?: number;
     totalItemsCount?: number;

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