@dbcdk/react-components 0.0.25 → 0.0.27

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/forms/checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import { Check } from 'lucide-react';
 import { useId, useState } from 'react';
 import styles from './Checkbox.module.css';
 import { InputContainer } from '../input-container/InputContainer';
-export function Checkbox({ checked: controlled, onChange, variant = 'outlined', disabled, label, size = 'md', modified, containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
+export function Checkbox({ checked: controlled, onChange, variant = 'default', disabled, label, size = 'md', modified, containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
     const [internal, setInternal] = useState(false);
     const isChecked = controlled !== null && controlled !== void 0 ? controlled : internal;
     const generatedId = useId();

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -50,10 +50,11 @@
   pointer-events: none;
 }
 
-.outlined.checked {
-  background-color: var(--opac-bg-default);
+.default {
+  background-color: var(--color-bg-toolbar);
+  border-color: var(--color-bg-toolbar);
   &:not(:hover) {
-    border-color: transparent;
+    border-color: var(--color-bg-toolbar);
   }
 
   .icon {
@@ -61,6 +62,18 @@
   }
 }
 
+.outlined.checked {
+  background-color: transparent;
+  border-color: var(--color-border-default);
+  &:not(:hover) {
+    border-color: var(--color-brand);
+  }
+
+  .icon {
+    color: var(--color-brand);
+  }
+}
+
 .success.checked {
   background-color: var(--color-status-success);
   &:not(:hover) {

package/dist/components/forms/select/Select.js

@@ -112,7 +112,7 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
                 returnFocus: true, trigger: (toggle, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
                         resetActiveToSelected();
                         toggle(e);
-                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
                             ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
                             : opt.value === selectedValue;

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/menu/Menu.js

@@ -57,7 +57,7 @@ const MenuItem = React.forwardRef(({ children, active, disabled, className, item
 });
 MenuItem.displayName = 'Menu.Item';
 const MenuCheckItem = React.forwardRef(({ label, checked, disabled, onCheckedChange, className, ...liProps }, ref) => {
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { noContainer: true, checked: checked, disabled: disabled, label: label, onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { variant: "default", size: "md", noContainer: true, checked: checked, disabled: disabled, label: label, onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
 });
 MenuCheckItem.displayName = 'Menu.CheckItem';
 const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {

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/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -9,7 +9,6 @@
   inline-size: var(--sidebar-width);
   box-sizing: border-box;
   border-inline-end: var(--border-width-thin) solid var(--color-border-default);
-
   transition:
     width var(--transition-fast) var(--ease-standard),
     inline-size var(--transition-fast) var(--ease-standard);

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -11,6 +11,7 @@
   cursor: pointer;
   position: relative;
   border-radius: var(--border-radius-default);
+  user-select: none;
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);

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

@@ -1,65 +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;
-    animateNewRows?: boolean;
-};
-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, animateNewRows, ...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,170 +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 { useAnimatedNewRowIds } from './hooks/useAnimatedRowIds';
+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, animateNewRows = true, ...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);
-    const newRowIds = useAnimatedNewRowIds({
-        data,
-        dataKey,
-        enabled: animateNewRows,
-        animationDurationMs: 1000,
-    });
+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 = String(row[dataKey]);
-            const isNewRow = animateNewRows && newRowIds.has(rowId);
-            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 : '',
-                    isNewRow ? styles.newRow : '',
-                ]
-                    .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,14 +186,40 @@
   text-align: center;
 }
 
-.selectionCell {
-  padding-block: inherit !important;
-  padding-inline: 0 !important;
+.headerCell.selectionCell,
+.cell.selectionCell {
   overflow: visible !important;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  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);
+}
+
+.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 {
@@ -361,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 {