baseui 10.8.0 → 10.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/a11y/a11y.js +2 -2
  2. package/a11y/a11y.js.flow +3 -3
  3. package/button/styled-components.js +47 -18
  4. package/button/styled-components.js.flow +25 -5
  5. package/combobox/combobox.js +6 -3
  6. package/combobox/combobox.js.flow +4 -2
  7. package/combobox/types.js.flow +2 -0
  8. package/data-table/column-categorical.js +1 -1
  9. package/data-table/column-categorical.js.flow +2 -2
  10. package/data-table/column-numerical.js +1 -1
  11. package/data-table/column-numerical.js.flow +3 -3
  12. package/datepicker/styled-components.js +1 -1
  13. package/datepicker/styled-components.js.flow +4 -1
  14. package/drawer/drawer.js +3 -1
  15. package/drawer/drawer.js.flow +7 -1
  16. package/es/a11y/a11y.js +2 -2
  17. package/es/button/styled-components.js +32 -2
  18. package/es/combobox/combobox.js +6 -3
  19. package/es/data-table/column-categorical.js +2 -2
  20. package/es/data-table/column-numerical.js +2 -2
  21. package/es/datepicker/styled-components.js +1 -1
  22. package/es/drawer/drawer.js +3 -1
  23. package/es/form-control/form-control.js +58 -7
  24. package/es/form-control/styled-components.js +27 -6
  25. package/es/index.js +1 -1
  26. package/es/map-marker/badge-enhancer.js +61 -0
  27. package/es/map-marker/constants.js +146 -2
  28. package/es/map-marker/drag-shadow.js +32 -0
  29. package/es/map-marker/fixed-marker.js +54 -48
  30. package/es/map-marker/floating-marker.js +21 -12
  31. package/es/map-marker/index.js +1 -1
  32. package/es/map-marker/label-enhancer.js +39 -0
  33. package/es/map-marker/needle.js +26 -0
  34. package/es/map-marker/pin-head.js +42 -40
  35. package/es/map-marker/styled-components.js +177 -32
  36. package/es/map-marker/types.js +1 -1
  37. package/es/menu/maybe-child-menu.js +0 -2
  38. package/es/menu/nested-menus.js +49 -3
  39. package/es/menu/stateful-container.js +13 -12
  40. package/es/modal/modal.js +3 -1
  41. package/es/popover/popover.js +4 -2
  42. package/es/progress-bar/index.js +1 -1
  43. package/es/progress-bar/progressbar.js +25 -10
  44. package/es/progress-bar/styled-components.js +9 -5
  45. package/es/select/select-component.js +2 -10
  46. package/es/spinner/styled-components.js +34 -16
  47. package/es/table/filter.js +3 -1
  48. package/es/themes/dark-theme/color-component-tokens.js +4 -0
  49. package/es/themes/light-theme/color-component-tokens.js +4 -0
  50. package/es/timezonepicker/timezone-picker.js +55 -36
  51. package/es/timezonepicker/tzdata.js +2 -0
  52. package/es/timezonepicker/update-tzdata.js +69 -0
  53. package/esm/a11y/a11y.js +3 -3
  54. package/esm/button/styled-components.js +47 -18
  55. package/esm/combobox/combobox.js +6 -3
  56. package/esm/data-table/column-categorical.js +2 -2
  57. package/esm/data-table/column-numerical.js +2 -2
  58. package/esm/datepicker/styled-components.js +1 -1
  59. package/esm/drawer/drawer.js +3 -1
  60. package/esm/form-control/form-control.js +60 -9
  61. package/esm/form-control/styled-components.js +23 -3
  62. package/esm/index.js +1 -1
  63. package/esm/map-marker/badge-enhancer.js +79 -0
  64. package/esm/map-marker/constants.js +94 -4
  65. package/esm/map-marker/drag-shadow.js +53 -0
  66. package/esm/map-marker/fixed-marker.js +84 -80
  67. package/esm/map-marker/floating-marker.js +22 -13
  68. package/esm/map-marker/index.js +1 -1
  69. package/esm/map-marker/label-enhancer.js +60 -0
  70. package/esm/map-marker/needle.js +43 -0
  71. package/esm/map-marker/pin-head.js +77 -66
  72. package/esm/map-marker/styled-components.js +182 -51
  73. package/esm/map-marker/types.js +1 -1
  74. package/esm/menu/maybe-child-menu.js +0 -2
  75. package/esm/menu/nested-menus.js +66 -5
  76. package/esm/menu/stateful-container.js +15 -13
  77. package/esm/modal/modal.js +3 -1
  78. package/esm/popover/popover.js +4 -2
  79. package/esm/progress-bar/index.js +1 -1
  80. package/esm/progress-bar/progressbar.js +32 -10
  81. package/esm/progress-bar/styled-components.js +9 -4
  82. package/esm/select/select-component.js +2 -11
  83. package/esm/spinner/styled-components.js +35 -16
  84. package/esm/table/filter.js +3 -1
  85. package/esm/themes/dark-theme/color-component-tokens.js +4 -0
  86. package/esm/themes/light-theme/color-component-tokens.js +4 -0
  87. package/esm/timezonepicker/timezone-picker.js +66 -36
  88. package/esm/timezonepicker/tzdata.js +2 -0
  89. package/esm/timezonepicker/update-tzdata.js +160 -0
  90. package/form-control/form-control.js +61 -8
  91. package/form-control/form-control.js.flow +82 -10
  92. package/form-control/index.d.ts +1 -0
  93. package/form-control/styled-components.js +27 -5
  94. package/form-control/styled-components.js.flow +25 -3
  95. package/form-control/types.js.flow +20 -8
  96. package/index.js +6 -0
  97. package/index.js.flow +1 -1
  98. package/map-marker/badge-enhancer.js +90 -0
  99. package/map-marker/badge-enhancer.js.flow +86 -0
  100. package/map-marker/constants.js +103 -5
  101. package/map-marker/constants.js.flow +152 -0
  102. package/map-marker/drag-shadow.js +64 -0
  103. package/map-marker/drag-shadow.js.flow +52 -0
  104. package/map-marker/fixed-marker.js +84 -78
  105. package/map-marker/fixed-marker.js.flow +78 -66
  106. package/map-marker/floating-marker.js +22 -13
  107. package/map-marker/floating-marker.js.flow +30 -17
  108. package/map-marker/index.d.ts +125 -24
  109. package/map-marker/index.js +18 -0
  110. package/map-marker/index.js.flow +3 -0
  111. package/map-marker/label-enhancer.js +71 -0
  112. package/map-marker/label-enhancer.js.flow +63 -0
  113. package/map-marker/needle.js +54 -0
  114. package/map-marker/needle.js.flow +29 -0
  115. package/map-marker/pin-head.js +80 -69
  116. package/map-marker/pin-head.js.flow +122 -84
  117. package/map-marker/styled-components.js +200 -62
  118. package/map-marker/styled-components.js.flow +172 -22
  119. package/map-marker/types.js.flow +69 -20
  120. package/menu/index.d.ts +9 -4
  121. package/menu/maybe-child-menu.js +0 -2
  122. package/menu/maybe-child-menu.js.flow +0 -2
  123. package/menu/nested-menus.js +66 -5
  124. package/menu/nested-menus.js.flow +50 -5
  125. package/menu/stateful-container.js +15 -13
  126. package/menu/stateful-container.js.flow +19 -13
  127. package/menu/types.js.flow +7 -1
  128. package/modal/modal.js +3 -1
  129. package/modal/modal.js.flow +2 -0
  130. package/package.json +4 -4
  131. package/popover/popover.js +4 -2
  132. package/popover/popover.js.flow +3 -1
  133. package/progress-bar/index.d.ts +2 -0
  134. package/progress-bar/index.js +6 -0
  135. package/progress-bar/index.js.flow +1 -0
  136. package/progress-bar/progressbar.js +32 -10
  137. package/progress-bar/progressbar.js.flow +35 -9
  138. package/progress-bar/styled-components.js +9 -4
  139. package/progress-bar/styled-components.js.flow +15 -4
  140. package/progress-bar/types.js.flow +12 -2
  141. package/select/select-component.js +2 -11
  142. package/select/select-component.js.flow +5 -7
  143. package/spinner/styled-components.js +35 -16
  144. package/spinner/styled-components.js.flow +37 -19
  145. package/spinner/types.js.flow +10 -0
  146. package/styles/index.js.flow +1 -1
  147. package/table/filter.js +3 -1
  148. package/table/filter.js.flow +5 -1
  149. package/themes/dark-theme/color-component-tokens.js +4 -0
  150. package/themes/dark-theme/color-component-tokens.js.flow +4 -0
  151. package/themes/light-theme/color-component-tokens.js +4 -0
  152. package/themes/light-theme/color-component-tokens.js.flow +4 -0
  153. package/themes/types.js.flow +4 -0
  154. package/timezonepicker/timezone-picker.js +71 -41
  155. package/timezonepicker/timezone-picker.js.flow +55 -46
  156. package/timezonepicker/types.js.flow +6 -1
  157. package/timezonepicker/tzdata.js +10 -0
  158. package/timezonepicker/tzdata.js.flow +347 -0
  159. package/timezonepicker/update-tzdata.js +164 -0
  160. package/timezonepicker/update-tzdata.js.flow +70 -0
@@ -43,6 +43,8 @@ export default (
43
43
  buttonTertiaryActive: themePrimitives.primary600,
44
44
  buttonTertiarySelectedText: themePrimitives.primary,
45
45
  buttonTertiarySelectedFill: themePrimitives.primary600,
46
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
47
+ buttonTertiaryDisabledActiveText: themePrimitives.mono300,
46
48
  buttonTertiarySpinnerForeground: themePrimitives.primary50,
47
49
  buttonTertiarySpinnerBackground: themePrimitives.primary500,
48
50
 
@@ -57,6 +59,8 @@ export default (
57
59
 
58
60
  buttonDisabledFill: themePrimitives.mono600,
59
61
  buttonDisabledText: themePrimitives.mono300,
62
+ buttonDisabledActiveFill: themePrimitives.mono200,
63
+ buttonDisabledActiveText: themePrimitives.primary500,
60
64
  buttonDisabledSpinnerForeground: themePrimitives.mono200,
61
65
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
62
66
 
@@ -48,6 +48,8 @@ var _default = function _default() {
48
48
  buttonTertiaryActive: themePrimitives.primary100,
49
49
  buttonTertiarySelectedFill: themePrimitives.primary100,
50
50
  buttonTertiarySelectedText: themePrimitives.primary,
51
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
52
+ buttonTertiaryDisabledActiveText: themePrimitives.mono600,
51
53
  buttonTertiarySpinnerForeground: themePrimitives.accent,
52
54
  buttonTertiarySpinnerBackground: themePrimitives.primary100,
53
55
  buttonMinimalFill: 'transparent',
@@ -60,6 +62,8 @@ var _default = function _default() {
60
62
  buttonMinimalSpinnerBackground: themePrimitives.primary100,
61
63
  buttonDisabledFill: themePrimitives.mono200,
62
64
  buttonDisabledText: themePrimitives.mono600,
65
+ buttonDisabledActiveFill: themePrimitives.mono700,
66
+ buttonDisabledActiveText: themePrimitives.mono100,
63
67
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
64
68
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
65
69
  // Breadcrumbs
@@ -43,6 +43,8 @@ export default (
43
43
  buttonTertiaryActive: themePrimitives.primary100,
44
44
  buttonTertiarySelectedFill: themePrimitives.primary100,
45
45
  buttonTertiarySelectedText: themePrimitives.primary,
46
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
47
+ buttonTertiaryDisabledActiveText: themePrimitives.mono600,
46
48
  buttonTertiarySpinnerForeground: themePrimitives.accent,
47
49
  buttonTertiarySpinnerBackground: themePrimitives.primary100,
48
50
 
@@ -57,6 +59,8 @@ export default (
57
59
 
58
60
  buttonDisabledFill: themePrimitives.mono200,
59
61
  buttonDisabledText: themePrimitives.mono600,
62
+ buttonDisabledActiveFill: themePrimitives.mono700,
63
+ buttonDisabledActiveText: themePrimitives.mono100,
60
64
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
61
65
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
62
66
 
@@ -198,6 +198,8 @@ export type ComponentColorTokensT = {|
198
198
  buttonTertiaryActive: string,
199
199
  buttonTertiarySelectedText: string,
200
200
  buttonTertiarySelectedFill: string,
201
+ buttonTertiaryDisabledActiveFill: string,
202
+ buttonTertiaryDisabledActiveText: string,
201
203
  buttonTertiarySpinnerForeground: string,
202
204
  buttonTertiarySpinnerBackground: string,
203
205
  buttonMinimalFill: string,
@@ -210,6 +212,8 @@ export type ComponentColorTokensT = {|
210
212
  buttonMinimalSpinnerBackground: string,
211
213
  buttonDisabledFill: string,
212
214
  buttonDisabledText: string,
215
+ buttonDisabledActiveFill: string,
216
+ buttonDisabledActiveText: string,
213
217
  buttonDisabledSpinnerForeground: string,
214
218
  buttonDisabledSpinnerBackground: string,
215
219
 
@@ -9,15 +9,15 @@ exports.default = void 0;
9
9
 
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
 
12
- var _index = require("timezone-support/dist/index-1900-2050.js");
13
-
14
- var _parseFormat = require("timezone-support/dist/parse-format.js");
12
+ var _dateFnsTz = require("date-fns-tz");
15
13
 
16
14
  var _overrides = require("../helpers/overrides.js");
17
15
 
18
- var _index2 = require("../locale/index.js");
16
+ var _index = require("../locale/index.js");
17
+
18
+ var _index2 = require("../select/index.js");
19
19
 
20
- var _index3 = require("../select/index.js");
20
+ var _tzdata = require("./tzdata.js");
21
21
 
22
22
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
23
23
 
@@ -29,14 +29,16 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
29
29
 
30
30
  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."); }
31
31
 
32
- 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); }
33
-
34
- 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; }
35
-
36
32
  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; }
37
33
 
38
34
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
39
35
 
36
+ 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; } } }; }
37
+
38
+ 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); }
39
+
40
+ 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; }
41
+
40
42
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
41
43
 
42
44
  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,58 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
81
83
  });
82
84
 
83
85
  _defineProperty(_assertThisInitialized(_this), "buildTimezones", function (compareDate) {
84
- return (0, _index.listTimeZones)().map(function (zone) {
85
- var timezone = (0, _index.findTimeZone)(zone);
86
- var zonedTime = (0, _index.getZonedTime)(compareDate, timezone);
87
- var offsetTime = (zonedTime.zone.offset < 0 ? '+' : '-') + Math.abs(zonedTime.zone.offset / 60);
88
- var abbreviation = (0, _parseFormat.formatZonedTime)(zonedTime, 'z');
89
- var formatted = "(GMT ".concat(offsetTime, ") ").concat(zone).concat(_this.props.includeAbbreviations ? " - ".concat(abbreviation) : '').replace('_', ' ');
90
- var option = {
91
- id: zone,
92
- label: formatted,
93
- offset: zonedTime.zone.offset
94
- };
95
-
96
- if (_this.props.mapLabels) {
97
- option.label = _this.props.mapLabels(option);
98
- }
86
+ var timezones = [];
99
87
 
100
- return option;
101
- }) // Formats 'noisy' timezones without a letter acronym.
102
- .map(function (option) {
103
- var rgx = /(\s-\s(\+|-)\d\d\d?\d?)$/;
104
- var matches = option.label.match(rgx);
88
+ var _iterator = _createForOfIteratorHelper(_tzdata.zones),
89
+ _step;
105
90
 
106
- if (matches) {
107
- var prefix = matches[0];
108
- option.label = option.label.split(prefix)[0];
109
- }
91
+ try {
92
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
93
+ var zoneName = _step.value;
94
+
95
+ try {
96
+ var offset = (0, _dateFnsTz.getTimezoneOffset)(zoneName, compareDate) / 3600000;
97
+ var offsetFormatted = "".concat(offset >= 0 ? '+' : '-').concat(Math.abs(offset));
98
+ var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace('_', ' '));
110
99
 
111
- return option;
112
- }) // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
113
- .sort(function (a, b) {
100
+ if (_this.props.includeAbbreviations) {
101
+ var abbreviation = (0, _dateFnsTz.format)(compareDate, 'zzz', {
102
+ timeZone: zoneName
103
+ });
104
+
105
+ if (abbreviation) {
106
+ label += " - ".concat(abbreviation);
107
+ }
108
+ }
109
+
110
+ var offsetMinutes = offset * 60;
111
+ timezones.push({
112
+ id: zoneName,
113
+ label: label,
114
+ // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
115
+ offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1
116
+ });
117
+ } catch (error) {
118
+ // Ignores timezones that are not available within a user's browser/operating system
119
+ console.error("failed to format zone name ".concat(zoneName));
120
+ }
121
+ } // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
122
+
123
+ } catch (err) {
124
+ _iterator.e(err);
125
+ } finally {
126
+ _iterator.f();
127
+ }
128
+
129
+ return timezones.sort(function (a, b) {
114
130
  var offsetDelta = b.offset - a.offset;
115
131
  if (offsetDelta !== 0) return offsetDelta;
116
- if (a.label < b.label) return -1;
117
- if (a.label > b.label) return 1;
132
+
133
+ if (typeof a.label === 'string' && typeof b.label === 'string') {
134
+ if (a.label < b.label) return -1;
135
+ if (a.label > b.label) return 1;
136
+ }
137
+
118
138
  return 0;
119
139
  });
120
140
  });
@@ -176,7 +196,7 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
176
196
  var _this$props$overrides = this.props.overrides,
177
197
  overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
178
198
 
179
- var _getOverrides = (0, _overrides.getOverrides)(overrides.Select, _index3.Select),
199
+ var _getOverrides = (0, _overrides.getOverrides)(overrides.Select, _index2.Select),
180
200
  _getOverrides2 = _slicedToArray(_getOverrides, 2),
181
201
  OverriddenSelect = _getOverrides2[0],
182
202
  selectProps = _getOverrides2[1];
@@ -191,10 +211,20 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
191
211
  selectProps.overrides); // $FlowFixMe
192
212
 
193
213
  selectProps.overrides = selectOverrides;
194
- return /*#__PURE__*/React.createElement(_index2.LocaleContext.Consumer, null, function (locale) {
214
+ var options = this.state.timezones;
215
+
216
+ if (this.props.mapLabels) {
217
+ options = options.map(function (option) {
218
+ // $FlowFixMe - TimezoneT.label is a string, but mapLabels can return a React.Node
219
+ option.label = _this3.props.mapLabels(option);
220
+ return option;
221
+ });
222
+ }
223
+
224
+ return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
195
225
  return /*#__PURE__*/React.createElement(OverriddenSelect, _extends({
196
226
  "aria-label": locale.datepicker.timezonePickerAriaLabel,
197
- options: _this3.state.timezones,
227
+ options: options,
198
228
  clearable: false,
199
229
  disabled: _this3.props.disabled,
200
230
  error: _this3.props.error,
@@ -8,18 +8,18 @@ LICENSE file in the root directory of this source tree.
8
8
  // @flow
9
9
 
10
10
  import * as React from 'react';
11
- import {
12
- findTimeZone,
13
- getZonedTime,
14
- listTimeZones,
15
- } from 'timezone-support/dist/index-1900-2050.js';
16
- import {formatZonedTime} from 'timezone-support/dist/parse-format.js';
11
+ import {format, getTimezoneOffset} from 'date-fns-tz';
17
12
 
18
13
  import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
19
14
  import {LocaleContext} from '../locale/index.js';
20
15
  import {Select} from '../select/index.js';
21
16
 
22
- import type {TimezonePickerPropsT, TimezonePickerStateT} from './types.js';
17
+ import type {
18
+ TimezonePickerPropsT,
19
+ TimezonePickerStateT,
20
+ TimezoneT,
21
+ } from './types.js';
22
+ import {zones} from './tzdata.js';
23
23
 
24
24
  class TimezonePicker extends React.Component<
25
25
  TimezonePickerPropsT,
@@ -57,48 +57,48 @@ class TimezonePicker extends React.Component<
57
57
  }
58
58
  }
59
59
 
60
- buildTimezones = (compareDate: Date) =>
61
- listTimeZones()
62
- .map(zone => {
63
- const timezone = findTimeZone(zone);
64
- const zonedTime = getZonedTime(compareDate, timezone);
65
- const offsetTime =
66
- (zonedTime.zone.offset < 0 ? '+' : '-') +
67
- Math.abs(zonedTime.zone.offset / 60);
68
- const abbreviation = formatZonedTime(zonedTime, 'z');
69
- const formatted = `(GMT ${offsetTime}) ${zone}${
70
- this.props.includeAbbreviations ? ` - ${abbreviation}` : ''
71
- }`.replace('_', ' ');
72
-
73
- const option = {
74
- id: zone,
75
- label: formatted,
76
- offset: zonedTime.zone.offset,
77
- };
78
- if (this.props.mapLabels) {
79
- option.label = this.props.mapLabels(option);
80
- }
81
- return option;
82
- })
83
- // Formats 'noisy' timezones without a letter acronym.
84
- .map(option => {
85
- const rgx = /(\s-\s(\+|-)\d\d\d?\d?)$/;
86
- const matches = option.label.match(rgx);
87
- if (matches) {
88
- const prefix = matches[0];
89
- option.label = option.label.split(prefix)[0];
60
+ buildTimezones = (compareDate: Date): TimezoneT[] => {
61
+ const timezones: TimezoneT[] = [];
62
+ for (const zoneName of zones) {
63
+ try {
64
+ const offset = getTimezoneOffset(zoneName, compareDate) / 3_600_000;
65
+
66
+ const offsetFormatted = `${offset >= 0 ? '+' : '-'}${Math.abs(offset)}`;
67
+ let label = `(GMT${offsetFormatted}) ${zoneName.replace('_', ' ')}`;
68
+
69
+ if (this.props.includeAbbreviations) {
70
+ const abbreviation = format(compareDate, 'zzz', {timeZone: zoneName});
71
+ if (abbreviation) {
72
+ label += ` - ${abbreviation}`;
73
+ }
90
74
  }
91
- return option;
92
- })
93
- // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
94
- .sort((a, b) => {
95
- const offsetDelta = b.offset - a.offset;
96
- if (offsetDelta !== 0) return offsetDelta;
97
75
 
76
+ const offsetMinutes = offset * 60;
77
+
78
+ timezones.push({
79
+ id: zoneName,
80
+ label,
81
+ // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
82
+ offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1,
83
+ });
84
+ } catch (error) {
85
+ // Ignores timezones that are not available within a user's browser/operating system
86
+ console.error(`failed to format zone name ${zoneName}`);
87
+ }
88
+ }
89
+
90
+ // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
91
+ return timezones.sort((a, b) => {
92
+ const offsetDelta = b.offset - a.offset;
93
+ if (offsetDelta !== 0) return offsetDelta;
94
+
95
+ if (typeof a.label === 'string' && typeof b.label === 'string') {
98
96
  if (a.label < b.label) return -1;
99
97
  if (a.label > b.label) return 1;
100
- return 0;
101
- });
98
+ }
99
+ return 0;
100
+ });
101
+ };
102
102
 
103
103
  render() {
104
104
  const {overrides = {}} = this.props;
@@ -116,12 +116,21 @@ class TimezonePicker extends React.Component<
116
116
  // $FlowFixMe
117
117
  selectProps.overrides = selectOverrides;
118
118
 
119
+ let options = this.state.timezones;
120
+ if (this.props.mapLabels) {
121
+ options = options.map(option => {
122
+ // $FlowFixMe - TimezoneT.label is a string, but mapLabels can return a React.Node
123
+ option.label = this.props.mapLabels(option);
124
+ return option;
125
+ });
126
+ }
127
+
119
128
  return (
120
129
  <LocaleContext.Consumer>
121
130
  {locale => (
122
131
  <OverriddenSelect
123
132
  aria-label={locale.datepicker.timezonePickerAriaLabel}
124
- options={this.state.timezones}
133
+ options={options}
125
134
  clearable={false}
126
135
  disabled={this.props.disabled}
127
136
  error={this.props.error}
@@ -14,7 +14,7 @@ import type {SizeT} from '../input/types.js';
14
14
 
15
15
  export type TimezonePickerStateT = {
16
16
  /** List of timezones from the IANA database. */
17
- timezones: OptionT[],
17
+ timezones: TimezoneT[],
18
18
  /** Value provided to the select component. */
19
19
  value: ?string,
20
20
  };
@@ -22,6 +22,11 @@ export type TimezonePickerStateT = {
22
22
  export type TimezoneT = {
23
23
  id: string,
24
24
  label: string,
25
+ /**
26
+ * The difference, in minutes, between a UTC date, and a date in the indicated time zone.
27
+ * Positive values indicate hours behind UTC, negative values indicate hours ahead.
28
+ * This aligns with Date.getTimezoneOffset()
29
+ */
25
30
  offset: number,
26
31
  };
27
32
  export type TimezonePickerPropsT = {
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.zones = void 0;
7
+
8
+ /* eslint-disable header/header */
9
+ 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'];
10
+ exports.zones = zones;