@workday/canvas-kit-preview-react 9.0.0-alpha.364-next.3 → 9.0.0-alpha.382-next.2

package/dist/commonjs/select/lib/Select.js

@@ -1,30 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -44,42 +18,30 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var SelectMenu_1 = require("./SelectMenu");
-var SelectBase_1 = require("./SelectBase");
-var utils_1 = require("./utils");
-var SelectContainer = /** @class */ (function (_super) {
-    __extends(SelectContainer, _super);
-    function SelectContainer(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const SelectMenu_1 = require("./SelectMenu");
+const SelectBase_1 = require("./SelectBase");
+const utils_1 = require("./utils");
+class SelectContainer extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
             focusedOptionIndex: 0,
             menuVisibility: 'closed',
         };
-        _this.localButtonRef = React.createRef();
-        _this.inputRef = React.createRef();
-        _this.menuRef = React.createRef();
+        this.localButtonRef = React.createRef();
+        this.inputRef = React.createRef();
+        this.menuRef = React.createRef();
         // For type-ahead functionality
-        _this.keysSoFar = '';
-        _this.clearKeysSoFarTimeout = 500;
+        this.keysSoFar = '';
+        this.clearKeysSoFarTimeout = 500;
         // Cached values
-        _this.normalizedOptions = [];
-        _this.areOptionsDefined = function () {
-            var options = _this.props.options;
+        this.normalizedOptions = [];
+        this.areOptionsDefined = () => {
+            const { options } = this.props;
             if (!options || options.length === 0) {
                 return false;
             }
@@ -88,15 +50,15 @@ var SelectContainer = /** @class */ (function (_super) {
         // Store normalized options since the options prop can take on multiple
         // forms: an array of strings or an array of objects (sometimes with
         // arbitrary keys)
-        _this.setNormalizedOptions = function () {
-            var options = _this.props.options;
+        this.setNormalizedOptions = () => {
+            const { options } = this.props;
             // Abort if options weren't defined
-            if (!_this.areOptionsDefined()) {
+            if (!this.areOptionsDefined()) {
                 return;
             }
-            _this.normalizedOptions = options.map(function (option) {
-                var data = {};
-                var disabled, id, label, value;
+            this.normalizedOptions = options.map(option => {
+                let data = {};
+                let disabled, id, label, value;
                 if (typeof option === 'string') {
                     disabled = false;
                     id = common_1.generateUniqueId();
@@ -111,21 +73,19 @@ var SelectContainer = /** @class */ (function (_super) {
                     label = option.label || option.value;
                 }
                 return {
-                    data: data,
-                    disabled: disabled,
-                    id: id,
-                    label: label,
-                    value: value,
+                    data,
+                    disabled,
+                    id,
+                    label,
+                    value,
                 };
             });
         };
-        _this.getIndexByStartString = function (startIndex, startString, endIndex, ignoreDisabled) {
-            if (endIndex === void 0) { endIndex = _this.normalizedOptions.length; }
-            if (ignoreDisabled === void 0) { ignoreDisabled = true; }
-            for (var i = startIndex; i < endIndex; i++) {
-                var label = _this.normalizedOptions[i].label.toLowerCase();
+        this.getIndexByStartString = (startIndex, startString, endIndex = this.normalizedOptions.length, ignoreDisabled = true) => {
+            for (let i = startIndex; i < endIndex; i++) {
+                const label = this.normalizedOptions[i].label.toLowerCase();
                 if (label.indexOf(startString.toLowerCase()) === 0) {
-                    if (!ignoreDisabled || (ignoreDisabled && !_this.normalizedOptions[i].disabled)) {
+                    if (!ignoreDisabled || (ignoreDisabled && !this.normalizedOptions[i].disabled)) {
                         return i;
                     }
                 }
@@ -141,64 +101,64 @@ var SelectContainer = /** @class */ (function (_super) {
         // Up/Down key means "focus the first enabled option above/below the currently
         // focused option", or pressing the Home/End key means "focus the first/last
         // enabled option on the menu."
-        _this.focusNextEnabledOption = function (startIndex, direction) {
+        this.focusNextEnabledOption = (startIndex, direction) => {
             // Ensure direction is non-zero
             if (direction === 0) {
                 return;
             }
-            var numOptions = _this.normalizedOptions.length;
-            var currentIndex = startIndex;
+            const numOptions = this.normalizedOptions.length;
+            let currentIndex = startIndex;
             // Check if currentIndex refers to an enabled option. If not, keep moving
             // the index in the prescribed direction until we find an enabled option.
             while (currentIndex >= 0 &&
                 currentIndex < numOptions &&
-                _this.normalizedOptions[currentIndex].disabled) {
+                this.normalizedOptions[currentIndex].disabled) {
                 currentIndex += direction;
             }
             // Update the focused index only if currentIndex is inbounds and
             // refers to an enabled option
             if (currentIndex >= 0 &&
                 currentIndex < numOptions &&
-                !_this.normalizedOptions[currentIndex].disabled) {
-                _this.setState({ focusedOptionIndex: currentIndex });
+                !this.normalizedOptions[currentIndex].disabled) {
+                this.setState({ focusedOptionIndex: currentIndex });
             }
         };
-        _this.updateStateFromValue = function () {
-            _this.setState({
-                focusedOptionIndex: utils_1.getCorrectedIndexByValue(_this.normalizedOptions, _this.props.value),
+        this.updateStateFromValue = () => {
+            this.setState({
+                focusedOptionIndex: utils_1.getCorrectedIndexByValue(this.normalizedOptions, this.props.value),
             });
         };
-        _this.focusButton = function () {
-            if (_this.localButtonRef.current) {
-                _this.localButtonRef.current.focus();
+        this.focusButton = () => {
+            if (this.localButtonRef.current) {
+                this.localButtonRef.current.focus();
             }
         };
-        _this.setMenuAnimationTimeout = function (callback) {
-            if (_this.menuAnimationTimer) {
-                clearTimeout(_this.menuAnimationTimer);
+        this.setMenuAnimationTimeout = (callback) => {
+            if (this.menuAnimationTimer) {
+                clearTimeout(this.menuAnimationTimer);
             }
-            _this.menuAnimationTimer = setTimeout(callback, SelectMenu_1.menuAnimationDuration);
+            this.menuAnimationTimer = setTimeout(callback, SelectMenu_1.menuAnimationDuration);
         };
-        _this.openMenu = function () {
-            _this.setState({ menuVisibility: 'opening' });
-            _this.setMenuAnimationTimeout(function () {
-                _this.setState({ menuVisibility: 'opened' });
+        this.openMenu = () => {
+            this.setState({ menuVisibility: 'opening' });
+            this.setMenuAnimationTimeout(() => {
+                this.setState({ menuVisibility: 'opened' });
             });
         };
-        _this.closeMenu = function () {
-            _this.setState({ menuVisibility: 'closing' });
-            _this.setMenuAnimationTimeout(function () {
-                _this.setState({
+        this.closeMenu = () => {
+            this.setState({ menuVisibility: 'closing' });
+            this.setMenuAnimationTimeout(() => {
+                this.setState({
                     // Reset the focused option to the currently selected option in case
                     // the user focused a different option but chose not to select it. The
                     // next time the menu opens, focus should begin on the selected option.
-                    focusedOptionIndex: utils_1.getCorrectedIndexByValue(_this.normalizedOptions, _this.props.value),
+                    focusedOptionIndex: utils_1.getCorrectedIndexByValue(this.normalizedOptions, this.props.value),
                     menuVisibility: 'closed',
                 });
             });
         };
-        _this.toggleMenu = function (open) {
-            var menuVisibility = _this.state.menuVisibility;
+        this.toggleMenu = (open) => {
+            const { menuVisibility } = this.state;
             if (open) {
                 switch (menuVisibility) {
                     // We're opening a menu which is currently closed: set the menu state
@@ -206,14 +166,14 @@ var SelectContainer = /** @class */ (function (_super) {
                     // from 0 opacity in the open state to the targeted 1.0 opacity in
                     // the opening state.
                     case 'closed':
-                        _this.setState({ menuVisibility: 'open' }, _this.openMenu);
+                        this.setState({ menuVisibility: 'open' }, this.openMenu);
                         break;
                     // We're opening a menu which is in the process of closing. Since the
                     // menu isn't closed, there's no need to set the open state: kick off
                     // openMenu immediately.
                     case 'close':
                     case 'closing':
-                        _this.openMenu();
+                        this.openMenu();
                         break;
                     // Otherwise, we're opening a menu is already opened or in the process of
                     // opening; no need to do anything further.
@@ -226,14 +186,14 @@ var SelectContainer = /** @class */ (function (_super) {
                     // We're closing a menu which is currently opened: set the menu state to
                     // close before kicking off closeMenu.
                     case 'opened':
-                        _this.setState({ menuVisibility: 'close' }, _this.closeMenu);
+                        this.setState({ menuVisibility: 'close' }, this.closeMenu);
                         break;
                     // We're closing a menu which is in the process of opening. Since the
                     // menu isn't opened, there's no need to set the close state: kick off
                     // closeMenu immediately.
                     case 'open':
                     case 'opening':
-                        _this.closeMenu();
+                        this.closeMenu();
                         break;
                     // Otherwise, we're closing a menu which is already closed or in the process
                     // of closing; no need to do anything further.
@@ -246,28 +206,28 @@ var SelectContainer = /** @class */ (function (_super) {
         // In order for Select to be usable as a controlled component, we
         // need to programmatically change the value of the SelectInput
         // in such a way that triggers its change event
-        _this.fireChangeEvent = function (value) {
-            if (_this.inputRef && _this.inputRef.current) {
-                var nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(_this.inputRef.current), 'value');
+        this.fireChangeEvent = (value) => {
+            if (this.inputRef && this.inputRef.current) {
+                const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this.inputRef.current), 'value');
                 if (nativeInputValue && nativeInputValue.set) {
-                    nativeInputValue.set.call(_this.inputRef.current, value);
+                    nativeInputValue.set.call(this.inputRef.current, value);
                 }
-                var event_1;
+                let event;
                 if (typeof Event === 'function') {
                     // Modern browsers
-                    event_1 = new Event('change', { bubbles: true });
+                    event = new Event('change', { bubbles: true });
                 }
                 else {
                     // IE 11
-                    event_1 = document.createEvent('Event');
-                    event_1.initEvent('change', true, true);
+                    event = document.createEvent('Event');
+                    event.initEvent('change', true, true);
                 }
-                _this.inputRef.current.dispatchEvent(event_1);
+                this.inputRef.current.dispatchEvent(event);
             }
         };
-        _this.handleKeyboardTypeAhead = function (key, numOptions) {
+        this.handleKeyboardTypeAhead = (key, numOptions) => {
             // Abort immediately if the menu is the process of closing
-            if (_this.state.menuVisibility === 'closing') {
+            if (this.state.menuVisibility === 'closing') {
                 return;
             }
             // Set the starting point of the search to one of two locations
@@ -284,45 +244,45 @@ var SelectContainer = /** @class */ (function (_super) {
             // "San Francisco" as you type "san " (because "san " still matches
             // "San Francisco") and then advances focus to "San Jose" after you
             // type the "j" at the end.
-            var start = _this.keysSoFar.length === 0
-                ? _this.state.focusedOptionIndex + 1
-                : _this.state.focusedOptionIndex;
+            let start = this.keysSoFar.length === 0
+                ? this.state.focusedOptionIndex + 1
+                : this.state.focusedOptionIndex;
             // If the starting point is beyond the list of options, reset it
             // to the beginning of the list
             start = start === numOptions ? 0 : start;
-            _this.keysSoFar += key;
-            _this.startClearKeysSoFarTimer();
+            this.keysSoFar += key;
+            this.startClearKeysSoFarTimer();
             // First, look for a match from start to end
-            var matchIndex;
-            matchIndex = _this.getIndexByStartString(start, _this.keysSoFar);
+            let matchIndex;
+            matchIndex = this.getIndexByStartString(start, this.keysSoFar);
             // If a match isn't found between start and end, wrap the search
             // around and search again from the beginning (0) to start
             if (matchIndex === -1) {
-                matchIndex = _this.getIndexByStartString(0, _this.keysSoFar, start);
+                matchIndex = this.getIndexByStartString(0, this.keysSoFar, start);
             }
             // A match was found...
             if (matchIndex > -1) {
-                if (_this.state.menuVisibility === 'closed') {
+                if (this.state.menuVisibility === 'closed') {
                     // If the menu is closed, fire the change event
-                    _this.fireChangeEvent(_this.normalizedOptions[matchIndex].value);
+                    this.fireChangeEvent(this.normalizedOptions[matchIndex].value);
                 }
                 else {
                     // Otherwise the menu is visible (or at least partially visible);
                     // focus the matched option
-                    _this.setState({ focusedOptionIndex: matchIndex });
+                    this.setState({ focusedOptionIndex: matchIndex });
                 }
             }
         };
-        _this.startClearKeysSoFarTimer = function () {
-            if (_this.clearKeysSoFarTimer) {
-                clearTimeout(_this.clearKeysSoFarTimer);
+        this.startClearKeysSoFarTimer = () => {
+            if (this.clearKeysSoFarTimer) {
+                clearTimeout(this.clearKeysSoFarTimer);
             }
-            _this.clearKeysSoFarTimer = setTimeout(function () {
-                _this.keysSoFar = '';
-            }, _this.clearKeysSoFarTimeout);
+            this.clearKeysSoFarTimer = setTimeout(() => {
+                this.keysSoFar = '';
+            }, this.clearKeysSoFarTimeout);
         };
-        _this.handleClick = function (event) {
-            var menuVisibility = _this.state.menuVisibility;
+        this.handleClick = (event) => {
+            const { menuVisibility } = this.state;
             switch (menuVisibility) {
                 // If we click the button while the menu is in the process of closing,
                 // we want to toggle the menu back on. However, we also need to focus
@@ -330,48 +290,48 @@ var SelectContainer = /** @class */ (function (_super) {
                 // callback (because the menu already exists).
                 case 'close':
                 case 'closing':
-                    if (_this.menuRef.current) {
-                        _this.menuRef.current.focus();
+                    if (this.menuRef.current) {
+                        this.menuRef.current.focus();
                     }
-                    _this.toggleMenu(true);
+                    this.toggleMenu(true);
                     break;
                 case 'closed':
-                    _this.toggleMenu(true);
+                    this.toggleMenu(true);
                     break;
                 // Otherwise, the menu is opened or in the process of opening; toggle
                 // the menu off.
                 default:
-                    _this.toggleMenu(false);
+                    this.toggleMenu(false);
                     break;
             }
         };
-        _this.handleOptionSelection = function (index) {
+        this.handleOptionSelection = (index) => {
             // Abort if a disabled option was clicked (we ignore these clicks)
-            if (_this.normalizedOptions[index].disabled) {
+            if (this.normalizedOptions[index].disabled) {
                 return;
             }
             // Toggle menu off, shift focus back to the button, and fire change event
-            _this.toggleMenu(false);
-            _this.focusButton();
-            _this.fireChangeEvent(_this.normalizedOptions[index].value);
+            this.toggleMenu(false);
+            this.focusButton();
+            this.fireChangeEvent(this.normalizedOptions[index].value);
         };
-        _this.handleMenuCloseOnKeyPress = function () {
+        this.handleMenuCloseOnKeyPress = () => {
             // Toggle menu off and shift focus back to the button
-            _this.handleClose();
-            _this.focusButton();
+            this.handleClose();
+            this.focusButton();
         };
-        _this.handleClose = function () {
-            _this.toggleMenu(false);
+        this.handleClose = () => {
+            this.toggleMenu(false);
         };
-        _this.handleKeyDown = function (event) {
-            var options = _this.props.options;
-            var numOptions = options.length;
-            var _a = _this.state, focusedOptionIndex = _a.focusedOptionIndex, menuVisibility = _a.menuVisibility;
-            var isShortcut = false;
+        this.handleKeyDown = (event) => {
+            const { options } = this.props;
+            const numOptions = options.length;
+            const { focusedOptionIndex, menuVisibility } = this.state;
+            let isShortcut = false;
             // Check for type-ahead first
             if (event.key.length === 1 && event.key.match(/\S/)) {
                 isShortcut = true;
-                _this.handleKeyboardTypeAhead(event.key, numOptions);
+                this.handleKeyboardTypeAhead(event.key, numOptions);
             }
             else {
                 switch (event.key) {
@@ -381,25 +341,25 @@ var SelectContainer = /** @class */ (function (_super) {
                     case 'Down': // IE/Edge specific value
                         isShortcut = true;
                         if (menuVisibility === 'closed' || menuVisibility === 'closing') {
-                            _this.toggleMenu(true);
+                            this.toggleMenu(true);
                         }
                         else {
-                            var direction_1 = event.key === 'ArrowUp' || event.key === 'Up' ? -1 : 1;
-                            var startIndex_1 = focusedOptionIndex + direction_1;
-                            _this.focusNextEnabledOption(startIndex_1, direction_1);
+                            const direction = event.key === 'ArrowUp' || event.key === 'Up' ? -1 : 1;
+                            const startIndex = focusedOptionIndex + direction;
+                            this.focusNextEnabledOption(startIndex, direction);
                         }
                         break;
                     case 'Home':
                     case 'End':
                         isShortcut = true;
-                        var direction = event.key === 'Home' ? 1 : -1;
-                        var startIndex = event.key === 'Home' ? 0 : numOptions - 1;
-                        _this.focusNextEnabledOption(startIndex, direction);
+                        const direction = event.key === 'Home' ? 1 : -1;
+                        const startIndex = event.key === 'Home' ? 0 : numOptions - 1;
+                        this.focusNextEnabledOption(startIndex, direction);
                         break;
                     case 'Tab':
                         if (menuVisibility !== 'closed') {
                             isShortcut = true;
-                            _this.handleMenuCloseOnKeyPress();
+                            this.handleMenuCloseOnKeyPress();
                         }
                         break;
                     case 'Spacebar':
@@ -407,14 +367,14 @@ var SelectContainer = /** @class */ (function (_super) {
                         isShortcut = true;
                         // If the user is in the middle of typing a string, treat
                         // space key as type-ahead rather than option selection
-                        if (_this.keysSoFar !== '') {
-                            _this.handleKeyboardTypeAhead(' ', numOptions);
+                        if (this.keysSoFar !== '') {
+                            this.handleKeyboardTypeAhead(' ', numOptions);
                         }
                         else if (menuVisibility === 'closed' || menuVisibility === 'closing') {
-                            _this.toggleMenu(true);
+                            this.toggleMenu(true);
                         }
                         else {
-                            _this.handleOptionSelection(focusedOptionIndex);
+                            this.handleOptionSelection(focusedOptionIndex);
                         }
                         break;
                     case 'Enter':
@@ -424,7 +384,7 @@ var SelectContainer = /** @class */ (function (_super) {
                             isShortcut = false;
                         }
                         else {
-                            _this.handleOptionSelection(focusedOptionIndex);
+                            this.handleOptionSelection(focusedOptionIndex);
                         }
                         break;
                     default:
@@ -445,7 +405,7 @@ var SelectContainer = /** @class */ (function (_super) {
                 event.preventDefault();
             }
         };
-        _this.setNormalizedOptions();
+        this.setNormalizedOptions();
         // We need a local ref (RefObject) to the Select component's underlying
         // button to manage focus within the component and to serve as its Popper
         // Menu's anchorElement. If the buttonRef prop (to be forwarded to the
@@ -464,14 +424,13 @@ var SelectContainer = /** @class */ (function (_super) {
         //     or call buttonRef with the underlying button element if it was a
         //     callback ref.
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        _this.forwardedButtonRef = common_1.useForkRef(props.buttonRef, _this.localButtonRef);
-        return _this;
+        this.forwardedButtonRef = common_1.useForkRef(props.buttonRef, this.localButtonRef);
     }
-    SelectContainer.prototype.componentDidMount = function () {
+    componentDidMount() {
         this.updateStateFromValue();
-    };
-    SelectContainer.prototype.componentDidUpdate = function (prevProps) {
-        var _a = this.props, options = _a.options, value = _a.value;
+    }
+    componentDidUpdate(prevProps) {
+        const { options, value } = this.props;
         if (options !== prevProps.options) {
             this.setNormalizedOptions();
             this.updateStateFromValue();
@@ -479,8 +438,8 @@ var SelectContainer = /** @class */ (function (_super) {
         if (value !== prevProps.value) {
             this.updateStateFromValue();
         }
-    };
-    SelectContainer.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
         // Clear timers
         if (this.menuAnimationTimer) {
             clearTimeout(this.menuAnimationTimer);
@@ -488,14 +447,14 @@ var SelectContainer = /** @class */ (function (_super) {
         if (this.clearKeysSoFarTimer) {
             clearTimeout(this.clearKeysSoFarTimer);
         }
-    };
-    SelectContainer.prototype.render = function () {
-        var _a = this.props, value = _a.value, 
+    }
+    render() {
+        const { value, 
         // Strip props we don't want to pass down from elemProps
-        buttonRef = _a.buttonRef, options = _a.options, onKeyDown = _a.onKeyDown, elemProps = __rest(_a, ["value", "buttonRef", "options", "onKeyDown"]);
-        var _b = this.state, focusedOptionIndex = _b.focusedOptionIndex, menuVisibility = _b.menuVisibility;
+        buttonRef, options, onKeyDown, ...elemProps } = this.props;
+        const { focusedOptionIndex, menuVisibility } = this.state;
         // Don't pass in event handlers if options weren't defined
-        var eventHandlers = this.areOptionsDefined()
+        const eventHandlers = this.areOptionsDefined()
             ? {
                 onClick: this.handleClick,
                 onKeyDown: this.handleKeyDown,
@@ -503,17 +462,16 @@ var SelectContainer = /** @class */ (function (_super) {
                 onOptionSelection: this.handleOptionSelection,
             }
             : {};
-        return (React.createElement(SelectBase_1.SelectBase, __assign({ forwardedButtonRef: this.forwardedButtonRef, localButtonRef: this.localButtonRef, focusedOptionIndex: focusedOptionIndex, inputRef: this.inputRef, menuRef: this.menuRef, menuVisibility: menuVisibility, options: this.normalizedOptions, value: value }, eventHandlers, elemProps)));
-    };
-    SelectContainer.ErrorType = common_1.ErrorType;
-    return SelectContainer;
-}(React.Component));
+        return (React.createElement(SelectBase_1.SelectBase, Object.assign({ forwardedButtonRef: this.forwardedButtonRef, localButtonRef: this.localButtonRef, focusedOptionIndex: focusedOptionIndex, inputRef: this.inputRef, menuRef: this.menuRef, menuVisibility: menuVisibility, options: this.normalizedOptions, value: value }, eventHandlers, elemProps)));
+    }
+}
+SelectContainer.ErrorType = common_1.ErrorType;
 exports.Select = common_1.createComponent('button')({
     displayName: 'Select',
-    Component: function (props, ref, Element) { return (
+    Component: (props, ref, Element) => (
     // Select is still a class component, so we render a renamed version of it
     // (SelectContainer) and pass it ref and Element
-    React.createElement(SelectContainer, __assign({ as: Element, buttonRef: ref }, props))); },
+    React.createElement(SelectContainer, Object.assign({ as: Element, buttonRef: ref }, props))),
     subComponents: {
         ErrorType: common_1.ErrorType,
     },