@elliemae/ds-menu-button 3.45.0-rc.1 → 3.45.0-rc.3

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

@@ -0,0 +1,89 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useGlobalEvents_exports = {};
+__export(useGlobalEvents_exports, {
+  useGlobalEvents: () => useGlobalEvents
+});
+module.exports = __toCommonJS(useGlobalEvents_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+const useGlobalEvents = ({
+  menuOpenStatus,
+  handleChangeOpenedSubItems,
+  propsWithDefault
+}) => {
+  const { onOpinionatedClose, isMenuOpen } = menuOpenStatus;
+  const { buttonDOMNodeRef } = propsWithDefault;
+  const mainMenuRef = import_react.default.useRef(null);
+  const submenusRefs = import_react.default.useRef({});
+  const handleSubmenusRefChange = import_react.default.useCallback(
+    (htmlNode, dsId) => {
+      if (htmlNode) {
+        submenusRefs.current[dsId] = htmlNode;
+      } else {
+        delete submenusRefs.current[dsId];
+      }
+    },
+    []
+  );
+  import_react.default.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 import_react.default.useMemo(
+    () => ({
+      mainMenuRef,
+      submenusRefs,
+      handleSubmenusRefChange
+    }),
+    [handleSubmenusRefChange]
+  );
+};
+//# sourceMappingURL=useGlobalEvents.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useGlobalEvents.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;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,cAAc,aAAAA,QAAM,OAA8B,IAAI;AAI5D,QAAM,eAAe,aAAAA,QAAM,OAAwE,CAAC,CAAC;AACrG,QAAM,0BAA0B,aAAAA,QAAM;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,QAAM,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,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,92 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useMenuBehaviouralContextProvider_exports = {};
+__export(useMenuBehaviouralContextProvider_exports, {
+  useMenuBehaviouralContextProvider: () => useMenuBehaviouralContextProvider
+});
+module.exports = __toCommonJS(useMenuBehaviouralContextProvider_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react = __toESM(require("react"));
+var import_uid = require("uid");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useFocusTracker = require("./useFocusTracker.js");
+var import_useMenuItemEventsHandlers = require("./useMenuItemEventsHandlers.js");
+var import_useMenuOpenStatus = require("./useMenuOpenStatus.js");
+var import_useValidateProps = require("./useValidateProps.js");
+var import_useGlobalEvents = require("./useGlobalEvents.js");
+const useMenuBehaviouralContextProvider = (propsFromUser) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
+    propsFromUser,
+    import_react_desc_prop_types.defaultProps
+  );
+  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSMenuBehaviouralContextProviderPropTypesSchema);
+  const { onDisplayedSubmenuChange } = propsWithDefault;
+  const instanceUid = import_react.default.useMemo(() => `ds-menu-behavioural-context-provider-${(0, import_uid.uid)(5)}`, []);
+  const [openedSubItems, setOpenedSubItems] = import_react.default.useState([]);
+  const handleChangeOpenedSubItems = import_react.default.useCallback(
+    (newOpenedItems, metainfo) => {
+      setOpenedSubItems(newOpenedItems);
+      onDisplayedSubmenuChange?.(newOpenedItems, metainfo);
+    },
+    [onDisplayedSubmenuChange]
+  );
+  const focusTrackers = (0, import_useFocusTracker.useFocusTracker)();
+  const menuOpenStatus = (0, import_useMenuOpenStatus.useMenuOpenStatus)({ propsWithDefault, focusTrackers });
+  const menuItemEventsHandlers = (0, import_useMenuItemEventsHandlers.useMenuItemEventsHandlers)({
+    propsWithDefault,
+    focusTrackers,
+    menuOpenStatus,
+    handleChangeOpenedSubItems
+  });
+  const globalEventsHelpers = (0, import_useGlobalEvents.useGlobalEvents)({ menuOpenStatus, handleChangeOpenedSubItems, propsWithDefault });
+  return import_react.default.useMemo(
+    () => ({
+      propsWithDefault,
+      instanceUid,
+      ...focusTrackers,
+      ...menuOpenStatus,
+      menuItemEventsHandlers,
+      openedSubItems,
+      handleChangeOpenedSubItems,
+      globalEventsHelpers
+    }),
+    [
+      propsWithDefault,
+      instanceUid,
+      focusTrackers,
+      menuOpenStatus,
+      menuItemEventsHandlers,
+      openedSubItems,
+      handleChangeOpenedSubItems,
+      globalEventsHelpers
+    ]
+  );
+};
+//# sourceMappingURL=useMenuBehaviouralContextProvider.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useMenuBehaviouralContextProvider.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA6C;AAC7C,mBAAkB;AAClB,iBAAoB;AAEpB,mCAIO;AACP,6BAAgC;AAChC,uCAA0C;AAC1C,+BAAkC;AAClC,8BAAiC;AACjC,6BAAgC;AAazB,MAAM,oCAAoC,CAAC,kBAA2D;AAI3G,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,gDAAiB,kBAAkB,4EAA+C;AAWlF,QAAM,EAAE,yBAAyB,IAAI;AACrC,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,4CAAwC,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5F,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAA+C,CAAC,CAAC;AAEnG,QAAM,6BAA6B,aAAAA,QAAM;AAAA,IAGvC,CAAC,gBAAgB,aAAa;AAC5B,wBAAkB,cAAc;AAChC,iCAA2B,gBAAgB,QAAQ;AAAA,IACrD;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AAKA,QAAM,oBAAgB,wCAAgB;AACtC,QAAM,qBAAiB,4CAAkB,EAAE,kBAAkB,cAAc,CAAC;AAO5E,QAAM,6BAAyB,4DAA0B;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,0BAAsB,wCAAgB,EAAE,gBAAgB,4BAA4B,iBAAiB,CAAC;AAE5G,SAAO,aAAAA,QAAM;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/cjs/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.js

@@ -0,0 +1,315 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useMenuItemEventsHandlers_exports = {};
+__export(useMenuItemEventsHandlers_exports, {
+  useMenuItemEventsHandlers: () => useMenuItemEventsHandlers
+});
+module.exports = __toCommonJS(useMenuItemEventsHandlers_exports);
+var React = __toESM(require("react"));
+var import_debounce = __toESM(require("lodash/debounce"));
+var import_react = __toESM(require("react"));
+var import_nodesTypeguardsAndGetters = require("../../../utils/nodesTypeguardsAndGetters.js");
+var import_Errors = require("../constants/Errors.js");
+var import_multipleSelectionHelpers = require("../utils/multipleSelectionHelpers.js");
+var import_nodeGettersByCriterias = require("../utils/nodeGettersByCriterias.js");
+var import_singleSelectionHelpers = require("../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 = import_react.default.useCallback(
+    ({
+      itemNode,
+      event
+    }) => {
+      if (!(0, import_nodesTypeguardsAndGetters.isWithSubmenuNode)(itemNode)) {
+        console.log("openSubmenu -> itemNode:", itemNode);
+        throw import_Errors.FORBIDDEN_BEHAVIOURS.TRYING_TO_OPEN_SUBMENU_OF_NODE_WITHOUT_SUBMENU;
+      }
+      const subMenuNodesPath = (0, import_nodeGettersByCriterias.getSubMenusPath)(itemNode);
+      const metainfo = { itemNode, event };
+      const newOpenedItems = [...subMenuNodesPath, itemNode];
+      handleChangeOpenedSubItems(newOpenedItems, metainfo);
+    },
+    [handleChangeOpenedSubItems]
+  );
+  const closeCurrentSubmenu = import_react.default.useCallback(
+    ({
+      itemNode,
+      event
+    }) => {
+      const metainfo = { itemNode, event };
+      const subMenuNodesPath = (0, import_nodeGettersByCriterias.getSubMenusPath)(itemNode);
+      if (subMenuNodesPath.length === 0) {
+        handleChangeOpenedSubItems([], metainfo);
+        return { currentSubmenuWasMainMenu: true };
+      }
+      subMenuNodesPath.pop();
+      handleChangeOpenedSubItems(subMenuNodesPath, metainfo);
+      return { currentSubmenuWasMainMenu: false };
+    },
+    [handleChangeOpenedSubItems]
+  );
+  const handleMenuItemEnterKeyDown = import_react.default.useCallback(
+    ({ pseudoFocusedItemNode, event }) => {
+      if ((0, import_nodesTypeguardsAndGetters.isWithSubmenuOnlyNode)(pseudoFocusedItemNode)) {
+        openSubmenu({ itemNode: pseudoFocusedItemNode, event });
+        trackFocusFirstChildItem(pseudoFocusedItemNode);
+      } else {
+        if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectNode)(pseudoFocusedItemNode)) {
+          const newSelection = (0, import_multipleSelectionHelpers.getNewSelectionMultipleSelect)(selectedItems, pseudoFocusedItemNode);
+          onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
+        } else if ((0, import_nodesTypeguardsAndGetters.isSingleSelectNode)(pseudoFocusedItemNode)) {
+          const newSelection = (0, import_singleSelectionHelpers.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 = import_react.default.useCallback(
+    ({ pseudoFocusedItemNode, event }) => {
+      if ((0, import_nodesTypeguardsAndGetters.isWithSubmenuOnlyNode)(pseudoFocusedItemNode)) {
+        openSubmenu({ itemNode: pseudoFocusedItemNode, event });
+        trackFocusFirstChildItem(pseudoFocusedItemNode);
+        return;
+      }
+      if ((0, import_nodesTypeguardsAndGetters.isMultipleSelectNode)(pseudoFocusedItemNode)) {
+        const newSelection = (0, import_multipleSelectionHelpers.getNewSelectionMultipleSelect)(selectedItems, pseudoFocusedItemNode);
+        onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });
+        return;
+      }
+      if ((0, import_nodesTypeguardsAndGetters.isSingleSelectNode)(pseudoFocusedItemNode)) {
+        const newSelection = (0, import_singleSelectionHelpers.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 = import_react.default.useCallback(
+    ({ pseudoFocusedItemNode, event }) => {
+      if ((0, import_nodesTypeguardsAndGetters.isWithSubmenuNode)(pseudoFocusedItemNode)) {
+        openSubmenu({ itemNode: pseudoFocusedItemNode, event });
+        trackFocusFirstChildItem(pseudoFocusedItemNode);
+        return;
+      }
+      return;
+    },
+    [openSubmenu, trackFocusFirstChildItem]
+  );
+  const handleMenuItemLeftArrowKeyDown = import_react.default.useCallback(
+    ({ pseudoFocusedItemNode, event }) => {
+      const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });
+      if (!currentSubmenuWasMainMenu) {
+        trackFocusParentItem(pseudoFocusedItemNode);
+      }
+    },
+    [closeCurrentSubmenu, trackFocusParentItem]
+  );
+  const handleFocusableMenuItemKeyDown = import_react.default.useCallback(
+    (event) => {
+      const pseudoFocusedItemNode = focusedElementItemNode.current;
+      if (pseudoFocusedItemNode === null) throw import_Errors.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 import_Errors.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 import_Errors.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 = import_react.default.useCallback(
+    (itemNode, event) => {
+      if (!(0, import_nodesTypeguardsAndGetters.isFocusableNode)(itemNode)) {
+        console.log("handleFocusableMenuItemOnMouseEnter > itemNode:", itemNode);
+        throw import_Errors.FORBIDDEN_BEHAVIOURS.TRYING_TO_FOCUS_NON_FOCUSABLE_NODE;
+      }
+      trackFocusNode(itemNode);
+      if (!(0, import_nodesTypeguardsAndGetters.isWithSubmenuNode)(itemNode)) {
+        const subMenuNodesPath = (0, import_nodeGettersByCriterias.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 = import_react.default.useCallback(
+    (event) => {
+      const pseudoFocusedItemNode = focusedElementItemNode.current;
+      if (pseudoFocusedItemNode === null) throw import_Errors.UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_NODE_NOT_SET;
+      if (pseudoFocusedItemNode.plainItem.disabled) return;
+      const parentMenuNode = pseudoFocusedItemNode.parent;
+      if ((0, import_nodesTypeguardsAndGetters.isRootNode)(parentMenuNode)) {
+        const metainfo = { itemNode: pseudoFocusedItemNode, event };
+        const newOpenedItems = [];
+        handleChangeOpenedSubItems(newOpenedItems, metainfo);
+      } else {
+        const newOpenedItems = [...(0, import_nodeGettersByCriterias.getSubMenusPath)(pseudoFocusedItemNode)];
+        if ((0, import_nodesTypeguardsAndGetters.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 = import_react.default.useCallback(
+    (itemNode) => {
+      (0, import_debounce.default)(
+        () => {
+          if (focusedElementItemNode.current?.dsId !== itemNode.dsId) trackFocusNode(itemNode);
+        },
+        10,
+        { leading: false, trailing: true }
+      );
+    },
+    [focusedElementItemNode, trackFocusNode]
+  );
+  return import_react.default.useMemo(
+    () => ({
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    }),
+    [
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    ]
+  );
+};
+//# sourceMappingURL=useMenuItemEventsHandlers.js.map

package/dist/cjs/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSMenuBehaviouralContextProvider/config/useMenuItemEventsHandlers.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable no-console */\n/* eslint-disable max-lines */\n// in this files the returns are not useless, they are used to clearly demark the intended behavior shortcircuit for the next developer that reads the code\n/* eslint-disable no-useless-return */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport debounce from 'lodash/debounce';\nimport React from 'react';\nimport { type DSMenuButtonT } from '../../../react-desc-prop-types.js';\nimport {\n  isFocusableNode,\n  isMultipleSelectNode,\n  isRootNode,\n  isSingleSelectNode,\n  isWithSubmenuNode,\n  isWithSubmenuOnlyNode,\n} from '../../../utils/nodesTypeguardsAndGetters.js';\nimport { FORBIDDEN_BEHAVIOURS, UNEXPECTED_INTERNAL_ERRORS } from '../constants/Errors.js';\nimport { type DSMenuBehaviouralContextProviderT } from '../react-desc-prop-types.js';\nimport { getNewSelectionMultipleSelect } from '../utils/multipleSelectionHelpers.js';\nimport { getSubMenusPath } from '../utils/nodeGettersByCriterias.js';\nimport { getNewSelectionSingleSelect } from '../utils/singleSelectionHelpers.js';\nimport type { useFocusTracker } from './useFocusTracker.js';\nimport type { useMenuOpenStatus } from './useMenuOpenStatus.js';\n\ntype ItemKeydownHelpersArgs = {\n  pseudoFocusedItemNode: DSMenuButtonT.PseudoFocusableMenuNodes;\n  event?: React.KeyboardEvent | React.MouseEvent;\n};\ntype SubmenuChangeMetainfo = {\n  itemNode: DSMenuButtonT.PseudoFocusableMenuNodes;\n  event?: React.SyntheticEvent;\n};\n\ntype UseMenuItemEventsHandlersConfig = {\n  propsWithDefault: DSMenuBehaviouralContextProviderT.InternalProps;\n  focusTrackers: ReturnType<typeof useFocusTracker>;\n  menuOpenStatus: ReturnType<typeof useMenuOpenStatus>;\n  handleChangeOpenedSubItems: Required<DSMenuButtonT.MenuBehaviouralLayerOptionalProps>['onDisplayedSubmenuChange'];\n};\n\nexport const useMenuItemEventsHandlers = ({\n  propsWithDefault,\n  focusTrackers,\n  menuOpenStatus,\n  handleChangeOpenedSubItems,\n}: UseMenuItemEventsHandlersConfig) => {\n  const { onItemSelected, onActivateItem, selectedItems } = propsWithDefault;\n  const { onOpinionatedClose } = menuOpenStatus;\n  const {\n    trackFocusFirstChildItem,\n    trackFocusLastChildItem,\n    trackFocusNextItem,\n    trackFocusPreviousItem,\n    trackFocusParentItem,\n    trackFocusNode,\n    focusedElementItemNode,\n  } = focusTrackers;\n\n  const openSubmenu = React.useCallback(\n    ({\n      itemNode,\n      event,\n    }: {\n      itemNode: DSMenuButtonT.WithSubmenuMenuNodes;\n      event?: React.KeyboardEvent | React.MouseEvent;\n    }) => {\n      if (!isWithSubmenuNode(itemNode)) {\n        console.log('openSubmenu -> itemNode:', itemNode);\n        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_OPEN_SUBMENU_OF_NODE_WITHOUT_SUBMENU;\n      }\n      const subMenuNodesPath = getSubMenusPath(itemNode);\n      const metainfo: SubmenuChangeMetainfo = { itemNode, event };\n      const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [...subMenuNodesPath, itemNode];\n      handleChangeOpenedSubItems(newOpenedItems, metainfo);\n    },\n    [handleChangeOpenedSubItems],\n  );\n  const closeCurrentSubmenu = React.useCallback(\n    ({\n      itemNode,\n      event,\n    }: {\n      itemNode: DSMenuButtonT.PseudoFocusableMenuNodes;\n      event?: React.KeyboardEvent | React.MouseEvent;\n    }) => {\n      const metainfo: SubmenuChangeMetainfo = { itemNode, event };\n      const subMenuNodesPath = getSubMenusPath(itemNode);\n      // if length is 0, it means the parent is the root node, so we close all the submenus\n      if (subMenuNodesPath.length === 0) {\n        handleChangeOpenedSubItems([], metainfo);\n        return { currentSubmenuWasMainMenu: true };\n      }\n\n      // we want to close current submenu, so we pop the last element\n      //  getSubMenusPath guarantees the order by walkParents + reverse at the end\n      subMenuNodesPath.pop();\n      handleChangeOpenedSubItems(subMenuNodesPath, metainfo);\n      return { currentSubmenuWasMainMenu: false };\n    },\n    [handleChangeOpenedSubItems],\n  );\n  /*\n   * 13th August 2024:\n   * https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/\n   * Additional roles, states, and properties needed for the menu element are described in the Menu and Menubar Pattern.\n   * https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n   * Because menubar and menu elements are composite widgets as described in the practice for Keyboard Navigation Inside Components,\n   *  Tab and Shift + Tab do not move focus among the items in the menu.\n   *  Instead, the keyboard commands described in this section enable users to move focus among the elements in a menubar or menu.\n   * Tab and Shift + Tab:\n   *   - Move focus into a menubar <- Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n   *   - When focus is on a menuitem in a menu or menubar, move focus out of the menu or menubar, and close all menus and submenus.\n   *     ************************************************************************************************************************************\n   *     this will be implemented by not setting document.activeElement to the menuitem but keeping it on the trigger button\n   *          why? because there is no javascript API to trigger a \"tab\"/\"shift+tab\" navigation and any algorithm trying to do so is fragile\n   *          also, this is enforced by w3.org too as per:\n   *     ************************************************************************************************************************************\n   *   Note that Tab and Shift + Tab do not move focus into a menu.\n   *     Unlike a menubar, a menu is not visually persistent,\n   *     and authors are responsible for ensuring focus moves to an item inside of a menu when the menu opens.\n   *\n   */\n  const handleMenuItemEnterKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Enter:\n      //   - When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      //   ...\n      if (isWithSubmenuOnlyNode(pseudoFocusedItemNode)) {\n        openSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusFirstChildItem(pseudoFocusedItemNode);\n      } else {\n        //  - Otherwise, activates the item...\n\n        //  ----------------------------------\n        //  4. Although it is recommended that authors avoid doing so,\n        //     some implementations of navigation menubars may have menuitem elements that both perform a function and open a submenu.\n        //     In such implementations, Enter and Space perform a navigation function,\n        //     e.g., load new content, while Down Arrow, in a horizontal menubar, opens the submenu associated with that same menuitem.\n        //   ---------------------------------\n        //   Based on an investigation, the above statement is not specific to \"navigation\" nor to ONLY \"menubars\", it really is about \"menuitems\" in general\n        //   as long as the role=\"menuitem\" & aria-haspopup=\"${id-of-the-submenu}\" & aria-expanded=\"${true/false}\" (& aria-orientation=\"vertical/horizontal\" if non-default)\n        //   are set, the Screen Readers will provide the same announcement for the menuitem regardless of the parent role\n\n        // \"activation\" is a concept,\n        //  WCAG here implies that for menuitemscheckbox and menuitemsradio this triggers the selection\n        //  for menuitems (that doesn't fit selection nor submenus) it triggers the action\n        //  this also triggers enter -> single-select-item-with-submenu as expected\n        if (isMultipleSelectNode(pseudoFocusedItemNode)) {\n          const newSelection = getNewSelectionMultipleSelect(selectedItems, pseudoFocusedItemNode);\n          onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        } else if (isSingleSelectNode(pseudoFocusedItemNode)) {\n          const newSelection = getNewSelectionSingleSelect(selectedItems, pseudoFocusedItemNode);\n          onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        } else {\n          onActivateItem(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });\n        }\n        // ... and closes the menu.\n        const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n        onOpinionatedClose();\n      }\n    },\n    [\n      trackFocusFirstChildItem,\n      openSubmenu,\n      handleChangeOpenedSubItems,\n      onOpinionatedClose,\n      selectedItems,\n      onItemSelected,\n      onActivateItem,\n    ],\n  );\n  const handleMenuItemSpaceKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Space:\n      // [X] (Optional): When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      //  ----------------------------------\n      //  4. Although it is recommended that authors avoid doing so,\n      //     some implementations of navigation menubars may have menuitem elements that both perform a function and open a submenu.\n      //     In such implementations, Enter and Space perform a navigation function,\n      //     e.g., load new content, while Down Arrow, in a horizontal menubar, opens the submenu associated with that same menuitem.\n      //   ---------------------------------\n      //   Based on an investigation, the above statement is not specific to \"navigation\" nor to ONLY \"menubars\", it really is about \"menuitems\" in general\n      //   as long as the role=\"menuitem\" & aria-haspopup=\"${id-of-the-submenu}\" & aria-expanded=\"${true/false}\" (& aria-orientation=\"vertical/horizontal\" if non-default)\n      //   are set, the Screen Readers will provide the same announcement for the menuitem regardless of the parent role\n      if (isWithSubmenuOnlyNode(pseudoFocusedItemNode)) {\n        openSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusFirstChildItem(pseudoFocusedItemNode);\n        return;\n      }\n      // [X] (Optional): When focus is on a menuitemcheckbox, changes the state without closing the menu.\n      if (isMultipleSelectNode(pseudoFocusedItemNode)) {\n        const newSelection = getNewSelectionMultipleSelect(selectedItems, pseudoFocusedItemNode);\n        onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        return;\n      }\n      // [X] (Optional): When focus is on a menuitemradio that is not checked, without closing the menu,\n      //   checks the focused menuitemradio and unchecks any other checked menuitemradio element in the same group.\n      if (isSingleSelectNode(pseudoFocusedItemNode)) {\n        const newSelection = getNewSelectionSingleSelect(selectedItems, pseudoFocusedItemNode);\n        onItemSelected(newSelection, { itemNode: pseudoFocusedItemNode, event });\n        return;\n      }\n      // [X] (Optional): When focus is on a menuitem that does not have a submenu, activates the menuitem and closes the menu.\n      onActivateItem(pseudoFocusedItemNode, { itemNode: pseudoFocusedItemNode, event });\n\n      const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n      const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n      handleChangeOpenedSubItems(newOpenedItems, metainfo);\n      onOpinionatedClose();\n    },\n    [\n      onActivateItem,\n      handleChangeOpenedSubItems,\n      onOpinionatedClose,\n      trackFocusFirstChildItem,\n      openSubmenu,\n      selectedItems,\n      onItemSelected,\n    ],\n  );\n  const handleMenuItemRightArrowKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Right Arrow:\n      // [N/A] When focus is in a menubar, moves focus to the next item, optionally wrapping from the last to the first.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n\n      // [X] When focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first item.\n      // [N/A] When focus is in a menu and on an item that does not have a submenu, performs the following 3 actions:\n      //    [N/A] Closes the submenu and any parent menus.\n      //    [N/A] Moves focus to the next item in the menubar.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n\n      // [X] If focus is now on a menuitem with a submenu, either:\n      //   [X] (Recommended) opens the submenu of that menuitem without moving focus into the submenu,\n      //    /\\ we choose the recommended option\n      //    OR\n      //   [N/A] opens the submenu of that menuitem and places focus on the first item in the submenu.\n      //   ***********************************************************\n      //   Dimsum implements IoC, if APP side for whatever reason wants to open the new sub sub menu,\n      //    it's up to them to listen to the pseudo focus event and open the sub sub menu\n      //   ***********************************************************\n      if (isWithSubmenuNode(pseudoFocusedItemNode)) {\n        openSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusFirstChildItem(pseudoFocusedItemNode);\n        return;\n      }\n      // Note that if the menubar were not present, e.g., the menus were opened from a menubutton,\n      //    Right Arrow would not do anything when focus is on an item that does not have a submenu.\n      return;\n    },\n    [openSubmenu, trackFocusFirstChildItem],\n  );\n\n  const handleMenuItemLeftArrowKeyDown = React.useCallback(\n    ({ pseudoFocusedItemNode, event }: ItemKeydownHelpersArgs) => {\n      // Left Arrow:\n      // [N/A] When focus is in a menubar, moves focus to the previous item, optionally wrapping from the first to the last.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n\n      // [X] When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.\n      const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });\n      if (!currentSubmenuWasMainMenu) {\n        trackFocusParentItem(pseudoFocusedItemNode);\n      }\n\n      // [N/A] When focus is in a submenu of an item in a menubar, performs the following 3 actions:\n      //     [N/A] Closes the submenu.\n      //     [N/A] Moves focus to the previous item in the menubar.\n      //     [N/A] If focus is now on a menuitem with a submenu, either:\n      //       (Recommended) opens the submenu of that menuitem without moving focus into the submenu,\n      //           or\n      //        opens the submenu of that menuitem and places focus on the first item in the submenu.\n      //  /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n    },\n    [closeCurrentSubmenu, trackFocusParentItem],\n  );\n\n  const handleFocusableMenuItemKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      const pseudoFocusedItemNode = focusedElementItemNode.current;\n      // if there is no focused item, we can't handle the logics\n      if (pseudoFocusedItemNode === null) throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_NODE_NOT_SET;\n      // if the item contains an `onKeyDown` prop, we trigger it\n      if (pseudoFocusedItemNode.plainItem.onKeyDown) pseudoFocusedItemNode.plainItem.onKeyDown(event);\n\n      // Down Arrow:\n      // [N/A] When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the first item in the submenu.\n      //    /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n      // [X] When focus is in a menu, moves focus to the next item,\n      //     [X] optionally wrapping from the last to the first.\n      if (event.key === 'ArrowDown') {\n        trackFocusNextItem(pseudoFocusedItemNode);\n        return;\n      }\n      // Up Arrow:\n      // [X] When focus is in a menu, moves focus to the previous item,\n      //    [X] optionally wrapping from the first to the last.\n      // [N/A] (Optional): When focus is on a menuitem in a menubar, and that menuitem has a submenu, opens the submenu and places focus on the last item in the submenu.\n      //    /\\ Not relevant for this component, this is ONLY FOR MENU, not for MENUBARS\n      if (event.key === 'ArrowUp') {\n        trackFocusPreviousItem(pseudoFocusedItemNode);\n        return;\n      }\n      // Left Arrow:\n      if (event.key === 'ArrowLeft') {\n        handleMenuItemLeftArrowKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n      // Home: If arrow key wrapping is not supported, moves focus to the first item in the current menu or menubar.\n      if (event.key === 'Home') {\n        if (!pseudoFocusedItemNode.parent) {\n          console.log('handleFocusableMenuItemKeyDown -> Home > focused item node', pseudoFocusedItemNode);\n          // should be impossible, at most the .parent is the root node, which is not able to trigger this event\n          throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_HAS_NO_PARENT;\n        }\n        trackFocusFirstChildItem(pseudoFocusedItemNode.parent);\n        return;\n      }\n      // End: If arrow key wrapping is not supported, moves focus to the last item in the current menu or menubar.\n      if (event.key === 'End') {\n        if (!pseudoFocusedItemNode.parent) {\n          console.log('handleFocusableMenuItemKeyDown -> Home > focused item node', pseudoFocusedItemNode);\n          // should be impossible, at most the .parent is the root node, which is not able to trigger this event\n          throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_HAS_NO_PARENT;\n        }\n        trackFocusLastChildItem(pseudoFocusedItemNode.parent);\n        return;\n      }\n      // Escape: Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent menuitem, from which the menu was opened\n      if (event.key === 'Escape') {\n        const { currentSubmenuWasMainMenu } = closeCurrentSubmenu({ itemNode: pseudoFocusedItemNode, event });\n        trackFocusParentItem(pseudoFocusedItemNode);\n        // if the menu we are trying to close is the main menu, we adittionally close the main menu itself\n        if (currentSubmenuWasMainMenu) {\n          // if parent is the root node, we close also the main menu\n          onOpinionatedClose();\n        }\n        return;\n      }\n      /* ************************************************************************************\n       * ******* ACTIVATION & SUBMENU keys doesn't apply if the item is \"disabled\" **********\n       * ************************************************************************************ */\n      if (pseudoFocusedItemNode.plainItem.disabled) return;\n      // Enter:\n      if (event.key === 'Enter') {\n        handleMenuItemEnterKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n      // Space:\n      if (event.key === ' ') {\n        handleMenuItemSpaceKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n      // Right Arrow:\n      if (event.key === 'ArrowRight') {\n        handleMenuItemRightArrowKeyDown({ pseudoFocusedItemNode, event });\n        return;\n      }\n    },\n    [\n      focusedElementItemNode,\n      handleMenuItemEnterKeyDown,\n      handleMenuItemSpaceKeyDown,\n      trackFocusNextItem,\n      trackFocusPreviousItem,\n      handleMenuItemRightArrowKeyDown,\n      handleMenuItemLeftArrowKeyDown,\n      trackFocusFirstChildItem,\n      trackFocusLastChildItem,\n      closeCurrentSubmenu,\n      trackFocusParentItem,\n      onOpinionatedClose,\n    ],\n  );\n\n  const handleFocusableMenuItemOnMouseEnter = React.useCallback(\n    (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes, event: React.MouseEvent) => {\n      if (!isFocusableNode(itemNode)) {\n        console.log('handleFocusableMenuItemOnMouseEnter > itemNode:', itemNode);\n        throw FORBIDDEN_BEHAVIOURS.TRYING_TO_FOCUS_NON_FOCUSABLE_NODE;\n      }\n      // on hover -> we track the hovered item as the focused one on top of which events should work on\n      trackFocusNode(itemNode);\n      if (!isWithSubmenuNode(itemNode)) {\n        // if the item has nosubmenu we close all the siblings submenus\n        const subMenuNodesPath = getSubMenusPath(itemNode);\n        const metainfo: SubmenuChangeMetainfo = { itemNode, event };\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [...subMenuNodesPath];\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n        return;\n      }\n      // if the item is disabled, we don't open the submenu\n      if (itemNode.plainItem.disabled) return;\n      // if not disabled and it has a submenu, we open it\n      openSubmenu({ itemNode, event });\n    },\n    [handleChangeOpenedSubItems, openSubmenu, trackFocusNode],\n  );\n\n  const handleFocusableMenuItemClick = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      const pseudoFocusedItemNode = focusedElementItemNode.current;\n      if (pseudoFocusedItemNode === null) throw UNEXPECTED_INTERNAL_ERRORS.FOCUSED_ITEM_NODE_NOT_SET;\n      // if the item is disabled, we don't do anything\n      if (pseudoFocusedItemNode.plainItem.disabled) return;\n      // we need to handle which submenu needs to close automagically based on the click\n      // starting from the itemNode, we check:\n      //   - the parent of the itemNode is root?\n      //     -  yes -> we close all the submenus\n      const parentMenuNode = pseudoFocusedItemNode.parent;\n      if (isRootNode(parentMenuNode)) {\n        const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [];\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n      } else {\n        //     -  no  -> we close all the submenus that are not in the path to the root of the itemNode\n        // this is necessary on click because the user can still interact with other (visual) depths of the menu\n        // during keyboard navigation, the user is limited to the current (visual) depth\n        const newOpenedItems: DSMenuButtonT.WithSubmenuMenuNodes[] = [...getSubMenusPath(pseudoFocusedItemNode)];\n        //     - if the clicked node has a submenu, keep it open\n        if (isWithSubmenuNode(pseudoFocusedItemNode)) {\n          newOpenedItems.push(pseudoFocusedItemNode);\n        }\n        const metainfo: SubmenuChangeMetainfo = { itemNode: pseudoFocusedItemNode, event };\n        handleChangeOpenedSubItems(newOpenedItems, metainfo);\n      }\n\n      // to all effects and purposes, the click event is the same as the space key\n      //  the main difference between enter and space is that\n      //   - enter ALWAYS closes the menu excepts for submenus\n      //   - space closes the menu if \"activable\", selections doesn't, submenus doesn't\n      handleMenuItemSpaceKeyDown({ pseudoFocusedItemNode, event });\n      // if the item contains an `onClick` prop, we trigger it\n      if (pseudoFocusedItemNode.plainItem.onClick) pseudoFocusedItemNode.plainItem.onClick(event);\n    },\n    [focusedElementItemNode, handleMenuItemSpaceKeyDown, handleChangeOpenedSubItems],\n  );\n\n  // SR softwares have a setting (that is on by default in mac VoiceOver)\n  //  that express the will from the user to have the \"voice over pseudo navigation\"\n  //  also \"act as a navigation\", it usually isn't so easy to catch/see this\n  //   because usually special key navigation is a secondary way to navigate\n  //   BUT, some role (surprise suprise, menu falls into this category)\n  //     inverts the \"navigation\" and \"special key navigation\" when SR is on by default\n  // Long story short, if when the item triggers a focus event, we don't track it\n  //   and the user uses the \"special key navigation\" to navigate\n  //    weird navigation and visual feedbacks will happen\n  // This handler ensures that\n  //  the focus is tracked when the item is focused via special key navigation in the SR software preference asking for it is on\n  // IMPORTANT:\n  // we need to make sure this is only invoked for the last focused item if many focus events are triggered in quick succession\n  // so we MUST debounce this\n  const handleMenuItemFocusReconciliation: (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes) => void =\n    React.useCallback(\n      (itemNode) => {\n        debounce(\n          () => {\n            if (focusedElementItemNode.current?.dsId !== itemNode.dsId) trackFocusNode(itemNode);\n          },\n          10,\n          { leading: false, trailing: true },\n        );\n      },\n\n      [focusedElementItemNode, trackFocusNode],\n    );\n  return React.useMemo(\n    () => ({\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\n    }),\n    [\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React", "debounce"]
+}