@fluentui/react-menu 9.12.22 → 9.12.24

package/CHANGELOG.json

@@ -2,7 +2,127 @@
   "name": "@fluentui/react-menu",
   "entries": [
     {
-      "date": "Wed, 04 Oct 2023 08:41:55 GMT",
+      "date": "Mon, 09 Oct 2023 20:41:55 GMT",
+      "tag": "@fluentui/react-menu_v9.12.24",
+      "version": "9.12.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-menu",
+            "commit": "f2a882cedb19f177396e960079a3c6b9a2e7c64d",
+            "comment": "fix: MenuSplitGroup styles should target MenuItems"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-aria to v9.3.41",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.39",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-portal to v9.3.22",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-positioning to v9.9.19",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.10.0",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-tabster to v9.13.5",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-utilities to v9.14.2",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.15",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 Oct 2023 15:25:31 GMT",
+      "tag": "@fluentui/react-menu_v9.12.23",
+      "version": "9.12.23",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-menu",
+            "commit": "86dd76990e3da5af1f2b6b04a3aec46141d5a653",
+            "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-aria to v9.3.40",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.38",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-portal to v9.3.21",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-positioning to v9.9.18",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-tabster to v9.13.4",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-utilities to v9.14.1",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-menu",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.14",
+            "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Oct 2023 08:45:47 GMT",
       "tag": "@fluentui/react-menu_v9.12.22",
       "version": "9.12.22",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Wed, 04 Oct 2023 08:41:55 GMT and should not be manually modified.
+This log was last generated on Mon, 09 Oct 2023 20:41:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.12.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.24)
+
+Mon, 09 Oct 2023 20:41:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.23..@fluentui/react-menu_v9.12.24)
+
+### Patches
+
+- fix: MenuSplitGroup styles should target MenuItems ([PR #29450](https://github.com/microsoft/fluentui/pull/29450) by lingfangao@hotmail.com)
+- Bump @fluentui/react-aria to v9.3.41 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.39 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-portal to v9.3.22 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-positioning to v9.9.19 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.10.0 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-tabster to v9.13.5 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-utilities to v9.14.2 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.15 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+
+## [9.12.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.23)
+
+Thu, 05 Oct 2023 15:25:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.22..@fluentui/react-menu_v9.12.23)
+
+### Patches
+
+- chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29387](https://github.com/microsoft/fluentui/pull/29387) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.40 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.38 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-portal to v9.3.21 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-positioning to v9.9.18 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-tabster to v9.13.4 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-utilities to v9.14.1 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.14 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
+
 ## [9.12.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.12.22)
 
-Wed, 04 Oct 2023 08:41:55 GMT 
+Wed, 04 Oct 2023 08:45:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.12.21..@fluentui/react-menu_v9.12.22)
 
 ### Patches

package/lib/components/MenuDivider/useMenuDivider.js

@@ -1,4 +1,4 @@
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 /**
  * Given user props, returns state and render function for a MenuDivider.
@@ -7,11 +7,14 @@ import * as React from 'react';
         components: {
             root: 'div'
         },
-        root: slot.always(getNativeElementProps('div', {
+        root: slot.always(getIntrinsicElementProps('div', {
             role: 'presentation',
             'aria-hidden': true,
             ...props,
-            ref
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref
         }), {
             elementType: 'div'
         })

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

@@ -1 +1 @@
-{"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;IAC/D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,sBAAsB,OAAO;YAC3BS,MAAM;YACN,eAAe;YACf,GAAGL,KAAK;YACRC;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useMenuDivider.ts"],"sourcesContent":["import { getIntrinsicElementProps, 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      getIntrinsicElementProps('div', {\n        role: 'presentation',\n        'aria-hidden': true,\n        ...props,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useMenuDivider_unstable","props","ref","components","root","always","role","elementType"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,yBAAyB,OAAO;YAC9BS,MAAM;YACN,eAAe;YACf,GAAGL,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/MenuGroup/useMenuGroup.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
 /**
  * Given user props, returns state and render function for a MenuGroup.
  */ export function useMenuGroup_unstable(props, ref) {
@@ -8,8 +8,11 @@ import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: slot.always(getNativeElementProps('div', {
-            ref,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             'aria-labelledby': headerId,
             role: 'group',
             ...props

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

@@ -1 +1 @@
-{"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;IACtF,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"}
+{"version":3,"sources":["useMenuGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        'aria-labelledby': headerId,\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    headerId,\n  };\n}\n"],"names":["React","getIntrinsicElementProps","useId","slot","useMenuGroup_unstable","props","ref","headerId","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF;;CAEC,GACD,OAAO,SAASC,sBAAsBC,KAAqB,EAAEC,GAA2B;IACtF,MAAMC,WAAWL,MAAM;IAEvB,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,mBAAmBC;YACnBI,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL;IACF;AACF"}

package/lib/components/MenuGroupHeader/useMenuGroupHeader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Given user props, returns state and render function for a MenuGroupHeader.
  */ export function useMenuGroupHeader_unstable(props, ref) {
@@ -9,8 +9,11 @@ import { getNativeElementProps, slot } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: slot.always(getNativeElementProps('div', {
-            ref,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             id,
             ...props
         }), {

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, 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;IAE3B,MAAM,EAAEC,UAAUC,EAAE,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"}
+{"version":3,"sources":["useMenuGroupHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        id,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMenuGroupContext_unstable","getIntrinsicElementProps","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,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,SAASC,4BACdC,KAA2B,EAC3BC,GAA2B;IAE3B,MAAM,EAAEC,UAAUC,EAAE,EAAE,GAAGP;IAEzB,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLE;YACA,GAAGH,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}

package/lib/components/MenuItem/useMenuItem.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEventCallback, useMergedRefs, getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs, getIntrinsicElementProps, 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: slot.always(getNativeElementProps(as, useARIAButtonProps(as, {
+        root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(as, {
             role: 'menuitem',
             ...props,
             disabled: false,

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"sources":["useMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, getIntrinsicElementProps, 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 {\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonProps,\n  useARIAButtonProps,\n} 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      getIntrinsicElementProps(\n        as,\n        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(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","getIntrinsicElementProps","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/MenuItemLink/useMenuItemLink.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
 /**
  * Create the state required to render MenuItemLink.
@@ -18,7 +18,7 @@ import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
             ...baseState.components,
             root: 'a'
         },
-        root: slot.always(getNativeElementProps('a', {
+        root: slot.always(getIntrinsicElementProps('a', {
             ref,
             role: 'menuitem',
             ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getNativeElementProps('a', {\n        ref,\n        role: 'menuitem',\n        ...props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,OAAO;QACL,GAAGE,SAAS;QACZC,YAAY;YACV,GAAGD,UAAUC,UAAU;YACvBC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,sBAAsB,KAAK;YACzBK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAI;IAEvB;AACF,EAAE"}
+{"version":3,"sources":["useMenuItemLink.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport { MenuItemProps } from '../MenuItem/MenuItem.types';\n\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */\nexport const useMenuItemLink_unstable = (\n  props: MenuItemLinkProps,\n  ref: React.Ref<HTMLAnchorElement>,\n): MenuItemLinkState => {\n  // casting because the root slot changes from div to a\n  const baseState = useMenuItem_unstable(props as MenuItemProps, null);\n  return {\n    ...baseState,\n    components: {\n      ...baseState.components,\n      root: 'a',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('a', {\n        ref,\n        role: 'menuitem',\n        ...props,\n      }),\n      { elementType: 'a' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMenuItem_unstable","useMenuItemLink_unstable","props","ref","baseState","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,sDAAsD;IACtD,MAAMC,YAAYJ,qBAAqBE,OAAwB;IAC/D,OAAO;QACL,GAAGE,SAAS;QACZC,YAAY;YACV,GAAGD,UAAUC,UAAU;YACvBC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,KAAK;YAC5BK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAI;IAEvB;AACF,EAAE"}

package/lib/components/MenuList/useMenuList.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { useMergedRefs, useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
@@ -107,7 +107,10 @@ import { MenuContext } from '../../contexts/menuContext';
         components: {
             root: 'div'
         },
-        root: slot.always(getNativeElementProps('div', {
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: useMergedRefs(ref, innerRef),
             role: 'menu',
             'aria-labelledby': menuContext.triggerId,

package/lib/components/MenuList/useMenuList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  useControllableState,\n  getNativeElementProps,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\n  const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: hasMenuContext } });\n\n  if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n    // TODO throw warnings in development safely\n    // eslint-disable-next-line no-console\n    console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n  }\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      // TODO use some kind of children registration to reduce dependency on DOM roles\n      const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n      if (!innerRef.current) {\n        return;\n      }\n\n      const menuItems = findAllFocusable(\n        innerRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n      );\n\n      let startIndex = menuItems.indexOf(itemEl) + 1;\n      if (startIndex === menuItems.length) {\n        startIndex = 0;\n      }\n\n      const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n      const char = e.key.toLowerCase();\n\n      const getIndexFirstChars = (start: number, firstChar: string) => {\n        for (let i = start; i < firstChars.length; i++) {\n          if (char === firstChars[i]) {\n            return i;\n          }\n        }\n        return -1;\n      };\n\n      // Check remaining slots in the menu\n      let index = getIndexFirstChars(startIndex, char);\n\n      // If not found in remaining slots, check from beginning\n      if (index === -1) {\n        index = getIndexFirstChars(0, char);\n      }\n\n      // If match was found...\n      if (index > -1) {\n        menuItems[index].focus();\n      }\n    },\n    [findAllFocusable],\n  );\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange =\n    props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n  const toggleCheckbox = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n      const checkedItems = checkedValues?.[name] || [];\n      const newCheckedItems = [...checkedItems];\n      if (checked) {\n        newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n      } else {\n        newCheckedItems.push(value);\n      }\n\n      handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    },\n  );\n\n  const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n    const newCheckedItems = [value];\n    setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, innerRef),\n        role: 'menu',\n        'aria-labelledby': menuContext.triggerId,\n        ...focusAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    hasIcons: menuContext.hasIcons || false,\n    hasCheckmarks: menuContext.hasCheckmarks || false,\n    checkedValues,\n    hasMenuContext,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n  };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n  return {\n    checkedValues,\n    onCheckedValueChange,\n    triggerId,\n    hasIcons,\n    hasCheckmarks,\n  };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n  props: MenuListProps,\n  contextValue: ReturnType<typeof useMenuContextSelectors>,\n  hasMenuContext: boolean,\n) => {\n  let isUsingPropsAndContext = false;\n  for (const val in contextValue) {\n    if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n      isUsingPropsAndContext = true;\n    }\n  }\n\n  return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getNativeElementProps","slot","useArrowNavigationGroup","useFocusFinders","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","always","role","triggerId","elementType","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,gBAAgB,EAChBC,oBAAoB,EACpBC,qBAAqB,EACrBC,IAAI,QACC,4BAA4B;AACnC,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,gBAAgB,EAAE,GAAGP;IAC7B,MAAMQ,cAAcC;IACpB,MAAMC,iBAAiBT,oBAAoBE;IAC3C,MAAMQ,kBAAkBZ,wBAAwB;QAAEa,UAAU;QAAMC,sBAAsB;YAAEC,KAAKJ;QAAe;IAAE;IAEhH,IAAIK,yBAAyBV,OAAOG,aAAaE,iBAAiB;QAChE,4CAA4C;QAC5C,sCAAsC;QACtCM,QAAQC,IAAI,CAAC;IACf;IAEA,MAAMC,WAAWzB,MAAM0B,MAAM,CAAc;IAE3C,MAAMC,2BAA2B3B,MAAM4B,WAAW,CAChD,CAACC,GAAqCC;QACpC,gFAAgF;QAChF,MAAMC,gBAAgB;YAAC;YAAY;YAAoB;SAAgB;QACvE,IAAI,CAACN,SAASO,OAAO,EAAE;YACrB;QACF;QAEA,MAAMC,YAAYnB,iBAChBW,SAASO,OAAO,EAChB,CAACE,KAAoBA,GAAGC,YAAY,CAAC,WAAWJ,cAAcK,OAAO,CAACF,GAAGG,YAAY,CAAC,aAAc,CAAC;QAGvG,IAAIC,aAAaL,UAAUG,OAAO,CAACN,UAAU;QAC7C,IAAIQ,eAAeL,UAAUM,MAAM,EAAE;YACnCD,aAAa;QACf;QAEA,MAAME,aAAaP,UAAUQ,GAAG,CAACC,CAAAA;gBAAYA;oBAAAA,wBAAAA,SAASC,WAAW,cAApBD,4CAAAA,sBAAsBE,MAAM,CAAC,GAAGC,WAAW;;QACxF,MAAMC,OAAOjB,EAAEkB,GAAG,CAACF,WAAW;QAE9B,MAAMG,qBAAqB,CAACC,OAAeC;YACzC,IAAK,IAAIC,IAAIF,OAAOE,IAAIX,WAAWD,MAAM,EAAEY,IAAK;gBAC9C,IAAIL,SAASN,UAAU,CAACW,EAAE,EAAE;oBAC1B,OAAOA;gBACT;YACF;YACA,OAAO,CAAC;QACV;QAEA,oCAAoC;QACpC,IAAIC,QAAQJ,mBAAmBV,YAAYQ;QAE3C,wDAAwD;QACxD,IAAIM,UAAU,CAAC,GAAG;YAChBA,QAAQJ,mBAAmB,GAAGF;QAChC;QAEA,wBAAwB;QACxB,IAAIM,QAAQ,CAAC,GAAG;YACdnB,SAAS,CAACmB,MAAM,CAACC,KAAK;QACxB;IACF,GACA;QAACvC;KAAiB;QAIXF;IADT,MAAM,CAAC0C,eAAeC,iBAAiB,GAAGpD,qBAAqB;QAC7DqD,OAAO5C,CAAAA,uBAAAA,MAAM0C,aAAa,cAAnB1C,kCAAAA,uBAAwBK,iBAAiBF,YAAYuC,aAAa,GAAGG;QAC5EC,cAAc9C,MAAM+C,oBAAoB;QACxCC,cAAc,CAAC;IACjB;QAGEhD;IADF,MAAMiD,2BACJjD,CAAAA,8BAAAA,MAAMkD,oBAAoB,cAA1BlD,yCAAAA,8BAA+BK,iBAAiBF,YAAY+C,oBAAoB,GAAGL;IAErF,MAAMM,iBAAiB7D,iBACrB,CAAC2B,GAA2CmC,MAAcC,OAAeC;QACvE,MAAMC,eAAeb,CAAAA,0BAAAA,oCAAAA,aAAe,CAACU,KAAK,KAAI,EAAE;QAChD,MAAMI,kBAAkB;eAAID;SAAa;QACzC,IAAID,SAAS;YACXE,gBAAgBC,MAAM,CAACD,gBAAgBhC,OAAO,CAAC6B,QAAQ;QACzD,OAAO;YACLG,gBAAgBE,IAAI,CAACL;QACvB;QAEAJ,qCAAAA,+CAAAA,yBAA2BhC,GAAG;YAAEmC;YAAMG,cAAcC;QAAgB;QACpEb,iBAAiBgB,CAAAA,IAAM,CAAA;gBAAE,GAAGA,CAAC;gBAAE,CAACP,KAAK,EAAEI;YAAgB,CAAA;IACzD;IAGF,MAAMI,cAActE,iBAAiB,CAAC2B,GAA2CmC,MAAcC;QAC7F,MAAMG,kBAAkB;YAACH;SAAM;QAC/BV,iBAAiBgB,CAAAA,IAAM,CAAA;gBAAE,GAAGA,CAAC;gBAAE,CAACP,KAAK,EAAEI;YAAgB,CAAA;QACvDP,qCAAAA,+CAAAA,yBAA2BhC,GAAG;YAAEmC;YAAMG,cAAcC;QAAgB;IACtE;IAEA,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMrE,KAAKsE,MAAM,CACfvE,sBAAsB,OAAO;YAC3BS,KAAKZ,cAAcY,KAAKY;YACxBmD,MAAM;YACN,mBAAmB7D,YAAY8D,SAAS;YACxC,GAAG3D,eAAe;YAClB,GAAGN,KAAK;QACV,IACA;YAAEkE,aAAa;QAAM;QAEvBC,UAAUhE,YAAYgE,QAAQ,IAAI;QAClCC,eAAejE,YAAYiE,aAAa,IAAI;QAC5C1B;QACArC;QACAU;QACA6C;QACAT;IACF;AACF,EAAE;AAEF;;CAEC,GACD,MAAM/C,0BAA0B;IAC9B,MAAMsC,gBAAgB7C,wBAAwBwE,CAAAA,UAAWA,QAAQ3B,aAAa;IAC9E,MAAMQ,uBAAuBrD,wBAAwBwE,CAAAA,UAAWA,QAAQnB,oBAAoB;IAC5F,MAAMe,YAAYpE,wBAAwBwE,CAAAA,UAAWA,QAAQJ,SAAS;IACtE,MAAME,WAAWtE,wBAAwBwE,CAAAA,UAAWA,QAAQF,QAAQ;IACpE,MAAMC,gBAAgBvE,wBAAwBwE,CAAAA,UAAWA,QAAQD,aAAa;IAE9E,OAAO;QACL1B;QACAQ;QACAe;QACAE;QACAC;IACF;AACF;AAEA;;CAEC,GACD,MAAM1D,2BAA2B,CAC/BV,OACAsE,cACAjE;IAEA,IAAIkE,yBAAyB;IAC7B,IAAK,MAAMC,OAAOF,aAAc;QAC9B,IAAItE,KAAK,CAACwE,IAAgG,EAAE;YAC1GD,yBAAyB;QAC3B;IACF;IAEA,OAAOlE,kBAAkBkE;AAC3B"}
+{"version":3,"sources":["useMenuList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  useControllableState,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\n  const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: hasMenuContext } });\n\n  if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n    // TODO throw warnings in development safely\n    // eslint-disable-next-line no-console\n    console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n  }\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      // TODO use some kind of children registration to reduce dependency on DOM roles\n      const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n      if (!innerRef.current) {\n        return;\n      }\n\n      const menuItems = findAllFocusable(\n        innerRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n      );\n\n      let startIndex = menuItems.indexOf(itemEl) + 1;\n      if (startIndex === menuItems.length) {\n        startIndex = 0;\n      }\n\n      const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n      const char = e.key.toLowerCase();\n\n      const getIndexFirstChars = (start: number, firstChar: string) => {\n        for (let i = start; i < firstChars.length; i++) {\n          if (char === firstChars[i]) {\n            return i;\n          }\n        }\n        return -1;\n      };\n\n      // Check remaining slots in the menu\n      let index = getIndexFirstChars(startIndex, char);\n\n      // If not found in remaining slots, check from beginning\n      if (index === -1) {\n        index = getIndexFirstChars(0, char);\n      }\n\n      // If match was found...\n      if (index > -1) {\n        menuItems[index].focus();\n      }\n    },\n    [findAllFocusable],\n  );\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: props.checkedValues ?? (hasMenuContext ? menuContext.checkedValues : undefined),\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange =\n    props.onCheckedValueChange ?? (hasMenuContext ? menuContext.onCheckedValueChange : undefined);\n\n  const toggleCheckbox = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n      const checkedItems = checkedValues?.[name] || [];\n      const newCheckedItems = [...checkedItems];\n      if (checked) {\n        newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n      } else {\n        newCheckedItems.push(value);\n      }\n\n      handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    },\n  );\n\n  const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n    const newCheckedItems = [value];\n    setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        role: 'menu',\n        'aria-labelledby': menuContext.triggerId,\n        ...focusAttributes,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    hasIcons: menuContext.hasIcons || false,\n    hasCheckmarks: menuContext.hasCheckmarks || false,\n    checkedValues,\n    hasMenuContext,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n  };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n  return {\n    checkedValues,\n    onCheckedValueChange,\n    triggerId,\n    hasIcons,\n    hasCheckmarks,\n  };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n  props: MenuListProps,\n  contextValue: ReturnType<typeof useMenuContextSelectors>,\n  hasMenuContext: boolean,\n) => {\n  let isUsingPropsAndContext = false;\n  for (const val in contextValue) {\n    if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n      isUsingPropsAndContext = true;\n    }\n  }\n\n  return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["React","useMergedRefs","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useFocusFinders","useHasParentContext","useMenuContext_unstable","MenuContext","useMenuList_unstable","props","ref","findAllFocusable","menuContext","useMenuContextSelectors","hasMenuContext","focusAttributes","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","always","role","triggerId","elementType","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';
-import { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { dispatchMenuEnterEvent } from '../../utils/index';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -53,10 +53,13 @@ import { useRestoreFocusSource } from '@fluentui/react-tabster';
     var _useMenuContext_unstable;
     const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;
     const mountNode = useMenuContext_unstable((context)=>context.mountNode);
-    const rootProps = slot.always(getNativeElementProps('div', {
+    const rootProps = slot.always(getIntrinsicElementProps('div', {
         role: 'presentation',
         ...restoreFocusSourceAttributes,
         ...props,
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
         ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)
     }), {
         elementType: 'div'

package/lib/components/MenuPopover/useMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n  const restoreFocusSourceAttributes = useRestoreFocusSource();\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = slot.always(\n    getNativeElementProps('div', {\n      role: 'presentation',\n      ...restoreFocusSourceAttributes,\n      ...props,\n      ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n    }),\n    { elementType: 'div' },\n  );\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n    onMouseEnterOriginal?.(event);\n  });\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n      if (!isSubmenu) {\n        triggerRef.current?.focus();\n      }\n    }\n    onKeyDownOriginal?.(event);\n  });\n  return { inline, mountNode, components: { root: 'div' }, root: rootProps };\n};\n"],"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","slot","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useRestoreFocusSource","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","focus","components","root"],"mappings":"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"}
+{"version":3,"sources":["useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n  const restoreFocusSourceAttributes = useRestoreFocusSource();\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const mountNode = useMenuContext_unstable(context => context.mountNode);\n\n  const rootProps = slot.always(\n    getIntrinsicElementProps('div', {\n      role: 'presentation',\n      ...restoreFocusSourceAttributes,\n      ...props,\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef) as React.Ref<HTMLDivElement>,\n    }),\n    { elementType: 'div' },\n  );\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n    onMouseEnterOriginal?.(event);\n  });\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    const key = event.key;\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n      if (!isSubmenu) {\n        triggerRef.current?.focus();\n      }\n    }\n    onKeyDownOriginal?.(event);\n  });\n  return { inline, mountNode, components: { root: 'div' }, root: rootProps };\n};\n"],"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getIntrinsicElementProps","useEventCallback","useMergedRefs","slot","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useRestoreFocusSource","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","mountNode","rootProps","always","role","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","focus","components","root"],"mappings":"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"}

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
@@ -49,8 +49,11 @@ import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
         components: {
             root: 'div'
         },
-        root: slot.always(getNativeElementProps('div', {
+        root: slot.always(getIntrinsicElementProps('div', {
             role: 'group',
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: useMergedRefs(ref, innerRef),
             onKeyDown,
             ...props

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuSplitGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n  props: MenuSplitGroupProps,\n  ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n  const innerRef = React.useRef<HTMLElement>();\n  const { dir, targetDocument } = useFluent();\n\n  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const activeElement = targetDocument?.activeElement;\n      if (!activeElement) {\n        return;\n      }\n\n      if (!innerRef.current?.contains(activeElement)) {\n        return;\n      }\n\n      if (e.key === nextArrowKey) {\n        const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        next?.focus();\n      }\n\n      if (e.key === prevArrowKey) {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    },\n    [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        role: 'group',\n        ref: useMergedRefs(ref, innerRef),\n        onKeyDown,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","getRTLSafeKey","useMergedRefs","slot","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","onKeyDown","useCallback","e","activeElement","current","contains","key","next","container","focus","prev","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACtG,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,UAAU,EAAEC,SAAS,QAAQ,0BAA0B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,WAAWb,MAAMc,MAAM;IAC7B,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,GAAGT;IAEhC,MAAMU,eAAef,cAAcM,YAAYO;IAC/C,MAAMG,eAAehB,cAAcO,WAAWM;IAE9C,MAAM,EAAEI,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGf;IAEjD,MAAMgB,YAAYrB,MAAMsB,WAAW,CACjC,CAACC;YAMMV;QALL,MAAMW,gBAAgBR,2BAAAA,qCAAAA,eAAgBQ,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF;QAEA,IAAI,GAACX,oBAAAA,SAASY,OAAO,cAAhBZ,wCAAAA,kBAAkBa,QAAQ,CAACF,iBAAgB;YAC9C;QACF;QAEA,IAAID,EAAEI,GAAG,KAAKV,cAAc;YAC1B,MAAMW,OAAOT,kBAAkBK,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FG,iBAAAA,2BAAAA,KAAME,KAAK;QACb;QAEA,IAAIP,EAAEI,GAAG,KAAKT,cAAc;YAC1B,MAAMa,OAAOX,kBAAkBI,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FM,iBAAAA,2BAAAA,KAAMD,KAAK;QACb;IACF,GACA;QAACX;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLc,YAAY;YACVC,MAAM;QACR;QACAA,MAAM7B,KAAK8B,MAAM,CACfjC,sBAAsB,OAAO;YAC3BkC,MAAM;YACNvB,KAAKT,cAAcS,KAAKC;YACxBQ;YACA,GAAGV,KAAK;QACV,IACA;YAAEyB,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useMenuSplitGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n  props: MenuSplitGroupProps,\n  ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n  const innerRef = React.useRef<HTMLElement>();\n  const { dir, targetDocument } = useFluent();\n\n  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const activeElement = targetDocument?.activeElement;\n      if (!activeElement) {\n        return;\n      }\n\n      if (!innerRef.current?.contains(activeElement)) {\n        return;\n      }\n\n      if (e.key === nextArrowKey) {\n        const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        next?.focus();\n      }\n\n      if (e.key === prevArrowKey) {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    },\n    [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        role: 'group',\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n        onKeyDown,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","getRTLSafeKey","useMergedRefs","slot","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","onKeyDown","useCallback","e","activeElement","current","contains","key","next","container","focus","prev","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACzG,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,UAAU,EAAEC,SAAS,QAAQ,0BAA0B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,WAAWb,MAAMc,MAAM;IAC7B,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,GAAGT;IAEhC,MAAMU,eAAef,cAAcM,YAAYO;IAC/C,MAAMG,eAAehB,cAAcO,WAAWM;IAE9C,MAAM,EAAEI,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGf;IAEjD,MAAMgB,YAAYrB,MAAMsB,WAAW,CACjC,CAACC;YAMMV;QALL,MAAMW,gBAAgBR,2BAAAA,qCAAAA,eAAgBQ,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF;QAEA,IAAI,GAACX,oBAAAA,SAASY,OAAO,cAAhBZ,wCAAAA,kBAAkBa,QAAQ,CAACF,iBAAgB;YAC9C;QACF;QAEA,IAAID,EAAEI,GAAG,KAAKV,cAAc;YAC1B,MAAMW,OAAOT,kBAAkBK,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FG,iBAAAA,2BAAAA,KAAME,KAAK;QACb;QAEA,IAAIP,EAAEI,GAAG,KAAKT,cAAc;YAC1B,MAAMa,OAAOX,kBAAkBI,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FM,iBAAAA,2BAAAA,KAAMD,KAAK;QACb;IACF,GACA;QAACX;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLc,YAAY;YACVC,MAAM;QACR;QACAA,MAAM7B,KAAK8B,MAAM,CACfjC,yBAAyB,OAAO;YAC9BkC,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FvB,KAAKT,cAAcS,KAAKC;YACxBQ;YACA,GAAGV,KAAK;QACV,IACA;YAAEyB,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js

@@ -10,17 +10,17 @@ export const menuSplitGroupClassNames = {
 const useStyles = /*#__PURE__*/__styles({
   root: {
     mc9l5x: "f22iagw",
-    Br0byu7: "f2vxgah",
-    Bo1wru1: ["f1om2jlk", "fcyhg04"],
-    Bhkyaub: ["fgqgg70", "fqo1hry"],
-    J9ixe0: ["fh1zedf", "f1auaj6e"],
-    B2knx3v: "f1mf2v5d",
-    Bl7aesu: "fi8lk9b",
-    e82tai: "f1tc32yi",
-    Bnkcs84: "f1kve8m0"
+    ni5quz: "flhoj8d",
+    Irip7g: ["fj7wzln", "fagfnhl"],
+    pgpdld: ["fghv8el", "f1r95qti"],
+    nep80a: ["fog3xzc", "f146oqes"],
+    Btx6110: "f5673lx",
+    B1zw9a1: "f23uflp",
+    B857g0j: "f1sqsvnd",
+    Bx4l464: "f1k81338"
   }
 }, {
-  d: [".f22iagw{display:flex;}", ".f2vxgah>.fui-MenuItem:nth-child(1){flex-grow:1;}", ".f1om2jlk>.fui-MenuItem:nth-child(2){border-top-left-radius:0;}", ".fcyhg04>.fui-MenuItem:nth-child(2){border-top-right-radius:0;}", ".fgqgg70>.fui-MenuItem:nth-child(2){border-bottom-left-radius:0;}", ".fqo1hry>.fui-MenuItem:nth-child(2){border-bottom-right-radius:0;}", ".fh1zedf>.fui-MenuItem:nth-child(2){padding-left:0;}", ".f1auaj6e>.fui-MenuItem:nth-child(2){padding-right:0;}", ".f1mf2v5d>.fui-MenuItem:nth-child(2)::before{content:\"\";}", ".fi8lk9b>.fui-MenuItem:nth-child(2)::before{width:var(--strokeWidthThin);}", ".f1tc32yi>.fui-MenuItem:nth-child(2)::before{height:24px;}", ".f1kve8m0>.fui-MenuItem:nth-child(2)::before{background-color:var(--colorNeutralStroke1);}"]
+  d: [".f22iagw{display:flex;}", ".flhoj8d>.fui-MenuItem:nth-of-type(1){flex-grow:1;}", ".fj7wzln>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}", ".fagfnhl>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}", ".fghv8el>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}", ".f1r95qti>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}", ".fog3xzc>.fui-MenuItem:nth-of-type(2){padding-left:0;}", ".f146oqes>.fui-MenuItem:nth-of-type(2){padding-right:0;}", ".f5673lx>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}", ".f23uflp>.fui-MenuItem:nth-of-type(2)::before{width:var(--strokeWidthThin);}", ".f1sqsvnd>.fui-MenuItem:nth-of-type(2)::before{height:24px;}", ".f1k81338>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--colorNeutralStroke1);}"]
 });
 /**
  * Apply styling to the MenuSplitGroup slots based on the state

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupClassNames","root","useStyles","mc9l5x","Br0byu7","Bo1wru1","Bhkyaub","J9ixe0","B2knx3v","Bl7aesu","e82tai","Bnkcs84","d","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n    root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        [`& > .${menuItemClassNames.root}:nth-child(1)`]: {\n            flexGrow: 1\n        },\n        [`& > .${menuItemClassNames.root}:nth-child(2)`]: {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            paddingLeft: 0,\n            '::before': {\n                content: '\"\"',\n                width: tokens.strokeWidthThin,\n                height: '24px',\n                backgroundColor: tokens.colorNeutralStroke1\n            }\n        }\n    }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAkBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupClassNames","root","useStyles","mc9l5x","ni5quz","Irip7g","pgpdld","nep80a","Btx6110","B1zw9a1","B857g0j","Bx4l464","d","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n    root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n            flexGrow: 1\n        },\n        [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            paddingLeft: 0,\n            '::before': {\n                content: '\"\"',\n                width: tokens.strokeWidthThin,\n                height: '24px',\n                backgroundColor: tokens.colorNeutralStroke1\n            }\n        }\n    }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAkBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/MenuDivider/useMenuDivider.js

@@ -16,11 +16,14 @@ const useMenuDivider_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             role: 'presentation',
             'aria-hidden': true,
             ...props,
-            ref
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref
         }), {
             elementType: 'div'
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuDivider.js"],"sourcesContent":["import { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n/**\n * Given user props, returns state and render function for a MenuDivider.\n */ export const useMenuDivider_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            role: 'presentation',\n            'aria-hidden': true,\n            ...props,\n            ref\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useMenuDivider_unstable","props","ref","components","root","slot","always","getNativeElementProps","role","elementType"],"mappings":";;;;+BAIiBA;;;eAAAA;;;;gCAJ2B;iEACrB;AAGZ,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CC,MAAM;YACN,eAAe;YACf,GAAGP,KAAK;YACRC;QACJ,IAAI;YACAO,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useMenuDivider.js"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n/**\n * Given user props, returns state and render function for a MenuDivider.\n */ export const useMenuDivider_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            role: 'presentation',\n            'aria-hidden': true,\n            ...props,\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useMenuDivider_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"mappings":";;;;+BAIiBA;;;eAAAA;;;;gCAJ8B;iEACxB;AAGZ,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CC,MAAM;YACN,eAAe;YACf,GAAGP,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACT,IAAI;YACAO,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/MenuGroup/useMenuGroup.js

@@ -17,8 +17,11 @@ function useMenuGroup_unstable(props, ref) {
         components: {
             root: 'div'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
-            ref,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             'aria-labelledby': headerId,
             role: 'group',
             ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';\n/**\n * Given user props, returns state and render function for a MenuGroup.\n */ export function useMenuGroup_unstable(props, ref) {\n    const headerId = useId('menu-group');\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            'aria-labelledby': headerId,\n            role: 'group',\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        headerId\n    };\n}\n"],"names":["useMenuGroup_unstable","props","ref","headerId","useId","components","root","slot","always","getNativeElementProps","role","elementType"],"mappings":";;;;+BAIoBA;;;eAAAA;;;;iEAJG;gCAC4B;AAGxC,SAASA,sBAAsBC,KAAK,EAAEC,GAAG;IAChD,MAAMC,WAAWC,IAAAA,qBAAK,EAAC;IACvB,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CP;YACA,mBAAmBC;YACnBO,MAAM;YACN,GAAGT,KAAK;QACZ,IAAI;YACAU,aAAa;QACjB;QACAR;IACJ;AACJ"}
+{"version":3,"sources":["useMenuGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\n/**\n * Given user props, returns state and render function for a MenuGroup.\n */ export function useMenuGroup_unstable(props, ref) {\n    const headerId = useId('menu-group');\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            'aria-labelledby': headerId,\n            role: 'group',\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        headerId\n    };\n}\n"],"names":["useMenuGroup_unstable","props","ref","headerId","useId","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"mappings":";;;;+BAIoBA;;;eAAAA;;;;iEAJG;gCAC+B;AAG3C,SAASA,sBAAsBC,KAAK,EAAEC,GAAG;IAChD,MAAMC,WAAWC,IAAAA,qBAAK,EAAC;IACvB,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FP,KAAKA;YACL,mBAAmBC;YACnBO,MAAM;YACN,GAAGT,KAAK;QACZ,IAAI;YACAU,aAAa;QACjB;QACAR;IACJ;AACJ"}

package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.js

@@ -18,8 +18,11 @@ function useMenuGroupHeader_unstable(props, ref) {
         components: {
             root: 'div'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
-            ref,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             id,
             ...props
         }), {

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGroupHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Given user props, returns state and render function for a MenuGroupHeader.\n */ export function useMenuGroupHeader_unstable(props, ref) {\n    const { headerId: id } = useMenuGroupContext_unstable();\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            id,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useMenuGroupHeader_unstable","props","ref","headerId","id","useMenuGroupContext_unstable","components","root","slot","always","getNativeElementProps","elementType"],"mappings":";;;;+BAKoBA;;;eAAAA;;;;iEALG;kCACsB;gCACD;AAGjC,SAASA,4BAA4BC,KAAK,EAAEC,GAAG;IACtD,MAAM,EAAEC,UAAUC,EAAE,EAAE,GAAGC,IAAAA,8CAA4B;IACrD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CR;YACAE;YACA,GAAGH,KAAK;QACZ,IAAI;YACAU,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useMenuGroupHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Given user props, returns state and render function for a MenuGroupHeader.\n */ export function useMenuGroupHeader_unstable(props, ref) {\n    const { headerId: id } = useMenuGroupContext_unstable();\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            id,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useMenuGroupHeader_unstable","props","ref","headerId","id","useMenuGroupContext_unstable","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAKoBA;;;eAAAA;;;;iEALG;kCACsB;gCACE;AAGpC,SAASA,4BAA4BC,KAAK,EAAEC,GAAG;IACtD,MAAM,EAAEC,UAAUC,EAAE,EAAE,GAAGC,IAAAA,8CAA4B;IACrD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FR,KAAKA;YACLE;YACA,GAAGH,KAAK;QACZ,IAAI;YACAU,aAAa;QACjB;IACJ;AACJ"}

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

@@ -43,7 +43,7 @@ const useMenuItem_unstable = (props, ref)=>{
             content: 'span',
             secondaryContent: 'span'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(as, {
             role: 'menuitem',
             ...props,
             disabled: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItem.js"],"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 { ChevronRightFilled, ChevronRightRegular, ChevronLeftFilled, ChevronLeftRegular, bundleIcon } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n/**\n * Returns the props and state required to render the component\n */ export const useMenuItem_unstable = (props, ref)=>{\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    const { dir } = useFluent();\n    const innerRef = React.useRef(null);\n    const dismissedWithKeyboardRef = React.useRef(false);\n    const state = {\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(getNativeElementProps(as, useARIAButtonProps(as, {\n            role: 'menuitem',\n            ...props,\n            disabled: false,\n            disabledFocusable: disabled,\n            ref: useMergedRefs(ref, innerRef),\n            onKeyDown: useEventCallback((event)=>{\n                var _props_onKeyDown;\n                (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n                if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n                    dismissedWithKeyboardRef.current = true;\n                }\n            }),\n            onMouseEnter: useEventCallback((event)=>{\n                var _innerRef_current, _props_onMouseEnter;\n                (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();\n                (_props_onMouseEnter = props.onMouseEnter) === null || _props_onMouseEnter === void 0 ? void 0 : _props_onMouseEnter.call(props, event);\n            }),\n            onClick: useEventCallback((event)=>{\n                var _props_onClick;\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                (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n            })\n        })), {\n            elementType: 'div'\n        }),\n        icon: slot.optional(props.icon, {\n            renderByDefault: hasIcons,\n            elementType: 'span'\n        }),\n        checkmark: slot.optional(props.checkmark, {\n            renderByDefault: hasCheckmarks,\n            elementType: 'span'\n        }),\n        submenuIndicator: slot.optional(props.submenuIndicator, {\n            renderByDefault: hasSubmenu,\n            defaultProps: {\n                children: dir === 'ltr' ? /*#__PURE__*/ React.createElement(ChevronRightIcon, null) : /*#__PURE__*/ React.createElement(ChevronLeftIcon, null)\n            },\n            elementType: 'span'\n        }),\n        content: slot.optional(props.content, {\n            renderByDefault: !!props.children,\n            defaultProps: {\n                children: props.children\n            },\n            elementType: 'span'\n        }),\n        secondaryContent: slot.optional(props.secondaryContent, {\n            elementType: 'span'\n        })\n    };\n    useCharacterSearch(state, innerRef);\n    return state;\n};\n"],"names":["useMenuItem_unstable","ChevronRightIcon","bundleIcon","ChevronRightFilled","ChevronRightRegular","ChevronLeftIcon","ChevronLeftFilled","ChevronLeftRegular","props","ref","isSubmenuTrigger","useMenuTriggerContext_unstable","persistOnClickContext","useMenuContext_unstable","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","useMenuListContext_unstable","hasCheckmarks","setOpen","dir","useFluent","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","slot","always","getNativeElementProps","useARIAButtonProps","role","disabledFocusable","useMergedRefs","onKeyDown","useEventCallback","event","_props_onKeyDown","call","isDefaultPrevented","key","Space","Enter","current","onMouseEnter","_innerRef_current","_props_onMouseEnter","focus","onClick","_props_onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","createElement","useCharacterSearch"],"mappings":"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"}
+{"version":3,"sources":["useMenuItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, getIntrinsicElementProps, 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 { ChevronRightFilled, ChevronRightRegular, ChevronLeftFilled, ChevronLeftRegular, bundleIcon } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n/**\n * Returns the props and state required to render the component\n */ export const useMenuItem_unstable = (props, ref)=>{\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    const { dir } = useFluent();\n    const innerRef = React.useRef(null);\n    const dismissedWithKeyboardRef = React.useRef(false);\n    const state = {\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(getIntrinsicElementProps(as, useARIAButtonProps(as, {\n            role: 'menuitem',\n            ...props,\n            disabled: false,\n            disabledFocusable: disabled,\n            ref: useMergedRefs(ref, innerRef),\n            onKeyDown: useEventCallback((event)=>{\n                var _props_onKeyDown;\n                (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n                if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n                    dismissedWithKeyboardRef.current = true;\n                }\n            }),\n            onMouseEnter: useEventCallback((event)=>{\n                var _innerRef_current, _props_onMouseEnter;\n                (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.focus();\n                (_props_onMouseEnter = props.onMouseEnter) === null || _props_onMouseEnter === void 0 ? void 0 : _props_onMouseEnter.call(props, event);\n            }),\n            onClick: useEventCallback((event)=>{\n                var _props_onClick;\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                (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n            })\n        })), {\n            elementType: 'div'\n        }),\n        icon: slot.optional(props.icon, {\n            renderByDefault: hasIcons,\n            elementType: 'span'\n        }),\n        checkmark: slot.optional(props.checkmark, {\n            renderByDefault: hasCheckmarks,\n            elementType: 'span'\n        }),\n        submenuIndicator: slot.optional(props.submenuIndicator, {\n            renderByDefault: hasSubmenu,\n            defaultProps: {\n                children: dir === 'ltr' ? /*#__PURE__*/ React.createElement(ChevronRightIcon, null) : /*#__PURE__*/ React.createElement(ChevronLeftIcon, null)\n            },\n            elementType: 'span'\n        }),\n        content: slot.optional(props.content, {\n            renderByDefault: !!props.children,\n            defaultProps: {\n                children: props.children\n            },\n            elementType: 'span'\n        }),\n        secondaryContent: slot.optional(props.secondaryContent, {\n            elementType: 'span'\n        })\n    };\n    useCharacterSearch(state, innerRef);\n    return state;\n};\n"],"names":["useMenuItem_unstable","ChevronRightIcon","bundleIcon","ChevronRightFilled","ChevronRightRegular","ChevronLeftIcon","ChevronLeftFilled","ChevronLeftRegular","props","ref","isSubmenuTrigger","useMenuTriggerContext_unstable","persistOnClickContext","useMenuContext_unstable","context","persistOnItemClick","as","disabled","hasSubmenu","persistOnClick","hasIcons","useMenuListContext_unstable","hasCheckmarks","setOpen","dir","useFluent","innerRef","React","useRef","dismissedWithKeyboardRef","state","components","root","icon","checkmark","submenuIndicator","content","secondaryContent","slot","always","getIntrinsicElementProps","useARIAButtonProps","role","disabledFocusable","useMergedRefs","onKeyDown","useEventCallback","event","_props_onKeyDown","call","isDefaultPrevented","key","Space","Enter","current","onMouseEnter","_innerRef_current","_props_onMouseEnter","focus","onClick","_props_onClick","open","keyboard","bubble","type","elementType","optional","renderByDefault","defaultProps","children","createElement","useCharacterSearch"],"mappings":"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"}

package/lib-commonjs/components/MenuItemLink/useMenuItemLink.js

@@ -21,7 +21,7 @@ const useMenuItemLink_unstable = (props, ref)=>{
             ...baseState.components,
             root: 'a'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('a', {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('a', {
             ref,
             role: 'menuitem',
             ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemLink.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */ export const useMenuItemLink_unstable = (props, ref)=>{\n    // casting because the root slot changes from div to a\n    const baseState = useMenuItem_unstable(props, null);\n    return {\n        ...baseState,\n        components: {\n            ...baseState.components,\n            root: 'a'\n        },\n        root: slot.always(getNativeElementProps('a', {\n            ref,\n            role: 'menuitem',\n            ...props\n        }), {\n            elementType: 'a'\n        })\n    };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","components","root","slot","always","getNativeElementProps","role","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACqB;6BACP;AAS1B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,sDAAsD;IACtD,MAAMC,YAAYC,IAAAA,iCAAoB,EAACH,OAAO;IAC9C,OAAO;QACH,GAAGE,SAAS;QACZE,YAAY;YACR,GAAGF,UAAUE,UAAU;YACvBC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,KAAK;YACzCP;YACAQ,MAAM;YACN,GAAGT,KAAK;QACZ,IAAI;YACAU,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useMenuItemLink.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\n/**\n * Create the state required to render MenuItemLink.\n *\n * The returned state can be modified with hooks such as useMenuItemLinkStyles_unstable,\n * before being passed to renderMenuItemLink_unstable.\n *\n * @param props - props from this instance of MenuItemLink\n * @param ref - reference to root HTMLElement of MenuItemLink\n */ export const useMenuItemLink_unstable = (props, ref)=>{\n    // casting because the root slot changes from div to a\n    const baseState = useMenuItem_unstable(props, null);\n    return {\n        ...baseState,\n        components: {\n            ...baseState.components,\n            root: 'a'\n        },\n        root: slot.always(getIntrinsicElementProps('a', {\n            ref,\n            role: 'menuitem',\n            ...props\n        }), {\n            elementType: 'a'\n        })\n    };\n};\n"],"names":["useMenuItemLink_unstable","props","ref","baseState","useMenuItem_unstable","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACwB;6BACV;AAS1B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,sDAAsD;IACtD,MAAMC,YAAYC,IAAAA,iCAAoB,EAACH,OAAO;IAC9C,OAAO;QACH,GAAGE,SAAS;QACZE,YAAY;YACR,GAAGF,UAAUE,UAAU;YACvBC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,KAAK;YAC5CP;YACAQ,MAAM;YACN,GAAGT,KAAK;QACZ,IAAI;YACAU,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/MenuList/useMenuList.js

@@ -115,7 +115,10 @@ const useMenuList_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
             role: 'menu',
             'aria-labelledby': menuContext.triggerId,

package/lib-commonjs/components/MenuList/useMenuList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuList.js"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\n/**\n * Returns the props and state required to render the component\n */ export const useMenuList_unstable = (props, ref)=>{\n    const { findAllFocusable } = useFocusFinders();\n    const menuContext = useMenuContextSelectors();\n    const hasMenuContext = useHasParentContext(MenuContext);\n    const focusAttributes = useArrowNavigationGroup({\n        circular: true,\n        ignoreDefaultKeydown: {\n            Tab: hasMenuContext\n        }\n    });\n    if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n        // TODO throw warnings in development safely\n        // eslint-disable-next-line no-console\n        console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n    }\n    const innerRef = React.useRef(null);\n    const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{\n        // TODO use some kind of children registration to reduce dependency on DOM roles\n        const acceptedRoles = [\n            'menuitem',\n            'menuitemcheckbox',\n            'menuitemradio'\n        ];\n        if (!innerRef.current) {\n            return;\n        }\n        const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);\n        let startIndex = menuItems.indexOf(itemEl) + 1;\n        if (startIndex === menuItems.length) {\n            startIndex = 0;\n        }\n        const firstChars = menuItems.map((menuItem)=>{\n            var _menuItem_textContent;\n            return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();\n        });\n        const char = e.key.toLowerCase();\n        const getIndexFirstChars = (start, firstChar)=>{\n            for(let i = start; i < firstChars.length; i++){\n                if (char === firstChars[i]) {\n                    return i;\n                }\n            }\n            return -1;\n        };\n        // Check remaining slots in the menu\n        let index = getIndexFirstChars(startIndex, char);\n        // If not found in remaining slots, check from beginning\n        if (index === -1) {\n            index = getIndexFirstChars(0, char);\n        }\n        // If match was found...\n        if (index > -1) {\n            menuItems[index].focus();\n        }\n    }, [\n        findAllFocusable\n    ]);\n    var _props_checkedValues;\n    const [checkedValues, setCheckedValues] = useControllableState({\n        state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,\n        defaultState: props.defaultCheckedValues,\n        initialState: {}\n    });\n    var _props_onCheckedValueChange;\n    const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;\n    const toggleCheckbox = useEventCallback((e, name, value, checked)=>{\n        const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n        const newCheckedItems = [\n            ...checkedItems\n        ];\n        if (checked) {\n            newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n            newCheckedItems.push(value);\n        }\n        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n            name,\n            checkedItems: newCheckedItems\n        });\n        setCheckedValues((s)=>({\n                ...s,\n                [name]: newCheckedItems\n            }));\n    });\n    const selectRadio = useEventCallback((e, name, value)=>{\n        const newCheckedItems = [\n            value\n        ];\n        setCheckedValues((s)=>({\n                ...s,\n                [name]: newCheckedItems\n            }));\n        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n            name,\n            checkedItems: newCheckedItems\n        });\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref: useMergedRefs(ref, innerRef),\n            role: 'menu',\n            'aria-labelledby': menuContext.triggerId,\n            ...focusAttributes,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        hasIcons: menuContext.hasIcons || false,\n        hasCheckmarks: menuContext.hasCheckmarks || false,\n        checkedValues,\n        hasMenuContext,\n        setFocusByFirstCharacter,\n        selectRadio,\n        toggleCheckbox\n    };\n};\n/**\n * Adds some sugar to fetching multiple context selector values\n */ const useMenuContextSelectors = ()=>{\n    const checkedValues = useMenuContext_unstable((context)=>context.checkedValues);\n    const onCheckedValueChange = useMenuContext_unstable((context)=>context.onCheckedValueChange);\n    const triggerId = useMenuContext_unstable((context)=>context.triggerId);\n    const hasIcons = useMenuContext_unstable((context)=>context.hasIcons);\n    const hasCheckmarks = useMenuContext_unstable((context)=>context.hasCheckmarks);\n    return {\n        checkedValues,\n        onCheckedValueChange,\n        triggerId,\n        hasIcons,\n        hasCheckmarks\n    };\n};\n/**\n * Helper function to detect if props and MenuContext values are both used\n */ const usingPropsAndMenuContext = (props, contextValue, hasMenuContext)=>{\n    let isUsingPropsAndContext = false;\n    for(const val in contextValue){\n        if (props[val]) {\n            isUsingPropsAndContext = true;\n        }\n    }\n    return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["useMenuList_unstable","props","ref","findAllFocusable","useFocusFinders","menuContext","useMenuContextSelectors","hasMenuContext","useHasParentContext","MenuContext","focusAttributes","useArrowNavigationGroup","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","useControllableState","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","useEventCallback","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","slot","always","getNativeElementProps","useMergedRefs","role","triggerId","elementType","hasIcons","hasCheckmarks","useMenuContext_unstable","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
+{"version":3,"sources":["useMenuList.js"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\n/**\n * Returns the props and state required to render the component\n */ export const useMenuList_unstable = (props, ref)=>{\n    const { findAllFocusable } = useFocusFinders();\n    const menuContext = useMenuContextSelectors();\n    const hasMenuContext = useHasParentContext(MenuContext);\n    const focusAttributes = useArrowNavigationGroup({\n        circular: true,\n        ignoreDefaultKeydown: {\n            Tab: hasMenuContext\n        }\n    });\n    if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n        // TODO throw warnings in development safely\n        // eslint-disable-next-line no-console\n        console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n    }\n    const innerRef = React.useRef(null);\n    const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{\n        // TODO use some kind of children registration to reduce dependency on DOM roles\n        const acceptedRoles = [\n            'menuitem',\n            'menuitemcheckbox',\n            'menuitemradio'\n        ];\n        if (!innerRef.current) {\n            return;\n        }\n        const menuItems = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);\n        let startIndex = menuItems.indexOf(itemEl) + 1;\n        if (startIndex === menuItems.length) {\n            startIndex = 0;\n        }\n        const firstChars = menuItems.map((menuItem)=>{\n            var _menuItem_textContent;\n            return (_menuItem_textContent = menuItem.textContent) === null || _menuItem_textContent === void 0 ? void 0 : _menuItem_textContent.charAt(0).toLowerCase();\n        });\n        const char = e.key.toLowerCase();\n        const getIndexFirstChars = (start, firstChar)=>{\n            for(let i = start; i < firstChars.length; i++){\n                if (char === firstChars[i]) {\n                    return i;\n                }\n            }\n            return -1;\n        };\n        // Check remaining slots in the menu\n        let index = getIndexFirstChars(startIndex, char);\n        // If not found in remaining slots, check from beginning\n        if (index === -1) {\n            index = getIndexFirstChars(0, char);\n        }\n        // If match was found...\n        if (index > -1) {\n            menuItems[index].focus();\n        }\n    }, [\n        findAllFocusable\n    ]);\n    var _props_checkedValues;\n    const [checkedValues, setCheckedValues] = useControllableState({\n        state: (_props_checkedValues = props.checkedValues) !== null && _props_checkedValues !== void 0 ? _props_checkedValues : hasMenuContext ? menuContext.checkedValues : undefined,\n        defaultState: props.defaultCheckedValues,\n        initialState: {}\n    });\n    var _props_onCheckedValueChange;\n    const handleCheckedValueChange = (_props_onCheckedValueChange = props.onCheckedValueChange) !== null && _props_onCheckedValueChange !== void 0 ? _props_onCheckedValueChange : hasMenuContext ? menuContext.onCheckedValueChange : undefined;\n    const toggleCheckbox = useEventCallback((e, name, value, checked)=>{\n        const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n        const newCheckedItems = [\n            ...checkedItems\n        ];\n        if (checked) {\n            newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n            newCheckedItems.push(value);\n        }\n        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n            name,\n            checkedItems: newCheckedItems\n        });\n        setCheckedValues((s)=>({\n                ...s,\n                [name]: newCheckedItems\n            }));\n    });\n    const selectRadio = useEventCallback((e, name, value)=>{\n        const newCheckedItems = [\n            value\n        ];\n        setCheckedValues((s)=>({\n                ...s,\n                [name]: newCheckedItems\n            }));\n        handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {\n            name,\n            checkedItems: newCheckedItems\n        });\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, innerRef),\n            role: 'menu',\n            'aria-labelledby': menuContext.triggerId,\n            ...focusAttributes,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        hasIcons: menuContext.hasIcons || false,\n        hasCheckmarks: menuContext.hasCheckmarks || false,\n        checkedValues,\n        hasMenuContext,\n        setFocusByFirstCharacter,\n        selectRadio,\n        toggleCheckbox\n    };\n};\n/**\n * Adds some sugar to fetching multiple context selector values\n */ const useMenuContextSelectors = ()=>{\n    const checkedValues = useMenuContext_unstable((context)=>context.checkedValues);\n    const onCheckedValueChange = useMenuContext_unstable((context)=>context.onCheckedValueChange);\n    const triggerId = useMenuContext_unstable((context)=>context.triggerId);\n    const hasIcons = useMenuContext_unstable((context)=>context.hasIcons);\n    const hasCheckmarks = useMenuContext_unstable((context)=>context.hasCheckmarks);\n    return {\n        checkedValues,\n        onCheckedValueChange,\n        triggerId,\n        hasIcons,\n        hasCheckmarks\n    };\n};\n/**\n * Helper function to detect if props and MenuContext values are both used\n */ const usingPropsAndMenuContext = (props, contextValue, hasMenuContext)=>{\n    let isUsingPropsAndContext = false;\n    for(const val in contextValue){\n        if (props[val]) {\n            isUsingPropsAndContext = true;\n        }\n    }\n    return hasMenuContext && isUsingPropsAndContext;\n};\n"],"names":["useMenuList_unstable","props","ref","findAllFocusable","useFocusFinders","menuContext","useMenuContextSelectors","hasMenuContext","useHasParentContext","MenuContext","focusAttributes","useArrowNavigationGroup","circular","ignoreDefaultKeydown","Tab","usingPropsAndMenuContext","console","warn","innerRef","React","useRef","setFocusByFirstCharacter","useCallback","e","itemEl","acceptedRoles","current","menuItems","el","hasAttribute","indexOf","getAttribute","startIndex","length","firstChars","map","menuItem","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","useControllableState","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","handleCheckedValueChange","onCheckedValueChange","toggleCheckbox","useEventCallback","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","triggerId","elementType","hasIcons","hasCheckmarks","useMenuContext_unstable","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}

package/lib-commonjs/components/MenuPopover/useMenuPopover.js

@@ -56,10 +56,13 @@ const useMenuPopover_unstable = (props, ref)=>{
     var _useMenuContext_unstable;
     const inline = (_useMenuContext_unstable = (0, _menuContext.useMenuContext_unstable)((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;
     const mountNode = (0, _menuContext.useMenuContext_unstable)((context)=>context.mountNode);
-    const rootProps = _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+    const rootProps = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
         role: 'presentation',
         ...restoreFocusSourceAttributes,
         ...props,
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
         ref: (0, _reactutilities.useMergedRefs)(ref, popoverRef, mouseOverListenerCallbackRef)
     }), {
         elementType: 'div'

package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */ export const useMenuPopover_unstable = (props, ref)=>{\n    const popoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);\n    const setOpen = useMenuContext_unstable((context)=>context.setOpen);\n    const open = useMenuContext_unstable((context)=>context.open);\n    const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);\n    const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);\n    const isSubmenu = useIsSubmenu();\n    const canDispatchCustomEventRef = React.useRef(true);\n    const throttleDispatchTimerRef = React.useRef(0);\n    const restoreFocusSourceAttributes = useRestoreFocusSource();\n    const { dir } = useFluent();\n    const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n    // use DOM listener since react events propagate up the react tree\n    // no need to do `contains` logic as menus are all positioned in different portals\n    const mouseOverListenerCallbackRef = React.useCallback((node)=>{\n        if (node) {\n            // Dispatches the custom menu mouse enter event with throttling\n            // Needs to trigger on mouseover to support keyboard + mouse together\n            // i.e. keyboard opens submenus while cursor is still on the parent\n            node.addEventListener('mouseover', (e)=>{\n                if (canDispatchCustomEventRef.current) {\n                    canDispatchCustomEventRef.current = false;\n                    dispatchMenuEnterEvent(popoverRef.current, e);\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore #16889 Node setTimeout type leaking\n                    throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);\n                }\n            });\n        }\n    }, [\n        popoverRef,\n        throttleDispatchTimerRef\n    ]);\n    React.useEffect(()=>{\n        ()=>clearTimeout(throttleDispatchTimerRef.current);\n    }, []);\n    var _useMenuContext_unstable;\n    const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;\n    const mountNode = useMenuContext_unstable((context)=>context.mountNode);\n    const rootProps = slot.always(getNativeElementProps('div', {\n        role: 'presentation',\n        ...restoreFocusSourceAttributes,\n        ...props,\n        ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)\n    }), {\n        elementType: 'div'\n    });\n    const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n    rootProps.onMouseEnter = useEventCallback((event)=>{\n        if (openOnHover) {\n            setOpen(event, {\n                open: true,\n                keyboard: false,\n                type: 'menuPopoverMouseEnter',\n                event\n            });\n        }\n        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n    });\n    rootProps.onKeyDown = useEventCallback((event)=>{\n        const key = event.key;\n        if (key === Escape || isSubmenu && key === CloseArrowKey) {\n            var _popoverRef_current;\n            if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target))) {\n                setOpen(event, {\n                    open: false,\n                    keyboard: true,\n                    type: 'menuPopoverKeyDown',\n                    event\n                });\n                // stop propagation to avoid conflicting with other elements that listen for `Escape`\n                // e,g: Dialog, Popover and Tooltip\n                event.stopPropagation();\n            }\n        }\n        if (key === Tab) {\n            setOpen(event, {\n                open: false,\n                keyboard: true,\n                type: 'menuPopoverKeyDown',\n                event\n            });\n            if (!isSubmenu) {\n                var _triggerRef_current;\n                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n            }\n        }\n        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n    });\n    return {\n        inline,\n        mountNode,\n        components: {\n            root: 'div'\n        },\n        root: rootProps\n    };\n};\n"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","useRestoreFocusSource","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","_useMenuContext_unstable","inline","mountNode","rootProps","slot","always","getNativeElementProps","role","useMergedRefs","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","stopPropagation","Tab","_triggerRef_current","focus","components","root"],"mappings":";;;;+BAgBiBA;;;eAAAA;;;;iEAhBM;8BAC4B;gCAC0B;6BACrC;uBACD;qCACS;8BACnB;8BACS;AAS3B,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAMC,aAAaC,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQC,cAAc;IAC5E,MAAMC,UAAUH,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQE,OAAO;IAClE,MAAMC,OAAOJ,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQG,IAAI;IAC5D,MAAMC,cAAcL,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQI,WAAW;IAC1E,MAAMC,aAAaN,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQK,UAAU;IACxE,MAAMC,YAAYC,IAAAA,0BAAY;IAC9B,MAAMC,4BAA4BC,OAAMC,MAAM,CAAC;IAC/C,MAAMC,2BAA2BF,OAAMC,MAAM,CAAC;IAC9C,MAAME,+BAA+BC,IAAAA,mCAAqB;IAC1D,MAAM,EAAEC,GAAG,EAAE,GAAGC,IAAAA,uCAAS;IACzB,MAAMC,gBAAgBF,QAAQ,QAAQG,uBAAS,GAAGC,wBAAU;IAC5D,kEAAkE;IAClE,kFAAkF;IAClF,MAAMC,+BAA+BV,OAAMW,WAAW,CAAC,CAACC;QACpD,IAAIA,MAAM;YACN,+DAA+D;YAC/D,qEAAqE;YACrE,mEAAmE;YACnEA,KAAKC,gBAAgB,CAAC,aAAa,CAACC;gBAChC,IAAIf,0BAA0BgB,OAAO,EAAE;oBACnChB,0BAA0BgB,OAAO,GAAG;oBACpCC,IAAAA,6BAAsB,EAAC3B,WAAW0B,OAAO,EAAED;oBAC3C,6DAA6D;oBAC7D,iDAAiD;oBACjDZ,yBAAyBa,OAAO,GAAGE,WAAW,IAAIlB,0BAA0BgB,OAAO,GAAG,MAAM;gBAChG;YACJ;QACJ;IACJ,GAAG;QACC1B;QACAa;KACH;IACDF,OAAMkB,SAAS,CAAC;QACZ,IAAIC,aAAajB,yBAAyBa,OAAO;IACrD,GAAG,EAAE;IACL,IAAIK;IACJ,MAAMC,SAAS,AAACD,CAAAA,2BAA2B9B,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQ8B,MAAM,CAAA,MAAO,QAAQD,6BAA6B,KAAK,IAAIA,2BAA2B;IAC5K,MAAME,YAAYhC,IAAAA,oCAAuB,EAAC,CAACC,UAAUA,QAAQ+B,SAAS;IACtE,MAAMC,YAAYC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;QACvDC,MAAM;QACN,GAAGxB,4BAA4B;QAC/B,GAAGhB,KAAK;QACRC,KAAKwC,IAAAA,6BAAa,EAACxC,KAAKC,YAAYqB;IACxC,IAAI;QACAmB,aAAa;IACjB;IACA,MAAM,EAAEC,cAAcC,oBAAoB,EAAEC,WAAWC,iBAAiB,EAAE,GAAGV;IAC7EA,UAAUO,YAAY,GAAGI,IAAAA,gCAAgB,EAAC,CAACC;QACvC,IAAIxC,aAAa;YACbF,QAAQ0C,OAAO;gBACXzC,MAAM;gBACN0C,UAAU;gBACVC,MAAM;gBACNF;YACJ;QACJ;QACAJ,yBAAyB,QAAQA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBI;IACrG;IACAZ,UAAUS,SAAS,GAAGE,IAAAA,gCAAgB,EAAC,CAACC;QACpC,MAAMG,MAAMH,MAAMG,GAAG;QACrB,IAAIA,QAAQC,oBAAM,IAAI1C,aAAayC,QAAQ/B,eAAe;YACtD,IAAIiC;YACJ,IAAI9C,QAAS,CAAA,AAAC8C,CAAAA,sBAAsBnD,WAAW0B,OAAO,AAAD,MAAO,QAAQyB,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,QAAQ,CAACN,MAAMO,MAAM,CAAA,GAAI;gBACvJjD,QAAQ0C,OAAO;oBACXzC,MAAM;oBACN0C,UAAU;oBACVC,MAAM;oBACNF;gBACJ;gBACA,qFAAqF;gBACrF,mCAAmC;gBACnCA,MAAMQ,eAAe;YACzB;QACJ;QACA,IAAIL,QAAQM,iBAAG,EAAE;YACbnD,QAAQ0C,OAAO;gBACXzC,MAAM;gBACN0C,UAAU;gBACVC,MAAM;gBACNF;YACJ;YACA,IAAI,CAACtC,WAAW;gBACZ,IAAIgD;gBACHA,CAAAA,sBAAsBjD,WAAWmB,OAAO,AAAD,MAAO,QAAQ8B,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,KAAK;YAC9H;QACJ;QACAb,sBAAsB,QAAQA,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBE;IAC5F;IACA,OAAO;QACHd;QACAC;QACAyB,YAAY;YACRC,MAAM;QACV;QACAA,MAAMzB;IACV;AACJ"}
+{"version":3,"sources":["useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useRestoreFocusSource } from '@fluentui/react-tabster';\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */ export const useMenuPopover_unstable = (props, ref)=>{\n    const popoverRef = useMenuContext_unstable((context)=>context.menuPopoverRef);\n    const setOpen = useMenuContext_unstable((context)=>context.setOpen);\n    const open = useMenuContext_unstable((context)=>context.open);\n    const openOnHover = useMenuContext_unstable((context)=>context.openOnHover);\n    const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);\n    const isSubmenu = useIsSubmenu();\n    const canDispatchCustomEventRef = React.useRef(true);\n    const throttleDispatchTimerRef = React.useRef(0);\n    const restoreFocusSourceAttributes = useRestoreFocusSource();\n    const { dir } = useFluent();\n    const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n    // use DOM listener since react events propagate up the react tree\n    // no need to do `contains` logic as menus are all positioned in different portals\n    const mouseOverListenerCallbackRef = React.useCallback((node)=>{\n        if (node) {\n            // Dispatches the custom menu mouse enter event with throttling\n            // Needs to trigger on mouseover to support keyboard + mouse together\n            // i.e. keyboard opens submenus while cursor is still on the parent\n            node.addEventListener('mouseover', (e)=>{\n                if (canDispatchCustomEventRef.current) {\n                    canDispatchCustomEventRef.current = false;\n                    dispatchMenuEnterEvent(popoverRef.current, e);\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore #16889 Node setTimeout type leaking\n                    throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);\n                }\n            });\n        }\n    }, [\n        popoverRef,\n        throttleDispatchTimerRef\n    ]);\n    React.useEffect(()=>{\n        ()=>clearTimeout(throttleDispatchTimerRef.current);\n    }, []);\n    var _useMenuContext_unstable;\n    const inline = (_useMenuContext_unstable = useMenuContext_unstable((context)=>context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;\n    const mountNode = useMenuContext_unstable((context)=>context.mountNode);\n    const rootProps = slot.always(getIntrinsicElementProps('div', {\n        role: 'presentation',\n        ...restoreFocusSourceAttributes,\n        ...props,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)\n    }), {\n        elementType: 'div'\n    });\n    const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n    rootProps.onMouseEnter = useEventCallback((event)=>{\n        if (openOnHover) {\n            setOpen(event, {\n                open: true,\n                keyboard: false,\n                type: 'menuPopoverMouseEnter',\n                event\n            });\n        }\n        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n    });\n    rootProps.onKeyDown = useEventCallback((event)=>{\n        const key = event.key;\n        if (key === Escape || isSubmenu && key === CloseArrowKey) {\n            var _popoverRef_current;\n            if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target))) {\n                setOpen(event, {\n                    open: false,\n                    keyboard: true,\n                    type: 'menuPopoverKeyDown',\n                    event\n                });\n                // stop propagation to avoid conflicting with other elements that listen for `Escape`\n                // e,g: Dialog, Popover and Tooltip\n                event.stopPropagation();\n            }\n        }\n        if (key === Tab) {\n            setOpen(event, {\n                open: false,\n                keyboard: true,\n                type: 'menuPopoverKeyDown',\n                event\n            });\n            if (!isSubmenu) {\n                var _triggerRef_current;\n                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n            }\n        }\n        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n    });\n    return {\n        inline,\n        mountNode,\n        components: {\n            root: 'div'\n        },\n        root: rootProps\n    };\n};\n"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","triggerRef","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","restoreFocusSourceAttributes","useRestoreFocusSource","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","_useMenuContext_unstable","inline","mountNode","rootProps","slot","always","getIntrinsicElementProps","role","useMergedRefs","elementType","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","stopPropagation","Tab","_triggerRef_current","focus","components","root"],"mappings":"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"}

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -52,8 +52,11 @@ const useMenuSplitGroup_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             role: 'group',
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: (0, _reactutilities.useMergedRefs)(ref, innerRef),
             onKeyDown,
             ...props

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuSplitGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */ export const useMenuSplitGroup_unstable = (props, ref)=>{\n    const innerRef = React.useRef();\n    const { dir, targetDocument } = useFluent();\n    const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n    const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n    const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n    const onKeyDown = React.useCallback((e)=>{\n        var _innerRef_current;\n        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n        if (!activeElement) {\n            return;\n        }\n        if (!((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement))) {\n            return;\n        }\n        if (e.key === nextArrowKey) {\n            const next = findNextFocusable(activeElement, {\n                container: innerRef.current\n            });\n            next === null || next === void 0 ? void 0 : next.focus();\n        }\n        if (e.key === prevArrowKey) {\n            const prev = findPrevFocusable(activeElement, {\n                container: innerRef.current\n            });\n            prev === null || prev === void 0 ? void 0 : prev.focus();\n        }\n    }, [\n        findNextFocusable,\n        findPrevFocusable,\n        targetDocument,\n        nextArrowKey,\n        prevArrowKey\n    ]);\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            role: 'group',\n            ref: useMergedRefs(ref, innerRef),\n            onKeyDown,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useMenuSplitGroup_unstable","props","ref","innerRef","React","useRef","dir","targetDocument","useFluent","nextArrowKey","getRTLSafeKey","ArrowRight","prevArrowKey","ArrowLeft","findNextFocusable","findPrevFocusable","useFocusFinders","onKeyDown","useCallback","e","_innerRef_current","activeElement","current","contains","key","next","container","focus","prev","components","root","slot","always","getNativeElementProps","role","useMergedRefs","elementType"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACmD;8BAC1C;qCACgB;8BACV;AAS3B,MAAMA,6BAA6B,CAACC,OAAOC;IAClD,MAAMC,WAAWC,OAAMC,MAAM;IAC7B,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACzC,MAAMC,eAAeC,IAAAA,6BAAa,EAACC,wBAAU,EAAEL;IAC/C,MAAMM,eAAeF,IAAAA,6BAAa,EAACG,uBAAS,EAAEP;IAC9C,MAAM,EAAEQ,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,6BAAe;IAChE,MAAMC,YAAYb,OAAMc,WAAW,CAAC,CAACC;QACjC,IAAIC;QACJ,MAAMC,gBAAgBd,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAec,aAAa;QAClH,IAAI,CAACA,eAAe;YAChB;QACJ;QACA,IAAI,CAAE,CAAA,AAACD,CAAAA,oBAAoBjB,SAASmB,OAAO,AAAD,MAAO,QAAQF,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBG,QAAQ,CAACF,cAAa,GAAI;YACzI;QACJ;QACA,IAAIF,EAAEK,GAAG,KAAKf,cAAc;YACxB,MAAMgB,OAAOX,kBAAkBO,eAAe;gBAC1CK,WAAWvB,SAASmB,OAAO;YAC/B;YACAG,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKE,KAAK;QAC1D;QACA,IAAIR,EAAEK,GAAG,KAAKZ,cAAc;YACxB,MAAMgB,OAAOb,kBAAkBM,eAAe;gBAC1CK,WAAWvB,SAASmB,OAAO;YAC/B;YACAM,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKD,KAAK;QAC1D;IACJ,GAAG;QACCb;QACAC;QACAR;QACAE;QACAG;KACH;IACD,OAAO;QACHiB,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CC,MAAM;YACNhC,KAAKiC,IAAAA,6BAAa,EAACjC,KAAKC;YACxBc;YACA,GAAGhB,KAAK;QACZ,IAAI;YACAmC,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useMenuSplitGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */ export const useMenuSplitGroup_unstable = (props, ref)=>{\n    const innerRef = React.useRef();\n    const { dir, targetDocument } = useFluent();\n    const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n    const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n    const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n    const onKeyDown = React.useCallback((e)=>{\n        var _innerRef_current;\n        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n        if (!activeElement) {\n            return;\n        }\n        if (!((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement))) {\n            return;\n        }\n        if (e.key === nextArrowKey) {\n            const next = findNextFocusable(activeElement, {\n                container: innerRef.current\n            });\n            next === null || next === void 0 ? void 0 : next.focus();\n        }\n        if (e.key === prevArrowKey) {\n            const prev = findPrevFocusable(activeElement, {\n                container: innerRef.current\n            });\n            prev === null || prev === void 0 ? void 0 : prev.focus();\n        }\n    }, [\n        findNextFocusable,\n        findPrevFocusable,\n        targetDocument,\n        nextArrowKey,\n        prevArrowKey\n    ]);\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            role: 'group',\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, innerRef),\n            onKeyDown,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useMenuSplitGroup_unstable","props","ref","innerRef","React","useRef","dir","targetDocument","useFluent","nextArrowKey","getRTLSafeKey","ArrowRight","prevArrowKey","ArrowLeft","findNextFocusable","findPrevFocusable","useFocusFinders","onKeyDown","useCallback","e","_innerRef_current","activeElement","current","contains","key","next","container","focus","prev","components","root","slot","always","getIntrinsicElementProps","role","useMergedRefs","elementType"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACsD;8BAC7C;qCACgB;8BACV;AAS3B,MAAMA,6BAA6B,CAACC,OAAOC;IAClD,MAAMC,WAAWC,OAAMC,MAAM;IAC7B,MAAM,EAAEC,GAAG,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACzC,MAAMC,eAAeC,IAAAA,6BAAa,EAACC,wBAAU,EAAEL;IAC/C,MAAMM,eAAeF,IAAAA,6BAAa,EAACG,uBAAS,EAAEP;IAC9C,MAAM,EAAEQ,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,6BAAe;IAChE,MAAMC,YAAYb,OAAMc,WAAW,CAAC,CAACC;QACjC,IAAIC;QACJ,MAAMC,gBAAgBd,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAec,aAAa;QAClH,IAAI,CAACA,eAAe;YAChB;QACJ;QACA,IAAI,CAAE,CAAA,AAACD,CAAAA,oBAAoBjB,SAASmB,OAAO,AAAD,MAAO,QAAQF,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBG,QAAQ,CAACF,cAAa,GAAI;YACzI;QACJ;QACA,IAAIF,EAAEK,GAAG,KAAKf,cAAc;YACxB,MAAMgB,OAAOX,kBAAkBO,eAAe;gBAC1CK,WAAWvB,SAASmB,OAAO;YAC/B;YACAG,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKE,KAAK;QAC1D;QACA,IAAIR,EAAEK,GAAG,KAAKZ,cAAc;YACxB,MAAMgB,OAAOb,kBAAkBM,eAAe;gBAC1CK,WAAWvB,SAASmB,OAAO;YAC/B;YACAM,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAKD,KAAK;QAC1D;IACJ,GAAG;QACCb;QACAC;QACAR;QACAE;QACAG;KACH;IACD,OAAO;QACHiB,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CC,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FhC,KAAKiC,IAAAA,6BAAa,EAACjC,KAAKC;YACxBc;YACA,GAAGhB,KAAK;QACZ,IAAI;YACAmC,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js

@@ -25,38 +25,38 @@ const menuSplitGroupClassNames = {
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
         mc9l5x: "f22iagw",
-        Br0byu7: "f2vxgah",
-        Bo1wru1: [
-            "f1om2jlk",
-            "fcyhg04"
+        ni5quz: "flhoj8d",
+        Irip7g: [
+            "fj7wzln",
+            "fagfnhl"
         ],
-        Bhkyaub: [
-            "fgqgg70",
-            "fqo1hry"
+        pgpdld: [
+            "fghv8el",
+            "f1r95qti"
         ],
-        J9ixe0: [
-            "fh1zedf",
-            "f1auaj6e"
+        nep80a: [
+            "fog3xzc",
+            "f146oqes"
         ],
-        B2knx3v: "f1mf2v5d",
-        Bl7aesu: "fi8lk9b",
-        e82tai: "f1tc32yi",
-        Bnkcs84: "f1kve8m0"
+        Btx6110: "f5673lx",
+        B1zw9a1: "f23uflp",
+        B857g0j: "f1sqsvnd",
+        Bx4l464: "f1k81338"
     }
 }, {
     d: [
         ".f22iagw{display:flex;}",
-        ".f2vxgah>.fui-MenuItem:nth-child(1){flex-grow:1;}",
-        ".f1om2jlk>.fui-MenuItem:nth-child(2){border-top-left-radius:0;}",
-        ".fcyhg04>.fui-MenuItem:nth-child(2){border-top-right-radius:0;}",
-        ".fgqgg70>.fui-MenuItem:nth-child(2){border-bottom-left-radius:0;}",
-        ".fqo1hry>.fui-MenuItem:nth-child(2){border-bottom-right-radius:0;}",
-        ".fh1zedf>.fui-MenuItem:nth-child(2){padding-left:0;}",
-        ".f1auaj6e>.fui-MenuItem:nth-child(2){padding-right:0;}",
-        ".f1mf2v5d>.fui-MenuItem:nth-child(2)::before{content:\"\";}",
-        ".fi8lk9b>.fui-MenuItem:nth-child(2)::before{width:var(--strokeWidthThin);}",
-        ".f1tc32yi>.fui-MenuItem:nth-child(2)::before{height:24px;}",
-        ".f1kve8m0>.fui-MenuItem:nth-child(2)::before{background-color:var(--colorNeutralStroke1);}"
+        ".flhoj8d>.fui-MenuItem:nth-of-type(1){flex-grow:1;}",
+        ".fj7wzln>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}",
+        ".fagfnhl>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}",
+        ".fghv8el>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}",
+        ".f1r95qti>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}",
+        ".fog3xzc>.fui-MenuItem:nth-of-type(2){padding-left:0;}",
+        ".f146oqes>.fui-MenuItem:nth-of-type(2){padding-right:0;}",
+        ".f5673lx>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}",
+        ".f23uflp>.fui-MenuItem:nth-of-type(2)::before{width:var(--strokeWidthThin);}",
+        ".f1sqsvnd>.fui-MenuItem:nth-of-type(2)::before{height:24px;}",
+        ".f1k81338>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--colorNeutralStroke1);}"
     ]
 });
 const useMenuSplitGroupStyles_unstable = (state)=>{

package/lib-commonjs/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n  root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Br0byu7: \"f2vxgah\",\n    Bo1wru1: [\"f1om2jlk\", \"fcyhg04\"],\n    Bhkyaub: [\"fgqgg70\", \"fqo1hry\"],\n    J9ixe0: [\"fh1zedf\", \"f1auaj6e\"],\n    B2knx3v: \"f1mf2v5d\",\n    Bl7aesu: \"fi8lk9b\",\n    e82tai: \"f1tc32yi\",\n    Bnkcs84: \"f1kve8m0\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f2vxgah>.fui-MenuItem:nth-child(1){flex-grow:1;}\", \".f1om2jlk>.fui-MenuItem:nth-child(2){border-top-left-radius:0;}\", \".fcyhg04>.fui-MenuItem:nth-child(2){border-top-right-radius:0;}\", \".fgqgg70>.fui-MenuItem:nth-child(2){border-bottom-left-radius:0;}\", \".fqo1hry>.fui-MenuItem:nth-child(2){border-bottom-right-radius:0;}\", \".fh1zedf>.fui-MenuItem:nth-child(2){padding-left:0;}\", \".f1auaj6e>.fui-MenuItem:nth-child(2){padding-right:0;}\", \".f1mf2v5d>.fui-MenuItem:nth-child(2)::before{content:\\\"\\\";}\", \".fi8lk9b>.fui-MenuItem:nth-child(2)::before{width:var(--strokeWidthThin);}\", \".f1tc32yi>.fui-MenuItem:nth-child(2)::before{height:24px;}\", \".f1kve8m0>.fui-MenuItem:nth-child(2)::before{background-color:var(--colorNeutralStroke1);}\"]\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useMenuSplitGroupStyles.styles.js.map"],"names":["menuSplitGroupClassNames","useMenuSplitGroupStyles_unstable","root","useStyles","__styles","mc9l5x","Br0byu7","Bo1wru1","Bhkyaub","J9ixe0","B2knx3v","Bl7aesu","e82tai","Bnkcs84","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IAwBAC,gCAAgC;eAAhCA;;;uBA3B0B;AAGhC,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAW;SAAU;QAC/BC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA2B;QAAqD;QAAmE;QAAmE;QAAqE;QAAsE;QAAwD;QAA0D;QAA+D;QAA8E;QAA8D;KAA6F;AACjwB;AAIO,MAAMb,mCAAmCc,CAAAA;IAC9C,MAAMC,SAASb;IACfY,MAAMb,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,yBAAyBE,IAAI,EAAEc,OAAOd,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACpG,OAAOF;AACT,GACA,0DAA0D"}
+{"version":3,"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupClassNames = {\n  root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    ni5quz: \"flhoj8d\",\n    Irip7g: [\"fj7wzln\", \"fagfnhl\"],\n    pgpdld: [\"fghv8el\", \"f1r95qti\"],\n    nep80a: [\"fog3xzc\", \"f146oqes\"],\n    Btx6110: \"f5673lx\",\n    B1zw9a1: \"f23uflp\",\n    B857g0j: \"f1sqsvnd\",\n    Bx4l464: \"f1k81338\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".flhoj8d>.fui-MenuItem:nth-of-type(1){flex-grow:1;}\", \".fj7wzln>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}\", \".fagfnhl>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}\", \".fghv8el>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}\", \".f1r95qti>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}\", \".fog3xzc>.fui-MenuItem:nth-of-type(2){padding-left:0;}\", \".f146oqes>.fui-MenuItem:nth-of-type(2){padding-right:0;}\", \".f5673lx>.fui-MenuItem:nth-of-type(2)::before{content:\\\"\\\";}\", \".f23uflp>.fui-MenuItem:nth-of-type(2)::before{width:var(--strokeWidthThin);}\", \".f1sqsvnd>.fui-MenuItem:nth-of-type(2)::before{height:24px;}\", \".f1k81338>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--colorNeutralStroke1);}\"]\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useMenuSplitGroupStyles.styles.js.map"],"names":["menuSplitGroupClassNames","useMenuSplitGroupStyles_unstable","root","useStyles","__styles","mc9l5x","ni5quz","Irip7g","pgpdld","nep80a","Btx6110","B1zw9a1","B857g0j","Bx4l464","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IAwBAC,gCAAgC;eAAhCA;;;uBA3B0B;AAGhC,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA2B;QAAuD;QAAoE;QAAqE;QAAuE;QAAyE;QAA0D;QAA4D;QAAgE;QAAgF;QAAgE;KAA+F;AACtxB;AAIO,MAAMb,mCAAmCc,CAAAA;IAC9C,MAAMC,SAASb;IACfY,MAAMb,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,yBAAyBE,IAAI,EAAEc,OAAOd,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACpG,OAAOF;AACT,GACA,0DAA0D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.12.22",
+  "version": "9.12.24",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,16 +37,16 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.6",
-    "@fluentui/react-aria": "^9.3.39",
-    "@fluentui/react-context-selector": "^9.1.37",
+    "@fluentui/react-aria": "^9.3.41",
+    "@fluentui/react-context-selector": "^9.1.39",
     "@fluentui/react-icons": "^2.0.217",
-    "@fluentui/react-portal": "^9.3.20",
-    "@fluentui/react-positioning": "^9.9.17",
-    "@fluentui/react-shared-contexts": "^9.9.2",
-    "@fluentui/react-tabster": "^9.13.3",
+    "@fluentui/react-portal": "^9.3.22",
+    "@fluentui/react-positioning": "^9.9.19",
+    "@fluentui/react-shared-contexts": "^9.10.0",
+    "@fluentui/react-tabster": "^9.13.5",
     "@fluentui/react-theme": "^9.1.14",
-    "@fluentui/react-utilities": "^9.14.0",
-    "@fluentui/react-jsx-runtime": "^9.0.13",
+    "@fluentui/react-utilities": "^9.14.2",
+    "@fluentui/react-jsx-runtime": "^9.0.15",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },