@dbcdk/react-components 0.0.33 → 0.0.34

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

@@ -1,3 +1,3 @@
 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, gridTemplateColumns, 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, gridTemplateColumns, tableRootRef, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;

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 { buildDefaultGridTemplate, getVisibleColumns } 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, gridTemplateColumns, 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, gridTemplateColumns, tableRootRef, 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);
@@ -26,7 +26,7 @@ export function Table({ data, dataKey, columns, selectedRows, selectionMode = 's
     const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection, gridStyle: gridStyle })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, gridStyle: gridStyle, 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 tableShell = (_jsx("div", { ...rest, className: tableClassName, role: "table", "aria-rowcount": data.length, children: _jsxs("div", { className: styles.tableContent, children: [_jsx("div", { className: styles.header, role: "rowgroup", children: _jsx(TableHeader, { columns: visibleColumns, gridStyle: gridStyle, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }) }), _jsx("div", { className: styles.bodyScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (bodyContent) })] }) }));
+    const tableShell = (_jsx("div", { ...rest, ref: tableRootRef, className: tableClassName, role: "table", "aria-rowcount": data.length, children: _jsxs("div", { className: styles.tableContent, children: [_jsx("div", { className: styles.header, role: "rowgroup", children: _jsx(TableHeader, { columns: visibleColumns, gridStyle: gridStyle, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }) }), _jsx("div", { className: styles.bodyScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (bodyContent) })] }) }));
     if (fillViewport) {
         return (_jsxs("div", { className: styles.fillViewportRoot, style: {
                 flexDirection: paginationPlacement === 'top' ? 'column-reverse' : 'column',

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

@@ -193,7 +193,7 @@
   align-items: flex-start;
   justify-content: flex-start;
   min-width: 0;
-  padding-inline: var(--spacing-sm);
+  padding-inline: calc(var(--spacing-xxs) + 2px) var(--spacing-sm);
   padding-block: 6px;
   cursor: pointer;
 }
@@ -403,17 +403,17 @@
 }
 
 .severityTable {
-  --row-rail-width: 4px;
+  --row-rail-width: 2px;
   --row-rail-gap: 10px;
   --row-rail-offset: calc(var(--row-rail-width) + var(--row-rail-gap));
   --row-rail-inset-block: 1px;
-  --row-rail-radius: 0 2px 2px 0;
+  --row-rail-radius: 0;
   --selection-rail-compensation: calc(var(--row-rail-offset) / 2);
 }
 
 .severityTable .headerCell.selectionCell,
 .severityTable .row .selectionCell {
-  padding-inline-start: 0 !important;
+  padding-inline-start: calc(var(--spacing-xxs) + 2px) !important;
 }
 
 .severityTable .headerCell.selectionCell .selectionHitArea,
@@ -472,8 +472,8 @@
 }
 
 .severityTable .row.severity:focus-within::before {
-  inline-size: 6px;
   opacity: 1;
+  z-index: 5;
 }
 
 .striped .severityTable .row.severity:nth-child(even):not(.selectedRow):not(:hover) {

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

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
 import type { PageChangeEvent } from '../../components/pagination/Pagination';
 import type { Severity } from '../../constants/severity.types';
 import type { ViewMode } from '../../hooks/useTableSettings';
@@ -41,6 +41,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     striped?: boolean;
     fillViewport?: boolean;
     gridTemplateColumns?: string;
+    tableRootRef?: Ref<HTMLDivElement>;
     toolbar?: ReactNode;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     take?: number;

package/dist/components/table/TanstackTable.js

@@ -4,6 +4,7 @@ import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel,
 import * as React from 'react';
 import ColumnResizer from './components/column-resizer/ColumnResizer';
 import { Table } from './Table';
+import { DEFAULT_COLUMN_PX } from './table.utils';
 import { buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, columnItemsToIdSet, buildDistributedGridTemplateColumns, } from './tanstackTable.utils';
 export function TanstackTable(props) {
     const { data, dataKey, columns, sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, selectedRows, onRowSelect, ...tableProps } = props;
@@ -47,7 +48,7 @@ export function TanstackTable(props) {
         defaultColumn: {
             enableResizing: true,
             minSize: 80,
-            size: 180,
+            size: DEFAULT_COLUMN_PX,
         },
     });
     const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility), [columns, columnVisibility]);
@@ -101,5 +102,5 @@ export function TanstackTable(props) {
             availableWidth,
         });
     }, [table, allowedIds, hasSelection, columnSizing, availableWidth]);
-    return (_jsx("div", { ref: containerRef, style: { width: '100%', minWidth: 0, overflow: 'auto' }, children: _jsx(Table, { ...tableProps, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, gridTemplateColumns: gridTemplateColumns, headerExtras: headerExtras, selectedRows: selectedRows, onRowSelect: onRowSelect }) }));
+    return (_jsx(Table, { ...tableProps, tableRootRef: containerRef, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, gridTemplateColumns: gridTemplateColumns, headerExtras: headerExtras, selectedRows: selectedRows, onRowSelect: onRowSelect }));
 }

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ColumnItem } from './Table.types';
 export declare const SELECTION_COLUMN_PX: 40;
+export declare const DEFAULT_COLUMN_PX: 150;
 export type SortDirection = 'asc' | 'desc' | null;
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;
 export declare function getHeaderLabel(header: string | (() => ReactNode)): ReactNode;

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

@@ -1,4 +1,5 @@
 export const SELECTION_COLUMN_PX = 40;
+export const DEFAULT_COLUMN_PX = 150;
 export function getVisibleColumns(columns) {
     return columns.filter(column => !column.hidden);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",