@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/baseui/select/select-component.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isInteractive = void 0;
+exports.getValueLabel = exports.getOptionLabel = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 /*
@@ -9,25 +9,28 @@ 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.
 */
-var React = (0, tslib_1.__importStar)(require("react"));
-var memoize_one_1 = (0, tslib_1.__importDefault)(require("memoize-one"));
-var overrides_1 = require("../helpers/overrides");
-var locale_1 = require("../locale");
+var react_1 = require("react");
+var memoize_one_1 = tslib_1.__importDefault(require("memoize-one"));
+var overrides_1 = require("../../overrides");
 var popover_1 = require("../popover");
-var react_uid_1 = require("react-uid");
-var autosize_input_1 = (0, tslib_1.__importDefault)(require("./autosize-input"));
+var autosize_input_1 = tslib_1.__importDefault(require("./autosize-input"));
 var constants_1 = require("./constants");
-var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
-var dropdown_1 = (0, tslib_1.__importDefault)(require("./dropdown"));
+var default_props_1 = tslib_1.__importDefault(require("./default-props"));
+var dropdown_1 = tslib_1.__importDefault(require("./dropdown"));
 var styled_components_1 = require("./styled-components");
+var styled_components_2 = require("../../input/styled-components");
+var constants_2 = require("../../input/constants");
 var utils_1 = require("./utils");
 var spacewebProvider_1 = require("../../spacewebProvider");
-var locale_2 = (0, tslib_1.__importDefault)(require("./locale"));
 var helpers_1 = require("../../helpers");
+var popover_2 = require("../../popover");
+var list_1 = require("../../list");
+var SelectIdsContext_1 = require("../../select/SelectIdsContext");
 var __DEV__ = process.env.NODE_ENV !== 'production';
 function Noop() {
     return null;
 }
+var isEnhancer = function (enhancer) { return Boolean(enhancer || enhancer === 0); };
 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) {
@@ -36,31 +39,30 @@ var containsNode = function (parent, child) {
     }
     return undefined;
 };
-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;
+function getOptionLabel(_a, _b) {
+    var option = _a.option;
+    var selectLocale = _b.selectLocale, labelKey = _b.labelKey;
+    return option.isCreatable
+        ? "".concat(selectLocale === null || selectLocale === void 0 ? void 0 : selectLocale.create, " \u201C").concat(labelKey && option[labelKey], "\u201D")
+        : labelKey && option[labelKey];
 }
-exports.isInteractive = isInteractive;
+exports.getOptionLabel = getOptionLabel;
+function getValueLabel(_a, _b) {
+    var option = _a.option;
+    var labelKey = _b.labelKey;
+    return labelKey && option[labelKey];
+}
+exports.getValueLabel = getValueLabel;
 var Select = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Select, _super);
+    tslib_1.__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();
+        _this.anchor = (0, react_1.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();
+        _this.dropdown = (0, react_1.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.
@@ -71,8 +73,28 @@ var Select = /** @class */ (function (_super) {
             isFocused: false,
             isOpen: _this.props.startOpen || false,
             isPseudoFocused: false,
+            currentValueTagIdx: -1,
+            focusedExtraValueTagIdx: -1,
+            isExtraValuePopoverOpen: false,
+            isContainerFocused: false,
         };
         _this.isItMounted = false;
+        _this.getLimitTagsValue = function () {
+            if (_this.props.expandLimitTagsOnFocus && _this.state.isFocused) {
+                return Number(Infinity);
+            }
+            return _this.props.limitTags;
+        };
+        _this.getRenderedTagsCount = function () {
+            if (!_this.props.value) {
+                return 0;
+            }
+            var limitTags = _this.getLimitTagsValue();
+            if (limitTags && limitTags > 0 && _this.props.value.length > limitTags) {
+                return limitTags + 1;
+            }
+            return _this.props.value.length;
+        };
         // Handle touch outside on mobile to dismiss menu, ensures that the
         // touch target is not within the anchor DOM node.
         _this.handleTouchOutside = function (event) {
@@ -124,13 +146,6 @@ var Select = /** @class */ (function (_super) {
                 }
                 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) {
@@ -198,12 +213,13 @@ var Select = /** @class */ (function (_super) {
                 _this.props.onBlur(event);
             }
             if (_this.isItMounted) {
-                _this.setState({
+                _this.setState(function (lastState) { return ({
                     isFocused: false,
                     isOpen: false,
                     isPseudoFocused: false,
-                    inputValue: _this.props.onBlurResetsInput ? '' : _this.state.inputValue,
-                });
+                    inputValue: _this.props.onBlurResetsInput ? '' : lastState.inputValue,
+                    currentValueTagIdx: -1,
+                }); });
             }
         };
         _this.handleClickOutside = function (event) {
@@ -233,22 +249,75 @@ var Select = /** @class */ (function (_super) {
             if (_this.props.disabled)
                 return;
             switch (event.key) {
+                case 'ArrowLeft':
+                    if (_this.props.value && _this.props.multi && _this.state.inputValue === '') {
+                        event.preventDefault();
+                        _this.closeMenu();
+                        if (_this.state.currentValueTagIdx === -1 && _this.state.isFocused) {
+                            _this.setState(function (preState) { return ({
+                                currentValueTagIdx: _this.getRenderedTagsCount() - 1,
+                            }); });
+                        }
+                        else if (_this.state.currentValueTagIdx > 0) {
+                            _this.setState(function (preState) { return ({
+                                currentValueTagIdx: preState.currentValueTagIdx - 1,
+                            }); });
+                        }
+                    }
+                    break;
+                case 'ArrowRight':
+                    if (_this.props.value &&
+                        _this.props.multi &&
+                        _this.state.inputValue === '' &&
+                        _this.state.currentValueTagIdx !== -1) {
+                        event.preventDefault();
+                        _this.closeMenu();
+                        if (_this.state.currentValueTagIdx >= _this.getRenderedTagsCount() - 1) {
+                            // on the last tag without limit tag
+                            _this.focus();
+                        }
+                        else {
+                            // intermediate tag
+                            _this.setState(function (preState) { return ({
+                                currentValueTagIdx: preState.currentValueTagIdx + 1,
+                            }); });
+                        }
+                    }
+                    break;
                 case 'Backspace': // 8
                     if (!_this.state.inputValue && _this.props.backspaceRemoves) {
-                        event.preventDefault();
-                        _this.backspaceValue();
+                        if (!_this.props.multi) {
+                            event.preventDefault();
+                            _this.backspaceValue();
+                        }
+                        else if (_this.state.currentValueTagIdx === -1) {
+                            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 : '',
-                    }); });
+                case 'Tab': {
+                    //9
+                    if (_this.state.currentValueTagIdx !== -1) {
+                        _this.setState(function (prevState) { return ({
+                            currentValueTagIdx: -1,
+                        }); });
+                    }
+                    else {
+                        _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) {
+                    if (!_this.state.isOpen &&
+                        _this.props.clearable &&
+                        _this.props.escapeClearsValue &&
+                        !_this.state.isExtraValuePopoverOpen) {
                         _this.clearValue(event);
                         _this.setState({ isFocused: false, isPseudoFocused: false });
                     }
@@ -262,18 +331,36 @@ var Select = /** @class */ (function (_super) {
                         _this.setState({ isOpen: true });
                     }
                     break;
-                case 'ArrowUp': // 38
+                case 'ArrowUp': {
+                    // 38
                     event.preventDefault();
-                    if (!_this.state.isOpen) {
+                    var limitTags_1 = _this.getLimitTagsValue();
+                    if (_this.state.isExtraValuePopoverOpen && limitTags_1) {
+                        var value_1 = _this.props.value;
+                        _this.setState(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { focusedExtraValueTagIdx: prev.focusedExtraValueTagIdx === 0
+                                ? (value_1 || []).length - limitTags_1 - 1
+                                : prev.focusedExtraValueTagIdx - 1 })); });
+                    }
+                    else if (!_this.state.isOpen) {
                         _this.setState({ isOpen: true });
                     }
                     break;
-                case 'ArrowDown': // 40
+                }
+                case 'ArrowDown': {
+                    // 40
                     event.preventDefault();
-                    if (!_this.state.isOpen) {
+                    var limitTags_2 = _this.getLimitTagsValue();
+                    if (_this.state.isExtraValuePopoverOpen && limitTags_2) {
+                        var value_2 = _this.props.value;
+                        _this.setState(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { focusedExtraValueTagIdx: prev.focusedExtraValueTagIdx === (value_2 || []).length - limitTags_2 - 1
+                                ? 0
+                                : prev.focusedExtraValueTagIdx + 1 })); });
+                    }
+                    else if (!_this.state.isOpen) {
                         _this.setState({ isOpen: true });
                     }
                     break;
+                }
                 case 'PageUp': // 33
                     event.preventDefault();
                     if (!_this.state.isOpen) {
@@ -314,16 +401,12 @@ var Select = /** @class */ (function (_super) {
                     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.getOptionLabel = function (optionData, props) { return getOptionLabel(optionData, props); };
+        _this.getValueLabel = function (optionData, props) { return getValueLabel(optionData, props); };
+        _this.getMemoizedOptionsMap = (0, memoize_one_1.default)(function (options, valueKey) {
+            var normalizedOptions = _this.getMemoizedNormalizedOptions(options);
+            return new Map(normalizedOptions.map(function (option) { return [String(option[valueKey]), option]; }));
+        });
         _this.handleActiveDescendantChange = function (id) {
             if (id) {
                 _this.setState({ activeDescendant: id });
@@ -338,7 +421,6 @@ var Select = /** @class */ (function (_super) {
                 _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') {
@@ -347,6 +429,7 @@ var Select = /** @class */ (function (_super) {
             }
         };
         _this.selectValue = function (_a) {
+            var _b, _c;
             var item = _a.item;
             if (item.disabled) {
                 return;
@@ -354,13 +437,15 @@ var Select = /** @class */ (function (_super) {
             _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;
+            var closeOnSelect = (_b = item.__closeOnSelect) !== null && _b !== void 0 ? _b : _this.props.closeOnSelect;
+            var onSelectResetsInput = (_c = item.__onSelectResetsInput) !== null && _c !== void 0 ? _c : _this.props.onSelectResetsInput;
+            var updatedValue = onSelectResetsInput ? '' : _this.state.inputValue;
             if (_this.props.multi) {
                 if (item[constants_1.SELECT_ALL_ID]) {
                     var filteredOptionsWithoutSelectAllAndCreate_1 = _this.options.filter(function (val) { return !val[constants_1.SELECT_ALL_ID] && !(val === null || val === void 0 ? void 0 : val.isCreatable) && !val.disabled; });
                     _this.setState({
                         inputValue: updatedValue,
-                        isOpen: !_this.props.closeOnSelect,
+                        isOpen: !closeOnSelect,
                     }, function () {
                         var valueArray = _this.props.value || [];
                         var valueKey = _this.props.valueKey;
@@ -386,10 +471,36 @@ var Select = /** @class */ (function (_super) {
                         }
                     });
                 }
+                else if (item[constants_1.GROUP_SELECT_ALL_ID]) {
+                    var options_1 = _this.options;
+                    _this.setState({
+                        inputValue: updatedValue,
+                        isOpen: !closeOnSelect,
+                    }, function () {
+                        var _a;
+                        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 groupSelectAllChecked = item.selected;
+                        var groupId = item[valueKey];
+                        var groupOptions = (_a = options_1.filter(function (_a) {
+                            var __optgroup = _a.__optgroup;
+                            return __optgroup === groupId;
+                        })) !== null && _a !== void 0 ? _a : [];
+                        if (groupSelectAllChecked) {
+                            var toBeRemovedGroupOptions_1 = new Set(groupOptions.map(function (opt) { return opt[valueKey]; }));
+                            _this.setValue(valueArray === null || valueArray === void 0 ? void 0 : valueArray.filter(function (val) { return !toBeRemovedGroupOptions_1.has(val[valueKey]); }), undefined, constants_1.STATE_CHANGE_TYPE.select);
+                        }
+                        else {
+                            var toBeSelectedGroupOptions = groupOptions.filter(function (opt) { return !selectedValueSet.has(opt[valueKey]) && !opt.disabled; });
+                            _this.setValue(valueArray === null || valueArray === void 0 ? void 0 : valueArray.concat(toBeSelectedGroupOptions), undefined, constants_1.STATE_CHANGE_TYPE.groupSelectAll);
+                        }
+                    });
+                }
                 else {
                     _this.setState({
                         inputValue: updatedValue,
-                        isOpen: !_this.props.closeOnSelect,
+                        isOpen: !closeOnSelect,
                     }, function () {
                         var valueArray = _this.props.value || [];
                         if (valueArray.some(function (i) { return _this.props.valueKey && i[_this.props.valueKey] === item[_this.props.valueKey]; })) {
@@ -405,7 +516,7 @@ var Select = /** @class */ (function (_super) {
                 _this.focus();
                 _this.setState({
                     inputValue: updatedValue,
-                    isOpen: !_this.props.closeOnSelect,
+                    isOpen: !closeOnSelect,
                     isFocused: true,
                     isPseudoFocused: false,
                 }, function () {
@@ -414,7 +525,7 @@ var Select = /** @class */ (function (_super) {
             }
         };
         _this.addValue = function (item) {
-            var valueArray = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((_this.props.value || [])), false);
+            var valueArray = tslib_1.__spreadArray([], tslib_1.__read((_this.props.value || [])), false);
             _this.setValue(valueArray.concat(item), item, constants_1.STATE_CHANGE_TYPE.select);
         };
         _this.backspaceValue = function () {
@@ -425,34 +536,71 @@ var Select = /** @class */ (function (_super) {
             }
             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 });
+            var labelForInput = renderLabel({ option: item, index: valueLength - 1 }, _this.props);
             // 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,
+                var remainingInput_1 = labelForInput.slice(0, -1);
+                _this.setState(function (_a) {
+                    var currentValueTagIdx = _a.currentValueTagIdx;
+                    return ({
+                        inputValue: remainingInput_1,
+                        isOpen: true,
+                        currentValueTagIdx: currentValueTagIdx === -1 ? -1 : currentValueTagIdx - 1,
+                    });
                 });
             }
         };
         _this.popValue = function () {
-            var valueArray = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((_this.props.value || [])), false);
+            var valueArray = tslib_1.__spreadArray([], tslib_1.__read((_this.props.value || [])), false);
             var valueLength = valueArray.length;
             if (!valueLength)
-                return;
+                return undefined;
             if (valueArray[valueLength - 1].clearableValue === false)
-                return;
+                return undefined;
             var item = valueArray.pop();
             _this.setValue(valueArray, item, constants_1.STATE_CHANGE_TYPE.remove);
             return item;
         };
         _this.removeValue = function (item) {
-            var valueArray = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((_this.props.value || [])), false);
+            var valueArray = tslib_1.__spreadArray([], tslib_1.__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, constants_1.STATE_CHANGE_TYPE.remove);
-            _this.focus();
+            // in case of multi select, and the value is removed via unchecking the item in dropdown, focus should remain on input.
+            if (!_this.props.multi || _this.state.isOpen) {
+                _this.focus();
+            }
+            else {
+                var limitTags_3 = _this.getLimitTagsValue();
+                _this.setState(function (_a) {
+                    var _currentValueTagIdx = _a.currentValueTagIdx;
+                    if (limitTags_3 && limitTags_3 > 0 && valueArrayFiltered.length > limitTags_3 && _currentValueTagIdx === limitTags_3) {
+                        // deleted from the popover
+                        return {
+                            currentValueTagIdx: _currentValueTagIdx,
+                        };
+                    }
+                    if (_currentValueTagIdx === valueArrayFiltered.length) {
+                        // deleted last value
+                        if (valueArrayFiltered.length === 0) {
+                            // no more values left
+                            _this.focus();
+                            return {
+                                currentValueTagIdx: 1,
+                            };
+                        }
+                        // move to previous value
+                        return {
+                            currentValueTagIdx: _currentValueTagIdx - 1,
+                        };
+                    }
+                    // move to next value
+                    return {
+                        currentValueTagIdx: _currentValueTagIdx,
+                    };
+                });
+            }
         };
         _this.clearValue = function (event) {
             if (isClick(event) && !isLeftClick(event))
@@ -501,32 +649,40 @@ var Select = /** @class */ (function (_super) {
     };
     Select.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _this = this;
+        var _a, _b;
         if (!spacewebProvider_1.isServer) {
             if (prevState.isOpen !== this.state.isOpen) {
                 if (this.state.isOpen) {
                     this.props.onOpen && this.props.onOpen();
-                    document.addEventListener('touchstart', this.handleTouchOutside);
+                    (_a = this.props.ownerDocument) === null || _a === void 0 ? void 0 : _a.addEventListener('touchstart', this.handleTouchOutside);
                 }
                 else {
                     this.props.onClose && this.props.onClose();
-                    document.removeEventListener('touchstart', this.handleTouchOutside);
+                    (_b = this.props.ownerDocument) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchstart', this.handleTouchOutside);
                 }
             }
             if (!prevState.isFocused && this.state.isFocused) {
-                setTimeout(function () { return document.addEventListener('click', _this.handleClickOutside); }, 0);
+                setTimeout(function () { var _a; return (_a = _this.props.ownerDocument) === null || _a === void 0 ? void 0 : _a.addEventListener('click', _this.handleClickOutside); }, 0);
+            }
+            if (prevState.isFocused && !this.state.isFocused) {
+                setTimeout(function () { var _a; return (_a = _this.props.ownerDocument) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', _this.handleClickOutside); }, 0);
             }
         }
     };
     Select.prototype.componentWillUnmount = function () {
+        var _a, _b;
         if (!spacewebProvider_1.isServer) {
-            document.removeEventListener('touchstart', this.handleTouchOutside);
-            document.removeEventListener('click', this.handleClickOutside);
+            (_a = this.props.ownerDocument) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', this.handleTouchOutside);
+            (_b = this.props.ownerDocument) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.handleClickOutside);
         }
         this.isItMounted = false;
     };
     Select.prototype.focus = function () {
         if (!this.input)
             return;
+        this.setState({
+            currentValueTagIdx: -1,
+        });
         this.input.focus();
     };
     Select.prototype.handleDropdownOpen = function (nextOpenState) {
@@ -548,18 +704,19 @@ var Select = /** @class */ (function (_super) {
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.blur();
     };
     Select.prototype.closeMenu = function () {
+        var _this = this;
         if (this.props.onCloseResetsInput) {
-            this.setState({
+            this.setState(function (lastState) { return ({
                 inputValue: '',
                 isOpen: false,
-                isPseudoFocused: this.state.isFocused && !this.props.multi,
-            });
+                isPseudoFocused: lastState.isFocused && !_this.props.multi,
+            }); });
         }
         else {
-            this.setState({
+            this.setState(function (lastState) { return ({
                 isOpen: false,
-                isPseudoFocused: this.state.isFocused && !this.props.multi,
-            });
+                isPseudoFocused: lastState.isFocused && !_this.props.multi,
+            }); });
         }
     };
     /**
@@ -567,12 +724,16 @@ var Select = /** @class */ (function (_super) {
      */
     Select.prototype.getValueArray = function (value) {
         var _this = this;
+        var arrValue = value;
         if (!Array.isArray(value)) {
             if (value === null || value === undefined)
                 return [];
-            value = [value];
+            arrValue = [value];
         }
-        return value.map(function (value) { return (0, utils_1.expandValue)(value, _this.props); });
+        if (!this.props.options)
+            return tslib_1.__spreadArray([], tslib_1.__read(arrValue), false);
+        var optionsMap = this.getMemoizedOptionsMap(this.props.options, this.props.valueKey);
+        return arrValue.map(function (val) { var _a; return (_a = optionsMap.get(String(val[_this.props.valueKey]))) !== null && _a !== void 0 ? _a : val; });
     };
     Select.prototype.setValue = function (value, option, type) {
         if (this.props.onChange) {
@@ -583,48 +744,106 @@ var Select = /** @class */ (function (_super) {
             });
         }
     };
+    Select.prototype.removeValueAndFocus = function (item) {
+        this.removeValue(item);
+        this.focus();
+    };
     Select.prototype.renderLoading = function () {
         if (!this.props.isLoading)
-            return;
+            return undefined;
         var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
-        var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.LoadingIndicator, function () { return null; }), 2), LoadingIndicator = _b[0], loadingIndicatorProps = _b[1];
-        return ((0, jsx_runtime_1.jsx)(LoadingIndicator, (0, tslib_1.__assign)({ role: "status" }, loadingIndicatorProps, { children: (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ style: {
+        var _b = tslib_1.__read((0, overrides_1.getOverrides)(overrides.LoadingIndicator, function () { return null; }), 2), LoadingIndicator = _b[0], loadingIndicatorProps = _b[1];
+        return ((0, jsx_runtime_1.jsx)(LoadingIndicator, tslib_1.__assign({ role: "status" }, loadingIndicatorProps, { children: (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ style: {
                     position: 'absolute',
                     width: '1px',
                     height: '1px',
-                    padding: 0,
+                    padding: '0px',
                     margin: '-1px',
                     overflow: 'hidden',
                     clip: 'rect(0,0,0,0)',
                     whiteSpace: 'nowrap',
-                    border: 0,
-                } }, { children: "Loading" }), void 0) }), void 0));
+                    border: '0px',
+                } }, { children: "Loading" })) })));
     };
-    Select.prototype.renderValue = function (valueArray) {
+    Select.prototype.renderExtraValueTag = function (valueArray, remainingTagsCount) {
         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;
+        var _b = tslib_1.__read((0, overrides_1.getOverrides)(overrides.ExtraTagPopover, popover_2.StatefulPopover), 2), ExtraTagPopover = _b[0], extraTagPopoverProps = _b[1];
+        var _c = tslib_1.__read((0, overrides_1.getOverrides)(overrides.ExtraTagPopoverList, list_1.List), 2), ExtraTagPopoverList = _c[0], extraTagPopoverListProps = _c[1];
+        var _d = tslib_1.__read((0, overrides_1.getOverrides)(overrides.ExtraTagPopoverListItem, list_1.ListItem), 2), ExtraTagPopoverListItem = _d[0], extraTagPopoverListItemProps = _d[1];
+        var onExtraValuePopoverClose = function () {
+            _this.setState({
+                isExtraValuePopoverOpen: false,
+                focusedExtraValueTagIdx: -1,
+            });
+            _this.focus();
+        };
+        return ((0, jsx_runtime_1.jsx)(ExtraTagPopover, tslib_1.__assign({ viewportAsBoundary: true, placement: "bottom", onOpen: function () {
+                _this.setState({
+                    isExtraValuePopoverOpen: true,
+                    focusedExtraValueTagIdx: 0,
+                });
+            }, returnFocus: false, focusLock: false, autoFocus: false, onClose: onExtraValuePopoverClose, content: function () { return ((0, jsx_runtime_1.jsx)(ExtraTagPopoverList, tslib_1.__assign({ virtual: true, className: "p-0 m-1 overflow-y-auto min-w-47.5 max-h-75" }, extraTagPopoverListProps, { children: valueArray.map(function (value, i) {
+                    var disabled = sharedProps.$disabled || value.clearableValue === false;
+                    return ((0, jsx_runtime_1.jsx)(ExtraTagPopoverListItem, tslib_1.__assign({ className: "p-0" }, extraTagPopoverListItemProps, { children: (0, jsx_runtime_1.jsx)(Value, tslib_1.__assign({ value: value, removeValue: function (e) {
+                                _this.removeValue(value);
+                                // manually invoking onExtraValuePopoverClose to reset state
+                                // as ExtraTag item will unmount as soon as we remove all the values from it
+                                if (valueArray.length === 1) {
+                                    onExtraValuePopoverClose();
+                                }
+                                // if not stopped, backspace event will be handled by select as well.
+                                // which might remove pop last item from select.
+                                e.stopPropagation();
+                            }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue }, tabIndex: 0 }, sharedProps, { "$disabled": disabled, ref: i === _this.state.focusedExtraValueTagIdx
+                                ? function (valueEl) {
+                                    valueEl === null || valueEl === void 0 ? void 0 : valueEl.focus();
+                                }
+                                : undefined }, { children: renderLabel({ option: value, index: i }, _this.props) }), "value-".concat(i, "-").concat(_this.props.valueKey && value[_this.props.valueKey])) }), "value-".concat(i, "-").concat(_this.props.valueKey && value[_this.props.valueKey])));
+                }) }))); } }, extraTagPopoverProps, { children: (0, jsx_runtime_1.jsx)(Value, tslib_1.__assign({ value: { label: remainingTagsCount, id: '#extra', clearableValue: false }, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue } }, sharedProps, { "$disabled": true, ref: this.props.value && this.getLimitTagsValue() && this.state.currentValueTagIdx === this.getLimitTagsValue()
+                    ? function (valueEl) {
+                        valueEl === null || valueEl === void 0 ? void 0 : valueEl.focus();
+                    }
+                    : undefined }, { children: "+ ".concat(remainingTagsCount) })) })));
+    };
+    Select.prototype.renderValue = function (valueArray) {
+        var _this = this;
+        var _a;
+        var _b = this.props.overrides, overrides = _b === void 0 ? {} : _b;
+        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 ((0, jsx_runtime_1.jsx)(Value, (0, tslib_1.__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])));
-            });
+            var limitTags = (_a = this.getLimitTagsValue()) !== null && _a !== void 0 ? _a : Number(Infinity);
+            var _limitTag = limitTags < 0 ? Number(Infinity) : limitTags;
+            var remainingTagsCount = valueArray.length - _limitTag;
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [valueArray.slice(0, _limitTag).map(function (value, i) {
+                        var disabled = sharedProps.$disabled || value.clearableValue === false;
+                        return ((0, jsx_runtime_1.jsx)(Value, tslib_1.__assign({ value: value, removeValue: function () { return _this.removeValueAndFocus(value); }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue } }, sharedProps, { "$disabled": disabled, noTooltipOnTruncation: _this.props.noTooltipOnTruncation, 
+                            //react calls ref function whenever we pass it and not just on mount
+                            ref: i === _this.state.currentValueTagIdx
+                                ? function (valueEl) {
+                                    valueEl === null || valueEl === void 0 ? void 0 : valueEl.focus();
+                                }
+                                : undefined }, { children: renderLabel({ option: value, index: i }, _this.props) }), "value-".concat(i, "-").concat(_this.props.valueKey && value[_this.props.valueKey])));
+                    }), remainingTagsCount > 0 ? this.renderExtraValueTag(valueArray.slice(_limitTag), remainingTagsCount) : null] }));
         }
         if (this.shouldShowValue()) {
-            return ((0, jsx_runtime_1.jsx)(Value, (0, tslib_1.__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 ((0, jsx_runtime_1.jsx)(Value, tslib_1.__assign({ value: this.props.valueKey && valueArray[0][this.props.valueKey], disabled: this.props.disabled, overrides: { SingleValue: overrides.SingleValue }, noTooltipOnTruncation: this.props.noTooltipOnTruncation }, sharedProps, { children: renderLabel({ option: valueArray[0] }, this.props) })));
         }
         return null;
     };
-    Select.prototype.renderInput = function (listboxId) {
+    Select.prototype.renderInput = function (listboxId, ariaDescribedByIDs) {
         var _this = this;
-        var _a;
-        var _b = this.props.overrides, overrides = _b === void 0 ? {} : _b;
-        var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.InputContainer, styled_components_1.StyledInputContainer), 2), InputContainer = _c[0], inputContainerProps = _c[1];
+        var _a, _b, _c, _d, _e;
+        var _f = this.props.overrides, overrides = _f === void 0 ? {} : _f;
+        var _g = tslib_1.__read((0, overrides_1.getOverrides)(overrides.InputContainer, styled_components_1.StyledInputContainer), 2), InputContainer = _g[0], inputContainerProps = _g[1];
         var sharedProps = this.getSharedProps();
         var isOpen = this.state.isOpen;
         var selected = this.getValueArray(this.props.value || [])
@@ -632,22 +851,19 @@ var Select = /** @class */ (function (_super) {
             .join(', ');
         var selectedLabel = selected.length ? "Selected ".concat(selected, ". ") : '';
         var label = "".concat(selectedLabel).concat(this.props['aria-label'] || '');
+        var ariaDescribedBy = "".concat((_a = this.props['aria-describedby']) !== null && _a !== void 0 ? _a : '', " ").concat(ariaDescribedByIDs !== null && ariaDescribedByIDs !== void 0 ? ariaDescribedByIDs : '');
         if (!this.props.searchable) {
-            return ((0, jsx_runtime_1.jsx)(InputContainer, (0, tslib_1.__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: (0, jsx_runtime_1.jsx)("input", (0, tslib_1.__assign)({ "aria-hidden": true, id: this.props.id || undefined, ref: this.handleInputRef, style: {
+            return ((0, jsx_runtime_1.jsx)(InputContainer, tslib_1.__assign({ onFocus: this.handleInputFocus, tabIndex: this.props.disabled ? null : 0 }, sharedProps, inputContainerProps, { children: (0, jsx_runtime_1.jsx)("input", tslib_1.__assign({ "aria-hidden": true, id: this.props.id || undefined, ref: this.handleInputRef, style: {
                         opacity: 0,
-                        width: 0,
+                        width: '0px',
                         overflow: 'hidden',
                         border: 'none',
-                        padding: 0,
-                    }, tabIndex: -1 }, (overrides.Input
-                    ? overrides.Input.props
-                        ? // $FlowExpectedError[not-an-object]
-                            // @ts-ignore
-                            (0, helpers_1.omit$props)(overrides.Input.props)
-                        : {}
-                    : {})), void 0) }), void 0));
+                        padding: '0px',
+                    }, disabled: this.props.disabled, tabIndex: -1, "aria-activedescendant": (_b = this.state.activeDescendant) !== null && _b !== void 0 ? _b : undefined, "aria-describedby": ariaDescribedBy, "aria-errormessage": (_c = this.props['aria-errormessage']) !== null && _c !== void 0 ? _c : undefined, "aria-labelledby": (_d = this.props['aria-labelledby']) !== null && _d !== void 0 ? _d : undefined, "aria-disabled": this.props.disabled, "aria-owns": this.state.isOpen ? listboxId : undefined, "aria-required": this.props.required || undefined }, (overrides.Input && typeof overrides.Input === 'object' && overrides.Input.props
+                    ? (0, helpers_1.omit$props)(overrides.Input.props)
+                    : {}))) })));
         }
-        return ((0, jsx_runtime_1.jsx)(InputContainer, (0, tslib_1.__assign)({}, sharedProps, inputContainerProps, { children: (0, jsx_runtime_1.jsx)(autosize_input_1.default, (0, tslib_1.__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));
+        return ((0, jsx_runtime_1.jsx)(InputContainer, tslib_1.__assign({}, sharedProps, inputContainerProps, { children: (0, jsx_runtime_1.jsx)(autosize_input_1.default, tslib_1.__assign({ "aria-activedescendant": this.state.activeDescendant, "aria-autocomplete": "list", "aria-controls": this.state.isOpen ? listboxId : null, "aria-describedby": ariaDescribedBy, "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 && !((_e = this.props.value) === null || _e === void 0 ? void 0 : _e.length)) || null, role: "combobox", value: this.state.inputValue, tabIndex: 0 }, sharedProps)) })));
     };
     Select.prototype.renderClear = function () {
         var _a;
@@ -655,9 +871,9 @@ var Select = /** @class */ (function (_super) {
         if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
             return null;
         }
-        var _b = this.getSharedProps(), $size = _b.$size, sharedProps = (0, tslib_1.__rest)(_b, ["$size"]);
+        var _b = this.getSharedProps(), $size = _b.$size, sharedProps = tslib_1.__rest(_b, ["$size"]);
         var _c = this.props.overrides, overrides = _c === void 0 ? {} : _c;
-        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.ClearIcon, function () { return null; }), 2), ClearIcon = _d[0], clearIconProps = _d[1];
+        var _d = tslib_1.__read((0, overrides_1.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[constants_1.SIZE.mini] = 15,
@@ -665,47 +881,38 @@ var Select = /** @class */ (function (_super) {
             _a[constants_1.SIZE.default] = 18,
             _a[constants_1.SIZE.large] = 22,
             _a);
-        return ((0, jsx_runtime_1.jsx)(ClearIcon, (0, tslib_1.__assign)({ title: ariaLabel, "aria-label": ariaLabel, onClick: this.clearValue, role: "button", size: sizes[this.props.size] || sizes[constants_1.SIZE.default] }, sharedProps, clearIconProps), void 0));
+        return ((0, jsx_runtime_1.jsx)(ClearIcon, tslib_1.__assign({ title: ariaLabel, "aria-label": ariaLabel, onClick: this.clearValue, role: "button", tabIndex: this.state.isContainerFocused ? 0 : -1, size: sizes[this.props.size] || sizes[constants_1.SIZE.default] }, sharedProps, clearIconProps)));
     };
     Select.prototype.renderArrow = function () {
         var _a;
         if (this.props.type !== constants_1.TYPE.select) {
             return null;
         }
-        var _b = this.getSharedProps(), $size = _b.$size, sharedProps = (0, tslib_1.__rest)(_b, ["$size"]);
+        var _b = this.getSharedProps(), $size = _b.$size, sharedProps = tslib_1.__rest(_b, ["$size"]);
         var _c = this.props.overrides, overrides = _c === void 0 ? {} : _c;
-        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.SelectArrow, function () { return null; }), 2), SelectArrow = _d[0], selectArrowProps = _d[1];
-        selectArrowProps.overrides = (0, overrides_1.mergeOverrides)({
-            Svg: {
-                style: function (_a) {
-                    var $theme = _a.$theme, $disabled = _a.$disabled;
-                    return ({
-                        color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary,
-                    });
-                },
-            },
-        }, selectArrowProps.overrides);
+        var _d = tslib_1.__read((0, overrides_1.getOverrides)(overrides.SelectArrow, function () { return null; }), 2), SelectArrow = _d[0], selectArrowProps = _d[1];
         var sizes = (_a = {},
             _a[constants_1.SIZE.mini] = 16,
             _a[constants_1.SIZE.compact] = 16,
             _a[constants_1.SIZE.default] = 20,
             _a[constants_1.SIZE.large] = 24,
             _a);
-        return ((0, jsx_runtime_1.jsx)(SelectArrow, (0, tslib_1.__assign)({ size: (this.props.size && sizes[this.props.size]) || sizes[constants_1.SIZE.default], title: "open" }, sharedProps, selectArrowProps), void 0));
+        return ((0, jsx_runtime_1.jsx)(SelectArrow, tslib_1.__assign({ size: (this.props.size && sizes[this.props.size]) || sizes[constants_1.SIZE.default], title: "open" }, sharedProps, selectArrowProps)));
     };
     Select.prototype.renderSearch = function () {
         if (this.props.type !== constants_1.TYPE.search) {
             return null;
         }
         var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
-        var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.SearchIconContainer, styled_components_1.StyledSearchIconContainer), 2), SearchIconContainer = _b[0], searchIconContainerProps = _b[1];
-        var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.SearchIcon, function () { return null; }), 2), SearchIcon = _c[0], searchIconProps = _c[1];
+        var _b = tslib_1.__read((0, overrides_1.getOverrides)(overrides.SearchIconContainer, styled_components_1.StyledSearchIconContainer), 2), SearchIconContainer = _b[0], searchIconContainerProps = _b[1];
+        var _c = tslib_1.__read((0, overrides_1.getOverrides)(overrides.SearchIcon, function () { return null; }), 2), SearchIcon = _c[0], searchIconProps = _c[1];
         var sharedProps = this.getSharedProps();
-        return ((0, jsx_runtime_1.jsx)(SearchIconContainer, (0, tslib_1.__assign)({}, sharedProps, searchIconContainerProps, { children: (0, jsx_runtime_1.jsx)(SearchIcon, (0, tslib_1.__assign)({ size: 16, title: "search" }, sharedProps, searchIconProps), void 0) }), void 0));
+        return ((0, jsx_runtime_1.jsx)(SearchIconContainer, tslib_1.__assign({}, sharedProps, searchIconContainerProps, { children: (0, jsx_runtime_1.jsx)(SearchIcon, tslib_1.__assign({ size: 16, title: "search" }, sharedProps, searchIconProps)) })));
     };
     Select.prototype.filterOptions = function (excludeOptions, filterValue, options) {
         var _a, _b;
         var _this = this;
+        var _c;
         if (filterValue === void 0) { filterValue = this.state.inputValue.trim(); }
         if (options === void 0) { options = this.props.options; }
         var filteredOptions = this.getMemoizedNormalizedOptions(options);
@@ -716,15 +923,18 @@ var Select = /** @class */ (function (_super) {
                 labelKey: this.props.labelKey || '',
             });
         }
+        var countDisabledOptions = Array.isArray(filteredOptions)
+            ? filteredOptions.reduce(function (acc, opt) { return (opt.disabled ? acc + 1 : acc); }, 0)
+            : 0;
         if (this.props.multi) {
             if (!this.props.hideSelectAll && filteredOptions.length > 0) {
-                filteredOptions = (0, tslib_1.__spreadArray)([
+                filteredOptions = tslib_1.__spreadArray([
                     (_a = {},
                         _a[this.props.valueKey] = constants_1.SELECT_ALL_ID,
-                        _a[this.props.labelKey] = "".concat(locale_2.default.selectAllLabel, " ").concat(this.props.__selectAllShouldReturnAllOptions ? '' : "(".concat(filteredOptions.length, ")")),
+                        _a[this.props.labelKey] = "".concat((_c = this.props.selectLocale) === null || _c === void 0 ? void 0 : _c.selectAllLabel, " ").concat(this.props.__selectAllShouldReturnAllOptions ? '' : "(".concat(filteredOptions.length - countDisabledOptions, ")")),
                         _a[constants_1.SELECT_ALL_ID] = true,
                         _a)
-                ], (0, tslib_1.__read)(filteredOptions), false);
+                ], tslib_1.__read(filteredOptions), false);
             }
         }
         // can user create a new option + there's no exact match already
@@ -749,13 +959,14 @@ var Select = /** @class */ (function (_super) {
         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 _a = this.props, clearable = _a.clearable, creatable = _a.creatable, disabled = _a.disabled, error = _a.error, intent = _a.intent, 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,
+            $intent: intent,
             $positive: positive,
             $isFocused: isFocused,
             $isLoading: isLoading,
@@ -767,25 +978,40 @@ var Select = /** @class */ (function (_super) {
             $size: size,
             $type: type,
             $isEmpty: !this.getValueArray(value || []).length,
+            $limitTags: this.getLimitTagsValue(),
         };
     };
     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;
+        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, startEnhancer = _b.startEnhancer, endEnhancer = _b.endEnhancer;
         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 = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.Root, styled_components_1.StyledRoot), 2), Root = _d[0], rootProps = _d[1];
-        var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.ControlContainer, styled_components_1.StyledControlContainer), 2), ControlContainer = _e[0], controlContainerProps = _e[1];
-        var _f = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.ValueContainer, styled_components_1.StyledValueContainer), 2), ValueContainer = _f[0], valueContainerProps = _f[1];
-        var _g = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.IconsContainer, styled_components_1.StyledIconsContainer), 2), IconsContainer = _g[0], iconsContainerProps = _g[1];
-        var _h = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.Popover, popover_1.Popover), 2), PopoverOverride = _h[0], popoverProps = _h[1];
-        var _j = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.Placeholder, styled_components_1.StyledPlaceholder), 2), Placeholder = _j[0], placeholderProps = _j[1];
+        var _d = tslib_1.__read((0, overrides_1.getOverrides)(overrides.Root, styled_components_1.StyledRoot), 2), Root = _d[0], rootProps = _d[1];
+        var _e = tslib_1.__read((0, overrides_1.getOverrides)(overrides.ControlContainer, styled_components_1.StyledControlContainer), 2), ControlContainer = _e[0], controlContainerProps = _e[1];
+        var _f = tslib_1.__read((0, overrides_1.getOverrides)(overrides.StartEnhancer, styled_components_2.StyledInputEnhancer), 2), StartEnhancer = _f[0], startEnhancerProps = _f[1];
+        var _g = tslib_1.__read((0, overrides_1.getOverrides)(overrides.EndEnhancer, styled_components_2.StyledInputEnhancer), 2), EndEnhancer = _g[0], endEnhancerProps = _g[1];
+        var _h = tslib_1.__read((0, overrides_1.getOverrides)(overrides.ValueContainer, styled_components_1.StyledValueContainer), 2), ValueContainer = _h[0], valueContainerProps = _h[1];
+        var _j = tslib_1.__read((0, overrides_1.getOverrides)(overrides.IconsContainer, styled_components_1.StyledIconsContainer), 2), IconsContainer = _j[0], iconsContainerProps = _j[1];
+        var _k = tslib_1.__read((0, overrides_1.getOverrides)(overrides.Popover, popover_1.Popover), 2), PopoverOverride = _k[0], popoverProps = _k[1];
+        var _l = tslib_1.__read((0, overrides_1.getOverrides)(overrides.Placeholder, styled_components_1.StyledPlaceholder), 2), Placeholder = _l[0], placeholderProps = _l[1];
         var sharedProps = this.getSharedProps();
+        var startEnhancerVisible = isEnhancer(startEnhancer);
+        var endEnhancerVisible = isEnhancer(endEnhancer);
+        var hasEnhancer = startEnhancerVisible || endEnhancerVisible;
+        var rootClassName = hasEnhancer ? ['flex items-stretch w-full', rootProps.className] : rootProps.className;
+        var controlContainerClassName = hasEnhancer
+            ? [
+                'flex-1 min-w-0 w-auto',
+                startEnhancerVisible ? 'rounded-l-0' : '',
+                endEnhancerVisible ? 'rounded-r-0' : '',
+                controlContainerProps.className,
+            ]
+            : controlContainerProps.className;
         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;
@@ -799,12 +1025,15 @@ var Select = /** @class */ (function (_super) {
                 console.warn('[Select] `error` and `positive` are both set to `true`. `error` will take precedence but this may not be what you want.');
             }
         }
-        return ((0, jsx_runtime_1.jsx)(react_uid_1.UIDConsumer, { children: function (listboxId) { return ((0, jsx_runtime_1.jsx)(locale_1.LocaleContext.Consumer, { children: function (locale) { return ((0, jsx_runtime_1.jsx)(PopoverOverride
+        return ((0, jsx_runtime_1.jsx)(SelectIdsContext_1.SelectIdsProvider, tslib_1.__assign({ listboxId: this.props.listboxId, menuDescriptionId: this.props.menuDescriptionId, noResultsId: this.props.noResultsId }, { children: function (_a) {
+                var _b;
+                var noResultsId = _a.noResultsId, menuDescriptionId = _a.menuDescriptionId, listboxId = _a.listboxId;
+                return ((0, jsx_runtime_1.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.
-                , (0, tslib_1.__assign)({ 
+                , tslib_1.__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
@@ -813,12 +1042,13 @@ var Select = /** @class */ (function (_super) {
                         if (!ref)
                             return;
                         _this.anchor = ref.anchorRef;
-                    }, accessibilityType: popover_1.ACCESSIBILITY_TYPE.none, autoFocus: false, focusLock: false, mountNode: _this.props.mountNode, onEsc: function () { return _this.closeMenu(); }, isOpen: isOpen, popoverMargin: 0, content: function () {
+                    }, accessibilityType: popover_1.ACCESSIBILITY_TYPE.none, autoFocus: false, focusLock: false, mountNode: _this.props.mountNode, onEsc: function () { return _this.closeMenu(); }, isOpen: isOpen, popoverMargin: 0, content: function (params) {
                         var dropdownProps = {
                             error: _this.props.error || false,
                             positive: _this.props.positive,
-                            getOptionLabel: _this.props.getOptionLabel || _this.getOptionLabel.bind(_this, locale),
-                            id: listboxId,
+                            getOptionLabel: function (optionState) {
+                                return (_this.props.getOptionLabel || _this.getOptionLabel)(optionState, _this.props);
+                            },
                             isLoading: _this.props.isLoading || false,
                             labelKey: _this.props.labelKey || '',
                             maxDropdownHeight: _this.props.maxDropdownHeight || '',
@@ -828,7 +1058,6 @@ var Select = /** @class */ (function (_super) {
                             onItemSelect: _this.selectValue,
                             selectAllChecked: selectAllChecked,
                             options: options,
-                            overrides: overrides,
                             required: _this.props.required || false,
                             searchable: _this.props.searchable || true,
                             size: _this.props.size || 'default',
@@ -837,13 +1066,23 @@ var Select = /** @class */ (function (_super) {
                             valueKey: _this.props.valueKey || '',
                             width: _this.anchor.current ? _this.anchor.current.clientWidth : null,
                             keyboardControlNode: _this.anchor,
+                            closeMenu: (params === null || params === void 0 ? void 0 : params.closeMenu) || _this.closeMenu.bind(_this),
+                            dropdownFooter: _this.props.dropdownFooter,
+                            overrides: overrides,
+                            id: listboxId,
                         };
-                        return (0, jsx_runtime_1.jsx)(dropdown_1.default, (0, tslib_1.__assign)({ innerRef: _this.dropdown }, dropdownProps), void 0);
-                    }, placement: popover_1.PLACEMENT.bottom }, popoverProps, { children: (0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ onBlur: _this.handleBlur, "data-baseweb": "select" }, sharedProps, rootProps, { children: (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__assign)({ onKeyDown: _this.handleKeyDown, onClick: _this.handleClick, onTouchEnd: _this.handleTouchEnd, onTouchMove: _this.handleTouchMove, onTouchStart: _this.handleTouchStart }, sharedProps, controlContainerProps, { children: [type === constants_1.TYPE.search ? _this.renderSearch() : null, (0, jsx_runtime_1.jsxs)(ValueContainer, (0, tslib_1.__assign)({}, sharedProps, valueContainerProps, { children: [_this.renderValue(valueArray), _this.renderInput(listboxId), _this.shouldShowPlaceholder() ? ((0, jsx_runtime_1.jsx)(Placeholder, (0, tslib_1.__assign)({}, sharedProps, placeholderProps, { children: typeof _this.props.placeholder !== 'undefined'
-                                                ? _this.props.placeholder
-                                                : locale.select.placeholder }), void 0)) : null] }), void 0), (0, jsx_runtime_1.jsxs)(IconsContainer, (0, tslib_1.__assign)({}, sharedProps, iconsContainerProps, { children: [_this.renderLoading(), _this.renderClear(), type === constants_1.TYPE.select ? _this.renderArrow() : null] }), void 0)] }), void 0) }), void 0) }), void 0)); } }, void 0)); } }, void 0));
+                        return (0, jsx_runtime_1.jsx)(dropdown_1.default, tslib_1.__assign({}, dropdownProps));
+                    }, placement: popover_1.PLACEMENT.bottom }, popoverProps, { overrides: (0, overrides_1.mergeOverrides)({ Inner: { props: { ref: _this.dropdown } } }, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.overrides) }, { children: (0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-baseweb": "select" }, sharedProps, rootProps, { className: rootClassName, onFocus: function (e) {
+                            _this.setState({ isContainerFocused: true });
+                            typeof rootProps.onFocus === 'function' && rootProps.onFocus(e);
+                        }, onBlur: function (e) {
+                            _this.setState({ isContainerFocused: false });
+                            _this.handleBlur(e);
+                            typeof rootProps.onBlur === 'function' && rootProps.onBlur(e);
+                        } }, { children: [isEnhancer(startEnhancer) && ((0, jsx_runtime_1.jsx)(StartEnhancer, tslib_1.__assign({}, sharedProps, startEnhancerProps, { "$position": constants_2.ENHANCER_POSITION.start, "$isStart": true }, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }))), (0, jsx_runtime_1.jsxs)(ControlContainer, tslib_1.__assign({ onKeyDown: _this.handleKeyDown, onClick: _this.handleClick, onTouchEnd: _this.handleTouchEnd, onTouchMove: _this.handleTouchMove, onTouchStart: _this.handleTouchStart }, sharedProps, controlContainerProps, { className: controlContainerClassName, "aria-describedby": "".concat((_b = controlContainerProps['aria-describedby']) !== null && _b !== void 0 ? _b : '', " ").concat(noResultsId, " ").concat(menuDescriptionId).trim() }, { children: [type === constants_1.TYPE.search ? _this.renderSearch() : null, (0, jsx_runtime_1.jsxs)(ValueContainer, tslib_1.__assign({}, sharedProps, valueContainerProps, { children: [_this.renderValue(valueArray), _this.renderInput(listboxId, [noResultsId, menuDescriptionId].join(' ')), _this.shouldShowPlaceholder() ? ((0, jsx_runtime_1.jsx)(Placeholder, tslib_1.__assign({}, sharedProps, placeholderProps, { children: _this.props.placeholder }))) : null] })), (0, jsx_runtime_1.jsxs)(IconsContainer, tslib_1.__assign({}, sharedProps, iconsContainerProps, { children: [_this.renderLoading(), _this.renderClear(), type === constants_1.TYPE.select ? _this.renderArrow() : null] }))] })), isEnhancer(endEnhancer) && ((0, jsx_runtime_1.jsx)(EndEnhancer, tslib_1.__assign({}, sharedProps, endEnhancerProps, { "$position": constants_2.ENHANCER_POSITION.end, "$isStart": false }, { children: typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer })))] })) })));
+            } })));
     };
     Select.defaultProps = default_props_1.default;
     return Select;
-}(React.Component));
+}(react_1.Component));
 exports.default = Select;