@mongodb-js/compass-components 1.32.1 → 1.32.2

package/lib/components/combobox/Combobox.js

@@ -1,1029 +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 });
-exports.Combobox = void 0;
-/* eslint-disable filename-rules/match */
-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;
-// By default we want the menu option to be the same width as the input
-// If the user has specified a description, we add extra space to fit the description.
-const popoverMenuStyles = (width, numDescChars) => {
-    if (numDescChars === 0) {
-        return (0, emotion_1.css) `
-      width: ${width}px;
-    `;
-    }
-    const descWithExtraSpace = numDescChars + 5;
-    return (0, emotion_1.css) `
-    width: calc(
-      ${width}px + min(${descriptionWidth}px, ${descWithExtraSpace}ch)
-    );
-
-    margin-left: calc(
-      min(${descriptionWidth / 2}px, ${descWithExtraSpace / 2}ch)
-    );
-  `;
-};
-/**
- * Combobox is a combination of a Select and TextInput,
- * allowing the user to either type a value directly or select a value from the list.
- * Can be configured to select a single or multiple options.
- */
-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);
-    /**
-     * Array of all of the options objects
-     */
-    const allOptions = (0, react_1.useMemo)(() => (0, utils_1.flattenChildren)(children), [children]);
-    /**
-     * Utility function that tells Typescript whether selection is multiselect
-     */
-    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]);
-    /**
-     * Forces focus of input box
-     * @param cursorPos index the cursor should be set to
-     */
-    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]);
-    /**
-     * Update selection.
-     * This behaves differently in multi. vs single select.
-     * @param value option value the selection should be set to
-     */
-    const updateSelection = (0, react_1.useCallback)((value) => {
-        if (isMultiselect(selection)) {
-            // We know M is true here
-            const newSelection = (0, clone_1.default)(selection);
-            if ((0, isNull_1.default)(value)) {
-                newSelection.length = 0;
-            }
-            else {
-                if (selection.includes(value)) {
-                    // remove from array
-                    newSelection.splice(newSelection.indexOf(value), 1);
-                }
-                else {
-                    // add to array
-                    newSelection.push(value);
-                    // clear text
-                    setInputValue('');
-                }
-            }
-            setSelection(newSelection);
-            onChange?.(newSelection);
-        }
-        else {
-            const newSelection = value;
-            setSelection(newSelection);
-            onChange?.(newSelection);
-        }
-    }, [isMultiselect, onChange, selection]);
-    /**
-     * Returns whether a given value is included in, or equal to, the current selection
-     * @param value the option value to check
-     */
-    const isValueCurrentSelection = (0, react_1.useCallback)((value) => {
-        return isMultiselect(selection)
-            ? selection.includes(value)
-            : value === selection;
-    }, [isMultiselect, selection]);
-    /**
-     * Returns whether given text is included in, or equal to, the current selection.
-     * Similar to `isValueCurrentSelection`, but assumes the text argument is the `displayName` for the selection
-     * @param text the text to check
-     */
-    const isTextCurrentSelection = (0, react_1.useCallback)((text) => {
-        const value = (0, utils_1.getValueForDisplayName)(text, allOptions);
-        return isValueCurrentSelection(value);
-    }, [allOptions, isValueCurrentSelection]);
-    /**
-     * Returns whether the provided option is disabled
-     * @param option the option value or OptionObject to check
-     */
-    const isOptionDisabled = (option) => {
-        if (typeof option === 'string') {
-            const optionObj = (0, utils_1.getOptionObjectFromValue)(option, allOptions);
-            return !!optionObj?.isDisabled;
-        }
-        else {
-            return !!option.isDisabled;
-        }
-    };
-    /**
-     * Computes whether the option is visible based on the current input
-     * @param option the option value or OptionObject to compute
-     */
-    const shouldOptionBeVisible = (0, react_1.useCallback)((option) => {
-        const value = typeof option === 'string' ? option : option.value;
-        // If filtered options are provided
-        if (filteredOptions && filteredOptions.length > 0) {
-            return filteredOptions.includes(value);
-        }
-        // If the text input value is the current selection
-        // (or included in the selection)
-        // then all options should be visible
-        if (isTextCurrentSelection(inputValue)) {
-            return true;
-        }
-        // otherwise, we do our own filtering
-        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]);
-    /**
-     * The array of visible options objects
-     */
-    const visibleOptions = (0, react_1.useMemo)(() => allOptions.filter(shouldOptionBeVisible), [allOptions, shouldOptionBeVisible]);
-    /**
-     * Returns whether the given value is in the options array
-     * @param value the value to check
-     */
-    const isValueValid = (0, react_1.useCallback)((value) => {
-        return value ? !!allOptions.find((opt) => opt.value === value) : false;
-    }, [allOptions]);
-    /**
-     * Returns the index of a given value in the array of visible (filtered) options
-     * @param value the option value to get the index of
-     */
-    const getIndexOfValue = (0, react_1.useCallback)((value) => {
-        return visibleOptions
-            ? visibleOptions.findIndex((option) => option.value === value)
-            : -1;
-    }, [visibleOptions]);
-    /**
-     * Returns the option value of a given index in the array of visible (filtered) options
-     * @param index the option index to get the value of
-     */
-    const getValueAtIndex = (0, react_1.useCallback)((index) => {
-        if (visibleOptions && visibleOptions.length >= index) {
-            const option = visibleOptions[index];
-            return option ? option.value : undefined;
-        }
-    }, [visibleOptions]);
-    /**
-     * Returns the index of the active chip in the selection array
-     */
-    const getActiveChipIndex = (0, react_1.useCallback)(() => isMultiselect(selection)
-        ? selection.findIndex((value) => getChipRef(value)?.current?.contains(document.activeElement))
-        : -1, [getChipRef, isMultiselect, selection]);
-    /**
-     *
-     * Focus Management
-     *
-     */
-    const [focusedElementName, trackFocusedElement] = (0, react_1.useState)();
-    const isElementFocused = (elementName) => elementName === focusedElementName;
-    /**
-     * Updates the highlighted menu option based on the provided direction
-     * @param direction the direction to move the focus. `'next' | 'prev' | 'first' | 'last'`
-     */
-    const updateHighlightedOption = (0, react_1.useCallback)((direction) => {
-        const optionsCount = visibleOptions?.length ?? 0;
-        const lastIndex = optionsCount - 1 > 0 ? optionsCount - 1 : 0;
-        const indexOfHighlight = getIndexOfValue(highlightedOption);
-        // Remove focus from chip
-        if (direction && isOpen) {
-            setFocusedChip(null);
-            setInputFocus();
-        }
-        switch (direction) {
-            case 'next': {
-                const newValue = indexOfHighlight + 1 < optionsCount
-                    ? getValueAtIndex(indexOfHighlight + 1)
-                    : getValueAtIndex(0);
-                setHighlightedOption(newValue ?? null);
-                break;
-            }
-            case 'prev': {
-                const newValue = indexOfHighlight - 1 >= 0
-                    ? getValueAtIndex(indexOfHighlight - 1)
-                    : getValueAtIndex(lastIndex);
-                setHighlightedOption(newValue ?? null);
-                break;
-            }
-            case 'last': {
-                const newValue = getValueAtIndex(lastIndex);
-                setHighlightedOption(newValue ?? null);
-                break;
-            }
-            case 'first':
-            default: {
-                const newValue = getValueAtIndex(0);
-                setHighlightedOption(newValue ?? null);
-            }
-        }
-    }, [
-        highlightedOption,
-        getIndexOfValue,
-        getValueAtIndex,
-        isOpen,
-        setInputFocus,
-        visibleOptions?.length,
-    ]);
-    /**
-     * Updates the focused chip based on the provided direction
-     * @param direction the direction to move the focus. `'next' | 'prev' | 'first' | 'last'`
-     * @param relativeToIndex the chip index to move focus relative to
-     */
-    const updateFocusedChip = (0, react_1.useCallback)((direction, relativeToIndex) => {
-        if (isMultiselect(selection)) {
-            switch (direction) {
-                case 'next': {
-                    const referenceChipIndex = 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 ?? 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]);
-    /**
-     * Handles an arrow key press
-     */
-    const handleArrowKey = (0, react_1.useCallback)((direction, event) => {
-        // Remove focus from menu
-        if (direction)
-            setHighlightedOption(null);
-        switch (direction) {
-            case 'right':
-                switch (focusedElementName) {
-                    case Combobox_types_1.ComboboxElement.Input: {
-                        // If cursor is at the end of the input
-                        if (inputRef.current?.selectionEnd ===
-                            inputRef.current?.value.length) {
-                            clearButtonRef.current?.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 ||
-                            // the first chip is also the last chip (i.e. only one)
-                            selection?.length === 1) {
-                            // if focus is on last chip, go to input
-                            setInputFocus(0);
-                            updateFocusedChip(null);
-                            event.preventDefault();
-                            break;
-                        }
-                        // First/middle chips
-                        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(inputRef?.current?.value.length);
-                        break;
-                    }
-                    case Combobox_types_1.ComboboxElement.Input:
-                    case Combobox_types_1.ComboboxElement.MiddleChip:
-                    case Combobox_types_1.ComboboxElement.LastChip: {
-                        if (isMultiselect(selection)) {
-                            // Break if cursor is not at the start of the input
-                            if (focusedElementName === Combobox_types_1.ComboboxElement.Input &&
-                                inputRef.current?.selectionStart !== 0) {
-                                break;
-                            }
-                            updateFocusedChip('prev');
-                        }
-                        break;
-                    }
-                    case Combobox_types_1.ComboboxElement.FirstChip:
-                    default:
-                        break;
-                }
-                break;
-            default:
-                updateFocusedChip(null);
-                break;
-        }
-    }, [
-        focusedElementName,
-        isMultiselect,
-        selection,
-        setInputFocus,
-        updateFocusedChip,
-    ]);
-    // When the input value changes (or when the menu opens)
-    // Update the focused option
-    (0, react_1.useEffect)(() => {
-        if (inputValue !== prevValue) {
-            updateHighlightedOption('first');
-        }
-    }, [inputValue, isOpen, prevValue, updateHighlightedOption]);
-    // When the focused option changes, update the menu scroll if necessary
-    (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]);
-    /**
-     * Rendering
-     */
-    /**
-     * Callback to render a child as an <InternalComboboxOption> element
-     */
-    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?.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,
-    ]);
-    /**
-     * The rendered JSX elements for the options
-     */
-    const renderedOptionsJSX = (0, react_1.useMemo)(() => react_1.default.Children.map(children, renderOption), [children, renderOption]);
-    /**
-     * The rendered JSX for the selection Chips
-     */
-    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) {
-                        // Focus the input if this is the last chip in the set
-                        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 handleClearButtonFocus = () => {
-        setHighlightedOption(null);
-    };
-    /**
-     * The rendered JSX for the input icons (clear, warn & caret)
-     */
-    const renderedInputIcons = (0, react_1.useMemo)(() => {
-        const handleClearButtonClick = (e) => {
-            if (!disabled) {
-                updateSelection(null);
-                onClear?.(e);
-                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,
-    ]);
-    /**
-     * Flag to determine whether the rendered options have icons
-     */
-    const withIcons = (0, react_1.useMemo)(() => allOptions.some((opt) => opt.hasGlyph), [allOptions]);
-    /**
-     *
-     * Selection Management
-     *
-     */
-    const onCloseMenu = (0, react_1.useCallback)(() => {
-        // Single select, and no change to selection
-        if (!isMultiselect(selection) && selection === prevSelection) {
-            const exactMatchedOption = visibleOptions.find((option) => option.displayName === inputValue || option.value === inputValue);
-            // check if inputValue is matches a valid option
-            // Set the selection to that value if the component is not controlled
-            if (exactMatchedOption && !value) {
-                setSelection(exactMatchedOption.value);
-            }
-            else if (selection) {
-                // Revert the value to the previous selection.
-                // Set the value instead of displayName to align with handleInputChange COMPASS-6511
-                setInputValue(selection);
-            }
-        }
-    }, [
-        allOptions,
-        inputValue,
-        isMultiselect,
-        prevSelection,
-        selection,
-        value,
-        visibleOptions,
-    ]);
-    const onSelect = (0, react_1.useCallback)(() => {
-        if (doesSelectionExist) {
-            if (isMultiselect(selection)) {
-                // Scroll the wrapper to the end. No effect if not `overflow="scroll-x"`
-                scrollInputToEnd();
-            }
-            else if (!isMultiselect(selection)) {
-                // Update the text input.
-                // Set the value instead of displayName to align with handleInputChange COMPASS-6511
-                setInputValue(selection);
-                closeMenu();
-            }
-        }
-        else {
-            setInputValue('');
-        }
-    }, [doesSelectionExist, allOptions, isMultiselect, selection]);
-    // Set the initialValue
-    (0, react_1.useEffect)(() => {
-        if (initialValue) {
-            if ((0, isArray_1.default)(initialValue)) {
-                // Ensure the values we set are real options
-                const filteredValue = initialValue.filter((value) => isValueValid(value)) ?? [];
-                setSelection(filteredValue);
-            }
-            else {
-                if (isValueValid(initialValue)) {
-                    setSelection(initialValue);
-                }
-            }
-        }
-        else {
-            setSelection((0, Combobox_types_1.getNullSelection)(multiselect));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // When controlled value changes, update the selection
-    (0, react_1.useEffect)(() => {
-        if (!(0, isUndefined_1.default)(value) && value !== prevValue) {
-            if ((0, isNull_1.default)(value)) {
-                setSelection(null);
-            }
-            else if (isMultiselect(value)) {
-                // Ensure the value(s) passed in are valid options
-                const newSelection = value.filter(isValueValid);
-                setSelection(newSelection);
-            }
-            else {
-                setSelection(isValueValid(value) ? value : null);
-            }
-        }
-    }, [isMultiselect, isValueValid, prevValue, value]);
-    // onSelect
-    // Side effects to run when the selection changes
-    (0, react_1.useEffect)(() => {
-        if (!(0, isEqual_1.default)(selection, prevSelection)) {
-            onSelect();
-        }
-    }, [onSelect, prevSelection, selection]);
-    // when the menu closes, update the value if needed
-    (0, react_1.useEffect)(() => {
-        if (!isOpen && wasOpen) {
-            onCloseMenu();
-        }
-    }, [isOpen, wasOpen, onCloseMenu]);
-    /**
-     *
-     * Menu management
-     *
-     */
-    const [popoverMenuWidth, setPopoverMenuWidth] = (0, react_1.useState)(0);
-    // When the menu opens, or the selection changes, or the focused option changes
-    // update the menu width
-    (0, react_1.useEffect)(() => {
-        setPopoverMenuWidth(comboboxRef.current?.clientWidth ?? 0);
-    }, [comboboxRef, isOpen, highlightedOption, selection]);
-    // Handler fired when the menu has finished transitioning in/out
-    const handleTransitionEnd = () => {
-        setPopoverMenuWidth(comboboxRef.current?.clientWidth ?? 0);
-    };
-    /**
-     *
-     * Event Handlers
-     *
-     */
-    // Prevent combobox from gaining focus by default
-    const handleInputWrapperMousedown = (e) => {
-        if (disabled) {
-            e.preventDefault();
-        }
-    };
-    // Set focus to the input element on click
-    const handleComboboxClick = (e) => {
-        // If we clicked the wrapper, not the input itself.
-        // (Focus is set automatically if the click is on the input)
-        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);
-        }
-        // Only open the menu in response to a click
-        openMenu();
-    };
-    // Fired whenever the wrapper gains focus,
-    // and any time the focus within changes
-    const handleComboboxFocus = (e) => {
-        scrollInputToEnd();
-        trackFocusedElement(getNameFromElement(e.target));
-    };
-    // Fired onChange
-    const handleInputChange = ({ target: { value }, }) => {
-        setInputValue(value);
-        // fire any filter function passed in
-        onFilter?.(value);
-    };
-    const handleKeyDown = (event) => {
-        const isFocusInMenu = menuRef.current?.contains(document.activeElement);
-        const isFocusOnCombobox = comboboxRef.current?.contains(document.activeElement);
-        const isFocusInComponent = isFocusOnCombobox || isFocusInMenu;
-        // Only run if the focus is in the component
-        if (isFocusInComponent) {
-            // No support for modifiers yet
-            // TODO - Handle support for multiple chip selection
-            if (event.ctrlKey || event.shiftKey || event.altKey) {
-                return;
-            }
-            switch (event.key) {
-                case lib_1.keyMap.Tab: {
-                    switch (focusedElementName) {
-                        case 'Input': {
-                            if (!doesSelectionExist) {
-                                closeMenu();
-                                updateHighlightedOption('first');
-                                updateFocusedChip(null);
-                            }
-                            // else use default behavior
-                            break;
-                        }
-                        case 'LastChip': {
-                            // use default behavior
-                            updateFocusedChip(null);
-                            break;
-                        }
-                        case 'FirstChip':
-                        case 'MiddleChip': {
-                            // use default behavior
-                            break;
-                        }
-                        case 'ClearButton':
-                        default:
-                            break;
-                    }
-                    break;
-                }
-                case lib_1.keyMap.Escape: {
-                    closeMenu();
-                    updateHighlightedOption('first');
-                    break;
-                }
-                case lib_1.keyMap.Enter: {
-                    if (!isOpen) {
-                        // If the menu is not open, enter should open the menu
-                        openMenu();
-                    }
-                    else if (
-                    // Select the highlighted option iff
-                    // the menu is open,
-                    // we're focused on input element,
-                    // and the highlighted option is not disabled
-                    focusedElementName === Combobox_types_1.ComboboxElement.Input &&
-                        !(0, isNull_1.default)(highlightedOption) &&
-                        !isOptionDisabled(highlightedOption)) {
-                        updateSelection(highlightedOption);
-                    }
-                    else if (
-                    // Focused on clear button
-                    focusedElementName === Combobox_types_1.ComboboxElement.ClearButton) {
-                        updateSelection(null);
-                        setInputFocus();
-                    }
-                    break;
-                }
-                case lib_1.keyMap.Backspace: {
-                    // Backspace key focuses last chip if the input is focused
-                    // Note: Chip removal behavior is handled in `onRemove` defined in `renderChips`
-                    if (isMultiselect(selection)) {
-                        if (focusedElementName === 'Input' &&
-                            inputRef.current?.selectionStart === 0) {
-                            updateFocusedChip('last');
-                        }
-                    }
-                    // Open the menu regardless
-                    openMenu();
-                    break;
-                }
-                case lib_1.keyMap.ArrowDown: {
-                    if (isOpen) {
-                        // Prevent the page from scrolling
-                        event.preventDefault();
-                        // only change option if the menu is already open
-                        updateHighlightedOption('next');
-                    }
-                    else {
-                        openMenu();
-                    }
-                    break;
-                }
-                case lib_1.keyMap.ArrowUp: {
-                    if (isOpen) {
-                        // Prevent the page from scrolling
-                        event.preventDefault();
-                        // only change option if the menu is already open
-                        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();
-                    }
-                }
-            }
-        }
-    };
-    /**
-     *
-     * Global Event Handler
-     *
-     */
-    /**
-     * We add two event handlers to the document to handle the backdrop click behavior.
-     * Intended behavior is to close the menu, and keep focus on the Combobox.
-     * No other click event handlers should fire on backdrop click
-     *
-     * 1. Mousedown event fires
-     * 2. We prevent `mousedown`'s default behavior, to prevent focus from being applied to the body (or other target)
-     * 3. Click event fires
-     * 4. We handle this event on _capture_, and stop propagation before the `click` event propagates all the way to any other element.
-     *  This ensures that even if we click on a button, that handler is not fired
-     * 5. Then we call `closeMenu`, setting `isOpen = false`, and rerender the component
-     */
-    (0, hooks_1.useEventListener)('mousedown', (mousedown) => {
-        if (!doesComponentContainEventTarget(mousedown)) {
-            mousedown.preventDefault(); // Prevent focus from being applied to body
-            mousedown.stopPropagation(); // Stop any other mousedown events from firing
-        }
-    }, {
-        enabled: isOpen,
-    });
-    (0, hooks_1.useEventListener)('click', (click) => {
-        if (!doesComponentContainEventTarget(click)) {
-            click.stopPropagation(); // Stop any other click events from firing
-            closeMenu();
-        }
-    }, {
-        options: { capture: true },
-        enabled: isOpen,
-    });
-    const popoverProps = {
-        popoverZIndex,
-        ...(usePortal
-            ? {
-                usePortal,
-                portalClassName,
-                portalContainer,
-                scrollContainer,
-            }
-            : { usePortal }),
-    };
-    const descriptionCharacters = (0, react_1.useMemo)(() => {
-        const characters = react_1.default.Children.map(children, (child) => child?.props?.description?.length ?? 0) ?? [];
-        return characters.length === 0 ? 0 : Math.max(...characters);
-    }, [children]);
-    return (react_1.default.createElement(ComboboxContext_1.ComboboxContext.Provider, { value: {
-            multiselect,
-            darkMode,
-            theme,
-            size,
-            withIcons,
-            disabled,
-            isOpen,
-            state,
-            searchState,
-            chipTruncationLocation,
-            chipCharacterLimit,
-            inputValue,
-            // When we open the menu (popover), we want the width of
-            // menu options to be same as the size of the input by default.
-            // If user has specifed a description with the option, we want
-            // the width of the option display value to be the same as the
-            // width of the input and the accomodate the description
-            // in rest of the popover width.
-            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 ?? 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 ?? 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, descriptionCharacters), popoverClassName), searchLoadingMessage: searchLoadingMessage, searchErrorMessage: searchErrorMessage, searchEmptyMessage: searchEmptyMessage, ...popoverProps }, renderedOptionsJSX))));
-    // Closure-dependant utils
-    /**
-     * Returns whether the event target is a Combobox element
-     */
-    function doesComponentContainEventTarget({ target }) {
-        return (menuRef.current?.contains(target) ||
-            comboboxRef.current?.contains(target) ||
-            false);
-    }
-    /**
-     * Scrolls the combobox to the far right.
-     * Used when `overflow === 'scroll-x'`.
-     * Has no effect otherwise
-     */
-    function scrollInputToEnd() {
-        if (inputWrapperRef && inputWrapperRef.current) {
-            // TODO - consider converting to .scrollTo(). This is not yet supported in IE or jsdom
-            inputWrapperRef.current.scrollLeft = inputWrapperRef.current.scrollWidth;
-        }
-    }
-    /**
-     * Returns the provided element as a ComboboxElement string
-     */
-    function getNameFromElement(element) {
-        if (!element)
-            return;
-        if (inputRef.current?.contains(element))
-            return Combobox_types_1.ComboboxElement.Input;
-        if (clearButtonRef.current?.contains(element))
-            return Combobox_types_1.ComboboxElement.ClearButton;
-        const activeChipIndex = isMultiselect(selection)
-            ? selection.findIndex((value) => getChipRef(value)?.current?.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 (menuRef.current?.contains(element))
-            return Combobox_types_1.ComboboxElement.Menu;
-        if (comboboxRef.current?.contains(element))
-            return Combobox_types_1.ComboboxElement.Combobox;
-    }
-}
-exports.Combobox = Combobox;
-Combobox.propTypes = {
-    // Multiselect props
-    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)),
-    // Standard Props
-    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),
-    // Popover Props
-    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,
-};
-/**
- * Why'd you have to go and make things so complicated?
- * - Avril; and also me to myself about this component
- */
-//# sourceMappingURL=Combobox.js.map