@fluentui/react-menu 9.12.3 → 9.12.5

package/CHANGELOG.json

@@ -2,7 +2,121 @@
   "name": "@fluentui/react-menu",
   "entries": [
     {
-      "date": "Fri, 04 Aug 2023 08:48:22 GMT",
+      "date": "Fri, 11 Aug 2023 12:10:20 GMT",
+      "tag": "@fluentui/react-menu_v9.12.5",
+      "version": "9.12.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-aria to v9.3.30",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.28",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-portal to v9.3.7",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-positioning to v9.9.4",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-tabster to v9.12.2",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-utilities to v9.11.1",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 09 Aug 2023 13:16:58 GMT",
+      "tag": "@fluentui/react-menu_v9.12.4",
+      "version": "9.12.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-menu",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-menu",
+            "commit": "e615f12c54c8a4acad49930a02c3b703fd64692b",
+            "comment": "chore(teams-prg): migrate to new slot API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-aria to v9.3.29",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-portal to v9.3.6",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-positioning to v9.9.3",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-tabster to v9.12.1",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:56 GMT",
       "tag": "@fluentui/react-menu_v9.12.3",
       "version": "9.12.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Fri, 04 Aug 2023 08:48:22 GMT and should not be manually modified.
+This log was last generated on Fri, 11 Aug 2023 12:10:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.12.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.5)
+
+Fri, 11 Aug 2023 12:10:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.4..@fluentui/react-menu_v9.12.5)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.3.30 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.28 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-portal to v9.3.7 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-positioning to v9.9.4 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-tabster to v9.12.2 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-utilities to v9.11.1 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+
+## [9.12.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.4)
+
+Wed, 09 Aug 2023 13:16:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.3..@fluentui/react-menu_v9.12.4)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- chore(teams-prg): migrate to new slot API ([PR #28751](https://github.com/microsoft/fluentui/pull/28751) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.29 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-portal to v9.3.6 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-positioning to v9.9.3 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-tabster to v9.12.1 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+
 ## [9.12.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.3)
 
-Fri, 04 Aug 2023 08:48:22 GMT 
+Fri, 04 Aug 2023 08:52:56 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.2..@fluentui/react-menu_v9.12.3)
 
 ### Patches

package/lib/components/MenuDivider/renderMenuDivider.js

@@ -1,9 +1,9 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Redefine the render function to add slots. Reuse the menudivider structure but add
  * slots to children.
  */ export const renderMenuDivider_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

package/lib/components/MenuDivider/renderMenuDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuDivider.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menudivider structure but add\n * slots to children.\n */\nexport const renderMenuDivider_unstable = (state: MenuDividerState) => {\n  const { slots, slotProps } = getSlotsNext<MenuDividerSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderMenuDivider_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;;CAGC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA+BE;IAE5D,qBAAO,AAbT,cAaUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderMenuDivider.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menudivider structure but add\n * slots to children.\n */\nexport const renderMenuDivider_unstable = (state: MenuDividerState) => {\n  assertSlots<MenuDividerSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderMenuDivider_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;;CAGC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrEF,YAA8BE;IAE9B,qBAAO,AAbT,cAaUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/MenuDivider/useMenuDivider.js

@@ -1,4 +1,4 @@
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 /**
  * Given user props, returns state and render function for a MenuDivider.
@@ -7,11 +7,13 @@ import * as React from 'react';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             role: 'presentation',
             'aria-hidden': true,
             ...props,
             ref
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib/components/MenuDivider/useMenuDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuDivider.ts"],"sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Given user props, returns state and render function for a MenuDivider.\n */\nexport const useMenuDivider_unstable = (props: MenuDividerProps, ref: React.Ref<HTMLElement>): MenuDividerState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      role: 'presentation',\n      'aria-hidden': true,\n      ...props,\n      ref,\n    }),\n  };\n};\n"],"names":["getNativeElementProps","React","useMenuDivider_unstable","props","ref","components","root","role"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,4BAA4B;AAClE,YAAYC,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,sBAAsB,OAAO;YACjCO,MAAM;YACN,eAAe,IAAI;YACnB,GAAGJ,KAAK;YACRC;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["useMenuDivider.ts"],"sourcesContent":["import { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';\n\n/**\n * Given user props, returns state and render function for a MenuDivider.\n */\nexport const useMenuDivider_unstable = (props: MenuDividerProps, ref: React.Ref<HTMLElement>): MenuDividerState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        role: 'presentation',\n        'aria-hidden': true,\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getNativeElementProps","slot","React","useMenuDivider_unstable","props","ref","components","root","always","role","elementType"],"mappings":"AAAA,SAASA,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,YAAYC,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,sBAAsB,OAAO;YAC3BS,MAAM;YACN,eAAe,IAAI;YACnB,GAAGL,KAAK;YACRC;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/MenuGroup/renderMenuGroup.js

@@ -1,12 +1,12 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { MenuGroupContextProvider } from '../../contexts/menuGroupContext';
 /**
  * Redefine the render function to add slots. Reuse the menugroup structure but add
  * slots to children.
  */ export const renderMenuGroup_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(MenuGroupContextProvider, {
         value: contextValues.menuGroup
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
+    }, /*#__PURE__*/ createElement(state.root, null));
 };

package/lib/components/MenuGroup/renderMenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { MenuGroupContextValues, MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nimport { MenuGroupContextProvider } from '../../contexts/menuGroupContext';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroup structure but add\n * slots to children.\n */\nexport const renderMenuGroup_unstable = (state: MenuGroupState, contextValues: MenuGroupContextValues) => {\n  const { slots, slotProps } = getSlotsNext<MenuGroupSlots>(state);\n\n  return (\n    <MenuGroupContextProvider value={contextValues.menuGroup}>\n      <slots.root {...slotProps.root} />\n    </MenuGroupContextProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","MenuGroupContextProvider","renderMenuGroup_unstable","state","contextValues","slots","slotProps","value","menuGroup","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,wBAAwB,QAAQ,kCAAkC;AAE3E;;;CAGC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC,gBAA0C;IACxG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA6BG;IAE1D,qBACE,AAfJ,cAeKF;QAAyBM,OAAOH,cAAcI,SAAS;qBACtD,AAhBN,cAgBOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderMenuGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MenuGroupContextValues, MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nimport { MenuGroupContextProvider } from '../../contexts/menuGroupContext';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroup structure but add\n * slots to children.\n */\nexport const renderMenuGroup_unstable = (state: MenuGroupState, contextValues: MenuGroupContextValues) => {\n  assertSlots<MenuGroupSlots>(state);\n\n  return (\n    <MenuGroupContextProvider value={contextValues.menuGroup}>\n      <state.root />\n    </MenuGroupContextProvider>\n  );\n};\n"],"names":["createElement","assertSlots","MenuGroupContextProvider","renderMenuGroup_unstable","state","contextValues","value","menuGroup","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,wBAAwB,QAAQ,kCAAkC;AAE3E;;;CAGC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC,gBAA0C;IACxGJ,YAA4BG;IAE5B,qBACE,AAfJ,cAeKF;QAAyBI,OAAOD,cAAcE,SAAS;qBACtD,AAhBN,cAgBOH,MAAMI,IAAI;AAGjB,EAAE"}

package/lib/components/MenuGroup/useMenuGroup.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useId } from '@fluentui/react-utilities';
+import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
 /**
  * Given user props, returns state and render function for a MenuGroup.
  */ export function useMenuGroup_unstable(props, ref) {
@@ -8,11 +8,13 @@ import { getNativeElementProps, useId } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             'aria-labelledby': headerId,
             role: 'group',
             ...props
+        }), {
+            elementType: 'div'
         }),
         headerId
     };

package/lib/components/MenuGroup/useMenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId } from '@fluentui/react-utilities';\nimport { MenuGroupProps, MenuGroupState } from './MenuGroup.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroup.\n */\nexport function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState {\n  const headerId = useId('menu-group');\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      'aria-labelledby': headerId,\n      role: 'group',\n      ...props,\n    }),\n    headerId,\n  };\n}\n"],"names":["React","getNativeElementProps","useId","useMenuGroup_unstable","props","ref","headerId","components","root","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,KAAK,QAAQ,4BAA4B;AAGzE;;CAEC,GACD,OAAO,SAASC,sBAAsBC,KAAqB,EAAEC,GAA2B,EAAkB;IACxG,MAAMC,WAAWJ,MAAM;IAEvB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,sBAAsB,OAAO;YACjCI;YACA,mBAAmBC;YACnBG,MAAM;YACN,GAAGL,KAAK;QACV;QACAE;IACF;AACF,CAAC"}
+{"version":3,"sources":["useMenuGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { MenuGroupProps, MenuGroupState } from './MenuGroup.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroup.\n */\nexport function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState {\n  const headerId = useId('menu-group');\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        'aria-labelledby': headerId,\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    headerId,\n  };\n}\n"],"names":["React","getNativeElementProps","useId","slot","useMenuGroup_unstable","props","ref","headerId","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAG/E;;CAEC,GACD,OAAO,SAASC,sBAAsBC,KAAqB,EAAEC,GAA2B,EAAkB;IACxG,MAAMC,WAAWL,MAAM;IAEvB,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfT,sBAAsB,OAAO;YAC3BK;YACA,mBAAmBC;YACnBI,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL;IACF;AACF,CAAC"}

package/lib/components/MenuGroupHeader/renderMenuGroupHeader.js

@@ -1,9 +1,9 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Redefine the render function to add slots. Reuse the menugroupheader structure but add
  * slots to children.
  */ export const renderMenuGroupHeader_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuGroupHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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 } = getSlotsNext<MenuGroupHeaderSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderMenuGroupHeader_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;;CAGC,GACD,OAAO,MAAMC,iCAAiC,CAACC,QAAgC;IAC7E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAmCE;IAEhE,qBAAO,AAbT,cAaUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderMenuGroupHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } 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  assertSlots<MenuGroupHeaderSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderMenuGroupHeader_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;;CAGC,GACD,OAAO,MAAMC,iCAAiC,CAACC,QAAgC;IAC7EF,YAAkCE;IAElC,qBAAO,AAbT,cAaUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/MenuGroupHeader/useMenuGroupHeader.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["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"],"names":["React","useMenuGroupContext_unstable","getNativeElementProps","useMenuGroupHeader_unstable","props","ref","headerId","id","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;CAEC,GACD,OAAO,SAASC,4BACdC,KAA2B,EAC3BC,GAA2B,EACL;IACtB,MAAM,EAAEC,UAAUC,GAAE,EAAE,GAAGN;IAEzB,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,sBAAsB,OAAO;YACjCG;YACAE;YACA,GAAGH,KAAK;QACV;IACF;AACF,CAAC"}
+{"version":3,"sources":["useMenuGroupHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getNativeElementProps, slot } 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: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        id,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMenuGroupContext_unstable","getNativeElementProps","slot","useMenuGroupHeader_unstable","props","ref","headerId","id","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;CAEC,GACD,OAAO,SAASC,4BACdC,KAA2B,EAC3BC,GAA2B,EACL;IACtB,MAAM,EAAEC,UAAUC,GAAE,EAAE,GAAGP;IAEzB,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,sBAAsB,OAAO;YAC3BI;YACAE;YACA,GAAGH,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF,CAAC"}

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

@@ -15,7 +15,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bt984gj: "f122n59"
   }
 }, {
-  d: [".fy9rknc{font-size:var(--fontSizeBase200);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fjlbh76{padding-left:12px;}", ".f11qrl6u{padding-right:12px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".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;}"]
+  d: [".fy9rknc{font-size:var(--fontSizeBase200);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fjlbh76{padding-left:12px;}", ".f11qrl6u{padding-right:12px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1d2rq10{height:32px;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}"]
 });
 export const useMenuGroupHeaderStyles_unstable = state => {
   const styles = useStyles();

package/lib/components/MenuItem/renderMenuItem.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Function that renders the final JSX of the component
  */ export const renderMenuItem_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.checkmark && /*#__PURE__*/ createElement(slots.checkmark, slotProps.checkmark), slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), slots.content && /*#__PURE__*/ createElement(slots.content, slotProps.content), slots.secondaryContent && /*#__PURE__*/ createElement(slots.secondaryContent, slotProps.secondaryContent), slots.submenuIndicator && /*#__PURE__*/ createElement(slots.submenuIndicator, slotProps.submenuIndicator));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.checkmark && /*#__PURE__*/ createElement(state.checkmark, null), state.icon && /*#__PURE__*/ createElement(state.icon, null), state.content && /*#__PURE__*/ createElement(state.content, null), state.secondaryContent && /*#__PURE__*/ createElement(state.secondaryContent, null), state.submenuIndicator && /*#__PURE__*/ createElement(state.submenuIndicator, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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 } = getSlotsNext<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"],"names":["createElement","getSlotsNext","renderMenuItem_unstable","state","slots","slotProps","root","checkmark","icon","content","secondaryContent","submenuIndicator"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,QAAyB;IAC/D,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA4BE;IAEzD,qBACE,AAbJ,cAaKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,SAAS,kBAAI,AAd1B,cAc2BH,MAAMG,SAAS,EAAKF,UAAUE,SAAS,GAC3DH,MAAMI,IAAI,kBAAI,AAfrB,cAesBJ,MAAMI,IAAI,EAAKH,UAAUG,IAAI,GAC5CJ,MAAMK,OAAO,kBAAI,AAhBxB,cAgByBL,MAAMK,OAAO,EAAKJ,UAAUI,OAAO,GACrDL,MAAMM,gBAAgB,kBAAI,AAjBjC,cAiBkCN,MAAMM,gBAAgB,EAAKL,UAAUK,gBAAgB,GAChFN,MAAMO,gBAAgB,kBAAI,AAlBjC,cAkBkCP,MAAMO,gBAAgB,EAAKN,UAAUM,gBAAgB;AAGvF,EAAE"}
+{"version":3,"sources":["renderMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuItem_unstable = (state: MenuItemState) => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && <state.content />}\n      {state.secondaryContent && <state.secondaryContent />}\n      {state.submenuIndicator && <state.submenuIndicator />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderMenuItem_unstable","state","root","checkmark","icon","content","secondaryContent","submenuIndicator"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,QAAyB;IAC/DF,YAA2BE;IAE3B,qBACE,AAbJ,cAaKA,MAAMC,IAAI,QACRD,MAAME,SAAS,kBAAI,AAd1B,cAc2BF,MAAME,SAAS,SACnCF,MAAMG,IAAI,kBAAI,AAfrB,cAesBH,MAAMG,IAAI,SACzBH,MAAMI,OAAO,kBAAI,AAhBxB,cAgByBJ,MAAMI,OAAO,SAC/BJ,MAAMK,gBAAgB,kBAAI,AAjBjC,cAiBkCL,MAAMK,gBAAgB,SACjDL,MAAMM,gBAAgB,kBAAI,AAlBjC,cAkBkCN,MAAMM,gBAAgB;AAGxD,EAAE"}

package/lib/components/MenuItem/useMenuItem.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs, getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useCharacterSearch } from './useCharacterSearch';
 import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
@@ -34,7 +34,7 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
             content: 'span',
             secondaryContent: 'span'
         },
-        root: getNativeElementProps(as, useARIAButtonProps(as, {
+        root: slot.always(getNativeElementProps(as, useARIAButtonProps(as, {
             role: 'menuitem',
             ...props,
             disabled: false,
@@ -66,26 +66,34 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
                 }
                 (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
             })
-        })),
-        icon: resolveShorthand(props.icon, {
-            required: hasIcons
+        })), {
+            elementType: 'div'
         }),
-        checkmark: resolveShorthand(props.checkmark, {
-            required: hasCheckmarks
+        icon: slot.optional(props.icon, {
+            renderByDefault: hasIcons,
+            elementType: 'span'
         }),
-        submenuIndicator: resolveShorthand(props.submenuIndicator, {
-            required: hasSubmenu,
+        checkmark: slot.optional(props.checkmark, {
+            renderByDefault: hasCheckmarks,
+            elementType: 'span'
+        }),
+        submenuIndicator: slot.optional(props.submenuIndicator, {
+            renderByDefault: hasSubmenu,
             defaultProps: {
                 children: dir === 'ltr' ? /*#__PURE__*/ React.createElement(ChevronRightIcon, null) : /*#__PURE__*/ React.createElement(ChevronLeftIcon, null)
-            }
+            },
+            elementType: 'span'
         }),
-        content: resolveShorthand(props.content, {
-            required: !!props.children,
+        content: slot.optional(props.content, {
+            renderByDefault: !!props.children,
             defaultProps: {
                 children: props.children
-            }
+            },
+            elementType: 'span'
         }),
-        secondaryContent: resolveShorthand(props.secondaryContent)
+        secondaryContent: slot.optional(props.secondaryContent, {
+            elementType: 'span'
+        })
     };
     useCharacterSearch(state, innerRef);
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["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"],"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"],"mappings":"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"}
+{"version":3,"sources":["useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, getNativeElementProps, slot } 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: slot.always(\n      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      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }),\n    checkmark: slot.optional(props.checkmark, { renderByDefault: hasCheckmarks, elementType: 'span' }),\n    submenuIndicator: slot.optional(props.submenuIndicator, {\n      renderByDefault: hasSubmenu,\n      defaultProps: {\n        children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n      },\n      elementType: 'span',\n    }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }),\n  };\n  useCharacterSearch(state, innerRef);\n  return state;\n};\n"],"names":["React","useEventCallback","useMergedRefs","getNativeElementProps","slot","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","always","role","disabledFocusable","onKeyDown","event","isDefaultPrevented","key","current","onMouseEnter","focus","onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children"],"mappings":"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"}

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

@@ -117,7 +117,7 @@ const useStyles = /*#__PURE__*/__styles({
 }, {
   f: [".ftqa4ok:focus{outline-style:none;}", ".fc1cou1:focus{color:var(--colorNeutralForeground3Hover);}", ".ft33916:focus{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);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".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);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d2rq10{height:32px;}", ".f1nxs5xn{min-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);}"],
+  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);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".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);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d2rq10{height:32px;}", ".f1nxs5xn{min-height:32px;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1k6fduh{cursor:pointer;}", ".f1q8lukm{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{flex-grow:1;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fe5j1ua{font-size:20px;}", ".fez10in{line-height:0;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{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);}", ".f1ijtazh:hover{background-color:var(--colorNeutralBackground1);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1q1x1ba:hover .fui-MenuItem__icon{color:var(--colorNeutralForegroundDisabled);}"],
   m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
     m: "(forced-colors: active)"

package/lib/components/MenuItemCheckbox/renderMenuItemCheckbox.js

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /** Function that renders the final JSX of the component  */ export const renderMenuItemCheckbox_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.checkmark && /*#__PURE__*/ createElement(slots.checkmark, slotProps.checkmark), slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), slots.content && /*#__PURE__*/ createElement(slots.content, slotProps.content), slots.secondaryContent && /*#__PURE__*/ createElement(slots.secondaryContent, slotProps.secondaryContent));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.checkmark && /*#__PURE__*/ createElement(state.checkmark, null), state.icon && /*#__PURE__*/ createElement(state.icon, null), state.content && /*#__PURE__*/ createElement(state.content, null), state.secondaryContent && /*#__PURE__*/ createElement(state.secondaryContent, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuItemCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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 } = getSlotsNext<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"],"names":["createElement","getSlotsNext","renderMenuItemCheckbox_unstable","state","slots","slotProps","root","checkmark","icon","content","secondaryContent"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAIzD,0DAA0D,GAC1D,OAAO,MAAMC,kCAAkC,CAACC,QAAiC;IAC/E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA4BE;IAEzD,qBACE,AAZJ,cAYKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,SAAS,kBAAI,AAb1B,cAa2BH,MAAMG,SAAS,EAAKF,UAAUE,SAAS,GAC3DH,MAAMI,IAAI,kBAAI,AAdrB,cAcsBJ,MAAMI,IAAI,EAAKH,UAAUG,IAAI,GAC5CJ,MAAMK,OAAO,kBAAI,AAfxB,cAeyBL,MAAMK,OAAO,EAAKJ,UAAUI,OAAO,GACrDL,MAAMM,gBAAgB,kBAAI,AAhBjC,cAgBkCN,MAAMM,gBAAgB,EAAKL,UAAUK,gBAAgB;AAGvF,EAAE"}
+{"version":3,"sources":["renderMenuItemCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/** Function that renders the final JSX of the component  */\nexport const renderMenuItemCheckbox_unstable = (state: MenuItemCheckboxState) => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && <state.content />}\n      {state.secondaryContent && <state.secondaryContent />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderMenuItemCheckbox_unstable","state","root","checkmark","icon","content","secondaryContent"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAIxD,0DAA0D,GAC1D,OAAO,MAAMC,kCAAkC,CAACC,QAAiC;IAC/EF,YAA2BE;IAE3B,qBACE,AAZJ,cAYKA,MAAMC,IAAI,QACRD,MAAME,SAAS,kBAAI,AAb1B,cAa2BF,MAAME,SAAS,SACnCF,MAAMG,IAAI,kBAAI,AAdrB,cAcsBH,MAAMG,IAAI,SACzBH,MAAMI,OAAO,kBAAI,AAfxB,cAeyBJ,MAAMI,OAAO,SAC/BJ,MAAMK,gBAAgB,kBAAI,AAhBjC,cAgBkCL,MAAMK,gBAAgB;AAGxD,EAAE"}

package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { resolveShorthand } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
 import { Checkmark16Filled } from '@fluentui/react-icons';
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
@@ -17,11 +17,12 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
             persistOnClick: true,
             ...props,
             'aria-checked': checked,
-            checkmark: resolveShorthand(props.checkmark, {
+            checkmark: slot.optional(props.checkmark, {
                 defaultProps: {
                     children: /*#__PURE__*/ React.createElement(Checkmark16Filled, null)
                 },
-                required: true
+                renderByDefault: true,
+                elementType: 'span'
             }),
             onClick: (e)=>{
                 var _props_onClick;

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

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