@dbcdk/react-components 0.0.197 → 0.0.199

package/dist/components/table/Table.js

@@ -3,14 +3,17 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useId, useRef, useState, useLayoutEffect, useCallback } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
 import { useViewportFill } from '../../hooks/useViewportFill';
+import { mergeRefs } from '../../utils/refs.utils';
+import { usesDistributedWidths, distributeColumnWidths, buildColumnTracks } from './columnLayout.utils';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import { TableHeaderSettings } from './components/table-settings/TableHeaderSettings';
 import { TableBody } from './components/TableBody';
 import { TableHeader } from './components/TableHeader';
 import { TableSkeletonBody } from './components/TableSkeletonBody';
+import { useElementWidth } from './hooks/useElementWidth';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
-import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
+import { DEFAULT_VIEW_MODE, getVisibleColumns, showsExpandToggle, getActionsReserve, SELECTION_COLUMN_PX } from './table.utils';
 import { filterColumnsBySettings } from './tableSettings.utils';
 
 const DEFAULT_SKELETON_ROWS = 10;
@@ -42,6 +45,7 @@ function Table({
   headerActions: headerActionsProp,
   settings,
   settingsOptions,
+  settingsColumns,
   take,
   skip,
   totalItemsCount,
@@ -63,9 +67,9 @@ function Table({
   onPageChange,
   ...rest
 }) {
-  var _a;
-  const viewMode = viewModeProp != null ? viewModeProp : settings == null ? void 0 : settings.viewMode;
-  const striped = (_a = stripedProp != null ? stripedProp : settings == null ? void 0 : settings.striped) != null ? _a : false;
+  var _a, _b;
+  const viewMode = (_a = viewModeProp != null ? viewModeProp : settings == null ? void 0 : settings.viewMode) != null ? _a : DEFAULT_VIEW_MODE;
+  const striped = (_b = stripedProp != null ? stripedProp : settings == null ? void 0 : settings.striped) != null ? _b : false;
   const settingsVisibleIds = settings == null ? void 0 : settings.visibleColumnIds;
   const visibleColumns = useMemo(
     () => (settingsVisibleIds == null ? void 0 : settingsVisibleIds.length) ? filterColumnsBySettings(columns, settingsVisibleIds) : getVisibleColumns(columns),
@@ -73,7 +77,14 @@ function Table({
   );
   const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
     headerActionsProp,
-    settings ? /* @__PURE__ */ jsx(TableHeaderSettings, { settings, options: settingsOptions, columns }) : null
+    settings ? /* @__PURE__ */ jsx(
+      TableHeaderSettings,
+      {
+        settings,
+        options: settingsOptions,
+        columns: settingsColumns != null ? settingsColumns : columns
+      }
+    ) : null
   ] }) : null;
   const toolbarContent = !showHeader && headerActions ? /* @__PURE__ */ jsxs("div", { className: styles.toolbarWithHeaderActions, children: [
     toolbar,
@@ -81,8 +92,30 @@ function Table({
   ] }) : toolbar;
   const selectionInputName = useId();
   const internalTableRootRef = useRef(null);
-  const tableRootRefWrapper = useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
+  const hasRowActions = Boolean(getContextMenuItems) || showsExpandToggle(expandableRows, viewMode);
+  const hasHeaderActions = headerActionsProp != null || Boolean(settings);
+  const { px: actionReservePx, compactHeader: compactHeaderActionReserve } = getActionsReserve({
+    hasRowActions,
+    hasSettings: Boolean(settings),
+    hasOtherHeaderActions: headerActionsProp != null,
+    showHeader
+  });
+  const distributeWidths = useMemo(
+    () => tableWidth == null && (usesDistributedWidths(visibleColumns) || showHeader && hasHeaderActions),
+    [tableWidth, visibleColumns, showHeader, hasHeaderActions]
+  );
+  const availableWidth = useElementWidth(internalTableRootRef, distributeWidths);
+  const distributedLayout = useMemo(
+    () => distributeWidths && availableWidth != null ? distributeColumnWidths({
+      tracks: buildColumnTracks(visibleColumns),
+      hasSelection,
+      hasContextMenu: actionReservePx > 0,
+      contextMenuReservePx: actionReservePx,
+      availableWidth
+    }) : null,
+    [distributeWidths, availableWidth, visibleColumns, hasSelection, actionReservePx]
+  );
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationRef = useRef(null);
   const [paginationHeight, setPaginationHeight] = useState(0);
@@ -114,14 +147,10 @@ function Table({
   });
   const fillViewportActive = fillViewport && containScrolling;
   const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : stickyHeader === void 0 && containScrolling ? "0px" : void 0;
-  const setTableRootRef = useCallback((node) => {
-    internalTableRootRef.current = node;
-    if (typeof tableRootRefWrapper.current === "function") {
-      tableRootRefWrapper.current(node);
-    } else if (tableRootRefWrapper.current) {
-      tableRootRefWrapper.current.current = node;
-    }
-  }, []);
+  const setTableRootRef = useMemo(
+    () => mergeRefs(internalTableRootRef, tableRootRef),
+    [tableRootRef]
+  );
   const handlePageChange = useCallback(
     (e) => {
       onPageChange == null ? void 0 : onPageChange(e);
@@ -178,9 +207,10 @@ function Table({
     styles.tableRoot,
     styles[variant],
     styles[size],
-    measuringLayout && styles.measuringLayout,
+    (measuringLayout || distributeWidths && !distributedLayout) && styles.measuringLayout,
     getRowSeverity && styles.severityTable
   );
+  const resolvedTableWidth = tableWidth != null ? tableWidth : distributedLayout == null ? void 0 : distributedLayout.totalWidth;
   const tableElementClassName = cx(styles.tableElement, striped && "dbc-table--striped");
   const tableShell = /* @__PURE__ */ jsx("div", { ...rest, className: tableClassName, children: /* @__PURE__ */ jsx(
     "div",
@@ -194,17 +224,15 @@ function Table({
           className: tableElementClassName,
           "aria-rowcount": data.length,
           "data-show-header": showHeader,
-          style: tableWidth != null ? { width: tableWidth } : void 0,
+          style: resolvedTableWidth != null ? { width: resolvedTableWidth } : void 0,
           children: [
             /* @__PURE__ */ jsxs("colgroup", { children: [
               hasSelection ? /* @__PURE__ */ jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null,
-              visibleColumns.map((column) => /* @__PURE__ */ jsx(
-                "col",
-                {
-                  style: column.width != null ? { width: column.width } : void 0
-                },
-                column.id
-              ))
+              visibleColumns.map((column) => {
+                var _a2;
+                const width = (_a2 = distributedLayout == null ? void 0 : distributedLayout.widths[column.id]) != null ? _a2 : column.width;
+                return /* @__PURE__ */ jsx("col", { style: width != null ? { width } : void 0 }, column.id);
+              })
             ] }),
             showHeader && /* @__PURE__ */ jsx(
               TableHeader,
@@ -212,7 +240,7 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
-                hasRowContextMenu: Boolean(getContextMenuItems) || expandableRows,
+                hasRowContextMenu: hasRowActions,
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,
@@ -220,6 +248,7 @@ function Table({
                 onSortChange,
                 headerExtras,
                 headerActions,
+                compactHeaderActionReserve,
                 stickyTop
               }
             ),

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

@@ -379,6 +379,10 @@
   padding-inline-end: var(--table-row-actions-reserve-inline);
 }
 
+.thMainWithHeaderActionsReserve {
+  padding-inline-end: calc(var(--component-size-sm) - var(--spacing-sm) + var(--spacing-2xs));
+}
+
 .thMainRight {
   justify-content: flex-end;
 }

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

@@ -6,7 +6,22 @@ export interface ColumnItem<T> {
     id: string;
     header: string | (() => ReactNode);
     accessor?: keyof T;
+    /**
+     * Column width. When any column sets `minWidth`, `maxWidth` or `weight`,
+     * a numeric width pins the column to exactly that many pixels.
+     */
     width?: number | string;
+    /**
+     * Smallest width in pixels. Setting `minWidth`, `maxWidth` or `weight` on any
+     * column makes the table measure its container and distribute the width:
+     * each column starts at its minimum (default 80) and grows by `weight`
+     * towards `maxWidth`. Columns whose minimums don't fit scroll horizontally.
+     */
+    minWidth?: number;
+    /** Largest width in pixels. See `minWidth`. */
+    maxWidth?: number;
+    /** Relative share of the leftover width (default 1). See `minWidth`. */
+    weight?: number;
     sortable?: boolean;
     sortFunction?: (a: T, b: T) => -1 | 0 | 1;
     render?: (item: T) => ReactNode;
@@ -85,6 +100,12 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     emptyConfig?: any;
     variant?: TableVariant;
     size?: 'sm' | 'md';
+    /**
+     * `'wrapped'` (default) wraps cell text so all content is visible.
+     * `'compact'` keeps each row on one line with truncated text, for even row
+     * heights; rows can then be expanded with `expandableRows`.
+     * Overrides the view mode from `settings`.
+     */
     viewMode?: ViewMode;
     striped?: boolean;
     fillViewport?: boolean;
@@ -106,6 +127,12 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
      * actions column. Falls back to the toolbar when `showHeader` is false.
      */
     headerActions?: ReactNode;
+    /**
+     * Columns listed in the settings menu. Defaults to `columns`; pass the
+     * original definitions when `columns` is derived from them with `hidden`
+     * already applied (as TanstackTable does).
+     */
+    settingsColumns?: ReadonlyArray<ColumnItem<T> | TableSettingsColumn>;
     /**
      * Shows a settings menu (stripes, text wrapping, column visibility) in the
      * header and applies its state to the table. Pass the result of

package/dist/components/table/TanstackTable.cjs

@@ -4,14 +4,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactTable = require('@tanstack/react-table');
 var React = require('react');
-var ColumnResizer = require('./components/column-resizer/ColumnResizer');
-var TableHeaderSettings = require('./components/table-settings/TableHeaderSettings');
+var useClientPagination = require('./hooks/useClientPagination');
+var useDistributedLayout = require('./hooks/useDistributedLayout');
+var useElementWidth = require('./hooks/useElementWidth');
+var useResizeHeaderExtras = require('./hooks/useResizeHeaderExtras');
+var useUiSorting = require('./hooks/useUiSorting');
 var Table = require('./Table');
 var table_utils = require('./table.utils');
 var tanstackTable_utils = require('./tanstackTable.utils');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -31,9 +32,9 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ColumnResizer__default = /*#__PURE__*/_interopDefault(ColumnResizer);
 
 function TanstackTable(props) {
+  var _a, _b;
   const {
     data,
     dataKey,
@@ -43,6 +44,11 @@ function TanstackTable(props) {
     optimisticSortingUi = true,
     visibleColumnIds: visibleColumnIdsProp,
     manualSorting,
+    clientPagination = false,
+    take: takeProp,
+    skip: skipProp,
+    totalItemsCount: totalItemsCountProp,
+    onPageChange,
     viewMode,
     striped,
     settings,
@@ -53,37 +59,50 @@ function TanstackTable(props) {
     ...tableProps
   } = props;
   const visibleColumnIds = visibleColumnIdsProp != null ? visibleColumnIdsProp : settings == null ? void 0 : settings.visibleColumnIds;
-  const isControlledSorting = controlledSorting != null;
-  const [uiSorting, setUiSorting] = React__namespace.useState(controlledSorting != null ? controlledSorting : []);
-  React__namespace.useEffect(() => {
-    if (!isControlledSorting) return;
-    if (tanstackTable_utils.sortingEqual(uiSorting, controlledSorting)) return;
-    setUiSorting(controlledSorting);
-  }, [isControlledSorting, controlledSorting, uiSorting]);
+  const [uiSorting, setUiSorting] = useUiSorting.useUiSorting(controlledSorting);
+  const pagination = useClientPagination.useClientPagination({
+    enabled: clientPagination,
+    rowCount: data.length,
+    take: takeProp,
+    skip: skipProp,
+    totalItemsCount: totalItemsCountProp,
+    onPageChange
+  });
+  const { resetPage } = pagination;
   const columnVisibility = React__namespace.useMemo(
     () => tanstackTable_utils.buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
     [columns, visibleColumnIds]
   );
   const [columnSizing, setColumnSizing] = React__namespace.useState({});
+  const neighborResizeRef = React__namespace.useRef(null);
   const containerRef = React__namespace.useRef(null);
-  const [availableWidth, setAvailableWidth] = React__namespace.useState(void 0);
+  const availableWidth = useElementWidth.useElementWidth(containerRef);
   const table = reactTable.useReactTable({
     data,
     columns,
     state: {
       sorting: uiSorting,
       columnSizing,
-      columnVisibility
+      columnVisibility,
+      ...pagination.paginationState ? { pagination: pagination.paginationState } : {}
     },
     onSortingChange: (updater) => {
       const next = typeof updater === "function" ? updater(uiSorting) : updater;
       if (optimisticSortingUi) setUiSorting(next);
+      resetPage();
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
-    onColumnSizingChange: setColumnSizing,
+    onColumnSizingChange: (updater) => {
+      setColumnSizing((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        const resize = neighborResizeRef.current;
+        return resize && table.getState().columnSizingInfo.isResizingColumn === resize.columnId ? tanstackTable_utils.applyNeighborResize(next, resize) : next;
+      });
+    },
     getCoreRowModel: reactTable.getCoreRowModel(),
     getSortedRowModel: reactTable.getSortedRowModel(),
     manualSorting: manualSorting != null ? manualSorting : false,
+    ...pagination.tableOptions,
     enableColumnResizing: true,
     columnResizeMode: "onChange",
     defaultColumn: {
@@ -92,116 +111,54 @@ function TanstackTable(props) {
       size: table_utils.DEFAULT_COLUMN_PX
     }
   });
-  React__namespace.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((entries) => {
-      var _a, _b, _c;
-      const entry = entries[0];
-      if (!entry) {
-        updateWidth();
-        return;
-      }
-      const contentWidth = (_c = (_b = (_a = entry.contentBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.inlineSize) != null ? _c : entry.contentRect.width;
-      const next = Math.floor(contentWidth);
-      setAvailableWidth(next > 0 ? next : void 0);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  const distributedLayout = React__namespace.useMemo(() => {
-    if (availableWidth == null) return null;
-    return tanstackTable_utils.buildDistributedColumnWidths({
-      table,
-      hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
-      // Row actions (context menu, expand toggle) and header actions (e.g. the
-      // settings menu) all reserve space at the end of the last column.
-      hasContextMenu: Boolean(
-        tableProps.getContextMenuItems || tableProps.expandableRows || settings || headerActionsProp != null
-      ),
-      defaultMinPx: 80,
-      columnSizing,
-      availableWidth
-    });
-  }, [
+  const resolvedViewMode = (_a = viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode) != null ? _a : table_utils.DEFAULT_VIEW_MODE;
+  const { px: actionReservePx } = table_utils.getActionsReserve({
+    hasRowActions: Boolean(tableProps.getContextMenuItems) || table_utils.showsExpandToggle(tableProps.expandableRows, resolvedViewMode),
+    hasSettings: Boolean(settings),
+    hasOtherHeaderActions: headerActionsProp != null,
+    showHeader: (_b = tableProps.showHeader) != null ? _b : true
+  });
+  const { distributedLayout, columnItems } = useDistributedLayout.useDistributedLayout({
     table,
-    selectedRows,
-    onRowSelect,
-    dataKey,
-    tableProps.getContextMenuItems,
-    tableProps.expandableRows,
-    settings,
-    headerActionsProp,
+    columns,
+    columnVisibility,
     columnSizing,
-    availableWidth
-  ]);
+    availableWidth,
+    hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+    actionReservePx
+  });
   const initialLayoutReady = availableWidth != null;
-  const resolvedLayout = React__namespace.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__namespace.useMemo(
-    () => tanstackTable_utils.mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
-    [columns, columnVisibility, resolvedLayout]
-  );
   const visibleData = table.getRowModel().rows.map((r) => r.original);
   const { sortById, sortDirection } = tanstackTable_utils.getSortPropsFromSorting(uiSorting);
   const handleSortChange = React__namespace.useCallback(
     (column, direction) => {
       const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
       if (optimisticSortingUi) setUiSorting(next);
+      resetPage();
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
-    [optimisticSortingUi, onSortingChange]
+    [optimisticSortingUi, setUiSorting, resetPage, onSortingChange]
   );
-  const headerExtras = React__namespace.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__ */ jsxRuntime.jsx(ColumnResizer__default.default, { id: header.column.id, handler });
-    },
-    [table]
-  );
-  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    headerActionsProp,
-    settings ? /* @__PURE__ */ jsxRuntime.jsx(
-      TableHeaderSettings.TableHeaderSettings,
-      {
-        settings,
-        options: settingsOptions,
-        columns
-      }
-    ) : null
-  ] }) : void 0;
+  const headerExtras = useResizeHeaderExtras.useResizeHeaderExtras({
+    table,
+    widths: distributedLayout == null ? void 0 : distributedLayout.widths,
+    actionReservePx,
+    neighborResizeRef,
+    setColumnSizing
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Table.Table,
     {
       ...tableProps,
-      viewMode: viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode,
+      viewMode: resolvedViewMode,
       striped: striped != null ? striped : settings == null ? void 0 : settings.striped,
-      headerActions,
+      headerActions: headerActionsProp,
+      settings,
+      settingsOptions,
+      settingsColumns: columns,
       tableRootRef: containerRef,
       onSortChange: handleSortChange,
+      ...pagination.tableProps,
       dataKey,
       data: visibleData,
       columns: columnItems,

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

@@ -6,6 +6,11 @@ export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<
     columns: ReadonlyArray<ColumnDef<T, any>>;
     sorting?: SortingState;
     manualSorting?: boolean;
+    /**
+     * Sorts all rows and then shows one page of `take` rows, starting at `skip`.
+     * Leave off when `data` is already a single page fetched from a server.
+     */
+    clientPagination?: boolean;
     onSortingChange?: (next: SortingState) => void;
     optimisticSortingUi?: boolean;
     variant?: TableVariant;