@elliemae/ds-menu-button 3.45.0-rc.0 → 3.45.0-rc.2

package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.js

@@ -0,0 +1,161 @@
+import * as React from "react";
+import React2 from "react";
+import {
+  isFocusableNode,
+  isGroup,
+  isMenuNodeAllowedToHaveChildren,
+  isRootNode
+} from "../../../utils/nodesTypeguardsAndGetters.js";
+import { TREE_STRUCTURE_ERRORS } from "../constants/Errors.js";
+import { MENU_FOCUS_REGIONS } from "../constants/index.js";
+import { getFocusableSiblingsList } from "../utils/nodeGettersByCriterias.js";
+const useFocusTracker = () => {
+  const [focusRegion, setFocusRegion] = React2.useState("");
+  const focusedRegionPerformanceHelper = React2.useRef("");
+  const preventBlurReset = React2.useRef(false);
+  const focusedElementItemNode = React2.useRef(
+    null
+  );
+  const trackFocusTrigger = React2.useCallback(() => {
+    setTimeout(() => {
+      setFocusRegion(MENU_FOCUS_REGIONS.TRIGGER);
+      focusedRegionPerformanceHelper.current = MENU_FOCUS_REGIONS.TRIGGER;
+      focusedElementItemNode.current = null;
+    });
+    return null;
+  }, []);
+  const trackFocusNode = React2.useCallback((nodeToFocus) => {
+    const newFocusRegion = MENU_FOCUS_REGIONS.ITEM_BY_DSID(nodeToFocus.dsId);
+    setTimeout(() => {
+      setFocusRegion(newFocusRegion);
+      focusedRegionPerformanceHelper.current = newFocusRegion;
+      focusedElementItemNode.current = nodeToFocus;
+    });
+  }, []);
+  const trackFocusRegionReset = React2.useCallback(() => {
+    setTimeout(() => {
+      setFocusRegion(MENU_FOCUS_REGIONS.RESET);
+      focusedRegionPerformanceHelper.current = MENU_FOCUS_REGIONS.RESET;
+      focusedElementItemNode.current = null;
+    });
+    return null;
+  }, []);
+  const trackFocusFirstChildItem = React2.useCallback(
+    (itemNode) => {
+      if (!isMenuNodeAllowedToHaveChildren(itemNode)) {
+        console.log("focus first child item > itemNode", itemNode);
+        throw TREE_STRUCTURE_ERRORS.NODE_CANNOT_HAVE_CHILDREN;
+      }
+      if (itemNode.children.length === 0) {
+        console.log(itemNode);
+        throw new Error("No children found in the item node");
+      }
+      const focusableChildrenNodes = getFocusableSiblingsList(itemNode.children[0]);
+      if (focusableChildrenNodes.length === 0) {
+        console.log("focus first child item > itemNode", itemNode);
+        throw new Error("No focusable nodes found in the children of the item node");
+      }
+      const newFocusedNode = focusableChildrenNodes[0];
+      trackFocusNode(newFocusedNode);
+      return newFocusedNode;
+    },
+    [trackFocusNode]
+  );
+  const trackFocusLastChildItem = React2.useCallback(
+    (itemNode) => {
+      if (!isMenuNodeAllowedToHaveChildren(itemNode)) {
+        console.log("focus last child item > itemNode", itemNode);
+        throw new Error("Item node is not allowed to have children");
+      }
+      if (itemNode.children.length === 0) {
+        console.log(itemNode);
+        throw new Error("No children found in the item node");
+      }
+      const focusableChildrenNodes = getFocusableSiblingsList(itemNode.children[0]);
+      if (focusableChildrenNodes.length === 0) {
+        console.log("focus last child item > itemNode", itemNode);
+        throw new Error("No focusable nodes found in the children of the item node");
+      }
+      trackFocusNode(focusableChildrenNodes[focusableChildrenNodes.length - 1]);
+      return focusableChildrenNodes[focusableChildrenNodes.length - 1];
+    },
+    [trackFocusNode]
+  );
+  const trackFocusNextItem = React2.useCallback(
+    (itemNode) => {
+      const focusableSiblingsNodes = getFocusableSiblingsList(itemNode);
+      const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);
+      const nextIndex = currIndex + 1 < focusableSiblingsNodes.length ? currIndex + 1 : 0;
+      const newFocusedNode = focusableSiblingsNodes[nextIndex];
+      trackFocusNode(newFocusedNode);
+      return newFocusedNode;
+    },
+    [trackFocusNode]
+  );
+  const trackFocusPreviousItem = React2.useCallback(
+    (itemNode) => {
+      const focusableSiblingsNodes = getFocusableSiblingsList(itemNode);
+      const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);
+      const previousIndex = currIndex - 1 >= 0 ? currIndex - 1 : focusableSiblingsNodes.length - 1;
+      const newFocusNode = focusableSiblingsNodes[previousIndex];
+      trackFocusNode(newFocusNode);
+      return newFocusNode;
+    },
+    [trackFocusNode]
+  );
+  const trackFocusParentItem = React2.useCallback(
+    (itemNode) => {
+      const { parent } = itemNode;
+      const parentNode = parent;
+      if (!parentNode) {
+        console.log("focus parent item", { itemNode, parentNode });
+        throw new Error(`No parent node found for the item node`);
+      }
+      let nodeToFocus = parentNode;
+      if (isGroup(parentNode)) {
+        const groupParent = parentNode.parent;
+        if (!isFocusableNode(groupParent) && !isRootNode(groupParent)) {
+          console.log("focus parent item", { itemNode, parentNode, groupParent });
+          throw new Error("No focusable parent node found for the item node");
+        }
+        nodeToFocus = groupParent;
+      }
+      const focusableNode = isRootNode(nodeToFocus) ? null : nodeToFocus;
+      const newFocusNode = focusableNode;
+      if (!newFocusNode) trackFocusTrigger();
+      else trackFocusNode(newFocusNode);
+      return focusableNode;
+    },
+    [trackFocusNode, trackFocusTrigger]
+  );
+  return React2.useMemo(
+    () => ({
+      preventBlurReset,
+      focusRegion,
+      focusedElementItemNode,
+      trackFocusTrigger,
+      trackFocusNode,
+      trackFocusRegionReset,
+      trackFocusFirstChildItem,
+      trackFocusLastChildItem,
+      trackFocusNextItem,
+      trackFocusPreviousItem,
+      trackFocusParentItem
+    }),
+    [
+      focusRegion,
+      trackFocusFirstChildItem,
+      trackFocusLastChildItem,
+      trackFocusNextItem,
+      trackFocusNode,
+      trackFocusParentItem,
+      trackFocusPreviousItem,
+      trackFocusRegionReset,
+      trackFocusTrigger
+    ]
+  );
+};
+export {
+  useFocusTracker
+};
+//# sourceMappingURL=useFocusTracker.js.map

package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useFocusTracker.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-console */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isFocusableNode,\n  isGroup,\n  isMenuNodeAllowedToHaveChildren,\n  isRootNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { TREE_STRUCTURE_ERRORS } from '../constants/Errors.js';\nimport { MENU_FOCUS_REGIONS } from '../constants/index.js';\nimport { getFocusableSiblingsList } from '../utils/nodeGettersByCriterias.js';\n\ntype MenuFocusRegionsValues = (typeof MENU_FOCUS_REGIONS)[keyof typeof MENU_FOCUS_REGIONS];\n// if MenuFocusRegionsValues may be a string or a function that returns a string, we want only the resolved strings\ntype ValidRegionsValues<T extends MenuFocusRegionsValues = MenuFocusRegionsValues> = T extends string\n  ? T\n  : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends (...args: any) => any\n  ? ReturnType<T>\n  : never;\n\nexport const useFocusTracker = () => {\n  const [focusRegion, setFocusRegion] = React.useState<ValidRegionsValues>('');\n  // we want to keep the focus region trackers as stable as possible to avoid unnecessary re-renders\n  //  there is no need to change the trackers reference when the focus region changes,\n  //   since changing the focus region is always triggered by a final user interaction (so after reacts reconciliation)\n  const focusedRegionPerformanceHelper = React.useRef('') as React.MutableRefObject<ValidRegionsValues>;\n  const preventBlurReset = React.useRef(false);\n\n  const focusedElementItemNode = React.useRef(\n    null,\n  ) as React.MutableRefObject<DSMenuButtonT.PseudoFocusableMenuNodes | null>;\n  const trackFocusTrigger = React.useCallback(() => {\n    // we need to guarantee that the focus is set after the current event loop or else bubbling events will trigger on the new focused element\n    setTimeout(() => {\n      setFocusRegion(MENU_FOCUS_REGIONS.TRIGGER);\n      focusedRegionPerformanceHelper.current = MENU_FOCUS_REGIONS.TRIGGER;\n      focusedElementItemNode.current = null;\n    });\n    return null;\n  }, []);\n  const trackFocusNode = React.useCallback((nodeToFocus: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n    const newFocusRegion = MENU_FOCUS_REGIONS.ITEM_BY_DSID(nodeToFocus.dsId);\n    // we need to guarantee that the focus is set after the current event loop or else bubbling events will trigger on the new focused element\n    setTimeout(() => {\n      setFocusRegion(newFocusRegion);\n      focusedRegionPerformanceHelper.current = newFocusRegion;\n      // eslint-disable-next-line prefer-destructuring\n      focusedElementItemNode.current = nodeToFocus;\n    });\n  }, []);\n\n  const trackFocusRegionReset = React.useCallback(() => {\n    // we need to guarantee that the focus is set after the current event loop or else bubbling events will trigger on the new focused element\n    setTimeout(() => {\n      setFocusRegion(MENU_FOCUS_REGIONS.RESET);\n      focusedRegionPerformanceHelper.current = MENU_FOCUS_REGIONS.RESET;\n      focusedElementItemNode.current = null;\n    });\n    return null;\n  }, []);\n\n  const trackFocusFirstChildItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      if (!isMenuNodeAllowedToHaveChildren(itemNode)) {\n        console.log('focus first child item > itemNode', itemNode);\n        throw TREE_STRUCTURE_ERRORS.NODE_CANNOT_HAVE_CHILDREN;\n      }\n      if (itemNode.children.length === 0) {\n        console.log(itemNode);\n        throw new Error('No children found in the item node');\n      }\n      const focusableChildrenNodes = getFocusableSiblingsList(itemNode.children[0]);\n      if (focusableChildrenNodes.length === 0) {\n        console.log('focus first child item > itemNode', itemNode);\n        throw new Error('No focusable nodes found in the children of the item node');\n      }\n\n      const newFocusedNode = focusableChildrenNodes[0];\n      trackFocusNode(newFocusedNode);\n      return newFocusedNode;\n    },\n    [trackFocusNode],\n  );\n\n  const trackFocusLastChildItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      if (!isMenuNodeAllowedToHaveChildren(itemNode)) {\n        console.log('focus last child item > itemNode', itemNode);\n        throw new Error('Item node is not allowed to have children');\n      }\n      if (itemNode.children.length === 0) {\n        console.log(itemNode);\n        throw new Error('No children found in the item node');\n      }\n      const focusableChildrenNodes = getFocusableSiblingsList(itemNode.children[0]);\n      if (focusableChildrenNodes.length === 0) {\n        console.log('focus last child item > itemNode', itemNode);\n        throw new Error('No focusable nodes found in the children of the item node');\n      }\n      trackFocusNode(focusableChildrenNodes[focusableChildrenNodes.length - 1]);\n      return focusableChildrenNodes[focusableChildrenNodes.length - 1];\n    },\n    [trackFocusNode],\n  );\n\n  const trackFocusNextItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const focusableSiblingsNodes = getFocusableSiblingsList(itemNode);\n      // we find the current item node index in the focusableSiblingsNodes array\n      const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);\n\n      const nextIndex = currIndex + 1 < focusableSiblingsNodes.length ? currIndex + 1 : 0;\n      const newFocusedNode = focusableSiblingsNodes[nextIndex];\n      trackFocusNode(newFocusedNode);\n\n      return newFocusedNode;\n    },\n    [trackFocusNode],\n  );\n\n  const trackFocusPreviousItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const focusableSiblingsNodes = getFocusableSiblingsList(itemNode);\n      // we find the current item node index in the focusableSiblingsNodes array\n      const currIndex = focusableSiblingsNodes.findIndex((node) => node.dsId === itemNode.dsId);\n\n      const previousIndex = currIndex - 1 >= 0 ? currIndex - 1 : focusableSiblingsNodes.length - 1;\n      const newFocusNode = focusableSiblingsNodes[previousIndex];\n      trackFocusNode(newFocusNode);\n      return newFocusNode;\n    },\n    [trackFocusNode],\n  );\n\n  const trackFocusParentItem = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => {\n      const { parent } = itemNode;\n      // this typecast is required because we are reading the parent property from the itemNode\n      // while this function can receive any PseudoFocusableMenuNodes,\n      //   the parent property may be a non-pseudo focusable node (specifically when the parent property is group node)\n      const parentNode = parent;\n      if (!parentNode) {\n        console.log('focus parent item', { itemNode, parentNode });\n        throw new Error(`No parent node found for the item node`);\n      }\n\n      let nodeToFocus: DSMenuButtonT.PseudoFocusableMenuNodes | null = parentNode;\n      // if parent is SingleSelectGroupNode then we can't focus it\n      if (isGroup(parentNode)) {\n        const groupParent = parentNode.parent;\n        if (!isFocusableNode(groupParent) && !isRootNode(groupParent)) {\n          console.log('focus parent item', { itemNode, parentNode, groupParent });\n          throw new Error('No focusable parent node found for the item node');\n        }\n        nodeToFocus = groupParent;\n      }\n\n      const focusableNode = isRootNode(nodeToFocus) ? null : nodeToFocus;\n      const newFocusNode = focusableNode;\n      if (!newFocusNode) trackFocusTrigger();\n      else trackFocusNode(newFocusNode);\n\n      return focusableNode;\n    },\n    [trackFocusNode, trackFocusTrigger],\n  );\n\n  return React.useMemo(\n    () => ({\n      preventBlurReset,\n      focusRegion,\n      focusedElementItemNode,\n      trackFocusTrigger,\n      trackFocusNode,\n      trackFocusRegionReset,\n      trackFocusFirstChildItem,\n      trackFocusLastChildItem,\n      trackFocusNextItem,\n      trackFocusPreviousItem,\n      trackFocusParentItem,\n    }),\n    [\n      focusRegion,\n      trackFocusFirstChildItem,\n      trackFocusLastChildItem,\n      trackFocusNextItem,\n      trackFocusNode,\n      trackFocusParentItem,\n      trackFocusPreviousItem,\n      trackFocusRegionReset,\n      trackFocusTrigger,\n    ],\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useGlobalEvents.js

@@ -0,0 +1,59 @@
+import * as React from "react";
+import React2 from "react";
+const useGlobalEvents = ({
+  menuOpenStatus,
+  handleChangeOpenedSubItems,
+  propsWithDefault
+}) => {
+  const { onOpinionatedClose, isMenuOpen } = menuOpenStatus;
+  const { buttonDOMNodeRef } = propsWithDefault;
+  const mainMenuRef = React2.useRef(null);
+  const submenusRefs = React2.useRef({});
+  const handleSubmenusRefChange = React2.useCallback(
+    (htmlNode, dsId) => {
+      if (htmlNode) {
+        submenusRefs.current[dsId] = htmlNode;
+      } else {
+        delete submenusRefs.current[dsId];
+      }
+    },
+    []
+  );
+  React2.useEffect(() => {
+    const closeMenuAndSubmenus = (e) => {
+      handleChangeOpenedSubItems([], { itemNode: null, event: e });
+      onOpinionatedClose({ skipFocus: true });
+    };
+    const detectIfClickIsOutsideMenuAndCloseIfSo = (e) => {
+      if (!isMenuOpen) return;
+      if (buttonDOMNodeRef.current === e.target) return;
+      const isClickInsideMainMenu = mainMenuRef.current?.contains(e.target);
+      if (isClickInsideMainMenu) return;
+      const submenuNodesToCheck = Object.values(submenusRefs.current).filter(Boolean);
+      const isClickInsideAnySubmenu = submenuNodesToCheck.some((node) => node.contains(e.target));
+      if (isClickInsideAnySubmenu) return;
+      handleChangeOpenedSubItems([], { itemNode: null, event: e });
+      onOpinionatedClose({ skipFocus: true });
+    };
+    window.addEventListener("blur", closeMenuAndSubmenus);
+    document.addEventListener("mousedown", detectIfClickIsOutsideMenuAndCloseIfSo);
+    document.addEventListener("touchstart", detectIfClickIsOutsideMenuAndCloseIfSo);
+    return () => {
+      window.removeEventListener("blur", closeMenuAndSubmenus);
+      document.removeEventListener("mousedown", detectIfClickIsOutsideMenuAndCloseIfSo);
+      document.removeEventListener("touchstart", detectIfClickIsOutsideMenuAndCloseIfSo);
+    };
+  }, [buttonDOMNodeRef, handleChangeOpenedSubItems, isMenuOpen, onOpinionatedClose]);
+  return React2.useMemo(
+    () => ({
+      mainMenuRef,
+      submenusRefs,
+      handleSubmenusRefChange
+    }),
+    [handleSubmenusRefChange]
+  );
+};
+export {
+  useGlobalEvents
+};
+//# sourceMappingURL=useGlobalEvents.js.map

package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useGlobalEvents.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useGlobalEvents.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport type { useMenuOpenStatus } from './useMenuOpenStatus.js';\nimport type { DSMenuBehaviouralContextProviderT } from '../react-desc-prop-types.js';\n\ntype UseGlobalEventsConfig = {\n  menuOpenStatus: ReturnType<typeof useMenuOpenStatus>;\n  handleChangeOpenedSubItems: Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange'];\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n};\n\nexport const useGlobalEvents = ({\n  menuOpenStatus,\n  handleChangeOpenedSubItems,\n  propsWithDefault,\n}: UseGlobalEventsConfig) => {\n  const { onOpinionatedClose, isMenuOpen } = menuOpenStatus;\n  const { buttonDOMNodeRef } = propsWithDefault;\n  const mainMenuRef = React.useRef<HTMLDivElement | null>(null);\n  // we are using \"portal\" but then we check the native evenet to check if \"on click outside\" the menu\n  //  for such reason, we need to track the current HTML NODES of the submenus (topmost parent)\n  //  this will allow us to check if the click event is outside the menu or any of it's submenus\n  const submenusRefs = React.useRef<Record<DSMenuButtonT.WithSubmenuMenuNodes['dsId'], HTMLElement>>({});\n  const handleSubmenusRefChange = React.useCallback(\n    (htmlNode: HTMLElement | null, dsId: DSMenuButtonT.WithSubmenuMenuNodes['dsId']) => {\n      if (htmlNode) {\n        submenusRefs.current[dsId] = htmlNode;\n      } else {\n        delete submenusRefs.current[dsId];\n      }\n    },\n    [],\n  );\n  React.useEffect(() => {\n    // when the window loses focus, close all the menus and submenus\n    const closeMenuAndSubmenus = (e: FocusEvent) => {\n      handleChangeOpenedSubItems([], { itemNode: null, event: e });\n      onOpinionatedClose({ skipFocus: true });\n    };\n    // when the user clicks \"outside\" the menu and submenus, close all the menus and submenus\n    const detectIfClickIsOutsideMenuAndCloseIfSo = (e: MouseEvent | TouchEvent) => {\n      // we are running this on literally ALL the clicks that happen on the window\n      //  we don't want to be consuming resources that are not strictly necessary\n      // if the main menu is not open, we don't need to check if the click is outside the menu ofc\n      if (!isMenuOpen) return;\n      // we discard the fastest to check \"trigger\" click first\n      if (buttonDOMNodeRef.current === e.target) return;\n      // fastest check is the mainmenu, cuz we don't loop through all the submenus\n      const isClickInsideMainMenu = mainMenuRef.current?.contains(e.target as Node);\n      if (isClickInsideMainMenu) return;\n      const submenuNodesToCheck = Object.values(submenusRefs.current).filter(Boolean);\n      // we check if the event.target is a child of any of our known HTML nodes (via native .contains)\n      const isClickInsideAnySubmenu = submenuNodesToCheck.some((node) => node.contains(e.target as Node));\n      if (isClickInsideAnySubmenu) return;\n      handleChangeOpenedSubItems([], { itemNode: null, event: e });\n      onOpinionatedClose({ skipFocus: true });\n    };\n\n    window.addEventListener('blur', closeMenuAndSubmenus);\n    document.addEventListener('mousedown', detectIfClickIsOutsideMenuAndCloseIfSo);\n    document.addEventListener('touchstart', detectIfClickIsOutsideMenuAndCloseIfSo);\n    return () => {\n      window.removeEventListener('blur', closeMenuAndSubmenus);\n      document.removeEventListener('mousedown', detectIfClickIsOutsideMenuAndCloseIfSo);\n      document.removeEventListener('touchstart', detectIfClickIsOutsideMenuAndCloseIfSo);\n    };\n  }, [buttonDOMNodeRef, handleChangeOpenedSubItems, isMenuOpen, onOpinionatedClose]);\n\n  return React.useMemo(\n    () => ({\n      mainMenuRef,\n      submenusRefs,\n      handleSubmenusRefChange,\n    }),\n    [handleSubmenusRefChange],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAWX,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAC3B,QAAM,EAAE,oBAAoB,WAAW,IAAI;AAC3C,QAAM,EAAE,iBAAiB,IAAI;AAC7B,QAAM,cAAcA,OAAM,OAA8B,IAAI;AAI5D,QAAM,eAAeA,OAAM,OAAwE,CAAC,CAAC;AACrG,QAAM,0BAA0BA,OAAM;AAAA,IACpC,CAAC,UAA8B,SAAqD;AAClF,UAAI,UAAU;AACZ,qBAAa,QAAQ,IAAI,IAAI;AAAA,MAC/B,OAAO;AACL,eAAO,aAAa,QAAQ,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACA,EAAAA,OAAM,UAAU,MAAM;AAEpB,UAAM,uBAAuB,CAAC,MAAkB;AAC9C,iCAA2B,CAAC,GAAG,EAAE,UAAU,MAAM,OAAO,EAAE,CAAC;AAC3D,yBAAmB,EAAE,WAAW,KAAK,CAAC;AAAA,IACxC;AAEA,UAAM,yCAAyC,CAAC,MAA+B;AAI7E,UAAI,CAAC,WAAY;AAEjB,UAAI,iBAAiB,YAAY,EAAE,OAAQ;AAE3C,YAAM,wBAAwB,YAAY,SAAS,SAAS,EAAE,MAAc;AAC5E,UAAI,sBAAuB;AAC3B,YAAM,sBAAsB,OAAO,OAAO,aAAa,OAAO,EAAE,OAAO,OAAO;AAE9E,YAAM,0BAA0B,oBAAoB,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE,MAAc,CAAC;AAClG,UAAI,wBAAyB;AAC7B,iCAA2B,CAAC,GAAG,EAAE,UAAU,MAAM,OAAO,EAAE,CAAC;AAC3D,yBAAmB,EAAE,WAAW,KAAK,CAAC;AAAA,IACxC;AAEA,WAAO,iBAAiB,QAAQ,oBAAoB;AACpD,aAAS,iBAAiB,aAAa,sCAAsC;AAC7E,aAAS,iBAAiB,cAAc,sCAAsC;AAC9E,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,oBAAoB;AACvD,eAAS,oBAAoB,aAAa,sCAAsC;AAChF,eAAS,oBAAoB,cAAc,sCAAsC;AAAA,IACnF;AAAA,EACF,GAAG,CAAC,kBAAkB,4BAA4B,YAAY,kBAAkB,CAAC;AAEjF,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import React2 from "react";
+import { uid } from "uid";
+import {
+  DSMenuBehaviouralContextProviderPropTypesSchema,
+  defaultProps
+} from "../react-desc-prop-types.js";
+import { useFocusTracker } from "./useFocusTracker.js";
+import { useMenuItemEventsHandlers } from "./useMenuItemEventsHandlers.js";
+import { useMenuOpenStatus } from "./useMenuOpenStatus.js";
+import { useValidateProps } from "./useValidateProps.js";
+import { useGlobalEvents } from "./useGlobalEvents.js";
+const useMenuBehaviouralContextProvider = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(
+    propsFromUser,
+    defaultProps
+  );
+  useValidateProps(propsWithDefault, DSMenuBehaviouralContextProviderPropTypesSchema);
+  const { onDisplayedSubmenuChange } = propsWithDefault;
+  const instanceUid = React2.useMemo(() => `ds-menu-behavioural-context-provider-${uid(5)}`, []);
+  const [openedSubItems, setOpenedSubItems] = React2.useState([]);
+  const handleChangeOpenedSubItems = React2.useCallback(
+    (newOpenedItems, metainfo) => {
+      setOpenedSubItems(newOpenedItems);
+      onDisplayedSubmenuChange?.(newOpenedItems, metainfo);
+    },
+    [onDisplayedSubmenuChange]
+  );
+  const focusTrackers = useFocusTracker();
+  const menuOpenStatus = useMenuOpenStatus({ propsWithDefault, focusTrackers });
+  const menuItemEventsHandlers = useMenuItemEventsHandlers({
+    propsWithDefault,
+    focusTrackers,
+    menuOpenStatus,
+    handleChangeOpenedSubItems
+  });
+  const globalEventsHelpers = useGlobalEvents({ menuOpenStatus, handleChangeOpenedSubItems, propsWithDefault });
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      instanceUid,
+      ...focusTrackers,
+      ...menuOpenStatus,
+      menuItemEventsHandlers,
+      openedSubItems,
+      handleChangeOpenedSubItems,
+      globalEventsHelpers
+    }),
+    [
+      propsWithDefault,
+      instanceUid,
+      focusTrackers,
+      menuOpenStatus,
+      menuItemEventsHandlers,
+      openedSubItems,
+      handleChangeOpenedSubItems,
+      globalEventsHelpers
+    ]
+  );
+};
+export {
+  useMenuBehaviouralContextProvider
+};
+//# sourceMappingURL=useMenuBehaviouralContextProvider.js.map

package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport type { DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  DSMenuBehaviouralContextProviderPropTypesSchema,\n  defaultProps,\n  type DSMenuBehaviouralContextProviderT,\n} from '../react-desc-prop-types.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useMenuItemEventsHandlers } from './useMenuItemEventsHandlers.js';\nimport { useMenuOpenStatus } from './useMenuOpenStatus.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useGlobalEvents } from './useGlobalEvents.js';\n\nexport interface MenuBehaviouralContextProviderCTX\n  extends ReturnType<typeof useFocusTracker>,\n    ReturnType<typeof useMenuOpenStatus> {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n  instanceUid: string;\n  menuItemEventsHandlers: ReturnType<typeof useMenuItemEventsHandlers>;\n  openedSubItems: DSMenuButtonT.WithSubmenuMenuNodes[];\n  handleChangeOpenedSubItems: Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange'];\n  globalEventsHelpers: ReturnType<typeof useGlobalEvents>;\n}\n\nexport const useMenuBehaviouralContextProvider = (propsFromUser: DSMenuBehaviouralContextProviderT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuBehaviouralContextProviderT.InternalProps>(\n    propsFromUser,\n    defaultProps,\n  );\n  useValidateProps(propsWithDefault, DSMenuBehaviouralContextProviderPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  // NO XSTYLED PROPS\n  // this is 100% a pure logic context provider, it's not a visual component\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { onDisplayedSubmenuChange } = propsWithDefault;\n  const instanceUid = React.useMemo(() => `ds-menu-behavioural-context-provider-${uid(5)}`, []);\n  const [openedSubItems, setOpenedSubItems] = React.useState<DSMenuButtonT.WithSubmenuMenuNodes[]>([]);\n\n  const handleChangeOpenedSubItems = React.useCallback<\n    Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange']\n  >(\n    (newOpenedItems, metainfo) => {\n      setOpenedSubItems(newOpenedItems);\n      onDisplayedSubmenuChange?.(newOpenedItems, metainfo);\n    },\n    [onDisplayedSubmenuChange],\n  );\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const focusTrackers = useFocusTracker();\n  const menuOpenStatus = useMenuOpenStatus({ propsWithDefault, focusTrackers });\n\n  // why item events handlers declared in the menu behaviour context provider and not in the menu item itself?\n  //  1 - each menu item depending on it's own type (single select, multiple select, with submenu) will have different behaviours\n  //      having each menu item to declare it's own events handlers would make the single event handler way easier to create per se\n  //      BUT we would lose the big picture of how the menu items are interacting with each other\n  //  2 - having each item to declare it's own event handler repeatdly is a waste of resources (even if it's a useless micro-optimization, it hurts me)\n  const menuItemEventsHandlers = useMenuItemEventsHandlers({\n    propsWithDefault,\n    focusTrackers,\n    menuOpenStatus,\n    handleChangeOpenedSubItems,\n  });\n\n  // handle \"onClickOutside\" + on window blur...\n  // the helpers contain a way to register the submenu refs/mainmenu refs, used in checking \"if click is outside\"\n  const globalEventsHelpers = useGlobalEvents({ menuOpenStatus, handleChangeOpenedSubItems, propsWithDefault });\n\n  return React.useMemo<MenuBehaviouralContextProviderCTX>(\n    () => ({\n      propsWithDefault,\n      instanceUid,\n      ...focusTrackers,\n      ...menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    }),\n    [\n      propsWithDefault,\n      instanceUid,\n      focusTrackers,\n      menuOpenStatus,\n      menuItemEventsHandlers,\n      openedSubItems,\n      handleChangeOpenedSubItems,\n      globalEventsHelpers,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oCAAoC;AAC7C,OAAOA,YAAW;AAClB,SAAS,WAAW;AAEpB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAazB,MAAM,oCAAoC,CAAC,kBAA2D;AAI3G,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,+CAA+C;AAWlF,QAAM,EAAE,yBAAyB,IAAI;AACrC,QAAM,cAAcA,OAAM,QAAQ,MAAM,wCAAwC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5F,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAA+C,CAAC,CAAC;AAEnG,QAAM,6BAA6BA,OAAM;AAAA,IAGvC,CAAC,gBAAgB,aAAa;AAC5B,wBAAkB,cAAc;AAChC,iCAA2B,gBAAgB,QAAQ;AAAA,IACrD;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AAKA,QAAM,gBAAgB,gBAAgB;AACtC,QAAM,iBAAiB,kBAAkB,EAAE,kBAAkB,cAAc,CAAC;AAO5E,QAAM,yBAAyB,0BAA0B;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,sBAAsB,gBAAgB,EAAE,gBAAgB,4BAA4B,iBAAiB,CAAC;AAE5G,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.js

@@ -0,0 +1,292 @@
+import * as React from "react";
+import debounce from "lodash/debounce";
+import React2 from "react";
+import {
+  isFocusableNode,
+  isMultipleSelectNode,
+  isRootNode,
+  isSingleSelectNode,
+  isWithSubmenuNode,
+  isWithSubmenuOnlyNode
+} from "../../../utils/nodesTypeguardsAndGetters.js";
+import { FORBIDDEN_BEHAVIOURS, UNEXPECTED_INTERNAL_ERRORS } from "../constants/Errors.js";
+import { getNewSelectionMultipleSelect } from "../utils/multipleSelectionHelpers.js";
+import { getSubMenusPath } from "../utils/nodeGettersByCriterias.js";
+import { getNewSelectionSingleSelect } from "../utils/singleSelectionHelpers.js";
+const useMenuItemEventsHandlers = ({
+  propsWithDefault,
+  focusTrackers,
+  menuOpenStatus,
+  handleChangeOpenedSubItems
+}) => {
+  const { onItemSelected, onActivateItem, selectedItems } = propsWithDefault;
+  const { onOpinionatedClose } = menuOpenStatus;
+  const {
+    trackFocusFirstChildItem,
+    trackFocusLastChildItem,
+    trackFocusNextItem,
+    trackFocusPreviousItem,
+    trackFocusParentItem,
+    trackFocusNode,
+    focusedElementItemNode
+  } = focusTrackers;
+  const openSubmenu = React2.useCallback(
+    ({
+      itemNode,
+      event
+    }) => {
+      if (!isWithSubmenuNode(itemNode)) {
+        console.log("openSubmenu -> itemNode:", itemNode);
+        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_OPEN_SUBMENU_OF_NODE_WITHOUT_SUBMENU;
+      }
+      const subMenuNodesPath = getSubMenusPath(itemNode);
+      const metainfo = { itemNode, event };
+      const newOpenedItems = [...subMenuNodesPath, itemNode];
+      handleChangeOpenedSubItems(newOpenedItems, metainfo);
+    },
+    [handleChangeOpenedSubItems]
+  );
+  const closeCurrentSubmenu = React2.useCallback(
+    ({
+      itemNode,
+      event
+    }) => {
+      const metainfo = { itemNode, event };
+      const subMenuNodesPath = getSubMenusPath(itemNode);
+      if (subMenuNodesPath.length === 0) {
+        handleChangeOpenedSubItems([], metainfo);
+        return { currentSubmenuWasMainMenu: true };
+      }
+      subMenuNodesPath.pop();
+      handleChangeOpenedSubItems(subMenuNodesPath, metainfo);
+      return { currentSubmenuWasMainMenu: false };
+    },
+    [handleChangeOpenedSubItems]
+  );
+  const handleMenuItemEnterKeyDown = React2.useCallback(
+    ({ pseudoFocusedItemNode, event }) => {
+      if (isWithSubmenuOnlyNode(pseudoFocusedItemNode)) {
+        openSubmenu({ itemNode: pseudoFocusedItemNode, event });
+        trackFocusFirstChildItem(pseudoFocusedItemNode);
+      } else {
+        if (isMultipleSelectNode(pseudoFocusedItemNode)) {
+          const newSelection = getNewSelectionMultipleSelect(selectedItems, pseudoFocusedItemNode);
+          onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
+        } else if (isSingleSelectNode(pseudoFocusedItemNode)) {
+          const newSelection = getNewSelectionSingleSelect(selectedItems, pseudoFocusedItemNode);
+          onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
+        } else {
+          onActivateItem(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });
+        }
+        const metainfo = { itemNode: pseudoFocusedItemNode, event };
+        const newOpenedItems = [];
+        handleChangeOpenedSubItems(newOpenedItems, metainfo);
+        onOpinionatedClose();
+      }
+    },
+    [
+      trackFocusFirstChildItem,
+      openSubmenu,
+      handleChangeOpenedSubItems,
+      onOpinionatedClose,
+      selectedItems,
+      onItemSelected,
+      onActivateItem
+    ]
+  );
+  const handleMenuItemSpaceKeyDown = React2.useCallback(
+    ({ pseudoFocusedItemNode, event }) => {
+      if (isWithSubmenuOnlyNode(pseudoFocusedItemNode)) {
+        openSubmenu({ itemNode: pseudoFocusedItemNode, event });
+        trackFocusFirstChildItem(pseudoFocusedItemNode);
+        return;
+      }
+      if (isMultipleSelectNode(pseudoFocusedItemNode)) {
+        const newSelection = getNewSelectionMultipleSelect(selectedItems, pseudoFocusedItemNode);
+        onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
+        return;
+      }
+      if (isSingleSelectNode(pseudoFocusedItemNode)) {
+        const newSelection = getNewSelectionSingleSelect(selectedItems, pseudoFocusedItemNode);
+        onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
+        return;
+      }
+      onActivateItem(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });
+      const metainfo = { itemNode: pseudoFocusedItemNode, event };
+      const newOpenedItems = [];
+      handleChangeOpenedSubItems(newOpenedItems, metainfo);
+      onOpinionatedClose();
+    },
+    [
+      onActivateItem,
+      handleChangeOpenedSubItems,
+      onOpinionatedClose,
+      trackFocusFirstChildItem,
+      openSubmenu,
+      selectedItems,
+      onItemSelected
+    ]
+  );
+  const handleMenuItemRightArrowKeyDown = React2.useCallback(
+    ({ pseudoFocusedItemNode, event }) => {
+      if (isWithSubmenuNode(pseudoFocusedItemNode)) {
+        openSubmenu({ itemNode: pseudoFocusedItemNode, event });
+        trackFocusFirstChildItem(pseudoFocusedItemNode);
+        return;
+      }
+      return;
+    },
+    [openSubmenu, trackFocusFirstChildItem]
+  );
+  const handleMenuItemLeftArrowKeyDown = React2.useCallback(
+    ({ pseudoFocusedItemNode, event }) => {
+      const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });
+      if (!currentSubmenuWasMainMenu) {
+        trackFocusParentItem(pseudoFocusedItemNode);
+      }
+    },
+    [closeCurrentSubmenu, trackFocusParentItem]
+  );
+  const handleFocusableMenuItemKeyDown = React2.useCallback(
+    (event) => {
+      const pseudoFocusedItemNode = focusedElementItemNode.current;
+      if (pseudoFocusedItemNode === null) throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_NODE_NOT_SET;
+      if (pseudoFocusedItemNode.plainItem.onKeyDown) pseudoFocusedItemNode.plainItem.onKeyDown(event);
+      if (event.key === "ArrowDown") {
+        trackFocusNextItem(pseudoFocusedItemNode);
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        trackFocusPreviousItem(pseudoFocusedItemNode);
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        handleMenuItemLeftArrowKeyDown({ pseudoFocusedItemNode, event });
+        return;
+      }
+      if (event.key === "Home") {
+        if (!pseudoFocusedItemNode.parent) {
+          console.log("handleFocusableMenuItemKeyDown -> Home > focused item node", pseudoFocusedItemNode);
+          throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_HAS_NO_PARENT;
+        }
+        trackFocusFirstChildItem(pseudoFocusedItemNode.parent);
+        return;
+      }
+      if (event.key === "End") {
+        if (!pseudoFocusedItemNode.parent) {
+          console.log("handleFocusableMenuItemKeyDown -> Home > focused item node", pseudoFocusedItemNode);
+          throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_HAS_NO_PARENT;
+        }
+        trackFocusLastChildItem(pseudoFocusedItemNode.parent);
+        return;
+      }
+      if (event.key === "Escape") {
+        const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });
+        trackFocusParentItem(pseudoFocusedItemNode);
+        if (currentSubmenuWasMainMenu) {
+          onOpinionatedClose();
+        }
+        return;
+      }
+      if (pseudoFocusedItemNode.plainItem.disabled) return;
+      if (event.key === "Enter") {
+        handleMenuItemEnterKeyDown({ pseudoFocusedItemNode, event });
+        return;
+      }
+      if (event.key === " ") {
+        handleMenuItemSpaceKeyDown({ pseudoFocusedItemNode, event });
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        handleMenuItemRightArrowKeyDown({ pseudoFocusedItemNode, event });
+        return;
+      }
+    },
+    [
+      focusedElementItemNode,
+      handleMenuItemEnterKeyDown,
+      handleMenuItemSpaceKeyDown,
+      trackFocusNextItem,
+      trackFocusPreviousItem,
+      handleMenuItemRightArrowKeyDown,
+      handleMenuItemLeftArrowKeyDown,
+      trackFocusFirstChildItem,
+      trackFocusLastChildItem,
+      closeCurrentSubmenu,
+      trackFocusParentItem,
+      onOpinionatedClose
+    ]
+  );
+  const handleFocusableMenuItemOnMouseEnter = React2.useCallback(
+    (itemNode, event) => {
+      if (!isFocusableNode(itemNode)) {
+        console.log("handleFocusableMenuItemOnMouseEnter > itemNode:", itemNode);
+        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_FOCUS_NON_FOCUSABLE_NODE;
+      }
+      trackFocusNode(itemNode);
+      if (!isWithSubmenuNode(itemNode)) {
+        const subMenuNodesPath = getSubMenusPath(itemNode);
+        const metainfo = { itemNode, event };
+        const newOpenedItems = [...subMenuNodesPath];
+        handleChangeOpenedSubItems(newOpenedItems, metainfo);
+        return;
+      }
+      if (itemNode.plainItem.disabled) return;
+      openSubmenu({ itemNode, event });
+    },
+    [handleChangeOpenedSubItems, openSubmenu, trackFocusNode]
+  );
+  const handleFocusableMenuItemClick = React2.useCallback(
+    (event) => {
+      const pseudoFocusedItemNode = focusedElementItemNode.current;
+      if (pseudoFocusedItemNode === null) throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_NODE_NOT_SET;
+      if (pseudoFocusedItemNode.plainItem.disabled) return;
+      const parentMenuNode = pseudoFocusedItemNode.parent;
+      if (isRootNode(parentMenuNode)) {
+        const metainfo = { itemNode: pseudoFocusedItemNode, event };
+        const newOpenedItems = [];
+        handleChangeOpenedSubItems(newOpenedItems, metainfo);
+      } else {
+        const newOpenedItems = [...getSubMenusPath(pseudoFocusedItemNode)];
+        if (isWithSubmenuNode(pseudoFocusedItemNode)) {
+          newOpenedItems.push(pseudoFocusedItemNode);
+        }
+        const metainfo = { itemNode: pseudoFocusedItemNode, event };
+        handleChangeOpenedSubItems(newOpenedItems, metainfo);
+      }
+      handleMenuItemSpaceKeyDown({ pseudoFocusedItemNode, event });
+      if (pseudoFocusedItemNode.plainItem.onClick) pseudoFocusedItemNode.plainItem.onClick(event);
+    },
+    [focusedElementItemNode, handleMenuItemSpaceKeyDown, handleChangeOpenedSubItems]
+  );
+  const handleMenuItemFocusReconciliation = React2.useCallback(
+    (itemNode) => {
+      debounce(
+        () => {
+          if (focusedElementItemNode.current?.dsId !== itemNode.dsId) trackFocusNode(itemNode);
+        },
+        10,
+        { leading: false, trailing: true }
+      );
+    },
+    [focusedElementItemNode, trackFocusNode]
+  );
+  return React2.useMemo(
+    () => ({
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    }),
+    [
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    ]
+  );
+};
+export {
+  useMenuItemEventsHandlers
+};
+//# sourceMappingURL=useMenuItemEventsHandlers.js.map