@dbcdk/react-components 0.0.88 → 0.0.89

package/dist/components/forms/typeahead/Typeahead.js

@@ -86,14 +86,15 @@ function measureFitContentWidth(input, text, minWidth) {
         endAdornmentWidth);
     return Math.max(parseLengthToPx(minWidth, inputFontSize) || 120, nextWidth);
 }
-export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'Ingen resultater', filterOptions, inputProps, inputSize, width, minWidth, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent = false, }) {
+export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'Ingen resultater', filterOptions, inputProps, inputSize, width, minWidth, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent = false, enableHotkey = false, }) {
     var _a, _b;
     const rootRef = useRef(null);
+    const triggerWrapperRef = useRef(null);
     const inputRef = useRef(null);
-    const listboxRef = useRef(null);
     const popoverContentRef = useRef(null);
-    const optionRefs = useRef([]);
     const interactingWithOptionsRef = useRef(false);
+    const justClearedRef = useRef(false);
+    const locallyClearedRef = useRef(false);
     const listboxId = useId();
     const { onFocus: inputPropsOnFocus, onBlur: inputPropsOnBlur, onKeyDown: inputPropsOnKeyDown, onMouseDown: inputPropsOnMouseDown, onClear: inputPropsOnClear, startAdornment: inputPropsStartAdornment, endAdornment: inputPropsEndAdornment, ...passthroughInputProps } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
     const selectedOption = useMemo(() => {
@@ -111,6 +112,12 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
     const [inputValue, setInputValue] = useState(mode === 'multi' ? '' : ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : ''));
     const [query, setQuery] = useState('');
     const [activeIndex, setActiveIndex] = useState(-1);
+    const [hideSelectedHighlight, setHideSelectedHighlight] = useState(false);
+    const clearJustClearedAfterEventCycle = React.useCallback(() => {
+        requestAnimationFrame(() => {
+            justClearedRef.current = false;
+        });
+    }, []);
     const getSelectedValueChipLabel = React.useCallback((option) => {
         switch (multiSelectedValueChipContent) {
             case 'value':
@@ -122,6 +129,48 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 return option.label;
         }
     }, [multiSelectedValueChipContent]);
+    let filteredOptions;
+    if (filterOptions) {
+        filteredOptions = filterOptions(options, query);
+    }
+    else {
+        const normalizedQuery = query.trim().toLocaleLowerCase();
+        if (!normalizedQuery) {
+            filteredOptions = options;
+        }
+        else {
+            filteredOptions = options.filter(option => option.label.toLocaleLowerCase().includes(normalizedQuery));
+        }
+    }
+    const commitSelection = React.useCallback((option) => {
+        var _a, _b;
+        locallyClearedRef.current = false;
+        setHideSelectedHighlight(false);
+        if (mode === 'multi') {
+            if (!option)
+                return;
+            const nextValues = Array.isArray(selectedValue) ? [...selectedValue] : [];
+            const idx = nextValues.indexOf(option.value);
+            if (idx > -1) {
+                nextValues.splice(idx, 1);
+            }
+            else {
+                nextValues.push(option.value);
+            }
+            onChange(nextValues);
+            if (filteredOptions.length > 1) {
+                return;
+            }
+            setInputValue('');
+            setQuery('');
+            return;
+        }
+        onChange((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : null);
+        setInputValue((_b = option === null || option === void 0 ? void 0 : option.label) !== null && _b !== void 0 ? _b : '');
+        setQuery('');
+        setOpen(false);
+        setActiveIndex(-1);
+    }, [mode, selectedValue, onChange, filteredOptions.length]);
     const multiSelectionAdornment = mode === 'multi' && selectedOptions.length > 0 ? (multiValueDisplayMode === 'count' ? (_jsxs("span", { className: `dbc-muted-text dbc-sm-text ${styles.countAdornment}`, children: ["(", selectedOptions.length, ")"] })) : ((() => {
         const MAX_CHIPS = 2;
         const chipsToShow = selectedOptions.slice(0, MAX_CHIPS);
@@ -130,7 +179,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
     })())) : undefined;
     const usesCountAdornment = mode === 'multi' && multiValueDisplayMode === 'count' && selectedOptions.length > 0;
     const resolvedInputSize = (_b = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _b !== void 0 ? _b : 'md';
-    const shouldFitContent = fitContent && mode === 'single' && !fullWidth;
+    const shouldFitContent = fitContent && mode === 'single';
     const [fittedWidthPx, setFittedWidthPx] = useState(null);
     const visibleSingleValueText = useMemo(() => {
         if (!shouldFitContent)
@@ -144,7 +193,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         if (!input)
             return;
         let cancelled = false;
-        let frameId = requestAnimationFrame(() => {
+        const frameId = requestAnimationFrame(() => {
             const nextWidth = measureFitContentWidth(input, visibleSingleValueText, minWidth);
             if (!cancelled && nextWidth != null) {
                 setFittedWidthPx(current => (current !== nextWidth ? nextWidth : current));
@@ -183,28 +232,36 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         return `${fittedWidthPx}px`;
     }, [shouldFitContent, fittedWidthPx, minWidth]);
     const shouldStretchInput = fullWidth || shouldFitContent;
+    useEffect(() => {
+        if (!enableHotkey)
+            return;
+        function handleKeyDown(event) {
+            var _a;
+            if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [enableHotkey]);
     useEffect(() => {
         var _a;
+        if (justClearedRef.current || locallyClearedRef.current)
+            return;
         if (mode === 'multi') {
             setInputValue('');
             setQuery('');
         }
         else {
-            const nextLabel = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '';
-            setInputValue(nextLabel);
+            setInputValue((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '');
         }
     }, [selectedOption, mode]);
-    const filteredOptions = useMemo(() => {
-        if (filterOptions)
-            return filterOptions(options, query);
-        const normalizedQuery = query.trim().toLocaleLowerCase();
-        if (!normalizedQuery)
-            return options;
-        return options.filter(option => option.label.toLocaleLowerCase().includes(normalizedQuery));
-    }, [filterOptions, query, options]);
     const getSelectedIndex = React.useCallback((items) => {
         if (items.length === 0)
             return -1;
+        if (locallyClearedRef.current)
+            return 0;
         if (mode === 'multi') {
             if (!Array.isArray(selectedValue) || selectedValue.length === 0)
                 return 0;
@@ -218,18 +275,21 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         setActiveIndex(current => {
             if (filteredOptions.length === 0)
                 return -1;
+            if (locallyClearedRef.current)
+                return 0;
             if (current < 0)
                 return getSelectedIndex(filteredOptions);
             return Math.min(current, filteredOptions.length - 1);
         });
     }, [filteredOptions, getSelectedIndex]);
     useEffect(() => {
-        var _a;
+        var _a, _b;
         if (!open || activeIndex < 0)
             return;
-        const activeEl = optionRefs.current[activeIndex];
-        (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(activeEl, { block: 'nearest' });
-    }, [open, activeIndex, filteredOptions]);
+        const activeEl = (_a = document
+            .getElementById(listboxId)) === null || _a === void 0 ? void 0 : _a.querySelector(`#${CSS.escape(`${listboxId}-option-${activeIndex}`)}`);
+        (_b = activeEl === null || activeEl === void 0 ? void 0 : activeEl.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(activeEl, { block: 'nearest' });
+    }, [open, activeIndex, filteredOptions, listboxId]);
     const getFocusableElements = React.useCallback(() => {
         const selector = [
             'a[href]',
@@ -279,8 +339,6 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
             ? eventTarget
             : ((_a = document.activeElement) !== null && _a !== void 0 ? _a : null);
         const activeIndexInScope = activeElement ? focusables.indexOf(activeElement) : -1;
-        const boundaryIndex = event.shiftKey ? 0 : focusables.length - 1;
-        const boundaryElement = focusables[boundaryIndex];
         if (mode === 'multi') {
             if (activeIndexInScope === -1) {
                 event.preventDefault();
@@ -294,38 +352,14 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
             (_c = focusables[nextIndex]) === null || _c === void 0 ? void 0 : _c.focus();
             return;
         }
-        // single mode: Tab always closes the dropdown and lets focus move naturally
         setOpen(false);
         setActiveIndex(-1);
     }, [open, getFocusableElements, mode]);
-    const commitSelection = (option) => {
-        var _a, _b;
-        if (mode === 'multi') {
-            if (!option)
-                return;
-            const nextValues = Array.isArray(selectedValue) ? [...selectedValue] : [];
-            const idx = nextValues.indexOf(option.value);
-            if (idx > -1) {
-                nextValues.splice(idx, 1);
-            }
-            else {
-                nextValues.push(option.value);
-            }
-            onChange(nextValues);
-            if (filteredOptions.length > 1) {
-                return;
-            }
-            setInputValue('');
-            setQuery('');
-            return;
-        }
-        onChange((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : null);
-        setInputValue((_b = option === null || option === void 0 ? void 0 : option.label) !== null && _b !== void 0 ? _b : '');
-        setQuery('');
-        setOpen(false);
-        setActiveIndex(-1);
-    };
     const handleInputChange = (nextValue) => {
+        if (justClearedRef.current)
+            return;
+        locallyClearedRef.current = false;
+        setHideSelectedHighlight(false);
         setInputValue(nextValue);
         setQuery(nextValue);
         if (!open)
@@ -338,6 +372,13 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         }
     };
     const handleBlur = (nextFocusedTarget) => {
+        if (justClearedRef.current || locallyClearedRef.current) {
+            setInputValue('');
+            setQuery('');
+            setOpen(false);
+            setActiveIndex(-1);
+            return;
+        }
         if (isFocusWithinTypeahead(nextFocusedTarget))
             return;
         if (mode === 'multi') {
@@ -369,22 +410,28 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         setActiveIndex(-1);
     };
     const openWithAllOptions = React.useCallback(() => {
+        if (justClearedRef.current)
+            return;
         setQuery('');
         setOpen(true);
         setActiveIndex(getSelectedIndex(options));
     }, [getSelectedIndex, options]);
     const openWithCurrentFilter = React.useCallback(() => {
+        if (justClearedRef.current)
+            return;
         setOpen(true);
         setActiveIndex(getSelectedIndex(filteredOptions));
     }, [getSelectedIndex, filteredOptions]);
     const prepareSingleSearchInput = React.useCallback(() => {
-        if (mode !== 'single' || !selectedOption)
+        if (mode !== 'single' || !selectedOption || justClearedRef.current)
             return;
         setInputValue('');
         setQuery('');
     }, [mode, selectedOption]);
     const handleOpen = React.useCallback(() => {
-        if (mode === 'single' && selectedOption) {
+        if (justClearedRef.current)
+            return;
+        if (mode === 'single' && selectedOption && !locallyClearedRef.current) {
             prepareSingleSearchInput();
             openWithAllOptions();
             return;
@@ -396,22 +443,21 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         inputPropsOnMouseDown === null || inputPropsOnMouseDown === void 0 ? void 0 : inputPropsOnMouseDown(e);
         if (e.defaultPrevented)
             return;
+        if (justClearedRef.current) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
         const isAlreadyFocused = document.activeElement === inputRef.current;
         if (isAlreadyFocused && open) {
             e.preventDefault();
             setOpen(false);
             setActiveIndex(-1);
-            if (mode === 'single') {
-                setQuery('');
-                setInputValue((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '');
-            }
-            else {
-                setQuery('');
-                setInputValue('');
-            }
+            setQuery('');
+            setInputValue(mode === 'single' && !locallyClearedRef.current ? ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '') : '');
             return;
         }
-        if (isAlreadyFocused && mode === 'single' && selectedOption) {
+        if (isAlreadyFocused && mode === 'single' && selectedOption && !locallyClearedRef.current) {
             prepareSingleSearchInput();
             setOpen(true);
             setActiveIndex(getSelectedIndex(options));
@@ -434,18 +480,14 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         var _a, _b;
         e.preventDefault();
         e.stopPropagation();
+        if (justClearedRef.current)
+            return;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         if (open) {
             setOpen(false);
             setActiveIndex(-1);
-            if (mode === 'single') {
-                setQuery('');
-                setInputValue((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _b !== void 0 ? _b : '');
-            }
-            else {
-                setQuery('');
-                setInputValue('');
-            }
+            setQuery('');
+            setInputValue(mode === 'single' && !locallyClearedRef.current ? ((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _b !== void 0 ? _b : '') : '');
             return;
         }
         handleOpen();
@@ -506,12 +548,9 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 setOpen(false);
                 setActiveIndex(-1);
                 setQuery('');
-                if (mode === 'single' && selectedOption) {
-                    setInputValue(selectedOption.label);
-                }
-                else {
-                    setInputValue('');
-                }
+                setInputValue(mode === 'single' && selectedOption && !locallyClearedRef.current
+                    ? selectedOption.label
+                    : '');
                 return;
         }
     };
@@ -523,14 +562,19 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 selectedOptions.length > 0
                 ? 8
                 : 0,
-            width: shouldFitContent ? measuredRootWidth : fullWidth ? '100%' : undefined,
+            width: fullWidth ? '100%' : shouldFitContent ? measuredRootWidth : undefined,
             flex: fullWidth || shouldFitContent ? '1 1 auto' : undefined,
-            minWidth: 0,
+            minWidth: shouldFitContent ? measuredRootWidth : 0,
             maxWidth: shouldFitContent ? '100%' : undefined,
-        }, children: [_jsx(Popover, { open: open, minWidth: popoverWidth !== null && popoverWidth !== void 0 ? popoverWidth : minWidth, matchTriggerWidth: true, fillTrigger: true, anchorRef: popoverAnchorRef, onOpenChange: nextOpen => {
+        }, children: [_jsx(Popover, { open: open, minWidth: popoverWidth !== null && popoverWidth !== void 0 ? popoverWidth : minWidth, matchTriggerWidth: true, fillTrigger: true, anchorRef: popoverAnchorRef !== null && popoverAnchorRef !== void 0 ? popoverAnchorRef : triggerWrapperRef, onOpenChange: nextOpen => {
+                    if (justClearedRef.current) {
+                        setOpen(false);
+                        setActiveIndex(-1);
+                        return;
+                    }
                     setOpen(nextOpen);
                     if (nextOpen) {
-                        if (mode === 'single' && selectedOption) {
+                        if (mode === 'single' && selectedOption && !locallyClearedRef.current) {
                             setQuery('');
                             setActiveIndex(getSelectedIndex(options));
                         }
@@ -543,50 +587,70 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                     }
                 }, fullWidth: fullWidth, autoFocusContent: false, returnFocus: false, overlayRef: popoverContentRef, trigger: (openPopover, icon) => {
                     var _a, _b, _c, _d;
-                    return (_jsx(Input, { ...passthroughInputProps, ref: inputRef, value: inputValue, startAdornment: multiSelectionAdornment || inputPropsStartAdornment ? (_jsxs(_Fragment, { children: [multiSelectionAdornment, inputPropsStartAdornment] })) : undefined, endAdornment: inputPropsEndAdornment || icon ? (_jsxs(_Fragment, { children: [inputPropsEndAdornment, icon ? (_jsx("span", { className: styles.chevronButton, onMouseDown: handleChevronMouseDown, children: icon })) : null] })) : undefined, onFocus: e => {
-                            inputPropsOnFocus === null || inputPropsOnFocus === void 0 ? void 0 : inputPropsOnFocus(e);
-                            if (e.defaultPrevented)
-                                return;
-                            handleOpen();
-                            openPopover(e);
-                        }, onMouseDown: handleTriggerMouseDown, onChange: e => handleInputChange(e.currentTarget.value), onBlur: e => {
-                            inputPropsOnBlur === null || inputPropsOnBlur === void 0 ? void 0 : inputPropsOnBlur(e);
-                            if (e.defaultPrevented)
-                                return;
-                            handleBlur(e.relatedTarget);
-                        }, onKeyDown: e => {
-                            inputPropsOnKeyDown === null || inputPropsOnKeyDown === void 0 ? void 0 : inputPropsOnKeyDown(e);
-                            if (e.defaultPrevented)
+                    return (_jsx("div", { ref: triggerWrapperRef, onMouseDown: e => {
+                            const target = e.target;
+                            if (justClearedRef.current) {
+                                e.preventDefault();
+                                e.stopPropagation();
                                 return;
-                            handleTabKeyDown(e);
-                            if (e.defaultPrevented)
+                            }
+                            if (target.closest('input, button, [data-input-role="clear"]'))
                                 return;
-                            handleKeyDown(e);
-                        }, placeholder: placeholder, variant: variant, inputSize: resolvedInputSize, width: shouldFitContent ? undefined : (width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width), autoComplete: (_a = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _a !== void 0 ? _a : 'off', autoCorrect: (_b = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _b !== void 0 ? _b : 'off', autoCapitalize: (_c = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _c !== void 0 ? _c : 'none', spellCheck: (_d = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _d !== void 0 ? _d : false, disabled: disabled, fullWidth: shouldStretchInput, inputClassName: [
-                            inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputClassName,
-                            usesCountAdornment ? styles.inputWithoutStartPadding : '',
-                        ]
-                            .filter(Boolean)
-                            .join(' '), onClear: () => {
-                            setInputValue('');
-                            setQuery('');
-                            setActiveIndex(-1);
-                            onChange(mode === 'multi' ? [] : null);
-                            inputPropsOnClear === null || inputPropsOnClear === void 0 ? void 0 : inputPropsOnClear();
-                            onClear === null || onClear === void 0 ? void 0 : onClear();
-                            if (open) {
+                            handleChevronMouseDown(e);
+                        }, children: _jsx(Input, { ...passthroughInputProps, ref: inputRef, value: inputValue, startAdornment: multiSelectionAdornment || inputPropsStartAdornment ? (_jsxs(_Fragment, { children: [multiSelectionAdornment, inputPropsStartAdornment] })) : undefined, endAdornment: inputPropsEndAdornment || icon ? (_jsxs(_Fragment, { children: [inputPropsEndAdornment, icon ? (_jsx("span", { className: styles.chevronButton, onMouseDown: handleChevronMouseDown, children: icon })) : null] })) : undefined, onFocus: e => {
+                                inputPropsOnFocus === null || inputPropsOnFocus === void 0 ? void 0 : inputPropsOnFocus(e);
+                                if (e.defaultPrevented)
+                                    return;
+                                if (justClearedRef.current)
+                                    return;
+                                handleOpen();
+                                openPopover(e);
+                            }, onMouseDown: handleTriggerMouseDown, onChange: e => handleInputChange(e.currentTarget.value), onBlur: e => {
+                                inputPropsOnBlur === null || inputPropsOnBlur === void 0 ? void 0 : inputPropsOnBlur(e);
+                                if (e.defaultPrevented)
+                                    return;
+                                handleBlur(e.relatedTarget);
+                            }, onKeyDown: e => {
+                                inputPropsOnKeyDown === null || inputPropsOnKeyDown === void 0 ? void 0 : inputPropsOnKeyDown(e);
+                                if (e.defaultPrevented)
+                                    return;
+                                handleTabKeyDown(e);
+                                if (e.defaultPrevented)
+                                    return;
+                                handleKeyDown(e);
+                            }, placeholder: placeholder, variant: variant, inputSize: resolvedInputSize, width: shouldFitContent ? undefined : (width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width), autoComplete: (_a = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _a !== void 0 ? _a : 'off', autoCorrect: (_b = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _b !== void 0 ? _b : 'off', autoCapitalize: (_c = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _c !== void 0 ? _c : 'none', spellCheck: (_d = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _d !== void 0 ? _d : false, disabled: disabled, fullWidth: shouldStretchInput, inputClassName: [
+                                inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputClassName,
+                                styles.typeaheadInput,
+                                usesCountAdornment ? styles.inputWithoutStartPadding : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' '), onClear: (event) => {
+                                var _a, _b;
+                                (_a = event === null || event === void 0 ? void 0 : event.preventDefault) === null || _a === void 0 ? void 0 : _a.call(event);
+                                (_b = event === null || event === void 0 ? void 0 : event.stopPropagation) === null || _b === void 0 ? void 0 : _b.call(event);
+                                justClearedRef.current = true;
+                                locallyClearedRef.current = true;
+                                setHideSelectedHighlight(true);
                                 setOpen(false);
-                            }
-                        }, role: "combobox", "aria-expanded": open, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined }));
-                }, children: _jsx(Menu, { role: "listbox", id: listboxId, ref: listboxRef, children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => {
+                                setInputValue('');
+                                setQuery('');
+                                setActiveIndex(-1);
+                                inputPropsOnClear === null || inputPropsOnClear === void 0 ? void 0 : inputPropsOnClear();
+                                if (onClear) {
+                                    onClear();
+                                }
+                                else {
+                                    onChange(mode === 'multi' ? [] : null);
+                                }
+                                clearJustClearedAfterEventCycle();
+                            }, role: "combobox", "aria-expanded": open, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined }) }));
+                }, children: _jsx(Menu, { role: "listbox", id: listboxId, children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => {
                         const isActive = index === activeIndex;
                         const isSelected = mode === 'multi'
                             ? Array.isArray(selectedValue) && selectedValue.includes(option.value)
-                            : option.value === selectedValue;
+                            : option.value === selectedValue && !hideSelectedHighlight;
                         const optionId = `${listboxId}-option-${index}`;
-                        return mode === 'multi' ? (_jsx(Menu.CheckItem, { checked: isSelected, active: isActive, interactiveRef: node => {
-                                optionRefs.current[index] = node;
-                            }, interactiveProps: {
+                        return mode === 'multi' ? (_jsx(Menu.CheckItem, { checked: isSelected, active: isActive, interactiveProps: {
                                 id: optionId,
                                 role: 'option',
                                 onMouseEnter: () => setActiveIndex(index),
@@ -595,9 +659,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                                     e.preventDefault();
                                 },
                                 onKeyDown: e => handleTabKeyDown(e),
-                            }, label: _jsx("span", { children: option.label }), onCheckedChange: () => commitSelection(option) }, option.value)) : (_jsx(Menu.Item, { active: isActive, selected: isSelected, children: _jsx("button", { ref: node => {
-                                    optionRefs.current[index] = node;
-                                }, id: optionId, type: "button", role: "option", "aria-selected": isSelected, onMouseEnter: () => setActiveIndex(index), onMouseDown: e => {
+                            }, label: _jsx("span", { children: option.label }), onCheckedChange: () => commitSelection(option) }, option.value)) : (_jsx(Menu.Item, { active: isActive, selected: isSelected, children: _jsx("button", { id: optionId, type: "button", role: "option", "aria-selected": isSelected, onMouseEnter: () => setActiveIndex(index), onMouseDown: e => {
                                     e.preventDefault();
                                 }, onKeyDown: e => handleTabKeyDown(e), onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value));
                     })) : (_jsx(Menu.Item, { disabled: true, children: emptyMessage })) }) }), mode === 'multi' &&

package/dist/components/forms/typeahead/Typeahead.module.css

@@ -32,3 +32,7 @@
 .inputWithoutStartPadding {
   padding-inline-start: 0;
 }
+
+.typeaheadInput {
+  cursor: pointer;
+}

package/dist/components/grid/Grid.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface GridProps {
+    children?: ReactNode;
+    gap?: GridGap;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Grid({ children, gap, className, style }: GridProps): import("react/jsx-runtime").JSX.Element;
+export interface GridItemProps {
+    children?: ReactNode;
+    /** Default span (mobile-first, 1–12) */
+    base?: number;
+    /** Override at ≥768px */
+    md?: number;
+    /** Override at ≥1024px */
+    lg?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function GridItem({ children, base, md, lg, className, style }: GridItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/grid/Grid.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './Grid.module.css';
+const GAP_TOKEN = {
+    none: '0',
+    xs: 'var(--spacing-xs)',
+    sm: 'var(--spacing-sm)',
+    md: 'var(--spacing-md)',
+    lg: 'var(--spacing-lg)',
+    xl: 'var(--spacing-xl)',
+};
+export function Grid({ children, gap = 'md', className, style }) {
+    return (_jsx("div", { className: [styles.grid, className].filter(Boolean).join(' '), style: { gap: GAP_TOKEN[gap], ...style }, children: children }));
+}
+export function GridItem({ children, base = 12, md, lg, className, style }) {
+    return (_jsx("div", { className: [styles.item, className].filter(Boolean).join(' '), style: {
+            '--span-base': base,
+            ...(md != null ? { '--span-md': md } : {}),
+            ...(lg != null ? { '--span-lg': lg } : {}),
+            ...style,
+        }, children: children }));
+}

package/dist/components/grid/Grid.module.css

@@ -0,0 +1,20 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.item {
+  grid-column: span var(--span-base, 12);
+}
+
+@media (min-width: 768px) {
+  .item {
+    grid-column: span var(--span-md, var(--span-base, 12));
+  }
+}
+
+@media (min-width: 1024px) {
+  .item {
+    grid-column: span var(--span-lg, var(--span-md, var(--span-base, 12)));
+  }
+}

package/dist/components/headline/Headline.d.ts

@@ -1,4 +1,4 @@
-import React, { JSX, PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Severity } from '../../constants/severity.types';
 type HeadlineTone = 'dark' | 'light';
 interface HeadlineProps extends React.AriaAttributes {
@@ -7,11 +7,11 @@ interface HeadlineProps extends React.AriaAttributes {
     disableMargin?: boolean;
     severity?: Severity;
     weight?: 500 | 600 | 700;
-    subHeadline?: string | JSX.Element;
+    subheader?: React.ReactNode;
     addition?: React.ReactNode;
     icon?: React.ReactNode;
     allowWrap?: boolean;
     tone?: HeadlineTone;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, allowWrap, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, allowWrap, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
 export {};

package/dist/components/headline/Headline.js

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Headline.module.css';
 import { SeverityBgColor } from '../../constants/severity';
 import { Icon } from '../icon/Icon';
-export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, allowWrap = true, }) {
+export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subheader, addition, icon, tone, allowWrap = true, }) {
     const Tag = `h${size}`;
     const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
         .filter(Boolean)
@@ -18,8 +18,8 @@ export function Headline({ size = 2, marker, disableMargin, children, severity,
     const textClassName = [styles.text, allowWrap ? styles.wrap : styles.truncate]
         .filter(Boolean)
         .join(' ');
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsxs(Tag, { style: {
-                            '--font-weight': weight,
-                            '--marker-color': severity ? SeverityBgColor[severity] : undefined,
-                        }, className: headlineClassName, children: [icon || (severity && !marker) ? (_jsx("span", { className: styles.icon, children: _jsx(Icon, { customIcon: icon, severity: severity }) })) : null, _jsx("span", { className: textClassName, children: children })] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
+    return (_jsx("div", { className: containerClassName, children: _jsxs("div", { className: styles.headlineBlock, children: [_jsxs("div", { className: styles.headlineRow, children: [_jsxs(Tag, { style: {
+                                '--font-weight': weight,
+                                '--marker-color': severity ? SeverityBgColor[severity] : undefined,
+                            }, className: headlineClassName, children: [icon || (severity && !marker) ? (_jsx("span", { className: styles.icon, children: _jsx(Icon, { customIcon: icon, severity: severity }) })) : null, _jsx("span", { className: textClassName, children: children })] }), addition ? _jsx("div", { className: styles.addition, children: addition }) : null] }), subheader ? _jsx("div", { className: styles.subheader, children: subheader }) : null] }) }));
 }