@fluentui/react-menu 9.24.1 → 9.25.0

package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js

@@ -14,6 +14,7 @@ const useStyles = makeStyles({
 export const useMenuDividerStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib/components/MenuDivider/useMenuDividerStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuDivider/useMenuDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n  root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    margin: '4px -5px 4px -5px',\n    width: 'auto',\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState): MenuDividerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuDividerClassNames","root","useStyles","margin","width","borderBottom","strokeWidthThin","colorNeutralStroke2","useMenuDividerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,QAAQ;QACRC,OAAO;QACPC,cAAc,GAAGN,OAAOO,eAAe,CAAC,OAAO,EAAEP,OAAOQ,mBAAmB,EAAE;IAC/E;AACF;AAEA,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGd,aAAaG,sBAAsBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEjG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuDivider/useMenuDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n  root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    margin: '4px -5px 4px -5px',\n    width: 'auto',\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n  },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState): MenuDividerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuDividerClassNames","root","useStyles","margin","width","borderBottom","strokeWidthThin","colorNeutralStroke2","useMenuDividerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,QAAQ;QACRC,OAAO;QACPC,cAAc,GAAGN,OAAOO,eAAe,CAAC,OAAO,EAAEP,OAAOQ,mBAAmB,EAAE;IAC/E;AACF;AAEA,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASR;IACf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,GAAGd,aAAaG,sBAAsBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAEjG,OAAOF;AACT,EAAE"}

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js

@@ -23,6 +23,7 @@ export const useMenuGroupHeaderStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);
   return state;
 };

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n    root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n    root: {\n        fontSize: tokens.fontSizeBase200,\n        color: tokens.colorNeutralForeground3,\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        fontWeight: tokens.fontWeightSemibold,\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWjB,CAAC;AACF,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n    root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n    root: {\n        fontSize: tokens.fontSizeBase200,\n        color: tokens.colorNeutralForeground3,\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        fontWeight: tokens.fontWeightSemibold,\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWjB,CAAC;AACF,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js

@@ -19,6 +19,7 @@ const useStyles = makeStyles({
 export const useMenuGroupHeaderStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,UAAUJ,OAAOK,eAAe;QAChCC,OAAON,OAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,OAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEA,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGpB,aAAaG,0BAA0BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAErG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,UAAUJ,OAAOK,eAAe;QAChCC,OAAON,OAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,OAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEA,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,GAAGpB,aAAaG,0BAA0BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAErG,OAAOF;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Icon slot rendered before children content\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * A helper slot for alignment when a menu item is used with selectable menuitems\n   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n   */\n  checkmark?: Slot<'span'>;\n\n  /**\n   * Icon slot that shows the indicator for a submenu\n   */\n  submenuIndicator?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible\n   */\n  content?: Slot<'span'>;\n\n  /**\n   * Secondary content rendered opposite the primary content (e.g Shortcut text)\n   */\n  secondaryContent?: Slot<'span'>;\n\n  /**\n   * Additional descriptor to main content that creates a multiline layout\n   */\n  subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n  Pick<Partial<MenuItemSlots>, 'content'> & {\n    /**\n     * If the menu item is a trigger for a submenu\n     *\n     * @default false\n     */\n    hasSubmenu?: boolean;\n\n    /**\n     * Clicking on the menu item will not dismiss an open menu\n     *\n     * @default false\n     */\n    persistOnClick?: boolean;\n\n    disabled?: boolean;\n    /**\n     * @deprecated this property does nothing.\n     * disabled focusable is by default by simply using `disabled` property\n     */\n    disabledFocusable?: boolean;\n  };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;\n"],"names":[],"mappings":"AA8DA,WAC8E"}
+{"version":3,"sources":["../src/components/MenuItem/MenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuItemSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Icon slot rendered before children content\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * A helper slot for alignment when a menu item is used with selectable menuitems\n   * Avoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components\n   */\n  checkmark?: Slot<'span'>;\n\n  /**\n   * Icon slot that shows the indicator for a submenu\n   */\n  submenuIndicator?: Slot<'span'>;\n\n  /**\n   * Component children are placed in this slot\n   * Avoid using the `children` property in this slot in favour of Component children whenever possible\n   */\n  content?: Slot<'span'>;\n\n  /**\n   * Secondary content rendered opposite the primary content (e.g Shortcut text)\n   */\n  secondaryContent?: Slot<'span'>;\n\n  /**\n   * Additional descriptor to main content that creates a multiline layout\n   */\n  subText?: Slot<'span'>;\n};\n\nexport type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &\n  Pick<Partial<MenuItemSlots>, 'content'> & {\n    /**\n     * If the menu item is a trigger for a submenu\n     *\n     * @default false\n     */\n    hasSubmenu?: boolean;\n\n    /**\n     * Clicking on the menu item will not dismiss an open menu\n     *\n     * @default false\n     */\n    persistOnClick?: boolean;\n\n    disabled?: boolean;\n    /**\n     * @deprecated this property does nothing.\n     * disabled focusable is by default by simply using `disabled` property\n     */\n    disabledFocusable?: boolean;\n  };\n\nexport type MenuItemState = ComponentState<MenuItemSlots> &\n  Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>> & {\n    submenuOpen: boolean;\n  };\n"],"names":[],"mappings":"AA8DA,WAGI"}

package/lib/components/MenuItem/index.js

@@ -1,4 +1,5 @@
 export { MenuItem } from './MenuItem';
 export { renderMenuItem_unstable } from './renderMenuItem';
-export { useMenuItem_unstable, useMenuItemBase_unstable } from './useMenuItem';
+export { useMenuItem_unstable } from './useMenuItem';
+export { useMenuItemBase_unstable } from './useMenuItemBase';
 export { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/index.ts"],"sourcesContent":["export { MenuItem } from './MenuItem';\nexport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';\nexport { renderMenuItem_unstable } from './renderMenuItem';\nexport { useMenuItem_unstable, useMenuItemBase_unstable } from './useMenuItem';\nexport { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\n"],"names":["MenuItem","renderMenuItem_unstable","useMenuItem_unstable","useMenuItemBase_unstable","menuItemClassNames","useMenuItemStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,EAAEC,wBAAwB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/components/MenuItem/index.ts"],"sourcesContent":["export { MenuItem } from './MenuItem';\nexport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem.types';\nexport { renderMenuItem_unstable } from './renderMenuItem';\nexport { useMenuItem_unstable } from './useMenuItem';\nexport { useMenuItemBase_unstable } from './useMenuItemBase';\nexport { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\n"],"names":["MenuItem","renderMenuItem_unstable","useMenuItem_unstable","useMenuItemBase_unstable","menuItemClassNames","useMenuItemStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

package/lib/components/MenuItem/useCharacterSearch.js

@@ -4,6 +4,7 @@ export const useCharacterSearch = (state, ref)=>{
     'use no memo';
     const setFocusByFirstCharacter = useMenuListContext_unstable((context)=>context.setFocusByFirstCharacter);
     const { onKeyDown: originalOnKeyDown } = state.root;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.onKeyDown = (e)=>{
         var _e_key;
         originalOnKeyDown === null || originalOnKeyDown === void 0 ? void 0 : originalOnKeyDown(e);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\nimport type { ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement | null>): MenuItemState => {\n  'use no memo';\n\n  const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n  const { onKeyDown: originalOnKeyDown } = state.root;\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n    originalOnKeyDown?.(e);\n\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (ref.current) {\n      setFocusByFirstCharacter?.(e, ref.current);\n    }\n  };\n\n  return state;\n};\n"],"names":["useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"mappings":"AAAA;AAGA,SAASA,2BAA2B,QAAQ,iCAAiC;AAI7E,OAAO,MAAMC,qBAAqB,CAACC,OAAsBC;IACvD;IAEA,MAAMC,2BAA2BJ,4BAA4BK,CAAAA,UAAWA,QAAQD,wBAAwB;IAExG,MAAM,EAAEE,WAAWC,iBAAiB,EAAE,GAAGL,MAAMM,IAAI;IAEnDN,MAAMM,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,8BAAAA,wCAAAA,kBAAoBE;QAEpB,IAAIA,EAAAA,SAAAA,EAAEC,GAAG,cAALD,6BAAAA,OAAOE,MAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIR,IAAIS,OAAO,EAAE;YACfR,qCAAAA,+CAAAA,yBAA2BK,GAAGN,IAAIS,OAAO;QAC3C;IACF;IAEA,OAAOV;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuItem/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport type { MenuItemState } from '../../components/index';\nimport type { ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\nexport const useCharacterSearch = (state: MenuItemState, ref: React.RefObject<HTMLElement | null>): MenuItemState => {\n  'use no memo';\n\n  const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);\n\n  const { onKeyDown: originalOnKeyDown } = state.root;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.onKeyDown = (e: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n    originalOnKeyDown?.(e);\n\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (ref.current) {\n      setFocusByFirstCharacter?.(e, ref.current);\n    }\n  };\n\n  return state;\n};\n"],"names":["useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"mappings":"AAAA;AAGA,SAASA,2BAA2B,QAAQ,iCAAiC;AAI7E,OAAO,MAAMC,qBAAqB,CAACC,OAAsBC;IACvD;IAEA,MAAMC,2BAA2BJ,4BAA4BK,CAAAA,UAAWA,QAAQD,wBAAwB;IAExG,MAAM,EAAEE,WAAWC,iBAAiB,EAAE,GAAGL,MAAMM,IAAI;IAEnD,oDAAoD;IACpDN,MAAMM,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,8BAAAA,wCAAAA,kBAAoBE;QAEpB,IAAIA,EAAAA,SAAAA,EAAEC,GAAG,cAALD,6BAAAA,OAAOE,MAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIR,IAAIS,OAAO,EAAE;YACfR,qCAAAA,+CAAAA,yBAA2BK,GAAGN,IAAIS,OAAO;QAC3C;IACF;IAEA,OAAOV;AACT,EAAE"}

package/lib/components/MenuItem/useMenuItem.js

@@ -1,16 +1,8 @@
 'use client';
 import * as React from 'react';
-import { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useCharacterSearch } from './useCharacterSearch';
-import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
 import { ChevronRightFilled, ChevronRightRegular, ChevronLeftFilled, ChevronLeftRegular, bundleIcon } from '@fluentui/react-icons';
-import { useMenuListContext_unstable } from '../../contexts/menuListContext';
-import { useMenuContext_unstable } from '../../contexts/menuContext';
-import { useARIAButtonProps } from '@fluentui/react-aria';
-import { Enter, Space } from '@fluentui/keyboard-keys';
-import { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';
-import { useValidateNesting } from '../../utils/useValidateNesting';
+import { useMenuItemBase_unstable } from './useMenuItemBase';
 const ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
 const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
 /**
@@ -26,139 +18,3 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
     }
     return state;
 };
-/**
- * Base hook for MenuItem component, produces state required to render the component.
- * It doesn't set any design-related props specific to MenuItem such as submenu indicator icon.
- *
- * @internal
- */ export const useMenuItemBase_unstable = (props, ref)=>{
-    const isSubmenuTrigger = useMenuTriggerContext_unstable();
-    const persistOnClickContext = useMenuContext_unstable((context)=>context.persistOnItemClick);
-    const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _content, ...rest } = props;
-    const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
-        hasSubmenu
-    });
-    const setOpen = useMenuContext_unstable((context)=>context.setOpen);
-    useNotifySplitItemMultiline({
-        multiline: !!props.subText,
-        hasSubmenu
-    });
-    const innerRef = React.useRef(null);
-    const dismissedWithKeyboardRef = React.useRef(false);
-    const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));
-    const state = {
-        hasSubmenu,
-        disabled,
-        persistOnClick,
-        components: {
-            root: 'div',
-            icon: 'span',
-            checkmark: 'span',
-            submenuIndicator: 'span',
-            content: 'span',
-            secondaryContent: 'span',
-            subText: 'span'
-        },
-        root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(as, {
-            role: 'menuitem',
-            ...rest,
-            disabled: false,
-            disabledFocusable: disabled,
-            ref: useMergedRefs(ref, innerRef, validateNestingRef),
-            onKeyDown: useEventCallback((event)=>{
-                var _props_onKeyDown;
-                (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
-                if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {
-                    dismissedWithKeyboardRef.current = true;
-                }
-            }),
-            onMouseMove: useEventCallback((event)=>{
-                var _props_onMouseMove;
-                if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
-                    var _innerRef_current;
-                    (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();
-                }
-                (_props_onMouseMove = props.onMouseMove) === null || _props_onMouseMove === void 0 ? void 0 : _props_onMouseMove.call(props, event);
-            }),
-            onClick: useEventCallback((event)=>{
-                var _props_onClick;
-                if (!hasSubmenu && !persistOnClick) {
-                    setOpen(event, {
-                        open: false,
-                        keyboard: dismissedWithKeyboardRef.current,
-                        bubble: true,
-                        type: 'menuItemClick',
-                        event
-                    });
-                    dismissedWithKeyboardRef.current = false;
-                }
-                (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
-            })
-        })), {
-            elementType: 'div'
-        }),
-        icon: slot.optional(props.icon, {
-            renderByDefault: hasIcons,
-            elementType: 'span'
-        }),
-        checkmark: slot.optional(props.checkmark, {
-            renderByDefault: hasCheckmarks,
-            elementType: 'span'
-        }),
-        submenuIndicator: slot.optional(props.submenuIndicator, {
-            renderByDefault: hasSubmenu,
-            elementType: 'span'
-        }),
-        content: slot.optional(props.content, {
-            renderByDefault: !!props.children,
-            defaultProps: {
-                children: props.children
-            },
-            elementType: 'span'
-        }),
-        secondaryContent: slot.optional(props.secondaryContent, {
-            elementType: 'span'
-        }),
-        subText: slot.optional(props.subText, {
-            elementType: 'span'
-        })
-    };
-    useCharacterSearch(state, innerRef);
-    return state;
-};
-/**
- * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode
- * Notify the parent MenuSplitGroup so that it can handle this case
- */ const useNotifySplitItemMultiline = (options)=>{
-    const { hasSubmenu, multiline } = options;
-    const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;
-    const { setMultiline } = useMenuSplitGroupContext_unstable();
-    useIsomorphicLayoutEffect(()=>{
-        if (!isSplitItemTrigger) {
-            setMultiline(multiline);
-        }
-    }, [
-        setMultiline,
-        multiline,
-        isSplitItemTrigger
-    ]);
-};
-const useIconAndCheckmarkAlignment = (options)=>{
-    const { hasSubmenu } = options;
-    const hasIcons = useMenuListContext_unstable((context)=>context.hasIcons);
-    const hasCheckmarks = useMenuListContext_unstable((context)=>context.hasCheckmarks);
-    const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;
-    return {
-        hasIcons: hasIcons && !isSplitItemTrigger,
-        hasCheckmarks: hasCheckmarks && !isSplitItemTrigger
-    };
-};
-const getValidateNestingComponentName = (role)=>{
-    switch(role){
-        case 'menuitemcheckbox':
-            return 'MenuItemCheckbox';
-        case 'menuitemradio':
-            return 'MenuItemRadio';
-    }
-    return 'MenuItem';
-};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  getIntrinsicElementProps,\n  slot,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n  ChevronRightFilled,\n  ChevronRightRegular,\n  ChevronLeftFilled,\n  ChevronLeftRegular,\n  bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n  const { dir } = useFluent();\n  const state = useMenuItemBase_unstable(props, ref);\n\n  // Set default chevron icon\n  if (state.submenuIndicator) {\n    state.submenuIndicator.children ??= dir === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />;\n  }\n\n  return state;\n};\n\n/**\n * Base hook for MenuItem component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItem such as submenu indicator icon.\n *\n * @internal\n */\nexport const useMenuItemBase_unstable = (\n  props: MenuItemProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemState => {\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const {\n    as = 'div',\n    disabled = false,\n    hasSubmenu = isSubmenuTrigger,\n    persistOnClick = persistOnClickContext,\n    content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n    ...rest\n  } = props;\n  const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    disabled,\n    persistOnClick,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n      subText: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        as,\n        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n          role: 'menuitem',\n          ...rest,\n          disabled: false,\n          disabledFocusable: disabled,\n          ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n          onKeyDown: useEventCallback(event => {\n            props.onKeyDown?.(event);\n            if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n              dismissedWithKeyboardRef.current = true;\n            }\n          }),\n          onMouseMove: useEventCallback(event => {\n            if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n              innerRef.current?.focus();\n            }\n\n            props.onMouseMove?.(event);\n          }),\n          onClick: useEventCallback(event => {\n            if (!hasSubmenu && !persistOnClick) {\n              setOpen(event, {\n                open: false,\n                keyboard: dismissedWithKeyboardRef.current,\n                bubble: true,\n                type: 'menuItemClick',\n                event,\n              });\n              dismissedWithKeyboardRef.current = false;\n            }\n\n            props.onClick?.(event);\n          }),\n        }),\n      ),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n    checkmark: slot.optional(props.checkmark, {\n      renderByDefault: hasCheckmarks,\n      elementType: 'span',\n    }),\n    submenuIndicator: slot.optional(props.submenuIndicator, {\n      renderByDefault: hasSubmenu,\n      elementType: 'span',\n    }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n    subText: slot.optional(props.subText, { elementType: 'span' }),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n  const { hasSubmenu, multiline } = options;\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!isSplitItemTrigger) {\n      setMultiline(multiline);\n    }\n  }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n  const { hasSubmenu } = options;\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  return {\n    hasIcons: hasIcons && !isSplitItemTrigger,\n    hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n  };\n};\n\nconst getValidateNestingComponentName = (role?: string) => {\n  switch (role) {\n    case 'menuitemcheckbox':\n      return 'MenuItemCheckbox';\n    case 'menuitemradio':\n      return 'MenuItemRadio';\n  }\n  return 'MenuItem';\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","useValidateNesting","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","dir","state","useMenuItemBase_unstable","submenuIndicator","children","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","innerRef","useRef","dismissedWithKeyboardRef","validateNestingRef","getValidateNestingComponentName","role","components","root","icon","checkmark","secondaryContent","always","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","options","isSplitItemTrigger","setMultiline"],"mappings":"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"}
+{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  ChevronRightFilled,\n  ChevronRightRegular,\n  ChevronLeftFilled,\n  ChevronLeftRegular,\n  bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuItemBase_unstable } from './useMenuItemBase';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n  const { dir } = useFluent();\n  const state = useMenuItemBase_unstable(props, ref);\n\n  // Set default chevron icon\n  if (state.submenuIndicator) {\n    state.submenuIndicator.children ??= dir === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />;\n  }\n\n  return state;\n};\n"],"names":["React","useFluent_unstable","useFluent","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuItemBase_unstable","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","dir","state","submenuIndicator","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SACEC,kBAAkB,EAClBC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,UAAU,QACL,wBAAwB;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAI7D,MAAMC,mBAAmBF,WAAWJ,oBAAoBC;AACxD,MAAMM,kBAAkBH,WAAWF,mBAAmBC;AAEtD;;CAEC,GACD,OAAO,MAAMK,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,GAAG,EAAE,GAAGZ;IAChB,MAAMa,QAAQP,yBAAyBI,OAAOC;IAE9C,2BAA2B;IAC3B,IAAIE,MAAMC,gBAAgB,EAAE;YAC1BD;;QAAAA,cAAAA,0BAAAA,MAAMC,gBAAgB,EAACC,yDAAvBF,wBAAuBE,WAAaH,QAAQ,sBAAQ,oBAACJ,uCAAqB,oBAACD;IAC7E;IAEA,OAAOM;AACT,EAAE"}

package/lib/components/MenuItem/useMenuItemBase.js

@@ -0,0 +1,147 @@
+'use client';
+import * as React from 'react';
+import { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useCharacterSearch } from './useCharacterSearch';
+import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
+import { useMenuListContext_unstable } from '../../contexts/menuListContext';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { Enter, Space } from '@fluentui/keyboard-keys';
+import { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';
+import { useValidateNesting } from '../../utils/useValidateNesting';
+/**
+ * Base hook for MenuItem component, produces state required to render the component.
+ * It doesn't set any design-related props specific to MenuItem such as submenu indicator icon.
+ */ export const useMenuItemBase_unstable = (props, ref)=>{
+    const isSubmenuTrigger = useMenuTriggerContext_unstable();
+    const persistOnClickContext = useMenuContext_unstable((context)=>context.persistOnItemClick);
+    const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext, content: _content, ...rest } = props;
+    const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({
+        hasSubmenu
+    });
+    const setOpen = useMenuContext_unstable((context)=>context.setOpen);
+    const open = useMenuContext_unstable((context)=>context.open);
+    useNotifySplitItemMultiline({
+        multiline: !!props.subText,
+        hasSubmenu
+    });
+    const innerRef = React.useRef(null);
+    const dismissedWithKeyboardRef = React.useRef(false);
+    const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));
+    const state = {
+        hasSubmenu,
+        submenuOpen: hasSubmenu && open,
+        disabled,
+        persistOnClick,
+        components: {
+            root: 'div',
+            icon: 'span',
+            checkmark: 'span',
+            submenuIndicator: 'span',
+            content: 'span',
+            secondaryContent: 'span',
+            subText: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(as, {
+            role: 'menuitem',
+            ...rest,
+            disabled: false,
+            disabledFocusable: disabled,
+            ref: useMergedRefs(ref, innerRef, validateNestingRef),
+            onKeyDown: useEventCallback((event)=>{
+                var _props_onKeyDown;
+                (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+                if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {
+                    dismissedWithKeyboardRef.current = true;
+                }
+            }),
+            onMouseMove: useEventCallback((event)=>{
+                var _props_onMouseMove;
+                if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
+                    var _innerRef_current;
+                    (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();
+                }
+                (_props_onMouseMove = props.onMouseMove) === null || _props_onMouseMove === void 0 ? void 0 : _props_onMouseMove.call(props, event);
+            }),
+            onClick: useEventCallback((event)=>{
+                var _props_onClick;
+                if (!hasSubmenu && !persistOnClick) {
+                    setOpen(event, {
+                        open: false,
+                        keyboard: dismissedWithKeyboardRef.current,
+                        bubble: true,
+                        type: 'menuItemClick',
+                        event
+                    });
+                    dismissedWithKeyboardRef.current = false;
+                }
+                (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+            })
+        })), {
+            elementType: 'div'
+        }),
+        icon: slot.optional(props.icon, {
+            renderByDefault: hasIcons,
+            elementType: 'span'
+        }),
+        checkmark: slot.optional(props.checkmark, {
+            renderByDefault: hasCheckmarks,
+            elementType: 'span'
+        }),
+        submenuIndicator: slot.optional(props.submenuIndicator, {
+            renderByDefault: hasSubmenu,
+            elementType: 'span'
+        }),
+        content: slot.optional(props.content, {
+            renderByDefault: !!props.children,
+            defaultProps: {
+                children: props.children
+            },
+            elementType: 'span'
+        }),
+        secondaryContent: slot.optional(props.secondaryContent, {
+            elementType: 'span'
+        }),
+        subText: slot.optional(props.subText, {
+            elementType: 'span'
+        })
+    };
+    useCharacterSearch(state, innerRef);
+    return state;
+};
+/**
+ * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode
+ * Notify the parent MenuSplitGroup so that it can handle this case
+ */ const useNotifySplitItemMultiline = (options)=>{
+    const { hasSubmenu, multiline } = options;
+    const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;
+    const { setMultiline } = useMenuSplitGroupContext_unstable();
+    useIsomorphicLayoutEffect(()=>{
+        if (!isSplitItemTrigger) {
+            setMultiline(multiline);
+        }
+    }, [
+        setMultiline,
+        multiline,
+        isSplitItemTrigger
+    ]);
+};
+const useIconAndCheckmarkAlignment = (options)=>{
+    const { hasSubmenu } = options;
+    const hasIcons = useMenuListContext_unstable((context)=>context.hasIcons);
+    const hasCheckmarks = useMenuListContext_unstable((context)=>context.hasCheckmarks);
+    const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;
+    return {
+        hasIcons: hasIcons && !isSplitItemTrigger,
+        hasCheckmarks: hasCheckmarks && !isSplitItemTrigger
+    };
+};
+const getValidateNestingComponentName = (role)=>{
+    switch(role){
+        case 'menuitemcheckbox':
+            return 'MenuItemCheckbox';
+        case 'menuitemradio':
+            return 'MenuItemRadio';
+    }
+    return 'MenuItem';
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItem/useMenuItemBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  getIntrinsicElementProps,\n  slot,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Base hook for MenuItem component, produces state required to render the component.\n * It doesn't set any design-related props specific to MenuItem such as submenu indicator icon.\n */\nexport const useMenuItemBase_unstable = (\n  props: MenuItemProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemState => {\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const {\n    as = 'div',\n    disabled = false,\n    hasSubmenu = isSubmenuTrigger,\n    persistOnClick = persistOnClickContext,\n    content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n    ...rest\n  } = props;\n  const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });\n\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const validateNestingRef = useValidateNesting(getValidateNestingComponentName(props.role));\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    submenuOpen: hasSubmenu && open,\n    disabled,\n    persistOnClick,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n      subText: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        as,\n        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {\n          role: 'menuitem',\n          ...rest,\n          disabled: false,\n          disabledFocusable: disabled,\n          ref: useMergedRefs(ref, innerRef, validateNestingRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n          onKeyDown: useEventCallback(event => {\n            props.onKeyDown?.(event);\n            if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n              dismissedWithKeyboardRef.current = true;\n            }\n          }),\n          onMouseMove: useEventCallback(event => {\n            if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {\n              innerRef.current?.focus();\n            }\n\n            props.onMouseMove?.(event);\n          }),\n          onClick: useEventCallback(event => {\n            if (!hasSubmenu && !persistOnClick) {\n              setOpen(event, {\n                open: false,\n                keyboard: dismissedWithKeyboardRef.current,\n                bubble: true,\n                type: 'menuItemClick',\n                event,\n              });\n              dismissedWithKeyboardRef.current = false;\n            }\n\n            props.onClick?.(event);\n          }),\n        }),\n      ),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n    checkmark: slot.optional(props.checkmark, {\n      renderByDefault: hasCheckmarks,\n      elementType: 'span',\n    }),\n    submenuIndicator: slot.optional(props.submenuIndicator, {\n      renderByDefault: hasSubmenu,\n      elementType: 'span',\n    }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n    subText: slot.optional(props.subText, { elementType: 'span' }),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n\n/**\n * MenuSplitGroup needs to apply extra styles when its main item is in multiline layout mode\n * Notify the parent MenuSplitGroup so that it can handle this case\n */\nconst useNotifySplitItemMultiline = (options: { hasSubmenu: boolean; multiline: boolean }) => {\n  const { hasSubmenu, multiline } = options;\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  const { setMultiline } = useMenuSplitGroupContext_unstable();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!isSplitItemTrigger) {\n      setMultiline(multiline);\n    }\n  }, [setMultiline, multiline, isSplitItemTrigger]);\n};\n\nconst useIconAndCheckmarkAlignment = (options: { hasSubmenu: boolean }) => {\n  const { hasSubmenu } = options;\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const isSplitItemTrigger = useIsInMenuSplitGroup() && hasSubmenu;\n\n  return {\n    hasIcons: hasIcons && !isSplitItemTrigger,\n    hasCheckmarks: hasCheckmarks && !isSplitItemTrigger,\n  };\n};\n\nconst getValidateNestingComponentName = (role?: string) => {\n  switch (role) {\n    case 'menuitemcheckbox':\n      return 'MenuItemCheckbox';\n    case 'menuitemradio':\n      return 'MenuItemRadio';\n  }\n  return 'MenuItem';\n};\n"],"names":["React","useEventCallback","useMergedRefs","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useCharacterSearch","useMenuTriggerContext_unstable","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","useIsInMenuSplitGroup","useMenuSplitGroupContext_unstable","useValidateNesting","useMenuItemBase_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","open","useNotifySplitItemMultiline","multiline","subText","innerRef","useRef","dismissedWithKeyboardRef","validateNestingRef","getValidateNestingComponentName","role","state","submenuOpen","components","root","icon","checkmark","submenuIndicator","secondaryContent","always","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","keyboard","bubble","type","elementType","optional","renderByDefault","children","defaultProps","options","isSplitItemTrigger","setMultiline"],"mappings":"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"}

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

@@ -39,6 +39,16 @@ const useStyles = /*#__PURE__*/__styles({
     Baz25je: "f68mna0",
     cmx5o7: "f1p5zmk"
   },
+  submenuOpen: {
+    De3pzq: "f5gciec",
+    sj55zd: "fmh2wxz",
+    D0sxk3: "fxoiby5",
+    t6yez3: "f15q0o9g",
+    B3y4be1: "f17gqod3",
+    B2i6fwv: "f15ms52v",
+    By8wz76: "fix5gee",
+    B7iucu3: "f1gokeew"
+  },
   disabled: {
     sj55zd: "f1s2aq7o",
     Bi91k9c: "fvgxktp",
@@ -65,10 +75,12 @@ const useStyles = /*#__PURE__*/__styles({
     j9xr24: "f1hzwxd0"
   }
 }, {
-  d: [".fmnzpld{margin-top:2px;}", ".fqerorx{flex-grow:1;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1wl9k8s::before{content:\"\";}", ".f1yn80uh::before{width:var(--strokeWidthThin);}", ".f68mna0::before{height:24px;}", ".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
-  h: [".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}", ".ff3wrqt:hover .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}", ".fszh5vc:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}"],
-  f: [".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
-  m: [["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
+  d: [".fmnzpld{margin-top:2px;}", ".fqerorx{flex-grow:1;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1wl9k8s::before{content:\"\";}", ".f1yn80uh::before{width:var(--strokeWidthThin);}", ".f68mna0::before{height:24px;}", ".f1p5zmk::before{background-color:var(--colorNeutralStroke1);}", ".f5gciec{background-color:var(--colorNeutralBackground1Hover);}", ".fmh2wxz{color:var(--colorNeutralForeground2Hover);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f17gqod3 .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f15ms52v .fui-MenuItem__subText{color:var(--colorNeutralForeground3Hover);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
+  m: [["@media (forced-colors: active){.fix5gee{background-color:Canvas;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1gokeew{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fa9u7a5:hover{color:GrayText;}}", {
     m: "(forced-colors: active)"
@@ -90,7 +102,9 @@ const useStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1hzwxd0:focus{background-color:Canvas;}}", {
     m: "(forced-colors: active)"
-  }]]
+  }]],
+  h: [".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}", ".ff3wrqt:hover .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1to34ca:hover:active{background-color:var(--colorNeutralBackground1);}", ".fszh5vc:hover:active .fui-MenuItem__subText{color:var(--colorNeutralForegroundDisabled);}"],
+  f: [".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"]
 });
 const useSubTextStyles = /*#__PURE__*/__styles({
   disabled: {
@@ -131,23 +145,30 @@ export const useMenuItemStyles_unstable = state => {
   const subtextBaseStyles = useSubtextBaseStyles();
   const subTextStyles = useSubTextStyles();
   const multiline = !!state.subText;
-  state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
+  state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.submenuOpen && styles.submenuOpen, state.disabled && styles.disabled, state.root.className);
   if (state.content) {
+    // eslint-disable-next-line react-hooks/immutability
     state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
   }
   if (state.checkmark) {
+    // eslint-disable-next-line react-hooks/immutability
     state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
   }
   if (state.secondaryContent) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
   }
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
   }
   if (state.submenuIndicator) {
+    // eslint-disable-next-line react-hooks/immutability
     state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
   }
   if (state.subText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
   }
   useCheckmarkStyles_unstable(state);