baseui 11.0.0 → 11.0.1

package/data-table/data-table.js

@@ -555,7 +555,8 @@ 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 = (0, _index2.useStyletron)(),
       _useStyletron14 = _slicedToArray(_useStyletron13, 2),
@@ -754,6 +755,13 @@ 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/data-table/data-table.js.flow

@@ -658,6 +658,7 @@ export function DataTable({
   sortIndex,
   sortDirection,
   textQuery = '',
+  controlRef,
 }: DataTablePropsT) {
   const [, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
@@ -809,6 +810,8 @@ export function DataTable({
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
 
+  React.useImperativeHandle(controlRef, () => ({ getRows: () => rows }), [rows]);
+
   const [browserScrollbarWidth, setBrowserScrollbarWidth] = React.useState(0);
   const normalizedWidths = React.useMemo(() => {
     const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));

package/data-table/index.d.ts

@@ -34,10 +34,7 @@ export interface SORT_DIRECTIONS {
 }
 export const SORT_DIRECTIONS: SORT_DIRECTIONS;
 
-export type SortDirectionsT =
-  | SORT_DIRECTIONS['ASC']
-  | SORT_DIRECTIONS['DESC']
-  | null;
+export type SortDirectionsT = SORT_DIRECTIONS['ASC'] | SORT_DIRECTIONS['DESC'] | null;
 export type ColumnT = any;
 export type RowT = {
   id: number | string;
@@ -54,12 +51,13 @@ export type BatchActionT = {
   renderIcon?: any;
 };
 
+export interface ImperativeMethods {
+  getRows: () => RowT[];
+}
+
 export type RowActionT = {
   label: string;
-  onClick: (params: {
-    event: React.MouseEvent<HTMLButtonElement>;
-    row: RowT;
-  }) => any;
+  onClick: (params: { event: React.MouseEvent<HTMLButtonElement>; row: RowT }) => any;
   renderIcon: any;
 };
 
@@ -69,4 +67,5 @@ export type Props = {
   columns: ColumnT[];
   onSelectionChange?: (rows: RowT[]) => any;
   rows: RowT[];
+  controlRef?: React.Ref<ImperativeMethods>;
 };

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

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

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

@@ -306,6 +306,7 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
               sortDirection={sortDirection}
               sortIndex={sortIndex}
               textQuery={textQuery}
+              controlRef={props.controlRef}
             />
           </div>
         </React.Fragment>

package/data-table/types.js.flow

@@ -87,6 +87,13 @@ export type RowActionT = {|
   renderButton?: React.AbstractComponent<{||}>,
 |};
 
+type ImperativeMethodsT = {|
+  getRows: () => RowT[],
+|};
+export type ControlRefT = {
+  current: ImperativeMethodsT | null,
+};
+
 export type StatefulDataTablePropsT = {|
   batchActions?: BatchActionT[],
   columns: ColumnT<>[],
@@ -109,6 +116,7 @@ export type StatefulDataTablePropsT = {|
   rowHeight?: number,
   rowHighlightIndex?: number,
   searchable?: boolean,
+  controlRef?: ControlRefT,
 |};
 
 export type DataTablePropsT = {|

package/es/data-table/data-table.js

@@ -459,7 +459,8 @@ export function DataTable({
   selectedRowIds,
   sortIndex,
   sortDirection,
-  textQuery = ''
+  textQuery = '',
+  controlRef
 }) {
   const [, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
@@ -596,6 +597,9 @@ export function DataTable({
 
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
+  React.useImperativeHandle(controlRef, () => ({
+    getRows: () => rows
+  }), [rows]);
   const [browserScrollbarWidth, setBrowserScrollbarWidth] = React.useState(0);
   const normalizedWidths = React.useMemo(() => {
     const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));

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

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

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

@@ -14,7 +14,6 @@ export const Label = styled('label', props => {
     }
   } = props;
   return { ...typography.font250,
-    fontWeight: 500,
     width: '100%',
     color: $disabled ? colors.contentSecondary : colors.contentPrimary,
     display: 'block',

package/es/list/list-item.js

@@ -41,7 +41,11 @@ const ListItem = /*#__PURE__*/React.forwardRef((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/es/list/menu-adapter.js

@@ -11,9 +11,13 @@ const MenuAdapter = /*#__PURE__*/React.forwardRef((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/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() {
@@ -667,20 +666,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/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/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() {
@@ -776,24 +775,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;
 

package/form-control/index.d.ts

@@ -32,3 +32,12 @@ export class FormControl extends React.Component<
   FormControlProps,
   FormControlState
 > {}
+
+export interface FormControlChildProps {
+  'aria-describedby': string | null,
+  'aria-errormessage': string | null,
+  key: React.Key,
+  disabled: boolean,
+  error: boolean,
+  positive: boolean
+}

package/form-control/styled-components.js

@@ -19,7 +19,6 @@ var Label = (0, _index.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/form-control/styled-components.js.flow

@@ -16,7 +16,6 @@ export const Label = styled<StylePropsT>('label', (props) => {
   } = props;
   return {
     ...typography.font250,
-    fontWeight: 500,
     width: '100%',
     color: $disabled ? colors.contentSecondary : colors.contentPrimary,
     display: 'block',

package/list/list-item.js

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

package/list/list-item.js.flow

@@ -58,6 +58,10 @@ const ListItem = React.forwardRef<PropsT, HTMLLIElement>((props: PropsT, ref) =>
       // flowlint-next-line unclear-type:off
       ref={(ref: any)}
       $shape={props.shape || SHAPE.DEFAULT}
+      aria-label={props['aria-label']}
+      aria-selected={props['aria-selected']}
+      id={props.id}
+      role={props.role}
       {...rootProps}
     >
       {Artwork && (

package/list/menu-adapter.js

@@ -29,9 +29,13 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(_listItem.default, {
     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: (0, _overrides.mergeOverrides)({
       Root: {
         props: {

package/list/menu-adapter.js.flow

@@ -17,9 +17,13 @@ const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>((props, r
     <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: {

package/list/types.js.flow

@@ -44,7 +44,11 @@ export type PropsT = {|
   shape?: ShapeT,
   children: React.Node,
   endEnhancer?: React.AbstractComponent<{}>,
+  'aria-label'?: string,
+  'aria-selected'?: boolean,
+  id?: String,
   overrides?: OverridesT,
+  role?: string,
   sublist?: boolean,
 |};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "11.0.0",
+  "version": "11.0.1",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -29,6 +29,7 @@
     "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src --out-dir ./dist/esm --ignore **.test.js,**/__tests__/**,**/e2e.js,**/template-component/**,**/test/**",
     "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore **.test.js,**/__tests__/**,**/e2e.js,**/template-component/**,**/test/**",
     "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:copy-files && yarn build:copy-flow-files && yarn build:copy-ts-files && yarn build:package-json",
+    "build:docs-and-ladle": "yarn documentation:build && yarn ladle build --base-url /ladle/ && mv build public/ladle",
     "build:documentation-site-files": "node ./scripts/build-documentation-site-files.js",
     "unit-test": "yarn jest --coverage",
     "e2e:build": "yarn ladle build --out build-ladle",

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",
@@ -1102,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>
     );
   }
 

package/select/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchIconContainer = exports.getLoadingIconStyles = exports.StyledClearIcon = exports.StyledSelectArrow = exports.StyledIconsContainer = exports.StyledInputSizer = exports.StyledInput = exports.StyledInputContainer = exports.StyledSingleValue = exports.StyledPlaceholder = exports.StyledValueContainer = exports.StyledControlContainer = exports.StyledRoot = exports.StyledOptionContent = exports.StyledDropdownListItem = exports.StyledDropdown = exports.StyledDropdownContainer = void 0;
+exports.StyledSearchIconContainer = exports.StyledLoadingIndicator = exports.StyledClearIcon = exports.StyledSelectArrow = exports.StyledIconsContainer = exports.StyledInputSizer = exports.StyledInput = exports.StyledInputContainer = exports.StyledSingleValue = exports.StyledPlaceholder = exports.StyledValueContainer = exports.StyledControlContainer = exports.StyledRoot = exports.StyledOptionContent = exports.StyledDropdownListItem = exports.StyledDropdown = exports.StyledDropdownContainer = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -11,6 +11,8 @@ var _constants = require("./constants.js");
 
 var _index2 = require("../menu/index.js");
 
+var _index3 = require("../spinner/index.js");
+
 var _util = require("../styles/util.js");
 
 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; }
@@ -390,18 +392,22 @@ var StyledClearIcon = (0, _index.styled)('svg', function (props) {
 });
 exports.StyledClearIcon = StyledClearIcon;
 StyledClearIcon.displayName = "StyledClearIcon";
-
-var getLoadingIconStyles = function getLoadingIconStyles(props) {
-  var $theme = props.$theme;
-  var colors = $theme.colors;
-  return _objectSpread(_objectSpread({}, getSvgStyles({
-    $theme: $theme
-  })), {}, {
-    color: colors.contentPrimary
-  });
-};
-
-exports.getLoadingIconStyles = getLoadingIconStyles;
+var StyledLoadingIndicator = (0, _index.withStyle)(_index3.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'
+  };
+});
+exports.StyledLoadingIndicator = StyledLoadingIndicator;
+StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
 var StyledSearchIconContainer = (0, _index.styled)('div', function (props) {
   var _objectSpread4;
 

package/select/styled-components.js.flow

@@ -6,13 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-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 type { SharedStylePropsArgT } from './types.js';
 import { ellipsisText } from '../styles/util.js';
-import type { ThemeT } from '../styles/types.js';
 
 function getFont(size = SIZE.default, typography) {
   return {
@@ -424,14 +424,19 @@ export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', (props) => {
   };
 });
 
-export const getLoadingIconStyles = (props: { $theme: ThemeT }) => {
-  const { $theme } = props;
-  const { colors } = $theme;
+export const StyledLoadingIndicator = withStyle<typeof Spinner, {}>(Spinner, ({ $theme }) => {
   return {
-    ...getSvgStyles({ $theme }),
-    color: colors.contentPrimary,
+    borderTopWidth: '2px',
+    borderRightWidth: '2px',
+    borderBottomWidth: '2px',
+    borderLeftWidth: '2px',
+    borderRightColor: $theme.colors.borderOpaque,
+    borderBottomColor: $theme.colors.borderOpaque,
+    borderLeftColor: $theme.colors.borderOpaque,
+    width: '16px',
+    height: '16px',
   };
-};
+});
 
 export const StyledSearchIconContainer = styled<SharedStylePropsArgT>('div', (props) => {
   const { $disabled, $theme } = props;