baseui 10.7.2 → 10.9.0

package/esm/menu/stateful-container.js

@@ -70,6 +70,10 @@ var DEFAULT_PROPS = {
   removeMenuFromNesting: function removeMenuFromNesting() {},
   getParentMenu: function getParentMenu() {},
   getChildMenu: function getChildMenu() {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: function isNestedMenuVisible() {
+    return false;
+  },
   forceHighlight: false
 };
 
@@ -276,17 +280,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
-      var rootRef = _this.props.rootRef ? _this.props.rootRef : _this.rootRef;
-
-      var childMenu = _this.props.getChildMenu && _this.props.getChildMenu(rootRef);
-
-      if (!_this.props.forceHighlight && !childMenu) {
-        _this.internalSetState(STATE_CHANGE_TYPES.mouseLeave, {
-          highlightedIndex: -1
-        });
-      }
-    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (event) {});
 
     _defineProperty(_assertThisInitialized(_this), "getRequiredItemProps", function (item, index) {
       var itemRef = _this.refList[index];
@@ -397,11 +391,13 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         if (this.keyboardControlNode) this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
       }
 
-      this.props.removeMenuFromNesting && this.props.removeMenuFromNesting(rootRef);
+      if (this.props.removeMenuFromNesting) {
+        this.props.removeMenuFromNesting(rootRef);
+      }
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
+    value: function componentDidUpdate(prevProps, prevState) {
       if (typeof document !== 'undefined') {
         if (!prevState.isFocused && this.state.isFocused) {
           if (this.keyboardControlNode) this.keyboardControlNode.addEventListener('keydown', this.onKeyDown);
@@ -427,6 +423,12 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
           highlightedIndex: 0
         });
       }
+
+      if (this.props.isNestedMenuVisible && this.props.nestedMenuHoverIndex !== prevProps.nestedMenuHoverIndex && !this.props.isNestedMenuVisible(this.rootRef) && !this.props.forceHighlight) {
+        this.setState({
+          highlightedIndex: -1
+        });
+      }
     } // One array to hold all of list item refs
 
   }, {

package/esm/modal/modal.js

@@ -372,7 +372,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       } : {};
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(FocusLock, {
-          disabled: !focusLock,
+          disabled: !focusLock // Allow focus to escape when UI is within an iframe
+          ,
+          crossFrame: false,
           returnFocus: returnFocus,
           autoFocus: autofocus !== null ? autofocus : autoFocus
         }, /*#__PURE__*/React.createElement(Root, _extends({

package/esm/popover/popover.js

@@ -510,14 +510,18 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             popperOptions: _objectSpread(_objectSpread({}, defaultPopperOptions), this.props.popperOptions),
             onPopperUpdate: this.onPopperUpdate,
             placement: this.state.placement
-          }, /*#__PURE__*/React.createElement(FocusLock, {
+          }, this.props.focusLock ? /*#__PURE__*/React.createElement(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,
+            autoFocus: this.state.autoFocusAfterPositioning // Allow focus to escape when UI is within an iframe
+            ,
+            crossFrame: false,
             focusOptions: this.props.focusOptions
-          }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
+          }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
+            disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
+          }, this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(Hidden, {
             key: "hidden-layer"

package/esm/progress-bar/index.js

@@ -8,4 +8,4 @@ export { default as ProgressBar } from './progressbar.js';
 export { default as ProgressBarRounded } from './progressbar-rounded.js';
 export { SIZE } from './constants.js'; // Styled elements
 
-export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow
+export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledInfiniteBar, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow

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); } }
@@ -80,9 +84,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 = getOverrides(overrides.Root, StyledRoot),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
@@ -118,7 +129,9 @@ var ProgressBar = /*#__PURE__*/function (_React$Component) {
         $infinite: infinite,
         $size: size,
         $steps: steps,
-        $successValue: successValue,
+        $successValue: maximumValue,
+        $minValue: minValue,
+        $maxValue: maximumValue,
         $value: value
       };
 
@@ -140,20 +153,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)))
       );
     }
   }]);
@@ -162,8 +176,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: {},
@@ -171,7 +185,15 @@ _defineProperty(ProgressBar, "defaultProps", {
   size: SIZE.medium,
   steps: 1,
   successValue: 100,
+  minValue: 0,
+  maxValue: 100,
   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/progress-bar/styled-components.js

@@ -72,11 +72,16 @@ export var StyledBarProgress = 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',
@@ -86,8 +91,8 @@ export var StyledBarProgress = 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/esm/select/select-component.js

@@ -183,12 +183,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;
@@ -865,7 +859,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,
@@ -877,7 +871,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, _extends({
@@ -929,9 +923,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/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/esm/table/filter.js

@@ -75,7 +75,9 @@ export default function Filter(props) {
     content: function content(_ref) {
       var close = _ref.close;
       return /*#__PURE__*/React.createElement(FocusLock, {
-        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(Button, {
         kind: KIND.minimal,
         size: SIZE.compact,

package/esm/themes/dark-theme/color-component-tokens.js

@@ -38,6 +38,8 @@ export default (function () {
     buttonTertiaryActive: themePrimitives.primary600,
     buttonTertiarySelectedText: themePrimitives.primary,
     buttonTertiarySelectedFill: themePrimitives.primary600,
+    buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
+    buttonTertiaryDisabledActiveText: themePrimitives.mono300,
     buttonTertiarySpinnerForeground: themePrimitives.primary50,
     buttonTertiarySpinnerBackground: themePrimitives.primary500,
     buttonMinimalFill: 'transparent',
@@ -50,6 +52,8 @@ export default (function () {
     buttonMinimalSpinnerBackground: themePrimitives.primary500,
     buttonDisabledFill: themePrimitives.mono600,
     buttonDisabledText: themePrimitives.mono300,
+    buttonDisabledActiveFill: themePrimitives.mono200,
+    buttonDisabledActiveText: themePrimitives.primary500,
     buttonDisabledSpinnerForeground: themePrimitives.mono200,
     buttonDisabledSpinnerBackground: themePrimitives.mono400,
     // Breadcrumbs
@@ -108,15 +112,15 @@ export default (function () {
     modalCloseColorFocus: themePrimitives.mono400,
     // Notification
     notificationPrimaryBackground: themePrimitives.primary700,
-    notificationPrimaryText: themePrimitives.primary200,
+    notificationPrimaryText: themePrimitives.primaryA,
     notificationInfoBackground: themePrimitives.accent700,
-    notificationInfoText: themePrimitives.accent200,
+    notificationInfoText: themePrimitives.primaryA,
     notificationPositiveBackground: themePrimitives.positive700,
-    notificationPositiveText: themePrimitives.positive200,
+    notificationPositiveText: themePrimitives.primaryA,
     notificationWarningBackground: themePrimitives.warning700,
-    notificationWarningText: themePrimitives.warning200,
+    notificationWarningText: themePrimitives.primaryA,
     notificationNegativeBackground: themePrimitives.negative700,
-    notificationNegativeText: themePrimitives.negative200,
+    notificationNegativeText: themePrimitives.primaryA,
     // Tag
     // Custom ramps
     tagFontDisabledRampUnit: '600',
@@ -276,11 +280,16 @@ export default (function () {
     tableFilterFooterBackground: themePrimitives.mono800,
     // Toast
     toastText: themePrimitives.white,
-    toastPrimaryBackground: themePrimitives.primary500,
-    toastInfoBackground: themePrimitives.accent500,
-    toastPositiveBackground: themePrimitives.positive500,
-    toastWarningBackground: themePrimitives.warning500,
-    toastNegativeBackground: themePrimitives.negative500,
+    toastPrimaryBackground: themePrimitives.primary400,
+    toastPrimaryText: themePrimitives.white,
+    toastInfoBackground: themePrimitives.accent400,
+    toastInfoText: themePrimitives.white,
+    toastPositiveBackground: themePrimitives.positive400,
+    toastPositiveText: themePrimitives.white,
+    toastWarningBackground: themePrimitives.warning400,
+    toastWarningText: themePrimitives.black,
+    toastNegativeBackground: themePrimitives.negative400,
+    toastNegativeText: themePrimitives.white,
     // Toggle
     toggleFill: themePrimitives.mono300,
     toggleFillChecked: themePrimitives.primary,

package/esm/themes/light-theme/color-component-tokens.js

@@ -38,6 +38,8 @@ export default (function () {
     buttonTertiaryActive: themePrimitives.primary100,
     buttonTertiarySelectedFill: themePrimitives.primary100,
     buttonTertiarySelectedText: themePrimitives.primary,
+    buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
+    buttonTertiaryDisabledActiveText: themePrimitives.mono600,
     buttonTertiarySpinnerForeground: themePrimitives.accent,
     buttonTertiarySpinnerBackground: themePrimitives.primary100,
     buttonMinimalFill: 'transparent',
@@ -50,6 +52,8 @@ export default (function () {
     buttonMinimalSpinnerBackground: themePrimitives.primary100,
     buttonDisabledFill: themePrimitives.mono200,
     buttonDisabledText: themePrimitives.mono600,
+    buttonDisabledActiveFill: themePrimitives.mono700,
+    buttonDisabledActiveText: themePrimitives.mono100,
     buttonDisabledSpinnerForeground: themePrimitives.mono600,
     buttonDisabledSpinnerBackground: themePrimitives.mono400,
     // Breadcrumbs
@@ -184,15 +188,15 @@ export default (function () {
     tabColor: themePrimitives.mono800,
     // Notification
     notificationPrimaryBackground: themePrimitives.primary50,
-    notificationPrimaryText: themePrimitives.primary500,
+    notificationPrimaryText: themePrimitives.primaryA,
     notificationInfoBackground: themePrimitives.accent50,
-    notificationInfoText: themePrimitives.accent500,
+    notificationInfoText: themePrimitives.primaryA,
     notificationPositiveBackground: themePrimitives.positive50,
-    notificationPositiveText: themePrimitives.positive500,
+    notificationPositiveText: themePrimitives.primaryA,
     notificationWarningBackground: themePrimitives.warning50,
-    notificationWarningText: themePrimitives.warning500,
+    notificationWarningText: themePrimitives.primaryA,
     notificationNegativeBackground: themePrimitives.negative50,
-    notificationNegativeText: themePrimitives.negative500,
+    notificationNegativeText: themePrimitives.primaryA,
     // Tag
     // Custom ramps
     tagFontDisabledRampUnit: '100',
@@ -351,11 +355,16 @@ export default (function () {
     tableFilterFooterBackground: themePrimitives.mono200,
     // Toast
     toastText: themePrimitives.white,
-    toastPrimaryBackground: themePrimitives.primary500,
-    toastInfoBackground: themePrimitives.accent500,
-    toastPositiveBackground: themePrimitives.positive500,
-    toastWarningBackground: themePrimitives.warning500,
-    toastNegativeBackground: themePrimitives.negative500,
+    toastPrimaryBackground: themePrimitives.primary400,
+    toastPrimaryText: themePrimitives.white,
+    toastInfoBackground: themePrimitives.accent400,
+    toastInfoText: themePrimitives.white,
+    toastPositiveBackground: themePrimitives.positive400,
+    toastPositiveText: themePrimitives.white,
+    toastWarningBackground: themePrimitives.warning400,
+    toastWarningText: themePrimitives.black,
+    toastNegativeBackground: themePrimitives.negative400,
+    toastNegativeText: themePrimitives.white,
     // Spinner
     spinnerTrackFill: themePrimitives.mono900,
     // Progress bar

package/esm/timezonepicker/timezone-picker.js

@@ -6,14 +6,16 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 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); } }
@@ -44,11 +46,11 @@ LICENSE file in the root directory of this source tree.
 */
 // global Intl
 import * as React from 'react';
-import { findTimeZone, getZonedTime, listTimeZones } from 'timezone-support/dist/index-1900-2050.js';
-import { formatZonedTime } from 'timezone-support/dist/parse-format.js';
+import { format, getTimezoneOffset } from 'date-fns-tz';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import { LocaleContext } from '../locale/index.js';
 import { Select } from '../select/index.js';
+import { zones } from './tzdata.js';
 
 var TimezonePicker = /*#__PURE__*/function (_React$Component) {
   _inherits(TimezonePicker, _React$Component);
@@ -72,40 +74,56 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "buildTimezones", function (compareDate) {
-      return listTimeZones().map(function (zone) {
-        var timezone = findTimeZone(zone);
-        var zonedTime = getZonedTime(compareDate, timezone);
-        var offsetTime = (zonedTime.zone.offset < 0 ? '+' : '-') + Math.abs(zonedTime.zone.offset / 60);
-        var abbreviation = formatZonedTime(zonedTime, 'z');
-        var formatted = "(GMT ".concat(offsetTime, ") ").concat(zone).concat(_this.props.includeAbbreviations ? " - ".concat(abbreviation) : '').replace('_', ' ');
-        var option = {
-          id: zone,
-          label: formatted,
-          offset: zonedTime.zone.offset
-        };
-
-        if (_this.props.mapLabels) {
-          option.label = _this.props.mapLabels(option);
-        }
+      var timezones = [];
 
-        return option;
-      }) // Formats 'noisy' timezones without a letter acronym.
-      .map(function (option) {
-        var rgx = /(\s-\s(\+|-)\d\d\d?\d?)$/;
-        var matches = option.label.match(rgx);
+      var _iterator = _createForOfIteratorHelper(zones),
+          _step;
 
-        if (matches) {
-          var prefix = matches[0];
-          option.label = option.label.split(prefix)[0];
-        }
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var zoneName = _step.value;
+
+          try {
+            var offset = getTimezoneOffset(zoneName, compareDate) / 3600000;
+            var offsetFormatted = "".concat(offset >= 0 ? '+' : '-').concat(Math.abs(offset));
+            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace('_', ' '));
+
+            if (_this.props.includeAbbreviations) {
+              var abbreviation = format(compareDate, 'zzz', {
+                timeZone: zoneName
+              });
 
-        return option;
-      }) // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
-      .sort(function (a, b) {
+              if (abbreviation) {
+                label += " - ".concat(abbreviation);
+              }
+            }
+
+            timezones.push({
+              id: zoneName,
+              label: label,
+              offset: offset
+            });
+          } catch (error) {
+            // Ignores timezones that are not available within a user's browser/operating system
+            console.error("failed to format zone name ".concat(zoneName));
+          }
+        } // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
+
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      return timezones.sort(function (a, b) {
         var offsetDelta = b.offset - a.offset;
         if (offsetDelta !== 0) return offsetDelta;
-        if (a.label < b.label) return -1;
-        if (a.label > b.label) return 1;
+
+        if (typeof a.label === 'string' && typeof b.label === 'string') {
+          if (a.label < b.label) return -1;
+          if (a.label > b.label) return 1;
+        }
+
         return 0;
       });
     });
@@ -182,10 +200,20 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
       selectProps.overrides); // $FlowFixMe
 
       selectProps.overrides = selectOverrides;
+      var options = this.state.timezones;
+
+      if (this.props.mapLabels) {
+        options = options.map(function (option) {
+          // $FlowFixMe - TimezoneT.label is a string, but mapLabels can return a React.Node
+          option.label = _this3.props.mapLabels(option);
+          return option;
+        });
+      }
+
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(OverriddenSelect, _extends({
           "aria-label": locale.datepicker.timezonePickerAriaLabel,
-          options: _this3.state.timezones,
+          options: options,
           clearable: false,
           disabled: _this3.props.disabled,
           error: _this3.props.error,

package/esm/timezonepicker/tzdata.js

@@ -0,0 +1,2 @@
+/* eslint-disable header/header */
+export var zones = ['Europe/Andorra', 'Asia/Dubai', 'Asia/Kabul', 'Europe/Tirane', 'Asia/Yerevan', 'Antarctica/Casey', 'Antarctica/Davis', 'Antarctica/Mawson', 'Antarctica/Palmer', 'Antarctica/Rothera', 'Antarctica/Troll', 'Antarctica/Vostok', 'America/Argentina/Buenos_Aires', 'America/Argentina/Cordoba', 'America/Argentina/Salta', 'America/Argentina/Jujuy', 'America/Argentina/Tucuman', 'America/Argentina/Catamarca', 'America/Argentina/La_Rioja', 'America/Argentina/San_Juan', 'America/Argentina/Mendoza', 'America/Argentina/San_Luis', 'America/Argentina/Rio_Gallegos', 'America/Argentina/Ushuaia', 'Pacific/Pago_Pago', 'Europe/Vienna', 'Australia/Lord_Howe', 'Antarctica/Macquarie', 'Australia/Hobart', 'Australia/Melbourne', 'Australia/Sydney', 'Australia/Broken_Hill', 'Australia/Brisbane', 'Australia/Lindeman', 'Australia/Adelaide', 'Australia/Darwin', 'Australia/Perth', 'Australia/Eucla', 'Asia/Baku', 'America/Barbados', 'Asia/Dhaka', 'Europe/Brussels', 'Europe/Sofia', 'Atlantic/Bermuda', 'Asia/Brunei', 'America/La_Paz', 'America/Noronha', 'America/Belem', 'America/Fortaleza', 'America/Recife', 'America/Araguaina', 'America/Maceio', 'America/Bahia', 'America/Sao_Paulo', 'America/Campo_Grande', 'America/Cuiaba', 'America/Santarem', 'America/Porto_Velho', 'America/Boa_Vista', 'America/Manaus', 'America/Eirunepe', 'America/Rio_Branco', 'Asia/Thimphu', 'Europe/Minsk', 'America/Belize', 'America/St_Johns', 'America/Halifax', 'America/Glace_Bay', 'America/Moncton', 'America/Goose_Bay', 'America/Toronto', 'America/Nipigon', 'America/Thunder_Bay', 'America/Iqaluit', 'America/Pangnirtung', 'America/Winnipeg', 'America/Rainy_River', 'America/Resolute', 'America/Rankin_Inlet', 'America/Regina', 'America/Swift_Current', 'America/Edmonton', 'America/Cambridge_Bay', 'America/Yellowknife', 'America/Inuvik', 'America/Dawson_Creek', 'America/Fort_Nelson', 'America/Whitehorse', 'America/Dawson', 'America/Vancouver', 'Indian/Cocos', 'Europe/Zurich', 'Africa/Abidjan', 'Pacific/Rarotonga', 'America/Santiago', 'America/Punta_Arenas', 'Pacific/Easter', 'Asia/Shanghai', 'Asia/Urumqi', 'America/Bogota', 'America/Costa_Rica', 'America/Havana', 'Atlantic/Cape_Verde', 'Indian/Christmas', 'Asia/Nicosia', 'Asia/Famagusta', 'Europe/Prague', 'Europe/Berlin', 'Europe/Copenhagen', 'America/Santo_Domingo', 'Africa/Algiers', 'America/Guayaquil', 'Pacific/Galapagos', 'Europe/Tallinn', 'Africa/Cairo', 'Africa/El_Aaiun', 'Europe/Madrid', 'Africa/Ceuta', 'Atlantic/Canary', 'Europe/Helsinki', 'Pacific/Fiji', 'Atlantic/Stanley', 'Pacific/Chuuk', 'Pacific/Pohnpei', 'Pacific/Kosrae', 'Atlantic/Faroe', 'Europe/Paris', 'Europe/London', 'Asia/Tbilisi', 'America/Cayenne', 'Europe/Gibraltar', 'America/Nuuk', 'America/Danmarkshavn', 'America/Scoresbysund', 'America/Thule', 'Europe/Athens', 'Atlantic/South_Georgia', 'America/Guatemala', 'Pacific/Guam', 'Africa/Bissau', 'America/Guyana', 'Asia/Hong_Kong', 'America/Tegucigalpa', 'America/Port-au-Prince', 'Europe/Budapest', 'Asia/Jakarta', 'Asia/Pontianak', 'Asia/Makassar', 'Asia/Jayapura', 'Europe/Dublin', 'Asia/Jerusalem', 'Asia/Kolkata', 'Indian/Chagos', 'Asia/Baghdad', 'Asia/Tehran', 'Atlantic/Reykjavik', 'Europe/Rome', 'America/Jamaica', 'Asia/Amman', 'Asia/Tokyo', 'Africa/Nairobi', 'Asia/Bishkek', 'Pacific/Tarawa', 'Pacific/Kanton', 'Pacific/Kiritimati', 'Asia/Pyongyang', 'Asia/Seoul', 'Asia/Almaty', 'Asia/Qyzylorda', 'Asia/Qostanay', 'Asia/Aqtobe', 'Asia/Aqtau', 'Asia/Atyrau', 'Asia/Oral', 'Asia/Beirut', 'Asia/Colombo', 'Africa/Monrovia', 'Europe/Vilnius', 'Europe/Luxembourg', 'Europe/Riga', 'Africa/Tripoli', 'Africa/Casablanca', 'Europe/Monaco', 'Europe/Chisinau', 'Pacific/Majuro', 'Pacific/Kwajalein', 'Asia/Yangon', 'Asia/Ulaanbaatar', 'Asia/Hovd', 'Asia/Choibalsan', 'Asia/Macau', 'America/Martinique', 'Europe/Malta', 'Indian/Mauritius', 'Indian/Maldives', 'America/Mexico_City', 'America/Cancun', 'America/Merida', 'America/Monterrey', 'America/Matamoros', 'America/Mazatlan', 'America/Chihuahua', 'America/Ojinaga', 'America/Hermosillo', 'America/Tijuana', 'America/Bahia_Banderas', 'Asia/Kuala_Lumpur', 'Asia/Kuching', 'Africa/Maputo', 'Africa/Windhoek', 'Pacific/Noumea', 'Pacific/Norfolk', 'Africa/Lagos', 'America/Managua', 'Europe/Amsterdam', 'Europe/Oslo', 'Asia/Kathmandu', 'Pacific/Nauru', 'Pacific/Niue', 'Pacific/Auckland', 'Pacific/Chatham', 'America/Panama', 'America/Lima', 'Pacific/Tahiti', 'Pacific/Marquesas', 'Pacific/Gambier', 'Pacific/Port_Moresby', 'Pacific/Bougainville', 'Asia/Manila', 'Asia/Karachi', 'Europe/Warsaw', 'America/Miquelon', 'Pacific/Pitcairn', 'America/Puerto_Rico', 'Asia/Gaza', 'Asia/Hebron', 'Europe/Lisbon', 'Atlantic/Madeira', 'Atlantic/Azores', 'Pacific/Palau', 'America/Asuncion', 'Asia/Qatar', 'Indian/Reunion', 'Europe/Bucharest', 'Europe/Belgrade', 'Europe/Kaliningrad', 'Europe/Moscow', 'Europe/Simferopol', 'Europe/Kirov', 'Europe/Volgograd', 'Europe/Astrakhan', 'Europe/Saratov', 'Europe/Ulyanovsk', 'Europe/Samara', 'Asia/Yekaterinburg', 'Asia/Omsk', 'Asia/Novosibirsk', 'Asia/Barnaul', 'Asia/Tomsk', 'Asia/Novokuznetsk', 'Asia/Krasnoyarsk', 'Asia/Irkutsk', 'Asia/Chita', 'Asia/Yakutsk', 'Asia/Khandyga', 'Asia/Vladivostok', 'Asia/Ust-Nera', 'Asia/Magadan', 'Asia/Sakhalin', 'Asia/Srednekolymsk', 'Asia/Kamchatka', 'Asia/Anadyr', 'Asia/Riyadh', 'Pacific/Guadalcanal', 'Indian/Mahe', 'Africa/Khartoum', 'Europe/Stockholm', 'Asia/Singapore', 'America/Paramaribo', 'Africa/Juba', 'Africa/Sao_Tome', 'America/El_Salvador', 'Asia/Damascus', 'America/Grand_Turk', 'Africa/Ndjamena', 'Indian/Kerguelen', 'Asia/Bangkok', 'Asia/Dushanbe', 'Pacific/Fakaofo', 'Asia/Dili', 'Asia/Ashgabat', 'Africa/Tunis', 'Pacific/Tongatapu', 'Europe/Istanbul', 'Pacific/Funafuti', 'Asia/Taipei', 'Europe/Kiev', 'Europe/Uzhgorod', 'Europe/Zaporozhye', 'Pacific/Wake', 'America/New_York', 'America/Detroit', 'America/Kentucky/Louisville', 'America/Kentucky/Monticello', 'America/Indiana/Indianapolis', 'America/Indiana/Vincennes', 'America/Indiana/Winamac', 'America/Indiana/Marengo', 'America/Indiana/Petersburg', 'America/Indiana/Vevay', 'America/Chicago', 'America/Indiana/Tell_City', 'America/Indiana/Knox', 'America/Menominee', 'America/North_Dakota/Center', 'America/North_Dakota/New_Salem', 'America/North_Dakota/Beulah', 'America/Denver', 'America/Boise', 'America/Phoenix', 'America/Los_Angeles', 'America/Anchorage', 'America/Juneau', 'America/Sitka', 'America/Metlakatla', 'America/Yakutat', 'America/Nome', 'America/Adak', 'Pacific/Honolulu', 'America/Montevideo', 'Asia/Samarkand', 'Asia/Tashkent', 'America/Caracas', 'Asia/Ho_Chi_Minh', 'Pacific/Efate', 'Pacific/Wallis', 'Pacific/Apia', 'Africa/Johannesburg'];