@fluentui/react-menu 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230322-0439.1

package/lib/components/MenuItem/useMenuItemStyles.js

@@ -1,15 +1,15 @@
-import { mergeClasses, __styles, shorthands } from "@griffel/react";
-import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
-import { createFocusOutlineStyle } from "@fluentui/react-tabster";
-import { tokens } from "@fluentui/react-theme";
-import { useCheckmarkStyles_unstable } from "../../selectable/index";
+import { mergeClasses, __styles, shorthands } from '@griffel/react';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { useCheckmarkStyles_unstable } from '../../selectable/index';
 export const menuItemClassNames = {
-  root: "fui-MenuItem",
-  icon: "fui-MenuItem__icon",
-  checkmark: "fui-MenuItem__checkmark",
-  submenuIndicator: "fui-MenuItem__submenuIndicator",
-  content: "fui-MenuItem__content",
-  secondaryContent: "fui-MenuItem__secondaryContent"
+  root: 'fui-MenuItem',
+  icon: 'fui-MenuItem__icon',
+  checkmark: 'fui-MenuItem__checkmark',
+  submenuIndicator: 'fui-MenuItem__submenuIndicator',
+  content: 'fui-MenuItem__content',
+  secondaryContent: 'fui-MenuItem__secondaryContent'
 };
 const useStyles = /*#__PURE__*/__styles({
   focusIndicator: {
@@ -105,13 +105,26 @@ const useStyles = /*#__PURE__*/__styles({
     Bk3fhr4: "f19vpps7",
     Bmfj8id: "fv5swzo",
     Bg7n49j: "f1q1x1ba",
-    t0hwav: "ft33916"
+    t0hwav: "ft33916",
+    Bbusuzp: "f1dcs8yz",
+    ze5xyy: "f1kc2mi9",
+    Bctn1xl: "fk56vqo",
+    Bh6z0a4: "f1ikwg0d"
   }
 }, {
   f: [".ftqa4ok:focus{outline-style:none;}", ".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
-  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}"]
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}"],
+  m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fk56vqo:hover .fui-MenuItem__icon{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ikwg0d:focus{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
 });
 /** Applies style classnames to slots */
 export const useMenuItemStyles_unstable = state => {

package/lib/components/MenuItem/useMenuItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","f","i","d","h","useMenuItemStyles_unstable","state","styles","className"],"sources":["../../../src/components/MenuItem/useMenuItemStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.gap('4px'),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandSelected,\n      },\n    },\n\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"mappings":"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"}
+{"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","Bbusuzp","ze5xyy","Bctn1xl","Bh6z0a4","f","i","d","h","m","useMenuItemStyles_unstable","state","styles","className"],"sources":["../../../src/components/MenuItem/useMenuItemStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.gap('4px'),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandSelected,\n      },\n    },\n\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      ':hover': {\n        color: 'GrayText',\n        [`& .${menuItemClassNames.icon}`]: {\n          color: 'GrayText',\n        },\n      },\n      ':focus': {\n        color: 'GrayText',\n      },\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"mappings":"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"}

package/lib/components/MenuItemCheckbox/MenuItemCheckbox.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { useMenuItemCheckbox_unstable } from "./useMenuItemCheckbox";
-import { renderMenuItemCheckbox_unstable } from "./renderMenuItemCheckbox";
-import { useMenuItemCheckboxStyles_unstable } from "./useMenuItemCheckboxStyles";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';
+import { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';
+import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.
  */
@@ -15,5 +15,5 @@ export const MenuItemCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuItemCheckbox_unstable(state);
 });
-MenuItemCheckbox.displayName = "MenuItemCheckbox";
+MenuItemCheckbox.displayName = 'MenuItemCheckbox';
 //# sourceMappingURL=MenuItemCheckbox.js.map

package/lib/components/MenuItemCheckbox/index.js

@@ -1,6 +1,6 @@
-export * from "./MenuItemCheckbox.types";
-export * from "./MenuItemCheckbox";
-export * from "./renderMenuItemCheckbox";
-export * from "./useMenuItemCheckbox";
-export * from "./useMenuItemCheckboxStyles";
+export * from './MenuItemCheckbox.types';
+export * from './MenuItemCheckbox';
+export * from './renderMenuItemCheckbox';
+export * from './useMenuItemCheckbox';
+export * from './useMenuItemCheckboxStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/MenuItemCheckbox/renderMenuItemCheckbox.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
 /** Function that renders the final JSX of the component  */
 export const renderMenuItemCheckbox_unstable = state => {
   const {

package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { resolveShorthand } from "@fluentui/react-utilities";
-import { Checkmark16Filled } from "@fluentui/react-icons";
-import { useMenuListContext_unstable } from "../../contexts/menuListContext";
-import { useMenuItem_unstable } from "../MenuItem/useMenuItem";
+import * as React from 'react';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { Checkmark16Filled } from '@fluentui/react-icons';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
+import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
 /** Returns the props and state required to render the component */
 export const useMenuItemCheckbox_unstable = (props, ref) => {
   const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);
@@ -11,15 +11,16 @@ export const useMenuItemCheckbox_unstable = (props, ref) => {
     value
   } = props;
   const checked = useMenuListContext_unstable(context => {
-    const checkedItems = context.checkedValues?.[name] || [];
+    var _context_checkedValues;
+    const checkedItems = ((_context_checkedValues = context.checkedValues) === null || _context_checkedValues === void 0 ? void 0 : _context_checkedValues[name]) || [];
     return checkedItems.indexOf(value) !== -1;
   });
   const state = {
     ...useMenuItem_unstable({
-      role: "menuitemcheckbox",
+      role: 'menuitemcheckbox',
       persistOnClick: true,
       ...props,
-      "aria-checked": checked,
+      'aria-checked': checked,
       checkmark: resolveShorthand(props.checkmark, {
         defaultProps: {
           children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
@@ -27,8 +28,9 @@ export const useMenuItemCheckbox_unstable = (props, ref) => {
         required: true
       }),
       onClick: e => {
-        toggleCheckbox?.(e, name, value, checked);
-        props.onClick?.(e);
+        var _props_onClick;
+        toggleCheckbox === null || toggleCheckbox === void 0 ? void 0 : toggleCheckbox(e, name, value, checked);
+        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);
       }
     }, ref),
     name,

package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","resolveShorthand","Checkmark16Filled","useMenuListContext_unstable","useMenuItem_unstable","useMenuItemCheckbox_unstable","props","ref","toggleCheckbox","context","name","value","checked","checkedItems","checkedValues","indexOf","state","role","persistOnClick","checkmark","defaultProps","children","createElement","required","onClick","e"],"sources":["../../../src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n  const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const state: MenuItemCheckboxState = {\n    ...useMenuItem_unstable(\n      {\n        role: 'menuitemcheckbox',\n        persistOnClick: true,\n        ...props,\n        'aria-checked': checked,\n        checkmark: resolveShorthand(props.checkmark, {\n          defaultProps: { children: <Checkmark16Filled /> },\n          required: true,\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          toggleCheckbox?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    name,\n    value,\n    checked,\n  };\n\n  return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,oBAAoB,QAAQ;AAIrC;AACA,OAAO,MAAMC,4BAAA,GAA+BA,CAC1CC,KAAA,EACAC,GAAA,KAC0B;EAC1B,MAAMC,cAAA,GAAiBL,2BAAA,CAA4BM,OAAA,IAAWA,OAAA,CAAQD,cAAc;EACpF,MAAM;IAAEE,IAAA;IAAMC;EAAK,CAAE,GAAGL,KAAA;EAExB,MAAMM,OAAA,GAAUT,2BAAA,CAA4BM,OAAA,IAAW;IACrD,MAAMI,YAAA,GAAeJ,OAAA,CAAQK,aAAa,GAAGJ,IAAA,CAAK,IAAI,EAAE;IACxD,OAAOG,YAAA,CAAaE,OAAO,CAACJ,KAAA,MAAW,CAAC;EAC1C;EAEA,MAAMK,KAAA,GAA+B;IACnC,GAAGZ,oBAAA,CACD;MACEa,IAAA,EAAM;MACNC,cAAA,EAAgB,IAAI;MACpB,GAAGZ,KAAK;MACR,gBAAgBM,OAAA;MAChBO,SAAA,EAAWlB,gBAAA,CAAiBK,KAAA,CAAMa,SAAS,EAAE;QAC3CC,YAAA,EAAc;UAAEC,QAAA,eAAUrB,KAAA,CAAAsB,aAAA,CAACpB,iBAAA;QAAqB;QAChDqB,QAAA,EAAU;MACZ;MACAC,OAAA,EAAUC,CAAA,IAA8D;QACtEjB,cAAA,GAAiBiB,CAAA,EAAGf,IAAA,EAAMC,KAAA,EAAOC,OAAA;QACjCN,KAAA,CAAMkB,OAAO,GAAGC,CAAA;MAClB;IACF,GACAlB,GAAA,CACD;IACDG,IAAA;IACAC,KAAA;IACAC;EACF;EAEA,OAAOI,KAAA;AACT"}
+{"version":3,"names":["React","resolveShorthand","Checkmark16Filled","useMenuListContext_unstable","useMenuItem_unstable","useMenuItemCheckbox_unstable","props","ref","toggleCheckbox","context","name","value","checked","_context_checkedValues","checkedItems","checkedValues","indexOf","state","role","persistOnClick","checkmark","defaultProps","children","createElement","required","onClick","e","_props_onClick","call"],"sources":["../../../src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n  const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const state: MenuItemCheckboxState = {\n    ...useMenuItem_unstable(\n      {\n        role: 'menuitemcheckbox',\n        persistOnClick: true,\n        ...props,\n        'aria-checked': checked,\n        checkmark: resolveShorthand(props.checkmark, {\n          defaultProps: { children: <Checkmark16Filled /> },\n          required: true,\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          toggleCheckbox?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    name,\n    value,\n    checked,\n  };\n\n  return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,oBAAoB,QAAQ;AAIrC;AACA,OAAO,MAAMC,4BAAA,GAA+BA,CAC1CC,KAAA,EACAC,GAAA,KAC0B;EAC1B,MAAMC,cAAA,GAAiBL,2BAAA,CAA4BM,OAAA,IAAWA,OAAA,CAAQD,cAAc;EACpF,MAAM;IAAEE,IAAA;IAAMC;EAAK,CAAE,GAAGL,KAAA;EAExB,MAAMM,OAAA,GAAUT,2BAAA,CAA4BM,OAAA,IAAW;QAChCI,sBAAA;IAArB,MAAMC,YAAA,GAAe,EAAAD,sBAAA,GAAAJ,OAAA,CAAQM,aAAa,cAArBF,sBAAA,uBAAAA,sBAAuB,CAACH,IAAA,CAAK,KAAI,EAAE;IACxD,OAAOI,YAAA,CAAaE,OAAO,CAACL,KAAA,MAAW,CAAC;EAC1C;EAEA,MAAMM,KAAA,GAA+B;IACnC,GAAGb,oBAAA,CACD;MACEc,IAAA,EAAM;MACNC,cAAA,EAAgB,IAAI;MACpB,GAAGb,KAAK;MACR,gBAAgBM,OAAA;MAChBQ,SAAA,EAAWnB,gBAAA,CAAiBK,KAAA,CAAMc,SAAS,EAAE;QAC3CC,YAAA,EAAc;UAAEC,QAAA,eAAUtB,KAAA,CAAAuB,aAAA,CAACrB,iBAAA;QAAqB;QAChDsB,QAAA,EAAU;MACZ;MACAC,OAAA,EAAUC,CAAA,IAA8D;YAEtEC,cAAA;QADAnB,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAiBkB,CAAA,EAAGhB,IAAA,EAAMC,KAAA,EAAOC,OAAA;QACjC,CAAAe,cAAA,GAAArB,KAAA,CAAMmB,OAAO,cAAbE,cAAA,uBAAAA,cAAA,CAAAC,IAAA,CAAAtB,KAAA,EAAgBoB,CAAA;MAClB;IACF,GACAnB,GAAA,CACD;IACDG,IAAA;IACAC,KAAA;IACAC;EACF;EAEA,OAAOK,KAAA;AACT"}

package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js

@@ -1,12 +1,12 @@
-import { mergeClasses } from "@griffel/react";
-import { useCheckmarkStyles_unstable } from "../../selectable/index";
-import { useMenuItemStyles_unstable } from "../MenuItem/useMenuItemStyles";
+import { mergeClasses } from '@griffel/react';
+import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 export const menuItemCheckboxClassNames = {
-  root: "fui-MenuItemCheckbox",
-  icon: "fui-MenuItemCheckbox__icon",
-  checkmark: "fui-MenuItemCheckbox__checkmark",
-  content: "fui-MenuItemCheckbox__content",
-  secondaryContent: "fui-MenuItemCheckbox__secondaryContent"
+  root: 'fui-MenuItemCheckbox',
+  icon: 'fui-MenuItemCheckbox__icon',
+  checkmark: 'fui-MenuItemCheckbox__checkmark',
+  content: 'fui-MenuItemCheckbox__content',
+  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent'
 };
 export const useMenuItemCheckboxStyles_unstable = state => {
   state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);

package/lib/components/MenuItemRadio/MenuItemRadio.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { useMenuItemRadio_unstable } from "./useMenuItemRadio";
-import { renderMenuItemRadio_unstable } from "./renderMenuItemRadio";
-import { useMenuItemRadioStyles_unstable } from "./useMenuItemRadioStyles";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { useMenuItemRadio_unstable } from './useMenuItemRadio';
+import { renderMenuItemRadio_unstable } from './renderMenuItemRadio';
+import { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
  */
@@ -15,5 +15,5 @@ export const MenuItemRadio = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuItemRadio_unstable(state);
 });
-MenuItemRadio.displayName = "MenuItemRadio";
+MenuItemRadio.displayName = 'MenuItemRadio';
 //# sourceMappingURL=MenuItemRadio.js.map

package/lib/components/MenuItemRadio/index.js

@@ -1,6 +1,6 @@
-export * from "./MenuItemRadio.types";
-export * from "./MenuItemRadio";
-export * from "./renderMenuItemRadio";
-export * from "./useMenuItemRadio";
-export * from "./useMenuItemRadioStyles";
+export * from './MenuItemRadio.types';
+export * from './MenuItemRadio';
+export * from './renderMenuItemRadio';
+export * from './useMenuItemRadio';
+export * from './useMenuItemRadioStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/MenuItemRadio/renderMenuItemRadio.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Redefine the render function to add slots. Reuse the menuitemradio structure but add
  * slots to children.

package/lib/components/MenuItemRadio/useMenuItemRadio.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { resolveShorthand } from "@fluentui/react-utilities";
-import { Checkmark16Filled } from "@fluentui/react-icons";
-import { useMenuListContext_unstable } from "../../contexts/menuListContext";
-import { useMenuItem_unstable } from "../MenuItem/useMenuItem";
+import * as React from 'react';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { Checkmark16Filled } from '@fluentui/react-icons';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
+import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
 /**
  * Given user props, returns state and render function for a MenuItemRadio.
  */
@@ -12,15 +12,16 @@ export const useMenuItemRadio_unstable = (props, ref) => {
     value
   } = props;
   const checked = useMenuListContext_unstable(context => {
-    const checkedItems = context.checkedValues?.[name] || [];
+    var _context_checkedValues;
+    const checkedItems = ((_context_checkedValues = context.checkedValues) === null || _context_checkedValues === void 0 ? void 0 : _context_checkedValues[name]) || [];
     return checkedItems.indexOf(value) !== -1;
   });
   const selectRadio = useMenuListContext_unstable(context => context.selectRadio);
   return {
     ...useMenuItem_unstable({
       ...props,
-      role: "menuitemradio",
-      "aria-checked": checked,
+      role: 'menuitemradio',
+      'aria-checked': checked,
       checkmark: resolveShorthand(props.checkmark, {
         defaultProps: {
           children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
@@ -28,8 +29,9 @@ export const useMenuItemRadio_unstable = (props, ref) => {
         required: true
       }),
       onClick: e => {
-        selectRadio?.(e, name, value, checked);
-        props.onClick?.(e);
+        var _props_onClick;
+        selectRadio === null || selectRadio === void 0 ? void 0 : selectRadio(e, name, value, checked);
+        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);
       }
     }, ref),
     checked,

package/lib/components/MenuItemRadio/useMenuItemRadio.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","resolveShorthand","Checkmark16Filled","useMenuListContext_unstable","useMenuItem_unstable","useMenuItemRadio_unstable","props","ref","name","value","checked","context","checkedItems","checkedValues","indexOf","selectRadio","role","checkmark","defaultProps","children","createElement","required","onClick","e"],"sources":["../../../src/components/MenuItemRadio/useMenuItemRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n  props: MenuItemRadioProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioState => {\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n\n  return {\n    ...useMenuItem_unstable(\n      {\n        ...props,\n        role: 'menuitemradio',\n        'aria-checked': checked,\n        checkmark: resolveShorthand(props.checkmark, {\n          defaultProps: { children: <Checkmark16Filled /> },\n          required: true,\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          selectRadio?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    checked,\n    name,\n    value,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,oBAAoB,QAAQ;AAIrC;;;AAGA,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,KAAA,EACAC,GAAA,KACuB;EACvB,MAAM;IAAEC,IAAA;IAAMC;EAAK,CAAE,GAAGH,KAAA;EAExB,MAAMI,OAAA,GAAUP,2BAAA,CAA4BQ,OAAA,IAAW;IACrD,MAAMC,YAAA,GAAeD,OAAA,CAAQE,aAAa,GAAGL,IAAA,CAAK,IAAI,EAAE;IACxD,OAAOI,YAAA,CAAaE,OAAO,CAACL,KAAA,MAAW,CAAC;EAC1C;EAEA,MAAMM,WAAA,GAAcZ,2BAAA,CAA4BQ,OAAA,IAAWA,OAAA,CAAQI,WAAW;EAE9E,OAAO;IACL,GAAGX,oBAAA,CACD;MACE,GAAGE,KAAK;MACRU,IAAA,EAAM;MACN,gBAAgBN,OAAA;MAChBO,SAAA,EAAWhB,gBAAA,CAAiBK,KAAA,CAAMW,SAAS,EAAE;QAC3CC,YAAA,EAAc;UAAEC,QAAA,eAAUnB,KAAA,CAAAoB,aAAA,CAAClB,iBAAA;QAAqB;QAChDmB,QAAA,EAAU;MACZ;MACAC,OAAA,EAAUC,CAAA,IAA8D;QACtER,WAAA,GAAcQ,CAAA,EAAGf,IAAA,EAAMC,KAAA,EAAOC,OAAA;QAC9BJ,KAAA,CAAMgB,OAAO,GAAGC,CAAA;MAClB;IACF,GACAhB,GAAA,CACD;IACDG,OAAA;IACAF,IAAA;IACAC;EACF;AACF"}
+{"version":3,"names":["React","resolveShorthand","Checkmark16Filled","useMenuListContext_unstable","useMenuItem_unstable","useMenuItemRadio_unstable","props","ref","name","value","checked","context","_context_checkedValues","checkedItems","checkedValues","indexOf","selectRadio","role","checkmark","defaultProps","children","createElement","required","onClick","e","_props_onClick","call"],"sources":["../../../src/components/MenuItemRadio/useMenuItemRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n  props: MenuItemRadioProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioState => {\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n\n  return {\n    ...useMenuItem_unstable(\n      {\n        ...props,\n        role: 'menuitemradio',\n        'aria-checked': checked,\n        checkmark: resolveShorthand(props.checkmark, {\n          defaultProps: { children: <Checkmark16Filled /> },\n          required: true,\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          selectRadio?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    checked,\n    name,\n    value,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,oBAAoB,QAAQ;AAIrC;;;AAGA,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,KAAA,EACAC,GAAA,KACuB;EACvB,MAAM;IAAEC,IAAA;IAAMC;EAAK,CAAE,GAAGH,KAAA;EAExB,MAAMI,OAAA,GAAUP,2BAAA,CAA4BQ,OAAA,IAAW;QAChCC,sBAAA;IAArB,MAAMC,YAAA,GAAe,EAAAD,sBAAA,GAAAD,OAAA,CAAQG,aAAa,cAArBF,sBAAA,uBAAAA,sBAAuB,CAACJ,IAAA,CAAK,KAAI,EAAE;IACxD,OAAOK,YAAA,CAAaE,OAAO,CAACN,KAAA,MAAW,CAAC;EAC1C;EAEA,MAAMO,WAAA,GAAcb,2BAAA,CAA4BQ,OAAA,IAAWA,OAAA,CAAQK,WAAW;EAE9E,OAAO;IACL,GAAGZ,oBAAA,CACD;MACE,GAAGE,KAAK;MACRW,IAAA,EAAM;MACN,gBAAgBP,OAAA;MAChBQ,SAAA,EAAWjB,gBAAA,CAAiBK,KAAA,CAAMY,SAAS,EAAE;QAC3CC,YAAA,EAAc;UAAEC,QAAA,eAAUpB,KAAA,CAAAqB,aAAA,CAACnB,iBAAA;QAAqB;QAChDoB,QAAA,EAAU;MACZ;MACAC,OAAA,EAAUC,CAAA,IAA8D;YAEtEC,cAAA;QADAT,WAAA,aAAAA,WAAA,uBAAAA,WAAA,CAAcQ,CAAA,EAAGhB,IAAA,EAAMC,KAAA,EAAOC,OAAA;QAC9B,CAAAe,cAAA,GAAAnB,KAAA,CAAMiB,OAAO,cAAbE,cAAA,uBAAAA,cAAA,CAAAC,IAAA,CAAApB,KAAA,EAAgBkB,CAAA;MAClB;IACF,GACAjB,GAAA,CACD;IACDG,OAAA;IACAF,IAAA;IACAC;EACF;AACF"}

package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js

@@ -1,12 +1,12 @@
-import { mergeClasses } from "@griffel/react";
-import { useCheckmarkStyles_unstable } from "../../selectable/index";
-import { useMenuItemStyles_unstable } from "../MenuItem/useMenuItemStyles";
+import { mergeClasses } from '@griffel/react';
+import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 export const menuItemRadioClassNames = {
-  root: "fui-MenuItemRadio",
-  icon: "fui-MenuItemRadio__icon",
-  checkmark: "fui-MenuItemRadio__checkmark",
-  content: "fui-MenuItemRadio__content",
-  secondaryContent: "fui-MenuItemRadio__secondaryContent"
+  root: 'fui-MenuItemRadio',
+  icon: 'fui-MenuItemRadio__icon',
+  checkmark: 'fui-MenuItemRadio__checkmark',
+  content: 'fui-MenuItemRadio__content',
+  secondaryContent: 'fui-MenuItemRadio__secondaryContent'
 };
 export const useMenuItemRadioStyles_unstable = state => {
   state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);

package/lib/components/MenuList/MenuList.js

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { useMenuList_unstable } from "./useMenuList";
-import { renderMenuList_unstable } from "./renderMenuList";
-import { useMenuListContextValues_unstable } from "./useMenuListContextValues";
-import { useMenuListStyles_unstable } from "./useMenuListStyles";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { useMenuList_unstable } from './useMenuList';
+import { renderMenuList_unstable } from './renderMenuList';
+import { useMenuListContextValues_unstable } from './useMenuListContextValues';
+import { useMenuListStyles_unstable } from './useMenuListStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Define a styled MenuList, using the `useMenuList_unstable` hook.
  */
@@ -17,5 +17,5 @@ export const MenuList = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuList_unstable(state, contextValues);
 });
-MenuList.displayName = "MenuList";
+MenuList.displayName = 'MenuList';
 //# sourceMappingURL=MenuList.js.map

package/lib/components/MenuList/MenuList.types.js

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 //# sourceMappingURL=MenuList.types.js.map

package/lib/components/MenuList/index.js

@@ -1,7 +1,7 @@
-export * from "./MenuList";
-export * from "./MenuList.types";
-export * from "./renderMenuList";
-export * from "./useMenuList";
-export * from "./useMenuListStyles";
-export * from "./useMenuListContextValues";
+export * from './MenuList';
+export * from './MenuList.types';
+export * from './renderMenuList';
+export * from './useMenuList';
+export * from './useMenuListStyles';
+export * from './useMenuListContextValues';
 //# sourceMappingURL=index.js.map

package/lib/components/MenuList/renderMenuList.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
-import { MenuListProvider } from "../../contexts/menuListContext";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import { MenuListProvider } from '../../contexts/menuListContext';
 /**
  * Function that renders the final JSX of the component
  */

package/lib/components/MenuList/useMenuList.js

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps } from "@fluentui/react-utilities";
-import { useArrowNavigationGroup, useFocusFinders } from "@fluentui/react-tabster";
-import { useHasParentContext } from "@fluentui/react-context-selector";
-import { useMenuContext_unstable } from "../../contexts/menuContext";
-import { MenuContext } from "../../contexts/menuContext";
+import * as React from 'react';
+import { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps } from '@fluentui/react-utilities';
+import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
+import { useHasParentContext } from '@fluentui/react-context-selector';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { MenuContext } from '../../contexts/menuContext';
 /**
  * Returns the props and state required to render the component
  */
@@ -22,21 +22,24 @@ export const useMenuList_unstable = (props, ref) => {
   if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
     // TODO throw warnings in development safely
     // eslint-disable-next-line no-console
-    console.warn("You are using both MenuList and Menu props, we recommend you to use Menu props when available");
+    console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');
   }
   const innerRef = React.useRef(null);
   const setFocusByFirstCharacter = React.useCallback((e, itemEl) => {
     // TODO use some kind of children registration to reduce dependency on DOM roles
-    const acceptedRoles = ["menuitem", "menuitemcheckbox", "menuitemradio"];
+    const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
     if (!innerRef.current) {
       return;
     }
-    const menuItems = findAllFocusable(innerRef.current, el => el.hasAttribute("role") && acceptedRoles.indexOf(el.getAttribute("role")) !== -1);
+    const menuItems = findAllFocusable(innerRef.current, el => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);
     let startIndex = menuItems.indexOf(itemEl) + 1;
     if (startIndex === menuItems.length) {
       startIndex = 0;
     }
-    const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());
+    const firstChars = menuItems.map(menuItem => {
+      var _menuItem_textContent;
+      return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();
+    });
     const char = e.key.toLowerCase();
     const getIndexFirstChars = (start, firstChar) => {
       for (let i = start; i < firstChars.length; i++) {
@@ -57,21 +60,23 @@ export const useMenuList_unstable = (props, ref) => {
       menuItems[index].focus();
     }
   }, [findAllFocusable]);
+  var _props_checkedValues;
   const [checkedValues, setCheckedValues] = useControllableState({
-    state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),
+    state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,
     defaultState: props.defaultCheckedValues,
     initialState: {}
   });
-  const handleCheckedValueChange = props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);
+  var _props_onCheckedValueChange;
+  const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;
   const toggleCheckbox = useEventCallback((e, name, value, checked) => {
-    const checkedItems = checkedValues?.[name] || [];
+    const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
     const newCheckedItems = [...checkedItems];
     if (checked) {
       newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
     } else {
       newCheckedItems.push(value);
     }
-    handleCheckedValueChange?.(e, {
+    handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
       name,
       checkedItems: newCheckedItems
     });
@@ -86,19 +91,19 @@ export const useMenuList_unstable = (props, ref) => {
       ...s,
       [name]: newCheckedItems
     }));
-    handleCheckedValueChange?.(e, {
+    handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
       name,
       checkedItems: newCheckedItems
     });
   });
   return {
     components: {
-      root: "div"
+      root: 'div'
     },
-    root: getNativeElementProps("div", {
+    root: getNativeElementProps('div', {
       ref: useMergedRefs(ref, innerRef),
-      role: "menu",
-      "aria-labelledby": menuContext.triggerId,
+      role: 'menu',
+      'aria-labelledby': menuContext.triggerId,
       ...focusAttributes,
       ...props
     }),

package/lib/components/MenuList/useMenuList.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMergedRefs","useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useFocusFinders","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","role","triggerId","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"sources":["../../../src/components/MenuList/useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  useControllableState,\n  getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\n  const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: hasMenuContext } });\n\n  if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n    // TODO throw warnings in development safely\n    // eslint-disable-next-line no-console\n    console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n  }\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      // TODO use some kind of children registration to reduce dependency on DOM roles\n      const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n      if (!innerRef.current) {\n        return;\n      }\n\n      const menuItems = findAllFocusable(\n        innerRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n      );\n\n      let startIndex = menuItems.indexOf(itemEl) + 1;\n      if (startIndex === menuItems.length) {\n        startIndex = 0;\n      }\n\n      const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n      const char = e.key.toLowerCase();\n\n      const getIndexFirstChars = (start: number, firstChar: string) => {\n        for (let i = start; i < firstChars.length; i++) {\n          if (char === firstChars[i]) {\n            return i;\n          }\n        }\n        return -1;\n      };\n\n      // Check remaining slots in the menu\n      let index = getIndexFirstChars(startIndex, char);\n\n      // If not found in remaining slots, check from beginning\n      if (index === -1) {\n        index = getIndexFirstChars(0, char);\n      }\n\n      // If match was found...\n      if (index > -1) {\n        menuItems[index].focus();\n      }\n    },\n    [findAllFocusable],\n  );\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange =\n    props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n  const toggleCheckbox = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n      const checkedItems = checkedValues?.[name] || [];\n      const newCheckedItems = [...checkedItems];\n      if (checked) {\n        newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n      } else {\n        newCheckedItems.push(value);\n      }\n\n      handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    },\n  );\n\n  const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n    const newCheckedItems = [value];\n    setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'menu',\n      'aria-labelledby': menuContext.triggerId,\n      ...focusAttributes,\n      ...props,\n    }),\n    hasIcons: menuContext.hasIcons || false,\n    hasCheckmarks: menuContext.hasCheckmarks || false,\n    checkedValues,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n  };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n  return {\n    checkedValues,\n    onCheckedValueChange,\n    triggerId,\n    hasIcons,\n    hasCheckmarks,\n  };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n  props: MenuListProps,\n  contextValue: ReturnType<typeof useMenuContextSelectors>,\n  hasMenuContext: boolean,\n) => {\n  let isUsingPropsAndContext = false;\n  for (const val in contextValue) {\n    if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n      isUsingPropsAndContext = true;\n    }\n  }\n\n  return hasMenuContext && isUsingPropsAndContext;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useMergedRefs","useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useFocusFinders","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","role","triggerId","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"sources":["../../../src/components/MenuList/useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  useControllableState,\n  getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\n  const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: hasMenuContext } });\n\n  if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n    // TODO throw warnings in development safely\n    // eslint-disable-next-line no-console\n    console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n  }\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      // TODO use some kind of children registration to reduce dependency on DOM roles\n      const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n      if (!innerRef.current) {\n        return;\n      }\n\n      const menuItems = findAllFocusable(\n        innerRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n      );\n\n      let startIndex = menuItems.indexOf(itemEl) + 1;\n      if (startIndex === menuItems.length) {\n        startIndex = 0;\n      }\n\n      const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n      const char = e.key.toLowerCase();\n\n      const getIndexFirstChars = (start: number, firstChar: string) => {\n        for (let i = start; i < firstChars.length; i++) {\n          if (char === firstChars[i]) {\n            return i;\n          }\n        }\n        return -1;\n      };\n\n      // Check remaining slots in the menu\n      let index = getIndexFirstChars(startIndex, char);\n\n      // If not found in remaining slots, check from beginning\n      if (index === -1) {\n        index = getIndexFirstChars(0, char);\n      }\n\n      // If match was found...\n      if (index > -1) {\n        menuItems[index].focus();\n      }\n    },\n    [findAllFocusable],\n  );\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange =\n    props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n  const toggleCheckbox = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n      const checkedItems = checkedValues?.[name] || [];\n      const newCheckedItems = [...checkedItems];\n      if (checked) {\n        newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n      } else {\n        newCheckedItems.push(value);\n      }\n\n      handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    },\n  );\n\n  const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n    const newCheckedItems = [value];\n    setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'menu',\n      'aria-labelledby': menuContext.triggerId,\n      ...focusAttributes,\n      ...props,\n    }),\n    hasIcons: menuContext.hasIcons || false,\n    hasCheckmarks: menuContext.hasCheckmarks || false,\n    checkedValues,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n  };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n  return {\n    checkedValues,\n    onCheckedValueChange,\n    triggerId,\n    hasIcons,\n    hasCheckmarks,\n  };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n  props: MenuListProps,\n  contextValue: ReturnType<typeof useMenuContextSelectors>,\n  hasMenuContext: boolean,\n) => {\n  let isUsingPropsAndContext = false;\n  for (const val in contextValue) {\n    if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n      isUsingPropsAndContext = true;\n    }\n  }\n\n  return hasMenuContext && isUsingPropsAndContext;\n};\n"],"mappings":"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"}

package/lib/components/MenuList/useMenuListStyles.js

@@ -1,6 +1,6 @@
-import { mergeClasses, __styles, shorthands } from "@griffel/react";
+import { mergeClasses, __styles, shorthands } from '@griffel/react';
 export const menuListClassNames = {
-  root: "fui-MenuList"
+  root: 'fui-MenuList'
 };
 const useStyles = /*#__PURE__*/__styles({
   root: {