baseui 10.0.0 → 10.3.0

package/esm/table-semantic/styled-components.js

@@ -48,7 +48,7 @@ export var StyledTable = styled('table', function (_ref2) {
   var $theme = _ref2.$theme,
       $width = _ref2.$width;
   return {
-    borderCollapse: 'collapse',
+    borderSpacing: '0',
     boxSizing: 'border-box',
     minWidth: '100%',
     width: $width || null
@@ -149,15 +149,8 @@ export var StyledTableBody = styled('tbody', function (_ref10) {
 });
 StyledTableBody.displayName = "StyledTableBody";
 export var StyledTableBodyRow = styled('tr', function (_ref11) {
-  var $theme = _ref11.$theme,
-      $divider = _ref11.$divider;
-  var borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
+  var $theme = _ref11.$theme;
   return {
-    ':not(:last-child)': {
-      borderBottomColor: borderHorizontal ? $theme.borders.border300.borderColor : null,
-      borderBottomStyle: borderHorizontal ? $theme.borders.border300.borderStyle : null,
-      borderBottomWidth: borderHorizontal ? $theme.borders.border300.borderWidth : null
-    },
     ':hover': {
       backgroundColor: $theme.colors.tableStripedBackground
     }
@@ -170,9 +163,11 @@ export var StyledTableBodyCell = styled('td', function (_ref12) {
   var $theme = _ref12.$theme,
       $size = _ref12.$size,
       $divider = _ref12.$divider,
-      $isNumeric = _ref12.$isNumeric;
+      $isNumeric = _ref12.$isNumeric,
+      $isLastRow = _ref12.$isLastRow;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
+  var borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
   var padding = sizeToCellPadding($theme, $size);
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
     paddingTop: padding,
@@ -182,6 +177,9 @@ export var StyledTableBodyCell = styled('td', function (_ref12) {
     color: $theme.colors.contentPrimary,
     textAlign: $isNumeric ? 'right' : null,
     verticalAlign: 'top',
+    borderBottomColor: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderColor : null,
+    borderBottomStyle: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderStyle : null,
+    borderBottomWidth: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderWidth : null,
     ':not(:last-child)': (_notLastChild2 = {}, _defineProperty(_notLastChild2, "border".concat(borderDir, "Color"), borderVertical ? $theme.borders.border300.borderColor : null), _defineProperty(_notLastChild2, "border".concat(borderDir, "Style"), borderVertical ? $theme.borders.border300.borderStyle : null), _defineProperty(_notLastChild2, "border".concat(borderDir, "Width"), borderVertical ? $theme.borders.border300.borderWidth : null), _notLastChild2)
   });
 });

package/esm/table-semantic/table-builder.js

@@ -258,7 +258,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
         }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, sortIcon);
       }
 
-      function renderCell(col, colIndex, row, rowIndex) {
+      function renderCell(col, colIndex, row, rowIndex, lastRowindex) {
         var colOverrides = col.overrides || {};
 
         var _getOverrides33 = getOverrides(colOverrides.TableBodyCell, TableBodyCell),
@@ -274,6 +274,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $row: row,
           $rowIndex: rowIndex,
           $isNumeric: col.numeric,
+          $isLastRow: rowIndex === lastRowindex,
           $size: size
         }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
       }
@@ -301,7 +302,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $row: row,
           $rowIndex: rowIndex
         }, tableBodyRowProps), columns.map(function (col, colIndex) {
-          return renderCell(col, colIndex, row, rowIndex);
+          return renderCell(col, colIndex, row, rowIndex, data.length - 1);
         }));
       }))));
     }

package/esm/table-semantic/table.js

@@ -160,6 +160,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
             $divider: divider,
             $row: row,
             $rowIndex: rowIndex,
+            $isLastRow: rowIndex === data.length - 1,
             $size: size
           }, tableBodyCellProps), row[colIndex]);
         }));

package/esm/tag/index.js

@@ -6,5 +6,5 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as Tag } from './tag.js'; // Styled elements
 
-export { Root as StyledRoot, Action as StyledAction, ActionIcon as StyledActionIcon, Text as StyledText } from './styled-components.js';
+export { Root as StyledRoot, Action as StyledAction, Text as StyledText } from './styled-components.js';
 export { KIND, VARIANT, SIZE } from './constants.js';

package/esm/tag/styled-components.js

@@ -278,11 +278,9 @@ export var Action = styled('span', function (props) {
   return _ref = {
     alignItems: 'center'
   }, _defineProperty(_ref, bottomRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, topRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, "cursor", $disabled ? 'not-allowed' : 'pointer'), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, marginDir, (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, SIZE.small, '8px'), _defineProperty(_SIZE$small$SIZE$medi, SIZE.medium, '12px'), _defineProperty(_SIZE$small$SIZE$medi, SIZE.large, '16px'), _SIZE$small$SIZE$medi)[$size]), _defineProperty(_ref, "outline", 'none'), _defineProperty(_ref, "transitionProperty", 'all'), _defineProperty(_ref, "transitionDuration", 'background-color'), _defineProperty(_ref, "transitionTimingFunction", $theme.animation.easeOutCurve), _ref;
-});
-Action.displayName = "Action";
-export var ActionIcon = styled('svg', {}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
+}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
 
-ActionIcon.displayName = "ActionIcon";
+Action.displayName = "Action";
 export var StartEnhancerContainer = styled('div', function (_ref2) {
   var $theme = _ref2.$theme,
       _ref2$$size = _ref2.$size,

package/esm/tag/tag.js

@@ -1,5 +1,3 @@
-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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -14,6 +12,8 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+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); }
+
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -22,10 +22,19 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides.js';
-import { Action as StyledAction, Root as StyledRoot, ActionIcon as StyledActionIcon, StartEnhancerContainer as StyledStartEnhancerContainer, Text as StyledText } from './styled-components.js';
+import { Action as StyledAction, Root as StyledRoot, StartEnhancerContainer as StyledStartEnhancerContainer, Text as StyledText } from './styled-components.js';
 import { KIND, VARIANT, SIZE } from './constants.js';
 import { getTextFromChildren } from './utils.js';
-import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
+import DeleteIcon from '../icon/delete.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js'; // Previously, Tag used a hardcoded SVG as its 'close' icon. Replacing it with
+// Delete requires modifying Delete's viewbox to prevent visual regressions.
+
+var ModifiedViewBoxDeleteIcon = function ModifiedViewBoxDeleteIcon(props) {
+  return /*#__PURE__*/React.createElement(DeleteIcon, _extends({
+    viewBox: "5 5 13.186 13.186"
+  }, props));
+};
+
 var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _SIZE$small$SIZE$medi;
 
@@ -106,7 +115,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
       Action = _getOverrides4[0],
       actionProps = _getOverrides4[1];
 
-  var _getOverrides5 = getOverrides(overrides.ActionIcon, StyledActionIcon),
+  var _getOverrides5 = getOverrides(overrides.ActionIcon, ModifiedViewBoxDeleteIcon),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
       ActionIcon = _getOverrides6[0],
       actionIconProps = _getOverrides6[1];
@@ -147,7 +156,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   var titleText = title || getTextFromChildren(children);
   var isButton = (clickable || closeable) && !disabled;
-  var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, SIZE.small, '12'), _defineProperty(_SIZE$small$SIZE$medi, SIZE.medium, '16'), _defineProperty(_SIZE$small$SIZE$medi, SIZE.large, '20'), _SIZE$small$SIZE$medi)[size]; // Capitalize for JSX
+  var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, SIZE.small, 12), _defineProperty(_SIZE$small$SIZE$medi, SIZE.medium, 16), _defineProperty(_SIZE$small$SIZE$medi, SIZE.large, 20), _SIZE$small$SIZE$medi)[size]; // Capitalize for JSX
 
   var StartEnhancer = startEnhancer;
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
@@ -161,21 +170,14 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, rootHandlers, sharedProps, rootProps, {
     onFocus: forkFocus(rootProps, handleFocus),
     onBlur: forkBlur(rootProps, handleBlur)
-  }), StartEnhancer && /*#__PURE__*/React.createElement(StartEnhancerContainer, startEnhancerContainerProps, /*#__PURE__*/React.createElement(StartEnhancer, null)), /*#__PURE__*/React.createElement(Text, _extends({
+  }), StartEnhancer && StartEnhancer !== 0 && /*#__PURE__*/React.createElement(StartEnhancerContainer, startEnhancerContainerProps, /*#__PURE__*/React.createElement(StartEnhancer, null)), /*#__PURE__*/React.createElement(Text, _extends({
     title: titleText
   }, textProps), children), closeable ? /*#__PURE__*/React.createElement(Action, _extends({
     "aria-hidden": true,
     role: "presentation"
   }, actionHandlers, sharedProps, actionProps), /*#__PURE__*/React.createElement(ActionIcon, _extends({
-    width: actionSize,
-    height: actionSize,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, actionIconProps), /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M21.0999 5.09998L18.8999 2.90002L11.9999 9.90002L5.09985 2.90002L2.8999 5.09998L9.8999 12L2.8999 18.9L5.09985 21.1L11.9999 14.1L18.8999 21.1L21.0999 18.9L14.0999 12L21.0999 5.09998Z"
-  }))) : null);
+    size: actionSize
+  }, actionIconProps))) : null);
 });
 Tag.displayName = 'Tag';
 export default Tag;

package/esm/textarea/textarea.js

@@ -139,8 +139,7 @@ _defineProperty(Textarea, "defaultProps", {
   placeholder: '',
   required: false,
   rows: 3,
-  size: SIZE.default,
-  value: ''
+  size: SIZE.default
 });
 
 export default Textarea;

package/esm/themes/dark-theme/color-semantic-tokens.js

@@ -23,12 +23,12 @@ export default (function () {
     backgroundInversePrimary: foundation.primaryA,
     backgroundInverseSecondary: colors.gray300,
     // Content
-    contentPrimary: foundation.primaryA,
-    contentSecondary: colors.gray400,
-    contentTertiary: colors.gray500,
-    contentInversePrimary: foundation.primaryB,
-    contentInverseSecondary: colors.gray600,
-    contentInverseTertiary: colors.gray500,
+    contentPrimary: colors.white,
+    contentSecondary: colors.gray300,
+    contentTertiary: colors.gray400,
+    contentInversePrimary: colors.black,
+    contentInverseSecondary: colors.gray700,
+    contentInverseTertiary: colors.gray600,
     // Border
     borderOpaque: colors.gray700,
     borderTransparent: hexToRgba(foundation.primaryA, '0.08'),
@@ -45,7 +45,7 @@ export default (function () {
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: colors.green500,
     backgroundLightAccent: colors.blue700,
     backgroundLightPositive: colors.green700,
     backgroundLightNegative: colors.red700,
@@ -66,7 +66,17 @@ export default (function () {
     borderAccentLight: colors.blue500,
     borderNegative: colors.red500,
     borderWarning: colors.yellow500,
-    borderPositive: colors.green500
+    borderPositive: colors.green500,
+    // Programs
+    safety: colors.blue400,
+    eatsGreen400: colors.green400,
+    freightBlue400: colors.cobalt400,
+    jumpRed400: colors.red400,
+    rewardsTier1: colors.blue400,
+    rewardsTier2: colors.yellow400,
+    rewardsTier3: colors.platinum400,
+    rewardsTier4: colors.gray200,
+    membership: colors.yellow600
   };
   return _objectSpread(_objectSpread({}, core), coreExtensions);
 });

package/esm/themes/light-theme/color-semantic-tokens.js

@@ -45,7 +45,7 @@ export default (function () {
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: colors.green400,
     backgroundLightAccent: colors.blue50,
     backgroundLightNegative: colors.red50,
     backgroundLightWarning: colors.yellow50,
@@ -58,15 +58,25 @@ export default (function () {
     contentOnColor: colors.white,
     contentOnColorInverse: colors.black,
     contentNegative: foundation.negative,
-    contentWarning: colors.yellow700,
-    contentPositive: foundation.positive,
+    contentWarning: colors.yellow600,
+    contentPositive: colors.green400,
     // Border
     borderStateDisabled: colors.gray50,
     borderAccent: colors.blue400,
     borderAccentLight: colors.blue200,
     borderNegative: colors.red200,
     borderWarning: colors.yellow200,
-    borderPositive: colors.green200
+    borderPositive: colors.green200,
+    // Programs
+    safety: colors.blue400,
+    eatsGreen400: colors.green400,
+    freightBlue400: colors.cobalt400,
+    jumpRed400: colors.red400,
+    rewardsTier1: colors.blue400,
+    rewardsTier2: colors.yellow400,
+    rewardsTier3: colors.platinum400,
+    rewardsTier4: colors.black,
+    membership: colors.yellow600
   };
   return _objectSpread(_objectSpread({}, core), coreExtensions);
 });

package/esm/tokens/colors.js

@@ -11,7 +11,7 @@ var colors = {
   gray200: '#E2E2E2',
   gray300: '#CBCBCB',
   gray400: '#AFAFAF',
-  gray500: '#757575',
+  gray500: '#6B6B6B',
   gray600: '#545454',
   gray700: '#333333',
   gray800: '#1F1F1F',
@@ -48,13 +48,13 @@ var colors = {
   yellow300: '#FFCF70',
   yellow400: '#FFC043',
   yellow500: '#BC8B2C',
-  yellow600: '#997328',
+  yellow600: '#996F00',
   yellow700: '#674D1B',
   green50: '#E6F2ED',
   green100: '#ADDEC9',
   green200: '#66D19E',
   green300: '#06C167',
-  green400: '#05944F',
+  green400: '#048848',
   green500: '#03703C',
   green600: '#03582F',
   green700: '#10462D',

package/esm/tree-view/tree-view.js

@@ -133,8 +133,6 @@ export default function TreeView(props) {
         break;
 
       default:
-        e.preventDefault();
-
         if (timeOutRef.current !== null) {
           clearTimeout(timeOutRef.current);
         }

package/form-control/form-control.js

@@ -11,12 +11,10 @@ var React = _interopRequireWildcard(require("react"));
 
 var _overrides = require("../helpers/overrides.js");
 
-var _getBuiId = _interopRequireDefault(require("../utils/get-bui-id.js"));
+var _reactUid = require("react-uid");
 
 var _styledComponents = require("./styled-components.js");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -67,28 +65,14 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(FormControl);
 
   function FormControl() {
-    var _this;
-
     _classCallCheck(this, FormControl);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      captionId: (0, _getBuiId.default)()
-    });
-
-    return _this;
+    return _super.apply(this, arguments);
   }
 
   _createClass(FormControl, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props = this.props,
           _this$props$overrides = _this$props.overrides,
           LabelOverride = _this$props$overrides.Label,
@@ -126,23 +110,25 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__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(ControlContainer, _extends({
-        "data-baseweb": "form-control-container"
-      }, sharedProps, (0, _overrides.getOverrideProps)(ControlContainerOverride)), React.Children.map(children, function (child, index) {
-        if (!child) return;
-        var key = child.key || String(index);
-        return /*#__PURE__*/React.cloneElement(child, {
-          key: key,
-          'aria-errormessage': error ? _this2.state.captionId : null,
-          'aria-describedby': caption || positive ? _this2.state.captionId : null,
-          disabled: onlyChildProps.disabled || disabled,
-          error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
-          positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive
-        });
-      }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
-        "data-baseweb": "form-control-caption",
-        id: this.state.captionId
-      }, sharedProps, (0, _overrides.getOverrideProps)(CaptionOverride)), hint)));
+      }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), /*#__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) {
+          if (!child) return;
+          var key = child.key || String(index);
+          return /*#__PURE__*/React.cloneElement(child, {
+            key: key,
+            '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
+          });
+        }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
+          "data-baseweb": "form-control-caption",
+          id: captionId
+        }, sharedProps, (0, _overrides.getOverrideProps)(CaptionOverride)), hint));
+      }));
     }
   }]);
 

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 import {getOverride, getOverrideProps} from '../helpers/overrides.js';
-import getBuiId from '../utils/get-bui-id.js';
+import {UIDConsumer} from 'react-uid';
 import {
   Label as StyledLabel,
   Caption as StyledCaption,
@@ -42,7 +42,6 @@ export default class FormControl extends React.Component<
     caption: null,
     disabled: false,
   };
-  state = {captionId: getBuiId()};
 
   render() {
     const {
@@ -96,42 +95,45 @@ export default class FormControl extends React.Component<
             {typeof label === 'function' ? label(sharedProps) : label}
           </Label>
         )}
-        <ControlContainer
-          data-baseweb="form-control-container"
-          {...sharedProps}
-          {...getOverrideProps(ControlContainerOverride)}
-        >
-          {React.Children.map(children, (child, index) => {
-            if (!child) return;
-
-            const key = child.key || String(index);
-            return React.cloneElement(child, {
-              key,
-              'aria-errormessage': error ? this.state.captionId : null,
-              'aria-describedby':
-                caption || positive ? this.state.captionId : null,
-              disabled: onlyChildProps.disabled || disabled,
-              error:
-                typeof onlyChildProps.error !== 'undefined'
-                  ? onlyChildProps.error
-                  : error,
-              positive:
-                typeof onlyChildProps.positive !== 'undefined'
-                  ? onlyChildProps.positive
-                  : positive,
-            });
-          })}
-          {(caption || error || positive) && (
-            <Caption
-              data-baseweb="form-control-caption"
-              id={this.state.captionId}
+        <UIDConsumer>
+          {captionId => (
+            <ControlContainer
+              data-baseweb="form-control-container"
               {...sharedProps}
-              {...getOverrideProps(CaptionOverride)}
+              {...getOverrideProps(ControlContainerOverride)}
             >
-              {hint}
-            </Caption>
+              {React.Children.map(children, (child, index) => {
+                if (!child) return;
+
+                const key = child.key || String(index);
+                return React.cloneElement(child, {
+                  key,
+                  '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,
+                });
+              })}
+              {(caption || error || positive) && (
+                <Caption
+                  data-baseweb="form-control-caption"
+                  id={captionId}
+                  {...sharedProps}
+                  {...getOverrideProps(CaptionOverride)}
+                >
+                  {hint}
+                </Caption>
+              )}
+            </ControlContainer>
           )}
-        </ControlContainer>
+        </UIDConsumer>
       </React.Fragment>
     );
   }

package/helper/helper.js

@@ -49,12 +49,16 @@ function Helper(props) {
       }
     }
   }, overrides);
-  return /*#__PURE__*/React.createElement(_index.Popover, _extends({
-    "data-baseweb": "helper"
-  }, restProps, {
-    placement: placement,
-    overrides: mergedOverrides
-  }));
+  return (
+    /*#__PURE__*/
+    //$FlowFixMe
+    React.createElement(_index.Popover, _extends({
+      "data-baseweb": "helper"
+    }, restProps, {
+      placement: placement,
+      overrides: mergedOverrides
+    }))
+  );
 }
 
 Helper.defaultProps = _objectSpread(_objectSpread({}, _index.Popover.defaultProps), {}, {

package/helper/helper.js.flow

@@ -32,6 +32,7 @@ export function Helper(props: PropsT) {
   );
 
   return (
+    //$FlowFixMe
     <Popover
       data-baseweb="helper"
       {...restProps}

package/helpers/base-provider.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
+var _reactUid = require("react-uid");
+
 var _index = require("../layer/index.js");
 
 var _index2 = require("../styles/index.js");
@@ -31,9 +33,11 @@ var BaseProvider = function BaseProvider(props) {
   return /*#__PURE__*/React.createElement(_index.LayersManager, {
     zIndex: zIndex,
     overrides: overrides
+  }, /*#__PURE__*/React.createElement(_reactUid.UIDReset, {
+    prefix: "bui"
   }, /*#__PURE__*/React.createElement(_index2.ThemeProvider, {
     theme: theme
-  }, children));
+  }, children)));
 };
 
 var _default = BaseProvider;

package/helpers/base-provider.js.flow

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
+import {UIDReset} from 'react-uid';
 import {LayersManager} from '../layer/index.js';
 import {ThemeProvider} from '../styles/index.js';
 import type {BaseProviderPropsT} from './types.js';
@@ -14,7 +15,9 @@ const BaseProvider = (props: BaseProviderPropsT) => {
   const {children, overrides, theme, zIndex} = props;
   return (
     <LayersManager zIndex={zIndex} overrides={overrides}>
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      <UIDReset prefix="bui">
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      </UIDReset>
     </LayersManager>
   );
 };

package/index.d.ts

@@ -51,6 +51,7 @@ export function styled<
     P
 >;
 
+export {Theme} from 'baseui/theme';
 export const LightTheme: Theme;
 export const LightThemeMove: Theme;
 export const lightThemePrimitives: ThemePrimitives;

package/input/input.js

@@ -146,14 +146,14 @@ var Input = /*#__PURE__*/function (_React$Component) {
       }, sharedProps, rootProps, {
         $adjoined: getAdjoinedProp(startEnhancer, endEnhancer),
         $hasIconTrailing: this.props.clearable || this.props.type == 'password'
-      }), startEnhancer && /*#__PURE__*/React.createElement(StartEnhancer, _extends({}, sharedProps, startEnhancerProps, {
+      }), isEnhancer(startEnhancer) && /*#__PURE__*/React.createElement(StartEnhancer, _extends({}, sharedProps, startEnhancerProps, {
         $position: _constants.ENHANCER_POSITION.start
       }), typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer), /*#__PURE__*/React.createElement(_baseInput.default, _extends({}, restProps, {
         overrides: restOverrides,
         adjoined: getAdjoinedProp(startEnhancer, endEnhancer),
         onFocus: this.onFocus,
         onBlur: this.onBlur
-      })), endEnhancer && /*#__PURE__*/React.createElement(EndEnhancer, _extends({}, sharedProps, endEnhancerProps, {
+      })), isEnhancer(endEnhancer) && /*#__PURE__*/React.createElement(EndEnhancer, _extends({}, sharedProps, endEnhancerProps, {
         $position: _constants.ENHANCER_POSITION.end
       }), typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer));
     }
@@ -179,16 +179,20 @@ _defineProperty(Input, "defaultProps", {
 });
 
 function getAdjoinedProp(startEnhancer, endEnhancer) {
-  if (startEnhancer && endEnhancer) {
+  if (isEnhancer(startEnhancer) && isEnhancer(endEnhancer)) {
     return _constants.ADJOINED.both;
-  } else if (startEnhancer) {
+  } else if (isEnhancer(startEnhancer)) {
     return _constants.ADJOINED.left;
-  } else if (endEnhancer) {
+  } else if (isEnhancer(endEnhancer)) {
     return _constants.ADJOINED.right;
   }
 
   return _constants.ADJOINED.none;
 }
 
+function isEnhancer(enhancer) {
+  return Boolean(enhancer || enhancer === 0);
+}
+
 var _default = Input;
 exports.default = _default;