@fluentui/react-menu 0.0.0-nightly-20220302-0405.1

package/lib/MenuGroupHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGroupHeader.js","sourceRoot":"../src/","sources":["MenuGroupHeader.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/MenuGroupHeader/index';\n"]}

package/lib/MenuItem.d.ts

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

package/lib/MenuItem.js

@@ -0,0 +1,2 @@
+export * from './components/MenuItem/index';
+//# sourceMappingURL=MenuItem.js.map

package/lib/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sourceRoot":"../src/","sources":["MenuItem.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/MenuItem/index';\n"]}

package/lib/MenuItemCheckbox.d.ts

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

package/lib/MenuItemCheckbox.js

@@ -0,0 +1,2 @@
+export * from './components/MenuItemCheckbox/index';
+//# sourceMappingURL=MenuItemCheckbox.js.map

package/lib/MenuItemCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemCheckbox.js","sourceRoot":"../src/","sources":["MenuItemCheckbox.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC","sourcesContent":["export * from './components/MenuItemCheckbox/index';\n"]}

package/lib/MenuItemRadio.d.ts

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

package/lib/MenuItemRadio.js

@@ -0,0 +1,2 @@
+export * from './components/MenuItemRadio/index';
+//# sourceMappingURL=MenuItemRadio.js.map

package/lib/MenuItemRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemRadio.js","sourceRoot":"../src/","sources":["MenuItemRadio.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/MenuItemRadio/index';\n"]}

package/lib/MenuList.d.ts

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

package/lib/MenuList.js

@@ -0,0 +1,2 @@
+export * from './components/MenuList/index';
+//# sourceMappingURL=MenuList.js.map

package/lib/MenuList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuList.js","sourceRoot":"../src/","sources":["MenuList.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/MenuList/index';\n"]}

package/lib/MenuPopover.d.ts

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

package/lib/MenuPopover.js

@@ -0,0 +1,2 @@
+export * from './components/MenuPopover/index';
+//# sourceMappingURL=MenuPopover.js.map

package/lib/MenuPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopover.js","sourceRoot":"../src/","sources":["MenuPopover.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/MenuPopover/index';\n"]}

package/lib/MenuSplitGroup.d.ts

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

package/lib/MenuSplitGroup.js

@@ -0,0 +1,2 @@
+export * from './components/MenuSplitGroup/index';
+//# sourceMappingURL=MenuSplitGroup.js.map

package/lib/MenuSplitGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSplitGroup.js","sourceRoot":"../src/","sources":["MenuSplitGroup.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/MenuSplitGroup/index';\n"]}

package/lib/MenuTrigger.d.ts

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

package/lib/MenuTrigger.js

@@ -0,0 +1,2 @@
+export * from './components/MenuTrigger/index';
+//# sourceMappingURL=MenuTrigger.js.map

package/lib/MenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTrigger.js","sourceRoot":"../src/","sources":["MenuTrigger.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/MenuTrigger/index';\n"]}

package/lib/components/Menu/Menu.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { MenuProps } from './Menu.types';
+/**
+ * Wrapper component that manages state for a popup MenuList and a MenuTrigger
+ */
+export declare const Menu: React.FC<MenuProps>;

package/lib/components/Menu/Menu.js

@@ -0,0 +1,14 @@
+import { useMenu_unstable } from './useMenu';
+import { useMenuContextValues_unstable } from './useMenuContextValues';
+import { renderMenu_unstable } from './renderMenu';
+/**
+ * Wrapper component that manages state for a popup MenuList and a MenuTrigger
+ */
+
+export const Menu = props => {
+  const state = useMenu_unstable(props);
+  const contextValues = useMenuContextValues_unstable(state);
+  return renderMenu_unstable(state, contextValues);
+};
+Menu.displayName = 'Menu';
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Menu/Menu.tsx"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,mBAAT,QAAoC,cAApC;AAGA;;AAEG;;AACH,OAAO,MAAM,IAAI,GAAwB,KAAK,IAAG;AAC/C,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,CAA9B;AACA,QAAM,aAAa,GAAG,6BAA6B,CAAC,KAAD,CAAnD;AAEA,SAAO,mBAAmB,CAAC,KAAD,EAAQ,aAAR,CAA1B;AACD,CALM;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useMenu_unstable } from './useMenu';\nimport { useMenuContextValues_unstable } from './useMenuContextValues';\nimport { renderMenu_unstable } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu_unstable(props);\n  const contextValues = useMenuContextValues_unstable(state);\n\n  return renderMenu_unstable(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import { usePopperMouseTarget, PositioningShorthand } from '@fluentui/react-positioning';
+import { MenuListCommons } from '../MenuList/MenuList.types';
+import { MenuContextValue } from '../../contexts/menuContext';
+declare type MenuCommons = MenuListCommons & {
+    /**
+     * Whether the popup is open
+     */
+    open: boolean;
+    /**
+     * Call back when the component requests to change value
+     * The `open` value is used as a hint when directly controlling the component
+     */
+    onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
+    /**
+     * Whether the popup is open by default
+     */
+    defaultOpen?: boolean;
+    openOnHover: boolean;
+    /**
+     * Opens the menu on right click (context menu), removes all other menu open interactions
+     */
+    openOnContext?: boolean;
+    /**
+     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
+     * This option is disregarded for submenus
+     */
+    inline?: boolean;
+    /**
+     * Do not dismiss the menu when a menu item is clicked
+     */
+    persistOnItemClick?: boolean;
+    /**
+     * Sets the delay for mouse open/close for the popover one mouse enter/leave
+     */
+    hoverDelay?: number;
+};
+export declare type MenuSlots = {};
+/**
+ * Extends and drills down Menulist props to simplify API
+ */
+export declare type MenuProps = Partial<MenuCommons> & ComponentProps<MenuSlots> & {
+    /**
+     * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.
+     * Alternatively can only contain {@link MenuPopover} if using a custom `target`.
+     */
+    children: [JSX.Element, JSX.Element] | JSX.Element;
+    /**
+     * Configures the positioned menu
+     */
+    positioning?: PositioningShorthand;
+};
+export declare type MenuState = MenuCommons & ComponentState<MenuSlots> & {
+    /**
+     * Callback to open/close the popup
+     */
+    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;
+    /**
+     * Internal react node that just simplifies handling children
+     */
+    menuPopover: React.ReactNode;
+    /**
+     * Internal react node that just simplifies handling children
+     */
+    menuTrigger: React.ReactNode;
+    /**
+     * The ref for the popup
+     */
+    menuPopoverRef: React.MutableRefObject<HTMLElement>;
+    /**
+     * The ref for the MenuTrigger, used for popup positioning
+     */
+    triggerRef: React.MutableRefObject<HTMLElement>;
+    /**
+     * Id for the MenuTrigger element for aria relationship
+     */
+    triggerId: string;
+    /**
+     * Whether this menu is a submenu
+     */
+    isSubmenu: boolean;
+    /**
+     * Anchors the popper to the mouse click for context events
+     */
+    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];
+    /**
+     * A callback to set the target of the popper to the mouse click for context events
+     */
+    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
+};
+/**
+ * Data attached to open/close events
+ */
+export declare type MenuOpenChangeData = {
+    open: boolean;
+    /**
+     * Indicates whether the change of state was a keyboard interaction
+     */
+    keyboard?: boolean;
+    /**
+     * indicates whether the request for the open state was bubbled from a nested menu
+     */
+    bubble?: boolean;
+};
+export declare type MenuContextValues = {
+    menu: MenuContextValue;
+};
+/**
+ * The supported events that will trigger open/close of the menu
+ */
+export declare type MenuOpenEvents = MouseEvent | TouchEvent | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.FocusEvent<HTMLElement>;
+export {};

package/lib/components/Menu/Menu.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Menu.types.js.map

package/lib/components/Menu/Menu.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.types.js","sourceRoot":"../src/","sources":["components/Menu/Menu.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { usePopperMouseTarget, PositioningShorthand } from '@fluentui/react-positioning';\nimport { MenuListCommons } from '../MenuList/MenuList.types';\nimport { MenuContextValue } from '../../contexts/menuContext';\n\ntype MenuCommons = MenuListCommons & {\n  /**\n   * Whether the popup is open\n   */\n  open: boolean;\n\n  /**\n   * Call back when the component requests to change value\n   * The `open` value is used as a hint when directly controlling the component\n   */\n  onOpenChange?: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n  /**\n   * Whether the popup is open by default\n   */\n  defaultOpen?: boolean;\n\n  /*\n   * Opens the menu on hover\n   */\n  openOnHover: boolean;\n\n  /**\n   * Opens the menu on right click (context menu), removes all other menu open interactions\n   */\n  openOnContext?: boolean;\n\n  /**\n   * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n   * This option is disregarded for submenus\n   */\n  inline?: boolean;\n\n  /**\n   * Do not dismiss the menu when a menu item is clicked\n   */\n  persistOnItemClick?: boolean;\n\n  /**\n   * Sets the delay for mouse open/close for the popover one mouse enter/leave\n   */\n  hoverDelay?: number;\n};\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = Partial<MenuCommons> &\n  ComponentProps<MenuSlots> & {\n    /**\n     * Can contain two children including {@link MenuTrigger} and {@link MenuPopover}.\n     * Alternatively can only contain {@link MenuPopover} if using a custom `target`.\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n  };\n\nexport type MenuState = MenuCommons &\n  ComponentState<MenuSlots> & {\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvents, data: MenuOpenChangeData) => void;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: ReturnType<typeof usePopperMouseTarget>[0];\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  open: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   */\n  keyboard?: boolean;\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n};\n\nexport type MenuContextValues = {\n  menu: MenuContextValue;\n};\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type MenuOpenEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n"]}

package/lib/components/Menu/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Menu';
+export * from './Menu.types';
+export * from './renderMenu';
+export * from './useMenu';
+export * from './useMenuContextValues';

package/lib/components/Menu/index.js

@@ -0,0 +1,6 @@
+export * from './Menu';
+export * from './Menu.types';
+export * from './renderMenu';
+export * from './useMenu';
+export * from './useMenuContextValues';
+//# sourceMappingURL=index.js.map

package/lib/components/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './Menu';\nexport * from './Menu.types';\nexport * from './renderMenu';\nexport * from './useMenu';\nexport * from './useMenuContextValues';\n"]}

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

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

package/lib/components/Menu/renderMenu.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { MenuProvider } from '../../contexts/menuContext';
+/**
+ * Render the final JSX of Menu
+ */
+
+export const renderMenu_unstable = (state, contextValues) => {
+  return /*#__PURE__*/React.createElement(MenuProvider, {
+    value: contextValues.menu
+  }, state.menuTrigger, state.open && state.menuPopover);
+};
+//# sourceMappingURL=renderMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Menu/renderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,4BAA7B;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAmB,aAAnB,KAAuD;AACxF,sBACE,KAAA,CAAA,aAAA,CAAC,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","sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues) => {\n  return (\n    <MenuProvider value={contextValues.menu}>\n      {state.menuTrigger}\n      {state.open && state.menuPopover}\n    </MenuProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,10 @@
+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_unstable.
+ *
+ * @param props - props from this instance of Menu
+ */
+export declare const useMenu_unstable: (props: MenuProps) => MenuState;

package/lib/components/Menu/useMenu.js

@@ -0,0 +1,260 @@
+import * as React from 'react';
+import { usePopperMouseTarget, usePopper, resolvePositioningShorthand } from '@fluentui/react-positioning';
+import { useControllableState, useId, useOnClickOutside, useEventCallback } from '@fluentui/react-utilities';
+import { useFluent } from '@fluentui/react-shared-contexts';
+import { elementContains } from '@fluentui/react-portal';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';
+import { useIsSubmenu } from '../../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_unstable.
+ *
+ * @param props - props from this instance of Menu
+ */
+
+export const useMenu_unstable = props => {
+  const triggerId = useId('menu');
+  const isSubmenu = useIsSubmenu();
+  const [contextTarget, setContextTarget] = usePopperMouseTarget();
+  const popperState = {
+    position: isSubmenu ? 'after' : 'below',
+    align: isSubmenu ? 'top' : 'start',
+    target: props.openOnContext ? contextTarget : undefined,
+    ...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');
+    }
+
+    if (children.length > 2) {
+      // eslint-disable-next-line no-console
+      console.warn('Menu must contain at most two children');
+    }
+  }
+
+  let menuTrigger = undefined;
+  let menuPopover = undefined;
+
+  if (children.length === 2) {
+    menuTrigger = children[0];
+    menuPopover = children[1];
+  } else if (children.length === 1) {
+    menuPopover = children[0];
+  }
+
+  const {
+    targetRef: triggerRef,
+    containerRef: menuPopoverRef
+  } = usePopper(popperState);
+  const initialState = {
+    hoverDelay: 500,
+    triggerId,
+    isSubmenu: !!isSubmenu,
+    openOnHover: !!isSubmenu,
+    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
+  };
+};
+/**
+ * Adds appropriate state values and handlers for selectable items
+ * i.e checkboxes and radios
+ */
+
+const useMenuSelectableState = state => {
+  const [checkedValues, setCheckedValues] = useControllableState({
+    state: state.checkedValues,
+    defaultState: state.defaultCheckedValues,
+    initialState: {}
+  });
+  const {
+    onCheckedValueChange: onCheckedValueChangeOriginal
+  } = state;
+  const onCheckedValueChange = useEventCallback((e, {
+    name,
+    checkedItems
+  }) => {
+    if (onCheckedValueChangeOriginal) {
+      onCheckedValueChangeOriginal(e, {
+        name,
+        checkedItems
+      });
+    }
+
+    setCheckedValues(s => {
+      return s ? { ...s,
+        [name]: checkedItems
+      } : {
+        [name]: checkedItems
+      };
+    });
+  });
+  return [checkedValues, onCheckedValueChange];
+};
+
+const useMenuOpenState = state => {
+  const {
+    targetDocument
+  } = useFluent();
+  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);
+  const onOpenChange = useEventCallback((e, data) => {
+    var _a;
+
+    return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
+  });
+  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] = useControllableState({
+    state: state.open,
+    defaultState: state.defaultOpen,
+    initialState: false
+  });
+  const trySetOpen = useEventCallback((e, data) => {
+    const event = e instanceof CustomEvent && e.type === 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);
+    }
+
+    if (!data.open) {
+      state.setContextTarget(undefined);
+    }
+
+    if (data.keyboard) {
+      shouldHandleKeyboardRef.current = true;
+      shouldHandleTabRef.current = e.key === 'Tab';
+      pressedShiftRef.current = e.shiftKey;
+    }
+
+    if (data.bubble) {
+      parentSetOpen(e, { ...data
+      });
+    }
+
+    setOpenState(data.open);
+  });
+  const setOpen = useEventCallback((e, data) => {
+    var _a;
+
+    clearTimeout(setOpenTimeout.current);
+
+    if (!(e instanceof Event) && e.persist) {
+      // < React 17 still uses pooled synthetic events
+      e.persist();
+    }
+
+    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === 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
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+
+
+      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);
+    } else {
+      trySetOpen(e, data);
+    }
+  });
+  useOnClickOutside({
+    contains: elementContains,
+    disabled: !open,
+    element: targetDocument,
+    refs: [state.menuPopoverRef, state.triggerRef],
+    callback: e => setOpen(e, {
+      open: false
+    })
+  });
+  useOnMenuMouseEnter({
+    element: targetDocument,
+    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) {
+        setOpen(e, {
+          open: false
+        });
+      }
+    },
+    disabled: !open,
+    refs: [state.menuPopoverRef]
+  }); // Clear timeout on unmount
+  // Setting state after a component unmounts can cause memory leaks
+
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(setOpenTimeout.current);
+    };
+  }, []); // Manage focus for open state
+
+  const {
+    findFirstFocusable,
+    findNextFocusable,
+    findPrevFocusable
+  } = useFocusFinders();
+  const focusFirst = React.useCallback(() => {
+    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+  }, [findFirstFocusable, state.menuPopoverRef]);
+  const focusAfterMenuTrigger = React.useCallback(() => {
+    const nextFocusable = findNextFocusable(state.triggerRef.current);
+    nextFocusable === null || nextFocusable === void 0 ? void 0 : nextFocusable.focus();
+  }, [findNextFocusable, state.triggerRef]);
+  const focusBeforeMenuTrigger = React.useCallback(() => {
+    const prevFocusable = findPrevFocusable(state.triggerRef.current);
+    prevFocusable === null || prevFocusable === void 0 ? void 0 : prevFocusable.focus();
+  }, [findPrevFocusable, state.triggerRef]);
+  React.useEffect(() => {
+    if (open) {
+      focusFirst();
+    }
+  }, [open, focusFirst]);
+  React.useEffect(() => {
+    var _a;
+
+    if (open) {
+      focusFirst();
+    }
+
+    if (shouldHandleKeyboardRef.current && !open) {
+      if (shouldHandleTabRef.current && !state.isSubmenu) {
+        pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();
+      } else {
+        (_a = state.triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+    }
+
+    shouldHandleKeyboardRef.current = false;
+    shouldHandleTabRef.current = false;
+    pressedShiftRef.current = false;
+  }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);
+  return [open !== null && open !== void 0 ? open : false, setOpen];
+};
+//# sourceMappingURL=useMenu.js.map

package/lib/components/Menu/useMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Menu/useMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { usePopperMouseTarget, usePopper, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport { useControllableState, useId, useOnClickOutside, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuState } from './Menu.types';\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n  const triggerId = useId('menu');\n  const isSubmenu = useIsSubmenu();\n  const [contextTarget, setContextTarget] = usePopperMouseTarget();\n\n  const popperState = {\n    position: isSubmenu ? ('after' as const) : ('below' as const),\n    align: isSubmenu ? ('top' as const) : ('start' as const),\n    target: props.openOnContext ? contextTarget : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  };\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Menu must contain at most two children');\n    }\n  }\n\n  let menuTrigger: React.ReactElement | undefined = undefined;\n  let menuPopover: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    menuTrigger = children[0];\n    menuPopover = children[1];\n  } else if (children.length === 1) {\n    menuPopover = children[0];\n  }\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePopper(popperState);\n\n  const initialState = {\n    hoverDelay: 500,\n    triggerId,\n    isSubmenu: !!isSubmenu,\n    openOnHover: !!isSubmenu,\n    contextTarget,\n    setContextTarget,\n    ...props,\n    menuTrigger,\n    menuPopover,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n  } as const;\n\n  // TODO Better way to narrow types ?\n\n  const [open, setOpen] = useMenuOpenState(initialState);\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState(initialState);\n\n  return {\n    ...initialState,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  state: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<MenuState, 'onOpenChange' | 'setContextTarget' | 'triggerRef' | 'menuPopoverRef' | 'isSubmenu'> &\n    Pick<MenuProps, 'open' | 'defaultOpen'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const shouldHandleKeyboardRef = React.useRef(false);\n  const shouldHandleTabRef = React.useRef(false);\n  const pressedShiftRef = React.useRef(false);\n  const setOpenTimeout = React.useRef(0);\n  const enteringTriggerRef = React.useRef(false);\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n\n  const trySetOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n    const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n    onOpenChange?.(event, { ...data });\n    if (data.open && e.type === 'contextmenu') {\n      state.setContextTarget(e as React.MouseEvent);\n    }\n\n    if (!data.open) {\n      state.setContextTarget(undefined);\n    }\n\n    if (data.keyboard) {\n      shouldHandleKeyboardRef.current = true;\n      shouldHandleTabRef.current = (e as React.KeyboardEvent).key === 'Tab';\n      pressedShiftRef.current = (e as React.KeyboardEvent).shiftKey;\n    }\n\n    if (data.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n    clearTimeout(setOpenTimeout.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n      if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n        enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n      }\n\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n    } else {\n      trySetOpen(e, data);\n    }\n  });\n\n  useOnClickOutside({\n    contains: elementContains,\n    disabled: !open,\n    element: targetDocument,\n    refs: [state.menuPopoverRef, state.triggerRef],\n    callback: e => setOpen(e, { open: false }),\n  });\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: e => {\n      // When moving from a menu directly back to its trigger, this handler can close the menu\n      // Explicitly check a flag to see if this situation happens\n      if (!enteringTriggerRef.current) {\n        setOpen(e, { open: false });\n      }\n    },\n    disabled: !open,\n    refs: [state.menuPopoverRef],\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeout.current);\n    };\n  }, []);\n\n  // Manage focus for open state\n  const { findFirstFocusable, findNextFocusable, findPrevFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  const focusAfterMenuTrigger = React.useCallback(() => {\n    const nextFocusable = findNextFocusable(state.triggerRef.current);\n    nextFocusable?.focus();\n  }, [findNextFocusable, state.triggerRef]);\n\n  const focusBeforeMenuTrigger = React.useCallback(() => {\n    const prevFocusable = findPrevFocusable(state.triggerRef.current);\n    prevFocusable?.focus();\n  }, [findPrevFocusable, state.triggerRef]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    }\n  }, [open, focusFirst]);\n\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    }\n\n    if (shouldHandleKeyboardRef.current && !open) {\n      if (shouldHandleTabRef.current && !state.isSubmenu) {\n        pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n      } else {\n        state.triggerRef.current?.focus();\n      }\n    }\n\n    shouldHandleKeyboardRef.current = false;\n    shouldHandleTabRef.current = false;\n    pressedShiftRef.current = false;\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n  return [open ?? false, setOpen] as const;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Menu/useMenuContextValues.d.ts

@@ -0,0 +1,2 @@
+import type { MenuContextValues, MenuState } from './Menu.types';
+export declare function useMenuContextValues_unstable(state: MenuState): MenuContextValues;

package/lib/components/Menu/useMenuContextValues.js

@@ -0,0 +1,41 @@
+export function useMenuContextValues_unstable(state) {
+  const {
+    open,
+    setOpen,
+    onCheckedValueChange,
+    checkedValues,
+    defaultCheckedValues,
+    openOnHover,
+    openOnContext,
+    triggerRef,
+    triggerId,
+    menuPopoverRef,
+    isSubmenu,
+    hasCheckmarks,
+    hasIcons,
+    persistOnItemClick,
+    inline
+  } = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
+
+  const menu = {
+    open,
+    setOpen,
+    onCheckedValueChange,
+    checkedValues,
+    defaultCheckedValues,
+    triggerRef,
+    openOnHover,
+    openOnContext,
+    triggerId,
+    menuPopoverRef,
+    isSubmenu,
+    hasCheckmarks,
+    hasIcons,
+    persistOnItemClick,
+    inline
+  };
+  return {
+    menu
+  };
+}
+//# sourceMappingURL=useMenuContextValues.js.map

package/lib/components/Menu/useMenuContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Menu/useMenuContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,6BAAV,CAAwC,KAAxC,EAAwD;AAC5D,QAAM;AACJ,IAAA,IADI;AAEJ,IAAA,OAFI;AAGJ,IAAA,oBAHI;AAIJ,IAAA,aAJI;AAKJ,IAAA,oBALI;AAMJ,IAAA,WANI;AAOJ,IAAA,aAPI;AAQJ,IAAA,UARI;AASJ,IAAA,SATI;AAUJ,IAAA,cAVI;AAWJ,IAAA,SAXI;AAYJ,IAAA,aAZI;AAaJ,IAAA,QAbI;AAcJ,IAAA,kBAdI;AAeJ,IAAA;AAfI,MAgBF,KAhBJ,CAD4D,CAmB5D;;AACA,QAAM,IAAI,GAAG;AACX,IAAA,IADW;AAEX,IAAA,OAFW;AAGX,IAAA,oBAHW;AAIX,IAAA,aAJW;AAKX,IAAA,oBALW;AAMX,IAAA,UANW;AAOX,IAAA,WAPW;AAQX,IAAA,aARW;AASX,IAAA,SATW;AAUX,IAAA,cAVW;AAWX,IAAA,SAXW;AAYX,IAAA,aAZW;AAaX,IAAA,QAbW;AAcX,IAAA,kBAdW;AAeX,IAAA;AAfW,GAAb;AAkBA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    open,\n    setOpen,\n    onCheckedValueChange,\n    checkedValues,\n    defaultCheckedValues,\n    openOnHover,\n    openOnContext,\n    triggerRef,\n    triggerId,\n    menuPopoverRef,\n    isSubmenu,\n    hasCheckmarks,\n    hasIcons,\n    persistOnItemClick,\n    inline,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    open,\n    setOpen,\n    onCheckedValueChange,\n    checkedValues,\n    defaultCheckedValues,\n    triggerRef,\n    openOnHover,\n    openOnContext,\n    triggerId,\n    menuPopoverRef,\n    isSubmenu,\n    hasCheckmarks,\n    hasIcons,\n    persistOnItemClick,\n    inline,\n  };\n\n  return { menu };\n}\n"],"sourceRoot":"../src/"}