@mongodb-js/compass-components 1.1.1 → 1.2.0

package/lib/components/leafy-green/combobox/combobox.js

@@ -1,725 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const lodash_1 = require("lodash");
-const typography_1 = require("@leafygreen-ui/typography");
-const popover_1 = __importDefault(require("@leafygreen-ui/popover"));
-const hooks_1 = require("@leafygreen-ui/hooks");
-const interaction_ring_1 = __importDefault(require("@leafygreen-ui/interaction-ring"));
-const icon_1 = __importDefault(require("@leafygreen-ui/icon"));
-const icon_button_1 = __importDefault(require("@leafygreen-ui/icon-button"));
-const emotion_1 = require("@leafygreen-ui/emotion");
-const palette_1 = require("@leafygreen-ui/palette");
-const lib_1 = require("@leafygreen-ui/lib");
-const combobox_types_1 = require("./combobox-types");
-const combobox_context_1 = require("./combobox-context");
-const combobox_option_1 = require("./combobox-option");
-const chip_1 = require("./chip");
-const combobox_styles_1 = require("./combobox.styles");
-const combobox_group_1 = require("./combobox-group");
-const util_1 = require("./util");
-function Combobox({ children, label, description, placeholder = 'Select', 'aria-label': ariaLabel, disabled = false, size = 'default', darkMode = false, state = 'none', errorMessage, searchState = 'unset', searchEmptyMessage = 'No results found', searchErrorMessage = 'Could not get results!', searchLoadingMessage = 'Loading results...', filteredOptions, onFilter, clearable = true, onClear, overflow = 'expand-y', multiselect = false, initialValue, onChange, value, chipTruncationLocation, chipCharacterLimit = 12, className, ...rest }) {
-    const getOptionRef = (0, hooks_1.useDynamicRefs)({ prefix: 'option' });
-    const getChipRef = (0, hooks_1.useDynamicRefs)({ prefix: 'chip' });
-    const inputId = (0, hooks_1.useIdAllocator)({ prefix: 'combobox-input' });
-    const labelId = (0, hooks_1.useIdAllocator)({ prefix: 'combobox-label' });
-    const menuId = (0, hooks_1.useIdAllocator)({ prefix: 'combobox-menu' });
-    const comboboxRef = (0, react_1.useRef)(null);
-    const clearButtonRef = (0, react_1.useRef)(null);
-    const inputWrapperRef = (0, react_1.useRef)(null);
-    const inputRef = (0, react_1.useRef)(null);
-    const menuRef = (0, react_1.useRef)(null);
-    const [isOpen, setOpen] = (0, react_1.useState)(false);
-    const prevOpenState = (0, hooks_1.usePrevious)(isOpen);
-    const [focusedOption, setFocusedOption] = (0, react_1.useState)(null);
-    const [selection, setSelection] = (0, react_1.useState)(null);
-    const prevSelection = (0, hooks_1.usePrevious)(selection);
-    const [inputValue, setInputValue] = (0, react_1.useState)('');
-    const prevValue = (0, hooks_1.usePrevious)(inputValue);
-    const [focusedChip, setFocusedChip] = (0, react_1.useState)(null);
-    const doesSelectionExist = !(0, lodash_1.isNull)(selection) &&
-        (((0, lodash_1.isArray)(selection) && selection.length > 0) || (0, lodash_1.isString)(selection));
-    const isMultiselect = (0, react_1.useCallback)((test) => multiselect && (0, lodash_1.isArray)(test), [multiselect]);
-    const setInputFocus = (0, react_1.useCallback)((cursorPos) => {
-        if (!disabled && inputRef && inputRef.current) {
-            inputRef.current.focus();
-            if (!(0, lodash_1.isUndefined)(cursorPos)) {
-                inputRef.current.setSelectionRange(cursorPos, cursorPos);
-            }
-        }
-    }, [disabled]);
-    const updateSelection = (0, react_1.useCallback)((value) => {
-        if (isMultiselect(selection)) {
-            const newSelection = (0, lodash_1.clone)(selection);
-            if ((0, lodash_1.isNull)(value)) {
-                newSelection.length = 0;
-            }
-            else {
-                if (selection.includes(value)) {
-                    newSelection.splice(newSelection.indexOf(value), 1);
-                }
-                else {
-                    newSelection.push(value);
-                    setInputValue('');
-                }
-            }
-            setSelection(newSelection);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newSelection);
-        }
-        else {
-            const newSelection = value;
-            setSelection(newSelection);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newSelection);
-        }
-    }, [isMultiselect, onChange, selection]);
-    const scrollToEnd = () => {
-        if (inputWrapperRef && inputWrapperRef.current) {
-            inputWrapperRef.current.scrollLeft = inputWrapperRef.current.scrollWidth;
-        }
-    };
-    const placeholderValue = multiselect && (0, lodash_1.isArray)(selection) && selection.length > 0
-        ? undefined
-        : placeholder;
-    const allOptions = (0, react_1.useMemo)(() => (0, util_1.flattenChildren)(children), [children]);
-    const getDisplayNameForValue = (0, react_1.useCallback)((value) => {
-        var _a, _b;
-        return value
-            ? (_b = (_a = allOptions.find((opt) => opt.value === value)) === null || _a === void 0 ? void 0 : _a.displayName) !== null && _b !== void 0 ? _b : value
-            : '';
-    }, [allOptions]);
-    const isOptionVisible = (0, react_1.useCallback)((option) => {
-        const value = typeof option === 'string' ? option : option.value;
-        if (filteredOptions && filteredOptions.length > 0) {
-            return filteredOptions.includes(value);
-        }
-        const displayName = typeof option === 'string'
-            ? getDisplayNameForValue(value)
-            : option.displayName;
-        return displayName.toLowerCase().includes(inputValue.toLowerCase());
-    }, [filteredOptions, getDisplayNameForValue, inputValue]);
-    const visibleOptions = (0, react_1.useMemo)(() => allOptions.filter(isOptionVisible), [allOptions, isOptionVisible]);
-    const isValueValid = (0, react_1.useCallback)((value) => {
-        return value ? !!allOptions.find((opt) => opt.value === value) : false;
-    }, [allOptions]);
-    const getIndexOfValue = (0, react_1.useCallback)((value) => {
-        return visibleOptions
-            ? visibleOptions.findIndex((option) => option.value === value)
-            : -1;
-    }, [visibleOptions]);
-    const getValueAtIndex = (0, react_1.useCallback)((index) => {
-        if (visibleOptions && visibleOptions.length >= index) {
-            const option = visibleOptions[index];
-            return option ? option.value : undefined;
-        }
-    }, [visibleOptions]);
-    const getActiveChipIndex = (0, react_1.useCallback)(() => isMultiselect(selection)
-        ? selection.findIndex((value) => { var _a, _b; return (_b = (_a = getChipRef(value)) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement); })
-        : -1, [getChipRef, isMultiselect, selection]);
-    const getFocusedElementName = (0, react_1.useCallback)(() => {
-        var _a, _b, _c;
-        const isFocusOn = {
-            Input: (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement),
-            ClearButton: (_b = clearButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement),
-            Chip: isMultiselect(selection) &&
-                selection.some((value) => { var _a, _b; return (_b = (_a = getChipRef(value)) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement); }),
-        };
-        const getActiveChipIndex = () => isMultiselect(selection)
-            ? selection.findIndex((value) => { var _a, _b; return (_b = (_a = getChipRef(value)) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement); })
-            : -1;
-        if (isMultiselect(selection) && isFocusOn.Chip) {
-            if (getActiveChipIndex() === 0) {
-                return 'FirstChip';
-            }
-            else if (getActiveChipIndex() === selection.length - 1) {
-                return 'LastChip';
-            }
-            return 'MiddleChip';
-        }
-        else if (isFocusOn.Input) {
-            return 'Input';
-        }
-        else if (isFocusOn.ClearButton) {
-            return 'ClearButton';
-        }
-        else if ((_c = comboboxRef.current) === null || _c === void 0 ? void 0 : _c.contains(document.activeElement)) {
-            return 'Combobox';
-        }
-    }, [getChipRef, isMultiselect, selection]);
-    const updateFocusedOption = (0, react_1.useCallback)((direction) => {
-        var _a;
-        const optionsCount = (_a = visibleOptions === null || visibleOptions === void 0 ? void 0 : visibleOptions.length) !== null && _a !== void 0 ? _a : 0;
-        const lastIndex = optionsCount - 1 > 0 ? optionsCount - 1 : 0;
-        const indexOfFocus = getIndexOfValue(focusedOption);
-        if (direction && isOpen) {
-            setFocusedChip(null);
-            setInputFocus();
-        }
-        switch (direction) {
-            case 'next': {
-                const newValue = indexOfFocus + 1 < optionsCount
-                    ? getValueAtIndex(indexOfFocus + 1)
-                    : getValueAtIndex(0);
-                setFocusedOption(newValue !== null && newValue !== void 0 ? newValue : null);
-                break;
-            }
-            case 'prev': {
-                const newValue = indexOfFocus - 1 >= 0
-                    ? getValueAtIndex(indexOfFocus - 1)
-                    : getValueAtIndex(lastIndex);
-                setFocusedOption(newValue !== null && newValue !== void 0 ? newValue : null);
-                break;
-            }
-            case 'last': {
-                const newValue = getValueAtIndex(lastIndex);
-                setFocusedOption(newValue !== null && newValue !== void 0 ? newValue : null);
-                break;
-            }
-            case 'first':
-            default: {
-                const newValue = getValueAtIndex(0);
-                setFocusedOption(newValue !== null && newValue !== void 0 ? newValue : null);
-            }
-        }
-    }, [
-        focusedOption,
-        getIndexOfValue,
-        getValueAtIndex,
-        isOpen,
-        setInputFocus,
-        visibleOptions === null || visibleOptions === void 0 ? void 0 : visibleOptions.length,
-    ]);
-    const updateFocusedChip = (0, react_1.useCallback)((direction, relativeToIndex) => {
-        if (isMultiselect(selection)) {
-            switch (direction) {
-                case 'next': {
-                    const referenceChipIndex = relativeToIndex !== null && relativeToIndex !== void 0 ? relativeToIndex : getActiveChipIndex();
-                    const nextChipIndex = referenceChipIndex + 1 < selection.length
-                        ? referenceChipIndex + 1
-                        : selection.length - 1;
-                    const nextChipValue = selection[nextChipIndex];
-                    setFocusedChip(nextChipValue);
-                    break;
-                }
-                case 'prev': {
-                    const referenceChipIndex = relativeToIndex !== null && relativeToIndex !== void 0 ? relativeToIndex : getActiveChipIndex();
-                    const prevChipIndex = referenceChipIndex > 0
-                        ? referenceChipIndex - 1
-                        : referenceChipIndex < 0
-                            ? selection.length - 1
-                            : 0;
-                    const prevChipValue = selection[prevChipIndex];
-                    setFocusedChip(prevChipValue);
-                    break;
-                }
-                case 'first': {
-                    const firstChipValue = selection[0];
-                    setFocusedChip(firstChipValue);
-                    break;
-                }
-                case 'last': {
-                    const lastChipValue = selection[selection.length - 1];
-                    setFocusedChip(lastChipValue);
-                    break;
-                }
-                default:
-                    setFocusedChip(null);
-                    break;
-            }
-        }
-    }, [getActiveChipIndex, isMultiselect, selection]);
-    const handleArrowKey = (0, react_1.useCallback)((direction, event) => {
-        var _a, _b, _c, _d, _e;
-        if (direction)
-            setFocusedOption(null);
-        const focusedElementName = getFocusedElementName();
-        switch (direction) {
-            case 'right':
-                switch (focusedElementName) {
-                    case 'Input': {
-                        if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionEnd) ===
-                            ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value.length)) {
-                            (_c = clearButtonRef.current) === null || _c === void 0 ? void 0 : _c.focus();
-                        }
-                        break;
-                    }
-                    case 'LastChip': {
-                        event.preventDefault();
-                        setInputFocus(0);
-                        updateFocusedChip(null);
-                        break;
-                    }
-                    case 'FirstChip':
-                    case 'MiddleChip': {
-                        updateFocusedChip('next');
-                        break;
-                    }
-                    case 'ClearButton':
-                    default:
-                        break;
-                }
-                break;
-            case 'left':
-                switch (focusedElementName) {
-                    case 'ClearButton': {
-                        event.preventDefault();
-                        setInputFocus((_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.value.length);
-                        break;
-                    }
-                    case 'Input':
-                    case 'MiddleChip':
-                    case 'LastChip': {
-                        if (isMultiselect(selection)) {
-                            if (focusedElementName === 'Input' &&
-                                ((_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.selectionStart) !== 0) {
-                                break;
-                            }
-                            updateFocusedChip('prev');
-                        }
-                        break;
-                    }
-                    case 'FirstChip':
-                    default:
-                        break;
-                }
-                break;
-            default:
-                updateFocusedChip(null);
-                break;
-        }
-    }, [
-        getFocusedElementName,
-        isMultiselect,
-        selection,
-        setInputFocus,
-        updateFocusedChip,
-    ]);
-    (0, react_1.useEffect)(() => {
-        if (inputValue !== prevValue) {
-            updateFocusedOption('first');
-        }
-    }, [inputValue, isOpen, prevValue, updateFocusedOption]);
-    (0, react_1.useEffect)(() => {
-        if (focusedOption) {
-            const focusedElementRef = getOptionRef(focusedOption);
-            if (focusedElementRef && focusedElementRef.current && menuRef.current) {
-                const { offsetTop: optionTop } = focusedElementRef.current;
-                const { scrollTop: menuScroll, offsetHeight: menuHeight } = menuRef.current;
-                if (optionTop > menuHeight || optionTop < menuScroll) {
-                    menuRef.current.scrollTop = optionTop;
-                }
-            }
-        }
-    }, [focusedOption, getOptionRef]);
-    const renderInternalOptions = (0, react_1.useCallback)((_children) => {
-        return react_1.default.Children.map(_children, (child) => {
-            if ((0, lib_1.isComponentType)(child, 'ComboboxOption')) {
-                const { value, displayName } = (0, util_1.getNameAndValue)(child.props);
-                if (isOptionVisible(value)) {
-                    const { className, glyph } = child.props;
-                    const index = allOptions.findIndex((opt) => opt.value === value);
-                    const isFocused = focusedOption === value;
-                    const isSelected = isMultiselect(selection)
-                        ? selection.includes(value)
-                        : selection === value;
-                    const setSelected = () => {
-                        setFocusedOption(value);
-                        updateSelection(value);
-                        setInputFocus();
-                        if (value === selection) {
-                            closeMenu();
-                        }
-                    };
-                    const optionRef = getOptionRef(value);
-                    return (react_1.default.createElement(combobox_option_1.InternalComboboxOption, { value: value, displayName: displayName, isFocused: isFocused, isSelected: isSelected, setSelected: setSelected, glyph: glyph, className: className, index: index, ref: optionRef }));
-                }
-            }
-            else if ((0, lib_1.isComponentType)(child, 'ComboboxGroup')) {
-                const nestedChildren = renderInternalOptions(child.props.children);
-                if (nestedChildren && (nestedChildren === null || nestedChildren === void 0 ? void 0 : nestedChildren.length) > 0) {
-                    return (react_1.default.createElement(combobox_group_1.InternalComboboxGroup, { label: child.props.label, className: child.props.className }, renderInternalOptions(nestedChildren)));
-                }
-            }
-        });
-    }, [
-        allOptions,
-        focusedOption,
-        getOptionRef,
-        isMultiselect,
-        isOptionVisible,
-        selection,
-        setInputFocus,
-        updateSelection,
-    ]);
-    const renderedOptions = (0, react_1.useMemo)(() => renderInternalOptions(children), [children, renderInternalOptions]);
-    const renderedChips = (0, react_1.useMemo)(() => {
-        if (isMultiselect(selection)) {
-            return selection.filter(isValueValid).map((value, index) => {
-                const displayName = getDisplayNameForValue(value);
-                const onRemove = () => {
-                    updateFocusedChip('next', index);
-                    updateSelection(value);
-                };
-                const isFocused = focusedChip === value;
-                const chipRef = getChipRef(value);
-                const onFocus = () => {
-                    setFocusedChip(value);
-                };
-                return (react_1.default.createElement(chip_1.Chip, { key: value, displayName: displayName, isFocused: isFocused, onRemove: onRemove, onFocus: onFocus, ref: chipRef }));
-            });
-        }
-    }, [
-        isMultiselect,
-        selection,
-        isValueValid,
-        getDisplayNameForValue,
-        focusedChip,
-        getChipRef,
-        updateFocusedChip,
-        updateSelection,
-    ]);
-    const renderedInputIcons = (0, react_1.useMemo)(() => {
-        const handleClearButtonClick = (e) => {
-            if (!disabled) {
-                updateSelection(null);
-                onClear === null || onClear === void 0 ? void 0 : onClear(e);
-                onFilter === null || onFilter === void 0 ? void 0 : onFilter('');
-                if (!isOpen) {
-                    openMenu();
-                }
-            }
-        };
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            clearable && doesSelectionExist && (react_1.default.createElement(icon_button_1.default, { "aria-label": "Clear selection", "aria-disabled": disabled, disabled: disabled, ref: clearButtonRef, onClick: handleClearButtonClick, onFocus: handleClearButtonFocus, className: combobox_styles_1.clearButton },
-                react_1.default.createElement(icon_1.default, { glyph: "XWithCircle" }))),
-            state === 'error' ? (react_1.default.createElement(icon_1.default, { glyph: "Warning", color: palette_1.uiColors.red.base, className: combobox_styles_1.endIcon })) : (react_1.default.createElement(icon_1.default, { glyph: "CaretDown", className: combobox_styles_1.endIcon }))));
-    }, [
-        clearable,
-        doesSelectionExist,
-        disabled,
-        state,
-        updateSelection,
-        onClear,
-        onFilter,
-        isOpen,
-    ]);
-    const withIcons = (0, react_1.useMemo)(() => allOptions.some((opt) => opt.hasGlyph), [allOptions]);
-    const onCloseMenu = (0, react_1.useCallback)(() => {
-        var _a;
-        if (!isMultiselect(selection) && selection === prevSelection) {
-            const exactMatchedOption = visibleOptions.find((option) => option.displayName === inputValue || option.value === inputValue);
-            if (exactMatchedOption && !value) {
-                setSelection(exactMatchedOption.value);
-            }
-            else {
-                const displayName = (_a = getDisplayNameForValue(selection)) !== null && _a !== void 0 ? _a : '';
-                setInputValue(displayName);
-            }
-        }
-    }, [
-        getDisplayNameForValue,
-        inputValue,
-        isMultiselect,
-        prevSelection,
-        selection,
-        value,
-        visibleOptions,
-    ]);
-    const onSelect = (0, react_1.useCallback)(() => {
-        var _a;
-        if (doesSelectionExist) {
-            if (isMultiselect(selection)) {
-                scrollToEnd();
-            }
-            else if (!isMultiselect(selection)) {
-                const displayName = (_a = getDisplayNameForValue(selection)) !== null && _a !== void 0 ? _a : '';
-                setInputValue(displayName);
-                closeMenu();
-            }
-        }
-        else {
-            setInputValue('');
-        }
-    }, [doesSelectionExist, getDisplayNameForValue, isMultiselect, selection]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (initialValue) {
-            if ((0, lodash_1.isArray)(initialValue)) {
-                const filteredValue = (_a = initialValue.filter((value) => isValueValid(value))) !== null && _a !== void 0 ? _a : [];
-                setSelection(filteredValue);
-            }
-            else {
-                if (isValueValid(initialValue)) {
-                    setSelection(initialValue);
-                }
-            }
-        }
-        else {
-            setSelection((0, combobox_types_1.getNullSelection)(multiselect));
-        }
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (!(0, lodash_1.isUndefined)(value) && value !== prevValue) {
-            if ((0, lodash_1.isNull)(value)) {
-                setSelection(null);
-            }
-            else if (isMultiselect(value)) {
-                const newSelection = value.filter(isValueValid);
-                setSelection(newSelection);
-            }
-            else {
-                setSelection(isValueValid(value) ? value : null);
-            }
-        }
-    }, [isMultiselect, isValueValid, prevValue, value]);
-    (0, react_1.useEffect)(() => {
-        if (selection !== prevSelection) {
-            onSelect();
-        }
-    }, [onSelect, prevSelection, selection]);
-    (0, react_1.useEffect)(() => {
-        if (!isOpen && prevOpenState !== isOpen) {
-            onCloseMenu();
-        }
-    }, [isOpen, prevOpenState, onCloseMenu]);
-    const closeMenu = () => setOpen(false);
-    const openMenu = () => setOpen(true);
-    const [menuWidth, setMenuWidth] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        setMenuWidth((_b = (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
-    }, [comboboxRef, isOpen, focusedOption, selection]);
-    const handleTransitionEnd = () => {
-        var _a, _b;
-        setMenuWidth((_b = (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
-    };
-    const renderedMenuContents = (0, react_1.useMemo)(() => {
-        switch (searchState) {
-            case 'loading': {
-                return (react_1.default.createElement("span", { className: combobox_styles_1.menuMessage },
-                    react_1.default.createElement(icon_1.default, { glyph: "Refresh", color: palette_1.uiColors.blue.base, className: combobox_styles_1.loadingIconStyle }),
-                    searchLoadingMessage));
-            }
-            case 'error': {
-                return (react_1.default.createElement("span", { className: combobox_styles_1.menuMessage },
-                    react_1.default.createElement(icon_1.default, { glyph: "Warning", color: palette_1.uiColors.red.base }),
-                    searchErrorMessage));
-            }
-            case 'unset':
-            default: {
-                if (renderedOptions && renderedOptions.length > 0) {
-                    return react_1.default.createElement("ul", { className: combobox_styles_1.menuList }, renderedOptions);
-                }
-                return react_1.default.createElement("span", { className: combobox_styles_1.menuMessage }, searchEmptyMessage);
-            }
-        }
-    }, [
-        renderedOptions,
-        searchEmptyMessage,
-        searchErrorMessage,
-        searchLoadingMessage,
-        searchState,
-    ]);
-    const viewportSize = (0, hooks_1.useViewportSize)();
-    const maxHeight = (0, react_1.useMemo)(() => {
-        const maxMenuHeight = 274;
-        const menuMargin = 8;
-        if (viewportSize && comboboxRef.current && menuRef.current) {
-            const { top: triggerTop, bottom: triggerBottom } = comboboxRef.current.getBoundingClientRect();
-            const safeSpace = Math.max(viewportSize.height - triggerBottom, triggerTop);
-            return Math.min(maxMenuHeight, safeSpace - menuMargin);
-        }
-        return maxMenuHeight;
-    }, [viewportSize, comboboxRef, menuRef]);
-    (0, react_1.useEffect)(() => {
-    }, [focusedOption]);
-    const handleInputWrapperMousedown = (e) => {
-        if (e.target !== inputRef.current) {
-            e.preventDefault();
-        }
-    };
-    const handleInputWrapperClick = (e) => {
-        if (e.target !== inputRef.current) {
-            let cursorPos = 0;
-            if (inputRef.current) {
-                const mouseX = e.nativeEvent.offsetX;
-                const inputRight = inputRef.current.offsetLeft + inputRef.current.clientWidth;
-                cursorPos = mouseX > inputRight ? inputValue.length : 0;
-            }
-            setInputFocus(cursorPos);
-        }
-        openMenu();
-    };
-    const handleInputWrapperFocus = () => {
-        scrollToEnd();
-    };
-    const handleInputChange = ({ target: { value }, }) => {
-        setInputValue(value);
-        onFilter === null || onFilter === void 0 ? void 0 : onFilter(value);
-    };
-    const handleClearButtonFocus = () => {
-        setFocusedOption(null);
-    };
-    const handleKeyDown = (event) => {
-        var _a, _b, _c;
-        const isFocusInMenu = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
-        const isFocusOnCombobox = (_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
-        const isFocusInComponent = isFocusOnCombobox || isFocusInMenu;
-        if (isFocusInComponent) {
-            if (event.ctrlKey || event.shiftKey || event.altKey) {
-                return;
-            }
-            const focusedElement = getFocusedElementName();
-            switch (event.keyCode) {
-                case util_1.keyMap.Tab: {
-                    switch (focusedElement) {
-                        case 'Input': {
-                            if (!doesSelectionExist) {
-                                closeMenu();
-                                updateFocusedOption('first');
-                                updateFocusedChip(null);
-                            }
-                            break;
-                        }
-                        case 'LastChip': {
-                            updateFocusedChip(null);
-                            break;
-                        }
-                        case 'FirstChip':
-                        case 'MiddleChip': {
-                            break;
-                        }
-                        case 'ClearButton':
-                        default:
-                            break;
-                    }
-                    break;
-                }
-                case util_1.keyMap.Escape: {
-                    closeMenu();
-                    updateFocusedOption('first');
-                    break;
-                }
-                case util_1.keyMap.Enter:
-                case util_1.keyMap.Space: {
-                    if (isOpen) {
-                        event.preventDefault();
-                    }
-                    if (document.activeElement === inputRef.current &&
-                        isOpen &&
-                        !(0, lodash_1.isNull)(focusedOption)) {
-                        updateSelection(focusedOption);
-                    }
-                    else if (document.activeElement === clearButtonRef.current) {
-                        updateSelection(null);
-                        setInputFocus();
-                    }
-                    break;
-                }
-                case util_1.keyMap.Backspace: {
-                    if (isMultiselect(selection) &&
-                        ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.selectionStart) === 0) {
-                        updateFocusedChip('last');
-                    }
-                    else {
-                        openMenu();
-                    }
-                    break;
-                }
-                case util_1.keyMap.ArrowDown: {
-                    if (isOpen) {
-                        event.preventDefault();
-                    }
-                    openMenu();
-                    updateFocusedOption('next');
-                    break;
-                }
-                case util_1.keyMap.ArrowUp: {
-                    if (isOpen) {
-                        event.preventDefault();
-                    }
-                    updateFocusedOption('prev');
-                    break;
-                }
-                case util_1.keyMap.ArrowRight: {
-                    handleArrowKey('right', event);
-                    break;
-                }
-                case util_1.keyMap.ArrowLeft: {
-                    handleArrowKey('left', event);
-                    break;
-                }
-                default: {
-                    if (!isOpen) {
-                        openMenu();
-                    }
-                }
-            }
-        }
-    };
-    const handleBackdropClick = ({ target }) => {
-        var _a, _b;
-        const isChildFocused = ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) ||
-            ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)) ||
-            false;
-        if (!isChildFocused) {
-            setOpen(false);
-        }
-    };
-    (0, hooks_1.useEventListener)('mousedown', handleBackdropClick);
-    return (react_1.default.createElement(combobox_context_1.ComboboxContext.Provider, { value: {
-            multiselect,
-            darkMode,
-            size,
-            withIcons,
-            disabled,
-            chipTruncationLocation,
-            chipCharacterLimit,
-            inputValue,
-        } },
-        react_1.default.createElement("div", { className: (0, emotion_1.cx)((0, combobox_styles_1.comboboxParentStyle)({ darkMode, size, overflow }), className), ...rest },
-            react_1.default.createElement("div", null,
-                label && (react_1.default.createElement(typography_1.Label, { id: labelId, htmlFor: inputId }, label)),
-                description && react_1.default.createElement(typography_1.Description, null, description)),
-            react_1.default.createElement(interaction_ring_1.default, { className: combobox_styles_1.interactionRingStyle, disabled: disabled, color: (0, combobox_styles_1.interactionRingColor)({ state, darkMode }) },
-                react_1.default.createElement("div", { ref: comboboxRef, role: "combobox", "aria-expanded": isOpen, "aria-controls": menuId, "aria-owns": menuId, tabIndex: -1, className: combobox_styles_1.comboboxStyle, onMouseDown: handleInputWrapperMousedown, onClick: handleInputWrapperClick, onFocus: handleInputWrapperFocus, onKeyDown: handleKeyDown, onTransitionEnd: handleTransitionEnd, "data-disabled": disabled, "data-state": state },
-                    react_1.default.createElement("div", { ref: inputWrapperRef, className: (0, combobox_styles_1.inputWrapperStyle)({
-                            overflow,
-                            isOpen,
-                            selection,
-                            value: inputValue,
-                        }) },
-                        renderedChips,
-                        react_1.default.createElement("input", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-autocomplete": "list", "aria-controls": menuId, "aria-labelledby": labelId, ref: inputRef, id: inputId, className: combobox_styles_1.inputElementStyle, placeholder: placeholderValue, disabled: disabled !== null && disabled !== void 0 ? disabled : undefined, onChange: handleInputChange, value: inputValue, autoComplete: "off" })),
-                    renderedInputIcons)),
-            state === 'error' && errorMessage && (react_1.default.createElement("div", { className: combobox_styles_1.errorMessageStyle }, errorMessage)),
-            react_1.default.createElement(popover_1.default, { active: isOpen && !disabled, spacing: 4, align: "bottom", justify: "middle", refEl: comboboxRef, adjustOnMutation: true, className: (0, emotion_1.cx)((0, combobox_styles_1.popoverStyle)(), (0, combobox_styles_1.menuWrapperStyle)({ darkMode, size, width: menuWidth })), usePortal: false, popoverZIndex: 999999 },
-                react_1.default.createElement("div", { id: menuId, role: "listbox", "aria-labelledby": labelId, "aria-expanded": isOpen, ref: menuRef, className: (0, combobox_styles_1.menuStyle)({ maxHeight }), onMouseDownCapture: (e) => e.preventDefault() }, renderedMenuContents)))));
-}
-exports.default = Combobox;
-//# sourceMappingURL=combobox.js.map