@fluentui/react-menu 9.24.1 → 9.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. package/CHANGELOG.md +36 -11
  2. package/dist/index.d.ts +125 -3
  3. package/lib/Menu.js +1 -1
  4. package/lib/Menu.js.map +1 -1
  5. package/lib/MenuItemLink.js +1 -1
  6. package/lib/MenuItemLink.js.map +1 -1
  7. package/lib/MenuItemRadio.js +1 -1
  8. package/lib/MenuItemRadio.js.map +1 -1
  9. package/lib/MenuList.js +1 -1
  10. package/lib/MenuList.js.map +1 -1
  11. package/lib/MenuPopover.js +1 -1
  12. package/lib/MenuPopover.js.map +1 -1
  13. package/lib/MenuTrigger.js +1 -1
  14. package/lib/MenuTrigger.js.map +1 -1
  15. package/lib/components/Menu/Menu.types.js.map +1 -1
  16. package/lib/components/Menu/index.js +1 -1
  17. package/lib/components/Menu/index.js.map +1 -1
  18. package/lib/components/Menu/useMenu.js +24 -12
  19. package/lib/components/Menu/useMenu.js.map +1 -1
  20. package/lib/components/MenuDivider/useMenuDividerStyles.styles.js +1 -0
  21. package/lib/components/MenuDivider/useMenuDividerStyles.styles.js.map +1 -1
  22. package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js +1 -0
  23. package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -1
  24. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +1 -0
  25. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
  26. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +1 -0
  27. package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -1
  28. package/lib/components/MenuItem/MenuItem.types.js.map +1 -1
  29. package/lib/components/MenuItem/index.js +2 -1
  30. package/lib/components/MenuItem/index.js.map +1 -1
  31. package/lib/components/MenuItem/useCharacterSearch.js +1 -0
  32. package/lib/components/MenuItem/useCharacterSearch.js.map +1 -1
  33. package/lib/components/MenuItem/useMenuItem.js +1 -145
  34. package/lib/components/MenuItem/useMenuItem.js.map +1 -1
  35. package/lib/components/MenuItem/useMenuItemBase.js +147 -0
  36. package/lib/components/MenuItem/useMenuItemBase.js.map +1 -0
  37. package/lib/components/MenuItem/useMenuItemStyles.styles.js +27 -6
  38. package/lib/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
  39. package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js +28 -1
  40. package/lib/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -1
  41. package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js +1 -3
  42. package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
  43. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js +6 -0
  44. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js.map +1 -1
  45. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +6 -0
  46. package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -1
  47. package/lib/components/MenuItemLink/index.js +1 -1
  48. package/lib/components/MenuItemLink/index.js.map +1 -1
  49. package/lib/components/MenuItemLink/useMenuItemLink.js +30 -0
  50. package/lib/components/MenuItemLink/useMenuItemLink.js.map +1 -1
  51. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.js +5 -0
  52. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.js.map +1 -1
  53. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +5 -0
  54. package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -1
  55. package/lib/components/MenuItemRadio/useMenuItemRadio.js +1 -3
  56. package/lib/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
  57. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.js +6 -0
  58. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.js.map +1 -1
  59. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +6 -0
  60. package/lib/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -1
  61. package/lib/components/MenuItemSwitch/useMenuItemSwitch.js +0 -1
  62. package/lib/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
  63. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +7 -0
  64. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
  65. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +7 -0
  66. package/lib/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -1
  67. package/lib/components/MenuList/index.js +1 -1
  68. package/lib/components/MenuList/index.js.map +1 -1
  69. package/lib/components/MenuList/useMenuList.js +115 -65
  70. package/lib/components/MenuList/useMenuList.js.map +1 -1
  71. package/lib/components/MenuList/useMenuListStyles.styles.js +1 -0
  72. package/lib/components/MenuList/useMenuListStyles.styles.js.map +1 -1
  73. package/lib/components/MenuList/useMenuListStyles.styles.raw.js +1 -0
  74. package/lib/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -1
  75. package/lib/components/MenuPopover/index.js +1 -1
  76. package/lib/components/MenuPopover/index.js.map +1 -1
  77. package/lib/components/MenuPopover/useMenuPopover.js +27 -7
  78. package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
  79. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js +1 -0
  80. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
  81. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +1 -0
  82. package/lib/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
  83. package/lib/components/MenuSplitGroup/useMenuSplitGroup.js +2 -1
  84. package/lib/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -1
  85. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +1 -0
  86. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
  87. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +1 -0
  88. package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -1
  89. package/lib/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
  90. package/lib/components/MenuTrigger/index.js +1 -1
  91. package/lib/components/MenuTrigger/index.js.map +1 -1
  92. package/lib/components/MenuTrigger/useMenuTrigger.js +39 -12
  93. package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
  94. package/lib/index.js +9 -14
  95. package/lib/index.js.map +1 -1
  96. package/lib/selectable/useCheckmarkStyles.styles.js +1 -0
  97. package/lib/selectable/useCheckmarkStyles.styles.js.map +1 -1
  98. package/lib/selectable/useCheckmarkStyles.styles.raw.js +1 -0
  99. package/lib/selectable/useCheckmarkStyles.styles.raw.js.map +1 -1
  100. package/lib-commonjs/Menu.js +3 -0
  101. package/lib-commonjs/Menu.js.map +1 -1
  102. package/lib-commonjs/MenuItemLink.js +3 -0
  103. package/lib-commonjs/MenuItemLink.js.map +1 -1
  104. package/lib-commonjs/MenuItemRadio.js.map +1 -1
  105. package/lib-commonjs/MenuList.js +3 -0
  106. package/lib-commonjs/MenuList.js.map +1 -1
  107. package/lib-commonjs/MenuPopover.js +3 -0
  108. package/lib-commonjs/MenuPopover.js.map +1 -1
  109. package/lib-commonjs/MenuTrigger.js +3 -0
  110. package/lib-commonjs/MenuTrigger.js.map +1 -1
  111. package/lib-commonjs/components/Menu/Menu.types.js.map +1 -1
  112. package/lib-commonjs/components/Menu/index.js +3 -0
  113. package/lib-commonjs/components/Menu/index.js.map +1 -1
  114. package/lib-commonjs/components/Menu/useMenu.js +30 -15
  115. package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
  116. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.js +1 -0
  117. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.js.map +1 -1
  118. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js +1 -0
  119. package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map +1 -1
  120. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js +1 -0
  121. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map +1 -1
  122. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js +1 -0
  123. package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map +1 -1
  124. package/lib-commonjs/components/MenuItem/MenuItem.types.js.map +1 -1
  125. package/lib-commonjs/components/MenuItem/index.js +2 -1
  126. package/lib-commonjs/components/MenuItem/index.js.map +1 -1
  127. package/lib-commonjs/components/MenuItem/useCharacterSearch.js +1 -0
  128. package/lib-commonjs/components/MenuItem/useCharacterSearch.js.map +1 -1
  129. package/lib-commonjs/components/MenuItem/useMenuItem.js +5 -152
  130. package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
  131. package/lib-commonjs/components/MenuItem/useMenuItemBase.js +155 -0
  132. package/lib-commonjs/components/MenuItem/useMenuItemBase.js.map +1 -0
  133. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js +51 -16
  134. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.js.map +1 -1
  135. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js +28 -1
  136. package/lib-commonjs/components/MenuItem/useMenuItemStyles.styles.raw.js.map +1 -1
  137. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js +2 -2
  138. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
  139. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js +6 -0
  140. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.js.map +1 -1
  141. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js +6 -0
  142. package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map +1 -1
  143. package/lib-commonjs/components/MenuItemLink/index.js +3 -0
  144. package/lib-commonjs/components/MenuItemLink/index.js.map +1 -1
  145. package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js +35 -3
  146. package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js.map +1 -1
  147. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.js +5 -0
  148. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.js.map +1 -1
  149. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js +5 -0
  150. package/lib-commonjs/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map +1 -1
  151. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js +2 -2
  152. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
  153. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.js +6 -0
  154. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.js.map +1 -1
  155. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js +6 -0
  156. package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.styles.raw.js.map +1 -1
  157. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitch.js.map +1 -1
  158. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js +7 -0
  159. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.js.map +1 -1
  160. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js +7 -0
  161. package/lib-commonjs/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.raw.js.map +1 -1
  162. package/lib-commonjs/components/MenuList/index.js +3 -0
  163. package/lib-commonjs/components/MenuList/index.js.map +1 -1
  164. package/lib-commonjs/components/MenuList/useMenuList.js +108 -67
  165. package/lib-commonjs/components/MenuList/useMenuList.js.map +1 -1
  166. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js +1 -0
  167. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.js.map +1 -1
  168. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js +1 -0
  169. package/lib-commonjs/components/MenuList/useMenuListStyles.styles.raw.js.map +1 -1
  170. package/lib-commonjs/components/MenuPopover/index.js +3 -0
  171. package/lib-commonjs/components/MenuPopover/index.js.map +1 -1
  172. package/lib-commonjs/components/MenuPopover/useMenuPopover.js +26 -7
  173. package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
  174. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js +1 -0
  175. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.js.map +1 -1
  176. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js +1 -0
  177. package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.styles.raw.js.map +1 -1
  178. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -1
  179. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js +1 -0
  180. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map +1 -1
  181. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js +1 -0
  182. package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map +1 -1
  183. package/lib-commonjs/components/MenuTrigger/MenuTrigger.types.js.map +1 -1
  184. package/lib-commonjs/components/MenuTrigger/index.js +3 -0
  185. package/lib-commonjs/components/MenuTrigger/index.js.map +1 -1
  186. package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +32 -14
  187. package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
  188. package/lib-commonjs/index.js +27 -5
  189. package/lib-commonjs/index.js.map +1 -1
  190. package/lib-commonjs/selectable/useCheckmarkStyles.styles.js +1 -0
  191. package/lib-commonjs/selectable/useCheckmarkStyles.styles.js.map +1 -1
  192. package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js +1 -0
  193. package/lib-commonjs/selectable/useCheckmarkStyles.styles.raw.js.map +1 -1
  194. package/package.json +10 -10
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\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 subText: 'fui-MenuItemRadio__subText',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState): void => {\n 'use no memo';\n\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 if (state.subText) {\n state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"mappings":"AAAA;;;;;;;;;;;;IASaG,uBAAAA;;;IASAO,+BAAAA;;;;uBAhBgB,iBAAiB;uBACF,yBAAyB;yCAC1B,uCAAuC;AAK3E,gCAAyF;IAC9FN,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEK,wCAAwC,CAACE;IAC9C;IAEAA,MAAMP,IAAI,CAACQ,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEtF,IAAID,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACK,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACjG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1BG,MAAMH,gBAAgB,CAACI,SAAS,OAAGZ,mBAAAA,EACjCG,wBAAwBK,gBAAgB,EACxCG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACdM,MAAMN,IAAI,CAACO,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IACxF;IAEA,IAAID,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACM,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IACvG;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,uBAAAA,EAAaG,wBAAwBM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACjG;QAEAV,mDAAAA,EAA2BS;QAC3BV,kCAAAA,EAA4BU;AAC9B,EAAE"}
1
+ {"version":3,"sources":["../src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\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 subText: 'fui-MenuItemRadio__subText',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState): void => {\n 'use no memo';\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n if (state.content) {\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(\n menuItemRadioClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.subText) {\n // eslint-disable-next-line react-hooks/immutability\n state.subText.className = mergeClasses(menuItemRadioClassNames.subText, state.subText.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemRadioClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemRadioStyles_unstable","state","className"],"mappings":"AAAA;;;;;;;;;;;;IASaG,uBAAAA;;;IASAO,+BAAAA;;;;uBAhBgB,iBAAiB;uBACF,yBAAyB;yCAC1B,uCAAuC;AAK3E,gCAAyF;IAC9FN,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEK,wCAAwC,CAACE;IAC9C;IAEA,oDAAoD;IACpDA,MAAMP,IAAI,CAACQ,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEtF,IAAID,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACK,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACjG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDG,MAAMH,gBAAgB,CAACI,SAAS,OAAGZ,mBAAAA,EACjCG,wBAAwBK,gBAAgB,EACxCG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACd,oDAAoD;QACpDM,MAAMN,IAAI,CAACO,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IACxF;IAEA,IAAID,MAAML,SAAS,EAAE;QACnB,oDAAoD;QACpDK,MAAML,SAAS,CAACM,SAAS,OAAGZ,mBAAAA,EAAaG,wBAAwBG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IACvG;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjB,oDAAoD;QACpDE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,uBAAAA,EAAaG,wBAAwBM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACjG;QAEAV,mDAAAA,EAA2BS;QAC3BV,kCAAAA,EAA4BU;AAC9B,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckboxBase_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const state = useMenuItemSwitchBase_unstable(props, ref);\n\n // Set default icon for switch indicator\n if (state.switchIndicator) {\n state.switchIndicator.children ??= <CircleFilled className={circleFilledClassName} />;\n }\n\n return state;\n};\n\n/**\n * Base hook for MenuItemSwitch component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItemSwitch.\n *\n * @internal\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitchBase_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const baseState = useMenuItemCheckboxBase_unstable(props, ref);\n return {\n ...baseState,\n switchIndicator: slot.optional(props.switchIndicator, {\n renderByDefault: true,\n elementType: 'span',\n }),\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n switchIndicator: 'span',\n },\n };\n};\n"],"names":["React","slot","useMenuItemCheckboxBase_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","state","useMenuItemSwitchBase_unstable","switchIndicator","children","className","baseState","optional","renderByDefault","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;IAwCaS,8BAAAA;;;8BAtBAJ;;;;;iEAhBU,QAAQ;gCACV,4BAA4B;qCAEA,0CAA0C;4BAC9D,wBAAwB;+CACf,mCAAmC;AAWlE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IAEpD,wCAAwC;IACxC,IAAIC,MAAME,eAAe,EAAE;YACzBF;;QAAAA,CAAAA,YAAAA,CAAAA,yBAAAA,MAAME,eAAAA,AAAe,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAtBH,uBAAsBG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACR,wBAAAA,EAAAA;YAAaS,WAAWR,oDAAAA;;IAC9D;IAEA,OAAOI;AACT,EAAE;AAUK,uCAAuC,CAC5CF,OACAC;IAEA,MAAMM,gBAAYX,qDAAAA,EAAiCI,OAAOC;IAC1D,OAAO;QACL,GAAGM,SAAS;QACZH,iBAAiBT,oBAAAA,CAAKa,QAAQ,CAACR,MAAMI,eAAe,EAAE;YACpDK,iBAAiB;YACjBC,aAAa;QACf;QACAC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBP,iBAAiB;QACnB;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchProps, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemCheckboxBase_unstable } from '../MenuItemCheckbox/useMenuItemCheckbox';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { circleFilledClassName } from './useMenuItemSwitchStyles.styles';\n\n/**\n * Create the state required to render MenuItemSwitch.\n *\n * The returned state can be modified with hooks such as useMenuItemSwitchStyles_unstable,\n * before being passed to renderMenuItemSwitch_unstable.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitch_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const state = useMenuItemSwitchBase_unstable(props, ref);\n\n // Set default icon for switch indicator\n if (state.switchIndicator) {\n state.switchIndicator.children ??= <CircleFilled className={circleFilledClassName} />;\n }\n\n return state;\n};\n\n/**\n * Base hook for MenuItemSwitch component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItemSwitch.\n *\n * @param props - props from this instance of MenuItemSwitch\n * @param ref - reference to root HTMLDivElement of MenuItemSwitch\n */\nexport const useMenuItemSwitchBase_unstable = (\n props: MenuItemSwitchProps,\n ref: React.Ref<HTMLDivElement>,\n): MenuItemSwitchState => {\n const baseState = useMenuItemCheckboxBase_unstable(props, ref);\n return {\n ...baseState,\n switchIndicator: slot.optional(props.switchIndicator, {\n renderByDefault: true,\n elementType: 'span',\n }),\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n switchIndicator: 'span',\n },\n };\n};\n"],"names":["React","slot","useMenuItemCheckboxBase_unstable","CircleFilled","circleFilledClassName","useMenuItemSwitch_unstable","props","ref","state","useMenuItemSwitchBase_unstable","switchIndicator","children","className","baseState","optional","renderByDefault","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;IAuCaS,8BAAAA;;;8BArBAJ;;;;;iEAhBU,QAAQ;gCACV,4BAA4B;qCAEA,0CAA0C;4BAC9D,wBAAwB;+CACf,mCAAmC;AAWlE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IAEpD,wCAAwC;IACxC,IAAIC,MAAME,eAAe,EAAE;YACzBF;;QAAAA,CAAAA,YAAAA,CAAAA,yBAAAA,MAAME,eAAAA,AAAe,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAtBH,uBAAsBG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACR,wBAAAA,EAAAA;YAAaS,WAAWR,oDAAAA;;IAC9D;IAEA,OAAOI;AACT,EAAE;AASK,uCAAuC,CAC5CF,OACAC;IAEA,MAAMM,gBAAYX,qDAAAA,EAAiCI,OAAOC;IAC1D,OAAO;QACL,GAAGM,SAAS;QACZH,iBAAiBT,oBAAAA,CAAKa,QAAQ,CAACR,MAAMI,eAAe,EAAE;YACpDK,iBAAiB;YACjBC,aAAa;QACf;QACAC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBP,iBAAiB;QACnB;IACF;AACF,EAAE"}
@@ -139,20 +139,26 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
139
139
  const switchIndicatorStyles = useSwitchIndicatorStyles();
140
140
  const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
141
141
  const multilineStyles = useMultilineStyles();
142
+ // eslint-disable-next-line react-hooks/immutability
142
143
  state.root.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.root, state.root.className);
143
144
  if (state.content) {
145
+ // eslint-disable-next-line react-hooks/immutability
144
146
  state.content.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.content, state.content.className);
145
147
  }
146
148
  if (state.secondaryContent) {
149
+ // eslint-disable-next-line react-hooks/immutability
147
150
  state.secondaryContent.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);
148
151
  }
149
152
  if (state.icon) {
153
+ // eslint-disable-next-line react-hooks/immutability
150
154
  state.icon.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.icon, state.icon.className);
151
155
  }
152
156
  if (state.subText) {
157
+ // eslint-disable-next-line react-hooks/immutability
153
158
  state.subText.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.subText, state.subText.className);
154
159
  }
155
160
  if (state.switchIndicator) {
161
+ // eslint-disable-next-line react-hooks/immutability
156
162
  state.switchIndicator.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
157
163
  }
158
164
  (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)({
@@ -166,6 +172,7 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
166
172
  checkmark: undefined,
167
173
  submenuIndicator: undefined,
168
174
  hasSubmenu: false,
175
+ submenuOpen: false,
169
176
  persistOnClick: true
170
177
  });
171
178
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center'\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true\n });\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","switch","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"mappings":"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"}
1
+ {"version":3,"sources":["useMenuItemSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuItemSwitchClassNames = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText'\n};\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n },\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n },\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n});\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center'\n }\n});\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */ export const useMenuItemSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);\n }\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n if (state.subText) {\n // eslint-disable-next-line react-hooks/immutability\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n if (state.switchIndicator) {\n // eslint-disable-next-line react-hooks/immutability\n state.switchIndicator.className = mergeClasses(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);\n }\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span'\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n submenuOpen: false,\n persistOnClick: true\n });\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","r","s","useSwitchIndicatorStyles","checked","G4r02d","De3pzq","sj55zd","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B2d53fq","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useMultilineStyles","qb2dma","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","switch","components","checkmark","submenuIndicator","undefined","hasSubmenu","submenuOpen","persistOnClick"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAYCa,qBAAqB;;;IARrBP,wBAAwB;;;oCA4EY;eAAhCwC;;;uBA/EqD,gBAAgB;yCAE3C,sCAAsC;AAC1E,iCAAiC;IACpCvC,IAAI,EAAE,oBAAoB;IAC1BC,IAAI,EAAE,0BAA0B;IAChCC,OAAO,EAAE,6BAA6B;IACtCC,gBAAgB,EAAE,sCAAsC;IACxDC,eAAe,EAAE,qCAAqC;IACtDC,OAAO,EAAE;AACb,CAAC;AACM,8BAA8B,mDAAmD;AACxF,+CAAA;AACA,MAAME,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AACzD,MAAMI,+BAA+B,GAAA,WAAA,OAAGjB,oBAAA,EAAA,YAAA,WAAA;IAAAkB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAkCvC,CAAC;AACF,MAAMC,wBAAwB,GAAA,WAAA,OAAGrB,eAAA,EAAA;IAAAsB,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAmBhC,CAAC;AACF,MAAMC,kBAAkB,GAAA,WAAA,OAAG5C,eAAA,EAAA;IAAA,UAAA;QAAA6C,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAH,CAAA,EAAA;QAAA;KAAA;AAAA,CAI1B,CAAC;AAGS,0CAA0CK,KAAK,IAAG;IACzD,aAAa;IACb,MAAM,EAAEzB,OAAO,EAAEV,OAAAA,EAAS,GAAGmC,KAAK;IAClC,MAAMC,SAAS,GAAG,CAAC,CAACpC,OAAO;IAC3B,MAAMqC,qBAAqB,GAAG5B,wBAAwB,CAAC,CAAC;IACxD,MAAM6B,yBAAyB,GAAGhC,+BAA+B,CAAC,CAAC;IACnE,MAAMiC,eAAe,GAAGP,kBAAkB,CAAC,CAAC;IAC5C,oDAAA;IACAG,KAAK,CAACxC,IAAI,CAAC6C,SAAS,OAAGlD,mBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEwC,KAAK,CAACxC,IAAI,CAAC6C,SAAS,CAAC;IACxF,IAAIL,KAAK,CAACtC,OAAO,EAAE;QACf,oDAAA;QACAsC,KAAK,CAACtC,OAAO,CAAC2C,SAAS,OAAGlD,mBAAY,EAACI,wBAAwB,CAACG,OAAO,EAAEsC,KAAK,CAACtC,OAAO,CAAC2C,SAAS,CAAC;IACrG;IACA,IAAIL,KAAK,CAACrC,gBAAgB,EAAE;QACxB,oDAAA;QACAqC,KAAK,CAACrC,gBAAgB,CAAC0C,SAAS,OAAGlD,mBAAY,EAACI,wBAAwB,CAACI,gBAAgB,EAAEqC,KAAK,CAACrC,gBAAgB,CAAC0C,SAAS,CAAC;IAChI;IACA,IAAIL,KAAK,CAACvC,IAAI,EAAE;QACZ,oDAAA;QACAuC,KAAK,CAACvC,IAAI,CAAC4C,SAAS,GAAGlD,uBAAY,EAACI,wBAAwB,CAACE,IAAI,EAAEuC,KAAK,CAACvC,IAAI,CAAC4C,SAAS,CAAC;IAC5F;IACA,IAAIL,KAAK,CAACnC,OAAO,EAAE;QACf,oDAAA;QACAmC,KAAK,CAACnC,OAAO,CAACwC,SAAS,GAAGlD,uBAAY,EAACI,wBAAwB,CAACM,OAAO,EAAEmC,KAAK,CAACnC,OAAO,CAACwC,SAAS,CAAC;IACrG;IACA,IAAIL,KAAK,CAACpC,eAAe,EAAE;QACvB,oDAAA;QACAoC,KAAK,CAACpC,eAAe,CAACyC,SAAS,OAAGlD,mBAAY,EAACI,wBAAwB,CAACK,eAAe,EAAEuC,yBAAyB,EAAE5B,OAAO,IAAI2B,qBAAqB,CAAC3B,OAAO,EAAEyB,KAAK,CAACpC,eAAe,CAACyC,SAAS,EAAEJ,SAAS,IAAIG,eAAe,CAACE,MAAM,CAAC;IACvO;QACAhD,mDAA0B,EAAC;QACvB,GAAG0C,KAAK;QACRO,UAAU,EAAE;YACR,4DAAA;YACA,GAAGP,KAAK,CAACO,UAAU;YACnBC,SAAS,EAAE,MAAM;YACjBC,gBAAgB,EAAE;QACtB,CAAC;QACDD,SAAS,EAAEE,SAAS;QACpBD,gBAAgB,EAAEC,SAAS;QAC3BC,UAAU,EAAE,KAAK;QACjBC,WAAW,EAAE,KAAK;QAClBC,cAAc,EAAE;IACpB,CAAC,CAAC;IACF,OAAOb,KAAK;AAChB,CAAC"}
@@ -104,20 +104,26 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
104
104
  const switchIndicatorStyles = useSwitchIndicatorStyles();
105
105
  const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();
106
106
  const multilineStyles = useMultilineStyles();
107
+ // eslint-disable-next-line react-hooks/immutability
107
108
  state.root.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.root, state.root.className);
108
109
  if (state.content) {
110
+ // eslint-disable-next-line react-hooks/immutability
109
111
  state.content.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.content, state.content.className);
110
112
  }
111
113
  if (state.secondaryContent) {
114
+ // eslint-disable-next-line react-hooks/immutability
112
115
  state.secondaryContent.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.secondaryContent, state.secondaryContent.className);
113
116
  }
114
117
  if (state.icon) {
118
+ // eslint-disable-next-line react-hooks/immutability
115
119
  state.icon.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.icon, state.icon.className);
116
120
  }
117
121
  if (state.subText) {
122
+ // eslint-disable-next-line react-hooks/immutability
118
123
  state.subText.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.subText, state.subText.className);
119
124
  }
120
125
  if (state.switchIndicator) {
126
+ // eslint-disable-next-line react-hooks/immutability
121
127
  state.switchIndicator.className = (0, _react.mergeClasses)(menuItemSwitchClassNames.switchIndicator, switchIndicatorBaseStyles, checked && switchIndicatorStyles.checked, state.switchIndicator.className, multiline && multilineStyles.switch);
122
128
  }
123
129
  (0, _useMenuItemStylesstyles.useMenuItemStyles_unstable)({
@@ -131,6 +137,7 @@ const useMenuItemSwitchStyles_unstable = (state)=>{
131
137
  checkmark: undefined,
132
138
  submenuIndicator: undefined,
133
139
  hasSubmenu: false,
140
+ submenuOpen: false,
134
141
  persistOnClick: true
135
142
  });
136
143
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { type SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\n\nexport const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots> = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText',\n};\n\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n});\n\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center',\n },\n});\n\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */\nexport const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): MenuItemSwitchState => {\n 'use no memo';\n\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemSwitchClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n\n if (state.subText) {\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n\n if (state.switchIndicator) {\n state.switchIndicator.className = mergeClasses(\n menuItemSwitchClassNames.switchIndicator,\n switchIndicatorBaseStyles,\n checked && switchIndicatorStyles.checked,\n state.switchIndicator.className,\n multiline && multilineStyles.switch,\n );\n }\n\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span',\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n persistOnClick: true,\n });\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralStrokeAccessible","lineHeight","boxSizing","fill","flexShrink","fontSize","height","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","marginRight","spacingHorizontalXS","color","colorNeutralStrokeAccessibleHover","borderColor","colorNeutralStrokeAccessiblePressed","useSwitchIndicatorStyles","checked","transform","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","useMultilineStyles","switch","alignSelf","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","persistOnClick"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { type SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSwitchSlots, MenuItemSwitchState } from './MenuItemSwitch.types';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\n\nexport const menuItemSwitchClassNames: SlotClassNames<MenuItemSwitchSlots> = {\n root: 'fui-MenuItemSwitch',\n icon: 'fui-MenuItemSwitch__icon',\n content: 'fui-MenuItemSwitch__content',\n secondaryContent: 'fui-MenuItemSwitch__secondaryContent',\n switchIndicator: 'fui-MenuItemSwitch__switchIndicator',\n subText: 'fui-MenuItemSwitch__subText',\n};\n\nexport const circleFilledClassName = 'fui-MenuItemSwitch__switchIndicator__circleFilled';\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useSwitchIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n marginRight: tokens.spacingHorizontalXS,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n color: tokens.colorNeutralStrokeAccessible,\n ':hover': {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':hover:active': {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n [`& .${circleFilledClassName}`]: {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useSwitchIndicatorStyles = makeStyles({\n checked: {\n [`& .${circleFilledClassName}`]: {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n\n ':hover': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n\n ':hover:active': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n});\n\nconst useMultilineStyles = makeStyles({\n switch: {\n alignSelf: 'center',\n },\n});\n\n/**\n * Apply styling to the MenuItemSwitch slots based on the state\n */\nexport const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): MenuItemSwitchState => {\n 'use no memo';\n\n const { checked, subText } = state;\n const multiline = !!subText;\n const switchIndicatorStyles = useSwitchIndicatorStyles();\n const switchIndicatorBaseStyles = useSwitchIndicatorBaseClassName();\n const multilineStyles = useMultilineStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuItemSwitchClassNames.root, state.root.className);\n if (state.content) {\n // eslint-disable-next-line react-hooks/immutability\n state.content.className = mergeClasses(menuItemSwitchClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(\n menuItemSwitchClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(menuItemSwitchClassNames.icon, state.icon.className);\n }\n\n if (state.subText) {\n // eslint-disable-next-line react-hooks/immutability\n state.subText.className = mergeClasses(menuItemSwitchClassNames.subText, state.subText.className);\n }\n\n if (state.switchIndicator) {\n // eslint-disable-next-line react-hooks/immutability\n state.switchIndicator.className = mergeClasses(\n menuItemSwitchClassNames.switchIndicator,\n switchIndicatorBaseStyles,\n checked && switchIndicatorStyles.checked,\n state.switchIndicator.className,\n multiline && multilineStyles.switch,\n );\n }\n\n useMenuItemStyles_unstable({\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n checkmark: 'span',\n submenuIndicator: 'span',\n },\n checkmark: undefined,\n submenuIndicator: undefined,\n hasSubmenu: false,\n submenuOpen: false,\n persistOnClick: true,\n });\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","shorthands","tokens","useMenuItemStyles_unstable","menuItemSwitchClassNames","root","icon","content","secondaryContent","switchIndicator","subText","circleFilledClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useSwitchIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralStrokeAccessible","lineHeight","boxSizing","fill","flexShrink","fontSize","height","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","marginRight","spacingHorizontalXS","color","colorNeutralStrokeAccessibleHover","borderColor","colorNeutralStrokeAccessiblePressed","useSwitchIndicatorStyles","checked","transform","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","useMultilineStyles","switch","alignSelf","useMenuItemSwitchStyles_unstable","state","multiline","switchIndicatorStyles","switchIndicatorBaseStyles","multilineStyles","className","components","checkmark","submenuIndicator","undefined","hasSubmenu","submenuOpen","persistOnClick"],"mappings":"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"}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  renderMenuList_unstable: function() {
19
19
  return _renderMenuList.renderMenuList_unstable;
20
20
  },
21
+ useMenuListBase_unstable: function() {
22
+ return _useMenuList.useMenuListBase_unstable;
23
+ },
21
24
  useMenuListContextValues_unstable: function() {
22
25
  return _useMenuListContextValues.useMenuListContextValues_unstable;
23
26
  },
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuList/index.ts"],"sourcesContent":["export { MenuList } from './MenuList';\nexport type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './MenuList.types';\nexport { renderMenuList_unstable } from './renderMenuList';\nexport { useMenuList_unstable } from './useMenuList';\nexport { menuListClassNames, useMenuListStyles_unstable } from './useMenuListStyles.styles';\nexport { useMenuListContextValues_unstable } from './useMenuListContextValues';\n"],"names":["MenuList","renderMenuList_unstable","useMenuList_unstable","menuListClassNames","useMenuListStyles_unstable","useMenuListContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAaRG,2CAAkB;;;eAFlBF,uCAAuB;;;eAGvBI,2DAAiC;;;eADbD,mDAA0B;;;eAD9CF,iCAAoB;;;0BAZJ,aAAa;gCAWE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B;0CAC1C,6BAA6B"}
1
+ {"version":3,"sources":["../src/components/MenuList/index.ts"],"sourcesContent":["export { MenuList } from './MenuList';\nexport type {\n MenuCheckedValueChangeData,\n MenuCheckedValueChangeEvent,\n MenuListContextValues,\n MenuListProps,\n MenuListSlots,\n MenuListState,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n UninitializedMenuListState,\n} from './MenuList.types';\nexport { renderMenuList_unstable } from './renderMenuList';\nexport { useMenuList_unstable, useMenuListBase_unstable } from './useMenuList';\nexport { menuListClassNames, useMenuListStyles_unstable } from './useMenuListStyles.styles';\nexport { useMenuListContextValues_unstable } from './useMenuListContextValues';\n"],"names":["MenuList","renderMenuList_unstable","useMenuList_unstable","useMenuListBase_unstable","menuListClassNames","useMenuListStyles_unstable","useMenuListContextValues_unstable"],"mappings":";;;;;;;;;;;IAASA;iCAAQ;;IAaRI;0DAAkB;;;eAFlBH,uCAAuB;;;eACDE,qCAAwB;;;eAE9CG,2DAAiC;;;eADbD,mDAA0B;;;eAD9CH,iCAAoB;;;0BAZJ,aAAa;gCAWE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B;0CAC1C,6BAA6B"}
@@ -3,9 +3,17 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "useMenuList_unstable", {
7
- enumerable: true,
8
- get: function() {
6
+ function _export(target, all) {
7
+ for(var name in all)Object.defineProperty(target, name, {
8
+ enumerable: true,
9
+ get: all[name]
10
+ });
11
+ }
12
+ _export(exports, {
13
+ useMenuListBase_unstable: function() {
14
+ return useMenuListBase_unstable;
15
+ },
16
+ useMenuList_unstable: function() {
9
17
  return useMenuList_unstable;
10
18
  }
11
19
  });
@@ -17,90 +25,93 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
17
25
  const _reactcontextselector = require("@fluentui/react-context-selector");
18
26
  const _menuContext = require("../../contexts/menuContext");
19
27
  const _useValidateNesting = require("../../utils/useValidateNesting");
28
+ const MENU_ITEM_ROLES = [
29
+ 'menuitem',
30
+ 'menuitemcheckbox',
31
+ 'menuitemradio'
32
+ ];
33
+ const MENU_ITEM_ROLES_SELECTOR = MENU_ITEM_ROLES.map((role)=>`[role="${role}"]`).join(',');
20
34
  const useMenuList_unstable = (props, ref)=>{
21
- const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
22
- const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
23
35
  const menuContext = useMenuContextSelectors();
24
36
  const hasMenuContext = (0, _reactcontextselector.useHasParentContext)(_menuContext.MenuContext);
25
- const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
26
- circular: true
27
- });
28
37
  if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
29
38
  // TODO throw warnings in development safely
30
39
  // eslint-disable-next-line no-console
31
40
  console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');
32
41
  }
33
- const innerRef = _react.useRef(null);
34
- const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuList');
42
+ const wrapperRef = _react.useRef(null);
43
+ const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
44
+ const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
45
+ const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
46
+ circular: true
47
+ });
48
+ const baseState = useMenuListBase_unstable(props, ref);
49
+ // recreate root non-mutatively: merge wrapperRef so the effect below can
50
+ // observe the rendered DOM element, and add Tabster arrow-nav attributes
51
+ const mergedRootRef = (0, _reactutilities.useMergedRefs)(baseState.root.ref, wrapperRef);
35
52
  _react.useEffect(()=>{
36
- const element = innerRef.current;
37
- if (hasMenuContext && targetDocument && element) {
38
- const onTabsterMoveFocus = (e)=>{
39
- const nextElement = e.detail.next;
40
- if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {
41
- // Preventing Tabster from handling Tab press, useMenuPopover will handle it.
42
- e.preventDefault();
43
- }
44
- };
45
- targetDocument.addEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
46
- return ()=>{
47
- targetDocument.removeEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
48
- };
53
+ const element = wrapperRef.current;
54
+ if (!hasMenuContext || !targetDocument || !element) {
55
+ return;
49
56
  }
57
+ const onTabsterMoveFocus = (e)=>{
58
+ const nextElement = e.detail.next;
59
+ if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {
60
+ // Preventing Tabster from handling Tab press, useMenuPopover will handle it.
61
+ e.preventDefault();
62
+ }
63
+ };
64
+ targetDocument.addEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
65
+ return ()=>{
66
+ targetDocument.removeEventListener(_reacttabster.TabsterMoveFocusEventName, onTabsterMoveFocus);
67
+ };
50
68
  }, [
51
- innerRef,
52
- targetDocument,
53
- hasMenuContext
69
+ hasMenuContext,
70
+ targetDocument
54
71
  ]);
55
72
  const setFocusByFirstCharacter = _react.useCallback((e, itemEl)=>{
56
- // TODO use some kind of children registration to reduce dependency on DOM roles
57
- const acceptedRoles = [
58
- 'menuitem',
59
- 'menuitemcheckbox',
60
- 'menuitemradio'
61
- ];
62
- if (!innerRef.current) {
73
+ if (!wrapperRef.current) {
63
74
  return;
64
75
  }
65
- const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);
66
- let startIndex = menuItems.indexOf(itemEl) + 1;
67
- if (startIndex === menuItems.length) {
68
- startIndex = 0;
69
- }
70
- const firstChars = menuItems.map((menuItem)=>{
71
- var _menuItem_textContent;
72
- return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();
73
- });
74
- const char = e.key.toLowerCase();
75
- const getIndexFirstChars = (start, firstChar)=>{
76
- for(let i = start; i < firstChars.length; i++){
77
- if (char === firstChars[i]) {
78
- return i;
79
- }
80
- }
81
- return -1;
82
- };
83
- // Check remaining slots in the menu
84
- let index = getIndexFirstChars(startIndex, char);
85
- // If not found in remaining slots, check from beginning
86
- if (index === -1) {
87
- index = getIndexFirstChars(0, char);
88
- }
89
- // If match was found...
90
- if (index > -1) {
91
- menuItems[index].focus();
92
- }
76
+ const menuItems = findAllFocusable(wrapperRef.current, (el)=>el.hasAttribute('role') && MENU_ITEM_ROLES.indexOf(el.getAttribute('role')) !== -1);
77
+ focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);
93
78
  }, [
94
79
  findAllFocusable
95
80
  ]);
81
+ return {
82
+ ...baseState,
83
+ root: {
84
+ ...focusAttributes,
85
+ ...baseState.root,
86
+ ref: mergedRootRef
87
+ },
88
+ setFocusByFirstCharacter
89
+ };
90
+ };
91
+ const useMenuListBase_unstable = (props, ref)=>{
92
+ const triggerId = (0, _menuContext.useMenuContext_unstable)((context)=>context.triggerId);
93
+ const checkedValuesContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.checkedValues);
94
+ const onCheckedValueChangeContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.onCheckedValueChange);
95
+ const hasIconsContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.hasIcons);
96
+ const hasCheckmarksContext = (0, _menuContext.useMenuContext_unstable)((context)=>context.hasCheckmarks);
97
+ const hasMenuContext = (0, _reactcontextselector.useHasParentContext)(_menuContext.MenuContext);
98
+ const innerRef = _react.useRef(null);
99
+ const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuList');
100
+ const setFocusByFirstCharacter = _react.useCallback((e, itemEl)=>{
101
+ if (!innerRef.current) {
102
+ return;
103
+ }
104
+ const menuItems = Array.from(innerRef.current.querySelectorAll(MENU_ITEM_ROLES_SELECTOR));
105
+ focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);
106
+ }, []);
96
107
  var _props_checkedValues;
97
108
  const [checkedValues, setCheckedValues] = (0, _reactutilities.useControllableState)({
98
- state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,
109
+ state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? checkedValuesContext : undefined,
99
110
  defaultState: props.defaultCheckedValues,
100
111
  initialState: {}
101
112
  });
102
113
  var _props_onCheckedValueChange;
103
- const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;
114
+ const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? onCheckedValueChangeContext : undefined;
104
115
  const toggleCheckbox = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
105
116
  const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
106
117
  const newCheckedItems = [
@@ -133,6 +144,7 @@ const useMenuList_unstable = (props, ref)=>{
133
144
  checkedItems: newCheckedItems
134
145
  });
135
146
  });
147
+ var _props_hasIcons, _ref, _props_hasCheckmarks, _ref1;
136
148
  return {
137
149
  components: {
138
150
  root: 'div'
@@ -143,21 +155,50 @@ const useMenuList_unstable = (props, ref)=>{
143
155
  // but since it would be a breaking change to fix it, we are casting ref to it's proper type
144
156
  ref: (0, _reactutilities.useMergedRefs)(ref, innerRef, validateNestingRef),
145
157
  role: 'menu',
146
- 'aria-labelledby': menuContext.triggerId,
147
- ...focusAttributes,
158
+ 'aria-labelledby': triggerId,
148
159
  ...props
149
160
  }), {
150
161
  elementType: 'div'
151
162
  }),
152
- hasIcons: menuContext.hasIcons || false,
153
- hasCheckmarks: menuContext.hasCheckmarks || false,
154
163
  checkedValues,
164
+ hasIcons: (_ref = (_props_hasIcons = props.hasIcons) !== null && _props_hasIcons !== void 0 ? _props_hasIcons : hasIconsContext) !== null && _ref !== void 0 ? _ref : false,
165
+ hasCheckmarks: (_ref1 = (_props_hasCheckmarks = props.hasCheckmarks) !== null && _props_hasCheckmarks !== void 0 ? _props_hasCheckmarks : hasCheckmarksContext) !== null && _ref1 !== void 0 ? _ref1 : false,
155
166
  hasMenuContext,
156
167
  setFocusByFirstCharacter,
157
168
  selectRadio,
158
169
  toggleCheckbox
159
170
  };
160
171
  };
172
+ /**
173
+ * Focuses the next menu item whose textContent starts with the typed character,
174
+ * wrapping around the list. Shared between the Tabster-free base impl and the
175
+ * Tabster-aware wrapper.
176
+ */ const focusItemMatchingFirstCharacter = (menuItems, key, current)=>{
177
+ let startIndex = menuItems.indexOf(current) + 1;
178
+ if (startIndex === menuItems.length) {
179
+ startIndex = 0;
180
+ }
181
+ const firstChars = menuItems.map((menuItem)=>{
182
+ var _menuItem_textContent;
183
+ return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();
184
+ });
185
+ const char = key.toLowerCase();
186
+ const getIndexFirstChars = (start)=>{
187
+ for(let i = start; i < firstChars.length; i++){
188
+ if (char === firstChars[i]) {
189
+ return i;
190
+ }
191
+ }
192
+ return -1;
193
+ };
194
+ let index = getIndexFirstChars(startIndex);
195
+ if (index === -1) {
196
+ index = getIndexFirstChars(0);
197
+ }
198
+ if (index > -1) {
199
+ menuItems[index].focus();
200
+ }
201
+ };
161
202
  /**
162
203
  * Adds some sugar to fetching multiple context selector values
163
204
  */ const useMenuContextSelectors = ()=>{
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuList/useMenuList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getIntrinsicElementProps,\n slot,\n} from '@fluentui/react-utilities';\nimport {\n useArrowNavigationGroup,\n useFocusFinders,\n TabsterMoveFocusEventName,\n type TabsterMoveFocusEvent,\n} from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\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 { targetDocument } = useFluent();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n const focusAttributes = useArrowNavigationGroup({ circular: true });\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 const validateNestingRef = useValidateNesting('MenuList');\n\n React.useEffect(() => {\n const element = innerRef.current;\n\n if (hasMenuContext && targetDocument && element) {\n const onTabsterMoveFocus = (e: TabsterMoveFocusEvent) => {\n const nextElement = e.detail.next;\n\n if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {\n // Preventing Tabster from handling Tab press, useMenuPopover will handle it.\n e.preventDefault();\n }\n };\n\n targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n\n return () => {\n targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n };\n }\n }, [innerRef, targetDocument, hasMenuContext]);\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: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<HTMLDivElement>,\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props,\n }),\n { elementType: 'div' },\n ),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n hasMenuContext,\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"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useFocusFinders","TabsterMoveFocusEventName","useFluent_unstable","useFluent","useHasParentContext","useMenuContext_unstable","MenuContext","useValidateNesting","useMenuList_unstable","props","ref","findAllFocusable","targetDocument","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","usingPropsAndMenuContext","console","warn","innerRef","useRef","validateNestingRef","useEffect","element","current","onTabsterMoveFocus","e","nextElement","detail","next","contains","activeElement","preventDefault","addEventListener","removeEventListener","setFocusByFirstCharacter","useCallback","itemEl","acceptedRoles","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","always","role","triggerId","elementType","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/MenuList/useMenuList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getIntrinsicElementProps,\n slot,\n} from '@fluentui/react-utilities';\nimport {\n useArrowNavigationGroup,\n useFocusFinders,\n TabsterMoveFocusEventName,\n type TabsterMoveFocusEvent,\n} from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\nconst MENU_ITEM_ROLES = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\nconst MENU_ITEM_ROLES_SELECTOR = MENU_ITEM_ROLES.map(role => `[role=\"${role}\"]`).join(',');\n\n/**\n * Returns the props and state required to render the component.\n *\n * Composes with `useMenuListBase_unstable` and adds Tabster-driven keyboard\n * navigation: circular arrow-key focus, a `TabsterMoveFocusEvent` listener\n * that lets `useMenuPopover_unstable` handle Tab key presses, a focus-aware\n * `setFocusByFirstCharacter`, and the `hasIcons` / `hasCheckmarks` slot\n * alignment hints sourced from the parent `MenuContext`.\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\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 wrapperRef = React.useRef<HTMLElement>(null);\n const { findAllFocusable } = useFocusFinders();\n const { targetDocument } = useFluent();\n const focusAttributes = useArrowNavigationGroup({ circular: true });\n\n const baseState = useMenuListBase_unstable(props, ref);\n // recreate root non-mutatively: merge wrapperRef so the effect below can\n // observe the rendered DOM element, and add Tabster arrow-nav attributes\n const mergedRootRef = useMergedRefs(baseState.root.ref, wrapperRef) as React.Ref<HTMLDivElement>;\n\n React.useEffect(() => {\n const element = wrapperRef.current;\n\n if (!hasMenuContext || !targetDocument || !element) {\n return;\n }\n\n const onTabsterMoveFocus = (e: TabsterMoveFocusEvent) => {\n const nextElement = e.detail.next;\n if (nextElement && element.contains(targetDocument.activeElement) && !element.contains(nextElement)) {\n // Preventing Tabster from handling Tab press, useMenuPopover will handle it.\n e.preventDefault();\n }\n };\n\n targetDocument.addEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n return () => {\n targetDocument.removeEventListener(TabsterMoveFocusEventName, onTabsterMoveFocus);\n };\n }, [hasMenuContext, targetDocument]);\n\n const setFocusByFirstCharacter = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n if (!wrapperRef.current) {\n return;\n }\n const menuItems = findAllFocusable(\n wrapperRef.current,\n (el: HTMLElement) => el.hasAttribute('role') && MENU_ITEM_ROLES.indexOf(el.getAttribute('role')!) !== -1,\n );\n focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);\n },\n [findAllFocusable],\n );\n\n return {\n ...baseState,\n root: {\n ...focusAttributes,\n ...baseState.root,\n ref: mergedRootRef,\n },\n setFocusByFirstCharacter,\n };\n};\n\n/**\n * Base hook for MenuList component, produces state required to render the component.\n *\n * Does not invoke any Tabster APIs internally: arrow-key navigation and the\n * focus-aware `setFocusByFirstCharacter` are added by the wrapper\n * `useMenuList_unstable`. The base's `setFocusByFirstCharacter` walks the DOM\n * via `querySelectorAll` and does not filter by Tabster's focusability rules,\n * so consumers integrating their own focus management should layer that on top.\n *\n * @param props - props from this instance of MenuList\n * @param ref - reference to root HTMLElement of MenuList\n */\nexport const useMenuListBase_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const checkedValuesContext = useMenuContext_unstable(context => context.checkedValues);\n const onCheckedValueChangeContext = useMenuContext_unstable(context => context.onCheckedValueChange);\n const hasIconsContext = useMenuContext_unstable(context => context.hasIcons);\n const hasCheckmarksContext = useMenuContext_unstable(context => context.hasCheckmarks);\n const hasMenuContext = useHasParentContext(MenuContext);\n\n const innerRef = React.useRef<HTMLElement>(null);\n const validateNestingRef = useValidateNesting('MenuList');\n\n const setFocusByFirstCharacter = React.useCallback((e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n if (!innerRef.current) {\n return;\n }\n const menuItems = Array.from(innerRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_ROLES_SELECTOR));\n focusItemMatchingFirstCharacter(menuItems, e.key, itemEl);\n }, []);\n\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues ?? (hasMenuContext ? checkedValuesContext : undefined),\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n\n const handleCheckedValueChange =\n props.onCheckedValueChange ?? (hasMenuContext ? onCheckedValueChangeContext : 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: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<HTMLDivElement>,\n role: 'menu',\n 'aria-labelledby': triggerId,\n ...props,\n }),\n { elementType: 'div' },\n ),\n checkedValues,\n hasIcons: props.hasIcons ?? hasIconsContext ?? false,\n hasCheckmarks: props.hasCheckmarks ?? hasCheckmarksContext ?? false,\n hasMenuContext,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox,\n };\n};\n\n/**\n * Focuses the next menu item whose textContent starts with the typed character,\n * wrapping around the list. Shared between the Tabster-free base impl and the\n * Tabster-aware wrapper.\n */\nconst focusItemMatchingFirstCharacter = (menuItems: HTMLElement[], key: string, current: HTMLElement) => {\n let startIndex = menuItems.indexOf(current) + 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 = key.toLowerCase();\n\n const getIndexFirstChars = (start: number) => {\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 let index = getIndexFirstChars(startIndex);\n if (index === -1) {\n index = getIndexFirstChars(0);\n }\n if (index > -1) {\n menuItems[index].focus();\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"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useFocusFinders","TabsterMoveFocusEventName","useFluent_unstable","useFluent","useHasParentContext","useMenuContext_unstable","MenuContext","useValidateNesting","MENU_ITEM_ROLES","MENU_ITEM_ROLES_SELECTOR","map","role","join","useMenuList_unstable","props","ref","menuContext","useMenuContextSelectors","hasMenuContext","usingPropsAndMenuContext","console","warn","wrapperRef","useRef","findAllFocusable","targetDocument","focusAttributes","circular","baseState","useMenuListBase_unstable","mergedRootRef","root","useEffect","element","current","onTabsterMoveFocus","e","nextElement","detail","next","contains","activeElement","preventDefault","addEventListener","removeEventListener","setFocusByFirstCharacter","useCallback","itemEl","menuItems","el","hasAttribute","indexOf","getAttribute","focusItemMatchingFirstCharacter","key","triggerId","context","checkedValuesContext","checkedValues","onCheckedValueChangeContext","onCheckedValueChange","hasIconsContext","hasIcons","hasCheckmarksContext","hasCheckmarks","innerRef","validateNestingRef","Array","from","querySelectorAll","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","always","elementType","startIndex","length","firstChars","menuItem","textContent","charAt","toLowerCase","char","getIndexFirstChars","start","i","index","focus","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
@@ -48,6 +48,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
48
48
  const useMenuListStyles_unstable = (state)=>{
49
49
  'use no memo';
50
50
  const styles = useStyles();
51
+ // eslint-disable-next-line react-hooks/immutability
51
52
  state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
52
53
  return state;
53
54
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuListStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuListClassNames = {\n root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '2px'\n },\n hasMenuContext: {\n height: '100%'\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","__styles","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;IAedY,0BAA0B;;;;uBAhBF,gBAAgB;AAClD,2BAA2B;IAC9BX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAE,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACL,cAAc,IAAIM,MAAM,CAACN,cAAc,EAAEK,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC9I,OAAOF,KAAK;AAChB,CAAC"}
1
+ {"version":3,"sources":["useMenuListStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuListClassNames = {\n root: 'fui-MenuList'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '2px'\n },\n hasMenuContext: {\n height: '100%'\n }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuListStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","__styles","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;IAedY,0BAA0B;;;;uBAhBF,gBAAgB;AAClD,2BAA2B;IAC9BX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAE,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACL,cAAc,IAAIM,MAAM,CAACN,cAAc,EAAEK,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC9I,OAAOF,KAAK;AAChB,CAAC"}
@@ -34,6 +34,7 @@ const useStyles = (0, _react.makeStyles)({
34
34
  const useMenuListStyles_unstable = (state)=>{
35
35
  'use no memo';
36
36
  const styles = useStyles();
37
+ // eslint-disable-next-line react-hooks/immutability
37
38
  state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.hasMenuContext && styles.hasMenuContext, state.root.className);
38
39
  return state;
39
40
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } 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 gap: '2px',\n },\n hasMenuContext: {\n height: '100%',\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuListClassNames.root,\n styles.root,\n state.hasMenuContext && styles.hasMenuContext,\n state.root.className,\n );\n return state;\n};\n"],"names":["mergeClasses","makeStyles","menuListClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,kBAAAA;;;IAkBAQ,0BAAAA;;;;uBArB4B,iBAAiB;AAGnD,2BAA0D;IAC/DP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYH,iBAAAA,EAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,OAAGb,mBAAAA,EACrBE,mBAAmBC,IAAI,EACvBS,OAAOT,IAAI,EACXQ,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAC7CG,MAAMR,IAAI,CAACU,SAAS;IAEtB,OAAOF;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/MenuList/useMenuListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } 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 gap: '2px',\n },\n hasMenuContext: {\n height: '100%',\n },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n menuListClassNames.root,\n styles.root,\n state.hasMenuContext && styles.hasMenuContext,\n state.root.className,\n );\n return state;\n};\n"],"names":["mergeClasses","makeStyles","menuListClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuListStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,kBAAAA;;;IAkBAQ,0BAAAA;;;;uBArB4B,iBAAiB;AAGnD,2BAA0D;IAC/DP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYH,iBAAAA,EAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,SAASR;IACf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,OAAGb,mBAAAA,EACrBE,mBAAmBC,IAAI,EACvBS,OAAOT,IAAI,EACXQ,MAAMH,cAAc,IAAII,OAAOJ,cAAc,EAC7CG,MAAMR,IAAI,CAACU,SAAS;IAEtB,OAAOF;AACT,EAAE"}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  renderMenuPopover_unstable: function() {
19
19
  return _renderMenuPopover.renderMenuPopover_unstable;
20
20
  },
21
+ useMenuPopoverBase_unstable: function() {
22
+ return _useMenuPopover.useMenuPopoverBase_unstable;
23
+ },
21
24
  useMenuPopoverStyles_unstable: function() {
22
25
  return _useMenuPopoverStylesstyles.useMenuPopoverStyles_unstable;
23
26
  },
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuPopover/index.ts"],"sourcesContent":["export { MenuPopover } from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nexport { renderMenuPopover_unstable } from './renderMenuPopover';\nexport { useMenuPopover_unstable } from './useMenuPopover';\nexport { menuPopoverClassNames, useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\n"],"names":["MenuPopover","renderMenuPopover_unstable","useMenuPopover_unstable","menuPopoverClassNames","useMenuPopoverStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}
1
+ {"version":3,"sources":["../src/components/MenuPopover/index.ts"],"sourcesContent":["export { MenuPopover } from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nexport { renderMenuPopover_unstable } from './renderMenuPopover';\nexport { useMenuPopover_unstable, useMenuPopoverBase_unstable } from './useMenuPopover';\nexport { menuPopoverClassNames, useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\n"],"names":["MenuPopover","renderMenuPopover_unstable","useMenuPopover_unstable","useMenuPopoverBase_unstable","menuPopoverClassNames","useMenuPopoverStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXI,iDAAqB;;;eAFrBH,6CAA0B;;;eACDE,2CAA2B;;;eAC7BE,yDAA6B;;;eADpDH,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACI,mBAAmB;4CACnB,gCAAgC"}