@dbcdk/react-components 0.0.34 → 0.0.35

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

@@ -1,4 +1,3 @@
-import type { CSSProperties } from 'react';
 import React from 'react';
 import type { ViewMode } from '../../../hooks/useTableSettings';
 import type { ColumnItem } from '../Table.types';
@@ -6,7 +5,6 @@ type Props<T extends Record<string, any>> = {
     row: T;
     rowId: string | number;
     columns: ColumnItem<T>[];
-    gridStyle: CSSProperties;
     selectedRows?: Set<number | string>;
     hasSelection: boolean;
     selectionMode: 'single' | 'multiple';
@@ -17,5 +15,5 @@ type Props<T extends Record<string, any>> = {
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, gridStyle, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
+export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
 export {};

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

@@ -6,7 +6,7 @@ import { useTableRowInteractions } from '../hooks/useTableRowInteractions';
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
 import { getCellDisplayValue, shouldAllowWrap } from '../table.utils';
-export function TableRow({ row, rowId, columns, gridStyle, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
+export function TableRow({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
     var _a;
     const isSelected = (_a = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId)) !== null && _a !== void 0 ? _a : false;
     const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
@@ -19,12 +19,11 @@ export function TableRow({ row, rowId, columns, gridStyle, selectedRows, hasSele
         onRowClick,
         onRowSelect,
     });
-    return (_jsxs("div", { className: cx(styles.row, onRowClick && styles.clickableRow, isSelected && styles.selectedRow, rowSeverity && styles.severity), style: {
-            ...gridStyle,
+    return (_jsxs("tr", { className: cx(styles.row, onRowClick && styles.clickableRow, isSelected && styles.selectedRow, rowSeverity && styles.severity), style: {
             ['--row-severity-color']: rowSeverity
                 ? SeverityBgColor[rowSeverity]
                 : undefined,
-        }, role: "row", tabIndex: onRowClick ? 0 : -1, onKeyDown: handleRowKeyDown, onMouseEnter: () => onRowMouseEnter === null || onRowMouseEnter === void 0 ? void 0 : onRowMouseEnter(row), onClick: handleRowClick, children: [hasSelection ? (_jsx("div", { className: cx(styles.cell, styles.selectionCell), role: "cell", "data-selection-control": "true", children: _jsx("div", { className: styles.selectionHitArea, "data-selection-control": "true", onClick: e => {
+        }, tabIndex: onRowClick ? 0 : -1, onKeyDown: handleRowKeyDown, onMouseEnter: () => onRowMouseEnter === null || onRowMouseEnter === void 0 ? void 0 : onRowMouseEnter(row), onClick: handleRowClick, children: [hasSelection ? (_jsx("td", { className: cx(styles.cell, styles.selectionCell), "data-selection-control": "true", children: _jsx("div", { className: styles.selectionHitArea, "data-selection-control": "true", onClick: e => {
                         if (e.target !== e.currentTarget)
                             return;
                         e.stopPropagation();
@@ -42,13 +41,13 @@ export function TableRow({ row, rowId, columns, gridStyle, selectedRows, hasSele
                         }, children: selectionMode === 'single' ? (_jsx(RadioButton, { noContainer: true, name: selectionInputName, value: String(rowId), checked: isSelected, size: "sm", variant: "primary", onChange: (_value, e) => {
                                 e.stopPropagation();
                                 onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, true);
-                            } })) : (_jsx(Checkbox, { variant: "primary", checked: isSelected, size: "sm", onChange: (checked, e) => {
+                            } })) : (_jsx(Checkbox, { noContainer: true, variant: "primary", checked: isSelected, size: "sm", onChange: (checked, e) => {
                                 e.stopPropagation();
                                 onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
                             } })) }) }) })) : null, columns.map(column => {
                 var _a;
                 const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
                 const cellValue = getCellDisplayValue(row, column);
-                return (_jsx("div", { className: cx(styles.cell, allowWrap ? styles.allowWrap : styles.nowrap, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), role: "cell", "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));
+                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/components/TableSelectionCell.js

@@ -3,12 +3,13 @@ import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
 export function TableSelectionCell({ checked, isHeader, multiple, onToggle }) {
-    return (_jsx("div", { className: cx(styles.headerCell, styles.selectionCell), role: isHeader ? 'columnheader' : 'cell', onClick: e => {
+    const Tag = isHeader ? 'th' : 'td';
+    return (_jsx(Tag, { className: cx(styles.headerCell, styles.selectionCell), scope: isHeader ? 'col' : undefined, onClick: e => {
             if (isHeader && !multiple)
                 return;
             e.stopPropagation();
             onToggle(!checked, e);
-        }, children: isHeader && !multiple ? null : (_jsx("div", { className: styles.selectionHitArea, children: _jsx(Checkbox, { size: "sm", variant: "primary", checked: checked, onChange: (nextChecked, e) => {
+        }, children: isHeader && !multiple ? null : (_jsx("div", { className: styles.selectionHitArea, children: _jsx(Checkbox, { noContainer: true, size: "sm", variant: "primary", checked: checked, onChange: (nextChecked, e) => {
                     e.stopPropagation();
                     onToggle(nextChecked, e);
                 } }) })) }));

package/dist/components/table/components/column-resizer/ColumnResizer.module.css

@@ -1,9 +1,9 @@
 .resizer {
   position: absolute;
-  right: -6px; /* extend hit area into both columns */
+  right: 0;
   top: 0;
   height: 100%;
-  width: 12px; /* big invisible hit area */
+  width: 10px;
   cursor: col-resize;
   user-select: none;
   touch-action: none;
@@ -13,11 +13,10 @@
 .resizer::after {
   content: '';
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+  right: 0;
   width: 1px; /* visual thickness */
   height: 60%;
   top: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
   background-color: var(--opac-bg-default);
 }

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

@@ -15,7 +15,3 @@ export declare function isModifierClick(e: {
 }): boolean;
 export declare function shouldAllowWrap(columnAllowWrap: boolean | undefined, isRowSelected: boolean, viewMode?: 'wrapped' | string): boolean;
 export declare function getCellDisplayValue<T extends Record<string, any>>(row: T, column: ColumnItem<T>): ReactNode;
-export declare function buildDefaultGridTemplate(args: {
-    hasSelection: boolean;
-    colCount: number;
-}): string;

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

@@ -45,11 +45,3 @@ export function getCellDisplayValue(row, column) {
     }
     return empty;
 }
-export function buildDefaultGridTemplate(args) {
-    const parts = [];
-    if (args.hasSelection)
-        parts.push(`${SELECTION_COLUMN_PX}px`);
-    for (let i = 0; i < args.colCount; i++)
-        parts.push('minmax(120px, 1fr)');
-    return parts.join(' ');
-}

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

@@ -3,19 +3,23 @@ import { ColumnItem } from './Table.types';
 type AnyRecord = Record<string, any>;
 export declare function getColumnId<T>(def: ColumnDef<T, any>, index: number): string;
 export declare function buildColumnVisibilityFromVisibleIds<T>(defs: ReadonlyArray<ColumnDef<T, any>>, visibleColumnIds?: string[]): VisibilityState;
-export declare function mapDefsToColumnItems<T extends AnyRecord>(defs: ReadonlyArray<ColumnDef<T, any>>, columnVisibility: VisibilityState): ColumnItem<T>[];
+export declare function mapDefsToColumnItems<T extends AnyRecord>(defs: ReadonlyArray<ColumnDef<T, any>>, columnVisibility: VisibilityState, resolvedLayout?: Record<string, {
+    width?: number | string;
+}>): ColumnItem<T>[];
 export declare function sortingEqual(a: SortingState, b: SortingState): boolean;
 export declare function getSortPropsFromSorting(sorting: SortingState): {
     sortById?: string;
     sortDirection: 'asc' | 'desc' | null;
 };
-export declare function columnItemsToIdSet<T>(items: Array<ColumnItem<T>>): Set<string>;
-export declare function buildDistributedGridTemplateColumns(args: {
+export declare function buildDistributedColumnWidths(args: {
     table: any;
-    allowedIds: Set<string>;
     hasSelection: boolean;
     defaultMinPx: number;
     columnSizing: ColumnSizingState;
-    availableWidth?: number;
-}): string;
+    availableWidth: number;
+}): {
+    selectionWidth?: number;
+    widths: Record<string, number>;
+    totalWidth: number;
+};
 export {};

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

@@ -1,4 +1,4 @@
-import { SELECTION_COLUMN_PX } from './table.utils';
+import { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
 export function getColumnId(def, index) {
     const d = def;
     if (d.id != null && String(d.id).length > 0)
@@ -18,9 +18,9 @@ export function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
     });
     return next;
 }
-export function mapDefsToColumnItems(defs, columnVisibility) {
+export function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
     return defs.map((def, index) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         const id = getColumnId(def, index);
         const accessorKey = def.accessorKey;
         const accessorFn = def.accessorFn;
@@ -54,10 +54,11 @@ export function mapDefsToColumnItems(defs, columnVisibility) {
             sortable: (_d = def.enableSorting) !== null && _d !== void 0 ? _d : !!accessorKey,
             render,
             hidden: !isVisible,
+            width: (_e = resolvedLayout[id]) === null || _e === void 0 ? void 0 : _e.width,
             align: meta.align,
             verticalAlign: meta.verticalAlign,
-            emptyPlaceholder: (_e = meta.emptyPlaceholder) !== null && _e !== void 0 ? _e : '-',
-            allowWrap: (_f = meta.allowWrap) !== null && _f !== void 0 ? _f : 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,
         };
@@ -79,100 +80,95 @@ export function getSortPropsFromSorting(sorting) {
         sortDirection: s ? (s.desc ? 'desc' : 'asc') : null,
     };
 }
-export function columnItemsToIdSet(items) {
-    const s = new Set();
-    for (const c of items)
-        s.add(c.id);
-    return s;
-}
 function clamp(value, min, max) {
     const lowerBounded = Math.max(min, value);
     if (max == null || !Number.isFinite(max))
         return lowerBounded;
     return Math.min(lowerBounded, max);
 }
-export function buildDistributedGridTemplateColumns(args) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const { table, allowedIds, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
-    const parts = [];
-    const leaf = table.getVisibleLeafColumns().filter((c) => allowedIds.has(c.id));
-    const fixedSelectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
-    const flexTracks = [];
-    let fixedWidth = fixedSelectionWidth;
-    if (hasSelection)
-        parts.push(`${SELECTION_COLUMN_PX}px`);
-    for (const c of leaf) {
+function toIntegerTrackWidths(tracks, targetWidth) {
+    const floored = tracks.map(track => ({
+        id: track.id,
+        width: Math.floor(track.width),
+        fraction: track.width - Math.floor(track.width),
+    }));
+    const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
+    let remainder = Math.max(0, targetWidth - baseTotal);
+    floored
+        .slice()
+        .sort((a, b) => b.fraction - a.fraction)
+        .forEach(track => {
+        if (remainder <= 0)
+            return;
+        track.width += 1;
+        remainder -= 1;
+    });
+    return Object.fromEntries(floored.map(track => [track.id, track.width]));
+}
+export function buildDistributedColumnWidths(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;
         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));
-        const preferred = Math.max(min, Number((_f = (_d = def.size) !== null && _d !== void 0 ? _d : (_e = c.getSize) === null || _e === void 0 ? void 0 : _e.call(c)) !== null && _f !== void 0 ? _f : defaultMinPx));
-        const hasMax = def.maxSize != null;
-        const max = hasMax ? Math.max(min, Number(def.maxSize)) : undefined;
-        const weight = Math.max(1, Number((_g = meta.weight) !== null && _g !== void 0 ? _g : 1));
+        const max = def.maxSize != null ? Math.max(min, Number(def.maxSize)) : undefined;
         const resizedPxRaw = columnSizing[c.id];
         const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : undefined;
         if (resizedPx != null) {
-            parts.push(`${resizedPx}px`);
-            fixedWidth += resizedPx;
-            continue;
+            return {
+                id: c.id,
+                width: resizedPx,
+                weight: 0,
+                max: resizedPx,
+                fixed: true,
+            };
         }
-        if (hasMax && max === min) {
-            parts.push(`${Math.round(min)}px`);
-            fixedWidth += Math.round(min);
-            continue;
-        }
-        flexTracks.push({
-            width: hasMax && max != null ? clamp(preferred, min, max) : preferred,
+        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,
+            width: min,
             weight,
             max,
-        });
-        parts.push('__FLEX__');
-    }
-    if (availableWidth != null && Number.isFinite(availableWidth) && availableWidth > 0) {
-        const totalBaseWidth = fixedWidth + flexTracks.reduce((sum, track) => sum + track.width, 0);
-        let remaining = Math.max(0, availableWidth - totalBaseWidth);
-        let active = flexTracks.filter(track => track.max == null || track.width < track.max);
-        while (remaining > 0.5 && active.length > 0) {
-            const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
-            if (totalWeight <= 0)
-                break;
-            let consumed = 0;
-            const nextActive = [];
-            for (const track of active) {
-                const share = (remaining * track.weight) / totalWeight;
-                const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
-                const growth = Math.min(share, maxGrow);
-                track.width += growth;
-                consumed += growth;
-                if (track.max == null || track.width < track.max - 0.5) {
-                    nextActive.push(track);
-                }
+            fixed: false,
+        };
+    });
+    const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+    let remaining = Math.max(0, availableWidth - fixedWidth);
+    let active = tracks.filter(track => !track.fixed && (track.max == null || track.width < track.max));
+    while (remaining > 0.5 && active.length > 0) {
+        const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
+        if (totalWeight <= 0)
+            break;
+        let consumed = 0;
+        const nextActive = [];
+        for (const track of active) {
+            const share = (remaining * track.weight) / totalWeight;
+            const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
+            const growth = Math.min(share, maxGrow);
+            track.width += growth;
+            consumed += growth;
+            if (track.max == null || track.width < track.max - 0.5) {
+                nextActive.push(track);
             }
-            if (consumed <= 0.5)
-                break;
-            remaining -= consumed;
-            active = nextActive;
         }
-        let flexIndex = 0;
-        return parts
-            .map(part => {
-            if (part !== '__FLEX__')
-                return part;
-            const track = flexTracks[flexIndex++];
-            return `${Math.round(track.width)}px`;
-        })
-            .join(' ');
+        if (consumed <= 0.5)
+            break;
+        remaining -= consumed;
+        active = nextActive;
     }
-    let flexIndex = 0;
-    return parts
-        .map(part => {
-        if (part !== '__FLEX__')
-            return part;
-        const track = flexTracks[flexIndex++];
-        const roundedWidth = Math.round(track.width);
-        if (track.max != null)
-            return `minmax(${roundedWidth}px, ${Math.round(track.max)}px)`;
-        return `minmax(${roundedWidth}px, ${track.weight}fr)`;
-    })
-        .join(' ');
+    const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
+    const targetTrackWidth = floatTrackTotal <= availableWidth - selectionWidth
+        ? Math.floor(floatTrackTotal)
+        : Math.ceil(floatTrackTotal);
+    const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
+    const totalWidth = selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
+    return {
+        selectionWidth: hasSelection ? SELECTION_COLUMN_PX : undefined,
+        widths,
+        totalWidth,
+    };
 }

package/dist/src/styles/styles.css

@@ -101,15 +101,11 @@ body.dbc-app {
   margin: 0; /* harmless on td, keeps parity with metaValue */
   font-size: var(--font-size-sm);
   color: var(--color-fg-default);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-default);
 
   word-break: break-word;
 }
 
-.dbc-table.dbc-table--plain-values td {
-  font-weight: var(--font-weight-default);
-}
-
 /* Optional: baseline alignment closer to metaRow */
 .dbc-table th,
 .dbc-table td {

package/dist/styles/styles.css

@@ -101,15 +101,11 @@ body.dbc-app {
   margin: 0; /* harmless on td, keeps parity with metaValue */
   font-size: var(--font-size-sm);
   color: var(--color-fg-default);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-default);
 
   word-break: break-word;
 }
 
-.dbc-table.dbc-table--plain-values td {
-  font-weight: var(--font-weight-default);
-}
-
 /* Optional: baseline alignment closer to metaRow */
 .dbc-table th,
 .dbc-table td {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -48,6 +48,7 @@
     "dev": "tsc -p tsconfig.build.json --watch",
     "test": "jest",
     "format": "prettier . --write",
+    "format:fix": "prettier . --write",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "storybook": "storybook dev -p 6006 --no-open",