@mongodb-js/compass-components 0.15.0 → 1.0.0

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

@@ -0,0 +1,725 @@
+"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);
+        }
+    };
+    const handleInputWrapperFocus = () => {
+        scrollToEnd();
+        openMenu();
+    };
+    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, combobox_styles_1.menuWrapperStyle)({ darkMode, size, width: menuWidth }) },
+                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