@dbcdk/react-components 0.0.20 → 0.0.21

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

@@ -1,32 +1,90 @@
-.grid {
+.fillViewportRoot {
+  display: flex;
+  position: relative;
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.inlineRoot {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  min-inline-size: 0;
   inline-size: 100%;
   max-inline-size: 100%;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--color-fg-default);
-  background: var(--color-bg-surface);
+  position: relative;
 }
 
-.tableScroll {
-  position: relative;
-  overflow: auto;
+.toolbarSlot {
+  margin-bottom: 12px;
+  flex: 0 0 auto;
+}
+
+.tableViewport {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.paginationSlot {
+  flex: 0 0 auto;
+  overflow: visible;
+  margin-top: auto;
+}
+
+.paginationSlot:not(.paginationSlotTop) {
+  padding-top: var(--spacing-sm);
+}
+
+.paginationSlot.paginationSlotTop {
+  padding-bottom: var(--spacing-sm);
+}
+
+.tableRoot {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  inline-size: 100%;
   max-inline-size: 100%;
-  -webkit-overflow-scrolling: touch;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--table-cell-fg);
+  background: var(--table-row-bg);
+  overflow: auto;
 }
 
-/* Header wrapper sticky */
 .header {
   position: sticky;
   top: 0;
   z-index: 10;
-  background-color: var(--color-bg-surface);
+  background-color: var(--table-header-bg);
+  border-block-end: 1px solid var(--table-border-header);
+  margin-bottom: 0;
+  flex: 0 0 auto;
 }
 
-.primary .header {
-  box-shadow: var(--shadow-md);
+.bodyScroll {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+
+.emptyStateSlot {
+  display: grid;
+  place-items: center;
+  min-block-size: 100%;
+  padding: var(--spacing-lg);
 }
 
-/* Shared row grid template */
 .headerRow,
 .row {
   position: relative;
@@ -34,46 +92,73 @@
   grid-template-columns: var(--grid-template);
   align-items: stretch;
   inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.body {
+  min-block-size: 0;
+}
+
+.body::before {
+  display: none;
 }
 
-/* Header cells */
 .headerCell {
+  display: flex;
+  align-items: center;
   position: relative;
-  padding-block: var(--spacing-xs);
+  min-block-size: 44px;
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);
-
-  /* Typography */
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--font-weight-medium);
   letter-spacing: var(--letter-spacing-wide);
   text-transform: uppercase;
-  color: var(--color-fg-subtle);
-
-  /* Truncation */
+  color: var(--table-header-fg);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
   min-width: 0;
 }
 
 .sm .headerCell {
-  padding-inline: var(--spacing-md);
+  min-block-size: 40px;
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
 }
 
-/* Body */
-.body::before {
+.row {
+  background: var(--table-row-bg);
+  transition:
+    background-color 140ms ease,
+    box-shadow 140ms ease;
+}
+
+.row::after {
   content: '';
-  height: var(--spacing-xs);
-  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 4;
+  opacity: 0;
+  box-shadow: inset 0 0 0 2px var(--color-brand);
+  transition: opacity 140ms ease;
+}
+
+.row:focus-within {
+  outline: none;
+}
+
+.row:focus-within::after {
+  opacity: 1;
 }
 
-/* Data cells */
 .cell {
   position: relative;
-  padding-block: var(--spacing-xs);
+  min-block-size: var(--component-size-md);
+  padding-block: 6px;
   padding-inline: var(--spacing-sm);
-  border-block-end: var(--border-width-thin) solid var(--color-border-default);
+  border-block-end: 1px solid var(--table-border-subtle);
   text-align: start;
   vertical-align: top;
   min-width: 0;
@@ -82,8 +167,9 @@
 }
 
 .sm .cell {
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-md);
+  min-block-size: var(--component-size-sm);
+  padding-block: 6px;
+  padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-normal);
 }
@@ -99,18 +185,14 @@
   text-align: center;
 }
 
-/* Selection column */
 .selectionCell {
-  padding: inherit 0 !important;
+  padding-block: inherit !important;
+  padding-inline: 0 !important;
   overflow: visible !important;
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-/* Rows (interaction + states) */
-.row {
-  background: transparent;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
 }
 
 .clickableRow {
@@ -118,36 +200,23 @@
 }
 
 .clickableRow:hover {
-  background-color: var(--color-bg-contextual);
+  background-color: var(--table-row-bg-hover);
 }
 
 .selectedRow {
-  background-color: var(--color-bg-selected);
+  background-color: var(--table-row-bg-selected);
 }
 
 .selectedRow:hover {
-  background-color: var(--color-bg-selected-hover);
+  background-color: var(--table-row-bg-selected-hover);
 }
 
 .striped .row:nth-child(even):not(.selectedRow):not(:hover) {
-  background-color: var(--color-bg-surface-subtle);
+  background-color: var(--table-row-bg-alt);
 }
 
-/* Focus ring: apply when something inside row is focused */
-.row:focus-within {
-  outline: none;
-  box-shadow:
-    inset 2px 0 0 var(--color-brand),
-    inset -2px 0 0 var(--color-brand),
-    inset 0 2px 0 var(--color-brand),
-    inset 0 -2px 0 var(--color-brand);
-}
-
-/* Content utilities */
 .nowrap {
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .allowWrap {
@@ -156,20 +225,44 @@
   word-break: normal;
 }
 
-/* Header inner layout (same as before) */
 .thInner {
   display: flex;
   align-items: center;
   inline-size: 100%;
+  min-width: 0;
+}
+
+.thInnerRight {
+  justify-content: flex-end;
+}
+
+.thInnerCenter {
+  justify-content: center;
+}
+
+.thMain {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.thMainRight {
+  justify-content: flex-end;
+}
+
+.thMainCenter {
+  justify-content: center;
 }
 
-/* Sort button */
 .thButton {
   all: unset;
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: var(--spacing-xxs);
-  inline-size: 100%;
+  gap: 4px;
+  min-width: 0;
+  max-inline-size: 100%;
   cursor: pointer;
   user-select: none;
   border-radius: var(--border-radius-default);
@@ -196,21 +289,36 @@
 
 .thLabelRight {
   text-align: right;
+  width: 100%;
 }
 
 .thLabelCenter {
   text-align: center;
+  width: 100%;
 }
 
-.thExtras {
-  display: inline-flex;
+.thOverlayExtras {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
   align-items: center;
+  justify-content: center;
+  min-width: 0;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.thOverlayExtras > * {
+  pointer-events: auto;
 }
 
 .sortIndicator {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
+  color: var(--color-fg-subtle);
+  opacity: 0.9;
 }
 
 .sortIndicator svg {
@@ -218,21 +326,142 @@
   block-size: var(--icon-size-sm);
 }
 
+.cellContent {
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+}
+
+.cellContent > * {
+  min-width: 0;
+  max-inline-size: 100%;
+}
+
+.cellValueEllipsis {
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.allowWrap .cellContent {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
+.severityTable {
+  --row-rail-width: 4px;
+  --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;
+}
+
+.severityTable .headerRow .selectionCell,
+.severityTable .row .selectionCell {
+  padding-inline-start: var(--row-rail-offset) !important;
+}
+
+.severityTable .row.severity {
+  --row-severity-color: transparent;
+  --row-severity-bg: transparent;
+  --row-severity-bg-hover: transparent;
+  background-color: var(--row-severity-bg);
+}
+
 .severityTable .row.severity::before {
   content: '';
   position: absolute;
-  left: 2px;
-  top: 1px;
-  bottom: 1px;
-  width: 3px;
+  inset-inline-start: 0;
+  inset-block-start: var(--row-rail-inset-block);
+  inset-block-end: var(--row-rail-inset-block);
+  inline-size: var(--row-rail-width);
   background-color: var(--row-severity-color);
-  border-radius: 1px;
+  border-radius: var(--row-rail-radius);
   z-index: 2;
   pointer-events: none;
+  opacity: 0.95;
+  transition:
+    inline-size 140ms ease,
+    opacity 140ms ease,
+    filter 140ms ease;
 }
 
-/* Ensure content is above the rail */
 .severityTable .row.severity > * {
   position: relative;
   z-index: 3;
 }
+
+.severityTable .row.severity.clickableRow:hover::before,
+.severityTable .row.severity:hover::before {
+  opacity: 1;
+  filter: saturate(1.08);
+}
+
+.severityTable .row.severity.clickableRow:hover,
+.severityTable .row.severity:hover {
+  background-color: var(--row-severity-bg-hover);
+}
+
+.severityTable .row.severity.selectedRow {
+  background-color: var(--table-row-bg-selected);
+}
+
+.severityTable .row.severity.selectedRow:hover {
+  background-color: var(--table-row-bg-selected-hover);
+}
+
+.severityTable .row.severity:focus-within::before {
+  inline-size: 6px;
+  opacity: 1;
+}
+
+.striped .severityTable .row.severity:nth-child(even):not(.selectedRow):not(:hover) {
+  background-image:
+    linear-gradient(var(--row-severity-bg), var(--row-severity-bg)),
+    linear-gradient(var(--table-row-bg-alt), var(--table-row-bg-alt));
+  background-blend-mode: normal;
+}
+
+.severityTable .row.severityFailed::before {
+  box-shadow: 1px 0 0 color-mix(in srgb, var(--row-severity-color) 20%, transparent);
+}
+
+.sm .severityTable {
+  --row-rail-width: 4px;
+  --row-rail-gap: 8px;
+  --row-rail-inset-block: 1px;
+}
+
+.dividerLeft {
+  position: relative;
+}
+
+.dividerLeft::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-divider);
+}
+
+.dividerRight {
+  position: relative;
+}
+
+.dividerRight::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-divider);
+}

package/dist/components/table/TanstackTable.js

@@ -4,31 +4,7 @@ import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel,
 import * as React from 'react';
 import ColumnResizer from './components/column-resizer/ColumnResizer';
 import { Table } from './Table';
-import { buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, columnItemsToIdSet, } from './tanstackTable.utils';
-function buildGridTemplateColumns(args) {
-    var _a, _b, _c, _d;
-    const { table, allowedIds, hasSelection, selectionPx, defaultMinPx } = args;
-    const parts = [];
-    if (hasSelection)
-        parts.push(`${selectionPx}px`);
-    const leaf = table.getVisibleLeafColumns().filter(c => allowedIds.has(c.id));
-    for (const c of leaf) {
-        const def = c.columnDef;
-        const min = Number((_a = def.minSize) !== null && _a !== void 0 ? _a : defaultMinPx);
-        const maxRaw = def.maxSize;
-        const max = maxRaw == null ? Number.POSITIVE_INFINITY : Number(maxRaw);
-        const size = Number((_d = (_c = (_b = c.getSize) === null || _b === void 0 ? void 0 : _b.call(c)) !== null && _c !== void 0 ? _c : def.size) !== null && _d !== void 0 ? _d : min);
-        if (Number.isFinite(min) && Number.isFinite(max) && min > 0 && max === min) {
-            parts.push(`${Math.round(min)}px`);
-            continue;
-        }
-        // Weight based on size so wide columns keep more room
-        const weight = Math.max(1, Math.min(6, Math.round(size / 100)));
-        // Respect minSize; scroll if mins don't fit
-        parts.push(`minmax(${Math.round(min)}px, ${weight}fr)`);
-    }
-    return parts.join(' ');
-}
+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;
     const isControlledSorting = controlledSorting != null;
@@ -70,7 +46,6 @@ export function TanstackTable(props) {
             enableResizing: true,
             minSize: 80,
             size: 180,
-            maxSize: 300,
         },
     });
     const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility), [columns, columnVisibility]);
@@ -98,12 +73,13 @@ export function TanstackTable(props) {
     }, [table]);
     const hasSelection = Boolean(selectedRows && onRowSelect && dataKey);
     const gridTemplateColumns = React.useMemo(() => {
-        return buildGridTemplateColumns({
+        return buildDistributedGridTemplateColumns({
             table,
             allowedIds,
             hasSelection,
             selectionPx: 36,
             defaultMinPx: 80,
+            columnSizing,
         });
     }, [table, allowedIds, hasSelection, columnSizing]);
     return (_jsx(Table, { ...tableProps, 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

@@ -2,7 +2,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { ColumnItem } from './Table';
 export type SortDirection = 'asc' | 'desc' | null;
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;
-export declare function getColumnStyle(columnId: string, columnStyles: Partial<Record<string, CSSProperties>> | undefined, alignment?: 'left' | 'right' | 'center', verticalAlignment?: 'top' | 'middle' | 'bottom'): CSSProperties;
+export declare function getColumnStyle(columnId: string, columnStyles: Partial<Record<string, CSSProperties>> | undefined, alignment?: 'left' | 'right' | 'center', verticalAlignment?: 'top' | 'middle' | 'bottom', divider?: boolean): CSSProperties;
 export declare function getHeaderLabel(header: string | (() => ReactNode)): ReactNode;
 export declare function isActiveSort(sortById: string | undefined, columnId: string): boolean;
 export declare function getAriaSort(sortable: boolean | undefined, active: boolean, direction: SortDirection): 'ascending' | 'descending' | 'none';

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

@@ -1,13 +1,14 @@
 export function getVisibleColumns(columns) {
     return columns.filter(c => !c.hidden);
 }
-export function getColumnStyle(columnId, columnStyles, alignment, verticalAlignment) {
+export function getColumnStyle(columnId, columnStyles, alignment, verticalAlignment, divider) {
     const baseStyle = columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[columnId];
     return {
         ...(baseStyle !== null && baseStyle !== void 0 ? baseStyle : {}),
         ...(alignment === 'right' ? { fontVariantNumeric: 'tabular-nums' } : null),
         verticalAlign: verticalAlignment !== null && verticalAlignment !== void 0 ? verticalAlignment : 'top',
         textAlign: alignment !== null && alignment !== void 0 ? alignment : 'left',
+        ...(divider ? { borderLeft: '1px solid var(--color-border-subtle)' } : null),
     };
 }
 export function getHeaderLabel(header) {

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

@@ -1,5 +1,4 @@
-import type { ColumnDef, SortingState, VisibilityState, Column } from '@tanstack/react-table';
-import type { CSSProperties } from 'react';
+import type { ColumnDef, ColumnSizingState, SortingState, VisibilityState } from '@tanstack/react-table';
 import type { ColumnItem } from './Table';
 type AnyRecord = Record<string, any>;
 export declare function getColumnId<T>(def: ColumnDef<T, any>, index: number): string;
@@ -10,13 +9,13 @@ export declare function getSortPropsFromSorting(sorting: SortingState): {
     sortById?: string;
     sortDirection: 'asc' | 'desc' | null;
 };
-/**
- * Builds `columnStyles` where TanStack is source of truth.
- * Keep this util pure by passing in the leaf columns and the set of allowed IDs.
- */
-export declare function buildColumnStyles(leafColumns: Array<Pick<Column<any, any>, 'id' | 'getSize' | 'columnDef'>>, allowedIds: Set<string>, defaults?: {
-    minWidth: number;
-    maxWidth: number;
-}): Record<string, CSSProperties>;
 export declare function columnItemsToIdSet<T>(items: Array<ColumnItem<T>>): Set<string>;
+export declare function buildDistributedGridTemplateColumns(args: {
+    table: any;
+    allowedIds: Set<string>;
+    hasSelection: boolean;
+    selectionPx: number;
+    defaultMinPx: number;
+    columnSizing: ColumnSizingState;
+}): string;
 export {};