baseui 0.0.0-next-887e00c → 0.0.0-next-1598215

package/es/menu/maybe-child-menu.js

@@ -43,8 +43,6 @@ export default function MaybeChildMenu(props) {
       overrides: mergeOverrides({
         Body: {
           props: {
-            // Adds mouseleave to popover body so that child menu closes when user mouses out.
-            onMouseLeave: props.resetParentMenu,
             // Trap tabbing when focused on a child menu. Popover mounts the element at the end of
             // the html body by default. If a user was to tab to the next element it would navigate
             // to elements not within the immediate area surrounding the menu.

package/es/menu/nested-menus.js

@@ -12,6 +12,8 @@ export const NestedMenuContext = /*#__PURE__*/React.createContext({
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   mountRef: {
     current: null
   }
@@ -30,16 +32,43 @@ export default class NestedMenus extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      menus: []
+      menus: [],
+      nestedMenuHoverIndex: -1
     });
 
     _defineProperty(this, "mountRef", /*#__PURE__*/React.createRef());
 
+    _defineProperty(this, "mouseLeaveTimeoueId", null);
+
+    _defineProperty(this, "handleMenuMouseLeave", event => {
+      this.mouseLeaveTimeoueId = setTimeout(() => {
+        this.setState({
+          nestedMenuHoverIndex: -1
+        });
+      }, 200);
+    });
+
+    _defineProperty(this, "handleMenuMouseEnter", event => {
+      if (typeof document !== 'undefined') {
+        clearTimeout(this.mouseLeaveTimeoueId);
+        const index = this.state.menus.findIndex(m => {
+          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+        });
+        this.setState({
+          nestedMenuHoverIndex: index
+        });
+      }
+    });
+
     _defineProperty(this, "addMenuToNesting", ref => {
       // check offsetHeight to determine if component is visible in the dom (0 means hidden)
       // we need to do this so that when we renderAll, the hidden seo-only child-menus don't
       // register themselves which would break the nesting logic
-      if (ref.current && ref.current.offsetHeight) {
+      const element = ref.current;
+
+      if (element && element.offsetHeight) {
+        element.addEventListener('mouseenter', this.handleMenuMouseEnter);
+        element.addEventListener('mouseleave', this.handleMenuMouseLeave);
         this.setState(state => {
           return {
             menus: [...state.menus, ref]
@@ -50,7 +79,17 @@ export default class NestedMenus extends React.Component {
 
     _defineProperty(this, "removeMenuFromNesting", ref => {
       this.setState(state => {
-        const nextMenus = state.menus.filter(r => r.current).filter(r => !isSame(r.current, ref.current));
+        for (const r of this.state.menus) {
+          if (r.current && isSame(r.current, ref.current)) {
+            const element = r.current;
+            element.removeEventListener('mouseenter', this.handleMenuMouseEnter);
+            element.removeEventListener('mouseleave', this.handleMenuMouseLeave);
+          }
+        }
+
+        const nextMenus = state.menus.filter(r => {
+          return r.current && !isSame(r.current, ref.current);
+        });
         return {
           menus: nextMenus
         };
@@ -70,6 +109,11 @@ export default class NestedMenus extends React.Component {
       const index = this.findMenuIndexByRef(ref) + 1;
       return this.state.menus[index];
     });
+
+    _defineProperty(this, "isNestedMenuVisible", ref => {
+      const index = this.findMenuIndexByRef(ref);
+      return index <= this.state.nestedMenuHoverIndex;
+    });
   }
 
   render() {
@@ -79,6 +123,8 @@ export default class NestedMenus extends React.Component {
         removeMenuFromNesting: this.removeMenuFromNesting,
         getParentMenu: this.getParentMenu,
         getChildMenu: this.getChildMenu,
+        isNestedMenuVisible: this.isNestedMenuVisible,
+        nestedMenuHoverIndex: this.state.nestedMenuHoverIndex,
         mountRef: this.mountRef
       }
     }, /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children, /*#__PURE__*/React.createElement("span", {

package/es/menu/stateful-container.js

@@ -34,6 +34,8 @@ const DEFAULT_PROPS = {
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   forceHighlight: false
 };
 
@@ -223,16 +225,7 @@ class MenuStatefulContainerInner extends React.Component {
       });
     });
 
-    _defineProperty(this, "handleMouseLeave", () => {
-      const rootRef = this.props.rootRef ? this.props.rootRef : this.rootRef;
-      const childMenu = this.props.getChildMenu && this.props.getChildMenu(rootRef);
-
-      if (!this.props.forceHighlight && !childMenu) {
-        this.internalSetState(STATE_CHANGE_TYPES.mouseLeave, {
-          highlightedIndex: -1
-        });
-      }
-    });
+    _defineProperty(this, "handleMouseLeave", event => {});
 
     _defineProperty(this, "getRequiredItemProps", (item, index) => {
       let itemRef = this.refList[index];
@@ -339,10 +332,12 @@ class MenuStatefulContainerInner extends React.Component {
       if (this.keyboardControlNode) this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
     }
 
-    this.props.removeMenuFromNesting && this.props.removeMenuFromNesting(rootRef);
+    if (this.props.removeMenuFromNesting) {
+      this.props.removeMenuFromNesting(rootRef);
+    }
   }
 
-  componentDidUpdate(_, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     if (typeof document !== 'undefined') {
       if (!prevState.isFocused && this.state.isFocused) {
         if (this.keyboardControlNode) this.keyboardControlNode.addEventListener('keydown', this.onKeyDown);
@@ -368,6 +363,12 @@ class MenuStatefulContainerInner extends React.Component {
         highlightedIndex: 0
       });
     }
+
+    if (this.props.isNestedMenuVisible && this.props.nestedMenuHoverIndex !== prevProps.nestedMenuHoverIndex && !this.props.isNestedMenuVisible(this.rootRef) && !this.props.forceHighlight) {
+      this.setState({
+        highlightedIndex: -1
+      });
+    }
   } // One array to hold all of list item refs
 
 

package/es/select/select-component.js

@@ -736,7 +736,7 @@ class Select extends React.Component {
         "aria-required": this.props.required || null,
         onFocus: this.handleInputFocus,
         tabIndex: 0
-      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
+      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
         "aria-hidden": true,
         id: this.props.id || null,
         ref: this.handleInputRef,
@@ -748,7 +748,7 @@ class Select extends React.Component {
           padding: 0
         },
         tabIndex: -1
-      }));
+      }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
     }
 
     return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({

package/esm/menu/maybe-child-menu.js

@@ -59,8 +59,6 @@ export default function MaybeChildMenu(props) {
       overrides: mergeOverrides({
         Body: {
           props: {
-            // Adds mouseleave to popover body so that child menu closes when user mouses out.
-            onMouseLeave: props.resetParentMenu,
             // Trap tabbing when focused on a child menu. Popover mounts the element at the end of
             // the html body by default. If a user was to tab to the next element it would navigate
             // to elements not within the immediate area surrounding the menu.

package/esm/menu/nested-menus.js

@@ -1,5 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -46,6 +48,10 @@ export var NestedMenuContext = /*#__PURE__*/React.createContext({
   removeMenuFromNesting: function removeMenuFromNesting() {},
   getParentMenu: function getParentMenu() {},
   getChildMenu: function getChildMenu() {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: function isNestedMenuVisible() {
+    return false;
+  },
   mountRef: {
     current: null
   }
@@ -76,16 +82,46 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      menus: []
+      menus: [],
+      nestedMenuHoverIndex: -1
     });
 
     _defineProperty(_assertThisInitialized(_this), "mountRef", /*#__PURE__*/React.createRef());
 
+    _defineProperty(_assertThisInitialized(_this), "mouseLeaveTimeoueId", null);
+
+    _defineProperty(_assertThisInitialized(_this), "handleMenuMouseLeave", function (event) {
+      _this.mouseLeaveTimeoueId = setTimeout(function () {
+        _this.setState({
+          nestedMenuHoverIndex: -1
+        });
+      }, 200);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMenuMouseEnter", function (event) {
+      if (typeof document !== 'undefined') {
+        clearTimeout(_this.mouseLeaveTimeoueId);
+
+        var index = _this.state.menus.findIndex(function (m) {
+          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+        });
+
+        _this.setState({
+          nestedMenuHoverIndex: index
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "addMenuToNesting", function (ref) {
       // check offsetHeight to determine if component is visible in the dom (0 means hidden)
       // we need to do this so that when we renderAll, the hidden seo-only child-menus don't
       // register themselves which would break the nesting logic
-      if (ref.current && ref.current.offsetHeight) {
+      var element = ref.current;
+
+      if (element && element.offsetHeight) {
+        element.addEventListener('mouseenter', _this.handleMenuMouseEnter);
+        element.addEventListener('mouseleave', _this.handleMenuMouseLeave);
+
         _this.setState(function (state) {
           return {
             menus: [].concat(_toConsumableArray(state.menus), [ref])
@@ -96,10 +132,27 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "removeMenuFromNesting", function (ref) {
       _this.setState(function (state) {
+        var _iterator = _createForOfIteratorHelper(_this.state.menus),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var r = _step.value;
+
+            if (r.current && isSame(r.current, ref.current)) {
+              var element = r.current;
+              element.removeEventListener('mouseenter', _this.handleMenuMouseEnter);
+              element.removeEventListener('mouseleave', _this.handleMenuMouseLeave);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
         var nextMenus = state.menus.filter(function (r) {
-          return r.current;
-        }).filter(function (r) {
-          return !isSame(r.current, ref.current);
+          return r.current && !isSame(r.current, ref.current);
         });
         return {
           menus: nextMenus
@@ -123,6 +176,12 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
       return _this.state.menus[index];
     });
 
+    _defineProperty(_assertThisInitialized(_this), "isNestedMenuVisible", function (ref) {
+      var index = _this.findMenuIndexByRef(ref);
+
+      return index <= _this.state.nestedMenuHoverIndex;
+    });
+
     return _this;
   }
 
@@ -135,6 +194,8 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
           removeMenuFromNesting: this.removeMenuFromNesting,
           getParentMenu: this.getParentMenu,
           getChildMenu: this.getChildMenu,
+          isNestedMenuVisible: this.isNestedMenuVisible,
+          nestedMenuHoverIndex: this.state.nestedMenuHoverIndex,
           mountRef: this.mountRef
         }
       }, /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children, /*#__PURE__*/React.createElement("span", {

package/esm/menu/stateful-container.js

@@ -70,6 +70,10 @@ var DEFAULT_PROPS = {
   removeMenuFromNesting: function removeMenuFromNesting() {},
   getParentMenu: function getParentMenu() {},
   getChildMenu: function getChildMenu() {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: function isNestedMenuVisible() {
+    return false;
+  },
   forceHighlight: false
 };
 
@@ -276,17 +280,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
-      var rootRef = _this.props.rootRef ? _this.props.rootRef : _this.rootRef;
-
-      var childMenu = _this.props.getChildMenu && _this.props.getChildMenu(rootRef);
-
-      if (!_this.props.forceHighlight && !childMenu) {
-        _this.internalSetState(STATE_CHANGE_TYPES.mouseLeave, {
-          highlightedIndex: -1
-        });
-      }
-    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (event) {});
 
     _defineProperty(_assertThisInitialized(_this), "getRequiredItemProps", function (item, index) {
       var itemRef = _this.refList[index];
@@ -397,11 +391,13 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         if (this.keyboardControlNode) this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
       }
 
-      this.props.removeMenuFromNesting && this.props.removeMenuFromNesting(rootRef);
+      if (this.props.removeMenuFromNesting) {
+        this.props.removeMenuFromNesting(rootRef);
+      }
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
+    value: function componentDidUpdate(prevProps, prevState) {
       if (typeof document !== 'undefined') {
         if (!prevState.isFocused && this.state.isFocused) {
           if (this.keyboardControlNode) this.keyboardControlNode.addEventListener('keydown', this.onKeyDown);
@@ -427,6 +423,12 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
           highlightedIndex: 0
         });
       }
+
+      if (this.props.isNestedMenuVisible && this.props.nestedMenuHoverIndex !== prevProps.nestedMenuHoverIndex && !this.props.isNestedMenuVisible(this.rootRef) && !this.props.forceHighlight) {
+        this.setState({
+          highlightedIndex: -1
+        });
+      }
     } // One array to hold all of list item refs
 
   }, {

package/esm/select/select-component.js

@@ -859,7 +859,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
           "aria-required": this.props.required || null,
           onFocus: this.handleInputFocus,
           tabIndex: 0
-        }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
+        }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
           "aria-hidden": true,
           id: this.props.id || null,
           ref: this.handleInputRef,
@@ -871,7 +871,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
             padding: 0
           },
           tabIndex: -1
-        }));
+        }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
       }
 
       return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({

package/menu/index.d.ts

@@ -69,7 +69,6 @@ export interface RenderItemProps {
   id?: string;
   isFocused?: boolean;
   isHighlighted?: boolean;
-  resetMenu?: () => any;
 }
 
 export type OnItemSelect = (args: {
@@ -108,6 +107,8 @@ export interface StatefulContainerProps {
   removeMenuFromNesting?: (ref: React.Ref<HTMLElement>) => void;
   getParentMenu?: (ref: React.Ref<HTMLElement>) => void;
   getChildMenu?: (ref: React.Ref<HTMLElement>) => void;
+  nestedMenuHoverIndex?: nubmer;
+  isNestedMenuVisible?: (ref: React.Ref<HTMLElement>) => boolean;
 }
 export interface StatefulContainerState {
   activedescendantId?: string;
@@ -131,7 +132,6 @@ export interface OptionListProps extends BaseMenuPropsT {
     ChildMenuPopover?: Override<any>;
   };
   renderHrefAsAnchor?: boolean;
-  resetMenu?: () => void;
   $isHighlighted?: boolean;
   $isFocused?: boolean;
   renderAll?: boolean;
@@ -148,7 +148,11 @@ export interface OptionProfileProps extends BaseMenuPropsT {
   getChildMenu?: (item: any) => React.ReactNode;
   getProfileItemLabels: (
     item: any,
-  ) => {title?: string; subtitle?: string; body?: string};
+  ) => {
+    title?: string;
+    subtitle?: string;
+    body?: string;
+  };
   getProfileItemImg: (item: any) => string | React.ComponentType<any>;
   getProfileItemImgText: (item: any) => string;
   overrides?: {
@@ -161,7 +165,6 @@ export interface OptionProfileProps extends BaseMenuPropsT {
     ProfileBody?: Override<any>;
     ChildMenuPopover?: Override<any>;
   };
-  resetMenu?: () => void;
   $isHighlighted?: boolean;
 }
 export const OptionProfile: React.FC<OptionProfileProps>;
@@ -200,6 +203,8 @@ export class NestedMenus extends React.Component<
   findMenuIndexByRef(ref: React.Ref<HTMLElement>): number;
   getParentMenu(ref: React.Ref<HTMLElement>): React.Ref<HTMLElement>;
   getChildMenu(ref: React.Ref<HTMLElement>): React.Ref<HTMLElement>;
+  nestedMenuHoverIndex: number;
+  isNestedMenuVisible(ref: React.Ref<HTMLElement>): boolean;
 }
 
 export const StyledEmptyState: StyletronComponent<any>;

package/menu/maybe-child-menu.js

@@ -70,8 +70,6 @@ function MaybeChildMenu(props) {
       overrides: (0, _overrides.mergeOverrides)({
         Body: {
           props: {
-            // Adds mouseleave to popover body so that child menu closes when user mouses out.
-            onMouseLeave: props.resetParentMenu,
             // Trap tabbing when focused on a child menu. Popover mounts the element at the end of
             // the html body by default. If a user was to tab to the next element it would navigate
             // to elements not within the immediate area surrounding the menu.

package/menu/maybe-child-menu.js.flow

@@ -64,8 +64,6 @@ export default function MaybeChildMenu(props: PropsT) {
               {
                 Body: {
                   props: {
-                    // Adds mouseleave to popover body so that child menu closes when user mouses out.
-                    onMouseLeave: props.resetParentMenu,
                     // Trap tabbing when focused on a child menu. Popover mounts the element at the end of
                     // the html body by default. If a user was to tab to the next element it would navigate
                     // to elements not within the immediate area surrounding the menu.

package/menu/nested-menus.js

@@ -13,6 +13,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -52,6 +54,10 @@ var NestedMenuContext = /*#__PURE__*/React.createContext({
   removeMenuFromNesting: function removeMenuFromNesting() {},
   getParentMenu: function getParentMenu() {},
   getChildMenu: function getChildMenu() {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: function isNestedMenuVisible() {
+    return false;
+  },
   mountRef: {
     current: null
   }
@@ -83,16 +89,46 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      menus: []
+      menus: [],
+      nestedMenuHoverIndex: -1
     });
 
     _defineProperty(_assertThisInitialized(_this), "mountRef", /*#__PURE__*/React.createRef());
 
+    _defineProperty(_assertThisInitialized(_this), "mouseLeaveTimeoueId", null);
+
+    _defineProperty(_assertThisInitialized(_this), "handleMenuMouseLeave", function (event) {
+      _this.mouseLeaveTimeoueId = setTimeout(function () {
+        _this.setState({
+          nestedMenuHoverIndex: -1
+        });
+      }, 200);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMenuMouseEnter", function (event) {
+      if (typeof document !== 'undefined') {
+        clearTimeout(_this.mouseLeaveTimeoueId);
+
+        var index = _this.state.menus.findIndex(function (m) {
+          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+        });
+
+        _this.setState({
+          nestedMenuHoverIndex: index
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "addMenuToNesting", function (ref) {
       // check offsetHeight to determine if component is visible in the dom (0 means hidden)
       // we need to do this so that when we renderAll, the hidden seo-only child-menus don't
       // register themselves which would break the nesting logic
-      if (ref.current && ref.current.offsetHeight) {
+      var element = ref.current;
+
+      if (element && element.offsetHeight) {
+        element.addEventListener('mouseenter', _this.handleMenuMouseEnter);
+        element.addEventListener('mouseleave', _this.handleMenuMouseLeave);
+
         _this.setState(function (state) {
           return {
             menus: [].concat(_toConsumableArray(state.menus), [ref])
@@ -103,10 +139,27 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "removeMenuFromNesting", function (ref) {
       _this.setState(function (state) {
+        var _iterator = _createForOfIteratorHelper(_this.state.menus),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var r = _step.value;
+
+            if (r.current && isSame(r.current, ref.current)) {
+              var element = r.current;
+              element.removeEventListener('mouseenter', _this.handleMenuMouseEnter);
+              element.removeEventListener('mouseleave', _this.handleMenuMouseLeave);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
         var nextMenus = state.menus.filter(function (r) {
-          return r.current;
-        }).filter(function (r) {
-          return !isSame(r.current, ref.current);
+          return r.current && !isSame(r.current, ref.current);
         });
         return {
           menus: nextMenus
@@ -130,6 +183,12 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
       return _this.state.menus[index];
     });
 
+    _defineProperty(_assertThisInitialized(_this), "isNestedMenuVisible", function (ref) {
+      var index = _this.findMenuIndexByRef(ref);
+
+      return index <= _this.state.nestedMenuHoverIndex;
+    });
+
     return _this;
   }
 
@@ -142,6 +201,8 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
           removeMenuFromNesting: this.removeMenuFromNesting,
           getParentMenu: this.getParentMenu,
           getChildMenu: this.getChildMenu,
+          isNestedMenuVisible: this.isNestedMenuVisible,
+          nestedMenuHoverIndex: this.state.nestedMenuHoverIndex,
           mountRef: this.mountRef
         }
       }, /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children, /*#__PURE__*/React.createElement("span", {

package/menu/nested-menus.js.flow

@@ -12,6 +12,7 @@ import * as React from 'react';
 import type {NestedMenuRefT, NestedMenuContextT} from './types.js';
 
 type StateT = {
+  nestedMenuHoverIndex: number,
   menus: NestedMenuRefT[],
 };
 type PropsT = {
@@ -24,6 +25,8 @@ export const NestedMenuContext: React.Context<NestedMenuContextT> = React.create
     removeMenuFromNesting: () => {},
     getParentMenu: () => {},
     getChildMenu: () => {},
+    nestedMenuHoverIndex: -1,
+    isNestedMenuVisible: () => false,
     mountRef: {current: null},
   },
 );
@@ -37,14 +40,40 @@ function isSame(a: ?HTMLElement, b: ?HTMLElement) {
 }
 
 export default class NestedMenus extends React.Component<PropsT, StateT> {
-  state = {menus: []};
+  state = {menus: [], nestedMenuHoverIndex: -1};
   mountRef = (React.createRef(): {current: HTMLElement | null});
+  mouseLeaveTimeoueId = null;
+
+  handleMenuMouseLeave = (event: MouseEvent) => {
+    this.mouseLeaveTimeoueId = setTimeout(() => {
+      this.setState({nestedMenuHoverIndex: -1});
+    }, 200);
+  };
+
+  handleMenuMouseEnter = (event: MouseEvent) => {
+    if (__BROWSER__) {
+      clearTimeout(this.mouseLeaveTimeoueId);
+      const index = this.state.menus.findIndex(m => {
+        return (
+          m.current &&
+          event.currentTarget instanceof Node &&
+          m.current.contains(event.currentTarget)
+        );
+      });
+
+      this.setState({nestedMenuHoverIndex: index});
+    }
+  };
 
   addMenuToNesting = (ref: NestedMenuRefT) => {
     // check offsetHeight to determine if component is visible in the dom (0 means hidden)
     // we need to do this so that when we renderAll, the hidden seo-only child-menus don't
     // register themselves which would break the nesting logic
-    if (ref.current && ref.current.offsetHeight) {
+    const element = ref.current;
+    if (element && element.offsetHeight) {
+      element.addEventListener('mouseenter', this.handleMenuMouseEnter);
+      element.addEventListener('mouseleave', this.handleMenuMouseLeave);
+
       this.setState(state => {
         return {menus: [...state.menus, ref]};
       });
@@ -53,9 +82,18 @@ export default class NestedMenus extends React.Component<PropsT, StateT> {
 
   removeMenuFromNesting = (ref: NestedMenuRefT) => {
     this.setState(state => {
-      const nextMenus = state.menus
-        .filter(r => r.current)
-        .filter(r => !isSame(r.current, ref.current));
+      for (const r of this.state.menus) {
+        if (r.current && isSame(r.current, ref.current)) {
+          const element = r.current;
+          element.removeEventListener('mouseenter', this.handleMenuMouseEnter);
+          element.removeEventListener('mouseleave', this.handleMenuMouseLeave);
+        }
+      }
+
+      const nextMenus = state.menus.filter(r => {
+        return r.current && !isSame(r.current, ref.current);
+      });
+
       return {menus: nextMenus};
     });
   };
@@ -74,6 +112,11 @@ export default class NestedMenus extends React.Component<PropsT, StateT> {
     return this.state.menus[index];
   };
 
+  isNestedMenuVisible = (ref: NestedMenuRefT): boolean => {
+    const index = this.findMenuIndexByRef(ref);
+    return index <= this.state.nestedMenuHoverIndex;
+  };
+
   render() {
     return (
       <NestedMenuContext.Provider
@@ -82,6 +125,8 @@ export default class NestedMenus extends React.Component<PropsT, StateT> {
           removeMenuFromNesting: this.removeMenuFromNesting,
           getParentMenu: this.getParentMenu,
           getChildMenu: this.getChildMenu,
+          isNestedMenuVisible: this.isNestedMenuVisible,
+          nestedMenuHoverIndex: this.state.nestedMenuHoverIndex,
           mountRef: this.mountRef,
         }}
       >

package/menu/stateful-container.js

@@ -77,6 +77,10 @@ var DEFAULT_PROPS = {
   removeMenuFromNesting: function removeMenuFromNesting() {},
   getParentMenu: function getParentMenu() {},
   getChildMenu: function getChildMenu() {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: function isNestedMenuVisible() {
+    return false;
+  },
   forceHighlight: false
 };
 
@@ -283,17 +287,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
-      var rootRef = _this.props.rootRef ? _this.props.rootRef : _this.rootRef;
-
-      var childMenu = _this.props.getChildMenu && _this.props.getChildMenu(rootRef);
-
-      if (!_this.props.forceHighlight && !childMenu) {
-        _this.internalSetState(_constants.STATE_CHANGE_TYPES.mouseLeave, {
-          highlightedIndex: -1
-        });
-      }
-    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function (event) {});
 
     _defineProperty(_assertThisInitialized(_this), "getRequiredItemProps", function (item, index) {
       var itemRef = _this.refList[index];
@@ -404,11 +398,13 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         if (this.keyboardControlNode) this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
       }
 
-      this.props.removeMenuFromNesting && this.props.removeMenuFromNesting(rootRef);
+      if (this.props.removeMenuFromNesting) {
+        this.props.removeMenuFromNesting(rootRef);
+      }
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
+    value: function componentDidUpdate(prevProps, prevState) {
       if (typeof document !== 'undefined') {
         if (!prevState.isFocused && this.state.isFocused) {
           if (this.keyboardControlNode) this.keyboardControlNode.addEventListener('keydown', this.onKeyDown);
@@ -434,6 +430,12 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
           highlightedIndex: 0
         });
       }
+
+      if (this.props.isNestedMenuVisible && this.props.nestedMenuHoverIndex !== prevProps.nestedMenuHoverIndex && !this.props.isNestedMenuVisible(this.rootRef) && !this.props.forceHighlight) {
+        this.setState({
+          highlightedIndex: -1
+        });
+      }
     } // One array to hold all of list item refs
 
   }, {

package/menu/stateful-container.js.flow

@@ -37,6 +37,8 @@ const DEFAULT_PROPS = {
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   forceHighlight: false,
 };
 
@@ -99,11 +101,16 @@ class MenuStatefulContainerInner extends React.Component<
       if (this.keyboardControlNode)
         this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
     }
-    this.props.removeMenuFromNesting &&
+
+    if (this.props.removeMenuFromNesting) {
       this.props.removeMenuFromNesting(rootRef);
+    }
   }
 
-  componentDidUpdate(_: mixed, prevState: StatefulContainerStateT) {
+  componentDidUpdate(
+    prevProps: StatefulContainerPropsT,
+    prevState: StatefulContainerStateT,
+  ) {
     if (__BROWSER__) {
       if (!prevState.isFocused && this.state.isFocused) {
         if (this.keyboardControlNode)
@@ -135,6 +142,15 @@ class MenuStatefulContainerInner extends React.Component<
         highlightedIndex: 0,
       });
     }
+
+    if (
+      this.props.isNestedMenuVisible &&
+      this.props.nestedMenuHoverIndex !== prevProps.nestedMenuHoverIndex &&
+      !this.props.isNestedMenuVisible(this.rootRef) &&
+      !this.props.forceHighlight
+    ) {
+      this.setState({highlightedIndex: -1});
+    }
   }
 
   // One array to hold all of list item refs
@@ -342,17 +358,7 @@ class MenuStatefulContainerInner extends React.Component<
     });
   };
 
-  handleMouseLeave = () => {
-    const rootRef = this.props.rootRef ? this.props.rootRef : this.rootRef;
-    const childMenu =
-      this.props.getChildMenu && this.props.getChildMenu(rootRef);
-
-    if (!this.props.forceHighlight && !childMenu) {
-      this.internalSetState(STATE_CHANGE_TYPES.mouseLeave, {
-        highlightedIndex: -1,
-      });
-    }
-  };
+  handleMouseLeave = (event: SyntheticMouseEvent<HTMLElement>) => {};
 
   getRequiredItemProps: GetRequiredItemPropsFnT = (item, index) => {
     let itemRef = this.refList[index];

package/menu/types.js.flow

@@ -136,6 +136,8 @@ export type StatefulContainerPropsT = {
   getChildMenu?: (ref: {current: HTMLElement | null}) => ?{
     current: HTMLElement | null,
   },
+  nestedMenuHoverIndex?: number,
+  isNestedMenuVisible?: (ref: {current: HTMLElement | null}) => boolean,
   forceHighlight: boolean,
 };
 
@@ -171,7 +173,7 @@ export type SharedStatelessPropsT = {
   ariaLabel?: string,
   getRequiredItemProps?: GetRequiredItemPropsFnT,
   isFocused?: boolean,
-  handleMouseLeave?: () => mixed,
+  handleMouseLeave?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
   /** Index of highlighted menu item. */
   highlightedIndex?: number,
   /** List of menu items. */
@@ -215,6 +217,8 @@ export type StatefulMenuPropsT = {
   getChildMenu?: (ref: {current: HTMLElement | null}) => ?{
     current: HTMLElement | null,
   },
+  nestedMenuHoverIndex?: number,
+  isNestedMenuVisible?: (ref: {current: HTMLElement | null}) => boolean,
 } & MenuPropsT;
 
 export type StatefulMenuProfilePropsT = StatefulContainerPropsT &
@@ -300,6 +304,8 @@ export type NestedMenuContextT = {|
   removeMenuFromNesting: (ref: NestedMenuRefT) => void,
   getParentMenu: (ref: NestedMenuRefT) => ?NestedMenuRefT,
   getChildMenu: (ref: NestedMenuRefT) => ?NestedMenuRefT,
+  nestedMenuHoverIndex: number,
+  isNestedMenuVisible: (ref: NestedMenuRefT) => boolean,
   mountRef: NestedMenuRefT,
 |};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-887e00c",
+  "version": "0.0.0-next-1598215",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/select/select-component.js

@@ -880,7 +880,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
           "aria-required": this.props.required || null,
           onFocus: this.handleInputFocus,
           tabIndex: 0
-        }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
+        }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
           "aria-hidden": true,
           id: this.props.id || null,
           ref: this.handleInputRef,
@@ -892,7 +892,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
             padding: 0
           },
           tabIndex: -1
-        }));
+        }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
       }
 
       return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(_autosizeInput.default, _extends({

package/select/select-component.js.flow

@@ -730,6 +730,11 @@ class Select extends React.Component<PropsT, SelectStateT> {
               padding: 0,
             }}
             tabIndex={-1}
+            {...(overrides.Input
+              ? overrides.Input.props
+                ? overrides.Input.props
+                : {}
+              : {})}
           />
         </InputContainer>
       );