@fluentui/react-menu 9.4.1 → 9.5.1

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

@@ -0,0 +1,124 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-tabster", "@fluentui/react-context-selector", "../../contexts/menuContext", "../../contexts/menuContext"], function (require, exports, tslib_1, React, react_utilities_1, react_tabster_1, react_context_selector_1, menuContext_1, menuContext_2) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuList_unstable = void 0;
+    /**
+     * Returns the props and state required to render the component
+     */
+    var useMenuList_unstable = function (props, ref) {
+        var focusAttributes = react_tabster_1.useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });
+        var findAllFocusable = react_tabster_1.useFocusFinders().findAllFocusable;
+        var menuContext = useMenuContextSelectors();
+        var hasMenuContext = react_context_selector_1.useHasParentContext(menuContext_2.MenuContext);
+        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');
+        }
+        var innerRef = React.useRef(null);
+        var setFocusByFirstCharacter = React.useCallback(function (e, itemEl) {
+            // TODO use some kind of children registration to reduce dependency on DOM roles
+            var acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
+            if (!innerRef.current) {
+                return;
+            }
+            var menuItems = findAllFocusable(innerRef.current, function (el) { return el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1; });
+            var startIndex = menuItems.indexOf(itemEl) + 1;
+            if (startIndex === menuItems.length) {
+                startIndex = 0;
+            }
+            var firstChars = menuItems.map(function (menuItem) { var _a; return (_a = menuItem.textContent) === null || _a === void 0 ? void 0 : _a.charAt(0).toLowerCase(); });
+            var char = e.key.toLowerCase();
+            var getIndexFirstChars = function (start, firstChar) {
+                for (var i = start; i < firstChars.length; i++) {
+                    if (char === firstChars[i]) {
+                        return i;
+                    }
+                }
+                return -1;
+            };
+            // Check remaining slots in the menu
+            var 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 _a = react_utilities_1.useControllableState({
+            state: hasMenuContext ? menuContext.checkedValues : props.checkedValues,
+            defaultState: props.defaultCheckedValues,
+            initialState: {},
+        }), checkedValues = _a[0], setCheckedValues = _a[1];
+        var handleCheckedValueChange = hasMenuContext ? menuContext.onCheckedValueChange : props.onCheckedValueChange;
+        var toggleCheckbox = react_utilities_1.useEventCallback(function (e, name, value, checked) {
+            var checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
+            var newCheckedItems = tslib_1.__spreadArray([], checkedItems);
+            if (checked) {
+                newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
+            }
+            else {
+                newCheckedItems.push(value);
+            }
+            handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, { name: name, checkedItems: newCheckedItems });
+            setCheckedValues(function (s) {
+                var _a;
+                return (tslib_1.__assign(tslib_1.__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a)));
+            });
+        });
+        var selectRadio = react_utilities_1.useEventCallback(function (e, name, value) {
+            var newCheckedItems = [value];
+            setCheckedValues(function (s) {
+                var _a;
+                return (tslib_1.__assign(tslib_1.__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a)));
+            });
+            handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, { name: name, checkedItems: newCheckedItems });
+        });
+        return {
+            components: {
+                root: 'div',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, innerRef), role: 'menu', 'aria-labelledby': menuContext.triggerId }, focusAttributes), props)),
+            hasIcons: menuContext.hasIcons || false,
+            hasCheckmarks: menuContext.hasCheckmarks || false,
+            checkedValues: checkedValues,
+            setFocusByFirstCharacter: setFocusByFirstCharacter,
+            selectRadio: selectRadio,
+            toggleCheckbox: toggleCheckbox,
+        };
+    };
+    exports.useMenuList_unstable = useMenuList_unstable;
+    /**
+     * Adds some sugar to fetching multiple context selector values
+     */
+    var useMenuContextSelectors = function () {
+        var checkedValues = menuContext_1.useMenuContext_unstable(function (context) { return context.checkedValues; });
+        var onCheckedValueChange = menuContext_1.useMenuContext_unstable(function (context) { return context.onCheckedValueChange; });
+        var triggerId = menuContext_1.useMenuContext_unstable(function (context) { return context.triggerId; });
+        var hasIcons = menuContext_1.useMenuContext_unstable(function (context) { return context.hasIcons; });
+        var hasCheckmarks = menuContext_1.useMenuContext_unstable(function (context) { return context.hasCheckmarks; });
+        return {
+            checkedValues: checkedValues,
+            onCheckedValueChange: onCheckedValueChange,
+            triggerId: triggerId,
+            hasIcons: hasIcons,
+            hasCheckmarks: hasCheckmarks,
+        };
+    };
+    /**
+     * Helper function to detect if props and MenuContext values are both used
+     */
+    var usingPropsAndMenuContext = function (props, contextValue, hasMenuContext) {
+        var isUsingPropsAndContext = false;
+        for (var val in contextValue) {
+            if (props[val]) {
+                isUsingPropsAndContext = true;
+            }
+        }
+        return hasMenuContext && isUsingPropsAndContext;
+    };
+});
+//# sourceMappingURL=useMenuList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/useMenuList.ts"],"names":[],"mappings":"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","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 focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n  const hasMenuContext = useHasParentContext(MenuContext);\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: hasMenuContext ? menuContext.checkedValues : props.checkedValues,\n    defaultState: props.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const handleCheckedValueChange = hasMenuContext ? menuContext.onCheckedValueChange : props.onCheckedValueChange;\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"]}

package/lib-amd/components/MenuList/useMenuListContextValues.js

@@ -0,0 +1,20 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuListContextValues_unstable = void 0;
+    function useMenuListContextValues_unstable(state) {
+        var checkedValues = state.checkedValues, hasCheckmarks = state.hasCheckmarks, hasIcons = state.hasIcons, selectRadio = state.selectRadio, setFocusByFirstCharacter = state.setFocusByFirstCharacter, toggleCheckbox = state.toggleCheckbox;
+        // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
+        var menuList = {
+            checkedValues: checkedValues,
+            hasCheckmarks: hasCheckmarks,
+            hasIcons: hasIcons,
+            selectRadio: selectRadio,
+            setFocusByFirstCharacter: setFocusByFirstCharacter,
+            toggleCheckbox: toggleCheckbox,
+        };
+        return { menuList: menuList };
+    }
+    exports.useMenuListContextValues_unstable = useMenuListContextValues_unstable;
+});
+//# sourceMappingURL=useMenuListContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuListContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/useMenuListContextValues.ts"],"names":[],"mappings":";;;;IAEA,SAAgB,iCAAiC,CAAC,KAAoB;QAC5D,IAAA,aAAa,GAAqF,KAAK,cAA1F,EAAE,aAAa,GAAsE,KAAK,cAA3E,EAAE,QAAQ,GAA4D,KAAK,SAAjE,EAAE,WAAW,GAA+C,KAAK,YAApD,EAAE,wBAAwB,GAAqB,KAAK,yBAA1B,EAAE,cAAc,GAAK,KAAK,eAAV,CAAW;QAEhH,mGAAmG;QACnG,IAAM,QAAQ,GAAG;YACf,aAAa,eAAA;YACb,aAAa,eAAA;YACb,QAAQ,UAAA;YACR,WAAW,aAAA;YACX,wBAAwB,0BAAA;YACxB,cAAc,gBAAA;SACf,CAAC;QAEF,OAAO,EAAE,QAAQ,UAAA,EAAE,CAAC;IACtB,CAAC;IAdD,8EAcC","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"]}

package/lib-amd/components/MenuList/useMenuListStyles.js

@@ -0,0 +1,21 @@
+define(["require", "exports", "tslib", "@griffel/react"], function (require, exports, tslib_1, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuListStyles_unstable = exports.menuListClassNames = void 0;
+    exports.menuListClassNames = {
+        root: 'fui-MenuList',
+    };
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign({ display: 'flex', flexDirection: 'column' }, react_1.shorthands.gap('2px')),
+    });
+    /**
+     * Apply styling to the Menu slots based on the state
+     */
+    var useMenuListStyles_unstable = function (state) {
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.menuListClassNames.root, styles.root, state.root.className);
+        return state;
+    };
+    exports.useMenuListStyles_unstable = useMenuListStyles_unstable;
+});
+//# sourceMappingURL=useMenuListStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuListStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts"],"names":[],"mappings":";;;;IAIa,QAAA,kBAAkB,GAAkC;QAC/D,IAAI,EAAE,cAAc;KACrB,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,qBACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,IACpB,kBAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CACzB;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAoB;QAC7D,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,0BAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAChG,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAJW,QAAA,0BAA0B,8BAIrC","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"]}

package/lib-amd/components/MenuPopover/MenuPopover.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useMenuPopover", "./useMenuPopoverStyles", "./renderMenuPopover"], function (require, exports, React, useMenuPopover_1, useMenuPopoverStyles_1, renderMenuPopover_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.MenuPopover = void 0;
+    /**
+     * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
+     */
+    exports.MenuPopover = React.forwardRef(function (props, ref) {
+        var state = useMenuPopover_1.useMenuPopover_unstable(props, ref);
+        useMenuPopoverStyles_1.useMenuPopoverStyles_unstable(state);
+        return renderMenuPopover_1.renderMenuPopover_unstable(state);
+    });
+    exports.MenuPopover.displayName = 'MenuPopover';
+});
+//# sourceMappingURL=MenuPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QACrC,OAAO,8CAA0B,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","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';\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  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"]}

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=MenuPopover.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import 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  /**\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-amd/components/MenuPopover/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./MenuPopover", "./MenuPopover.types", "./renderMenuPopover", "./useMenuPopover", "./useMenuPopoverStyles"], function (require, exports, tslib_1, MenuPopover_1, MenuPopover_types_1, renderMenuPopover_1, useMenuPopover_1, useMenuPopoverStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(MenuPopover_1, exports);
+    tslib_1.__exportStar(MenuPopover_types_1, exports);
+    tslib_1.__exportStar(renderMenuPopover_1, exports);
+    tslib_1.__exportStar(useMenuPopover_1, exports);
+    tslib_1.__exportStar(useMenuPopoverStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC;IACjC,sDAAuC","sourcesContent":["export * from './MenuPopover';\nexport * from './MenuPopover.types';\nexport * from './renderMenuPopover';\nexport * from './useMenuPopover';\nexport * from './useMenuPopoverStyles';\n"]}

package/lib-amd/components/MenuPopover/renderMenuPopover.js

@@ -0,0 +1,18 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-portal"], function (require, exports, tslib_1, React, react_utilities_1, react_portal_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderMenuPopover_unstable = void 0;
+    /**
+     * Render the final JSX of MenuPopover
+     */
+    var renderMenuPopover_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        if (state.inline) {
+            return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
+        }
+        return (React.createElement(react_portal_1.Portal, null,
+            React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))));
+    };
+    exports.renderMenuPopover_unstable = renderMenuPopover_unstable;
+});
+//# sourceMappingURL=renderMenuPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderMenuPopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB;QAC1D,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAE/D,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAAC;SAC3C;QAED,OAAO,CACL,oBAAC,qBAAM;YACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAC3B,CACV,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,0BAA0B,8BAYrC","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>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"]}

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

@@ -0,0 +1,82 @@
+define(["require", "exports", "tslib", "react", "@fluentui/keyboard-keys", "@fluentui/react-utilities", "../../contexts/menuContext", "../../utils/index", "@fluentui/react-shared-contexts", "../../utils/useIsSubmenu"], function (require, exports, tslib_1, React, keyboard_keys_1, react_utilities_1, menuContext_1, index_1, react_shared_contexts_1, useIsSubmenu_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuPopover_unstable = void 0;
+    /**
+     * 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
+     */
+    var useMenuPopover_unstable = function (props, ref) {
+        var _a;
+        var popoverRef = menuContext_1.useMenuContext_unstable(function (context) { return context.menuPopoverRef; });
+        var setOpen = menuContext_1.useMenuContext_unstable(function (context) { return context.setOpen; });
+        var open = menuContext_1.useMenuContext_unstable(function (context) { return context.open; });
+        var openOnHover = menuContext_1.useMenuContext_unstable(function (context) { return context.openOnHover; });
+        var isSubmenu = useIsSubmenu_1.useIsSubmenu();
+        var canDispatchCustomEventRef = React.useRef(true);
+        var throttleDispatchTimerRef = React.useRef(0);
+        var dir = react_shared_contexts_1.useFluent_unstable().dir;
+        var CloseArrowKey = dir === 'ltr' ? keyboard_keys_1.ArrowLeft : keyboard_keys_1.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
+        var mouseOverListenerCallbackRef = React.useCallback(function (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', function (e) {
+                    if (canDispatchCustomEventRef.current) {
+                        canDispatchCustomEventRef.current = false;
+                        index_1.dispatchMenuEnterEvent(popoverRef.current, e);
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore #16889 Node setTimeout type leaking
+                        throttleDispatchTimerRef.current = setTimeout(function () { return (canDispatchCustomEventRef.current = true); }, 250);
+                    }
+                });
+            }
+        }, [popoverRef, throttleDispatchTimerRef]);
+        React.useEffect(function () {
+            (function () { return clearTimeout(throttleDispatchTimerRef.current); });
+        }, []);
+        var inline = (_a = menuContext_1.useMenuContext_unstable(function (context) { return context.inline; })) !== null && _a !== void 0 ? _a : false;
+        var rootProps = react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ role: 'presentation' }, props), { ref: react_utilities_1.useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef) }));
+        var onMouseEnterOriginal = rootProps.onMouseEnter, onKeyDownOriginal = rootProps.onKeyDown;
+        rootProps.onMouseEnter = react_utilities_1.useEventCallback(function (event) {
+            if (openOnHover) {
+                setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event: event });
+            }
+            onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);
+        });
+        rootProps.onKeyDown = react_utilities_1.useEventCallback(function (event) {
+            var _a;
+            var key = event.key;
+            if (key === keyboard_keys_1.Escape || (isSubmenu && key === CloseArrowKey)) {
+                if (open && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                    setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event: event });
+                    // stop propagation to avoid conflicting with other elements that listen for `Escape`
+                    // e,g: Dialog, Popover and Tooltip
+                    event.stopPropagation();
+                }
+            }
+            if (key === keyboard_keys_1.Tab) {
+                setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event: event });
+                event.preventDefault();
+            }
+            onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
+        });
+        return {
+            inline: inline,
+            components: {
+                root: 'div',
+            },
+            root: rootProps,
+        };
+    };
+    exports.useMenuPopover_unstable = useMenuPopover_unstable;
+});
+//# sourceMappingURL=useMenuPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"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","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 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      event.preventDefault();\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"]}

package/lib-amd/components/MenuPopover/useMenuPopoverStyles.js

@@ -0,0 +1,21 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuPopoverStyles_unstable = exports.menuPopoverClassNames = void 0;
+    exports.menuPopoverClassNames = {
+        root: 'fui-MenuPopover',
+    };
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { backgroundColor: react_theme_1.tokens.colorNeutralBackground1, minWidth: '128px', maxWidth: '300px', width: 'max-content', boxShadow: "" + react_theme_1.tokens.shadow16 }), react_1.shorthands.padding('4px')), react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)),
+    });
+    /**
+     * Apply styling to the Menu slots based on the state
+     */
+    var useMenuPopoverStyles_unstable = function (state) {
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.menuPopoverClassNames.root, styles.root, state.root.className);
+        return state;
+    };
+    exports.useMenuPopoverStyles_unstable = useMenuPopoverStyles_unstable;
+});
+//# sourceMappingURL=useMenuPopoverStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuPopoverStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":";;;;IAKa,QAAA,qBAAqB,GAAqC;QACrE,IAAI,EAAE,iBAAiB;KACxB,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,0EACC,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,kBAAkB,CAAC,KACrD,eAAe,EAAE,oBAAM,CAAC,uBAAuB,EAC/C,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,KAAG,oBAAM,CAAC,QAAU,KAC5B,kBAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GACzB,kBAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,oBAAM,CAAC,sBAAsB,CAAC,CACpE;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAAuB;QACnE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,6BAAqB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACnG,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAJW,QAAA,6BAA6B,iCAIxC","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } 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    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  },\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"]}

package/lib-amd/components/MenuSplitGroup/MenuSplitGroup.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useMenuSplitGroup", "./renderMenuSplitGroup", "./useMenuSplitGroupStyles"], function (require, exports, React, useMenuSplitGroup_1, renderMenuSplitGroup_1, useMenuSplitGroupStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.MenuSplitGroup = void 0;
+    /**
+     * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
+     */
+    exports.MenuSplitGroup = React.forwardRef(function (props, ref) {
+        var state = useMenuSplitGroup_1.useMenuSplitGroup_unstable(props, ref);
+        useMenuSplitGroupStyles_1.useMenuSplitGroupStyles_unstable(state);
+        return renderMenuSplitGroup_1.renderMenuSplitGroup_unstable(state);
+    });
+    exports.MenuSplitGroup.displayName = 'MenuSplitGroup';
+});
+//# sourceMappingURL=MenuSplitGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSplitGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,cAAc,GAA6C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClG,IAAM,KAAK,GAAG,8CAA0B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAErD,0DAAgC,CAAC,KAAK,CAAC,CAAC;QACxC,OAAO,oDAA6B,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","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';\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  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"]}

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=MenuSplitGroup.types.js.map

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

@@ -0,0 +1 @@
+{"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-amd/components/MenuSplitGroup/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./MenuSplitGroup", "./MenuSplitGroup.types", "./renderMenuSplitGroup", "./useMenuSplitGroup", "./useMenuSplitGroupStyles"], function (require, exports, tslib_1, MenuSplitGroup_1, MenuSplitGroup_types_1, renderMenuSplitGroup_1, useMenuSplitGroup_1, useMenuSplitGroupStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(MenuSplitGroup_1, exports);
+    tslib_1.__exportStar(MenuSplitGroup_types_1, exports);
+    tslib_1.__exportStar(renderMenuSplitGroup_1, exports);
+    tslib_1.__exportStar(useMenuSplitGroup_1, exports);
+    tslib_1.__exportStar(useMenuSplitGroupStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts"],"names":[],"mappings":";;;IAAA,gDAAiC;IACjC,sDAAuC;IACvC,sDAAuC;IACvC,mDAAoC;IACpC,yDAA0C","sourcesContent":["export * from './MenuSplitGroup';\nexport * from './MenuSplitGroup.types';\nexport * from './renderMenuSplitGroup';\nexport * from './useMenuSplitGroup';\nexport * from './useMenuSplitGroupStyles';\n"]}

package/lib-amd/components/MenuSplitGroup/renderMenuSplitGroup.js

@@ -0,0 +1,14 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderMenuSplitGroup_unstable = void 0;
+    /**
+     * Render the final JSX of MenuSplitGroup
+     */
+    var renderMenuSplitGroup_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
+    };
+    exports.renderMenuSplitGroup_unstable = renderMenuSplitGroup_unstable;
+});
+//# sourceMappingURL=renderMenuSplitGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderMenuSplitGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAA0B;QAChE,IAAA,KAAuB,0BAAQ,CAAsB,KAAK,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAElE,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAAC;IAC5C,CAAC,CAAC;IAJW,QAAA,6BAA6B,iCAIxC","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"]}

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

@@ -0,0 +1,47 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-tabster", "@fluentui/react-shared-contexts", "@fluentui/keyboard-keys"], function (require, exports, tslib_1, React, react_utilities_1, react_tabster_1, react_shared_contexts_1, keyboard_keys_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuSplitGroup_unstable = void 0;
+    /**
+     * 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
+     */
+    var useMenuSplitGroup_unstable = function (props, ref) {
+        var innerRef = React.useRef();
+        var _a = react_shared_contexts_1.useFluent_unstable(), dir = _a.dir, targetDocument = _a.targetDocument;
+        var nextArrowKey = react_utilities_1.getRTLSafeKey(keyboard_keys_1.ArrowRight, dir);
+        var prevArrowKey = react_utilities_1.getRTLSafeKey(keyboard_keys_1.ArrowLeft, dir);
+        var _b = react_tabster_1.useFocusFinders(), findNextFocusable = _b.findNextFocusable, findPrevFocusable = _b.findPrevFocusable;
+        var onKeyDown = React.useCallback(function (e) {
+            var _a;
+            var activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+            if (!activeElement) {
+                return;
+            }
+            if (!((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+                return;
+            }
+            if (e.key === nextArrowKey) {
+                var next = findNextFocusable(activeElement, { container: innerRef.current });
+                next === null || next === void 0 ? void 0 : next.focus();
+            }
+            if (e.key === prevArrowKey) {
+                var 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: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ role: 'group', ref: react_utilities_1.useMergedRefs(ref, innerRef), onKeyDown: onKeyDown }, props)),
+        };
+    };
+    exports.useMenuSplitGroup_unstable = useMenuSplitGroup_unstable;
+});
+//# sourceMappingURL=useMenuSplitGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuSplitGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"names":[],"mappings":";;;;IAOA;;;;;;;;OAQG;IACI,IAAM,0BAA0B,GAAG,UACxC,KAA0B,EAC1B,GAA2B;QAE3B,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAe,CAAC;QACvC,IAAA,KAA0B,0CAAS,EAAE,EAAnC,GAAG,SAAA,EAAE,cAAc,oBAAgB,CAAC;QAE5C,IAAM,YAAY,GAAG,+BAAa,CAAC,0BAAU,EAAE,GAAG,CAAC,CAAC;QACpD,IAAM,YAAY,GAAG,+BAAa,CAAC,yBAAS,EAAE,GAAG,CAAC,CAAC;QAE7C,IAAA,KAA2C,+BAAe,EAAE,EAA1D,iBAAiB,uBAAA,EAAE,iBAAiB,uBAAsB,CAAC;QAEnE,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,UAAC,CAAmC;;YAClC,IAAM,aAAa,GAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,aAAa,CAAC;YACpD,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO;aACR;YAED,IAAI,CAAC,CAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,QAAQ,CAAC,aAAa,CAAC,CAAA,EAAE;gBAC9C,OAAO;aACR;YAED,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE;gBAC1B,IAAM,IAAI,GAAG,iBAAiB,CAAC,aAA4B,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC9F,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,CAAC;aACf;YAED,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE;gBAC1B,IAAM,IAAI,GAAG,iBAAiB,CAAC,aAA4B,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC9F,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,CAAC;aACf;QACH,CAAC,EACD,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,CAAC,CACnF,CAAC;QAEF,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YACD,IAAI,EAAE,uCAAqB,CAAC,KAAK,qBAC/B,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,QAAQ,CAAC,EACjC,SAAS,WAAA,IACN,KAAK,EACR;SACH,CAAC;IACJ,CAAC,CAAC;IA/CW,QAAA,0BAA0B,8BA+CrC","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"]}

package/lib-amd/components/MenuSplitGroup/useMenuSplitGroupStyles.js

@@ -0,0 +1,43 @@
+define(["require", "exports", "@griffel/react", "@fluentui/react-theme", "../MenuItem/useMenuItemStyles"], function (require, exports, react_1, react_theme_1, useMenuItemStyles_1) {
+    "use strict";
+    var _a;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuSplitGroupStyles_unstable = exports.menuSplitGroupClassNames = void 0;
+    exports.menuSplitGroupClassNames = {
+        root: 'fui-MenuSplitGroup',
+    };
+    /**
+     * Styles for the root slot
+     */
+    var useStyles = react_1.makeStyles({
+        root: (_a = {
+                display: 'flex'
+            },
+            _a["& > ." + useMenuItemStyles_1.menuItemClassNames.root + ":nth-child(1)"] = {
+                width: '100%',
+            },
+            _a["& > ." + useMenuItemStyles_1.menuItemClassNames.root + ":nth-child(2)"] = {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                paddingLeft: 0,
+                marginLeft: 'auto',
+                '::before': {
+                    content: '""',
+                    width: react_theme_1.tokens.strokeWidthThin,
+                    height: '24px',
+                    backgroundColor: react_theme_1.tokens.colorNeutralStroke1,
+                },
+            },
+            _a),
+    });
+    /**
+     * Apply styling to the MenuSplitGroup slots based on the state
+     */
+    var useMenuSplitGroupStyles_unstable = function (state) {
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.menuSplitGroupClassNames.root, styles.root, state.root.className);
+        return state;
+    };
+    exports.useMenuSplitGroupStyles_unstable = useMenuSplitGroupStyles_unstable;
+});
+//# sourceMappingURL=useMenuSplitGroupStyles.js.map

package/lib-amd/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuSplitGroupStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":";;;;;IAMa,QAAA,wBAAwB,GAAwC;QAC3E,IAAI,EAAE,oBAAoB;KAC3B,CAAC;IACF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI;gBACF,OAAO,EAAE,MAAM;;YACf,GAAC,UAAQ,sCAAkB,CAAC,IAAI,kBAAe,IAAG;gBAChD,KAAK,EAAE,MAAM;aACd;YACD,GAAC,UAAQ,sCAAkB,CAAC,IAAI,kBAAe,IAAG;gBAChD,mBAAmB,EAAE,CAAC;gBACtB,sBAAsB,EAAE,CAAC;gBACzB,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,MAAM;gBAClB,UAAU,EAAE;oBACV,OAAO,EAAE,IAAI;oBACb,KAAK,EAAE,oBAAM,CAAC,eAAe;oBAC7B,MAAM,EAAE,MAAM;oBACd,eAAe,EAAE,oBAAM,CAAC,mBAAmB;iBAC5C;aACF;eACF;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,gCAAgC,GAAG,UAAC,KAA0B;QACzE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,gCAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtG,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAJW,QAAA,gCAAgC,oCAI3C","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n  root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    [`& > .${menuItemClassNames.root}:nth-child(1)`]: {\n      width: '100%',\n    },\n    [`& > .${menuItemClassNames.root}:nth-child(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      marginLeft: 'auto',\n      '::before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '24px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"]}