@dbcdk/react-components 0.0.42 → 0.0.43

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/package.json

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