@dbcdk/react-components 0.0.41 → 0.0.43

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/copy-button/CopyButton.js

@@ -47,5 +47,9 @@ export function CopyButton(props) {
                     handleCopy();
                 }, className: `${styles.link} ${copied ? styles.copied : ''}`, children: [children, copied ? _jsx(Check, {}) : _jsx(Copy, {})] }) }));
     }
-    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_b = rest['aria-label']) !== null && _b !== void 0 ? _b : 'Kopier til udklipsholder'), onClick: handleCopy, variant: variant, size: size, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }), children] }));
+    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_b = rest['aria-label']) !== null && _b !== void 0 ? _b : 'Kopier til udklipsholder'), onClick: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopy();
+        }, variant: variant, size: size, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }), children] }));
 }

package/dist/components/filter-field/FilterField.d.ts

@@ -25,9 +25,10 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     placeholder?: string;
     disabled?: boolean;
     width?: string;
+    debounceTime?: number;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, width, ...inputProps }: FilterFieldProps & {
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, width, debounceTime, ...inputProps }: FilterFieldProps & {
     'data-cy'?: string;
 }): React.ReactElement;
 export {};

package/dist/components/filter-field/FilterField.js

@@ -44,6 +44,8 @@ export const NUMBER_OPERATORS = [
     'isEmpty',
     'isNotEmpty',
 ];
+const VALUELESS_OPERATORS = ['isEmpty', 'isNotEmpty'];
+const INPUT_DEBOUNCE_MS = 500;
 function OperatorDropdown({ value, onChange, operators, size = 'sm', disabled, }) {
     const popRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(() => Math.max(0, operators.indexOf(value)));
@@ -68,8 +70,7 @@ function isFilterActive(value) {
         return value.trim().length > 0;
     return value != null;
 }
-const VALUELESS_OPERATORS = ['isEmpty', 'isNotEmpty'];
-export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, width, ...inputProps }) {
+export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, width, debounceTime = INPUT_DEBOUNCE_MS, ...inputProps }) {
     var _a, _b;
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
     const [selectedOperator, setSelectedOperator] = useState(operator);
@@ -81,66 +82,92 @@ export function FilterField({ field, control, operator, value, onChange, operato
     }, [operator, ops]);
     const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
     const debounceRef = useRef(null);
-    const isTypingRef = useRef(false);
+    /**
+     * Holds the exact text value we most recently sent upward.
+     * While waiting for that value to round-trip back through URL/provider state,
+     * we ignore intermediate external churn so the input does not visually flicker.
+     */
+    const pendingValueRef = useRef(null);
     const emit = (next) => {
         var _a, _b;
         const nextOperator = (_a = next.operator) !== null && _a !== void 0 ? _a : selectedOperator;
         const nextValue = (_b = next.value) !== null && _b !== void 0 ? _b : value;
-        if (next.operator)
+        if (next.operator) {
             setSelectedOperator(nextOperator);
+        }
         onChange({
             field,
             operator: nextOperator,
             value: nextValue,
         });
     };
+    const clearDebounce = () => {
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+            debounceRef.current = null;
+        }
+    };
+    const scheduleEmitValue = (nextVal) => {
+        clearDebounce();
+        pendingValueRef.current = nextVal;
+        debounceRef.current = setTimeout(() => {
+            emit({ value: nextVal });
+        }, debounceTime);
+    };
+    const flushPendingValue = () => {
+        if (control !== 'input')
+            return;
+        clearDebounce();
+        pendingValueRef.current = localValue;
+        emit({ value: localValue });
+    };
     const handleOperatorChange = (op) => {
         setSelectedOperator(op);
         if (!active && !VALUELESS_OPERATORS.includes(op))
             return;
         if (VALUELESS_OPERATORS.includes(op)) {
+            clearDebounce();
+            pendingValueRef.current = null;
             emit({ operator: op, value: null });
             return;
         }
+        clearDebounce();
+        pendingValueRef.current =
+            control === 'input' ? localValue : typeof value === 'string' ? value : null;
         emit({ operator: op });
     };
-    const scheduleEmitValue = (nextVal) => {
-        if (debounceRef.current)
-            clearTimeout(debounceRef.current);
-        debounceRef.current = setTimeout(() => {
-            isTypingRef.current = false;
-            emit({ value: nextVal });
-        }, 250);
-    };
     useEffect(() => {
         var _a;
         if (control !== 'input')
             return;
         const incoming = (_a = value) !== null && _a !== void 0 ? _a : '';
-        if (!isTypingRef.current && incoming !== localValue) {
-            setLocalValue(incoming);
+        const pending = pendingValueRef.current;
+        if (pending !== null) {
+            if (incoming === pending) {
+                pendingValueRef.current = null;
+            }
+            return;
         }
-        if (incoming === localValue) {
-            isTypingRef.current = false;
+        if (incoming !== localValue) {
+            setLocalValue(incoming);
         }
     }, [value, control, localValue]);
     useEffect(() => {
         return () => {
-            if (debounceRef.current)
-                clearTimeout(debounceRef.current);
+            clearDebounce();
         };
     }, []);
     return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: [styles.filterField, styles[size], styles[variant], active ? styles.active : '']
             .filter(Boolean)
             .join(' '), children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, style: { width }, children: control === 'input' ? (_jsx(Input, { variant: "embedded", ...inputProps, value: localValue, onChange: e => {
                         const next = e.currentTarget.value;
-                        isTypingRef.current = true;
                         setLocalValue(next);
                         scheduleEmitValue(next);
+                    }, onBlur: () => {
+                        flushPendingValue();
                     }, fullWidth: true, inputSize: size, placeholder: placeholder, disabled: disabled, onClear: () => {
-                        isTypingRef.current = false;
-                        if (debounceRef.current)
-                            clearTimeout(debounceRef.current);
+                        clearDebounce();
+                        pendingValueRef.current = '';
                         setLocalValue('');
                         emit({ value: '' });
                     } })) : single ? (_jsx(Select, { options: options, selectedValue: (_b = value) !== null && _b !== void 0 ? _b : null, onChange: v => emit({ value: v }), placeholder: placeholder, size: size, variant: "inline", onClear: () => emit({ value: '' }), disabled: disabled })) : (_jsx(MultiSelect, { options: options, size: size, variant: "inline", selectedValues: (Array.isArray(value) ? value : []), onChange: nextSelectedValues => emit({ value: nextSelectedValues }), onClear: () => emit({ value: [] }), fullWidth: true, disabled: disabled, children: placeholder })) })] }));

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/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.41",
+  "version": "0.0.43",
   "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 }) }) }));
-}