@fluentui/react-menu 9.5.3 → 9.6.0

package/lib-commonjs/utils/useOnMenuEnter.js

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dispatchMenuEnterEvent = exports.useOnMenuMouseEnter = exports.MENU_ENTER_EVENT = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
 /**
  * Name of the custom event
  */
-
-
 exports.MENU_ENTER_EVENT = 'fuimenuenter';
 /**
  * This hook works similarly to @see {useOnClickOutside}
@@ -27,25 +22,22 @@ exports.MENU_ENTER_EVENT = 'fuimenuenter';
  * Instead, dispatch custom DOM event from the menu so that it can bubble
  * Each nested menu can use the listener to check if the event is from a child or parent menu
  */
-
 const useOnMenuMouseEnter = options => {
   const {
     refs,
     callback,
     element,
     disabled
-  } = options; // Keep mouse event here because this is essentially a custom 'mouseenter' event
-
+  } = options;
+  // Keep mouse event here because this is essentially a custom 'mouseenter' event
   const listener = react_utilities_1.useEventCallback(ev => {
     var _a;
-
     const popoverRef = refs[0];
-    const someMenuPopover = ev.target; // someMenu is a child -> will always be contained because of vParents
+    const someMenuPopover = ev.target;
+    // someMenu is a child -> will always be contained because of vParents
     // someMenu is a parent -> will always not be contained because no vParent
     // someMenu is the current popover -> it will contain itself
-
     const isOutsidePopover = !react_portal_1.elementContains((_a = popoverRef.current) !== null && _a !== void 0 ? _a : null, someMenuPopover);
-
     if (isOutsidePopover && !disabled) {
       callback(ev);
     }
@@ -55,24 +47,20 @@ const useOnMenuMouseEnter = options => {
     if (element == null) {
       return;
     }
-
     if (!disabled) {
       element.addEventListener(exports.MENU_ENTER_EVENT, listener);
     }
-
     return () => {
       element.removeEventListener(exports.MENU_ENTER_EVENT, listener);
     };
   }, [listener, element, disabled]);
 };
-
 exports.useOnMenuMouseEnter = useOnMenuMouseEnter;
 /**
  * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`
  * @param el element for the event target
  * @param nativeEvent the native mouse event this is mapped to
  */
-
 const dispatchMenuEnterEvent = (el, nativeEvent) => {
   el.dispatchEvent(new CustomEvent(exports.MENU_ENTER_EVENT, {
     bubbles: true,
@@ -81,6 +69,5 @@ const dispatchMenuEnterEvent = (el, nativeEvent) => {
     }
   }));
 };
-
 exports.dispatchMenuEnterEvent = dispatchMenuEnterEvent;
 //# sourceMappingURL=useOnMenuEnter.js.map

package/lib-commonjs/utils/useOnMenuEnter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-menu/src/utils/useOnMenuEnter.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,gBAAA,GAAmB,cAAnB;AAEb;;;;;;;;;;AAUG;;AACI,MAAM,mBAAmB,GAAI,OAAD,IAA8C;EAC/E,MAAM;IAAE,IAAF;IAAQ,QAAR;IAAkB,OAAlB;IAA2B;EAA3B,IAAwC,OAA9C,CAD+E,CAG/E;;EACA,MAAM,QAAQ,GAAG,iBAAA,CAAA,gBAAA,CAAkB,EAAD,IAAmB;;;IACnD,MAAM,UAAU,GAAG,IAAI,CAAC,CAAD,CAAvB;IACA,MAAM,eAAe,GAAG,EAAE,CAAC,MAA3B,CAFmD,CAInD;IACA;IACA;;IACA,MAAM,gBAAgB,GAAG,CAAC,cAAA,CAAA,eAAA,CAAgB,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,EAAlB,GAAsB,IAAtC,EAA4C,eAA5C,CAA1B;;IACA,IAAI,gBAAgB,IAAI,CAAC,QAAzB,EAAmC;MACjC,QAAQ,CAAC,EAAD,CAAR;IACD;EACF,CAXgB,CAAjB;EAaA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB;IACA,IAAI,OAAO,IAAI,IAAf,EAAqB;MACnB;IACD;;IAUD,IAAI,CAAC,QAAL,EAAe;MACb,OAAO,CAAC,gBAAR,CAAyB,OAAA,CAAA,gBAAzB,EAA2C,QAA3C;IACD;;IAED,OAAO,MAAK;MACV,OAAO,CAAC,mBAAR,CAA4B,OAAA,CAAA,gBAA5B,EAA8C,QAA9C;IACD,CAFD;EAGD,CArBD,EAqBG,CAAC,QAAD,EAAW,OAAX,EAAoB,QAApB,CArBH;AAsBD,CAvCM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB;AAyCb;;;;AAIG;;AACI,MAAM,sBAAsB,GAAG,CAAC,EAAD,EAAkB,WAAlB,KAA6C;EACjF,EAAE,CAAC,aAAH,CAAiB,IAAI,WAAJ,CAAgB,OAAA,CAAA,gBAAhB,EAAkC;IAAE,OAAO,EAAE,IAAX;IAAiB,MAAM,EAAE;MAAE;IAAF;EAAzB,CAAlC,CAAjB;AACD,CAFM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';\n\n/**\n * Name of the custom event\n */\nexport const MENU_ENTER_EVENT = 'fuimenuenter';\n\n/**\n * This hook works similarly to @see {useOnClickOutside}\n *\n * Problem: Trying to behave the same as system menus:\n * When the mouse leaves a stack of nested menus the stack should not dismiss.\n * However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.\n *\n * We don't use the native mouseenter event because it would trigger too many times in the document\n * Instead, dispatch custom DOM event from the menu so that it can bubble\n * Each nested menu can use the listener to check if the event is from a child or parent menu\n */\nexport const useOnMenuMouseEnter = (options: UseOnClickOrScrollOutsideOptions) => {\n  const { refs, callback, element, disabled } = options;\n\n  // Keep mouse event here because this is essentially a custom 'mouseenter' event\n  const listener = useEventCallback((ev: MouseEvent) => {\n    const popoverRef = refs[0];\n    const someMenuPopover = ev.target as HTMLElement;\n\n    // someMenu is a child -> will always be contained because of vParents\n    // someMenu is a parent -> will always not be contained because no vParent\n    // someMenu is the current popover -> it will contain itself\n    const isOutsidePopover = !elementContains(popoverRef.current ?? null, someMenuPopover);\n    if (isOutsidePopover && !disabled) {\n      callback(ev);\n    }\n  });\n\n  React.useEffect(() => {\n    // eslint-disable-next-line eqeqeq\n    if (element == null) {\n      return;\n    }\n\n    /**\n     * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n     * evt is being typed as a base class of MouseEvent -> `Event`.\n     * This type is used to override `listener` calls to make TS happy\n     */\n\n    type ListenerOverride = (evt: Event) => void;\n\n    if (!disabled) {\n      element.addEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    }\n\n    return () => {\n      element.removeEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    };\n  }, [listener, element, disabled]);\n};\n\n/**\n * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`\n * @param el element for the event target\n * @param nativeEvent the native mouse event this is mapped to\n */\nexport const dispatchMenuEnterEvent = (el: HTMLElement, nativeEvent: MouseEvent) => {\n  el.dispatchEvent(new CustomEvent(MENU_ENTER_EVENT, { bubbles: true, detail: { nativeEvent } }));\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;AAGaA,wBAAgB,GAAG,cAAc;AAE9C;;;;;;;;;;;AAWO,MAAMC,mBAAmB,GAAIC,OAAyC,IAAI;EAC/E,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,OAAO;IAAEC;EAAQ,CAAE,GAAGJ,OAAO;EAErD;EACA,MAAMK,QAAQ,GAAGC,kCAAgB,CAAEC,EAAc,IAAI;;IACnD,MAAMC,UAAU,GAAGP,IAAI,CAAC,CAAC,CAAC;IAC1B,MAAMQ,eAAe,GAAGF,EAAE,CAACG,MAAqB;IAEhD;IACA;IACA;IACA,MAAMC,gBAAgB,GAAG,CAACC,8BAAe,CAAC,gBAAU,CAACC,OAAO,mCAAI,IAAI,EAAEJ,eAAe,CAAC;IACtF,IAAIE,gBAAgB,IAAI,CAACP,QAAQ,EAAE;MACjCF,QAAQ,CAACK,EAAE,CAAC;;EAEhB,CAAC,CAAC;EAEFO,KAAK,CAACC,SAAS,CAAC,MAAK;IACnB;IACA,IAAIZ,OAAO,IAAI,IAAI,EAAE;MACnB;;IAWF,IAAI,CAACC,QAAQ,EAAE;MACbD,OAAO,CAACa,gBAAgB,CAAClB,wBAAgB,EAAEO,QAA4B,CAAC;;IAG1E,OAAO,MAAK;MACVF,OAAO,CAACc,mBAAmB,CAACnB,wBAAgB,EAAEO,QAA4B,CAAC;IAC7E,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,EAAEF,OAAO,EAAEC,QAAQ,CAAC,CAAC;AACnC,CAAC;AAvCYN,2BAAmB;AAyChC;;;;;AAKO,MAAMoB,sBAAsB,GAAG,CAACC,EAAe,EAAEC,WAAuB,KAAI;EACjFD,EAAE,CAACE,aAAa,CAAC,IAAIC,WAAW,CAACxB,wBAAgB,EAAE;IAAEyB,OAAO,EAAE,IAAI;IAAEC,MAAM,EAAE;MAAEJ;IAAW;EAAE,CAAE,CAAC,CAAC;AACjG,CAAC;AAFYtB,8BAAsB","names":["exports","useOnMenuMouseEnter","options","refs","callback","element","disabled","listener","react_utilities_1","ev","popoverRef","someMenuPopover","target","isOutsidePopover","react_portal_1","current","React","useEffect","addEventListener","removeEventListener","dispatchMenuEnterEvent","el","nativeEvent","dispatchEvent","CustomEvent","bubbles","detail"],"sourceRoot":"../src/","sources":["packages/react-components/react-menu/src/utils/useOnMenuEnter.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';\n\n/**\n * Name of the custom event\n */\nexport const MENU_ENTER_EVENT = 'fuimenuenter';\n\n/**\n * This hook works similarly to @see {useOnClickOutside}\n *\n * Problem: Trying to behave the same as system menus:\n * When the mouse leaves a stack of nested menus the stack should not dismiss.\n * However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.\n *\n * We don't use the native mouseenter event because it would trigger too many times in the document\n * Instead, dispatch custom DOM event from the menu so that it can bubble\n * Each nested menu can use the listener to check if the event is from a child or parent menu\n */\nexport const useOnMenuMouseEnter = (options: UseOnClickOrScrollOutsideOptions) => {\n  const { refs, callback, element, disabled } = options;\n\n  // Keep mouse event here because this is essentially a custom 'mouseenter' event\n  const listener = useEventCallback((ev: MouseEvent) => {\n    const popoverRef = refs[0];\n    const someMenuPopover = ev.target as HTMLElement;\n\n    // someMenu is a child -> will always be contained because of vParents\n    // someMenu is a parent -> will always not be contained because no vParent\n    // someMenu is the current popover -> it will contain itself\n    const isOutsidePopover = !elementContains(popoverRef.current ?? null, someMenuPopover);\n    if (isOutsidePopover && !disabled) {\n      callback(ev);\n    }\n  });\n\n  React.useEffect(() => {\n    // eslint-disable-next-line eqeqeq\n    if (element == null) {\n      return;\n    }\n\n    /**\n     * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n     * evt is being typed as a base class of MouseEvent -> `Event`.\n     * This type is used to override `listener` calls to make TS happy\n     */\n\n    type ListenerOverride = (evt: Event) => void;\n\n    if (!disabled) {\n      element.addEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    }\n\n    return () => {\n      element.removeEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    };\n  }, [listener, element, disabled]);\n};\n\n/**\n * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`\n * @param el element for the event target\n * @param nativeEvent the native mouse event this is mapped to\n */\nexport const dispatchMenuEnterEvent = (el: HTMLElement, nativeEvent: MouseEvent) => {\n  el.dispatchEvent(new CustomEvent(MENU_ENTER_EVENT, { bubbles: true, detail: { nativeEvent } }));\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "9.5.3",
+  "version": "9.6.0",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,21 +29,21 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/scripts": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.3.3",
+    "@fluentui/react-aria": "^9.3.5",
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-context-selector": "^9.1.3",
+    "@fluentui/react-context-selector": "^9.1.5",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-portal": "^9.0.14",
-    "@fluentui/react-positioning": "^9.3.5",
+    "@fluentui/react-portal": "^9.1.0",
+    "@fluentui/react-positioning": "^9.3.7",
     "@fluentui/react-shared-contexts": "^9.1.4",
-    "@fluentui/react-tabster": "^9.3.4",
+    "@fluentui/react-tabster": "^9.3.6",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.3.0",
-    "@griffel/react": "^1.4.2",
+    "@fluentui/react-utilities": "^9.4.0",
+    "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {