@fluentui/react-menu 0.0.0-nightlycc44f3625c20211220.1 → 0.0.0-nightlye0b8e1fa6920220128.1

package/lib/components/MenuTrigger/useMenuTrigger.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
 /**
  * Create the state required to render MenuTrigger.
@@ -5,4 +6,4 @@ import type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
  *
  * @param props - props from this instance of MenuTrigger
  */
-export declare const useMenuTrigger: (props: MenuTriggerProps) => MenuTriggerState;
+export declare const useMenuTrigger_unstable: (props: MenuTriggerProps, ref: React.Ref<HTMLElement>) => MenuTriggerState;

package/lib/components/MenuTrigger/useMenuTrigger.js

@@ -1,4 +1,11 @@
-import { useTriggerElement } from './useTriggerElement';
+import * as React from 'react';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { useIsSubmenu } from '../../utils/useIsSubmenu';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { useFluent } from '@fluentui/react-shared-contexts';
+import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
+import { onlyChild, useMergedRefs, useTriggerElement } from '@fluentui/react-utilities';
+import { shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';
 /**
  * Create the state required to render MenuTrigger.
  * Clones the only child component and adds necessary event handling behaviours to open a popup menu
@@ -6,10 +13,175 @@ import { useTriggerElement } from './useTriggerElement';
  * @param props - props from this instance of MenuTrigger
  */
 
-export const useMenuTrigger = props => {
-  const state = { ...props
-  }; // TODO just move the contents of this hook here
+export const useMenuTrigger_unstable = (props, ref) => {
+  var _a;
 
-  return useTriggerElement(state);
+  const {
+    children,
+    ...rest
+  } = props;
+  const triggerRef = useMenuContext_unstable(context => context.triggerRef);
+  const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);
+  const setOpen = useMenuContext_unstable(context => context.setOpen);
+  const open = useMenuContext_unstable(context => context.open);
+  const triggerId = useMenuContext_unstable(context => context.triggerId);
+  const openOnHover = useMenuContext_unstable(context => context.openOnHover);
+  const openOnContext = useMenuContext_unstable(context => context.openOnContext);
+  const isSubmenu = useIsSubmenu();
+  const {
+    findFirstFocusable
+  } = useFocusFinders();
+  const focusFirst = React.useCallback(() => {
+    const firstFocusable = findFirstFocusable(menuPopoverRef.current);
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+  }, [findFirstFocusable, menuPopoverRef]);
+  const openedWithKeyboardRef = React.useRef(false);
+  const hasMouseMoved = React.useRef(false);
+  const {
+    dir
+  } = useFluent();
+  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;
+  const child = /*#__PURE__*/React.isValidElement(children) ? onlyChild(children) : undefined;
+
+  const onContextMenu = e => {
+    if (isTargetDisabled(e)) {
+      return;
+    }
+
+    if (openOnContext) {
+      e.preventDefault();
+      setOpen(e, {
+        open: true,
+        keyboard: false
+      });
+    }
+  };
+
+  const onClick = e => {
+    if (isTargetDisabled(e)) {
+      return;
+    }
+
+    if (!openOnContext) {
+      setOpen(e, {
+        open: !open,
+        keyboard: openedWithKeyboardRef.current
+      });
+      openedWithKeyboardRef.current = false;
+    }
+  };
+
+  const onKeyDown = e => {
+    var _a;
+
+    if (isTargetDisabled(e)) {
+      return;
+    }
+
+    if (shouldPreventDefaultOnKeyDown(e)) {
+      e.preventDefault();
+      openedWithKeyboardRef.current = true;
+      (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
+    }
+
+    const key = e.key;
+
+    if (!openOnContext && (isSubmenu && key === OpenArrowKey || !isSubmenu && key === ArrowDown)) {
+      setOpen(e, {
+        open: true,
+        keyboard: true
+      });
+    }
+
+    if (key === Escape && !isSubmenu) {
+      setOpen(e, {
+        open: false,
+        keyboard: true
+      });
+    } // if menu is already open, can't rely on effects to focus
+
+
+    if (open && key === OpenArrowKey && isSubmenu) {
+      focusFirst();
+    }
+  };
+
+  const onMouseEnter = e => {
+    if (isTargetDisabled(e)) {
+      return;
+    }
+
+    if (openOnHover && hasMouseMoved.current) {
+      setOpen(e, {
+        open: true,
+        keyboard: false
+      });
+    }
+  }; // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience
+  // First time open the mouse using mousemove and then continue with mouseenter
+  // Only use once to determine that the user is using the mouse since it is an expensive event to handle
+
+
+  const onMouseMove = e => {
+    if (isTargetDisabled(e)) {
+      return;
+    }
+
+    if (openOnHover && !hasMouseMoved.current) {
+      setOpen(e, {
+        open: true,
+        keyboard: false
+      });
+      hasMouseMoved.current = true;
+    }
+  };
+
+  const onMouseLeave = e => {
+    if (isTargetDisabled(e)) {
+      return;
+    }
+
+    if (openOnHover) {
+      setOpen(e, {
+        open: false,
+        keyboard: false
+      });
+    }
+  };
+
+  const overrideProps = {
+    'aria-haspopup': 'menu',
+    'aria-expanded': open,
+    id: ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.id) || triggerId,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onKeyDown,
+    onContextMenu,
+    onMouseMove
+  };
+
+  if (!open && !isSubmenu) {
+    overrideProps['aria-expanded'] = undefined;
+  }
+
+  return {
+    children: useTriggerElement({
+      children,
+      ref: useMergedRefs(triggerRef, ref),
+      outerProps: rest,
+      overrideProps
+    })
+  };
+};
+
+const isTargetDisabled = e => {
+  const isDisabled = el => el.hasAttribute('disabled') || el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true';
+
+  if (e.target instanceof HTMLElement && isDisabled(e.target)) {
+    return true;
+  }
+
+  return e.currentTarget instanceof HTMLElement && isDisabled(e.currentTarget);
 };
 //# sourceMappingURL=useMenuTrigger.js.map

package/lib/components/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"AAAA,SAAS,iBAAT,QAAkC,qBAAlC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,cAAc,GAAI,KAAD,IAA8C;AAC1E,QAAM,KAAK,GAAG,EAAE,GAAG;AAAL,GAAd,CAD0E,CAG1E;;AACA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CALM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib/contexts/menuContext.d.ts

@@ -13,4 +13,4 @@ export declare type MenuContextValue = MenuListProps & Pick<MenuState, 'openOnHo
     triggerId: string;
 };
 export declare const MenuProvider: React.Provider<MenuContextValue> & React.FC<React.ProviderProps<MenuContextValue>>;
-export declare const useMenuContext: <T>(selector: ContextSelector<MenuContextValue, T>) => T;
+export declare const useMenuContext_unstable: <T>(selector: ContextSelector<MenuContextValue, T>) => T;

package/lib/contexts/menuContext.js

@@ -19,5 +19,5 @@ export const MenuContext = /*#__PURE__*/createContext({
   hasCheckmarks: false
 });
 export const MenuProvider = MenuContext.Provider;
-export const useMenuContext = selector => useContextSelector(MenuContext, selector);
+export const useMenuContext_unstable = selector => useContextSelector(MenuContext, selector);
 //# sourceMappingURL=menuContext.js.map

package/lib/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/contexts/menuContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,MAAM,WAAW,gBAA8B,aAAa,CAAmB;AACpF,EAAA,IAAI,EAAE,KAD8E;AAEpF,EAAA,OAAO,EAAE,MAAM,KAFqE;AAGpF,EAAA,aAAa,EAAE,EAHqE;AAIpF,EAAA,oBAAoB,EAAE,MAAM,IAJwD;AAKpF,EAAA,oBAAoB,EAAE,EAL8D;AAMpF,EAAA,SAAS,EAAE,KANyE;AAOpF,EAAA,UAAU,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GAPuE;AAQpF,EAAA,cAAc,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GARmE;AASpF,EAAA,SAAS,EAAE,EATyE;AAUpF,EAAA,aAAa,EAAE,KAVqE;AAWpF,EAAA,WAAW,EAAE,KAXuE;AAYpF,EAAA,QAAQ,EAAE,KAZ0E;AAapF,EAAA,aAAa,EAAE;AAbqE,CAAnB,CAA5D;AAwCP,OAAO,MAAM,YAAY,GAAG,WAAW,CAAC,QAAjC;AAEP,OAAO,MAAM,cAAc,GAAO,QAAJ,IAC5B,kBAAkB,CAAC,WAAD,EAAc,QAAd,CADb","sourceRoot":""}
+{"version":3,"sources":["../../src/contexts/menuContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,MAAM,WAAW,gBAA8B,aAAa,CAAmB;AACpF,EAAA,IAAI,EAAE,KAD8E;AAEpF,EAAA,OAAO,EAAE,MAAM,KAFqE;AAGpF,EAAA,aAAa,EAAE,EAHqE;AAIpF,EAAA,oBAAoB,EAAE,MAAM,IAJwD;AAKpF,EAAA,oBAAoB,EAAE,EAL8D;AAMpF,EAAA,SAAS,EAAE,KANyE;AAOpF,EAAA,UAAU,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GAPuE;AAQpF,EAAA,cAAc,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GARmE;AASpF,EAAA,SAAS,EAAE,EATyE;AAUpF,EAAA,aAAa,EAAE,KAVqE;AAWpF,EAAA,WAAW,EAAE,KAXuE;AAYpF,EAAA,QAAQ,EAAE,KAZ0E;AAapF,EAAA,aAAa,EAAE;AAbqE,CAAnB,CAA5D;AAwCP,OAAO,MAAM,YAAY,GAAG,WAAW,CAAC,QAAjC;AAEP,OAAO,MAAM,uBAAuB,GAAO,QAAJ,IACrC,kBAAkB,CAAC,WAAD,EAAc,QAAd,CADb","sourceRoot":""}

package/lib/contexts/menuGroupContext.d.ts

@@ -10,4 +10,4 @@ export declare type MenuGroupContextValue = {
     headerId: string;
 };
 export declare const MenuGroupContextProvider: React.Provider<MenuGroupContextValue>;
-export declare const useMenuGroupContext: () => MenuGroupContextValue;
+export declare const useMenuGroupContext_unstable: () => MenuGroupContextValue;

package/lib/contexts/menuGroupContext.js

@@ -3,5 +3,5 @@ const MenuGroupContext = /*#__PURE__*/React.createContext({
   headerId: ''
 });
 export const MenuGroupContextProvider = MenuGroupContext.Provider;
-export const useMenuGroupContext = () => React.useContext(MenuGroupContext);
+export const useMenuGroupContext_unstable = () => React.useContext(MenuGroupContext);
 //# sourceMappingURL=menuGroupContext.js.map

package/lib/contexts/menuGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaA,OAAO,MAAM,wBAAwB,GAAG,gBAAgB,CAAC,QAAlD;AACP,OAAO,MAAM,mBAAmB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,gBAAjB,CAAlC","sourceRoot":""}
+{"version":3,"sources":["../../src/contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaA,OAAO,MAAM,wBAAwB,GAAG,gBAAgB,CAAC,QAAlD;AACP,OAAO,MAAM,4BAA4B,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,gBAAjB,CAA3C","sourceRoot":""}

package/lib/contexts/menuListContext.d.ts

@@ -12,4 +12,4 @@ export declare type MenuListContextValue = Pick<MenuListProps, 'checkedValues' |
     selectRadio?: SelectableHandler;
 };
 export declare const MenuListProvider: React.Provider<MenuListContextValue> & React.FC<React.ProviderProps<MenuListContextValue>>;
-export declare const useMenuListContext: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;
+export declare const useMenuListContext_unstable: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;

package/lib/contexts/menuListContext.js

@@ -9,5 +9,5 @@ export const MenuListContext = /*#__PURE__*/createContext({
   hasCheckmarks: false
 });
 export const MenuListProvider = MenuListContext.Provider;
-export const useMenuListContext = selector => useContextSelector(MenuListContext, selector);
+export const useMenuListContext_unstable = selector => useContextSelector(MenuListContext, selector);
 //# sourceMappingURL=menuListContext.js.map

package/lib/contexts/menuListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,MAAM,eAAe,gBAAkC,aAAa,CAAuB;AAChG,EAAA,aAAa,EAAE,EADiF;AAEhG,EAAA,oBAAoB,EAAE,MAAM,IAFoE;AAGhG,EAAA,wBAAwB,EAAE,MAAM,IAHgE;AAIhG,EAAA,cAAc,EAAE,MAAM,IAJ0E;AAKhG,EAAA,WAAW,EAAE,MAAM,IAL6E;AAMhG,EAAA,QAAQ,EAAE,KANsF;AAOhG,EAAA,aAAa,EAAE;AAPiF,CAAvB,CAApE;AAsBP,OAAO,MAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC;AAEP,OAAO,MAAM,kBAAkB,GAAQ,QAAL,IAChC,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CADb","sourceRoot":""}
+{"version":3,"sources":["../../src/contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,MAAM,eAAe,gBAAkC,aAAa,CAAuB;AAChG,EAAA,aAAa,EAAE,EADiF;AAEhG,EAAA,oBAAoB,EAAE,MAAM,IAFoE;AAGhG,EAAA,wBAAwB,EAAE,MAAM,IAHgE;AAIhG,EAAA,cAAc,EAAE,MAAM,IAJ0E;AAKhG,EAAA,WAAW,EAAE,MAAM,IAL6E;AAMhG,EAAA,QAAQ,EAAE,KANsF;AAOhG,EAAA,aAAa,EAAE;AAPiF,CAAvB,CAApE;AAsBP,OAAO,MAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC;AAEP,OAAO,MAAM,2BAA2B,GAAQ,QAAL,IACzC,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CADb","sourceRoot":""}

package/lib/contexts/menuTriggerContext.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export declare const MenuTriggerContextProvider: React.Provider<boolean>;
-export declare const useMenuTriggerContext: () => boolean;
+export declare const useMenuTriggerContext_unstable: () => boolean;

package/lib/contexts/menuTriggerContext.js

@@ -5,5 +5,5 @@ import * as React from 'react';
 
 const MenuTriggerContext = /*#__PURE__*/React.createContext(false);
 export const MenuTriggerContextProvider = MenuTriggerContext.Provider;
-export const useMenuTriggerContext = () => React.useContext(MenuTriggerContext);
+export const useMenuTriggerContext_unstable = () => React.useContext(MenuTriggerContext);
 //# sourceMappingURL=menuTriggerContext.js.map

package/lib/contexts/menuTriggerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/contexts/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;AAEG;;AACH,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAA6B,KAA7B,CAA3B;AAEA,OAAO,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAtD;AACP,OAAO,MAAM,qBAAqB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,kBAAjB,CAApC","sourceRoot":""}
+{"version":3,"sources":["../../src/contexts/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;AAEG;;AACH,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAA6B,KAA7B,CAA3B;AAEA,OAAO,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAtD;AACP,OAAO,MAAM,8BAA8B,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,kBAAjB,CAA7C","sourceRoot":""}

package/lib/index.d.ts

@@ -1,15 +1,16 @@
-export * from './MenuItem';
-export * from './MenuList';
-export * from './MenuItemCheckbox';
-export * from './MenuItemRadio';
-export * from './MenuDivider';
-export * from './MenuGroupHeader';
-export * from './MenuGroup';
-export * from './selectable/index';
-export * from './MenuTrigger';
-export * from './Menu';
 export * from './contexts/menuContext';
 export * from './contexts/menuTriggerContext';
 export * from './contexts/menuGroupContext';
 export * from './contexts/menuListContext';
+export * from './Menu';
+export * from './MenuDivider';
+export * from './MenuGroup';
+export * from './MenuGroupHeader';
+export * from './MenuItem';
+export * from './MenuItemCheckbox';
+export * from './MenuItemRadio';
+export * from './MenuList';
 export * from './MenuPopover';
+export * from './MenuSplitGroup';
+export * from './MenuTrigger';
+export * from './selectable/index';

package/lib/index.js

@@ -1,16 +1,17 @@
-export * from './MenuItem';
-export * from './MenuList';
-export * from './MenuItemCheckbox';
-export * from './MenuItemRadio';
-export * from './MenuDivider';
-export * from './MenuGroupHeader';
-export * from './MenuGroup';
-export * from './selectable/index';
-export * from './MenuTrigger';
-export * from './Menu';
 export * from './contexts/menuContext';
 export * from './contexts/menuTriggerContext';
 export * from './contexts/menuGroupContext';
 export * from './contexts/menuListContext';
+export * from './Menu';
+export * from './MenuDivider';
+export * from './MenuGroup';
+export * from './MenuGroupHeader';
+export * from './MenuItem';
+export * from './MenuItemCheckbox';
+export * from './MenuItemRadio';
+export * from './MenuList';
 export * from './MenuPopover';
+export * from './MenuSplitGroup';
+export * from './MenuTrigger';
+export * from './selectable/index';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAE9B,cAAc,oBAAoB,CAAC"}

package/lib/selectable/useCheckmarkStyles.d.ts

@@ -5,4 +5,4 @@ import type { MenuItemSlots } from '../components/MenuItem/MenuItem.types';
  *
  * @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<MenuItemSlots, 'checkmark'>) => void;

package/lib/selectable/useCheckmarkStyles.js

@@ -1,4 +1,4 @@
-import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { mergeClasses, __styles } from '@griffel/react';
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
@@ -19,7 +19,7 @@ const useStyles = /*#__PURE__*/__styles({
  */
 
 
-export const useCheckmarkStyles = state => {
+export const useCheckmarkStyles_unstable = state => {
   const styles = useStyles();
 
   if (state.checkmark) {

package/lib/selectable/useCheckmarkStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/selectable/useCheckmarkStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;;AAIA,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;;;AAIG;;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAsE;AACtG,QAAM,MAAM,GAAG,SAAS,EAAxB;;AACA,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,MAAM,CAAC,IAD+B,EAEtC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAFc,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,CAAxC;AAKD;AACF,CATM","sourceRoot":""}
+{"version":3,"sources":["../../src/selectable/useCheckmarkStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;;AAIA,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;;;AAIG;;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAAsE;AAC/G,QAAM,MAAM,GAAG,SAAS,EAAxB;;AACA,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,MAAM,CAAC,IAD+B,EAEtC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAFc,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,CAAxC;AAKD;AACF,CATM","sourceRoot":""}

package/lib/utils/useIsSubmenu.js

@@ -1,5 +1,5 @@
 import { useHasParentContext } from '@fluentui/react-context-selector';
-import { useMenuContext } from '../contexts/menuContext';
+import { useMenuContext_unstable } from '../contexts/menuContext';
 import { MenuListContext } from '../contexts/menuListContext';
 /**
  * A component can be a part of a submenu whether its menu context `isSubmenu` flag is true
@@ -11,7 +11,7 @@ import { MenuListContext } from '../contexts/menuListContext';
  */
 
 export function useIsSubmenu() {
-  const menuContextValue = useMenuContext(context => context.isSubmenu);
+  const menuContextValue = useMenuContext_unstable(context => context.isSubmenu);
   const hasMenuListContext = useHasParentContext(MenuListContext);
   return menuContextValue || hasMenuListContext;
 }

package/lib/utils/useIsSubmenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/useIsSubmenu.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,QAAoC,kCAApC;AACA,SAAS,cAAT,QAA+B,yBAA/B;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,YAAV,GAAsB;AAC1B,QAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,IAAI,OAAO,CAAC,SAApB,CAAvC;AACA,QAAM,kBAAkB,GAAG,mBAAmB,CAAC,eAAD,CAA9C;AAEA,SAAO,gBAAgB,IAAI,kBAA3B;AACD","sourceRoot":""}
+{"version":3,"sources":["../../src/utils/useIsSubmenu.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,QAAoC,kCAApC;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,YAAV,GAAsB;AAC1B,QAAM,gBAAgB,GAAG,uBAAuB,CAAC,OAAO,IAAI,OAAO,CAAC,SAApB,CAAhD;AACA,QAAM,kBAAkB,GAAG,mBAAmB,CAAC,eAAD,CAA9C;AAEA,SAAO,gBAAgB,IAAI,kBAA3B;AACD","sourceRoot":""}

package/lib-commonjs/MenuSplitGroup.d.ts

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

package/lib-commonjs/MenuSplitGroup.js

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

package/lib-commonjs/MenuSplitGroup.js.map

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

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

@@ -16,9 +16,9 @@ const renderMenu_1 = /*#__PURE__*/require("./renderMenu");
 
 
 const Menu = props => {
-  const state = useMenu_1.useMenu(props);
-  const contextValues = useMenuContextValues_1.useMenuContextValues(state);
-  return renderMenu_1.renderMenu(state, contextValues);
+  const state = useMenu_1.useMenu_unstable(props);
+  const contextValues = useMenuContextValues_1.useMenuContextValues_unstable(state);
+  return renderMenu_1.renderMenu_unstable(state, contextValues);
 };
 
 exports.Menu = Menu;

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

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

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

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

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

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

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

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

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenu = void 0;
+exports.useMenu_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -17,24 +17,22 @@ const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
 
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
-const index_1 = /*#__PURE__*/require("../MenuTrigger/index");
-
 const menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
 
-const index_2 = /*#__PURE__*/require("../../utils/index");
+const index_1 = /*#__PURE__*/require("../../utils/index");
 
 const useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
 /**
  * Create the state required to render Menu.
  *
  * The returned state can be modified with hooks such as useMenuStyles,
- * before being passed to renderMenu.
+ * before being passed to renderMenu_unstable.
  *
  * @param props - props from this instance of Menu
  */
 
 
-const useMenu = props => {
+const useMenu_unstable = props => {
   const triggerId = react_utilities_1.useId('menu');
   const isSubmenu = useIsSubmenu_1.useIsSubmenu();
   const [contextTarget, setContextTarget] = react_positioning_1.usePopperMouseTarget();
@@ -46,23 +44,28 @@ const useMenu = props => {
   };
   const children = React.Children.toArray(props.children);
 
-  if (children.length !== 2 && process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line no-console
-    console.warn('Menu can only take one MenuTrigger and one MenuList as children');
-  }
+  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');
+    }
 
-  const {
-    menuTrigger,
-    menuPopover
-  } = children.reduce((acc, child) => {
-    if (child.type === index_1.MenuTrigger) {
-      acc.menuTrigger = child;
-    } else {
-      acc.menuPopover = child;
+    if (children.length > 2) {
+      // eslint-disable-next-line no-console
+      console.warn('Menu must contain at most two children');
     }
+  }
+
+  let menuTrigger = undefined;
+  let menuPopover = undefined;
+
+  if (children.length === 2) {
+    menuTrigger = children[0];
+    menuPopover = children[1];
+  } else if (children.length === 1) {
+    menuPopover = children[0];
+  }
 
-    return acc;
-  }, {});
   const {
     targetRef: triggerRef,
     containerRef: menuPopoverRef
@@ -78,7 +81,8 @@ const useMenu = props => {
     menuTrigger,
     menuPopover,
     triggerRef,
-    menuPopoverRef
+    menuPopoverRef,
+    components: {}
   }; // TODO Better way to narrow types ?
 
   const [open, setOpen] = useMenuOpenState(initialState);
@@ -91,7 +95,7 @@ const useMenu = props => {
   };
 };
 
-exports.useMenu = useMenu;
+exports.useMenu_unstable = useMenu_unstable;
 /**
  * Adds appropriate state values and handlers for selectable items
  * i.e checkboxes and radios
@@ -132,7 +136,7 @@ const useMenuOpenState = state => {
   const {
     targetDocument
   } = react_shared_contexts_1.useFluent();
-  const parentSetOpen = menuContext_1.useMenuContext(context => context.setOpen);
+  const parentSetOpen = menuContext_1.useMenuContext_unstable(context => context.setOpen);
   const onOpenChange = react_utilities_1.useEventCallback((e, data) => {
     var _a;
 
@@ -149,7 +153,7 @@ const useMenuOpenState = state => {
     initialState: false
   });
   const trySetOpen = react_utilities_1.useEventCallback((e, data) => {
-    const event = e instanceof CustomEvent && e.type === index_2.MENU_ENTER_EVENT ? e.detail.nativeEvent : e;
+    const event = e instanceof CustomEvent && e.type === index_1.MENU_ENTER_EVENT ? e.detail.nativeEvent : e;
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, { ...data
     });
 
@@ -184,7 +188,7 @@ const useMenuOpenState = state => {
       e.persist();
     }
 
-    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === index_2.MENU_ENTER_EVENT) {
+    if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === index_1.MENU_ENTER_EVENT) {
       if ((_a = state.triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
         enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';
       } // FIXME leaking Node timeout type
@@ -206,7 +210,7 @@ const useMenuOpenState = state => {
       open: false
     })
   });
-  index_2.useOnMenuMouseEnter({
+  index_1.useOnMenuMouseEnter({
     element: targetDocument,
     callback: e => {
       // When moving from a menu directly back to its trigger, this handler can close the menu