@fluentui/react-menu 9.5.2 → 9.5.4

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,oBAAT,QAAqC,yBAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM;IAAE,IAAF;IAAQ;EAAR,IAAkB,KAAxB;EAEA,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,IAAG;;;IACpD,MAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,IAAH,CAArB,KAAiC,EAAtD;IACA,OAAO,YAAY,CAAC,OAAb,CAAqB,KAArB,MAAgC,CAAC,CAAxC;EACD,CAH0C,CAA3C;EAKA,MAAM,WAAW,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,WAApB,CAA/C;EAEA,OAAO,EACL,GAAG,oBAAoB,CACrB,EACE,GAAG,KADL;MAEE,IAAI,EAAE,eAFR;MAGE,gBAAgB,OAHlB;MAIE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;QAC3C,YAAY,EAAE;UAAE,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;QAAZ,CAD6B;QAE3C,QAAQ,EAAE;MAFiC,CAAlB,CAJ7B;MAQE,OAAO,EAAG,CAAD,IAA8D;;;QACrE,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,IAAN,EAAY,KAAZ,EAAmB,OAAnB,CAAX;QACA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;MACD;IAXH,CADqB,EAcrB,GAdqB,CADlB;IAiBL,OAjBK;IAkBL,IAlBK;IAmBL;EAnBK,CAAP;AAqBD,CAlCM","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,oBAAoB,QAAQ,yBAAyB;AAI9D;;;AAGA,OAAO,MAAMC,yBAAyB,GAAG,CACvCC,KAAyB,EACzBC,GAAwC,KAClB;EACtB,MAAM;IAAEC,IAAI;IAAEC;EAAK,CAAE,GAAGH,KAAK;EAE7B,MAAMI,OAAO,GAAGP,2BAA2B,CAACQ,OAAO,IAAG;;IACpD,MAAMC,YAAY,GAAG,cAAO,CAACC,aAAa,0CAAGL,IAAI,CAAC,KAAI,EAAE;IACxD,OAAOI,YAAY,CAACE,OAAO,CAACL,KAAK,CAAC,KAAK,CAAC,CAAC;EAC3C,CAAC,CAAC;EAEF,MAAMM,WAAW,GAAGZ,2BAA2B,CAACQ,OAAO,IAAIA,OAAO,CAACI,WAAW,CAAC;EAE/E,OAAO;IACL,GAAGX,oBAAoB,CACrB;MACE,GAAGE,KAAK;MACRU,IAAI,EAAE,eAAe;MACrB,cAAc,EAAEN,OAAO;MACvBO,SAAS,EAAEhB,gBAAgB,CAACK,KAAK,CAACW,SAAS,EAAE;QAC3CC,YAAY,EAAE;UAAEC,QAAQ,eAAEnB,oBAACE,iBAAiB;QAAG,CAAE;QACjDkB,QAAQ,EAAE;OACX,CAAC;MACFC,OAAO,EAAGC,CAAyD,IAAI;;QACrEP,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGO,CAAC,EAAEd,IAAI,EAAEC,KAAK,EAAEC,OAAO,CAAC;QACtC,WAAK,CAACW,OAAO,+CAAbf,KAAK,EAAWgB,CAAC,CAAC;MACpB;KACD,EACDf,GAAG,CACJ;IACDG,OAAO;IACPF,IAAI;IACJC;GACD;AACH,CAAC","names":["React","resolveShorthand","Checkmark16Filled","useMenuListContext_unstable","useMenuItem_unstable","useMenuItemRadio_unstable","props","ref","name","value","checked","context","checkedItems","checkedValues","indexOf","selectRadio","role","checkmark","defaultProps","children","required","onClick","e"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/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"]}

package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js

@@ -10,23 +10,18 @@ export const menuItemRadioClassNames = {
 };
 export const useMenuItemRadioStyles_unstable = state => {
   state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
-
   if (state.content) {
     state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
   }
-
   if (state.secondaryContent) {
     state.secondaryContent.className = mergeClasses(menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
   }
-
   if (state.icon) {
     state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
   }
-
   if (state.checkmark) {
     state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
   }
-
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,0BAAT,QAA2C,+BAA3C;AAKA,OAAO,MAAM,uBAAuB,GAA4D;EAC9F,IAAI,EAAE,mBADwF;EAE9F,IAAI,EAAE,yBAFwF;EAG9F,SAAS,EAAE,8BAHmF;EAI9F,OAAO,EAAE,4BAJqF;EAK9F,gBAAgB,EAAE;AAL4E,CAAzF;AAQP,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAA8B;EAC3E,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;;EAEA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,uBAAuB,CAAC,OAAzB,EAAkC,KAAK,CAAC,OAAN,CAAc,SAAhD,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,uBAAuB,CAAC,gBADqB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;EAID;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,uBAAuB,CAAC,SAAzB,EAAoC,KAAK,CAAC,SAAN,CAAgB,SAApD,CAAxC;EACD;;EAED,0BAA0B,CAAC,KAAD,CAA1B;EACA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n  root: 'fui-MenuItemRadio',\n  icon: 'fui-MenuItemRadio__icon',\n  checkmark: 'fui-MenuItemRadio__checkmark',\n  content: 'fui-MenuItemRadio__content',\n  secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n  state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemRadioClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n  }\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,0BAA0B,QAAQ,+BAA+B;AAK1E,OAAO,MAAMC,uBAAuB,GAA4D;EAC9FC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE,yBAAyB;EAC/BC,SAAS,EAAE,8BAA8B;EACzCC,OAAO,EAAE,4BAA4B;EACrCC,gBAAgB,EAAE;CACnB;AAED,OAAO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAI;EAC3EA,KAAK,CAACN,IAAI,CAACO,SAAS,GAAGX,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACO,SAAS,CAAC;EAEvF,IAAID,KAAK,CAACH,OAAO,EAAE;IACjBG,KAAK,CAACH,OAAO,CAACI,SAAS,GAAGX,YAAY,CAACG,uBAAuB,CAACI,OAAO,EAAEG,KAAK,CAACH,OAAO,CAACI,SAAS,CAAC;;EAGlG,IAAID,KAAK,CAACF,gBAAgB,EAAE;IAC1BE,KAAK,CAACF,gBAAgB,CAACG,SAAS,GAAGX,YAAY,CAC7CG,uBAAuB,CAACK,gBAAgB,EACxCE,KAAK,CAACF,gBAAgB,CAACG,SAAS,CACjC;;EAGH,IAAID,KAAK,CAACL,IAAI,EAAE;IACdK,KAAK,CAACL,IAAI,CAACM,SAAS,GAAGX,YAAY,CAACG,uBAAuB,CAACE,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACM,SAAS,CAAC;;EAGzF,IAAID,KAAK,CAACJ,SAAS,EAAE;IACnBI,KAAK,CAACJ,SAAS,CAACK,SAAS,GAAGX,YAAY,CAACG,uBAAuB,CAACG,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACK,SAAS,CAAC;;EAGxGT,0BAA0B,CAACQ,KAAK,CAAC;EACjCT,2BAA2B,CAACS,KAAK,CAAC;AACpC,CAAC","names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","useMenuItemRadioStyles_unstable","state","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n  root: 'fui-MenuItemRadio',\n  icon: 'fui-MenuItemRadio__icon',\n  checkmark: 'fui-MenuItemRadio__checkmark',\n  content: 'fui-MenuItemRadio__content',\n  secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n  state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemRadioClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n  }\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"]}

package/lib/components/MenuList/MenuList.js

@@ -6,7 +6,6 @@ import { useMenuListStyles_unstable } from './useMenuListStyles';
 /**
  * Define a styled MenuList, using the `useMenuList_unstable` hook.
  */
-
 export const MenuList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuList_unstable(props, ref);
   const contextValues = useMenuListContextValues_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuList/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EACA,MAAM,aAAa,GAAG,iCAAiC,CAAC,KAAD,CAAvD;EACA,0BAA0B,CAAC,KAAD,CAA1B;EAEA,OAAO,uBAAuB,CAAC,KAAD,EAAQ,aAAR,CAA9B;AACD,CAN2D,CAArD;AAQP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useMenuList_unstable } from './useMenuList';\nimport { renderMenuList_unstable } from './renderMenuList';\nimport { useMenuListContextValues_unstable } from './useMenuListContextValues';\nimport { useMenuListStyles_unstable } from './useMenuListStyles';\nimport type { MenuListProps } from './MenuList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuList, using the `useMenuList_unstable` hook.\n */\nexport const MenuList: ForwardRefComponent<MenuListProps> = React.forwardRef((props, ref) => {\n  const state = useMenuList_unstable(props, ref);\n  const contextValues = useMenuListContextValues_unstable(state);\n  useMenuListStyles_unstable(state);\n\n  return renderMenuList_unstable(state, contextValues);\n});\n\nMenuList.displayName = 'MenuList';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,iCAAiC,QAAQ,4BAA4B;AAC9E,SAASC,0BAA0B,QAAQ,qBAAqB;AAIhE;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGR,oBAAoB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAME,aAAa,GAAGP,iCAAiC,CAACM,KAAK,CAAC;EAC9DL,0BAA0B,CAACK,KAAK,CAAC;EAEjC,OAAOP,uBAAuB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFL,QAAQ,CAACM,WAAW,GAAG,UAAU","names":["React","useMenuList_unstable","renderMenuList_unstable","useMenuListContextValues_unstable","useMenuListStyles_unstable","MenuList","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuList/MenuList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuList_unstable } from './useMenuList';\nimport { renderMenuList_unstable } from './renderMenuList';\nimport { useMenuListContextValues_unstable } from './useMenuListContextValues';\nimport { useMenuListStyles_unstable } from './useMenuListStyles';\nimport type { MenuListProps } from './MenuList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuList, using the `useMenuList_unstable` hook.\n */\nexport const MenuList: ForwardRefComponent<MenuListProps> = React.forwardRef((props, ref) => {\n  const state = useMenuList_unstable(props, ref);\n  const contextValues = useMenuListContextValues_unstable(state);\n  useMenuListStyles_unstable(state);\n\n  return renderMenuList_unstable(state, contextValues);\n});\n\nMenuList.displayName = 'MenuList';\n"]}

package/lib/components/MenuList/renderMenuList.js

@@ -4,7 +4,6 @@ import { MenuListProvider } from '../../contexts/menuListContext';
 /**
  * Function that renders the final JSX of the component
  */
-
 export const renderMenuList_unstable = (state, contextValues) => {
   const {
     slots,
@@ -12,7 +11,8 @@ export const renderMenuList_unstable = (state, contextValues) => {
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(MenuListProvider, {
     value: contextValues.menuList
-  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }));
 };
 //# sourceMappingURL=renderMenuList.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuList/renderMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,gBAAT,QAAiC,gCAAjC;AAEA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAjB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues) => {\n  const { slots, slotProps } = getSlots<MenuListSlots>(state);\n\n  return (\n    <MenuListProvider value={contextValues.menuList}>\n      <slots.root {...slotProps.root} />\n    </MenuListProvider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,gBAAgB,QAAQ,gCAAgC;AAEjE;;;AAGA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAgBG,KAAK,CAAC;EAE3D,oBACEJ,oBAACE,gBAAgB;IAACM,KAAK,EAAEH,aAAa,CAACI;EAAQ,gBAC7CT,oBAACM,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CACjB;AAEvB,CAAC","names":["React","getSlots","MenuListProvider","renderMenuList_unstable","state","contextValues","slots","slotProps","value","menuList","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuList/renderMenuList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues) => {\n  const { slots, slotProps } = getSlots<MenuListSlots>(state);\n\n  return (\n    <MenuListProvider value={contextValues.menuList}>\n      <slots.root {...slotProps.root} />\n    </MenuListProvider>\n  );\n};\n"]}

package/lib/components/MenuList/useMenuList.js

@@ -7,7 +7,6 @@ import { MenuContext } from '../../contexts/menuContext';
 /**
  * Returns the props and state required to render the component
  */
-
 export const useMenuList_unstable = (props, ref) => {
   const focusAttributes = useArrowNavigationGroup({
     circular: true,
@@ -20,54 +19,43 @@ export const useMenuList_unstable = (props, ref) => {
   } = useFocusFinders();
   const menuContext = useMenuContextSelectors();
   const hasMenuContext = useHasParentContext(MenuContext);
-
   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');
   }
-
   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'];
-
     if (!innerRef.current) {
       return;
     }
-
     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 => {
       var _a;
-
       return (_a = menuItem.textContent) === null || _a === void 0 ? void 0 : _a.charAt(0).toLowerCase();
     });
     const char = e.key.toLowerCase();
-
     const getIndexFirstChars = (start, firstChar) => {
       for (let i = start; i < firstChars.length; i++) {
         if (char === firstChars[i]) {
           return i;
         }
       }
-
       return -1;
-    }; // Check remaining slots in the menu
-
-
-    let index = getIndexFirstChars(startIndex, char); // If not found in remaining slots, check from beginning
-
+    };
+    // Check remaining slots in the menu
+    let index = getIndexFirstChars(startIndex, char);
+    // If not found in remaining slots, check from beginning
     if (index === -1) {
       index = getIndexFirstChars(0, char);
-    } // If match was found...
-
-
+    }
+    // If match was found...
     if (index > -1) {
       menuItems[index].focus();
     }
@@ -81,24 +69,24 @@ export const useMenuList_unstable = (props, ref) => {
   const toggleCheckbox = useEventCallback((e, name, value, checked) => {
     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 === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
       name,
       checkedItems: newCheckedItems
     });
-    setCheckedValues(s => ({ ...s,
+    setCheckedValues(s => ({
+      ...s,
       [name]: newCheckedItems
     }));
   });
   const selectRadio = useEventCallback((e, name, value) => {
     const newCheckedItems = [value];
-    setCheckedValues(s => ({ ...s,
+    setCheckedValues(s => ({
+      ...s,
       [name]: newCheckedItems
     }));
     handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
@@ -128,7 +116,6 @@ export const useMenuList_unstable = (props, ref) => {
 /**
  * Adds some sugar to fetching multiple context selector values
  */
-
 const useMenuContextSelectors = () => {
   const checkedValues = useMenuContext_unstable(context => context.checkedValues);
   const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);
@@ -146,17 +133,13 @@ const useMenuContextSelectors = () => {
 /**
  * Helper function to detect if props and MenuContext values are both used
  */
-
-
 const usingPropsAndMenuContext = (props, contextValue, hasMenuContext) => {
   let isUsingPropsAndContext = false;
-
   for (const val in contextValue) {
     if (props[val]) {
       isUsingPropsAndContext = true;
     }
   }
-
   return hasMenuContext && isUsingPropsAndContext;
 };
 //# sourceMappingURL=useMenuList.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuList/useMenuList.ts"],"names":[],"mappings":"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","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 focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\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: hasMenuContext ? menuContext.checkedValues : props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange = hasMenuContext ? menuContext.onCheckedValueChange : props.onCheckedValueChange;\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["React","useMergedRefs","useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useFocusFinders","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","focusAttributes","circular","ignoreDefaultKeydown","Tab","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","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","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"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/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 focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\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: hasMenuContext ? menuContext.checkedValues : props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange = hasMenuContext ? menuContext.onCheckedValueChange : props.onCheckedValueChange;\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"]}

package/lib/components/MenuList/useMenuListContextValues.js

@@ -6,8 +6,8 @@ export function useMenuListContextValues_unstable(state) {
     selectRadio,
     setFocusByFirstCharacter,
     toggleCheckbox
-  } = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-
+  } = state;
+  // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
   const menuList = {
     checkedValues,
     hasCheckmarks,

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuList/useMenuListContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,iCAAV,CAA4C,KAA5C,EAAgE;EACpE,MAAM;IAAE,aAAF;IAAiB,aAAjB;IAAgC,QAAhC;IAA0C,WAA1C;IAAuD,wBAAvD;IAAiF;EAAjF,IAAoG,KAA1G,CADoE,CAGpE;;EACA,MAAM,QAAQ,GAAG;IACf,aADe;IAEf,aAFe;IAGf,QAHe;IAIf,WAJe;IAKf,wBALe;IAMf;EANe,CAAjB;EASA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n  const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menuList = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    selectRadio,\n    setFocusByFirstCharacter,\n    toggleCheckbox,\n  };\n\n  return { menuList };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAEA,OAAM,SAAUA,iCAAiC,CAACC,KAAoB;EACpE,MAAM;IAAEC,aAAa;IAAEC,aAAa;IAAEC,QAAQ;IAAEC,WAAW;IAAEC,wBAAwB;IAAEC;EAAc,CAAE,GAAGN,KAAK;EAE/G;EACA,MAAMO,QAAQ,GAAG;IACfN,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,WAAW;IACXC,wBAAwB;IACxBC;GACD;EAED,OAAO;IAAEC;EAAQ,CAAE;AACrB","names":["useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuList/useMenuListContextValues.ts"],"sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n  const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menuList = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    selectRadio,\n    setFocusByFirstCharacter,\n    toggleCheckbox,\n  };\n\n  return { menuList };\n}\n"]}

package/lib/components/MenuList/useMenuListStyles.js

@@ -2,22 +2,19 @@ import { mergeClasses, __styles, shorthands } from '@griffel/react';
 export const menuListClassNames = {
   root: 'fui-MenuList'
 };
-
 const useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
-    "i8kkvl": "f16mnhsx",
-    "Belr9w4": "fbi42co"
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    i8kkvl: "f16mnhsx",
+    Belr9w4: "fbi42co"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}"]
 });
 /**
  * Apply styling to the Menu slots based on the state
  */
-
-
 export const useMenuListStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE;AADyD,CAA1D;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAQA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,MAAM,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;EACA,OAAO,KAAP;AACD,CAJM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.gap('2px'),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,YAAY,YAAcC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAMhB;AAEF;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC/F,OAAOF,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","menuListClassNames","root","useStyles","useMenuListStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.gap('2px'),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"]}

package/lib/components/MenuPopover/MenuPopover.js

@@ -5,7 +5,6 @@ import { renderMenuPopover_unstable } from './renderMenuPopover';
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
  */
-
 export const MenuPopover = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuPopover_unstable(props, ref);
   useMenuPopoverStyles_unstable(state);

package/lib/components/MenuPopover/MenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAIhE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDL,6BAA6B,CAACM,KAAK,CAAC;EACpC,OAAOL,0BAA0B,CAACK,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","MenuPopover","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"]}

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -4,19 +4,18 @@ import { Portal } from '@fluentui/react-portal';
 /**
  * Render the final JSX of MenuPopover
  */
-
 export const renderMenuPopover_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-
   if (state.inline) {
-    return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+    return /*#__PURE__*/React.createElement(slots.root, {
+      ...slotProps.root
     });
   }
-
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }));
 };
 //# sourceMappingURL=renderMenuPopover.js.map

package/lib/components/MenuPopover/renderMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AAEA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;;EAEA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;IAAf,CAAX,CAAP;EACD;;EAED,oBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACG,MAAM,EAAE;IAChB,oBAAOP,oBAACK,KAAK,CAACG,IAAI;MAAA,GAAKF,SAAS,CAACE;IAAI,EAAI;;EAG3C,oBACER,oBAACE,MAAM,qBACLF,oBAACK,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI,CAC3B;AAEb,CAAC","names":["React","getSlots","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"]}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -14,10 +14,8 @@ import { useIsSubmenu } from '../../utils/useIsSubmenu';
  * @param props - props from this instance of MenuPopover
  * @param ref - reference to root HTMLElement of MenuPopover
  */
-
 export const useMenuPopover_unstable = (props, ref) => {
   var _a;
-
   const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);
   const setOpen = useMenuContext_unstable(context => context.setOpen);
   const open = useMenuContext_unstable(context => context.open);
@@ -28,9 +26,9 @@ export const useMenuPopover_unstable = (props, ref) => {
   const {
     dir
   } = useFluent();
-  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight; // use DOM listener since react events propagate up the react tree
+  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
+  // use DOM listener since react events propagate up the react tree
   // no need to do `contains` logic as menus are all positioned in different portals
-
   const mouseOverListenerCallbackRef = React.useCallback(node => {
     if (node) {
       // Dispatches the custom menu mouse enter event with throttling
@@ -39,9 +37,9 @@ export const useMenuPopover_unstable = (props, ref) => {
       node.addEventListener('mouseover', e => {
         if (canDispatchCustomEventRef.current) {
           canDispatchCustomEventRef.current = false;
-          dispatchMenuEnterEvent(popoverRef.current, e); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          dispatchMenuEnterEvent(popoverRef.current, e);
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore #16889 Node setTimeout type leaking
-
           throttleDispatchTimerRef.current = setTimeout(() => canDispatchCustomEventRef.current = true, 250);
         }
       });
@@ -69,14 +67,11 @@ export const useMenuPopover_unstable = (props, ref) => {
         event
       });
     }
-
     onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);
   });
   rootProps.onKeyDown = useEventCallback(event => {
     var _a;
-
     const key = event.key;
-
     if (key === Escape || isSubmenu && key === CloseArrowKey) {
       if (open && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
         setOpen(event, {
@@ -84,13 +79,12 @@ export const useMenuPopover_unstable = (props, ref) => {
           keyboard: true,
           type: 'menuPopoverKeyDown',
           event
-        }); // stop propagation to avoid conflicting with other elements that listen for `Escape`
+        });
+        // stop propagation to avoid conflicting with other elements that listen for `Escape`
         // e,g: Dialog, Popover and Tooltip
-
         event.stopPropagation();
       }
     }
-
     if (key === Tab) {
       setOpen(event, {
         open: false,
@@ -100,7 +94,6 @@ export const useMenuPopover_unstable = (props, ref) => {
       });
       event.preventDefault();
     }
-
     onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
   });
   return {

package/lib/components/MenuPopover/useMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n      event.preventDefault();\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","rootProps","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","preventDefault","components","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n      event.preventDefault();\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"]}