@dbcdk/react-components 0.0.96 → 0.0.98

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

@@ -1,668 +0,0 @@
-'use client';
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { Chip } from '../../../components/chip/Chip';
-import { Input } from '../../../components/forms/input/Input';
-import { Menu } from '../../../components/menu/Menu';
-import { Popover } from '../../../components/popover/Popover';
-import styles from './Typeahead.module.css';
-function parseLengthToPx(value, referenceFontSize = 16) {
-    if (!value)
-        return 0;
-    const trimmed = value.trim();
-    if (!trimmed)
-        return 0;
-    if (trimmed.endsWith('px')) {
-        const n = Number.parseFloat(trimmed);
-        return Number.isFinite(n) ? n : 0;
-    }
-    if (trimmed.endsWith('rem')) {
-        const n = Number.parseFloat(trimmed);
-        if (!Number.isFinite(n))
-            return 0;
-        const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16');
-        return n * (Number.isFinite(rootFont) ? rootFont : 16);
-    }
-    if (trimmed.endsWith('em')) {
-        const n = Number.parseFloat(trimmed);
-        return Number.isFinite(n) ? n * referenceFontSize : 0;
-    }
-    const n = Number.parseFloat(trimmed);
-    return Number.isFinite(n) ? n : 0;
-}
-function getOuterWidthWithMargins(element) {
-    if (!(element instanceof HTMLElement))
-        return 0;
-    const rect = element.getBoundingClientRect();
-    const styles = window.getComputedStyle(element);
-    const marginLeft = Number.parseFloat(styles.marginLeft || '0');
-    const marginRight = Number.parseFloat(styles.marginRight || '0');
-    return Math.ceil(rect.width + marginLeft + marginRight);
-}
-function getInputFontShorthand(inputStyles) {
-    return (inputStyles.font ||
-        [
-            inputStyles.fontStyle,
-            inputStyles.fontVariant,
-            inputStyles.fontWeight,
-            inputStyles.fontStretch,
-            inputStyles.fontSize,
-            inputStyles.lineHeight !== 'normal' ? `/${inputStyles.lineHeight}` : '',
-            inputStyles.fontFamily,
-        ]
-            .filter(Boolean)
-            .join(' '));
-}
-function measureFitContentWidth(input, text, minWidth) {
-    const field = input.closest('[data-forminput="field"]');
-    if (!field)
-        return null;
-    const inputStyles = window.getComputedStyle(input);
-    const fieldStyles = window.getComputedStyle(field);
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    if (!ctx)
-        return null;
-    ctx.font = getInputFontShorthand(inputStyles);
-    const textWidth = Math.ceil(ctx.measureText(text).width);
-    const inputFontSize = Number.parseFloat(inputStyles.fontSize || '16');
-    const inputPaddingLeft = Number.parseFloat(inputStyles.paddingLeft || '0');
-    const inputPaddingRight = Number.parseFloat(inputStyles.paddingRight || '0');
-    const borderLeft = Number.parseFloat(fieldStyles.borderLeftWidth || '0');
-    const borderRight = Number.parseFloat(fieldStyles.borderRightWidth || '0');
-    const startAdornmentWidth = getOuterWidthWithMargins(field.querySelector('[data-input-role="start-adornment"]'));
-    const endAdornmentWidth = getOuterWidthWithMargins(field.querySelector('[data-input-role="end-adornment"]'));
-    const iconWidth = getOuterWidthWithMargins(field.querySelector('[data-input-role="icon"]'));
-    const breathingRoom = 6;
-    const nextWidth = Math.ceil(borderLeft +
-        borderRight +
-        iconWidth +
-        startAdornmentWidth +
-        inputPaddingLeft +
-        textWidth +
-        breathingRoom +
-        inputPaddingRight +
-        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, enableHotkey = false, }) {
-    var _a, _b;
-    const rootRef = useRef(null);
-    const triggerWrapperRef = useRef(null);
-    const inputRef = useRef(null);
-    const popoverContentRef = useRef(null);
-    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(() => {
-        var _a;
-        if (mode === 'multi')
-            return null;
-        return (_a = options.find(option => option.value === selectedValue)) !== null && _a !== void 0 ? _a : null;
-    }, [options, selectedValue, mode]);
-    const selectedOptions = useMemo(() => {
-        if (mode !== 'multi' || !Array.isArray(selectedValue))
-            return [];
-        return options.filter(option => selectedValue.includes(option.value));
-    }, [options, selectedValue, mode]);
-    const [open, setOpen] = useState(false);
-    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':
-                return String(option.value);
-            case 'value-label':
-                return `${String(option.value)} - ${option.label}`;
-            case 'label':
-            default:
-                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);
-        const extraCount = selectedOptions.length - MAX_CHIPS;
-        return (_jsxs("div", { className: styles.chipRow, children: [chipsToShow.map(option => (_jsx(Chip, { size: "sm", type: "rounded", onClose: () => commitSelection(option), children: option.label }, option.value))), extraCount > 0 && (_jsxs("span", { className: "dbc-muted-text dbc-sm-text dbc-px-xxs", children: ["+", extraCount] }))] }));
-    })())) : 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';
-    const [fittedWidthPx, setFittedWidthPx] = useState(null);
-    const visibleSingleValueText = useMemo(() => {
-        if (!shouldFitContent)
-            return '';
-        return inputValue || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder || '';
-    }, [shouldFitContent, inputValue, selectedOption, placeholder]);
-    useLayoutEffect(() => {
-        if (!shouldFitContent)
-            return;
-        const input = inputRef.current;
-        if (!input)
-            return;
-        let cancelled = false;
-        const frameId = requestAnimationFrame(() => {
-            const nextWidth = measureFitContentWidth(input, visibleSingleValueText, minWidth);
-            if (!cancelled && nextWidth != null) {
-                setFittedWidthPx(current => (current !== nextWidth ? nextWidth : current));
-            }
-        });
-        const fonts = document.fonts;
-        if (fonts === null || fonts === void 0 ? void 0 : fonts.ready) {
-            void fonts.ready.then(() => {
-                if (cancelled)
-                    return;
-                const liveInput = inputRef.current;
-                if (!liveInput)
-                    return;
-                const nextWidth = measureFitContentWidth(liveInput, visibleSingleValueText, minWidth);
-                if (nextWidth != null) {
-                    setFittedWidthPx(current => (current !== nextWidth ? nextWidth : current));
-                }
-            });
-        }
-        return () => {
-            cancelled = true;
-            cancelAnimationFrame(frameId);
-        };
-    }, [
-        shouldFitContent,
-        visibleSingleValueText,
-        minWidth,
-        inputPropsStartAdornment,
-        inputPropsEndAdornment,
-    ]);
-    const measuredRootWidth = useMemo(() => {
-        if (!shouldFitContent)
-            return undefined;
-        if (fittedWidthPx == null)
-            return minWidth !== null && minWidth !== void 0 ? minWidth : '120px';
-        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 {
-            setInputValue((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '');
-        }
-    }, [selectedOption, mode]);
-    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;
-            const firstSelectedIndex = items.findIndex(option => selectedValue.includes(option.value));
-            return firstSelectedIndex >= 0 ? firstSelectedIndex : 0;
-        }
-        const singleSelectedIndex = items.findIndex(option => option.value === selectedValue);
-        return singleSelectedIndex >= 0 ? singleSelectedIndex : 0;
-    }, [mode, selectedValue]);
-    useEffect(() => {
-        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, _b;
-        if (!open || activeIndex < 0)
-            return;
-        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]',
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])',
-        ].join(',');
-        const seen = new Set();
-        const focusables = [];
-        for (const container of [rootRef.current, popoverContentRef.current]) {
-            if (!container)
-                continue;
-            const elements = container.matches(selector)
-                ? [container]
-                : Array.from(container.querySelectorAll(selector));
-            for (const element of elements) {
-                if (seen.has(element) ||
-                    element.getAttribute('aria-hidden') === 'true' ||
-                    element.tabIndex < 0) {
-                    continue;
-                }
-                seen.add(element);
-                focusables.push(element);
-            }
-        }
-        return focusables;
-    }, []);
-    const isFocusWithinTypeahead = React.useCallback((target) => {
-        var _a, _b;
-        if (!(target instanceof Node))
-            return false;
-        return Boolean(((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || ((_b = popoverContentRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)));
-    }, []);
-    const handleTabKeyDown = React.useCallback((event) => {
-        var _a, _b, _c;
-        if (event.key !== 'Tab' || !open)
-            return;
-        const focusables = getFocusableElements();
-        if (focusables.length === 0)
-            return;
-        const eventTarget = event.target instanceof HTMLElement
-            ? event.target
-            : document.activeElement;
-        const activeElement = eventTarget && focusables.includes(eventTarget)
-            ? eventTarget
-            : ((_a = document.activeElement) !== null && _a !== void 0 ? _a : null);
-        const activeIndexInScope = activeElement ? focusables.indexOf(activeElement) : -1;
-        if (mode === 'multi') {
-            if (activeIndexInScope === -1) {
-                event.preventDefault();
-                (_b = focusables[0]) === null || _b === void 0 ? void 0 : _b.focus();
-                return;
-            }
-            event.preventDefault();
-            const nextIndex = event.shiftKey
-                ? (activeIndexInScope - 1 + focusables.length) % focusables.length
-                : (activeIndexInScope + 1) % focusables.length;
-            (_c = focusables[nextIndex]) === null || _c === void 0 ? void 0 : _c.focus();
-            return;
-        }
-        setOpen(false);
-        setActiveIndex(-1);
-    }, [open, getFocusableElements, mode]);
-    const handleInputChange = (nextValue) => {
-        if (justClearedRef.current)
-            return;
-        locallyClearedRef.current = false;
-        setHideSelectedHighlight(false);
-        setInputValue(nextValue);
-        setQuery(nextValue);
-        if (!open)
-            setOpen(true);
-        if (mode === 'multi')
-            return;
-        const exactMatch = options.find(option => option.label === nextValue);
-        if (!exactMatch && selectedValue !== null) {
-            onChange(null);
-        }
-    };
-    const handleBlur = (nextFocusedTarget) => {
-        if (justClearedRef.current || locallyClearedRef.current) {
-            setInputValue('');
-            setQuery('');
-            setOpen(false);
-            setActiveIndex(-1);
-            return;
-        }
-        if (isFocusWithinTypeahead(nextFocusedTarget))
-            return;
-        if (mode === 'multi') {
-            if (interactingWithOptionsRef.current) {
-                interactingWithOptionsRef.current = false;
-                setInputValue('');
-                setQuery('');
-                return;
-            }
-            setInputValue('');
-            setQuery('');
-            setOpen(false);
-            setActiveIndex(-1);
-            return;
-        }
-        const exactLabelMatch = options.find(option => option.label === inputValue);
-        if (exactLabelMatch) {
-            commitSelection(exactLabelMatch);
-            return;
-        }
-        if (selectedOption) {
-            setInputValue(selectedOption.label);
-        }
-        else {
-            setInputValue('');
-        }
-        setQuery('');
-        setOpen(false);
-        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 || justClearedRef.current)
-            return;
-        setInputValue('');
-        setQuery('');
-    }, [mode, selectedOption]);
-    const handleOpen = React.useCallback(() => {
-        if (justClearedRef.current)
-            return;
-        if (mode === 'single' && selectedOption && !locallyClearedRef.current) {
-            prepareSingleSearchInput();
-            openWithAllOptions();
-            return;
-        }
-        openWithCurrentFilter();
-    }, [mode, selectedOption, prepareSingleSearchInput, openWithAllOptions, openWithCurrentFilter]);
-    const handleTriggerMouseDown = React.useCallback((e) => {
-        var _a;
-        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);
-            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 && !locallyClearedRef.current) {
-            prepareSingleSearchInput();
-            setOpen(true);
-            setActiveIndex(getSelectedIndex(options));
-        }
-        else if (isAlreadyFocused && !open) {
-            setOpen(true);
-            setActiveIndex(getSelectedIndex(filteredOptions));
-        }
-    }, [
-        inputPropsOnMouseDown,
-        open,
-        mode,
-        selectedOption,
-        prepareSingleSearchInput,
-        getSelectedIndex,
-        options,
-        filteredOptions,
-    ]);
-    const handleChevronMouseDown = React.useCallback((e) => {
-        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);
-            setQuery('');
-            setInputValue(mode === 'single' && !locallyClearedRef.current ? ((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _b !== void 0 ? _b : '') : '');
-            return;
-        }
-        handleOpen();
-    }, [open, mode, selectedOption, handleOpen]);
-    const handleKeyDown = (e) => {
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!open) {
-                    handleOpen();
-                    return;
-                }
-                setActiveIndex(index => {
-                    if (filteredOptions.length === 0)
-                        return -1;
-                    if (index < 0)
-                        return getSelectedIndex(filteredOptions);
-                    return Math.min(index + 1, filteredOptions.length - 1);
-                });
-                return;
-            case 'ArrowUp':
-                e.preventDefault();
-                if (!open) {
-                    handleOpen();
-                    return;
-                }
-                setActiveIndex(index => {
-                    if (filteredOptions.length === 0)
-                        return -1;
-                    if (index < 0)
-                        return filteredOptions.length - 1;
-                    return Math.max(index - 1, 0);
-                });
-                return;
-            case 'Home':
-                if (!open || filteredOptions.length === 0)
-                    return;
-                e.preventDefault();
-                setActiveIndex(0);
-                return;
-            case 'End':
-                if (!open || filteredOptions.length === 0)
-                    return;
-                e.preventDefault();
-                setActiveIndex(filteredOptions.length - 1);
-                return;
-            case 'Enter':
-                if (!open)
-                    return;
-                e.preventDefault();
-                if (activeIndex >= 0 && filteredOptions[activeIndex]) {
-                    commitSelection(filteredOptions[activeIndex]);
-                }
-                return;
-            case 'Escape':
-                e.preventDefault();
-                e.stopPropagation();
-                setOpen(false);
-                setActiveIndex(-1);
-                setQuery('');
-                setInputValue(mode === 'single' && selectedOption && !locallyClearedRef.current
-                    ? selectedOption.label
-                    : '');
-                return;
-        }
-    };
-    return (_jsxs("div", { ref: rootRef, style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: mode === 'multi' &&
-                multiSelectedValuesDisplayMode === 'below-input' &&
-                selectedOptions.length > 0
-                ? 8
-                : 0,
-            width: fullWidth ? '100%' : shouldFitContent ? measuredRootWidth : undefined,
-            flex: fullWidth || shouldFitContent ? '1 1 auto' : undefined,
-            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 !== null && popoverAnchorRef !== void 0 ? popoverAnchorRef : triggerWrapperRef, onOpenChange: nextOpen => {
-                    if (justClearedRef.current) {
-                        setOpen(false);
-                        setActiveIndex(-1);
-                        return;
-                    }
-                    setOpen(nextOpen);
-                    if (nextOpen) {
-                        if (mode === 'single' && selectedOption && !locallyClearedRef.current) {
-                            setQuery('');
-                            setActiveIndex(getSelectedIndex(options));
-                        }
-                        else {
-                            setActiveIndex(getSelectedIndex(filteredOptions));
-                        }
-                    }
-                    else {
-                        setActiveIndex(-1);
-                    }
-                }, fullWidth: fullWidth, autoFocusContent: false, returnFocus: false, overlayRef: popoverContentRef, trigger: (openPopover, icon) => {
-                    var _a, _b, _c, _d;
-                    return (_jsx("div", { ref: triggerWrapperRef, onMouseDown: e => {
-                            const target = e.target;
-                            if (justClearedRef.current) {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                return;
-                            }
-                            if (target.closest('input, button, [data-input-role="clear"]'))
-                                return;
-                            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);
-                                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 && !hideSelectedHighlight;
-                        const optionId = `${listboxId}-option-${index}`;
-                        return mode === 'multi' ? (_jsx(Menu.CheckItem, { checked: isSelected, active: isActive, interactiveProps: {
-                                id: optionId,
-                                role: 'option',
-                                onMouseEnter: () => setActiveIndex(index),
-                                onMouseDown: e => {
-                                    interactingWithOptionsRef.current = true;
-                                    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", { 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' &&
-                multiSelectedValuesDisplayMode === 'below-input' &&
-                selectedOptions.length > 0 && (_jsx("div", { className: styles.selectedValues, children: selectedOptions.map(option => (_jsx(Chip, { size: "sm", type: "default", severity: "neutral", onClose: () => commitSelection(option), children: getSelectedValueChipLabel(option) }, option.value))) }))] }));
-}