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

package/lib-commonjs/components/MenuTrigger/renderMenuTrigger.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderMenuTrigger = void 0;
+exports.renderMenuTrigger_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -15,11 +15,11 @@ const menuTriggerContext_1 = /*#__PURE__*/require("../../contexts/menuTriggerCon
  */
 
 
-const renderMenuTrigger = state => {
+const renderMenuTrigger_unstable = state => {
   return React.createElement(menuTriggerContext_1.MenuTriggerContextProvider, {
     value: true
   }, state.children);
 };
 
-exports.renderMenuTrigger = renderMenuTrigger;
+exports.renderMenuTrigger_unstable = renderMenuTrigger_unstable;
 //# sourceMappingURL=renderMenuTrigger.js.map

package/lib-commonjs/components/MenuTrigger/renderMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,SAAO,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,0BAAD,EAA2B;AAAC,IAAA,KAAK,EAAE;AAAR,GAA3B,EAA0C,KAAK,CAAC,QAAhD,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,SAAO,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,0BAAD,EAA2B;AAAC,IAAA,KAAK,EAAE;AAAR,GAA3B,EAA0C,KAAK,CAAC,QAAhD,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourceRoot":""}

package/lib-commonjs/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-commonjs/components/MenuTrigger/useMenuTrigger.js

@@ -3,9 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuTrigger = void 0;
+exports.useMenuTrigger_unstable = void 0;
 
-const useTriggerElement_1 = /*#__PURE__*/require("./useTriggerElement");
+const React = /*#__PURE__*/require("react");
+
+const menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
+
+const useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const react_utilities_2 = /*#__PURE__*/require("@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
@@ -14,12 +28,177 @@ const useTriggerElement_1 = /*#__PURE__*/require("./useTriggerElement");
  */
 
 
-const useMenuTrigger = props => {
-  const state = { ...props
-  }; // TODO just move the contents of this hook here
+const useMenuTrigger_unstable = (props, ref) => {
+  var _a;
+
+  const {
+    children,
+    ...rest
+  } = props;
+  const triggerRef = menuContext_1.useMenuContext_unstable(context => context.triggerRef);
+  const menuPopoverRef = menuContext_1.useMenuContext_unstable(context => context.menuPopoverRef);
+  const setOpen = menuContext_1.useMenuContext_unstable(context => context.setOpen);
+  const open = menuContext_1.useMenuContext_unstable(context => context.open);
+  const triggerId = menuContext_1.useMenuContext_unstable(context => context.triggerId);
+  const openOnHover = menuContext_1.useMenuContext_unstable(context => context.openOnHover);
+  const openOnContext = menuContext_1.useMenuContext_unstable(context => context.openOnContext);
+  const isSubmenu = useIsSubmenu_1.useIsSubmenu();
+  const {
+    findFirstFocusable
+  } = react_tabster_1.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
+  } = react_shared_contexts_1.useFluent();
+  const OpenArrowKey = dir === 'ltr' ? keyboard_keys_1.ArrowRight : keyboard_keys_1.ArrowLeft;
+  const child = React.isValidElement(children) ? react_utilities_1.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 (react_utilities_2.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 === keyboard_keys_1.ArrowDown)) {
+      setOpen(e, {
+        open: true,
+        keyboard: true
+      });
+    }
 
-  return useTriggerElement_1.useTriggerElement(state);
+    if (key === keyboard_keys_1.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: react_utilities_1.useTriggerElement({
+      children,
+      ref: react_utilities_1.useMergedRefs(triggerRef, ref),
+      outerProps: rest,
+      overrideProps
+    })
+  };
 };
 
-exports.useMenuTrigger = useMenuTrigger;
+exports.useMenuTrigger_unstable = useMenuTrigger_unstable;
+
+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-commonjs/components/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,cAAc,GAAI,KAAD,IAA8C;AAC1E,QAAM,KAAK,GAAG,EAAE,GAAG;AAAL,GAAd,CAD0E,CAG1E;;AACA,SAAO,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib-commonjs/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-commonjs/contexts/menuContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuContext = exports.MenuProvider = exports.MenuContext = void 0;
+exports.useMenuContext_unstable = exports.MenuProvider = exports.MenuContext = void 0;
 
 const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 
@@ -28,7 +28,7 @@ exports.MenuContext = /*#__PURE__*/react_context_selector_1.createContext({
 });
 exports.MenuProvider = exports.MenuContext.Provider;
 
-const useMenuContext = selector => react_context_selector_1.useContextSelector(exports.MenuContext, selector);
+const useMenuContext_unstable = selector => react_context_selector_1.useContextSelector(exports.MenuContext, selector);
 
-exports.useMenuContext = useMenuContext;
+exports.useMenuContext_unstable = useMenuContext_unstable;
 //# sourceMappingURL=menuContext.js.map

package/lib-commonjs/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/contexts/menuContext.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAKa,OAAA,CAAA,WAAA,gBAAyC,wBAAA,CAAA,aAAA,CAAgC;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,CAAhC,CAAzC;AAwCA,OAAA,CAAA,YAAA,GAAe,OAAA,CAAA,WAAA,CAAY,QAA3B;;AAEN,MAAM,cAAc,GAAO,QAAJ,IAC5B,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,WAAnB,EAAgC,QAAhC,CADK;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
+{"version":3,"sources":["../../src/contexts/menuContext.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAKa,OAAA,CAAA,WAAA,gBAAyC,wBAAA,CAAA,aAAA,CAAgC;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,CAAhC,CAAzC;AAwCA,OAAA,CAAA,YAAA,GAAe,OAAA,CAAA,WAAA,CAAY,QAA3B;;AAEN,MAAM,uBAAuB,GAAO,QAAJ,IACrC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,WAAnB,EAAgC,QAAhC,CADK;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}

package/lib-commonjs/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-commonjs/contexts/menuGroupContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuGroupContext = exports.MenuGroupContextProvider = void 0;
+exports.useMenuGroupContext_unstable = exports.MenuGroupContextProvider = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -12,7 +12,7 @@ const MenuGroupContext = /*#__PURE__*/React.createContext({
 });
 exports.MenuGroupContextProvider = MenuGroupContext.Provider;
 
-const useMenuGroupContext = () => React.useContext(MenuGroupContext);
+const useMenuGroupContext_unstable = () => React.useContext(MenuGroupContext);
 
-exports.useMenuGroupContext = useMenuGroupContext;
+exports.useMenuGroupContext_unstable = useMenuGroupContext_unstable;
 //# sourceMappingURL=menuGroupContext.js.map

package/lib-commonjs/contexts/menuGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/contexts/menuGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaa,OAAA,CAAA,wBAAA,GAA2B,gBAAgB,CAAC,QAA5C;;AACN,MAAM,mBAAmB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,gBAAjB,CAAlC;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}
+{"version":3,"sources":["../../src/contexts/menuGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaa,OAAA,CAAA,wBAAA,GAA2B,gBAAgB,CAAC,QAA5C;;AACN,MAAM,4BAA4B,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,gBAAjB,CAA3C;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourceRoot":""}

package/lib-commonjs/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-commonjs/contexts/menuListContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuListContext = exports.MenuListProvider = exports.MenuListContext = void 0;
+exports.useMenuListContext_unstable = exports.MenuListProvider = exports.MenuListContext = void 0;
 
 const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 
@@ -18,7 +18,7 @@ exports.MenuListContext = /*#__PURE__*/react_context_selector_1.createContext({
 });
 exports.MenuListProvider = exports.MenuListContext.Provider;
 
-const useMenuListContext = selector => react_context_selector_1.useContextSelector(exports.MenuListContext, selector);
+const useMenuListContext_unstable = selector => react_context_selector_1.useContextSelector(exports.MenuListContext, selector);
 
-exports.useMenuListContext = useMenuListContext;
+exports.useMenuListContext_unstable = useMenuListContext_unstable;
 //# sourceMappingURL=menuListContext.js.map

package/lib-commonjs/contexts/menuListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/contexts/menuListContext.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,gBAAiD,wBAAA,CAAA,aAAA,CAAoC;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,CAApC,CAAjD;AAsBA,OAAA,CAAA,gBAAA,GAAmB,OAAA,CAAA,eAAA,CAAgB,QAAnC;;AAEN,MAAM,kBAAkB,GAAQ,QAAL,IAChC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,QAApC,CADK;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourceRoot":""}
+{"version":3,"sources":["../../src/contexts/menuListContext.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,gBAAiD,wBAAA,CAAA,aAAA,CAAoC;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,CAApC,CAAjD;AAsBA,OAAA,CAAA,gBAAA,GAAmB,OAAA,CAAA,eAAA,CAAgB,QAAnC;;AAEN,MAAM,2BAA2B,GAAQ,QAAL,IACzC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,QAApC,CADK;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourceRoot":""}

package/lib-commonjs/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-commonjs/contexts/menuTriggerContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuTriggerContext = exports.MenuTriggerContextProvider = void 0;
+exports.useMenuTriggerContext_unstable = exports.MenuTriggerContextProvider = void 0;
 
 const React = /*#__PURE__*/require("react");
 /**
@@ -14,7 +14,7 @@ const React = /*#__PURE__*/require("react");
 const MenuTriggerContext = /*#__PURE__*/React.createContext(false);
 exports.MenuTriggerContextProvider = MenuTriggerContext.Provider;
 
-const useMenuTriggerContext = () => React.useContext(MenuTriggerContext);
+const useMenuTriggerContext_unstable = () => React.useContext(MenuTriggerContext);
 
-exports.useMenuTriggerContext = useMenuTriggerContext;
+exports.useMenuTriggerContext_unstable = useMenuTriggerContext_unstable;
 //# sourceMappingURL=menuTriggerContext.js.map

package/lib-commonjs/contexts/menuTriggerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/contexts/menuTriggerContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAEA;;AAEG;;;AACH,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAA6B,KAA7B,CAA3B;AAEa,OAAA,CAAA,0BAAA,GAA6B,kBAAkB,CAAC,QAAhD;;AACN,MAAM,qBAAqB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,kBAAjB,CAApC;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourceRoot":""}
+{"version":3,"sources":["../../src/contexts/menuTriggerContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAEA;;AAEG;;;AACH,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAA6B,KAA7B,CAA3B;AAEa,OAAA,CAAA,0BAAA,GAA6B,kBAAkB,CAAC,QAAhD;;AACN,MAAM,8BAA8B,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,kBAAjB,CAA7C;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourceRoot":""}

package/lib-commonjs/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-commonjs/selectable/useCheckmarkStyles.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCheckmarkStyles = void 0;
+exports.useCheckmarkStyles_unstable = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "a9b677": "fjw5fx7",
     "Bqenvij": "fd461yt",
@@ -26,13 +26,13 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
  */
 
 
-const useCheckmarkStyles = state => {
+const useCheckmarkStyles_unstable = state => {
   const styles = useStyles();
 
   if (state.checkmark) {
-    state.checkmark.className = react_make_styles_1.mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
+    state.checkmark.className = react_1.mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
   }
 };
 
-exports.useCheckmarkStyles = useCheckmarkStyles;
+exports.useCheckmarkStyles_unstable = useCheckmarkStyles_unstable;
 //# sourceMappingURL=useCheckmarkStyles.js.map

package/lib-commonjs/selectable/useCheckmarkStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/selectable/useCheckmarkStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAIA,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;;;AAIG;;;AACI,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,mBAAA,CAAA,YAAA,CAC1B,MAAM,CAAC,IADmB,EAE1B,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAFE,EAG1B,KAAK,CAAC,SAAN,CAAgB,SAHU,CAA5B;AAKD;AACF,CATM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourceRoot":""}
+{"version":3,"sources":["../../src/selectable/useCheckmarkStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIA,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;;;AAIG;;;AACI,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,OAAA,CAAA,YAAA,CAC1B,MAAM,CAAC,IADmB,EAE1B,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAFE,EAG1B,KAAK,CAAC,SAAN,CAAgB,SAHU,CAA5B;AAKD;AACF,CATM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourceRoot":""}

package/lib-commonjs/utils/useIsSubmenu.js

@@ -21,7 +21,7 @@ const menuListContext_1 = /*#__PURE__*/require("../contexts/menuListContext");
 
 
 function useIsSubmenu() {
-  const menuContextValue = menuContext_1.useMenuContext(context => context.isSubmenu);
+  const menuContextValue = menuContext_1.useMenuContext_unstable(context => context.isSubmenu);
   const hasMenuListContext = react_context_selector_1.useHasParentContext(menuListContext_1.MenuListContext);
   return menuContextValue || hasMenuListContext;
 }

package/lib-commonjs/utils/useIsSubmenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/useIsSubmenu.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;AAOG;;;AACH,SAAgB,YAAhB,GAA4B;AAC1B,QAAM,gBAAgB,GAAG,aAAA,CAAA,cAAA,CAAe,OAAO,IAAI,OAAO,CAAC,SAAlC,CAAzB;AACA,QAAM,kBAAkB,GAAG,wBAAA,CAAA,mBAAA,CAAoB,iBAAA,CAAA,eAApB,CAA3B;AAEA,SAAO,gBAAgB,IAAI,kBAA3B;AACD;;AALD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}
+{"version":3,"sources":["../../src/utils/useIsSubmenu.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;AAOG;;;AACH,SAAgB,YAAhB,GAA4B;AAC1B,QAAM,gBAAgB,GAAG,aAAA,CAAA,uBAAA,CAAwB,OAAO,IAAI,OAAO,CAAC,SAA3C,CAAzB;AACA,QAAM,kBAAkB,GAAG,wBAAA,CAAA,mBAAA,CAAoB,iBAAA,CAAA,eAApB,CAA3B;AAEA,SAAO,gBAAgB,IAAI,kBAA3B;AACD;;AALD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "0.0.0-nightlydd0f007b3f20220119.1",
+  "version": "0.0.0-nightlye0b8e1fa6920220128.1",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,11 +27,9 @@
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "0.0.0-nightlydd0f007b3f20220119.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "0.0.0-nightlydd0f007b3f20220119.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "0.0.0-nightlydd0f007b3f20220119.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightlye0b8e1fa6920220128.1",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -45,15 +43,15 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightlydd0f007b3f20220119.1",
-    "@fluentui/react-context-selector": "0.0.0-nightlydd0f007b3f20220119.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightlye0b8e1fa6920220128.1",
+    "@fluentui/react-context-selector": "0.0.0-nightlye0b8e1fa6920220128.1",
     "@fluentui/react-icons": "^2.0.154-beta.5",
-    "@fluentui/react-make-styles": "0.0.0-nightlydd0f007b3f20220119.1",
-    "@fluentui/react-portal": "0.0.0-nightlydd0f007b3f20220119.1",
-    "@fluentui/react-positioning": "0.0.0-nightlydd0f007b3f20220119.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightlydd0f007b3f20220119.1",
-    "@fluentui/react-tabster": "0.0.0-nightlydd0f007b3f20220119.1",
-    "@fluentui/react-utilities": "0.0.0-nightlydd0f007b3f20220119.1",
+    "@griffel/react": "1.0.0",
+    "@fluentui/react-portal": "0.0.0-nightlye0b8e1fa6920220128.1",
+    "@fluentui/react-positioning": "0.0.0-nightlye0b8e1fa6920220128.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightlye0b8e1fa6920220128.1",
+    "@fluentui/react-tabster": "0.0.0-nightlye0b8e1fa6920220128.1",
+    "@fluentui/react-utilities": "0.0.0-nightlye0b8e1fa6920220128.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

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

@@ -1,5 +0,0 @@
-import type { MenuTriggerState } from './MenuTrigger.types';
-/**
- * Adds the necessary props to the trigger element
- */
-export declare const useTriggerElement: (state: MenuTriggerState) => MenuTriggerState;