@fluentui/react-menu 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

package/lib-commonjs/components/MenuItem/MenuItem.module.css

@@ -0,0 +1,335 @@
+@import url('@fluentui/react-icons/headless/styles.css') layer(fluentui);
+
+@layer fluentui {
+  .root {
+    border-radius: var(--borderRadiusMedium);
+    position: relative;
+    color: var(--colorNeutralForeground2);
+    background-color: var(--colorNeutralBackground1);
+    padding-inline-end: var(--spacingVerticalSNudge);
+    padding-inline-start: var(--spacingVerticalSNudge);
+    padding-top: var(--spacingVerticalSNudge);
+    padding-bottom: var(--spacingVerticalSNudge);
+    box-sizing: border-box;
+    max-width: calc(9 * var(--spacingHorizontalXXXL) + var(--spacingHorizontalXXS));
+    min-height: var(--spacingHorizontalXXXL);
+    flex-shrink: 0;
+    display: flex;
+    align-items: start;
+    font-size: var(--fontSizeBase300);
+    cursor: pointer;
+    gap: var(--spacingHorizontalXS);
+    &:hover {
+      background-color: var(--colorNeutralBackground1Hover);
+      color: var(--colorNeutralForeground2Hover);
+      & :global(.fui-Icon-filled) {
+        display: inline;
+      }
+      & :global(.fui-Icon-regular) {
+        display: none;
+      }
+      & :global(.fui-MenuItem__icon) {
+        color: var(--colorNeutralForeground2BrandSelected);
+      }
+      & :global(.fui-MenuItem__subText) {
+        color: var(--colorNeutralForeground3Hover);
+      }
+    }
+    &:hover:active {
+      background-color: var(--colorNeutralBackground1Pressed);
+      color: var(--colorNeutralForeground2Pressed);
+      & :global(.fui-MenuItem__subText) {
+        color: var(--colorNeutralForeground3Pressed);
+      }
+    }
+    user-select: none;
+    &:focus {
+      outline-style: none;
+    }
+    &:focus-visible {
+      outline-style: none;
+    }
+    &[data-fui-focus-visible] {
+      border-top-color: var(--colorTransparentBackground);
+      border-right-color: var(--colorTransparentBackground);
+      border-bottom-color: var(--colorTransparentBackground);
+      border-left-color: var(--colorTransparentBackground);
+      &::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        z-index: 1;
+        border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
+        border-radius: var(--borderRadiusMedium);
+        top: calc(-1 * var(--strokeWidthThick));
+        right: calc(-1 * var(--strokeWidthThick));
+        bottom: calc(-1 * var(--strokeWidthThick));
+        left: calc(-1 * var(--strokeWidthThick));
+      }
+      @media (forced-colors: active) {
+        &::after {
+          border-top-color: Highlight;
+          border-right-color: Highlight;
+          border-bottom-color: Highlight;
+          border-left-color: Highlight;
+        }
+      }
+    }
+    @media (forced-colors: active) {
+      &:hover {
+        forced-color-adjust: none;
+        background-color: Highlight;
+        color: HighlightText;
+        & :global(.fui-MenuItem__icon),
+        & :global(.fui-MenuItem__checkmark),
+        & :global(.fui-MenuItem__subText),
+        & :global(.fui-MenuItem__secondaryContent) {
+          color: HighlightText;
+        }
+      }
+      &:focus {
+        outline-style: none;
+      }
+      &:focus-visible {
+        outline-style: none;
+      }
+      &[data-fui-focus-visible] {
+        border-top-color: var(--colorTransparentBackground);
+        border-right-color: var(--colorTransparentBackground);
+        border-bottom-color: var(--colorTransparentBackground);
+        border-left-color: var(--colorTransparentBackground);
+        &::after {
+          content: '';
+          position: absolute;
+          pointer-events: none;
+          z-index: 1;
+          border: var(--strokeWidthThick) solid Highlight;
+          border-radius: var(--borderRadiusMedium);
+          top: calc(-1 * var(--strokeWidthThick));
+          right: calc(-1 * var(--strokeWidthThick));
+          bottom: calc(-1 * var(--strokeWidthThick));
+          left: calc(-1 * var(--strokeWidthThick));
+        }
+        @media (forced-colors: active) {
+          &::after {
+            border-top-color: Highlight;
+            border-right-color: Highlight;
+            border-bottom-color: Highlight;
+            border-left-color: Highlight;
+          }
+        }
+      }
+    }
+  }
+  .content {
+    padding-inline-start: var(--spacingHorizontalXXS);
+    padding-inline-end: var(--spacingHorizontalXXS);
+    background-color: var(--colorTransparentBackground);
+    flex-grow: 1;
+  }
+  .secondaryContent {
+    padding-inline-start: var(--spacingHorizontalXXS);
+    padding-inline-end: var(--spacingHorizontalXXS);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase200);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+    color: var(--colorNeutralForeground3);
+    &:hover {
+      color: var(--colorNeutralForeground3Hover);
+    }
+    &:focus {
+      color: var(--colorNeutralForeground3Hover);
+    }
+  }
+  .icon {
+    width: var(--spacingHorizontalXL);
+    height: var(--spacingHorizontalXL);
+    font-size: var(--fontSizeBase500);
+    line-height: 0;
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .submenuIndicator {
+    width: var(--spacingHorizontalXL);
+    height: var(--spacingHorizontalXL);
+    font-size: var(--fontSizeBase500);
+    line-height: 0;
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+  }
+  .subText {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase100);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase100);
+    color: var(--colorNeutralForeground3);
+  }
+  .checkmark {
+    margin-top: var(--spacingHorizontalXXS);
+  }
+  .submenuOpen {
+    background-color: var(--colorNeutralBackground1Hover);
+    color: var(--colorNeutralForeground2Hover);
+    & :global(.fui-Icon-filled) {
+      display: inline;
+    }
+    & :global(.fui-Icon-regular) {
+      display: none;
+    }
+    & :global(.fui-MenuItem__icon) {
+      color: var(--colorNeutralForeground2BrandSelected);
+    }
+    & :global(.fui-MenuItem__subText) {
+      color: var(--colorNeutralForeground3Hover);
+    }
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: Highlight;
+      color: HighlightText;
+      & :global(.fui-MenuItem__icon),
+      & :global(.fui-MenuItem__checkmark),
+      & :global(.fui-MenuItem__subText),
+      & :global(.fui-MenuItem__secondaryContent) {
+        color: HighlightText;
+      }
+    }
+  }
+  .disabled {
+    color: var(--colorNeutralForegroundDisabled);
+    &:hover {
+      color: var(--colorNeutralForegroundDisabled);
+      background-color: var(--colorNeutralBackground1);
+      cursor: not-allowed;
+      & :global(.fui-Icon-filled) {
+        display: none;
+      }
+      & :global(.fui-Icon-regular) {
+        display: inline;
+      }
+      & :global(.fui-MenuItem__icon) {
+        color: var(--colorNeutralForegroundDisabled);
+      }
+      & :global(.fui-MenuItem__subText) {
+        color: var(--colorNeutralForegroundDisabled);
+      }
+    }
+    &:hover:active {
+      color: var(--colorNeutralForegroundDisabled);
+      background-color: var(--colorNeutralBackground1);
+      & :global(.fui-MenuItem__subText) {
+        color: var(--colorNeutralForegroundDisabled);
+      }
+    }
+    &:focus {
+      color: var(--colorNeutralForegroundDisabled);
+    }
+    @media (forced-colors: active) {
+      color: GrayText;
+      &:hover {
+        forced-color-adjust: auto;
+        color: GrayText;
+        background-color: Canvas;
+        & :global(.fui-MenuItem__icon) {
+          color: GrayText;
+          background-color: Canvas;
+        }
+        & :global(.fui-MenuItem__icon),
+        & :global(.fui-MenuItem__checkmark),
+        & :global(.fui-MenuItem__subText),
+        & :global(.fui-MenuItem__secondaryContent) {
+          color: GrayText;
+        }
+      }
+      &:hover:active {
+        color: GrayText;
+        background-color: Canvas;
+        & :global(.fui-MenuItem__subText) {
+          color: GrayText;
+        }
+      }
+      &:focus {
+        color: GrayText;
+        background-color: Canvas;
+      }
+    }
+  }
+  :where(.disabled) > :where(.content) > .subText {
+    color: var(--colorNeutralForegroundDisabled);
+    @media (forced-colors: active) {
+      color: GrayText;
+    }
+  }
+  :where(.multiline) > .content {
+    display: flex;
+    flex-direction: column;
+  }
+  :where(.multiline) > .secondaryContent {
+    align-self: center;
+  }
+  :where(.multiline) > .submenuIndicator {
+    align-self: center;
+  }
+  :where(.disabled) > .secondaryContent {
+    color: var(--colorNeutralForegroundDisabled);
+    &:hover {
+      color: var(--colorNeutralForegroundDisabled);
+      background-color: var(--colorNeutralBackground1);
+      cursor: not-allowed;
+      & :global(.fui-Icon-filled) {
+        display: none;
+      }
+      & :global(.fui-Icon-regular) {
+        display: inline;
+      }
+      & :global(.fui-MenuItem__icon) {
+        color: var(--colorNeutralForegroundDisabled);
+      }
+      & :global(.fui-MenuItem__subText) {
+        color: var(--colorNeutralForegroundDisabled);
+      }
+    }
+    &:hover:active {
+      color: var(--colorNeutralForegroundDisabled);
+      background-color: var(--colorNeutralBackground1);
+      & :global(.fui-MenuItem__subText) {
+        color: var(--colorNeutralForegroundDisabled);
+      }
+    }
+    &:focus {
+      color: var(--colorNeutralForegroundDisabled);
+    }
+    @media (forced-colors: active) {
+      color: GrayText;
+      &:hover {
+        forced-color-adjust: auto;
+        color: GrayText;
+        background-color: Canvas;
+        & :global(.fui-MenuItem__icon) {
+          color: GrayText;
+          background-color: Canvas;
+        }
+        & :global(.fui-MenuItem__icon),
+        & :global(.fui-MenuItem__checkmark),
+        & :global(.fui-MenuItem__subText),
+        & :global(.fui-MenuItem__secondaryContent) {
+          color: GrayText;
+        }
+      }
+      &:hover:active {
+        color: GrayText;
+        background-color: Canvas;
+        & :global(.fui-MenuItem__subText) {
+          color: GrayText;
+        }
+      }
+      &:focus {
+        color: GrayText;
+        background-color: Canvas;
+      }
+    }
+  }
+}

package/lib-commonjs/components/MenuItem/MenuItem.types.cjs.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    submenuOpen: boolean;\n  };\n"],"names":[],"mappings":""}
+{"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":""}

package/lib-commonjs/components/MenuItem/index.cjs

@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    MenuItem: function() {
+    get MenuItem () {
         return _MenuItem.MenuItem;
     },
-    menuItemClassNames: function() {
+    get menuItemClassNames () {
         return _useMenuItemStylesstyles.menuItemClassNames;
     },
-    renderMenuItem_unstable: function() {
+    get renderMenuItem_unstable () {
         return _renderMenuItem.renderMenuItem_unstable;
     },
-    useMenuItemBase_unstable: function() {
+    get useMenuItemBase_unstable () {
         return _useMenuItemBase.useMenuItemBase_unstable;
     },
-    useMenuItemStyles_unstable: function() {
+    get useMenuItemStyles_unstable () {
         return _useMenuItemStylesstyles.useMenuItemStyles_unstable;
     },
-    useMenuItem_unstable: function() {
+    get useMenuItem_unstable () {
         return _useMenuItem.useMenuItem_unstable;
     }
 });

package/lib-commonjs/components/MenuItem/index.cjs.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 } 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":";;;;;;;;;;;;eAASA,kBAAQ;;;eAKRI,2CAAkB;;;eAHlBH,uCAAuB;;;eAEvBE,yCAAwB;;;eACJE,mDAA0B;;;eAF9CH,iCAAoB;;;0BAHJ,gBAAa;gCAEE,sBAAmB;6BACtB,mBAAgB;iCACZ,uBAAoB;yCACE,gCAA6B"}
+{"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":";;;;;;;;;;;;eAASA,kBAAQ;;;eAKRI,2CAAkB;;;eAHlBH,uCAAuB;;;eAEvBE,yCAAwB;;;eACJE,mDAA0B;;;eAF9CH,iCAAoB;;;0BAHJ,gBAAa;gCAEE,sBAAmB;6BACtB,mBAAgB;iCACZ,uBAAoB;yCACE,gCAA6B"}

package/lib-commonjs/components/MenuItem/renderMenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/renderMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState): JSXElement => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && (\n        <state.content>\n          {state.content.children}\n          {state.subText && <state.subText />}\n        </state.content>\n      )}\n      {state.secondaryContent && <state.secondaryContent />}\n      {state.submenuIndicator && <state.submenuIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItem_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent","submenuIndicator"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YACzBH,MAAMI,OAAO,IAAA,WAAA,OACZ,gBAAA,EAACJ,MAAMI,OAAO,EAAA;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,OAAO,EAAA,CAAA;;;YAGnCN,MAAMO,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,gBAAgB,EAAA,CAAA;YACjDP,MAAMQ,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,gBAAgB,EAAA,CAAA;;;AAGxD,EAAE"}
+{"version":3,"sources":["../../../src/components/MenuItem/renderMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState): JSXElement => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && (\n        <state.content>\n          {state.content.children}\n          {state.subText && <state.subText />}\n        </state.content>\n      )}\n      {state.secondaryContent && <state.secondaryContent />}\n      {state.submenuIndicator && <state.submenuIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItem_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent","submenuIndicator"],"mappings":";;;;+BASaC;;;;;;;gCARb,gDAAiD,GACjD,SAASD,WAAW,QAAQ,4BAA4B;AAOjD,gCAAgC,CAACE;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YACzBH,MAAMI,OAAO,IAAA,WAAA,OACZ,gBAAA,EAACJ,MAAMI,OAAO,EAAA;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,OAAO,EAAA,CAAA;;;YAGnCN,MAAMO,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,gBAAgB,EAAA,CAAA;YACjDP,MAAMQ,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,gBAAgB,EAAA,CAAA;;;AAGxD,EAAE"}

package/lib-commonjs/components/MenuItem/useCharacterSearch.cjs.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  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;;;;;+BAOaC;;;;;;iCAJ+B,oCAAiC;AAItE,2BAA2B,CAACC,OAAsBC;IACvD,MAAMC,+BAA2BJ,4CAAAA,EAA4BK,CAAAA,UAAWA,QAAQD,wBAAwB;IAExG,MAAM,EAAEE,WAAWC,iBAAiB,EAAE,GAAGL,MAAMM,IAAI;IAEnD,oDAAoD;IACpDN,MAAMM,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBE;QAEpB,IAAIA,CAAAA,CAAAA,SAAAA,EAAEC,GAAAA,AAAG,MAAA,QAALD,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAOE,MAAAA,AAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIR,IAAIS,OAAO,EAAE;YACfR,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,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  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;;;;;+BAOaC;;;;;;iCAJ+B,oCAAiC;AAItE,2BAA2B,CAACC,OAAsBC;IACvD,MAAMC,+BAA2BJ,4CAAAA,EAA4BK,CAAAA,UAAWA,QAAQD,wBAAwB;IAExG,MAAM,EAAEE,WAAWC,iBAAiB,EAAE,GAAGL,MAAMM,IAAI;IAEnD,oDAAoD;IACpDN,MAAMM,IAAI,CAACF,SAAS,GAAG,CAACG;YAGlBA;QAFJF,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBE;QAEpB,IAAIA,CAAAA,CAAAA,SAAAA,EAAEC,GAAAA,AAAG,MAAA,QAALD,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAOE,MAAAA,AAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIR,IAAIS,OAAO,EAAE;YACfR,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BK,GAAGN,IAAIS,OAAO;QAC3C;IACF;IAEA,OAAOV;AACT,EAAE"}

package/lib-commonjs/components/MenuItem/useMenuItem.cjs

@@ -21,8 +21,7 @@ const useMenuItem_unstable = (props, ref)=>{
     const state = (0, _useMenuItemBase.useMenuItemBase_unstable)(props, ref);
     // Set default chevron icon
     if (state.submenuIndicator) {
-        var _state_submenuIndicator;
-        var _children;
+        var _state_submenuIndicator, _children;
         (_children = (_state_submenuIndicator = state.submenuIndicator).children) !== null && _children !== void 0 ? _children : _state_submenuIndicator.children = dir === 'rtl' ? /*#__PURE__*/ _react.createElement(ChevronLeftIcon, null) : /*#__PURE__*/ _react.createElement(ChevronRightIcon, null);
     }
     return state;

package/lib-commonjs/components/MenuItem/useMenuItem.cjs.map

@@ -1 +1 @@
-{"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;;;;;;;;;;;;iEAEuB,QAAQ;qCACiB,kCAAkC;4BAO3E,wBAAwB;iCACU,uBAAoB;AAI7D,MAAMS,uBAAmBF,sBAAAA,EAAWJ,8BAAAA,EAAoBC,+BAAAA;AACxD,MAAMM,sBAAkBH,sBAAAA,EAAWF,6BAAAA,EAAmBC,8BAAAA;AAK/C,MAAMK,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,GAAG,EAAE,OAAGZ,uCAAAA;IAChB,MAAMa,YAAQP,yCAAAA,EAAyBI,OAAOC;IAE9C,2BAA2B;IAC3B,IAAIE,MAAMC,gBAAgB,EAAE;YAC1BD;;QAAAA,CAAAA,YAAAA,CAAAA,0BAAAA,MAAMC,gBAAAA,AAAgB,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAvBF,wBAAuBE,QAAAA,GAAaH,QAAQ,QAAA,WAAA,GAAQ,OAAA,aAAA,CAACJ,iBAAAA,QAAAA,WAAAA,GAAqB,OAAA,aAAA,CAACD,kBAAAA;IAC7E;IAEA,OAAOM;AACT,EAAE"}
+{"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;;;;;;;;;;;;iEAEuB,QAAQ;qCACiB,kCAAkC;4BAO3E,wBAAwB;iCACU,uBAAoB;AAI7D,MAAMS,uBAAmBF,sBAAAA,EAAWJ,8BAAAA,EAAoBC,+BAAAA;AACxD,MAAMM,sBAAkBH,sBAAAA,EAAWF,6BAAAA,EAAmBC,8BAAAA;AAK/C,MAAMK,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,GAAG,EAAE,OAAGZ,uCAAAA;IAChB,MAAMa,YAAQP,yCAAAA,EAAyBI,OAAOC;IAE9C,2BAA2B;IAC3B,IAAIE,MAAMC,gBAAgB,EAAE;YAC1BD,yBAAAA;SAAAA,YAAAA,CAAAA,0BAAAA,MAAMC,gBAAAA,AAAgB,EAACC,QAAAA,AAAQ,MAAA,QAA/BF,cAAAA,KAAAA,IAAAA,YAAAA,wBAAuBE,QAAQ,GAAKH,QAAQ,QAAA,WAAA,GAAQ,OAAA,aAAA,CAACJ,iBAAAA,QAAAA,WAAAA,GAAqB,OAAA,aAAA,CAACD,kBAAAA;IAC7E;IAEA,OAAOM;AACT,EAAE"}

package/lib-commonjs/components/MenuItem/useMenuItemBase.cjs.map

@@ -1 +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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"}
+{"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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"}