baseui 10.7.4 → 10.9.1

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

@@ -48,6 +48,8 @@ var _default = function _default() {
     buttonTertiaryActive: themePrimitives.primary600,
     buttonTertiarySelectedText: themePrimitives.primary,
     buttonTertiarySelectedFill: themePrimitives.primary600,
+    buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
+    buttonTertiaryDisabledActiveText: themePrimitives.mono300,
     buttonTertiarySpinnerForeground: themePrimitives.primary50,
     buttonTertiarySpinnerBackground: themePrimitives.primary500,
     buttonMinimalFill: 'transparent',
@@ -60,6 +62,8 @@ var _default = function _default() {
     buttonMinimalSpinnerBackground: themePrimitives.primary500,
     buttonDisabledFill: themePrimitives.mono600,
     buttonDisabledText: themePrimitives.mono300,
+    buttonDisabledActiveFill: themePrimitives.mono200,
+    buttonDisabledActiveText: themePrimitives.primary500,
     buttonDisabledSpinnerForeground: themePrimitives.mono200,
     buttonDisabledSpinnerBackground: themePrimitives.mono400,
     // Breadcrumbs
@@ -118,15 +122,15 @@ var _default = function _default() {
     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',
@@ -286,11 +290,16 @@ var _default = function _default() {
     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/themes/dark-theme/color-component-tokens.js.flow

@@ -43,6 +43,8 @@ export default (
   buttonTertiaryActive: themePrimitives.primary600,
   buttonTertiarySelectedText: themePrimitives.primary,
   buttonTertiarySelectedFill: themePrimitives.primary600,
+  buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
+  buttonTertiaryDisabledActiveText: themePrimitives.mono300,
   buttonTertiarySpinnerForeground: themePrimitives.primary50,
   buttonTertiarySpinnerBackground: themePrimitives.primary500,
 
@@ -57,6 +59,8 @@ export default (
 
   buttonDisabledFill: themePrimitives.mono600,
   buttonDisabledText: themePrimitives.mono300,
+  buttonDisabledActiveFill: themePrimitives.mono200,
+  buttonDisabledActiveText: themePrimitives.primary500,
   buttonDisabledSpinnerForeground: themePrimitives.mono200,
   buttonDisabledSpinnerBackground: themePrimitives.mono400,
 
@@ -125,15 +129,15 @@ export default (
 
   // 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
 
@@ -302,11 +306,16 @@ export default (
 
   // 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,

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

@@ -48,6 +48,8 @@ var _default = function _default() {
     buttonTertiaryActive: themePrimitives.primary100,
     buttonTertiarySelectedFill: themePrimitives.primary100,
     buttonTertiarySelectedText: themePrimitives.primary,
+    buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
+    buttonTertiaryDisabledActiveText: themePrimitives.mono600,
     buttonTertiarySpinnerForeground: themePrimitives.accent,
     buttonTertiarySpinnerBackground: themePrimitives.primary100,
     buttonMinimalFill: 'transparent',
@@ -60,6 +62,8 @@ var _default = function _default() {
     buttonMinimalSpinnerBackground: themePrimitives.primary100,
     buttonDisabledFill: themePrimitives.mono200,
     buttonDisabledText: themePrimitives.mono600,
+    buttonDisabledActiveFill: themePrimitives.mono700,
+    buttonDisabledActiveText: themePrimitives.mono100,
     buttonDisabledSpinnerForeground: themePrimitives.mono600,
     buttonDisabledSpinnerBackground: themePrimitives.mono400,
     // Breadcrumbs
@@ -194,15 +198,15 @@ var _default = function _default() {
     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',
@@ -361,11 +365,16 @@ var _default = function _default() {
     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/themes/light-theme/color-component-tokens.js.flow

@@ -43,6 +43,8 @@ export default (
   buttonTertiaryActive: themePrimitives.primary100,
   buttonTertiarySelectedFill: themePrimitives.primary100,
   buttonTertiarySelectedText: themePrimitives.primary,
+  buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
+  buttonTertiaryDisabledActiveText: themePrimitives.mono600,
   buttonTertiarySpinnerForeground: themePrimitives.accent,
   buttonTertiarySpinnerBackground: themePrimitives.primary100,
 
@@ -57,6 +59,8 @@ export default (
 
   buttonDisabledFill: themePrimitives.mono200,
   buttonDisabledText: themePrimitives.mono600,
+  buttonDisabledActiveFill: themePrimitives.mono700,
+  buttonDisabledActiveText: themePrimitives.mono100,
   buttonDisabledSpinnerForeground: themePrimitives.mono600,
   buttonDisabledSpinnerBackground: themePrimitives.mono400,
 
@@ -215,15 +219,15 @@ export default (
 
   // 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
 
@@ -392,11 +396,16 @@ export default (
 
   // 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,

package/themes/types.js.flow

@@ -198,6 +198,8 @@ export type ComponentColorTokensT = {|
   buttonTertiaryActive: string,
   buttonTertiarySelectedText: string,
   buttonTertiarySelectedFill: string,
+  buttonTertiaryDisabledActiveFill: string,
+  buttonTertiaryDisabledActiveText: string,
   buttonTertiarySpinnerForeground: string,
   buttonTertiarySpinnerBackground: string,
   buttonMinimalFill: string,
@@ -210,6 +212,8 @@ export type ComponentColorTokensT = {|
   buttonMinimalSpinnerBackground: string,
   buttonDisabledFill: string,
   buttonDisabledText: string,
+  buttonDisabledActiveFill: string,
+  buttonDisabledActiveText: string,
   buttonDisabledSpinnerForeground: string,
   buttonDisabledSpinnerBackground: string,
 
@@ -524,10 +528,15 @@ export type ComponentColorTokensT = {|
   // Toast
   toastText: string,
   toastPrimaryBackground: string,
+  toastPrimaryText: string,
   toastInfoBackground: string,
+  toastInfoText: string,
   toastPositiveBackground: string,
+  toastPositiveText: string,
   toastWarningBackground: string,
+  toastWarningText: string,
   toastNegativeBackground: string,
+  toastNegativeText: string,
 
   // Spinner
   spinnerTrackFill: string,

package/timezonepicker/timezone-picker.js

@@ -9,15 +9,15 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _index = require("timezone-support/dist/index-1900-2050.js");
-
-var _parseFormat = require("timezone-support/dist/parse-format.js");
+var _dateFnsTz = require("date-fns-tz");
 
 var _overrides = require("../helpers/overrides.js");
 
-var _index2 = require("../locale/index.js");
+var _index = require("../locale/index.js");
+
+var _index2 = require("../select/index.js");
 
-var _index3 = require("../select/index.js");
+var _tzdata = require("./tzdata.js");
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -29,14 +29,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); } }
@@ -81,40 +83,56 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "buildTimezones", function (compareDate) {
-      return (0, _index.listTimeZones)().map(function (zone) {
-        var timezone = (0, _index.findTimeZone)(zone);
-        var zonedTime = (0, _index.getZonedTime)(compareDate, timezone);
-        var offsetTime = (zonedTime.zone.offset < 0 ? '+' : '-') + Math.abs(zonedTime.zone.offset / 60);
-        var abbreviation = (0, _parseFormat.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(_tzdata.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 = (0, _dateFnsTz.getTimezoneOffset)(zoneName, compareDate) / 3600000;
+            var offsetFormatted = "".concat(offset >= 0 ? '+' : '-').concat(Math.abs(offset));
+            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace('_', ' '));
 
-        return option;
-      }) // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
-      .sort(function (a, b) {
+            if (_this.props.includeAbbreviations) {
+              var abbreviation = (0, _dateFnsTz.format)(compareDate, 'zzz', {
+                timeZone: zoneName
+              });
+
+              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;
       });
     });
@@ -176,7 +194,7 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
       var _this$props$overrides = this.props.overrides,
           overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
 
-      var _getOverrides = (0, _overrides.getOverrides)(overrides.Select, _index3.Select),
+      var _getOverrides = (0, _overrides.getOverrides)(overrides.Select, _index2.Select),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
           OverriddenSelect = _getOverrides2[0],
           selectProps = _getOverrides2[1];
@@ -191,10 +209,20 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
       selectProps.overrides); // $FlowFixMe
 
       selectProps.overrides = selectOverrides;
-      return /*#__PURE__*/React.createElement(_index2.LocaleContext.Consumer, null, function (locale) {
+      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(_index.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/timezonepicker/timezone-picker.js.flow

@@ -8,18 +8,18 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 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 type {TimezonePickerPropsT, TimezonePickerStateT} from './types.js';
+import type {
+  TimezonePickerPropsT,
+  TimezonePickerStateT,
+  TimezoneT,
+} from './types.js';
+import {zones} from './tzdata.js';
 
 class TimezonePicker extends React.Component<
   TimezonePickerPropsT,
@@ -57,48 +57,45 @@ class TimezonePicker extends React.Component<
     }
   }
 
-  buildTimezones = (compareDate: Date) =>
-    listTimeZones()
-      .map(zone => {
-        const timezone = findTimeZone(zone);
-        const zonedTime = getZonedTime(compareDate, timezone);
-        const offsetTime =
-          (zonedTime.zone.offset < 0 ? '+' : '-') +
-          Math.abs(zonedTime.zone.offset / 60);
-        const abbreviation = formatZonedTime(zonedTime, 'z');
-        const formatted = `(GMT ${offsetTime}) ${zone}${
-          this.props.includeAbbreviations ? ` - ${abbreviation}` : ''
-        }`.replace('_', ' ');
-
-        const option = {
-          id: zone,
-          label: formatted,
-          offset: zonedTime.zone.offset,
-        };
-        if (this.props.mapLabels) {
-          option.label = this.props.mapLabels(option);
-        }
-        return option;
-      })
-      // Formats 'noisy' timezones without a letter acronym.
-      .map(option => {
-        const rgx = /(\s-\s(\+|-)\d\d\d?\d?)$/;
-        const matches = option.label.match(rgx);
-        if (matches) {
-          const prefix = matches[0];
-          option.label = option.label.split(prefix)[0];
+  buildTimezones = (compareDate: Date): TimezoneT[] => {
+    const timezones: TimezoneT[] = [];
+    for (const zoneName of zones) {
+      try {
+        const offset = getTimezoneOffset(zoneName, compareDate) / 3_600_000;
+
+        const offsetFormatted = `${offset >= 0 ? '+' : '-'}${Math.abs(offset)}`;
+        let label = `(GMT${offsetFormatted}) ${zoneName.replace('_', ' ')}`;
+
+        if (this.props.includeAbbreviations) {
+          const abbreviation = format(compareDate, 'zzz', {timeZone: zoneName});
+          if (abbreviation) {
+            label += ` - ${abbreviation}`;
+          }
         }
-        return option;
-      })
-      // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
-      .sort((a, b) => {
-        const offsetDelta = b.offset - a.offset;
-        if (offsetDelta !== 0) return offsetDelta;
 
+        timezones.push({
+          id: zoneName,
+          label,
+          offset,
+        });
+      } catch (error) {
+        // Ignores timezones that are not available within a user's browser/operating system
+        console.error(`failed to format zone name ${zoneName}`);
+      }
+    }
+
+    // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
+    return timezones.sort((a, b) => {
+      const offsetDelta = b.offset - a.offset;
+      if (offsetDelta !== 0) return offsetDelta;
+
+      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;
-      });
+      }
+      return 0;
+    });
+  };
 
   render() {
     const {overrides = {}} = this.props;
@@ -116,12 +113,21 @@ class TimezonePicker extends React.Component<
     // $FlowFixMe
     selectProps.overrides = selectOverrides;
 
+    let options = this.state.timezones;
+    if (this.props.mapLabels) {
+      options = options.map(option => {
+        // $FlowFixMe - TimezoneT.label is a string, but mapLabels can return a React.Node
+        option.label = this.props.mapLabels(option);
+        return option;
+      });
+    }
+
     return (
       <LocaleContext.Consumer>
         {locale => (
           <OverriddenSelect
             aria-label={locale.datepicker.timezonePickerAriaLabel}
-            options={this.state.timezones}
+            options={options}
             clearable={false}
             disabled={this.props.disabled}
             error={this.props.error}

package/timezonepicker/types.js.flow

@@ -14,7 +14,7 @@ import type {SizeT} from '../input/types.js';
 
 export type TimezonePickerStateT = {
   /** List of timezones from the IANA database. */
-  timezones: OptionT[],
+  timezones: TimezoneT[],
   /** Value provided to the select component. */
   value: ?string,
 };

package/timezonepicker/tzdata.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.zones = void 0;
+
+/* eslint-disable header/header */
+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'];
+exports.zones = zones;