baseui 10.0.0 → 10.3.0

package/es/helper/helper.js

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

package/es/helpers/base-provider.js

@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
+import { UIDReset } from 'react-uid';
 import { LayersManager } from '../layer/index.js';
 import { ThemeProvider } from '../styles/index.js';
 
@@ -18,9 +19,11 @@ const BaseProvider = props => {
   return /*#__PURE__*/React.createElement(LayersManager, {
     zIndex: zIndex,
     overrides: overrides
+  }, /*#__PURE__*/React.createElement(UIDReset, {
+    prefix: "bui"
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
-  }, children));
+  }, children)));
 };
 
 export default BaseProvider;

package/es/input/input.js

@@ -67,14 +67,14 @@ class Input extends 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: ENHANCER_POSITION.start
     }), typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer), /*#__PURE__*/React.createElement(BaseInput, _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: ENHANCER_POSITION.end
     }), typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer));
   }
@@ -98,15 +98,19 @@ _defineProperty(Input, "defaultProps", {
 });
 
 function getAdjoinedProp(startEnhancer, endEnhancer) {
-  if (startEnhancer && endEnhancer) {
+  if (isEnhancer(startEnhancer) && isEnhancer(endEnhancer)) {
     return ADJOINED.both;
-  } else if (startEnhancer) {
+  } else if (isEnhancer(startEnhancer)) {
     return ADJOINED.left;
-  } else if (endEnhancer) {
+  } else if (isEnhancer(endEnhancer)) {
     return ADJOINED.right;
   }
 
   return ADJOINED.none;
 }
 
+function isEnhancer(enhancer) {
+  return Boolean(enhancer || enhancer === 0);
+}
+
 export default Input;

package/es/layer/layer.js

@@ -48,7 +48,11 @@ class LayerComponent extends React.Component {
 
   componentDidMount() {
     this.context.addEscapeHandler(this.onEscape);
-    this.context.addDocClickHandler(this.onDocumentClick);
+
+    if (!this.props.isHoverLayer) {
+      this.context.addDocClickHandler(this.onDocumentClick);
+    }
+
     const {
       onMount,
       mountNode,

package/es/layout-grid/grid.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides.js';
 import { STYLE, STYLE_VALUES } from './constants.js';
-import { StyledGrid as DefaultStyledGrid } from './styled-components.js';
+import { StyledGrid as DefaultStyledGrid, StyledGridWrapper as DefaultStyledGridWrapper } from './styled-components.js';
 export const GridContext = /*#__PURE__*/React.createContext({});
 export default function Grid({
   align,
@@ -25,27 +25,33 @@ export default function Grid({
   overrides = {}
 }) {
   const [StyledGrid, overrideProps] = getOverrides(overrides.Grid, DefaultStyledGrid);
+  const [StyledGridWrapper, wrapperProps] = getOverrides(overrides.GridWrapper, DefaultStyledGridWrapper);
   const presetStyleValues = STYLE_VALUES[gridStyle];
-  const gridStyleValues = presetStyleValues && {
+  const gridStyleValues = presetStyleValues ? {
     $gridGutters: presetStyleValues.gutters,
     $gridMargins: presetStyleValues.margins,
     $gridMaxWidth: presetStyleValues.maxWidth,
     $gridUnit: presetStyleValues.unit
-  };
+  } : {};
   const gridContextStyleValues = presetStyleValues && {
     gridColumns: presetStyleValues.columns,
     gridGaps: presetStyleValues.gaps,
     gridGutters: presetStyleValues.gutters,
     gridUnit: presetStyleValues.unit
   };
-  return /*#__PURE__*/React.createElement(StyledGrid, _extends({
+  return /*#__PURE__*/React.createElement(StyledGridWrapper, _extends({
+    $behavior: behavior,
+    $gridMargins: gridMargins != null ? gridMargins : gridStyleValues.$gridMargins,
+    $gridMaxWidth: gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth,
+    $gridUnit: gridUnit != null ? gridUnit : gridStyleValues.$gridUnit
+  }, wrapperProps), /*#__PURE__*/React.createElement(StyledGrid, _extends({
     $align: align,
     $behavior: behavior,
-    $gridGutters: gridGutters,
-    $gridMargins: gridMargins,
-    $gridMaxWidth: gridMaxWidth,
-    $gridUnit: gridUnit
-  }, gridStyleValues, overrideProps), /*#__PURE__*/React.createElement(GridContext.Provider, {
+    $gridGutters: gridGutters != null ? gridGutters : gridStyleValues.$gridGutters,
+    $gridMargins: gridMargins != null ? gridMargins : gridStyleValues.$gridMargins,
+    $gridMaxWidth: gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth,
+    $gridUnit: gridUnit != null ? gridUnit : gridStyleValues.$gridUnit
+  }, overrideProps), /*#__PURE__*/React.createElement(GridContext.Provider, {
     value: {
       gridColumns,
       gridGaps,
@@ -53,5 +59,5 @@ export default function Grid({
       gridUnit,
       ...gridContextStyleValues
     }
-  }, children));
+  }, children)));
 }

package/es/layout-grid/styled-components.js

@@ -7,6 +7,17 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles/index.js';
 import { getMediaQueries } from '../helpers/responsive-helpers.js';
 import { BEHAVIOR } from './constants.js';
+export const StyledGridWrapper = styled('div', ({
+  $theme,
+  $behavior = BEHAVIOR.fixed,
+  $gridMargins = $theme.grid.margins,
+  $gridMaxWidth = $theme.grid.maxWidth,
+  $gridUnit = $theme.grid.unit
+}) => ({
+  margin: 'auto',
+  maxWidth: $behavior === BEHAVIOR.fixed ? `${$gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1}${$gridUnit}` : null
+}));
+StyledGridWrapper.displayName = "StyledGridWrapper";
 export const StyledGrid = styled('div', ({
   $theme,
   $align = null,
@@ -20,22 +31,24 @@ export const StyledGrid = styled('div', ({
   const gridStyles = mediaQueries.reduce((acc, cur, idx) => {
     return { ...acc,
       [cur]: {
-        paddingLeft: `${getResponsiveNumber($gridMargins, idx) - getResponsiveNumber($gridGutters, idx) / 2 - 0.5}${$gridUnit}`,
-        paddingRight: `${getResponsiveNumber($gridMargins, idx) - getResponsiveNumber($gridGutters, idx) / 2 - 0.5}${$gridUnit}`,
+        paddingLeft: `${getResponsiveNumber($gridMargins, idx)}${$gridUnit}`,
+        paddingRight: `${getResponsiveNumber($gridMargins, idx)}${$gridUnit}`,
+        marginLeft: `-${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
+        marginRight: `-${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
         alignItems: getResponsiveValue($align, idx)
       }
     };
   }, {
-    paddingLeft: `${getResponsiveNumber($gridMargins, 0) - getResponsiveNumber($gridGutters, 0) / 2 - 0.5}${$gridUnit}`,
-    paddingRight: `${getResponsiveNumber($gridMargins, 0) - getResponsiveNumber($gridGutters, 0) / 2 - 0.5}${$gridUnit}`,
+    paddingLeft: `${getResponsiveNumber($gridMargins, 0)}${$gridUnit}`,
+    paddingRight: `${getResponsiveNumber($gridMargins, 0)}${$gridUnit}`,
+    marginLeft: `-${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
+    marginRight: `-${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
     alignItems: getResponsiveValue($align, 0)
   });
   return {
     boxSizing: 'border-box',
     display: 'flex',
     flexWrap: 'wrap',
-    marginLeft: 'auto',
-    marginRight: 'auto',
     maxWidth: $behavior === BEHAVIOR.fixed ? `${$gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1}${$gridUnit}` : null,
     ...gridStyles
   };
@@ -70,10 +83,9 @@ export const StyledCell = styled('div', ({
     return { ...acc,
       [cur]: {
         display: 'block',
-        width: `${100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($span, idx), getResponsiveNumber($gridColumns, idx))}%`,
-        marginLeft: `${100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($skip, idx), getResponsiveNumber($gridColumns, idx) - 1)}%`,
-        paddingLeft: `${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
-        paddingRight: `${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
+        width: `calc(${100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($span, idx), getResponsiveNumber($gridColumns, idx))}% - ${getResponsiveNumber($gridGutters, idx)}${$gridUnit})`,
+        marginLeft: `calc(${100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($skip, idx), getResponsiveNumber($gridColumns, idx) - 1)}% + ${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit})`,
+        marginRight: `${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
         marginBottom: `${getResponsiveNumber($gridGaps, idx)}${$gridUnit}`,
         alignSelf: getResponsiveValue($align, idx),
         order: getResponsiveNumber($order, idx)
@@ -81,8 +93,8 @@ export const StyledCell = styled('div', ({
     };
   }, {
     width: '100%',
-    paddingLeft: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
-    paddingRight: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
+    marginLeft: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
+    marginRight: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
     marginBottom: `${getResponsiveNumber($gridGaps, 0)}${$gridUnit}`,
     alignSelf: getResponsiveValue($align, 0),
     order: getResponsiveNumber($order, 0)

package/es/list/index.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as ListItem } from './list-item.js';
 export { default as ListItemLabel } from './list-item-label.js';
+export { default as ListHeading } from './list-heading.js';
 export { default as MenuAdapter } from './menu-adapter.js';
 export { ARTWORK_SIZES, SHAPE } from './constants.js';
 export * from './styled-components.js';

package/es/list/list-heading.js

@@ -0,0 +1,77 @@
+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.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import React from 'react';
+import ReactIs from 'react-is';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledHeadingRoot, StyledHeadingContent, StyledHeadingContentRow, StyledHeadingEndEnhancerContainer, StyledHeadingEndEnhancerDescriptionContainer, StyledHeadingMainHeading, StyledHeadingSubHeading } from './styled-components.js';
+
+function RenderNode(props) {
+  const {
+    component,
+    ...restProps
+  } = props;
+  const Component = component;
+
+  if (!Component) {
+    return null;
+  }
+
+  if (typeof Component === 'string') {
+    return Component;
+  }
+
+  if (ReactIs.isValidElementType(Component)) {
+    // $FlowFixMe
+    return /*#__PURE__*/React.createElement(Component, restProps);
+  } // $FlowFixMe
+
+
+  return Component;
+}
+
+const ListHeading = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    overrides = {}
+  } = props;
+  const EndEnhancer = props.endEnhancer;
+  const EndEnhancerDescription = props.endEnhancerDescription;
+  const SubHeading = props.subHeading;
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledHeadingRoot);
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledHeadingContent);
+  const [HeadingContainer, headingContainerProps] = getOverrides(overrides.HeadingContainer, StyledHeadingMainHeading);
+  const [SubHeadingContainer, subHeadingContainerProps] = getOverrides(overrides.SubHeadingContainer, StyledHeadingSubHeading);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledHeadingEndEnhancerContainer);
+  const [EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps] = getOverrides(overrides.EndEnhancerDescriptionContainer, StyledHeadingEndEnhancerDescriptionContainer);
+  const isEndEnhancerString = typeof EndEnhancer === 'string';
+
+  if (isEndEnhancerString && EndEnhancerDescription) {
+    console.warn('endEnhancerDescription will not be rendered if endEnhancer is not a string');
+  }
+
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  , _extends({
+    ref: ref
+  }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
+    $maxLines: props.maxLines
+  }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: props.heading
+  })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
+    $isText: isEndEnhancerString
+  }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancer
+  }))), (SubHeading || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
+    $maxLines: props.maxLines
+  }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: SubHeading
+  })), EndEnhancerDescription && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancerDescription
+  })))));
+});
+ListHeading.displayName = 'ListHeading';
+export default ListHeading;

package/es/list/list-item.js

@@ -50,7 +50,7 @@ const ListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   })), /*#__PURE__*/React.createElement(Content, _extends({
     $mLeft: !Artwork,
     $sublist: !!props.sublist
-  }, contentProps), props.children, EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, endEnhancerContainerProps, /*#__PURE__*/React.createElement(EndEnhancer, null))));
+  }, contentProps), props.children, EndEnhancer && EndEnhancer !== 0 && /*#__PURE__*/React.createElement(EndEnhancerContainer, endEnhancerContainerProps, /*#__PURE__*/React.createElement(EndEnhancer, null))));
 });
 ListItem.displayName = 'ListItem';
 export default ListItem;

package/es/list/menu-adapter.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import ListItem from './list-item.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(ListItem, {
     ref: ref,
@@ -13,7 +14,8 @@ const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
-    overrides: {
+    overrides: // $FlowFixMe
+    mergeOverrides({
       Root: {
         props: {
           onMouseEnter: props.onMouseEnter,
@@ -26,7 +28,7 @@ const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
           cursor: props.$disabled ? 'not-allowed' : 'pointer'
         })
       }
-    }
+    }, props.overrides)
   }, props.children);
 });
 MenuAdapter.displayName = 'MenuAdapter';

package/es/list/styled-components.js

@@ -37,7 +37,7 @@ export const StyledContent = styled('div', ({
     borderLeftStyle: 'none',
     display: 'flex',
     flexGrow: 1,
-    minHeight: $sublist ? '48px' : '72px',
+    minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
     justifyContent: 'space-between',
     ...($theme.direction === 'rtl' ? {
       paddingLeft: $theme.sizing.scale600,
@@ -101,8 +101,105 @@ StyledLabelDescription.displayName = "StyledLabelDescription";
 export const StyledLabelSublistContent = styled('p', ({
   $theme
 }) => {
-  return { ...$theme.typography.ParagraphMedium,
-    color: $theme.colors.contentPrimary
+  return { ...$theme.typography.LabelMedium,
+    color: $theme.colors.contentPrimary,
+    marginTop: $theme.sizing.scale500,
+    marginBottom: $theme.sizing.scale500
+  };
+});
+StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+export const StyledHeadingRoot = styled('div', ({
+  $theme
+}) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: $theme.colors.backgroundPrimary,
+    overflow: 'hidden',
+    minHeight: $theme.sizing.scale1600
+  };
+});
+StyledHeadingRoot.displayName = "StyledHeadingRoot";
+export const StyledHeadingContent = styled('div', ({
+  $theme
+}) => {
+  return {
+    flexGrow: 1,
+    width: '100%',
+    minWidth: 0,
+    paddingTop: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale300,
+    ...($theme.direction === 'rtl' ? {
+      paddingLeft: $theme.sizing.scale600,
+      marginRight: $theme.sizing.scale600
+    } : {
+      paddingRight: $theme.sizing.scale600,
+      marginLeft: $theme.sizing.scale600
+    })
+  };
+});
+StyledHeadingContent.displayName = "StyledHeadingContent";
+export const StyledHeadingContentRow = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%'
+});
+StyledHeadingContentRow.displayName = "StyledHeadingContentRow";
+export const StyledHeadingMainHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+({
+  $maxLines = 1,
+  $theme
+}) => {
+  return { ...$theme.typography.HeadingSmall,
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  };
+});
+StyledHeadingMainHeading.displayName = "StyledHeadingMainHeading";
+export const StyledHeadingSubHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+({
+  $maxLines = 1,
+  $theme
+}) => {
+  return { ...$theme.typography.ParagraphLarge,
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
   };
 });
-StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+StyledHeadingSubHeading.displayName = "StyledHeadingSubHeading";
+export const StyledHeadingEndEnhancerContainer = styled('div', ({
+  $isText,
+  $theme
+}) => ({ ...$theme.typography.LabelMedium,
+  display: 'flex',
+  alignItems: $isText ? 'flex-end' : 'center',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}));
+StyledHeadingEndEnhancerContainer.displayName = "StyledHeadingEndEnhancerContainer";
+export const StyledHeadingEndEnhancerDescriptionContainer = styled('p', ({
+  $theme
+}) => ({ ...$theme.typography.ParagraphMedium,
+  marginTop: 0,
+  marginBottom: 0,
+  display: 'flex',
+  alignItems: 'flex-start',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}));
+StyledHeadingEndEnhancerDescriptionContainer.displayName = "StyledHeadingEndEnhancerDescriptionContainer";

package/es/menu/stateful-container.js

@@ -1,3 +1,5 @@
+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; }
 
 /*
@@ -8,11 +10,34 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react'; // Files
 
-import getBuiId from '../utils/get-bui-id.js';
 import { STATE_CHANGE_TYPES, KEY_STRINGS } from './constants.js';
 import { scrollItemIntoView } from './utils.js'; // Types
 
-export default class MenuStatefulContainer extends React.Component {
+import { useUIDSeed } from 'react-uid';
+const DEFAULT_PROPS = {
+  // keeping it in defaultProps to satisfy Flow
+  initialState: {
+    // We start the index at -1 to indicate that no highlighting exists initially
+    highlightedIndex: -1,
+    isFocused: false
+  },
+  typeAhead: true,
+  keyboardControlNode: {
+    current: null
+  },
+  stateReducer: (changeType, changes) => changes,
+  onItemSelect: () => {},
+  getRequiredItemProps: () => ({}),
+  children: () => null,
+  // from nested-menus context
+  addMenuToNesting: () => {},
+  removeMenuFromNesting: () => {},
+  getParentMenu: () => {},
+  getChildMenu: () => {},
+  forceHighlight: false
+};
+
+class MenuStatefulContainerInner extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -215,7 +240,7 @@ export default class MenuStatefulContainer extends React.Component {
       if (!itemRef) {
         itemRef = /*#__PURE__*/React.createRef();
         this.refList[index] = itemRef;
-        this.optionIds[index] = getBuiId();
+        this.optionIds[index] = this.props.uidSeed(index);
       }
 
       const {
@@ -377,7 +402,7 @@ export default class MenuStatefulContainer extends React.Component {
     return this.props.children({ ...restProps,
       rootRef: this.props.rootRef ? this.props.rootRef : this.rootRef,
       activedescendantId: this.optionIds[this.state.highlightedIndex],
-      getRequiredItemProps: this.getRequiredItemProps,
+      getRequiredItemProps: (item, index) => this.getRequiredItemProps(item, index),
       handleMouseLeave: this.handleMouseLeave,
       highlightedIndex: this.state.highlightedIndex,
       isFocused: this.state.isFocused,
@@ -387,27 +412,16 @@ export default class MenuStatefulContainer extends React.Component {
     });
   }
 
-}
+} // Remove when MenuStatefulContainer is converted to a functional component.
 
-_defineProperty(MenuStatefulContainer, "defaultProps", {
-  // keeping it in defaultProps to satisfy Flow
-  initialState: {
-    // We start the index at -1 to indicate that no highlighting exists initially
-    highlightedIndex: -1,
-    isFocused: false
-  },
-  typeAhead: true,
-  keyboardControlNode: {
-    current: null
-  },
-  stateReducer: (changeType, changes) => changes,
-  onItemSelect: () => {},
-  getRequiredItemProps: () => ({}),
-  children: () => null,
-  // from nested-menus context
-  addMenuToNesting: () => {},
-  removeMenuFromNesting: () => {},
-  getParentMenu: () => {},
-  getChildMenu: () => {},
-  forceHighlight: false
-});
+
+_defineProperty(MenuStatefulContainerInner, "defaultProps", DEFAULT_PROPS);
+
+const MenuStatefulContainer = props => {
+  return /*#__PURE__*/React.createElement(MenuStatefulContainerInner, _extends({
+    uidSeed: useUIDSeed()
+  }, props));
+};
+
+MenuStatefulContainer.defaultProps = DEFAULT_PROPS;
+export default MenuStatefulContainer;

package/es/phone-input/base-country-picker.js

@@ -75,6 +75,8 @@ export default function CountryPicker(props) {
         width: 0
       },
       props: {
+        // https://github.com/uber/baseweb/issues/3846
+        autoComplete: 'chrome-off',
         'aria-label': 'Select country'
       }
     },

package/es/popover/popover.js

@@ -15,14 +15,14 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import FocusLock from 'react-focus-lock';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
-import getBuiId from '../utils/get-bui-id.js';
 import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, ANIMATE_OUT_TIME, ANIMATE_IN_TIME, POPOVER_MARGIN } from './constants.js';
 import { Layer, TetherBehavior } from '../layer/index.js';
 import { Arrow as StyledArrow, Body as StyledBody, Inner as StyledInner, Hidden } from './styled-components.js';
 import { fromPopperPlacement } from './utils.js';
 import defaultProps from './default-props.js';
+import { useUID } from 'react-uid';
 
-class Popover extends React.Component {
+class PopoverInner extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -36,8 +36,6 @@ class Popover extends React.Component {
 
     _defineProperty(this, "onMouseLeaveTimer", void 0);
 
-    _defineProperty(this, "generatedId", '');
-
     _defineProperty(this, "anchorRef", /*#__PURE__*/React.createRef());
 
     _defineProperty(this, "popperRef", /*#__PURE__*/React.createRef());
@@ -150,7 +148,6 @@ class Popover extends React.Component {
   }
 
   componentDidMount() {
-    this.generatedId = getBuiId();
     this.setState({
       isMounted: true
     });
@@ -270,7 +267,7 @@ class Popover extends React.Component {
   }
 
   getPopoverIdAttr() {
-    return this.props.id || this.generatedId || null;
+    return this.props.id || null;
   }
 
   getAnchorProps() {
@@ -419,7 +416,8 @@ class Popover extends React.Component {
     const defaultPopperOptions = {
       modifiers: {
         preventOverflow: {
-          enabled: !this.props.ignoreBoundary
+          enabled: !this.props.ignoreBoundary,
+          padding: 0
         }
       }
     }; // Only render popover on the browser (portals aren't supported server-side)
@@ -430,7 +428,8 @@ class Popover extends React.Component {
           key: "new-layer",
           mountNode: this.props.mountNode,
           onEscape: this.props.onEsc,
-          onDocumentClick: this.onDocumentClick,
+          onDocumentClick: this.isHoverTrigger() ? undefined : this.onDocumentClick,
+          isHoverLayer: this.isHoverTrigger(),
           onMount: () => this.setState({
             isLayerMounted: true
           }),
@@ -465,9 +464,21 @@ class Popover extends React.Component {
     return rendered;
   }
 
-}
+} // Remove when Popover is converted to a functional component.
+
+
+_defineProperty(PopoverInner, "defaultProps", defaultProps);
 
-_defineProperty(Popover, "defaultProps", defaultProps);
+const Popover = props => {
+  const {
+    innerRef
+  } = props;
+  return /*#__PURE__*/React.createElement(PopoverInner, _extends({
+    id: props.id || useUID(),
+    ref: innerRef
+  }, props));
+};
 
+Popover.defaultProps = defaultProps;
 export default Popover;
 /* eslint-enable react/no-find-dom-node */