@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/baseui/select/select-component.js

@@ -0,0 +1,845 @@
+import { __assign, __extends, __read, __rest, __spreadArray } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import memoizeOne from 'memoize-one';
+import { getOverrides, mergeOverrides } from '../helpers/overrides';
+import { LocaleContext } from '../locale';
+import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
+import { UIDConsumer } from 'react-uid';
+import AutosizeInput from './autosize-input';
+import { TYPE, STATE_CHANGE_TYPE, SIZE, SELECT_ALL_ID } from './constants';
+import defaultProps from './default-props';
+import SelectDropdown from './dropdown';
+import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSearchIconContainer, } from './styled-components';
+import { expandValue, normalizeOptions } from './utils';
+import { isServer } from '../../spacewebProvider';
+import locale from './locale';
+import { omit$props } from '../../helpers';
+var __DEV__ = process.env.NODE_ENV !== 'production';
+function Noop() {
+    return null;
+}
+var isClick = function (event) { return event.type === 'click'; };
+var isLeftClick = function (event) { return event.button !== null && event.button !== undefined && event.button === 0; };
+var containsNode = function (parent, child) {
+    if (!isServer) {
+        return child && parent && parent.contains(child);
+    }
+    return undefined;
+};
+export function isInteractive(rootTarget, rootElement) {
+    if (rootTarget instanceof Element) {
+        var target = rootTarget;
+        while (target && target !== rootElement) {
+            var role = target.getAttribute('role');
+            if (role === 'button' || role === 'link') {
+                return true;
+            }
+            if (target.tagName)
+                target = target.parentElement;
+        }
+    }
+    return false;
+}
+var Select = /** @class */ (function (_super) {
+    __extends(Select, _super);
+    function Select() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // anchor is a ref that refers to the outermost element rendered when the dropdown menu is not
+        // open. This is required so that we can check if clicks are on/off the anchor element.
+        _this.anchor = React.createRef();
+        // dropdown is a ref that refers to the popover element. This is required so that we can check if
+        // clicks are on/off the dropdown element.
+        _this.dropdown = React.createRef();
+        // the select components can accept an array of options or an object where properties are optgroups
+        // and values are arrays of options. this class property is constructed and updated in a normalized
+        // shape where optgroup titles are stored on the option in the __optgroup field.
+        _this.options = [];
+        _this.state = {
+            activeDescendant: null,
+            inputValue: '',
+            isFocused: false,
+            isOpen: _this.props.startOpen || false,
+            isPseudoFocused: false,
+        };
+        _this.isItMounted = false;
+        // Handle touch outside on mobile to dismiss menu, ensures that the
+        // touch target is not within the anchor DOM node.
+        _this.handleTouchOutside = function (event) {
+            if (containsNode(_this.dropdown.current, event.target))
+                return;
+            if (!containsNode(_this.anchor.current, event.target)) {
+                _this.closeMenu();
+            }
+        };
+        // Track dragging state to filter false-positive actions where a user
+        // intends to drag/scroll the page.
+        _this.handleTouchMove = function () {
+            _this.dragging = true;
+            // to tackle arrow-function-should-not-return-assignment
+            return true;
+        };
+        _this.handleTouchStart = function () {
+            _this.dragging = false;
+            // to tackle arrow-function-should-not-return-assignment
+            return true;
+        };
+        _this.handleTouchEnd = function (event) {
+            if (_this.dragging)
+                return;
+            _this.handleClick(event);
+        };
+        _this.handleClick = function (event) {
+            if (_this.props.disabled || (!isClick(event) && !isLeftClick(event))) {
+                return;
+            }
+            // Case comes up when text has been typed into the input field. If no text provided,
+            // the 'input' element will have essentially 0 width therefore will not be clickable.
+            // When click outside does not reset input, text provided will stay rendered after clicks away
+            // from the select component. Upon subsequent clicks on the provided text, open the dropdown
+            // menu, in addition to text edit operations.
+            if (event.target === _this.input) {
+                // CHASE: not sure why this condition is here. I cannot replicate a situation where clicks
+                // on provided text break into here.
+                if (!_this.state.isFocused) {
+                    _this.openAfterFocus = _this.props.openOnClick || false;
+                    _this.focus();
+                }
+                if (!_this.state.isOpen) {
+                    _this.setState({
+                        isOpen: true,
+                        isFocused: true,
+                        isPseudoFocused: false,
+                    });
+                }
+                return;
+            }
+            // Ensures that interactive elements within the Select component do not trigger the outer click
+            // handler. For example, after an option is selected clicks on the 'clear' icon call here. We
+            // should ignore those events. This comes after case where click is on input element, so that
+            // those are handled on their own.
+            if (_this.input && isInteractive(event.target, _this.input)) {
+                return;
+            }
+            // For the simple case where clicking on the Select does not allow for providing
+            // text input to filter the dropdown options.
+            if (!_this.props.searchable) {
+                _this.focus();
+                if (_this.state.isOpen) {
+                    _this.setState({ isOpen: false, isFocused: false });
+                }
+                else {
+                    _this.setState({ isOpen: true, isFocused: true });
+                }
+                return;
+            }
+            // Cases below only apply to searchable Select component.
+            if (_this.state.isFocused) {
+                // iOS ignores programmatic calls to input.focus() that were not triggered by a click event.
+                // This component can get into a state where isFocused is true, but the DOM node is not
+                // focused. Call focus here again to ensure.
+                _this.focus();
+                // Case comes up when click outside does not reset input - once text has been provided to
+                // the input, and the user closes the dropdown menu the provided text is maintained. After
+                // this, if the user focuses back into the select component then clicks on the component,
+                // the provided text highlights rather than position's the cursor at the end of the input.
+                if (_this.input)
+                    _this.input.value = '';
+                _this.setState(function (prev) { return ({
+                    isOpen: !_this.focusAfterClear && !prev.isOpen,
+                    isPseudoFocused: false,
+                }); });
+                _this.focusAfterClear = false;
+            }
+            else {
+                // When clear button is clicked, need to click twice to open control container - https://github.com/uber/baseweb/issues/4285
+                // Setting focusAfterClear to false, resolves the issue
+                _this.focusAfterClear = false;
+                _this.openAfterFocus = _this.props.openOnClick || false;
+                _this.focus();
+            }
+        };
+        _this.handleInputFocus = function (event) {
+            if (_this.props.disabled)
+                return;
+            if (_this.props.onFocus)
+                _this.props.onFocus(event);
+            var toOpen = _this.state.isOpen || _this.openAfterFocus;
+            // if focus happens after clear values, don't open dropdown yet.
+            toOpen = !_this.focusAfterClear && toOpen;
+            _this.setState({
+                isFocused: true,
+                isOpen: !!toOpen,
+            });
+            _this.focusAfterClear = false;
+            _this.openAfterFocus = false;
+        };
+        _this.handleBlur = function (event) {
+            if (event.relatedTarget) {
+                if (containsNode(_this.anchor.current, event.relatedTarget) ||
+                    containsNode(_this.dropdown.current, event.relatedTarget)) {
+                    return;
+                }
+            }
+            else if (containsNode(_this.anchor.current, event.target)) {
+                return;
+            }
+            if (_this.props.onBlur) {
+                _this.props.onBlur(event);
+            }
+            if (_this.isItMounted) {
+                _this.setState({
+                    isFocused: false,
+                    isOpen: false,
+                    isPseudoFocused: false,
+                    inputValue: _this.props.onBlurResetsInput ? '' : _this.state.inputValue,
+                });
+            }
+        };
+        _this.handleClickOutside = function (event) {
+            if (_this.justSelected) {
+                _this.justSelected = false;
+                return;
+            }
+            if (containsNode(_this.dropdown.current, event.target))
+                return;
+            var isFocused = _this.state.isFocused || _this.state.isPseudoFocused;
+            if (isFocused && !containsNode(_this.anchor.current, event.target)) {
+                _this.handleBlur(event);
+            }
+        };
+        _this.handleInputChange = function (event) {
+            var newInputValue = event.target.value;
+            _this.setState({
+                inputValue: newInputValue,
+                isOpen: true,
+                isPseudoFocused: false,
+            });
+            if (_this.props.onInputChange) {
+                _this.props.onInputChange(event);
+            }
+        };
+        _this.handleKeyDown = function (event) {
+            if (_this.props.disabled)
+                return;
+            switch (event.key) {
+                case 'Backspace': // 8
+                    if (!_this.state.inputValue && _this.props.backspaceRemoves) {
+                        event.preventDefault();
+                        _this.backspaceValue();
+                    }
+                    break;
+                case 'Tab': // 9
+                    _this.setState(function (prevState) { return ({
+                        isPseudoFocused: false,
+                        isFocused: false,
+                        isOpen: false,
+                        inputValue: !_this.props.onCloseResetsInput || !_this.props.onBlurResetsInput ? prevState.inputValue : '',
+                    }); });
+                    break;
+                case 'Escape': // 27
+                    if (!_this.state.isOpen && _this.props.clearable && _this.props.escapeClearsValue) {
+                        _this.clearValue(event);
+                        _this.setState({ isFocused: false, isPseudoFocused: false });
+                    }
+                    break;
+                case ' ': // space 32
+                    if (_this.props.searchable) {
+                        break;
+                    }
+                    event.preventDefault();
+                    if (!_this.state.isOpen) {
+                        _this.setState({ isOpen: true });
+                    }
+                    break;
+                case 'ArrowUp': // 38
+                    event.preventDefault();
+                    if (!_this.state.isOpen) {
+                        _this.setState({ isOpen: true });
+                    }
+                    break;
+                case 'ArrowDown': // 40
+                    event.preventDefault();
+                    if (!_this.state.isOpen) {
+                        _this.setState({ isOpen: true });
+                    }
+                    break;
+                case 'PageUp': // 33
+                    event.preventDefault();
+                    if (!_this.state.isOpen) {
+                        _this.setState({ isOpen: true });
+                    }
+                    break;
+                case 'PageDown': // 34
+                    event.preventDefault();
+                    if (!_this.state.isOpen) {
+                        _this.setState({ isOpen: true });
+                    }
+                    break;
+                case 'End': // 35
+                    if (event.shiftKey) {
+                        break;
+                    }
+                    event.preventDefault();
+                    if (!_this.state.isOpen) {
+                        _this.setState({ isOpen: true });
+                    }
+                    break;
+                case 'Home': // 36
+                    if (event.shiftKey) {
+                        break;
+                    }
+                    event.preventDefault();
+                    if (!_this.state.isOpen) {
+                        _this.setState({ isOpen: true });
+                    }
+                    break;
+                case 'Delete': // 46
+                    if (!_this.state.inputValue && _this.props.deleteRemoves) {
+                        event.preventDefault();
+                        _this.popValue();
+                    }
+                    break;
+                default:
+                    break;
+            }
+        };
+        _this.getOptionLabel = function (locale, _a) {
+            var option = _a.option;
+            return option.isCreatable
+                ? "".concat(locale.select.create, " \u201C").concat(_this.props.labelKey && option[_this.props.labelKey], "\u201D")
+                : _this.props.labelKey && option[_this.props.labelKey];
+        };
+        _this.getValueLabel = function (_a) {
+            var option = _a.option;
+            return _this.props.labelKey && option[_this.props.labelKey];
+        };
+        _this.handleActiveDescendantChange = function (id) {
+            if (id) {
+                _this.setState({ activeDescendant: id });
+            }
+            else {
+                _this.setState({ activeDescendant: null });
+            }
+        };
+        _this.handleInputRef = function (input) {
+            _this.input = input;
+            if (typeof _this.props.inputRef === 'function') {
+                _this.props.inputRef(input);
+            }
+            else if (_this.props.inputRef) {
+                // @ts-expect-error todo(flow->ts) MutableRefObject
+                _this.props.inputRef.current = input;
+            }
+            if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
+                // @ts-expect-error todo(flow->ts) according to types this code is not reachable
+                _this.props.controlRef(input);
+            }
+        };
+        _this.selectValue = function (_a) {
+            var item = _a.item;
+            if (item.disabled) {
+                return;
+            }
+            _this.justSelected = true;
+            // NOTE: we add/set the value in a callback to make sure the
+            // input value is empty to avoid styling issues in Chrome
+            var updatedValue = _this.props.onSelectResetsInput ? '' : _this.state.inputValue;
+            if (_this.props.multi) {
+                if (item[SELECT_ALL_ID]) {
+                    var filteredOptionsWithoutSelectAllAndCreate_1 = _this.options.filter(function (val) { return !val[SELECT_ALL_ID] && !(val === null || val === void 0 ? void 0 : val.isCreatable) && !val.disabled; });
+                    _this.setState({
+                        inputValue: updatedValue,
+                        isOpen: !_this.props.closeOnSelect,
+                    }, function () {
+                        var valueArray = _this.props.value || [];
+                        var valueKey = _this.props.valueKey;
+                        var selectedValueSet = new Set(valueArray === null || valueArray === void 0 ? void 0 : valueArray.map(function (val) { return val[valueKey]; }));
+                        var selectAllChecked = _this.props.__selectAllShouldReturnAllOptions
+                            ? _this.props.__selectAllSelected
+                            : _this.getMemoizedSelectAllChecked(valueArray, filteredOptionsWithoutSelectAllAndCreate_1);
+                        if (_this.props.__selectAllShouldReturnAllOptions) {
+                            if (selectAllChecked) {
+                                _this.setValue([], undefined, STATE_CHANGE_TYPE.clear);
+                            }
+                            else {
+                                _this.setValue([], undefined, STATE_CHANGE_TYPE.selectAll);
+                            }
+                        }
+                        else if (selectAllChecked) {
+                            var optionsIdSet_1 = new Set(filteredOptionsWithoutSelectAllAndCreate_1 === null || filteredOptionsWithoutSelectAllAndCreate_1 === void 0 ? void 0 : filteredOptionsWithoutSelectAllAndCreate_1.map(function (val) { return val[valueKey]; }));
+                            _this.setValue(valueArray === null || valueArray === void 0 ? void 0 : valueArray.filter(function (val) { return !optionsIdSet_1.has(val[valueKey]); }), undefined, STATE_CHANGE_TYPE.selectAll);
+                        }
+                        else {
+                            var newValuesToAdd = filteredOptionsWithoutSelectAllAndCreate_1.filter(function (val) { return !selectedValueSet.has(val[valueKey]); });
+                            _this.setValue(valueArray === null || valueArray === void 0 ? void 0 : valueArray.concat(newValuesToAdd), undefined, STATE_CHANGE_TYPE.selectAll);
+                        }
+                    });
+                }
+                else {
+                    _this.setState({
+                        inputValue: updatedValue,
+                        isOpen: !_this.props.closeOnSelect,
+                    }, function () {
+                        var valueArray = _this.props.value || [];
+                        if (valueArray.some(function (i) { return _this.props.valueKey && i[_this.props.valueKey] === item[_this.props.valueKey]; })) {
+                            _this.removeValue(item);
+                        }
+                        else {
+                            _this.addValue(item);
+                        }
+                    });
+                }
+            }
+            else {
+                _this.focus();
+                _this.setState({
+                    inputValue: updatedValue,
+                    isOpen: !_this.props.closeOnSelect,
+                    isFocused: true,
+                    isPseudoFocused: false,
+                }, function () {
+                    _this.setValue([item], item, STATE_CHANGE_TYPE.select);
+                });
+            }
+        };
+        _this.addValue = function (item) {
+            var valueArray = __spreadArray([], __read((_this.props.value || [])), false);
+            _this.setValue(valueArray.concat(item), item, STATE_CHANGE_TYPE.select);
+        };
+        _this.backspaceValue = function () {
+            var _a;
+            var item = _this.popValue();
+            if (!item) {
+                return;
+            }
+            var valueLength = ((_a = _this.props.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            var renderLabel = _this.props.getValueLabel || _this.getValueLabel;
+            var labelForInput = renderLabel({ option: item, index: valueLength - 1 });
+            // label might not be a string, it might be a Node of another kind.
+            if (!_this.props.backspaceClearsInputValue && typeof labelForInput === 'string') {
+                var remainingInput = labelForInput.slice(0, -1);
+                _this.setState({
+                    inputValue: remainingInput,
+                    isOpen: true,
+                });
+            }
+        };
+        _this.popValue = function () {
+            var valueArray = __spreadArray([], __read((_this.props.value || [])), false);
+            var valueLength = valueArray.length;
+            if (!valueLength)
+                return;
+            if (valueArray[valueLength - 1].clearableValue === false)
+                return;
+            var item = valueArray.pop();
+            _this.setValue(valueArray, item, STATE_CHANGE_TYPE.remove);
+            return item;
+        };
+        _this.removeValue = function (item) {
+            var valueArray = __spreadArray([], __read((_this.props.value || [])), false);
+            var valueArrayFiltered = !Array.isArray(item)
+                ? valueArray.filter(function (i) { return _this.props.valueKey && i[_this.props.valueKey] !== item[_this.props.valueKey]; })
+                : valueArray.filter(function (i) { return !item.some(function (itemObj) { return _this.props.valueKey && itemObj[_this.props.valueKey] === i[_this.props.valueKey]; }); });
+            _this.setValue(valueArrayFiltered, item, STATE_CHANGE_TYPE.remove);
+            _this.focus();
+        };
+        _this.clearValue = function (event) {
+            if (isClick(event) && !isLeftClick(event))
+                return;
+            if (_this.props.value) {
+                var resetValue = _this.props.value.filter(function (item) { return item.clearableValue === false; });
+                _this.setValue(resetValue, null, STATE_CHANGE_TYPE.clear);
+            }
+            _this.setState({
+                inputValue: '',
+                isOpen: false,
+            });
+            _this.focus();
+            _this.focusAfterClear = true;
+        };
+        _this.shouldShowPlaceholder = function () { return !(_this.state.inputValue || (_this.props.value && _this.props.value.length)); };
+        _this.shouldShowValue = function () { return !_this.state.inputValue; };
+        _this.isSelectAllChecked = function (valueArray, filteredOptions) {
+            var filteredOptionsWithoutSelectAll = filteredOptions.filter(function (val) { return !val[SELECT_ALL_ID] && !(val === null || val === void 0 ? void 0 : val.isCreatable) && !val.disabled; });
+            var selectedValueSet = new Set(valueArray.map(function (val) { return val[_this.props.valueKey]; }));
+            return filteredOptionsWithoutSelectAll.every(function (val) { return selectedValueSet.has(val[_this.props.valueKey]); });
+        };
+        _this.getMemoizedSelectAllChecked = memoizeOne(function (valueArray, filteredOptions) {
+            return _this.isSelectAllChecked(valueArray, filteredOptions);
+        });
+        _this.getMemoizedNormalizedOptions = memoizeOne(function (options) { return normalizeOptions(options); });
+        return _this;
+    }
+    Select.prototype.componentDidMount = function () {
+        if (this.props.autoFocus) {
+            this.focus();
+        }
+        this.isItMounted = true;
+        var controlRef = this.props.controlRef;
+        if (controlRef && typeof controlRef !== 'function') {
+            controlRef.current = {
+                setDropdownOpen: this.handleDropdownOpen.bind(this),
+                setInputValue: this.handleSetInputValue.bind(this),
+                setInputFocus: this.handleSetInputFocus.bind(this),
+                setInputBlur: this.handleSetInputBlur.bind(this),
+                // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
+                focus: this.handleSetInputFocus.bind(this),
+                blur: this.handleSetInputBlur.bind(this),
+            };
+        }
+    };
+    Select.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _this = this;
+        if (!isServer) {
+            if (prevState.isOpen !== this.state.isOpen) {
+                if (this.state.isOpen) {
+                    this.props.onOpen && this.props.onOpen();
+                    document.addEventListener('touchstart', this.handleTouchOutside);
+                }
+                else {
+                    this.props.onClose && this.props.onClose();
+                    document.removeEventListener('touchstart', this.handleTouchOutside);
+                }
+            }
+            if (!prevState.isFocused && this.state.isFocused) {
+                setTimeout(function () { return document.addEventListener('click', _this.handleClickOutside); }, 0);
+            }
+        }
+    };
+    Select.prototype.componentWillUnmount = function () {
+        if (!isServer) {
+            document.removeEventListener('touchstart', this.handleTouchOutside);
+            document.removeEventListener('click', this.handleClickOutside);
+        }
+        this.isItMounted = false;
+    };
+    Select.prototype.focus = function () {
+        if (!this.input)
+            return;
+        this.input.focus();
+    };
+    Select.prototype.handleDropdownOpen = function (nextOpenState) {
+        this.setState({
+            isOpen: nextOpenState,
+        });
+    };
+    Select.prototype.handleSetInputValue = function (newInputValue) {
+        this.setState({
+            inputValue: newInputValue,
+        });
+    };
+    Select.prototype.handleSetInputFocus = function () {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    Select.prototype.handleSetInputBlur = function () {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    Select.prototype.closeMenu = function () {
+        if (this.props.onCloseResetsInput) {
+            this.setState({
+                inputValue: '',
+                isOpen: false,
+                isPseudoFocused: this.state.isFocused && !this.props.multi,
+            });
+        }
+        else {
+            this.setState({
+                isOpen: false,
+                isPseudoFocused: this.state.isFocused && !this.props.multi,
+            });
+        }
+    };
+    /**
+     * Extends the value into an array from the given options
+     */
+    Select.prototype.getValueArray = function (value) {
+        var _this = this;
+        if (!Array.isArray(value)) {
+            if (value === null || value === undefined)
+                return [];
+            value = [value];
+        }
+        return value.map(function (value) { return expandValue(value, _this.props); });
+    };
+    Select.prototype.setValue = function (value, option, type) {
+        if (this.props.onChange) {
+            this.props.onChange({
+                value: value,
+                option: option,
+                type: type,
+            });
+        }
+    };
+    Select.prototype.renderLoading = function () {
+        if (!this.props.isLoading)
+            return;
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var _b = __read(getOverrides(overrides.LoadingIndicator, function () { return null; }), 2), LoadingIndicator = _b[0], loadingIndicatorProps = _b[1];
+        return (_jsx(LoadingIndicator, __assign({ role: "status" }, loadingIndicatorProps, { children: _jsx("span", __assign({ style: {
+                    position: 'absolute',
+                    width: '1px',
+                    height: '1px',
+                    padding: 0,
+                    margin: '-1px',
+                    overflow: 'hidden',
+                    clip: 'rect(0,0,0,0)',
+                    whiteSpace: 'nowrap',
+                    border: 0,
+                } }, { children: "Loading" }), void 0) }), void 0));
+    };
+    Select.prototype.renderValue = function (valueArray) {
+        var _this = this;
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var sharedProps = this.getSharedProps();
+        var renderLabel = this.props.getValueLabel || this.getValueLabel;
+        var Value = this.props.valueComponent || Noop;
+        if (!valueArray.length) {
+            return null;
+        }
+        if (this.props.multi) {
+            return valueArray.map(function (value, i) {
+                var disabled = sharedProps.$disabled || value.clearableValue === false;
+                return (_jsx(Value, __assign({ value: value, removeValue: function () { return _this.removeValue(value); }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue } }, sharedProps, { "$disabled": disabled }, { children: renderLabel({ option: value, index: i }) }), "value-".concat(i, "-").concat(_this.props.valueKey && value[_this.props.valueKey])));
+            });
+        }
+        if (this.shouldShowValue()) {
+            return (_jsx(Value, __assign({ value: this.props.valueKey && valueArray[0][this.props.valueKey], disabled: this.props.disabled, overrides: { SingleValue: overrides.SingleValue } }, sharedProps, { children: renderLabel({ option: valueArray[0] }) }), void 0));
+        }
+        return null;
+    };
+    Select.prototype.renderInput = function (listboxId) {
+        var _this = this;
+        var _a;
+        var _b = this.props.overrides, overrides = _b === void 0 ? {} : _b;
+        var _c = __read(getOverrides(overrides.InputContainer, StyledInputContainer), 2), InputContainer = _c[0], inputContainerProps = _c[1];
+        var sharedProps = this.getSharedProps();
+        var isOpen = this.state.isOpen;
+        var selected = this.getValueArray(this.props.value || [])
+            .map(function (v) { return _this.props.labelKey && v[_this.props.labelKey]; })
+            .join(', ');
+        var selectedLabel = selected.length ? "Selected ".concat(selected, ". ") : '';
+        var label = "".concat(selectedLabel).concat(this.props['aria-label'] || '');
+        if (!this.props.searchable) {
+            return (_jsx(InputContainer, __assign({ "aria-activedescendant": this.state.activeDescendant, "aria-describedby": this.props['aria-describedby'], "aria-errormessage": this.props['aria-errormessage'], "aria-disabled": this.props.disabled, "aria-labelledby": this.props['aria-labelledby'], "aria-owns": this.state.isOpen ? listboxId : null, "aria-required": this.props.required || null, onFocus: this.handleInputFocus, tabIndex: 0 }, sharedProps, inputContainerProps, { children: _jsx("input", __assign({ "aria-hidden": true, id: this.props.id || undefined, ref: this.handleInputRef, style: {
+                        opacity: 0,
+                        width: 0,
+                        overflow: 'hidden',
+                        border: 'none',
+                        padding: 0,
+                    }, tabIndex: -1 }, (overrides.Input
+                    ? overrides.Input.props
+                        ? // $FlowExpectedError[not-an-object]
+                            // @ts-ignore
+                            omit$props(overrides.Input.props)
+                        : {}
+                    : {})), void 0) }), void 0));
+        }
+        return (_jsx(InputContainer, __assign({}, sharedProps, inputContainerProps, { children: _jsx(AutosizeInput, __assign({ "aria-activedescendant": this.state.activeDescendant, "aria-autocomplete": "list", "aria-controls": this.state.isOpen ? listboxId : null, "aria-describedby": this.props['aria-describedby'], "aria-errormessage": this.props['aria-errormessage'], "aria-disabled": this.props.disabled || null, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-label": label, "aria-labelledby": this.props['aria-labelledby'], "aria-required": this.props.required || null, disabled: this.props.disabled || null, id: this.props.id || null, inputRef: this.handleInputRef, onChange: this.handleInputChange, onFocus: this.handleInputFocus, overrides: { Input: overrides.Input }, required: (this.props.required && !((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.length)) || null, role: "combobox", value: this.state.inputValue, tabIndex: 0 }, sharedProps), void 0) }), void 0));
+    };
+    Select.prototype.renderClear = function () {
+        var _a;
+        var isValueEntered = Boolean((this.props.value && this.props.value.length) || this.state.inputValue);
+        if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
+            return null;
+        }
+        var _b = this.getSharedProps(), $size = _b.$size, sharedProps = __rest(_b, ["$size"]);
+        var _c = this.props.overrides, overrides = _c === void 0 ? {} : _c;
+        var _d = __read(getOverrides(overrides.ClearIcon, function () { return null; }), 2), ClearIcon = _d[0], clearIconProps = _d[1];
+        var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+        var sizes = (_a = {},
+            _a[SIZE.mini] = 15,
+            _a[SIZE.compact] = 15,
+            _a[SIZE.default] = 18,
+            _a[SIZE.large] = 22,
+            _a);
+        return (_jsx(ClearIcon, __assign({ title: ariaLabel, "aria-label": ariaLabel, onClick: this.clearValue, role: "button", size: sizes[this.props.size] || sizes[SIZE.default] }, sharedProps, clearIconProps), void 0));
+    };
+    Select.prototype.renderArrow = function () {
+        var _a;
+        if (this.props.type !== TYPE.select) {
+            return null;
+        }
+        var _b = this.getSharedProps(), $size = _b.$size, sharedProps = __rest(_b, ["$size"]);
+        var _c = this.props.overrides, overrides = _c === void 0 ? {} : _c;
+        var _d = __read(getOverrides(overrides.SelectArrow, function () { return null; }), 2), SelectArrow = _d[0], selectArrowProps = _d[1];
+        selectArrowProps.overrides = mergeOverrides({
+            Svg: {
+                style: function (_a) {
+                    var $theme = _a.$theme, $disabled = _a.$disabled;
+                    return ({
+                        color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary,
+                    });
+                },
+            },
+        }, selectArrowProps.overrides);
+        var sizes = (_a = {},
+            _a[SIZE.mini] = 16,
+            _a[SIZE.compact] = 16,
+            _a[SIZE.default] = 20,
+            _a[SIZE.large] = 24,
+            _a);
+        return (_jsx(SelectArrow, __assign({ size: (this.props.size && sizes[this.props.size]) || sizes[SIZE.default], title: "open" }, sharedProps, selectArrowProps), void 0));
+    };
+    Select.prototype.renderSearch = function () {
+        if (this.props.type !== TYPE.search) {
+            return null;
+        }
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var _b = __read(getOverrides(overrides.SearchIconContainer, StyledSearchIconContainer), 2), SearchIconContainer = _b[0], searchIconContainerProps = _b[1];
+        var _c = __read(getOverrides(overrides.SearchIcon, function () { return null; }), 2), SearchIcon = _c[0], searchIconProps = _c[1];
+        var sharedProps = this.getSharedProps();
+        return (_jsx(SearchIconContainer, __assign({}, sharedProps, searchIconContainerProps, { children: _jsx(SearchIcon, __assign({ size: 16, title: "search" }, sharedProps, searchIconProps), void 0) }), void 0));
+    };
+    Select.prototype.filterOptions = function (excludeOptions, filterValue, options) {
+        var _a, _b;
+        var _this = this;
+        if (filterValue === void 0) { filterValue = this.state.inputValue.trim(); }
+        if (options === void 0) { options = this.props.options; }
+        var filteredOptions = this.getMemoizedNormalizedOptions(options);
+        // apply filter function
+        if (this.props.filterOptions) {
+            filteredOptions = this.props.filterOptions(filteredOptions, filterValue, excludeOptions, {
+                valueKey: this.props.valueKey || '',
+                labelKey: this.props.labelKey || '',
+            });
+        }
+        if (this.props.multi) {
+            if (!this.props.hideSelectAll && filteredOptions.length > 0) {
+                filteredOptions = __spreadArray([
+                    (_a = {},
+                        _a[this.props.valueKey] = SELECT_ALL_ID,
+                        _a[this.props.labelKey] = "".concat(locale.selectAllLabel, " ").concat(this.props.__selectAllShouldReturnAllOptions ? '' : "(".concat(filteredOptions.length, ")")),
+                        _a[SELECT_ALL_ID] = true,
+                        _a)
+                ], __read(filteredOptions), false);
+            }
+        }
+        // can user create a new option + there's no exact match already
+        var filterDoesNotMatchOption = this.props.ignoreCase
+            ? // @ts-ignore
+                function (// @ts-ignore
+                opt) { return opt[_this.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim(); }
+            : // @ts-ignore
+                function (// @ts-ignore
+                opt) { return opt[_this.props.labelKey] !== filterValue.trim(); };
+        if (filterValue &&
+            this.props.creatable &&
+            filteredOptions.concat(this.props.value || []).every(filterDoesNotMatchOption)) {
+            return filteredOptions.concat((_b = {
+                    id: filterValue
+                },
+                _b[this.props.labelKey || ''] = filterValue,
+                _b[this.props.valueKey || ''] = filterValue,
+                _b.isCreatable = true,
+                _b));
+        }
+        return filteredOptions;
+    };
+    Select.prototype.getSharedProps = function () {
+        var _a = this.props, clearable = _a.clearable, creatable = _a.creatable, disabled = _a.disabled, error = _a.error, positive = _a.positive, isLoading = _a.isLoading, multi = _a.multi, required = _a.required, size = _a.size, searchable = _a.searchable, type = _a.type, value = _a.value;
+        var _b = this.state, isOpen = _b.isOpen, isFocused = _b.isFocused, isPseudoFocused = _b.isPseudoFocused;
+        return {
+            $clearable: clearable,
+            $creatable: creatable,
+            $disabled: disabled,
+            $error: error,
+            $positive: positive,
+            $isFocused: isFocused,
+            $isLoading: isLoading,
+            $isOpen: isOpen,
+            $isPseudoFocused: isPseudoFocused,
+            $multi: multi,
+            $required: required,
+            $searchable: searchable,
+            $size: size,
+            $type: type,
+            $isEmpty: !this.getValueArray(value || []).length,
+        };
+    };
+    Select.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var _b = this.props, _c = _b.overrides, overrides = _c === void 0 ? {} : _c, type = _b.type, multi = _b.multi, noResultsMsg = _b.noResultsMsg, value = _b.value, filterOutSelected = _b.filterOutSelected, __selectAllSelected = _b.__selectAllSelected, __selectAllShouldReturnAllOptions = _b.__selectAllShouldReturnAllOptions;
+        if (__DEV__) {
+            // value may be nullish, only warn if value is defined
+            if (value && !Array.isArray(value)) {
+                console.warn('The Select component expects an array as the value prop. For more information, please visit the docs at https://baseweb.design/components/select/');
+            }
+        }
+        var _d = __read(getOverrides(overrides.Root, StyledRoot), 2), Root = _d[0], rootProps = _d[1];
+        var _e = __read(getOverrides(overrides.ControlContainer, StyledControlContainer), 2), ControlContainer = _e[0], controlContainerProps = _e[1];
+        var _f = __read(getOverrides(overrides.ValueContainer, StyledValueContainer), 2), ValueContainer = _f[0], valueContainerProps = _f[1];
+        var _g = __read(getOverrides(overrides.IconsContainer, StyledIconsContainer), 2), IconsContainer = _g[0], iconsContainerProps = _g[1];
+        var _h = __read(getOverrides(overrides.Popover, Popover), 2), PopoverOverride = _h[0], popoverProps = _h[1];
+        var _j = __read(getOverrides(overrides.Placeholder, StyledPlaceholder), 2), Placeholder = _j[0], placeholderProps = _j[1];
+        var sharedProps = this.getSharedProps();
+        var valueArray = this.getValueArray(value || []);
+        this.options = this.filterOptions(multi && filterOutSelected ? valueArray : null, (_a = this.props.__inputValue) !== null && _a !== void 0 ? _a : this.state.inputValue.trim(), this.props.options);
+        var options = this.options;
+        var selectAllChecked = __selectAllShouldReturnAllOptions
+            ? __selectAllSelected
+            : this.getMemoizedSelectAllChecked(valueArray, options);
+        var isOpen = this.state.isOpen;
+        sharedProps.$isOpen = isOpen;
+        if (__DEV__) {
+            if (this.props.error && this.props.positive) {
+                console.warn('[Select] `error` and `positive` are both set to `true`. `error` will take precedence but this may not be what you want.');
+            }
+        }
+        return (_jsx(UIDConsumer, { children: function (listboxId) { return (_jsx(LocaleContext.Consumer, { children: function (locale) { return (_jsx(PopoverOverride
+                // Popover does not provide ability to forward refs through, and if we were to simply
+                // apply the ref to the Root component below it would be overwritten before the popover
+                // renders it. Using this strategy, we will get a ref to the popover, then reuse its
+                // anchorRef so we can check if clicks are on the select component or not.
+                , __assign({ 
+                    // Popover does not provide ability to forward refs through, and if we were to simply
+                    // apply the ref to the Root component below it would be overwritten before the popover
+                    // renders it. Using this strategy, we will get a ref to the popover, then reuse its
+                    // anchorRef so we can check if clicks are on the select component or not.
+                    innerRef: function (ref) {
+                        if (!ref)
+                            return;
+                        _this.anchor = ref.anchorRef;
+                    }, accessibilityType: ACCESSIBILITY_TYPE.none, autoFocus: false, focusLock: false, mountNode: _this.props.mountNode, onEsc: function () { return _this.closeMenu(); }, isOpen: isOpen, popoverMargin: 0, content: function () {
+                        var dropdownProps = {
+                            error: _this.props.error || false,
+                            positive: _this.props.positive,
+                            getOptionLabel: _this.props.getOptionLabel || _this.getOptionLabel.bind(_this, locale),
+                            id: listboxId,
+                            isLoading: _this.props.isLoading || false,
+                            labelKey: _this.props.labelKey || '',
+                            maxDropdownHeight: _this.props.maxDropdownHeight || '',
+                            multi: multi || false,
+                            noResultsMsg: noResultsMsg,
+                            onActiveDescendantChange: _this.handleActiveDescendantChange,
+                            onItemSelect: _this.selectValue,
+                            selectAllChecked: selectAllChecked,
+                            options: options,
+                            overrides: overrides,
+                            required: _this.props.required || false,
+                            searchable: _this.props.searchable || true,
+                            size: _this.props.size || 'default',
+                            type: type || 'select',
+                            value: valueArray,
+                            valueKey: _this.props.valueKey || '',
+                            width: _this.anchor.current ? _this.anchor.current.clientWidth : null,
+                            keyboardControlNode: _this.anchor,
+                        };
+                        return _jsx(SelectDropdown, __assign({ innerRef: _this.dropdown }, dropdownProps), void 0);
+                    }, placement: PLACEMENT.bottom }, popoverProps, { children: _jsx(Root, __assign({ onBlur: _this.handleBlur, "data-baseweb": "select" }, sharedProps, rootProps, { children: _jsxs(ControlContainer, __assign({ onKeyDown: _this.handleKeyDown, onClick: _this.handleClick, onTouchEnd: _this.handleTouchEnd, onTouchMove: _this.handleTouchMove, onTouchStart: _this.handleTouchStart }, sharedProps, controlContainerProps, { children: [type === TYPE.search ? _this.renderSearch() : null, _jsxs(ValueContainer, __assign({}, sharedProps, valueContainerProps, { children: [_this.renderValue(valueArray), _this.renderInput(listboxId), _this.shouldShowPlaceholder() ? (_jsx(Placeholder, __assign({}, sharedProps, placeholderProps, { children: typeof _this.props.placeholder !== 'undefined'
+                                                ? _this.props.placeholder
+                                                : locale.select.placeholder }), void 0)) : null] }), void 0), _jsxs(IconsContainer, __assign({}, sharedProps, iconsContainerProps, { children: [_this.renderLoading(), _this.renderClear(), type === TYPE.select ? _this.renderArrow() : null] }), void 0)] }), void 0) }), void 0) }), void 0)); } }, void 0)); } }, void 0));
+    };
+    Select.defaultProps = defaultProps;
+    return Select;
+}(React.Component));
+export default Select;