@dbcdk/react-components 0.0.40 → 0.0.42

package/dist/components/circle/Circle.module.css

@@ -6,6 +6,7 @@
   white-space: nowrap;
   font-family: var(--font-family);
   color: var(--color-fg-default);
+  line-height: 1;
 }
 
 .circle {

package/dist/components/pagination/Pagination.js

@@ -6,7 +6,7 @@ import styles from './Pagination.module.css';
 import { Button } from '../button/Button';
 import { Menu } from '../menu/Menu';
 import { Popover } from '../popover/Popover';
-const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
 const NUMBER_LOCALE = 'da-DK';
 export function Pagination({ itemsCount = 0, skip = 0, take = DEFAULT_PAGE_SIZE_OPTIONS[1], onPageChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showFirstLast = true, showGoToPage = true, }) {
     const popoverRef = useRef(null);

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -66,7 +66,7 @@
 }
 
 .progressSegment[data-severity='progress'] {
-  background: color-mix(in srgb, var(--color-status-info) 20%, var(--color-bg-surface));
+  background: color-mix(in srgb, var(--color-fg-subtle) 5%, var(--color-bg-surface));
 }
 
 .progressSegment[data-severity='missing'] {

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

@@ -82,7 +82,7 @@
 
 .header {
   position: relative;
-  z-index: 2;
+  z-index: 10;
 }
 
 .headerRow,
@@ -148,6 +148,18 @@
   line-height: 20px;
 }
 
+.cell[data-vertical-align='top'] {
+  vertical-align: top;
+}
+
+.cell[data-vertical-align='middle'] {
+  vertical-align: middle;
+}
+
+.cell[data-vertical-align='bottom'] {
+  vertical-align: bottom;
+}
+
 .headerCell[data-align='right'],
 .cell[data-align='right'] {
   text-align: end;
@@ -368,17 +380,47 @@
 }
 
 .cellContent {
-  display: block;
+  display: flex;
   inline-size: 100%;
   min-width: 0;
   max-inline-size: 100%;
 }
 
+/* horizontal alignment inside content wrapper */
+.cellContent[data-align='left'] {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.cellContent[data-align='center'] {
+  justify-content: center;
+  text-align: center;
+}
+
+.cellContent[data-align='right'] {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+/* vertical alignment inside content wrapper */
+.cellContent[data-vertical-align='top'] {
+  align-items: flex-start;
+}
+
+.cellContent[data-vertical-align='middle'] {
+  align-items: center;
+}
+
+.cellContent[data-vertical-align='bottom'] {
+  align-items: flex-end;
+}
+
 .cellContent > * {
   min-width: 0;
   max-inline-size: 100%;
 }
 
+/* keep truncation + text alignment working */
 .cellValueEllipsis {
   display: block;
   inline-size: 100%;
@@ -389,6 +431,18 @@
   text-overflow: ellipsis;
 }
 
+.cellContent[data-align='left'] .cellValueEllipsis {
+  text-align: left;
+}
+
+.cellContent[data-align='center'] .cellValueEllipsis {
+  text-align: center;
+}
+
+.cellContent[data-align='right'] .cellValueEllipsis {
+  text-align: right;
+}
+
 .allowWrap .cellContent,
 .allowWrap .cellValueEllipsis {
   white-space: normal;

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

@@ -18,6 +18,7 @@ export interface ColumnItem<T> {
     emptyPlaceholder?: ReactNode;
     canHide?: boolean;
     severity?: any;
+    allowOverflow?: boolean;
 }
 export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;

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

@@ -45,9 +45,10 @@ export function TableRow({ row, rowId, columns, selectedRows, hasSelection, sele
                                 e.stopPropagation();
                                 onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
                             } })) }) }) })) : null, columns.map(column => {
-                var _a;
+                var _a, _b, _c, _d;
                 const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
+                const allowOverflow = column.allowOverflow;
                 const cellValue = getCellDisplayValue(row, column);
-                return (_jsx("td", { className: cx(styles.cell, allowWrap ? styles.allowWrap : styles.nowrap, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), "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));
+                return (_jsx("td", { className: cx(styles.cell, allowWrap ? styles.allowWrap : styles.nowrap, column.divider === 'left' && styles.dividerLeft, column.divider === 'right' && styles.dividerRight), "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-vertical-align": (_b = column.verticalAlign) !== null && _b !== void 0 ? _b : 'top', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, "data-align": (_c = column.align) !== null && _c !== void 0 ? _c : 'left', "data-vertical-align": (_d = column.verticalAlign) !== null && _d !== void 0 ? _d : 'top', children: allowWrap || allowOverflow ? (cellValue) : (_jsx("div", { className: styles.cellValueEllipsis, children: cellValue })) }) }, column.id));
             })] }));
 }

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

@@ -20,7 +20,7 @@ export function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
 }
 export function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
     return defs.map((def, index) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const id = getColumnId(def, index);
         const accessorKey = def.accessorKey;
         const accessorFn = def.accessorFn;
@@ -61,6 +61,7 @@ export function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}
             allowWrap: (_g = meta.allowWrap) !== null && _g !== void 0 ? _g : false,
             severity: meta.severity,
             divider: meta.divider,
+            allowOverflow: (_h = meta.allowOverflow) !== null && _h !== void 0 ? _h : false,
         };
     });
 }

package/dist/hooks/usePagination.d.ts

@@ -20,6 +20,11 @@ export interface UsePaginationProps<T> {
      * Useful after filtering/sorting changes upstream.
      */
     resetOnDataChange?: boolean;
+    /**
+     * Optional localStorage key for persisting pagination state.
+     * Only used in uncontrolled mode.
+     */
+    storageKey?: string;
 }
 export interface UsePaginationResult<T> {
     paginatedData: T[];
@@ -30,4 +35,4 @@ export interface UsePaginationResult<T> {
     page: number;
     totalCount: number;
 }
-export declare function usePagination<T>({ data, skip, take, state, onStateChange, resetOnDataChange, }: UsePaginationProps<T>): UsePaginationResult<T>;
+export declare function usePagination<T>({ data, skip, take, state, onStateChange, resetOnDataChange, storageKey, }: UsePaginationProps<T>): UsePaginationResult<T>;

package/dist/hooks/usePagination.js

@@ -3,18 +3,67 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 function clamp(n, min, max) {
     return Math.max(min, Math.min(max, n));
 }
-export function usePagination({ data = [], skip = 0, take = 10, state, onStateChange, resetOnDataChange = false, }) {
+function normalizePaginationState(next) {
+    return {
+        skip: Math.max(0, next.skip),
+        take: Math.max(1, next.take),
+    };
+}
+function safeParsePaginationState(raw) {
+    if (!raw)
+        return null;
+    try {
+        const parsed = JSON.parse(raw);
+        if (typeof parsed !== 'object' ||
+            parsed == null ||
+            typeof parsed.skip !== 'number' ||
+            typeof parsed.take !== 'number') {
+            return null;
+        }
+        return normalizePaginationState({
+            skip: parsed.skip,
+            take: parsed.take,
+        });
+    }
+    catch {
+        return null;
+    }
+}
+export function usePagination({ data = [], skip = 0, take = 10, state, onStateChange, resetOnDataChange = false, storageKey, }) {
     const isControlled = state != null;
-    const [uncontrolled, setUncontrolled] = useState(() => ({
-        skip: Math.max(0, skip),
-        take: Math.max(1, take),
-    }));
+    const [hydrated, setHydrated] = useState(() => !storageKey || isControlled);
+    const [uncontrolled, setUncontrolled] = useState(() => {
+        var _a;
+        const initial = normalizePaginationState({
+            skip,
+            take,
+        });
+        if (typeof window === 'undefined' || !storageKey || isControlled) {
+            return initial;
+        }
+        return (_a = safeParsePaginationState(window.localStorage.getItem(storageKey))) !== null && _a !== void 0 ? _a : initial;
+    });
+    // Hydrate from localStorage when key changes.
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (isControlled || !storageKey) {
+            setHydrated(true);
+            return;
+        }
+        const fallback = normalizePaginationState({ skip, take });
+        const stored = safeParsePaginationState(window.localStorage.getItem(storageKey));
+        setUncontrolled(stored !== null && stored !== void 0 ? stored : fallback);
+        setHydrated(true);
+    }, [isControlled, storageKey, skip, take]);
     // Keep initial props in sync ONLY for uncontrolled if props change.
-    // (For controlled, parent owns state.)
+    // Do not overwrite localStorage-hydrated state when storageKey is provided.
     const didInitRef = useRef(false);
     useEffect(() => {
         if (isControlled)
             return;
+        if (storageKey)
+            return;
         if (!didInitRef.current) {
             didInitRef.current = true;
             return;
@@ -23,21 +72,19 @@ export function usePagination({ data = [], skip = 0, take = 10, state, onStateCh
             skip: prev.skip,
             take: Math.max(1, take),
         }));
-    }, [isControlled, take]);
+    }, [isControlled, storageKey, take]);
     const paginationState = (isControlled ? state : uncontrolled);
     const totalCount = data.length;
     const safeTake = Math.max(1, paginationState.take);
     const maxSkip = Math.max(0, totalCount === 0 ? 0 : Math.floor((totalCount - 1) / safeTake) * safeTake);
     const safeSkip = clamp(Math.max(0, paginationState.skip), 0, maxSkip);
     const setPagination = useCallback((next) => {
-        const normalized = {
-            take: Math.max(1, next.take),
-            skip: Math.max(0, next.skip),
-        };
-        if (isControlled)
+        const normalized = normalizePaginationState(next);
+        if (isControlled) {
             onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(normalized);
-        else
-            setUncontrolled(normalized);
+            return;
+        }
+        setUncontrolled(normalized);
     }, [isControlled, onStateChange]);
     const onPageChange = useCallback((pageEvent) => {
         const nextTake = Math.max(1, pageEvent.take);
@@ -51,11 +98,12 @@ export function usePagination({ data = [], skip = 0, take = 10, state, onStateCh
     useEffect(() => {
         if (!resetOnDataChange)
             return;
+        if (!hydrated)
+            return;
         resetPage();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [resetOnDataChange, data]);
+    }, [resetOnDataChange, data, hydrated]);
     const paginatedData = useMemo(() => {
-        // Use safeSkip to avoid slicing past end if data shrinks.
         return data.slice(safeSkip, safeSkip + safeTake);
     }, [data, safeSkip, safeTake]);
     const page = useMemo(() => Math.floor(safeSkip / safeTake) + 1, [safeSkip, safeTake]);
@@ -67,6 +115,19 @@ export function usePagination({ data = [], skip = 0, take = 10, state, onStateCh
             setUncontrolled(prev => ({ ...prev, skip: safeSkip }));
         }
     }, [isControlled, safeSkip, paginationState.skip]);
+    // Persist uncontrolled state to localStorage when enabled.
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (isControlled || !storageKey)
+            return;
+        if (!hydrated)
+            return;
+        window.localStorage.setItem(storageKey, JSON.stringify({
+            skip: paginationState.skip,
+            take: paginationState.take,
+        }));
+    }, [hydrated, isControlled, paginationState.skip, paginationState.take, storageKey]);
     return {
         paginatedData,
         paginationState: { skip: safeSkip, take: safeTake },

package/package.json

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

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

@@ -1,9 +0,0 @@
-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

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