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
@@ -72,11 +72,16 @@ export var StyledBarProgress = styled('div', function (props) {
72
72
  $value = props.$value,
73
73
  $successValue = props.$successValue,
74
74
  $steps = props.$steps,
75
- $index = props.$index;
75
+ $index = props.$index,
76
+ $maxValue = props.$maxValue,
77
+ _props$$minValue = props.$minValue,
78
+ $minValue = _props$$minValue === void 0 ? 0 : _props$$minValue; // making sure this doesn't break existing use that use StyledBarProgress directly
79
+
80
+ var maxValue = $maxValue ? $maxValue : $successValue;
76
81
  var colors = $theme.colors,
77
82
  sizing = $theme.sizing,
78
83
  borders = $theme.borders;
79
- var width = "".concat(100 - $value / $successValue * 100, "%");
84
+ var width = "".concat(100 - ($value - $minValue) * 100 / (maxValue - $minValue), "%");
80
85
  var stepStates = {
81
86
  default: 'default',
82
87
  awaits: 'awaits',
@@ -86,8 +91,8 @@ export var StyledBarProgress = styled('div', function (props) {
86
91
  var stepState = stepStates.default;
87
92
 
88
93
  if ($steps > 1) {
89
- var stepValue = $successValue / $steps;
90
- var currentValue = $value / $successValue * 100;
94
+ var stepValue = (maxValue - $minValue) / $steps;
95
+ var currentValue = ($value - $minValue) / (maxValue - $minValue) * 100;
91
96
  var completedSteps = Math.floor(currentValue / stepValue);
92
97
 
93
98
  if ($index < completedSteps) {
@@ -183,12 +183,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
183
183
  _this.handleClick(event);
184
184
  });
185
185
 
186
- _defineProperty(_assertThisInitialized(_this), "handleTouchEndClearValue", function (event) {
187
- if (_this.dragging) return;
188
-
189
- _this.clearValue(event);
190
- });
191
-
192
186
  _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
193
187
  if (_this.props.disabled || !isClick(event) && !isLeftClick(event)) {
194
188
  return;
@@ -865,7 +859,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
865
859
  "aria-required": this.props.required || null,
866
860
  onFocus: this.handleInputFocus,
867
861
  tabIndex: 0
868
- }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
862
+ }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
869
863
  "aria-hidden": true,
870
864
  id: this.props.id || null,
871
865
  ref: this.handleInputRef,
@@ -877,7 +871,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
877
871
  padding: 0
878
872
  },
879
873
  tabIndex: -1
880
- }));
874
+ }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
881
875
  }
882
876
 
883
877
  return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
@@ -929,9 +923,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
929
923
  title: ariaLabel,
930
924
  "aria-label": ariaLabel,
931
925
  onClick: this.clearValue,
932
- onTouchEnd: this.handleTouchEndClearValue,
933
- onTouchMove: this.handleTouchMove,
934
- onTouchStart: this.handleTouchStart,
935
926
  role: "button",
936
927
  overrides: {
937
928
  Svg: {
@@ -54,13 +54,40 @@ export var StyledActivePath = styled('path', function (props) {
54
54
  StyledActivePath.displayName = "StyledActivePath";
55
55
  export var StyledSpinnerNext = styled('i', function (_ref) {
56
56
  var $theme = _ref.$theme,
57
+ _ref$$color = _ref.$color,
58
+ $color = _ref$$color === void 0 ? $theme.colors.contentAccent : _ref$$color,
59
+ $borderWidth = _ref.$borderWidth,
57
60
  _ref$$size = _ref.$size,
58
61
  $size = _ref$$size === void 0 ? SIZE.medium : _ref$$size;
59
- var borderWidth = {
62
+ //$FlowFixMe
63
+ var borderSize = {
60
64
  large: $theme.sizing.scale300,
61
65
  medium: $theme.sizing.scale100,
62
66
  small: $theme.sizing.scale0
67
+ }[$borderWidth || $size];
68
+ var boxSize = {
69
+ large: $theme.sizing.scale1000,
70
+ medium: $theme.sizing.scale900,
71
+ small: $theme.sizing.scale800
63
72
  }[$size];
73
+
74
+ if (!borderSize) {
75
+ borderSize = $theme.sizing[$borderWidth];
76
+
77
+ if (!borderSize) {
78
+ borderSize = "".concat(parseInt($borderWidth), "px");
79
+ }
80
+ }
81
+
82
+ if (!boxSize) {
83
+ //$FlowFixMe
84
+ boxSize = $theme.sizing[$size];
85
+
86
+ if (!boxSize) {
87
+ boxSize = "".concat(parseInt($size), "px");
88
+ }
89
+ }
90
+
64
91
  return {
65
92
  display: 'block',
66
93
  animationName: spin,
@@ -72,24 +99,16 @@ export var StyledSpinnerNext = styled('i', function (_ref) {
72
99
  borderTopStyle: 'solid',
73
100
  borderBottomStyle: 'solid',
74
101
  borderRadius: '50%',
75
- borderTopColor: $theme.colors.contentAccent,
102
+ borderTopColor: $color,
76
103
  borderRightColor: $theme.colors.backgroundTertiary,
77
104
  borderBottomColor: $theme.colors.backgroundTertiary,
78
105
  borderLeftColor: $theme.colors.backgroundTertiary,
79
- borderLeftWidth: borderWidth,
80
- borderRightWidth: borderWidth,
81
- borderTopWidth: borderWidth,
82
- borderBottomWidth: borderWidth,
83
- width: {
84
- large: $theme.sizing.scale1000,
85
- medium: $theme.sizing.scale900,
86
- small: $theme.sizing.scale800
87
- }[$size],
88
- height: {
89
- large: $theme.sizing.scale1000,
90
- medium: $theme.sizing.scale900,
91
- small: $theme.sizing.scale800
92
- }[$size],
106
+ borderLeftWidth: borderSize,
107
+ borderRightWidth: borderSize,
108
+ borderTopWidth: borderSize,
109
+ borderBottomWidth: borderSize,
110
+ width: boxSize,
111
+ height: boxSize,
93
112
  cursor: 'wait'
94
113
  };
95
114
  });
@@ -75,7 +75,9 @@ export default function Filter(props) {
75
75
  content: function content(_ref) {
76
76
  var close = _ref.close;
77
77
  return /*#__PURE__*/React.createElement(FocusLock, {
78
- autoFocus: false
78
+ autoFocus: false // Allow focus to escape when UI is within an iframe
79
+ ,
80
+ crossFrame: false
79
81
  }, /*#__PURE__*/React.createElement(Heading, headingProps, "Filter Column"), /*#__PURE__*/React.createElement(Content, contentProps, props.children), /*#__PURE__*/React.createElement(Footer, footerProps, /*#__PURE__*/React.createElement(Button, {
80
82
  kind: KIND.minimal,
81
83
  size: SIZE.compact,
@@ -38,6 +38,8 @@ export default (function () {
38
38
  buttonTertiaryActive: themePrimitives.primary600,
39
39
  buttonTertiarySelectedText: themePrimitives.primary,
40
40
  buttonTertiarySelectedFill: themePrimitives.primary600,
41
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
42
+ buttonTertiaryDisabledActiveText: themePrimitives.mono300,
41
43
  buttonTertiarySpinnerForeground: themePrimitives.primary50,
42
44
  buttonTertiarySpinnerBackground: themePrimitives.primary500,
43
45
  buttonMinimalFill: 'transparent',
@@ -50,6 +52,8 @@ export default (function () {
50
52
  buttonMinimalSpinnerBackground: themePrimitives.primary500,
51
53
  buttonDisabledFill: themePrimitives.mono600,
52
54
  buttonDisabledText: themePrimitives.mono300,
55
+ buttonDisabledActiveFill: themePrimitives.mono200,
56
+ buttonDisabledActiveText: themePrimitives.primary500,
53
57
  buttonDisabledSpinnerForeground: themePrimitives.mono200,
54
58
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
55
59
  // Breadcrumbs
@@ -38,6 +38,8 @@ export default (function () {
38
38
  buttonTertiaryActive: themePrimitives.primary100,
39
39
  buttonTertiarySelectedFill: themePrimitives.primary100,
40
40
  buttonTertiarySelectedText: themePrimitives.primary,
41
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
42
+ buttonTertiaryDisabledActiveText: themePrimitives.mono600,
41
43
  buttonTertiarySpinnerForeground: themePrimitives.accent,
42
44
  buttonTertiarySpinnerBackground: themePrimitives.primary100,
43
45
  buttonMinimalFill: 'transparent',
@@ -50,6 +52,8 @@ export default (function () {
50
52
  buttonMinimalSpinnerBackground: themePrimitives.primary100,
51
53
  buttonDisabledFill: themePrimitives.mono200,
52
54
  buttonDisabledText: themePrimitives.mono600,
55
+ buttonDisabledActiveFill: themePrimitives.mono700,
56
+ buttonDisabledActiveText: themePrimitives.mono100,
53
57
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
54
58
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
55
59
  // Breadcrumbs
@@ -6,14 +6,16 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
6
6
 
7
7
  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."); }
8
8
 
9
- 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); }
10
-
11
- 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; }
12
-
13
9
  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; }
14
10
 
15
11
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
16
12
 
13
+ 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; } } }; }
14
+
15
+ 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); }
16
+
17
+ 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; }
18
+
17
19
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
18
20
 
19
21
  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.
44
46
  */
45
47
  // global Intl
46
48
  import * as React from 'react';
47
- import { findTimeZone, getZonedTime, listTimeZones } from 'timezone-support/dist/index-1900-2050.js';
48
- import { formatZonedTime } from 'timezone-support/dist/parse-format.js';
49
+ import { format, getTimezoneOffset } from 'date-fns-tz';
49
50
  import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
50
51
  import { LocaleContext } from '../locale/index.js';
51
52
  import { Select } from '../select/index.js';
53
+ import { zones } from './tzdata.js';
52
54
 
53
55
  var TimezonePicker = /*#__PURE__*/function (_React$Component) {
54
56
  _inherits(TimezonePicker, _React$Component);
@@ -72,40 +74,58 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
72
74
  });
73
75
 
74
76
  _defineProperty(_assertThisInitialized(_this), "buildTimezones", function (compareDate) {
75
- return listTimeZones().map(function (zone) {
76
- var timezone = findTimeZone(zone);
77
- var zonedTime = getZonedTime(compareDate, timezone);
78
- var offsetTime = (zonedTime.zone.offset < 0 ? '+' : '-') + Math.abs(zonedTime.zone.offset / 60);
79
- var abbreviation = formatZonedTime(zonedTime, 'z');
80
- var formatted = "(GMT ".concat(offsetTime, ") ").concat(zone).concat(_this.props.includeAbbreviations ? " - ".concat(abbreviation) : '').replace('_', ' ');
81
- var option = {
82
- id: zone,
83
- label: formatted,
84
- offset: zonedTime.zone.offset
85
- };
86
-
87
- if (_this.props.mapLabels) {
88
- option.label = _this.props.mapLabels(option);
89
- }
77
+ var timezones = [];
90
78
 
91
- return option;
92
- }) // Formats 'noisy' timezones without a letter acronym.
93
- .map(function (option) {
94
- var rgx = /(\s-\s(\+|-)\d\d\d?\d?)$/;
95
- var matches = option.label.match(rgx);
79
+ var _iterator = _createForOfIteratorHelper(zones),
80
+ _step;
96
81
 
97
- if (matches) {
98
- var prefix = matches[0];
99
- option.label = option.label.split(prefix)[0];
100
- }
82
+ try {
83
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
84
+ var zoneName = _step.value;
85
+
86
+ try {
87
+ var offset = getTimezoneOffset(zoneName, compareDate) / 3600000;
88
+ var offsetFormatted = "".concat(offset >= 0 ? '+' : '-').concat(Math.abs(offset));
89
+ var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace('_', ' '));
90
+
91
+ if (_this.props.includeAbbreviations) {
92
+ var abbreviation = format(compareDate, 'zzz', {
93
+ timeZone: zoneName
94
+ });
101
95
 
102
- return option;
103
- }) // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
104
- .sort(function (a, b) {
96
+ if (abbreviation) {
97
+ label += " - ".concat(abbreviation);
98
+ }
99
+ }
100
+
101
+ var offsetMinutes = offset * 60;
102
+ timezones.push({
103
+ id: zoneName,
104
+ label: label,
105
+ // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
106
+ offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1
107
+ });
108
+ } catch (error) {
109
+ // Ignores timezones that are not available within a user's browser/operating system
110
+ console.error("failed to format zone name ".concat(zoneName));
111
+ }
112
+ } // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
113
+
114
+ } catch (err) {
115
+ _iterator.e(err);
116
+ } finally {
117
+ _iterator.f();
118
+ }
119
+
120
+ return timezones.sort(function (a, b) {
105
121
  var offsetDelta = b.offset - a.offset;
106
122
  if (offsetDelta !== 0) return offsetDelta;
107
- if (a.label < b.label) return -1;
108
- if (a.label > b.label) return 1;
123
+
124
+ if (typeof a.label === 'string' && typeof b.label === 'string') {
125
+ if (a.label < b.label) return -1;
126
+ if (a.label > b.label) return 1;
127
+ }
128
+
109
129
  return 0;
110
130
  });
111
131
  });
@@ -182,10 +202,20 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
182
202
  selectProps.overrides); // $FlowFixMe
183
203
 
184
204
  selectProps.overrides = selectOverrides;
205
+ var options = this.state.timezones;
206
+
207
+ if (this.props.mapLabels) {
208
+ options = options.map(function (option) {
209
+ // $FlowFixMe - TimezoneT.label is a string, but mapLabels can return a React.Node
210
+ option.label = _this3.props.mapLabels(option);
211
+ return option;
212
+ });
213
+ }
214
+
185
215
  return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
186
216
  return /*#__PURE__*/React.createElement(OverriddenSelect, _extends({
187
217
  "aria-label": locale.datepicker.timezonePickerAriaLabel,
188
- options: _this3.state.timezones,
218
+ options: options,
189
219
  clearable: false,
190
220
  disabled: _this3.props.disabled,
191
221
  error: _this3.props.error,
@@ -0,0 +1,2 @@
1
+ /* eslint-disable header/header */
2
+ 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'];
@@ -0,0 +1,160 @@
1
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
2
+
3
+ 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(_e) { throw _e; }, 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(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
4
+
5
+ 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); }
6
+
7
+ 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; }
8
+
9
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
10
+
11
+ function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
12
+
13
+ /*
14
+ Copyright (c) Uber Technologies, Inc.
15
+
16
+ This source code is licensed under the MIT license found in the
17
+ LICENSE file in the root directory of this source tree.
18
+ */
19
+
20
+ /* eslint-env node */
21
+ var fs = require('fs');
22
+
23
+ var path = require('path');
24
+
25
+ var util = require('util');
26
+
27
+ var exec = util.promisify(require('child_process').exec); // Download tzdata and collect a list of timezones. Baseui previously used a library
28
+ // to do this, but it grew stale and unmaintained. This approach is straightforward
29
+ // enough to update whenever necessary, but future improvements could include building
30
+ // this data set before baseui is published so that the data is always fresh.
31
+
32
+ function main() {
33
+ return _main.apply(this, arguments);
34
+ }
35
+
36
+ function _main() {
37
+ _main = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
38
+ var tmpDir, src, zoneTabPath, content, lines, zones, _iterator, _step, line, parts, file, _i, _zones, zone, tzdataPath;
39
+
40
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
41
+ while (1) {
42
+ switch (_context.prev = _context.next) {
43
+ case 0:
44
+ _context.prev = 0;
45
+ tmpDir = path.join(__dirname, 'tmp'); // $FlowFixMe - flow is not aware of recursive option
46
+
47
+ _context.next = 4;
48
+ return fs.promises.rmdir(tmpDir, {
49
+ recursive: true
50
+ });
51
+
52
+ case 4:
53
+ _context.next = 6;
54
+ return fs.promises.mkdir(tmpDir);
55
+
56
+ case 6:
57
+ src = "https://www.iana.org/time-zones/repository/tzdata-latest.tar.gz";
58
+ _context.next = 9;
59
+ return exec("curl -L ".concat(src, " | gzip -dc | tar -xf - --directory ").concat(tmpDir));
60
+
61
+ case 9:
62
+ zoneTabPath = path.join(tmpDir, 'zone1970.tab');
63
+ _context.next = 12;
64
+ return fs.promises.readFile(zoneTabPath, 'utf-8');
65
+
66
+ case 12:
67
+ content = _context.sent;
68
+ lines = content.split('\n');
69
+ zones = [];
70
+ _iterator = _createForOfIteratorHelper(lines);
71
+ _context.prev = 16;
72
+
73
+ _iterator.s();
74
+
75
+ case 18:
76
+ if ((_step = _iterator.n()).done) {
77
+ _context.next = 26;
78
+ break;
79
+ }
80
+
81
+ line = _step.value;
82
+
83
+ if (!(line[0] === '#')) {
84
+ _context.next = 22;
85
+ break;
86
+ }
87
+
88
+ return _context.abrupt("continue", 24);
89
+
90
+ case 22:
91
+ parts = line.split(/\s+/);
92
+
93
+ if (parts.length >= 3) {
94
+ zones.push(parts[2]);
95
+ }
96
+
97
+ case 24:
98
+ _context.next = 18;
99
+ break;
100
+
101
+ case 26:
102
+ _context.next = 31;
103
+ break;
104
+
105
+ case 28:
106
+ _context.prev = 28;
107
+ _context.t0 = _context["catch"](16);
108
+
109
+ _iterator.e(_context.t0);
110
+
111
+ case 31:
112
+ _context.prev = 31;
113
+
114
+ _iterator.f();
115
+
116
+ return _context.finish(31);
117
+
118
+ case 34:
119
+ file = [];
120
+ file.push('/* eslint-disable header/header */');
121
+ file.push('// @flow');
122
+ file.push('');
123
+ file.push('export const zones = [');
124
+
125
+ for (_i = 0, _zones = zones; _i < _zones.length; _i++) {
126
+ zone = _zones[_i];
127
+ file.push(" '".concat(zone, "',"));
128
+ }
129
+
130
+ file.push('];');
131
+ tzdataPath = path.join(__dirname, 'tzdata.js');
132
+ _context.next = 44;
133
+ return fs.promises.writeFile(tzdataPath, file.join('\n'));
134
+
135
+ case 44:
136
+ _context.next = 46;
137
+ return fs.promises.rmdir(tmpDir, {
138
+ recursive: true
139
+ });
140
+
141
+ case 46:
142
+ _context.next = 51;
143
+ break;
144
+
145
+ case 48:
146
+ _context.prev = 48;
147
+ _context.t1 = _context["catch"](0);
148
+ console.error(_context.t1);
149
+
150
+ case 51:
151
+ case "end":
152
+ return _context.stop();
153
+ }
154
+ }
155
+ }, _callee, null, [[0, 48], [16, 28, 31, 34]]);
156
+ }));
157
+ return _main.apply(this, arguments);
158
+ }
159
+
160
+ main();
@@ -1,7 +1,5 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
@@ -21,6 +19,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
21
19
 
22
20
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
23
21
 
22
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
23
+
24
24
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
25
25
 
26
26
  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); } }
@@ -76,6 +76,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
76
76
  var _this$props = this.props,
77
77
  _this$props$overrides = _this$props.overrides,
78
78
  LabelOverride = _this$props$overrides.Label,
79
+ LabelEndEnhancerOverride = _this$props$overrides.LabelEndEnhancer,
80
+ LabelContainerOverride = _this$props$overrides.LabelContainer,
79
81
  CaptionOverride = _this$props$overrides.Caption,
80
82
  ControlContainerOverride = _this$props$overrides.ControlContainer,
81
83
  label = _this$props.label,
@@ -84,7 +86,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
84
86
  error = _this$props.error,
85
87
  positive = _this$props.positive,
86
88
  htmlFor = _this$props.htmlFor,
87
- children = _this$props.children;
89
+ children = _this$props.children,
90
+ counter = _this$props.counter;
88
91
  var onlyChildProps = React.Children.only(children).props;
89
92
  var sharedProps = {
90
93
  $disabled: !!disabled,
@@ -94,6 +97,10 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
94
97
 
95
98
  var Label = (0, _overrides.getOverride)(LabelOverride) || _styledComponents.Label;
96
99
 
100
+ var LabelEndEnhancer = (0, _overrides.getOverride)(LabelEndEnhancerOverride) || _styledComponents.LabelEndEnhancer;
101
+
102
+ var LabelContainer = (0, _overrides.getOverride)(LabelContainerOverride) || _styledComponents.LabelContainer;
103
+
97
104
  var Caption = (0, _overrides.getOverride)(CaptionOverride) || _styledComponents.Caption;
98
105
 
99
106
  var ControlContainer = (0, _overrides.getOverride)(ControlContainerOverride) || _styledComponents.ControlContainer;
@@ -107,10 +114,55 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
107
114
  }
108
115
  }
109
116
 
110
- return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(Label, _extends({
117
+ var labelEndEnhancer = this.props.labelEndEnhancer;
118
+
119
+ if (counter) {
120
+ // inferred values are preferred but if the user specifies the value
121
+ // that is then used as the default.
122
+ var maxLength = null;
123
+ var length = null;
124
+ var counterError = null;
125
+
126
+ if (_typeof(counter) === 'object') {
127
+ length = counter.length;
128
+ maxLength = counter.maxLength;
129
+ counterError = counter.error;
130
+ }
131
+
132
+ maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
133
+
134
+ if (length == null && typeof onlyChildProps.value === 'string') {
135
+ length = onlyChildProps.value.length;
136
+ }
137
+
138
+ if (length == null) {
139
+ length = 0;
140
+
141
+ if (process.env.NODE_ENV !== "production") {
142
+ console.warn("[FromControl] `length` must either be explicitly set via `counter` object property, or `value` string property on the child component.");
143
+ }
144
+ }
145
+
146
+ sharedProps.$length = length;
147
+
148
+ if (maxLength == null) {
149
+ if (!labelEndEnhancer) labelEndEnhancer = "".concat(length);
150
+ } else {
151
+ sharedProps.$maxLength = length;
152
+ if (!labelEndEnhancer) labelEndEnhancer = "".concat(length, "/").concat(maxLength);
153
+ if (length > maxLength && counterError == null) counterError = true;
154
+ }
155
+
156
+ if (counterError) {
157
+ sharedProps.$error = true;
158
+ sharedProps.$counterError = true;
159
+ }
160
+ }
161
+
162
+ return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelContainerOverride)), /*#__PURE__*/React.createElement(Label, _extends({
111
163
  "data-baseweb": "form-control-label",
112
164
  htmlFor: htmlFor || onlyChildProps.id
113
- }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, function (captionId) {
165
+ }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, function (captionId) {
114
166
  return /*#__PURE__*/React.createElement(ControlContainer, _extends({
115
167
  "data-baseweb": "form-control-container"
116
168
  }, sharedProps, (0, _overrides.getOverrideProps)(ControlContainerOverride)), React.Children.map(children, function (child, index) {
@@ -121,8 +173,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
121
173
  'aria-errormessage': error ? captionId : null,
122
174
  'aria-describedby': caption || positive ? captionId : null,
123
175
  disabled: onlyChildProps.disabled || disabled,
124
- error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
125
- positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive
176
+ error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error,
177
+ positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive
126
178
  });
127
179
  }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
128
180
  "data-baseweb": "form-control-caption",
@@ -141,5 +193,6 @@ _defineProperty(FormControl, "defaultProps", {
141
193
  overrides: {},
142
194
  label: null,
143
195
  caption: null,
144
- disabled: false
196
+ disabled: false,
197
+ counter: false
145
198
  });