@dbcdk/react-components 0.0.26 → 0.0.28

package/dist/components/__stories__/_data/table.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import { ColumnItem } from '../../../components/table/Table';
+import { ColumnItem } from '../../../components/table/Table.types';
 type HarvestRunRow = {
     runId: string;
     source: string;

package/dist/components/__stories__/_data/table.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Chip } from '../../../components/chip/Chip';
+import { Circle } from '../../../components/circle/Circle';
 import { Table } from '../../../components/table/Table';
 const sources = ['onix.vendor-x', 'onix.vendor-y', 'cover.provider-z'];
 const statuses = ['Completed', 'Running', 'Failed'];
@@ -40,10 +40,16 @@ export const STORY_TABLE_COLUMNS = [
         header: 'Status',
         accessor: 'status',
         sortable: true,
-        render: (row) => (_jsxs("span", { className: "dbc-flex dbc-flex-row dbc-flex-wrap dbc-gap-xs", children: [row.status === 'Completed' && (_jsx(Chip, { size: "sm", severity: "success", children: "Fuldf\u00F8rt" })), row.status === 'Running' && (_jsx(Chip, { size: "sm", severity: "info", children: "K\u00F8rer" })), row.status === 'Failed' && (_jsx(Chip, { size: "sm", severity: "error", children: "Fejlet" }))] })),
+        render: (row) => (_jsxs("span", { className: "dbc-flex dbc-flex-row dbc-flex-wrap dbc-gap-xs", children: [row.status === 'Completed' && (_jsx(Circle, { size: "xs", severity: "success", children: "Fuldf\u00F8rt" })), row.status === 'Running' && (_jsx(Circle, { pulse: true, size: "xs", severity: "info", children: "K\u00F8rer" })), row.status === 'Failed' && (_jsx(Circle, { size: "xs", severity: "error", children: "Fejlet" }))] })),
     },
-    { id: 'updated', header: 'Opdateret', accessor: 'updated', sortable: true },
-    { id: 'warnings', header: 'Advarsler', accessor: 'warnings', sortable: true },
-    { id: 'failed', header: 'Fejlet', accessor: 'failed', sortable: true },
+    {
+        id: 'updated',
+        header: 'Opdateret',
+        accessor: 'updated',
+        sortable: true,
+        align: 'right',
+    },
+    { id: 'warnings', header: 'Advarsler', accessor: 'warnings', sortable: true, align: 'right' },
+    { id: 'failed', header: 'Fejlet', accessor: 'failed', sortable: true, align: 'right' },
 ];
 export const SampleTable = () => (_jsx(Table, { fillViewport: true, data: STORY_TABLE_DATA(), columns: STORY_TABLE_COLUMNS, dataKey: "runId", variant: "embedded" }));

package/dist/components/accordion/Accordion.module.css

@@ -10,9 +10,9 @@
 
 /* Size variables (consumed by AccordionRow) */
 .sm {
-  --acc-trigger-py: var(--spacing-sm);
-  --acc-trigger-px: var(--spacing-md);
-  --acc-content-py: var(--spacing-sm);
+  --acc-trigger-py: var(--spacing-xs);
+  --acc-trigger-px: var(--spacing-sm);
+  --acc-content-py: var(--spacing-xs);
 }
 
 .md {

package/dist/components/accordion/components/AccordionRow.module.css

@@ -34,7 +34,6 @@
   min-width: 0;
   flex: 1 1 auto;
   overflow: hidden;
-  justify-content: space-between;
 }
 
 .icon {
@@ -43,6 +42,11 @@
   align-items: center;
 }
 
+.icon svg {
+  height: var(--icon-size-sm);
+  width: var(--icon-size-sm);
+}
+
 .chevron {
   width: var(--icon-size-md);
   height: var(--icon-size-md);

package/dist/components/headline/Headline.module.css

@@ -6,19 +6,25 @@
   max-width: 100%;
 }
 
-/* Base headline: inherit colour from parent surface */
+/* Base headline */
 .headline {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
-  font-weight: var(--font-weight, var(--font-weight-bold));
+
+  /* Typography */
+  font-weight: var(--font-weight-medium, 500);
   letter-spacing: var(--letter-spacing-tight);
-  color: inherit;
   line-height: var(--line-height-tight);
+  color: inherit;
+
+  /* Behaviour */
   transition: color var(--transition-fast) var(--ease-standard);
+  min-width: 0; /* required for truncation inside flex */
 }
 
+/* Tone overrides */
 .tone-dark .headline {
   color: var(--color-fg-default);
 }
@@ -31,6 +37,7 @@
   margin: 0;
 }
 
+/* Marker variant */
 .headline.marker {
   padding-inline-start: calc(var(--border-width-thick) + var(--spacing-sm));
 }
@@ -48,8 +55,7 @@
   pointer-events: none;
 }
 
-/* Subheadline inherits colour but is slightly softened,
-   so it works on both light and dark text surfaces. */
+/* Subheadline */
 .subHeadline {
   color: inherit;
   opacity: 0.85;
@@ -58,55 +64,20 @@
   line-height: var(--line-height-normal);
 }
 
-.headline {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  font-weight: var(--font-weight, var(--font-weight-bold));
-  letter-spacing: var(--letter-spacing-tight);
-  color: inherit;
-  line-height: var(--line-height-tight);
-  transition: color var(--transition-fast) var(--ease-standard);
-
-  /* Needed so truncation works inside flex parents */
-  min-width: 0;
-}
-
-/* Truncated variant (single line with ellipsis) */
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.headline {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  font-weight: var(--font-weight, var(--font-weight-bold));
-  letter-spacing: var(--letter-spacing-tight);
-  color: inherit;
-  line-height: var(--line-height-tight);
-  transition: color var(--transition-fast) var(--ease-standard);
-
-  /* helps inside flex parents */
-  min-width: 0;
-}
-
+/* Icon */
 .icon {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
 }
 
-/* text wrapper must be the shrinkable element */
+/* Text wrapper (allows shrinking inside flex layouts) */
 .text {
-  min-width: 0;
   flex: 1 1 auto;
+  min-width: 0;
 }
 
+/* Text behaviour */
 .truncate {
   overflow: hidden;
   white-space: nowrap;

package/dist/components/nav-bar/NavBar.module.css

@@ -46,7 +46,7 @@
   font-size: var(--font-size-sm);
   text-decoration: none;
   border-radius: var(--border-radius-default);
-  padding-block: calc(var(--spacing-xs) + var(--density));
+  padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-sm);
   transition:
     background-color var(--transition-fast) var(--ease-standard),

package/dist/components/panel/Panel.module.css

@@ -1,5 +1,5 @@
 .container {
-  border: 1px solid var(--color-border-strong);
+  border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-default);
   background-color: var(--color-bg-surface);
   box-sizing: border-box;
@@ -8,7 +8,7 @@
 }
 
 .header {
-  border-bottom: 1px solid var(--color-border-strong);
+  border-bottom: var(--border-width-thin) solid var(--color-border-default);
 }
 
 .content {

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

@@ -1,64 +1,3 @@
-import type { HTMLAttributes, JSX, ReactNode } from 'react';
-import { PageChangeEvent } from '../../components/pagination/Pagination';
-import { Severity } from '../../constants/severity.types';
-import { ViewMode } from '../../hooks/useTableSettings';
-import { TableEmptyConfig } from './components/empty-state/EmptyState';
-import { SortDirection } from './table.utils';
-export interface ColumnItem<T> {
-    id: string;
-    header: string | (() => ReactNode);
-    accessor?: keyof T;
-    sortable?: boolean;
-    sortFunction?: (a: T, b: T) => -1 | 0 | 1;
-    render?: (item: T) => ReactNode;
-    hidden?: boolean;
-    align?: 'left' | 'right' | 'center';
-    verticalAlign?: 'top' | 'middle' | 'bottom';
-    divider?: 'right' | 'left';
-    allowWrap?: boolean;
-    emptyPlaceholder?: ReactNode;
-    canHide?: boolean;
-    severity?: any;
-}
-type HeaderExtrasArgs<T> = {
-    column: ColumnItem<T>;
-    index: number;
-};
-export type TableVariant = 'primary' | 'embedded';
-export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseEnter'> & {
-    data: T[];
-    dataKey: keyof T;
-    columns: ColumnItem<T>[];
-    selectedRows?: Set<number | string>;
-    selectionMode?: 'single' | 'multiple';
-    allRowsSelected?: boolean;
-    onRowClick?: (row: T) => void;
-    onRowMouseEnter?: (row: T) => void;
-    onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
-    onSelectAllRows?: (isSelected: boolean) => void;
-    onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
-    sortById?: string;
-    sortDirection?: SortDirection;
-    loading?: boolean;
-    headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
-    gridTemplateColumns?: string;
-    toolbar?: ReactNode;
-    striped?: boolean;
-    fillViewport?: boolean;
-    viewportBottomOffset?: number;
-    viewportMin?: number;
-    viewportIncludeMarginTop?: boolean;
-    take?: number;
-    skip?: number;
-    paginationPlacement?: 'top' | 'bottom';
-    totalItemsCount?: number;
-    onPageChange?: (e: PageChangeEvent) => void;
-    variant?: TableVariant;
-    size?: 'sm' | 'md';
-    getRowSeverity?: (row: T) => Severity | undefined;
-    showFirstLast?: boolean;
-    viewMode?: ViewMode;
-    emptyConfig?: TableEmptyConfig;
-};
-export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, onRowMouseEnter, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }: TableProps<T>): JSX.Element;
-export {};
+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, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;

package/dist/components/table/Table.js

@@ -1,161 +1,31 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
-import { Checkbox } from '../../components/forms/checkbox/Checkbox';
 import { Pagination } from '../../components/pagination/Pagination';
-import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-import { SeverityBgColor } from '../../constants/severity';
 import { TableEmptyState } from './components/empty-state/EmptyState';
+import { TableBody } from './components/TableBody';
+import { TableHeader } from './components/TableHeader';
+import { TableLoadingBody } from './components/TableLoadingBody';
+import { cx } from './table.classes';
 import styles from './Table.module.css';
-import { getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isModifierClick, shouldAllowWrap, shouldToggleOnKey, isActiveSort, } from './table.utils';
-function buildDefaultGridTemplate(args) {
-    const { hasSelection, colCount } = args;
-    const parts = [];
-    if (hasSelection)
-        parts.push('34px');
-    for (let i = 0; i < colCount; i++)
-        parts.push('minmax(120px, 1fr)');
-    return parts.join(' ');
-}
-export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, onRowMouseEnter, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport = false, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }) {
-    void viewportBottomOffset;
-    void viewportMin;
-    void viewportIncludeMarginTop;
-    const filteredColumns = useMemo(() => getVisibleColumns(columns), [columns]);
-    const handlePageChange = useCallback((e) => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e), [onPageChange]);
-    const hasSelection = Boolean(selectedRows && onRowSelect && dataKey);
+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, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
+    const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
+    const hasSelection = Boolean(selectedRows && onRowSelect);
     const template = useMemo(() => {
-        return (gridTemplateColumns !== null && gridTemplateColumns !== void 0 ? gridTemplateColumns : buildDefaultGridTemplate({ hasSelection, colCount: filteredColumns.length }));
-    }, [gridTemplateColumns, hasSelection, filteredColumns.length]);
+        return (gridTemplateColumns !== null && gridTemplateColumns !== void 0 ? gridTemplateColumns : buildDefaultGridTemplate({
+            hasSelection,
+            colCount: visibleColumns.length,
+        }));
+    }, [gridTemplateColumns, hasSelection, visibleColumns.length]);
     const gridStyle = useMemo(() => ({ ['--grid-template']: template }), [template]);
-    const headerEl = (_jsxs("div", { className: styles.headerRow, style: gridStyle, role: "row", children: [hasSelection && (_jsx("div", { className: `${styles.headerCell} ${styles.selectionCell}`, role: "columnheader", children: selectionMode === 'multiple' ? (_jsx(Checkbox, { size: "sm", variant: "primary", checked: allRowsSelected, onChange: checked => onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(checked) })) : null })), filteredColumns.map((column, index) => {
-                var _a;
-                const active = isActiveSort(sortById, column.id);
-                const ariaSort = getAriaSort(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
-                const align = (_a = column.align) !== null && _a !== void 0 ? _a : 'left';
-                const extraContent = headerExtras === null || headerExtras === void 0 ? void 0 : headerExtras({ column, index });
-                const toggleSort = () => {
-                    if (!onSortChange || !column.sortable)
-                        return;
-                    const nextDir = getNextSortDirection(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
-                    onSortChange(column, nextDir);
-                };
-                const dividerClass = column.divider === 'left'
-                    ? styles.dividerLeft
-                    : column.divider === 'right'
-                        ? styles.dividerRight
-                        : '';
-                return (_jsxs("div", { className: [styles.headerCell, dividerClass].filter(Boolean).join(' '), role: "columnheader", "aria-sort": ariaSort, "data-align": align, "data-divider": column.divider, children: [_jsx("div", { className: [
-                                styles.thInner,
-                                align === 'right' ? styles.thInnerRight : '',
-                                align === 'center' ? styles.thInnerCenter : '',
-                            ]
-                                .filter(Boolean)
-                                .join(' '), children: _jsx("div", { className: [
-                                    styles.thMain,
-                                    align === 'right' ? styles.thMainRight : '',
-                                    align === 'center' ? styles.thMainCenter : '',
-                                ]
-                                    .filter(Boolean)
-                                    .join(' '), children: column.sortable ? (_jsxs("button", { type: "button", className: [
-                                        styles.thButton,
-                                        align === 'right' ? styles.thButtonRight : '',
-                                        align === 'center' ? styles.thButtonCenter : '',
-                                    ]
-                                        .filter(Boolean)
-                                        .join(' '), onClick: toggleSort, onKeyDown: e => {
-                                        if (shouldToggleOnKey(e.key)) {
-                                            e.preventDefault();
-                                            toggleSort();
-                                        }
-                                    }, children: [_jsx("span", { className: [
-                                                styles.thLabel,
-                                                align === 'right' ? styles.thLabelRight : '',
-                                                align === 'center' ? styles.thLabelCenter : '',
-                                            ]
-                                                .filter(Boolean)
-                                                .join(' '), 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: [
-                                        styles.thLabel,
-                                        align === 'right' ? styles.thLabelRight : '',
-                                        align === 'center' ? styles.thLabelCenter : '',
-                                    ]
-                                        .filter(Boolean)
-                                        .join(' '), children: getHeaderLabel(column.header) })) }) }), extraContent != null ? (_jsx("div", { className: styles.thOverlayExtras, children: extraContent })) : null] }, column.id));
-            })] }));
-    const loadingBodyEl = (_jsx("div", { className: styles.body, role: "rowgroup", children: Array.from({ length: take !== null && take !== void 0 ? take : 5 }).map((_, rowIndex) => (_jsxs("div", { className: styles.row, style: gridStyle, role: "row", children: [hasSelection ? (_jsx("div", { className: `${styles.cell} ${styles.selectionCell}`, role: "cell" })) : null, filteredColumns.map(column => {
-                    var _a;
-                    const dividerClass = column.divider === 'left'
-                        ? styles.dividerLeft
-                        : column.divider === 'right'
-                            ? styles.dividerRight
-                            : '';
-                    return (_jsx("div", { className: [styles.cell, dividerClass].filter(Boolean).join(' '), role: "cell", "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, children: _jsx("div", { className: styles.cellValueEllipsis, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) }) }, column.id));
-                })] }, `loading-row-${rowIndex}`))) }));
-    const dataBodyEl = (_jsx("div", { className: `${styles.body} ${striped ? styles.striped : ''}`, role: "rowgroup", children: data.map(row => {
-            const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
-            const rowId = row[dataKey];
-            const isSelected = Boolean(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId));
-            return (_jsxs("div", { className: [
-                    styles.row,
-                    onRowClick ? styles.clickableRow : '',
-                    isSelected ? styles.selectedRow : '',
-                    rowSeverity ? styles.severity : '',
-                ]
-                    .filter(Boolean)
-                    .join(' '), style: {
-                    ...gridStyle,
-                    ['--row-severity-color']: rowSeverity
-                        ? SeverityBgColor[rowSeverity]
-                        : undefined,
-                }, role: "row", tabIndex: onRowClick ? 0 : -1, onKeyDown: e => {
-                    if (!onRowClick)
-                        return;
-                    if (shouldToggleOnKey(e.key)) {
-                        e.preventDefault();
-                        onRowClick(row);
-                    }
-                }, onMouseEnter: () => onRowMouseEnter === null || onRowMouseEnter === void 0 ? void 0 : onRowMouseEnter(row), onClick: e => {
-                    const canSelect = Boolean(selectedRows && onRowSelect && dataKey);
-                    if (isModifierClick(e) && canSelect) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        onRowSelect(rowId, !selectedRows.has(rowId));
-                        return;
-                    }
-                    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
-                }, children: [hasSelection && (_jsx("div", { className: `${styles.cell} ${styles.selectionCell}`, role: "cell", children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(rowId), size: "sm", onChange: (checked, e) => {
-                                e.stopPropagation();
-                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
-                            } }) })), filteredColumns.map(column => {
-                        var _a;
-                        const dividerClass = column.divider === 'left'
-                            ? styles.dividerLeft
-                            : column.divider === 'right'
-                                ? styles.dividerRight
-                                : '';
-                        const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-                        const cellValue = getCellDisplayValue(row, column);
-                        return (_jsx("div", { className: [
-                                styles.cell,
-                                allowWrap ? styles.allowWrap : styles.nowrap,
-                                dividerClass,
-                            ]
-                                .filter(Boolean)
-                                .join(' '), role: "cell", "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, children: allowWrap ? (cellValue) : (_jsx("div", { className: styles.cellValueEllipsis, children: cellValue })) }) }, column.id));
-                    })] }, `gridRow-${rowId}`));
-        }) }));
-    const bodyContent = loading && !data.length ? loadingBodyEl : dataBodyEl;
-    const tableClassName = [
-        styles.tableRoot,
-        styles[variant],
-        styles[size],
-        getRowSeverity ? styles.severityTable : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    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: headerEl }), _jsx("div", { className: styles.bodyScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (bodyContent) })] }) }));
-    const paginationEl = onPageChange && data.length > 0 ? (_jsx("div", { className: `${styles.paginationSlot} ${paginationPlacement === 'top' ? styles.paginationSlotTop : ''}`, children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast }) })) : null;
+    const handlePageChange = useCallback((e) => {
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
+    }, [onPageChange]);
+    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, 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 }) })) : 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) })] }) }));
     if (fillViewport) {
         return (_jsxs("div", { className: styles.fillViewportRoot, style: {
                 flexDirection: paginationPlacement === 'top' ? 'column-reverse' : 'column',

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

@@ -186,17 +186,42 @@
   text-align: center;
 }
 
-.selectionCell {
+.headerCell.selectionCell,
+.cell.selectionCell {
   overflow: visible !important;
   display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
+  align-items: center;
+  justify-content: center;
   min-width: 0;
+  padding-inline: 0;
+  padding-block: 0;
+  cursor: pointer;
+}
+
+.headerCell.selectionCell:hover button,
+.cell.selectionCell:hover button {
+  border-color: var(--color-fg-default);
+}
+
+.headerCell.selectionCell:focus-within > button,
+.cell.selectionCell:focus-within > button {
+  border-color: var(--color-fg-default);
 }
 
-.headerCell.selectionCell {
+.selectionHitArea {
+  display: inline-flex;
   align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: var(--component-size-md);
+  padding: 4px;
 }
+
+.sm .selectionHitArea {
+  min-block-size: var(--component-size-sm);
+}
+
 .clickableRow {
   cursor: pointer;
 }
@@ -362,11 +387,18 @@
   --row-rail-offset: calc(var(--row-rail-width) + var(--row-rail-gap));
   --row-rail-inset-block: 1px;
   --row-rail-radius: 0 2px 2px 0;
+  --selection-rail-compensation: calc(var(--row-rail-offset) / 2);
 }
 
-.severityTable .headerRow .selectionCell,
+.severityTable .headerCell.selectionCell,
 .severityTable .row .selectionCell {
-  padding-inline-start: var(--row-rail-offset) !important;
+  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);
 }
 
 .severityTable .row.severity {

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

@@ -0,0 +1,58 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { PageChangeEvent } from '../../components/pagination/Pagination';
+import type { Severity } from '../../constants/severity.types';
+import type { ViewMode } from '../../hooks/useTableSettings';
+export interface ColumnItem<T> {
+    id: string;
+    header: string | (() => ReactNode);
+    accessor?: keyof T;
+    sortable?: boolean;
+    sortFunction?: (a: T, b: T) => -1 | 0 | 1;
+    render?: (item: T) => ReactNode;
+    hidden?: boolean;
+    align?: 'left' | 'right' | 'center';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    divider?: 'right' | 'left';
+    allowWrap?: boolean;
+    emptyPlaceholder?: ReactNode;
+    canHide?: boolean;
+    severity?: any;
+}
+export type HeaderExtrasArgs<T> = {
+    column: ColumnItem<T>;
+    index: number;
+};
+export type TableVariant = 'primary' | 'embedded';
+export type SortDirection = 'asc' | 'desc' | null;
+export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseEnter'> & {
+    data: T[];
+    dataKey: keyof T;
+    columns: ColumnItem<T>[];
+    selectedRows?: Set<number | string>;
+    selectionMode?: 'single' | 'multiple';
+    allRowsSelected?: boolean;
+    sortById?: string;
+    sortDirection?: SortDirection;
+    loading?: boolean;
+    emptyConfig?: any;
+    variant?: TableVariant;
+    size?: 'sm' | 'md';
+    viewMode?: ViewMode;
+    striped?: boolean;
+    fillViewport?: boolean;
+    gridTemplateColumns?: string;
+    toolbar?: ReactNode;
+    headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
+    take?: number;
+    skip?: number;
+    totalItemsCount?: number;
+    paginationPlacement?: 'top' | 'bottom';
+    showFirstLast?: boolean;
+    getRowSeverity?: (row: T) => Severity | undefined;
+    onRowClick?: (row: T) => void;
+    onRowMouseEnter?: (row: T) => void;
+    onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+    onSelectAllRows?: (isSelected: boolean) => void;
+    onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
+    onPageChange?: (e: PageChangeEvent) => void;
+};

package/dist/components/table/Table.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,6 @@
 import { type ColumnDef, type SortingState } from '@tanstack/react-table';
 import * as React from 'react';
-import { type TableProps, type TableVariant } from './Table';
+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'> & {

package/dist/components/table/TanstackTable.js

@@ -77,7 +77,6 @@ export function TanstackTable(props) {
             table,
             allowedIds,
             hasSelection,
-            selectionPx: 36,
             defaultMinPx: 80,
             columnSizing,
         });

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

@@ -0,0 +1,19 @@
+import type { CSSProperties, 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;
+    viewMode?: ViewMode;
+    getRowSeverity?: (row: T) => any;
+    onRowClick?: (row: T) => void;
+    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, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
+export {};

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

@@ -0,0 +1,10 @@
+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, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
+    return (_jsx("div", { className: cx(styles.body, striped && styles.striped), role: "rowgroup", children: data.map(row => {
+            const rowId = row[dataKey];
+            return (_jsx(TableRow, { row: row, rowId: rowId, columns: columns, gridStyle: gridStyle, selectedRows: selectedRows, hasSelection: hasSelection, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }, `gridRow-${rowId}`));
+        }) }));
+}

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type Props = {
+    align?: 'left' | 'right' | 'center';
+    divider?: 'left' | 'right';
+    allowWrap?: boolean;
+    children: ReactNode;
+};
+export declare function TableCell({ align, divider, allowWrap, children }: Props): ReactNode;
+export {};

package/dist/components/table/components/TableCell.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../table.classes';
+import styles from '../Table.module.css';
+export function TableCell({ align = 'left', divider, allowWrap, children }) {
+    const dividerClass = divider === 'left' ? styles.dividerLeft : divider === 'right' ? styles.dividerRight : '';
+    return (_jsx("div", { className: cx(styles.cell, allowWrap ? styles.allowWrap : styles.nowrap, dividerClass), role: "cell", "data-align": align, "data-divider": divider, children: _jsx("div", { className: styles.cellContent, children: allowWrap ? children : _jsx("div", { className: styles.cellValueEllipsis, children: children }) }) }));
+}

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

@@ -0,0 +1,16 @@
+import React, { type CSSProperties, 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;
+    onSelectAllRows?: (isSelected: boolean) => void;
+    sortById?: string;
+    sortDirection?: SortDirection;
+    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 {};

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

@@ -0,0 +1,7 @@
+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)))] }));
+}

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { ColumnItem, SortDirection } from '../Table.types';
+type Props<T> = {
+    column: ColumnItem<T>;
+    index: number;
+    sortById?: string;
+    sortDirection?: SortDirection;
+    onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
+    extraContent?: ReactNode;
+};
+export declare function TableHeaderCell<T>({ column, index, sortById, sortDirection, onSortChange, extraContent, }: Props<T>): ReactNode;
+export {};

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp } from 'lucide-react';
+import { cx, getAlignValue, getDividerClass, getHeaderAlignClasses } from '../table.classes';
+import styles from '../Table.module.css';
+import { getAriaSort, getHeaderLabel, getNextSortDirection, isActiveSort, shouldToggleOnKey, } from '../table.utils';
+export function TableHeaderCell({ column, index, sortById, sortDirection, onSortChange, extraContent, }) {
+    const active = isActiveSort(sortById, column.id);
+    const ariaSort = getAriaSort(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
+    const align = getAlignValue(column);
+    const dividerClass = getDividerClass(column);
+    const alignClasses = getHeaderAlignClasses(align);
+    const handleToggleSort = () => {
+        if (!column.sortable || !onSortChange)
+            return;
+        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 => {
+                            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));
+}

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

@@ -0,0 +1,10 @@
+import type { CSSProperties, 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 {};

package/dist/components/table/components/TableLoadingBody.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SkeletonLoaderItem } from '../../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import { cx } from '../table.classes';
+import styles from '../Table.module.css';
+export function TableLoadingBody({ rows, columns, hasSelection, gridStyle, }) {
+    return (_jsx("div", { className: styles.body, role: "rowgroup", children: Array.from({ length: rows }).map((_, rowIndex) => (_jsxs("div", { className: styles.row, style: gridStyle, role: "row", children: [hasSelection ? (_jsx("div", { className: cx(styles.cell, styles.selectionCell), role: "cell" })) : null, columns.map(column => {
+                    var _a;
+                    return (_jsx("div", { className: cx(styles.cell, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), role: "cell", "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, children: _jsx("div", { className: styles.cellValueEllipsis, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) }) }, column.id));
+                })] }, `loading-row-${rowIndex}`))) }));
+}

package/dist/components/table/components/TablePagination.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+import type { ViewMode } from '../../../hooks/useTableSettings';
+import type { ColumnItem } from '../Table.types';
+type Props<T extends Record<string, any>> = {
+    row: T;
+    rowId: string | number;
+    columns: ColumnItem<T>[];
+    gridStyle: CSSProperties;
+    selectedRows?: Set<number | string>;
+    hasSelection: boolean;
+    viewMode?: ViewMode;
+    getRowSeverity?: (row: T) => any;
+    onRowClick?: (row: T) => void;
+    onRowMouseEnter?: (row: T) => void;
+    onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+};
+export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, gridStyle, selectedRows, hasSelection, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
+export {};

package/dist/components/table/components/TableRow.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
+import { SeverityBgColor } from '../../../constants/severity';
+import { useTableRowInteractions } from '../hooks/useTableRowInteractions';
+import { cx } from '../table.classes';
+import styles from '../Table.module.css';
+import { getCellDisplayValue, shouldAllowWrap } from '../table.utils';
+export function TableRow({ row, rowId, columns, gridStyle, selectedRows, hasSelection, viewMode, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, }) {
+    var _a;
+    const isSelected = (_a = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId)) !== null && _a !== void 0 ? _a : false;
+    const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
+    const canSelect = Boolean(selectedRows && onRowSelect);
+    const { handleRowClick, handleRowKeyDown } = useTableRowInteractions({
+        row,
+        rowId,
+        isSelected,
+        canSelect,
+        onRowClick,
+        onRowSelect,
+    });
+    return (_jsxs("div", { className: cx(styles.row, onRowClick && styles.clickableRow, isSelected && styles.selectedRow, rowSeverity && styles.severity), style: {
+            ...gridStyle,
+            ['--row-severity-color']: rowSeverity
+                ? SeverityBgColor[rowSeverity]
+                : undefined,
+        }, role: "row", tabIndex: onRowClick ? 0 : -1, onKeyDown: handleRowKeyDown, onMouseEnter: () => onRowMouseEnter === null || onRowMouseEnter === void 0 ? void 0 : onRowMouseEnter(row), onClick: handleRowClick, children: [hasSelection ? (_jsx("div", { className: cx(styles.cell, styles.selectionCell), role: "cell", onClick: e => {
+                    e.stopPropagation();
+                    onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, !isSelected);
+                }, children: _jsx("div", { className: styles.selectionHitArea, children: _jsx(Checkbox, { variant: "primary", checked: isSelected, size: "sm", onChange: (checked, e) => {
+                            e.stopPropagation();
+                            onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
+                        } }) }) })) : null, columns.map(column => {
+                var _a;
+                const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
+                const cellValue = getCellDisplayValue(row, column);
+                return (_jsx("div", { className: cx(styles.cell, allowWrap ? styles.allowWrap : styles.nowrap, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), role: "cell", "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, children: allowWrap ? cellValue : _jsx("div", { className: styles.cellValueEllipsis, children: cellValue }) }) }, column.id));
+            })] }));
+}

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

@@ -0,0 +1,9 @@
+import React, { type JSX } from 'react';
+type Props = {
+    checked?: boolean;
+    isHeader?: boolean;
+    multiple?: boolean;
+    onToggle: (checked: boolean, e: React.MouseEvent | React.KeyboardEvent | any) => void;
+};
+export declare function TableSelectionCell({ checked, isHeader, multiple, onToggle }: Props): JSX.Element;
+export {};

package/dist/components/table/components/TableSelectionCell.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
+import { cx } from '../table.classes';
+import styles from '../Table.module.css';
+export function TableSelectionCell({ checked, isHeader, multiple, onToggle }) {
+    return (_jsx("div", { className: cx(styles.headerCell, styles.selectionCell), role: isHeader ? 'columnheader' : 'cell', onClick: e => {
+            if (isHeader && !multiple)
+                return;
+            e.stopPropagation();
+            onToggle(!checked, e);
+        }, children: isHeader && !multiple ? null : (_jsx("div", { className: styles.selectionHitArea, children: _jsx(Checkbox, { size: "sm", variant: "primary", checked: checked, onChange: (nextChecked, e) => {
+                    e.stopPropagation();
+                    onToggle(nextChecked, e);
+                } }) })) }));
+}

package/dist/components/table/hooks/useTableRowInteractions.d.ts

@@ -0,0 +1,15 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
+type UseTableRowInteractionsArgs<T> = {
+    row: T;
+    rowId: string | number;
+    isSelected: boolean;
+    canSelect: boolean;
+    onRowClick?: (row: T) => void;
+    onRowSelect?: (rowId: string | number, isSelected: boolean) => void;
+};
+type UseTableRowInteractionsReturn = {
+    handleRowClick: (e: MouseEvent<HTMLDivElement>) => void;
+    handleRowKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+};
+export declare function useTableRowInteractions<T>({ row, rowId, isSelected, canSelect, onRowClick, onRowSelect, }: UseTableRowInteractionsArgs<T>): UseTableRowInteractionsReturn;
+export {};

package/dist/components/table/hooks/useTableRowInteractions.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { isModifierClick, shouldToggleOnKey } from '../table.utils';
+export function useTableRowInteractions({ row, rowId, isSelected, canSelect, onRowClick, onRowSelect, }) {
+    const handleRowClick = useCallback((e) => {
+        if (isModifierClick(e) && canSelect) {
+            e.preventDefault();
+            e.stopPropagation();
+            onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, !isSelected);
+            return;
+        }
+        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+    }, [canSelect, isSelected, onRowClick, onRowSelect, row, rowId]);
+    const handleRowKeyDown = useCallback((e) => {
+        if (!onRowClick)
+            return;
+        if (!shouldToggleOnKey(e.key))
+            return;
+        e.preventDefault();
+        onRowClick(row);
+    }, [onRowClick, row]);
+    return {
+        handleRowClick,
+        handleRowKeyDown,
+    };
+}

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

@@ -0,0 +1,10 @@
+import type { ColumnItem } from './Table.types';
+export declare function cx(...values: Array<string | false | null | undefined>): string;
+export declare function getDividerClass<T>(column: ColumnItem<T>): string;
+export declare function getAlignValue<T>(column: ColumnItem<T>): 'left' | 'right' | 'center';
+export declare function getHeaderAlignClasses(align: 'left' | 'right' | 'center'): {
+    inner: string;
+    main: string;
+    button: string;
+    label: string;
+};

package/dist/components/table/table.classes.js

@@ -0,0 +1,23 @@
+import styles from './Table.module.css';
+export function cx(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function getDividerClass(column) {
+    if (column.divider === 'left')
+        return styles.dividerLeft;
+    if (column.divider === 'right')
+        return styles.dividerRight;
+    return '';
+}
+export function getAlignValue(column) {
+    var _a;
+    return (_a = column.align) !== null && _a !== void 0 ? _a : 'left';
+}
+export function getHeaderAlignClasses(align) {
+    return {
+        inner: cx(styles.thInner, align === 'right' && styles.thInnerRight, align === 'center' && styles.thInnerCenter),
+        main: cx(styles.thMain, align === 'right' && styles.thMainRight, align === 'center' && styles.thMainCenter),
+        button: cx(styles.thButton, align === 'right' && styles.thButtonRight, align === 'center' && styles.thButtonCenter),
+        label: cx(styles.thLabel, align === 'right' && styles.thLabelRight, align === 'center' && styles.thLabelCenter),
+    };
+}

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

@@ -1,8 +1,8 @@
-import type { CSSProperties, ReactNode } from 'react';
-import type { ColumnItem } from './Table';
+import type { ReactNode } from 'react';
+import type { ColumnItem } from './Table.types';
+export declare const SELECTION_COLUMN_PX: 40;
 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', 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';
@@ -14,4 +14,7 @@ export declare function isModifierClick(e: {
 }): boolean;
 export declare function shouldAllowWrap(columnAllowWrap: boolean | undefined, isRowSelected: boolean, viewMode?: 'wrapped' | string): boolean;
 export declare function getCellDisplayValue<T extends Record<string, any>>(row: T, column: ColumnItem<T>): ReactNode;
-export declare function getRowKey(rowId: string | number): string;
+export declare function buildDefaultGridTemplate(args: {
+    hasSelection: boolean;
+    colCount: number;
+}): string;

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

@@ -1,15 +1,6 @@
+export const SELECTION_COLUMN_PX = 40;
 export function getVisibleColumns(columns) {
-    return columns.filter(c => !c.hidden);
-}
-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),
-    };
+    return columns.filter(column => !column.hidden);
 }
 export function getHeaderLabel(header) {
     return typeof header === 'function' ? header() : header;
@@ -18,9 +9,7 @@ export function isActiveSort(sortById, columnId) {
     return sortById === columnId;
 }
 export function getAriaSort(sortable, active, direction) {
-    if (!sortable)
-        return 'none';
-    if (!active)
+    if (!sortable || !active || !direction)
         return 'none';
     return direction === 'asc' ? 'ascending' : 'descending';
 }
@@ -47,14 +36,19 @@ export function getCellDisplayValue(row, column) {
     const empty = (_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '';
     if (column.render) {
         const rendered = column.render(row);
-        return rendered || empty;
+        return rendered !== null && rendered !== void 0 ? rendered : empty;
     }
     if (column.accessor) {
         const value = row[column.accessor];
-        return value || empty;
+        return value !== null && value !== void 0 ? value : empty;
     }
-    return null;
-}
-export function getRowKey(rowId) {
-    return `tableRow-${String(rowId)}`;
+    return empty;
+}
+export function buildDefaultGridTemplate(args) {
+    const parts = [];
+    if (args.hasSelection)
+        parts.push(`${SELECTION_COLUMN_PX}px`);
+    for (let i = 0; i < args.colCount; i++)
+        parts.push('minmax(120px, 1fr)');
+    return parts.join(' ');
 }

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

@@ -1,5 +1,5 @@
 import type { ColumnDef, ColumnSizingState, SortingState, VisibilityState } from '@tanstack/react-table';
-import type { ColumnItem } from './Table';
+import { ColumnItem } from './Table.types';
 type AnyRecord = Record<string, any>;
 export declare function getColumnId<T>(def: ColumnDef<T, any>, index: number): string;
 export declare function buildColumnVisibilityFromVisibleIds<T>(defs: ReadonlyArray<ColumnDef<T, any>>, visibleColumnIds?: string[]): VisibilityState;
@@ -14,7 +14,6 @@ export declare function buildDistributedGridTemplateColumns(args: {
     table: any;
     allowedIds: Set<string>;
     hasSelection: boolean;
-    selectionPx: number;
     defaultMinPx: number;
     columnSizing: ColumnSizingState;
 }): string;

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

@@ -1,3 +1,4 @@
+import { SELECTION_COLUMN_PX } from './table.utils';
 export function getColumnId(def, index) {
     const d = def;
     if (d.id != null && String(d.id).length > 0)
@@ -92,11 +93,11 @@ function clamp(value, min, max) {
 }
 export function buildDistributedGridTemplateColumns(args) {
     var _a, _b, _c, _d;
-    const { table, allowedIds, hasSelection, selectionPx, defaultMinPx, columnSizing } = args;
+    const { table, allowedIds, hasSelection, defaultMinPx, columnSizing } = args;
     const parts = [];
     const leaf = table.getVisibleLeafColumns().filter((c) => allowedIds.has(c.id));
     if (hasSelection)
-        parts.push(`${selectionPx}px`);
+        parts.push(`${SELECTION_COLUMN_PX}px`);
     for (const c of leaf) {
         const def = c.columnDef;
         const meta = ((_b = ((_a = def.meta) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : {});

package/dist/utils/date/formatDate.d.ts

@@ -5,7 +5,7 @@
  * Examples:
  * - formatDate(new Date(), { userFriendlyLabel: true }) => "I dag"
  * - formatDate(new Date(), { userFriendlyLabel: true, showTime: true }) => "I dag, kl. 14:30"
- * - formatDate(date, { showTime: true }) => "10/03/2026 14:30"
+ * - formatDate(date, { showTime: true }) => "10.03.2026 14:30"
  *
  * @param date - The Date or date-parsable value to format
  * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"

package/dist/utils/date/formatDate.js

@@ -5,7 +5,7 @@
  * Examples:
  * - formatDate(new Date(), { userFriendlyLabel: true }) => "I dag"
  * - formatDate(new Date(), { userFriendlyLabel: true, showTime: true }) => "I dag, kl. 14:30"
- * - formatDate(date, { showTime: true }) => "10/03/2026 14:30"
+ * - formatDate(date, { showTime: true }) => "10.03.2026 14:30"
  *
  * @param date - The Date or date-parsable value to format
  * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"
@@ -44,7 +44,7 @@ export function formatDate(date, options = {}) {
     const day = pad(d.getDate());
     const month = pad(d.getMonth() + 1);
     const year = d.getFullYear();
-    const base = `${day}/${month}/${year}`;
+    const base = `${day}.${month}.${year}`;
     if (!showTime)
         return base;
     return `${base} ${formatTime()}`;

package/package.json

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