baseui 10.7.2 → 10.9.0

package/popover/popover.js.flow

@@ -470,23 +470,29 @@ class PopoverInner extends React.Component<
               onPopperUpdate={this.onPopperUpdate}
               placement={this.state.placement}
             >
-              <FocusLock
-                disabled={!this.props.focusLock}
-                noFocusGuards={false}
-                // see popover-focus-loop.scenario.js for why hover cannot return focus
-                returnFocus={!this.isHoverTrigger() && this.props.returnFocus}
-                autoFocus={this.state.autoFocusAfterPositioning}
-                focusOptions={this.props.focusOptions}
-              >
-                {!this.props.focusLock &&
-                this.state.autoFocusAfterPositioning ? (
-                  <MoveFocusInside>
-                    {this.renderPopover(renderedContent)}
-                  </MoveFocusInside>
-                ) : (
-                  this.renderPopover(renderedContent)
-                )}
-              </FocusLock>
+              {this.props.focusLock ? (
+                <FocusLock
+                  disabled={!this.props.focusLock}
+                  noFocusGuards={false}
+                  // see popover-focus-loop.scenario.js for why hover cannot return focus
+                  returnFocus={!this.isHoverTrigger() && this.props.returnFocus}
+                  autoFocus={this.state.autoFocusAfterPositioning}
+                  // Allow focus to escape when UI is within an iframe
+                  crossFrame={false}
+                  focusOptions={this.props.focusOptions}
+                >
+                  {this.renderPopover(renderedContent)}
+                </FocusLock>
+              ) : (
+                <MoveFocusInside
+                  disabled={
+                    !this.props.autoFocus &&
+                    !this.state.autoFocusAfterPositioning
+                  }
+                >
+                  {this.renderPopover(renderedContent)}
+                </MoveFocusInside>
+              )}
             </TetherBehavior>
           </Layer>,
         );

package/progress-bar/index.d.ts

@@ -25,6 +25,8 @@ export interface ProgressBarProps {
   showLabel?: boolean;
   steps?: number;
   successValue?: number;
+  minValue?: number;
+  mxaValue?: number;
   value?: number;
 }
 export class ProgressBar extends React.Component<ProgressBarProps> {}

package/progress-bar/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "StyledBarProgress", {
     return _styledComponents.StyledBarProgress;
   }
 });
+Object.defineProperty(exports, "StyledInfiniteBar", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponents.StyledInfiniteBar;
+  }
+});
 Object.defineProperty(exports, "StyledLabel", {
   enumerable: true,
   get: function get() {

package/progress-bar/index.js.flow

@@ -14,6 +14,7 @@ export {
   StyledBarContainer,
   StyledBar,
   StyledBarProgress,
+  StyledInfiniteBar,
   StyledLabel,
   StyledProgressBarRoundedRoot,
   StyledProgressBarRoundedSvg,

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); } }
@@ -88,9 +92,16 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
           size = _this$props.size,
           steps = _this$props.steps,
           successValue = _this$props.successValue,
+          minValue = _this$props.minValue,
+          maxValue = _this$props.maxValue,
           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", "minValue", "maxValue", "showLabel", "infinite", "errorMessage", "forwardedRef"]); // fallback on successValue (and it's default) if maxValue is not set by user
+
+
+      var maximumValue = maxValue !== 100 ? maxValue : successValue;
 
       var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
@@ -126,7 +137,9 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
         $infinite: infinite,
         $size: size,
         $steps: steps,
-        $successValue: successValue,
+        $successValue: maximumValue,
+        $minValue: minValue,
+        $maxValue: maximumValue,
         $value: value
       };
 
@@ -148,20 +161,21 @@ 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),
+          "aria-label": ariaLabel || getProgressLabel(value, maximumValue, minValue),
           "aria-valuenow": infinite ? null : value,
-          "aria-valuemin": infinite ? null : 0,
-          "aria-valuemax": infinite ? null : successValue,
+          "aria-valuemin": infinite ? null : minValue,
+          "aria-valuemax": infinite ? null : maximumValue,
           "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({
           $size: sharedProps.$size
-        }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, successValue)))
+        }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, maximumValue, minValue)))
       );
     }
   }]);
@@ -170,8 +184,8 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(ProgressBar, "defaultProps", {
-  getProgressLabel: function getProgressLabel(value, successValue) {
-    return "".concat(Math.round(value / successValue * 100), "% Loaded");
+  getProgressLabel: function getProgressLabel(value, maxValue, minValue) {
+    return "".concat(Math.round((value - minValue) / (maxValue - minValue) * 100), "% Loaded");
   },
   infinite: false,
   overrides: {},
@@ -179,8 +193,16 @@ _defineProperty(ProgressBar, "defaultProps", {
   size: _constants.SIZE.medium,
   steps: 1,
   successValue: 100,
+  minValue: 0,
+  maxValue: 100,
   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,16 +19,23 @@ 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`,
+    getProgressLabel: (value: number, maxValue: number, minValue: number) =>
+      `${Math.round(
+        ((value - minValue) / (maxValue - minValue)) * 100,
+      )}% Loaded`,
     infinite: false,
     overrides: {},
     showLabel: false,
     size: SIZE.medium,
     steps: 1,
     successValue: 100,
+    minValue: 0,
+    maxValue: 100,
     value: 0,
   };
 
@@ -52,10 +59,16 @@ class ProgressBar extends React.Component<ProgressBarPropsT> {
       size,
       steps,
       successValue,
+      minValue,
+      maxValue,
       showLabel,
       infinite,
       errorMessage,
+      forwardedRef,
+      ...restProps
     } = this.props;
+    // fallback on successValue (and it's default) if maxValue is not set by user
+    const maximumValue = maxValue !== 100 ? maxValue : successValue;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [BarContainer, barContainerProps] = getOverrides(
       overrides.BarContainer,
@@ -75,7 +88,9 @@ class ProgressBar extends React.Component<ProgressBarPropsT> {
       $infinite: infinite,
       $size: size,
       $steps: steps,
-      $successValue: successValue,
+      $successValue: maximumValue,
+      $minValue: minValue,
+      $maxValue: maximumValue,
       $value: value,
     };
     function renderProgressBar() {
@@ -92,14 +107,18 @@ 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)}
+        aria-label={
+          ariaLabel || getProgressLabel(value, maximumValue, minValue)
+        }
         aria-valuenow={infinite ? null : value}
-        aria-valuemin={infinite ? null : 0}
-        aria-valuemax={infinite ? null : successValue}
+        aria-valuemin={infinite ? null : minValue}
+        aria-valuemax={infinite ? null : maximumValue}
         aria-invalid={errorMessage ? true : null}
         aria-errormessage={errorMessage}
+        {...restProps}
         {...sharedProps}
         {...rootProps}
       >
@@ -119,7 +138,7 @@ class ProgressBar extends React.Component<ProgressBarPropsT> {
         </BarContainer>
         {showLabel && (
           <Label {...sharedProps} {...labelProps}>
-            {getProgressLabel(value, successValue)}
+            {getProgressLabel(value, maximumValue, minValue)}
           </Label>
         )}
       </Root>
@@ -127,7 +146,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/progress-bar/styled-components.js

@@ -80,11 +80,16 @@ var StyledBarProgress = (0, _index.styled)('div', function (props) {
       $value = props.$value,
       $successValue = props.$successValue,
       $steps = props.$steps,
-      $index = props.$index;
+      $index = props.$index,
+      $maxValue = props.$maxValue,
+      _props$$minValue = props.$minValue,
+      $minValue = _props$$minValue === void 0 ? 0 : _props$$minValue; // making sure this doesn't break existing use that use StyledBarProgress directly
+
+  var maxValue = $maxValue ? $maxValue : $successValue;
   var colors = $theme.colors,
       sizing = $theme.sizing,
       borders = $theme.borders;
-  var width = "".concat(100 - $value / $successValue * 100, "%");
+  var width = "".concat(100 - ($value - $minValue) * 100 / (maxValue - $minValue), "%");
   var stepStates = {
     default: 'default',
     awaits: 'awaits',
@@ -94,8 +99,8 @@ var StyledBarProgress = (0, _index.styled)('div', function (props) {
   var stepState = stepStates.default;
 
   if ($steps > 1) {
-    var stepValue = $successValue / $steps;
-    var currentValue = $value / $successValue * 100;
+    var stepValue = (maxValue - $minValue) / $steps;
+    var currentValue = ($value - $minValue) / (maxValue - $minValue) * 100;
     var completedSteps = Math.floor(currentValue / stepValue);
 
     if ($index < completedSteps) {

package/progress-bar/styled-components.js.flow

@@ -62,9 +62,20 @@ export const StyledBar = styled<StylePropsT>('div', props => {
 });
 
 export const StyledBarProgress = styled<StylePropsT>('div', props => {
-  const {$theme, $value, $successValue, $steps, $index} = props;
+  const {
+    $theme,
+    $value,
+    $successValue,
+    $steps,
+    $index,
+    $maxValue,
+    $minValue = 0,
+  } = props;
+  // making sure this doesn't break existing use that use StyledBarProgress directly
+  const maxValue = $maxValue ? $maxValue : $successValue;
   const {colors, sizing, borders} = $theme;
-  const width = `${100 - ($value / $successValue) * 100}%`;
+  const width = `${100 -
+    (($value - $minValue) * 100) / (maxValue - $minValue)}%`;
 
   const stepStates = {
     default: 'default',
@@ -74,8 +85,8 @@ export const StyledBarProgress = styled<StylePropsT>('div', props => {
   };
   let stepState = stepStates.default;
   if ($steps > 1) {
-    const stepValue = $successValue / $steps;
-    const currentValue = ($value / $successValue) * 100;
+    const stepValue = (maxValue - $minValue) / $steps;
+    const currentValue = (($value - $minValue) / (maxValue - $minValue)) * 100;
     const completedSteps = Math.floor(currentValue / stepValue);
     if ($index < completedSteps) {
       stepState = stepStates.completed;

package/progress-bar/types.js.flow

@@ -27,7 +27,11 @@ export type ProgressBarPropsT = {
   /** Error message for screen-reader users**/
   errorMessage?: string,
   /** The function that returns a progress bar label to display. */
-  getProgressLabel: (value: number, successValue: number) => React.Node,
+  getProgressLabel: (
+    value: number,
+    maxValue: number,
+    minValue: number,
+  ) => React.Node,
   /** If set to true, there’s and infinite loading animation. */
   infinite: boolean,
   overrides?: OverridesT,
@@ -37,8 +41,12 @@ export type ProgressBarPropsT = {
   size: SizeT,
   /** Renders a sectional progress bar. Value should be set to a positive number larger than one. */
   steps: number,
-  /** A custom completion value. Should be deleted in v11. */
+  /** A custom completion value. Should be replaced by maxValue prop. */
   successValue: number,
+  /** Maximum possible value. */
+  maxValue: number,
+  /** Minimum possible value. */
+  minValue: number,
   /** The value between `0` and `100 | successValue` of the progress indicator. */
   value: number,
 };
@@ -49,6 +57,8 @@ export type StylePropsT = {
   $size: SizeT,
   $steps: number,
   $successValue: number,
+  $minValue: number,
+  $maxValue: number,
   $value: number,
 };
 

package/select/select-component.js

@@ -204,12 +204,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
       _this.handleClick(event);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleTouchEndClearValue", function (event) {
-      if (_this.dragging) return;
-
-      _this.clearValue(event);
-    });
-
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
       if (_this.props.disabled || !isClick(event) && !isLeftClick(event)) {
         return;
@@ -886,7 +880,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
           "aria-required": this.props.required || null,
           onFocus: this.handleInputFocus,
           tabIndex: 0
-        }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
+        }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
           "aria-hidden": true,
           id: this.props.id || null,
           ref: this.handleInputRef,
@@ -898,7 +892,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
             padding: 0
           },
           tabIndex: -1
-        }));
+        }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
       }
 
       return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(_autosizeInput.default, _extends({
@@ -950,9 +944,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,
-        onTouchEnd: this.handleTouchEndClearValue,
-        onTouchMove: this.handleTouchMove,
-        onTouchStart: this.handleTouchStart,
         role: "button",
         overrides: {
           Svg: {

package/select/select-component.js.flow

@@ -188,10 +188,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
     if (this.dragging) return;
     this.handleClick(event);
   };
-  handleTouchEndClearValue = (event: TouchEvent) => {
-    if (this.dragging) return;
-    this.clearValue(event);
-  };
 
   handleClick = (event: MouseEvent | TouchEvent) => {
     if (this.props.disabled || (!isClick(event) && !isLeftClick(event))) {
@@ -734,6 +730,11 @@ class Select extends React.Component<PropsT, SelectStateT> {
               padding: 0,
             }}
             tabIndex={-1}
+            {...(overrides.Input
+              ? overrides.Input.props
+                ? overrides.Input.props
+                : {}
+              : {})}
           />
         </InputContainer>
       );
@@ -796,9 +797,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
         title={ariaLabel}
         aria-label={ariaLabel}
         onClick={this.clearValue}
-        onTouchEnd={this.handleTouchEndClearValue}
-        onTouchMove={this.handleTouchMove}
-        onTouchStart={this.handleTouchStart}
         role="button"
         overrides={{
           Svg: {

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;

package/styles/index.js.flow

@@ -20,7 +20,7 @@ export {
 export {hexToRgb, expandBorderStyles} from './util.js';
 export {default as ThemeProvider} from './theme-provider.js';
 export const ThemeConsumer = ThemeContext.Consumer;
-export type {ThemeT} from './types.js';
+export type * from './types.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/table/filter.js

@@ -91,7 +91,9 @@ function Filter(props) {
     content: function content(_ref) {
       var close = _ref.close;
       return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
-        autoFocus: false
+        autoFocus: false // Allow focus to escape when UI is within an iframe
+        ,
+        crossFrame: false
       }, /*#__PURE__*/React.createElement(Heading, headingProps, "Filter Column"), /*#__PURE__*/React.createElement(Content, contentProps, props.children), /*#__PURE__*/React.createElement(Footer, footerProps, /*#__PURE__*/React.createElement(_index.Button, {
         kind: _index.KIND.minimal,
         size: _index.SIZE.compact,