@fluentui/react-menu 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1

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

@@ -1 +1 @@
-{"version":3,"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"],"sources":["../../../src/components/MenuList/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    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"],"mappings":"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"}
+{"version":3,"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","_a","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","handleCheckedValueChange","_b","onCheckedValueChange","toggleCheckbox","name","value","checked","checkedItems","newCheckedItems","splice","push","s","selectRadio","components","root","role","triggerId","hasIcons","hasCheckmarks","context","contextValue","isUsingPropsAndContext","val"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/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    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"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":["useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList"],"sources":["../../../src/components/MenuList/useMenuListContextValues.ts"],"sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n  const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menuList = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    selectRadio,\n    setFocusByFirstCharacter,\n    toggleCheckbox,\n  };\n\n  return { menuList };\n}\n"],"mappings":"AAEA,OAAO,SAASA,kCAAkCC,KAAoB,EAAyB;EAC7F,MAAM;IAAEC,aAAA;IAAeC,aAAA;IAAeC,QAAA;IAAUC,WAAA;IAAaC,wBAAA;IAA0BC;EAAc,CAAE,GAAGN,KAAA;EAE1G;EACA,MAAMO,QAAA,GAAW;IACfN,aAAA;IACAC,aAAA;IACAC,QAAA;IACAC,WAAA;IACAC,wBAAA;IACAC;EACF;EAEA,OAAO;IAAEC;EAAS;AACpB"}
+{"version":3,"names":["useMenuListContextValues_unstable","state","checkedValues","hasCheckmarks","hasIcons","selectRadio","setFocusByFirstCharacter","toggleCheckbox","menuList"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/useMenuListContextValues.ts"],"sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n  const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menuList = {\n    checkedValues,\n    hasCheckmarks,\n    hasIcons,\n    selectRadio,\n    setFocusByFirstCharacter,\n    toggleCheckbox,\n  };\n\n  return { menuList };\n}\n"],"mappings":"AAEA,OAAM,SAAUA,iCAAiCA,CAACC,KAAoB;EACpE,MAAM;IAAEC,aAAa;IAAEC,aAAa;IAAEC,QAAQ;IAAEC,WAAW;IAAEC,wBAAwB;IAAEC;EAAc,CAAE,GAAGN,KAAK;EAE/G;EACA,MAAMO,QAAQ,GAAG;IACfN,aAAa;IACbC,aAAa;IACbC,QAAQ;IACRC,WAAW;IACXC,wBAAwB;IACxBC;GACD;EAED,OAAO;IAAEC;EAAQ,CAAE;AACrB"}

package/lib/components/MenuList/useMenuListStyles.js

@@ -1,6 +1,6 @@
-import { mergeClasses, __styles, shorthands } from "@griffel/react";
+import { mergeClasses, __styles, shorthands } from '@griffel/react';
 export const menuListClassNames = {
-  root: "fui-MenuList"
+  root: 'fui-MenuList'
 };
 const useStyles = /*#__PURE__*/__styles({
   root: {

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","shorthands","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","d","useMenuListStyles_unstable","state","styles","className"],"sources":["../../../src/components/MenuList/useMenuListStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.gap('2px'),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"mappings":"AACA,SAASA,YAAY,EAAAC,QAAA,EAAcC,UAAU,QAAQ;AAGrD,OAAO,MAAMC,kBAAA,GAAoD;EAC/DC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAMlB;AAEA;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAAwC;EACjF,MAAMC,MAAA,GAASR,SAAA;EACfO,KAAA,CAAMR,IAAI,CAACU,SAAS,GAAGd,YAAA,CAAaG,kBAAA,CAAmBC,IAAI,EAAES,MAAA,CAAOT,IAAI,EAAEQ,KAAA,CAAMR,IAAI,CAACU,SAAS;EAC9F,OAAOF,KAAA;AACT"}
+{"version":3,"names":["mergeClasses","__styles","shorthands","menuListClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","d","useMenuListStyles_unstable","state","styles","className"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.gap('2px'),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"mappings":"AACA,SAASA,YAAY,EAAAC,QAAA,EAAcC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAMhB;AAEF;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAMC,MAAM,GAAGR,SAAS,EAAE;EAC1BO,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGd,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EAC/F,OAAOF,KAAK;AACd,CAAC"}

package/lib/components/MenuPopover/MenuPopover.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { useMenuPopover_unstable } from "./useMenuPopover";
-import { useMenuPopoverStyles_unstable } from "./useMenuPopoverStyles";
-import { renderMenuPopover_unstable } from "./renderMenuPopover";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { useMenuPopover_unstable } from './useMenuPopover';
+import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';
+import { renderMenuPopover_unstable } from './renderMenuPopover';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
  */
@@ -15,5 +15,5 @@ export const MenuPopover = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuPopover_unstable(state);
 });
-MenuPopover.displayName = "MenuPopover";
+MenuPopover.displayName = 'MenuPopover';
 //# sourceMappingURL=MenuPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","useCustomStyleHooks_unstable","MenuPopover","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n\n  const { useMenuPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,0BAA0B,QAAQ;AAG3C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CN,6BAAA,CAA8BO,KAAA;EAE9B,MAAM;IAAEP,6BAAA,EAA+BQ;EAAe,CAAE,GAAGN,4BAAA;EAC3DM,eAAA,CAAgBD,KAAA;EAEhB,OAAON,0BAAA,CAA2BM,KAAA;AACpC;AAEAJ,WAAA,CAAYM,WAAW,GAAG"}
+{"version":3,"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","useCustomStyleHooks_unstable","MenuPopover","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n\n  const { useMenuPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAGhE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGR,uBAAuB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEjDN,6BAA6B,CAACO,KAAK,CAAC;EAEpC,MAAM;IAAEP,6BAA6B,EAAEQ;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACzFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACM,WAAW,GAAG,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n     * This option is disregarded for submenus\n     */\n    inline: boolean;\n  };\n"],"mappings":"AAAA"}
+{"version":3,"file":"MenuPopover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n     * This option is disregarded for submenus\n     */\n    inline: boolean;\n  };\n"]}

package/lib/components/MenuPopover/index.js

@@ -1,6 +1,6 @@
-export * from "./MenuPopover";
-export * from "./MenuPopover.types";
-export * from "./renderMenuPopover";
-export * from "./useMenuPopover";
-export * from "./useMenuPopoverStyles";
+export * from './MenuPopover';
+export * from './MenuPopover.types';
+export * from './renderMenuPopover';
+export * from './useMenuPopover';
+export * from './useMenuPopoverStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/MenuPopover/index.ts"],"sourcesContent":["export * from './MenuPopover';\nexport * from './MenuPopover.types';\nexport * from './renderMenuPopover';\nexport * from './useMenuPopover';\nexport * from './useMenuPopoverStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './MenuPopover';\nexport * from './MenuPopover.types';\nexport * from './renderMenuPopover';\nexport * from './useMenuPopover';\nexport * from './useMenuPopoverStyles';\n"]}

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
-import { Portal } from "@fluentui/react-portal";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import { Portal } from '@fluentui/react-portal';
 /**
  * Render the final JSX of MenuPopover
  */
@@ -10,10 +10,14 @@ export const renderMenuPopover_unstable = state => {
     slotProps
   } = getSlots(state);
   if (state.inline) {
-    return /*#__PURE__*/React.createElement(slots.root, slotProps.root);
+    return /*#__PURE__*/React.createElement(slots.root, {
+      ...slotProps.root
+    });
   }
   return /*#__PURE__*/React.createElement(Portal, {
     mountNode: state.mountNode
-  }, /*#__PURE__*/React.createElement(slots.root, slotProps.root));
+  }, /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }));
 };
 //# sourceMappingURL=renderMenuPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","createElement","root","mountNode"],"sources":["../../../src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAEzB,SAASC,MAAM,QAAQ;AAEvB;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGL,QAAA,CAA2BG,KAAA;EAExD,IAAIA,KAAA,CAAMG,MAAM,EAAE;IAChB,oBAAOP,KAAA,CAAAQ,aAAA,CAACH,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI;EACvC;EAEA,oBACET,KAAA,CAAAQ,aAAA,CAACN,MAAA;IAAOQ,SAAA,EAAWN,KAAA,CAAMM;kBACvBV,KAAA,CAAAQ,aAAA,CAACH,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI;AAGpC"}
+{"version":3,"names":["React","getSlots","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","createElement","root","mountNode"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACG,MAAM,EAAE;IAChB,oBAAOP,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;MAAA,GAAKH,SAAS,CAACG;IAAI,EAAI;;EAG3C,oBACET,KAAA,CAAAQ,aAAA,CAACN,MAAM;IAACQ,SAAS,EAAEN,KAAK,CAACM;EAAS,gBAChCV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CAC3B;AAEb,CAAC"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { ArrowLeft, Tab, ArrowRight, Escape } from "@fluentui/keyboard-keys";
-import { getNativeElementProps, useEventCallback, useMergedRefs } 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";
-import { useIsSubmenu } from "../../utils/useIsSubmenu";
+import * as React from 'react';
+import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';
+import { getNativeElementProps, useEventCallback, useMergedRefs } 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';
+import { useIsSubmenu } from '../../utils/useIsSubmenu';
 /**
  * Create the state required to render MenuPopover.
  *
@@ -15,6 +15,7 @@ import { useIsSubmenu } from "../../utils/useIsSubmenu";
  * @param ref - reference to root HTMLElement of MenuPopover
  */
 export const useMenuPopover_unstable = (props, ref) => {
+  var _a;
   const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);
   const setOpen = useMenuContext_unstable(context => context.setOpen);
   const open = useMenuContext_unstable(context => context.open);
@@ -25,7 +26,7 @@ export const useMenuPopover_unstable = (props, ref) => {
   const {
     dir
   } = useFluent();
-  const CloseArrowKey = dir === "ltr" ? ArrowLeft : ArrowRight;
+  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
   // use DOM listener since react events propagate up the react tree
   // no need to do `contains` logic as menus are all positioned in different portals
   const mouseOverListenerCallbackRef = React.useCallback(node => {
@@ -33,7 +34,7 @@ export const useMenuPopover_unstable = (props, ref) => {
       // Dispatches the custom menu mouse enter event with throttling
       // Needs to trigger on mouseover to support keyboard + mouse together
       // i.e. keyboard opens submenus while cursor is still on the parent
-      node.addEventListener("mouseover", e => {
+      node.addEventListener('mouseover', e => {
         if (canDispatchCustomEventRef.current) {
           canDispatchCustomEventRef.current = false;
           dispatchMenuEnterEvent(popoverRef.current, e);
@@ -47,10 +48,10 @@ export const useMenuPopover_unstable = (props, ref) => {
   React.useEffect(() => {
     () => clearTimeout(throttleDispatchTimerRef.current);
   }, []);
-  const inline = useMenuContext_unstable(context => context.inline) ?? false;
+  const inline = (_a = useMenuContext_unstable(context => context.inline)) !== null && _a !== void 0 ? _a : false;
   const mountNode = useMenuContext_unstable(context => context.mountNode);
-  const rootProps = getNativeElementProps("div", {
-    role: "presentation",
+  const rootProps = getNativeElementProps('div', {
+    role: 'presentation',
     ...props,
     ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)
   });
@@ -63,20 +64,21 @@ export const useMenuPopover_unstable = (props, ref) => {
       setOpen(event, {
         open: true,
         keyboard: false,
-        type: "menuPopoverMouseEnter",
+        type: 'menuPopoverMouseEnter',
         event
       });
     }
-    onMouseEnterOriginal?.(event);
+    onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);
   });
   rootProps.onKeyDown = useEventCallback(event => {
+    var _a;
     const key = event.key;
     if (key === Escape || isSubmenu && key === CloseArrowKey) {
-      if (open && popoverRef.current?.contains(event.target)) {
+      if (open && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
         setOpen(event, {
           open: false,
           keyboard: true,
-          type: "menuPopoverKeyDown",
+          type: 'menuPopoverKeyDown',
           event
         });
         // stop propagation to avoid conflicting with other elements that listen for `Escape`
@@ -88,17 +90,17 @@ export const useMenuPopover_unstable = (props, ref) => {
       setOpen(event, {
         open: false,
         keyboard: true,
-        type: "menuPopoverKeyDown",
+        type: 'menuPopoverKeyDown',
         event
       });
     }
-    onKeyDownOriginal?.(event);
+    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
   });
   return {
     inline,
     mountNode,
     components: {
-      root: "div"
+      root: 'div'
     },
     root: rootProps
   };

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

@@ -1 +1 @@
-{"version":3,"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","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","components","root"],"sources":["../../../src/components/MenuPopover/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';\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 isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\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    ...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    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","_a","mountNode","rootProps","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","components","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/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';\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 isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\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    ...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    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"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"}

package/lib/components/MenuPopover/useMenuPopoverStyles.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["shorthands","mergeClasses","__styles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","De3pzq","sj55zd","Bf4jedk","B2u0y6b","a9b677","E5pizo","z8tnut","z189sj","Byoj8tv","uwmqm3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useMenuPopoverStyles_unstable","state","styles","className"],"sources":["../../../src/components/MenuPopover/useMenuPopoverStyles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n  root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.padding('4px'),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB;AACrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ;AAIzC,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAalB;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,MAAA,GAASlC,SAAA;EACfiC,KAAA,CAAMlC,IAAI,CAACoC,SAAS,GAAGzC,YAAA,CAAaI,qBAAA,CAAsBC,IAAI,EAAEmC,MAAA,CAAOnC,IAAI,EAAEkC,KAAA,CAAMlC,IAAI,CAACoC,SAAS;EACjG,OAAOF,KAAA;AACT"}
+{"version":3,"names":["shorthands","mergeClasses","__styles","tokens","typographyStyles","menuPopoverClassNames","root","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","De3pzq","sj55zd","Bf4jedk","B2u0y6b","a9b677","E5pizo","z8tnut","z189sj","Byoj8tv","uwmqm3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useMenuPopoverStyles_unstable","state","styles","className"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n  root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.padding('4px'),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAahB;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,MAAM,GAAGlC,SAAS,EAAE;EAC1BiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,GAAGzC,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;EAClG,OAAOF,KAAK;AACd,CAAC"}

package/lib/components/MenuSplitGroup/MenuSplitGroup.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { useMenuSplitGroup_unstable } from "./useMenuSplitGroup";
-import { renderMenuSplitGroup_unstable } from "./renderMenuSplitGroup";
-import { useMenuSplitGroupStyles_unstable } from "./useMenuSplitGroupStyles";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { useMenuSplitGroup_unstable } from './useMenuSplitGroup';
+import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';
+import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
  */
@@ -15,5 +15,5 @@ export const MenuSplitGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuSplitGroup_unstable(state);
 });
-MenuSplitGroup.displayName = "MenuSplitGroup";
+MenuSplitGroup.displayName = 'MenuSplitGroup';
 //# sourceMappingURL=MenuSplitGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyleHooks_unstable","MenuSplitGroup","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n\n  const { useMenuSplitGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,gCAAgC,QAAQ;AAGjD,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,cAAA,gBAA2DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvG,MAAMC,KAAA,GAAQR,0BAAA,CAA2BM,KAAA,EAAOC,GAAA;EAEhDL,gCAAA,CAAiCM,KAAA;EAEjC,MAAM;IAAEN,gCAAA,EAAkCO;EAAe,CAAE,GAAGN,4BAAA;EAC9DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,6BAAA,CAA8BO,KAAA;AACvC;AAEAJ,cAAA,CAAeM,WAAW,GAAG"}
+{"version":3,"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyleHooks_unstable","MenuSplitGroup","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n\n  const { useMenuSplitGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,gCAAgC,QAAQ,2BAA2B;AAG5E,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGR,0BAA0B,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEpDL,gCAAgC,CAACM,KAAK,CAAC;EAEvC,MAAM;IAAEN,gCAAgC,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAC5FM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,6BAA6B,CAACO,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFJ,cAAc,CAACM,WAAW,GAAG,gBAAgB"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/MenuSplitGroup/MenuSplitGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;\n"],"mappings":"AAAA"}
+{"version":3,"file":"MenuSplitGroup.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;\n"]}

package/lib/components/MenuSplitGroup/index.js

@@ -1,6 +1,6 @@
-export * from "./MenuSplitGroup";
-export * from "./MenuSplitGroup.types";
-export * from "./renderMenuSplitGroup";
-export * from "./useMenuSplitGroup";
-export * from "./useMenuSplitGroupStyles";
+export * from './MenuSplitGroup';
+export * from './MenuSplitGroup.types';
+export * from './renderMenuSplitGroup';
+export * from './useMenuSplitGroup';
+export * from './useMenuSplitGroupStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/MenuSplitGroup/index.ts"],"sourcesContent":["export * from './MenuSplitGroup';\nexport * from './MenuSplitGroup.types';\nexport * from './renderMenuSplitGroup';\nexport * from './useMenuSplitGroup';\nexport * from './useMenuSplitGroupStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './MenuSplitGroup';\nexport * from './MenuSplitGroup.types';\nexport * from './renderMenuSplitGroup';\nexport * from './useMenuSplitGroup';\nexport * from './useMenuSplitGroupStyles';\n"]}

package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of MenuSplitGroup
  */
@@ -8,6 +8,8 @@ export const renderMenuSplitGroup_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, slotProps.root);
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  });
 };
 //# sourceMappingURL=renderMenuSplitGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderMenuSplitGroup_unstable","state","slots","slotProps","createElement","root"],"sources":["../../../src/components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<MenuSplitGroupSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA+B;EAC3E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA8BE,KAAA;EAE3D,oBAAOH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI;AACvC"}
+{"version":3,"names":["React","getSlots","renderMenuSplitGroup_unstable","state","slots","slotProps","createElement","root"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<MenuSplitGroupSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAsBE,KAAK,CAAC;EAEjE,oBAAOH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI;AAC3C,CAAC"}

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { getNativeElementProps, getRTLSafeKey, useMergedRefs } 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";
+import * as React from 'react';
+import { getNativeElementProps, getRTLSafeKey, useMergedRefs } 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';
 /**
  * Create the state required to render MenuSplitGroup.
  *
@@ -25,32 +25,33 @@ export const useMenuSplitGroup_unstable = (props, ref) => {
     findPrevFocusable
   } = useFocusFinders();
   const onKeyDown = React.useCallback(e => {
-    const activeElement = targetDocument?.activeElement;
+    var _a;
+    const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
     if (!activeElement) {
       return;
     }
-    if (!innerRef.current?.contains(activeElement)) {
+    if (!((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
       return;
     }
     if (e.key === nextArrowKey) {
       const next = findNextFocusable(activeElement, {
         container: innerRef.current
       });
-      next?.focus();
+      next === null || next === void 0 ? void 0 : next.focus();
     }
     if (e.key === prevArrowKey) {
       const prev = findPrevFocusable(activeElement, {
         container: innerRef.current
       });
-      prev?.focus();
+      prev === null || prev === void 0 ? void 0 : prev.focus();
     }
   }, [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey]);
   return {
     components: {
-      root: "div"
+      root: 'div'
     },
-    root: getNativeElementProps("div", {
-      role: "group",
+    root: getNativeElementProps('div', {
+      role: 'group',
       ref: useMergedRefs(ref, innerRef),
       onKeyDown,
       ...props

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

@@ -1 +1 @@
-{"version":3,"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"],"sources":["../../../src/components/MenuSplitGroup/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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,aAAa,QAAQ;AACpE,SAASC,eAAe,QAAQ;AAChC,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAEhD,SAASC,UAAU,EAAEC,SAAS,QAAQ;AAEtC;;;;;;;;;AASA,OAAO,MAAMC,0BAAA,GAA6BA,CACxCC,KAAA,EACAC,GAAA,KACwB;EACxB,MAAMC,QAAA,GAAWZ,KAAA,CAAMa,MAAM;EAC7B,MAAM;IAAEC,GAAA;IAAKC;EAAc,CAAE,GAAGT,SAAA;EAEhC,MAAMU,YAAA,GAAed,aAAA,CAAcK,UAAA,EAAYO,GAAA;EAC/C,MAAMG,YAAA,GAAef,aAAA,CAAcM,SAAA,EAAWM,GAAA;EAE9C,MAAM;IAAEI,iBAAA;IAAmBC;EAAiB,CAAE,GAAGf,eAAA;EAEjD,MAAMgB,SAAA,GAAYpB,KAAA,CAAMqB,WAAW,CAChCC,CAAA,IAAwC;IACvC,MAAMC,aAAA,GAAgBR,cAAA,EAAgBQ,aAAA;IACtC,IAAI,CAACA,aAAA,EAAe;MAClB;IACF;IAEA,IAAI,CAACX,QAAA,CAASY,OAAO,EAAEC,QAAA,CAASF,aAAA,GAAgB;MAC9C;IACF;IAEA,IAAID,CAAA,CAAEI,GAAG,KAAKV,YAAA,EAAc;MAC1B,MAAMW,IAAA,GAAOT,iBAAA,CAAkBK,aAAA,EAA8B;QAAEK,SAAA,EAAWhB,QAAA,CAASY;MAAQ;MAC3FG,IAAA,EAAME,KAAA;IACR;IAEA,IAAIP,CAAA,CAAEI,GAAG,KAAKT,YAAA,EAAc;MAC1B,MAAMa,IAAA,GAAOX,iBAAA,CAAkBI,aAAA,EAA8B;QAAEK,SAAA,EAAWhB,QAAA,CAASY;MAAQ;MAC3FM,IAAA,EAAMD,KAAA;IACR;EACF,GACA,CAACX,iBAAA,EAAmBC,iBAAA,EAAmBJ,cAAA,EAAgBC,YAAA,EAAcC,YAAA,CAAa;EAGpF,OAAO;IACLc,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAM/B,qBAAA,CAAsB,OAAO;MACjCgC,IAAA,EAAM;MACNtB,GAAA,EAAKR,aAAA,CAAcQ,GAAA,EAAKC,QAAA;MACxBQ,SAAA;MACA,GAAGV;IACL;EACF;AACF"}
+{"version":3,"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","_a","current","contains","key","next","container","focus","prev","components","root","role"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,aAAa,QAAQ,2BAA2B;AAC/F,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAEjF,SAASC,UAAU,EAAEC,SAAS,QAAQ,yBAAyB;AAE/D;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAGA,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,QAAQ,GAAGZ,KAAK,CAACa,MAAM,EAAe;EAC5C,MAAM;IAAEC,GAAG;IAAEC;EAAc,CAAE,GAAGT,SAAS,EAAE;EAE3C,MAAMU,YAAY,GAAGd,aAAa,CAACK,UAAU,EAAEO,GAAG,CAAC;EACnD,MAAMG,YAAY,GAAGf,aAAa,CAACM,SAAS,EAAEM,GAAG,CAAC;EAElD,MAAM;IAAEI,iBAAiB;IAAEC;EAAiB,CAAE,GAAGf,eAAe,EAAE;EAElE,MAAMgB,SAAS,GAAGpB,KAAK,CAACqB,WAAW,CAChCC,CAAmC,IAAI;;IACtC,MAAMC,aAAa,GAAGR,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEQ,aAAa;IACnD,IAAI,CAACA,aAAa,EAAE;MAClB;;IAGF,IAAI,EAAC,CAAAC,EAAA,GAAAZ,QAAQ,CAACa,OAAO,cAAAD,EAAA,uBAAAA,EAAA,CAAEE,QAAQ,CAACH,aAAa,CAAC,GAAE;MAC9C;;IAGF,IAAID,CAAC,CAACK,GAAG,KAAKX,YAAY,EAAE;MAC1B,MAAMY,IAAI,GAAGV,iBAAiB,CAACK,aAA4B,EAAE;QAAEM,SAAS,EAAEjB,QAAQ,CAACa;MAAO,CAAE,CAAC;MAC7FG,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,KAAK,EAAE;;IAGf,IAAIR,CAAC,CAACK,GAAG,KAAKV,YAAY,EAAE;MAC1B,MAAMc,IAAI,GAAGZ,iBAAiB,CAACI,aAA4B,EAAE;QAAEM,SAAS,EAAEjB,QAAQ,CAACa;MAAO,CAAE,CAAC;MAC7FM,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAED,KAAK,EAAE;;EAEjB,CAAC,EACD,CAACZ,iBAAiB,EAAEC,iBAAiB,EAAEJ,cAAc,EAAEC,YAAY,EAAEC,YAAY,CAAC,CACnF;EAED,OAAO;IACLe,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEhC,qBAAqB,CAAC,KAAK,EAAE;MACjCiC,IAAI,EAAE,OAAO;MACbvB,GAAG,EAAER,aAAa,CAACQ,GAAG,EAAEC,QAAQ,CAAC;MACjCQ,SAAS;MACT,GAAGV;KACJ;GACF;AACH,CAAC"}

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.js

@@ -1,8 +1,8 @@
-import { __styles, mergeClasses } from "@griffel/react";
-import { tokens } from "@fluentui/react-theme";
-import { menuItemClassNames } from "../MenuItem/useMenuItemStyles";
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
 export const menuSplitGroupClassNames = {
-  root: "fui-MenuSplitGroup"
+  root: 'fui-MenuSplitGroup'
 };
 /**
  * Styles for the root slot