baseui 0.0.0-next-0688aa9 → 0.0.0-next-9a8ac53

package/combobox/combobox.js

@@ -60,6 +60,7 @@ function Combobox(props) {
       onChange = props.onChange,
       onFocus = props.onFocus,
       onSubmit = props.onSubmit,
+      listBoxLabel = props.listBoxLabel,
       mapOptionToNode = props.mapOptionToNode,
       mapOptionToString = props.mapOptionToString,
       id = props.id,
@@ -322,6 +323,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map(function (option, index) {
       var isSelected = selectionIndex === index;
@@ -360,9 +362,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -375,7 +376,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 var _default = Combobox;

package/combobox/combobox.js.flow

@@ -38,6 +38,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -274,6 +275,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             // eslint-disable-next-line flowtype/no-weak-types
             ref={(listboxRef: any)}
             role="listbox"
+            aria-label={listBoxLabel}
             $width={listboxWidth}
             {...listBoxProps}
           >
@@ -322,10 +324,9 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
           <OverriddenInput
             inputRef={handleInputRef}
             aria-activedescendant={
-              selectionIndex >= 0 ? activeDescendantId : undefined
+              isOpen && selectionIndex >= 0 ? activeDescendantId : undefined
             }
             aria-autocomplete="list"
-            aria-controls={listboxId}
             disabled={disabled}
             error={error}
             name={name}
@@ -338,6 +339,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             positive={positive}
             size={size}
             value={tempValue ? tempValue : value}
+            {...(isOpen ? {'aria-controls': listboxId} : {})}
             {...restInputProps}
           />
         </InputContainer>

package/combobox/types.js.flow

@@ -18,6 +18,8 @@ export type PropsT<OptionT = mixed> = {|
   disabled?: boolean,
   // Proxies value through to Input component.
   error?: boolean,
+  // Label used for the listbox/popup with options
+  listBoxLabel?: string,
   // Used to render a custom node besides the default.
   mapOptionToNode?: React.AbstractComponent<{|
     isSelected: boolean,

package/datepicker/styled-components.js

@@ -502,7 +502,7 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.accent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === _constants.DENSITY.high ? '42px' : '50px',
       width: '100%',

package/datepicker/styled-components.js.flow

@@ -496,7 +496,10 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+      boxShadow:
+        $isFocusVisible && (!$outsideMonth || $peekNextMonth)
+          ? `0 0 0 3px ${colors.accent}`
+          : 'none',
       backgroundColor: $selected
         ? colors.calendarDayBackgroundSelectedHighlighted
         : $pseudoSelected && $isHighlighted

package/es/combobox/combobox.js

@@ -28,6 +28,7 @@ function Combobox(props) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -251,6 +252,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map((option, index) => {
       const isSelected = selectionIndex === index;
@@ -287,9 +289,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -302,7 +303,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 export default Combobox;

package/es/datepicker/styled-components.js

@@ -503,7 +503,7 @@ export const StyledDay = styled('div', props => {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? `0 0 0 3px ${colors.accent}` : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
       width: '100%',

package/es/progress-bar/progressbar.js

@@ -34,7 +34,9 @@ class ProgressBar extends React.Component {
       successValue,
       showLabel,
       infinite,
-      errorMessage
+      errorMessage,
+      forwardedRef,
+      ...restProps
     } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [BarContainer, barContainerProps] = getOverrides(overrides.BarContainer, StyledBarContainer);
@@ -68,6 +70,7 @@ class ProgressBar extends React.Component {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/role-supports-aria-props
       React.createElement(Root, _extends({
+        ref: forwardedRef,
         "data-baseweb": "progress-bar",
         role: "progressbar",
         "aria-label": ariaLabel || getProgressLabel(value, successValue),
@@ -76,7 +79,7 @@ class ProgressBar extends React.Component {
         "aria-valuemax": infinite ? null : successValue,
         "aria-invalid": errorMessage ? true : null,
         "aria-errormessage": errorMessage
-      }, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
+      }, restProps, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
         $isLeft: true,
         $size: sharedProps.$size
       }, infiniteBarProps)), /*#__PURE__*/React.createElement(InfiniteBar, _extends({
@@ -98,4 +101,8 @@ _defineProperty(ProgressBar, "defaultProps", {
   value: 0
 });
 
-export default ProgressBar;
+const ForwardedProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ProgressBar, _extends({
+  forwardedRef: ref
+}, props)));
+ForwardedProgressBar.displayName = 'ProgressBar';
+export default ForwardedProgressBar;

package/es/spinner/styled-components.js

@@ -46,13 +46,39 @@ export const StyledActivePath = styled('path', props => ({
 StyledActivePath.displayName = "StyledActivePath";
 export const StyledSpinnerNext = styled('i', ({
   $theme,
+  $color = $theme.colors.contentAccent,
+  $borderWidth,
   $size = SIZE.medium
 }) => {
-  const borderWidth = {
+  //$FlowFixMe
+  let borderSize = {
     large: $theme.sizing.scale300,
     medium: $theme.sizing.scale100,
     small: $theme.sizing.scale0
+  }[$borderWidth || $size];
+  let boxSize = {
+    large: $theme.sizing.scale1000,
+    medium: $theme.sizing.scale900,
+    small: $theme.sizing.scale800
   }[$size];
+
+  if (!borderSize) {
+    borderSize = $theme.sizing[$borderWidth];
+
+    if (!borderSize) {
+      borderSize = `${parseInt($borderWidth)}px`;
+    }
+  }
+
+  if (!boxSize) {
+    //$FlowFixMe
+    boxSize = $theme.sizing[$size];
+
+    if (!boxSize) {
+      boxSize = `${parseInt($size)}px`;
+    }
+  }
+
   return {
     display: 'block',
     animationName: spin,
@@ -64,24 +90,16 @@ export const StyledSpinnerNext = styled('i', ({
     borderTopStyle: 'solid',
     borderBottomStyle: 'solid',
     borderRadius: '50%',
-    borderTopColor: $theme.colors.contentAccent,
+    borderTopColor: $color,
     borderRightColor: $theme.colors.backgroundTertiary,
     borderBottomColor: $theme.colors.backgroundTertiary,
     borderLeftColor: $theme.colors.backgroundTertiary,
-    borderLeftWidth: borderWidth,
-    borderRightWidth: borderWidth,
-    borderTopWidth: borderWidth,
-    borderBottomWidth: borderWidth,
-    width: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
-    height: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
+    borderLeftWidth: borderSize,
+    borderRightWidth: borderSize,
+    borderTopWidth: borderSize,
+    borderBottomWidth: borderSize,
+    width: boxSize,
+    height: boxSize,
     cursor: 'wait'
   };
 });

package/esm/combobox/combobox.js

@@ -46,6 +46,7 @@ function Combobox(props) {
       onChange = props.onChange,
       onFocus = props.onFocus,
       onSubmit = props.onSubmit,
+      listBoxLabel = props.listBoxLabel,
       mapOptionToNode = props.mapOptionToNode,
       mapOptionToString = props.mapOptionToString,
       id = props.id,
@@ -308,6 +309,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map(function (option, index) {
       var isSelected = selectionIndex === index;
@@ -346,9 +348,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -361,7 +362,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 export default Combobox;

package/esm/datepicker/styled-components.js

@@ -481,7 +481,7 @@ export var StyledDay = styled('div', function (props) {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.accent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
       width: '100%',

package/esm/progress-bar/progressbar.js

@@ -14,6 +14,10 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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); } }
@@ -82,7 +86,9 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
           successValue = _this$props.successValue,
           showLabel = _this$props.showLabel,
           infinite = _this$props.infinite,
-          errorMessage = _this$props.errorMessage;
+          errorMessage = _this$props.errorMessage,
+          forwardedRef = _this$props.forwardedRef,
+          restProps = _objectWithoutProperties(_this$props, ["ariaLabel", "overrides", "getProgressLabel", "value", "size", "steps", "successValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]);
 
       var _getOverrides = getOverrides(overrides.Root, StyledRoot),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
@@ -140,6 +146,7 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/role-supports-aria-props
         React.createElement(Root, _extends({
+          ref: forwardedRef,
           "data-baseweb": "progress-bar",
           role: "progressbar",
           "aria-label": ariaLabel || getProgressLabel(value, successValue),
@@ -148,7 +155,7 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
           "aria-valuemax": infinite ? null : successValue,
           "aria-invalid": errorMessage ? true : null,
           "aria-errormessage": errorMessage
-        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
+        }, restProps, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
           $isLeft: true,
           $size: sharedProps.$size
         }, infiniteBarProps)), /*#__PURE__*/React.createElement(InfiniteBar, _extends({
@@ -174,4 +181,10 @@ _defineProperty(ProgressBar, "defaultProps", {
   value: 0
 });
 
-export default ProgressBar;
+var ForwardedProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(ProgressBar, _extends({
+    forwardedRef: ref
+  }, props));
+});
+ForwardedProgressBar.displayName = 'ProgressBar';
+export default ForwardedProgressBar;

package/esm/spinner/styled-components.js

@@ -54,13 +54,40 @@ export var StyledActivePath = styled('path', function (props) {
 StyledActivePath.displayName = "StyledActivePath";
 export var StyledSpinnerNext = styled('i', function (_ref) {
   var $theme = _ref.$theme,
+      _ref$$color = _ref.$color,
+      $color = _ref$$color === void 0 ? $theme.colors.contentAccent : _ref$$color,
+      $borderWidth = _ref.$borderWidth,
       _ref$$size = _ref.$size,
       $size = _ref$$size === void 0 ? SIZE.medium : _ref$$size;
-  var borderWidth = {
+  //$FlowFixMe
+  var borderSize = {
     large: $theme.sizing.scale300,
     medium: $theme.sizing.scale100,
     small: $theme.sizing.scale0
+  }[$borderWidth || $size];
+  var boxSize = {
+    large: $theme.sizing.scale1000,
+    medium: $theme.sizing.scale900,
+    small: $theme.sizing.scale800
   }[$size];
+
+  if (!borderSize) {
+    borderSize = $theme.sizing[$borderWidth];
+
+    if (!borderSize) {
+      borderSize = "".concat(parseInt($borderWidth), "px");
+    }
+  }
+
+  if (!boxSize) {
+    //$FlowFixMe
+    boxSize = $theme.sizing[$size];
+
+    if (!boxSize) {
+      boxSize = "".concat(parseInt($size), "px");
+    }
+  }
+
   return {
     display: 'block',
     animationName: spin,
@@ -72,24 +99,16 @@ export var StyledSpinnerNext = styled('i', function (_ref) {
     borderTopStyle: 'solid',
     borderBottomStyle: 'solid',
     borderRadius: '50%',
-    borderTopColor: $theme.colors.contentAccent,
+    borderTopColor: $color,
     borderRightColor: $theme.colors.backgroundTertiary,
     borderBottomColor: $theme.colors.backgroundTertiary,
     borderLeftColor: $theme.colors.backgroundTertiary,
-    borderLeftWidth: borderWidth,
-    borderRightWidth: borderWidth,
-    borderTopWidth: borderWidth,
-    borderBottomWidth: borderWidth,
-    width: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
-    height: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
+    borderLeftWidth: borderSize,
+    borderRightWidth: borderSize,
+    borderTopWidth: borderSize,
+    borderBottomWidth: borderSize,
+    width: boxSize,
+    height: boxSize,
     cursor: 'wait'
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-0688aa9",
+  "version": "0.0.0-next-9a8ac53",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/progress-bar/progressbar.js

@@ -33,6 +33,10 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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); } }
@@ -90,7 +94,9 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
           successValue = _this$props.successValue,
           showLabel = _this$props.showLabel,
           infinite = _this$props.infinite,
-          errorMessage = _this$props.errorMessage;
+          errorMessage = _this$props.errorMessage,
+          forwardedRef = _this$props.forwardedRef,
+          restProps = _objectWithoutProperties(_this$props, ["ariaLabel", "overrides", "getProgressLabel", "value", "size", "steps", "successValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]);
 
       var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
@@ -148,6 +154,7 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/role-supports-aria-props
         React.createElement(Root, _extends({
+          ref: forwardedRef,
           "data-baseweb": "progress-bar",
           role: "progressbar",
           "aria-label": ariaLabel || getProgressLabel(value, successValue),
@@ -156,7 +163,7 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
           "aria-valuemax": infinite ? null : successValue,
           "aria-invalid": errorMessage ? true : null,
           "aria-errormessage": errorMessage
-        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
+        }, restProps, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
           $isLeft: true,
           $size: sharedProps.$size
         }, infiniteBarProps)), /*#__PURE__*/React.createElement(InfiniteBar, _extends({
@@ -182,5 +189,11 @@ _defineProperty(ProgressBar, "defaultProps", {
   value: 0
 });
 
-var _default = ProgressBar;
+var ForwardedProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(ProgressBar, _extends({
+    forwardedRef: ref
+  }, props));
+});
+ForwardedProgressBar.displayName = 'ProgressBar';
+var _default = ForwardedProgressBar;
 exports.default = _default;

package/progress-bar/progressbar.js.flow

@@ -19,7 +19,10 @@ import {
 
 import type {ProgressBarPropsT} from './types.js';
 
-class ProgressBar extends React.Component<ProgressBarPropsT> {
+class ProgressBar extends React.Component<
+  // eslint-disable-next-line flowtype/no-weak-types
+  ProgressBarPropsT & {forwardedRef: any},
+> {
   static defaultProps = {
     getProgressLabel: (value: number, successValue: number) =>
       `${Math.round((value / successValue) * 100)}% Loaded`,
@@ -55,6 +58,8 @@ class ProgressBar extends React.Component<ProgressBarPropsT> {
       showLabel,
       infinite,
       errorMessage,
+      forwardedRef,
+      ...restProps
     } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [BarContainer, barContainerProps] = getOverrides(
@@ -92,6 +97,7 @@ class ProgressBar extends React.Component<ProgressBarPropsT> {
     return (
       // eslint-disable-next-line jsx-a11y/role-supports-aria-props
       <Root
+        ref={forwardedRef}
         data-baseweb="progress-bar"
         role="progressbar"
         aria-label={ariaLabel || getProgressLabel(value, successValue)}
@@ -100,6 +106,7 @@ class ProgressBar extends React.Component<ProgressBarPropsT> {
         aria-valuemax={infinite ? null : successValue}
         aria-invalid={errorMessage ? true : null}
         aria-errormessage={errorMessage}
+        {...restProps}
         {...sharedProps}
         {...rootProps}
       >
@@ -127,7 +134,14 @@ class ProgressBar extends React.Component<ProgressBarPropsT> {
   }
 }
 
-export default ProgressBar;
+const ForwardedProgressBar = React.forwardRef<
+  $Shape<ProgressBarPropsT>,
+  HTMLDivElement,
+>((props: ProgressBarPropsT, ref) => (
+  <ProgressBar forwardedRef={ref} {...props} />
+));
+ForwardedProgressBar.displayName = 'ProgressBar';
+export default ForwardedProgressBar;
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/spinner/styled-components.js

@@ -61,13 +61,40 @@ exports.StyledActivePath = StyledActivePath;
 StyledActivePath.displayName = "StyledActivePath";
 var StyledSpinnerNext = (0, _index.styled)('i', function (_ref) {
   var $theme = _ref.$theme,
+      _ref$$color = _ref.$color,
+      $color = _ref$$color === void 0 ? $theme.colors.contentAccent : _ref$$color,
+      $borderWidth = _ref.$borderWidth,
       _ref$$size = _ref.$size,
       $size = _ref$$size === void 0 ? _constants.SIZE.medium : _ref$$size;
-  var borderWidth = {
+  //$FlowFixMe
+  var borderSize = {
     large: $theme.sizing.scale300,
     medium: $theme.sizing.scale100,
     small: $theme.sizing.scale0
+  }[$borderWidth || $size];
+  var boxSize = {
+    large: $theme.sizing.scale1000,
+    medium: $theme.sizing.scale900,
+    small: $theme.sizing.scale800
   }[$size];
+
+  if (!borderSize) {
+    borderSize = $theme.sizing[$borderWidth];
+
+    if (!borderSize) {
+      borderSize = "".concat(parseInt($borderWidth), "px");
+    }
+  }
+
+  if (!boxSize) {
+    //$FlowFixMe
+    boxSize = $theme.sizing[$size];
+
+    if (!boxSize) {
+      boxSize = "".concat(parseInt($size), "px");
+    }
+  }
+
   return {
     display: 'block',
     animationName: spin,
@@ -79,24 +106,16 @@ var StyledSpinnerNext = (0, _index.styled)('i', function (_ref) {
     borderTopStyle: 'solid',
     borderBottomStyle: 'solid',
     borderRadius: '50%',
-    borderTopColor: $theme.colors.contentAccent,
+    borderTopColor: $color,
     borderRightColor: $theme.colors.backgroundTertiary,
     borderBottomColor: $theme.colors.backgroundTertiary,
     borderLeftColor: $theme.colors.backgroundTertiary,
-    borderLeftWidth: borderWidth,
-    borderRightWidth: borderWidth,
-    borderTopWidth: borderWidth,
-    borderBottomWidth: borderWidth,
-    width: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
-    height: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
+    borderLeftWidth: borderSize,
+    borderRightWidth: borderSize,
+    borderTopWidth: borderSize,
+    borderBottomWidth: borderSize,
+    width: boxSize,
+    height: boxSize,
     cursor: 'wait'
   };
 });

package/spinner/styled-components.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import {styled} from '../styles/index.js';
 import {getSvgStyles} from '../icon/styled-components.js';
-import type {SizeT} from './types.js';
 import {SIZE} from './constants.js';
+import type {StyledSpinnerNextPropsT} from './types.js';
 
 type StylePropsT = {
   $size?: number | string,
@@ -50,14 +50,40 @@ export const StyledActivePath = styled<StylePropsT>('path', props => ({
 }));
 
 // TODO(v11): Replace Spinner with SpinnerNext
-export const StyledSpinnerNext = styled<{$size?: SizeT}>(
+export const StyledSpinnerNext = styled<StyledSpinnerNextPropsT>(
   'i',
-  ({$theme, $size = SIZE.medium}) => {
-    const borderWidth = {
+  ({
+    $theme,
+    $color = $theme.colors.contentAccent,
+    $borderWidth,
+    $size = SIZE.medium,
+  }) => {
+    //$FlowFixMe
+    let borderSize = {
       large: $theme.sizing.scale300,
       medium: $theme.sizing.scale100,
       small: $theme.sizing.scale0,
+    }[$borderWidth || $size];
+    let boxSize = {
+      large: $theme.sizing.scale1000,
+      medium: $theme.sizing.scale900,
+      small: $theme.sizing.scale800,
     }[$size];
+
+    if (!borderSize) {
+      borderSize = $theme.sizing[$borderWidth];
+      if (!borderSize) {
+        borderSize = `${parseInt($borderWidth)}px`;
+      }
+    }
+    if (!boxSize) {
+      //$FlowFixMe
+      boxSize = $theme.sizing[$size];
+      if (!boxSize) {
+        boxSize = `${parseInt($size)}px`;
+      }
+    }
+
     return {
       display: 'block',
       animationName: spin,
@@ -69,24 +95,16 @@ export const StyledSpinnerNext = styled<{$size?: SizeT}>(
       borderTopStyle: 'solid',
       borderBottomStyle: 'solid',
       borderRadius: '50%',
-      borderTopColor: $theme.colors.contentAccent,
+      borderTopColor: $color,
       borderRightColor: $theme.colors.backgroundTertiary,
       borderBottomColor: $theme.colors.backgroundTertiary,
       borderLeftColor: $theme.colors.backgroundTertiary,
-      borderLeftWidth: borderWidth,
-      borderRightWidth: borderWidth,
-      borderTopWidth: borderWidth,
-      borderBottomWidth: borderWidth,
-      width: {
-        large: $theme.sizing.scale1000,
-        medium: $theme.sizing.scale900,
-        small: $theme.sizing.scale800,
-      }[$size],
-      height: {
-        large: $theme.sizing.scale1000,
-        medium: $theme.sizing.scale900,
-        small: $theme.sizing.scale800,
-      }[$size],
+      borderLeftWidth: borderSize,
+      borderRightWidth: borderSize,
+      borderTopWidth: borderSize,
+      borderBottomWidth: borderSize,
+      width: boxSize,
+      height: boxSize,
       cursor: 'wait',
     };
   },

package/spinner/types.js.flow

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import {SIZE} from './constants.js';
 import type {OverrideT} from '../helpers/overrides.js';
+import type {SizingT} from '../themes/types.js';
 
 export type SizeT = $Keys<typeof SIZE>;
 export type SpinnerPropsT = {
@@ -28,6 +29,15 @@ export type SpinnerPropsT = {
   },
 };
 
+export type StyledSpinnerNextPropsT = {
+  /** Color of progress indicator */
+  $color?: string,
+  /** Width of the progress indicator "stroke".  */
+  $borderWidth?: number | string | $Keys<SizingT> | SizeT,
+  /** Height/width of the box the indicator will appear in. */
+  $size?: number | string | $Keys<SizingT> | SizeT,
+};
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;