@fluentui/react-menu 0.0.0-nightlyf8be6a7c6520220106.1 → 0.0.0-nightlyff78d1e27a20220217.1

package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.d.ts

@@ -3,4 +3,4 @@ export declare const menuPopoverClassName = "fui-MenuPopover";
 /**
  * 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;

package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuPopoverStyles = exports.menuPopoverClassName = void 0;
+exports.useMenuPopoverStyles_unstable = exports.menuPopoverClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 exports.menuPopoverClassName = 'fui-MenuPopover';
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -45,11 +47,11 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
  */
 
 
-const useMenuPopoverStyles = state => {
+const useMenuPopoverStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.menuPopoverClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuPopoverClassName, styles.root, state.root.className);
   return state;
 };
 
-exports.useMenuPopoverStyles = useMenuPopoverStyles;
+exports.useMenuPopoverStyles_unstable = useMenuPopoverStyles_unstable;
 //# sourceMappingURL=useMenuPopoverStyles.js.map

package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;;AAEb,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAaA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAA8C;AAChF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAb,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
+{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAaA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAb,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuPopoverState } from './MenuPopover.types';\n\nexport const menuPopoverClassName = 'fui-MenuPopover';\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.padding('4px'),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassName, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -18,9 +18,9 @@ const useMenuSplitGroupStyles_1 = /*#__PURE__*/require("./useMenuSplitGroupStyle
 
 
 exports.MenuSplitGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuSplitGroup_1.useMenuSplitGroup(props, ref);
-  useMenuSplitGroupStyles_1.useMenuSplitGroupStyles(state);
-  return renderMenuSplitGroup_1.renderMenuSplitGroup(state);
+  const state = useMenuSplitGroup_1.useMenuSplitGroup_unstable(props, ref);
+  useMenuSplitGroupStyles_1.useMenuSplitGroupStyles_unstable(state);
+  return renderMenuSplitGroup_1.renderMenuSplitGroup_unstable(state);
 });
 exports.MenuSplitGroup.displayName = 'MenuSplitGroup';
 //# sourceMappingURL=MenuSplitGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,yBAAA,CAAA,uBAAA,CAAwB,KAAxB;AACA,SAAO,sBAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALuE,CAA3D;AAOb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourceRoot":""}
+{"version":3,"sources":["components/MenuSplitGroup/MenuSplitGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;AAEA,EAAA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;AACA,SAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAP;AACD,CALuE,CAA3D;AAOb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuSplitGroup/MenuSplitGroup.types.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type MenuSplitGroupSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
-export declare type MenuSplitGroupCommons = {};
+declare type MenuSplitGroupCommons = {};
 /**
  * MenuSplitGroup Props
  */
@@ -11,3 +11,4 @@ export declare type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots> &
  * State used in rendering MenuSplitGroup
  */
 export declare type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & MenuSplitGroupCommons;
+export {};

package/lib-commonjs/components/MenuSplitGroup/MenuSplitGroup.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/MenuSplitGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuSplitGroup/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["components/MenuSplitGroup/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './MenuSplitGroup';\nexport * from './MenuSplitGroup.types';\nexport * from './renderMenuSplitGroup';\nexport * from './useMenuSplitGroup';\nexport * from './useMenuSplitGroupStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuSplitGroup/renderMenuSplitGroup.d.ts

@@ -2,4 +2,4 @@ import type { MenuSplitGroupState } from './MenuSplitGroup.types';
 /**
  * Render the final JSX of MenuSplitGroup
  */
-export declare const renderMenuSplitGroup: (state: MenuSplitGroupState) => JSX.Element;
+export declare const renderMenuSplitGroup_unstable: (state: MenuSplitGroupState) => JSX.Element;

package/lib-commonjs/components/MenuSplitGroup/renderMenuSplitGroup.js

@@ -3,26 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderMenuSplitGroup = void 0;
+exports.renderMenuSplitGroup_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const useMenuSplitGroup_1 = /*#__PURE__*/require("./useMenuSplitGroup");
 /**
  * Render the final JSX of MenuSplitGroup
  */
 
 
-const renderMenuSplitGroup = state => {
+const renderMenuSplitGroup_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state, useMenuSplitGroup_1.menuSplitGroupShorthandProps);
+  } = react_utilities_1.getSlots(state);
   return React.createElement(slots.root, { ...slotProps.root
   });
 };
 
-exports.renderMenuSplitGroup = renderMenuSplitGroup;
+exports.renderMenuSplitGroup_unstable = renderMenuSplitGroup_unstable;
 //# sourceMappingURL=renderMenuSplitGroup.js.map

package/lib-commonjs/components/MenuSplitGroup/renderMenuSplitGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAA+B;AACjE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,EAAqC,mBAAA,CAAA,4BAArC,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
+{"version":3,"sources":["components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots } from './MenuSplitGroup.types';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState) => {\n  const { slots, slotProps } = getSlots<MenuSplitGroupSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.d.ts

@@ -1,16 +1,12 @@
 import * as React from 'react';
-import type { MenuSplitGroupProps, MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';
-/**
- * Array of all shorthand properties listed in MenuSplitGroupSlots
- */
-export declare const menuSplitGroupShorthandProps: (keyof MenuSplitGroupSlots)[];
+import type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';
 /**
  * Create the state required to render MenuSplitGroup.
  *
- * The returned state can be modified with hooks such as useMenuSplitGroupStyles,
- * before being passed to renderMenuSplitGroup.
+ * 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: (props: MenuSplitGroupProps, ref: React.Ref<HTMLElement>) => MenuSplitGroupState;
+export declare const useMenuSplitGroup_unstable: (props: MenuSplitGroupProps, ref: React.Ref<HTMLElement>) => MenuSplitGroupState;

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuSplitGroup = exports.menuSplitGroupShorthandProps = void 0;
+exports.useMenuSplitGroup_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
@@ -14,23 +14,18 @@ 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");
-/**
- * Array of all shorthand properties listed in MenuSplitGroupSlots
- */
-
-
-exports.menuSplitGroupShorthandProps = ['root'];
 /**
  * Create the state required to render MenuSplitGroup.
  *
- * The returned state can be modified with hooks such as useMenuSplitGroupStyles,
- * before being passed to renderMenuSplitGroup.
+ * 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
  */
 
-const useMenuSplitGroup = (props, ref) => {
+
+const useMenuSplitGroup_unstable = (props, ref) => {
   const innerRef = React.useRef();
   const {
     dir,
@@ -82,5 +77,5 @@ const useMenuSplitGroup = (props, ref) => {
   };
 };
 
-exports.useMenuSplitGroup = useMenuSplitGroup;
+exports.useMenuSplitGroup_unstable = useMenuSplitGroup_unstable;
 //# sourceMappingURL=useMenuSplitGroup.js.map

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,4BAAA,GAA8D,CAAC,MAAD,CAA9D;AAEb;;;;;;;;AAQG;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAA6B,GAA7B,KAAiF;AAChH,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;AACA,QAAM;AAAE,IAAA,GAAF;AAAO,IAAA;AAAP,MAA0B,uBAAA,CAAA,SAAA,EAAhC;AAEA,QAAM,YAAY,GAAG,iBAAA,CAAA,aAAA,CAAc,eAAA,CAAA,UAAd,EAA0B,GAA1B,CAArB;AACA,QAAM,YAAY,GAAG,iBAAA,CAAA,aAAA,CAAc,eAAA,CAAA,SAAd,EAAyB,GAAzB,CAArB;AAEA,QAAM;AAAE,IAAA,iBAAF;AAAqB,IAAA;AAArB,MAA2C,eAAA,CAAA,eAAA,EAAjD;AAEA,QAAM,SAAS,GAAG,KAAK,CAAC,WAAN,CACf,CAAD,IAAwC;;;AACtC,UAAM,aAAa,GAAG,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAAtC;;AACA,QAAI,CAAC,aAAL,EAAoB;AAClB;AACD;;AAED,QAAI,EAAC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,QAAF,CAAW,aAAX,CAAjB,CAAJ,EAAgD;AAC9C;AACD;;AAED,QAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;AAC1B,YAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;AAAE,QAAA,SAAS,EAAE,QAAQ,CAAC;AAAtB,OAA/B,CAA9B;AACA,MAAA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;AACD;;AAED,QAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;AAC1B,YAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;AAAE,QAAA,SAAS,EAAE,QAAQ,CAAC;AAAtB,OAA/B,CAA9B;AACA,MAAA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;AACD;AACF,GApBe,EAqBhB,CAAC,iBAAD,EAAoB,iBAApB,EAAuC,cAAvC,EAAuD,YAAvD,EAAqE,YAArE,CArBgB,CAAlB;AAwBA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,IAAI,EAAE,OAD2B;AAEjC,MAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,QAAnB,CAF4B;AAGjC,MAAA,SAHiC;AAIjC,SAAG;AAJ8B,KAA7B;AAJD,GAAP;AAWD,CA5CM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
+{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;AACA,QAAM;AAAE,IAAA,GAAF;AAAO,IAAA;AAAP,MAA0B,uBAAA,CAAA,SAAA,EAAhC;AAEA,QAAM,YAAY,GAAG,iBAAA,CAAA,aAAA,CAAc,eAAA,CAAA,UAAd,EAA0B,GAA1B,CAArB;AACA,QAAM,YAAY,GAAG,iBAAA,CAAA,aAAA,CAAc,eAAA,CAAA,SAAd,EAAyB,GAAzB,CAArB;AAEA,QAAM;AAAE,IAAA,iBAAF;AAAqB,IAAA;AAArB,MAA2C,eAAA,CAAA,eAAA,EAAjD;AAEA,QAAM,SAAS,GAAG,KAAK,CAAC,WAAN,CACf,CAAD,IAAwC;;;AACtC,UAAM,aAAa,GAAG,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAAtC;;AACA,QAAI,CAAC,aAAL,EAAoB;AAClB;AACD;;AAED,QAAI,EAAC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,QAAF,CAAW,aAAX,CAAjB,CAAJ,EAAgD;AAC9C;AACD;;AAED,QAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;AAC1B,YAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;AAAE,QAAA,SAAS,EAAE,QAAQ,CAAC;AAAtB,OAA/B,CAA9B;AACA,MAAA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;AACD;;AAED,QAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;AAC1B,YAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;AAAE,QAAA,SAAS,EAAE,QAAQ,CAAC;AAAtB,OAA/B,CAA9B;AACA,MAAA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;AACD;AACF,GApBe,EAqBhB,CAAC,iBAAD,EAAoB,iBAApB,EAAuC,cAAvC,EAAuD,YAAvD,EAAqE,YAArE,CArBgB,CAAlB;AAwBA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,IAAI,EAAE,OAD2B;AAEjC,MAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,QAAnB,CAF4B;AAGjC,MAAA,SAHiC;AAIjC,SAAG;AAJ8B,KAA7B;AAJD,GAAP;AAWD,CA/CM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n  props: MenuSplitGroupProps,\n  ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n  const innerRef = React.useRef<HTMLElement>();\n  const { dir, targetDocument } = useFluent();\n\n  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const activeElement = targetDocument?.activeElement;\n      if (!activeElement) {\n        return;\n      }\n\n      if (!innerRef.current?.contains(activeElement)) {\n        return;\n      }\n\n      if (e.key === nextArrowKey) {\n        const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        next?.focus();\n      }\n\n      if (e.key === prevArrowKey) {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    },\n    [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      role: 'group',\n      ref: useMergedRefs(ref, innerRef),\n      onKeyDown,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.d.ts

@@ -3,4 +3,4 @@ export declare const menuSplitGroupClassName = "fui-MenuSplitGroup";
 /**
  * Apply styling to the MenuSplitGroup slots based on the state
  */
-export declare const useMenuSplitGroupStyles: (state: MenuSplitGroupState) => MenuSplitGroupState;
+export declare const useMenuSplitGroupStyles_unstable: (state: MenuSplitGroupState) => MenuSplitGroupState;

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuSplitGroupStyles = exports.menuSplitGroupClassName = void 0;
+exports.useMenuSplitGroupStyles_unstable = exports.menuSplitGroupClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 const useMenuItemStyles_1 = /*#__PURE__*/require("../MenuItem/useMenuItemStyles");
 
@@ -14,7 +16,7 @@ exports.menuSplitGroupClassName = 'fui-MenuSplitGroup';
  * Styles for the root slot
  */
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "u7v6m2": "f168awwq",
@@ -35,11 +37,11 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
  */
 
 
-const useMenuSplitGroupStyles = state => {
+const useMenuSplitGroupStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.menuSplitGroupClassName, styles.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.menuSplitGroupClassName, styles.root, state.root.className);
   return state;
 };
 
-exports.useMenuSplitGroupStyles = useMenuSplitGroupStyles;
+exports.useMenuSplitGroupStyles_unstable = useMenuSplitGroupStyles_unstable;
 //# sourceMappingURL=useMenuSplitGroupStyles.js.map

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAGa,OAAA,CAAA,uBAAA,GAA0B,oBAA1B;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAoD;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAb,EAAsC,MAAM,CAAC,IAA7C,EAAmD,KAAK,CAAC,IAAN,CAAW,SAA9D,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}
+{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAGa,OAAA,CAAA,uBAAA,GAA0B,oBAA1B;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;AAClG,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAb,EAAsC,MAAM,CAAC,IAA7C,EAAmD,KAAK,CAAC,IAAN,CAAW,SAA9D,CAAvB;AACA,SAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassName } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const menuSplitGroupClassName = 'fui-MenuSplitGroup';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    [`& > .${menuItemClassName}:nth-child(1)`]: {\n      width: '100%',\n    },\n    [`& > .${menuItemClassName}:nth-child(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      marginLeft: 'auto',\n      ':before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '24px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassName, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuTrigger/MenuTrigger.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import type { MenuTriggerProps } from './MenuTrigger.types';
+import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 /**
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
  */
-export declare const MenuTrigger: React.FC<MenuTriggerProps>;
+export declare const MenuTrigger: React.FC<MenuTriggerProps> & FluentTriggerComponent;

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

@@ -15,10 +15,11 @@ const renderMenuTrigger_1 = /*#__PURE__*/require("./renderMenuTrigger");
 
 
 const MenuTrigger = props => {
-  const state = useMenuTrigger_1.useMenuTrigger(props);
-  return renderMenuTrigger_1.renderMenuTrigger(state);
+  const state = useMenuTrigger_1.useMenuTrigger_unstable(props);
+  return renderMenuTrigger_1.renderMenuTrigger_unstable(state);
 };
 
 exports.MenuTrigger = MenuTrigger;
 exports.MenuTrigger.displayName = 'MenuTrigger';
+exports.MenuTrigger.isFluentTriggerComponent = true;
 //# sourceMappingURL=MenuTrigger.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;AAGG;;;AACI,MAAM,WAAW,GAA+B,KAAK,IAAG;AAC7D,QAAM,KAAK,GAAG,gBAAA,CAAA,cAAA,CAAe,KAAf,CAAd;AAEA,SAAO,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX;AAMb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourceRoot":""}
+{"version":3,"sources":["components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;;AAGG;;;AACI,MAAM,WAAW,GAAwD,KAAK,IAAG;AACtF,QAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAd;AAEA,SAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX;AAMb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B;AACA,OAAA,CAAA,WAAA,CAAY,wBAAZ,GAAuC,IAAvC","sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger_unstable } from './useMenuTrigger';\nimport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> & FluentTriggerComponent = props => {\n  const state = useMenuTrigger_unstable(props);\n\n  return renderMenuTrigger_unstable(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\nMenuTrigger.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuTrigger/MenuTrigger.types.d.ts

@@ -5,13 +5,15 @@ export declare type MenuTriggerProps = {
      */
     children: (React.ReactElement & {
         ref?: React.Ref<unknown>;
-    }) | ((props: MenuTriggerChildProps) => React.ReactNode);
+    }) | ((props: MenuTriggerChildProps) => React.ReactElement | null);
 };
 /**
  * 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.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'id'>> & {
+export declare type MenuTriggerChildProps = Required<Pick<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'id'>> & {
     ref?: React.Ref<never>;
     'aria-expanded': boolean | undefined;
 };
-export declare type MenuTriggerState = MenuTriggerProps;
+export declare type MenuTriggerState = {
+    children: React.ReactElement | null;
+};

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuTrigger/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["components/MenuTrigger/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './MenuTrigger';\nexport * from './MenuTrigger.types';\nexport * from './renderMenuTrigger';\nexport * from './useMenuTrigger';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/MenuTrigger/renderMenuTrigger.d.ts

@@ -4,4 +4,4 @@ import type { MenuTriggerState } from './MenuTrigger.types';
  *
  * Only renders children
  */
-export declare const renderMenuTrigger: (state: MenuTriggerState) => JSX.Element;
+export declare const renderMenuTrigger_unstable: (state: MenuTriggerState) => JSX.Element;

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":["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","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger_unstable = (state: MenuTriggerState) => {\n  return <MenuTriggerContextProvider value={true}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,8 +1,8 @@
-import type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
+import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
 /**
  * Create the state required to render MenuTrigger.
  * Clones the only child component and adds necessary event handling behaviours to open a popup menu
  *
  * @param props - props from this instance of MenuTrigger
  */
-export declare const useMenuTrigger: (props: MenuTriggerProps) => MenuTriggerState;
+export declare const useMenuTrigger_unstable: (props: MenuTriggerProps) => 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,167 @@ 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 => {
+  var _a, _b, _c, _d, _e, _f;
+
+  const {
+    children
+  } = 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.getTriggerChild(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;
 
-  return useTriggerElement_1.useTriggerElement(state);
+    if (!openOnContext && (isSubmenu && key === OpenArrowKey || !isSubmenu && key === keyboard_keys_1.ArrowDown)) {
+      setOpen(e, {
+        open: true,
+        keyboard: true
+      });
+    }
+
+    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
+      });
+    }
+  };
+
+  return {
+    children: react_utilities_1.applyTriggerPropsToChildren(children, {
+      'aria-haspopup': 'menu',
+      'aria-expanded': !open && !isSubmenu ? undefined : open,
+      id: triggerId,
+      ...(child === null || child === void 0 ? void 0 : child.props),
+      ref: react_utilities_1.useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref),
+      onClick: react_utilities_1.useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick, onClick),
+      onMouseEnter: react_utilities_1.useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onMouseEnter, onMouseEnter),
+      onMouseLeave: react_utilities_1.useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onMouseLeave, onMouseLeave),
+      onKeyDown: react_utilities_1.useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onKeyDown, onKeyDown),
+      onContextMenu: react_utilities_1.useMergedEventCallbacks((_e = child === null || child === void 0 ? void 0 : child.props) === null || _e === void 0 ? void 0 : _e.onContextMenu, onContextMenu),
+      onMouseMove: react_utilities_1.useMergedEventCallbacks((_f = child === null || child === void 0 ? void 0 : child.props) === null || _f === void 0 ? void 0 : _f.onMouseMove, onMouseMove)
+    })
+  };
 };
 
-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