@fluentui/react-menu 9.12.3 → 9.12.4

package/lib/components/MenuItemRadio/renderMenuItemRadio.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuItemRadio.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menuitemradio structure but add\n * slots to children.\n */\nexport const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {\n  const { slots, slotProps } = getSlotsNext<MenuItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkmark && <slots.checkmark {...slotProps.checkmark} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.content && <slots.content {...slotProps.content} />}\n      {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderMenuItemRadio_unstable","state","slots","slotProps","root","checkmark","icon","content","secondaryContent"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAIzD;;;CAGC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA4BE;IAEzD,qBACE,AAfJ,cAeKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,SAAS,kBAAI,AAhB1B,cAgB2BH,MAAMG,SAAS,EAAKF,UAAUE,SAAS,GAC3DH,MAAMI,IAAI,kBAAI,AAjBrB,cAiBsBJ,MAAMI,IAAI,EAAKH,UAAUG,IAAI,GAC5CJ,MAAMK,OAAO,kBAAI,AAlBxB,cAkByBL,MAAMK,OAAO,EAAKJ,UAAUI,OAAO,GACrDL,MAAMM,gBAAgB,kBAAI,AAnBjC,cAmBkCN,MAAMM,gBAAgB,EAAKL,UAAUK,gBAAgB;AAGvF,EAAE"}
+{"version":3,"sources":["renderMenuItemRadio.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menuitemradio structure but add\n * slots to children.\n */\nexport const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {\n  assertSlots<MenuItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkmark && <state.checkmark />}\n      {state.icon && <state.icon />}\n      {state.content && <state.content />}\n      {state.secondaryContent && <state.secondaryContent />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderMenuItemRadio_unstable","state","root","checkmark","icon","content","secondaryContent"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAIxD;;;CAGC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzEF,YAA2BE;IAE3B,qBACE,AAfJ,cAeKA,MAAMC,IAAI,QACRD,MAAME,SAAS,kBAAI,AAhB1B,cAgB2BF,MAAME,SAAS,SACnCF,MAAMG,IAAI,kBAAI,AAjBrB,cAiBsBH,MAAMG,IAAI,SACzBH,MAAMI,OAAO,kBAAI,AAlBxB,cAkByBJ,MAAMI,OAAO,SAC/BJ,MAAMK,gBAAgB,kBAAI,AAnBjC,cAmBkCL,MAAMK,gBAAgB;AAGxD,EAAE"}

package/lib/components/MenuItemRadio/useMenuItemRadio.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuItemRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n  props: MenuItemRadioProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioState => {\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n\n  return {\n    ...useMenuItem_unstable(\n      {\n        ...props,\n        role: 'menuitemradio',\n        'aria-checked': checked,\n        checkmark: resolveShorthand(props.checkmark, {\n          defaultProps: { children: <Checkmark16Filled /> },\n          required: true,\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          selectRadio?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    checked,\n    name,\n    value,\n  };\n};\n"],"names":["React","resolveShorthand","Checkmark16Filled","useMenuListContext_unstable","useMenuItem_unstable","useMenuItemRadio_unstable","props","ref","name","value","checked","context","checkedItems","checkedValues","indexOf","selectRadio","role","checkmark","defaultProps","children","required","onClick","e"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,oBAAoB,QAAQ,0BAA0B;AAI/D;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,KAAI,EAAEC,MAAK,EAAE,GAAGH;IAExB,MAAMI,UAAUP,4BAA4BQ,CAAAA,UAAW;YAChCA;QAArB,MAAMC,eAAeD,CAAAA,CAAAA,yBAAAA,QAAQE,aAAa,cAArBF,oCAAAA,KAAAA,IAAAA,sBAAuB,CAACH,KAAK,AAAD,KAAK,EAAE;QACxD,OAAOI,aAAaE,OAAO,CAACL,WAAW,CAAC;IAC1C;IAEA,MAAMM,cAAcZ,4BAA4BQ,CAAAA,UAAWA,QAAQI,WAAW;IAE9E,OAAO;QACL,GAAGX,qBACD;YACE,GAAGE,KAAK;YACRU,MAAM;YACN,gBAAgBN;YAChBO,WAAWhB,iBAAiBK,MAAMW,SAAS,EAAE;gBAC3CC,cAAc;oBAAEC,wBAAU,oBAACjB;gBAAqB;gBAChDkB,UAAU,IAAI;YAChB;YACAC,SAAS,CAACC,IAA8D;oBAEtEhB;gBADAS,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAcO,GAAGd,MAAMC,OAAOC;gBAC9BJ,CAAAA,iBAAAA,MAAMe,OAAO,cAAbf,4BAAAA,KAAAA,IAAAA,eAAAA,KAAAA,OAAgBgB;YAClB;QACF,GACAf,IACD;QACDG;QACAF;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useMenuItemRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n  props: MenuItemRadioProps,\n  ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioState => {\n  const { name, value } = props;\n\n  const checked = useMenuListContext_unstable(context => {\n    const checkedItems = context.checkedValues?.[name] || [];\n    return checkedItems.indexOf(value) !== -1;\n  });\n\n  const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n\n  return {\n    ...useMenuItem_unstable(\n      {\n        ...props,\n        role: 'menuitemradio',\n        'aria-checked': checked,\n        checkmark: slot.optional(props.checkmark, {\n          defaultProps: { children: <Checkmark16Filled /> },\n          renderByDefault: true,\n          elementType: 'span',\n        }),\n        onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n          selectRadio?.(e, name, value, checked);\n          props.onClick?.(e);\n        },\n      },\n      ref,\n    ),\n    checked,\n    name,\n    value,\n  };\n};\n"],"names":["React","slot","Checkmark16Filled","useMenuListContext_unstable","useMenuItem_unstable","useMenuItemRadio_unstable","props","ref","name","value","checked","context","checkedItems","checkedValues","indexOf","selectRadio","role","checkmark","optional","defaultProps","children","renderByDefault","elementType","onClick","e"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,oBAAoB,QAAQ,0BAA0B;AAI/D;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,KAAI,EAAEC,MAAK,EAAE,GAAGH;IAExB,MAAMI,UAAUP,4BAA4BQ,CAAAA,UAAW;YAChCA;QAArB,MAAMC,eAAeD,CAAAA,CAAAA,yBAAAA,QAAQE,aAAa,cAArBF,oCAAAA,KAAAA,IAAAA,sBAAuB,CAACH,KAAK,AAAD,KAAK,EAAE;QACxD,OAAOI,aAAaE,OAAO,CAACL,WAAW,CAAC;IAC1C;IAEA,MAAMM,cAAcZ,4BAA4BQ,CAAAA,UAAWA,QAAQI,WAAW;IAE9E,OAAO;QACL,GAAGX,qBACD;YACE,GAAGE,KAAK;YACRU,MAAM;YACN,gBAAgBN;YAChBO,WAAWhB,KAAKiB,QAAQ,CAACZ,MAAMW,SAAS,EAAE;gBACxCE,cAAc;oBAAEC,wBAAU,oBAAClB;gBAAqB;gBAChDmB,iBAAiB,IAAI;gBACrBC,aAAa;YACf;YACAC,SAAS,CAACC,IAA8D;oBAEtElB;gBADAS,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAcS,GAAGhB,MAAMC,OAAOC;gBAC9BJ,CAAAA,iBAAAA,MAAMiB,OAAO,cAAbjB,4BAAAA,KAAAA,IAAAA,eAAAA,KAAAA,OAAgBkB;YAClB;QACF,GACAjB,IACD;QACDG;QACAF;QACAC;IACF;AACF,EAAE"}

package/lib/components/MenuList/renderMenuList.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { MenuListProvider } from '../../contexts/menuListContext';
 /**
  * Function that renders the final JSX of the component
  */ export const renderMenuList_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(MenuListProvider, {
         value: contextValues.menuList
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
+    }, /*#__PURE__*/ createElement(state.root, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuList.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues) => {\n  const { slots, slotProps } = getSlotsNext<MenuListSlots>(state);\n\n  return (\n    <MenuListProvider value={contextValues.menuList}>\n      <slots.root {...slotProps.root} />\n    </MenuListProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","MenuListProvider","renderMenuList_unstable","state","contextValues","slots","slotProps","value","menuList","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,gBAAgB,QAAQ,iCAAiC;AAElE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAdJ,cAcKF;QAAiBM,OAAOH,cAAcI,QAAQ;qBAC7C,AAfN,cAeOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderMenuList.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues) => {\n  assertSlots<MenuListSlots>(state);\n\n  return (\n    <MenuListProvider value={contextValues.menuList}>\n      <state.root />\n    </MenuListProvider>\n  );\n};\n"],"names":["createElement","assertSlots","MenuListProvider","renderMenuList_unstable","state","contextValues","value","menuList","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,gBAAgB,QAAQ,iCAAiC;AAElE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrGJ,YAA2BG;IAE3B,qBACE,AAdJ,cAcKF;QAAiBI,OAAOD,cAAcE,QAAQ;qBAC7C,AAfN,cAeOH,MAAMI,IAAI;AAGjB,EAAE"}

package/lib/components/MenuList/useMenuList.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps } from '@fluentui/react-utilities';
+import { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps, 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,12 +107,14 @@ import { MenuContext } from '../../contexts/menuContext';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref: useMergedRefs(ref, innerRef),
             role: 'menu',
             'aria-labelledby': menuContext.triggerId,
             ...focusAttributes,
             ...props
+        }), {
+            elementType: 'div'
         }),
         hasIcons: menuContext.hasIcons || false,
         hasCheckmarks: menuContext.hasCheckmarks || false,

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} 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: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'menu',\n      'aria-labelledby': menuContext.triggerId,\n      ...focusAttributes,\n      ...props,\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","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","role","triggerId","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"mappings":"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"}
+{"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,MAA+C;IACxG,MAAM,EAAEC,iBAAgB,EAAE,GAAGP;IAC7B,MAAMQ,cAAcC;IACpB,MAAMC,iBAAiBT,oBAAoBE;IAC3C,MAAMQ,kBAAkBZ,wBAAwB;QAAEa,UAAU,IAAI;QAAEC,sBAAsB;YAAEC,KAAKJ;QAAe;IAAE;IAEhH,IAAIK,yBAAyBV,OAAOG,aAAaE,iBAAiB;QAChE,4CAA4C;QAC5C,sCAAsC;QACtCM,QAAQC,IAAI,CAAC;IACf,CAAC;IAED,MAAMC,WAAWzB,MAAM0B,MAAM,CAAc,IAAI;IAE/C,MAAMC,2BAA2B3B,MAAM4B,WAAW,CAChD,CAACC,GAAqCC,SAAwB;QAC5D,gFAAgF;QAChF,MAAMC,gBAAgB;YAAC;YAAY;YAAoB;SAAgB;QACvE,IAAI,CAACN,SAASO,OAAO,EAAE;YACrB;QACF,CAAC;QAED,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,CAAC;QAED,MAAME,aAAaP,UAAUQ,GAAG,CAACC,CAAAA;gBAAYA;YAAAA,OAAAA,CAAAA,wBAAAA,SAASC,WAAW,cAApBD,mCAAAA,KAAAA,IAAAA,sBAAsBE,OAAO,GAAGC,WAAW,EAAE;;QAC1F,MAAMC,OAAOjB,EAAEkB,GAAG,CAACF,WAAW;QAE9B,MAAMG,qBAAqB,CAACC,OAAeC,YAAsB;YAC/D,IAAK,IAAIC,IAAIF,OAAOE,IAAIX,WAAWD,MAAM,EAAEY,IAAK;gBAC9C,IAAIL,SAASN,UAAU,CAACW,EAAE,EAAE;oBAC1B,OAAOA;gBACT,CAAC;YACH;YACA,OAAO,CAAC;QACV;QAEA,oCAAoC;QACpC,IAAIC,QAAQJ,mBAAmBV,YAAYQ;QAE3C,wDAAwD;QACxD,IAAIM,UAAU,CAAC,GAAG;YAChBA,QAAQJ,mBAAmB,GAAGF;QAChC,CAAC;QAED,wBAAwB;QACxB,IAAIM,QAAQ,CAAC,GAAG;YACdnB,SAAS,CAACmB,MAAM,CAACC,KAAK;QACxB,CAAC;IACH,GACA;QAACvC;KAAiB;QAIXF;IADT,MAAM,CAAC0C,eAAeC,iBAAiB,GAAGpD,qBAAqB;QAC7DqD,OAAO5C,CAAAA,uBAAAA,MAAM0C,aAAa,cAAnB1C,kCAAAA,uBAAwBK,iBAAiBF,YAAYuC,aAAa,GAAGG,SAAS,AAAC;QACtFC,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,SAAS,AAAC;IAE/F,MAAMM,iBAAiB7D,iBACrB,CAAC2B,GAA2CmC,MAAcC,OAAeC,UAAqB;QAC5F,MAAMC,eAAeb,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,aAAe,CAACU,KAAK,AAAD,KAAK,EAAE;QAChD,MAAMI,kBAAkB;eAAID;SAAa;QACzC,IAAID,SAAS;YACXE,gBAAgBC,MAAM,CAACD,gBAAgBhC,OAAO,CAAC6B,QAAQ;QACzD,OAAO;YACLG,gBAAgBE,IAAI,CAACL;QACvB,CAAC;QAEDJ,qCAAAA,sCAAAA,KAAAA,IAAAA,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,QAAkB;QAC/G,MAAMG,kBAAkB;YAACH;SAAM;QAC/BV,iBAAiBgB,CAAAA,IAAM,CAAA;gBAAE,GAAGA,CAAC;gBAAE,CAACP,KAAK,EAAEI;YAAgB,CAAA;QACvDP,qCAAAA,sCAAAA,KAAAA,IAAAA,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,KAAK;QACvCC,eAAejE,YAAYiE,aAAa,IAAI,KAAK;QACjD1B;QACArC;QACAU;QACA6C;QACAT;IACF;AACF,EAAE;AAEF;;CAEC,GACD,MAAM/C,0BAA0B,IAAM;IACpC,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,iBACG;IACH,IAAIkE,yBAAyB,KAAK;IAClC,IAAK,MAAMC,OAAOF,aAAc;QAC9B,IAAItE,KAAK,CAACwE,IAAgG,EAAE;YAC1GD,yBAAyB,IAAI;QAC/B,CAAC;IACH;IAEA,OAAOlE,kBAAkBkE;AAC3B"}

package/lib/components/MenuList/useMenuListStyles.styles.js

@@ -13,7 +13,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bqenvij: "f1l02sjl"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".f1l02sjl{height:100%;}"]
+  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f16mnhsx{column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".f1l02sjl{height:100%;}"]
 });
 /**
  * Apply styling to the Menu slots based on the state

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { Portal } from '@fluentui/react-portal';
 /**
  * Render the final JSX of MenuPopover
  */ export const renderMenuPopover_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     if (state.inline) {
-        return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+        return /*#__PURE__*/ createElement(state.root, null);
     }
     return /*#__PURE__*/ createElement(Portal, {
         mountNode: state.mountNode
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
+    }, /*#__PURE__*/ createElement(state.root, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuPopover.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlotsNext<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"names":["createElement","getSlotsNext","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","root","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAA+BG;IAE5D,IAAIA,MAAMG,MAAM,EAAE;QAChB,qBAAO,AAdX,cAcYF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;IACvC,CAAC;IAED,qBACE,AAlBJ,cAkBKN;QAAOO,WAAWL,MAAMK,SAAS;qBAChC,AAnBN,cAmBOJ,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderMenuPopover.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  assertSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <state.root />;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <state.root />\n    </Portal>\n  );\n};\n"],"names":["createElement","assertSlots","Portal","renderMenuPopover_unstable","state","inline","root","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrEH,YAA8BG;IAE9B,IAAIA,MAAMC,MAAM,EAAE;QAChB,qBAAO,AAdX,cAcYD,MAAME,IAAI;IACpB,CAAC;IAED,qBACE,AAlBJ,cAkBKJ;QAAOK,WAAWH,MAAMG,SAAS;qBAChC,AAnBN,cAmBOH,MAAME,IAAI;AAGjB,EAAE"}

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 } from '@fluentui/react-utilities';
+import { getNativeElementProps, 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,11 +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 = getNativeElementProps('div', {
+    const rootProps = slot.always(getNativeElementProps('div', {
         role: 'presentation',
         ...restoreFocusSourceAttributes,
         ...props,
         ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)
+    }), {
+        elementType: 'div'
     });
     const { onMouseEnter: onMouseEnterOriginal , onKeyDown: onKeyDownOriginal  } = rootProps;
     rootProps.onMouseEnter = useEventCallback((event)=>{

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 } 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 = getNativeElementProps('div', {\n    role: 'presentation',\n    ...restoreFocusSourceAttributes,\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\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\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n      if (!isSubmenu) {\n        triggerRef.current?.focus();\n      }\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","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","role","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 { 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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"}

package/lib/components/MenuPopover/useMenuPopoverStyles.styles.js

@@ -53,14 +53,14 @@ const useStyles = /*#__PURE__*/__styles({
     Bvtglag: "fjp4h9y"
   }
 }, {
-  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkqu4gx{min-width:128px;}", ".f1kaai3v{max-width:300px;}", ".f1ahpp82{width:-webkit-max-content;width:-moz-max-content;width:max-content;}", ".f1hg901r{box-shadow:var(--shadow16);}", ".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f18k4bn6{animation-composition:accumulate;}", ".fo1kyvf{-webkit-animation-duration:var(--durationSlower);animation-duration:var(--durationSlower);}", ".fetxo7e{-webkit-animation-timing-function:var(--curveDecelerateMid);animation-timing-function:var(--curveDecelerateMid);}", ".fmm77a6{--slide-distance-x:0px;}", ".f12t24nk{--slide-distance-y:10px;}", ".f1babd7[data-popper-placement^=right]{--slide-distance-x:-10px;}", ".f1jgo889[data-popper-placement^=right]{--slide-distance-y:0px;}", ".f1ij1pew[data-popper-placement^=bottom]{--slide-distance-x:0px;}", ".f1gu8pa9[data-popper-placement^=bottom]{--slide-distance-y:-10px;}", ".fhfnl4n[data-popper-placement^=left]{--slide-distance-x:10px;}", ".fk8tkmz[data-popper-placement^=left]{--slide-distance-y:0px;}", ".f3n0535{-webkit-animation-name:f5j8bii,fld5wjx;animation-name:f5j8bii,fld5wjx;}"],
-  k: ["@-webkit-keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@-webkit-keyframes fld5wjx{from{-webkit-transform:translate(var(--slide-distance-x), var(--slide-distance-y));-moz-transform:translate(var(--slide-distance-x), var(--slide-distance-y));-ms-transform:translate(var(--slide-distance-x), var(--slide-distance-y));transform:translate(var(--slide-distance-x), var(--slide-distance-y));}}", "@keyframes fld5wjx{from{-webkit-transform:translate(var(--slide-distance-x), var(--slide-distance-y));-moz-transform:translate(var(--slide-distance-x), var(--slide-distance-y));-ms-transform:translate(var(--slide-distance-x), var(--slide-distance-y));transform:translate(var(--slide-distance-x), var(--slide-distance-y));}}"],
-  m: [["@media (prefers-reduced-motion){.fi19xcv[data-popper-placement]{-webkit-animation-duration:1ms;animation-duration:1ms;}}", {
+  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkqu4gx{min-width:128px;}", ".f1kaai3v{max-width:300px;}", ".f1ahpp82{width:max-content;}", ".f1hg901r{box-shadow:var(--shadow16);}", ".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f18k4bn6{animation-composition:accumulate;}", ".fo1kyvf{animation-duration:var(--durationSlower);}", ".fetxo7e{animation-timing-function:var(--curveDecelerateMid);}", ".fmm77a6{--slide-distance-x:0px;}", ".f12t24nk{--slide-distance-y:10px;}", ".f1babd7[data-popper-placement^=right]{--slide-distance-x:-10px;}", ".f1jgo889[data-popper-placement^=right]{--slide-distance-y:0px;}", ".f1ij1pew[data-popper-placement^=bottom]{--slide-distance-x:0px;}", ".f1gu8pa9[data-popper-placement^=bottom]{--slide-distance-y:-10px;}", ".fhfnl4n[data-popper-placement^=left]{--slide-distance-x:10px;}", ".fk8tkmz[data-popper-placement^=left]{--slide-distance-y:0px;}", ".f3n0535{animation-name:f5j8bii,fld5wjx;}"],
+  k: ["@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes fld5wjx{from{transform:translate(var(--slide-distance-x), var(--slide-distance-y));}}"],
+  m: [["@media (prefers-reduced-motion){.fi19xcv[data-popper-placement]{animation-duration:1ms;}}", {
     m: "(prefers-reduced-motion)"
-  }], ["@media (prefers-reduced-motion){.f1mzajhk[data-popper-placement]{-webkit-animation-name:f5j8bii;animation-name:f5j8bii;}}", {
+  }], ["@media (prefers-reduced-motion){.f1mzajhk[data-popper-placement]{animation-name:f5j8bii;}}", {
     m: "(prefers-reduced-motion)"
   }]],
-  t: ["@supports not (animation-composition: accumulate){.fjp4h9y[data-popper-placement]{-webkit-animation-name:f5j8bii;animation-name:f5j8bii;}}"]
+  t: ["@supports not (animation-composition: accumulate){.fjp4h9y[data-popper-placement]{animation-name:f5j8bii;}}"]
 });
 /**
  * Apply styling to the Menu slots based on the state

package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of MenuSplitGroup
  */ export const renderMenuSplitGroup_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuSplitGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots } from './MenuSplitGroup.types';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState) => {\n  const { slots, slotProps } = getSlotsNext<MenuSplitGroupSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderMenuSplitGroup_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAkCE;IAE/D,qBAAO,AAZT,cAYUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderMenuSplitGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots } from './MenuSplitGroup.types';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState) => {\n  assertSlots<MenuSplitGroupSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderMenuSplitGroup_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3EF,YAAiCE;IAEjC,qBAAO,AAZT,cAYUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, 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,11 +49,13 @@ import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             role: 'group',
             ref: useMergedRefs(ref, innerRef),
             onKeyDown,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuSplitGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, getRTLSafeKey, useMergedRefs } 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: getNativeElementProps('div', {\n      role: 'group',\n      ref: useMergedRefs(ref, innerRef),\n      onKeyDown,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","getRTLSafeKey","useMergedRefs","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","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,aAAa,QAAQ,4BAA4B;AAChG,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,MACwB;IACxB,MAAMC,WAAWZ,MAAMa,MAAM;IAC7B,MAAM,EAAEC,IAAG,EAAEC,eAAc,EAAE,GAAGT;IAEhC,MAAMU,eAAed,cAAcK,YAAYO;IAC/C,MAAMG,eAAef,cAAcM,WAAWM;IAE9C,MAAM,EAAEI,kBAAiB,EAAEC,kBAAiB,EAAE,GAAGf;IAEjD,MAAMgB,YAAYpB,MAAMqB,WAAW,CACjC,CAACC,IAAwC;YAMlCV;QALL,MAAMW,gBAAgBR,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBQ,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF,CAAC;QAED,IAAI,EAACX,CAAAA,oBAAAA,SAASY,OAAO,cAAhBZ,+BAAAA,KAAAA,IAAAA,kBAAkBa,SAASF,iBAAgB;YAC9C;QACF,CAAC;QAED,IAAID,EAAEI,GAAG,KAAKV,cAAc;YAC1B,MAAMW,OAAOT,kBAAkBK,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FG,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAME,KAAK;QACb,CAAC;QAED,IAAIP,EAAEI,GAAG,KAAKT,cAAc;YAC1B,MAAMa,OAAOX,kBAAkBI,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FM,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAMD,KAAK;QACb,CAAC;IACH,GACA;QAACX;QAAmBC;QAAmBJ;QAAgBC;QAAcC;KAAa;IAGpF,OAAO;QACLc,YAAY;YACVC,MAAM;QACR;QACAA,MAAM/B,sBAAsB,OAAO;YACjCgC,MAAM;YACNtB,KAAKR,cAAcQ,KAAKC;YACxBQ;YACA,GAAGV,KAAK;QACV;IACF;AACF,EAAE"}
+{"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,MACwB;IACxB,MAAMC,WAAWb,MAAMc,MAAM;IAC7B,MAAM,EAAEC,IAAG,EAAEC,eAAc,EAAE,GAAGT;IAEhC,MAAMU,eAAef,cAAcM,YAAYO;IAC/C,MAAMG,eAAehB,cAAcO,WAAWM;IAE9C,MAAM,EAAEI,kBAAiB,EAAEC,kBAAiB,EAAE,GAAGf;IAEjD,MAAMgB,YAAYrB,MAAMsB,WAAW,CACjC,CAACC,IAAwC;YAMlCV;QALL,MAAMW,gBAAgBR,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBQ,aAAa;QACnD,IAAI,CAACA,eAAe;YAClB;QACF,CAAC;QAED,IAAI,EAACX,CAAAA,oBAAAA,SAASY,OAAO,cAAhBZ,+BAAAA,KAAAA,IAAAA,kBAAkBa,SAASF,iBAAgB;YAC9C;QACF,CAAC;QAED,IAAID,EAAEI,GAAG,KAAKV,cAAc;YAC1B,MAAMW,OAAOT,kBAAkBK,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FG,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAME,KAAK;QACb,CAAC;QAED,IAAIP,EAAEI,GAAG,KAAKT,cAAc;YAC1B,MAAMa,OAAOX,kBAAkBI,eAA8B;gBAAEK,WAAWhB,SAASY,OAAO;YAAC;YAC3FM,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAMD,KAAK;QACb,CAAC;IACH,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"}

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

@@ -21,7 +21,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bnkcs84: "f1kve8m0"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f168awwq>.fui-MenuItem:nth-child(1){width:100%;}", ".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;}", ".fokbbcd>.fui-MenuItem:nth-child(2){margin-left:auto;}", ".f1xlvh9o>.fui-MenuItem:nth-child(2){margin-right:auto;}", ".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;}", ".f168awwq>.fui-MenuItem:nth-child(1){width:100%;}", ".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;}", ".fokbbcd>.fui-MenuItem:nth-child(2){margin-left:auto;}", ".f1xlvh9o>.fui-MenuItem:nth-child(2){margin-right:auto;}", ".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);}"]
 });
 /**
  * Apply styling to the MenuSplitGroup slots based on the state

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

@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderMenuDivider_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderMenuDivider_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root);
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuDivider.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Redefine the render function to add slots. Reuse the menudivider structure but add\n * slots to children.\n */ export const renderMenuDivider_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root);\n};\n"],"names":["renderMenuDivider_unstable","state","slots","slotProps","getSlotsNext","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;AAIlB,MAAMA,6BAA6B,CAACC,QAAQ;IACnD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI;AACjE"}
+{"version":3,"sources":["renderMenuDivider.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Redefine the render function to add slots. Reuse the menudivider structure but add\n * slots to children.\n */ export const renderMenuDivider_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null);\n};\n"],"names":["renderMenuDivider_unstable","state","assertSlots","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;AAIjB,MAAMA,6BAA6B,CAACC,QAAQ;IACnDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI;AACvD"}

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

@@ -14,11 +14,13 @@ const useMenuDivider_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             role: 'presentation',
             'aria-hidden': true,
             ...props,
             ref
+        }), {
+            elementType: 'div'
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuDivider.js"],"sourcesContent":["import { getNativeElementProps } 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: getNativeElementProps('div', {\n            role: 'presentation',\n            'aria-hidden': true,\n            ...props,\n            ref\n        })\n    };\n};\n"],"names":["useMenuDivider_unstable","props","ref","components","root","getNativeElementProps","role"],"mappings":";;;;+BAIiBA;;aAAAA;;;gCAJqB;6DACf;AAGZ,MAAMA,0BAA0B,CAACC,OAAOC,MAAM;IACrD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BC,MAAM;YACN,eAAe,IAAI;YACnB,GAAGL,KAAK;YACRC;QACJ;IACJ;AACJ"}
+{"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;;aAAAA;;;gCAJ2B;6DACrB;AAGZ,MAAMA,0BAA0B,CAACC,OAAOC,MAAM;IACrD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CC,MAAM;YACN,eAAe,IAAI;YACnB,GAAGP,KAAK;YACRC;QACJ,IAAI;YACAO,aAAa;QACjB;IACJ;AACJ"}

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

@@ -10,8 +10,8 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _menuGroupContext = require("../../contexts/menuGroupContext");
 const renderMenuGroup_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    (0, _reactUtilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_menuGroupContext.MenuGroupContextProvider, {
         value: contextValues.menuGroup
-    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root));
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuGroup.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { MenuGroupContextProvider } from '../../contexts/menuGroupContext';\n/**\n * Redefine the render function to add slots. Reuse the menugroup structure but add\n * slots to children.\n */ export const renderMenuGroup_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(MenuGroupContextProvider, {\n        value: contextValues.menuGroup\n    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));\n};\n"],"names":["renderMenuGroup_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","MenuGroupContextProvider","value","menuGroup","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMjCA;;aAAAA;;iCANkE;gCACtD;kCACY;AAI9B,MAAMA,2BAA2B,CAACC,OAAOC,gBAAgB;IAChE,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACC,0CAAwB,EAAE;QACzDC,OAAON,cAAcO,SAAS;IAClC,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMO,IAAI,EAAEN,UAAUM,IAAI;AAC7D"}
+{"version":3,"sources":["renderMenuGroup.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { MenuGroupContextProvider } from '../../contexts/menuGroupContext';\n/**\n * Redefine the render function to add slots. Reuse the menugroup structure but add\n * slots to children.\n */ export const renderMenuGroup_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(MenuGroupContextProvider, {\n        value: contextValues.menuGroup\n    }, /*#__PURE__*/ createElement(state.root, null));\n};\n"],"names":["renderMenuGroup_unstable","state","contextValues","assertSlots","createElement","MenuGroupContextProvider","value","menuGroup","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMjCA;;aAAAA;;iCANkE;gCACvD;kCACa;AAI9B,MAAMA,2BAA2B,CAACC,OAAOC,gBAAgB;IAChEC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACC,0CAAwB,EAAE;QACzDC,OAAOJ,cAAcK,SAAS;IAClC,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMO,IAAI,EAAE,IAAI;AACnD"}

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

@@ -15,11 +15,13 @@ function useMenuGroup_unstable(props, ref) {
         components: {
             root: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref,
             'aria-labelledby': headerId,
             role: 'group',
             ...props
+        }), {
+            elementType: 'div'
         }),
         headerId
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId } 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: getNativeElementProps('div', {\n            ref,\n            'aria-labelledby': headerId,\n            role: 'group',\n            ...props\n        }),\n        headerId\n    };\n}\n"],"names":["useMenuGroup_unstable","props","ref","headerId","useId","components","root","getNativeElementProps","role"],"mappings":";;;;+BAIoBA;;aAAAA;;;6DAJG;gCACsB;AAGlC,SAASA,sBAAsBC,KAAK,EAAEC,GAAG,EAAE;IAClD,MAAMC,WAAWC,IAAAA,qBAAK,EAAC;IACvB,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BL;YACA,mBAAmBC;YACnBK,MAAM;YACN,GAAGP,KAAK;QACZ;QACAE;IACJ;AACJ"}
+{"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;;aAAAA;;;6DAJG;gCAC4B;AAGxC,SAASA,sBAAsBC,KAAK,EAAEC,GAAG,EAAE;IAClD,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"}

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

@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderMenuGroupHeader_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderMenuGroupHeader_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root);
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderMenuGroupHeader.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Redefine the render function to add slots. Reuse the menugroupheader structure but add\n * slots to children.\n */ export const renderMenuGroupHeader_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root);\n};\n"],"names":["renderMenuGroupHeader_unstable","state","slots","slotProps","getSlotsNext","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;AAIlB,MAAMA,iCAAiC,CAACC,QAAQ;IACvD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI;AACjE"}
+{"version":3,"sources":["renderMenuGroupHeader.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Redefine the render function to add slots. Reuse the menugroupheader structure but add\n * slots to children.\n */ export const renderMenuGroupHeader_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null);\n};\n"],"names":["renderMenuGroupHeader_unstable","state","assertSlots","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;AAIjB,MAAMA,iCAAiC,CAACC,QAAQ;IACvDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI;AACvD"}

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

@@ -16,10 +16,12 @@ function useMenuGroupHeader_unstable(props, ref) {
         components: {
             root: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref,
             id,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 }

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 } 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: getNativeElementProps('div', {\n            ref,\n            id,\n            ...props\n        })\n    };\n}\n"],"names":["useMenuGroupHeader_unstable","props","ref","headerId","id","useMenuGroupContext_unstable","components","root","getNativeElementProps"],"mappings":";;;;+BAKoBA;;aAAAA;;;6DALG;kCACsB;gCACP;AAG3B,SAASA,4BAA4BC,KAAK,EAAEC,GAAG,EAAE;IACxD,MAAM,EAAEC,UAAUC,GAAE,EAAG,GAAGC,IAAAA,8CAA4B;IACtD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BN;YACAE;YACA,GAAGH,KAAK;QACZ;IACJ;AACJ"}
+{"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;;aAAAA;;;6DALG;kCACsB;gCACD;AAGjC,SAASA,4BAA4BC,KAAK,EAAEC,GAAG,EAAE;IACxD,MAAM,EAAEC,UAAUC,GAAE,EAAG,GAAGC,IAAAA,8CAA4B;IACtD,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"}

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

@@ -41,8 +41,8 @@ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f11qrl6u{padding-right:12px;}",
         ".fl43uef{font-weight:var(--fontWeightSemibold);}",
         ".f1d2rq10{height:32px;}",
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
-        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}"
     ]
 });
 const useMenuGroupHeaderStyles_unstable = (state)=>{

package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n  root: 'fui-MenuGroupHeader'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Be2twd7: \"fy9rknc\",\n    sj55zd: \"f11d4kpn\",\n    uwmqm3: [\"fjlbh76\", \"f11qrl6u\"],\n    z189sj: [\"f11qrl6u\", \"fjlbh76\"],\n    Bhrd7zp: \"fl43uef\",\n    Bqenvij: \"f1d2rq10\",\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\"\n  }\n}, {\n  d: [\".fy9rknc{font-size:var(--fontSizeBase200);}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".fjlbh76{padding-left:12px;}\", \".f11qrl6u{padding-right:12px;}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".f1d2rq10{height:32px;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\"]\n});\nexport const useMenuGroupHeaderStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useMenuGroupHeaderStyles.styles.js.map"],"names":["menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable","root","useStyles","__styles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,yBAAyB,MAAzBA;IAiBAC,iCAAiC,MAAjCA;;uBAnB0B;AAEhC,MAAMD,4BAA4B;IACvCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA+C;QAAoD;QAAgC;QAAkC;QAAoD;QAA2B;QAAwF;KAA0G;AAC5b;AACO,MAAMZ,oCAAoCa,CAAAA,QAAS;IACxD,MAAMC,SAASZ;IACfW,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,0BAA0BE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IACrG,OAAOF;AACT,GACA,2DAA2D"}
+{"version":3,"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, __styles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n  root: 'fui-MenuGroupHeader'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Be2twd7: \"fy9rknc\",\n    sj55zd: \"f11d4kpn\",\n    uwmqm3: [\"fjlbh76\", \"f11qrl6u\"],\n    z189sj: [\"f11qrl6u\", \"fjlbh76\"],\n    Bhrd7zp: \"fl43uef\",\n    Bqenvij: \"f1d2rq10\",\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\"\n  }\n}, {\n  d: [\".fy9rknc{font-size:var(--fontSizeBase200);}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".fjlbh76{padding-left:12px;}\", \".f11qrl6u{padding-right:12px;}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".f1d2rq10{height:32px;}\", \".f22iagw{display:flex;}\", \".f122n59{align-items:center;}\"]\n});\nexport const useMenuGroupHeaderStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useMenuGroupHeaderStyles.styles.js.map"],"names":["menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable","root","useStyles","__styles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,yBAAyB,MAAzBA;IAiBAC,iCAAiC,MAAjCA;;uBAnB0B;AAEhC,MAAMD,4BAA4B;IACvCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA+C;QAAoD;QAAgC;QAAkC;QAAoD;QAA2B;QAA2B;KAAgC;AACrT;AACO,MAAMZ,oCAAoCa,CAAAA,QAAS;IACxD,MAAMC,SAASZ;IACfW,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,0BAA0BE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IACrG,OAAOF;AACT,GACA,2DAA2D"}