@mongodb-js/compass-components 1.4.0 → 1.6.0

package/lib/components/combobox/Combobox.js

@@ -0,0 +1,817 @@
+"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 });
+exports.Combobox = void 0;
+const react_1 = __importStar(require("react"));
+const clone_1 = __importDefault(require("lodash/clone"));
+const isArray_1 = __importDefault(require("lodash/isArray"));
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const isNull_1 = __importDefault(require("lodash/isNull"));
+const isString_1 = __importDefault(require("lodash/isString"));
+const isUndefined_1 = __importDefault(require("lodash/isUndefined"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const hooks_1 = require("@leafygreen-ui/hooks");
+const icon_1 = __importDefault(require("@leafygreen-ui/icon"));
+const icon_button_1 = __importDefault(require("@leafygreen-ui/icon-button"));
+const leafygreen_provider_1 = require("@leafygreen-ui/leafygreen-provider");
+const lib_1 = require("@leafygreen-ui/lib");
+const palette_1 = require("@leafygreen-ui/palette");
+const typography_1 = require("@leafygreen-ui/typography");
+const ComboboxMenu_1 = require("./ComboboxMenu/ComboboxMenu");
+const Chip_1 = require("./Chip");
+const Combobox_styles_1 = require("./Combobox.styles");
+const Combobox_types_1 = require("./Combobox.types");
+const ComboboxContext_1 = require("./ComboboxContext");
+const ComboboxGroup_1 = require("./ComboboxGroup");
+const ComboboxOption_1 = require("./ComboboxOption");
+const utils_1 = require("./utils");
+const tokens_1 = require("@leafygreen-ui/tokens");
+const descriptionWidth = tokens_1.spacing[5] * 14;
+const popoverMenuStyles = (width, containsDescription) => {
+    if (!containsDescription) {
+        return (0, emotion_1.css) `
+      width: ${width}px;
+    `;
+    }
+    const dropdownWidth = width + descriptionWidth;
+    return (0, emotion_1.css) `
+    width: ${dropdownWidth}px;
+    margin-left: ${dropdownWidth / 2 - width / 2}px;
+  `;
+};
+function Combobox({ children, label, description, placeholder = 'Select', 'aria-label': ariaLabel, disabled = false, size = Combobox_types_1.ComboboxSize.Default, darkMode: darkModeProp, 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, usePortal = true, portalClassName, portalContainer, scrollContainer, popoverZIndex, popoverClassName, ...rest }) {
+    const { darkMode, theme } = (0, leafygreen_provider_1.useDarkMode)(darkModeProp);
+    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 wasOpen = (0, hooks_1.usePrevious)(isOpen);
+    const [highlightedOption, setHighlightedOption] = (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, isNull_1.default)(selection) &&
+        (((0, isArray_1.default)(selection) && selection.length > 0) || (0, isString_1.default)(selection));
+    const placeholderValue = multiselect && (0, isArray_1.default)(selection) && selection.length > 0
+        ? undefined
+        : placeholder;
+    const closeMenu = () => setOpen(false);
+    const openMenu = () => setOpen(true);
+    const allOptions = (0, react_1.useMemo)(() => (0, utils_1.flattenChildren)(children), [children]);
+    const isMultiselect = (0, react_1.useCallback)((val) => {
+        if (multiselect && (typeof val == 'string' || typeof val == 'number')) {
+            lib_1.consoleOnce.error(`Error in Combobox: multiselect is set to \`true\`, but received a ${typeof val} value: "${val}"`);
+        }
+        else if (!multiselect && (0, isArray_1.default)(val)) {
+            lib_1.consoleOnce.error('Error in Combobox: multiselect is set to `false`, but received an Array value');
+        }
+        return multiselect && (0, isArray_1.default)(val);
+    }, [multiselect]);
+    const setInputFocus = (0, react_1.useCallback)((cursorPos) => {
+        if (!disabled && inputRef && inputRef.current) {
+            inputRef.current.focus();
+            if (!(0, isUndefined_1.default)(cursorPos)) {
+                inputRef.current.setSelectionRange(cursorPos, cursorPos);
+            }
+        }
+    }, [disabled]);
+    const updateSelection = (0, react_1.useCallback)((value) => {
+        if (isMultiselect(selection)) {
+            const newSelection = (0, clone_1.default)(selection);
+            if ((0, isNull_1.default)(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 isValueCurrentSelection = (0, react_1.useCallback)((value) => {
+        return isMultiselect(selection)
+            ? selection.includes(value)
+            : value === selection;
+    }, [isMultiselect, selection]);
+    const isTextCurrentSelection = (0, react_1.useCallback)((text) => {
+        const value = (0, utils_1.getValueForDisplayName)(text, allOptions);
+        return isValueCurrentSelection(value);
+    }, [allOptions, isValueCurrentSelection]);
+    const isOptionDisabled = (option) => {
+        if (typeof option === 'string') {
+            const optionObj = (0, utils_1.getOptionObjectFromValue)(option, allOptions);
+            return !!(optionObj === null || optionObj === void 0 ? void 0 : optionObj.isDisabled);
+        }
+        else {
+            return !!option.isDisabled;
+        }
+    };
+    const shouldOptionBeVisible = (0, react_1.useCallback)((option) => {
+        const value = typeof option === 'string' ? option : option.value;
+        if (filteredOptions && filteredOptions.length > 0) {
+            return filteredOptions.includes(value);
+        }
+        if (isTextCurrentSelection(inputValue)) {
+            return true;
+        }
+        const displayName = typeof option === 'string'
+            ? (0, utils_1.getDisplayNameForValue)(value, allOptions)
+            : option.displayName;
+        const isValueInDisplayName = displayName
+            .toLowerCase()
+            .includes(inputValue.toLowerCase());
+        return isValueInDisplayName;
+    }, [filteredOptions, isTextCurrentSelection, inputValue, allOptions]);
+    const visibleOptions = (0, react_1.useMemo)(() => allOptions.filter(shouldOptionBeVisible), [allOptions, shouldOptionBeVisible]);
+    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 [focusedElementName, trackFocusedElement] = (0, react_1.useState)();
+    const isElementFocused = (elementName) => elementName === focusedElementName;
+    const updateHighlightedOption = (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 indexOfHighlight = getIndexOfValue(highlightedOption);
+        if (direction && isOpen) {
+            setFocusedChip(null);
+            setInputFocus();
+        }
+        switch (direction) {
+            case 'next': {
+                const newValue = indexOfHighlight + 1 < optionsCount
+                    ? getValueAtIndex(indexOfHighlight + 1)
+                    : getValueAtIndex(0);
+                setHighlightedOption(newValue !== null && newValue !== void 0 ? newValue : null);
+                break;
+            }
+            case 'prev': {
+                const newValue = indexOfHighlight - 1 >= 0
+                    ? getValueAtIndex(indexOfHighlight - 1)
+                    : getValueAtIndex(lastIndex);
+                setHighlightedOption(newValue !== null && newValue !== void 0 ? newValue : null);
+                break;
+            }
+            case 'last': {
+                const newValue = getValueAtIndex(lastIndex);
+                setHighlightedOption(newValue !== null && newValue !== void 0 ? newValue : null);
+                break;
+            }
+            case 'first':
+            default: {
+                const newValue = getValueAtIndex(0);
+                setHighlightedOption(newValue !== null && newValue !== void 0 ? newValue : null);
+            }
+        }
+    }, [
+        highlightedOption,
+        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)
+            setHighlightedOption(null);
+        switch (direction) {
+            case 'right':
+                switch (focusedElementName) {
+                    case Combobox_types_1.ComboboxElement.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 Combobox_types_1.ComboboxElement.FirstChip:
+                    case Combobox_types_1.ComboboxElement.MiddleChip:
+                    case Combobox_types_1.ComboboxElement.LastChip: {
+                        if (focusedElementName === Combobox_types_1.ComboboxElement.LastChip ||
+                            (selection === null || selection === void 0 ? void 0 : selection.length) === 1) {
+                            setInputFocus(0);
+                            updateFocusedChip(null);
+                            event.preventDefault();
+                            break;
+                        }
+                        updateFocusedChip('next');
+                        break;
+                    }
+                    case Combobox_types_1.ComboboxElement.ClearButton:
+                    default:
+                        break;
+                }
+                break;
+            case 'left':
+                switch (focusedElementName) {
+                    case Combobox_types_1.ComboboxElement.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 Combobox_types_1.ComboboxElement.Input:
+                    case Combobox_types_1.ComboboxElement.MiddleChip:
+                    case Combobox_types_1.ComboboxElement.LastChip: {
+                        if (isMultiselect(selection)) {
+                            if (focusedElementName === Combobox_types_1.ComboboxElement.Input &&
+                                ((_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.selectionStart) !== 0) {
+                                break;
+                            }
+                            updateFocusedChip('prev');
+                        }
+                        break;
+                    }
+                    case Combobox_types_1.ComboboxElement.FirstChip:
+                    default:
+                        break;
+                }
+                break;
+            default:
+                updateFocusedChip(null);
+                break;
+        }
+    }, [
+        focusedElementName,
+        isMultiselect,
+        selection,
+        setInputFocus,
+        updateFocusedChip,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (inputValue !== prevValue) {
+            updateHighlightedOption('first');
+        }
+    }, [inputValue, isOpen, prevValue, updateHighlightedOption]);
+    (0, react_1.useEffect)(() => {
+        if (highlightedOption) {
+            const focusedElementRef = getOptionRef(highlightedOption);
+            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;
+                }
+            }
+        }
+    }, [highlightedOption, getOptionRef]);
+    const renderOption = (0, react_1.useCallback)((child) => {
+        if ((0, lib_1.isComponentType)(child, 'ComboboxOption')) {
+            const { value, displayName } = (0, utils_1.getNameAndValue)(child.props);
+            if (shouldOptionBeVisible(value)) {
+                const { className, glyph, disabled } = child.props;
+                const index = allOptions.findIndex((opt) => opt.value === value);
+                const isFocused = highlightedOption === value;
+                const isSelected = isMultiselect(selection)
+                    ? selection.includes(value)
+                    : selection === value;
+                const setSelected = () => {
+                    setHighlightedOption(value);
+                    updateSelection(value);
+                    setInputFocus();
+                    if (value === selection) {
+                        closeMenu();
+                    }
+                };
+                const optionRef = getOptionRef(value);
+                return (react_1.default.createElement(ComboboxOption_1.InternalComboboxOption, { value: value, displayName: displayName, isFocused: isFocused, isSelected: isSelected, disabled: disabled, setSelected: setSelected, glyph: glyph, className: className, index: index, ref: optionRef, description: child.props.description }));
+            }
+        }
+        else if ((0, lib_1.isComponentType)(child, 'ComboboxGroup')) {
+            const nestedChildren = react_1.default.Children.map(child.props.children, renderOption);
+            if (nestedChildren && (nestedChildren === null || nestedChildren === void 0 ? void 0 : nestedChildren.length) > 0) {
+                return (react_1.default.createElement(ComboboxGroup_1.InternalComboboxGroup, { label: child.props.label, className: child.props.className }, react_1.default.Children.map(nestedChildren, renderOption)));
+            }
+        }
+    }, [
+        allOptions,
+        getOptionRef,
+        highlightedOption,
+        isMultiselect,
+        selection,
+        setInputFocus,
+        shouldOptionBeVisible,
+        updateSelection,
+    ]);
+    const renderedOptionsJSX = (0, react_1.useMemo)(() => react_1.default.Children.map(children, renderOption), [children, renderOption]);
+    const renderedChips = (0, react_1.useMemo)(() => {
+        if (isMultiselect(selection)) {
+            return selection.filter(isValueValid).map((value, index) => {
+                const displayName = (0, utils_1.getDisplayNameForValue)(value, allOptions);
+                const isFocused = focusedChip === value;
+                const chipRef = getChipRef(value);
+                const isLastChip = index >= selection.length - 1;
+                const onRemove = () => {
+                    if (isLastChip) {
+                        setInputFocus();
+                        updateFocusedChip(null);
+                    }
+                    else {
+                        updateFocusedChip('next', index);
+                    }
+                    updateSelection(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,
+        allOptions,
+        focusedChip,
+        getChipRef,
+        updateSelection,
+        setInputFocus,
+        updateFocusedChip,
+    ]);
+    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: (0, emotion_1.cx)(Combobox_styles_1.clearButtonStyle), darkMode: darkMode },
+                react_1.default.createElement(icon_1.default, { glyph: "XWithCircle" }))),
+            state === 'error' ? (react_1.default.createElement(icon_1.default, { glyph: "Warning", color: darkMode ? palette_1.palette.red.light1 : palette_1.palette.red.base, className: (0, Combobox_styles_1.endIconStyle)(size) })) : (react_1.default.createElement(icon_1.default, { glyph: "CaretDown", className: (0, Combobox_styles_1.endIconStyle)(size) }))));
+    }, [
+        clearable,
+        doesSelectionExist,
+        disabled,
+        state,
+        darkMode,
+        size,
+        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 = (0, utils_1.getDisplayNameForValue)(selection, allOptions)) !== null && _a !== void 0 ? _a : '';
+                setInputValue(displayName);
+            }
+        }
+    }, [
+        allOptions,
+        inputValue,
+        isMultiselect,
+        prevSelection,
+        selection,
+        value,
+        visibleOptions,
+    ]);
+    const onSelect = (0, react_1.useCallback)(() => {
+        var _a;
+        if (doesSelectionExist) {
+            if (isMultiselect(selection)) {
+                scrollInputToEnd();
+            }
+            else if (!isMultiselect(selection)) {
+                const displayName = (_a = (0, utils_1.getDisplayNameForValue)(selection, allOptions)) !== null && _a !== void 0 ? _a : '';
+                setInputValue(displayName);
+                closeMenu();
+            }
+        }
+        else {
+            setInputValue('');
+        }
+    }, [doesSelectionExist, allOptions, isMultiselect, selection]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (initialValue) {
+            if ((0, isArray_1.default)(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, isUndefined_1.default)(value) && value !== prevValue) {
+            if ((0, isNull_1.default)(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 (!(0, isEqual_1.default)(selection, prevSelection)) {
+            onSelect();
+        }
+    }, [onSelect, prevSelection, selection]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen && wasOpen) {
+            onCloseMenu();
+        }
+    }, [isOpen, wasOpen, onCloseMenu]);
+    const [popoverMenuWidth, setPopoverMenuWidth] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        setPopoverMenuWidth((_b = (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
+    }, [comboboxRef, isOpen, highlightedOption, selection]);
+    const handleTransitionEnd = () => {
+        var _a, _b;
+        setPopoverMenuWidth((_b = (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
+    };
+    const handleInputWrapperMousedown = (e) => {
+        if (disabled) {
+            e.preventDefault();
+        }
+    };
+    const handleComboboxClick = (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 handleComboboxFocus = (e) => {
+        scrollInputToEnd();
+        trackFocusedElement(getNameFromElement(e.target));
+    };
+    const handleInputChange = ({ target: { value }, }) => {
+        setInputValue(value);
+        onFilter === null || onFilter === void 0 ? void 0 : onFilter(value);
+    };
+    const handleClearButtonFocus = () => {
+        setHighlightedOption(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;
+            }
+            switch (event.keyCode) {
+                case lib_1.keyMap.Tab: {
+                    switch (focusedElementName) {
+                        case 'Input': {
+                            if (!doesSelectionExist) {
+                                closeMenu();
+                                updateHighlightedOption('first');
+                                updateFocusedChip(null);
+                            }
+                            break;
+                        }
+                        case 'LastChip': {
+                            updateFocusedChip(null);
+                            break;
+                        }
+                        case 'FirstChip':
+                        case 'MiddleChip': {
+                            break;
+                        }
+                        case 'ClearButton':
+                        default:
+                            break;
+                    }
+                    break;
+                }
+                case lib_1.keyMap.Escape: {
+                    closeMenu();
+                    updateHighlightedOption('first');
+                    break;
+                }
+                case lib_1.keyMap.Enter: {
+                    if (!isOpen) {
+                        openMenu();
+                    }
+                    else if (focusedElementName === Combobox_types_1.ComboboxElement.Input &&
+                        !(0, isNull_1.default)(highlightedOption) &&
+                        !isOptionDisabled(highlightedOption)) {
+                        updateSelection(highlightedOption);
+                    }
+                    else if (focusedElementName === Combobox_types_1.ComboboxElement.ClearButton) {
+                        updateSelection(null);
+                        setInputFocus();
+                    }
+                    break;
+                }
+                case lib_1.keyMap.Backspace: {
+                    if (isMultiselect(selection)) {
+                        if (focusedElementName === 'Input' &&
+                            ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.selectionStart) === 0) {
+                            updateFocusedChip('last');
+                        }
+                    }
+                    openMenu();
+                    break;
+                }
+                case lib_1.keyMap.ArrowDown: {
+                    if (isOpen) {
+                        event.preventDefault();
+                        updateHighlightedOption('next');
+                    }
+                    else {
+                        openMenu();
+                    }
+                    break;
+                }
+                case lib_1.keyMap.ArrowUp: {
+                    if (isOpen) {
+                        event.preventDefault();
+                        updateHighlightedOption('prev');
+                    }
+                    else {
+                        openMenu();
+                    }
+                    break;
+                }
+                case lib_1.keyMap.ArrowRight: {
+                    handleArrowKey('right', event);
+                    break;
+                }
+                case lib_1.keyMap.ArrowLeft: {
+                    handleArrowKey('left', event);
+                    break;
+                }
+                default: {
+                    if (!isOpen) {
+                        openMenu();
+                    }
+                }
+            }
+        }
+    };
+    (0, hooks_1.useEventListener)('mousedown', (mousedown) => {
+        if (!doesComponentContainEventTarget(mousedown)) {
+            mousedown.preventDefault();
+            mousedown.stopPropagation();
+        }
+    }, {
+        enabled: isOpen,
+    });
+    (0, hooks_1.useEventListener)('click', (click) => {
+        if (!doesComponentContainEventTarget(click)) {
+            click.stopPropagation();
+            closeMenu();
+        }
+    }, {
+        options: { capture: true },
+        enabled: isOpen,
+    });
+    const popoverProps = {
+        popoverZIndex,
+        ...(usePortal
+            ? {
+                usePortal,
+                portalClassName,
+                portalContainer,
+                scrollContainer,
+            }
+            : { usePortal }),
+    };
+    const isAnyOptionWithDescription = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        const numberOfOptionsWithDescriptions = (_b = (_a = react_1.default.Children.map(children, (child) => { var _a; return (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.description; })) === null || _a === void 0 ? void 0 : _a.filter(Boolean)) === null || _b === void 0 ? void 0 : _b.length;
+        return (numberOfOptionsWithDescriptions || 0) > 0;
+    }, [children]);
+    return (react_1.default.createElement(ComboboxContext_1.ComboboxContext.Provider, { value: {
+            multiselect,
+            darkMode,
+            theme,
+            size,
+            withIcons,
+            disabled,
+            isOpen,
+            state,
+            searchState,
+            chipTruncationLocation,
+            chipCharacterLimit,
+            inputValue,
+            searchInputSize: popoverMenuWidth,
+        } },
+        react_1.default.createElement("div", { className: (0, emotion_1.cx)((0, Combobox_styles_1.comboboxParentStyle)(size), className), ...rest },
+            (label || description) && (react_1.default.createElement("div", { className: Combobox_styles_1.labelDescriptionContainerStyle },
+                label && (react_1.default.createElement(typography_1.Label, { id: labelId, htmlFor: inputId, darkMode: darkMode }, label)),
+                description && (react_1.default.createElement(typography_1.Description, { darkMode: darkMode }, description)))),
+            react_1.default.createElement("div", { ref: comboboxRef, role: "combobox", "aria-expanded": isOpen, "aria-controls": menuId, "aria-owns": menuId, tabIndex: -1, onMouseDown: handleInputWrapperMousedown, onClick: handleComboboxClick, onFocus: handleComboboxFocus, onKeyDown: handleKeyDown, onTransitionEnd: handleTransitionEnd, className: (0, emotion_1.cx)(Combobox_styles_1.baseComboboxStyles, Combobox_styles_1.comboboxThemeStyles[theme], (0, Combobox_styles_1.comboboxSizeStyles)(size), {
+                    [Combobox_styles_1.comboboxSelectionStyles]: clearable && doesSelectionExist,
+                    [Combobox_styles_1.comboboxDisabledStyles[theme]]: disabled,
+                    [Combobox_styles_1.comboboxErrorStyles[theme]]: state === Combobox_types_1.State.error,
+                    [Combobox_styles_1.comboboxFocusStyle[theme]]: isElementFocused(Combobox_types_1.ComboboxElement.Input),
+                }) },
+                react_1.default.createElement("div", { ref: inputWrapperRef, className: (0, Combobox_styles_1.inputWrapperStyle)({
+                        size,
+                        overflow,
+                    }) },
+                    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: (0, emotion_1.cx)(Combobox_styles_1.baseInputElementStyle, Combobox_styles_1.inputElementSizeStyle[size], Combobox_styles_1.inputElementThemeStyle[theme], (0, Combobox_styles_1.inputElementTransitionStyles)(isOpen), {
+                            [(0, Combobox_styles_1.multiselectInputElementStyle)(size, inputValue)]: isMultiselect(selection),
+                        }), 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: (0, emotion_1.cx)(Combobox_styles_1.errorMessageThemeStyle[theme], Combobox_styles_1.errorMessageSizeStyle[size]) }, errorMessage)),
+            react_1.default.createElement(ComboboxMenu_1.ComboboxMenu, { id: menuId, labelId: labelId, refEl: comboboxRef, ref: menuRef, className: (0, emotion_1.cx)(popoverMenuStyles(popoverMenuWidth, isAnyOptionWithDescription), popoverClassName), searchLoadingMessage: searchLoadingMessage, searchErrorMessage: searchErrorMessage, searchEmptyMessage: searchEmptyMessage, ...popoverProps }, renderedOptionsJSX))));
+    function doesComponentContainEventTarget({ target }) {
+        var _a, _b;
+        return (((_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);
+    }
+    function scrollInputToEnd() {
+        if (inputWrapperRef && inputWrapperRef.current) {
+            inputWrapperRef.current.scrollLeft = inputWrapperRef.current.scrollWidth;
+        }
+    }
+    function getNameFromElement(element) {
+        var _a, _b, _c, _d;
+        if (!element)
+            return;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(element))
+            return Combobox_types_1.ComboboxElement.Input;
+        if ((_b = clearButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(element))
+            return Combobox_types_1.ComboboxElement.ClearButton;
+        const activeChipIndex = 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(element); })
+            : -1;
+        if (isMultiselect(selection)) {
+            if (activeChipIndex === 0)
+                return Combobox_types_1.ComboboxElement.FirstChip;
+            if (activeChipIndex === selection.length - 1)
+                return Combobox_types_1.ComboboxElement.LastChip;
+            if (activeChipIndex > 0)
+                return Combobox_types_1.ComboboxElement.MiddleChip;
+        }
+        if ((_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.contains(element))
+            return Combobox_types_1.ComboboxElement.Menu;
+        if ((_d = comboboxRef.current) === null || _d === void 0 ? void 0 : _d.contains(element))
+            return Combobox_types_1.ComboboxElement.Combobox;
+    }
+}
+exports.Combobox = Combobox;
+Combobox.propTypes = {
+    multiselect: prop_types_1.default.bool,
+    value: prop_types_1.default.oneOfType([
+        prop_types_1.default.string,
+        prop_types_1.default.arrayOf(prop_types_1.default.string),
+    ]),
+    initialValue: prop_types_1.default.oneOfType([
+        prop_types_1.default.string,
+        prop_types_1.default.arrayOf(prop_types_1.default.string),
+    ]),
+    overflow: prop_types_1.default.oneOf(Object.values(Combobox_types_1.Overflow)),
+    darkMode: prop_types_1.default.bool,
+    label: prop_types_1.default.string,
+    'aria-label': prop_types_1.default.string,
+    children: prop_types_1.default.node,
+    onChange: prop_types_1.default.func,
+    chipCharacterLimit: prop_types_1.default.number,
+    chipTruncationLocation: prop_types_1.default.oneOf(Object.values(Combobox_types_1.TruncationLocation)),
+    onClear: prop_types_1.default.func,
+    onFilter: prop_types_1.default.func,
+    clearable: prop_types_1.default.bool,
+    searchLoadingMessage: prop_types_1.default.string,
+    searchErrorMessage: prop_types_1.default.string,
+    searchEmptyMessage: prop_types_1.default.string,
+    searchState: prop_types_1.default.oneOf(Object.values(Combobox_types_1.SearchState)),
+    errorMessage: prop_types_1.default.string,
+    state: prop_types_1.default.oneOf(Object.values(Combobox_types_1.State)),
+    size: prop_types_1.default.oneOf(Object.values(Combobox_types_1.ComboboxSize)),
+    disabled: prop_types_1.default.bool,
+    description: prop_types_1.default.string,
+    placeholder: prop_types_1.default.string,
+    filteredOptions: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    popoverZIndex: prop_types_1.default.number,
+    usePortal: prop_types_1.default.bool,
+    scrollContainer: prop_types_1.default.elementType,
+    portalContainer: prop_types_1.default.elementType,
+    portalClassName: prop_types_1.default.string,
+};
+//# sourceMappingURL=Combobox.js.map