@dbcdk/react-components 0.0.12 → 0.0.13

package/dist/components/table/components/column-resizer/ColumnResizer.module.css

@@ -1,13 +1,23 @@
 .resizer {
-  display: inline-block;
-  width: 1px;
-  background-color: var(--opac-bg-default);
-  height: 60%;
   position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+  right: -6px; /* extend hit area into both columns */
+  top: 0;
+  height: 100%;
+  width: 12px; /* big invisible hit area */
   cursor: col-resize;
   user-select: none;
   touch-action: none;
+  z-index: 20;
+}
+
+.resizer::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1px; /* visual thickness */
+  height: 60%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--opac-bg-default);
 }

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

@@ -0,0 +1,17 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ColumnItem } from './Table';
+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'): 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';
+export declare function getNextSortDirection(sortable: boolean | undefined, active: boolean, currentDirection: SortDirection): SortDirection;
+export declare function shouldToggleOnKey(key: string): boolean;
+export declare function isModifierClick(e: {
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}): 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;

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

@@ -0,0 +1,61 @@
+export function getVisibleColumns(columns) {
+    return columns.filter(c => !c.hidden);
+}
+export function getColumnStyle(columnId, columnStyles, alignment, verticalAlignment) {
+    var _a;
+    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',
+        minWidth: (_a = baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.minWidth) !== null && _a !== void 0 ? _a : 0,
+    };
+}
+export function getHeaderLabel(header) {
+    return typeof header === 'function' ? header() : header;
+}
+export function isActiveSort(sortById, columnId) {
+    return sortById === columnId;
+}
+export function getAriaSort(sortable, active, direction) {
+    if (!sortable)
+        return 'none';
+    if (!active)
+        return 'none';
+    return direction === 'asc' ? 'ascending' : 'descending';
+}
+export function getNextSortDirection(sortable, active, currentDirection) {
+    if (!sortable)
+        return null;
+    if (!active)
+        return 'asc';
+    if (currentDirection === 'asc')
+        return 'desc';
+    return null;
+}
+export function shouldToggleOnKey(key) {
+    return key === 'Enter' || key === ' ';
+}
+export function isModifierClick(e) {
+    return Boolean(e.metaKey || e.ctrlKey);
+}
+export function shouldAllowWrap(columnAllowWrap, isRowSelected, viewMode) {
+    return Boolean(columnAllowWrap || isRowSelected || viewMode === 'wrapped');
+}
+export function getCellDisplayValue(row, column) {
+    var _a;
+    const empty = (_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '';
+    if (column.render) {
+        const rendered = column.render(row);
+        return rendered || empty;
+    }
+    if (column.accessor) {
+        const value = row[column.accessor];
+        return value || empty;
+    }
+    return null;
+}
+export function getRowKey(rowId) {
+    return `tableRow-${String(rowId)}`;
+}

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

@@ -0,0 +1,22 @@
+import type { ColumnDef, SortingState, VisibilityState, Column } from '@tanstack/react-table';
+import type { CSSProperties } from 'react';
+import type { ColumnItem } from './Table';
+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;
+export declare function mapDefsToColumnItems<T extends AnyRecord>(defs: ReadonlyArray<ColumnDef<T, any>>, columnVisibility: VisibilityState): ColumnItem<T>[];
+export declare function sortingEqual(a: SortingState, b: SortingState): boolean;
+export declare function getSortPropsFromSorting(sorting: SortingState): {
+    sortById?: string;
+    sortDirection: 'asc' | 'desc' | null;
+};
+/**
+ * Builds `columnStyles` where TanStack is source of truth.
+ * Keep this util pure by passing in the leaf columns and the set of allowed IDs.
+ */
+export declare function buildColumnStyles(leafColumns: Array<Pick<Column<any, any>, 'id' | 'getSize' | 'columnDef'>>, allowedIds: Set<string>, defaults?: {
+    minWidth: number;
+    maxWidth: number;
+}): Record<string, CSSProperties>;
+export declare function columnItemsToIdSet<T>(items: Array<ColumnItem<T>>): Set<string>;
+export {};

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

@@ -0,0 +1,104 @@
+export function getColumnId(def, index) {
+    const d = def;
+    if (d.id != null && String(d.id).length)
+        return String(d.id);
+    if (d.accessorKey != null && String(d.accessorKey).length)
+        return String(d.accessorKey);
+    return `col_${index}`;
+}
+export function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
+    if (!(visibleColumnIds === null || visibleColumnIds === void 0 ? void 0 : visibleColumnIds.length))
+        return {};
+    const visible = new Set(visibleColumnIds);
+    const next = {};
+    defs.forEach((def, index) => {
+        const id = getColumnId(def, index);
+        next[id] = visible.has(id);
+    });
+    return next;
+}
+export function mapDefsToColumnItems(defs, columnVisibility) {
+    return defs.map((def, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const id = getColumnId(def, index);
+        const accessorKey = def.accessorKey;
+        const accessorFn = def.accessorFn;
+        const cell = def.cell;
+        let render;
+        if (typeof cell === 'function') {
+            render = (row) => cell({
+                row: { original: row },
+                getValue: () => accessorKey != null
+                    ? row[accessorKey]
+                    : accessorFn
+                        ? accessorFn(row)
+                        : undefined,
+            });
+        }
+        else if (accessorFn) {
+            render = (row) => accessorFn(row);
+        }
+        else if (accessorKey != null) {
+            render = (row) => row[accessorKey];
+        }
+        else {
+            render = () => null;
+        }
+        const isVisible = (_a = columnVisibility[id]) !== null && _a !== void 0 ? _a : true;
+        return {
+            id,
+            header: def.header,
+            accessor: accessorKey,
+            sortable: (_b = def.enableSorting) !== null && _b !== void 0 ? _b : !!accessorKey,
+            render,
+            hidden: !isVisible,
+            align: (_d = (_c = def.meta) === null || _c === void 0 ? void 0 : _c.align) !== null && _d !== void 0 ? _d : undefined,
+            verticalAlign: (_f = (_e = def.meta) === null || _e === void 0 ? void 0 : _e.verticalAlign) !== null && _f !== void 0 ? _f : undefined,
+            emptyPlaceholder: (_h = (_g = def.meta) === null || _g === void 0 ? void 0 : _g.emptyPlaceholder) !== null && _h !== void 0 ? _h : '-',
+            allowWrap: (_k = (_j = def.meta) === null || _j === void 0 ? void 0 : _j.allowWrap) !== null && _k !== void 0 ? _k : false,
+            severity: (_m = (_l = def.meta) === null || _l === void 0 ? void 0 : _l.severity) !== null && _m !== void 0 ? _m : undefined,
+        };
+    });
+}
+export function sortingEqual(a, b) {
+    const A = a === null || a === void 0 ? void 0 : a[0];
+    const B = b === null || b === void 0 ? void 0 : b[0];
+    if (!A && !B)
+        return true;
+    if (!A || !B)
+        return false;
+    return A.id === B.id && A.desc === B.desc;
+}
+export function getSortPropsFromSorting(sorting) {
+    const s = sorting === null || sorting === void 0 ? void 0 : sorting[0];
+    return {
+        sortById: s === null || s === void 0 ? void 0 : s.id,
+        sortDirection: s ? (s.desc ? 'desc' : 'asc') : null,
+    };
+}
+/**
+ * Builds `columnStyles` where TanStack is source of truth.
+ * Keep this util pure by passing in the leaf columns and the set of allowed IDs.
+ */
+export function buildColumnStyles(leafColumns, allowedIds, defaults = { minWidth: 80, maxWidth: 800 }) {
+    var _a, _b;
+    const styles = {};
+    for (const c of leafColumns) {
+        const id = c.id;
+        if (!allowedIds.has(id))
+            continue;
+        const anyDef = c.columnDef;
+        styles[id] = {
+            width: c.getSize(),
+            minWidth: (_a = anyDef.minSize) !== null && _a !== void 0 ? _a : defaults.minWidth,
+            maxWidth: (_b = anyDef.maxSize) !== null && _b !== void 0 ? _b : defaults.maxWidth,
+        };
+    }
+    return styles;
+}
+export function columnItemsToIdSet(items) {
+    const s = new Set();
+    for (const c of items)
+        s.add(c.id);
+    return s;
+}

package/dist/components/tabs/Tabs.d.ts

@@ -1,22 +1,45 @@
-import React from 'react';
+import type { JSX, ReactNode } from 'react';
+export type TabId = string | number;
 export type TabItem = {
     header: string;
-    id: string | number;
-    headerIcon?: React.ReactNode;
-    content: React.ReactNode;
+    id: TabId;
+    headerIcon?: ReactNode;
+    content: ReactNode;
     disabled?: boolean;
     hidden?: boolean;
     badge?: number;
 };
-interface TabsProps {
+type TabsVariant = 'filled' | 'outlined';
+export interface TabsProps {
     header?: string;
-    variant: 'filled' | 'outlined';
+    variant: TabsVariant;
     panelStyle?: boolean;
-    tabs: TabItem[];
-    activeId?: number | string;
-    onTabChange?: (index: number, tabItem: TabItem) => void;
-    manuallySetActiveTab?: boolean;
-    addition?: React.ReactNode;
+    /** Data-driven API */
+    tabs?: TabItem[];
+    /** Controlled */
+    value?: TabId;
+    /** Uncontrolled initial */
+    defaultValue?: TabId;
+    onValueChange?: (id: TabId, tab: TabItem, index: number) => void;
+    addition?: ReactNode;
+    /** Composition API */
+    children?: ReactNode;
+}
+export interface TabsItemProps {
+    id: TabId;
+    header: string;
+    headerIcon?: ReactNode;
+    disabled?: boolean;
+    hidden?: boolean;
+    badge?: number;
+    children?: ReactNode;
+}
+type SlotName = 'Item';
+type TabsItemComponent = ((props: TabsItemProps) => JSX.Element) & {
+    __TABS_SLOT__?: SlotName;
+};
+export declare function Tabs({ header, variant, panelStyle, tabs, value, defaultValue, onValueChange, addition, children, }: TabsProps): JSX.Element;
+export declare namespace Tabs {
+    var Item: TabsItemComponent;
 }
-export declare function Tabs({ variant, header, tabs, activeId, onTabChange, manuallySetActiveTab, addition, panelStyle, }: TabsProps): React.ReactNode;
 export {};

package/dist/components/tabs/Tabs.js

@@ -1,35 +1,123 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useCallback, useEffect, useId, useMemo, useState, } from 'react';
 import styles from './Tabs.module.css';
 import { Chip } from '../chip/Chip';
 import { Headline } from '../headline/Headline';
-export function Tabs({ variant, header, tabs, activeId, onTabChange, manuallySetActiveTab, addition, panelStyle, }) {
+const TabsItem = (_props) => {
+    // This never renders directly; parent consumes it.
+    return _jsx(_Fragment, {});
+};
+TabsItem.__TABS_SLOT__ = 'Item';
+function getFirstEnabledId(items) {
     var _a;
-    const [currentId, setCurrentId] = useState(activeId);
+    return (_a = items.find(t => !t.hidden && !t.disabled)) === null || _a === void 0 ? void 0 : _a.id;
+}
+function normalizeFromChildren(children) {
+    const items = [];
+    Children.forEach(children, child => {
+        if (!isValidElement(child))
+            return;
+        const t = child.type;
+        if ((t === null || t === void 0 ? void 0 : t.__TABS_SLOT__) !== 'Item')
+            return;
+        const props = child.props;
+        items.push({
+            id: props.id,
+            header: props.header,
+            headerIcon: props.headerIcon,
+            disabled: props.disabled,
+            hidden: props.hidden,
+            badge: props.badge,
+            content: props.children,
+        });
+    });
+    return items;
+}
+export function Tabs({ header, variant, panelStyle = false, tabs, value, defaultValue, onValueChange, addition, children, }) {
+    const uid = useId();
+    // Data API wins if provided; otherwise parse <Tabs.Item>
+    const sourceTabs = useMemo(() => {
+        if (tabs && tabs.length)
+            return tabs;
+        return normalizeFromChildren(children);
+    }, [tabs, children]);
+    const visibleTabs = useMemo(() => sourceTabs.filter(t => !t.hidden), [sourceTabs]);
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(() => {
+        return defaultValue !== null && defaultValue !== void 0 ? defaultValue : getFirstEnabledId(visibleTabs);
+    });
+    const currentValue = isControlled ? value : internalValue;
+    const activeIndex = useMemo(() => {
+        if (!visibleTabs.length)
+            return -1;
+        const idx = visibleTabs.findIndex(t => t.id === currentValue);
+        return idx >= 0 ? idx : 0;
+    }, [visibleTabs, currentValue]);
+    const activeTab = activeIndex >= 0 ? visibleTabs[activeIndex] : undefined;
+    const setValue = useCallback((nextId) => {
+        const idx = visibleTabs.findIndex(t => t.id === nextId);
+        const tab = idx >= 0 ? visibleTabs[idx] : undefined;
+        if (!tab || tab.disabled)
+            return;
+        if (!isControlled)
+            setInternalValue(nextId);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextId, tab, idx);
+    }, [visibleTabs, isControlled, onValueChange]);
+    // If current tab disappears (hidden/removed) or becomes disabled, recover to first enabled.
     useEffect(() => {
-        if (activeId !== undefined) {
-            setCurrentId(activeId);
+        if (!visibleTabs.length)
+            return;
+        const current = currentValue;
+        const stillValid = visibleTabs.some(t => t.id === current && !t.disabled);
+        if (stillValid)
+            return;
+        const next = getFirstEnabledId(visibleTabs);
+        if (next === undefined)
+            return;
+        setValue(next);
+        // setValue already calls onValueChange; fine.
+        // For controlled usage, parent should update `value` accordingly.
+        // If parent doesn't, it will remain "stuck" by design.
+    }, [visibleTabs, currentValue, setValue]);
+    // Keyboard: roving tabindex + select-on-arrow
+    const onKeyDownTab = useCallback((e, index) => {
+        var _a;
+        const enabled = visibleTabs.filter(t => !t.disabled);
+        if (!enabled.length)
+            return;
+        // Map current index -> enabled index
+        const currentId = (_a = visibleTabs[index]) === null || _a === void 0 ? void 0 : _a.id;
+        const currentEnabledIndex = enabled.findIndex(t => t.id === currentId);
+        const focusAndSelect = (enabledIndex) => {
+            const nextTab = enabled[enabledIndex];
+            if (!nextTab)
+                return;
+            const btn = document.getElementById(`${uid}-tab-${String(nextTab.id)}`);
+            btn === null || btn === void 0 ? void 0 : btn.focus();
+            setValue(nextTab.id);
+        };
+        if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            focusAndSelect((currentEnabledIndex + 1) % enabled.length);
         }
-    }, [activeId]);
-    const setActiveTab = useCallback((id) => {
-        setCurrentId(id);
-    }, [setCurrentId]);
-    const handleTabChange = useCallback((index, tab) => {
-        if (!manuallySetActiveTab) {
-            setActiveTab(tab.id);
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            focusAndSelect((currentEnabledIndex - 1 + enabled.length) % enabled.length);
         }
-        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index, tab);
-    }, [onTabChange, manuallySetActiveTab, setActiveTab]);
-    const filteredTabs = useMemo(() => tabs.filter(tab => !tab.hidden), [tabs]);
-    const activeIndex = useMemo(() => {
-        var _a, _b;
-        return (_a = filteredTabs.findIndex(tab => tab.id === currentId)) !== null && _a !== void 0 ? _a : (_b = filteredTabs[0]) === null || _b === void 0 ? void 0 : _b.id;
-    }, [currentId, filteredTabs]);
-    useEffect(() => {
-        if (activeIndex === -1 && filteredTabs.length > 0) {
-            setActiveTab(filteredTabs[0].id);
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            focusAndSelect(0);
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            focusAndSelect(enabled.length - 1);
         }
-    }, [activeIndex, filteredTabs, setActiveTab]);
-    return (_jsxs("div", { className: "grow-container", children: [header && (_jsxs("div", { className: styles.headerContainer, children: [_jsx(Headline, { disableMargin: true, size: 2, children: header }), addition] })), _jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ''}`, children: [_jsx("div", { className: styles.tabList, children: filteredTabs.map((tab, index) => (_jsx("div", { "data-index": index, className: `${styles.tab} ${activeIndex === index ? styles.active : ''}`, children: _jsxs("button", { className: `${styles.tabButton}`, onClick: () => handleTabChange(index, tab), disabled: tab.disabled, children: [_jsx("span", { className: styles.icon, children: tab.headerIcon }), _jsx("span", { className: styles.header, children: tab.header }), tab.badge !== undefined && tab.badge > 0 && (_jsxs("span", { className: styles.badge, children: [' ', _jsx(Chip, { severity: "info", size: "sm", children: tab.badge.toLocaleString('da-DK') })] }))] }) }, index))) }), _jsx("div", { className: `${styles.tabContent} scrollable`, children: (_a = filteredTabs[activeIndex]) === null || _a === void 0 ? void 0 : _a.content })] })] }));
+    }, [uid, visibleTabs, setValue]);
+    return (_jsxs("div", { className: styles.root, children: [header ? (_jsxs("div", { className: styles.headerContainer, children: [_jsx(Headline, { disableMargin: true, size: 2, children: header }), addition] })) : null, _jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ''}`, children: [_jsx("div", { className: styles.tabList, role: "tablist", "aria-label": header !== null && header !== void 0 ? header : 'Tabs', children: visibleTabs.map((tab, index) => {
+                            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: "info", 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;