@dbcdk/react-components 0.0.36 → 0.0.37

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

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, tableWidth, tableRootRef, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -9,7 +9,7 @@ import { TableLoadingBody } from './components/TableLoadingBody';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
 import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
-export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, tableWidth, tableRootRef, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
+export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, tableWidth, tableRootRef, measuringLayout = false, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
     const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
     const selectionInputName = useId();
     const hasSelection = Boolean(selectedRows && onRowSelect);
@@ -18,7 +18,7 @@ export function Table({ data, dataKey, columns, selectedRows, selectionMode = 's
     }, [onPageChange]);
     const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
     const paginationEl = onPageChange && data.length > 0 ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
-    const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], getRowSeverity && styles.severityTable);
+    const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], measuringLayout && styles.measuringLayout, getRowSeverity && styles.severityTable);
     const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: tableRootRef, className: styles.tableScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
     if (fillViewport) {
         return (_jsxs("div", { className: styles.fillViewportRoot, style: {

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

@@ -55,6 +55,10 @@
   max-inline-size: 100%;
 }
 
+.measuringLayout {
+  visibility: hidden;
+}
+
 .tableScroll {
   flex: 1 1 auto;
   min-block-size: 0;
@@ -157,7 +161,7 @@
 
 .headerCell.selectionCell,
 .cell.selectionCell {
-  padding-inline: calc(var(--spacing-xxs) + 2px) var(--spacing-sm);
+  padding-inline: calc(var(--spacing-xxs) + 6px) var(--spacing-sm);
   cursor: pointer;
   overflow: visible;
   line-height: 0;
@@ -208,7 +212,7 @@
   cursor: pointer;
 }
 
-.clickableRow:hover > .cell {
+.row:hover > .cell {
   background-color: var(--table-row-bg-hover);
 }
 

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

@@ -7,7 +7,6 @@ export interface ColumnItem<T> {
     header: string | (() => ReactNode);
     accessor?: keyof T;
     width?: number | string;
-    fitContent?: boolean;
     sortable?: boolean;
     sortFunction?: (a: T, b: T) => -1 | 0 | 1;
     render?: (item: T) => ReactNode;
@@ -44,6 +43,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     fillViewport?: boolean;
     tableWidth?: number;
     tableRootRef?: Ref<HTMLDivElement>;
+    measuringLayout?: boolean;
     toolbar?: ReactNode;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     take?: number;

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

@@ -2,10 +2,8 @@ import { type ColumnDef, type SortingState } from '@tanstack/react-table';
 import * as React from 'react';
 import { TableProps, TableVariant } from './Table.types';
 import { ViewMode } from '../../hooks/useTableSettings';
-type Filterable<T> = Array<keyof T>;
-export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerExtras' | 'gridTemplateColumns' | 'toolbar'> & {
+export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerExtras' | 'toolbar'> & {
     columns: ReadonlyArray<ColumnDef<T, any>>;
-    filterable?: Filterable<T>;
     sorting?: SortingState;
     manualSorting?: boolean;
     onSortingChange?: (next: SortingState) => void;
@@ -15,4 +13,3 @@ export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<
     visibleColumnIds?: string[];
 };
 export declare function TanstackTable<T extends Record<string, any>>(props: TanstackTableProps<T>): React.ReactNode;
-export {};

package/dist/components/table/TanstackTable.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, } from '@tanstack/react-table';
+import { useReactTable, getCoreRowModel, getSortedRowModel, } from '@tanstack/react-table';
 import * as React from 'react';
 import ColumnResizer from './components/column-resizer/ColumnResizer';
 import { Table } from './Table';
@@ -18,17 +18,14 @@ export function TanstackTable(props) {
         setUiSorting(controlledSorting);
     }, [isControlledSorting, controlledSorting, uiSorting]);
     const columnVisibility = React.useMemo(() => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds), [columns, visibleColumnIds]);
-    const [columnFilters, setColumnFilters] = React.useState([]);
     const [columnSizing, setColumnSizing] = React.useState({});
     const containerRef = React.useRef(null);
     const [availableWidth, setAvailableWidth] = React.useState(undefined);
-    const [measuredFitContentWidths, setMeasuredFitContentWidths] = React.useState({});
     const table = useReactTable({
         data,
         columns: columns,
         state: {
             sorting: uiSorting,
-            columnFilters,
             columnSizing,
             columnVisibility,
         },
@@ -38,11 +35,9 @@ export function TanstackTable(props) {
                 setUiSorting(next);
             onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
         },
-        onColumnFiltersChange: setColumnFilters,
         onColumnSizingChange: setColumnSizing,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
         manualSorting: manualSorting !== null && manualSorting !== void 0 ? manualSorting : false,
         enableColumnResizing: true,
         columnResizeMode: 'onChange',
@@ -69,31 +64,6 @@ export function TanstackTable(props) {
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    React.useLayoutEffect(() => {
-        const root = containerRef.current;
-        if (!root)
-            return;
-        const next = {};
-        const nodes = root.querySelectorAll('[data-fit-content-column="true"][data-column-id]');
-        nodes.forEach(node => {
-            var _a;
-            const id = node.dataset.columnId;
-            if (!id)
-                return;
-            const width = Math.ceil(node.scrollWidth);
-            if (width <= 0)
-                return;
-            next[id] = Math.max((_a = next[id]) !== null && _a !== void 0 ? _a : 0, width);
-        });
-        setMeasuredFitContentWidths(prev => {
-            const prevKeys = Object.keys(prev);
-            const nextKeys = Object.keys(next);
-            if (prevKeys.length === nextKeys.length && nextKeys.every(key => prev[key] === next[key])) {
-                return prev;
-            }
-            return next;
-        });
-    }, [data, columns, columnVisibility, props.loading, uiSorting]);
     const distributedLayout = React.useMemo(() => {
         if (availableWidth == null)
             return null;
@@ -103,17 +73,9 @@ export function TanstackTable(props) {
             defaultMinPx: 80,
             columnSizing,
             availableWidth,
-            measuredFitContentWidths,
         });
-    }, [
-        table,
-        selectedRows,
-        onRowSelect,
-        dataKey,
-        columnSizing,
-        availableWidth,
-        measuredFitContentWidths,
-    ]);
+    }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+    const initialLayoutReady = availableWidth != null;
     const resolvedLayout = React.useMemo(() => {
         const next = {};
         table.getVisibleLeafColumns().forEach((column) => {
@@ -145,5 +107,5 @@ export function TanstackTable(props) {
             return null;
         return _jsx(ColumnResizer, { id: header.column.id, handler: handler });
     }, [table]);
-    return (_jsx(Table, { ...tableProps, tableRootRef: containerRef, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, tableWidth: distributedLayout === null || distributedLayout === void 0 ? void 0 : distributedLayout.totalWidth, sortById: sortById, sortDirection: sortDirection, headerExtras: headerExtras, selectedRows: selectedRows, onRowSelect: onRowSelect }));
+    return (_jsx(Table, { ...tableProps, tableRootRef: containerRef, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, tableWidth: distributedLayout === null || distributedLayout === void 0 ? void 0 : distributedLayout.totalWidth, measuringLayout: !initialLayoutReady, sortById: sortById, sortDirection: sortDirection, headerExtras: headerExtras, selectedRows: selectedRows, onRowSelect: onRowSelect }));
 }

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

@@ -15,7 +15,7 @@ export function TableHeaderCell({ column, index, sortById, sortDirection, onSort
         const nextDirection = getNextSortDirection(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
         onSortChange(column, nextDirection);
     };
-    return (_jsxs("th", { className: cx(styles.headerCell, dividerClass), scope: "col", "aria-sort": ariaSort, "data-align": align, "data-divider": column.divider, "data-column-index": index, "data-column-id": column.id, "data-fit-content-column": column.fitContent || undefined, children: [_jsx("div", { className: alignClasses.inner, children: _jsx("div", { className: alignClasses.main, children: column.sortable ? (_jsxs("button", { type: "button", className: alignClasses.button, onClick: handleToggleSort, onKeyDown: e => {
+    return (_jsxs("th", { className: cx(styles.headerCell, dividerClass), scope: "col", "aria-sort": ariaSort, "data-align": align, "data-divider": column.divider, "data-column-index": index, children: [_jsx("div", { className: alignClasses.inner, children: _jsx("div", { className: alignClasses.main, children: column.sortable ? (_jsxs("button", { type: "button", className: alignClasses.button, onClick: handleToggleSort, onKeyDown: e => {
                             if (!shouldToggleOnKey(e.key))
                                 return;
                             e.preventDefault();

package/dist/components/table/components/TableRow.js

@@ -46,10 +46,8 @@ export function TableRow({ row, rowId, columns, selectedRows, hasSelection, sele
                                 onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
                             } })) }) }) })) : null, columns.map(column => {
                 var _a;
-                const allowWrap = column.fitContent
-                    ? false
-                    : shouldAllowWrap(column.allowWrap, isSelected, viewMode);
+                const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
                 const cellValue = getCellDisplayValue(row, column);
-                return (_jsx("td", { className: cx(styles.cell, allowWrap ? styles.allowWrap : styles.nowrap, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, "data-column-id": column.id, "data-fit-content-column": column.fitContent || undefined, children: _jsx("div", { className: styles.cellContent, children: allowWrap ? cellValue : _jsx("div", { className: styles.cellValueEllipsis, children: cellValue }) }) }, column.id));
+                return (_jsx("td", { className: cx(styles.cell, allowWrap ? styles.allowWrap : styles.nowrap, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, children: allowWrap ? cellValue : _jsx("div", { className: styles.cellValueEllipsis, children: cellValue }) }) }, column.id));
             })] }));
 }

package/dist/components/table/tanstackTable.utils.d.ts

@@ -17,7 +17,6 @@ export declare function buildDistributedColumnWidths(args: {
     defaultMinPx: number;
     columnSizing: ColumnSizingState;
     availableWidth: number;
-    measuredFitContentWidths?: Record<string, number>;
 }): {
     selectionWidth?: number;
     widths: Record<string, number>;

package/dist/components/table/tanstackTable.utils.js

@@ -20,7 +20,7 @@ export function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
 }
 export function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
     return defs.map((def, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g;
         const id = getColumnId(def, index);
         const accessorKey = def.accessorKey;
         const accessorFn = def.accessorFn;
@@ -55,11 +55,10 @@ export function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}
             render,
             hidden: !isVisible,
             width: (_e = resolvedLayout[id]) === null || _e === void 0 ? void 0 : _e.width,
-            fitContent: (_f = meta.fitContent) !== null && _f !== void 0 ? _f : false,
             align: meta.align,
             verticalAlign: meta.verticalAlign,
-            emptyPlaceholder: (_g = meta.emptyPlaceholder) !== null && _g !== void 0 ? _g : '-',
-            allowWrap: (_h = meta.allowWrap) !== null && _h !== void 0 ? _h : false,
+            emptyPlaceholder: (_f = meta.emptyPlaceholder) !== null && _f !== void 0 ? _f : '-',
+            allowWrap: (_g = meta.allowWrap) !== null && _g !== void 0 ? _g : false,
             severity: meta.severity,
             divider: meta.divider,
         };
@@ -107,11 +106,11 @@ function toIntegerTrackWidths(tracks, targetWidth) {
     return Object.fromEntries(floored.map(track => [track.id, track.width]));
 }
 export function buildDistributedColumnWidths(args) {
-    const { table, hasSelection, defaultMinPx, columnSizing, availableWidth, measuredFitContentWidths = {}, } = args;
+    const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
     const leaf = table.getVisibleLeafColumns();
     const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
     const tracks = leaf.map((c) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e;
         const def = c.columnDef;
         const meta = ((_b = ((_a = def.meta) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : {});
         const min = Math.max(1, Number((_c = def.minSize) !== null && _c !== void 0 ? _c : defaultMinPx));
@@ -127,19 +126,7 @@ export function buildDistributedColumnWidths(args) {
                 fixed: true,
             };
         }
-        if (meta.fitContent) {
-            const preferredRaw = Number((_g = (_f = (_e = (_d = measuredFitContentWidths[c.id]) !== null && _d !== void 0 ? _d : def.size) !== null && _e !== void 0 ? _e : def.maxSize) !== null && _f !== void 0 ? _f : def.minSize) !== null && _g !== void 0 ? _g : defaultMinPx);
-            const preferred = Number.isFinite(preferredRaw) && preferredRaw > 0 ? preferredRaw : defaultMinPx;
-            const fitWidth = Math.round(clamp(preferred, min, max));
-            return {
-                id: c.id,
-                width: fitWidth,
-                weight: 0,
-                max: fitWidth,
-                fixed: true,
-            };
-        }
-        const rawWeight = Number((_j = (_h = meta.weight) !== null && _h !== void 0 ? _h : def.size) !== null && _j !== void 0 ? _j : DEFAULT_COLUMN_PX);
+        const rawWeight = Number((_e = (_d = meta.weight) !== null && _d !== void 0 ? _d : def.size) !== null && _e !== void 0 ? _e : DEFAULT_COLUMN_PX);
         const weight = Number.isFinite(rawWeight) && rawWeight > 0 ? rawWeight : DEFAULT_COLUMN_PX;
         return {
             id: c.id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -56,7 +56,7 @@
     "changeset": "changeset",
     "version-packages": "changeset version",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "pack-it": "npm run build && npm pack",
+    "pack-it": "rimraf ./*.tgz && npm run build && npm pack",
     "postbuild": "cpy \"src/**/*.css\" dist --parents && cpy \"src/styles/styles.css\" dist && cpy \"src/styles/fonts/**/*\" dist/styles/fonts",
     "yalc:publish": "npm run build && yalc publish --push",
     "yalc:push": "npm run build && yalc push --scripts --changed",