@dbcdk/react-components 0.0.157 → 0.0.159

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

@@ -48,11 +48,9 @@
 .tableRoot {
   --table-component-header-bg: var(--table-header-bg);
   --table-component-header-fg: var(--table-header-fg);
-  --table-component-header-border: var(--table-border-header);
   --table-component-header-font-weight: var(--font-weight-medium);
   --table-component-row-bg: var(--table-row-bg);
-  --table-component-row-bg-alt: var(--table-row-bg-alt);
-  --table-component-row-bg-hover: var(--table-row-bg-hover);
+  --table-component-row-bg-hover: var(--color-bg-hover-subtle);
   --table-component-row-bg-selected: var(--table-row-bg-selected);
   --table-component-row-bg-selected-hover: var(--table-row-bg-selected-hover);
   --table-component-cell-fg: var(--table-cell-fg);
@@ -78,14 +76,8 @@
 .embedded {
   --table-component-header-bg: transparent;
   --table-component-header-fg: var(--color-fg-subtle);
-  --table-component-header-border: transparent;
   --table-component-header-font-weight: var(--font-weight-default);
   --table-component-row-bg: transparent;
-  --table-component-row-bg-alt: color-mix(
-    in srgb,
-    var(--color-bg-contextual-subtle) 55%,
-    transparent
-  );
   --table-component-row-bg-hover: var(--color-bg-contextual-subtle);
   --table-component-row-bg-selected: color-mix(in srgb, var(--color-bg-selected) 55%, transparent);
   --table-component-row-bg-selected-hover: color-mix(
@@ -162,13 +154,10 @@
 .headerCell {
   vertical-align: middle;
   background-color: var(--table-component-header-bg);
-  border-block-end: 1px solid var(--table-component-header-border);
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
   font-weight: var(--table-component-header-font-weight);
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
   color: var(--table-component-header-fg);
   white-space: nowrap;
 }
@@ -212,15 +201,9 @@
   height: 32px;
 }
 
-.sm .contextMenuOverlay {
-  min-block-size: 0;
-  block-size: min(100%, 32px);
-}
-
 .sm .contextMenuTrigger {
   min-block-size: 0;
   block-size: 100%;
-  border-radius: 0;
 }
 
 .cell[data-vertical-align='top'] {
@@ -315,10 +298,6 @@
   background-color: var(--table-component-row-bg-selected-hover);
 }
 
-.striped > .row:nth-child(even):not(.selectedRow):not(:hover) > .cell {
-  background-color: var(--table-component-row-bg-alt);
-}
-
 .row:focus-within > .cell {
   box-shadow:
     inset 0 2px 0 var(--color-brand),
@@ -395,7 +374,7 @@
   all: unset;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-2xs);
   min-width: 0;
   max-inline-size: 100%;
   cursor: pointer;
@@ -404,6 +383,17 @@
   padding-block: 2px;
   padding-inline: 2px;
   justify-content: flex-start;
+  transition: color var(--transition-fast) var(--ease-standard);
+}
+
+.thButton:hover {
+  color: var(--color-fg-default);
+}
+
+.thButton:focus-visible {
+  outline: none;
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
 .thButtonRight {
@@ -469,6 +459,10 @@
   opacity: 0.45;
 }
 
+.activeSort {
+  color: var(--color-fg-default);
+}
+
 .cellContent {
   display: flex;
   inline-size: 100%;
@@ -563,29 +557,35 @@
 
 .contextMenuTrigger {
   color: var(--color-fg-subtle);
-  min-inline-size: var(--component-size-sm);
-  min-block-size: var(--component-size-sm);
-  border-radius: var(--border-radius-rounded);
-}
-
-.contextMenuAnchorCell {
-  overflow: visible;
+  min-inline-size: calc(var(--component-size-md) + 4px);
+  min-block-size: calc(var(--component-size-md) + 4px);
+  border-radius: 999px;
+  background-color: transparent;
+  position: relative;
   z-index: 1;
-}
-
-.contextMenuAnchorCell .cellValueEllipsis,
-.contextMenuAnchorCell .cellValueNoEllipsis {
-  padding-inline-end: calc(var(--component-size-sm) + var(--spacing-sm));
+  overflow: hidden;
 }
 
 .contextMenuOverlay {
   position: absolute;
-  inset-block: 0;
-  inset-inline-end: 0;
+  inset-block-start: 50%;
+  inset-inline-end: var(--spacing-2xs);
+  transform: translateY(-50%);
   display: inline-flex;
-  justify-content: center;
-  min-inline-size: 40px;
-  z-index: 3;
+  align-items: center;
+  justify-content: flex-end;
+  inline-size: max-content;
+  block-size: auto;
+  min-inline-size: 0;
+  padding: 0;
+  border-radius: var(--border-radius-rounded);
+  background-color: transparent;
+  z-index: 2;
+}
+
+.contextMenuHoverOnly .contextMenuOverlay {
+  opacity: 0;
+  pointer-events: none;
 }
 
 /*
@@ -600,11 +600,24 @@
 .contextMenuOverlay > div,
 .contextMenuOverlay > div > div {
   align-items: center;
+  background-color: transparent;
+  overflow: visible;
+  border-radius: 999px;
 }
 
-.contextMenuOverlay:hover .contextMenuTrigger,
-.contextMenuOverlay:focus-within .contextMenuTrigger {
-  background-color: var(--opac-bg-light);
+.actionCell {
+  overflow: visible;
+  position: relative;
+}
+
+.cellContentWithActions {
+  padding-inline-end: calc(var(--component-size-md) + 4px + var(--spacing-sm));
+}
+
+.contextMenuTrigger:hover,
+.contextMenuTrigger:focus-visible {
+  background-color: var(--table-component-row-bg-hover);
+  z-index: 2;
 }
 
 .contextMenuItemLabel {
@@ -618,13 +631,7 @@
   min-width: 0;
 }
 
-.contextMenuHoverOnly .contextMenuTrigger {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.contextMenuHoverOnly:hover .contextMenuTrigger,
-.contextMenuHoverOnly:focus-within .contextMenuTrigger {
+.contextMenuHoverOnly:hover .contextMenuOverlay {
   opacity: 1;
   pointer-events: auto;
 }

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

@@ -56,7 +56,6 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     variant?: TableVariant;
     size?: 'sm' | 'md';
     viewMode?: ViewMode;
-    striped?: boolean;
     fillViewport?: boolean;
     fillViewportBottomOffset?: number;
     containScrolling?: boolean;
@@ -82,6 +81,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
         open: () => void;
     }) => TableContextMenuItem[];
     showContextMenuOnHover?: boolean;
+    expandableRows?: boolean;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;

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

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var table_classes = require('../table.classes');
 var styles = require('../Table.module.css');
 var TableRow = require('./TableRow');
 
@@ -13,7 +12,6 @@ function TableBody({
   data,
   dataKey,
   columns,
-  striped,
   selectedRows,
   hasSelection,
   selectionMode,
@@ -22,11 +20,14 @@ function TableBody({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
   onRowClick,
   onRowMouseEnter,
-  onRowSelect
+  onRowSelect,
+  onToggleRowExpand
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: table_classes.cx(styles__default.default.body, striped && styles__default.default.striped), children: data.map((row) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: styles__default.default.body, children: data.map((row) => {
     const rowId = row[dataKey];
     return /* @__PURE__ */ jsxRuntime.jsx(
       TableRow.TableRow,
@@ -42,9 +43,12 @@ function TableBody({
         getRowSeverity,
         getContextMenuItems,
         showContextMenuOnHover,
+        expandableRows,
+        expandedRows,
         onRowClick,
         onRowMouseEnter,
-        onRowSelect
+        onRowSelect,
+        onToggleRowExpand
       },
       `gridRow-${rowId}`
     );

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

@@ -5,7 +5,6 @@ type Props<T extends Record<string, any>> = {
     data: T[];
     dataKey: keyof T;
     columns: ColumnItem<T>[];
-    striped?: boolean;
     selectedRows?: Set<number | string>;
     hasSelection: boolean;
     selectionMode: 'single' | 'multiple';
@@ -18,9 +17,12 @@ type Props<T extends Record<string, any>> = {
         open: () => void;
     }) => TableContextMenuItem[];
     showContextMenuOnHover: boolean;
+    expandableRows?: boolean;
+    expandedRows?: Set<number | string>;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+    onToggleRowExpand?: (rowId: number | string) => void;
 };
-export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
+export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, expandableRows, expandedRows, onRowClick, onRowMouseEnter, onRowSelect, onToggleRowExpand, }: Props<T>): ReactNode;
 export {};

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

@@ -1,5 +1,4 @@
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '../table.classes';
 import styles from '../Table.module.css';
 import { TableRow } from './TableRow';
 
@@ -7,7 +6,6 @@ function TableBody({
   data,
   dataKey,
   columns,
-  striped,
   selectedRows,
   hasSelection,
   selectionMode,
@@ -16,11 +14,14 @@ function TableBody({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
   onRowClick,
   onRowMouseEnter,
-  onRowSelect
+  onRowSelect,
+  onToggleRowExpand
 }) {
-  return /* @__PURE__ */ jsx("tbody", { className: cx(styles.body, striped && styles.striped), children: data.map((row) => {
+  return /* @__PURE__ */ jsx("tbody", { className: styles.body, children: data.map((row) => {
     const rowId = row[dataKey];
     return /* @__PURE__ */ jsx(
       TableRow,
@@ -36,9 +37,12 @@ function TableBody({
         getRowSeverity,
         getContextMenuItems,
         showContextMenuOnHover,
+        expandableRows,
+        expandedRows,
         onRowClick,
         onRowMouseEnter,
-        onRowSelect
+        onRowSelect,
+        onToggleRowExpand
       },
       `gridRow-${rowId}`
     );

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

@@ -21,7 +21,6 @@ function TableHeaderCell({
   const active = table_utils.isActiveSort(sortById, column.id);
   const ariaSort = table_utils.getAriaSort(column.sortable, active, sortDirection != null ? sortDirection : null);
   const align = table_classes.getAlignValue(column);
-  const dividerClass = table_classes.getDividerClass(column);
   const alignClasses = table_classes.getHeaderAlignClasses(align);
   const handleToggleSort = () => {
     if (!column.sortable || !onSortChange) return;
@@ -31,7 +30,7 @@ function TableHeaderCell({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "th",
     {
-      className: table_classes.cx(styles__default.default.headerCell, dividerClass),
+      className: styles__default.default.headerCell,
       scope: "col",
       "aria-sort": ariaSort,
       "data-align": align,
@@ -52,8 +51,8 @@ function TableHeaderCell({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: alignClasses.label, children: table_utils.getHeaderLabel(column.header) }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sortIndicator, "aria-hidden": "true", children: [
-                active && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, {}),
-                active && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, {}),
+                active && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: styles__default.default.activeSort }),
+                active && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.activeSort }),
                 !active && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.inActiveSort })
               ] })
             ]

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ArrowUp, ArrowDown } from 'lucide-react';
-import { getAlignValue, getDividerClass, getHeaderAlignClasses, cx } from '../table.classes';
+import { getAlignValue, getHeaderAlignClasses } from '../table.classes';
 import styles from '../Table.module.css';
 import { isActiveSort, getAriaSort, getHeaderLabel, shouldToggleOnKey, getNextSortDirection } from '../table.utils';
 
@@ -15,7 +15,6 @@ function TableHeaderCell({
   const active = isActiveSort(sortById, column.id);
   const ariaSort = getAriaSort(column.sortable, active, sortDirection != null ? sortDirection : null);
   const align = getAlignValue(column);
-  const dividerClass = getDividerClass(column);
   const alignClasses = getHeaderAlignClasses(align);
   const handleToggleSort = () => {
     if (!column.sortable || !onSortChange) return;
@@ -25,7 +24,7 @@ function TableHeaderCell({
   return /* @__PURE__ */ jsxs(
     "th",
     {
-      className: cx(styles.headerCell, dividerClass),
+      className: styles.headerCell,
       scope: "col",
       "aria-sort": ariaSort,
       "data-align": align,
@@ -46,8 +45,8 @@ function TableHeaderCell({
             children: [
               /* @__PURE__ */ jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }),
               /* @__PURE__ */ jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [
-                active && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, {}),
-                active && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, {}),
+                active && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: styles.activeSort }),
+                active && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: styles.activeSort }),
                 !active && /* @__PURE__ */ jsx(ArrowDown, { className: styles.inActiveSort })
               ] })
             ]

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

@@ -30,14 +30,19 @@ function TableRow({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
   onRowClick,
   onRowMouseEnter,
-  onRowSelect
+  onRowSelect,
+  onToggleRowExpand
 }) {
-  var _a;
+  var _a, _b;
   const isSelected = (_a = selectedRows == null ? void 0 : selectedRows.has(rowId)) != null ? _a : false;
+  const isExpanded = (_b = expandedRows == null ? void 0 : expandedRows.has(rowId)) != null ? _b : false;
   const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
   const canSelect = Boolean(selectedRows && onRowSelect);
+  const canExpand = Boolean(expandableRows && onToggleRowExpand);
   const contextMenuItems = getContextMenuItems == null ? void 0 : getContextMenuItems({
     row,
     rowId,
@@ -128,32 +133,32 @@ function TableRow({
             )
           }
         ) }) : null,
-        columns.map((column) => {
-          var _a2, _b, _c, _d, _e;
-          const allowWrap = table_utils.shouldAllowWrap(column.allowWrap, isSelected, viewMode);
+        columns.map((column, index) => {
+          var _a2, _b2, _c, _d;
+          const allowWrap = table_utils.shouldAllowWrap(column.allowWrap, isSelected || isExpanded, viewMode);
           const allowOverflow = column.allowOverflow;
           const cellValue = table_utils.getCellDisplayValue(row, column);
-          const isLastColumn = column.id === ((_a2 = columns[columns.length - 1]) == null ? void 0 : _a2.id);
+          const showRowActions = index === columns.length - 1 && hasContextMenu;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
               className: table_classes.cx(
                 styles__default.default.cell,
+                showRowActions && styles__default.default.actionCell,
                 allowOverflow && styles__default.default.allowOverflow,
                 allowWrap ? styles__default.default.allowWrap : styles__default.default.nowrap,
-                hasContextMenu && isLastColumn && styles__default.default.contextMenuAnchorCell,
                 column.divider === "left" && styles__default.default.dividerLeft,
                 column.divider === "right" && styles__default.default.dividerRight
               ),
-              "data-align": (_b = column.align) != null ? _b : "left",
-              "data-vertical-align": (_c = column.verticalAlign) != null ? _c : "top",
+              "data-align": (_a2 = column.align) != null ? _a2 : "left",
+              "data-vertical-align": (_b2 = column.verticalAlign) != null ? _b2 : "top",
               "data-divider": column.divider,
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: styles__default.default.cellContent,
-                  "data-align": (_d = column.align) != null ? _d : "left",
-                  "data-vertical-align": (_e = column.verticalAlign) != null ? _e : "top",
+                  className: table_classes.cx(styles__default.default.cellContent, showRowActions && styles__default.default.cellContentWithActions),
+                  "data-align": (_c = column.align) != null ? _c : "left",
+                  "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
@@ -162,11 +167,14 @@ function TableRow({
                         children: cellValue
                       }
                     ),
-                    hasContextMenu && isLastColumn ? /* @__PURE__ */ jsxRuntime.jsx(
-                      RowContextMenu,
+                    showRowActions ? /* @__PURE__ */ jsxRuntime.jsx(
+                      RowActions,
                       {
                         rowId,
                         items: contextMenuItems,
+                        expandable: canExpand && viewMode !== "wrapped",
+                        isExpanded,
+                        onToggleExpand: onToggleRowExpand ? () => onToggleRowExpand(rowId) : void 0,
                         onRowClick: onRowClick ? () => onRowClick(row) : void 0
                       }
                     ) : null
@@ -181,12 +189,23 @@ function TableRow({
     }
   );
 }
-function RowContextMenu({
+function RowActions({
   rowId,
   items,
+  expandable,
+  isExpanded,
+  onToggleExpand,
   onRowClick
 }) {
   const toggleRef = react.useRef(null);
+  const expandItem = expandable ? {
+    label: "Udvid r\xE6kke",
+    active: isExpanded,
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { size: 16 }),
+    onClick: () => onToggleExpand == null ? void 0 : onToggleExpand()
+  } : null;
+  const menuItems = [...expandItem ? [expandItem] : [], ...items != null ? items : []];
+  const hasMenu = Boolean(menuItems.length);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -194,15 +213,17 @@ function RowContextMenu({
       "data-row-context-menu": "true",
       onClick: (e) => {
         var _a;
+        if (!hasMenu) return;
         e.stopPropagation();
         (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
       },
       onContextMenu: (e) => {
+        if (!hasMenu) return;
         e.preventDefault();
         e.stopPropagation();
         onRowClick == null ? void 0 : onRowClick();
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: hasMenu ? /* @__PURE__ */ jsxRuntime.jsx(
         Popover.Popover,
         {
           matchTriggerWidth: false,
@@ -229,7 +250,7 @@ function RowContextMenu({
               }
             );
           },
-          children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: items.map(
+          children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: menuItems.map(
             (item, index) => item.type === "header" ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsxRuntime.jsx(
               Menu.Menu.Item,
               {
@@ -258,7 +279,7 @@ function RowContextMenu({
             )
           ) })
         }
-      )
+      ) : null
     }
   );
 }

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

@@ -17,9 +17,12 @@ type Props<T extends Record<string, any>> = {
         open: () => void;
     }) => TableContextMenuItem[];
     showContextMenuOnHover: boolean;
+    expandableRows?: boolean;
+    expandedRows?: Set<number | string>;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+    onToggleRowExpand?: (rowId: number | string) => void;
 };
-export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, 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, showContextMenuOnHover, expandableRows, expandedRows, onRowClick, onRowMouseEnter, onRowSelect, onToggleRowExpand, }: Props<T>): React.ReactNode;
 export {};