@dbcdk/react-components 0.0.42 → 0.0.44

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/table/Table.js

@@ -17,7 +17,7 @@ export function Table({ data, dataKey, columns, selectedRows, selectionMode = 's
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
     }, [onPageChange]);
     const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
-    const paginationEl = onPageChange && data.length > 0 ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
+    const paginationEl = onPageChange && (loading || data.length > 0) ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
     const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], measuringLayout && styles.measuringLayout, getRowSeverity && styles.severityTable);
     const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: tableRootRef, className: styles.tableScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
     if (fillViewport) {

package/dist/components/table/components/TableLoadingBody.js

@@ -2,9 +2,25 @@ 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';
+function getColumnWidth(column) {
+    // If column.width is defined and less than 150px, use 100%
+    if (typeof column.width === 'number' && column.width < 150) {
+        return '100%';
+    }
+    if (typeof column.width === 'string' && column.width.endsWith('px')) {
+        const px = parseInt(column.width, 10);
+        if (!isNaN(px) && px < 150) {
+            return '100%';
+        }
+    }
+    // Otherwise, random between 50% and 90%
+    const percent = Math.floor(Math.random() * (90 - 50 + 1)) + 50;
+    return `${percent}%`;
+}
 export function TableLoadingBody({ rows, columns, hasSelection }) {
-    return (_jsx("tbody", { className: styles.body, children: Array.from({ length: rows }).map((_, rowIndex) => (_jsxs("tr", { className: styles.row, children: [hasSelection ? _jsx("td", { className: cx(styles.cell, styles.selectionCell) }) : null, columns.map(column => {
+    const widths = Array.from({ length: rows }, () => columns.map(getColumnWidth));
+    return (_jsx("tbody", { className: styles.body, children: Array.from({ length: rows }).map((_, rowIndex) => (_jsxs("tr", { className: styles.row, children: [hasSelection ? (_jsx("td", { className: cx(styles.cell, styles.selectionCell), children: _jsx("div", { className: styles.cellContent, children: _jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) })) : null, columns.map((column, columnIndex) => {
                     var _a;
-                    return (_jsx("td", { className: cx(styles.cell, 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: _jsx("div", { className: styles.cellValueEllipsis, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) }) }, column.id));
+                    return (_jsx("td", { className: cx(styles.cell, 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: _jsx("div", { className: styles.cellValueEllipsis, children: _jsx(SkeletonLoaderItem, { height: 16, width: widths[rowIndex][columnIndex] }) }) }) }, column.id));
                 })] }, `loading-row-${rowIndex}`))) }));
 }

package/package.json

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