@fluentui/react-menu 9.0.0-alpha.8 → 9.0.0-alpha.80

package/lib/selectable/useCheckmarkStyles.d.ts

@@ -1,11 +1,8 @@
-import * as React from 'react';
-import { ObjectShorthandProps } from '@fluentui/react-utilities';
-import { MenuItemSelectableState } from './types';
+import type { MenuItemSelectableState } from './types';
+import type { MenuItemSlots } from '../components/MenuItem/MenuItem.types';
 /**
  * Applies styles to a checkmark slot for selectable menu items
  *
  * @param state - should contain a `checkmark` slot
  */
-export declare const useCheckmarkStyles: (state: MenuItemSelectableState & {
-    checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
-}) => void;
+export declare const useCheckmarkStyles: (state: MenuItemSelectableState & Pick<MenuItemSlots, 'checkmark'>) => void;

package/lib/selectable/useCheckmarkStyles.js

@@ -1,24 +1,29 @@
-import { ax, makeStyles } from '@fluentui/react-make-styles';
-var useStyles = makeStyles({
-    root: {
-        width: '16px',
-        height: '16px',
-        marginRight: '8px',
-        visibility: 'hidden',
-    },
-    rootChecked: {
-        visibility: 'visible',
-    },
+import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+
+var useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "a9b677": "fjw5fx7",
+    "Bqenvij": "fd461yt",
+    "Bcdw1i0": "fd7fpy0"
+  },
+  "rootChecked": {
+    "Bcdw1i0": "f1022m68"
+  }
+}, {
+  "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fd7fpy0{visibility:hidden;}", ".f1022m68{visibility:visible;}"]
 });
 /**
  * Applies styles to a checkmark slot for selectable menu items
  *
  * @param state - should contain a `checkmark` slot
  */
+
+
 export var useCheckmarkStyles = function (state) {
-    var styles = useStyles();
-    if (state.checkmark) {
-        state.checkmark.className = ax(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
-    }
+  var styles = useStyles();
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(styles.root, state.checked && styles.rootChecked, state.checkmark.className);
+  }
 };
 //# sourceMappingURL=useCheckmarkStyles.js.map

package/lib/selectable/useCheckmarkStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckmarkStyles.js","sourceRoot":"../src/","sources":["selectable/useCheckmarkStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAI7D,IAAM,SAAS,GAAG,UAAU,CAAC;IAC3B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,WAAW,EAAE,KAAK;QAClB,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,UAAU,EAAE,SAAS;KACtB;CACF,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAChC,KAAuG;IAEvG,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,IAAI,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7G;AACH,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { ax, makeStyles } from '@fluentui/react-make-styles';\nimport { ObjectShorthandProps } from '@fluentui/react-utilities';\nimport { MenuItemSelectableState } from './types';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '16px',\n    height: '16px',\n    marginRight: '8px',\n    visibility: 'hidden',\n  },\n  rootChecked: {\n    visibility: 'visible',\n  },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles = (\n  state: MenuItemSelectableState & { checkmark: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> },\n) => {\n  const styles = useStyles();\n  if (state.checkmark) {\n    state.checkmark.className = ax(styles.root, state.checked && styles.rootChecked, state.checkmark.className);\n  }\n};\n"]}
+{"version":3,"sources":["selectable/useCheckmarkStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;;AAIA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;;;AAIG;;;AACH,OAAO,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAkE;AAClG,MAAM,MAAM,GAAG,SAAS,EAAxB;;AACA,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,MAAM,CAAC,IAD+B,EAEtC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAFc,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,CAAxC;AAKD;AACF,CATM","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemSlots } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '16px',\n    height: '16px',\n    visibility: 'hidden',\n  },\n  rootChecked: {\n    visibility: 'visible',\n  },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles = (state: MenuItemSelectableState & Pick<MenuItemSlots, 'checkmark'>) => {\n  const styles = useStyles();\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(\n      styles.root,\n      state.checked && styles.rootChecked,\n      state.checkmark.className,\n    );\n  }\n};\n"],"sourceRoot":"../src/"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.1"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib/utils/DefaultIcons.d.ts

@@ -3,4 +3,5 @@ export declare const renderIcon: (SVGElement: (props: {
     svgClasses: string;
 }) => JSX.Element) => React.FC<React.HTMLAttributes<HTMLSpanElement>>;
 export declare const ChevronRightIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
+export declare const ChevronLeftIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
 export declare const AcceptIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;

package/lib/utils/DefaultIcons.js

@@ -1,46 +1,88 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { ax, makeStyles } from '@fluentui/react-make-styles';
+import { mergeClasses, __styles } from '@fluentui/react-make-styles';
 import { getNativeProps, htmlElementProperties } from '@fluentui/react-utilities';
-var useStyles = makeStyles({
-    root: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        speak: 'none',
-        width: '1em',
-        height: '1em',
-    },
-    svg: {
-        height: '100%',
-        fill: 'currentColor',
-        verticalAlign: 'top',
-    },
-});
-//
+
+var useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "f14t3ns0",
+    "ha4doy": "fmrv4ls",
+    "fb3t49": "fdgdznj",
+    "a9b677": "fhson10",
+    "Bqenvij": "f1un31zh"
+  },
+  "svg": {
+    "Bqenvij": "f1l02sjl",
+    "Bkfmm31": "f1w9h62z",
+    "ha4doy": "f12kltsn"
+  }
+}, {
+  "d": [".f14t3ns0{display:inline-block;}", ".fmrv4ls{vertical-align:middle;}", ".fdgdznj{speak:none;}", ".fhson10{width:1em;}", ".f1un31zh{height:1em;}", ".f1l02sjl{height:100%;}", ".f1w9h62z{fill:currentColor;}", ".f12kltsn{vertical-align:top;}"]
+}); //
 // !!!   A temporary workaround to avoid dependencies on any icon packages.
 // !!!   A usage of converged icon package should be considered.
 //
+
+
 var useIconProps = function (props) {
-    var _a;
-    var containerProps = props['aria-label']
-        ? {}
-        : (_a = {
-                role: 'presentation'
-            },
-            _a['aria-hidden'] = true,
-            _a);
-    var nativeProps = getNativeProps(props, htmlElementProperties);
-    var styles = useStyles();
-    var rootClasses = styles.root;
-    var svgClasses = styles.svg;
-    return { containerProps: containerProps, nativeProps: nativeProps, rootClasses: rootClasses, svgClasses: svgClasses };
+  var _a;
+
+  var containerProps = props['aria-label'] ? {} : (_a = {
+    role: 'presentation'
+  }, _a['aria-hidden'] = true, _a);
+  var nativeProps = getNativeProps(props, htmlElementProperties);
+  var styles = useStyles();
+  var rootClasses = styles.root;
+  var svgClasses = styles.svg;
+  return {
+    containerProps: containerProps,
+    nativeProps: nativeProps,
+    rootClasses: rootClasses,
+    svgClasses: svgClasses
+  };
+};
+
+export var renderIcon = function (SVGElement) {
+  return function (props) {
+    var _a = useIconProps(props),
+        containerProps = _a.containerProps,
+        nativeProps = _a.nativeProps,
+        rootClasses = _a.rootClasses,
+        svgClasses = _a.svgClasses;
+
+    return /*#__PURE__*/React.createElement('span', __assign(__assign(__assign({}, containerProps), nativeProps), {
+      className: mergeClasses(rootClasses, props.className)
+    }), /*#__PURE__*/React.createElement(SVGElement, {
+      svgClasses: svgClasses
+    }));
+  };
 };
-export var renderIcon = function (SVGElement) { return function (props) {
-    var _a = useIconProps(props), containerProps = _a.containerProps, nativeProps = _a.nativeProps, rootClasses = _a.rootClasses, svgClasses = _a.svgClasses;
-    return React.createElement('span', __assign(__assign(__assign({}, containerProps), nativeProps), { className: ax(rootClasses, props.className) }), React.createElement(SVGElement, { svgClasses: svgClasses }));
-}; };
-export var ChevronRightIcon = renderIcon(function (props) { return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2048 2048", className: props.svgClasses },
-    React.createElement("path", { d: "M515 1955l930-931L515 93l90-90 1022 1021L605 2045l-90-90z" }))); });
-export var AcceptIcon = renderIcon(function (props) { return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2048 2048", className: props.svgClasses },
-    React.createElement("path", { d: "M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z" }))); });
+export var ChevronRightIcon = /*#__PURE__*/renderIcon(function (props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 2048 2048",
+    className: props.svgClasses
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M515 1955l930-931L515 93l90-90 1022 1021L605 2045l-90-90z"
+  }));
+});
+export var ChevronLeftIcon = /*#__PURE__*/renderIcon(function (props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 2048 2048",
+    className: props.svgClasses,
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1443 2045L421 1024 1443 3l90 90-930 931 930 931-90 90z"
+  }));
+});
+export var AcceptIcon = /*#__PURE__*/renderIcon(function (props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 2048 2048",
+    className: props.svgClasses
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z"
+  }));
+});
 //# sourceMappingURL=DefaultIcons.js.map

package/lib/utils/DefaultIcons.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultIcons.js","sourceRoot":"../src/","sources":["utils/DefaultIcons.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElF,IAAM,SAAS,GAAG,UAAU,CAAC;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;QACvB,aAAa,EAAE,QAAQ;QACvB,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;KACd;IACD,GAAG,EAAE;QACH,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,cAAc;QACpB,aAAa,EAAE,KAAK;KACrB;CACF,CAAC,CAAC;AAEH,EAAE;AACF,2EAA2E;AAC3E,gEAAgE;AAChE,EAAE;AAEF,IAAM,YAAY,GAAG,UAAC,KAA4C;;IAChE,IAAM,cAAc,GAAG,KAAK,CAAC,YAAY,CAAC;QACxC,CAAC,CAAC,EAAE;QACJ,CAAC;gBACG,IAAI,EAAE,cAAc;;YACpB,GAAC,aAAa,IAAG,IAAI;eACtB,CAAC;IACN,IAAM,WAAW,GAAG,cAAc,CAAoC,KAAK,EAAE,qBAAqB,CAAC,CAAC;IACpG,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;IAChC,IAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC;IAE9B,OAAO,EAAE,cAAc,gBAAA,EAAE,WAAW,aAAA,EAAE,WAAW,aAAA,EAAE,UAAU,YAAA,EAAE,CAAC;AAClE,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAG,UACxB,UAA0D,IACN,OAAA,UAAA,KAAK;IACnD,IAAA,wBAA8E,EAA5E,kCAAc,EAAE,4BAAW,EAAE,4BAAW,EAAE,0BAAkC,CAAC;IAErF,OAAO,KAAK,CAAC,aAAa,CACxB,MAAM,iCAED,cAAc,GACd,WAAW,KACd,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,KAE7C,oBAAC,UAAU,IAAC,UAAU,EAAE,UAAU,GAAI,CACvC,CAAC;AACJ,CAAC,EAZqD,CAYrD,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAU,CAAC,UAAA,KAAK,IAAI,OAAA,CAClD,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,eAAe,EAAC,SAAS,EAAE,KAAK,CAAC,UAAU;IACzF,8BAAM,CAAC,EAAC,2DAA2D,GAAG,CAClE,CACP,EAJmD,CAInD,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,UAAU,GAAG,UAAU,CAAC,UAAA,KAAK,IAAI,OAAA,CAC5C,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,eAAe,EAAC,SAAS,EAAE,KAAK,CAAC,UAAU;IACzF,8BAAM,CAAC,EAAC,0DAA0D,GAAG,CACjE,CACP,EAJ6C,CAI7C,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { ax, makeStyles } from '@fluentui/react-make-styles';\nimport { getNativeProps, htmlElementProperties } from '@fluentui/react-utilities';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    speak: 'none',\n    width: '1em',\n    height: '1em',\n  },\n  svg: {\n    height: '100%',\n    fill: 'currentColor',\n    verticalAlign: 'top',\n  },\n});\n\n//\n// !!!   A temporary workaround to avoid dependencies on any icon packages.\n// !!!   A usage of converged icon package should be considered.\n//\n\nconst useIconProps = (props: React.HTMLAttributes<HTMLSpanElement>) => {\n  const containerProps = props['aria-label']\n    ? {}\n    : {\n        role: 'presentation',\n        ['aria-hidden']: true,\n      };\n  const nativeProps = getNativeProps<React.HTMLAttributes<HTMLElement>>(props, htmlElementProperties);\n  const styles = useStyles();\n\n  const rootClasses = styles.root;\n  const svgClasses = styles.svg;\n\n  return { containerProps, nativeProps, rootClasses, svgClasses };\n};\n\nexport const renderIcon = (\n  SVGElement: (props: { svgClasses: string }) => JSX.Element,\n): React.FC<React.HTMLAttributes<HTMLSpanElement>> => props => {\n  const { containerProps, nativeProps, rootClasses, svgClasses } = useIconProps(props);\n\n  return React.createElement(\n    'span',\n    {\n      ...containerProps,\n      ...nativeProps,\n      className: ax(rootClasses, props.className),\n    },\n    <SVGElement svgClasses={svgClasses} />,\n  );\n};\n\nexport const ChevronRightIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses}>\n    <path d=\"M515 1955l930-931L515 93l90-90 1022 1021L605 2045l-90-90z\" />\n  </svg>\n));\n\nexport const AcceptIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses}>\n    <path d=\"M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z\" />\n  </svg>\n));\n"]}
+{"version":3,"sources":["utils/DefaultIcons.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { getNativeProps, htmlElementProperties } from '@fluentui/react-utilities';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    speak: 'none',\n    width: '1em',\n    height: '1em',\n  },\n  svg: {\n    height: '100%',\n    fill: 'currentColor',\n    verticalAlign: 'top',\n  },\n});\n\n//\n// !!!   A temporary workaround to avoid dependencies on any icon packages.\n// !!!   A usage of converged icon package should be considered.\n//\n\nconst useIconProps = (props: React.HTMLAttributes<HTMLSpanElement>) => {\n  const containerProps = props['aria-label']\n    ? {}\n    : {\n        role: 'presentation',\n        ['aria-hidden']: true,\n      };\n  const nativeProps = getNativeProps<React.HTMLAttributes<HTMLElement>>(props, htmlElementProperties);\n  const styles = useStyles();\n\n  const rootClasses = styles.root;\n  const svgClasses = styles.svg;\n\n  return { containerProps, nativeProps, rootClasses, svgClasses };\n};\n\nexport const renderIcon = (\n  SVGElement: (props: { svgClasses: string }) => JSX.Element,\n): React.FC<React.HTMLAttributes<HTMLSpanElement>> => props => {\n  const { containerProps, nativeProps, rootClasses, svgClasses } = useIconProps(props);\n\n  return React.createElement(\n    'span',\n    {\n      ...containerProps,\n      ...nativeProps,\n      className: mergeClasses(rootClasses, props.className),\n    },\n    <SVGElement svgClasses={svgClasses} />,\n  );\n};\n\nexport const ChevronRightIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses}>\n    <path d=\"M515 1955l930-931L515 93l90-90 1022 1021L605 2045l-90-90z\" />\n  </svg>\n));\n\nexport const ChevronLeftIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses} focusable=\"false\">\n    <path d=\"M1443 2045L421 1024 1443 3l90 90-930 931 930 931-90 90z\" />\n  </svg>\n));\n\nexport const AcceptIcon = renderIcon(props => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2048 2048\" className={props.svgClasses}>\n    <path d=\"M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z\" />\n  </svg>\n));\n"],"sourceRoot":"../src/"}

package/lib/utils/index.d.ts

@@ -1 +1 @@
-export * from './isOutsideMenu';
+export * from './useOnMenuEnter';

package/lib/utils/index.js

@@ -1,2 +1,2 @@
-export * from './isOutsideMenu';
+export * from './useOnMenuEnter';
 //# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './isOutsideMenu';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './useOnMenuEnter';\n"]}

package/lib/utils/useIsSubmenu.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A component can be a part of a submenu whether its menu context `isSubmenu` flag is true
+ * or whether it is a part of a `MenuList`
+ *
+ * A simple hook to check box contexts easily
+ *
+ * @returns whether the component is part of a submenu
+ */
+export declare function useIsSubmenu(): boolean;

package/lib/utils/useIsSubmenu.js

@@ -0,0 +1,20 @@
+import { useHasParentContext } from '@fluentui/react-context-selector';
+import { useMenuContext } from '../contexts/menuContext';
+import { MenuListContext } from '../contexts/menuListContext';
+/**
+ * A component can be a part of a submenu whether its menu context `isSubmenu` flag is true
+ * or whether it is a part of a `MenuList`
+ *
+ * A simple hook to check box contexts easily
+ *
+ * @returns whether the component is part of a submenu
+ */
+
+export function useIsSubmenu() {
+  var menuContextValue = useMenuContext(function (context) {
+    return context.isSubmenu;
+  });
+  var hasMenuListContext = useHasParentContext(MenuListContext);
+  return menuContextValue || hasMenuListContext;
+}
+//# sourceMappingURL=useIsSubmenu.js.map

package/lib/utils/useIsSubmenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/useIsSubmenu.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,QAAoC,kCAApC;AACA,SAAS,cAAT,QAA+B,yBAA/B;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,YAAV,GAAsB;AAC1B,MAAM,gBAAgB,GAAG,cAAc,CAAC,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,SAAA;AAAiB,GAA7B,CAAvC;AACA,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,eAAD,CAA9C;AAEA,SAAO,gBAAgB,IAAI,kBAA3B;AACD","sourcesContent":["import { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext } from '../contexts/menuContext';\nimport { MenuListContext } from '../contexts/menuListContext';\n\n/**\n * A component can be a part of a submenu whether its menu context `isSubmenu` flag is true\n * or whether it is a part of a `MenuList`\n *\n * A simple hook to check box contexts easily\n *\n * @returns whether the component is part of a submenu\n */\nexport function useIsSubmenu() {\n  const menuContextValue = useMenuContext(context => context.isSubmenu);\n  const hasMenuListContext = useHasParentContext(MenuListContext);\n\n  return menuContextValue || hasMenuListContext;\n}\n"],"sourceRoot":"../src/"}

package/lib/utils/useOnMenuEnter.d.ts

@@ -0,0 +1,23 @@
+import type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';
+/**
+ * Name of the custom event
+ */
+export declare const MENU_ENTER_EVENT = "fuimenuenter";
+/**
+ * This hook works similarly to @see {useOnClickOutside}
+ *
+ * Problem: Trying to behave the same as system menus:
+ * When the mouse leaves a stack of nested menus the stack should not dismiss.
+ * However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.
+ *
+ * We don't use the native mouseenter event because it would trigger too many times in the document
+ * Instead, dispatch custom DOM event from the menu so that it can bubble
+ * Each nested menu can use the listener to check if the event is from a child or parent menu
+ */
+export declare const useOnMenuMouseEnter: (options: UseOnClickOrScrollOutsideOptions) => void;
+/**
+ * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`
+ * @param el element for the event target
+ * @param nativeEvent the native mouse event this is mapped to
+ */
+export declare const dispatchMenuEnterEvent: (el: HTMLElement, nativeEvent: MouseEvent) => void;

package/lib/utils/useOnMenuEnter.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { elementContains } from '@fluentui/react-portal';
+/**
+ * Name of the custom event
+ */
+
+export var MENU_ENTER_EVENT = 'fuimenuenter';
+/**
+ * This hook works similarly to @see {useOnClickOutside}
+ *
+ * Problem: Trying to behave the same as system menus:
+ * When the mouse leaves a stack of nested menus the stack should not dismiss.
+ * However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.
+ *
+ * We don't use the native mouseenter event because it would trigger too many times in the document
+ * Instead, dispatch custom DOM event from the menu so that it can bubble
+ * Each nested menu can use the listener to check if the event is from a child or parent menu
+ */
+
+export var useOnMenuMouseEnter = function (options) {
+  var refs = options.refs,
+      callback = options.callback,
+      element = options.element,
+      disabled = options.disabled; // Keep mouse event here because this is essentially a custom 'mouseenter' event
+
+  var listener = useEventCallback(function (ev) {
+    var _a;
+
+    var popoverRef = refs[0];
+    var someMenuPopover = ev.target; // someMenu is a child -> will always be contained because of vParents
+    // someMenu is a parent -> will always not be contained because no vParent
+    // someMenu is the current popover -> it will contain itself
+
+    var isOutsidePopover = !elementContains((_a = popoverRef.current) !== null && _a !== void 0 ? _a : null, someMenuPopover);
+
+    if (isOutsidePopover && !disabled) {
+      callback(ev);
+    }
+  });
+  React.useEffect(function () {
+    // eslint-disable-next-line eqeqeq
+    if (element == null) {
+      return;
+    }
+
+    if (!disabled) {
+      element.addEventListener(MENU_ENTER_EVENT, listener);
+    }
+
+    return function () {
+      element.removeEventListener(MENU_ENTER_EVENT, listener);
+    };
+  }, [listener, element, disabled]);
+};
+/**
+ * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`
+ * @param el element for the event target
+ * @param nativeEvent the native mouse event this is mapped to
+ */
+
+export var dispatchMenuEnterEvent = function (el, nativeEvent) {
+  el.dispatchEvent(new CustomEvent(MENU_ENTER_EVENT, {
+    bubbles: true,
+    detail: {
+      nativeEvent: nativeEvent
+    }
+  }));
+};
+//# sourceMappingURL=useOnMenuEnter.js.map

package/lib/utils/useOnMenuEnter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/useOnMenuEnter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,eAAT,QAAgC,wBAAhC;AAGA;;AAEG;;AACH,OAAO,IAAM,gBAAgB,GAAG,cAAzB;AAEP;;;;;;;;;;AAUG;;AACH,OAAO,IAAM,mBAAmB,GAAG,UAAC,OAAD,EAA0C;AACnE,MAAA,IAAI,GAAkC,OAAO,CAAzC,IAAJ;AAAA,MAAM,QAAQ,GAAwB,OAAO,CAA/B,QAAd;AAAA,MAAgB,OAAO,GAAe,OAAO,CAAtB,OAAvB;AAAA,MAAyB,QAAQ,GAAK,OAAO,CAAZ,QAAjC,CADmE,CAG3E;;AACA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,UAAC,EAAD,EAAe;;;AAC/C,QAAM,UAAU,GAAG,IAAI,CAAC,CAAD,CAAvB;AACA,QAAM,eAAe,GAAG,EAAE,CAAC,MAA3B,CAF+C,CAI/C;AACA;AACA;;AACA,QAAM,gBAAgB,GAAG,CAAC,eAAe,CAAA,CAAA,EAAA,GAAC,UAAU,CAAC,OAAZ,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,EAAnB,GAAuB,IAAvB,EAA6B,eAA7B,CAAzC;;AACA,QAAI,gBAAgB,IAAI,CAAC,QAAzB,EAAmC;AACjC,MAAA,QAAQ,CAAC,EAAD,CAAR;AACD;AACF,GAXgC,CAAjC;AAaA,EAAA,KAAK,CAAC,SAAN,CAAgB,YAAA;AACd;AACA,QAAI,OAAO,IAAI,IAAf,EAAqB;AACnB;AACD;;AAUD,QAAI,CAAC,QAAL,EAAe;AACb,MAAA,OAAO,CAAC,gBAAR,CAAyB,gBAAzB,EAA2C,QAA3C;AACD;;AAED,WAAO,YAAA;AACL,MAAA,OAAO,CAAC,mBAAR,CAA4B,gBAA5B,EAA8C,QAA9C;AACD,KAFD;AAGD,GArBD,EAqBG,CAAC,QAAD,EAAW,OAAX,EAAoB,QAApB,CArBH;AAsBD,CAvCM;AAyCP;;;;AAIG;;AACH,OAAO,IAAM,sBAAsB,GAAG,UAAC,EAAD,EAAkB,WAAlB,EAAyC;AAC7E,EAAA,EAAE,CAAC,aAAH,CAAiB,IAAI,WAAJ,CAAgB,gBAAhB,EAAkC;AAAE,IAAA,OAAO,EAAE,IAAX;AAAiB,IAAA,MAAM,EAAE;AAAE,MAAA,WAAW,EAAA;AAAb;AAAzB,GAAlC,CAAjB;AACD,CAFM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';\n\n/**\n * Name of the custom event\n */\nexport const MENU_ENTER_EVENT = 'fuimenuenter';\n\n/**\n * This hook works similarly to @see {useOnClickOutside}\n *\n * Problem: Trying to behave the same as system menus:\n * When the mouse leaves a stack of nested menus the stack should not dismiss.\n * However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.\n *\n * We don't use the native mouseenter event because it would trigger too many times in the document\n * Instead, dispatch custom DOM event from the menu so that it can bubble\n * Each nested menu can use the listener to check if the event is from a child or parent menu\n */\nexport const useOnMenuMouseEnter = (options: UseOnClickOrScrollOutsideOptions) => {\n  const { refs, callback, element, disabled } = options;\n\n  // Keep mouse event here because this is essentially a custom 'mouseenter' event\n  const listener = useEventCallback((ev: MouseEvent) => {\n    const popoverRef = refs[0];\n    const someMenuPopover = ev.target as HTMLElement;\n\n    // someMenu is a child -> will always be contained because of vParents\n    // someMenu is a parent -> will always not be contained because no vParent\n    // someMenu is the current popover -> it will contain itself\n    const isOutsidePopover = !elementContains(popoverRef.current ?? null, someMenuPopover);\n    if (isOutsidePopover && !disabled) {\n      callback(ev);\n    }\n  });\n\n  React.useEffect(() => {\n    // eslint-disable-next-line eqeqeq\n    if (element == null) {\n      return;\n    }\n\n    /**\n     * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n     * evt is being typed as a base class of MouseEvent -> `Event`.\n     * This type is used to override `listener` calls to make TS happy\n     */\n\n    type ListenerOverride = (evt: Event) => void;\n\n    if (!disabled) {\n      element.addEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    }\n\n    return () => {\n      element.removeEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    };\n  }, [listener, element, disabled]);\n};\n\n/**\n * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`\n * @param el element for the event target\n * @param nativeEvent the native mouse event this is mapped to\n */\nexport const dispatchMenuEnterEvent = (el: HTMLElement, nativeEvent: MouseEvent) => {\n  el.dispatchEvent(new CustomEvent(MENU_ENTER_EVENT, { bubbles: true, detail: { nativeEvent } }));\n};\n"],"sourceRoot":"../src/"}

package/lib-amd/MenuPopover.d.ts

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

package/lib-amd/MenuPopover.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/MenuPopover/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=MenuPopover.js.map

package/lib-amd/MenuPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopover.js","sourceRoot":"../src/","sources":["MenuPopover.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/MenuPopover/index';\n"]}

package/lib-amd/common/isConformant.d.ts

@@ -1,2 +1,4 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>): void;
+import type { IsConformantOptions } from '@fluentui/react-conformance';
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib-amd/common/isConformant.js

@@ -1,10 +1,13 @@
-define(["require", "exports", "@fluentui/react-conformance"], function (require, exports, react_conformance_1) {
+define(["require", "exports", "@fluentui/react-conformance", "@fluentui/react-conformance-make-styles"], function (require, exports, react_conformance_1, react_conformance_make_styles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.isConformant = void 0;
     function isConformant(testInfo) {
         var defaultOptions = {
             asPropHandlesRef: true,
             componentPath: module.parent.filename.replace('.test', ''),
+            skipAsPropTests: true,
+            extraTests: react_conformance_make_styles_1.default,
         };
         react_conformance_1.isConformant(defaultOptions, testInfo);
     }

package/lib-amd/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;IAEA,SAAgB,YAAY,CAAC,QAAoD;QAC/E,IAAM,cAAc,GAAG;YACrB,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;SAC7D,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAPD,oCAOC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>) {\n  const defaultOptions = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;;IAIA,SAAgB,YAAY,CAC1B,QAAyF;QAEzF,IAAM,cAAc,GAAyC;YAC3D,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5D,eAAe,EAAE,IAAI;YACrB,UAAU,EAAE,uCAAqC;SAClD,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAXD,oCAWC","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    skipAsPropTests: true,\n    extraTests: makeStylesTests as TestObject<TProps>,\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}

package/lib-amd/common/mockUseMenuContext.d.ts

@@ -0,0 +1,7 @@
+import type { MenuContextValue } from '../contexts/menuContext';
+/**
+ * A test utility to mock the useMenuContext hook that relies on context selector
+ * Don't forget to call `jest.mock(**\/popupContext.ts)` while using this
+ * @param options Menu context values to set for testing
+ */
+export declare const mockUseMenuContext: (options?: Partial<MenuContextValue>) => void;

package/lib-amd/common/mockUseMenuContext.js

@@ -0,0 +1,20 @@
+define(["require", "exports", "tslib", "../contexts/menuContext"], function (require, exports, tslib_1, menuContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.mockUseMenuContext = void 0;
+    /**
+     * A test utility to mock the useMenuContext hook that relies on context selector
+     * Don't forget to call `jest.mock(**\/popupContext.ts)` while using this
+     * @param options Menu context values to set for testing
+     */
+    var mockUseMenuContext = function (options) {
+        if (options === void 0) { options = {}; }
+        var mockContext = tslib_1.__assign({ open: false, setOpen: function () { return null; }, triggerRef: { current: null }, menuPopoverRef: { current: null }, openOnContext: false, openOnHover: false, isSubmenu: false, triggerId: 'id' }, options);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        menuContext_1.useMenuContext.mockImplementation(function (selector) {
+            return selector(mockContext);
+        });
+    };
+    exports.mockUseMenuContext = mockUseMenuContext;
+});
+//# sourceMappingURL=mockUseMenuContext.js.map

package/lib-amd/common/mockUseMenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockUseMenuContext.js","sourceRoot":"../src/","sources":["common/mockUseMenuContext.ts"],"names":[],"mappings":";;;;IAIA;;;;OAIG;IACI,IAAM,kBAAkB,GAAG,UAAC,OAAuC;QAAvC,wBAAA,EAAA,YAAuC;QACxE,IAAM,WAAW,sBACf,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI,EACnB,UAAU,EAAG,EAAE,OAAO,EAAE,IAAI,EAAqD,EACjF,cAAc,EAAG,EAAE,OAAO,EAAE,IAAI,EAAqD,EACrF,aAAa,EAAE,KAAK,EACpB,WAAW,EAAE,KAAK,EAClB,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,IAAI,IACZ,OAAO,CACX,CAAC;QACF,8DAA8D;QAC7D,4BAA4B,CAAC,kBAAkB,CAAC,UAAC,QAA4C;YAC5F,OAAO,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAhBW,QAAA,kBAAkB,sBAgB7B","sourcesContent":["import * as React from 'react';\nimport { useMenuContext } from '../contexts/menuContext';\nimport type { MenuContextValue } from '../contexts/menuContext';\n\n/**\n * A test utility to mock the useMenuContext hook that relies on context selector\n * Don't forget to call `jest.mock(**\\/popupContext.ts)` while using this\n * @param options Menu context values to set for testing\n */\nexport const mockUseMenuContext = (options: Partial<MenuContextValue> = {}) => {\n  const mockContext: MenuContextValue = {\n    open: false,\n    setOpen: () => null,\n    triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n    menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n    openOnContext: false,\n    openOnHover: false,\n    isSubmenu: false,\n    triggerId: 'id',\n    ...options,\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (useMenuContext as jest.Mock).mockImplementation((selector: (context: MenuContextValue) => any) => {\n    return selector(mockContext);\n  });\n};\n"]}

package/lib-amd/components/Menu/Menu.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { MenuProps } from './Menu.types';
+import type { MenuProps } from './Menu.types';
 /**
  * Wrapper component that manages state for a popup MenuList and a MenuTrigger
- * {@docCategory Menu }
  */
-export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLElement>>;
+export declare const Menu: React.FC<MenuProps>;

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

@@ -1,15 +1,16 @@
-define(["require", "exports", "react", "./useMenu", "./renderMenu", "./useMenuStyles"], function (require, exports, React, useMenu_1, renderMenu_1, useMenuStyles_1) {
+define(["require", "exports", "./useMenu", "./useMenuContextValues", "./renderMenu"], function (require, exports, useMenu_1, useMenuContextValues_1, renderMenu_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Menu = void 0;
     /**
      * Wrapper component that manages state for a popup MenuList and a MenuTrigger
-     * {@docCategory Menu }
      */
-    exports.Menu = React.forwardRef(function (props, ref) {
-        var state = useMenu_1.useMenu(props, ref);
-        useMenuStyles_1.useMenuStyles(state);
-        return renderMenu_1.renderMenu(state);
-    });
+    var Menu = function (props) {
+        var state = useMenu_1.useMenu(props);
+        var contextValues = useMenuContextValues_1.useMenuContextValues(state);
+        return renderMenu_1.renderMenu(state, contextValues);
+    };
+    exports.Menu = Menu;
     exports.Menu.displayName = 'Menu';
 });
 //# sourceMappingURL=Menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"../src/","sources":["components/Menu/Menu.tsx"],"names":[],"mappings":";;;IAMA;;;OAGG;IACU,QAAA,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,UAAC,KAAK,EAAE,GAAG;QACtE,IAAM,KAAK,GAAG,iBAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElC,6BAAa,CAAC,KAAK,CAAC,CAAC;QACrB,OAAO,uBAAU,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenu } from './useMenu';\nimport { MenuProps } from './Menu.types';\nimport { renderMenu } from './renderMenu';\nimport { useMenuStyles } from './useMenuStyles';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n * {@docCategory Menu }\n */\nexport const Menu = React.forwardRef<HTMLElement, MenuProps>((props, ref) => {\n  const state = useMenu(props, ref);\n\n  useMenuStyles(state);\n  return renderMenu(state);\n});\n\nMenu.displayName = 'Menu';\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"../src/","sources":["components/Menu/Menu.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACI,IAAM,IAAI,GAAwB,UAAA,KAAK;QAC5C,IAAM,KAAK,GAAG,iBAAO,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAM,aAAa,GAAG,2CAAoB,CAAC,KAAK,CAAC,CAAC;QAElD,OAAO,uBAAU,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAC1C,CAAC,CAAC;IALW,QAAA,IAAI,QAKf;IAEF,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenu } from './useMenu';\nimport { useMenuContextValues } from './useMenuContextValues';\nimport { renderMenu } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu(props);\n  const contextValues = useMenuContextValues(state);\n\n  return renderMenu(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"]}