baseui 11.0.0 → 11.0.3

package/es/select/select-component.js

@@ -17,13 +17,12 @@ import TriangleDownIcon from '../icon/triangle-down.js';
 import SearchIconComponent from '../icon/search.js';
 import { LocaleContext } from '../locale/index.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
-import { Spinner } from '../spinner/index.js';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input.js';
 import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
 import defaultProps from './default-props.js';
 import SelectDropdown from './dropdown.js';
-import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, getLoadingIconStyles, StyledSearchIconContainer } from './styled-components.js';
+import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
 import { expandValue, normalizeOptions } from './utils/index.js';
 
 function Noop() {
@@ -437,6 +436,12 @@ class Select extends React.Component {
     _defineProperty(this, "handleInputRef", input => {
       this.input = input;
 
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(input);
+      } else if (this.props.inputRef) {
+        this.props.inputRef.current = input;
+      }
+
       if (this.props.controlRef && typeof this.props.controlRef === 'function') {
         this.props.controlRef(input);
       }
@@ -667,20 +672,25 @@ class Select extends React.Component {
 
   renderLoading() {
     if (!this.props.isLoading) return;
-    const sharedProps = this.getSharedProps();
     const {
       overrides = {}
     } = this.props;
-    const [LoadingIndicator, loadingIndicatorProps] = getOverrides(overrides.LoadingIndicator, Spinner);
+    const [LoadingIndicator, loadingIndicatorProps] = getOverrides(overrides.LoadingIndicator, StyledLoadingIndicator);
     return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({
-      size: 16,
-      overrides: {
-        Svg: {
-          style: getLoadingIconStyles
-        }
-      },
-      $silenceV11DeprecationWarning: true
-    }, sharedProps, loadingIndicatorProps));
+      role: "status"
+    }, loadingIndicatorProps), /*#__PURE__*/React.createElement("span", {
+      style: {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        padding: 0,
+        margin: '-1px',
+        overflow: 'hidden',
+        clip: 'rect(0,0,0,0)',
+        whiteSpace: 'nowrap',
+        border: 0
+      }
+    }, "Loading"));
   }
 
   renderValue(valueArray, isOpen, locale) {

package/es/select/styled-components.js

@@ -4,9 +4,10 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import { styled } from '../styles/index.js';
+import { styled, withStyle } from '../styles/index.js';
 import { TYPE, SIZE } from './constants.js';
 import { StyledList, StyledListItem } from '../menu/index.js';
+import { Spinner } from '../spinner/index.js';
 import { ellipsisText } from '../styles/util.js';
 
 function getFont(size = SIZE.default, typography) {
@@ -432,19 +433,22 @@ export const StyledClearIcon = styled('svg', props => {
   };
 });
 StyledClearIcon.displayName = "StyledClearIcon";
-export const getLoadingIconStyles = props => {
-  const {
-    $theme
-  } = props;
-  const {
-    colors
-  } = $theme;
-  return { ...getSvgStyles({
-      $theme
-    }),
-    color: colors.contentPrimary
+export const StyledLoadingIndicator = withStyle(Spinner, ({
+  $theme
+}) => {
+  return {
+    borderTopWidth: '2px',
+    borderRightWidth: '2px',
+    borderBottomWidth: '2px',
+    borderLeftWidth: '2px',
+    borderRightColor: $theme.colors.borderOpaque,
+    borderBottomColor: $theme.colors.borderOpaque,
+    borderLeftColor: $theme.colors.borderOpaque,
+    width: '16px',
+    height: '16px'
   };
-};
+});
+StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
 export const StyledSearchIconContainer = styled('div', props => {
   const {
     $disabled,

package/es/select/utils/default-filter-options.js

@@ -37,7 +37,7 @@ const filterOptions = (options, filterValue, excludeOptions, newProps) => {
     acc.add(option[props.valueKey]);
     return acc;
   }, new Set());
-  const re = new RegExp(`${props.matchPos === 'start' ? '$' : ''}${escapeRegExp(filterValue)}`, props.ignoreCase ? 'i' : ''); // $FlowFixMe
+  const re = new RegExp(`${props.matchPos === 'start' ? '^' : ''}${escapeRegExp(filterValue)}`, props.ignoreCase ? 'i' : ''); // $FlowFixMe
 
   return options.filter(option => {
     if (excludeValues.has(option[props.valueKey])) return false;

package/es/snackbar/snackbar-context.js

@@ -87,7 +87,7 @@ export default function SnackbarProvider({
     setTimeout(() => {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

package/esm/data-table/data-table.js

@@ -536,7 +536,8 @@ export function DataTable(_ref2) {
       sortIndex = _ref2.sortIndex,
       sortDirection = _ref2.sortDirection,
       _ref2$textQuery = _ref2.textQuery,
-      textQuery = _ref2$textQuery === void 0 ? '' : _ref2$textQuery;
+      textQuery = _ref2$textQuery === void 0 ? '' : _ref2$textQuery,
+      controlRef = _ref2.controlRef;
 
   var _useStyletron13 = useStyletron(),
       _useStyletron14 = _slicedToArray(_useStyletron13, 2),
@@ -735,6 +736,13 @@ export function DataTable(_ref2) {
 
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
+  React.useImperativeHandle(controlRef, function () {
+    return {
+      getRows: function getRows() {
+        return rows;
+      }
+    };
+  }, [rows]);
 
   var _React$useState19 = React.useState(0),
       _React$useState20 = _slicedToArray(_React$useState19, 2),

package/esm/data-table/stateful-data-table.js

@@ -327,7 +327,8 @@ export function StatefulDataTable(props) {
       selectedRowIds: selectedRowIds,
       sortDirection: sortDirection,
       sortIndex: sortIndex,
-      textQuery: textQuery
+      textQuery: textQuery,
+      controlRef: props.controlRef
     })));
   });
 }

package/esm/datepicker/calendar.js

@@ -315,12 +315,12 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleDateChange", function (data) {
       var _this$props$onChange = _this.props.onChange,
           onChange = _this$props$onChange === void 0 ? function (params) {} : _this$props$onChange;
-      var updatedDate = data.date; // We'll need to update the date in time values of internal state
-
-      var newTimeState = _toConsumableArray(_this.state.time); // Apply the currently selected time values (saved in state) to the updated date
-
+      var updatedDate = data.date; // Apply the currently selected time values (saved in state) to the updated date
 
       if (Array.isArray(data.date)) {
+        // We'll need to update the date in time values of internal state
+        var newTimeState = _toConsumableArray(_this.state.time);
+
         var start = data.date[0] ? _this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0]) : null;
         var end = data.date[1] ? _this.dateHelpers.applyDateToTime(newTimeState[1], data.date[1]) : null;
         newTimeState[0] = start;
@@ -330,16 +330,21 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           newTimeState[1] = end;
         } else {
           updatedDate = [start];
-        }
+        } // Update the date in time values of internal state
+
+
+        _this.setState({
+          time: newTimeState
+        });
       } else if (!Array.isArray(_this.props.value) && data.date) {
-        newTimeState[0] = _this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
-        updatedDate = newTimeState[0];
-      } // Update the date in time values of internal state
+        var _newTimeState = _this.dateHelpers.applyDateToTime(_this.state.time[0], data.date);
 
+        updatedDate = _newTimeState; // Update the date in time values of internal state
 
-      _this.setState({
-        time: newTimeState
-      });
+        _this.setState({
+          time: [_newTimeState]
+        });
+      }
 
       onChange({
         date: updatedDate

package/esm/datepicker/datepicker.js

@@ -2,6 +2,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -10,10 +14,6 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.it
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -107,7 +107,39 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "dateHelpers", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date) {
+      var onChange = _this.props.onChange;
+      var onRangeChange = _this.props.onRangeChange;
+
+      if (Array.isArray(date)) {
+        if (onChange && date.every(Boolean)) {
+          // flowlint-next-line unclear-type:off
+          onChange({
+            date: date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date: _toConsumableArray(date)
+          });
+        }
+      } else {
+        if (onChange) {
+          onChange({
+            date: date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date: date
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onCalendarSelect", function (data) {
       var isOpen = false;
       var isPseudoFocused = false;
       var calendarFocused = false;
@@ -184,9 +216,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         inputValue: _this.formatDisplayValue(nextDate)
       }));
 
-      _this.props.onChange && _this.props.onChange({
-        date: nextDate
-      });
+      _this.handleChange(nextDate);
     });
 
     _defineProperty(_assertThisInitialized(_this), "formatDisplayValue", function (date) {
@@ -290,16 +320,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       var formatString = _this.normalizeDashes(_this.props.formatString);
 
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
-        if (_this.props.onChange) {
-          if (_this.props.range) {
-            _this.props.onChange({
-              date: []
-            });
-          } else {
-            _this.props.onChange({
-              date: null
-            });
-          }
+        if (_this.props.range) {
+          _this.handleChange([]);
+        } else {
+          _this.handleChange(null);
         }
       }
 
@@ -330,19 +354,13 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           endDate = parseDateString(right);
         }
 
-        var onChange = _this.props.onChange;
-
-        if (onChange) {
-          var datesValid = _this.dateHelpers.isValid(startDate) && _this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
+        var datesValid = _this.dateHelpers.isValid(startDate) && _this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
 
 
-          var rangeValid = _this.dateHelpers.isAfter(endDate, startDate) || _this.dateHelpers.isEqual(startDate, endDate);
+        var rangeValid = _this.dateHelpers.isAfter(endDate, startDate) || _this.dateHelpers.isEqual(startDate, endDate);
 
-          if (datesValid && rangeValid) {
-            onChange({
-              date: [startDate, endDate]
-            });
-          }
+        if (datesValid && rangeValid) {
+          _this.handleChange([startDate, endDate]);
         }
       } else {
         var dateString = _this.normalizeDashes(inputValue);
@@ -360,11 +378,10 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
         var _this$props3 = _this.props,
             displayValueAtRangeIndex = _this$props3.displayValueAtRangeIndex,
-            _onChange = _this$props3.onChange,
             range = _this$props3.range,
             value = _this$props3.value;
 
-        if (date && _this.dateHelpers.isValid(date) && _onChange) {
+        if (date && _this.dateHelpers.isValid(date)) {
           if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
             var _value = _slicedToArray(value, 2),
                 _left = _value[0],
@@ -374,22 +391,16 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
               _left = date;
 
               if (!_right) {
-                _onChange({
-                  date: [_left]
-                });
+                _this.handleChange([_left]);
               } else {
                 if (_this.dateHelpers.isAfter(_right, _left) || _this.dateHelpers.isEqual(_left, _right)) {
-                  _onChange({
-                    date: [_left, _right]
-                  });
+                  _this.handleChange([_left, _right]);
                 } else {
                   // Is resetting back to previous value appropriate? Invalid range is not
                   // communicated to the user, but if it was not reset the text value would
                   // show one value and date value another. This seems a bit better but clearly
                   // has a downside.
-                  _onChange({
-                    date: _toConsumableArray(value)
-                  });
+                  _this.handleChange(_toConsumableArray(value));
                 }
               }
             } else if (displayValueAtRangeIndex === 1) {
@@ -397,26 +408,18 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 
               if (!_left) {
                 // If start value is not defined, set start/end to the same day.
-                _onChange({
-                  date: [_right, _right]
-                });
+                _this.handleChange([_right, _right]);
               } else {
                 if (_this.dateHelpers.isAfter(_right, _left) || _this.dateHelpers.isEqual(_left, _right)) {
-                  _onChange({
-                    date: [_left, _right]
-                  });
+                  _this.handleChange([_left, _right]);
                 } else {
                   // See comment above about resetting dates on invalid range
-                  _onChange({
-                    date: _toConsumableArray(value)
-                  });
+                  _this.handleChange(_toConsumableArray(value));
                 }
               }
             }
           } else {
-            _onChange({
-              date: date
-            });
+            _this.handleChange(date);
           }
         }
       }
@@ -533,11 +536,6 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           endDate = _split2$2 === void 0 ? '' : _split2$2;
 
       var value = inputRole === INPUT_ROLE.startDate ? startDate : inputRole === INPUT_ROLE.endDate ? endDate : this.state.inputValue;
-
-      var onChange = function onChange(event) {
-        return _this3.handleInputChange(event, inputRole);
-      };
-
       return /*#__PURE__*/React.createElement(InputComponent, _extends({
         "aria-disabled": this.props.disabled,
         "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
@@ -554,7 +552,9 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         },
         onBlur: this.handleInputBlur,
         onKeyDown: this.handleKeyDown,
-        onChange: onChange,
+        onChange: function onChange(event) {
+          return _this3.handleInputChange(event, inputRole);
+        },
         placeholder: placeholder,
         mask: this.getMask(),
         required: this.props.required,
@@ -614,7 +614,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
             trapTabbing: true,
             value: _this4.props.value
           }, _this4.props, {
-            onChange: _this4.onChange,
+            onChange: _this4.onCalendarSelect,
             selectedInput: _this4.state.selectedInput,
             hasLockedBehavior: _this4.hasLockedBehavior()
           }))

package/esm/datepicker/stateful-calendar.js

@@ -1,5 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -47,7 +49,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(StatefulContainer, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(Calendar, extendedProps);
+        return /*#__PURE__*/React.createElement(Calendar, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/esm/datepicker/stateful-container.js

@@ -58,8 +58,29 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         value: date
       });
 
-      if (typeof _this.props.onChange === 'function') {
-        _this.props.onChange(data);
+      var onChange = _this.props.onChange;
+
+      if (onChange) {
+        if (Array.isArray(date)) {
+          if (date.every(Boolean)) {
+            // flowlint-next-line unclear-type:off
+            onChange({
+              date: date
+            });
+          }
+        } else {
+          onChange({
+            date: date
+          });
+        }
+      }
+
+      var onRangeChange = _this.props.onRangeChange;
+
+      if (onRangeChange) {
+        onRangeChange({
+          date: date
+        });
       }
     });
 

package/esm/datepicker/stateful-datepicker.js

@@ -1,5 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -47,7 +49,10 @@ var StatefulComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(StatefulContainer, this.props, function (extendedProps) {
-        return /*#__PURE__*/React.createElement(Datepicker, extendedProps);
+        return /*#__PURE__*/React.createElement(Datepicker, _extends({}, extendedProps, {
+          // flowlint-next-line unclear-type:off
+          onChange: extendedProps.onChange
+        }));
       });
     }
   }]);

package/esm/form-control/styled-components.js

@@ -17,7 +17,6 @@ export var Label = styled('label', function (props) {
       colors = _props$$theme.colors,
       typography = _props$$theme.typography;
   return _objectSpread(_objectSpread({}, typography.font250), {}, {
-    fontWeight: 500,
     width: '100%',
     color: $disabled ? colors.contentSecondary : colors.contentPrimary,
     display: 'block',

package/esm/list/list-item.js

@@ -69,7 +69,11 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: ref,
-    $shape: props.shape || SHAPE.DEFAULT
+    $shape: props.shape || SHAPE.DEFAULT,
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
+    id: props.id,
+    role: props.role
   }, rootProps), Artwork && /*#__PURE__*/React.createElement(ArtworkContainer, _extends({
     $artworkSize: artworkSize,
     $sublist: Boolean(props.sublist)

package/esm/list/menu-adapter.js

@@ -11,9 +11,13 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(ListItem, {
     ref: ref,
     sublist: props.sublist || props.$size === 'compact',
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
+    id: props.id,
+    role: props.role,
     overrides: mergeOverrides({
       Root: {
         props: {

package/esm/select/select-component.js

@@ -59,13 +59,12 @@ import TriangleDownIcon from '../icon/triangle-down.js';
 import SearchIconComponent from '../icon/search.js';
 import { LocaleContext } from '../locale/index.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
-import { Spinner } from '../spinner/index.js';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input.js';
 import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
 import defaultProps from './default-props.js';
 import SelectDropdown from './dropdown.js';
-import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, getLoadingIconStyles, StyledSearchIconContainer } from './styled-components.js';
+import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
 import { expandValue, normalizeOptions } from './utils/index.js';
 
 function Noop() {
@@ -512,6 +511,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
       _this.input = input;
 
+      if (typeof _this.props.inputRef === 'function') {
+        _this.props.inputRef(input);
+      } else if (_this.props.inputRef) {
+        _this.props.inputRef.current = input;
+      }
+
       if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
         _this.props.controlRef(input);
       }
@@ -776,24 +781,29 @@ var Select = /*#__PURE__*/function (_React$Component) {
     key: "renderLoading",
     value: function renderLoading() {
       if (!this.props.isLoading) return;
-      var sharedProps = this.getSharedProps();
       var _this$props$overrides = this.props.overrides,
           overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
 
-      var _getOverrides = getOverrides(overrides.LoadingIndicator, Spinner),
+      var _getOverrides = getOverrides(overrides.LoadingIndicator, StyledLoadingIndicator),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
           LoadingIndicator = _getOverrides2[0],
           loadingIndicatorProps = _getOverrides2[1];
 
       return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({
-        size: 16,
-        overrides: {
-          Svg: {
-            style: getLoadingIconStyles
-          }
-        },
-        $silenceV11DeprecationWarning: true
-      }, sharedProps, loadingIndicatorProps));
+        role: "status"
+      }, loadingIndicatorProps), /*#__PURE__*/React.createElement("span", {
+        style: {
+          position: 'absolute',
+          width: '1px',
+          height: '1px',
+          padding: 0,
+          margin: '-1px',
+          overflow: 'hidden',
+          clip: 'rect(0,0,0,0)',
+          whiteSpace: 'nowrap',
+          border: 0
+        }
+      }, "Loading"));
     }
   }, {
     key: "renderValue",

package/esm/select/styled-components.js

@@ -10,9 +10,10 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import { styled } from '../styles/index.js';
+import { styled, withStyle } from '../styles/index.js';
 import { TYPE, SIZE } from './constants.js';
 import { StyledList, StyledListItem } from '../menu/index.js';
+import { Spinner } from '../spinner/index.js';
 import { ellipsisText } from '../styles/util.js';
 
 function getFont() {
@@ -371,15 +372,21 @@ export var StyledClearIcon = styled('svg', function (props) {
   });
 });
 StyledClearIcon.displayName = "StyledClearIcon";
-export var getLoadingIconStyles = function getLoadingIconStyles(props) {
-  var $theme = props.$theme;
-  var colors = $theme.colors;
-  return _objectSpread(_objectSpread({}, getSvgStyles({
-    $theme: $theme
-  })), {}, {
-    color: colors.contentPrimary
-  });
-};
+export var StyledLoadingIndicator = withStyle(Spinner, function (_ref5) {
+  var $theme = _ref5.$theme;
+  return {
+    borderTopWidth: '2px',
+    borderRightWidth: '2px',
+    borderBottomWidth: '2px',
+    borderLeftWidth: '2px',
+    borderRightColor: $theme.colors.borderOpaque,
+    borderBottomColor: $theme.colors.borderOpaque,
+    borderLeftColor: $theme.colors.borderOpaque,
+    width: '16px',
+    height: '16px'
+  };
+});
+StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
 export var StyledSearchIconContainer = styled('div', function (props) {
   var _objectSpread4;