@dbcdk/react-components 0.0.19 → 0.0.21

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

@@ -1,101 +1,276 @@
-/* Table.module.css (updated) */
-
-/* =========================
-   Base table
-   ========================= */
+.fillViewportRoot {
+  display: flex;
+  position: relative;
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+}
 
-.table {
+.inlineRoot {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  min-inline-size: 0;
   inline-size: 100%;
   max-inline-size: 100%;
+  position: relative;
+}
+
+.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;
-  border-collapse: collapse;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--color-fg-default);
-  background: var(--color-bg-surface);
-  table-layout: fixed;
+  margin-top: auto;
 }
 
-.tableScroll {
-  position: relative;
-  overflow: auto;
-  max-inline-size: 100%;
-  -webkit-overflow-scrolling: touch;
+.paginationSlot:not(.paginationSlotTop) {
+  padding-top: var(--spacing-sm);
 }
 
-/* =========================
-   Header
-   ========================= */
+.paginationSlot.paginationSlotTop {
+  padding-bottom: var(--spacing-sm);
+}
 
-.table thead {
+.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%;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--table-cell-fg);
+  background: var(--table-row-bg);
+  overflow: auto;
+}
+
+.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;
 }
 
-.table.primary thead {
-  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;
 }
 
-.table .th {
-  position: relative;
+.emptyStateSlot {
+  display: grid;
+  place-items: center;
+  min-block-size: 100%;
+  padding: var(--spacing-lg);
+}
 
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
+.headerRow,
+.row {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--grid-template);
+  align-items: stretch;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
 
-  text-align: left;
-  vertical-align: middle;
+.body {
+  min-block-size: 0;
+}
 
-  background: inherit;
+.body::before {
+  display: none;
+}
 
-  /* Typography */
+.headerCell {
+  display: flex;
+  align-items: center;
+  position: relative;
+  min-block-size: 44px;
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
   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(--table-header-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
 
-  color: var(--color-fg-subtle);
+.sm .headerCell {
+  min-block-size: 40px;
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+}
 
-  /* Truncation */
-  white-space: nowrap;
+.row {
+  background: var(--table-row-bg);
+  transition:
+    background-color 140ms ease,
+    box-shadow 140ms ease;
+}
+
+.row::after {
+  content: '';
+  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;
+}
+
+.cell {
+  position: relative;
+  min-block-size: var(--component-size-md);
+  padding-block: 6px;
+  padding-inline: var(--spacing-sm);
+  border-block-end: 1px solid var(--table-border-subtle);
+  text-align: start;
+  vertical-align: top;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+}
 
-  /* Width control */
+.sm .cell {
+  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);
+}
+
+.headerCell[data-align='right'],
+.cell[data-align='right'] {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.headerCell[data-align='center'],
+.cell[data-align='center'] {
+  text-align: center;
+}
+
+.selectionCell {
+  padding-block: inherit !important;
+  padding-inline: 0 !important;
+  overflow: visible !important;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
   min-width: 0;
 }
 
-/* Small variant: header padding */
-.table.sm .th {
-  padding-inline: var(--spacing-md);
+.clickableRow {
+  cursor: pointer;
+}
+
+.clickableRow:hover {
+  background-color: var(--table-row-bg-hover);
+}
+
+.selectedRow {
+  background-color: var(--table-row-bg-selected);
+}
+
+.selectedRow:hover {
+  background-color: var(--table-row-bg-selected-hover);
+}
+
+.striped .row:nth-child(even):not(.selectedRow):not(:hover) {
+  background-color: var(--table-row-bg-alt);
 }
 
-/* Header layout */
-.th > .thInner {
+.nowrap {
+  white-space: nowrap;
+}
+
+.allowWrap {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
+.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 (full width click target, but content aligns via modifiers) */
 .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);
   padding-block: 2px;
   padding-inline: 2px;
-
-  /* default */
   justify-content: flex-start;
 }
 
-/* IMPORTANT: use consistent PascalCase suffixes */
 .thButtonRight {
   justify-content: flex-end;
 }
@@ -104,7 +279,6 @@
   justify-content: center;
 }
 
-/* Label should NOT grow to fill space (it breaks alignment) */
 .thLabel {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -113,24 +287,38 @@
   min-width: 0;
 }
 
-/* Match label text alignment to column alignment */
 .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 {
@@ -138,166 +326,142 @@
   block-size: var(--icon-size-sm);
 }
 
-/* =========================
-   Body + cells
-   ========================= */
-
-.tBody::before {
-  content: '';
-  height: var(--spacing-xs);
+.cellContent {
   display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
 }
 
-.tBody tr td {
-  position: relative;
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
-
-  border-block-end: var(--border-width-thin) solid var(--color-border-default);
-
-  text-align: start;
-  vertical-align: top;
-
-  overflow-wrap: break-word;
-  word-break: normal;
-}
-
-/* Small variant applies to all cells by default */
-.table.sm .tBody tr td {
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-md);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-normal);
+.cellContent > * {
+  min-width: 0;
+  max-inline-size: 100%;
 }
 
-/* =========================
-   Selection column
-   ========================= */
-
-.tBody tr td.selectionCell,
-.table .tBody tr td.selectionCell,
-.table td.selectionCell {
-  padding-inline: var(--spacing-xxs);
+.cellValueEllipsis {
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.table .th.selectionCell,
-.table th.selectionCell,
-th.selectionCell {
-  width: 34px !important;
+.allowWrap .cellContent {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
-/* Override the .table.sm .tBody tr td padding-inline */
-.table.sm .tBody tr td.selectionCell,
-.table.table.sm .tBody tr td.selectionCell {
-  padding-inline: var(--spacing-xxs);
+.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;
 }
 
-.table.severityTable .tBody tr td:first-child {
-  padding-inline-start: var(--spacing-md);
-}
-.table.severityTable .tBody tr td.selectionCell,
-.table.severityTable td.selectionCell,
-.table.severityTable .th.selectionCell,
-.table.severityTable th.selectionCell {
-  padding-inline: var(--spacing-xxs);
+.severityTable .headerRow .selectionCell,
+.severityTable .row .selectionCell {
+  padding-inline-start: var(--row-rail-offset) !important;
 }
 
-.table.sm.severityTable .tBody tr td.selectionCell,
-.table.table.sm.severityTable .tBody tr td.selectionCell,
-.table.sm.severityTable .th.selectionCell,
-.table.table.sm.severityTable .th.selectionCell,
-.table.sm.severityTable th.selectionCell {
-  padding-inline: var(--spacing-xxs);
-  padding-inline-start: 14px;
+.severityTable .row.severity {
+  --row-severity-color: transparent;
+  --row-severity-bg: transparent;
+  --row-severity-bg-hover: transparent;
+  background-color: var(--row-severity-bg);
 }
 
-/* =========================
-   Rows (interaction + states)
-   ========================= */
-
-.clickableRow {
-  cursor: pointer;
+.severityTable .row.severity::before {
+  content: '';
+  position: absolute;
+  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: var(--row-rail-radius);
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0.95;
+  transition:
+    inline-size 140ms ease,
+    opacity 140ms ease,
+    filter 140ms ease;
 }
 
-.clickableRow:hover {
-  background-color: var(--color-bg-contextual);
+.severityTable .row.severity > * {
+  position: relative;
+  z-index: 3;
 }
 
-.selectedRow {
-  background-color: var(--color-bg-selected);
+.severityTable .row.severity.clickableRow:hover::before,
+.severityTable .row.severity:hover::before {
+  opacity: 1;
+  filter: saturate(1.08);
 }
 
-.selectedRow:hover {
-  background-color: var(--color-bg-selected-hover);
+.severityTable .row.severity.clickableRow:hover,
+.severityTable .row.severity:hover {
+  background-color: var(--row-severity-bg-hover);
 }
 
-.tr--hover:hover {
-  background-color: var(--color-bg-contextual);
+.severityTable .row.severity.selectedRow {
+  background-color: var(--table-row-bg-selected);
 }
 
-.striped tr:nth-child(even):not(.selectedRow):not(:hover) {
-  background-color: var(--color-bg-surface-subtle);
+.severityTable .row.severity.selectedRow:hover {
+  background-color: var(--table-row-bg-selected-hover);
 }
 
-/* Focus ring (fix selector: .tBody, not .tbody) */
-.table .tBody tr: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);
+.severityTable .row.severity:focus-within::before {
+  inline-size: 6px;
+  opacity: 1;
 }
 
-/* =========================
-   Content utilities
-   ========================= */
-
-.nowrap {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.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;
 }
 
-.allowWrap {
-  word-break: break-all !important;
-  overflow-wrap: anywhere !important;
+.severityTable .row.severityFailed::before {
+  box-shadow: 1px 0 0 color-mix(in srgb, var(--row-severity-color) 20%, transparent);
 }
 
-.td--numeric {
-  text-align: end;
+.sm .severityTable {
+  --row-rail-width: 4px;
+  --row-rail-gap: 8px;
+  --row-rail-inset-block: 1px;
 }
 
-.td--muted {
-  color: var(--color-fg-muted);
+.dividerLeft {
+  position: relative;
 }
 
-.td .error {
-  color: var(--color-danger);
+.dividerLeft::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-divider);
 }
 
-/* =========================
-   Severity rail
-   ========================= */
-
-.tBody tr.severity td:first-child {
+.dividerRight {
   position: relative;
 }
 
-.table.severityTable .tBody tr.severity td:first-child::before {
+.dividerRight::after {
   content: '';
   position: absolute;
-  left: 2px;
-  top: 1px;
-  bottom: 1px;
-  width: 3px;
-  background-color: var(--row-severity-color);
-  border-radius: 1px;
-
-  z-index: 0;
-}
-
-.table.severityTable .tBody tr.severity td:first-child > * {
-  position: relative;
-  z-index: 1;
+  right: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-divider);
 }

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { type TableProps, type TableVariant } from './Table';
 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' | 'headerBelowRow' | 'headerExtras' | 'columnStyles' | 'toolbar'> & {
+export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerExtras' | 'gridTemplateColumns' | 'toolbar'> & {
     columns: ReadonlyArray<ColumnDef<T, any>>;
     filterable?: Filterable<T>;
     sorting?: SortingState;

package/dist/components/table/TanstackTable.js

@@ -4,9 +4,9 @@ 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, buildColumnStyles, columnItemsToIdSet, } from './tanstackTable.utils';
+import { buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, columnItemsToIdSet, buildDistributedGridTemplateColumns, } from './tanstackTable.utils';
 export function TanstackTable(props) {
-    const { data, dataKey, columns, filterable = [], sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, ...tableProps } = props;
+    const { data, dataKey, columns, sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, selectedRows, onRowSelect, ...tableProps } = props;
     const isControlledSorting = controlledSorting != null;
     const [uiSorting, setUiSorting] = React.useState(controlledSorting !== null && controlledSorting !== void 0 ? controlledSorting : []);
     React.useEffect(() => {
@@ -46,26 +46,17 @@ export function TanstackTable(props) {
             enableResizing: true,
             minSize: 80,
             size: 180,
-            maxSize: 300,
         },
     });
     const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility), [columns, columnVisibility]);
     const allowedIds = React.useMemo(() => columnItemsToIdSet(columnItems), [columnItems]);
     const visibleData = table.getRowModel().rows.map(r => r.original);
     const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
-    const columnStyles = React.useMemo(() => {
-        const leafCols = table.getAllLeafColumns();
-        return buildColumnStyles(leafCols, allowedIds, { minWidth: 80, maxWidth: 800 });
-    }, [table, columnSizing, allowedIds]);
     const handleSortChange = React.useCallback((column, direction) => {
-        // Translate Table's direction -> TanStack SortingState
         const next = direction == null ? [] : [{ id: column.id, desc: direction === 'desc' }];
-        // Mirror TanStack's onSortingChange behavior
         if (optimisticSortingUi)
             setUiSorting(next);
         onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
-        // If you are doing server-side sorting, you likely also want:
-        // table.resetPageIndex?.() or external pagination reset (depends on your setup)
     }, [optimisticSortingUi, onSortingChange]);
     const headerExtras = React.useCallback(({ index }) => {
         var _a, _b, _c, _d;
@@ -80,5 +71,16 @@ export function TanstackTable(props) {
             return null;
         return _jsx(ColumnResizer, { id: header.column.id, handler: handler });
     }, [table]);
-    return (_jsx(Table, { ...tableProps, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, columnStyles: columnStyles, headerExtras: headerExtras }));
+    const hasSelection = Boolean(selectedRows && onRowSelect && dataKey);
+    const gridTemplateColumns = React.useMemo(() => {
+        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 }));
 }