baseui 10.8.0 → 10.9.2

package/a11y/a11y.js

@@ -140,8 +140,8 @@ function Violation(props) {
     ref: setPopper,
     $top: "".concat(offset.top, "px") || '0px',
     $left: "".concat(offset.left, "px") || '0px'
-  }, /*#__PURE__*/React.createElement(_index2.Caption1, null, props.target), props.violations.map(function (violation, index) {
-    return /*#__PURE__*/React.createElement(_index2.Paragraph3, {
+  }, /*#__PURE__*/React.createElement(_index2.ParagraphXSmall, null, props.target), props.violations.map(function (violation, index) {
+    return /*#__PURE__*/React.createElement(_index2.ParagraphSmall, {
       key: index
     }, violation.description);
   }))));

package/a11y/a11y.js.flow

@@ -11,7 +11,7 @@ import * as React from 'react';
 import axe from 'axe-core';
 
 import {Layer, TetherBehavior, TETHER_PLACEMENT} from '../layer/index.js';
-import {Paragraph3, Caption1} from '../typography/index.js';
+import {ParagraphSmall, ParagraphXSmall} from '../typography/index.js';
 import {styled} from '../styles/index.js';
 import {ThemeContext} from '../styles/theme-provider.js';
 
@@ -101,9 +101,9 @@ function Violation(props: ViolationPropsT) {
           $top={`${offset.top}px` || '0px'}
           $left={`${offset.left}px` || '0px'}
         >
-          <Caption1>{props.target}</Caption1>
+          <ParagraphXSmall>{props.target}</ParagraphXSmall>
           {props.violations.map((violation, index) => (
-            <Paragraph3 key={index}>{violation.description}</Paragraph3>
+            <ParagraphSmall key={index}>{violation.description}</ParagraphSmall>
           ))}
         </ViolationContainer>
       </TetherBehavior>

package/button/styled-components.js

@@ -46,11 +46,14 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     transitionDuration: $theme.animation.timing200,
     transitionTimingFunction: $theme.animation.linearCurve,
     cursor: 'pointer',
-    ':disabled': {
-      cursor: 'not-allowed',
-      backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText
-    },
+    ':disabled': _objectSpread({
+      cursor: 'not-allowed'
+    }, getDisabledStyles({
+      $theme: $theme,
+      $kind: $kind,
+      $disabled: $disabled,
+      $isSelected: $isSelected
+    })),
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,
@@ -275,10 +278,36 @@ function getFontStyles(_ref10) {
   }
 }
 
-function getPaddingStyles(_ref11) {
+function getDisabledStyles(_ref11) {
   var $theme = _ref11.$theme,
-      $size = _ref11.$size,
-      $shape = _ref11.$shape;
+      $kind = _ref11.$kind,
+      $isSelected = _ref11.$isSelected,
+      $disabled = _ref11.$disabled;
+
+  if ($disabled && $isSelected) {
+    if ($kind === _constants.KIND.primary || $kind === _constants.KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
+function getPaddingStyles(_ref12) {
+  var $theme = _ref12.$theme,
+      $size = _ref12.$size,
+      $shape = _ref12.$shape;
   var iconShape = $shape === _constants.SHAPE.square || $shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round;
 
   switch ($size) {
@@ -316,12 +345,12 @@ function getPaddingStyles(_ref11) {
   }
 }
 
-function getKindStyles(_ref12) {
-  var $theme = _ref12.$theme,
-      $isLoading = _ref12.$isLoading,
-      $isSelected = _ref12.$isSelected,
-      $kind = _ref12.$kind,
-      $disabled = _ref12.$disabled;
+function getKindStyles(_ref13) {
+  var $theme = _ref13.$theme,
+      $isLoading = _ref13.$isLoading,
+      $isSelected = _ref13.$isSelected,
+      $kind = _ref13.$kind,
+      $disabled = _ref13.$disabled;
 
   if ($disabled) {
     return Object.freeze({});
@@ -409,10 +438,10 @@ function getKindStyles(_ref12) {
   }
 }
 
-function getShapeStyles(_ref13) {
-  var $theme = _ref13.$theme,
-      $shape = _ref13.$shape,
-      $size = _ref13.$size;
+function getShapeStyles(_ref14) {
+  var $theme = _ref14.$theme,
+      $shape = _ref14.$shape,
+      $size = _ref14.$size;
 
   if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.square) {
     var height, width;

package/button/styled-components.js.flow

@@ -46,11 +46,7 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor:
-        $kind === KIND.minimal || $kind === KIND.tertiary
-          ? 'transparent'
-          : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText,
+      ...getDisabledStyles({$theme, $kind, $disabled, $isSelected}),
     },
     marginLeft: 0,
     marginTop: 0,
@@ -229,6 +225,30 @@ function getFontStyles({$theme, $size}) {
   }
 }
 
+function getDisabledStyles({$theme, $kind, $isSelected, $disabled}) {
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill,
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText,
+      };
+    }
+  }
+
+  return {
+    backgroundColor:
+      $kind === KIND.minimal || $kind === KIND.tertiary
+        ? 'transparent'
+        : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText,
+  };
+}
+
 function getPaddingStyles({$theme, $size, $shape}) {
   const iconShape =
     $shape === SHAPE.square ||

package/combobox/combobox.js

@@ -60,6 +60,7 @@ function Combobox(props) {
       onChange = props.onChange,
       onFocus = props.onFocus,
       onSubmit = props.onSubmit,
+      listBoxLabel = props.listBoxLabel,
       mapOptionToNode = props.mapOptionToNode,
       mapOptionToString = props.mapOptionToString,
       id = props.id,
@@ -322,6 +323,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map(function (option, index) {
       var isSelected = selectionIndex === index;
@@ -360,9 +362,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -375,7 +376,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 var _default = Combobox;

package/combobox/combobox.js.flow

@@ -38,6 +38,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -274,6 +275,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             // eslint-disable-next-line flowtype/no-weak-types
             ref={(listboxRef: any)}
             role="listbox"
+            aria-label={listBoxLabel}
             $width={listboxWidth}
             {...listBoxProps}
           >
@@ -322,10 +324,9 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
           <OverriddenInput
             inputRef={handleInputRef}
             aria-activedescendant={
-              selectionIndex >= 0 ? activeDescendantId : undefined
+              isOpen && selectionIndex >= 0 ? activeDescendantId : undefined
             }
             aria-autocomplete="list"
-            aria-controls={listboxId}
             disabled={disabled}
             error={error}
             name={name}
@@ -338,6 +339,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             positive={positive}
             size={size}
             value={tempValue ? tempValue : value}
+            {...(isOpen ? {'aria-controls': listboxId} : {})}
             {...restInputProps}
           />
         </InputContainer>

package/combobox/types.js.flow

@@ -18,6 +18,8 @@ export type PropsT<OptionT = mixed> = {|
   disabled?: boolean,
   // Proxies value through to Input component.
   error?: boolean,
+  // Label used for the listbox/popup with options
+  listBoxLabel?: string,
   // Used to render a custom node besides the default.
   mapOptionToNode?: React.AbstractComponent<{|
     isSelected: boolean,

package/data-table/column-categorical.js

@@ -208,7 +208,7 @@ function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
     return /*#__PURE__*/React.createElement("div", {
       className: checkboxStyles,
       key: i

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

@@ -14,7 +14,7 @@ import {Checkbox, StyledLabel} from '../checkbox/index.js';
 import Search from '../icon/search.js';
 import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron, withStyle} from '../styles/index.js';
-import {Label3} from '../typography/index.js';
+import {LabelSmall} from '../typography/index.js';
 
 import Column from './column.js';
 import {COLUMNS} from './constants.js';
@@ -184,7 +184,7 @@ export function CategoricalFilter(props: CategoricalFilterProps) {
         })}
       >
         {!filteredCategories.length && (
-          <Label3>{locale.datatable.categoricalFilterEmpty}</Label3>
+          <LabelSmall>{locale.datatable.categoricalFilterEmpty}</LabelSmall>
         )}
 
         {Boolean(filteredCategories.length) &&

package/data-table/column-numerical.js

@@ -493,7 +493,7 @@ function NumericalFilter(props) {
       marginLeft: theme.sizing.scale300,
       marginRight: theme.sizing.scale300
     })
-  }, /*#__PURE__*/React.createElement(_index5.Paragraph4, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(_index5.Paragraph4, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
     className: css({
       display: 'flex',
       justifyContent: 'space-between'

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

@@ -12,7 +12,7 @@ import {Button, SIZE} from '../button/index.js';
 import {ButtonGroup, MODE} from '../button-group/index.js';
 import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron} from '../styles/index.js';
-import {Paragraph4} from '../typography/index.js';
+import {ParagraphXSmall} from '../typography/index.js';
 
 import Column from './column.js';
 import {COLUMNS, NUMERICAL_FORMATS, NUMERICAL_OPERATIONS} from './constants.js';
@@ -388,8 +388,8 @@ function NumericalFilter(props) {
           marginRight: theme.sizing.scale300,
         })}
       >
-        <Paragraph4>{format(min, props.options)}</Paragraph4>{' '}
-        <Paragraph4>{format(max, props.options)}</Paragraph4>
+        <ParagraphXSmall>{format(min, props.options)}</ParagraphXSmall>{' '}
+        <ParagraphXSmall>{format(max, props.options)}</ParagraphXSmall>
       </div>
 
       <div className={css({display: 'flex', justifyContent: 'space-between'})}>

package/datepicker/styled-components.js

@@ -502,7 +502,7 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.accent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === _constants.DENSITY.high ? '42px' : '50px',
       width: '100%',

package/datepicker/styled-components.js.flow

@@ -496,7 +496,10 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+      boxShadow:
+        $isFocusVisible && (!$outsideMonth || $peekNextMonth)
+          ? `0 0 0 3px ${colors.accent}`
+          : 'none',
       backgroundColor: $selected
         ? colors.calendarDayBackgroundSelectedHighlighted
         : $pseudoSelected && $isHighlighted

package/drawer/drawer.js

@@ -340,7 +340,9 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
 
       var sharedProps = this.getSharedProps();
       return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
-        return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+        return /*#__PURE__*/React.createElement(_reactFocusLock.default // Allow focus to escape when UI is within an iframe
+        , {
+          crossFrame: false,
           returnFocus: true,
           autoFocus: autoFocus,
           noFocusGuards: true

package/drawer/drawer.js.flow

@@ -253,7 +253,13 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
       <LocaleContext.Consumer>
         {locale => {
           return (
-            <FocusLock returnFocus autoFocus={autoFocus} noFocusGuards={true}>
+            <FocusLock
+              // Allow focus to escape when UI is within an iframe
+              crossFrame={false}
+              returnFocus
+              autoFocus={autoFocus}
+              noFocusGuards={true}
+            >
               <Root
                 data-baseweb="drawer"
                 ref={this.getRef('Root')}

package/es/a11y/a11y.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import axe from 'axe-core';
 import { Layer, TetherBehavior, TETHER_PLACEMENT } from '../layer/index.js';
-import { Paragraph3, Caption1 } from '../typography/index.js';
+import { ParagraphSmall, ParagraphXSmall } from '../typography/index.js';
 import { styled } from '../styles/index.js';
 import { ThemeContext } from '../styles/theme-provider.js';
 
@@ -95,7 +95,7 @@ function Violation(props) {
     ref: setPopper,
     $top: `${offset.top}px` || '0px',
     $left: `${offset.left}px` || '0px'
-  }, /*#__PURE__*/React.createElement(Caption1, null, props.target), props.violations.map((violation, index) => /*#__PURE__*/React.createElement(Paragraph3, {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, props.target), props.violations.map((violation, index) => /*#__PURE__*/React.createElement(ParagraphSmall, {
     key: index
   }, violation.description)))));
 }

package/es/button/styled-components.js

@@ -39,8 +39,12 @@ export const BaseButton = styled('button', ({
   cursor: 'pointer',
   ':disabled': {
     cursor: 'not-allowed',
-    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-    color: $theme.colors.buttonDisabledText
+    ...getDisabledStyles({
+      $theme,
+      $kind,
+      $disabled,
+      $isSelected
+    })
   },
   marginLeft: 0,
   marginTop: 0,
@@ -272,6 +276,32 @@ function getFontStyles({
   }
 }
 
+function getDisabledStyles({
+  $theme,
+  $kind,
+  $isSelected,
+  $disabled
+}) {
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
 function getPaddingStyles({
   $theme,
   $size,

package/es/combobox/combobox.js

@@ -28,6 +28,7 @@ function Combobox(props) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -251,6 +252,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map((option, index) => {
       const isSelected = selectionIndex === index;
@@ -287,9 +289,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -302,7 +303,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 export default Combobox;

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

@@ -13,7 +13,7 @@ import { Checkbox, StyledLabel } from '../checkbox/index.js';
 import Search from '../icon/search.js';
 import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
 import { useStyletron, withStyle } from '../styles/index.js';
-import { Label3 } from '../typography/index.js';
+import { LabelSmall } from '../typography/index.js';
 import Column from './column.js';
 import { COLUMNS } from './constants.js';
 import { LocaleContext } from '../locale/index.js';
@@ -139,7 +139,7 @@ export function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map((category, i) => /*#__PURE__*/React.createElement("div", {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map((category, i) => /*#__PURE__*/React.createElement("div", {
     className: checkboxStyles,
     key: i
   }, /*#__PURE__*/React.createElement(Checkbox, {

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

@@ -11,7 +11,7 @@ import { Button, SIZE } from '../button/index.js';
 import { ButtonGroup, MODE } from '../button-group/index.js';
 import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
 import { useStyletron } from '../styles/index.js';
-import { Paragraph4 } from '../typography/index.js';
+import { ParagraphXSmall } from '../typography/index.js';
 import Column from './column.js';
 import { COLUMNS, NUMERICAL_FORMATS, NUMERICAL_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
@@ -402,7 +402,7 @@ function NumericalFilter(props) {
       marginLeft: theme.sizing.scale300,
       marginRight: theme.sizing.scale300
     })
-  }, /*#__PURE__*/React.createElement(Paragraph4, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(Paragraph4, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
     className: css({
       display: 'flex',
       justifyContent: 'space-between'

package/es/datepicker/styled-components.js

@@ -503,7 +503,7 @@ export const StyledDay = styled('div', props => {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? `0 0 0 3px ${colors.accent}` : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
       width: '100%',

package/es/drawer/drawer.js

@@ -250,7 +250,9 @@ class Drawer extends React.Component {
     const [Close, closeProps] = getOverrides(CloseOverride, StyledClose);
     const sharedProps = this.getSharedProps();
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => {
-      return /*#__PURE__*/React.createElement(FocusLock, {
+      return /*#__PURE__*/React.createElement(FocusLock // Allow focus to escape when UI is within an iframe
+      , {
+        crossFrame: false,
         returnFocus: true,
         autoFocus: autoFocus,
         noFocusGuards: true

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
 });