@dbcdk/react-components 0.0.169 → 0.0.170

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

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TableHeaderCell } from './TableHeaderCell';
+import { TableSelectionCell } from './TableSelectionCell';
+import styles from '../Table.module.css';
+
+function TableHeader({
+  columns,
+  hasSelection,
+  selectionMode,
+  allRowsSelected,
+  onSelectAllRows,
+  sortById,
+  sortDirection,
+  onSortChange,
+  headerExtras,
+  stickyTop
+}) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      className: styles.header,
+      style: stickyTop ? { top: stickyTop, position: "sticky", zIndex: 2 } : void 0,
+      children: /* @__PURE__ */ jsxs("tr", { className: styles.headerRow, children: [
+        hasSelection ? /* @__PURE__ */ jsx(
+          TableSelectionCell,
+          {
+            isHeader: true,
+            multiple: selectionMode === "multiple",
+            checked: allRowsSelected,
+            onToggle: (checked) => onSelectAllRows == null ? void 0 : onSelectAllRows(checked)
+          }
+        ) : null,
+        columns.map((column, index) => /* @__PURE__ */ jsx(
+          TableHeaderCell,
+          {
+            column,
+            index,
+            sortById,
+            sortDirection,
+            onSortChange,
+            extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
+          },
+          column.id
+        ))
+      ] })
+    }
+  );
+}
+
+export { TableHeader };

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

@@ -0,0 +1,68 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var table_classes = require('../table.classes');
+var styles = require('../Table.module.css');
+var table_utils = require('../table.utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TableHeaderCell({
+  column,
+  index,
+  sortById,
+  sortDirection,
+  onSortChange,
+  extraContent
+}) {
+  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 alignClasses = table_classes.getHeaderAlignClasses(align);
+  const handleToggleSort = () => {
+    if (!column.sortable || !onSortChange) return;
+    const nextDirection = table_utils.getNextSortDirection(column.sortable, active, sortDirection != null ? sortDirection : null);
+    onSortChange(column, nextDirection);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "th",
+    {
+      className: styles__default.default.headerCell,
+      scope: "col",
+      "aria-sort": ariaSort,
+      "data-align": align,
+      "data-divider": column.divider,
+      "data-column-index": index,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.main, children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: alignClasses.button,
+            onClick: handleToggleSort,
+            onKeyDown: (e) => {
+              if (!table_utils.shouldToggleOnKey(e.key)) return;
+              e.preventDefault();
+              handleToggleSort();
+            },
+            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, { 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 })
+              ] })
+            ]
+          }
+        ) : /* @__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
+      ]
+    },
+    column.id
+  );
+}
+
+exports.TableHeaderCell = TableHeaderCell;

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { ColumnItem, SortDirection } from '../Table.types';
+type Props<T> = {
+    column: ColumnItem<T>;
+    index: number;
+    sortById?: string;
+    sortDirection?: SortDirection;
+    onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
+    extraContent?: ReactNode;
+};
+export declare function TableHeaderCell<T>({ column, index, sortById, sortDirection, onSortChange, extraContent, }: Props<T>): ReactNode;
+export {};

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

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowUp, ArrowDown } from 'lucide-react';
+import { getAlignValue, getHeaderAlignClasses } from '../table.classes';
+import styles from '../Table.module.css';
+import { isActiveSort, getAriaSort, getHeaderLabel, shouldToggleOnKey, getNextSortDirection } from '../table.utils';
+
+function TableHeaderCell({
+  column,
+  index,
+  sortById,
+  sortDirection,
+  onSortChange,
+  extraContent
+}) {
+  const active = isActiveSort(sortById, column.id);
+  const ariaSort = getAriaSort(column.sortable, active, sortDirection != null ? sortDirection : null);
+  const align = getAlignValue(column);
+  const alignClasses = getHeaderAlignClasses(align);
+  const handleToggleSort = () => {
+    if (!column.sortable || !onSortChange) return;
+    const nextDirection = getNextSortDirection(column.sortable, active, sortDirection != null ? sortDirection : null);
+    onSortChange(column, nextDirection);
+  };
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      className: styles.headerCell,
+      scope: "col",
+      "aria-sort": ariaSort,
+      "data-align": align,
+      "data-divider": column.divider,
+      "data-column-index": index,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsx("div", { className: alignClasses.main, children: column.sortable ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: alignClasses.button,
+            onClick: handleToggleSort,
+            onKeyDown: (e) => {
+              if (!shouldToggleOnKey(e.key)) return;
+              e.preventDefault();
+              handleToggleSort();
+            },
+            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, { className: styles.activeSort }),
+                active && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: styles.activeSort }),
+                !active && /* @__PURE__ */ jsx(ArrowDown, { className: styles.inActiveSort })
+              ] })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }) }) }),
+        extraContent != null ? /* @__PURE__ */ jsx("div", { className: styles.thOverlayExtras, children: extraContent }) : null
+      ]
+    },
+    column.id
+  );
+}
+
+export { TableHeaderCell };

package/dist/components/table/components/TablePagination.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/components/table/components/TablePagination.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,287 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('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');
+var table_utils = require('../table.utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TableRow({
+  row,
+  rowId,
+  columns,
+  selectedRows,
+  hasSelection,
+  selectionMode,
+  selectionInputName,
+  viewMode,
+  getRowSeverity,
+  getContextMenuItems,
+  showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect,
+  onToggleRowExpand
+}) {
+  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,
+    open: () => onRowClick == null ? void 0 : onRowClick(row)
+  });
+  const hasContextMenu = Boolean(contextMenuItems == null ? void 0 : contextMenuItems.length);
+  const { handleRowClick, handleRowKeyDown } = useTableRowInteractions.useTableRowInteractions({
+    row,
+    rowId,
+    isSelected,
+    canSelect,
+    onRowClick,
+    onRowSelect
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "tr",
+    {
+      className: table_classes.cx(
+        styles__default.default.row,
+        onRowClick && styles__default.default.clickableRow,
+        isSelected && styles__default.default.selectedRow,
+        rowSeverity && styles__default.default.severity,
+        hasContextMenu && showContextMenuOnHover && styles__default.default.contextMenuHoverOnly
+      ),
+      "data-context-menu-visibility": hasContextMenu ? showContextMenuOnHover ? "hover" : "always" : void 0,
+      style: {
+        ["--row-severity-color"]: rowSeverity ? `color-mix(in srgb, ${severity.SeverityBgColor[rowSeverity]} 65%, var(--table-component-row-bg))` : void 0
+      },
+      tabIndex: onRowClick ? 0 : -1,
+      onKeyDown: handleRowKeyDown,
+      onMouseEnter: () => onRowMouseEnter == null ? void 0 : onRowMouseEnter(row),
+      onClick: handleRowClick,
+      children: [
+        hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: table_classes.cx(styles__default.default.cell, styles__default.default.selectionCell), "data-selection-control": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.selectionHitArea,
+            "data-selection-control": "true",
+            onClick: (e) => {
+              if (e.target !== e.currentTarget) return;
+              e.stopPropagation();
+              onRowSelect == null ? void 0 : onRowSelect(rowId, !isSelected);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: styles__default.default.selectionControlWrap,
+                "data-selection-control": "true",
+                onMouseDown: (e) => {
+                  if (selectionMode !== "single" || !isSelected) return;
+                  e.preventDefault();
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (selectionMode === "single" && isSelected) {
+                    e.preventDefault();
+                    onRowSelect == null ? void 0 : onRowSelect(rowId, false);
+                  }
+                },
+                children: selectionMode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  RadioButton.RadioButton,
+                  {
+                    noContainer: true,
+                    name: selectionInputName,
+                    value: String(rowId),
+                    checked: isSelected,
+                    size: "sm",
+                    variant: "primary",
+                    onChange: (_value, e) => {
+                      e.stopPropagation();
+                      onRowSelect == null ? void 0 : onRowSelect(rowId, true);
+                    }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox.Checkbox,
+                  {
+                    noContainer: true,
+                    variant: "primary",
+                    checked: isSelected,
+                    size: "sm",
+                    onChange: (checked, e) => {
+                      e.stopPropagation();
+                      onRowSelect == null ? void 0 : onRowSelect(rowId, checked);
+                    }
+                  }
+                )
+              }
+            )
+          }
+        ) }) : null,
+        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 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,
+                column.divider === "left" && styles__default.default.dividerLeft,
+                column.divider === "right" && styles__default.default.dividerRight
+              ),
+              "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: 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",
+                      {
+                        className: allowOverflow ? styles__default.default.cellValueNoEllipsis : styles__default.default.cellValueEllipsis,
+                        children: cellValue
+                      }
+                    ),
+                    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
+                  ]
+                }
+              )
+            },
+            column.id
+          );
+        })
+      ]
+    }
+  );
+}
+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",
+    {
+      className: styles__default.default.contextMenuOverlay,
+      "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: hasMenu ? /* @__PURE__ */ jsxRuntime.jsx(
+        Popover.Popover,
+        {
+          matchTriggerWidth: false,
+          minWidth: "180px",
+          trigger: (toggle, _icon, isOpen) => {
+            toggleRef.current = toggle;
+            return /* @__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.MoreVertical, { size: 16 }),
+                "data-row-context-menu": "true",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggle(e);
+                }
+              }
+            );
+          },
+          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,
+              {
+                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: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.contextMenuItemLabel, children: [
+                      item.icon,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.contextMenuItemText, children: item.label })
+                    ] })
+                  }
+                )
+              },
+              index
+            )
+          ) })
+        }
+      ) : null
+    }
+  );
+}
+
+exports.TableRow = TableRow;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ViewMode } from '../../../hooks/useTableSettings';
+import type { ColumnItem, TableContextMenuItem } from '../Table.types';
+type Props<T extends Record<string, any>> = {
+    row: T;
+    rowId: string | number;
+    columns: ColumnItem<T>[];
+    selectedRows?: Set<number | string>;
+    hasSelection: boolean;
+    selectionMode: 'single' | 'multiple';
+    selectionInputName: string;
+    viewMode?: ViewMode;
+    getRowSeverity?: (row: T) => any;
+    getContextMenuItems?: (args: {
+        row: T;
+        rowId: string | number;
+        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, expandableRows, expandedRows, onRowClick, onRowMouseEnter, onRowSelect, onToggleRowExpand, }: Props<T>): React.ReactNode;
+export {};