@dbcdk/react-components 0.0.119 → 0.0.121

package/dist/components/table/Table.cjs

@@ -4,11 +4,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Pagination = require('../../components/pagination/Pagination');
+var SkeletonLoader = require('../../components/skeleton-loader/SkeletonLoader');
 var useViewportFill = require('../../hooks/useViewportFill');
 var EmptyState = require('./components/empty-state/EmptyState');
 var TableBody = require('./components/TableBody');
 var TableHeader = require('./components/TableHeader');
-var TableLoadingBody = require('./components/TableLoadingBody');
 var table_classes = require('./table.classes');
 var styles = require('./Table.module.css');
 var table_utils = require('./table.utils');
@@ -51,6 +51,7 @@ function Table({
   pageSizeOptions,
   showHeader = true,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -64,6 +65,7 @@ function Table({
   const internalTableRootRef = react.useRef(null);
   const tableRootRefWrapper = react.useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasContextMenu = Boolean(getContextMenuItems);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill.useViewportFill(internalTableRootRef, {
@@ -86,7 +88,7 @@ function Table({
     },
     [onPageChange]
   );
-  const bodyContent = loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx(TableLoadingBody.TableLoadingBody, { rows: take != null ? take : 5, columns: visibleColumns, hasSelection }) : /* @__PURE__ */ jsxRuntime.jsx(
+  const bodyContent = /* @__PURE__ */ jsxRuntime.jsx(
     TableBody.TableBody,
     {
       data,
@@ -99,6 +101,7 @@ function Table({
       selectionInputName,
       viewMode,
       getRowSeverity,
+      getContextMenuItems,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -139,7 +142,7 @@ function Table({
       ref: setTableRootRef,
       className: styles__default.default.tableScroll,
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
-      children: !data.length && !loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      children: loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "table", rows: 5, columns: 3 }) }) : !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
         "table",
         {
           className: styles__default.default.tableElement,
@@ -155,13 +158,15 @@ function Table({
                   style: column.width != null ? { width: column.width } : void 0
                 },
                 column.id
-              ))
+              )),
+              hasContextMenu ? /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: table_utils.CONTEXT_MENU_COLUMN_PX } }) : null
             ] }),
             showHeader && /* @__PURE__ */ jsxRuntime.jsx(
               TableHeader.TableHeader,
               {
                 columns: visibleColumns,
                 hasSelection,
+                hasContextMenu,
                 selectionMode,
                 allRowsSelected,
                 onSelectAllRows,

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

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useId, useRef, useCallback } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
+import { SkeletonLoader } from '../../components/skeleton-loader/SkeletonLoader';
 import { useViewportFill } from '../../hooks/useViewportFill';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import { TableBody } from './components/TableBody';
 import { TableHeader } from './components/TableHeader';
-import { TableLoadingBody } from './components/TableLoadingBody';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
-import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
+import { getVisibleColumns, SELECTION_COLUMN_PX, CONTEXT_MENU_COLUMN_PX } from './table.utils';
 
 function Table({
   data,
@@ -45,6 +45,7 @@ function Table({
   pageSizeOptions,
   showHeader = true,
   getRowSeverity,
+  getContextMenuItems,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -58,6 +59,7 @@ function Table({
   const internalTableRootRef = useRef(null);
   const tableRootRefWrapper = useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasContextMenu = Boolean(getContextMenuItems);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill(internalTableRootRef, {
@@ -80,7 +82,7 @@ function Table({
     },
     [onPageChange]
   );
-  const bodyContent = loading && !data.length ? /* @__PURE__ */ jsx(TableLoadingBody, { rows: take != null ? take : 5, columns: visibleColumns, hasSelection }) : /* @__PURE__ */ jsx(
+  const bodyContent = /* @__PURE__ */ jsx(
     TableBody,
     {
       data,
@@ -93,6 +95,7 @@ function Table({
       selectionInputName,
       viewMode,
       getRowSeverity,
+      getContextMenuItems,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -133,7 +136,7 @@ function Table({
       ref: setTableRootRef,
       className: styles.tableScroll,
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
-      children: !data.length && !loading ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
+      children: loading && !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "table", rows: 5, columns: 3 }) }) : !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
         "table",
         {
           className: styles.tableElement,
@@ -149,13 +152,15 @@ function Table({
                   style: column.width != null ? { width: column.width } : void 0
                 },
                 column.id
-              ))
+              )),
+              hasContextMenu ? /* @__PURE__ */ jsx("col", { style: { width: CONTEXT_MENU_COLUMN_PX } }) : null
             ] }),
             showHeader && /* @__PURE__ */ jsx(
               TableHeader,
               {
                 columns: visibleColumns,
                 hasSelection,
+                hasContextMenu,
                 selectionMode,
                 allRowsSelected,
                 onSelectAllRows,

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

@@ -241,6 +241,14 @@
   line-height: 0;
 }
 
+.headerCell.contextMenuCell,
+.cell.contextMenuCell {
+  inline-size: 1%;
+  white-space: nowrap;
+  padding-inline: var(--spacing-2xs);
+  overflow: visible;
+}
+
 .headerCell.selectionCell {
   padding-block: var(--spacing-xxs);
   vertical-align: middle;
@@ -251,6 +259,15 @@
   padding-block: var(--spacing-xxs);
 }
 
+.headerCell.contextMenuHeaderCell {
+  padding-block: var(--spacing-xxs);
+}
+
+.cell.contextMenuCell {
+  vertical-align: top;
+  padding-block: var(--spacing-2xs);
+}
+
 .selectionHitArea {
   display: inline-flex;
   align-items: flex-start;
@@ -475,6 +492,10 @@
   text-align: right;
 }
 
+.contextMenuCellContent {
+  justify-content: flex-end;
+}
+
 /* vertical alignment inside content wrapper */
 .cellContent[data-vertical-align='top'] {
   align-items: flex-start;
@@ -535,6 +556,10 @@
   text-overflow: clip;
 }
 
+.contextMenuTrigger {
+  color: var(--color-fg-subtle);
+}
+
 .severityTable {
   --row-rail-width: 2px;
   --row-rail-inset-block: 1px;

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

@@ -24,6 +24,14 @@ export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
+export type TableContextMenuItem = {
+    label: ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
 export type StickyHeader = false | 'app-header' | number;
 export type TableVariant = 'primary' | 'embedded';
 export type SortDirection = 'asc' | 'desc' | null;
@@ -61,6 +69,11 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     pageSizeOptions?: number[];
     showHeader?: boolean;
     getRowSeverity?: (row: T) => Severity | undefined;
+    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;

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) {