@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,50 +0,0 @@
-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

@@ -1,68 +0,0 @@
-'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

@@ -1,12 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,287 +0,0 @@
-'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

@@ -1,28 +0,0 @@
-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 {};