@fluentui/react-menu 0.0.0-nightly-20230316-0427.1 → 0.0.0-nightly-20230317-1454.1

package/lib/components/MenuGroupHeader/MenuGroupHeader.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { useMenuGroupHeader_unstable } from './useMenuGroupHeader';
-import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles';
-import { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useMenuGroupHeader_unstable } from "./useMenuGroupHeader";
+import { useMenuGroupHeaderStyles_unstable } from "./useMenuGroupHeaderStyles";
+import { renderMenuGroupHeader_unstable } from "./renderMenuGroupHeader";
+import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.
  */
@@ -15,5 +15,5 @@ export const MenuGroupHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuGroupHeader_unstable(state);
 });
-MenuGroupHeader.displayName = 'MenuGroupHeader';
+MenuGroupHeader.displayName = "MenuGroupHeader";
 //# sourceMappingURL=MenuGroupHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","renderMenuGroupHeader_unstable","useCustomStyleHooks_unstable","MenuGroupHeader","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nimport { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles';\nimport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nimport type { MenuGroupHeaderProps } from './MenuGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.\n */\nexport const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGroupHeader_unstable(props, ref);\n\n  useMenuGroupHeaderStyles_unstable(state);\n\n  const { useMenuGroupHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuGroupHeader_unstable(state);\n});\n\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,iCAAiC,QAAQ,4BAA4B;AAC9E,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,eAAe,gBAA8CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGR,2BAA2B,CAACM,KAAK,EAAEC,GAAG,CAAC;EAErDN,iCAAiC,CAACO,KAAK,CAAC;EAExC,MAAM;IAAEP,iCAAiC,EAAEQ;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAC7FM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAON,8BAA8B,CAACM,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFJ,eAAe,CAACM,WAAW,GAAG,iBAAiB"}
+{"version":3,"names":["React","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","renderMenuGroupHeader_unstable","useCustomStyleHooks_unstable","MenuGroupHeader","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nimport { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles';\nimport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nimport type { MenuGroupHeaderProps } from './MenuGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.\n */\nexport const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGroupHeader_unstable(props, ref);\n\n  useMenuGroupHeaderStyles_unstable(state);\n\n  const { useMenuGroupHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuGroupHeader_unstable(state);\n});\n\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,iCAAiC,QAAQ;AAClD,SAASC,8BAA8B,QAAQ;AAG/C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,eAAA,gBAA6DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzG,MAAMC,KAAA,GAAQR,2BAAA,CAA4BM,KAAA,EAAOC,GAAA;EAEjDN,iCAAA,CAAkCO,KAAA;EAElC,MAAM;IAAEP,iCAAA,EAAmCQ;EAAe,CAAE,GAAGN,4BAAA;EAC/DM,eAAA,CAAgBD,KAAA;EAEhB,OAAON,8BAAA,CAA+BM,KAAA;AACxC;AAEAJ,eAAA,CAAgBM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuGroupHeader.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuGroupHeaderSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;\n\nexport type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/MenuGroupHeader/MenuGroupHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuGroupHeaderSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;\n\nexport type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;\n"],"mappings":"AAAA"}

package/lib/components/MenuGroupHeader/index.js

@@ -1,6 +1,6 @@
-export * from './MenuGroupHeader.types';
-export * from './MenuGroupHeader';
-export * from './renderMenuGroupHeader';
-export * from './useMenuGroupHeader';
-export * from './useMenuGroupHeaderStyles';
+export * from "./MenuGroupHeader.types";
+export * from "./MenuGroupHeader";
+export * from "./renderMenuGroupHeader";
+export * from "./useMenuGroupHeader";
+export * from "./useMenuGroupHeaderStyles";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './MenuGroupHeader.types';\nexport * from './MenuGroupHeader';\nexport * from './renderMenuGroupHeader';\nexport * from './useMenuGroupHeader';\nexport * from './useMenuGroupHeaderStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/MenuGroupHeader/index.ts"],"sourcesContent":["export * from './MenuGroupHeader.types';\nexport * from './MenuGroupHeader';\nexport * from './renderMenuGroupHeader';\nexport * from './useMenuGroupHeader';\nexport * from './useMenuGroupHeaderStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/MenuGroupHeader/renderMenuGroupHeader.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+import * as React from "react";
+import { getSlots } from "@fluentui/react-utilities";
 /**
  * Redefine the render function to add slots. Reuse the menugroupheader structure but add
  * slots to children.
@@ -9,8 +9,6 @@ export const renderMenuGroupHeader_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  });
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root);
 };
 //# sourceMappingURL=renderMenuGroupHeader.js.map

package/lib/components/MenuGroupHeader/renderMenuGroupHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderMenuGroupHeader_unstable","state","slots","slotProps","createElement","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroupHeader/renderMenuGroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroupheader structure but add\n * slots to children.\n */\nexport const renderMenuGroupHeader_unstable = (state: MenuGroupHeaderState) => {\n  const { slots, slotProps } = getSlots<MenuGroupHeaderSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;;AAIA,OAAO,MAAMC,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAuBE,KAAK,CAAC;EAElE,oBAAOH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI;AAC3C,CAAC"}
+{"version":3,"names":["React","getSlots","renderMenuGroupHeader_unstable","state","slots","slotProps","createElement","root"],"sources":["../../../src/components/MenuGroupHeader/renderMenuGroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroupheader structure but add\n * slots to children.\n */\nexport const renderMenuGroupHeader_unstable = (state: MenuGroupHeaderState) => {\n  const { slots, slotProps } = getSlots<MenuGroupHeaderSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;;AAIA,OAAO,MAAMC,8BAAA,GAAkCC,KAAA,IAAgC;EAC7E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA+BE,KAAA;EAE5D,oBAAOH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI;AACvC"}

package/lib/components/MenuGroupHeader/useMenuGroupHeader.js

@@ -1,5 +1,6 @@
-import { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import * as React from "react";
+import { useMenuGroupContext_unstable } from "../../contexts/menuGroupContext";
+import { getNativeElementProps } from "@fluentui/react-utilities";
 /**
  * Given user props, returns state and render function for a MenuGroupHeader.
  */
@@ -9,9 +10,9 @@ export function useMenuGroupHeader_unstable(props, ref) {
   } = useMenuGroupContext_unstable();
   return {
     components: {
-      root: 'div'
+      root: "div"
     },
-    root: getNativeElementProps('div', {
+    root: getNativeElementProps("div", {
       ref,
       id,
       ...props

package/lib/components/MenuGroupHeader/useMenuGroupHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMenuGroupContext_unstable","getNativeElementProps","useMenuGroupHeader_unstable","props","ref","headerId","id","components","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroupHeader.\n */\nexport function useMenuGroupHeader_unstable(\n  props: MenuGroupHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): MenuGroupHeaderState {\n  const { headerId: id } = useMenuGroupContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      id,\n      ...props,\n    }),\n  };\n}\n"],"mappings":"AACA,SAASA,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,qBAAqB,QAAQ,2BAA2B;AAGjE;;;AAGA,OAAM,SAAUC,2BAA2BA,CACzCC,KAA2B,EAC3BC,GAA2B;EAE3B,MAAM;IAAEC,QAAQ,EAAEC;EAAE,CAAE,GAAGN,4BAA4B,EAAE;EAEvD,OAAO;IACLO,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEP,qBAAqB,CAAC,KAAK,EAAE;MACjCG,GAAG;MACHE,EAAE;MACF,GAAGH;KACJ;GACF;AACH"}
+{"version":3,"names":["React","useMenuGroupContext_unstable","getNativeElementProps","useMenuGroupHeader_unstable","props","ref","headerId","id","components","root"],"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroupHeader.\n */\nexport function useMenuGroupHeader_unstable(\n  props: MenuGroupHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): MenuGroupHeaderState {\n  const { headerId: id } = useMenuGroupContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      id,\n      ...props,\n    }),\n  };\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,qBAAqB,QAAQ;AAGtC;;;AAGA,OAAO,SAASC,4BACdC,KAA2B,EAC3BC,GAA2B,EACL;EACtB,MAAM;IAAEC,QAAA,EAAUC;EAAE,CAAE,GAAGN,4BAAA;EAEzB,OAAO;IACLO,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAMP,qBAAA,CAAsB,OAAO;MACjCG,GAAA;MACAE,EAAA;MACA,GAAGH;IACL;EACF;AACF"}

package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.js

@@ -1,7 +1,7 @@
-import { mergeClasses, __styles } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { mergeClasses, __styles } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
 export const menuGroupHeaderClassNames = {
-  root: 'fui-MenuGroupHeader'
+  root: "fui-MenuGroupHeader"
 };
 const useStyles = /*#__PURE__*/__styles({
   root: {

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '12px',\n    paddingRight: '12px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,yBAAyB,GAAyC;EAC7EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAWhB;AAEF,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAAI;EAC/E,MAAMC,MAAM,GAAGZ,SAAS,EAAE;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAEtG,OAAOF,KAAK;AACd,CAAC"}
+{"version":3,"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"sources":["../../../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '12px',\n    paddingRight: '12px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB;AACzC,SAASC,MAAM,QAAQ;AAIvB,OAAO,MAAMC,yBAAA,GAAkE;EAC7EC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAWlB;AAEA,OAAO,MAAMC,iCAAA,GAAqCC,KAAA,IAAgC;EAChF,MAAMC,MAAA,GAASZ,SAAA;EACfW,KAAA,CAAMZ,IAAI,CAACc,SAAS,GAAGlB,YAAA,CAAaG,yBAAA,CAA0BC,IAAI,EAAEa,MAAA,CAAOb,IAAI,EAAEY,KAAA,CAAMZ,IAAI,CAACc,SAAS;EAErG,OAAOF,KAAA;AACT"}

package/lib/components/MenuItem/MenuItem.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { useMenuItem_unstable } from './useMenuItem';
-import { renderMenuItem_unstable } from './renderMenuItem';
-import { useMenuItemStyles_unstable } from './useMenuItemStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useMenuItem_unstable } from "./useMenuItem";
+import { renderMenuItem_unstable } from "./renderMenuItem";
+import { useMenuItemStyles_unstable } from "./useMenuItemStyles";
+import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.
  */
@@ -15,5 +15,5 @@ export const MenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuItem_unstable(state);
 });
-MenuItem.displayName = 'MenuItem';
+MenuItem.displayName = "MenuItem";
 //# sourceMappingURL=MenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMenuItem_unstable","renderMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHooks_unstable","MenuItem","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItem_unstable } from './useMenuItem';\nimport { renderMenuItem_unstable } from './renderMenuItem';\nimport { useMenuItemStyles_unstable } from './useMenuItemStyles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.\n */\nexport const MenuItem: ForwardRefComponent<MenuItemProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItem_unstable(props, ref);\n\n  useMenuItemStyles_unstable(state);\n\n  const { useMenuItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAGhE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGR,oBAAoB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE9CL,0BAA0B,CAACM,KAAK,CAAC;EAEjC,MAAM;IAAEN,0BAA0B,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACtFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,uBAAuB,CAACO,KAAK,CAAC;AACvC,CAAC,CAAC;AAEFJ,QAAQ,CAACM,WAAW,GAAG,UAAU"}
+{"version":3,"names":["React","useMenuItem_unstable","renderMenuItem_unstable","useMenuItemStyles_unstable","useCustomStyleHooks_unstable","MenuItem","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuItem_unstable } from './useMenuItem';\nimport { renderMenuItem_unstable } from './renderMenuItem';\nimport { useMenuItemStyles_unstable } from './useMenuItemStyles';\nimport type { MenuItemProps } from './MenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.\n */\nexport const MenuItem: ForwardRefComponent<MenuItemProps> = React.forwardRef((props, ref) => {\n  const state = useMenuItem_unstable(props, ref);\n\n  useMenuItemStyles_unstable(state);\n\n  const { useMenuItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuItem_unstable(state);\n});\n\nMenuItem.displayName = 'MenuItem';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAG3C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,QAAA,gBAA+CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQR,oBAAA,CAAqBM,KAAA,EAAOC,GAAA;EAE1CL,0BAAA,CAA2BM,KAAA;EAE3B,MAAM;IAAEN,0BAAA,EAA4BO;EAAe,CAAE,GAAGN,4BAAA;EACxDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,uBAAA,CAAwBO,KAAA;AACjC;AAEAJ,QAAA,CAASM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/MenuItem.types.ts"],"names":[],"mappings":"","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\nexport type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {\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"]}
+{"version":3,"names":[],"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\nexport type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {\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"],"mappings":"AAAA"}

package/lib/components/MenuItem/index.js

@@ -1,6 +1,6 @@
-export * from './MenuItem';
-export * from './MenuItem.types';
-export * from './renderMenuItem';
-export * from './useMenuItem';
-export * from './useMenuItemStyles';
+export * from "./MenuItem";
+export * from "./MenuItem.types";
+export * from "./renderMenuItem";
+export * from "./useMenuItem";
+export * from "./useMenuItemStyles";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './MenuItem';\nexport * from './MenuItem.types';\nexport * from './renderMenuItem';\nexport * from './useMenuItem';\nexport * from './useMenuItemStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/MenuItem/index.ts"],"sourcesContent":["export * from './MenuItem';\nexport * from './MenuItem.types';\nexport * from './renderMenuItem';\nexport * from './useMenuItem';\nexport * from './useMenuItemStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/MenuItem/renderMenuItem.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+import * as React from "react";
+import { getSlots } from "@fluentui/react-utilities";
 /**
  * Function that renders the final JSX of the component
  */
@@ -8,18 +8,6 @@ export const renderMenuItem_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, slots.checkmark && /*#__PURE__*/React.createElement(slots.checkmark, {
-    ...slotProps.checkmark
-  }), slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
-    ...slotProps.icon
-  }), slots.content && /*#__PURE__*/React.createElement(slots.content, {
-    ...slotProps.content
-  }), slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, {
-    ...slotProps.secondaryContent
-  }), slots.submenuIndicator && /*#__PURE__*/React.createElement(slots.submenuIndicator, {
-    ...slotProps.submenuIndicator
-  }));
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.checkmark && /*#__PURE__*/React.createElement(slots.checkmark, slotProps.checkmark), slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), slots.content && /*#__PURE__*/React.createElement(slots.content, slotProps.content), slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, slotProps.secondaryContent), slots.submenuIndicator && /*#__PURE__*/React.createElement(slots.submenuIndicator, slotProps.submenuIndicator));
 };
 //# sourceMappingURL=renderMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderMenuItem_unstable","state","slots","slotProps","createElement","root","checkmark","icon","content","secondaryContent","submenuIndicator"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/renderMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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  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.submenuIndicator && <slots.submenuIndicator {...slotProps.submenuIndicator} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,uBAAuB,GAAIC,KAAoB,IAAI;EAC9D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAgBE,KAAK,CAAC;EAE3D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,SAAS,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,SAAS;IAAA,GAAKH,SAAS,CAACG;EAAS,EAAI,EAC/DJ,KAAK,CAACK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EAChDL,KAAK,CAACM,OAAO,iBAAIV,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,OAAO;IAAA,GAAKL,SAAS,CAACK;EAAO,EAAI,EACzDN,KAAK,CAACO,gBAAgB,iBAAIX,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACO,gBAAgB;IAAA,GAAKN,SAAS,CAACM;EAAgB,EAAI,EACpFP,KAAK,CAACQ,gBAAgB,iBAAIZ,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACQ,gBAAgB;IAAA,GAAKP,SAAS,CAACO;EAAgB,EAAI,CAC1E;AAEjB,CAAC"}
+{"version":3,"names":["React","getSlots","renderMenuItem_unstable","state","slots","slotProps","createElement","root","checkmark","icon","content","secondaryContent","submenuIndicator"],"sources":["../../../src/components/MenuItem/renderMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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  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.submenuIndicator && <slots.submenuIndicator {...slotProps.submenuIndicator} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,uBAAA,GAA2BC,KAAA,IAAyB;EAC/D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAwBE,KAAA;EAErD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,SAAS,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,SAAS,EAAKH,SAAA,CAAUG,SAAS,GAC3DJ,KAAA,CAAMK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,GAC5CL,KAAA,CAAMM,OAAO,iBAAIV,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,OAAO,EAAKL,SAAA,CAAUK,OAAO,GACrDN,KAAA,CAAMO,gBAAgB,iBAAIX,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMO,gBAAgB,EAAKN,SAAA,CAAUM,gBAAgB,GAChFP,KAAA,CAAMQ,gBAAgB,iBAAIZ,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMQ,gBAAgB,EAAKP,SAAA,CAAUO,gBAAgB;AAGvF"}

package/lib/components/MenuItem/useCharacterSearch.js

@@ -1,17 +1,17 @@
-import { useMenuListContext_unstable } from '../../contexts/menuListContext';
+import * as React from "react";
+import { useMenuListContext_unstable } from "../../contexts/menuListContext";
 export const useCharacterSearch = (state, ref) => {
   const setFocusByFirstCharacter = useMenuListContext_unstable(context => context.setFocusByFirstCharacter);
   const {
     onKeyDown: originalOnKeyDown
   } = state.root;
   state.root.onKeyDown = e => {
-    var _a;
-    originalOnKeyDown === null || originalOnKeyDown === void 0 ? void 0 : originalOnKeyDown(e);
-    if (((_a = e.key) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+    originalOnKeyDown?.(e);
+    if (e.key?.length > 1) {
       return;
     }
     if (ref.current) {
-      setFocusByFirstCharacter === null || setFocusByFirstCharacter === void 0 ? void 0 : setFocusByFirstCharacter(e, ref.current);
+      setFocusByFirstCharacter?.(e, ref.current);
     }
   };
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","_a","key","length","current"],"sources":["../../../../../../../../../packages/react-components/react-menu/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  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"],"mappings":"AACA,SAASA,2BAA2B,QAAQ,gCAAgC;AAI5E,OAAO,MAAMC,kBAAkB,GAAGA,CAACC,KAAoB,EAAEC,GAAiC,KAAI;EAC5F,MAAMC,wBAAwB,GAAGJ,2BAA2B,CAACK,OAAO,IAAIA,OAAO,CAACD,wBAAwB,CAAC;EAEzG,MAAM;IAAEE,SAAS,EAAEC;EAAiB,CAAE,GAAGL,KAAK,CAACM,IAAI;EAEnDN,KAAK,CAACM,IAAI,CAACF,SAAS,GAAIG,CAAqD,IAAI;;IAC/EF,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAGE,CAAC,CAAC;IAEtB,IAAI,EAAAC,EAAA,GAAAD,CAAC,CAACE,GAAG,cAAAD,EAAA,uBAAAA,EAAA,CAAEE,MAAM,IAAG,CAAC,EAAE;MACrB;;IAGF,IAAIT,GAAG,CAACU,OAAO,EAAE;MACfT,wBAAwB,aAAxBA,wBAAwB,uBAAxBA,wBAAwB,CAAGK,CAAC,EAAEN,GAAG,CAACU,OAAO,CAAC;;EAE9C,CAAC;EAED,OAAOX,KAAK;AACd,CAAC"}
+{"version":3,"names":["React","useMenuListContext_unstable","useCharacterSearch","state","ref","setFocusByFirstCharacter","context","onKeyDown","originalOnKeyDown","root","e","key","length","current"],"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  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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAI5C,OAAO,MAAMC,kBAAA,GAAqBA,CAACC,KAAA,EAAsBC,GAAA,KAAsC;EAC7F,MAAMC,wBAAA,GAA2BJ,2BAAA,CAA4BK,OAAA,IAAWA,OAAA,CAAQD,wBAAwB;EAExG,MAAM;IAAEE,SAAA,EAAWC;EAAiB,CAAE,GAAGL,KAAA,CAAMM,IAAI;EAEnDN,KAAA,CAAMM,IAAI,CAACF,SAAS,GAAIG,CAAA,IAA0D;IAChFF,iBAAA,GAAoBE,CAAA;IAEpB,IAAIA,CAAA,CAAEC,GAAG,EAAEC,MAAA,GAAS,GAAG;MACrB;IACF;IAEA,IAAIR,GAAA,CAAIS,OAAO,EAAE;MACfR,wBAAA,GAA2BK,CAAA,EAAGN,GAAA,CAAIS,OAAO;IAC3C;EACF;EAEA,OAAOV,KAAA;AACT"}

package/lib/components/MenuItem/useMenuItem.js

@@ -1,13 +1,13 @@
-import * as React from 'react';
-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 { useARIAButtonProps } from '@fluentui/react-aria';
-import { Enter, Space } from '@fluentui/keyboard-keys';
+import * as React from "react";
+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 { useARIAButtonProps } from "@fluentui/react-aria";
+import { Enter, Space } from "@fluentui/keyboard-keys";
 const ChevronRightIcon = /*#__PURE__*/bundleIcon(ChevronRightFilled, ChevronRightRegular);
 const ChevronLeftIcon = /*#__PURE__*/bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
 /**
@@ -17,7 +17,7 @@ export const useMenuItem_unstable = (props, ref) => {
   const isSubmenuTrigger = useMenuTriggerContext_unstable();
   const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
   const {
-    as = 'div',
+    as = "div",
     disabled = false,
     hasSubmenu = isSubmenuTrigger,
     persistOnClick = persistOnClickContext
@@ -35,44 +35,41 @@ export const useMenuItem_unstable = (props, ref) => {
     disabled,
     persistOnClick,
     components: {
-      root: 'div',
-      icon: 'span',
-      checkmark: 'span',
-      submenuIndicator: 'span',
-      content: 'span',
-      secondaryContent: 'span'
+      root: "div",
+      icon: "span",
+      checkmark: "span",
+      submenuIndicator: "span",
+      content: "span",
+      secondaryContent: "span"
     },
     root: getNativeElementProps(as, useARIAButtonProps(as, {
-      role: 'menuitem',
+      role: "menuitem",
       ...props,
       disabled: false,
       disabledFocusable: disabled,
       ref: useMergedRefs(ref, innerRef),
       onKeyDown: useEventCallback(event => {
-        var _a;
-        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        props.onKeyDown?.(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);
+        innerRef.current?.focus();
+        props.onMouseEnter?.(event);
       }),
       onClick: useEventCallback(event => {
-        var _a;
         if (!hasSubmenu && !persistOnClick) {
           setOpen(event, {
             open: false,
             keyboard: dismissedWithKeyboardRef.current,
             bubble: true,
-            type: 'menuItemClick',
+            type: "menuItemClick",
             event
           });
           dismissedWithKeyboardRef.current = false;
         }
-        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        props.onClick?.(event);
       })
     })),
     icon: resolveShorthand(props.icon, {
@@ -84,7 +81,7 @@ export const useMenuItem_unstable = (props, ref) => {
     submenuIndicator: resolveShorthand(props.submenuIndicator, {
       required: hasSubmenu,
       defaultProps: {
-        children: dir === 'ltr' ? /*#__PURE__*/React.createElement(ChevronRightIcon, null) : /*#__PURE__*/React.createElement(ChevronLeftIcon, null)
+        children: dir === "ltr" ? /*#__PURE__*/React.createElement(ChevronRightIcon, null) : /*#__PURE__*/React.createElement(ChevronLeftIcon, null)
       }
     }),
     content: resolveShorthand(props.content, {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEventCallback","resolveShorthand","useMergedRefs","getNativeElementProps","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","setOpen","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","role","disabledFocusable","onKeyDown","event","_a","call","isDefaultPrevented","key","current","onMouseEnter","focus","_b","onClick","open","keyboard","bubble","type","required","defaultProps","children","createElement"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"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 { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } 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 { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = 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 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    },\n    root: getNativeElementProps(\n      as,\n      useARIAButtonProps(as, {\n        role: 'menuitem',\n        ...props,\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        onMouseEnter: useEventCallback(event => {\n          innerRef.current?.focus();\n\n          props.onMouseEnter?.(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    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"],"mappings":"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"}
+{"version":3,"names":["React","useEventCallback","resolveShorthand","useMergedRefs","getNativeElementProps","useFluent_unstable","useFluent","useCharacterSearch","useMenuTriggerContext_unstable","ChevronRightFilled","ChevronRightRegular","ChevronLeftFilled","ChevronLeftRegular","bundleIcon","useMenuListContext_unstable","useMenuContext_unstable","useARIAButtonProps","Enter","Space","ChevronRightIcon","ChevronLeftIcon","useMenuItem_unstable","props","ref","isSubmenuTrigger","persistOnClickContext","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","hasCheckmarks","setOpen","dir","innerRef","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","required","defaultProps","children","createElement"],"sources":["../../../src/components/MenuItem/useMenuItem.tsx"],"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 { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } 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 { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = 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 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    },\n    root: getNativeElementProps(\n      as,\n      useARIAButtonProps(as, {\n        role: 'menuitem',\n        ...props,\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        onMouseEnter: useEventCallback(event => {\n          innerRef.current?.focus();\n\n          props.onMouseEnter?.(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    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"],"mappings":"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"}

package/lib/components/MenuItem/useMenuItemStyles.js

@@ -1,15 +1,15 @@
-import { mergeClasses, __styles, shorthands } from '@griffel/react';
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
-import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { mergeClasses, __styles, shorthands } from "@griffel/react";
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { createFocusOutlineStyle } from "@fluentui/react-tabster";
+import { tokens } 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'
+  root: "fui-MenuItem",
+  icon: "fui-MenuItem__icon",
+  checkmark: "fui-MenuItem__checkmark",
+  submenuIndicator: "fui-MenuItem__submenuIndicator",
+  content: "fui-MenuItem__content",
+  secondaryContent: "fui-MenuItem__secondaryContent"
 };
 const useStyles = /*#__PURE__*/__styles({
   focusIndicator: {

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","f","i","d","h","useMenuItemStyles_unstable","state","styles","className"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"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  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      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\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"],"mappings":"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"}
+{"version":3,"names":["mergeClasses","__styles","shorthands","iconFilledClassName","iconRegularClassName","createFocusOutlineStyle","tokens","useCheckmarkStyles_unstable","menuItemClassNames","root","icon","checkmark","submenuIndicator","content","secondaryContent","useStyles","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","qhf8xq","sj55zd","De3pzq","z189sj","uwmqm3","Bqenvij","mc9l5x","Bt984gj","Be2twd7","Bceei9c","i8kkvl","Belr9w4","Jwef8y","Bi91k9c","Bk3fhr4","Bmfj8id","Bg7n49j","famaaq","Bh6795r","t0hwav","a9b677","Bg96gwp","Brf1p80","disabled","f","i","d","h","useMenuItemStyles_unstable","state","styles","className"],"sources":["../../../src/components/MenuItem/useMenuItemStyles.ts"],"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  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      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${menuItemClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\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"],"mappings":"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"}

package/lib/components/MenuItemCheckbox/MenuItemCheckbox.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';
-import { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';
-import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useMenuItemCheckbox_unstable } from "./useMenuItemCheckbox";
+import { renderMenuItemCheckbox_unstable } from "./renderMenuItemCheckbox";
+import { useMenuItemCheckboxStyles_unstable } from "./useMenuItemCheckboxStyles";
+import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.
  */
@@ -15,5 +15,5 @@ export const MenuItemCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuItemCheckbox_unstable(state);
 });
-MenuItemCheckbox.displayName = 'MenuItemCheckbox';
+MenuItemCheckbox.displayName = "MenuItemCheckbox";
 //# sourceMappingURL=MenuItemCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMenuItemCheckbox_unstable","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useCustomStyleHooks_unstable","MenuItemCheckbox","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/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';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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  const { useMenuItemCheckboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,4BAA4B,QAAQ,uBAAuB;AACpE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,kCAAkC,QAAQ,6BAA6B;AAGhF,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,gBAAgB,gBAA+CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1G,MAAMC,KAAK,GAAGR,4BAA4B,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEtDL,kCAAkC,CAACM,KAAK,CAAC;EAEzC,MAAM;IAAEN,kCAAkC,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAC9FM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,+BAA+B,CAACO,KAAK,CAAC;AAC/C,CAAC,CAAC;AAEFJ,gBAAgB,CAACM,WAAW,GAAG,kBAAkB"}
+{"version":3,"names":["React","useMenuItemCheckbox_unstable","renderMenuItemCheckbox_unstable","useMenuItemCheckboxStyles_unstable","useCustomStyleHooks_unstable","MenuItemCheckbox","forwardRef","props","ref","state","useCustomStyles","displayName"],"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';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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  const { useMenuItemCheckboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAChD,SAASC,kCAAkC,QAAQ;AAGnD,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,gBAAA,gBAA+DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3G,MAAMC,KAAA,GAAQR,4BAAA,CAA6BM,KAAA,EAAOC,GAAA;EAElDL,kCAAA,CAAmCM,KAAA;EAEnC,MAAM;IAAEN,kCAAA,EAAoCO;EAAe,CAAE,GAAGN,4BAAA;EAChEM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,+BAAA,CAAgCO,KAAA;AACzC;AAEAJ,gBAAA,CAAiBM,WAAW,GAAG"}