@fluentui/react-menu 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.11

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

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuSplitGroup_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+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");
+/**
+ * Create the state required to render MenuSplitGroup.
+ *
+ * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,
+ * before being passed to renderMenuSplitGroup_unstable.
+ *
+ * @param props - props from this instance of MenuSplitGroup
+ * @param ref - reference to root HTMLElement of MenuSplitGroup
+ */
+
+
+const useMenuSplitGroup_unstable = (props, ref) => {
+  const innerRef = React.useRef();
+  const {
+    dir,
+    targetDocument
+  } = react_shared_contexts_1.useFluent();
+  const nextArrowKey = react_utilities_1.getRTLSafeKey(keyboard_keys_1.ArrowRight, dir);
+  const prevArrowKey = react_utilities_1.getRTLSafeKey(keyboard_keys_1.ArrowLeft, dir);
+  const {
+    findNextFocusable,
+    findPrevFocusable
+  } = react_tabster_1.useFocusFinders();
+  const onKeyDown = React.useCallback(e => {
+    var _a;
+
+    const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+
+    if (!activeElement) {
+      return;
+    }
+
+    if (!((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+      return;
+    }
+
+    if (e.key === nextArrowKey) {
+      const next = findNextFocusable(activeElement, {
+        container: innerRef.current
+      });
+      next === null || next === void 0 ? void 0 : next.focus();
+    }
+
+    if (e.key === prevArrowKey) {
+      const prev = findPrevFocusable(activeElement, {
+        container: innerRef.current
+      });
+      prev === null || prev === void 0 ? void 0 : prev.focus();
+    }
+  }, [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey]);
+  return {
+    components: {
+      root: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps('div', {
+      role: 'group',
+      ref: react_utilities_1.useMergedRefs(ref, innerRef),
+      onKeyDown,
+      ...props
+    })
+  };
+};
+
+exports.useMenuSplitGroup_unstable = useMenuSplitGroup_unstable;
+//# sourceMappingURL=useMenuSplitGroup.js.map

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

@@ -0,0 +1 @@
+{"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.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuSplitGroupStyles_unstable = exports.menuSplitGroupClassNames = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const useMenuItemStyles_1 = /*#__PURE__*/require("../MenuItem/useMenuItemStyles");
+
+exports.menuSplitGroupClassNames = {
+  root: 'fui-MenuSplitGroup'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/react_1.__styles({
+  "root": {
+    "mc9l5x": "f22iagw",
+    "u7v6m2": "f168awwq",
+    "Bo1wru1": ["f1om2jlk", "fcyhg04"],
+    "Bhkyaub": ["fgqgg70", "fqo1hry"],
+    "J9ixe0": ["fh1zedf", "f1auaj6e"],
+    "rj29m3": ["fokbbcd", "f1xlvh9o"],
+    "lispf9": "f1et5qag",
+    "B9hwub1": "f13ngu1f",
+    "dvf9w6": "f1db9j62",
+    "Hjn5ok": "f92z21p"
+  }
+}, {
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f168awwq>.fui-MenuItem:nth-child(1){width:100%;}", ".f1om2jlk>.fui-MenuItem:nth-child(2){border-top-left-radius:0;}", ".fcyhg04>.fui-MenuItem:nth-child(2){border-top-right-radius:0;}", ".fgqgg70>.fui-MenuItem:nth-child(2){border-bottom-left-radius:0;}", ".fqo1hry>.fui-MenuItem:nth-child(2){border-bottom-right-radius:0;}", ".fh1zedf>.fui-MenuItem:nth-child(2){padding-left:0;}", ".f1auaj6e>.fui-MenuItem:nth-child(2){padding-right:0;}", ".fokbbcd>.fui-MenuItem:nth-child(2){margin-left:auto;}", ".f1xlvh9o>.fui-MenuItem:nth-child(2){margin-right:auto;}", ".f1et5qag>.fui-MenuItem:nth-child(2):before{content:\"\";}", ".f13ngu1f>.fui-MenuItem:nth-child(2):before{width:var(--strokeWidthThin);}", ".f1db9j62>.fui-MenuItem:nth-child(2):before{height:24px;}", ".f92z21p>.fui-MenuItem:nth-child(2):before{background-color:var(--colorNeutralStroke1);}"]
+});
+/**
+ * Apply styling to the MenuSplitGroup slots based on the state
+ */
+
+
+const useMenuSplitGroupStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.menuSplitGroupClassNames.root, styles.root, state.root.className);
+  return state;
+};
+
+exports.useMenuSplitGroupStyles_unstable = useMenuSplitGroupStyles_unstable;
+//# sourceMappingURL=useMenuSplitGroupStyles.js.map

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

@@ -0,0 +1 @@
+{"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;;AAIa,OAAA,CAAA,wBAAA,GAAgE;AAC3E,EAAA,IAAI,EAAE;AADqE,CAAhE;AAGb;;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,wBAAA,CAAyB,IAAtC,EAA4C,MAAM,CAAC,IAAnD,EAAyD,KAAK,CAAC,IAAN,CAAW,SAApE,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 { menuItemClassNames } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n  root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    [`& > .${menuItemClassNames.root}:nth-child(1)`]: {\n      width: '100%',\n    },\n    [`& > .${menuItemClassNames.root}: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(menuSplitGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,20 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuTrigger = void 0;
 
-var useMenuTrigger_1 = /*#__PURE__*/require("./useMenuTrigger");
+const useMenuTrigger_1 = /*#__PURE__*/require("./useMenuTrigger");
 
-var renderMenuTrigger_1 = /*#__PURE__*/require("./renderMenuTrigger");
+const renderMenuTrigger_1 = /*#__PURE__*/require("./renderMenuTrigger");
 /**
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
  */
 
 
-var MenuTrigger = function (props) {
-  var state = useMenuTrigger_1.useMenuTrigger(props);
-  return renderMenuTrigger_1.renderMenuTrigger(state);
+const MenuTrigger = props => {
+  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,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;AAGG;;;AACI,IAAM,WAAW,GAA+B,UAAA,KAAA,EAAK;AAC1D,MAAM,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.js.map

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

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./MenuTrigger"), exports);
 

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.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderMenuTrigger = void 0;
+exports.renderMenuTrigger_unstable = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var menuTriggerContext_1 = /*#__PURE__*/require("../../contexts/menuTriggerContext");
+const menuTriggerContext_1 = /*#__PURE__*/require("../../contexts/menuTriggerContext");
 /**
  * Render the final JSX of MenuTrigger
  *
@@ -15,11 +15,11 @@ var menuTriggerContext_1 = /*#__PURE__*/require("../../contexts/menuTriggerConte
  */
 
 
-var renderMenuTrigger = function (state) {
+const renderMenuTrigger_unstable = state => {
   return React.createElement(menuTriggerContext_1.MenuTriggerContextProvider, {
-    value: true
+    value: state.isSubmenu
   }, 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,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;;;AAIG;;;AACI,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACvD,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,KAAK,CAAC;AAAd,GAA3B,EAAqD,KAAK,CAAC,QAA3D,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={state.isSubmenu}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,11 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuTrigger = void 0;
+exports.useMenuTrigger_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var useTriggerElement_1 = /*#__PURE__*/require("./useTriggerElement");
+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
@@ -16,12 +28,168 @@ var useTriggerElement_1 = /*#__PURE__*/require("./useTriggerElement");
  */
 
 
-var useMenuTrigger = function (props) {
-  var state = tslib_1.__assign({}, 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;
 
+    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
+      });
+    }
+  };
+
+  return {
+    isSubmenu,
+    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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;;;AAKG;;;AACI,IAAM,cAAc,GAAG,UAAC,KAAD,EAAwB;AACpD,MAAM,KAAK,GAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAX,CADoD,CAGpD;;;AACA,SAAO,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
+{"version":3,"sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  useMergedEventCallbacks,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n  const { children } = props;\n\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n  const isSubmenu = useIsSubmenu();\n\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, menuPopoverRef]);\n\n  const openedWithKeyboardRef = React.useRef(false);\n  const hasMouseMoved = React.useRef(false);\n\n  const { dir } = useFluent();\n  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n  const child = React.isValidElement(children) ? getTriggerChild(children) : undefined;\n\n  const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, { open: true, keyboard: false });\n    }\n  };\n\n  const onClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n\n    if (!openOnContext) {\n      setOpen(e, { open: !open, keyboard: openedWithKeyboardRef.current });\n      openedWithKeyboardRef.current = false;\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      e.preventDefault();\n      openedWithKeyboardRef.current = true;\n      (e.target as HTMLElement)?.click();\n    }\n\n    const key = e.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(e, { open: true, keyboard: true });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(e, { open: false, keyboard: true });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n  };\n\n  const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n    }\n  };\n\n  // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n  // First time open the mouse using mousemove and then continue with mouseenter\n  // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n  const onMouseMove = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n      hasMouseMoved.current = true;\n    }\n  };\n\n  const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n    if (openOnHover) {\n      setOpen(e, { open: false, keyboard: false });\n    }\n  };\n\n  return {\n    isSubmenu,\n    children: applyTriggerPropsToChildren<MenuTriggerChildProps>(children, {\n      'aria-haspopup': 'menu',\n      'aria-expanded': !open && !isSubmenu ? undefined : open,\n      id: triggerId,\n      ...child?.props,\n      ref: useMergedRefs(triggerRef, child?.ref),\n      onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n      onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n      onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n      onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n      onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n      onMouseMove: useMergedEventCallbacks(child?.props?.onMouseMove, onMouseMove),\n    }),\n  };\n};\n\nconst isTargetDisabled = (e: React.SyntheticEvent | Event) => {\n  const isDisabled = (el: HTMLElement) =>\n    el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n  if (e.target instanceof HTMLElement && isDisabled(e.target)) {\n    return true;\n  }\n\n  return e.currentTarget instanceof HTMLElement && isDisabled(e.currentTarget);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./MenuItem/index"), exports);
 

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

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

package/lib-commonjs/contexts/menuContext.js

@@ -3,19 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuContext = exports.MenuProvider = exports.MenuContext = void 0;
+exports.useMenuContext_unstable = exports.MenuProvider = exports.MenuContext = void 0;
 
-var react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 
 exports.MenuContext = /*#__PURE__*/react_context_selector_1.createContext({
   open: false,
-  setOpen: function () {
-    return false;
-  },
+  setOpen: () => false,
   checkedValues: {},
-  onCheckedValueChange: function () {
-    return null;
-  },
+  onCheckedValueChange: () => null,
   defaultCheckedValues: {},
   isSubmenu: false,
   triggerRef: {
@@ -32,9 +28,7 @@ exports.MenuContext = /*#__PURE__*/react_context_selector_1.createContext({
 });
 exports.MenuProvider = exports.MenuContext.Provider;
 
-var useMenuContext = function (selector) {
-  return 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,IAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAKa,OAAA,CAAA,WAAA,gBAAyC,wBAAA,CAAA,aAAA,CAAgC;AACpF,EAAA,IAAI,EAAE,KAD8E;AAEpF,EAAA,OAAO,EAAE,YAAA;AAAM,WAAA,KAAA;AAAK,GAFgE;AAGpF,EAAA,aAAa,EAAE,EAHqE;AAIpF,EAAA,oBAAoB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAJoD;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,IAAM,cAAc,GAAG,UAAI,QAAJ,EAAkD;AAC9E,SAAA,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,WAAnB,EAAgC,QAAhC,CAAA;AAAyC,CADpC;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
+{"version":3,"sources":["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","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuListProps } from '../components/index';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue>({\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  defaultCheckedValues: {},\n  isSubmenu: false,\n  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = MenuListProps &\n  Pick<\n    MenuState,\n    | 'openOnHover'\n    | 'openOnContext'\n    | 'triggerRef'\n    | 'menuPopoverRef'\n    | 'setOpen'\n    | 'isSubmenu'\n    | 'triggerId'\n    | 'hasIcons'\n    | 'hasCheckmarks'\n    | 'persistOnItemClick'\n    | 'inline'\n  > & {\n    open: boolean;\n    triggerId: string;\n  };\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, selector);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/contexts/menuGroupContext.js

@@ -3,18 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuGroupContext = exports.MenuGroupContextProvider = void 0;
+exports.useMenuGroupContext_unstable = exports.MenuGroupContextProvider = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var MenuGroupContext = /*#__PURE__*/React.createContext({
+const MenuGroupContext = /*#__PURE__*/React.createContext({
   headerId: ''
 });
 exports.MenuGroupContextProvider = MenuGroupContext.Provider;
 
-var useMenuGroupContext = function () {
-  return 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,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,IAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaa,OAAA,CAAA,wBAAA,GAA2B,gBAAgB,CAAC,QAA5C;;AACN,IAAM,mBAAmB,GAAG,YAAA;AAAM,SAAA,KAAK,CAAC,UAAN,CAAA,gBAAA,CAAA;AAAkC,CAApE;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourceRoot":""}
+{"version":3,"sources":["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","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue>({ headerId: '' });\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport type MenuGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext_unstable = () => React.useContext(MenuGroupContext);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/contexts/menuListContext.js

@@ -3,32 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuListContext = exports.MenuListProvider = exports.MenuListContext = void 0;
+exports.useMenuListContext_unstable = exports.MenuListProvider = exports.MenuListContext = void 0;
 
-var react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 
 exports.MenuListContext = /*#__PURE__*/react_context_selector_1.createContext({
   checkedValues: {},
-  onCheckedValueChange: function () {
-    return null;
-  },
-  setFocusByFirstCharacter: function () {
-    return null;
-  },
-  toggleCheckbox: function () {
-    return null;
-  },
-  selectRadio: function () {
-    return null;
-  },
+  onCheckedValueChange: () => null,
+  setFocusByFirstCharacter: () => null,
+  toggleCheckbox: () => null,
+  selectRadio: () => null,
   hasIcons: false,
   hasCheckmarks: false
 });
 exports.MenuListProvider = exports.MenuListContext.Provider;
 
-var useMenuListContext = function (selector) {
-  return 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,IAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,gBAAiD,wBAAA,CAAA,aAAA,CAAoC;AAChG,EAAA,aAAa,EAAE,EADiF;AAEhG,EAAA,oBAAoB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAFgE;AAGhG,EAAA,wBAAwB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAH4D;AAIhG,EAAA,cAAc,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAJsE;AAKhG,EAAA,WAAW,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GALyE;AAMhG,EAAA,QAAQ,EAAE,KANsF;AAOhG,EAAA,aAAa,EAAE;AAPiF,CAApC,CAAjD;AAsBA,OAAA,CAAA,gBAAA,GAAmB,OAAA,CAAA,eAAA,CAAgB,QAAnC;;AAEN,IAAM,kBAAkB,GAAG,UAAK,QAAL,EAAuD;AACvF,SAAA,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,QAApC,CAAA;AAA6C,CADxC;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourceRoot":""}
+{"version":3,"sources":["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","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue>({\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  setFocusByFirstCharacter: () => null,\n  toggleCheckbox: () => null,\n  selectRadio: () => null,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<\n  MenuListProps,\n  'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'\n> & {\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n  toggleCheckbox?: SelectableHandler;\n  selectRadio?: SelectableHandler;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n  useContextSelector(MenuListContext, selector);\n"],"sourceRoot":"../src/"}