baseui 10.12.1 → 11.0.2

package/radio/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface STATE_TYPE {
   change: 'CHANGE';
@@ -15,7 +15,7 @@ export type StateReducer = (
   stateType: string,
   nextState: State,
   currentState: State,
-  event: React.SyntheticEvent<HTMLInputElement>,
+  event: React.SyntheticEvent<HTMLInputElement>
 ) => State;
 
 export interface State {
@@ -31,10 +31,7 @@ export interface StatefulContainerProps {
   autoFocus?: boolean;
 }
 
-export class StatefulContainer extends React.Component<
-  StatefulContainerProps,
-  State
-> {
+export class StatefulContainer extends React.Component<StatefulContainerProps, State> {
   onChange(e: React.ChangeEventHandler<HTMLInputElement>): void;
   stateReducer(type: string, e: React.SyntheticEvent<HTMLInputElement>): void;
 }
@@ -61,7 +58,6 @@ export interface RadioGroupProps {
   value?: string;
   disabled?: boolean;
   required?: boolean;
-  isError?: boolean;
   error?: boolean;
   autoFocus?: boolean;
   align?: 'horizontal' | 'vertical';
@@ -97,7 +93,6 @@ export interface RadioProps {
   description?: string;
   disabled?: boolean;
   inputRef?: React.Ref<HTMLInputElement>;
-  isError?: boolean;
   error?: boolean;
   isFocused?: boolean;
   isFocusVisible?: boolean;

package/radio/radio.js

@@ -129,10 +129,6 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       if (this.props.autoFocus && (_this$props$inputRef = this.props.inputRef) !== null && _this$props$inputRef !== void 0 && _this$props$inputRef.current) {
         this.props.inputRef.current.focus();
       }
-
-      if (process.env.NODE_ENV !== "production" && this.props.isError) {
-        console.warn('baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.');
-      }
     }
   }, {
     key: "render",
@@ -176,7 +172,6 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         $disabled: this.props.disabled,
         $hasDescription: !!this.props.description,
         $isActive: this.state.isActive,
-        $isError: this.props.isError,
         $error: this.props.error,
         $isFocused: this.props.isFocused,
         $isFocusVisible: this.props.isFocused && this.props.isFocusVisible,
@@ -201,7 +196,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         onMouseDown: this.onMouseDown,
         onMouseUp: this.onMouseUp
       }, sharedProps, rootProps), isLabelTopLeft(this.props.labelPlacement) && label, /*#__PURE__*/React.createElement(RadioMarkOuter, _extends({}, sharedProps, radioMarkOuterProps), /*#__PURE__*/React.createElement(RadioMarkInner, _extends({}, sharedProps, radioMarkInnerProps))), /*#__PURE__*/React.createElement(Input, _extends({
-        "aria-invalid": this.props.error || this.props.isError || null,
+        "aria-invalid": this.props.error || null,
         checked: this.props.checked,
         disabled: this.props.disabled,
         name: this.props.name,
@@ -231,7 +226,6 @@ _defineProperty(Radio, "defaultProps", {
   autoFocus: false,
   inputRef: /*#__PURE__*/React.createRef(),
   align: 'vertical',
-  isError: false,
   error: false,
   onChange: function onChange() {},
   onMouseEnter: function onMouseEnter() {},

package/radio/radio.js.flow

@@ -39,7 +39,6 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
     autoFocus: false,
     inputRef: React.createRef<HTMLInputElement>(),
     align: 'vertical',
-    isError: false,
     error: false,
     onChange: () => {},
     onMouseEnter: () => {},
@@ -59,11 +58,6 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
     if (this.props.autoFocus && this.props.inputRef?.current) {
       this.props.inputRef.current.focus();
     }
-    if (__DEV__ && this.props.isError) {
-      console.warn(
-        'baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.'
-      );
-    }
   }
 
   onMouseEnter = (e: SyntheticInputEvent<HTMLInputElement>) => {
@@ -107,7 +101,6 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
       $disabled: this.props.disabled,
       $hasDescription: !!this.props.description,
       $isActive: this.state.isActive,
-      $isError: this.props.isError,
       $error: this.props.error,
       $isFocused: this.props.isFocused,
       $isFocusVisible: this.props.isFocused && this.props.isFocusVisible,
@@ -145,7 +138,7 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
             <RadioMarkInner {...sharedProps} {...radioMarkInnerProps} />
           </RadioMarkOuter>
           <Input
-            aria-invalid={this.props.error || this.props.isError || null}
+            aria-invalid={this.props.error || null}
             checked={this.props.checked}
             disabled={this.props.disabled}
             name={this.props.name}

package/radio/radiogroup.js

@@ -21,10 +21,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return 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 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -112,13 +108,6 @@ var StatelessRadioGroup = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(StatelessRadioGroup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (process.env.NODE_ENV !== "production" && this.props.isError) {
-        console.warn('baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.');
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -131,27 +120,17 @@ var StatelessRadioGroup = /*#__PURE__*/function (_React$Component) {
           RadioGroupRoot = _getOverrides2[0],
           radioGroupRootProps = _getOverrides2[1];
 
-      if (process.env.NODE_ENV !== "production") {
-        var overrideKeys = Object.keys(overrides); // TODO(v11)
-
-        if (Boolean(overrideKeys.length) && !overrideKeys.includes('RadioGroupRoot')) {
-          // eslint-disable-next-line no-console
-          console.warn("All overrides beside 'RadioGroupRoot' will be deprecated in the next major version update.\n          Pass other overrides to the 'Radio' children instead.\n        ");
-        }
-      }
-
       return /*#__PURE__*/React.createElement(RadioGroupRoot, _extends({
         id: this.props.id,
         role: "radiogroup",
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
-        "aria-invalid": this.props.error || this.props.isError || null,
+        "aria-invalid": this.props.error || null,
         "aria-label": this.props['aria-label'],
         "aria-labelledby": this.props['aria-labelledby'],
         $align: this.props.align,
         $disabled: this.props.disabled,
-        $isError: this.props.error || this.props.isError,
-        $error: this.props.error || this.props.isError,
+        $error: this.props.error,
         $required: this.props.required
       }, radioGroupRootProps), React.Children.map(this.props.children, function (child, index) {
         if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -164,7 +143,6 @@ var StatelessRadioGroup = /*#__PURE__*/function (_React$Component) {
           autoFocus: _this2.props.autoFocus,
           checked: checked,
           disabled: _this2.props.disabled || child.props.disabled,
-          isError: _this2.props.isError,
           error: _this2.props.error,
           isFocused: _this2.state.focusedRadioIndex === index,
           isFocusVisible: _this2.state.isFocusVisible,
@@ -179,9 +157,7 @@ var StatelessRadioGroup = /*#__PURE__*/function (_React$Component) {
           },
           onChange: _this2.props.onChange,
           onMouseEnter: _this2.props.onMouseEnter,
-          onMouseLeave: _this2.props.onMouseLeave,
-          // will need to remove overrides pass-through on next major version
-          overrides: _objectSpread(_objectSpread({}, _this2.props.overrides), child.props.overrides)
+          onMouseLeave: _this2.props.onMouseLeave
         });
       }));
     }
@@ -197,7 +173,6 @@ _defineProperty(StatelessRadioGroup, "defaultProps", {
   autoFocus: false,
   labelPlacement: 'right',
   align: 'vertical',
-  isError: false,
   error: false,
   required: false,
   onChange: function onChange() {},

package/radio/radiogroup.js.flow

@@ -21,7 +21,6 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
     autoFocus: false,
     labelPlacement: 'right',
     align: 'vertical',
-    isError: false,
     error: false,
     required: false,
     onChange: () => {},
@@ -34,14 +33,6 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
 
   state = { isFocusVisible: false, focusedRadioIndex: -1 };
 
-  componentDidMount() {
-    if (__DEV__ && this.props.isError) {
-      console.warn(
-        'baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.'
-      );
-    }
-  }
-
   handleFocus = (event: SyntheticInputEvent<HTMLInputElement>, index: number) => {
     if (isFocusVisible(event)) {
       this.setState({ isFocusVisible: true });
@@ -65,30 +56,18 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
       StyledRadioGroupRoot
     );
 
-    if (__DEV__) {
-      const overrideKeys = Object.keys(overrides);
-      // TODO(v11)
-      if (Boolean(overrideKeys.length) && !overrideKeys.includes('RadioGroupRoot')) {
-        // eslint-disable-next-line no-console
-        console.warn(`All overrides beside 'RadioGroupRoot' will be deprecated in the next major version update.
-          Pass other overrides to the 'Radio' children instead.
-        `);
-      }
-    }
-
     return (
       <RadioGroupRoot
         id={this.props.id}
         role="radiogroup"
         aria-describedby={this.props['aria-describedby']}
         aria-errormessage={this.props['aria-errormessage']}
-        aria-invalid={this.props.error || this.props.isError || null}
+        aria-invalid={this.props.error || null}
         aria-label={this.props['aria-label']}
         aria-labelledby={this.props['aria-labelledby']}
         $align={this.props.align}
         $disabled={this.props.disabled}
-        $isError={this.props.error || this.props.isError}
-        $error={this.props.error || this.props.isError}
+        $error={this.props.error}
         $required={this.props.required}
         {...radioGroupRootProps}
       >
@@ -102,7 +81,6 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
             autoFocus: this.props.autoFocus,
             checked,
             disabled: this.props.disabled || child.props.disabled,
-            isError: this.props.isError,
             error: this.props.error,
             isFocused: this.state.focusedRadioIndex === index,
             isFocusVisible: this.state.isFocusVisible,
@@ -114,8 +92,6 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
             onChange: this.props.onChange,
             onMouseEnter: this.props.onMouseEnter,
             onMouseLeave: this.props.onMouseLeave,
-            // will need to remove overrides pass-through on next major version
-            overrides: { ...this.props.overrides, ...child.props.overrides },
           });
         })}
       </RadioGroupRoot>

package/radio/styled-components.js

@@ -28,16 +28,15 @@ function getOuterColor(props) {
       $disabled = props.$disabled,
       $checked = props.$checked,
       $isFocusVisible = props.$isFocusVisible,
-      $error = props.$error,
-      $isError = props.$isError;
+      $error = props.$error;
   if ($disabled) return colors.tickFillDisabled;
 
   if (!$checked) {
     if ($isFocusVisible) return colors.borderSelected;
-    if ($error || $isError) return colors.tickBorderError;
+    if ($error) return colors.tickBorderError;
     return colors.tickBorder;
   } else {
-    if ($error || $isError) {
+    if ($error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillErrorSelected;
@@ -73,7 +72,7 @@ function getInnerColor(props) {
   }
 
   if (!props.$checked) {
-    if (props.$error || props.$isError) {
+    if (props.$error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillError;

package/radio/styled-components.js.flow

@@ -26,15 +26,14 @@ function getOuterColor(props) {
     $checked,
     $isFocusVisible,
     $error,
-    $isError,
   } = props;
   if ($disabled) return colors.tickFillDisabled;
   if (!$checked) {
     if ($isFocusVisible) return colors.borderSelected;
-    if ($error || $isError) return colors.tickBorderError;
+    if ($error) return colors.tickBorderError;
     return colors.tickBorder;
   } else {
-    if ($error || $isError) {
+    if ($error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillErrorSelected;
@@ -66,7 +65,7 @@ function getInnerColor(props) {
   }
 
   if (!props.$checked) {
-    if (props.$error || props.$isError) {
+    if (props.$error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillError;

package/radio/types.js.flow

@@ -28,15 +28,9 @@ export type RadioGroupOverridesT = {
   RadioGroupRoot?: OverrideT,
 };
 
-export type OverridesT = {
-  ...$Exact<RadioOverridesT>,
-  ...$Exact<RadioGroupOverridesT>,
-};
-
 export type DefaultPropsT = {
   value: string,
   disabled: boolean,
-  isError: boolean,
   error: boolean,
   autoFocus: boolean,
   labelPlacement: LabelPlacementT,
@@ -59,7 +53,7 @@ export type PropsT = {
    */
   'aria-labelledby'?: string,
   // This prop will be deprecated in the next major update. Pass overrides to the 'Radio' component instead.
-  overrides?: OverridesT,
+  overrides?: RadioGroupOverridesT,
   /** As `children` in React native approach represents radio buttons inside of Radio Group. Can use `Radio` from this package. */
   children?: Array<React.Node>,
   /** The value of radio button, which is preselected. */
@@ -70,8 +64,6 @@ export type PropsT = {
   required?: boolean,
   /** Sets radio group into error state. */
   error?: boolean,
-  /** You should use the error prop instead. */
-  isError?: boolean,
   /** Set to be focused (active) on selected\checked radio. */
   autoFocus?: boolean,
   /** How to position radio buttons in the group. */
@@ -117,8 +109,6 @@ export type RadioPropsT = {
   inputRef?: ReactRefT<HTMLInputElement>,
   /** Renders checkbox in errored state. */
   error?: boolean,
-  /** You should use the error prop instead. */
-  isError?: boolean,
   /** Is radio focused / active? */
   isFocused?: boolean,
   /** Is parent RadioGroup focused by keyboard? */
@@ -141,7 +131,7 @@ export type RadioPropsT = {
   onMouseDown?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
   /** Handler for mouseup events on trigger element. */
   onMouseUp?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  overrides?: OverridesT,
+  overrides?: RadioOverridesT,
   /** Marks the checkbox as required. */
   required?: boolean,
   /** Passed to the input element value attribute */
@@ -175,7 +165,7 @@ export type DefaultStatefulPropsT = {
 };
 
 export type StatefulContainerPropsT = {
-  overrides?: OverridesT,
+  overrides?: RadioGroupOverridesT,
   /** Should return `RadioGroup` instance with standard or customized inner elements. */
   children?: (props: PropsT) => React.Node,
   /** Initial state populated into the component */
@@ -189,7 +179,7 @@ export type StatefulContainerPropsT = {
 };
 
 export type StatefulRadioGroupPropsT = {
-  overrides?: OverridesT,
+  overrides?: RadioGroupOverridesT,
   /** A list of `Radio` components. */
   children?: Array<React.Node>,
   /** Initial state populated into the component */
@@ -206,7 +196,6 @@ export type StylePropsT = {
   $disabled: boolean,
   $hasDescription: boolean,
   $isActive: boolean,
-  $isError: boolean,
   $error: boolean,
   $isFocused: boolean,
   $isFocusVisible: boolean,

package/rating/styled-components.js

@@ -48,11 +48,11 @@ var StyledStar = (0, _index.styled)('li', function (_ref2) {
   var prePartialStarFill;
 
   if ($isActive) {
-    starStroke = starFill = $theme.colors.rating400;
+    starStroke = starFill = $theme.colors.warning400;
   }
 
   if ($isPartialActive && !$isActive) {
-    prePartialStarStroke = prePartialStarFill = $theme.colors.rating400;
+    prePartialStarStroke = prePartialStarFill = $theme.colors.warning400;
   }
 
   var styles = {
@@ -110,7 +110,7 @@ var StyledEmoticon = (0, _index.styled)('li', function (_ref3) {
   var emoticonFill = $theme.colors.ratingInactiveFill;
 
   if ($isActive) {
-    emoticonFill = $theme.colors.rating400;
+    emoticonFill = $theme.colors.warning400;
   }
 
   var ratingIcons = [(0, _svgIcons.angryRatingSVG)(emoticonFill, $size), (0, _svgIcons.sadRatingSVG)(emoticonFill, $size), (0, _svgIcons.neutralRatingSVG)(emoticonFill, $size), (0, _svgIcons.happyRatingSVG)(emoticonFill, $size), (0, _svgIcons.veryHappyRatingSVG)(emoticonFill, $size)];

package/rating/styled-components.js.flow

@@ -44,10 +44,10 @@ export const StyledStar = styled<StyledRatingItemPropsT>(
     let prePartialStarFill;
 
     if ($isActive) {
-      starStroke = starFill = $theme.colors.rating400;
+      starStroke = starFill = $theme.colors.warning400;
     }
     if ($isPartialActive && !$isActive) {
-      prePartialStarStroke = prePartialStarFill = $theme.colors.rating400;
+      prePartialStarStroke = prePartialStarFill = $theme.colors.warning400;
     }
 
     const styles = {
@@ -106,7 +106,7 @@ export const StyledEmoticon = styled<StyledRatingItemPropsT>(
     let emoticonFill = $theme.colors.ratingInactiveFill;
 
     if ($isActive) {
-      emoticonFill = $theme.colors.rating400;
+      emoticonFill = $theme.colors.warning400;
     }
 
     const ratingIcons = [

package/select/index.d.ts

@@ -319,8 +319,6 @@ export const StyledIconsContainer: StyletronComponent<any>;
 export const StyledSelectArrow: StyletronComponent<any>;
 export const StyledClearIcon: StyletronComponent<any>;
 export const StyledSearchIconContainer: StyletronComponent<any>;
-// TODO(v11): remove StyledSearchIcon
-export const StyledSearchIcon: StyletronComponent<any>;
 export const StyledDropdownContainer: StyletronComponent<any>;
 export const StyledDropdown: StyletronComponent<any>;
 export const StyledDropdownListItem: StyletronComponent<any>;

package/select/index.js

@@ -123,12 +123,6 @@ Object.defineProperty(exports, "StyledClearIcon", {
     return _styledComponents.StyledClearIcon;
   }
 });
-Object.defineProperty(exports, "StyledSearchIcon", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.StyledSearchIconContainer;
-  }
-});
 Object.defineProperty(exports, "StyledSearchIconContainer", {
   enumerable: true,
   get: function get() {

package/select/index.js.flow

@@ -27,8 +27,6 @@ export {
   StyledIconsContainer,
   StyledSelectArrow,
   StyledClearIcon,
-  // TODO(v11): remove StyledSearchIconContainer as StyledSearchIcon
-  StyledSearchIconContainer as StyledSearchIcon,
   StyledSearchIconContainer,
   StyledDropdownContainer,
   StyledDropdown,

package/select/select-component.js

@@ -22,8 +22,6 @@ var _index = require("../locale/index.js");
 
 var _index2 = require("../popover/index.js");
 
-var _index3 = require("../spinner/index.js");
-
 var _reactUid = require("react-uid");
 
 var _autosizeInput = _interopRequireDefault(require("./autosize-input.js"));
@@ -36,7 +34,7 @@ var _dropdown = _interopRequireDefault(require("./dropdown.js"));
 
 var _styledComponents = require("./styled-components.js");
 
-var _index4 = require("./utils/index.js");
+var _index3 = require("./utils/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -660,7 +658,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       return !_this.state.inputValue;
     });
 
-    _this.options = (0, _index4.normalizeOptions)(props.options);
+    _this.options = (0, _index3.normalizeOptions)(props.options);
     return _this;
   }
 
@@ -778,7 +776,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }
 
       return value.map(function (value) {
-        return (0, _index4.expandValue)(value, _this2.props);
+        return (0, _index3.expandValue)(value, _this2.props);
       });
     }
   }, {
@@ -796,24 +794,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 = (0, _overrides.getOverrides)(overrides.LoadingIndicator, _index3.Spinner),
+      var _getOverrides = (0, _overrides.getOverrides)(overrides.LoadingIndicator, _styledComponents.StyledLoadingIndicator),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
           LoadingIndicator = _getOverrides2[0],
           loadingIndicatorProps = _getOverrides2[1];
 
       return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({
-        size: 16,
-        overrides: {
-          Svg: {
-            style: _styledComponents.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",
@@ -1022,14 +1025,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
           searchIconProps = _getOverrides12[1];
 
       var sharedProps = this.getSharedProps();
-      return (
-        /*#__PURE__*/
-        // TODO(v11): remove searchIconProps from SearchIconContainer
-        React.createElement(SearchIconContainer, _extends({}, sharedProps, searchIconProps, searchIconContainerProps), /*#__PURE__*/React.createElement(SearchIcon, _extends({
-          size: 16,
-          title: 'search'
-        }, searchIconProps)))
-      );
+      return /*#__PURE__*/React.createElement(SearchIconContainer, _extends({}, sharedProps, searchIconContainerProps), /*#__PURE__*/React.createElement(SearchIcon, _extends({
+        size: 16,
+        title: 'search'
+      }, sharedProps, searchIconProps)));
     }
   }, {
     key: "filterOptions",
@@ -1106,7 +1105,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this6 = this;
 
-      this.options = (0, _index4.normalizeOptions)(this.props.options);
+      this.options = (0, _index3.normalizeOptions)(this.props.options);
       var _this$props2 = this.props,
           _this$props2$override = _this$props2.overrides,
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override,

package/select/select-component.js.flow

@@ -15,7 +15,6 @@ import SearchIconComponent from '../icon/search.js';
 import { LocaleContext } from '../locale/index.js';
 import type { LocaleT } from '../locale/types.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';
@@ -31,8 +30,8 @@ import {
   StyledIconsContainer,
   StyledSelectArrow,
   StyledClearIcon,
-  getLoadingIconStyles,
   StyledSearchIconContainer,
+  StyledLoadingIndicator,
 } from './styled-components.js';
 import type { PropsT, SelectStateT, ValueT, OptionT, ChangeActionT, ReactRefT } from './types.js';
 import { expandValue, normalizeOptions } from './utils/index.js';
@@ -616,20 +615,33 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
   renderLoading() {
     if (!this.props.isLoading) return;
-    const sharedProps = this.getSharedProps();
     const { overrides = {} } = this.props;
     const [LoadingIndicator, loadingIndicatorProps] = getOverrides(
       overrides.LoadingIndicator,
-      Spinner
+      StyledLoadingIndicator
     );
+
     return (
-      <LoadingIndicator
-        size={16}
-        overrides={{ Svg: { style: getLoadingIconStyles } }}
-        $silenceV11DeprecationWarning
-        {...sharedProps}
-        {...loadingIndicatorProps}
-      />
+      <LoadingIndicator role="status" {...loadingIndicatorProps}>
+        {/* Offscreen content could be defined as styled-component and
+          overridable, but I can't think of a good reason for doing so.
+          LoadingIndicator children can be overriden if required. */}
+        <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
+        </span>
+      </LoadingIndicator>
     );
   }
 
@@ -840,9 +852,8 @@ class Select extends React.Component<PropsT, SelectStateT> {
     const sharedProps = this.getSharedProps();
 
     return (
-      // TODO(v11): remove searchIconProps from SearchIconContainer
-      <SearchIconContainer {...sharedProps} {...searchIconProps} {...searchIconContainerProps}>
-        <SearchIcon size={16} title={'search'} {...searchIconProps} />
+      <SearchIconContainer {...sharedProps} {...searchIconContainerProps}>
+        <SearchIcon size={16} title={'search'} {...sharedProps} {...searchIconProps} />
       </SearchIconContainer>
     );
   }