@dbcdk/react-components 0.0.35 → 0.0.36

package/dist/components/code-block/CodeBlock.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextWrap } from 'lucide-react';
+import { isValidElement } from 'react';
 import { useMemo, useState } from 'react';
 import styles from './CodeBlock.module.css';
 import { Button } from '../button/Button';
@@ -15,12 +16,22 @@ const looksLikeStackFrame = (line) => {
         t.startsWith('↳') || // some tools
         /^at\s+\w/.test(t));
 };
+function getTextContent(node) {
+    if (node == null || typeof node === 'boolean')
+        return '';
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(getTextContent).join('');
+    if (isValidElement(node))
+        return getTextContent(node.props.children);
+    return '';
+}
 export function CodeBlock({ code, children, copyButton, copyText, size = 'md', smart = true, wrap = true, }) {
-    var _a;
     const text = typeof code === 'string' ? code : undefined;
-    const copy = (_a = copyText !== null && copyText !== void 0 ? copyText : text) !== null && _a !== void 0 ? _a : '';
     const hasChildren = children !== undefined && children !== null;
     const [isWrapped, setIsWrapped] = useState(wrap);
+    const copy = useMemo(() => { var _a; return (_a = copyText !== null && copyText !== void 0 ? copyText : text) !== null && _a !== void 0 ? _a : getTextContent(children); }, [copyText, text, children]);
     const lines = useMemo(() => (smart && !hasChildren && typeof text === 'string' ? text.split('\n') : null), [smart, hasChildren, text]);
     return (_jsxs("div", { className: [
             styles.wrapper,

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

@@ -7,6 +7,7 @@ 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;

package/dist/components/table/TanstackTable.js

@@ -22,6 +22,7 @@ export function TanstackTable(props) {
     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,
@@ -68,6 +69,31 @@ 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;
@@ -77,8 +103,17 @@ export function TanstackTable(props) {
             defaultMinPx: 80,
             columnSizing,
             availableWidth,
+            measuredFitContentWidths,
         });
-    }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+    }, [
+        table,
+        selectedRows,
+        onRowSelect,
+        dataKey,
+        columnSizing,
+        availableWidth,
+        measuredFitContentWidths,
+    ]);
     const resolvedLayout = React.useMemo(() => {
         const next = {};
         table.getVisibleLeafColumns().forEach((column) => {

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, 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, "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 => {
                             if (!shouldToggleOnKey(e.key))
                                 return;
                             e.preventDefault();

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

@@ -46,8 +46,10 @@ 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 = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
+                const allowWrap = column.fitContent
+                    ? false
+                    : 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, 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, "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));
             })] }));
 }

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

@@ -17,6 +17,7 @@ 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;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const id = getColumnId(def, index);
         const accessorKey = def.accessorKey;
         const accessorFn = def.accessorFn;
@@ -55,10 +55,11 @@ 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: (_f = meta.emptyPlaceholder) !== null && _f !== void 0 ? _f : '-',
-            allowWrap: (_g = meta.allowWrap) !== null && _g !== void 0 ? _g : false,
+            emptyPlaceholder: (_g = meta.emptyPlaceholder) !== null && _g !== void 0 ? _g : '-',
+            allowWrap: (_h = meta.allowWrap) !== null && _h !== void 0 ? _h : false,
             severity: meta.severity,
             divider: meta.divider,
         };
@@ -106,11 +107,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 } = args;
+    const { table, hasSelection, defaultMinPx, columnSizing, availableWidth, measuredFitContentWidths = {}, } = args;
     const leaf = table.getVisibleLeafColumns();
     const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
     const tracks = leaf.map((c) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         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));
@@ -126,7 +127,19 @@ export function buildDistributedColumnWidths(args) {
                 fixed: true,
             };
         }
-        const rawWeight = Number((_e = (_d = meta.weight) !== null && _d !== void 0 ? _d : def.size) !== null && _e !== void 0 ? _e : DEFAULT_COLUMN_PX);
+        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 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.35",
+  "version": "0.0.36",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",