baseui 0.0.0-next-1b8709e → 0.0.0-next-0df5daf

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-1b8709e",
+  "version": "0.0.0-next-0df5daf",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

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;