@dbcdk/react-components 0.0.35 → 0.0.37

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.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

@@ -43,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,7 +18,6 @@ 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);
@@ -27,7 +26,6 @@ export function TanstackTable(props) {
         columns: columns,
         state: {
             sorting: uiSorting,
-            columnFilters,
             columnSizing,
             columnVisibility,
         },
@@ -37,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',
@@ -79,6 +75,7 @@ export function TanstackTable(props) {
             availableWidth,
         });
     }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+    const initialLayoutReady = availableWidth != null;
     const resolvedLayout = React.useMemo(() => {
         const next = {};
         table.getVisibleLeafColumns().forEach((column) => {
@@ -110,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.35",
+  "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",