@dbcdk/react-components 0.0.103 → 0.0.104

package/dist/components/table/TanstackTable.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import * as React from 'react';
+import ColumnResizer from './components/column-resizer/ColumnResizer';
+import { Table } from './Table';
+import { DEFAULT_COLUMN_PX } from './table.utils';
+import { sortingEqual, buildColumnVisibilityFromVisibleIds, buildDistributedColumnWidths, mapDefsToColumnItems, getSortPropsFromSorting } from './tanstackTable.utils';
+
+function TanstackTable(props) {
+  const {
+    data,
+    dataKey,
+    columns,
+    sorting: controlledSorting,
+    onSortingChange,
+    optimisticSortingUi = true,
+    visibleColumnIds,
+    manualSorting,
+    selectedRows,
+    onRowSelect,
+    ...tableProps
+  } = props;
+  const isControlledSorting = controlledSorting != null;
+  const [uiSorting, setUiSorting] = React.useState(controlledSorting != null ? controlledSorting : []);
+  React.useEffect(() => {
+    if (!isControlledSorting) return;
+    if (sortingEqual(uiSorting, controlledSorting)) return;
+    setUiSorting(controlledSorting);
+  }, [isControlledSorting, controlledSorting, uiSorting]);
+  const columnVisibility = React.useMemo(
+    () => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
+    [columns, visibleColumnIds]
+  );
+  const [columnSizing, setColumnSizing] = React.useState({});
+  const containerRef = React.useRef(null);
+  const [availableWidth, setAvailableWidth] = React.useState(void 0);
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting: uiSorting,
+      columnSizing,
+      columnVisibility
+    },
+    onSortingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(uiSorting) : updater;
+      if (optimisticSortingUi) setUiSorting(next);
+      onSortingChange == null ? void 0 : onSortingChange(next);
+    },
+    onColumnSizingChange: setColumnSizing,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    manualSorting: manualSorting != null ? manualSorting : false,
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+    defaultColumn: {
+      enableResizing: true,
+      minSize: 80,
+      size: DEFAULT_COLUMN_PX
+    }
+  });
+  React.useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const updateWidth = () => {
+      const next = el.clientWidth;
+      setAvailableWidth(next > 0 ? next : void 0);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateWidth);
+      return () => window.removeEventListener("resize", updateWidth);
+    }
+    const observer = new ResizeObserver(() => updateWidth());
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const distributedLayout = React.useMemo(() => {
+    if (availableWidth == null) return null;
+    return buildDistributedColumnWidths({
+      table,
+      hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+      defaultMinPx: 80,
+      columnSizing,
+      availableWidth
+    });
+  }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+  const initialLayoutReady = availableWidth != null;
+  const resolvedLayout = React.useMemo(() => {
+    const next = {};
+    table.getVisibleLeafColumns().forEach((column) => {
+      next[column.id] = {
+        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
+      };
+    });
+    return next;
+  }, [table, distributedLayout]);
+  const columnItems = React.useMemo(
+    () => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
+    [columns, columnVisibility, resolvedLayout]
+  );
+  const visibleData = table.getRowModel().rows.map((r) => r.original);
+  const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
+  const handleSortChange = React.useCallback(
+    (column, direction) => {
+      const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
+      if (optimisticSortingUi) setUiSorting(next);
+      onSortingChange == null ? void 0 : onSortingChange(next);
+    },
+    [optimisticSortingUi, onSortingChange]
+  );
+  const headerExtras = React.useCallback(
+    ({ index }) => {
+      var _a, _b, _c, _d;
+      const headerGroups = table.getHeaderGroups();
+      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+      const header = leafHeaders[index];
+      if (!header) return null;
+      const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
+      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
+      if (!canResize || !handler) return null;
+      return /* @__PURE__ */ jsx(ColumnResizer, { id: header.column.id, handler });
+    },
+    [table]
+  );
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      ...tableProps,
+      tableRootRef: containerRef,
+      onSortChange: handleSortChange,
+      dataKey,
+      data: visibleData,
+      columns: columnItems,
+      tableWidth: distributedLayout == null ? void 0 : distributedLayout.totalWidth,
+      measuringLayout: !initialLayoutReady,
+      sortById,
+      sortDirection,
+      headerExtras,
+      selectedRows,
+      onRowSelect
+    }
+  );
+}
+
+export { TanstackTable };

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

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var table_classes = require('../table.classes');
+var styles = require('../Table.module.css');
+var TableRow = require('./TableRow');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TableBody({
+  data,
+  dataKey,
+  columns,
+  striped,
+  selectedRows,
+  hasSelection,
+  selectionMode,
+  selectionInputName,
+  viewMode,
+  getRowSeverity,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: table_classes.cx(styles__default.default.body, striped && styles__default.default.striped), children: data.map((row) => {
+    const rowId = row[dataKey];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TableRow.TableRow,
+      {
+        row,
+        rowId,
+        columns,
+        selectedRows,
+        hasSelection,
+        selectionMode,
+        selectionInputName,
+        viewMode,
+        getRowSeverity,
+        onRowClick,
+        onRowMouseEnter,
+        onRowSelect
+      },
+      `gridRow-${rowId}`
+    );
+  }) });
+}
+
+exports.TableBody = TableBody;

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

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '../table.classes';
+import styles from '../Table.module.css';
+import { TableRow } from './TableRow';
+
+function TableBody({
+  data,
+  dataKey,
+  columns,
+  striped,
+  selectedRows,
+  hasSelection,
+  selectionMode,
+  selectionInputName,
+  viewMode,
+  getRowSeverity,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect
+}) {
+  return /* @__PURE__ */ jsx("tbody", { className: cx(styles.body, striped && styles.striped), children: data.map((row) => {
+    const rowId = row[dataKey];
+    return /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        row,
+        rowId,
+        columns,
+        selectedRows,
+        hasSelection,
+        selectionMode,
+        selectionInputName,
+        viewMode,
+        getRowSeverity,
+        onRowClick,
+        onRowMouseEnter,
+        onRowSelect
+      },
+      `gridRow-${rowId}`
+    );
+  }) });
+}
+
+export { TableBody };

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var TableHeaderCell = require('./TableHeaderCell');
+var TableSelectionCell = require('./TableSelectionCell');
+var styles = require('../Table.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TableHeader({
+  columns,
+  hasSelection,
+  selectionMode,
+  allRowsSelected,
+  onSelectAllRows,
+  sortById,
+  sortDirection,
+  onSortChange,
+  headerExtras,
+  stickyTop
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "thead",
+    {
+      className: styles__default.default.header,
+      style: stickyTop ? { top: stickyTop, position: "sticky", zIndex: 2 } : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles__default.default.headerRow, children: [
+        hasSelection ? /* @__PURE__ */ jsxRuntime.jsx(
+          TableSelectionCell.TableSelectionCell,
+          {
+            isHeader: true,
+            multiple: selectionMode === "multiple",
+            checked: allRowsSelected,
+            onToggle: (checked) => onSelectAllRows == null ? void 0 : onSelectAllRows(checked)
+          }
+        ) : null,
+        columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          TableHeaderCell.TableHeaderCell,
+          {
+            column,
+            index,
+            sortById,
+            sortDirection,
+            onSortChange,
+            extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
+          },
+          column.id
+        ))
+      ] })
+    }
+  );
+}
+
+exports.TableHeader = TableHeader;

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,69 @@
+'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 dividerClass = table_classes.getDividerClass(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: table_classes.cx(styles__default.default.headerCell, dividerClass),
+      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, {}),
+                active && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, {}),
+                !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.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowUp, ArrowDown } from 'lucide-react';
+import { getAlignValue, getDividerClass, getHeaderAlignClasses, cx } 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 dividerClass = getDividerClass(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: cx(styles.headerCell, dividerClass),
+      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, {}),
+                active && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, {}),
+                !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/TableLoadingBody.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SkeletonLoaderItem = require('../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var table_classes = require('../table.classes');
+var styles = require('../Table.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TableLoadingBody({ rows, columns, hasSelection }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: styles__default.default.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles__default.default.row, children: [
+    hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: table_classes.cx(styles__default.default.cell, styles__default.default.selectionCell), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
+    columns.map((column) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "td",
+        {
+          className: table_classes.cx(
+            styles__default.default.cell,
+            column.divider === "left" && styles__default.default.dividerLeft,
+            column.divider === "right" && styles__default.default.dividerRight
+          ),
+          "data-align": (_a = column.align) != null ? _a : "left",
+          "data-divider": column.divider,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellValueEllipsis, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
+        },
+        column.id
+      );
+    })
+  ] }, `loading-row-${rowIndex}`)) });
+}
+
+exports.TableLoadingBody = TableLoadingBody;

package/dist/components/table/components/TableLoadingBody.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SkeletonLoaderItem } from '../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import { cx } from '../table.classes';
+import styles from '../Table.module.css';
+
+function TableLoadingBody({ rows, columns, hasSelection }) {
+  return /* @__PURE__ */ jsx("tbody", { className: styles.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxs("tr", { className: styles.row, children: [
+    hasSelection ? /* @__PURE__ */ jsx("td", { className: cx(styles.cell, styles.selectionCell), children: /* @__PURE__ */ jsx("div", { className: styles.cellContent, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
+    columns.map((column) => {
+      var _a;
+      return /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: cx(
+            styles.cell,
+            column.divider === "left" && styles.dividerLeft,
+            column.divider === "right" && styles.dividerRight
+          ),
+          "data-align": (_a = column.align) != null ? _a : "left",
+          "data-divider": column.divider,
+          children: /* @__PURE__ */ jsx("div", { className: styles.cellContent, children: /* @__PURE__ */ jsx("div", { className: styles.cellValueEllipsis, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
+        },
+        column.id
+      );
+    })
+  ] }, `loading-row-${rowIndex}`)) });
+}
+
+export { TableLoadingBody };

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

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

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

@@ -0,0 +1 @@
+