baseui 10.9.0 → 10.9.1

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/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.9.1",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -193,7 +193,6 @@
   "dependencies": {
     "@date-io/date-fns": "^2.6.2",
     "card-validator": "^6.2.0",
-    "d3": "^7.3.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
                   }
                 >