@fluentui/react-menu 9.0.0-nightly.46b9ea7036.0 → 9.0.0-rc.1

package/lib-commonjs/MenuDivider.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuDivider/index"), exports);
 //# sourceMappingURL=MenuDivider.js.map

package/lib-commonjs/MenuGroup.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuGroup/index"), exports);
 //# sourceMappingURL=MenuGroup.js.map

package/lib-commonjs/MenuGroupHeader.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuGroupHeader/index"), exports);
 //# sourceMappingURL=MenuGroupHeader.js.map

package/lib-commonjs/MenuItem.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuItem/index"), exports);
 //# sourceMappingURL=MenuItem.js.map

package/lib-commonjs/MenuItemCheckbox.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuItemCheckbox/index"), exports);
 //# sourceMappingURL=MenuItemCheckbox.js.map

package/lib-commonjs/MenuItemRadio.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuItemRadio/index"), exports);
 //# sourceMappingURL=MenuItemRadio.js.map

package/lib-commonjs/MenuList.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuList/index"), exports);
 //# sourceMappingURL=MenuList.js.map

package/lib-commonjs/MenuPopover.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuPopover/index"), exports);
 //# sourceMappingURL=MenuPopover.js.map

package/lib-commonjs/MenuSplitGroup.d.ts

@@ -0,0 +1 @@
+export * from './components/MenuSplitGroup/index';

package/lib-commonjs/MenuSplitGroup.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/MenuSplitGroup/index"), exports);
+//# sourceMappingURL=MenuSplitGroup.js.map

package/lib-commonjs/MenuSplitGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MenuSplitGroup.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/MenuTrigger.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/MenuTrigger/index"), exports);
 //# sourceMappingURL=MenuTrigger.js.map

package/lib-commonjs/components/Menu/Menu.js

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Menu = void 0;
 
-var useMenu_1 = /*#__PURE__*/require("./useMenu");
+const useMenu_1 = /*#__PURE__*/require("./useMenu");
 
-var useMenuContextValues_1 = /*#__PURE__*/require("./useMenuContextValues");
+const useMenuContextValues_1 = /*#__PURE__*/require("./useMenuContextValues");
 
-var renderMenu_1 = /*#__PURE__*/require("./renderMenu");
+const renderMenu_1 = /*#__PURE__*/require("./renderMenu");
 /**
  * Wrapper component that manages state for a popup MenuList and a MenuTrigger
  */
 
 
-var Menu = function (props) {
-  var state = useMenu_1.useMenu(props);
-  var contextValues = useMenuContextValues_1.useMenuContextValues(state);
-  return renderMenu_1.renderMenu(state, contextValues);
+const Menu = props => {
+  const state = useMenu_1.useMenu_unstable(props);
+  const contextValues = useMenuContextValues_1.useMenuContextValues_unstable(state);
+  return renderMenu_1.renderMenu_unstable(state, contextValues);
 };
 
 exports.Menu = Menu;

package/lib-commonjs/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";;;;;;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,IAAI,GAAwB,UAAA,KAAA,EAAK;AAC5C,MAAM,KAAK,GAAG,SAAA,CAAA,OAAA,CAAQ,KAAR,CAAd;AACA,MAAM,aAAa,GAAG,sBAAA,CAAA,oBAAA,CAAqB,KAArB,CAAtB;AAEA,SAAO,YAAA,CAAA,UAAA,CAAW,KAAX,EAAkB,aAAlB,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,IAAA,GAAI,IAAJ;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,IAAI,GAAwB,KAAK,IAAG;AAC/C,QAAM,KAAK,GAAG,SAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAd;AACA,QAAM,aAAa,GAAG,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAtB;AAEA,SAAO,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,aAA3B,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,IAAA,GAAI,IAAJ;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourceRoot":""}

package/lib-commonjs/components/Menu/Menu.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 import { usePopperMouseTarget, PositioningShorthand } from '@fluentui/react-positioning';
-import { MenuListCommons } from '../MenuList/index';
+import { MenuListCommons } from '../MenuList/MenuList.types';
 import { MenuContextValue } from '../../contexts/menuContext';
 declare type MenuCommons = MenuListCommons & {
     /**

package/lib-commonjs/components/Menu/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Menu"), exports);
 

package/lib-commonjs/components/Menu/renderMenu.d.ts

@@ -2,4 +2,4 @@ import type { MenuContextValues, MenuState } from './Menu.types';
 /**
  * Render the final JSX of Menu
  */
-export declare const renderMenu: (state: MenuState, contextValues: MenuContextValues) => JSX.Element;
+export declare const renderMenu_unstable: (state: MenuState, contextValues: MenuContextValues) => JSX.Element;

package/lib-commonjs/components/Menu/renderMenu.js

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderMenu = void 0;
+exports.renderMenu_unstable = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
+const menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
 /**
  * Render the final JSX of Menu
  */
 
 
-var renderMenu = function (state, contextValues) {
+const renderMenu_unstable = (state, contextValues) => {
   return React.createElement(menuContext_1.MenuProvider, {
     value: contextValues.menu
   }, state.menuTrigger, state.open && state.menuPopover);
 };
 
-exports.renderMenu = renderMenu;
+exports.renderMenu_unstable = renderMenu_unstable;
 //# sourceMappingURL=renderMenu.js.map

package/lib-commonjs/components/Menu/renderMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Menu/renderMenu.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,UAAU,GAAG,UAAC,KAAD,EAAmB,aAAnB,EAAmD;AAC3E,SACE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAb,EACG,KAAK,CAAC,WADT,EAEG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,WAFvB,CADF;AAMD,CAPM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Menu/renderMenu.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAmB,aAAnB,KAAuD;AACxF,SACE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAb,EACG,KAAK,CAAC,WADT,EAEG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,WAFvB,CADF;AAMD,CAPM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}

package/lib-commonjs/components/Menu/useMenu.d.ts

@@ -3,8 +3,8 @@ import type { MenuProps, MenuState } from './Menu.types';
  * Create the state required to render Menu.
  *
  * The returned state can be modified with hooks such as useMenuStyles,
- * before being passed to renderMenu.
+ * before being passed to renderMenu_unstable.
  *
  * @param props - props from this instance of Menu
  */
-export declare const useMenu: (props: MenuProps) => MenuState;
+export declare const useMenu_unstable: (props: MenuProps) => MenuState;

package/lib-commonjs/components/Menu/useMenu.js

@@ -3,170 +3,159 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenu = void 0;
+exports.useMenu_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
+const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
 
-var react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
-var react_provider_1 = /*#__PURE__*/require("@fluentui/react-provider");
+const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
 
-var react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
-var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
 
-var index_1 = /*#__PURE__*/require("../MenuTrigger/index");
+const index_1 = /*#__PURE__*/require("../../utils/index");
 
-var menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
-
-var index_2 = /*#__PURE__*/require("../../utils/index");
-
-var useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
+const useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
 /**
  * Create the state required to render Menu.
  *
  * The returned state can be modified with hooks such as useMenuStyles,
- * before being passed to renderMenu.
+ * before being passed to renderMenu_unstable.
  *
  * @param props - props from this instance of Menu
  */
 
 
-var useMenu = function (props) {
-  var triggerId = react_utilities_1.useId('menu');
-  var isSubmenu = useIsSubmenu_1.useIsSubmenu();
-
-  var _a = react_positioning_1.usePopperMouseTarget(),
-      contextTarget = _a[0],
-      setContextTarget = _a[1];
-
-  var popperState = tslib_1.__assign({
+const useMenu_unstable = props => {
+  const triggerId = react_utilities_1.useId('menu');
+  const isSubmenu = useIsSubmenu_1.useIsSubmenu();
+  const [contextTarget, setContextTarget] = react_positioning_1.usePopperMouseTarget();
+  const popperState = {
     position: isSubmenu ? 'after' : 'below',
     align: isSubmenu ? 'top' : 'start',
-    target: props.openOnContext ? contextTarget : undefined
-  }, react_positioning_1.resolvePositioningShorthand(props.positioning));
-
-  var children = React.Children.toArray(props.children);
-
-  if (children.length !== 2 && process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line no-console
-    console.warn('Menu can only take one MenuTrigger and one MenuList as children');
-  }
+    target: props.openOnContext ? contextTarget : undefined,
+    ...react_positioning_1.resolvePositioningShorthand(props.positioning)
+  };
+  const children = React.Children.toArray(props.children);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (children.length === 0) {
+      // eslint-disable-next-line no-console
+      console.warn('Menu must contain at least one child');
+    }
 
-  var _b = children.reduce(function (acc, child) {
-    if (child.type === index_1.MenuTrigger) {
-      acc.menuTrigger = child;
-    } else {
-      acc.menuPopover = child;
+    if (children.length > 2) {
+      // eslint-disable-next-line no-console
+      console.warn('Menu must contain at most two children');
     }
+  }
 
-    return acc;
-  }, {}),
-      menuTrigger = _b.menuTrigger,
-      menuPopover = _b.menuPopover;
+  let menuTrigger = undefined;
+  let menuPopover = undefined;
 
-  var _c = react_positioning_1.usePopper(popperState),
-      triggerRef = _c.targetRef,
-      menuPopoverRef = _c.containerRef;
+  if (children.length === 2) {
+    menuTrigger = children[0];
+    menuPopover = children[1];
+  } else if (children.length === 1) {
+    menuPopover = children[0];
+  }
 
-  var initialState = tslib_1.__assign(tslib_1.__assign({
+  const {
+    targetRef: triggerRef,
+    containerRef: menuPopoverRef
+  } = react_positioning_1.usePopper(popperState);
+  const initialState = {
     hoverDelay: 500,
-    triggerId: triggerId,
+    triggerId,
     isSubmenu: !!isSubmenu,
     openOnHover: !!isSubmenu,
-    contextTarget: contextTarget,
-    setContextTarget: setContextTarget
-  }, props), {
-    menuTrigger: menuTrigger,
-    menuPopover: menuPopover,
-    triggerRef: triggerRef,
-    menuPopoverRef: menuPopoverRef
-  }); // TODO Better way to narrow types ?
-
-
-  var _d = useMenuOpenState(initialState),
-      open = _d[0],
-      setOpen = _d[1];
-
-  var _e = useMenuSelectableState(initialState),
-      checkedValues = _e[0],
-      onCheckedValueChange = _e[1];
-
-  return tslib_1.__assign(tslib_1.__assign({}, initialState), {
-    open: open,
-    setOpen: setOpen,
-    checkedValues: checkedValues,
-    onCheckedValueChange: onCheckedValueChange
-  });
+    contextTarget,
+    setContextTarget,
+    ...props,
+    menuTrigger,
+    menuPopover,
+    triggerRef,
+    menuPopoverRef,
+    components: {}
+  }; // TODO Better way to narrow types ?
+
+  const [open, setOpen] = useMenuOpenState(initialState);
+  const [checkedValues, onCheckedValueChange] = useMenuSelectableState(initialState);
+  return { ...initialState,
+    open,
+    setOpen,
+    checkedValues,
+    onCheckedValueChange
+  };
 };
 
-exports.useMenu = useMenu;
+exports.useMenu_unstable = useMenu_unstable;
 /**
  * Adds appropriate state values and handlers for selectable items
  * i.e checkboxes and radios
  */
 
-var useMenuSelectableState = function (state) {
-  var _a = react_utilities_1.useControllableState({
+const useMenuSelectableState = state => {
+  const [checkedValues, setCheckedValues] = react_utilities_1.useControllableState({
     state: state.checkedValues,
     defaultState: state.defaultCheckedValues,
     initialState: {}
-  }),
-      checkedValues = _a[0],
-      setCheckedValues = _a[1];
-
-  var onCheckedValueChangeOriginal = state.onCheckedValueChange;
-  var onCheckedValueChange = react_utilities_1.useEventCallback(function (e, _a) {
-    var name = _a.name,
-        checkedItems = _a.checkedItems;
-
+  });
+  const {
+    onCheckedValueChange: onCheckedValueChangeOriginal
+  } = state;
+  const onCheckedValueChange = react_utilities_1.useEventCallback((e, {
+    name,
+    checkedItems
+  }) => {
     if (onCheckedValueChangeOriginal) {
       onCheckedValueChangeOriginal(e, {
-        name: name,
-        checkedItems: checkedItems
+        name,
+        checkedItems
       });
     }
 
-    setCheckedValues(function (s) {
-      var _a, _b;
-
-      return s ? tslib_1.__assign(tslib_1.__assign({}, s), (_a = {}, _a[name] = checkedItems, _a)) : (_b = {}, _b[name] = checkedItems, _b);
+    setCheckedValues(s => {
+      return s ? { ...s,
+        [name]: checkedItems
+      } : {
+        [name]: checkedItems
+      };
     });
   });
   return [checkedValues, onCheckedValueChange];
 };
 
-var useMenuOpenState = function (state) {
-  var targetDocument = react_provider_1.useFluent().targetDocument;
-  var parentSetOpen = menuContext_1.useMenuContext(function (context) {
-    return context.setOpen;
-  });
-  var onOpenChange = react_utilities_1.useEventCallback(function (e, data) {
+const useMenuOpenState = state => {
+  const {
+    targetDocument
+  } = react_shared_contexts_1.useFluent();
+  const parentSetOpen = menuContext_1.useMenuContext_unstable(context => context.setOpen);
+  const onOpenChange = react_utilities_1.useEventCallback((e, data) => {
     var _a;
 
     return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
   });
-  var shouldHandleKeyboardRef = React.useRef(false);
-  var shouldHandleTabRef = React.useRef(false);
-  var pressedShiftRef = React.useRef(false);
-  var setOpenTimeout = React.useRef(0);
-  var enteringTriggerRef = React.useRef(false);
-
-  var _a = react_utilities_1.useControllableState({
+  const shouldHandleKeyboardRef = React.useRef(false);
+  const shouldHandleTabRef = React.useRef(false);
+  const pressedShiftRef = React.useRef(false);
+  const setOpenTimeout = React.useRef(0);
+  const enteringTriggerRef = React.useRef(false);
+  const [open, setOpenState] = react_utilities_1.useControllableState({
     state: state.open,
     defaultState: state.defaultOpen,
     initialState: false
-  }),
-      open = _a[0],
-      setOpenState = _a[1];
-
-  var trySetOpen = react_utilities_1.useEventCallback(function (e, data) {
-    var event = e instanceof CustomEvent && e.type === index_2.MENU_ENTER_EVENT ? e.detail.nativeEvent : e;
-    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, tslib_1.__assign({}, data));
+  });
+  const trySetOpen = react_utilities_1.useEventCallback((e, data) => {
+    const event = e instanceof CustomEvent && e.type === index_1.MENU_ENTER_EVENT ? e.detail.nativeEvent : e;
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, { ...data
+    });
 
     if (data.open && e.type === 'contextmenu') {
       state.setContextTarget(e);
@@ -183,12 +172,13 @@ var useMenuOpenState = function (state) {
     }
 
     if (data.bubble) {
-      parentSetOpen(e, tslib_1.__assign({}, data));
+      parentSetOpen(e, { ...data
+      });
     }
 
     setOpenState(data.open);
   });
-  var setOpen = react_utilities_1.useEventCallback(function (e, data) {
+  const setOpen = react_utilities_1.useEventCallback((e, data) => {
     var _a;
 
     clearTimeout(setOpenTimeout.current);
@@ -198,7 +188,7 @@ var useMenuOpenState = function (state) {
       e.persist();
     }
 
-    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === index_2.MENU_ENTER_EVENT) {
+    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === index_1.MENU_ENTER_EVENT) {
       if ((_a = state.triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
         enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';
       } // FIXME leaking Node timeout type
@@ -206,9 +196,7 @@ var useMenuOpenState = function (state) {
       // @ts-ignore
 
 
-      setOpenTimeout.current = setTimeout(function () {
-        return trySetOpen(e, data);
-      }, state.hoverDelay);
+      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);
     } else {
       trySetOpen(e, data);
     }
@@ -218,15 +206,13 @@ var useMenuOpenState = function (state) {
     disabled: !open,
     element: targetDocument,
     refs: [state.menuPopoverRef, state.triggerRef],
-    callback: function (e) {
-      return setOpen(e, {
-        open: false
-      });
-    }
+    callback: e => setOpen(e, {
+      open: false
+    })
   });
-  index_2.useOnMenuMouseEnter({
+  index_1.useOnMenuMouseEnter({
     element: targetDocument,
-    callback: function (e) {
+    callback: e => {
       // When moving from a menu directly back to its trigger, this handler can close the menu
       // Explicitly check a flag to see if this situation happens
       if (!enteringTriggerRef.current) {
@@ -240,39 +226,42 @@ var useMenuOpenState = function (state) {
   }); // Clear timeout on unmount
   // Setting state after a component unmounts can cause memory leaks
 
-  React.useEffect(function () {
-    return function () {
+  React.useEffect(() => {
+    return () => {
       clearTimeout(setOpenTimeout.current);
     };
   }, []); // Manage focus for open state
 
-  var _b = react_tabster_1.useFocusFinders(),
-      findFirstFocusable = _b.findFirstFocusable,
-      findNextFocusable = _b.findNextFocusable,
-      findPrevFocusable = _b.findPrevFocusable;
-
-  var focusFirst = React.useCallback(function () {
-    var firstFocusable = findFirstFocusable(state.menuPopoverRef.current);
+  const {
+    findFirstFocusable,
+    findNextFocusable,
+    findPrevFocusable
+  } = react_tabster_1.useFocusFinders();
+  const focusFirst = React.useCallback(() => {
+    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);
     firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
   }, [findFirstFocusable, state.menuPopoverRef]);
-  var focusAfterMenuTrigger = React.useCallback(function () {
-    var nextFocusable = findNextFocusable(state.triggerRef.current);
+  const focusAfterMenuTrigger = React.useCallback(() => {
+    const nextFocusable = findNextFocusable(state.triggerRef.current);
     nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
   }, [findNextFocusable, state.triggerRef]);
-  var focusBeforeMenuTrigger = React.useCallback(function () {
-    var prevFocusable = findPrevFocusable(state.triggerRef.current);
+  const focusBeforeMenuTrigger = React.useCallback(() => {
+    const prevFocusable = findPrevFocusable(state.triggerRef.current);
     prevFocusable === null || prevFocusable === void 0 ? void 0 : prevFocusable.focus();
   }, [findPrevFocusable, state.triggerRef]);
-  React.useEffect(function () {
-    var _a;
-
-    if (!shouldHandleKeyboardRef.current) {
-      return;
+  React.useEffect(() => {
+    if (open) {
+      focusFirst();
     }
+  }, [open, focusFirst]);
+  React.useEffect(() => {
+    var _a;
 
     if (open) {
       focusFirst();
-    } else {
+    }
+
+    if (shouldHandleKeyboardRef.current && !open) {
       if (shouldHandleTabRef.current && !state.isSubmenu) {
         pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();
       } else {