baseui 10.9.0 → 10.10.0

package/data-table/column-numerical.js

@@ -278,10 +278,15 @@ function NumericalFilter(props) {
   }, [isRange, focused, sv, lv, uv, precision]),
       _React$useMemo5 = _slicedToArray(_React$useMemo4, 2),
       inputValueLower = _React$useMemo5[0],
-      inputValueUpper = _React$useMemo5[1]; // We bound the values within our min and max even if a user enters a huge number
+      inputValueUpper = _React$useMemo5[1]; // We have our slider values range from 1 to the bin size, so we have a scale which
+  // takes in the data driven range and maps it to values the scale can always handle
 
 
-  var sliderValue = isRange ? [Math.max(inputValueLower, min), Math.min(inputValueUpper, max)] : [Math.min(Math.max(inputValueLower, min), max)]; // keep the slider happy by sorting the two values
+  var sliderScale = React.useMemo(function () {
+    return (0, _d2.scaleLinear)().domain([min, max]).rangeRound([1, _constants.MAX_BIN_COUNT]) // We clamp the values within our min and max even if a user enters a huge number
+    .clamp(true);
+  }, [min, max]);
+  var sliderValue = isRange ? [sliderScale(inputValueLower), sliderScale(inputValueUpper)] : [sliderScale(inputValueLower)]; // keep the slider happy by sorting the two values
 
   if (isRange && sliderValue[0] > sliderValue[1]) {
     sliderValue = [sliderValue[1], sliderValue[0]];
@@ -372,28 +377,29 @@ function NumericalFilter(props) {
   // if we create a new instance these errors are prevented.
   , {
     key: isRange.toString(),
-    min: min,
-    max: max,
+    min: 1,
+    max: _constants.MAX_BIN_COUNT,
     value: sliderValue,
     onChange: function onChange(_ref3) {
       var value = _ref3.value;
 
       if (!value) {
         return;
-      }
+      } // we convert back from the slider scale to the actual data's scale
+
 
       if (isRange) {
         var _value2 = _slicedToArray(value, 2),
             lowerValue = _value2[0],
             upperValue = _value2[1];
 
-        setLower(lowerValue);
-        setUpper(upperValue);
+        setLower(sliderScale.invert(lowerValue));
+        setUpper(sliderScale.invert(upperValue));
       } else {
         var _value3 = _slicedToArray(value, 1),
             singleValue = _value3[0];
 
-        setSingle(singleValue);
+        setSingle(sliderScale.invert(singleValue));
       }
     },
     overrides: {

package/data-table/column-numerical.js.flow

@@ -241,10 +241,21 @@ function NumericalFilter(props) {
     return [roundToFixed(l, precision), roundToFixed(h, precision)];
   }, [isRange, focused, sv, lv, uv, precision]);
 
-  // We bound the values within our min and max even if a user enters a huge number
+  // We have our slider values range from 1 to the bin size, so we have a scale which
+  // takes in the data driven range and maps it to values the scale can always handle
+  const sliderScale = React.useMemo(
+    () =>
+      scaleLinear()
+        .domain([min, max])
+        .rangeRound([1, MAX_BIN_COUNT])
+        // We clamp the values within our min and max even if a user enters a huge number
+        .clamp(true),
+    [min, max],
+  );
+
   let sliderValue = isRange
-    ? [Math.max(inputValueLower, min), Math.min(inputValueUpper, max)]
-    : [Math.min(Math.max(inputValueLower, min), max)];
+    ? [sliderScale(inputValueLower), sliderScale(inputValueUpper)]
+    : [sliderScale(inputValueLower)];
 
   // keep the slider happy by sorting the two values
   if (isRange && sliderValue[0] > sliderValue[1]) {
@@ -323,20 +334,21 @@ function NumericalFilter(props) {
           // when it tries to read getThumbDistance on a thumb which is not there anymore
           // if we create a new instance these errors are prevented.
           key={isRange.toString()}
-          min={min}
-          max={max}
+          min={1}
+          max={MAX_BIN_COUNT}
           value={sliderValue}
           onChange={({value}) => {
             if (!value) {
               return;
             }
+            // we convert back from the slider scale to the actual data's scale
             if (isRange) {
               const [lowerValue, upperValue] = value;
-              setLower(lowerValue);
-              setUpper(upperValue);
+              setLower(sliderScale.invert(lowerValue));
+              setUpper(sliderScale.invert(upperValue));
             } else {
               const [singleValue] = value;
-              setSingle(singleValue);
+              setSingle(sliderScale.invert(singleValue));
             }
           }}
           overrides={{

package/data-table/measure-column-widths.js

@@ -46,8 +46,10 @@ function MeasureColumn(_ref) {
 
   var ref = (0, React.useRef)();
   React.useEffect(function () {
-    if (ref.current) {
-      onLayout(columnIndex, ref.current.getBoundingClientRect());
+    if (typeof document !== 'undefined') {
+      if (ref.current) {
+        onLayout(columnIndex, ref.current.getBoundingClientRect());
+      }
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/data-table/measure-column-widths.js.flow

@@ -28,8 +28,10 @@ function MeasureColumn({
   const ref = useRef();
 
   React.useEffect(() => {
-    if (ref.current) {
-      onLayout(columnIndex, ref.current.getBoundingClientRect());
+    if (__BROWSER__) {
+      if (ref.current) {
+        onLayout(columnIndex, ref.current.getBoundingClientRect());
+      }
     }
   }, []);
 

package/es/data-table/column-numerical.js

@@ -189,9 +189,12 @@ function NumericalFilter(props) {
     l = validateInput(l) ? l : min;
     let h = validateInput(uv) ? uv : max;
     return [roundToFixed(l, precision), roundToFixed(h, precision)];
-  }, [isRange, focused, sv, lv, uv, precision]); // We bound the values within our min and max even if a user enters a huge number
+  }, [isRange, focused, sv, lv, uv, precision]); // We have our slider values range from 1 to the bin size, so we have a scale which
+  // takes in the data driven range and maps it to values the scale can always handle
 
-  let sliderValue = isRange ? [Math.max(inputValueLower, min), Math.min(inputValueUpper, max)] : [Math.min(Math.max(inputValueLower, min), max)]; // keep the slider happy by sorting the two values
+  const sliderScale = React.useMemo(() => scaleLinear().domain([min, max]).rangeRound([1, MAX_BIN_COUNT]) // We clamp the values within our min and max even if a user enters a huge number
+  .clamp(true), [min, max]);
+  let sliderValue = isRange ? [sliderScale(inputValueLower), sliderScale(inputValueUpper)] : [sliderScale(inputValueLower)]; // keep the slider happy by sorting the two values
 
   if (isRange && sliderValue[0] > sliderValue[1]) {
     sliderValue = [sliderValue[1], sliderValue[0]];
@@ -276,23 +279,24 @@ function NumericalFilter(props) {
   // if we create a new instance these errors are prevented.
   , {
     key: isRange.toString(),
-    min: min,
-    max: max,
+    min: 1,
+    max: MAX_BIN_COUNT,
     value: sliderValue,
     onChange: ({
       value
     }) => {
       if (!value) {
         return;
-      }
+      } // we convert back from the slider scale to the actual data's scale
+
 
       if (isRange) {
         const [lowerValue, upperValue] = value;
-        setLower(lowerValue);
-        setUpper(upperValue);
+        setLower(sliderScale.invert(lowerValue));
+        setUpper(sliderScale.invert(upperValue));
       } else {
         const [singleValue] = value;
-        setSingle(singleValue);
+        setSingle(sliderScale.invert(singleValue));
       }
     },
     overrides: {

package/es/data-table/measure-column-widths.js

@@ -20,8 +20,10 @@ function MeasureColumn({
   const [css] = useStyletron();
   const ref = useRef();
   React.useEffect(() => {
-    if (ref.current) {
-      onLayout(columnIndex, ref.current.getBoundingClientRect());
+    if (typeof document !== 'undefined') {
+      if (ref.current) {
+        onLayout(columnIndex, ref.current.getBoundingClientRect());
+      }
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/es/form-control/form-control.js

@@ -11,7 +11,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
 import { UIDConsumer } from 'react-uid';
-import { Label as StyledLabel, Caption as StyledCaption, ControlContainer as StyledControlContainer } from './styled-components.js';
+import { Label as StyledLabel, LabelEndEnhancer as StyledLabelEndEnhancer, LabelContainer as StyledLabelContainer, Caption as StyledCaption, ControlContainer as StyledControlContainer } from './styled-components.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (error && typeof error !== 'boolean') {
@@ -34,6 +34,8 @@ export default class FormControl extends React.Component {
     const {
       overrides: {
         Label: LabelOverride,
+        LabelEndEnhancer: LabelEndEnhancerOverride,
+        LabelContainer: LabelContainerOverride,
         Caption: CaptionOverride,
         ControlContainer: ControlContainerOverride
       },
@@ -43,7 +45,8 @@ export default class FormControl extends React.Component {
       error,
       positive,
       htmlFor,
-      children
+      children,
+      counter
     } = this.props;
     const onlyChildProps = React.Children.only(children).props;
     const sharedProps = {
@@ -52,6 +55,8 @@ export default class FormControl extends React.Component {
       $positive: !!positive
     };
     const Label = getOverride(LabelOverride) || StyledLabel;
+    const LabelEndEnhancer = getOverride(LabelEndEnhancerOverride) || StyledLabelEndEnhancer;
+    const LabelContainer = getOverride(LabelContainerOverride) || StyledLabelContainer;
     const Caption = getOverride(CaptionOverride) || StyledCaption;
     const ControlContainer = getOverride(ControlContainerOverride) || StyledControlContainer;
     const hint = chooseRenderedHint(caption, error, positive, sharedProps);
@@ -63,10 +68,55 @@ export default class FormControl extends React.Component {
       }
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(Label, _extends({
+    let labelEndEnhancer = this.props.labelEndEnhancer;
+
+    if (counter) {
+      // inferred values are preferred but if the user specifies the value
+      // that is then used as the default.
+      let maxLength = null;
+      let length = null;
+      let counterError = null;
+
+      if (typeof counter === 'object') {
+        length = counter.length;
+        maxLength = counter.maxLength;
+        counterError = counter.error;
+      }
+
+      maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
+
+      if (length == null && typeof onlyChildProps.value === 'string') {
+        length = onlyChildProps.value.length;
+      }
+
+      if (length == null) {
+        length = 0;
+
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(`[FromControl] \`length\` must either be explicitly set via \`counter\` object property, or \`value\` string property on the child component.`);
+        }
+      }
+
+      sharedProps.$length = length;
+
+      if (maxLength == null) {
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}`;
+      } else {
+        sharedProps.$maxLength = length;
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}/${maxLength}`;
+        if (length > maxLength && counterError == null) counterError = true;
+      }
+
+      if (counterError) {
+        sharedProps.$error = true;
+        sharedProps.$counterError = true;
+      }
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelContainer, _extends({}, sharedProps, getOverrideProps(LabelContainerOverride)), /*#__PURE__*/React.createElement(Label, _extends({
       "data-baseweb": "form-control-label",
       htmlFor: htmlFor || onlyChildProps.id
-    }, sharedProps, getOverrideProps(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), /*#__PURE__*/React.createElement(UIDConsumer, null, captionId => /*#__PURE__*/React.createElement(ControlContainer, _extends({
+    }, sharedProps, getOverrideProps(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, getOverrideProps(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(UIDConsumer, null, captionId => /*#__PURE__*/React.createElement(ControlContainer, _extends({
       "data-baseweb": "form-control-container"
     }, sharedProps, getOverrideProps(ControlContainerOverride)), React.Children.map(children, (child, index) => {
       if (!child) return;
@@ -76,8 +126,8 @@ export default class FormControl extends React.Component {
         'aria-errormessage': error ? captionId : null,
         'aria-describedby': caption || positive ? captionId : null,
         disabled: onlyChildProps.disabled || disabled,
-        error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
-        positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive
+        error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error,
+        positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive
       });
     }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
       "data-baseweb": "form-control-caption",
@@ -91,5 +141,6 @@ _defineProperty(FormControl, "defaultProps", {
   overrides: {},
   label: null,
   caption: null,
-  disabled: false
+  disabled: false,
+  counter: false
 });

package/es/form-control/styled-components.js

@@ -10,7 +10,6 @@ export const Label = styled('label', props => {
     $disabled,
     $theme: {
       colors,
-      sizing,
       typography
     }
   } = props;
@@ -22,14 +21,36 @@ export const Label = styled('label', props => {
     paddingTop: 0,
     paddingRight: 0,
     paddingBottom: 0,
-    paddingLeft: 0,
-    marginTop: sizing.scale300,
-    marginRight: 0,
-    marginBottom: sizing.scale300,
-    marginLeft: 0
+    paddingLeft: 0
   };
 });
 Label.displayName = "Label";
+export const LabelContainer = styled('span', ({
+  $theme: {
+    sizing
+  }
+}) => ({
+  display: 'flex',
+  width: '100%',
+  marginTop: sizing.scale300,
+  marginRight: 0,
+  marginBottom: sizing.scale300,
+  marginLeft: 0
+}));
+LabelContainer.displayName = "LabelContainer";
+export const LabelEndEnhancer = styled('span', ({
+  $disabled,
+  $counterError,
+  $theme: {
+    colors,
+    typography
+  }
+}) => ({ ...typography.font100,
+  flex: 0,
+  width: '100%',
+  color: $counterError ? colors.negative400 : $disabled ? colors.contentSecondary : colors.contentPrimary
+}));
+LabelEndEnhancer.displayName = "LabelEndEnhancer";
 export const Caption = styled('div', props => {
   const {
     $error,

package/es/popover/popover.js

@@ -457,7 +457,7 @@ class PopoverInner extends React.Component {
           crossFrame: false,
           focusOptions: this.props.focusOptions
         }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
-          disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
+          disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning
         }, this.renderPopover(renderedContent)))));
       } else {
         rendered.push( /*#__PURE__*/React.createElement(Hidden, {

package/es/timezonepicker/timezone-picker.js

@@ -32,7 +32,7 @@ class TimezonePicker extends React.Component {
         try {
           const offset = getTimezoneOffset(zoneName, compareDate) / 3_600_000;
           const offsetFormatted = `${offset >= 0 ? '+' : '-'}${Math.abs(offset)}`;
-          let label = `(GMT${offsetFormatted}) ${zoneName.replace('_', ' ')}`;
+          let label = `(GMT${offsetFormatted}) ${zoneName.replace(/_/g, ' ')}`;
 
           if (this.props.includeAbbreviations) {
             const abbreviation = format(compareDate, 'zzz', {
@@ -44,10 +44,12 @@ class TimezonePicker extends React.Component {
             }
           }
 
+          const offsetMinutes = offset * 60;
           timezones.push({
             id: zoneName,
             label,
-            offset
+            // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
+            offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1
           });
         } catch (error) {
           // Ignores timezones that are not available within a user's browser/operating system

package/esm/data-table/column-numerical.js

@@ -259,10 +259,15 @@ function NumericalFilter(props) {
   }, [isRange, focused, sv, lv, uv, precision]),
       _React$useMemo5 = _slicedToArray(_React$useMemo4, 2),
       inputValueLower = _React$useMemo5[0],
-      inputValueUpper = _React$useMemo5[1]; // We bound the values within our min and max even if a user enters a huge number
+      inputValueUpper = _React$useMemo5[1]; // We have our slider values range from 1 to the bin size, so we have a scale which
+  // takes in the data driven range and maps it to values the scale can always handle
 
 
-  var sliderValue = isRange ? [Math.max(inputValueLower, min), Math.min(inputValueUpper, max)] : [Math.min(Math.max(inputValueLower, min), max)]; // keep the slider happy by sorting the two values
+  var sliderScale = React.useMemo(function () {
+    return scaleLinear().domain([min, max]).rangeRound([1, MAX_BIN_COUNT]) // We clamp the values within our min and max even if a user enters a huge number
+    .clamp(true);
+  }, [min, max]);
+  var sliderValue = isRange ? [sliderScale(inputValueLower), sliderScale(inputValueUpper)] : [sliderScale(inputValueLower)]; // keep the slider happy by sorting the two values
 
   if (isRange && sliderValue[0] > sliderValue[1]) {
     sliderValue = [sliderValue[1], sliderValue[0]];
@@ -353,28 +358,29 @@ function NumericalFilter(props) {
   // if we create a new instance these errors are prevented.
   , {
     key: isRange.toString(),
-    min: min,
-    max: max,
+    min: 1,
+    max: MAX_BIN_COUNT,
     value: sliderValue,
     onChange: function onChange(_ref3) {
       var value = _ref3.value;
 
       if (!value) {
         return;
-      }
+      } // we convert back from the slider scale to the actual data's scale
+
 
       if (isRange) {
         var _value2 = _slicedToArray(value, 2),
             lowerValue = _value2[0],
             upperValue = _value2[1];
 
-        setLower(lowerValue);
-        setUpper(upperValue);
+        setLower(sliderScale.invert(lowerValue));
+        setUpper(sliderScale.invert(upperValue));
       } else {
         var _value3 = _slicedToArray(value, 1),
             singleValue = _value3[0];
 
-        setSingle(singleValue);
+        setSingle(sliderScale.invert(singleValue));
       }
     },
     overrides: {

package/esm/data-table/measure-column-widths.js

@@ -35,8 +35,10 @@ function MeasureColumn(_ref) {
 
   var ref = useRef();
   React.useEffect(function () {
-    if (ref.current) {
-      onLayout(columnIndex, ref.current.getBoundingClientRect());
+    if (typeof document !== 'undefined') {
+      if (ref.current) {
+        onLayout(columnIndex, ref.current.getBoundingClientRect());
+      }
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/esm/form-control/form-control.js

@@ -1,7 +1,7 @@
-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); }
-
 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); }
 
+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); }
+
 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); } }
@@ -33,7 +33,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
 import { UIDConsumer } from 'react-uid';
-import { Label as StyledLabel, Caption as StyledCaption, ControlContainer as StyledControlContainer } from './styled-components.js';
+import { Label as StyledLabel, LabelEndEnhancer as StyledLabelEndEnhancer, LabelContainer as StyledLabelContainer, Caption as StyledCaption, ControlContainer as StyledControlContainer } from './styled-components.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (error && typeof error !== 'boolean') {
@@ -68,6 +68,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           _this$props$overrides = _this$props.overrides,
           LabelOverride = _this$props$overrides.Label,
+          LabelEndEnhancerOverride = _this$props$overrides.LabelEndEnhancer,
+          LabelContainerOverride = _this$props$overrides.LabelContainer,
           CaptionOverride = _this$props$overrides.Caption,
           ControlContainerOverride = _this$props$overrides.ControlContainer,
           label = _this$props.label,
@@ -76,7 +78,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
           error = _this$props.error,
           positive = _this$props.positive,
           htmlFor = _this$props.htmlFor,
-          children = _this$props.children;
+          children = _this$props.children,
+          counter = _this$props.counter;
       var onlyChildProps = React.Children.only(children).props;
       var sharedProps = {
         $disabled: !!disabled,
@@ -84,6 +87,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
         $positive: !!positive
       };
       var Label = getOverride(LabelOverride) || StyledLabel;
+      var LabelEndEnhancer = getOverride(LabelEndEnhancerOverride) || StyledLabelEndEnhancer;
+      var LabelContainer = getOverride(LabelContainerOverride) || StyledLabelContainer;
       var Caption = getOverride(CaptionOverride) || StyledCaption;
       var ControlContainer = getOverride(ControlContainerOverride) || StyledControlContainer;
       var hint = chooseRenderedHint(caption, error, positive, sharedProps);
@@ -95,10 +100,55 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(Label, _extends({
+      var labelEndEnhancer = this.props.labelEndEnhancer;
+
+      if (counter) {
+        // inferred values are preferred but if the user specifies the value
+        // that is then used as the default.
+        var maxLength = null;
+        var length = null;
+        var counterError = null;
+
+        if (_typeof(counter) === 'object') {
+          length = counter.length;
+          maxLength = counter.maxLength;
+          counterError = counter.error;
+        }
+
+        maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
+
+        if (length == null && typeof onlyChildProps.value === 'string') {
+          length = onlyChildProps.value.length;
+        }
+
+        if (length == null) {
+          length = 0;
+
+          if (process.env.NODE_ENV !== "production") {
+            console.warn("[FromControl] `length` must either be explicitly set via `counter` object property, or `value` string property on the child component.");
+          }
+        }
+
+        sharedProps.$length = length;
+
+        if (maxLength == null) {
+          if (!labelEndEnhancer) labelEndEnhancer = "".concat(length);
+        } else {
+          sharedProps.$maxLength = length;
+          if (!labelEndEnhancer) labelEndEnhancer = "".concat(length, "/").concat(maxLength);
+          if (length > maxLength && counterError == null) counterError = true;
+        }
+
+        if (counterError) {
+          sharedProps.$error = true;
+          sharedProps.$counterError = true;
+        }
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelContainer, _extends({}, sharedProps, getOverrideProps(LabelContainerOverride)), /*#__PURE__*/React.createElement(Label, _extends({
         "data-baseweb": "form-control-label",
         htmlFor: htmlFor || onlyChildProps.id
-      }, sharedProps, getOverrideProps(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), /*#__PURE__*/React.createElement(UIDConsumer, null, function (captionId) {
+      }, sharedProps, getOverrideProps(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, getOverrideProps(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(UIDConsumer, null, function (captionId) {
         return /*#__PURE__*/React.createElement(ControlContainer, _extends({
           "data-baseweb": "form-control-container"
         }, sharedProps, getOverrideProps(ControlContainerOverride)), React.Children.map(children, function (child, index) {
@@ -109,8 +159,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
             'aria-errormessage': error ? captionId : null,
             'aria-describedby': caption || positive ? captionId : null,
             disabled: onlyChildProps.disabled || disabled,
-            error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
-            positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive
+            error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error,
+            positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive
           });
         }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
           "data-baseweb": "form-control-caption",
@@ -127,7 +177,8 @@ _defineProperty(FormControl, "defaultProps", {
   overrides: {},
   label: null,
   caption: null,
-  disabled: false
+  disabled: false,
+  counter: false
 });
 
 export { FormControl as default };

package/esm/form-control/styled-components.js

@@ -15,7 +15,6 @@ export var Label = styled('label', function (props) {
   var $disabled = props.$disabled,
       _props$$theme = props.$theme,
       colors = _props$$theme.colors,
-      sizing = _props$$theme.sizing,
       typography = _props$$theme.typography;
   return _objectSpread(_objectSpread({}, typography.font250), {}, {
     fontWeight: 500,
@@ -25,14 +24,35 @@ export var Label = styled('label', function (props) {
     paddingTop: 0,
     paddingRight: 0,
     paddingBottom: 0,
-    paddingLeft: 0,
+    paddingLeft: 0
+  });
+});
+Label.displayName = "Label";
+export var LabelContainer = styled('span', function (_ref) {
+  var sizing = _ref.$theme.sizing;
+  return {
+    display: 'flex',
+    width: '100%',
     marginTop: sizing.scale300,
     marginRight: 0,
     marginBottom: sizing.scale300,
     marginLeft: 0
+  };
+});
+LabelContainer.displayName = "LabelContainer";
+export var LabelEndEnhancer = styled('span', function (_ref2) {
+  var $disabled = _ref2.$disabled,
+      $counterError = _ref2.$counterError,
+      _ref2$$theme = _ref2.$theme,
+      colors = _ref2$$theme.colors,
+      typography = _ref2$$theme.typography;
+  return _objectSpread(_objectSpread({}, typography.font100), {}, {
+    flex: 0,
+    width: '100%',
+    color: $counterError ? colors.negative400 : $disabled ? colors.contentSecondary : colors.contentPrimary
   });
 });
-Label.displayName = "Label";
+LabelEndEnhancer.displayName = "LabelEndEnhancer";
 export var Caption = styled('div', function (props) {
   var $error = props.$error,
       $positive = props.$positive,

package/esm/popover/popover.js

@@ -520,7 +520,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             crossFrame: false,
             focusOptions: this.props.focusOptions
           }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
-            disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
+            disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning
           }, this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(Hidden, {

package/esm/timezonepicker/timezone-picker.js

@@ -86,7 +86,7 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
           try {
             var offset = getTimezoneOffset(zoneName, compareDate) / 3600000;
             var offsetFormatted = "".concat(offset >= 0 ? '+' : '-').concat(Math.abs(offset));
-            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace('_', ' '));
+            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace(/_/g, ' '));
 
             if (_this.props.includeAbbreviations) {
               var abbreviation = format(compareDate, 'zzz', {
@@ -98,10 +98,12 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
               }
             }
 
+            var offsetMinutes = offset * 60;
             timezones.push({
               id: zoneName,
               label: label,
-              offset: offset
+              // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
+              offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1
             });
           } catch (error) {
             // Ignores timezones that are not available within a user's browser/operating system

package/form-control/form-control.js

@@ -1,7 +1,5 @@
 "use strict";
 
-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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,6 +19,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
+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); }
+
 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); } }
@@ -76,6 +76,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           _this$props$overrides = _this$props.overrides,
           LabelOverride = _this$props$overrides.Label,
+          LabelEndEnhancerOverride = _this$props$overrides.LabelEndEnhancer,
+          LabelContainerOverride = _this$props$overrides.LabelContainer,
           CaptionOverride = _this$props$overrides.Caption,
           ControlContainerOverride = _this$props$overrides.ControlContainer,
           label = _this$props.label,
@@ -84,7 +86,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
           error = _this$props.error,
           positive = _this$props.positive,
           htmlFor = _this$props.htmlFor,
-          children = _this$props.children;
+          children = _this$props.children,
+          counter = _this$props.counter;
       var onlyChildProps = React.Children.only(children).props;
       var sharedProps = {
         $disabled: !!disabled,
@@ -94,6 +97,10 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
 
       var Label = (0, _overrides.getOverride)(LabelOverride) || _styledComponents.Label;
 
+      var LabelEndEnhancer = (0, _overrides.getOverride)(LabelEndEnhancerOverride) || _styledComponents.LabelEndEnhancer;
+
+      var LabelContainer = (0, _overrides.getOverride)(LabelContainerOverride) || _styledComponents.LabelContainer;
+
       var Caption = (0, _overrides.getOverride)(CaptionOverride) || _styledComponents.Caption;
 
       var ControlContainer = (0, _overrides.getOverride)(ControlContainerOverride) || _styledComponents.ControlContainer;
@@ -107,10 +114,55 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(Label, _extends({
+      var labelEndEnhancer = this.props.labelEndEnhancer;
+
+      if (counter) {
+        // inferred values are preferred but if the user specifies the value
+        // that is then used as the default.
+        var maxLength = null;
+        var length = null;
+        var counterError = null;
+
+        if (_typeof(counter) === 'object') {
+          length = counter.length;
+          maxLength = counter.maxLength;
+          counterError = counter.error;
+        }
+
+        maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
+
+        if (length == null && typeof onlyChildProps.value === 'string') {
+          length = onlyChildProps.value.length;
+        }
+
+        if (length == null) {
+          length = 0;
+
+          if (process.env.NODE_ENV !== "production") {
+            console.warn("[FromControl] `length` must either be explicitly set via `counter` object property, or `value` string property on the child component.");
+          }
+        }
+
+        sharedProps.$length = length;
+
+        if (maxLength == null) {
+          if (!labelEndEnhancer) labelEndEnhancer = "".concat(length);
+        } else {
+          sharedProps.$maxLength = length;
+          if (!labelEndEnhancer) labelEndEnhancer = "".concat(length, "/").concat(maxLength);
+          if (length > maxLength && counterError == null) counterError = true;
+        }
+
+        if (counterError) {
+          sharedProps.$error = true;
+          sharedProps.$counterError = true;
+        }
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelContainerOverride)), /*#__PURE__*/React.createElement(Label, _extends({
         "data-baseweb": "form-control-label",
         htmlFor: htmlFor || onlyChildProps.id
-      }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, function (captionId) {
+      }, 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) {
         return /*#__PURE__*/React.createElement(ControlContainer, _extends({
           "data-baseweb": "form-control-container"
         }, sharedProps, (0, _overrides.getOverrideProps)(ControlContainerOverride)), React.Children.map(children, function (child, index) {
@@ -121,8 +173,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
             'aria-errormessage': error ? captionId : null,
             'aria-describedby': caption || positive ? captionId : null,
             disabled: onlyChildProps.disabled || disabled,
-            error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
-            positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive
+            error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error,
+            positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive
           });
         }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
           "data-baseweb": "form-control-caption",
@@ -141,5 +193,6 @@ _defineProperty(FormControl, "defaultProps", {
   overrides: {},
   label: null,
   caption: null,
-  disabled: false
+  disabled: false,
+  counter: false
 });

package/form-control/form-control.js.flow

@@ -11,10 +11,16 @@ import {getOverride, getOverrideProps} from '../helpers/overrides.js';
 import {UIDConsumer} from 'react-uid';
 import {
   Label as StyledLabel,
+  LabelEndEnhancer as StyledLabelEndEnhancer,
+  LabelContainer as StyledLabelContainer,
   Caption as StyledCaption,
   ControlContainer as StyledControlContainer,
 } from './styled-components.js';
-import type {FormControlPropsT, FormControlStateT} from './types.js';
+import type {
+  FormControlPropsT,
+  FormControlStateT,
+  StylePropsT,
+} from './types.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (error && typeof error !== 'boolean') {
@@ -41,12 +47,15 @@ export default class FormControl extends React.Component<
     label: null,
     caption: null,
     disabled: false,
+    counter: false,
   };
 
   render() {
     const {
       overrides: {
         Label: LabelOverride,
+        LabelEndEnhancer: LabelEndEnhancerOverride,
+        LabelContainer: LabelContainerOverride,
         Caption: CaptionOverride,
         ControlContainer: ControlContainerOverride,
       },
@@ -57,17 +66,22 @@ export default class FormControl extends React.Component<
       positive,
       htmlFor,
       children,
+      counter,
     } = this.props;
 
     const onlyChildProps = React.Children.only(children).props;
 
-    const sharedProps = {
+    const sharedProps: StylePropsT = {
       $disabled: !!disabled,
       $error: !!error,
       $positive: !!positive,
     };
 
     const Label = getOverride(LabelOverride) || StyledLabel;
+    const LabelEndEnhancer =
+      getOverride(LabelEndEnhancerOverride) || StyledLabelEndEnhancer;
+    const LabelContainer =
+      getOverride(LabelContainerOverride) || StyledLabelContainer;
     const Caption = getOverride(CaptionOverride) || StyledCaption;
     const ControlContainer =
       getOverride(ControlContainerOverride) || StyledControlContainer;
@@ -83,17 +97,75 @@ export default class FormControl extends React.Component<
       }
     }
 
+    let labelEndEnhancer = this.props.labelEndEnhancer;
+    if (counter) {
+      // inferred values are preferred but if the user specifies the value
+      // that is then used as the default.
+      let maxLength: ?number = null;
+      let length: ?number = null;
+      let counterError: ?boolean = null;
+
+      if (typeof counter === 'object') {
+        length = counter.length;
+        maxLength = counter.maxLength;
+        counterError = counter.error;
+      }
+
+      maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
+      if (length == null && typeof onlyChildProps.value === 'string') {
+        length = onlyChildProps.value.length;
+      }
+
+      if (length == null) {
+        length = 0;
+        if (__DEV__) {
+          console.warn(
+            `[FromControl] \`length\` must either be explicitly set via \`counter\` object property, or \`value\` string property on the child component.`,
+          );
+        }
+      }
+
+      sharedProps.$length = length;
+      if (maxLength == null) {
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}`;
+      } else {
+        sharedProps.$maxLength = length;
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}/${maxLength}`;
+        if (length > maxLength && counterError == null) counterError = true;
+      }
+
+      if (counterError) {
+        sharedProps.$error = true;
+        sharedProps.$counterError = true;
+      }
+    }
+
     return (
       <React.Fragment>
         {label && (
-          <Label
-            data-baseweb="form-control-label"
-            htmlFor={htmlFor || onlyChildProps.id}
+          <LabelContainer
             {...sharedProps}
-            {...getOverrideProps(LabelOverride)}
+            {...getOverrideProps(LabelContainerOverride)}
           >
-            {typeof label === 'function' ? label(sharedProps) : label}
-          </Label>
+            <Label
+              data-baseweb="form-control-label"
+              htmlFor={htmlFor || onlyChildProps.id}
+              {...sharedProps}
+              {...getOverrideProps(LabelOverride)}
+            >
+              {typeof label === 'function' ? label(sharedProps) : label}
+            </Label>
+            {labelEndEnhancer && (
+              <LabelEndEnhancer
+                {...sharedProps}
+                {...getOverrideProps(LabelEndEnhancerOverride)}
+              >
+                {typeof labelEndEnhancer === 'function'
+                  ? labelEndEnhancer(sharedProps)
+                  : labelEndEnhancer}
+              </LabelEndEnhancer>
+            )}
+          </LabelContainer>
         )}
         <UIDConsumer>
           {captionId => (
@@ -114,11 +186,11 @@ export default class FormControl extends React.Component<
                   error:
                     typeof onlyChildProps.error !== 'undefined'
                       ? onlyChildProps.error
-                      : error,
+                      : sharedProps.$error,
                   positive:
                     typeof onlyChildProps.positive !== 'undefined'
                       ? onlyChildProps.positive
-                      : positive,
+                      : sharedProps.$positive,
                 });
               })}
               {(caption || error || positive) && (

package/form-control/index.d.ts

@@ -25,6 +25,7 @@ export interface FormControlProps {
   error?: boolean | React.ReactNode;
   positive?: React.ReactNode;
   htmlFor?: string;
+  counter?: boolean | {length?: number; maxLength?: number; error?: boolean};
 }
 
 export class FormControl extends React.Component<

package/form-control/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ControlContainer = exports.Caption = exports.Label = void 0;
+exports.ControlContainer = exports.Caption = exports.LabelEndEnhancer = exports.LabelContainer = exports.Label = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -17,7 +17,6 @@ var Label = (0, _index.styled)('label', function (props) {
   var $disabled = props.$disabled,
       _props$$theme = props.$theme,
       colors = _props$$theme.colors,
-      sizing = _props$$theme.sizing,
       typography = _props$$theme.typography;
   return _objectSpread(_objectSpread({}, typography.font250), {}, {
     fontWeight: 500,
@@ -27,15 +26,38 @@ var Label = (0, _index.styled)('label', function (props) {
     paddingTop: 0,
     paddingRight: 0,
     paddingBottom: 0,
-    paddingLeft: 0,
+    paddingLeft: 0
+  });
+});
+exports.Label = Label;
+Label.displayName = "Label";
+var LabelContainer = (0, _index.styled)('span', function (_ref) {
+  var sizing = _ref.$theme.sizing;
+  return {
+    display: 'flex',
+    width: '100%',
     marginTop: sizing.scale300,
     marginRight: 0,
     marginBottom: sizing.scale300,
     marginLeft: 0
+  };
+});
+exports.LabelContainer = LabelContainer;
+LabelContainer.displayName = "LabelContainer";
+var LabelEndEnhancer = (0, _index.styled)('span', function (_ref2) {
+  var $disabled = _ref2.$disabled,
+      $counterError = _ref2.$counterError,
+      _ref2$$theme = _ref2.$theme,
+      colors = _ref2$$theme.colors,
+      typography = _ref2$$theme.typography;
+  return _objectSpread(_objectSpread({}, typography.font100), {}, {
+    flex: 0,
+    width: '100%',
+    color: $counterError ? colors.negative400 : $disabled ? colors.contentSecondary : colors.contentPrimary
   });
 });
-exports.Label = Label;
-Label.displayName = "Label";
+exports.LabelEndEnhancer = LabelEndEnhancer;
+LabelEndEnhancer.displayName = "LabelEndEnhancer";
 var Caption = (0, _index.styled)('div', function (props) {
   var $error = props.$error,
       $positive = props.$positive,

package/form-control/styled-components.js.flow

@@ -12,7 +12,7 @@ import type {StylePropsT} from './types.js';
 export const Label = styled<StylePropsT>('label', props => {
   const {
     $disabled,
-    $theme: {colors, sizing, typography},
+    $theme: {colors, typography},
   } = props;
   return {
     ...typography.font250,
@@ -24,12 +24,34 @@ export const Label = styled<StylePropsT>('label', props => {
     paddingRight: 0,
     paddingBottom: 0,
     paddingLeft: 0,
+  };
+});
+
+export const LabelContainer = styled<StylePropsT>(
+  'span',
+  ({$theme: {sizing}}) => ({
+    display: 'flex',
+    width: '100%',
     marginTop: sizing.scale300,
     marginRight: 0,
     marginBottom: sizing.scale300,
     marginLeft: 0,
-  };
-});
+  }),
+);
+
+export const LabelEndEnhancer = styled<StylePropsT>(
+  'span',
+  ({$disabled, $counterError, $theme: {colors, typography}}) => ({
+    ...typography.font100,
+    flex: 0,
+    width: '100%',
+    color: $counterError
+      ? colors.negative400
+      : $disabled
+      ? colors.contentSecondary
+      : colors.contentPrimary,
+  }),
+);
 
 export const Caption = styled<StylePropsT>('div', props => {
   const {

package/form-control/types.js.flow

@@ -13,15 +13,20 @@ export type FormControlStateT = {|
   captionId: string,
 |};
 
+export type OverridesT = {
+  /** Customizes the label element. */
+  Label?: OverrideT,
+  /** Customizes the label end enhancer element. */
+  LabelEndEnhancer?: OverrideT,
+  /** Customizes the label container element. */
+  LabelContainer?: OverrideT,
+  /** Customizes the caption element. */
+  Caption?: OverrideT,
+  /** Customizes the container element. */
+  ControlContainer?: OverrideT,
+};
 export type FormControlPropsT = {
-  overrides: {
-    /** Customizes the label element. */
-    Label?: OverrideT,
-    /** Customizes the caption element. */
-    Caption?: OverrideT,
-    /** Customizes the container element. */
-    ControlContainer?: OverrideT,
-  },
+  overrides: OverridesT,
   /** A label rendered above the input field. */
   label: ?(React.Node | ((props: {}) => React.Node)),
   /** A caption rendered below the input field. */
@@ -34,6 +39,10 @@ export type FormControlPropsT = {
   positive?: React.Node | ((props: {}) => React.Node),
   /** The id of the related form element. Defaults to the id property of the child, if any. */
   htmlFor?: string,
+  /** Adds a label end enhancer to the label */
+  labelEndEnhancer?: ?(React.Node | ((props: {}) => React.Node)),
+  /** Adds a length counter to the form control. If your input does not have a "string" value exposed as a prop, you provide the length as an object.*/
+  counter?: boolean | {|length?: number, maxLength?: number, error?: boolean|},
   children: React.Node,
 };
 
@@ -41,6 +50,9 @@ export type StylePropsT = {
   $disabled?: boolean,
   $error?: boolean,
   $positive?: boolean,
+  $length?: number,
+  $maxLength?: number,
+  $counterError?: boolean,
 };
 
 declare var __DEV__: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.9.0",
+  "version": "10.10.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -193,7 +193,7 @@
   "dependencies": {
     "@date-io/date-fns": "^2.6.2",
     "card-validator": "^6.2.0",
-    "d3": "^7.3.0",
+    "d3": "^6.7.0",
     "date-fns": "^2.6.0",
     "date-fns-tz": "^1.2.2",
     "glob": "^7.1.6",

package/popover/popover.js

@@ -535,7 +535,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             crossFrame: false,
             focusOptions: this.props.focusOptions
           }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(_reactFocusLock.MoveFocusInside, {
-            disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
+            disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning
           }, this.renderPopover(renderedContent)))));
         } else {
           rendered.push( /*#__PURE__*/React.createElement(_styledComponents.Hidden, {

package/popover/popover.js.flow

@@ -486,7 +486,7 @@ class PopoverInner extends React.Component<
               ) : (
                 <MoveFocusInside
                   disabled={
-                    !this.props.autoFocus &&
+                    !this.props.autoFocus ||
                     !this.state.autoFocusAfterPositioning
                   }
                 >

package/timezonepicker/timezone-picker.js

@@ -95,7 +95,7 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
           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('_', ' '));
+            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace(/_/g, ' '));
 
             if (_this.props.includeAbbreviations) {
               var abbreviation = (0, _dateFnsTz.format)(compareDate, 'zzz', {
@@ -107,10 +107,12 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
               }
             }
 
+            var offsetMinutes = offset * 60;
             timezones.push({
               id: zoneName,
               label: label,
-              offset: offset
+              // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
+              offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1
             });
           } catch (error) {
             // Ignores timezones that are not available within a user's browser/operating system

package/timezonepicker/timezone-picker.js.flow

@@ -64,7 +64,7 @@ class TimezonePicker extends React.Component<
         const offset = getTimezoneOffset(zoneName, compareDate) / 3_600_000;
 
         const offsetFormatted = `${offset >= 0 ? '+' : '-'}${Math.abs(offset)}`;
-        let label = `(GMT${offsetFormatted}) ${zoneName.replace('_', ' ')}`;
+        let label = `(GMT${offsetFormatted}) ${zoneName.replace(/_/g, ' ')}`;
 
         if (this.props.includeAbbreviations) {
           const abbreviation = format(compareDate, 'zzz', {timeZone: zoneName});
@@ -73,10 +73,13 @@ class TimezonePicker extends React.Component<
           }
         }
 
+        const offsetMinutes = offset * 60;
+
         timezones.push({
           id: zoneName,
           label,
-          offset,
+          // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
+          offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1,
         });
       } catch (error) {
         // Ignores timezones that are not available within a user's browser/operating system

package/timezonepicker/types.js.flow

@@ -22,6 +22,11 @@ export type TimezonePickerStateT = {
 export type TimezoneT = {
   id: string,
   label: string,
+  /**
+   * The difference, in minutes, between a UTC date, and a date in the indicated time zone.
+   * Positive values indicate hours behind UTC, negative values indicate hours ahead.
+   * This aligns with Date.getTimezoneOffset()
+   */
   offset: number,
 };
 export type TimezonePickerPropsT = {