@fluentui/react-menu 9.0.0-alpha.8 → 9.0.0-alpha.80

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

@@ -1,25 +1,29 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-tabster", "../../contexts/menuContext"], function (require, exports, tslib_1, React, react_utilities_1, react_tabster_1, menuContext_1) {
+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 });
-    // eslint-disable-next-line deprecation/deprecation
-    var mergeProps = react_utilities_1.makeMergePropsCompat();
+    exports.useMenuList = void 0;
     /**
      * Returns the props and state required to render the component
      */
-    exports.useMenuList = function (props, ref, defaultProps) {
+    var useMenuList = function (props, ref) {
         var focusAttributes = react_tabster_1.useArrowNavigationGroup({ circular: true });
         var findAllFocusable = react_tabster_1.useFocusFinders().findAllFocusable;
         var menuContext = useMenuContextSelectors();
-        if (usingPropsAndMenuContext(props, menuContext)) {
+        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 state = mergeProps(tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)), role: 'menu', 'aria-labelledby': menuContext.triggerId, hasIcons: menuContext.hasIcons, hasCheckmarks: menuContext.hasCheckmarks }, focusAttributes), (menuContext.hasMenuContext && tslib_1.__assign({}, menuContext))), defaultProps, react_utilities_1.resolveShorthandProps(props, []));
-        state.setFocusByFirstCharacter = React.useCallback(function (e, itemEl) {
+        var innerRef = React.useRef(null);
+        var initialState = tslib_1.__assign(tslib_1.__assign({ 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, hasCheckmarks: menuContext.hasCheckmarks }, (hasMenuContext && menuContext)), props);
+        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'];
-            var menuItems = findAllFocusable(state.ref.current, function (el) { return el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1; });
+            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;
@@ -44,13 +48,15 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
             if (index > -1) {
                 menuItems[index].focus();
             }
-        }, [findAllFocusable, state.ref]);
-        var _a = react_utilities_1.useControllableValue(state.checkedValues, state.defaultCheckedValues), checkedValues = _a[0], setCheckedValues = _a[1];
-        state.checkedValues = checkedValues;
-        var onCheckedValueChange = state.onCheckedValueChange;
-        state.toggleCheckbox = react_utilities_1.useEventCallback(function (e, name, value, checked) {
-            var _a, _b;
-            var checkedItems = ((_a = checkedValues) === null || _a === void 0 ? void 0 : _a[name]) || [];
+        }, [findAllFocusable]);
+        var _a = react_utilities_1.useControllableState({
+            state: initialState.checkedValues,
+            defaultState: initialState.defaultCheckedValues,
+            initialState: {},
+        }), checkedValues = _a[0], setCheckedValues = _a[1];
+        var onCheckedValueChange = initialState.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.__spreadArrays(checkedItems);
             if (checked) {
                 newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
@@ -58,28 +64,30 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
             else {
                 newCheckedItems.push(value);
             }
-            (_b = onCheckedValueChange) === null || _b === void 0 ? void 0 : _b(e, name, newCheckedItems);
+            onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, { name: name, checkedItems: newCheckedItems });
             setCheckedValues(function (s) {
                 var _a;
                 return (tslib_1.__assign(tslib_1.__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a)));
             });
         });
-        state.selectRadio = react_utilities_1.useEventCallback(function (e, name, value) {
-            var _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)));
             });
-            (_a = onCheckedValueChange) === null || _a === void 0 ? void 0 : _a(e, name, newCheckedItems);
+            onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, { name: name, checkedItems: newCheckedItems });
         });
+        var state = tslib_1.__assign(tslib_1.__assign({}, initialState), { setFocusByFirstCharacter: setFocusByFirstCharacter,
+            selectRadio: selectRadio,
+            toggleCheckbox: toggleCheckbox, checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {} });
         return state;
     };
+    exports.useMenuList = useMenuList;
     /**
      * Adds some sugar to fetching multiple context selector values
      */
     var useMenuContextSelectors = function () {
-        var hasMenuContext = menuContext_1.useMenuContext(function (context) { return context.hasMenuContext; });
         var checkedValues = menuContext_1.useMenuContext(function (context) { return context.checkedValues; });
         var onCheckedValueChange = menuContext_1.useMenuContext(function (context) { return context.onCheckedValueChange; });
         var defaultCheckedValues = menuContext_1.useMenuContext(function (context) { return context.defaultCheckedValues; });
@@ -87,7 +95,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
         var hasIcons = menuContext_1.useMenuContext(function (context) { return context.hasIcons; });
         var hasCheckmarks = menuContext_1.useMenuContext(function (context) { return context.hasCheckmarks; });
         return {
-            hasMenuContext: hasMenuContext,
             checkedValues: checkedValues,
             onCheckedValueChange: onCheckedValueChange,
             defaultCheckedValues: defaultCheckedValues,
@@ -99,14 +106,14 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
     /**
      * Helper function to detect if props and MenuContext values are both used
      */
-    var usingPropsAndMenuContext = function (props, contextValue) {
+    var usingPropsAndMenuContext = function (props, contextValue, hasMenuContext) {
         var isUsingPropsAndContext = false;
         for (var val in contextValue) {
             if (props[val]) {
                 isUsingPropsAndContext = true;
             }
         }
-        return contextValue.hasMenuContext && isUsingPropsAndContext;
+        return hasMenuContext && isUsingPropsAndContext;
     };
 });
 //# sourceMappingURL=useMenuList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useMenuList.js","sourceRoot":"../src/","sources":["components/MenuList/useMenuList.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  makeMergePropsCompat,\n  resolveShorthandProps,\n  useMergedRefs,\n  useEventCallback,\n  useControllableValue,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { MenuListProps, MenuListState } from './MenuList.types';\nimport { useMenuContext } from '../../contexts/menuContext';\n\n// eslint-disable-next-line deprecation/deprecation\nconst mergeProps = makeMergePropsCompat<MenuListState>();\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList = (\n  props: MenuListProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: MenuListProps,\n): MenuListState => {\n  const focusAttributes = useArrowNavigationGroup({ circular: true });\n  const { findAllFocusable } = useFocusFinders();\n  const menuContext = useMenuContextSelectors();\n\n  if (usingPropsAndMenuContext(props, menuContext)) {\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 state = mergeProps(\n    {\n      ref: useMergedRefs(ref, React.useRef(null)),\n      role: 'menu',\n      'aria-labelledby': menuContext.triggerId,\n      hasIcons: menuContext.hasIcons,\n      hasCheckmarks: menuContext.hasCheckmarks,\n      ...focusAttributes,\n      ...(menuContext.hasMenuContext && { ...menuContext }),\n    },\n    defaultProps,\n    resolveShorthandProps(props, []),\n  );\n\n  state.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      const menuItems = findAllFocusable(\n        state.ref.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, state.ref],\n  );\n\n  const [checkedValues, setCheckedValues] = useControllableValue(state.checkedValues, state.defaultCheckedValues);\n  state.checkedValues = checkedValues;\n  const { onCheckedValueChange } = state;\n  state.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      onCheckedValueChange?.(e, name, newCheckedItems);\n      setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    },\n  );\n\n  state.selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n    const newCheckedItems = [value];\n    setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n    onCheckedValueChange?.(e, name, newCheckedItems);\n  });\n\n  return state;\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const hasMenuContext = useMenuContext(context => context.hasMenuContext);\n  const checkedValues = useMenuContext(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext(context => context.onCheckedValueChange);\n  const defaultCheckedValues = useMenuContext(context => context.defaultCheckedValues);\n  const triggerId = useMenuContext(context => context.triggerId);\n  const hasIcons = useMenuContext(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext(context => context.hasCheckmarks);\n\n  return {\n    hasMenuContext,\n    checkedValues,\n    onCheckedValueChange,\n    defaultCheckedValues,\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 = (props: MenuListProps, contextValue: ReturnType<typeof useMenuContextSelectors>) => {\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 contextValue.hasMenuContext && isUsingPropsAndContext;\n};\n"]}
+{"version":3,"file":"useMenuList.js","sourceRoot":"../src/","sources":["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 } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState, UninitializedMenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n  const focusAttributes = useArrowNavigationGroup({ circular: 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  const initialState: UninitializedMenuListState = {\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,\n    hasCheckmarks: menuContext.hasCheckmarks,\n    ...(hasMenuContext && menuContext),\n    ...props,\n  };\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: initialState.checkedValues,\n    defaultState: initialState.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const { onCheckedValueChange } = initialState;\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      onCheckedValueChange?.(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    onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n  });\n\n  const state = {\n    ...initialState,\n    setFocusByFirstCharacter,\n    selectRadio,\n    toggleCheckbox,\n    checkedValues: checkedValues ?? {},\n  };\n\n  return state;\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n  const checkedValues = useMenuContext(context => context.checkedValues);\n  const onCheckedValueChange = useMenuContext(context => context.onCheckedValueChange);\n  const defaultCheckedValues = useMenuContext(context => context.defaultCheckedValues);\n  const triggerId = useMenuContext(context => context.triggerId);\n  const hasIcons = useMenuContext(context => context.hasIcons);\n  const hasCheckmarks = useMenuContext(context => context.hasCheckmarks);\n\n  return {\n    checkedValues,\n    onCheckedValueChange,\n    defaultCheckedValues,\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.d.ts

@@ -0,0 +1,2 @@
+import type { MenuListContextValues, MenuListState } from './MenuList.types';
+export declare function useMenuListContextValues(state: MenuListState): MenuListContextValues;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuListContextValues.js","sourceRoot":"../src/","sources":["components/MenuList/useMenuListContextValues.ts"],"names":[],"mappings":";;;;IAEA,SAAgB,wBAAwB,CAAC,KAAoB;QAEzD,IAAA,oBAAoB,GAOlB,KAAK,qBAPa,EACpB,aAAa,GAMX,KAAK,cANM,EACb,cAAc,GAKZ,KAAK,eALO,EACd,WAAW,GAIT,KAAK,YAJI,EACX,wBAAwB,GAGtB,KAAK,yBAHiB,EACxB,QAAQ,GAEN,KAAK,SAFC,EACR,aAAa,GACX,KAAK,cADM,CACL;QAEV,mGAAmG;QACnG,IAAM,QAAQ,GAAG;YACf,oBAAoB,sBAAA;YACpB,aAAa,eAAA;YACb,cAAc,gBAAA;YACd,WAAW,aAAA;YACX,wBAAwB,0BAAA;YACxB,QAAQ,UAAA;YACR,aAAa,eAAA;SACd,CAAC;QAEF,OAAO,EAAE,QAAQ,UAAA,EAAE,CAAC;IACtB,CAAC;IAvBD,4DAuBC","sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues(state: MenuListState): MenuListContextValues {\n  const {\n    onCheckedValueChange,\n    checkedValues,\n    toggleCheckbox,\n    selectRadio,\n    setFocusByFirstCharacter,\n    hasIcons,\n    hasCheckmarks,\n  } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const menuList = {\n    onCheckedValueChange,\n    checkedValues,\n    toggleCheckbox,\n    selectRadio,\n    setFocusByFirstCharacter,\n    hasIcons,\n    hasCheckmarks,\n  };\n\n  return { menuList };\n}\n"]}

package/lib-amd/components/MenuPopover/MenuPopover.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+/**
+ * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
+ */
+export declare const MenuPopover: React.ForwardRefExoticComponent<Pick<{
+    root?: import("@fluentui/react-utilities").ShorthandProps<{
+        as?: "div" | undefined;
+    } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ShorthandRenderFunction<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }> | null | undefined;
+    }>;
+}, never> & Pick<{
+    as?: "div" | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+} & {
+    children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ShorthandRenderFunction<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }> | null | undefined;
+}, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as"> & React.RefAttributes<HTMLElement>>;

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(props, ref);
+        useMenuPopoverStyles_1.useMenuPopoverStyles(state);
+        return renderMenuPopover_1.renderMenuPopover(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":"../src/","sources":["components/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,+BAAc,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEzC,2CAAoB,CAAC,KAAK,CAAC,CAAC;QAC5B,OAAO,qCAAiB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuPopover } from './useMenuPopover';\nimport { useMenuPopoverStyles } from './useMenuPopoverStyles';\nimport { renderMenuPopover } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover = React.forwardRef<HTMLElement, MenuPopoverProps>((props, ref) => {\n  const state = useMenuPopover(props, ref);\n\n  useMenuPopoverStyles(state);\n  return renderMenuPopover(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"]}

package/lib-amd/components/MenuPopover/MenuPopover.types.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type MenuPopoverSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+};
+/**
+ * MenuPopover Props
+ */
+export declare type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
+/**
+ * State used in rendering MenuPopover
+ */
+export declare type MenuPopoverState = ComponentState<MenuPopoverSlots> & {
+    /**
+     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order
+     * This option is disregarded for submenus
+     */
+    inline: boolean;
+};

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":"../src/","sources":["components/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: IntrinsicShorthandProps<'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.d.ts

@@ -0,0 +1,4 @@
+export * from './MenuPopover';
+export * from './MenuPopover.types';
+export * from './renderMenuPopover';
+export * from './useMenuPopover';

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

@@ -0,0 +1,9 @@
+define(["require", "exports", "tslib", "./MenuPopover", "./MenuPopover.types", "./renderMenuPopover", "./useMenuPopover"], function (require, exports, tslib_1, MenuPopover_1, MenuPopover_types_1, renderMenuPopover_1, useMenuPopover_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);
+});
+//# sourceMappingURL=index.js.map

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

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

package/lib-amd/components/MenuPopover/renderMenuPopover.d.ts

@@ -0,0 +1,5 @@
+import { MenuPopoverState } from './MenuPopover.types';
+/**
+ * Render the final JSX of MenuPopover
+ */
+export declare const renderMenuPopover: (state: MenuPopoverState) => JSX.Element;

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 = void 0;
+    /**
+     * Render the final JSX of MenuPopover
+     */
+    var renderMenuPopover = 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 = renderMenuPopover;
+});
+//# sourceMappingURL=renderMenuPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderMenuPopover.js","sourceRoot":"../src/","sources":["components/MenuPopover/renderMenuPopover.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,iBAAiB,GAAG,UAAC,KAAuB;QACjD,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,iBAAiB,qBAY5B","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 = (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.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
+/**
+ * Create the state required to render MenuPopover.
+ *
+ * The returned state can be modified with hooks such as useMenuPopoverStyles,
+ * before being passed to renderMenuPopover.
+ *
+ * @param props - props from this instance of MenuPopover
+ * @param ref - reference to root HTMLElement of MenuPopover
+ */
+export declare const useMenuPopover: (props: MenuPopoverProps, ref: React.Ref<HTMLElement>) => MenuPopoverState;

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

@@ -0,0 +1,75 @@
+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 = void 0;
+    /**
+     * Create the state required to render MenuPopover.
+     *
+     * The returned state can be modified with hooks such as useMenuPopoverStyles,
+     * before being passed to renderMenuPopover.
+     *
+     * @param props - props from this instance of MenuPopover
+     * @param ref - reference to root HTMLElement of MenuPopover
+     */
+    var useMenuPopover = function (props, ref) {
+        var _a;
+        var popoverRef = menuContext_1.useMenuContext(function (context) { return context.menuPopoverRef; });
+        var setOpen = menuContext_1.useMenuContext(function (context) { return context.setOpen; });
+        var openOnHover = menuContext_1.useMenuContext(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().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(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 (e) {
+            if (openOnHover) {
+                setOpen(e, { open: true, keyboard: false });
+            }
+            onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
+        });
+        rootProps.onKeyDown = react_utilities_1.useEventCallback(function (e) {
+            var _a;
+            var key = e.key;
+            if (key === keyboard_keys_1.Escape || (isSubmenu && key === CloseArrowKey)) {
+                if ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
+                    setOpen(e, { open: false, keyboard: true });
+                }
+            }
+            if (key === keyboard_keys_1.Tab) {
+                setOpen(e, { open: false, keyboard: true });
+                e.preventDefault();
+            }
+            onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
+        });
+        return {
+            inline: inline,
+            root: rootProps,
+        };
+    };
+    exports.useMenuPopover = useMenuPopover;
+});
+//# sourceMappingURL=useMenuPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuPopover.js","sourceRoot":"../src/","sources":["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 } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { 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,\n * before being passed to renderMenuPopover.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext(context => context.menuPopoverRef);\n  const setOpen = useMenuContext(context => context.setOpen);\n  const openOnHover = useMenuContext(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(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((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, { open: true, keyboard: false });\n    }\n\n    onMouseEnterOriginal?.(e);\n  });\n\n  rootProps.onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    const key = e.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (popoverRef.current?.contains(e.target as HTMLElement)) {\n        setOpen(e, { open: false, keyboard: true });\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(e, { open: false, keyboard: true });\n      e.preventDefault();\n    }\n\n    onKeyDownOriginal?.(e);\n  });\n\n  return {\n    inline,\n    root: rootProps,\n  };\n};\n"]}

package/lib-amd/components/MenuPopover/useMenuPopoverStyles.d.ts

@@ -0,0 +1,5 @@
+import type { MenuPopoverState } from './MenuPopover.types';
+/**
+ * Apply styling to the Menu slots based on the state
+ */
+export declare const useMenuPopoverStyles: (state: MenuPopoverState) => MenuPopoverState;

package/lib-amd/components/{Menu/useMenuStyles.js → MenuPopover/useMenuPopoverStyles.js}

@@ -1,26 +1,27 @@
 define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuPopoverStyles = void 0;
     var useStyles = react_make_styles_1.makeStyles({
         root: function (theme) { return ({
             backgroundColor: theme.alias.color.neutral.neutralBackground1,
             minWidth: '128px',
-            minHeight: '48px',
             maxWidth: '300px',
             width: 'max-content',
             boxShadow: "" + theme.alias.shadow.shadow16,
             paddingTop: '4px',
             paddingBottom: '4px',
+            border: "1px solid " + theme.alias.color.neutral.transparentStroke,
         }); },
     });
     /**
      * Apply styling to the Menu slots based on the state
-     * {@docCategory Menu }
      */
-    exports.useMenuStyles = function (state) {
+    var useMenuPopoverStyles = function (state) {
         var styles = useStyles();
-        state.menuPopup.className = react_make_styles_1.ax(styles.root, state.menuPopup.className);
+        state.root.className = react_make_styles_1.mergeClasses(styles.root, state.root.className);
         return state;
     };
+    exports.useMenuPopoverStyles = useMenuPopoverStyles;
 });
-//# sourceMappingURL=useMenuStyles.js.map
+//# sourceMappingURL=useMenuPopoverStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuPopoverStyles.js","sourceRoot":"../src/","sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":";;;;IAGA,IAAM,SAAS,GAAG,8BAAU,CAAC;QAC3B,IAAI,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACd,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;YAC7D,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE,KAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAU;YAC3C,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,KAAK;YACpB,MAAM,EAAE,eAAa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAmB;SACnE,CAAC,EATa,CASb;KACH,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAAuB;QAC1D,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,gCAAY,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvE,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAJW,QAAA,oBAAoB,wBAI/B","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { MenuPopoverState } from './MenuPopover.types';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${theme.alias.shadow.shadow16}`,\n    paddingTop: '4px',\n    paddingBottom: '4px',\n    border: `1px solid ${theme.alias.color.neutral.transparentStroke}`,\n  }),\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(styles.root, state.root.className);\n  return state;\n};\n"]}

package/lib-amd/components/MenuTrigger/MenuTrigger.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { MenuTriggerProps } from './MenuTrigger.types';
+import type { MenuTriggerProps } from './MenuTrigger.types';
 /**
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
- * {@docCategory MenuTrigger }
  */
-export declare const MenuTrigger: React.ForwardRefExoticComponent<MenuTriggerProps & React.RefAttributes<HTMLElement>>;
+export declare const MenuTrigger: React.FC<MenuTriggerProps>;

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

@@ -1,15 +1,16 @@
-define(["require", "exports", "react", "./useMenuTrigger", "./renderMenuTrigger"], function (require, exports, React, useMenuTrigger_1, renderMenuTrigger_1) {
+define(["require", "exports", "./useMenuTrigger", "./renderMenuTrigger"], function (require, exports, useMenuTrigger_1, renderMenuTrigger_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.MenuTrigger = void 0;
     /**
      * Wraps a trigger element as an only child
      * and adds the necessary event handling to open a popup menu
-     * {@docCategory MenuTrigger }
      */
-    exports.MenuTrigger = React.forwardRef(function (props, ref) {
-        var state = useMenuTrigger_1.useMenuTrigger(props, ref);
+    var MenuTrigger = function (props) {
+        var state = useMenuTrigger_1.useMenuTrigger(props);
         return renderMenuTrigger_1.renderMenuTrigger(state);
-    });
+    };
+    exports.MenuTrigger = MenuTrigger;
     exports.MenuTrigger.displayName = 'MenuTrigger';
 });
 //# sourceMappingURL=MenuTrigger.js.map