@fluentui/react-menu 0.0.0-nightlyfbae36b19b20211111.1 → 0.0.0-nightlyfc5cfdc52420220215.1

package/Spec.md

@@ -619,7 +619,7 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
   <div role="menuitem" tabindex="-1">Option 2</div>
@@ -644,7 +644,7 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">
     <span role="presentation"><svg>FileIcon</svg></span>
@@ -682,7 +682,7 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
   <div role="separator" aria-hidden="true"></div>
@@ -719,7 +719,7 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
   <div role="separator" aria-hidden="true"></div>
@@ -758,10 +758,10 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
-  <div role="menuitem" tabindex="-1" aria-haspopup="true" aria-expanded="false" id="submenu-trigger">Open submenu</div>
+  <div role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false" id="submenu-trigger">Open submenu</div>
 </div>
 
 <!-- expected DOM output for submenu  -->
@@ -843,7 +843,7 @@ const menuSelectableSections = (
 ```
 
 ```html
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 
 <!-- expected DOM output for basic checkbox  -->
 <div role="menu" aria-labelledby="trigger">
@@ -882,9 +882,12 @@ const menuSplitbutton= (
     <MenuList>
       <MenuItem>Option 1</MenuItem>
       <Menu>
-        <MenuTrigger>
-          <MenuItemSplit></MenuItemSplit>
-        </MenuTrigger>
+        <MenuSplitGroup>
+          <MenuItem>Main action</MenuItem>
+          <MenuTrigger>
+            <MenuItem />
+          </MenuTrigger>
+        </MenuSplitGroup>
         <MenuItem>Option 1</MenuItem>
         <MenuItem>Option 2</MenuItem>
         <MenuItem>Option 3</MenuItem>
@@ -897,7 +900,7 @@ const menuSplitbutton= (
 ```html
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
-  <div role="menuitem" tabindex="-1" aria-haspopup="true" aria-expanded="false" id="submenu-trigger">Open submenu</div>
+  <div role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false" id="submenu-trigger">Open submenu</div>
 </div>
 
 <!-- expected DOM output  -->
@@ -905,7 +908,7 @@ const menuSplitbutton= (
   <div role="menuitem" tabindex="0">Option 1</div>
   <div role="group">
     <div role="menuitem" tabindex="-1">content slot</div>
-    <div role="menuitem" tabindex="-1" aria-haspopup="true" aria-expanded="false" id="submenu-trgger">
+    <div role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false" id="submenu-trgger">
       <svg>indicator icon</svg>
     </div>
   </div>
@@ -958,11 +961,13 @@ Below is a set of diagrams that tries to illustrates all the interactions menus
 
 All of the above Mouse events seen previously should apply to the part of the split button that is intended to open a submenu.
 
-Once the submenu is open, the same behavior as in the [previous section](#submenu-trigger/navigation) applies with the exception of returning focus to the splitbutton, which is shown in the images below.
-
-![Using up/down arrow key](./etc/images/splitbutton-up-down.jpg)
+> TODO convert these diagrams to excalidraw or smth that is text format
+> TODO add extra descriptions to diagrams
 
-![Using left/right arrow key](./etc/images/splitbutton-left-right.jpg)
+<img src="./etc/images/menu-interactions/Slide19.PNG" width="700" />
+<img src="./etc/images/menu-interactions/Slide20.PNG" width="700" />
+<img src="./etc/images/menu-interactions/Slide21.PNG" width="700" />
+<img src="./etc/images/menu-interactions/Slide22.PNG" width="700" />
 
 ### MenuItem selection
 

package/dist/react-menu.d.ts

@@ -2,10 +2,11 @@ import { ComponentProps } from '@fluentui/react-utilities';
 import { ComponentState } from '@fluentui/react-utilities';
 import type { Context } from '@fluentui/react-context-selector';
 import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
 import { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 /**
@@ -73,7 +74,7 @@ export declare type MenuContextValues = {
 };
 
 /**
- * Define a styled MenuDivider, using the `useMenuDivider` hook.
+ * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.
  */
 export declare const MenuDivider: ForwardRefComponent<MenuDividerProps>;
 
@@ -82,13 +83,13 @@ export declare const menuDividerClassName = "fui-MenuDivider";
 export declare type MenuDividerProps = ComponentProps<MenuDividerSlots>;
 
 export declare type MenuDividerSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type MenuDividerState = ComponentState<MenuDividerSlots>;
 
 /**
- * Define a styled MenuGroup, using the `useMenuGroup` hook.
+ * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.
  */
 export declare const MenuGroup: ForwardRefComponent<MenuGroupProps>;
 
@@ -112,7 +113,7 @@ export declare type MenuGroupContextValues = {
 };
 
 /**
- * Define a styled MenuGroupHeader, using the `useMenuGroupHeader` hook.
+ * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.
  */
 export declare const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
 
@@ -121,7 +122,7 @@ export declare const menuGroupHeaderClassName = "fui-MenuGroupHeader";
 export declare type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;
 
 export declare type MenuGroupHeaderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;
@@ -129,7 +130,7 @@ export declare type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;
 export declare type MenuGroupProps = ComponentProps<MenuGroupSlots>;
 
 export declare type MenuGroupSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type MenuGroupState = ComponentState<MenuGroupSlots> & {
@@ -140,12 +141,12 @@ export declare type MenuGroupState = ComponentState<MenuGroupSlots> & {
 };
 
 /**
- * Define a styled MenuItem, using the `useMenuItem` and `useMenuItemStyles` hook.
+ * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.
  */
 export declare const MenuItem: ForwardRefComponent<MenuItemProps>;
 
 /**
- * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox` hook.
+ * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.
  */
 export declare const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
 
@@ -175,7 +176,7 @@ declare type MenuItemCommons = {
 export declare type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & MenuItemCommons;
 
 /**
- * Define a styled MenuItemRadio, using the `useMenuItemRadio` hook.
+ * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
  */
 export declare const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
 
@@ -220,46 +221,41 @@ export declare type MenuItemSelectableState = MenuItemSelectableProps & {
 };
 
 export declare type MenuItemSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
     /**
      * Icon slot rendered before children content
      */
-    icon?: IntrinsicShorthandProps<'span'>;
+    icon?: Slot<'span'>;
     /**
      * A helper slot for alignment when a menu item is used with selectable menuitems
      * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components
      */
-    checkmark?: IntrinsicShorthandProps<'span'>;
+    checkmark?: Slot<'span'>;
     /**
      * Icon slot that shows the indicator for a submenu
      */
-    submenuIndicator?: IntrinsicShorthandProps<'span'>;
+    submenuIndicator?: Slot<'span'>;
     /**
      * Component children are placed in this slot
      * Avoid using the `children` property in this slot in favour of Component children whenever possible
      */
-    content: IntrinsicShorthandProps<'span'>;
+    content?: Slot<'span'>;
     /**
      * Secondary content rendered opposite the primary content (e.g Shortcut text)
      */
-    secondaryContent?: IntrinsicShorthandProps<'span'>;
+    secondaryContent?: Slot<'span'>;
 };
 
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const menuItemSlots: Array<keyof MenuItemSlots>;
-
 export declare type MenuItemState = ComponentState<MenuItemSlots> & MenuItemCommons;
 
 /**
- * Define a styled MenuList, using the `useMenuList` hook.
+ * Define a styled MenuList, using the `useMenuList_unstable` hook.
  */
 export declare const MenuList: ForwardRefComponent<MenuListProps>;
 
 export declare const menuListClassName = "fui-MenuList";
 
-export declare type MenuListCommons = {
+declare type MenuListCommons = {
     /**
      * Callback when checked items change for value with a name
      *
@@ -305,7 +301,7 @@ export declare type MenuListProps = ComponentProps<MenuListSlots> & Partial<Menu
 export declare const MenuListProvider: React_2.Provider<MenuListContextValue> & React_2.FC<React_2.ProviderProps<MenuListContextValue>>;
 
 export declare type MenuListSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 export declare type MenuListState = ComponentState<MenuListSlots> & MenuListCommons & {
@@ -353,7 +349,7 @@ export declare const menuPopoverClassName = "fui-MenuPopover";
 export declare type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
 
 export declare type MenuPopoverSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
 /**
@@ -386,6 +382,29 @@ export declare const MenuProvider: React_2.Provider<MenuContextValue> & React_2.
 
 export declare type MenuSlots = {};
 
+/**
+ * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
+ */
+export declare const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
+
+export declare const menuSplitGroupClassName = "fui-MenuSplitGroup";
+
+declare type MenuSplitGroupCommons = {};
+
+/**
+ * MenuSplitGroup Props
+ */
+export declare type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots> & MenuSplitGroupCommons;
+
+export declare type MenuSplitGroupSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering MenuSplitGroup
+ */
+export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & MenuSplitGroupCommons;
+
 export declare type MenuState = MenuCommons & ComponentState<MenuSlots> & {
     /**
      * Callback to open/close the popup
@@ -429,13 +448,14 @@ export declare type MenuState = MenuCommons & ComponentState<MenuSlots> & {
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
  */
-export declare const MenuTrigger: React_2.FC<MenuTriggerProps>;
+export declare const MenuTrigger: React_2.FC<MenuTriggerProps> & FluentTriggerComponent;
 
 /**
  * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu
  */
-export declare type MenuTriggerChildProps = Required<Pick<React_2.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'aria-expanded' | 'id'>> & {
+export declare type MenuTriggerChildProps = Required<Pick<React_2.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'id'>> & {
     ref?: React_2.Ref<never>;
+    'aria-expanded': boolean | undefined;
 };
 
 export declare const MenuTriggerContextProvider: React_2.Provider<boolean>;
@@ -446,64 +466,71 @@ export declare type MenuTriggerProps = {
      */
     children: (React_2.ReactElement & {
         ref?: React_2.Ref<unknown>;
-    }) | ((props: MenuTriggerChildProps) => React_2.ReactNode);
+    }) | ((props: MenuTriggerChildProps) => React_2.ReactElement | null);
 };
 
-export declare type MenuTriggerState = MenuTriggerProps;
+export declare type MenuTriggerState = {
+    children: React_2.ReactElement | null;
+};
 
 /**
  * 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;
 
 /**
  * Redefine the render function to add slots. Reuse the menudivider structure but add
  * slots to children.
  */
-export declare const renderMenuDivider: (state: MenuDividerState) => JSX.Element;
+export declare const renderMenuDivider_unstable: (state: MenuDividerState) => JSX.Element;
 
 /**
  * Redefine the render function to add slots. Reuse the menugroup structure but add
  * slots to children.
  */
-export declare const renderMenuGroup: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSX.Element;
+export declare const renderMenuGroup_unstable: (state: MenuGroupState, contextValues: MenuGroupContextValues) => JSX.Element;
 
 /**
  * Redefine the render function to add slots. Reuse the menugroupheader structure but add
  * slots to children.
  */
-export declare const renderMenuGroupHeader: (state: MenuGroupHeaderState) => JSX.Element;
+export declare const renderMenuGroupHeader_unstable: (state: MenuGroupHeaderState) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderMenuItem: (state: MenuItemState) => JSX.Element;
+export declare const renderMenuItem_unstable: (state: MenuItemState) => JSX.Element;
 
 /** Function that renders the final JSX of the component  */
-export declare const renderMenuItemCheckbox: (state: MenuItemCheckboxState) => JSX.Element;
+export declare const renderMenuItemCheckbox_unstable: (state: MenuItemCheckboxState) => JSX.Element;
 
 /**
  * Redefine the render function to add slots. Reuse the menuitemradio structure but add
  * slots to children.
  */
-export declare const renderMenuItemRadio: (state: MenuItemRadioState) => JSX.Element;
+export declare const renderMenuItemRadio_unstable: (state: MenuItemRadioState) => JSX.Element;
 
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderMenuList: (state: MenuListState, contextValues: MenuListContextValues) => JSX.Element;
+export declare const renderMenuList_unstable: (state: MenuListState, contextValues: MenuListContextValues) => JSX.Element;
 
 /**
  * Render the final JSX of MenuPopover
  */
-export declare const renderMenuPopover: (state: MenuPopoverState) => JSX.Element;
+export declare const renderMenuPopover_unstable: (state: MenuPopoverState) => JSX.Element;
+
+/**
+ * Render the final JSX of MenuSplitGroup
+ */
+export declare const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState) => JSX.Element;
 
 /**
  * Render the final JSX of MenuTrigger
  *
  * Only renders children
  */
-export declare const renderMenuTrigger: (state: MenuTriggerState) => JSX.Element;
+export declare const renderMenuTrigger_unstable: (state: MenuTriggerState) => JSX.Element;
 
 export declare type SelectableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked: boolean) => void;
 
@@ -514,96 +541,112 @@ export declare type UninitializedMenuListState = Omit<MenuListState, 'setFocusBy
  *
  * @param state - should contain a `checkmark` slot
  */
-export declare const useCheckmarkStyles: (state: MenuItemSelectableState & Pick<MenuItemSlots, 'checkmark'>) => void;
+export declare const useCheckmarkStyles_unstable: (state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>) => void;
 
 /**
  * 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;
 
-export declare const useMenuContext: <T>(selector: ContextSelector<MenuContextValue, T>) => T;
+export declare const useMenuContext_unstable: <T>(selector: ContextSelector<MenuContextValue, T>) => T;
 
-export declare function useMenuContextValues(state: MenuState): MenuContextValues;
+export declare function useMenuContextValues_unstable(state: MenuState): MenuContextValues;
 
 /**
  * Given user props, returns state and render function for a MenuDivider.
  */
-export declare const useMenuDivider: (props: MenuDividerProps, ref: React_2.Ref<HTMLElement>) => MenuDividerState;
+export declare const useMenuDivider_unstable: (props: MenuDividerProps, ref: React_2.Ref<HTMLElement>) => MenuDividerState;
 
-export declare const useMenuDividerStyles: (state: MenuDividerState) => ComponentState<MenuDividerSlots>;
+export declare const useMenuDividerStyles_unstable: (state: MenuDividerState) => MenuDividerState;
 
 /**
  * Given user props, returns state and render function for a MenuGroup.
  */
-export declare function useMenuGroup(props: MenuGroupProps, ref: React_2.Ref<HTMLElement>): MenuGroupState;
+export declare function useMenuGroup_unstable(props: MenuGroupProps, ref: React_2.Ref<HTMLElement>): MenuGroupState;
 
-export declare const useMenuGroupContext: () => MenuGroupContextValue;
+export declare const useMenuGroupContext_unstable: () => MenuGroupContextValue;
 
-export declare function useMenuGroupContextValues(state: MenuGroupState): MenuGroupContextValues;
+export declare function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues;
 
 /**
  * Given user props, returns state and render function for a MenuGroupHeader.
  */
-export declare function useMenuGroupHeader(props: MenuGroupHeaderProps, ref: React_2.Ref<HTMLElement>): MenuGroupHeaderState;
+export declare function useMenuGroupHeader_unstable(props: MenuGroupHeaderProps, ref: React_2.Ref<HTMLElement>): MenuGroupHeaderState;
 
-export declare const useMenuGroupHeaderStyles: (state: MenuGroupHeaderState) => ComponentState<MenuGroupHeaderSlots>;
+export declare const useMenuGroupHeaderStyles_unstable: (state: MenuGroupHeaderState) => MenuGroupHeaderState;
 
-export declare const useMenuGroupStyles: (state: MenuGroupState) => MenuGroupState;
+export declare const useMenuGroupStyles_unstable: (state: MenuGroupState) => MenuGroupState;
 
 /**
  * Returns the props and state required to render the component
  */
-export declare const useMenuItem: (props: MenuItemProps, ref: React_2.Ref<HTMLElement>) => MenuItemState;
+export declare const useMenuItem_unstable: (props: MenuItemProps, ref: React_2.Ref<HTMLElement>) => MenuItemState;
 
 /** Returns the props and state required to render the component */
-export declare const useMenuItemCheckbox: (props: MenuItemCheckboxProps, ref: React_2.Ref<HTMLElement>) => MenuItemCheckboxState;
+export declare const useMenuItemCheckbox_unstable: (props: MenuItemCheckboxProps, ref: React_2.Ref<HTMLElement>) => MenuItemCheckboxState;
 
-export declare const useMenuItemCheckboxStyles: (state: MenuItemCheckboxState) => void;
+export declare const useMenuItemCheckboxStyles_unstable: (state: MenuItemCheckboxState) => void;
 
 /**
  * Given user props, returns state and render function for a MenuItemRadio.
  */
-export declare const useMenuItemRadio: (props: MenuItemRadioProps, ref: React_2.Ref<HTMLElement>) => MenuItemRadioState;
+export declare const useMenuItemRadio_unstable: (props: MenuItemRadioProps, ref: React_2.Ref<HTMLElement>) => MenuItemRadioState;
 
-export declare const useMenuItemRadioStyles: (state: MenuItemRadioState) => void;
+export declare const useMenuItemRadioStyles_unstable: (state: MenuItemRadioState) => void;
 
 /** Applies style classnames to slots */
-export declare const useMenuItemStyles: (state: MenuItemState) => void;
+export declare const useMenuItemStyles_unstable: (state: MenuItemState) => void;
 
 /**
  * Returns the props and state required to render the component
  */
-export declare const useMenuList: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;
+export declare const useMenuList_unstable: (props: MenuListProps, ref: React_2.Ref<HTMLElement>) => MenuListState;
 
-export declare const useMenuListContext: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;
+export declare const useMenuListContext_unstable: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;
 
-export declare function useMenuListContextValues(state: MenuListState): MenuListContextValues;
+export declare function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues;
 
 /**
  * Apply styling to the Menu slots based on the state
  */
-export declare const useMenuListStyles: (state: MenuListState) => MenuListState;
+export declare const useMenuListStyles_unstable: (state: MenuListState) => MenuListState;
 
 /**
  * Create the state required to render MenuPopover.
  *
- * The returned state can be modified with hooks such as useMenuPopoverStyles,
- * before being passed to renderMenuPopover.
+ * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
+ * before being passed to renderMenuPopover_unstable.
  *
  * @param props - props from this instance of MenuPopover
  * @param ref - reference to root HTMLElement of MenuPopover
  */
-export declare const useMenuPopover: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;
+export declare const useMenuPopover_unstable: (props: MenuPopoverProps, ref: React_2.Ref<HTMLElement>) => MenuPopoverState;
 
 /**
  * Apply styling to the Menu slots based on the state
  */
-export declare const useMenuPopoverStyles: (state: MenuPopoverState) => MenuPopoverState;
+export declare const useMenuPopoverStyles_unstable: (state: MenuPopoverState) => MenuPopoverState;
+
+/**
+ * Create the state required to render MenuSplitGroup.
+ *
+ * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,
+ * before being passed to renderMenuSplitGroup_unstable.
+ *
+ * @param props - props from this instance of MenuSplitGroup
+ * @param ref - reference to root HTMLElement of MenuSplitGroup
+ */
+export declare const useMenuSplitGroup_unstable: (props: MenuSplitGroupProps, ref: React_2.Ref<HTMLElement>) => MenuSplitGroupState;
+
+/**
+ * Apply styling to the MenuSplitGroup slots based on the state
+ */
+export declare const useMenuSplitGroupStyles_unstable: (state: MenuSplitGroupState) => MenuSplitGroupState;
 
 /**
  * Create the state required to render MenuTrigger.
@@ -611,8 +654,8 @@ export declare const useMenuPopoverStyles: (state: MenuPopoverState) => MenuPopo
  *
  * @param props - props from this instance of MenuTrigger
  */
-export declare const useMenuTrigger: (props: MenuTriggerProps) => MenuTriggerState;
+export declare const useMenuTrigger_unstable: (props: MenuTriggerProps) => MenuTriggerState;
 
-export declare const useMenuTriggerContext: () => boolean;
+export declare const useMenuTriggerContext_unstable: () => boolean;
 
 export { }

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":"","sources":["../src/MenuSplitGroup.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}

package/lib/components/Menu/Menu.js

@@ -1,14 +1,14 @@
-import { useMenu } from './useMenu';
-import { useMenuContextValues } from './useMenuContextValues';
-import { renderMenu } from './renderMenu';
+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(props);
-  const contextValues = useMenuContextValues(state);
-  return renderMenu(state, contextValues);
+  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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AACA,SAAS,OAAT,QAAwB,WAAxB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AAGA;;AAEG;;AACH,OAAO,MAAM,IAAI,GAAwB,KAAK,IAAG;AAC/C,QAAM,KAAK,GAAG,OAAO,CAAC,KAAD,CAArB;AACA,QAAM,aAAa,GAAG,oBAAoB,CAAC,KAAD,CAA1C;AAEA,SAAO,UAAU,CAAC,KAAD,EAAQ,aAAR,CAAjB;AACD,CALM;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourceRoot":""}
+{"version":3,"sources":["../../../src/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","sourceRoot":""}

package/lib/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/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/components/Menu/renderMenu.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Menu/renderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,4BAA7B;AAGA;;AAEG;;AACH,OAAO,MAAM,UAAU,GAAG,CAAC,KAAD,EAAmB,aAAnB,KAAuD;AAC/E,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","sourceRoot":""}
+{"version":3,"sources":["../../../src/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","sourceRoot":""}

package/lib/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;