@fluentui/react-menu 9.18.0 → 9.19.1

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":[],"rangeMappings":"","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"],"names":[],"mappings":"AA8DA,WAC8E"}

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 } from './useMenuItem';\nexport { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\n"],"names":["MenuItem","renderMenuItem_unstable","useMenuItem_unstable","menuItemClassNames","useMenuItemStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,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 { menuItemClassNames, useMenuItemStyles_unstable } from './useMenuItemStyles.styles';\n"],"names":["MenuItem","renderMenuItem_unstable","useMenuItem_unstable","menuItemClassNames","useMenuItemStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

package/lib/components/MenuItem/renderMenuItem.js.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 { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState) => {\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBACZ,MAACJ,MAAMI,OAAO;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;YAGnCN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;YACjDP,MAAMQ,gBAAgB,kBAAI,KAACR,MAAMQ,gBAAgB;;;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 { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState) => {\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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBACZ,MAACJ,MAAMI,OAAO;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;YAGnCN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;YACjDP,MAAMQ,gBAAgB,kBAAI,KAACR,MAAMQ,gBAAgB;;;AAGxD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/useCharacterSearch.ts"],"sourcesContent":["import * 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>) => {\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":["React","useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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":["import * 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>) => {\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":["React","useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * 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 {\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonProps,\n  useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\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 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 { dir } = useFluent();\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\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) 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      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\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"],"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","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","secondaryContent","always","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","options","isSplitItemTrigger","setMultiline"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/MenuItem/useMenuItem.tsx"],"sourcesContent":["import * 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 {\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonProps,\n  useARIAButtonProps,\n} from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';\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 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 { dir } = useFluent();\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\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) 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      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\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"],"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","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","content","_content","rest","hasIcons","hasCheckmarks","useIconAndCheckmarkAlignment","setOpen","useNotifySplitItemMultiline","multiline","subText","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","secondaryContent","always","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseMove","currentTarget","ownerDocument","activeElement","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","options","isSplitItemTrigger","setMultiline"],"mappings":"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"}

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

@@ -0,0 +1,241 @@
+import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useCheckmarkStyles_unstable } from '../../selectable/index';
+export const menuItemClassNames = {
+    root: 'fui-MenuItem',
+    icon: 'fui-MenuItem__icon',
+    checkmark: 'fui-MenuItem__checkmark',
+    submenuIndicator: 'fui-MenuItem__submenuIndicator',
+    content: 'fui-MenuItem__content',
+    secondaryContent: 'fui-MenuItem__secondaryContent',
+    subText: 'fui-MenuItem__subText'
+};
+const useRootBaseStyles = makeResetStyles({
+    borderRadius: tokens.borderRadiusMedium,
+    position: 'relative',
+    color: tokens.colorNeutralForeground2,
+    backgroundColor: tokens.colorNeutralBackground1,
+    paddingRight: tokens.spacingVerticalSNudge,
+    paddingLeft: tokens.spacingVerticalSNudge,
+    paddingTop: tokens.spacingVerticalSNudge,
+    paddingBottom: tokens.spacingVerticalSNudge,
+    boxSizing: 'border-box',
+    maxWidth: '290px',
+    minHeight: '32px',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'start',
+    fontSize: tokens.fontSizeBase300,
+    cursor: 'pointer',
+    gap: '4px',
+    ':hover': {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
+        color: tokens.colorNeutralForeground2Hover,
+        [`& .${iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${iconRegularClassName}`]: {
+            display: 'none'
+        },
+        [`& .${menuItemClassNames.icon}`]: {
+            color: tokens.colorNeutralForeground2BrandSelected
+        },
+        [`& .${menuItemClassNames.subText}`]: {
+            color: tokens.colorNeutralForeground3Hover
+        }
+    },
+    ':hover:active': {
+        backgroundColor: tokens.colorNeutralBackground1Pressed,
+        color: tokens.colorNeutralForeground2Pressed,
+        [`& .${menuItemClassNames.subText}`]: {
+            color: tokens.colorNeutralForeground3Pressed
+        }
+    },
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        ':hover': {
+            backgroundColor: 'Canvas',
+            borderColor: 'Highlight',
+            color: 'Highlight'
+        },
+        ...createFocusOutlineStyle({
+            style: {
+                outlineColor: 'Highlight'
+            }
+        })
+    },
+    userSelect: 'none',
+    ...createFocusOutlineStyle()
+});
+const useContentBaseStyles = makeResetStyles({
+    paddingLeft: '2px',
+    paddingRight: '2px',
+    backgroundColor: 'transparent',
+    flexGrow: 1
+});
+const useSecondaryContentBaseStyles = makeResetStyles({
+    paddingLeft: '2px',
+    paddingRight: '2px',
+    ...typographyStyles.caption1,
+    lineHeight: tokens.lineHeightBase300,
+    color: tokens.colorNeutralForeground3,
+    ':hover': {
+        color: tokens.colorNeutralForeground3Hover
+    },
+    ':focus': {
+        color: tokens.colorNeutralForeground3Hover
+    }
+});
+const useIconBaseStyles = makeResetStyles({
+    width: '20px',
+    height: '20px',
+    fontSize: '20px',
+    lineHeight: 0,
+    alignItems: 'center',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    flexShrink: 0
+});
+const useSubmenuIndicatorBaseStyles = makeResetStyles({
+    width: '20px',
+    height: '20px',
+    fontSize: '20px',
+    lineHeight: 0,
+    alignItems: 'center',
+    display: 'inline-flex',
+    justifyContent: 'center'
+});
+const useSubtextBaseStyles = makeResetStyles({
+    ...typographyStyles.caption2,
+    color: tokens.colorNeutralForeground3
+});
+const useStyles = makeStyles({
+    checkmark: {
+        marginTop: '2px'
+    },
+    splitItemMain: {
+        flexGrow: 1
+    },
+    splitItemTrigger: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        paddingLeft: 0,
+        '::before': {
+            content: '""',
+            width: tokens.strokeWidthThin,
+            height: '24px',
+            backgroundColor: tokens.colorNeutralStroke1
+        }
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        ':hover': {
+            color: tokens.colorNeutralForegroundDisabled,
+            backgroundColor: tokens.colorNeutralBackground1,
+            cursor: 'not-allowed',
+            [`& .${iconFilledClassName}`]: {
+                display: 'none'
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'inline'
+            },
+            [`& .${menuItemClassNames.icon}`]: {
+                color: tokens.colorNeutralForegroundDisabled
+            },
+            [`& .${menuItemClassNames.subText}`]: {
+                color: tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':hover:active': {
+            color: tokens.colorNeutralForegroundDisabled,
+            backgroundColor: tokens.colorNeutralBackground1,
+            [`& .${menuItemClassNames.subText}`]: {
+                color: tokens.colorNeutralForegroundDisabled
+            }
+        },
+        ':focus': {
+            color: tokens.colorNeutralForegroundDisabled
+        },
+        '@media (forced-colors: active)': {
+            color: 'GrayText',
+            ':hover': {
+                color: 'GrayText',
+                backgroundColor: 'Canvas',
+                [`& .${menuItemClassNames.icon}`]: {
+                    color: 'GrayText',
+                    backgroundColor: 'Canvas'
+                },
+                [`& .${menuItemClassNames.subText}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':hover:active': {
+                color: 'GrayText',
+                backgroundColor: 'Canvas',
+                [`& .${menuItemClassNames.subText}`]: {
+                    color: 'GrayText'
+                }
+            },
+            ':focus': {
+                color: 'GrayText',
+                backgroundColor: 'Canvas'
+            }
+        }
+    }
+});
+const useSubTextStyles = makeStyles({
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    }
+});
+const useMultilineStyles = makeStyles({
+    content: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    secondaryContent: {
+        alignSelf: 'center'
+    },
+    submenuIndicator: {
+        alignSelf: 'center'
+    }
+});
+/** Applies style classnames to slots */ export const useMenuItemStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootBaseStyles = useRootBaseStyles();
+    const contentBaseStyles = useContentBaseStyles();
+    const secondaryContentBaseStyles = useSecondaryContentBaseStyles();
+    const iconBaseStyles = useIconBaseStyles();
+    const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();
+    const multilineStyles = useMultilineStyles();
+    const subtextBaseStyles = useSubtextBaseStyles();
+    const subTextStyles = useSubTextStyles();
+    const multiline = !!state.subText;
+    state.root.className = mergeClasses(menuItemClassNames.root, rootBaseStyles, state.disabled && styles.disabled, state.root.className);
+    if (state.content) {
+        state.content.className = mergeClasses(menuItemClassNames.content, contentBaseStyles, state.content.className, multiline && multilineStyles.content);
+    }
+    if (state.checkmark) {
+        state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = mergeClasses(menuItemClassNames.secondaryContent, secondaryContentBaseStyles, state.disabled && styles.disabled, state.secondaryContent.className, multiline && multilineStyles.secondaryContent);
+    }
+    if (state.icon) {
+        state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);
+    }
+    if (state.submenuIndicator) {
+        state.submenuIndicator.className = mergeClasses(menuItemClassNames.submenuIndicator, submenuIndicatorBaseStyles, state.submenuIndicator.className, multiline && multilineStyles.submenuIndicator);
+    }
+    if (state.subText) {
+        state.subText.className = mergeClasses(menuItemClassNames.subText, state.disabled && subTextStyles.disabled, state.subText.className, subtextBaseStyles);
+    }
+    useCheckmarkStyles_unstable(state);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItem/useMenuItemStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n  root: 'fui-MenuItem',\n  icon: 'fui-MenuItem__icon',\n  checkmark: 'fui-MenuItem__checkmark',\n  submenuIndicator: 'fui-MenuItem__submenuIndicator',\n  content: 'fui-MenuItem__content',\n  secondaryContent: 'fui-MenuItem__secondaryContent',\n  subText: 'fui-MenuItem__subText',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  borderRadius: tokens.borderRadiusMedium,\n  position: 'relative',\n  color: tokens.colorNeutralForeground2,\n  backgroundColor: tokens.colorNeutralBackground1,\n  paddingRight: tokens.spacingVerticalSNudge, // 6px\n  paddingLeft: tokens.spacingVerticalSNudge,\n  paddingTop: tokens.spacingVerticalSNudge,\n  paddingBottom: tokens.spacingVerticalSNudge,\n  boxSizing: 'border-box',\n  maxWidth: '290px',\n  minHeight: '32px',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'start',\n  fontSize: tokens.fontSizeBase300,\n  cursor: 'pointer',\n  gap: '4px',\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n    [`& .${menuItemClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2BrandSelected,\n    },\n\n    [`& .${menuItemClassNames.subText}`]: {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n\n    [`& .${menuItemClassNames.subText}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n\n  // High contrast styles\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'Canvas',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n    },\n    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n  },\n\n  userSelect: 'none',\n  ...createFocusOutlineStyle(),\n});\n\nconst useContentBaseStyles = makeResetStyles({\n  paddingLeft: '2px',\n  paddingRight: '2px',\n  backgroundColor: 'transparent',\n  flexGrow: 1,\n});\n\nconst useSecondaryContentBaseStyles = makeResetStyles({\n  paddingLeft: '2px',\n  paddingRight: '2px',\n  ...typographyStyles.caption1,\n  lineHeight: tokens.lineHeightBase300,\n  color: tokens.colorNeutralForeground3,\n  ':hover': {\n    color: tokens.colorNeutralForeground3Hover,\n  },\n  ':focus': {\n    color: tokens.colorNeutralForeground3Hover,\n  },\n});\n\nconst useIconBaseStyles = makeResetStyles({\n  width: '20px',\n  height: '20px',\n  fontSize: '20px',\n  lineHeight: 0,\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nconst useSubmenuIndicatorBaseStyles = makeResetStyles({\n  width: '20px',\n  height: '20px',\n  fontSize: '20px',\n  lineHeight: 0,\n  alignItems: 'center',\n  display: 'inline-flex',\n  justifyContent: 'center',\n});\n\nconst useSubtextBaseStyles = makeResetStyles({\n  ...typographyStyles.caption2,\n  color: tokens.colorNeutralForeground3,\n});\n\nconst useStyles = makeStyles({\n  checkmark: {\n    marginTop: '2px',\n  },\n\n  splitItemMain: {\n    flexGrow: 1,\n  },\n\n  splitItemTrigger: {\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n    paddingLeft: 0,\n    '::before': {\n      content: '\"\"',\n      width: tokens.strokeWidthThin,\n      height: '24px',\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n      backgroundColor: tokens.colorNeutralBackground1,\n      cursor: 'not-allowed',\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& .${menuItemClassNames.subText}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      color: tokens.colorNeutralForegroundDisabled,\n      backgroundColor: tokens.colorNeutralBackground1,\n\n      [`& .${menuItemClassNames.subText}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      ':hover': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n        [`& .${menuItemClassNames.icon}`]: {\n          color: 'GrayText',\n          backgroundColor: 'Canvas',\n        },\n        [`& .${menuItemClassNames.subText}`]: {\n          color: 'GrayText',\n        },\n      },\n      ':hover:active': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n        [`& .${menuItemClassNames.subText}`]: {\n          color: 'GrayText',\n        },\n      },\n      ':focus': {\n        color: 'GrayText',\n        backgroundColor: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useSubTextStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useMultilineStyles = makeStyles({\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  secondaryContent: {\n    alignSelf: 'center',\n  },\n\n  submenuIndicator: {\n    alignSelf: 'center',\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState): MenuItemState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootBaseStyles = useRootBaseStyles();\n  const contentBaseStyles = useContentBaseStyles();\n  const secondaryContentBaseStyles = useSecondaryContentBaseStyles();\n  const iconBaseStyles = useIconBaseStyles();\n  const submenuIndicatorBaseStyles = useSubmenuIndicatorBaseStyles();\n  const multilineStyles = useMultilineStyles();\n  const subtextBaseStyles = useSubtextBaseStyles();\n  const subTextStyles = useSubTextStyles();\n  const multiline = !!state.subText;\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    rootBaseStyles,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      menuItemClassNames.content,\n      contentBaseStyles,\n      state.content.className,\n      multiline && multilineStyles.content,\n    );\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, styles.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      secondaryContentBaseStyles,\n      state.disabled && styles.disabled,\n      state.secondaryContent.className,\n      multiline && multilineStyles.secondaryContent,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, iconBaseStyles, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      submenuIndicatorBaseStyles,\n      state.submenuIndicator.className,\n      multiline && multilineStyles.submenuIndicator,\n    );\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(\n      menuItemClassNames.subText,\n      state.disabled && subTextStyles.disabled,\n      state.subText.className,\n      subtextBaseStyles,\n    );\n  }\n\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","makeResetStyles","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","typographyStyles","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","subText","useRootBaseStyles","borderRadius","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","paddingRight","spacingVerticalSNudge","paddingLeft","paddingTop","paddingBottom","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","colorNeutralBackground1Hover","colorNeutralForeground2Hover","colorNeutralForeground2BrandSelected","colorNeutralForeground3Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","colorNeutralForeground3Pressed","borderColor","style","outlineColor","userSelect","useContentBaseStyles","flexGrow","useSecondaryContentBaseStyles","caption1","lineHeight","lineHeightBase300","colorNeutralForeground3","useIconBaseStyles","width","height","justifyContent","useSubmenuIndicatorBaseStyles","useSubtextBaseStyles","caption2","useStyles","marginTop","splitItemMain","splitItemTrigger","borderTopLeftRadius","borderBottomLeftRadius","strokeWidthThin","colorNeutralStroke1","disabled","colorNeutralForegroundDisabled","useSubTextStyles","useMultilineStyles","flexDirection","alignSelf","useMenuItemStyles_unstable","state","styles","rootBaseStyles","contentBaseStyles","secondaryContentBaseStyles","iconBaseStyles","submenuIndicatorBaseStyles","multilineStyles","subtextBaseStyles","subTextStyles","multiline","className"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.\n */\nexport const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemCheckbox_unstable(props, ref);\n\n  useMenuItemCheckboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuItemCheckboxStyles_unstable')(state);\n\n  return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"names":["React","useMenuItemCheckbox_unstable","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useCustomStyleHook_unstable","MenuItemCheckbox","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAGxF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,iCAA+DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQR,6BAA6BM,OAAOC;IAElDL,mCAAmCM;IAEnCL,4BAA4B,sCAAsCK;IAElE,OAAOP,gCAAgCO;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.\n */\nexport const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemCheckbox_unstable(props, ref);\n\n  useMenuItemCheckboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuItemCheckboxStyles_unstable')(state);\n\n  return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"names":["React","useMenuItemCheckbox_unstable","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useCustomStyleHook_unstable","MenuItemCheckbox","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAGxF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,iCAA+DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQR,6BAA6BM,OAAOC;IAElDL,mCAAmCM;IAEnCL,4BAA4B,sCAAsCK;IAElE,OAAOP,gCAAgCO;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"sourcesContent":["import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;\n\nexport type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;\n"],"names":[],"rangeMappings":"","mappings":"AAKA,WAA4E"}
+{"version":3,"sources":["../src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"sourcesContent":["import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;\n\nexport type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;\n"],"names":[],"mappings":"AAKA,WAA4E"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemCheckbox/index.ts"],"sourcesContent":["export type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nexport { MenuItemCheckbox } from './MenuItemCheckbox';\nexport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nexport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nexport { menuItemCheckboxClassNames, useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles';\n"],"names":["MenuItemCheckbox","renderMenuItemCheckbox_unstable","useMenuItemCheckbox_unstable","menuItemCheckboxClassNames","useMenuItemCheckboxStyles_unstable"],"rangeMappings":";;;","mappings":"AACA,SAASA,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,0BAA0B,EAAEC,kCAAkC,QAAQ,qCAAqC"}
+{"version":3,"sources":["../src/components/MenuItemCheckbox/index.ts"],"sourcesContent":["export type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nexport { MenuItemCheckbox } from './MenuItemCheckbox';\nexport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nexport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nexport { menuItemCheckboxClassNames, useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles';\n"],"names":["MenuItemCheckbox","renderMenuItemCheckbox_unstable","useMenuItemCheckbox_unstable","menuItemCheckboxClassNames","useMenuItemCheckboxStyles_unstable"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,0BAA0B,EAAEC,kCAAkC,QAAQ,qCAAqC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/** Function that renders the final JSX of the component  */\nexport const renderMenuItemCheckbox_unstable = (state: MenuItemCheckboxState) => {\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.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemCheckbox_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,0DAA0D,GAC1D,OAAO,MAAMC,kCAAkC,CAACC;IAC9CF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBACZ,MAACJ,MAAMI,OAAO;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;YAGnCN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;;;AAGxD,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/** Function that renders the final JSX of the component  */\nexport const renderMenuItemCheckbox_unstable = (state: MenuItemCheckboxState) => {\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.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemCheckbox_unstable","state","root","checkmark","icon","content","children","subText","secondaryContent"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD,0DAA0D,GAC1D,OAAO,MAAMC,kCAAkC,CAACC;IAC9CF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBACZ,MAACJ,MAAMI,OAAO;;oBACXJ,MAAMI,OAAO,CAACC,QAAQ;oBACtBL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;YAGnCN,MAAMO,gBAAgB,kBAAI,KAACP,MAAMO,gBAAgB;;;AAGxD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n  const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const state: MenuItemCheckboxState = {\n    ...useMenuItem_unstable(\n      {\n        role: 'menuitemcheckbox',\n        persistOnClick: true,\n        ...props,\n        'aria-checked': checked,\n        checkmark: slot.optional(props.checkmark, {\n          defaultProps: { children: <Checkmark16Filled /> },\n          renderByDefault: true,\n          elementType: 'span',\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          toggleCheckbox?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    name,\n    value,\n    checked,\n  };\n\n  return state;\n};\n"],"names":["React","slot","Checkmark16Filled","useMenuListContext_unstable","useMenuItem_unstable","useMenuItemCheckbox_unstable","props","ref","toggleCheckbox","context","name","value","checked","checkedItems","checkedValues","indexOf","state","role","persistOnClick","checkmark","optional","defaultProps","children","renderByDefault","elementType","onClick","e"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,oBAAoB,QAAQ,0BAA0B;AAI/D,iEAAiE,GACjE,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,iBAAiBL,4BAA4BM,CAAAA,UAAWA,QAAQD,cAAc;IACpF,MAAM,EAAEE,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAExB,MAAMM,UAAUT,4BAA4BM,CAAAA;YACrBA;QAArB,MAAMI,eAAeJ,EAAAA,yBAAAA,QAAQK,aAAa,cAArBL,6CAAAA,sBAAuB,CAACC,KAAK,KAAI,EAAE;QACxD,OAAOG,aAAaE,OAAO,CAACJ,WAAW,CAAC;IAC1C;IAEA,MAAMK,QAA+B;QACnC,GAAGZ,qBACD;YACEa,MAAM;YACNC,gBAAgB;YAChB,GAAGZ,KAAK;YACR,gBAAgBM;YAChBO,WAAWlB,KAAKmB,QAAQ,CAACd,MAAMa,SAAS,EAAE;gBACxCE,cAAc;oBAAEC,wBAAU,oBAACpB;gBAAqB;gBAChDqB,iBAAiB;gBACjBC,aAAa;YACf;YACAC,SAAS,CAACC;oBAERpB;gBADAE,2BAAAA,qCAAAA,eAAiBkB,GAAGhB,MAAMC,OAAOC;iBACjCN,iBAAAA,MAAMmB,OAAO,cAAbnB,qCAAAA,oBAAAA,OAAgBoB;YAClB;QACF,GACAnB,IACD;QACDG;QACAC;QACAC;IACF;IAEA,OAAOI;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n  const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const state: MenuItemCheckboxState = {\n    ...useMenuItem_unstable(\n      {\n        role: 'menuitemcheckbox',\n        persistOnClick: true,\n        ...props,\n        'aria-checked': checked,\n        checkmark: slot.optional(props.checkmark, {\n          defaultProps: { children: <Checkmark16Filled /> },\n          renderByDefault: true,\n          elementType: 'span',\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          toggleCheckbox?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    name,\n    value,\n    checked,\n  };\n\n  return state;\n};\n"],"names":["React","slot","Checkmark16Filled","useMenuListContext_unstable","useMenuItem_unstable","useMenuItemCheckbox_unstable","props","ref","toggleCheckbox","context","name","value","checked","checkedItems","checkedValues","indexOf","state","role","persistOnClick","checkmark","optional","defaultProps","children","renderByDefault","elementType","onClick","e"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,oBAAoB,QAAQ,0BAA0B;AAI/D,iEAAiE,GACjE,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,iBAAiBL,4BAA4BM,CAAAA,UAAWA,QAAQD,cAAc;IACpF,MAAM,EAAEE,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAExB,MAAMM,UAAUT,4BAA4BM,CAAAA;YACrBA;QAArB,MAAMI,eAAeJ,EAAAA,yBAAAA,QAAQK,aAAa,cAArBL,6CAAAA,sBAAuB,CAACC,KAAK,KAAI,EAAE;QACxD,OAAOG,aAAaE,OAAO,CAACJ,WAAW,CAAC;IAC1C;IAEA,MAAMK,QAA+B;QACnC,GAAGZ,qBACD;YACEa,MAAM;YACNC,gBAAgB;YAChB,GAAGZ,KAAK;YACR,gBAAgBM;YAChBO,WAAWlB,KAAKmB,QAAQ,CAACd,MAAMa,SAAS,EAAE;gBACxCE,cAAc;oBAAEC,wBAAU,oBAACpB;gBAAqB;gBAChDqB,iBAAiB;gBACjBC,aAAa;YACf;YACAC,SAAS,CAACC;oBAERpB;gBADAE,2BAAAA,qCAAAA,eAAiBkB,GAAGhB,MAAMC,OAAOC;iBACjCN,iBAAAA,MAAMmB,OAAO,cAAbnB,qCAAAA,oBAAAA,OAAgBoB;YAClB;QACF,GACAnB,IACD;QACDG;QACAC;QACAC;IACF;IAEA,OAAOI;AACT,EAAE"}

package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js

@@ -0,0 +1,33 @@
+import { mergeClasses } from '@griffel/react';
+import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
+export const menuItemCheckboxClassNames = {
+    root: 'fui-MenuItemCheckbox',
+    icon: 'fui-MenuItemCheckbox__icon',
+    checkmark: 'fui-MenuItemCheckbox__checkmark',
+    content: 'fui-MenuItemCheckbox__content',
+    secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
+    subText: 'fui-MenuItemCheckbox__subText'
+};
+export const useMenuItemCheckboxStyles_unstable = (state)=>{
+    'use no memo';
+    state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);
+    if (state.content) {
+        state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = mergeClasses(menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
+    }
+    if (state.icon) {
+        state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);
+    }
+    if (state.checkmark) {
+        state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
+    }
+    if (state.subText) {
+        state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);
+    }
+    useMenuItemStyles_unstable(state);
+    useCheckmarkStyles_unstable(state);
+    return state;
+};

package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n  root: 'fui-MenuItemCheckbox',\n  icon: 'fui-MenuItemCheckbox__icon',\n  checkmark: 'fui-MenuItemCheckbox__checkmark',\n  content: 'fui-MenuItemCheckbox__content',\n  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n  subText: 'fui-MenuItemCheckbox__subText',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState): MenuItemCheckboxState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemCheckboxClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(menuItemCheckboxClassNames.subText, state.subText.className);\n  }\n\n  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n\n  return state;\n};\n"],"names":["mergeClasses","useCheckmarkStyles_unstable","useMenuItemStyles_unstable","menuItemCheckboxClassNames","root","icon","checkmark","content","secondaryContent","subText","useMenuItemCheckboxStyles_unstable","state","className"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,yBAAyB;AACrE,SAASC,0BAA0B,QAAQ,uCAAuC;AAKlF,OAAO,MAAMC,6BAAsF;IACjGC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;IAClBC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEAA,MAAMP,IAAI,CAACQ,SAAS,GAAGZ,aAAaG,2BAA2BC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAEzF,IAAID,MAAMJ,OAAO,EAAE;QACjBI,MAAMJ,OAAO,CAACK,SAAS,GAAGZ,aAAaG,2BAA2BI,OAAO,EAAEI,MAAMJ,OAAO,CAACK,SAAS;IACpG;IAEA,IAAID,MAAMH,gBAAgB,EAAE;QAC1BG,MAAMH,gBAAgB,CAACI,SAAS,GAAGZ,aACjCG,2BAA2BK,gBAAgB,EAC3CG,MAAMH,gBAAgB,CAACI,SAAS;IAEpC;IAEA,IAAID,MAAMN,IAAI,EAAE;QACdM,MAAMN,IAAI,CAACO,SAAS,GAAGZ,aAAaG,2BAA2BE,IAAI,EAAEM,MAAMN,IAAI,CAACO,SAAS;IAC3F;IAEA,IAAID,MAAML,SAAS,EAAE;QACnBK,MAAML,SAAS,CAACM,SAAS,GAAGZ,aAAaG,2BAA2BG,SAAS,EAAEK,MAAML,SAAS,CAACM,SAAS;IAC1G;IAEA,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGZ,aAAaG,2BAA2BM,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACpG;IAEAV,2BAA2BS;IAC3BV,4BAA4BU;IAE5B,OAAOA;AACT,EAAE"}

package/lib/components/MenuItemLink/MenuItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/MenuItemLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemLink_unstable } from './useMenuItemLink';\nimport { renderMenuItemLink_unstable } from './renderMenuItemLink';\nimport { useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';\nimport type { MenuItemLinkProps } from './MenuItemLink.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuItemLink component\n */\nexport const MenuItemLink: ForwardRefComponent<MenuItemLinkProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemLink_unstable(props, ref);\n\n  useMenuItemLinkStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuItemLinkStyles_unstable')(state);\n\n  return renderMenuItemLink_unstable(state);\n});\n\nMenuItemLink.displayName = 'MenuItemLink';\n"],"names":["React","useMenuItemLink_unstable","renderMenuItemLink_unstable","useMenuItemLinkStyles_unstable","useCustomStyleHook_unstable","MenuItemLink","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuItemLink/MenuItemLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemLink_unstable } from './useMenuItemLink';\nimport { renderMenuItemLink_unstable } from './renderMenuItemLink';\nimport { useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';\nimport type { MenuItemLinkProps } from './MenuItemLink.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuItemLink component\n */\nexport const MenuItemLink: ForwardRefComponent<MenuItemLinkProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemLink_unstable(props, ref);\n\n  useMenuItemLinkStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuItemLinkStyles_unstable')(state);\n\n  return renderMenuItemLink_unstable(state);\n});\n\nMenuItemLink.displayName = 'MenuItemLink';\n"],"names":["React","useMenuItemLink_unstable","renderMenuItemLink_unstable","useMenuItemLinkStyles_unstable","useCustomStyleHook_unstable","MenuItemLink","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/MenuItemLink.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuItemProps, MenuItemSlots } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemLinkSlots = {\n  root: Slot<'a'>;\n} & Pick<MenuItemSlots, 'icon' | 'content' | 'secondaryContent' | 'checkmark'>;\n\n/**\n * MenuItemLink Props\n */\nexport type MenuItemLinkProps = ComponentProps<MenuItemLinkSlots> & Pick<MenuItemProps, 'disabled'> & { href: string };\n\n/**\n * State used in rendering MenuItemLink\n */\nexport type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAYA;;CAEC,GACD,WAAkE"}
+{"version":3,"sources":["../src/components/MenuItemLink/MenuItemLink.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuItemProps, MenuItemSlots } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemLinkSlots = {\n  root: Slot<'a'>;\n} & Pick<MenuItemSlots, 'icon' | 'content' | 'secondaryContent' | 'checkmark'>;\n\n/**\n * MenuItemLink Props\n */\nexport type MenuItemLinkProps = ComponentProps<MenuItemLinkSlots> & Pick<MenuItemProps, 'disabled'> & { href: string };\n\n/**\n * State used in rendering MenuItemLink\n */\nexport type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAAkE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/index.ts"],"sourcesContent":["export { MenuItemLink } from './MenuItemLink';\nexport type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nexport { renderMenuItemLink_unstable } from './renderMenuItemLink';\nexport { useMenuItemLink_unstable } from './useMenuItemLink';\nexport { menuItemLinkClassNames, useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';\n"],"names":["MenuItemLink","renderMenuItemLink_unstable","useMenuItemLink_unstable","menuItemLinkClassNames","useMenuItemLinkStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
+{"version":3,"sources":["../src/components/MenuItemLink/index.ts"],"sourcesContent":["export { MenuItemLink } from './MenuItemLink';\nexport type { MenuItemLinkProps, MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nexport { renderMenuItemLink_unstable } from './renderMenuItemLink';\nexport { useMenuItemLink_unstable } from './useMenuItemLink';\nexport { menuItemLinkClassNames, useMenuItemLinkStyles_unstable } from './useMenuItemLinkStyles.styles';\n"],"names":["MenuItemLink","renderMenuItemLink_unstable","useMenuItemLink_unstable","menuItemLinkClassNames","useMenuItemLinkStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

package/lib/components/MenuItemLink/renderMenuItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/renderMenuItemLink.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemLinkState, MenuItemLinkSlots } from './MenuItemLink.types';\n\n/**\n * Render the final JSX of MenuItemLink\n */\nexport const renderMenuItemLink_unstable = (state: MenuItemLinkState) => {\n  assertSlots<MenuItemLinkSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && <state.content />}\n      {state.secondaryContent && <state.secondaryContent />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemLink_unstable","state","root","checkmark","icon","content","secondaryContent"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qDAAqD;IACrD,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBAAI,KAACJ,MAAMI,OAAO;YAC/BJ,MAAMK,gBAAgB,kBAAI,KAACL,MAAMK,gBAAgB;;;AAGxD,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemLink/renderMenuItemLink.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemLinkState, MenuItemLinkSlots } from './MenuItemLink.types';\n\n/**\n * Render the final JSX of MenuItemLink\n */\nexport const renderMenuItemLink_unstable = (state: MenuItemLinkState) => {\n  assertSlots<MenuItemLinkSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && <state.content />}\n      {state.secondaryContent && <state.secondaryContent />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderMenuItemLink_unstable","state","root","checkmark","icon","content","secondaryContent"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qDAAqD;IACrD,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,OAAO,kBAAI,KAACJ,MAAMI,OAAO;YAC/BJ,MAAMK,gBAAgB,kBAAI,KAACL,MAAMK,gBAAgB;;;AAGxD,EAAE"}

package/lib/components/MenuItemLink/useMenuItemLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  // FIXME: casting because the root slot changes from div to a,\n  // ideal solution would be to extract common logic from useMenuItem_unstable root\n  // and use it in both without assuming element type\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAiCC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnG,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMP,KAAKU,MAAM,CACfX,yBAAyB,KAAK;YAC5BY,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { ExtractSlotProps, Slot, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  // FIXME: casting because the root slot changes from div to a,\n  // ideal solution would be to extract common logic from useMenuItem_unstable root\n  // and use it in both without assuming element type\n  const _props = { ...props, ...(baseState.root as ExtractSlotProps<Slot<'a'>>), ref, tabIndex: props.tabIndex };\n\n  return {\n    ...baseState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        role: 'menuitem',\n        ..._props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","_props","root","tabIndex","components","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAiCC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnG,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,8DAA8D;IAC9D,iFAAiF;IACjF,mDAAmD;IACnD,MAAMG,SAAS;QAAE,GAAGH,KAAK;QAAE,GAAIE,UAAUE,IAAI;QAAkCH;QAAKI,UAAUL,MAAMK,QAAQ;IAAC;IAE7G,OAAO;QACL,GAAGH,SAAS;QACZI,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,UAAUI,UAAU;YACvBF,MAAM;QACR;QACAA,MAAMP,KAAKU,MAAM,CACfX,yBAAyB,KAAK;YAC5BY,MAAM;YACN,GAAGL,MAAM;QACX,IACA;YAAEM,aAAa;QAAI;IAEvB;AACF,EAAE"}

package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js

@@ -0,0 +1,40 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
+export const menuItemLinkClassNames = {
+    root: 'fui-MenuItemLink',
+    icon: 'fui-MenuItemLink__icon',
+    checkmark: 'fui-MenuItemLink__checkmark',
+    content: 'fui-MenuItemLink__content',
+    secondaryContent: 'fui-MenuItemLink__secondaryContent'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    resetLink: {
+        textDecorationLine: 'none',
+        textDecorationThickness: 'initial',
+        textDecorationStyle: 'initial',
+        textDecorationColor: 'initial'
+    }
+});
+/**
+ * Apply styling to the MenuItemLink slots based on the state
+ */ export const useMenuItemLinkStyles_unstable = (state)=>{
+    'use no memo';
+    useMenuItemStyles_unstable(state);
+    const styles = useStyles();
+    state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);
+    }
+    if (state.content) {
+        state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = mergeClasses(menuItemLinkClassNames.secondaryContent, state.secondaryContent.className);
+    }
+    if (state.checkmark) {
+        state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);
+    }
+    return state;
+};

package/lib/components/MenuItemLink/useMenuItemLinkStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuItemLink/useMenuItemLinkStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuItemLinkSlots, MenuItemLinkState } from './MenuItemLink.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';\nimport { MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport const menuItemLinkClassNames: SlotClassNames<MenuItemLinkSlots> = {\n  root: 'fui-MenuItemLink',\n  icon: 'fui-MenuItemLink__icon',\n  checkmark: 'fui-MenuItemLink__checkmark',\n  content: 'fui-MenuItemLink__content',\n  secondaryContent: 'fui-MenuItemLink__secondaryContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  resetLink: {\n    textDecorationLine: 'none',\n    textDecorationThickness: 'initial',\n    textDecorationStyle: 'initial',\n    textDecorationColor: 'initial',\n  },\n});\n\n/**\n * Apply styling to the MenuItemLink slots based on the state\n */\nexport const useMenuItemLinkStyles_unstable = (state: MenuItemLinkState): MenuItemLinkState => {\n  'use no memo';\n\n  useMenuItemStyles_unstable(state as MenuItemState);\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuItemLinkClassNames.root, styles.resetLink, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemLinkClassNames.icon, state.icon.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemLinkClassNames.content, state.content.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemLinkClassNames.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemLinkClassNames.checkmark, state.checkmark.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useMenuItemStyles_unstable","menuItemLinkClassNames","root","icon","checkmark","content","secondaryContent","useStyles","resetLink","textDecorationLine","textDecorationThickness","textDecorationStyle","textDecorationColor","useMenuItemLinkStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uCAAuC;AAGlF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,MAAM;IACNC,WAAW;IACXC,SAAS;IACTC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,oBAAoB;QACpBC,yBAAyB;QACzBC,qBAAqB;QACrBC,qBAAqB;IACvB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAd,2BAA2Bc;IAC3B,MAAMC,SAASR;IACfO,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,uBAAuBC,IAAI,EAAEa,OAAOP,SAAS,EAAEM,MAAMZ,IAAI,CAACc,SAAS;IAEvG,IAAIF,MAAMX,IAAI,EAAE;QACdW,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaE,uBAAuBE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACvF;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjBS,MAAMT,OAAO,CAACW,SAAS,GAAGjB,aAAaE,uBAAuBI,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChG;IAEA,IAAIF,MAAMR,gBAAgB,EAAE;QAC1BQ,MAAMR,gBAAgB,CAACU,SAAS,GAAGjB,aACjCE,uBAAuBK,gBAAgB,EACvCQ,MAAMR,gBAAgB,CAACU,SAAS;IAEpC;IAEA,IAAIF,MAAMV,SAAS,EAAE;QACnBU,MAAMV,SAAS,CAACY,SAAS,GAAGjB,aAAaE,uBAAuBG,SAAS,EAAEU,MAAMV,SAAS,CAACY,SAAS;IACtG;IAEA,OAAOF;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemRadio/MenuItemRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio_unstable } from './useMenuItemRadio';\nimport { renderMenuItemRadio_unstable } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles.styles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.\n */\nexport const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemRadio_unstable(props, ref);\n\n  useMenuItemRadioStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuItemRadioStyles_unstable')(state);\n\n  return renderMenuItemRadio_unstable(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"],"names":["React","useMenuItemRadio_unstable","renderMenuItemRadio_unstable","useMenuItemRadioStyles_unstable","useCustomStyleHook_unstable","MenuItemRadio","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAEhCL,4BAA4B,mCAAmCK;IAE/D,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuItemRadio/MenuItemRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio_unstable } from './useMenuItemRadio';\nimport { renderMenuItemRadio_unstable } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles.styles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.\n */\nexport const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItemRadio_unstable(props, ref);\n\n  useMenuItemRadioStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuItemRadioStyles_unstable')(state);\n\n  return renderMenuItemRadio_unstable(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"],"names":["React","useMenuItemRadio_unstable","renderMenuItemRadio_unstable","useMenuItemRadioStyles_unstable","useCustomStyleHook_unstable","MenuItemRadio","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAEhCL,4BAA4B,mCAAmCK;IAE/D,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuItemRadio/MenuItemRadio.types.ts"],"sourcesContent":["import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;\n\nexport type MenuItemRadioState = MenuItemState & MenuItemSelectableState;\n"],"names":[],"rangeMappings":"","mappings":"AAKA,WAAyE"}
+{"version":3,"sources":["../src/components/MenuItemRadio/MenuItemRadio.types.ts"],"sourcesContent":["import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;\n\nexport type MenuItemRadioState = MenuItemState & MenuItemSelectableState;\n"],"names":[],"mappings":"AAKA,WAAyE"}