@dbcdk/react-components 0.0.120 → 0.0.122

package/dist/components/table/TanstackTable.cjs

@@ -116,11 +116,20 @@ function TanstackTable(props) {
     return tanstackTable_utils.buildDistributedColumnWidths({
       table,
       hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+      hasContextMenu: Boolean(tableProps.getContextMenuItems),
       defaultMinPx: 80,
       columnSizing,
       availableWidth
     });
-  }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+  }, [
+    table,
+    selectedRows,
+    onRowSelect,
+    dataKey,
+    tableProps.getContextMenuItems,
+    columnSizing,
+    availableWidth
+  ]);
   const initialLayoutReady = availableWidth != null;
   const resolvedLayout = React__namespace.useMemo(() => {
     const next = {};

package/dist/components/table/TanstackTable.js

@@ -91,11 +91,20 @@ function TanstackTable(props) {
     return buildDistributedColumnWidths({
       table,
       hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+      hasContextMenu: Boolean(tableProps.getContextMenuItems),
       defaultMinPx: 80,
       columnSizing,
       availableWidth
     });
-  }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+  }, [
+    table,
+    selectedRows,
+    onRowSelect,
+    dataKey,
+    tableProps.getContextMenuItems,
+    columnSizing,
+    availableWidth
+  ]);
   const initialLayoutReady = availableWidth != null;
   const resolvedLayout = React.useMemo(() => {
     const next = {};

package/dist/components/table/components/TableBody.cjs

@@ -20,6 +20,7 @@ function TableBody({
   selectionInputName,
   viewMode,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -38,6 +39,7 @@ function TableBody({
         selectionInputName,
         viewMode,
         getRowSeverity,
+        getContextMenuItems,
         onRowClick,
         onRowMouseEnter,
         onRowSelect

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ViewMode } from '../../../hooks/useTableSettings';
-import type { ColumnItem } from '../Table.types';
+import type { ColumnItem, TableContextMenuItem } from '../Table.types';
 type Props<T extends Record<string, any>> = {
     data: T[];
     dataKey: keyof T;
@@ -12,9 +12,14 @@ type Props<T extends Record<string, any>> = {
     selectionInputName: string;
     viewMode?: ViewMode;
     getRowSeverity?: (row: T) => any;
+    getContextMenuItems?: (args: {
+        row: T;
+        rowId: string | number;
+        open: () => void;
+    }) => TableContextMenuItem[];
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
+export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableBody.js

@@ -14,6 +14,7 @@ function TableBody({
   selectionInputName,
   viewMode,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -32,6 +33,7 @@ function TableBody({
         selectionInputName,
         viewMode,
         getRowSeverity,
+        getContextMenuItems,
         onRowClick,
         onRowMouseEnter,
         onRowSelect

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

@@ -12,6 +12,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function TableHeader({
   columns,
   hasSelection,
+  hasContextMenu,
   selectionMode,
   allRowsSelected,
   onSelectAllRows,
@@ -47,7 +48,15 @@ function TableHeader({
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
           column.id
-        ))
+        )),
+        hasContextMenu ? /* @__PURE__ */ jsxRuntime.jsx(
+          "th",
+          {
+            className: [styles__default.default.headerCell, styles__default.default.contextMenuCell, styles__default.default.contextMenuHeaderCell].filter(Boolean).join(" "),
+            scope: "col",
+            "aria-label": "R\xE6kkehandlinger"
+          }
+        ) : null
       ] })
     }
   );

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

@@ -3,6 +3,7 @@ import type { ColumnItem, HeaderExtrasArgs, SortDirection } from '../Table.types
 type Props<T> = {
     columns: ColumnItem<T>[];
     hasSelection: boolean;
+    hasContextMenu: boolean;
     selectionMode: 'single' | 'multiple';
     allRowsSelected?: boolean;
     onSelectAllRows?: (isSelected: boolean) => void;
@@ -12,5 +13,5 @@ type Props<T> = {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     stickyTop?: string;
 };
-export declare function TableHeader<T>({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, hasContextMenu, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
 export {};

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

@@ -6,6 +6,7 @@ import styles from '../Table.module.css';
 function TableHeader({
   columns,
   hasSelection,
+  hasContextMenu,
   selectionMode,
   allRowsSelected,
   onSelectAllRows,
@@ -41,7 +42,15 @@ function TableHeader({
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
           column.id
-        ))
+        )),
+        hasContextMenu ? /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: [styles.headerCell, styles.contextMenuCell, styles.contextMenuHeaderCell].filter(Boolean).join(" "),
+            scope: "col",
+            "aria-label": "R\xE6kkehandlinger"
+          }
+        ) : null
       ] })
     }
   );

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

@@ -1,9 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
 var Checkbox = require('../../../components/forms/checkbox/Checkbox');
 var RadioButton = require('../../../components/forms/radio-buttons/RadioButton');
+var Popover = require('../../../components/popover/Popover');
 var severity = require('../../../constants/severity');
+var Button = require('../../button/Button');
+var Menu = require('../../menu/Menu');
 var useTableRowInteractions = require('../hooks/useTableRowInteractions');
 var table_classes = require('../table.classes');
 var styles = require('../Table.module.css');
@@ -23,6 +27,7 @@ function TableRow({
   selectionInputName,
   viewMode,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -31,6 +36,11 @@ function TableRow({
   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 contextMenuItems = getContextMenuItems == null ? void 0 : getContextMenuItems({
+    row,
+    rowId,
+    open: () => onRowClick == null ? void 0 : onRowClick(row)
+  });
   const { handleRowClick, handleRowKeyDown } = useTableRowInteractions.useTableRowInteractions({
     row,
     rowId,
@@ -149,10 +159,74 @@ function TableRow({
             },
             column.id
           );
-        })
+        }),
+        (contextMenuItems == null ? void 0 : contextMenuItems.length) ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: table_classes.cx(styles__default.default.cell, styles__default.default.contextMenuCell), "data-row-context-menu": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: table_classes.cx(styles__default.default.cellContent, styles__default.default.contextMenuCellContent),
+            "data-align": "right",
+            "data-row-context-menu": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx(RowContextMenu, { row, rowId, items: contextMenuItems })
+          }
+        ) }) : null
       ]
     }
   );
 }
+function RowContextMenu({
+  row,
+  rowId,
+  items
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "inline",
+          shape: "round",
+          className: styles__default.default.contextMenuTrigger,
+          "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? true : false,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 16 }),
+          "data-row-context-menu": "true",
+          onClick: (e) => {
+            e.stopPropagation();
+            toggle(e);
+          }
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        Menu.Menu.Item,
+        {
+          active: item.active,
+          selected: item.selected,
+          disabled: item.disabled,
+          variant: item.variant,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "data-row-context-menu": "true",
+              onClick: (e) => {
+                e.stopPropagation();
+                item.onClick();
+                close();
+              },
+              children: item.label
+            }
+          )
+        },
+        index
+      )) })
+    }
+  );
+}
 
 exports.TableRow = TableRow;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ViewMode } from '../../../hooks/useTableSettings';
-import type { ColumnItem } from '../Table.types';
+import type { ColumnItem, TableContextMenuItem } from '../Table.types';
 type Props<T extends Record<string, any>> = {
     row: T;
     rowId: string | number;
@@ -11,9 +11,14 @@ type Props<T extends Record<string, any>> = {
     selectionInputName: string;
     viewMode?: ViewMode;
     getRowSeverity?: (row: T) => any;
+    getContextMenuItems?: (args: {
+        row: T;
+        rowId: string | number;
+        open: () => void;
+    }) => TableContextMenuItem[];
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
+export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
 export {};

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

@@ -1,7 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { MoreHorizontal } from 'lucide-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';
@@ -17,6 +21,7 @@ function TableRow({
   selectionInputName,
   viewMode,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -25,6 +30,11 @@ function TableRow({
   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 contextMenuItems = getContextMenuItems == null ? void 0 : getContextMenuItems({
+    row,
+    rowId,
+    open: () => onRowClick == null ? void 0 : onRowClick(row)
+  });
   const { handleRowClick, handleRowKeyDown } = useTableRowInteractions({
     row,
     rowId,
@@ -143,10 +153,74 @@ function TableRow({
             },
             column.id
           );
-        })
+        }),
+        (contextMenuItems == null ? void 0 : contextMenuItems.length) ? /* @__PURE__ */ jsx("td", { className: cx(styles.cell, styles.contextMenuCell), "data-row-context-menu": "true", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(styles.cellContent, styles.contextMenuCellContent),
+            "data-align": "right",
+            "data-row-context-menu": "true",
+            children: /* @__PURE__ */ jsx(RowContextMenu, { row, rowId, items: contextMenuItems })
+          }
+        ) }) : null
       ]
     }
   );
 }
+function RowContextMenu({
+  row,
+  rowId,
+  items
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => /* @__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(MoreHorizontal, { size: 16 }),
+          "data-row-context-menu": "true",
+          onClick: (e) => {
+            e.stopPropagation();
+            toggle(e);
+          }
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsx(Menu, { children: items.map((item, 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: item.label
+            }
+          )
+        },
+        index
+      )) })
+    }
+  );
+}
 
 export { TableRow };

package/dist/components/table/hooks/useTableRowInteractions.cjs

@@ -13,9 +13,9 @@ function useTableRowInteractions({
 }) {
   const handleRowClick = react.useCallback(
     (e) => {
-      var _a;
+      var _a, _b;
       const target = e.target;
-      if ((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) {
+      if (((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) || ((_b = target == null ? void 0 : target.closest) == null ? void 0 : _b.call(target, '[data-row-context-menu="true"]'))) {
         return;
       }
       if (table_utils.isModifierClick(e) && canSelect) {

package/dist/components/table/hooks/useTableRowInteractions.js

@@ -11,9 +11,9 @@ function useTableRowInteractions({
 }) {
   const handleRowClick = useCallback(
     (e) => {
-      var _a;
+      var _a, _b;
       const target = e.target;
-      if ((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) {
+      if (((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) || ((_b = target == null ? void 0 : target.closest) == null ? void 0 : _b.call(target, '[data-row-context-menu="true"]'))) {
         return;
       }
       if (isModifierClick(e) && canSelect) {

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

@@ -1,6 +1,7 @@
 'use strict';
 
 const SELECTION_COLUMN_PX = 40;
+const CONTEXT_MENU_COLUMN_PX = 44;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -44,6 +45,7 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
+exports.CONTEXT_MENU_COLUMN_PX = CONTEXT_MENU_COLUMN_PX;
 exports.DEFAULT_COLUMN_PX = DEFAULT_COLUMN_PX;
 exports.SELECTION_COLUMN_PX = SELECTION_COLUMN_PX;
 exports.getAriaSort = getAriaSort;

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ColumnItem } from './Table.types';
 export declare const SELECTION_COLUMN_PX: 40;
+export declare const CONTEXT_MENU_COLUMN_PX: 44;
 export declare const DEFAULT_COLUMN_PX: 150;
 export type SortDirection = 'asc' | 'desc' | null;
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;

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

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

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

@@ -93,9 +93,10 @@ function toIntegerTrackWidths(tracks, targetWidth) {
   return Object.fromEntries(floored.map((track) => [track.id, track.width]));
 }
 function buildDistributedColumnWidths(args) {
-  const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
+  const { table, hasSelection, hasContextMenu, defaultMinPx, columnSizing, availableWidth } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? table_utils.SELECTION_COLUMN_PX : 0;
+  const contextMenuWidth = hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : 0;
   const tracks = leaf.map((c) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
@@ -123,7 +124,7 @@ function buildDistributedColumnWidths(args) {
       fixed: false
     };
   });
-  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  const fixedWidth = selectionWidth + contextMenuWidth + tracks.reduce((sum, track) => sum + track.width, 0);
   let remaining = Math.max(0, availableWidth - fixedWidth);
   let active = tracks.filter(
     (track) => !track.fixed && (track.max == null || track.width < track.max)
@@ -148,18 +149,19 @@ function buildDistributedColumnWidths(args) {
     active = nextActive;
   }
   const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const maxTrackWidth = availableWidth - selectionWidth;
+  const maxTrackWidth = availableWidth - selectionWidth - contextMenuWidth;
   const targetTrackWidth = Math.min(
     floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
     maxTrackWidth
   );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
   const totalWidth = Math.min(
-    selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
+    selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
     availableWidth
   );
   return {
     selectionWidth: hasSelection ? table_utils.SELECTION_COLUMN_PX : void 0,
+    contextMenuWidth: hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : void 0,
     widths,
     totalWidth
   };

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

@@ -14,11 +14,13 @@ export declare function getSortPropsFromSorting(sorting: SortingState): {
 export declare function buildDistributedColumnWidths(args: {
     table: any;
     hasSelection: boolean;
+    hasContextMenu: boolean;
     defaultMinPx: number;
     columnSizing: ColumnSizingState;
     availableWidth: number;
 }): {
     selectionWidth?: number;
+    contextMenuWidth?: number;
     widths: Record<string, number>;
     totalWidth: number;
 };

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

@@ -1,4 +1,4 @@
-import { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
+import { DEFAULT_COLUMN_PX, CONTEXT_MENU_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
 
 function getColumnId(def, index) {
   const d = def;
@@ -91,9 +91,10 @@ function toIntegerTrackWidths(tracks, targetWidth) {
   return Object.fromEntries(floored.map((track) => [track.id, track.width]));
 }
 function buildDistributedColumnWidths(args) {
-  const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
+  const { table, hasSelection, hasContextMenu, defaultMinPx, columnSizing, availableWidth } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
+  const contextMenuWidth = hasContextMenu ? CONTEXT_MENU_COLUMN_PX : 0;
   const tracks = leaf.map((c) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
@@ -121,7 +122,7 @@ function buildDistributedColumnWidths(args) {
       fixed: false
     };
   });
-  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  const fixedWidth = selectionWidth + contextMenuWidth + tracks.reduce((sum, track) => sum + track.width, 0);
   let remaining = Math.max(0, availableWidth - fixedWidth);
   let active = tracks.filter(
     (track) => !track.fixed && (track.max == null || track.width < track.max)
@@ -146,18 +147,19 @@ function buildDistributedColumnWidths(args) {
     active = nextActive;
   }
   const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const maxTrackWidth = availableWidth - selectionWidth;
+  const maxTrackWidth = availableWidth - selectionWidth - contextMenuWidth;
   const targetTrackWidth = Math.min(
     floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
     maxTrackWidth
   );
   const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
   const totalWidth = Math.min(
-    selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
+    selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0),
     availableWidth
   );
   return {
     selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
+    contextMenuWidth: hasContextMenu ? CONTEXT_MENU_COLUMN_PX : void 0,
     widths,
     totalWidth
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.120",
+  "version": "0.0.122",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",

package/dist/components/table/components/TableLoadingBody.cjs

@@ -1,35 +0,0 @@
-'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 TableLoadingBody({ rows, columns, hasSelection }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: styles__default.default.body, 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), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
-    columns.map((column) => {
-      var _a;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "td",
-        {
-          className: table_classes.cx(
-            styles__default.default.cell,
-            column.divider === "left" && styles__default.default.dividerLeft,
-            column.divider === "right" && styles__default.default.dividerRight
-          ),
-          "data-align": (_a = column.align) != null ? _a : "left",
-          "data-divider": column.divider,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellValueEllipsis, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
-        },
-        column.id
-      );
-    })
-  ] }, `loading-row-${rowIndex}`)) });
-}
-
-exports.TableLoadingBody = TableLoadingBody;

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

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ColumnItem } from '../Table.types';
-type Props<T> = {
-    rows: number;
-    columns: ColumnItem<T>[];
-    hasSelection: boolean;
-};
-export declare function TableLoadingBody<T>({ rows, columns, hasSelection }: Props<T>): ReactNode;
-export {};