baseui 10.0.0 → 10.3.0

package/menu/stateful-container.js

@@ -9,18 +9,18 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _getBuiId = _interopRequireDefault(require("../utils/get-bui-id.js"));
-
 var _constants = require("./constants.js");
 
 var _utils = require("./utils.js");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _reactUid = require("react-uid");
 
 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; }
 
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -51,15 +51,44 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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; }
 
-var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
-  _inherits(MenuStatefulContainer, _React$Component);
+var 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: function (changeType, changes) {
+    return changes;
+  },
+  onItemSelect: function onItemSelect() {},
+  getRequiredItemProps: function getRequiredItemProps() {
+    return {};
+  },
+  children: function children() {
+    return null;
+  },
+  // from nested-menus context
+  addMenuToNesting: function addMenuToNesting() {},
+  removeMenuFromNesting: function removeMenuFromNesting() {},
+  getParentMenu: function getParentMenu() {},
+  getChildMenu: function getChildMenu() {},
+  forceHighlight: false
+};
+
+var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
+  _inherits(MenuStatefulContainerInner, _React$Component);
 
-  var _super = _createSuper(MenuStatefulContainer);
+  var _super = _createSuper(MenuStatefulContainerInner);
 
-  function MenuStatefulContainer() {
+  function MenuStatefulContainerInner() {
     var _this;
 
-    _classCallCheck(this, MenuStatefulContainer);
+    _classCallCheck(this, MenuStatefulContainerInner);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -272,7 +301,7 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
       if (!itemRef) {
         itemRef = /*#__PURE__*/React.createRef();
         _this.refList[index] = itemRef;
-        _this.optionIds[index] = (0, _getBuiId.default)();
+        _this.optionIds[index] = _this.props.uidSeed(index);
       }
 
       var _this$props$getRequir = _this.props.getRequiredItemProps(item, index),
@@ -330,7 +359,7 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(MenuStatefulContainer, [{
+  _createClass(MenuStatefulContainerInner, [{
     key: "getItems",
     value: function getItems() {
       var _this2 = this;
@@ -422,6 +451,8 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this3 = this;
+
       // omit the stateful-container's props and don't pass it down
       // to the children (stateless menu)
       var _this$props = this.props,
@@ -439,7 +470,9 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
       return this.props.children(_objectSpread(_objectSpread({}, restProps), {}, {
         rootRef: this.props.rootRef ? this.props.rootRef : this.rootRef,
         activedescendantId: this.optionIds[this.state.highlightedIndex],
-        getRequiredItemProps: this.getRequiredItemProps,
+        getRequiredItemProps: function getRequiredItemProps(item, index) {
+          return _this3.getRequiredItemProps(item, index);
+        },
         handleMouseLeave: this.handleMouseLeave,
         highlightedIndex: this.state.highlightedIndex,
         isFocused: this.state.isFocused,
@@ -450,36 +483,18 @@ var MenuStatefulContainer = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return MenuStatefulContainer;
-}(React.Component);
+  return MenuStatefulContainerInner;
+}(React.Component); // Remove when MenuStatefulContainer is converted to a functional component.
 
-exports.default = MenuStatefulContainer;
 
-_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: function (changeType, changes) {
-    return changes;
-  },
-  onItemSelect: function onItemSelect() {},
-  getRequiredItemProps: function getRequiredItemProps() {
-    return {};
-  },
-  children: function children() {
-    return null;
-  },
-  // from nested-menus context
-  addMenuToNesting: function addMenuToNesting() {},
-  removeMenuFromNesting: function removeMenuFromNesting() {},
-  getParentMenu: function getParentMenu() {},
-  getChildMenu: function getChildMenu() {},
-  forceHighlight: false
-});
+_defineProperty(MenuStatefulContainerInner, "defaultProps", DEFAULT_PROPS);
+
+var MenuStatefulContainer = function MenuStatefulContainer(props) {
+  return /*#__PURE__*/React.createElement(MenuStatefulContainerInner, _extends({
+    uidSeed: (0, _reactUid.useUIDSeed)()
+  }, props));
+};
+
+MenuStatefulContainer.defaultProps = DEFAULT_PROPS;
+var _default = MenuStatefulContainer;
+exports.default = _default;

package/menu/stateful-container.js.flow

@@ -7,7 +7,6 @@ LICENSE file in the root directory of this source tree.
 // @flow
 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
@@ -18,31 +17,34 @@ import type {
   RenderPropsT,
   StateReducerFnT,
 } from './types.js';
-
-export default class MenuStatefulContainer extends React.Component<
-  StatefulContainerPropsT,
+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: StateReducerFnT),
+  onItemSelect: () => {},
+  getRequiredItemProps: () => ({}),
+  children: () => null,
+  // from nested-menus context
+  addMenuToNesting: () => {},
+  removeMenuFromNesting: () => {},
+  getParentMenu: () => {},
+  getChildMenu: () => {},
+  forceHighlight: false,
+};
+
+class MenuStatefulContainerInner extends React.Component<
+  StatefulContainerPropsT & {uidSeed: (item: number) => string},
   StatefulContainerStateT,
 > {
-  static 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: StateReducerFnT),
-    onItemSelect: () => {},
-    getRequiredItemProps: () => ({}),
-    children: () => null,
-    // from nested-menus context
-    addMenuToNesting: () => {},
-    removeMenuFromNesting: () => {},
-    getParentMenu: () => {},
-    getChildMenu: () => {},
-    forceHighlight: false,
-  };
+  static defaultProps = DEFAULT_PROPS;
 
   state: StatefulContainerStateT = {
     ...this.constructor.defaultProps.initialState,
@@ -357,7 +359,7 @@ export default class MenuStatefulContainer extends React.Component<
     if (!itemRef) {
       itemRef = React.createRef();
       this.refList[index] = itemRef;
-      this.optionIds[index] = getBuiId();
+      this.optionIds[index] = this.props.uidSeed(index);
     }
     const {
       disabled: disabledVal,
@@ -440,7 +442,8 @@ export default class MenuStatefulContainer extends React.Component<
         ...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,
@@ -454,6 +457,15 @@ export default class MenuStatefulContainer extends React.Component<
   }
 }
 
+// Remove when MenuStatefulContainer is converted to a functional component.
+const MenuStatefulContainer = (props: StatefulContainerPropsT) => {
+  return <MenuStatefulContainerInner uidSeed={useUIDSeed()} {...props} />;
+};
+
+MenuStatefulContainer.defaultProps = DEFAULT_PROPS;
+
+export default MenuStatefulContainer;
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.0.0",
+  "version": "10.3.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

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

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

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

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

package/popover/popover.js

@@ -11,8 +11,6 @@ var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 
 var _overrides = require("../helpers/overrides.js");
 
-var _getBuiId = _interopRequireDefault(require("../utils/get-bui-id.js"));
-
 var _constants = require("./constants.js");
 
 var _index = require("../layer/index.js");
@@ -23,6 +21,8 @@ var _utils = require("./utils.js");
 
 var _defaultProps = _interopRequireDefault(require("./default-props.js"));
 
+var _reactUid = require("react-uid");
+
 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; }
@@ -59,15 +59,15 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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; }
 
-var Popover = /*#__PURE__*/function (_React$Component) {
-  _inherits(Popover, _React$Component);
+var PopoverInner = /*#__PURE__*/function (_React$Component) {
+  _inherits(PopoverInner, _React$Component);
 
-  var _super = _createSuper(Popover);
+  var _super = _createSuper(PopoverInner);
 
-  function Popover() {
+  function PopoverInner() {
     var _this;
 
-    _classCallCheck(this, Popover);
+    _classCallCheck(this, PopoverInner);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -85,8 +85,6 @@ var Popover = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onMouseLeaveTimer", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "generatedId", '');
-
     _defineProperty(_assertThisInitialized(_this), "anchorRef", /*#__PURE__*/React.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "popperRef", /*#__PURE__*/React.createRef());
@@ -203,10 +201,9 @@ var Popover = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(Popover, [{
+  _createClass(PopoverInner, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.generatedId = (0, _getBuiId.default)();
       this.setState({
         isMounted: true
       });
@@ -341,7 +338,7 @@ var Popover = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getPopoverIdAttr",
     value: function getPopoverIdAttr() {
-      return this.props.id || this.generatedId || null;
+      return this.props.id || null;
     }
   }, {
     key: "getAnchorProps",
@@ -495,7 +492,8 @@ var Popover = /*#__PURE__*/function (_React$Component) {
       var 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)
@@ -506,7 +504,8 @@ var Popover = /*#__PURE__*/function (_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: function onMount() {
               return _this4.setState({
                 isLayerMounted: true
@@ -544,11 +543,21 @@ var Popover = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return Popover;
-}(React.Component);
+  return PopoverInner;
+}(React.Component); // Remove when Popover is converted to a functional component.
+
+
+_defineProperty(PopoverInner, "defaultProps", _defaultProps.default);
 
-_defineProperty(Popover, "defaultProps", _defaultProps.default);
+var Popover = function Popover(props) {
+  var innerRef = props.innerRef;
+  return /*#__PURE__*/React.createElement(PopoverInner, _extends({
+    id: props.id || (0, _reactUid.useUID)(),
+    ref: innerRef
+  }, props));
+};
 
+Popover.defaultProps = _defaultProps.default;
 var _default = Popover;
 /* eslint-enable react/no-find-dom-node */
 

package/popover/popover.js.flow

@@ -11,7 +11,6 @@ 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,
@@ -29,6 +28,7 @@ import {
 } from './styled-components.js';
 import {fromPopperPlacement} from './utils.js';
 import defaultProps from './default-props.js';
+import {useUID} from 'react-uid';
 
 import type {
   AnchorPropsT,
@@ -38,7 +38,10 @@ import type {
 } from './types.js';
 import type {PopperDataObjectT, NormalizedOffsetsT} from '../layer/types.js';
 
-class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
+class PopoverInner extends React.Component<
+  PopoverPropsT,
+  PopoverPrivateStateT,
+> {
   static defaultProps: $Shape<PopoverPropsT> = defaultProps;
 
   /* eslint-disable react/sort-comp */
@@ -47,7 +50,6 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
   animateOutCompleteTimer: ?TimeoutID;
   onMouseEnterTimer: ?TimeoutID;
   onMouseLeaveTimer: ?TimeoutID;
-  generatedId: string = '';
   anchorRef = (React.createRef(): {current: *});
   popperRef = (React.createRef(): {current: *});
   arrowRef = (React.createRef(): {current: *});
@@ -61,7 +63,6 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
   state = this.getDefaultState(this.props);
 
   componentDidMount() {
-    this.generatedId = getBuiId();
     this.setState({isMounted: true});
   }
 
@@ -289,7 +290,7 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
   }
 
   getPopoverIdAttr() {
-    return this.props.id || this.generatedId || null;
+    return this.props.id || null;
   }
 
   getAnchorProps() {
@@ -439,7 +440,7 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
 
     const defaultPopperOptions = {
       modifiers: {
-        preventOverflow: {enabled: !this.props.ignoreBoundary},
+        preventOverflow: {enabled: !this.props.ignoreBoundary, padding: 0},
       },
     };
     // Only render popover on the browser (portals aren't supported server-side)
@@ -450,7 +451,10 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
             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})}
             onUnmount={() => this.setState({isLayerMounted: false})}
           >
@@ -487,6 +491,14 @@ class Popover extends React.Component<PopoverPropsT, PopoverPrivateStateT> {
   }
 }
 
+// Remove when Popover is converted to a functional component.
+const Popover = (props: PopoverPropsT & {innerRef?: React$ElementRef<*>}) => {
+  const {innerRef} = props;
+  return <PopoverInner id={props.id || useUID()} ref={innerRef} {...props} />;
+};
+
+Popover.defaultProps = defaultProps;
+
 export default Popover;
 /* eslint-enable react/no-find-dom-node */