@fluentui/react-menu 0.0.0-nightly-20230501-0418.1 → 0.0.0-nightly-20230503-0419.1

package/lib/Menu.js

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

package/lib/Menu.js.map

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

package/lib/MenuDivider.js

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

package/lib/MenuDivider.js.map

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

package/lib/MenuGroup.js

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

package/lib/MenuGroup.js.map

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

package/lib/MenuGroupHeader.js

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

package/lib/MenuGroupHeader.js.map

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

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,"names":[],"sources":["../src/MenuItem.ts"],"sourcesContent":["export * from './components/MenuItem/index';\n"],"mappings":"AAAA,cAAc"}

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,"names":[],"sources":["../src/MenuItemCheckbox.ts"],"sourcesContent":["export * from './components/MenuItemCheckbox/index';\n"],"mappings":"AAAA,cAAc"}

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,"names":[],"sources":["../src/MenuItemRadio.ts"],"sourcesContent":["export * from './components/MenuItemRadio/index';\n"],"mappings":"AAAA,cAAc"}

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,"names":[],"sources":["../src/MenuList.ts"],"sourcesContent":["export * from './components/MenuList/index';\n"],"mappings":"AAAA,cAAc"}

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,"names":[],"sources":["../src/MenuPopover.ts"],"sourcesContent":["export * from './components/MenuPopover/index';\n"],"mappings":"AAAA,cAAc"}

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,"names":[],"sources":["../src/MenuSplitGroup.ts"],"sourcesContent":["export * from './components/MenuSplitGroup/index';\n"],"mappings":"AAAA,cAAc"}

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,"names":[],"sources":["../src/MenuTrigger.ts"],"sourcesContent":["export * from './components/MenuTrigger/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/components/Menu/Menu.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+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,"names":["React","useMenu_unstable","useMenuContextValues_unstable","renderMenu_unstable","Menu","props","state","contextValues","displayName"],"sources":["../../../src/components/Menu/Menu.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,mBAAmB,QAAQ;AAGpC;;;AAGA,OAAO,MAAMC,IAAA,GAA4BC,KAAA,IAAS;EAChD,MAAMC,KAAA,GAAQL,gBAAA,CAAiBI,KAAA;EAC/B,MAAME,aAAA,GAAgBL,6BAAA,CAA8BI,KAAA;EAEpD,OAAOH,mBAAA,CAAoBG,KAAA,EAAOC,aAAA;AACpC;AAEAH,IAAA,CAAKI,WAAW,GAAG"}

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+//# sourceMappingURL=Menu.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React"],"sources":["../../../src/components/Menu/Menu.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from '@fluentui/react-positioning';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { MenuContextValue } from '../../contexts/menuContext';\nimport type { MenuListProps } from '../MenuList/MenuList.types';\n\nexport type MenuSlots = {};\n\n/**\n * Extends and drills down Menulist props to simplify API\n */\nexport type MenuProps = ComponentProps<MenuSlots> &\n  Pick<PortalProps, 'mountNode'> &\n  Pick<\n    MenuListProps,\n    'checkedValues' | 'defaultCheckedValues' | 'hasCheckmarks' | 'hasIcons' | 'onCheckedValueChange'\n  > & {\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     * Sets the delay for mouse open/close for the popover one mouse enter/leave\n     */\n    hoverDelay?: number;\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     * @default false\n     */\n    inline?: 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: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Whether the popup is open\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * Whether the popup is open by default\n     *\n     * @default false\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * Opens the menu on right click (context menu), removes all other menu open interactions\n     *\n     * @default false\n     */\n    openOnContext?: boolean;\n\n    /**\n     * Opens the menu on hover\n     *\n     * @default false\n     */\n    openOnHover?: boolean;\n\n    /**\n     * Do not dismiss the menu when a menu item is clicked\n     *\n     * @default false\n     */\n    persistOnItemClick?: boolean;\n\n    /**\n     * Configures the positioned menu\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Close when scroll outside of it\n     *\n     * @default false\n     */\n    closeOnScroll?: boolean;\n  };\n\nexport type MenuState = ComponentState<MenuSlots> &\n  Required<\n    Pick<\n      MenuProps,\n      | 'hasCheckmarks'\n      | 'hasIcons'\n      | 'mountNode'\n      | 'inline'\n      | 'checkedValues'\n      | 'onCheckedValueChange'\n      | 'open'\n      | 'openOnHover'\n      | 'closeOnScroll'\n      | 'hoverDelay'\n      | 'openOnContext'\n      | 'persistOnItemClick'\n    >\n  > & {\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget?: PositioningVirtualElement;\n\n    /**\n     * Whether this menu is a submenu\n     */\n    isSubmenu: boolean;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuPopover: React.ReactNode;\n\n    /**\n     * The ref for the popup\n     */\n    menuPopoverRef: React.MutableRefObject<HTMLElement>;\n\n    /**\n     * Internal react node that just simplifies handling children\n     */\n    menuTrigger: React.ReactNode;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the popup\n     */\n    setOpen: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n\n    /**\n     * Id for the MenuTrigger element for aria relationship\n     */\n    triggerId: string;\n\n    /**\n     * The ref for the MenuTrigger, used for popup positioning\n     */\n    triggerRef: React.MutableRefObject<HTMLElement>;\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     * @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    onOpenChange?: (e: MenuOpenEvent, data: MenuOpenChangeData) => void;\n    /**\n     * Default values to be checked on mount\n     @deprecated this property is not used internally anymore,\n     * the signature remains just to avoid breaking changes\n     */\n    defaultCheckedValues?: Record<string, string[]>;\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 MenuOpenEvent = MenuOpenChangeData['event'];\n/**\n * @deprecated use MenuOpenEvent instead\n */\nexport type MenuOpenEvents = MenuOpenEvent;\n\n/**\n * Data attached to open/close events\n */\nexport type MenuOpenChangeData = {\n  /**\n   * indicates whether the request for the open state was bubbled from a nested menu\n   */\n  bubble?: boolean;\n  /**\n   * Indicates whether the change of state was a keyboard interaction\n   * @deprecated\n   * This should not be used, since `Enter`, `Space` and click should be interpreted as the same thing as a click\n   */\n  keyboard?: boolean;\n  open: boolean;\n} & (\n  | {\n      type: 'menuTriggerContextMenu';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseLeave';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerMouseMove';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuTriggerKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuItemClick';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverMouseEnter';\n      event: React.MouseEvent<HTMLElement>;\n    }\n  | {\n      type: 'menuPopoverKeyDown';\n      event: React.KeyboardEvent<HTMLElement>;\n    }\n  | {\n      type: 'clickOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'scrollOutside';\n      event: MouseEvent | TouchEvent;\n    }\n  | {\n      type: 'menuMouseEnter';\n      event: MouseEvent | TouchEvent;\n    }\n);\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

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,"names":[],"sources":["../../../src/components/Menu/index.ts"],"sourcesContent":["export * from './Menu';\nexport * from './Menu.types';\nexport * from './renderMenu';\nexport * from './useMenu';\nexport * from './useMenuContextValues';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Menu/renderMenu.js

@@ -0,0 +1,11 @@
+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,"names":["React","MenuProvider","renderMenu_unstable","state","contextValues","createElement","value","menu","menuTrigger","open","menuPopover"],"sources":["../../../src/components/Menu/renderMenu.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAkBC,aAAA,KAAqC;EACzF,oBACEJ,KAAA,CAAAK,aAAA,CAACJ,YAAA;IAAaK,KAAA,EAAOF,aAAA,CAAcG;KAChCJ,KAAA,CAAMK,WAAW,EACjBL,KAAA,CAAMM,IAAI,IAAIN,KAAA,CAAMO,WAAW;AAGtC"}

package/lib/components/Menu/useMenu.js

@@ -0,0 +1,268 @@
+import * as React from 'react';
+import { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';
+import { useControllableState, useId, useOnClickOutside, useEventCallback, useOnScrollOutside, useFirstMount } from '@fluentui/react-utilities';
+import { useFluent_unstable as 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';
+// If it's not possible to position the submenu in smaller viewports, try
+// and fallback to this order of positions
+const submenuFallbackPositions = ['after', 'after-bottom', 'before-top', 'before', 'before-bottom', 'above'];
+/**
+ * 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 isSubmenu = useIsSubmenu();
+  const {
+    hoverDelay = 500,
+    inline = false,
+    hasCheckmarks = false,
+    hasIcons = false,
+    closeOnScroll = false,
+    openOnContext = false,
+    persistOnItemClick = false,
+    openOnHover = isSubmenu,
+    defaultCheckedValues,
+    mountNode = null
+  } = props;
+  const triggerId = useId('menu');
+  const [contextTarget, setContextTarget] = usePositioningMouseTarget();
+  const positioningState = {
+    position: isSubmenu ? 'after' : 'below',
+    align: isSubmenu ? 'top' : 'start',
+    target: props.openOnContext ? contextTarget : undefined,
+    fallbackPositions: isSubmenu ? submenuFallbackPositions : 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
+  } = usePositioning(positioningState);
+  // TODO Better way to narrow types ?
+  const [open, setOpen] = useMenuOpenState({
+    hoverDelay,
+    isSubmenu,
+    setContextTarget,
+    closeOnScroll,
+    menuPopoverRef,
+    triggerRef,
+    open: props.open,
+    defaultOpen: props.defaultOpen,
+    onOpenChange: props.onOpenChange,
+    openOnContext
+  });
+  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({
+    checkedValues: props.checkedValues,
+    defaultCheckedValues,
+    onCheckedValueChange: props.onCheckedValueChange
+  });
+  return {
+    inline,
+    hoverDelay,
+    triggerId,
+    isSubmenu,
+    openOnHover,
+    contextTarget,
+    setContextTarget,
+    hasCheckmarks,
+    hasIcons,
+    closeOnScroll,
+    menuTrigger,
+    menuPopover,
+    mountNode,
+    triggerRef,
+    menuPopoverRef,
+    components: {},
+    openOnContext,
+    open,
+    setOpen,
+    checkedValues,
+    onCheckedValueChange,
+    persistOnItemClick
+  };
+};
+/**
+ * Adds appropriate state values and handlers for selectable items
+ * i.e checkboxes and radios
+ */
+const useMenuSelectableState = props => {
+  const [checkedValues, setCheckedValues] = useControllableState({
+    state: props.checkedValues,
+    defaultState: props.defaultCheckedValues,
+    initialState: {}
+  });
+  const onCheckedValueChange = useEventCallback((e, {
+    name,
+    checkedItems
+  }) => {
+    var _props_onCheckedValueChange;
+    (_props_onCheckedValueChange = props.onCheckedValueChange) === null || _props_onCheckedValueChange === void 0 ? void 0 : _props_onCheckedValueChange.call(props, e, {
+      name,
+      checkedItems
+    });
+    setCheckedValues(currentValue => ({
+      ...currentValue,
+      [name]: checkedItems
+    }));
+  });
+  return [checkedValues, onCheckedValueChange];
+};
+const useMenuOpenState = state => {
+  const {
+    targetDocument
+  } = useFluent();
+  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);
+  const onOpenChange = useEventCallback((e, data) => {
+    var _state_onOpenChange;
+    return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);
+  });
+  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.bubble) {
+      parentSetOpen(e, {
+        ...data
+      });
+    }
+    setOpenState(data.open);
+  });
+  const setOpen = useEventCallback((e, data) => {
+    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) {
+      var _state_triggerRef_current;
+      if ((_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.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.openOnContext && state.triggerRef].filter(Boolean),
+    callback: event => setOpen(event, {
+      open: false,
+      type: 'clickOutside',
+      event
+    })
+  });
+  // only close on scroll for context, or when closeOnScroll is specified
+  const closeOnScroll = state.openOnContext || state.closeOnScroll;
+  useOnScrollOutside({
+    contains: elementContains,
+    element: targetDocument,
+    callback: event => setOpen(event, {
+      open: false,
+      type: 'scrollOutside',
+      event
+    }),
+    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(Boolean),
+    disabled: !open || !closeOnScroll
+  });
+  useOnMenuMouseEnter({
+    element: targetDocument,
+    callback: event => {
+      // 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(event, {
+          open: false,
+          type: 'menuMouseEnter',
+          event
+        });
+      }
+    },
+    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
+  } = useFocusFinders();
+  const focusFirst = React.useCallback(() => {
+    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+  }, [findFirstFocusable, state.menuPopoverRef]);
+  const firstMount = useFirstMount();
+  React.useEffect(() => {
+    if (open) {
+      focusFirst();
+    } else {
+      if (!firstMount) {
+        if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
+          var
+          // We know that React effects are sync so we focus the trigger here
+          // after any event handler (event handlers will update state and re-render).
+          // Since the browser only performs the default behaviour for the Tab key once
+          // keyboard events have fully bubbled up the window, the browser will move
+          // focus to the next tabbable element before/after the trigger if needed.
+          // If the Tab key was not pressed, focus will remain on the trigger as expected.
+          _state_triggerRef_current;
+          (_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.focus();
+        }
+      }
+    }
+    // firstMount change should not re-run this effect
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);
+  return [open, setOpen];
+};
+//# sourceMappingURL=useMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","usePositioningMouseTarget","usePositioning","resolvePositioningShorthand","useControllableState","useId","useOnClickOutside","useEventCallback","useOnScrollOutside","useFirstMount","useFluent_unstable","useFluent","elementContains","useFocusFinders","useMenuContext_unstable","MENU_ENTER_EVENT","useOnMenuMouseEnter","useIsSubmenu","submenuFallbackPositions","useMenu_unstable","props","isSubmenu","hoverDelay","inline","hasCheckmarks","hasIcons","closeOnScroll","openOnContext","persistOnItemClick","openOnHover","defaultCheckedValues","mountNode","triggerId","contextTarget","setContextTarget","positioningState","position","align","target","undefined","fallbackPositions","positioning","children","Children","toArray","process","env","NODE_ENV","length","console","warn","menuTrigger","menuPopover","targetRef","triggerRef","containerRef","menuPopoverRef","open","setOpen","useMenuOpenState","defaultOpen","onOpenChange","checkedValues","onCheckedValueChange","useMenuSelectableState","components","setCheckedValues","state","defaultState","initialState","e","name","checkedItems","_props_onCheckedValueChange","call","currentValue","targetDocument","parentSetOpen","context","data","_state_onOpenChange","setOpenTimeout","useRef","enteringTriggerRef","setOpenState","trySetOpen","event","CustomEvent","type","detail","nativeEvent","bubble","clearTimeout","current","Event","persist","_state_triggerRef_current","contains","setTimeout","disabled","element","refs","filter","Boolean","callback","useEffect","findFirstFocusable","focusFirst","useCallback","firstFocusable","focus","firstMount","activeElement","body"],"sources":["../../../src/components/Menu/useMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  usePositioningMouseTarget,\n  usePositioning,\n  resolvePositioningShorthand,\n  PositioningShorthandValue,\n} from '@fluentui/react-positioning';\nimport {\n  useControllableState,\n  useId,\n  useOnClickOutside,\n  useEventCallback,\n  useOnScrollOutside,\n  useFirstMount,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as 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, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\n\n// If it's not possible to position the submenu in smaller viewports, try\n// and fallback to this order of positions\nconst submenuFallbackPositions: PositioningShorthandValue[] = [\n  'after',\n  'after-bottom',\n  'before-top',\n  'before',\n  'before-bottom',\n  'above',\n];\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 isSubmenu = useIsSubmenu();\n  const {\n    hoverDelay = 500,\n    inline = false,\n    hasCheckmarks = false,\n    hasIcons = false,\n    closeOnScroll = false,\n    openOnContext = false,\n    persistOnItemClick = false,\n    openOnHover = isSubmenu,\n    defaultCheckedValues,\n    mountNode = null,\n  } = props;\n  const triggerId = useId('menu');\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n  const positioningState = {\n    position: isSubmenu ? 'after' : 'below',\n    align: isSubmenu ? 'top' : 'start',\n    target: props.openOnContext ? contextTarget : undefined,\n    fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,\n    ...resolvePositioningShorthand(props.positioning),\n  } as const;\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\n  const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n  // TODO Better way to narrow types ?\n  const [open, setOpen] = useMenuOpenState({\n    hoverDelay,\n    isSubmenu,\n    setContextTarget,\n    closeOnScroll,\n    menuPopoverRef,\n    triggerRef,\n    open: props.open,\n    defaultOpen: props.defaultOpen,\n    onOpenChange: props.onOpenChange,\n    openOnContext,\n  });\n\n  const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  return {\n    inline,\n    hoverDelay,\n    triggerId,\n    isSubmenu,\n    openOnHover,\n    contextTarget,\n    setContextTarget,\n    hasCheckmarks,\n    hasIcons,\n    closeOnScroll,\n    menuTrigger,\n    menuPopover,\n    mountNode,\n    triggerRef,\n    menuPopoverRef,\n    components: {},\n    openOnContext,\n    open,\n    setOpen,\n    checkedValues,\n    onCheckedValueChange,\n    persistOnItemClick,\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n  props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n  const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    props.onCheckedValueChange?.(e, { name, checkedItems });\n\n    setCheckedValues(currentValue => ({\n      ...currentValue,\n      [name]: checkedItems,\n    }));\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n  state: Pick<\n    MenuState,\n    | 'isSubmenu'\n    | 'menuPopoverRef'\n    | 'setContextTarget'\n    | 'triggerRef'\n    | 'openOnContext'\n    | 'closeOnScroll'\n    | 'hoverDelay'\n  > &\n    Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n  const { targetDocument } = useFluent();\n  const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n  const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\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: MenuOpenEvent, 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.bubble) {\n      parentSetOpen(e, { ...data });\n    }\n\n    setOpenState(data.open);\n  });\n\n  const setOpen = useEventCallback((e: MenuOpenEvent, 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.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = state.openOnContext || state.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n      Boolean,\n    ) as React.MutableRefObject<HTMLElement>[],\n    disabled: !open || !closeOnScroll,\n  });\n\n  useOnMenuMouseEnter({\n    element: targetDocument,\n    callback: event => {\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(event, { open: false, type: 'menuMouseEnter', event });\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 } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, state.menuPopoverRef]);\n\n  const firstMount = useFirstMount();\n  React.useEffect(() => {\n    if (open) {\n      focusFirst();\n    } else {\n      if (!firstMount) {\n        if (targetDocument?.activeElement === targetDocument?.body) {\n          // We know that React effects are sync so we focus the trigger here\n          // after any event handler (event handlers will update state and re-render).\n          // Since the browser only performs the default behaviour for the Tab key once\n          // keyboard events have fully bubbled up the window, the browser will move\n          // focus to the next tabbable element before/after the trigger if needed.\n          // If the Tab key was not pressed, focus will remain on the trigger as expected.\n          state.triggerRef.current?.focus();\n        }\n      }\n    }\n    // firstMount change should not re-run this effect\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);\n\n  return [open, setOpen] as const;\n};\n"],"mappings":"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"}

package/lib/components/Menu/useMenuContextValues.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["useMenuContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","inline","isSubmenu","menuPopoverRef","mountNode","onCheckedValueChange","open","openOnContext","openOnHover","persistOnItemClick","setOpen","triggerId","triggerRef","menu"],"sources":["../../../src/components/Menu/useMenuContextValues.ts"],"sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n  const {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menu = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    inline,\n    isSubmenu,\n    menuPopoverRef,\n    mountNode,\n    onCheckedValueChange,\n    open,\n    openOnContext,\n    openOnHover,\n    persistOnItemClick,\n    setOpen,\n    triggerId,\n    triggerRef,\n  };\n\n  return { menu };\n}\n"],"mappings":"AAEA,OAAO,SAASA,8BAA8BC,KAAgB,EAAqB;EACjF,MAAM;IACJC,aAAA;IACAC,aAAA;IACAC,QAAA;IACAC,MAAA;IACAC,SAAA;IACAC,cAAA;IACAC,SAAA;IACAC,oBAAA;IACAC,IAAA;IACAC,aAAA;IACAC,WAAA;IACAC,kBAAA;IACAC,OAAA;IACAC,SAAA;IACAC;EAAU,CACX,GAAGf,KAAA;EAEJ;EACA,MAAMgB,IAAA,GAAO;IACXf,aAAA;IACAC,aAAA;IACAC,QAAA;IACAC,MAAA;IACAC,SAAA;IACAC,cAAA;IACAC,SAAA;IACAC,oBAAA;IACAC,IAAA;IACAC,aAAA;IACAC,WAAA;IACAC,kBAAA;IACAC,OAAA;IACAC,SAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAK;AAChB"}

package/lib/components/MenuDivider/MenuDivider.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useMenuDivider_unstable } from './useMenuDivider';
+import { useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles';
+import { renderMenuDivider_unstable } from './renderMenuDivider';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.
+ */
+export const MenuDivider = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useMenuDivider_unstable(props, ref);
+  useMenuDividerStyles_unstable(state);
+  useCustomStyleHook_unstable('useMenuDividerStyles_unstable')(state);
+  return renderMenuDivider_unstable(state);
+});
+MenuDivider.displayName = 'MenuDivider';
+//# sourceMappingURL=MenuDivider.js.map

package/lib/components/MenuDivider/MenuDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMenuDivider_unstable","useMenuDividerStyles_unstable","renderMenuDivider_unstable","useCustomStyleHook_unstable","MenuDivider","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/MenuDivider/MenuDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuDivider_unstable } from './useMenuDivider';\nimport { useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles';\nimport { renderMenuDivider_unstable } from './renderMenuDivider';\nimport type { MenuDividerProps } from './MenuDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.\n */\nexport const MenuDivider: ForwardRefComponent<MenuDividerProps> = React.forwardRef((props, ref) => {\n  const state = useMenuDivider_unstable(props, ref);\n\n  useMenuDividerStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuDividerStyles_unstable')(state);\n\n  return renderMenuDivider_unstable(state);\n});\n\nMenuDivider.displayName = 'MenuDivider';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,0BAA0B,QAAQ;AAG3C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CN,6BAAA,CAA8BO,KAAA;EAE9BL,2BAAA,CAA4B,iCAAiCK,KAAA;EAE7D,OAAON,0BAAA,CAA2BM,KAAA;AACpC;AAEAJ,WAAA,CAAYK,WAAW,GAAG"}

package/lib/components/MenuDivider/MenuDivider.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/MenuDivider/MenuDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuDividerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuDividerProps = ComponentProps<MenuDividerSlots>;\n\nexport type MenuDividerState = ComponentState<MenuDividerSlots>;\n"],"mappings":"AAAA"}

package/lib/components/MenuDivider/index.js

@@ -0,0 +1,6 @@
+export * from './MenuDivider.types';
+export * from './MenuDivider';
+export * from './renderMenuDivider';
+export * from './useMenuDivider';
+export * from './useMenuDividerStyles.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/MenuDivider/index.ts"],"sourcesContent":["export * from './MenuDivider.types';\nexport * from './MenuDivider';\nexport * from './renderMenuDivider';\nexport * from './useMenuDivider';\nexport * from './useMenuDividerStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/MenuDivider/renderMenuDivider.js

@@ -0,0 +1,14 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+/**
+ * Redefine the render function to add slots. Reuse the menudivider structure but add
+ * slots to children.
+ */
+export const renderMenuDivider_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(slots.root, slotProps.root);
+};
+//# sourceMappingURL=renderMenuDivider.js.map

package/lib/components/MenuDivider/renderMenuDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","renderMenuDivider_unstable","state","slots","slotProps","root"],"sources":["../../../src/components/MenuDivider/renderMenuDivider.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menudivider structure but add\n * slots to children.\n */\nexport const renderMenuDivider_unstable = (state: MenuDividerState) => {\n  const { slots, slotProps } = getSlotsNext<MenuDividerSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAG7B;;;;AAIA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA+BE,KAAA;EAE5D,oBAAOH,aAbT,CAaUI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI;AACvC"}

package/lib/components/MenuDivider/useMenuDivider.js

@@ -0,0 +1,19 @@
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import * as React from 'react';
+/**
+ * Given user props, returns state and render function for a MenuDivider.
+ */
+export const useMenuDivider_unstable = (props, ref) => {
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      role: 'presentation',
+      'aria-hidden': true,
+      ...props,
+      ref
+    })
+  };
+};
+//# sourceMappingURL=useMenuDivider.js.map

package/lib/components/MenuDivider/useMenuDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getNativeElementProps","React","useMenuDivider_unstable","props","ref","components","root","role"],"sources":["../../../src/components/MenuDivider/useMenuDivider.ts"],"sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Given user props, returns state and render function for a MenuDivider.\n */\nexport const useMenuDivider_unstable = (props: MenuDividerProps, ref: React.Ref<HTMLElement>): MenuDividerState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      role: 'presentation',\n      'aria-hidden': true,\n      ...props,\n      ref,\n    }),\n  };\n};\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ;AACtC,YAAYC,KAAA,MAAW;AAGvB;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,OAAO;IACLC,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAMN,qBAAA,CAAsB,OAAO;MACjCO,IAAA,EAAM;MACN,eAAe,IAAI;MACnB,GAAGJ,KAAK;MACRC;IACF;EACF;AACF"}