@dbcdk/react-components 0.0.12 → 0.0.14

package/dist/components/split-pane/SplitPane.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { SplitPaneProvider, useSplitPaneContext } from './provider/SplitPaneContext';
 import styles from './SplitPane.module.css';
 function clamp(n, min, max) {
@@ -11,68 +11,97 @@ export function SplitPane({ children, initialPrimarySize = 300, minPrimarySize =
 }
 function SplitPaneContainer({ children, showDivider, gutterSize, }) {
     const { direction, primarySize, containerRef } = useSplitPaneContext();
-    return (_jsx("div", { ref: containerRef, className: styles.container, "data-direction": direction, "data-divider": showDivider, style: {
-            '--split-pane-primary-size': `${primarySize}px`,
-            '--split-pane-gutter': `${gutterSize}px`,
-        }, children: children }));
+    const style = useMemo(() => ({
+        '--split-pane-primary-size': `${primarySize}px`,
+        '--split-pane-gutter': `${gutterSize}px`,
+    }), [primarySize, gutterSize]);
+    return (_jsx("div", { ref: containerRef, className: styles.container, "data-direction": direction, "data-divider": showDivider, style: style, children: children }));
 }
-/**
- * IMPORTANT:
- * This component now renders ONLY the primary content (scrollable).
- * The resizer lives in a dedicated <SplitPaneGutter /> so it never overlaps scrollbars.
- */
 export function SplitPanePrimary({ children }) {
     return _jsx("div", { className: styles.primary, children: children });
 }
+export function SplitPaneSecondary({ children }) {
+    return _jsx("div", { className: styles.secondary, children: children });
+}
 export function SplitPaneGutter() {
     const { direction, primarySize, setPrimarySize, minPrimarySize, minSecondarySize, containerRef } = useSplitPaneContext();
-    const isDraggingRef = useRef(false);
+    const draggingRef = useRef(false);
+    const pointerIdRef = useRef(null);
     const startPosRef = useRef(0);
     const startSizeRef = useRef(primarySize);
-    useEffect(() => {
-        if (!window) {
+    const maxPrimaryRef = useRef(Infinity);
+    const getClientPos = useCallback((e) => (direction === 'horizontal' ? e.clientX : e.clientY), [direction]);
+    const computeClamp = useCallback(() => {
+        const el = containerRef.current;
+        if (!el)
+            return { maxPrimary: Infinity, total: 0 };
+        const rect = el.getBoundingClientRect();
+        const total = direction === 'horizontal' ? rect.width : rect.height;
+        const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
+        return { maxPrimary, total };
+    }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+    const onPointerDown = useCallback((e) => {
+        const el = containerRef.current;
+        if (!el)
             return;
-        }
-        const onMove = (e) => {
-            if (!isDraggingRef.current)
-                return;
-            const el = containerRef.current;
-            if (!el)
-                return;
-            const rect = el.getBoundingClientRect();
-            const total = direction === 'horizontal' ? rect.width : rect.height;
-            const clientPos = direction === 'horizontal' ? e.clientX : e.clientY;
-            const delta = clientPos - startPosRef.current;
-            // Note: total includes gutter. That's fine because max clamps against secondary min.
-            const next = startSizeRef.current + delta;
-            const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
-            setPrimarySize(clamp(next, minPrimarySize, maxPrimary));
-        };
-        const onUp = () => {
-            if (!isDraggingRef.current)
-                return;
-            isDraggingRef.current = false;
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-        };
-        window.addEventListener('mousemove', onMove);
-        window.addEventListener('mouseup', onUp);
-        return () => {
-            if (window) {
-                window.removeEventListener('mousemove', onMove);
-                window.removeEventListener('mouseup', onUp);
-            }
-        };
-    }, [containerRef, direction, minPrimarySize, minSecondarySize, setPrimarySize]);
-    const handleMouseDown = (event) => {
-        isDraggingRef.current = true;
-        startPosRef.current = direction === 'horizontal' ? event.clientX : event.clientY;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const { maxPrimary } = computeClamp();
+        maxPrimaryRef.current = maxPrimary;
+        draggingRef.current = true;
+        pointerIdRef.current = e.pointerId;
+        startPosRef.current = getClientPos(e);
         startSizeRef.current = primarySize;
-        document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+        // UX: prevent text selection during drag
         document.body.style.userSelect = 'none';
-    };
-    return (_jsx("div", { className: styles.gutter, "aria-hidden": "true", children: _jsx("span", { className: styles.resizer, onMouseDown: handleMouseDown, role: "separator", "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(primarySize), tabIndex: 0 }) }));
-}
-export function SplitPaneSecondary({ children }) {
-    return _jsx("div", { className: styles.secondary, children: children });
+        document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+    }, [computeClamp, containerRef, direction, getClientPos, primarySize]);
+    const onPointerMove = useCallback((e) => {
+        if (!draggingRef.current)
+            return;
+        if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current)
+            return;
+        const delta = getClientPos(e) - startPosRef.current;
+        const next = startSizeRef.current + delta;
+        const maxPrimary = maxPrimaryRef.current;
+        setPrimarySize(clamp(next, minPrimarySize, maxPrimary));
+    }, [getClientPos, minPrimarySize, setPrimarySize]);
+    const endDrag = useCallback(() => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        pointerIdRef.current = null;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }, []);
+    const onPointerUp = useCallback(() => endDrag(), [endDrag]);
+    const onPointerCancel = useCallback(() => endDrag(), [endDrag]);
+    // Keyboard: arrows adjust size; Shift = bigger step; Home/End = min/max
+    const onKeyDown = useCallback((e) => {
+        const { maxPrimary } = computeClamp();
+        const step = e.shiftKey ? 32 : 8;
+        let next = null;
+        if (direction === 'horizontal') {
+            if (e.key === 'ArrowLeft')
+                next = primarySize - step;
+            if (e.key === 'ArrowRight')
+                next = primarySize + step;
+        }
+        else {
+            if (e.key === 'ArrowUp')
+                next = primarySize - step;
+            if (e.key === 'ArrowDown')
+                next = primarySize + step;
+        }
+        if (e.key === 'Home')
+            next = minPrimarySize;
+        if (e.key === 'End')
+            next = maxPrimary;
+        if (next === null)
+            return;
+        e.preventDefault();
+        setPrimarySize(clamp(next, minPrimarySize, maxPrimary));
+    }, [computeClamp, direction, minPrimarySize, primarySize, setPrimarySize]);
+    const ariaOrientation = direction === 'horizontal' ? 'vertical' : 'horizontal';
+    const { maxPrimary } = computeClamp();
+    return (_jsx("div", { className: styles.gutter, children: _jsx("div", { className: styles.resizer, role: "separator", "aria-orientation": ariaOrientation, "aria-valuemin": Math.round(minPrimarySize), "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : undefined, "aria-valuenow": Math.round(primarySize), tabIndex: 0, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onKeyDown: onKeyDown }) }));
 }

package/dist/components/split-pane/SplitPane.module.css

@@ -20,8 +20,8 @@
   min-inline-size: 0;
   min-block-size: 0;
   overflow: auto;
-  flex-direction: column;
   display: flex;
+  flex-direction: column;
 }
 
 /* ===== Secondary pane ===== */
@@ -34,7 +34,7 @@
   flex-direction: column;
 }
 
-/* ===== Gutter (spacing + hit area) ===== */
+/* ===== Gutter (spacing + hit area wrapper) ===== */
 .gutter {
   position: relative;
   flex: 0 0 var(--split-pane-gutter, 8px);
@@ -42,32 +42,37 @@
   z-index: 1;
 }
 
-/* Vertical mode gutter */
 .container[data-direction='vertical'] .gutter {
   inline-size: 100%;
   block-size: var(--split-pane-gutter, 8px);
 }
 
-/* ===== Resizer (interaction only) ===== */
+/* ===== Resizer (interaction element) ===== */
 .resizer {
   position: absolute;
   inset: 0;
   cursor: col-resize;
   user-select: none;
   touch-action: none;
+  outline: none;
 }
 
 .container[data-direction='vertical'] .resizer {
   cursor: row-resize;
 }
 
+/* Focus ring for keyboard resizing */
+.resizer:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
 /* ===== Divider line ===== */
 .resizer::after {
   content: '';
   position: absolute;
   inset-block: 0;
   inset-inline: 50%;
-  inline-size: var(--border-width-hairline);
+  inline-size: var(--border-width-thin);
   background-color: var(--color-border-subtle);
   opacity: 0;
   transform: translateX(-50%);
@@ -81,7 +86,7 @@
   inset-inline: 0;
   inset-block: 50%;
   inline-size: 100%;
-  block-size: var(--border-width-hairline);
+  block-size: var(--border-width-thin);
   transform: translateY(-50%);
 }
 

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 export const SplitPaneContext = React.createContext(null);
@@ -22,7 +21,7 @@ function writeStoredSize(key, value) {
         localStorage.setItem(key, String(Math.round(value)));
     }
     catch {
-        // ignore (private mode, disabled storage, etc.)
+        // ignore
     }
 }
 export function useSplitPaneContext() {
@@ -33,13 +32,8 @@ export function useSplitPaneContext() {
 }
 export function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, storageKey, }) {
     const containerRef = useRef(null);
-    /**
-     * IMPORTANT (Next.js hydration):
-     * Always start with initialPrimarySize so server HTML and first client render match.
-     * Then, after hydration, read localStorage and update.
-     */
+    // Start with initial to avoid SSR mismatch, then hydrate from storage
     const [primarySize, setPrimarySize] = useState(initialPrimarySize);
-    // Apply persisted size AFTER hydration (prevents SSR/client mismatch warnings)
     useEffect(() => {
         if (!storageKey)
             return;
@@ -48,11 +42,12 @@ export function SplitPaneProvider({ children, direction, initialPrimarySize, min
             return;
         setPrimarySize(stored);
     }, [storageKey]);
-    // Clamp after mount / when container is measurable; re-clamp on resize
     useEffect(() => {
         const el = containerRef.current;
         if (!el)
             return;
+        if (typeof ResizeObserver === 'undefined')
+            return;
         const clampToContainer = () => {
             const rect = el.getBoundingClientRect();
             const total = direction === 'horizontal' ? rect.width : rect.height;
@@ -62,11 +57,10 @@ export function SplitPaneProvider({ children, direction, initialPrimarySize, min
             setPrimarySize(prev => clamp(prev, minPrimarySize, maxPrimary));
         };
         clampToContainer();
-        const ro = new ResizeObserver(() => clampToContainer());
+        const ro = new ResizeObserver(clampToContainer);
         ro.observe(el);
         return () => ro.disconnect();
     }, [direction, minPrimarySize, minSecondarySize]);
-    // Persist on change
     useEffect(() => {
         if (!storageKey)
             return;

package/dist/components/sticky-footer-layout/StickyFooterLayout.d.ts

@@ -2,18 +2,13 @@ import React, { JSX } from 'react';
 type StickyFooterLayoutProps = {
     children: React.ReactNode;
     footer: React.ReactNode;
-    /** defaults to 550 */
-    width?: number | string;
-    /** match the app chrome padding token (defaults to --spacing-md) */
+    maxWidth?: number | string;
     chromePaddingVar?: string;
-    /** inner padding for content (defaults to "var(--spacing-md) 0") */
     contentPadding?: string;
-    /** background used to “paint over” what scrolls behind */
     background?: string;
-    /** extra space below content so last field doesn't sit under footer */
+    /** extra space below content so last field doesn't sit too close to footer */
     contentBottomSpacer?: string | number;
-    /** optional classnames */
     className?: string;
 };
-export declare function StickyFooterLayout({ children, footer, width, chromePaddingVar, contentPadding, background, contentBottomSpacer, className, }: StickyFooterLayoutProps): JSX.Element;
+export declare function StickyFooterLayout({ children, footer, maxWidth, chromePaddingVar, contentPadding, background, contentBottomSpacer, className, }: StickyFooterLayoutProps): JSX.Element;
 export {};

package/dist/components/sticky-footer-layout/StickyFooterLayout.js

@@ -1,27 +1,64 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function StickyFooterLayout({ children, footer, width = 550, chromePaddingVar = '--spacing-md', contentPadding = 'var(--spacing-md) 0', background = 'white', contentBottomSpacer, className, }) {
+import { useLayoutEffect, useRef, useState } from 'react';
+export function StickyFooterLayout({ children, footer, maxWidth = 550, chromePaddingVar = '--spacing-md', contentPadding = '0', background = 'var(--color-bg-surface)', contentBottomSpacer = '16px', className, }) {
     const pad = `var(${chromePaddingVar})`;
-    return (_jsxs("div", { className: className !== null && className !== void 0 ? className : 'dbc-flex dbc-flex-column dbc-flex-grow', style: {
-            width,
-            position: 'relative',
-            background,
-        }, children: [_jsx("div", { className: "dbc-flex-grow", style: {
+    const contentColRef = useRef(null);
+    const footerOverlayRef = useRef(null);
+    const [dock, setDock] = useState({
+        left: 0,
+        width: typeof maxWidth === 'number' ? maxWidth : 550,
+    });
+    const [overlayHeight, setOverlayHeight] = useState(0);
+    // Measure the LEFT + WIDTH of the content column (for aligning footer inner)
+    useLayoutEffect(() => {
+        const el = contentColRef.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const rect = el.getBoundingClientRect();
+            setDock({ left: rect.left, width: rect.width });
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        window.addEventListener('resize', measure);
+        return () => {
+            ro.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, []);
+    // Measure the ACTUAL fixed footer overlay height (includes paddingBlock, borders, etc.)
+    useLayoutEffect(() => {
+        const el = footerOverlayRef.current;
+        if (!el)
+            return;
+        const measure = () => setOverlayHeight(el.getBoundingClientRect().height);
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const bottomPad = `calc(${overlayHeight}px + ${String(contentBottomSpacer)})`;
+    return (_jsxs("div", { className: className, style: { background }, children: [_jsx("div", { ref: contentColRef, style: {
+                    maxWidth,
+                    boxSizing: 'border-box',
                     padding: contentPadding,
-                    paddingBottom: contentBottomSpacer
-                        ? `calc(${contentPadding.split(' ')[0] || pad} + ${String(contentBottomSpacer)})`
-                        : undefined,
-                }, children: children }), _jsx("div", { style: {
-                    position: 'sticky',
-                    // stick into chrome padding area
-                    bottom: `calc(-1 * ${pad})`,
+                    paddingBottom: bottomPad,
+                }, children: children }), _jsx("div", { ref: footerOverlayRef, style: {
+                    position: 'fixed',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
                     zIndex: 10,
                     background,
-                    // bleed into the padded chrome so nothing peeks through
-                    marginLeft: `calc(-1 * ${pad})`,
-                    marginRight: `calc(-1 * ${pad})`,
-                    marginBottom: `calc(-1 * ${pad})`,
-                    // keep inner alignment
-                    padding: pad,
-                }, className: "dbc-flex dbc-justify-end", children: footer })] }));
+                    paddingBlock: pad,
+                    boxSizing: 'border-box',
+                }, children: _jsx("div", { style: {
+                        position: 'relative',
+                        left: dock.left,
+                        width: dock.width,
+                        boxSizing: 'border-box',
+                        /* you said you removed padding-inline to match form edge exactly */
+                    }, className: "dbc-flex dbc-justify-end", children: footer }) })] }));
 }

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

@@ -4,7 +4,7 @@ import { Severity } from '../../constants/severity.types';
 import { PageChangeEvent } from '../../components/pagination/Pagination';
 import { ViewMode } from '../../hooks/useTableSettings';
 import { TableEmptyConfig } from './components/empty-state/EmptyState';
-type SortDirection = 'asc' | 'desc' | null;
+import { SortDirection } from './table.utils';
 export interface ColumnItem<T> {
     id: string;
     header: string | (() => ReactNode);
@@ -15,11 +15,10 @@ export interface ColumnItem<T> {
     hidden?: boolean;
     align?: 'left' | 'right' | 'center';
     verticalAlign?: 'top' | 'middle' | 'bottom';
-    fitContent?: boolean;
     allowWrap?: boolean;
     emptyPlaceholder?: ReactNode;
-    width?: number | string;
     canHide?: boolean;
+    severity?: any;
 }
 type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
@@ -42,10 +41,6 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     loading?: boolean;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     columnStyles?: Partial<Record<string, React.CSSProperties>>;
-    headerBelowRow?: ReactNode;
-    /**
-     * NEW: optional toolbar area above the table (right now used for column selector)
-     */
     toolbar?: ReactNode;
     striped?: boolean;
     fillViewport?: boolean;
@@ -64,5 +59,5 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     viewMode?: ViewMode;
     emptyConfig?: TableEmptyConfig;
 } & Omit<HTMLAttributes<HTMLTableElement>, 'onClick'>;
-export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, 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 declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, 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 {};

package/dist/components/table/Table.js

@@ -9,75 +9,48 @@ import { Pagination } from '../../components/pagination/Pagination';
 import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import styles from './Table.module.css';
-export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, toolbar, striped, fillViewport = false, viewportBottomOffset = 0, viewportMin = 120, viewportIncludeMarginTop = false, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }) {
-    const filteredColumns = useMemo(() => columns.filter(c => !c.hidden), [columns]);
-    const handlePageChange = useCallback((e) => {
-        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
-    }, [onPageChange]);
-    const getColStyle = (columnId, alignment, verticalAlignment, width) => {
-        const baseStyle = columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[columnId];
-        return {
-            ...(baseStyle !== null && baseStyle !== void 0 ? baseStyle : {}),
-            ...(alignment === 'right' && { fontVariantNumeric: 'tabular-nums' }),
-            verticalAlign: verticalAlignment !== null && verticalAlignment !== void 0 ? verticalAlignment : 'top',
-            textAlign: alignment !== null && alignment !== void 0 ? alignment : 'left',
-            width: width !== null && width !== void 0 ? width : baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.width,
-            minWidth: width !== null && width !== void 0 ? width : baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.minWidth,
-        };
-    };
+import { getAriaSort, getCellDisplayValue, getColumnStyle, getHeaderLabel, getNextSortDirection, getRowKey, getVisibleColumns, isModifierClick, shouldAllowWrap, shouldToggleOnKey, isActiveSort, } from './table.utils';
+export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, toolbar, striped, fillViewport = false, viewportBottomOffset = 0, viewportMin = 120, viewportIncludeMarginTop = false, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }) {
+    const filteredColumns = useMemo(() => getVisibleColumns(columns), [columns]);
+    const handlePageChange = useCallback((e) => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e), [onPageChange]);
     const scrollRef = useRef(null);
     const { style: viewportStyle } = useViewportFill(scrollRef, {
-        bottomOffset: viewportBottomOffset + 60,
+        bottomOffset: viewportBottomOffset + (onPageChange ? 60 : 0),
         min: viewportMin,
         includeMarginTop: viewportIncludeMarginTop,
     });
-    const tableEl = (_jsxs(_Fragment, { children: [toolbar ? _jsx("div", { style: { marginBottom: 12 }, children: toolbar }) : null, _jsxs("table", { ...rest, className: `${styles.table} ${styles[variant]} ${styles[size]} ${getRowSeverity ? styles.severityTable : ''}`, children: [_jsxs("thead", { children: [_jsxs("tr", { children: [selectedRows && onRowSelect && dataKey && (_jsx("th", { className: `${styles.fitContent} ${styles.th} $`, 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) => {
-                                        const isActiveSort = sortById === column.id;
-                                        const ariaSort = column.sortable && isActiveSort
-                                            ? sortDirection === 'asc'
-                                                ? 'ascending'
-                                                : 'descending'
-                                            : 'none';
-                                        const toggleSort = () => {
-                                            if (!onSortChange || !column.sortable)
-                                                return;
-                                            const nextDir = !isActiveSort
-                                                ? 'asc'
-                                                : sortDirection === 'asc'
-                                                    ? 'desc'
-                                                    : null;
-                                            onSortChange(column, nextDir);
-                                        };
-                                        return (_jsx("th", { style: getColStyle(column.id, column.align, 'middle'), "aria-sort": ariaSort, className: `${styles.th} ${column.sortable ? styles.sortable : ''} `, onClick: e => {
-                                                if (!column.sortable)
-                                                    return;
-                                                if (e.target instanceof HTMLElement && e.target.closest('.resizer'))
-                                                    return;
-                                                toggleSort();
-                                            }, role: column.sortable ? 'button' : undefined, tabIndex: column.sortable ? 0 : undefined, onKeyDown: e => {
-                                                if (!column.sortable)
-                                                    return;
-                                                if (e.key === 'Enter' || e.key === ' ') {
-                                                    e.preventDefault();
-                                                    toggleSort();
-                                                }
-                                            }, children: _jsx("div", { className: styles.thInner, children: _jsxs("span", { children: [_jsx("span", { className: styles.thLabel, children: typeof column.header === 'function' ? column.header() : column.header }), column.sortable && (_jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [isActiveSort && sortDirection === 'asc' && _jsx(ArrowUp, {}), isActiveSort && sortDirection === 'desc' && (_jsx(ArrowDown, { className: styles.descending })), !isActiveSort && (_jsx(ArrowDown, { className: `${styles.descending} ${styles.inActiveSort}` }))] })), headerExtras === null || headerExtras === void 0 ? void 0 : headerExtras({ column, index })] }) }) }, column.id));
-                                    })] }), headerBelowRow ? (_jsx("tr", { className: styles.headerBelowRow, children: _jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) })) : null] }), loading && !data.length ? (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: Array.from({ length: take !== null && take !== void 0 ? take : 5 }).map((_, rowIndex) => (_jsx("tr", { children: filteredColumns.map((column, colIndex) => (_jsx("td", { style: getColStyle(column.id, column.align, 'middle', column.width), className: `${styles.tableCell} ${column.fitContent ? 'fitContent' : ''}`, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, `${column.id}-${colIndex}`))) }, `loading-row-${rowIndex}`))) })) : (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: data === null || data === void 0 ? void 0 : data.map((row, rowIndex) => {
+    const tableEl = (_jsxs(_Fragment, { children: [toolbar ? _jsx("div", { style: { marginBottom: 12 }, children: toolbar }) : null, _jsxs("table", { ...rest, className: `${styles.table} ${styles[variant]} ${styles[size]} ${getRowSeverity ? styles.severityTable : ''}`, children: [_jsx("thead", { children: _jsxs("tr", { children: [selectedRows && onRowSelect && dataKey && (_jsx("th", { className: `${styles.th} ${styles.selectionCell}`, 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) => {
+                                    const active = isActiveSort(sortById, column.id);
+                                    const ariaSort = getAriaSort(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
+                                    const toggleSort = () => {
+                                        if (!onSortChange || !column.sortable)
+                                            return;
+                                        const nextDir = getNextSortDirection(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
+                                        onSortChange(column, nextDir);
+                                    };
+                                    return (_jsx("th", { style: getColumnStyle(column.id, columnStyles, column.align, 'middle'), "aria-sort": ariaSort, className: `${styles.th}`, children: _jsxs("div", { className: styles.thInner, children: [column.sortable ? (_jsxs("button", { type: "button", className: styles.thButton, onClick: toggleSort, onKeyDown: e => {
+                                                        if (shouldToggleOnKey(e.key)) {
+                                                            e.preventDefault();
+                                                            toggleSort();
+                                                        }
+                                                    }, children: [_jsx("span", { className: styles.thLabel, 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, children: getHeaderLabel(column.header) })), headerExtras ? (_jsx("div", { className: styles.thExtras, children: headerExtras({ column, index }) })) : null] }) }, column.id));
+                                })] }) }), loading && !data.length ? (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: Array.from({ length: take !== null && take !== void 0 ? take : 5 }).map((_, rowIndex) => (_jsx("tr", { children: filteredColumns.map((column, colIndex) => (_jsx("td", { style: getColumnStyle(column.id, columnStyles, column.align, 'middle'), className: `${styles.tableCell}`, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, `${column.id}-${colIndex}`))) }, `loading-row-${rowIndex}`))) })) : (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: data === null || data === void 0 ? void 0 : data.map(row => {
                             const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
-                            return (_jsxs("tr", { tabIndex: onRowClick ? 0 : -1, onClick: e => {
-                                    const rowId = row[dataKey];
-                                    const isModifierClick = e.metaKey || e.ctrlKey;
+                            const rowId = row[dataKey];
+                            const isSelected = Boolean(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId));
+                            return (_jsxs("tr", { tabIndex: onRowClick ? 0 : -1, onKeyDown: e => {
+                                    if (!onRowClick)
+                                        return;
+                                    if (shouldToggleOnKey(e.key)) {
+                                        e.preventDefault();
+                                        onRowClick(row);
+                                    }
+                                }, onClick: e => {
                                     const canSelect = Boolean(selectedRows && onRowSelect && dataKey);
-                                    if (isModifierClick && canSelect) {
+                                    if (isModifierClick(e) && canSelect) {
                                         e.preventDefault();
                                         e.stopPropagation();
-                                        const isSelected = selectedRows.has(rowId);
-                                        if (selectionMode === 'single') {
-                                            onRowSelect(rowId, !isSelected);
-                                        }
-                                        else {
-                                            onRowSelect(rowId, !isSelected);
-                                        }
+                                        onRowSelect(rowId, !selectedRows.has(rowId));
                                         return;
                                     }
                                     onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
@@ -85,18 +58,9 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                                     ['--row-severity-color']: rowSeverity
                                         ? SeverityBgColor[rowSeverity]
                                         : undefined,
-                                }, className: `${onRowClick ? styles.clickableRow : ''} ${(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: `fitContent ${styles.selectionCell}`, onClick: e => e.stopPropagation(), children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(row[dataKey]), size: "sm", onChange: () => onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey])) }) })), filteredColumns.map(column => {
-                                        var _a, _b;
-                                        return (_jsx("td", { style: getColStyle(column.id, column.align, column.verticalAlign, column.width), className: `${styles.tableCell} ${column.fitContent ? 'fitContent' : ''} ${column.allowWrap ||
-                                                (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(row[dataKey])) ||
-                                                viewMode === 'wrapped'
-                                                ? styles.allowWrap
-                                                : styles.nowrap} `, children: column.render
-                                                ? column.render(row) || ((_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '')
-                                                : column.accessor
-                                                    ? row[column.accessor] || ((_b = column.emptyPlaceholder) !== null && _b !== void 0 ? _b : '')
-                                                    : null }, column.id));
-                                    })] }, `tableRow-${String(row[dataKey])}-${rowIndex}`));
+                                }, className: `${onRowClick ? styles.clickableRow : ''} ${isSelected ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: `${styles.selectionCell}`, onClick: e => e.stopPropagation(), children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(rowId), size: "sm", onChange: () => onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, !selectedRows.has(rowId)) }) })), filteredColumns.map(column => (_jsx("td", { style: getColumnStyle(column.id, columnStyles, column.align, column.verticalAlign), className: `${styles.tableCell} ${shouldAllowWrap(column.allowWrap, isSelected, viewMode)
+                                            ? styles.allowWrap
+                                            : styles.nowrap}`, children: getCellDisplayValue(row, column) }, column.id)))] }, getRowKey(rowId)));
                         }) }))] }), !data.length && !loading && _jsx(TableEmptyState, { config: emptyConfig })] }));
     if (fillViewport) {
         return (_jsxs("div", { style: {
@@ -107,10 +71,7 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                 position: 'relative',
             }, children: [_jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }), onPageChange && data.length > 0 && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast }))] }));
     }
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '20px',
+    return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md", style: {
             flexFlow: paginationPlacement === 'top' ? 'column-reverse' : 'column',
             position: 'relative',
         }, children: [tableEl, onPageChange && data.length > 0 && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange }))] }));