@dbcdk/react-components 0.0.25 → 0.0.27

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/components/tabs/Tabs.js

@@ -117,7 +117,7 @@ export function Tabs({ header, variant, panelStyle = false, tabs, value, default
                             const selected = index === activeIndex;
                             const tabDomId = `${uid}-tab-${String(tab.id)}`;
                             const panelDomId = `${uid}-panel-${String(tab.id)}`;
-                            return (_jsx("div", { className: `${styles.tab} ${selected ? styles.active : ''}`, children: _jsxs("button", { id: tabDomId, type: "button", className: styles.tabButton, role: "tab", "aria-selected": selected, "aria-controls": panelDomId, tabIndex: selected ? 0 : -1, disabled: tab.disabled, onClick: () => setValue(tab.id), onKeyDown: e => onKeyDownTab(e, index), children: [tab.headerIcon ? _jsx("span", { className: styles.icon, children: tab.headerIcon }) : null, _jsx("span", { className: styles.label, children: tab.header }), tab.badge !== undefined && tab.badge > 0 ? (_jsx("span", { className: styles.badge, children: _jsx(Chip, { severity: "neutral", size: "sm", children: tab.badge.toLocaleString('da-DK') }) })) : null] }) }, tab.id));
+                            return (_jsx("div", { className: `${styles.tab} ${selected ? styles.active : ''}`, children: _jsxs("button", { id: tabDomId, type: "button", className: styles.tabButton, role: "tab", "aria-selected": selected, "aria-controls": panelDomId, tabIndex: selected ? 0 : -1, disabled: tab.disabled, onClick: () => setValue(tab.id), onKeyDown: e => onKeyDownTab(e, index), children: [tab.headerIcon ? _jsx("span", { className: styles.icon, children: tab.headerIcon }) : null, _jsx("span", { className: styles.label, children: tab.header }), tab.badge !== undefined && tab.badge > 0 ? (_jsx("span", { className: styles.badge, children: _jsx(Chip, { type: "subtle", severity: null, size: "sm", children: tab.badge.toLocaleString('da-DK') }) })) : null] }) }, tab.id));
                         }) }), _jsx("div", { id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : undefined, role: "tabpanel", "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : undefined, className: styles.tabContent, children: activeTab === null || activeTab === void 0 ? void 0 : activeTab.content })] })] }));
 }
 Tabs.Item = TabsItem;

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

@@ -1,12 +1,20 @@
 /**
- * Formats a Date as "dd:mm:yyyy" or "dd:mm:yyyy hh:mm:ss".
- * All parts are zero-padded numbers.
+ * Formats a Date as "dd/mm/yyyy" or "dd/mm/yyyy hh:mm:ss".
+ * Optionally returns user-friendly Danish labels like "I dag" or "I går".
+ *
+ * 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"
  *
  * @param date - The Date or date-parsable value to format
- * @param options.showSeconds - If true, append time "hh:mm:ss"
+ * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"
+ * @param options.showSeconds - If true, append seconds when showTime is enabled
+ * @param options.userFriendlyLabel - If true, use "I dag" / "I går" when applicable
  * @returns A formatted string
  */
 export declare function formatDate(date: Date | string | number, options?: {
     showTime?: boolean;
     showSeconds?: boolean;
+    userFriendlyLabel?: boolean;
 }): string;

package/dist/utils/date/formatDate.js

@@ -1,26 +1,51 @@
 /**
- * Formats a Date as "dd:mm:yyyy" or "dd:mm:yyyy hh:mm:ss".
- * All parts are zero-padded numbers.
+ * Formats a Date as "dd/mm/yyyy" or "dd/mm/yyyy hh:mm:ss".
+ * Optionally returns user-friendly Danish labels like "I dag" or "I går".
+ *
+ * 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"
  *
  * @param date - The Date or date-parsable value to format
- * @param options.showSeconds - If true, append time "hh:mm:ss"
+ * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"
+ * @param options.showSeconds - If true, append seconds when showTime is enabled
+ * @param options.userFriendlyLabel - If true, use "I dag" / "I går" when applicable
  * @returns A formatted string
  */
 export function formatDate(date, options = {}) {
     const d = date instanceof Date ? date : new Date(date);
     if (isNaN(d.getTime()))
         return '';
+    const { showTime = false, showSeconds = false, userFriendlyLabel = false } = options;
     const pad = (n) => n.toString().padStart(2, '0');
+    const formatTime = () => {
+        const hours = pad(d.getHours());
+        const minutes = pad(d.getMinutes());
+        if (!showSeconds)
+            return `${hours}:${minutes}`;
+        const seconds = pad(d.getSeconds());
+        return `${hours}:${minutes}:${seconds}`;
+    };
+    const isSameCalendarDay = (a, b) => a.getDate() === b.getDate() &&
+        a.getMonth() === b.getMonth() &&
+        a.getFullYear() === b.getFullYear();
+    if (userFriendlyLabel) {
+        const now = new Date();
+        const yesterday = new Date(now);
+        yesterday.setDate(now.getDate() - 1);
+        if (isSameCalendarDay(d, now)) {
+            return showTime ? `I dag, kl. ${formatTime()}` : 'I dag';
+        }
+        if (isSameCalendarDay(d, yesterday)) {
+            return showTime ? `I går, kl. ${formatTime()}` : 'I går';
+        }
+    }
     const day = pad(d.getDate());
     const month = pad(d.getMonth() + 1);
     const year = d.getFullYear();
     const base = `${day}/${month}/${year}`;
-    if (!options.showTime)
+    if (!showTime)
         return base;
-    const hours = pad(d.getHours());
-    const minutes = pad(d.getMinutes());
-    if (!options.showSeconds)
-        return `${base} ${hours}:${minutes}`;
-    const seconds = pad(d.getSeconds());
-    return `${base} ${hours}:${minutes}:${seconds}`;
+    return `${base} ${formatTime()}`;
 }

package/package.json

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

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

@@ -1,9 +0,0 @@
-type RowId = string;
-type UseAnimatedNewRowIdsArgs<T> = {
-    data: T[];
-    dataKey: keyof T;
-    enabled?: boolean;
-    animationDurationMs?: number;
-};
-export declare function useAnimatedNewRowIds<T extends Record<string, any>>({ data, dataKey, enabled, animationDurationMs, }: UseAnimatedNewRowIdsArgs<T>): Set<RowId>;
-export {};