@fluentui/react-menu 0.0.0-nightly-20220715-0418.1 → 0.0.0-nightly-20221007-1237.1

package/lib/components/MenuItem/useMenuItem.js

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { useEventCallback, shouldPreventDefaultOnKeyDown, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';
+import { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useCharacterSearch } from './useCharacterSearch';
 import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
 import { ChevronRightFilled, ChevronRightRegular, ChevronLeftFilled, ChevronLeftRegular, bundleIcon } from '@fluentui/react-icons';
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { useARIAButtonShorthand } from '@fluentui/react-aria';
+import { Enter, Space } from '@fluentui/keyboard-keys';
 const ChevronRightIcon = /*#__PURE__*/bundleIcon(ChevronRightFilled, ChevronRightRegular);
 const ChevronLeftIcon = /*#__PURE__*/bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
 /**
@@ -13,22 +15,28 @@ const ChevronLeftIcon = /*#__PURE__*/bundleIcon(ChevronLeftFilled, ChevronLeftRe
  */
 
 export const useMenuItem_unstable = (props, ref) => {
-  var _a;
-
+  const isSubmenuTrigger = useMenuTriggerContext_unstable();
+  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
+  const {
+    as = 'div',
+    disabled,
+    disabledFocusable,
+    hasSubmenu = isSubmenuTrigger,
+    persistOnClick = persistOnClickContext
+  } = props;
   const hasIcons = useMenuListContext_unstable(context => context.hasIcons);
   const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);
   const setOpen = useMenuContext_unstable(context => context.setOpen);
-  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
-  const dismissedWithKeyboardRef = React.useRef(false);
-  const isSubmenuTrigger = useMenuTriggerContext_unstable();
-  const hasSubmenu = (_a = props.hasSubmenu) !== null && _a !== void 0 ? _a : isSubmenuTrigger;
   const {
     dir
   } = useFluent();
   const innerRef = React.useRef(null);
+  const dismissedWithKeyboardRef = React.useRef(false);
+  const isDisabled = Boolean(disabled || disabledFocusable);
   const state = {
     hasSubmenu,
-    ...props,
+    disabled: isDisabled,
+    persistOnClick,
     components: {
       root: 'div',
       icon: 'span',
@@ -37,13 +45,48 @@ export const useMenuItem_unstable = (props, ref) => {
       content: 'span',
       secondaryContent: 'span'
     },
-    root: getNativeElementProps('div', {
-      ref: useMergedRefs(ref, innerRef),
-      role: 'menuitem',
-      tabIndex: 0,
-      'aria-disabled': props.disabled,
-      ...props
-    }),
+    isNativeButton: as === 'button',
+    root: getNativeElementProps(as, useARIAButtonShorthand({
+      disabled: false,
+      disabledFocusable: isDisabled,
+      as
+    }, {
+      required: true,
+      defaultProps: {
+        role: 'menuitem',
+        ...props,
+        ref: useMergedRefs(ref, innerRef),
+        onKeyDown: useEventCallback(event => {
+          var _a;
+
+          (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+
+          if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {
+            dismissedWithKeyboardRef.current = true;
+          }
+        }),
+        onMouseEnter: useEventCallback(event => {
+          var _a, _b;
+
+          (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+          (_b = props.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(props, event);
+        }),
+        onClick: useEventCallback(event => {
+          var _a;
+
+          if (!hasSubmenu && !persistOnClick) {
+            setOpen(event, {
+              open: false,
+              keyboard: dismissedWithKeyboardRef.current,
+              bubble: true
+            });
+            dismissedWithKeyboardRef.current = false;
+          }
+
+          (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        })
+      }
+    })),
     icon: resolveShorthand(props.icon, {
       required: hasIcons
     }),
@@ -64,63 +107,6 @@ export const useMenuItem_unstable = (props, ref) => {
     }),
     secondaryContent: resolveShorthand(props.secondaryContent)
   };
-  const {
-    onClick: onClickOriginal,
-    onKeyDown: onKeyDownOriginal
-  } = state.root;
-
-  state.root.onKeyDown = e => {
-    var _a;
-
-    if (shouldPreventDefaultOnKeyDown(e)) {
-      if (state.disabled) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-
-      dismissedWithKeyboardRef.current = true;
-      e.preventDefault();
-      (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
-    }
-
-    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
-  };
-
-  state.root.onClick = e => {
-    if (state.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-    }
-
-    let shouldPersist = persistOnClickContext; // prop wins over context;
-
-    if (state.persistOnClick !== undefined && persistOnClickContext !== state.persistOnClick) {
-      shouldPersist = state.persistOnClick;
-    }
-
-    if (!hasSubmenu && !shouldPersist) {
-      setOpen(e, {
-        open: false,
-        keyboard: dismissedWithKeyboardRef.current,
-        bubble: true
-      });
-      dismissedWithKeyboardRef.current = false;
-    }
-
-    onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
-  };
-
-  const {
-    onMouseEnter: onMouseEnterOriginal
-  } = state.root;
-  state.root.onMouseEnter = useEventCallback(e => {
-    var _a;
-
-    (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
-  });
   useCharacterSearch(state, innerRef);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  useEventCallback,\n  shouldPreventDefaultOnKeyDown,\n  resolveShorthand,\n  useMergedRefs,\n  getNativeElementProps,\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';\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<HTMLElement>): MenuItemState => {\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const isSubmenuTrigger = useMenuTriggerContext_unstable();\n  const hasSubmenu = props.hasSubmenu ?? isSubmenuTrigger;\n\n  const { dir } = useFluent();\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    ...props,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'menuitem',\n      tabIndex: 0,\n      'aria-disabled': props.disabled,\n      ...props,\n    }),\n    icon: resolveShorthand(props.icon, { required: hasIcons }),\n    checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n    submenuIndicator: resolveShorthand(props.submenuIndicator, {\n      required: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: !!props.children,\n      defaultProps: { children: props.children },\n    }),\n    secondaryContent: resolveShorthand(props.secondaryContent),\n  };\n\n  const { onClick: onClickOriginal, onKeyDown: onKeyDownOriginal } = state.root;\n  state.root.onKeyDown = e => {\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      if (state.disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n\n      dismissedWithKeyboardRef.current = true;\n      e.preventDefault();\n      (e.target as HTMLElement)?.click();\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  state.root.onClick = e => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    let shouldPersist = persistOnClickContext;\n    // prop wins over context;\n    if (state.persistOnClick !== undefined && persistOnClickContext !== state.persistOnClick) {\n      shouldPersist = state.persistOnClick;\n    }\n\n    if (!hasSubmenu && !shouldPersist) {\n      setOpen(e, { open: false, keyboard: dismissedWithKeyboardRef.current, bubble: true });\n      dismissedWithKeyboardRef.current = false;\n    }\n\n    onClickOriginal?.(e);\n  };\n\n  const { onMouseEnter: onMouseEnterOriginal } = state.root;\n  state.root.onMouseEnter = useEventCallback(e => {\n    innerRef.current?.focus();\n\n    onMouseEnterOriginal?.(e);\n  });\n\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n  ChevronRightFilled,\n  ChevronRightRegular,\n  ChevronLeftFilled,\n  ChevronLeftRegular,\n  bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\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,\n    disabledFocusable,\n    hasSubmenu = isSubmenuTrigger,\n    persistOnClick = persistOnClickContext,\n  } = props;\n  const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n  const { dir } = useFluent();\n  const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n  const dismissedWithKeyboardRef = React.useRef(false);\n\n  const isDisabled = Boolean(disabled || disabledFocusable);\n\n  const state: MenuItemState = {\n    hasSubmenu,\n    disabled: isDisabled,\n    persistOnClick,\n    components: {\n      root: 'div',\n      icon: 'span',\n      checkmark: 'span',\n      submenuIndicator: 'span',\n      content: 'span',\n      secondaryContent: 'span',\n    },\n    isNativeButton: as === 'button',\n    root: getNativeElementProps(\n      as,\n      useARIAButtonShorthand<ARIAButtonSlotProps<'div'>>(\n        { disabled: false, disabledFocusable: isDisabled, as },\n        {\n          required: true,\n          defaultProps: {\n            role: 'menuitem',\n            ...props,\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            onMouseEnter: useEventCallback(event => {\n              innerRef.current?.focus();\n\n              props.onMouseEnter?.(event);\n            }),\n            onClick: useEventCallback(event => {\n              if (!hasSubmenu && !persistOnClick) {\n                setOpen(event, { open: false, keyboard: dismissedWithKeyboardRef.current, bubble: true });\n                dismissedWithKeyboardRef.current = false;\n              }\n\n              props.onClick?.(event);\n            }),\n          },\n        },\n      ),\n    ),\n    icon: resolveShorthand(props.icon, { required: hasIcons }),\n    checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n    submenuIndicator: resolveShorthand(props.submenuIndicator, {\n      required: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: !!props.children,\n      defaultProps: { children: props.children },\n    }),\n    secondaryContent: resolveShorthand(props.secondaryContent),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n"],"sourceRoot":""}

package/lib/components/MenuItem/useMenuItemStyles.js

@@ -15,34 +15,55 @@ export const menuItemClassNames = {
 const useStyles = /*#__PURE__*/__styles({
   "focusIndicator": {
     "Brovlpu": "ftqa4ok",
-    "Bnmjwt4": "flfsvnh",
-    "Jopkrh": ["f1781m5e", "flvaaa9"],
-    "hhrs2v": "f50u1b5",
-    "B7jbng7": ["flvaaa9", "f1781m5e"],
-    "f1b1x7": "f1qcdkjp",
-    "Bsoonpj": "frwipam",
-    "kb7xbg": "fm04wnm",
-    "Bpbhbne": "ffifs4z",
-    "qtucbz": "f1jttrum",
-    "Bh4x314": ["fowbmzg", "f1kmm3zi"],
-    "pacjzv": "f1rvwwl",
-    "wv8bgo": ["f1kmm3zi", "fowbmzg"],
-    "Bpmb9kz": "f1rr3duc",
-    "hnpbc": ["fgqh5zl", "f10j7ty9"],
-    "six9ky": "f6lagvf",
-    "I0dgv4": ["f10j7ty9", "fgqh5zl"],
-    "I0hmzl": ["fs84u7a", "f1wn75x5"],
-    "Bfxuv1t": ["f1wn75x5", "fs84u7a"],
-    "Bqb1ydo": ["fofgg9s", "fs920pv"],
-    "Bwhd17d": ["fs920pv", "fofgg9s"],
-    "B738g9f": "f1o5urc0",
-    "Ba0kx5p": ["fo4xo12", "f69zm5y"],
-    "mqxxu3": "f6upevr",
-    "Bybbesa": ["f69zm5y", "fo4xo12"],
-    "B65jt9l": "fetpwnh",
-    "Bno0hdv": "fki52xb",
-    "znsjfh": ["f1ubvch9", "fs3hv49"],
-    "B4k4nqf": ["fs3hv49", "f1ubvch9"]
+    "B486eqv": "f2hkw1w",
+    "B8q5s1w": "f8hki3x",
+    "Bci5o5g": ["f1d2448m", "ffh67wi"],
+    "n8qw10": "f1bjia2o",
+    "Bdrgwmp": ["ffh67wi", "f1d2448m"],
+    "Bm4h7ae": "f15bsgw9",
+    "B7ys5i9": "f14e48fq",
+    "Busjfv9": "f18yb2kv",
+    "Bhk32uz": "fd6o370",
+    "Bf4ptjt": "fh1cnn4",
+    "kclons": ["fy7oxxb", "f184ne2d"],
+    "Bhdgwq3": "fpukqih",
+    "Blkhhs4": ["f184ne2d", "fy7oxxb"],
+    "Bqtpl0w": "frrh606",
+    "clg4pj": ["f1v5zibi", "fo2hd23"],
+    "hgwjuy": "ful5kiu",
+    "Bonggc9": ["fo2hd23", "f1v5zibi"],
+    "B1tsrr9": ["f1jqcqds", "ftffrms"],
+    "Dah5zi": ["ftffrms", "f1jqcqds"],
+    "Bkh64rk": ["f2e7qr6", "fsr1zz6"],
+    "qqdqy8": ["fsr1zz6", "f2e7qr6"],
+    "B6dhp37": "f1dvezut",
+    "i03rao": ["fd0oaoj", "f1cwg4i8"],
+    "Boxcth7": "fjvm52t",
+    "Bsom6fd": ["f1cwg4i8", "fd0oaoj"],
+    "J0r882": "fdiulkx",
+    "Bjwuhne": "f1yalx80",
+    "Ghsupd": ["fq22d5a", "f1jw7pan"],
+    "Bule8hv": ["f1jw7pan", "fq22d5a"]
+  },
+  "resetButton": {
+    "B7ck84d": "f1e4lqlz",
+    "De3pzq": "f1u2r49w",
+    "sj55zd": "f1ym3bx4",
+    "Bahqtrf": "f1mo0ibp",
+    "Be2twd7": "fjoy568",
+    "Bg96gwp": "fytdu2e",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "B68tc82": "f1mtd64y",
+    "Bmxbyg5": "f1y7q3j9",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1cnd47f", "fhxju0i"],
+    "Bv0vk6g": "f37px4s",
+    "fsow6f": "fgusgyc"
   },
   "root": {
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
@@ -106,7 +127,8 @@ const useStyles = /*#__PURE__*/__styles({
   }
 }, {
   "f": [".ftqa4ok:focus{outline-style:none;}", ".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{color:var(--colorNeutralForegroundDisabled);}"],
-  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1qcdkjp:focus::after{content:\"\";}", "[data-keyboard-nav] .frwipam:focus::after{position:absolute;}", "[data-keyboard-nav] .fm04wnm:focus::after{pointer-events:none;}", "[data-keyboard-nav] .ffifs4z:focus::after{z-index:1;}", "[data-keyboard-nav] .f1jttrum:focus::after{border-top-style:solid;}", "[data-keyboard-nav] .fowbmzg:focus::after{border-right-style:solid;}", "[data-keyboard-nav] .f1kmm3zi:focus::after{border-left-style:solid;}", "[data-keyboard-nav] .f1rvwwl:focus::after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1rr3duc:focus::after{border-top-width:2px;}", "[data-keyboard-nav] .fgqh5zl:focus::after{border-right-width:2px;}", "[data-keyboard-nav] .f10j7ty9:focus::after{border-left-width:2px;}", "[data-keyboard-nav] .f6lagvf:focus::after{border-bottom-width:2px;}", "[data-keyboard-nav] .fs84u7a:focus::after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1wn75x5:focus::after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fofgg9s:focus::after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fs920pv:focus::after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1o5urc0:focus::after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fo4xo12:focus::after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f69zm5y:focus::after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f6upevr:focus::after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fetpwnh:focus::after{top:-2px;}", "[data-keyboard-nav] .fki52xb:focus::after{bottom:-2px;}", "[data-keyboard-nav] .f1ubvch9:focus::after{left:-2px;}", "[data-keyboard-nav] .fs3hv49:focus::after{right:-2px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "d": [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1d2rq10{height:32px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}", ".f3rmtva{background-color:transparent;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
   "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fp258yr:hover .fui-MenuItem__icon{color:var(--colorNeutralForeground2BrandSelected);}", ".f1jp5ecu:hover{color:var(--colorNeutralForeground3Hover);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"]
 });
 /** Applies style classnames to slots */
@@ -114,7 +136,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useMenuItemStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuItemClassNames.root, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
+  state.root.className = mergeClasses(menuItemClassNames.root, state.isNativeButton && styles.resetButton, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
 
   if (state.content) {
     state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,mBAAT,EAA8B,oBAA9B,QAA0D,uBAA1D;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AAKA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,IAAI,EAAE,oBAFyD;EAG/D,SAAS,EAAE,yBAHoD;EAI/D,gBAAgB,EAAE,gCAJ6C;EAK/D,OAAO,EAAE,uBALsD;EAM/D,gBAAgB,EAAE;AAN6C,CAA1D;;AASP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAgFA;;;AACA,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAyB;EACjE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,CAAC,cAH0B,EAIjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJQ,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;EAQA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,kBAAkB,CAAC,OAApB,EAA6B,MAAM,CAAC,OAApC,EAA6C,KAAK,CAAC,OAAN,CAAc,SAA3D,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,kBAAkB,CAAC,SAApB,EAA+B,KAAK,CAAC,SAAN,CAAgB,SAA/C,CAAxC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,kBAAkB,CAAC,gBAD0B,EAE7C,CAAC,KAAK,CAAC,QAAP,IAAmB,MAAM,CAAC,gBAFmB,EAG7C,KAAK,CAAC,gBAAN,CAAuB,SAHsB,CAA/C;EAKD;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,MAAM,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,kBAAkB,CAAC,gBAD0B,EAE7C,MAAM,CAAC,gBAFsC,EAG7C,KAAK,CAAC,gBAAN,CAAuB,SAHsB,CAA/C;EAKD;;EACD,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAtCM","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { 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};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.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\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } 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};\n\nconst useStyles = makeStyles({\n  focusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  resetButton: {\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.borderColor('transparent'),\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    paddingRight: '10px',\n    paddingLeft: '10px',\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    ...shorthands.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\n    userSelect: 'none',\n  },\n  content: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    backgroundColor: 'transparent',\n    flexGrow: 1,\n  },\n  secondaryContent: {\n    paddingLeft: '2px',\n    paddingRight: '2px',\n    color: tokens.colorNeutralForeground3,\n    ':hover': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n    ':focus': {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  icon: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  submenuIndicator: {\n    width: '20px',\n    height: '20px',\n    fontSize: '20px',\n    lineHeight: 0,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':hover': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':focus': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    menuItemClassNames.root,\n    state.isNativeButton && styles.resetButton,\n    styles.root,\n    styles.focusIndicator,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      menuItemClassNames.secondaryContent,\n      !state.disabled && styles.secondaryContent,\n      state.secondaryContent.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.submenuIndicator) {\n    state.submenuIndicator.className = mergeClasses(\n      menuItemClassNames.submenuIndicator,\n      styles.submenuIndicator,\n      state.submenuIndicator.className,\n    );\n  }\n  useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAIA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1G,MAAM,KAAK,GAAG,4BAA4B,CAAC,KAAD,EAAQ,GAAR,CAA1C;EACA,kCAAkC,CAAC,KAAD,CAAlC;EAEA,OAAO,+BAA+B,CAAC,KAAD,CAAtC;AACD,CAL2E,CAArE;AAOP,gBAAgB,CAAC,WAAjB,GAA+B,kBAA/B","sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  useMenuItemCheckboxStyles_unstable(state);\n\n  return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAIA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1G,MAAM,KAAK,GAAG,4BAA4B,CAAC,KAAD,EAAQ,GAAR,CAA1C;EACA,kCAAkC,CAAC,KAAD,CAAlC;EAEA,OAAO,+BAA+B,CAAC,KAAD,CAAtC;AACD,CAL2E,CAArE;AAOP,gBAAgB,CAAC,WAAjB,GAA+B,kBAA/B","sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  useMenuItemCheckboxStyles_unstable(state);\n\n  return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItemCheckbox.types.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"","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"]}
+{"version":3,"file":"MenuItemCheckbox.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"","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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuItemCheckbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './MenuItemCheckbox.types';\nexport * from './MenuItemCheckbox';\nexport * from './renderMenuItemCheckbox';\nexport * from './useMenuItemCheckbox';\nexport * from './useMenuItemCheckboxStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './MenuItemCheckbox.types';\nexport * from './MenuItemCheckbox';\nexport * from './renderMenuItemCheckbox';\nexport * from './useMenuItemCheckbox';\nexport * from './useMenuItemCheckboxStyles';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAIA;;AACA,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAiC;EAC9E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CADtB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAHpB,EAIG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAvB,CAJ7B,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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  const { slots, slotProps } = getSlots<MenuItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkmark && <slots.checkmark {...slotProps.checkmark} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.content && <slots.content {...slotProps.content} />}\n      {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAIA;;AACA,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAiC;EAC9E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CADtB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAHpB,EAIG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAvB,CAJ7B,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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  const { slots, slotProps } = getSlots<MenuItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkmark && <slots.checkmark {...slotProps.checkmark} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.content && <slots.content {...slotProps.content} />}\n      {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":""}

package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js

@@ -6,41 +6,39 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
 /** Returns the props and state required to render the component */
 
 export const useMenuItemCheckbox_unstable = (props, ref) => {
-  const state = useMenuItem_unstable({
-    role: 'menuitemcheckbox',
-    persistOnClick: true,
-    ...props,
-    checkmark: resolveShorthand(props.checkmark, {
-      defaultProps: {
-        children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
-      },
-      required: true
-    })
-  }, ref);
   const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);
   const {
-    onClick: onClickOriginal
-  } = state.root;
+    name,
+    value
+  } = props;
   const checked = useMenuListContext_unstable(context => {
     var _a;
 
-    const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
-    return checkedItems.indexOf(state.value) !== -1;
+    const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[name]) || [];
+    return checkedItems.indexOf(value) !== -1;
   });
-  state.checked = checked;
-  state.root['aria-checked'] = state.checked; // MenuItem state already transforms keyDown to click events
+  const state = { ...useMenuItem_unstable({
+      role: 'menuitemcheckbox',
+      persistOnClick: true,
+      ...props,
+      'aria-checked': checked,
+      checkmark: resolveShorthand(props.checkmark, {
+        defaultProps: {
+          children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
+        },
+        required: true
+      }),
+      onClick: e => {
+        var _a;
 
-  state.root.onClick = e => {
-    if (state.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-    }
-
-    toggleCheckbox === null || toggleCheckbox === void 0 ? void 0 : toggleCheckbox(e, state.name, state.value, state.checked);
-    onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
+        toggleCheckbox === null || toggleCheckbox === void 0 ? void 0 : toggleCheckbox(e, name, value, checked);
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      }
+    }, ref),
+    name,
+    value,
+    checked
   };
-
   return state;
 };
 //# sourceMappingURL=useMenuItemCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,oBAAT,QAAqC,yBAArC;AAGA;;AACA,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;EACzB,MAAM,KAAK,GAAG,oBAAoB,CAChC;IACE,IAAI,EAAE,kBADR;IAEE,cAAc,EAAE,IAFlB;IAGE,GAAG,KAHL;IAIE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;MAC3C,YAAY,EAAE;QAAE,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;MAAZ,CAD6B;MAE3C,QAAQ,EAAE;IAFiC,CAAlB;EAJ7B,CADgC,EAUhC,GAVgC,CAAlC;EAaA,MAAM,cAAc,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,cAApB,CAAlD;EACA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAAK,CAAC,IAA3C;EACA,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,IAAG;;;IACpD,MAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,KAAK,CAAC,IAAT,CAArB,KAAuC,EAA5D;IACA,OAAO,YAAY,CAAC,OAAb,CAAqB,KAAK,CAAC,KAA3B,MAAsC,CAAC,CAA9C;EACD,CAH0C,CAA3C;EAKA,KAAK,CAAC,OAAN,GAAgB,OAAhB;EACA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,CAtByB,CAwBzB;;EACA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,CAAC,IAAG;IACvB,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAd;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CATD;;EAWA,OAAO,KAAP;AACD,CAxCM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n  props: MenuItemCheckboxProps,\n  ref: React.Ref<HTMLElement>,\n): MenuItemCheckboxState => {\n  const state = useMenuItem_unstable(\n    {\n      role: 'menuitemcheckbox',\n      persistOnClick: true,\n      ...props,\n      checkmark: resolveShorthand(props.checkmark, {\n        defaultProps: { children: <Checkmark16Filled /> },\n        required: true,\n      }),\n    },\n    ref,\n  ) as MenuItemCheckboxState;\n\n  const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\n  const { onClick: onClickOriginal } = state.root;\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[state.name] || [];\n    return checkedItems.indexOf(state.value) !== -1;\n  });\n\n  state.checked = checked;\n  state.root['aria-checked'] = state.checked;\n\n  // MenuItem state already transforms keyDown to click events\n  state.root.onClick = e => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    toggleCheckbox?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,oBAAT,QAAqC,yBAArC;AAIA;;AACA,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;EACzB,MAAM,cAAc,GAAG,2BAA2B,CAAC,OAAO,IAAI,OAAO,CAAC,cAApB,CAAlD;EACA,MAAM;IAAE,IAAF;IAAQ;EAAR,IAAkB,KAAxB;EAEA,MAAM,OAAO,GAAG,2BAA2B,CAAC,OAAO,IAAG;;;IACpD,MAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,IAAH,CAArB,KAAiC,EAAtD;IACA,OAAO,YAAY,CAAC,OAAb,CAAqB,KAArB,MAAgC,CAAC,CAAxC;EACD,CAH0C,CAA3C;EAKA,MAAM,KAAK,GAA0B,EACnC,GAAG,oBAAoB,CACrB;MACE,IAAI,EAAE,kBADR;MAEE,cAAc,EAAE,IAFlB;MAGE,GAAG,KAHL;MAIE,gBAAgB,OAJlB;MAKE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;QAC3C,YAAY,EAAE;UAAE,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;QAAZ,CAD6B;QAE3C,QAAQ,EAAE;MAFiC,CAAlB,CAL7B;MASE,OAAO,EAAG,CAAD,IAA8D;;;QACrE,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,CAAH,EAAM,IAAN,EAAY,KAAZ,EAAmB,OAAnB,CAAd;QACA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;MACD;IAZH,CADqB,EAerB,GAfqB,CADY;IAkBnC,IAlBmC;IAmBnC,KAnBmC;IAoBnC;EApBmC,CAArC;EAuBA,OAAO,KAAP;AACD,CApCM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { 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: resolveShorthand(props.checkmark, {\n          defaultProps: { children: <Checkmark16Filled /> },\n          required: true,\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"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AAEA,SAAS,0BAAT,QAA2C,+BAA3C;AAGA,OAAO,MAAM,0BAA0B,GAA4D;EACjG,IAAI,EAAE,sBAD2F;EAEjG,IAAI,EAAE,4BAF2F;EAGjG,SAAS,EAAE,iCAHsF;EAIjG,OAAO,EAAE,+BAJwF;EAKjG,gBAAgB,EAAE;AAL+E,CAA5F;AAQP,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAiC;EACjF,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;;EAEA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,0BAA0B,CAAC,OAA5B,EAAqC,KAAK,CAAC,OAAN,CAAc,SAAnD,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,0BAA0B,CAAC,gBADkB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;EAID;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,0BAA0B,CAAC,SAA5B,EAAuC,KAAK,CAAC,SAAN,CAAgB,SAAvD,CAAxC;EACD;;EAED,0BAA0B,CAAC,KAAD,CAA1B;EACA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { MenuItemSlots } from '../index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\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};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {\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  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,0BAAT,QAA2C,+BAA3C;AAKA,OAAO,MAAM,0BAA0B,GAA4D;EACjG,IAAI,EAAE,sBAD2F;EAEjG,IAAI,EAAE,4BAF2F;EAGjG,SAAS,EAAE,iCAHsF;EAIjG,OAAO,EAAE,+BAJwF;EAKjG,gBAAgB,EAAE;AAL+E,CAA5F;AAQP,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAiC;EACjF,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;;EAEA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,0BAA0B,CAAC,OAA5B,EAAqC,KAAK,CAAC,OAAN,CAAc,SAAnD,CAAtC;EACD;;EAED,IAAI,KAAK,CAAC,gBAAV,EAA4B;IAC1B,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,0BAA0B,CAAC,gBADkB,EAE7C,KAAK,CAAC,gBAAN,CAAuB,SAFsB,CAA/C;EAID;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,0BAA0B,CAAC,IAA5B,EAAkC,KAAK,CAAC,IAAN,CAAW,SAA7C,CAAnC;EACD;;EAED,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,0BAA0B,CAAC,SAA5B,EAAuC,KAAK,CAAC,SAAN,CAAgB,SAAvD,CAAxC;EACD;;EAED,0BAA0B,CAAC,KAAD,CAA1B;EACA,2BAA2B,CAAC,KAAD,CAA3B;AACD,CAxBM","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { 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};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {\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  useMenuItemStyles_unstable(state);\n  useCheckmarkStyles_unstable(state);\n};\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,EAAQ,GAAR,CAAvC;EACA,+BAA+B,CAAC,KAAD,CAA/B;EAEA,OAAO,4BAA4B,CAAC,KAAD,CAAnC;AACD,CALqE,CAA/D;AAOP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio_unstable } from './useMenuItemRadio';\nimport { renderMenuItemRadio_unstable } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  useMenuItemRadioStyles_unstable(state);\n\n  return renderMenuItemRadio_unstable(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,EAAQ,GAAR,CAAvC;EACA,+BAA+B,CAAC,KAAD,CAA/B;EAEA,OAAO,4BAA4B,CAAC,KAAD,CAAnC;AACD,CALqE,CAA/D;AAOP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio_unstable } from './useMenuItemRadio';\nimport { renderMenuItemRadio_unstable } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  useMenuItemRadioStyles_unstable(state);\n\n  return renderMenuItemRadio_unstable(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItemRadio.types.js","sourceRoot":"../src/","sources":["components/MenuItemRadio/MenuItemRadio.types.ts"],"names":[],"mappings":"","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"]}
+{"version":3,"file":"MenuItemRadio.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.types.ts"],"names":[],"mappings":"","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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuItemRadio/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './MenuItemRadio.types';\nexport * from './MenuItemRadio';\nexport * from './renderMenuItemRadio';\nexport * from './useMenuItemRadio';\nexport * from './useMenuItemRadioStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './MenuItemRadio.types';\nexport * from './MenuItemRadio';\nexport * from './renderMenuItemRadio';\nexport * from './useMenuItemRadio';\nexport * from './useMenuItemRadioStyles';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuItemRadio/renderMenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAIA;;;AAGG;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA8B;EACxE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CADtB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAHpB,EAIG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAvB,CAJ7B,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menuitemradio structure but add\n * slots to children.\n */\nexport const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {\n  const { slots, slotProps } = getSlots<MenuItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkmark && <slots.checkmark {...slotProps.checkmark} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.content && <slots.content {...slotProps.content} />}\n      {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/renderMenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAIA;;;AAGG;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA8B;EACxE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CADtB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAHpB,EAIG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAvB,CAJ7B,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menuitemradio structure but add\n * slots to children.\n */\nexport const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {\n  const { slots, slotProps } = getSlots<MenuItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkmark && <slots.checkmark {...slotProps.checkmark} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.content && <slots.content {...slotProps.content} />}\n      {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":""}