@dbcdk/react-components 0.0.33 → 0.0.35

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

@@ -53,28 +53,37 @@
   min-inline-size: 0;
   inline-size: 100%;
   max-inline-size: 100%;
+}
+
+.tableScroll {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+  background: var(--table-row-bg);
+  -webkit-overflow-scrolling: touch;
+}
+
+.tableElement {
+  inline-size: 100%;
+  min-inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
   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(--table-header-bg);
-  border-block-end: 1px solid var(--table-border-header);
-  margin-bottom: 0;
-  flex: 0 0 auto;
+  position: relative;
+  z-index: 2;
 }
 
-.bodyScroll {
-  flex: 1 1 auto;
-  min-block-size: 0;
-  min-inline-size: 0;
-  -webkit-overflow-scrolling: touch;
+.headerRow,
+.row {
+  position: relative;
 }
 
 .emptyStateSlot {
@@ -84,33 +93,26 @@
   padding: var(--spacing-lg);
 }
 
-.headerRow,
-.row {
-  position: relative;
-  display: grid;
-  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;
-}
-
-.tableContent {
-  inline-size: fit-content;
-  min-inline-size: 100%;
+.headerCell,
+.cell {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  vertical-align: top;
+  text-align: start;
 }
 
 .headerCell {
-  display: flex;
-  align-items: center;
-  position: relative;
+  position: sticky;
+  top: 0;
+  z-index: 6;
+  vertical-align: middle;
+  background-color: var(--table-header-bg);
+  border-block-end: 1px solid var(--table-border-header);
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
@@ -119,60 +121,27 @@
   text-transform: uppercase;
   color: var(--table-header-fg);
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
-.sm .headerCell {
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-sm);
-}
-
-.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;
+  background: var(--table-row-bg);
   overflow: hidden;
+  line-height: 20px;
+}
+
+.sm .headerCell {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
 }
 
 .sm .cell {
-  min-block-size: var(--component-size-sm);
-  padding-block: 6px;
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
-  line-height: var(--line-height-normal);
+  line-height: 20px;
 }
 
 .headerCell[data-align='right'],
@@ -188,43 +157,35 @@
 
 .headerCell.selectionCell,
 .cell.selectionCell {
-  overflow: visible !important;
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  min-width: 0;
-  padding-inline: var(--spacing-sm);
-  padding-block: 6px;
+  padding-inline: calc(var(--spacing-xxs) + 2px) var(--spacing-sm);
   cursor: pointer;
+  overflow: visible;
+  line-height: 0;
 }
 
-.headerCell.selectionCell:hover button,
-.cell.selectionCell:hover button {
-  border-color: var(--color-fg-default);
+.headerCell.selectionCell {
+  padding-block: var(--spacing-xxs);
+  vertical-align: middle;
 }
 
-.headerCell.selectionCell:focus-within > button,
-.cell.selectionCell:focus-within > button {
-  border-color: var(--color-fg-default);
+.cell.selectionCell {
+  vertical-align: top;
+  padding-block: var(--spacing-xxs);
 }
 
 .selectionHitArea {
   display: inline-flex;
   align-items: flex-start;
   justify-content: flex-start;
-  inline-size: fit-content;
-  block-size: auto;
   min-block-size: 0;
   padding: 0;
-}
-
-.sm .selectionHitArea {
-  min-block-size: 0;
+  line-height: 0;
 }
 
 .selectionControlWrap {
   display: inline-flex;
   align-items: flex-start;
+  line-height: 0;
 }
 
 .selectionControlWrap span {
@@ -247,22 +208,42 @@
   cursor: pointer;
 }
 
-.clickableRow:hover {
+.clickableRow:hover > .cell {
   background-color: var(--table-row-bg-hover);
 }
 
-.selectedRow {
+.selectedRow > .cell {
   background-color: var(--table-row-bg-selected);
 }
 
-.selectedRow:hover {
+.selectedRow:hover > .cell {
   background-color: var(--table-row-bg-selected-hover);
 }
 
-.striped .row:nth-child(even):not(.selectedRow):not(:hover) {
+.striped > .row:nth-child(even):not(.selectedRow):not(:hover) > .cell {
   background-color: var(--table-row-bg-alt);
 }
 
+.row:focus-within > .cell {
+  box-shadow:
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+
+.row:focus-within > .cell:first-child {
+  box-shadow:
+    inset 2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+
+.row:focus-within > .cell:last-child {
+  box-shadow:
+    inset -2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+
 .nowrap {
   white-space: nowrap;
 }
@@ -354,7 +335,7 @@
   justify-content: center;
   min-width: 0;
   pointer-events: none;
-  z-index: 5;
+  z-index: 7;
 }
 
 .thOverlayExtras > * {
@@ -374,6 +355,14 @@
   block-size: var(--icon-size-sm);
 }
 
+.descending {
+  transform: rotate(180deg);
+}
+
+.inActiveSort {
+  opacity: 0.45;
+}
+
 .cellContent {
   display: block;
   inline-size: 100%;
@@ -392,44 +381,30 @@
   min-width: 0;
   max-inline-size: 100%;
   white-space: nowrap;
-  /* overflow: hidden; */
-  /* text-overflow: ellipsis; */
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.allowWrap .cellContent {
+.allowWrap .cellContent,
+.allowWrap .cellValueEllipsis {
   white-space: normal;
   overflow-wrap: break-word;
   word-break: normal;
+  overflow: visible;
+  text-overflow: clip;
 }
 
 .severityTable {
-  --row-rail-width: 4px;
-  --row-rail-gap: 10px;
-  --row-rail-offset: calc(var(--row-rail-width) + var(--row-rail-gap));
+  --row-rail-width: 2px;
   --row-rail-inset-block: 1px;
-  --row-rail-radius: 0 2px 2px 0;
-  --selection-rail-compensation: calc(var(--row-rail-offset) / 2);
-}
-
-.severityTable .headerCell.selectionCell,
-.severityTable .row .selectionCell {
-  padding-inline-start: 0 !important;
-}
-
-.severityTable .headerCell.selectionCell .selectionHitArea,
-.severityTable .row .selectionCell .selectionHitArea {
-  inline-size: calc(100% - var(--selection-rail-compensation));
-  margin-inline-start: var(--selection-rail-compensation);
+  --row-rail-radius: 0;
 }
 
-.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 > .cell:first-child {
+  position: relative;
 }
 
-.severityTable .row.severity::before {
+.severityTable .row.severity > .cell:first-child::before {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -441,62 +416,33 @@
   z-index: 2;
   pointer-events: none;
   opacity: 0.95;
-  transition:
-    inline-size 140ms ease,
-    opacity 140ms ease,
-    filter 140ms ease;
-}
-
-.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;
+.severityTable .row.severity:hover > .cell:first-child::before,
+.severityTable .row.severity:focus-within > .cell:first-child::before {
   opacity: 1;
+  z-index: 8;
 }
 
-.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 {
+.severityTable .row.severityFailed > .cell:first-child::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 {
+.dividerLeft,
+.dividerRight {
   position: relative;
 }
 
+.headerCell.dividerLeft,
+.headerCell.dividerRight {
+  position: sticky;
+}
+
 .dividerLeft::before {
   content: '';
   position: absolute;
@@ -507,10 +453,6 @@
   background: var(--table-divider);
 }
 
-.dividerRight {
-  position: relative;
-}
-
 .dividerRight::after {
   content: '';
   position: absolute;
@@ -520,20 +462,3 @@
   width: 1px;
   background: var(--table-divider);
 }
-
-.newRow {
-  animation: tableRowFadeIn 1000ms ease-out;
-}
-
-.newRow {
-  animation: tableRowFadeIn 600ms ease-out;
-}
-
-@keyframes tableRowFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

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';
@@ -6,6 +6,7 @@ export interface ColumnItem<T> {
     id: string;
     header: string | (() => ReactNode);
     accessor?: keyof T;
+    width?: number | string;
     sortable?: boolean;
     sortFunction?: (a: T, b: T) => -1 | 0 | 1;
     render?: (item: T) => ReactNode;
@@ -40,7 +41,8 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     viewMode?: ViewMode;
     striped?: boolean;
     fillViewport?: boolean;
-    gridTemplateColumns?: string;
+    tableWidth?: number;
+    tableRootRef?: Ref<HTMLDivElement>;
     toolbar?: ReactNode;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     take?: number;

package/dist/components/table/TanstackTable.js

@@ -4,7 +4,8 @@ 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, buildDistributedGridTemplateColumns, } from './tanstackTable.utils';
+import { DEFAULT_COLUMN_PX } from './table.utils';
+import { buildDistributedColumnWidths, buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, } 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;
@@ -47,34 +48,10 @@ export function TanstackTable(props) {
         defaultColumn: {
             enableResizing: true,
             minSize: 80,
-            size: 180,
+            size: DEFAULT_COLUMN_PX,
         },
     });
-    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 handleSortChange = React.useCallback((column, direction) => {
-        const next = direction == null ? [] : [{ id: column.id, desc: direction === 'desc' }];
-        if (optimisticSortingUi)
-            setUiSorting(next);
-        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
-    }, [optimisticSortingUi, onSortingChange]);
-    const headerExtras = React.useCallback(({ index }) => {
-        var _a, _b, _c, _d;
-        const headerGroups = table.getHeaderGroups();
-        const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
-        const header = leafHeaders[index];
-        if (!header)
-            return null;
-        const canResize = (_c = (_b = (_a = header.column).getCanResize) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
-        const handler = (_d = header.getResizeHandler) === null || _d === void 0 ? void 0 : _d.call(header);
-        if (!canResize || !handler)
-            return null;
-        return _jsx(ColumnResizer, { id: header.column.id, handler: handler });
-    }, [table]);
-    const hasSelection = Boolean(selectedRows && onRowSelect && dataKey);
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         const el = containerRef.current;
         if (!el)
             return;
@@ -91,15 +68,47 @@ export function TanstackTable(props) {
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    const gridTemplateColumns = React.useMemo(() => {
-        return buildDistributedGridTemplateColumns({
+    const distributedLayout = React.useMemo(() => {
+        if (availableWidth == null)
+            return null;
+        return buildDistributedColumnWidths({
             table,
-            allowedIds,
-            hasSelection,
+            hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
             defaultMinPx: 80,
             columnSizing,
             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 }) }));
+    }, [table, selectedRows, onRowSelect, dataKey, columnSizing, availableWidth]);
+    const resolvedLayout = React.useMemo(() => {
+        const next = {};
+        table.getVisibleLeafColumns().forEach((column) => {
+            next[column.id] = {
+                width: distributedLayout === null || distributedLayout === void 0 ? void 0 : distributedLayout.widths[column.id],
+            };
+        });
+        return next;
+    }, [table, distributedLayout]);
+    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout), [columns, columnVisibility, resolvedLayout]);
+    const visibleData = table.getRowModel().rows.map(r => r.original);
+    const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
+    const handleSortChange = React.useCallback((column, direction) => {
+        const next = direction == null ? [] : [{ id: column.id, desc: direction === 'desc' }];
+        if (optimisticSortingUi)
+            setUiSorting(next);
+        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
+    }, [optimisticSortingUi, onSortingChange]);
+    const headerExtras = React.useCallback(({ index }) => {
+        var _a, _b, _c, _d;
+        const headerGroups = table.getHeaderGroups();
+        const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+        const header = leafHeaders[index];
+        if (!header)
+            return null;
+        const canResize = (_c = (_b = (_a = header.column).getCanResize) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
+        const handler = (_d = header.getResizeHandler) === null || _d === void 0 ? void 0 : _d.call(header);
+        if (!canResize || !handler)
+            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 }));
 }

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

@@ -1,11 +1,10 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { ViewMode } from '../../../hooks/useTableSettings';
 import type { ColumnItem } from '../Table.types';
 type Props<T extends Record<string, any>> = {
     data: T[];
     dataKey: keyof T;
     columns: ColumnItem<T>[];
-    gridStyle: CSSProperties;
     striped?: boolean;
     selectedRows?: Set<number | string>;
     hasSelection: boolean;
@@ -17,5 +16,5 @@ type Props<T extends Record<string, any>> = {
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, gridStyle, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
+export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableBody.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
 import { TableRow } from './TableRow';
-export function TableBody({ data, dataKey, columns, gridStyle, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
-    return (_jsx("div", { className: cx(styles.body, striped && styles.striped), role: "rowgroup", children: data.map(row => {
+export function TableBody({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
+    return (_jsx("tbody", { className: cx(styles.body, striped && styles.striped), children: data.map(row => {
             const rowId = row[dataKey];
-            return (_jsx(TableRow, { row: row, rowId: rowId, columns: columns, gridStyle: gridStyle, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }, `gridRow-${rowId}`));
+            return (_jsx(TableRow, { row: row, rowId: rowId, columns: columns, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }, `gridRow-${rowId}`));
         }) }));
 }

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

@@ -1,8 +1,7 @@
-import React, { type CSSProperties, type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import type { ColumnItem, HeaderExtrasArgs, SortDirection } from '../Table.types';
 type Props<T> = {
     columns: ColumnItem<T>[];
-    gridStyle: CSSProperties;
     hasSelection: boolean;
     selectionMode: 'single' | 'multiple';
     allRowsSelected?: boolean;
@@ -12,5 +11,5 @@ type Props<T> = {
     onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
 };
-export declare function TableHeader<T>({ columns, gridStyle, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableHeader.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TableHeaderCell } from './TableHeaderCell';
 import { TableSelectionCell } from './TableSelectionCell';
 import styles from '../Table.module.css';
-export function TableHeader({ columns, gridStyle, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, }) {
-    return (_jsxs("div", { className: styles.headerRow, style: gridStyle, role: "row", children: [hasSelection ? (_jsx(TableSelectionCell, { isHeader: true, multiple: selectionMode === 'multiple', checked: allRowsSelected, onToggle: checked => onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(checked) })) : null, columns.map((column, index) => (_jsx(TableHeaderCell, { column: column, index: index, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, extraContent: headerExtras === null || headerExtras === void 0 ? void 0 : headerExtras({ column, index }) }, column.id)))] }));
+export function TableHeader({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, }) {
+    return (_jsx("thead", { className: styles.header, children: _jsxs("tr", { className: styles.headerRow, children: [hasSelection ? (_jsx(TableSelectionCell, { isHeader: true, multiple: selectionMode === 'multiple', checked: allRowsSelected, onToggle: checked => onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(checked) })) : null, columns.map((column, index) => (_jsx(TableHeaderCell, { column: column, index: index, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, extraContent: headerExtras === null || headerExtras === void 0 ? void 0 : headerExtras({ column, index }) }, column.id)))] }) }));
 }

package/dist/components/table/components/TableHeaderCell.js

@@ -15,10 +15,10 @@ 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("div", { className: cx(styles.headerCell, dividerClass), role: "columnheader", "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, 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();
                             handleToggleSort();
-                        }, children: [_jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }), _jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [active && sortDirection === 'asc' && _jsx(ArrowUp, {}), active && sortDirection === 'desc' && _jsx(ArrowDown, { className: styles.descending }), !active && _jsx(ArrowDown, { className: `${styles.descending} ${styles.inActiveSort}` })] })] })) : (_jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) })) }) }), extraContent != null ? _jsx("div", { className: styles.thOverlayExtras, children: extraContent }) : null] }, column.id));
+                        }, children: [_jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }), _jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [active && sortDirection === 'asc' && _jsx(ArrowUp, {}), active && sortDirection === 'desc' && _jsx(ArrowDown, {}), !active && _jsx(ArrowDown, { className: styles.inActiveSort })] })] })) : (_jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) })) }) }), extraContent != null ? _jsx("div", { className: styles.thOverlayExtras, children: extraContent }) : null] }, column.id));
 }

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

@@ -1,10 +1,9 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { ColumnItem } from '../Table.types';
 type Props<T> = {
     rows: number;
     columns: ColumnItem<T>[];
     hasSelection: boolean;
-    gridStyle: CSSProperties;
 };
-export declare function TableLoadingBody<T>({ rows, columns, hasSelection, gridStyle, }: Props<T>): ReactNode;
+export declare function TableLoadingBody<T>({ rows, columns, hasSelection }: Props<T>): ReactNode;
 export {};