@fluentui/react-menu 0.0.0-nightly-20230501-0418.1 → 0.0.0-nightly-20230503-0419.1

package/lib/components/MenuList/useMenuList.js

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

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

@@ -0,0 +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","_menuItem_textContent","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","firstChar","i","index","focus","_props_checkedValues","checkedValues","setCheckedValues","state","undefined","defaultState","defaultCheckedValues","initialState","_props_onCheckedValueChange","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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"}

package/lib/components/MenuList/useMenuListContextValues.js

@@ -0,0 +1,23 @@
+export function useMenuListContextValues_unstable(state) {
+  const {
+    checkedValues,
+    hasCheckmarks,
+    hasIcons,
+    selectRadio,
+    setFocusByFirstCharacter,
+    toggleCheckbox
+  } = state;
+  // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
+  const menuList = {
+    checkedValues,
+    hasCheckmarks,
+    hasIcons,
+    selectRadio,
+    setFocusByFirstCharacter,
+    toggleCheckbox
+  };
+  return {
+    menuList
+  };
+}
+//# sourceMappingURL=useMenuListContextValues.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+import { mergeClasses, __styles, shorthands } from '@griffel/react';
+export const menuListClassNames = {
+  root: 'fui-MenuList'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    i8kkvl: "f16mnhsx",
+    Belr9w4: "fbi42co"
+  }
+}, {
+  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;}"]
+});
+/**
+ * Apply styling to the Menu slots based on the state
+ */
+export const useMenuListStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useMenuListStyles.styles.js.map

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

@@ -0,0 +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.styles.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"}

package/lib/components/MenuPopover/MenuPopover.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","useCustomStyleHook_unstable","MenuPopover","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(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,2BAA2B,QAAQ;AAE5C;;;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;EAE9BL,2BAAA,CAA4B,iCAAiCK,KAAA;EAE7D,OAAON,0BAAA,CAA2BM,KAAA;AACpC;AAEAJ,WAAA,CAAYK,WAAW,GAAG"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MenuPopover.types.js.map

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

@@ -0,0 +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"}

package/lib/components/MenuPopover/index.js

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

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

@@ -0,0 +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.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -0,0 +1,19 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } 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);
+  if (state.inline) {
+    return /*#__PURE__*/createElement(slots.root, slotProps.root);
+  }
+  return /*#__PURE__*/createElement(Portal, {
+    mountNode: state.mountNode
+  }, /*#__PURE__*/createElement(slots.root, slotProps.root));
+};
+//# sourceMappingURL=renderMenuPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","Portal","renderMenuPopover_unstable","state","slots","slotProps","inline","root","mountNode"],"sources":["../../../src/components/MenuPopover/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"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,MAAM,QAAQ;AAEvB;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGL,YAAA,CAA+BG,KAAA;EAE5D,IAAIA,KAAA,CAAMG,MAAM,EAAE;IAChB,oBAAOP,aAdX,CAcYK,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI;EACvC;EAEA,oBACER,aAlBJ,CAkBKE,MAAA;IAAOO,SAAA,EAAWL,KAAA,CAAMK;kBACvBT,aAnBN,CAmBOK,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI;AAGpC"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -0,0 +1,108 @@
+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.
+ *
+ * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
+ * before being passed to renderMenuPopover_unstable.
+ *
+ * @param props - props from this instance of MenuPopover
+ * @param ref - reference to root HTMLElement of MenuPopover
+ */
+export const useMenuPopover_unstable = (props, ref) => {
+  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);
+  const setOpen = useMenuContext_unstable(context => context.setOpen);
+  const open = useMenuContext_unstable(context => context.open);
+  const openOnHover = useMenuContext_unstable(context => context.openOnHover);
+  const isSubmenu = useIsSubmenu();
+  const canDispatchCustomEventRef = React.useRef(true);
+  const throttleDispatchTimerRef = React.useRef(0);
+  const {
+    dir
+  } = useFluent();
+  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 => {
+    if (node) {
+      // 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 => {
+        if (canDispatchCustomEventRef.current) {
+          canDispatchCustomEventRef.current = false;
+          dispatchMenuEnterEvent(popoverRef.current, e);
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore #16889 Node setTimeout type leaking
+          throttleDispatchTimerRef.current = setTimeout(() => canDispatchCustomEventRef.current = true, 250);
+        }
+      });
+    }
+  }, [popoverRef, throttleDispatchTimerRef]);
+  React.useEffect(() => {
+    () => clearTimeout(throttleDispatchTimerRef.current);
+  }, []);
+  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', {
+    role: 'presentation',
+    ...props,
+    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)
+  });
+  const {
+    onMouseEnter: onMouseEnterOriginal,
+    onKeyDown: onKeyDownOriginal
+  } = rootProps;
+  rootProps.onMouseEnter = useEventCallback(event => {
+    if (openOnHover) {
+      setOpen(event, {
+        open: true,
+        keyboard: false,
+        type: 'menuPopoverMouseEnter',
+        event
+      });
+    }
+    onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);
+  });
+  rootProps.onKeyDown = useEventCallback(event => {
+    const key = event.key;
+    if (key === Escape || isSubmenu && key === CloseArrowKey) {
+      var _popoverRef_current;
+      if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target))) {
+        setOpen(event, {
+          open: false,
+          keyboard: true,
+          type: 'menuPopoverKeyDown',
+          event
+        });
+        // stop propagation to avoid conflicting with other elements that listen for `Escape`
+        // e,g: Dialog, Popover and Tooltip
+        event.stopPropagation();
+      }
+    }
+    if (key === Tab) {
+      setOpen(event, {
+        open: false,
+        keyboard: true,
+        type: 'menuPopoverKeyDown',
+        event
+      });
+    }
+    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
+  });
+  return {
+    inline,
+    mountNode,
+    components: {
+      root: 'div'
+    },
+    root: rootProps
+  };
+};
+//# sourceMappingURL=useMenuPopover.js.map

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

@@ -0,0 +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","_useMenuContext_unstable","inline","mountNode","rootProps","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","_popoverRef_current","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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"}

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

@@ -0,0 +1,50 @@
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const menuPopoverClassNames = {
+  root: 'fui-MenuPopover'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    De3pzq: "fxugw4r",
+    sj55zd: "f19n0e5",
+    Bf4jedk: "fkqu4gx",
+    B2u0y6b: "f1kaai3v",
+    a9b677: "f1ahpp82",
+    E5pizo: "f1hg901r",
+    z8tnut: "f10ra9hq",
+    z189sj: ["f8wuabp", "fycuoez"],
+    Byoj8tv: "f1y2xyjm",
+    uwmqm3: ["fycuoez", "f8wuabp"],
+    B4j52fo: "f5ogflp",
+    Bekrc4i: ["f1hqa2wf", "finvdd3"],
+    Bn0qgzm: "f1f09k3d",
+    ibv6hh: ["finvdd3", "f1hqa2wf"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"],
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  }
+}, {
+  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);}"]
+});
+/**
+ * Apply styling to the Menu slots based on the state
+ */
+export const useMenuPopoverStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useMenuPopoverStyles.styles.js.map

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

@@ -0,0 +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.styles.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"}

package/lib/components/MenuSplitGroup/MenuSplitGroup.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyleHook_unstable","MenuSplitGroup","forwardRef","props","ref","state","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.styles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(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,2BAA2B,QAAQ;AAE5C;;;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;EAEjCL,2BAAA,CAA4B,oCAAoCK,KAAA;EAEhE,OAAOP,6BAAA,CAA8BO,KAAA;AACvC;AAEAJ,cAAA,CAAeK,WAAW,GAAG"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MenuSplitGroup.types.js.map

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

@@ -0,0 +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"}

package/lib/components/MenuSplitGroup/index.js

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

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

@@ -0,0 +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.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js

@@ -0,0 +1,13 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } 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);
+};
+//# sourceMappingURL=renderMenuSplitGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","renderMenuSplitGroup_unstable","state","slots","slotProps","root"],"sources":["../../../src/components/MenuSplitGroup/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"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA+B;EAC3E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAkCE,KAAA;EAE/D,oBAAOH,aAZT,CAYUI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI;AACvC"}

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -0,0 +1,61 @@
+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.
+ *
+ * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,
+ * before being passed to renderMenuSplitGroup_unstable.
+ *
+ * @param props - props from this instance of MenuSplitGroup
+ * @param ref - reference to root HTMLElement of MenuSplitGroup
+ */
+export const useMenuSplitGroup_unstable = (props, ref) => {
+  const innerRef = React.useRef();
+  const {
+    dir,
+    targetDocument
+  } = useFluent();
+  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);
+  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);
+  const {
+    findNextFocusable,
+    findPrevFocusable
+  } = useFocusFinders();
+  const onKeyDown = React.useCallback(e => {
+    var _innerRef_current;
+    const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+    if (!activeElement) {
+      return;
+    }
+    if (!((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement))) {
+      return;
+    }
+    if (e.key === nextArrowKey) {
+      const next = findNextFocusable(activeElement, {
+        container: innerRef.current
+      });
+      next === null || next === void 0 ? void 0 : next.focus();
+    }
+    if (e.key === prevArrowKey) {
+      const prev = findPrevFocusable(activeElement, {
+        container: innerRef.current
+      });
+      prev === null || prev === void 0 ? void 0 : prev.focus();
+    }
+  }, [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey]);
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      role: 'group',
+      ref: useMergedRefs(ref, innerRef),
+      onKeyDown,
+      ...props
+    })
+  };
+};
+//# sourceMappingURL=useMenuSplitGroup.js.map