@elliemae/ds-menu-items 3.18.0-next.4 → 3.18.0-next.5

package/dist/cjs/components/SubmenuItem/getChevronHandlers.js

@@ -0,0 +1,65 @@
+"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 getChevronHandlers_exports = {};
+__export(getChevronHandlers_exports, {
+  getChevronHandlers: () => getChevronHandlers
+});
+module.exports = __toCommonJS(getChevronHandlers_exports);
+var React = __toESM(require("react"));
+const getChevronHandlers = ({
+  isSubmenuOpened,
+  onMouseEnter,
+  onSubmenuOpen,
+  onSubmenuClose,
+  onMouseLeave
+}) => {
+  const timeoutRef = { current: null };
+  const onMouseEnterHandler = (e) => {
+    if (timeoutRef.current !== null)
+      clearTimeout(timeoutRef.current);
+    else if (!isSubmenuOpened)
+      onSubmenuOpen?.(e);
+    timeoutRef.current = null;
+    onMouseEnter?.(e);
+  };
+  const onMouseLeaveHandler = (e) => {
+    if (timeoutRef.current === null) {
+      timeoutRef.current = setTimeout(() => {
+        timeoutRef.current = null;
+        onSubmenuClose?.(e);
+      }, 300);
+    }
+    onMouseLeave?.(e);
+  };
+  const onEllipsisClick = () => {
+    throw new Error("Invoking onEllipsisClick from chevron handlers... this should never happen");
+  };
+  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+};
+//# sourceMappingURL=getChevronHandlers.js.map

package/dist/cjs/components/SubmenuItem/getChevronHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/SubmenuItem/getChevronHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> open submenu\n//   onMouseLeave -> close submenu\n//   onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n\n// what are the \"challenges\" of the task:\n//  - the submenu close has an animation and we ideally want to be sure state changes after the animation is done\n//      (we do it via an hardcoded 300ms delay, this is know to cause issues in some cases)\n//  - \"what is open and what is closed\" state lives under ds-dropdownmenu,\n//      we manipulate it via \"onSubmenuOpen\" and \"onSubmenuClose\" callbacks\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\n// important and relevant info:\n//  when this comment has been written,\n//    onSubmenuOpen coming from SingleWithSubmenuProps is forcing only one submenu to be open at a time internally\n//      the logic for this is implemented in ds-dropdownmenu,\n//         we had a bug in which we were invoking a stale callback,\n//            we monkeypatching it by ensuring the callback never changes\n//            in the future we should create code with \"hydraters\" to avoid this as per shuttle-v2\n\nexport const getChevronHandlers = ({\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n  const timeoutRef: { current: NodeJS.Timeout | null } = { current: null };\n\n  const onMouseEnterHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    else if (!isSubmenuOpened) onSubmenuOpen?.(e);\n    timeoutRef.current = null;\n    onMouseEnter?.(e);\n  };\n\n  const onMouseLeaveHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current === null) {\n      timeoutRef.current = setTimeout(() => {\n        timeoutRef.current = null;\n        onSubmenuClose?.(e);\n      }, 300);\n    }\n    onMouseLeave?.(e);\n  };\n  const onEllipsisClick = () => {\n    throw new Error('Invoking onEllipsisClick from chevron handlers... this should never happen');\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBhB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoD;AAClD,QAAM,aAAiD,EAAE,SAAS,KAAK;AAEvE,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY;AAAM,mBAAa,WAAW,OAAO;AAAA,aACvD,CAAC;AAAiB,sBAAgB,CAAC;AAC5C,eAAW,UAAU;AACrB,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,MAAM;AAC/B,iBAAW,UAAU,WAAW,MAAM;AACpC,mBAAW,UAAU;AACrB,yBAAiB,CAAC;AAAA,MACpB,GAAG,GAAG;AAAA,IACR;AACA,mBAAe,CAAC;AAAA,EAClB;AACA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
+  "names": []
+}

package/dist/cjs/components/SubmenuItem/getEllipsisHandlers.js

@@ -0,0 +1,56 @@
+"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 getEllipsisHandlers_exports = {};
+__export(getEllipsisHandlers_exports, {
+  getEllipsisHandlers: () => getEllipsisHandlers
+});
+module.exports = __toCommonJS(getEllipsisHandlers_exports);
+var React = __toESM(require("react"));
+const getEllipsisHandlers = ({
+  disabled,
+  isSubmenuOpened,
+  onMouseEnter,
+  onSubmenuOpen,
+  onSubmenuClose,
+  onMouseLeave
+}) => {
+  const onMouseEnterHandler = (e) => onMouseEnter?.(e);
+  const onMouseLeaveHandler = (e) => onMouseLeave?.(e);
+  const onEllipsisClick = (e) => {
+    if (disabled)
+      return;
+    e.stopPropagation();
+    if (isSubmenuOpened)
+      onSubmenuClose(e);
+    else
+      onSubmenuOpen(e);
+  };
+  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+};
+//# sourceMappingURL=getEllipsisHandlers.js.map

package/dist/cjs/components/SubmenuItem/getEllipsisHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/SubmenuItem/getEllipsisHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\nexport const getEllipsisHandlers = ({\n  disabled,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n  // why not just onMouseEnterHandler = onMouseEnter?\n  //  we expect onMouseEnterHandler/onMouseLeaveHandler\n  //    to always exist even if onMouseEnter/onMouseLeave are undefined\n  //  also, if in the future we need custom logic for these handlers, we can add it here\n  const onMouseEnterHandler: React.MouseEventHandler = (e) => onMouseEnter?.(e);\n  const onMouseLeaveHandler: React.MouseEventHandler = (e) => onMouseLeave?.(e);\n\n  const onEllipsisClick: React.MouseEventHandler = (e) => {\n    if (disabled) return;\n    e.stopPropagation();\n    if (isSubmenuOpened) onSubmenuClose(e);\n    else onSubmenuOpen(e);\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoD;AAKlD,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAE5E,QAAM,kBAA2C,CAAC,MAAM;AACtD,QAAI;AAAU;AACd,MAAE,gBAAgB;AAClB,QAAI;AAAiB,qBAAe,CAAC;AAAA;AAChC,oBAAc,CAAC;AAAA,EACtB;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
+  "names": []
+}

package/dist/cjs/components/SubmenuItem/useGetSubmenuHandlers.js

@@ -33,55 +33,14 @@ __export(useGetSubmenuHandlers_exports, {
 module.exports = __toCommonJS(useGetSubmenuHandlers_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-const useGetSubmenuHandlers = ({
-  disabled,
-  rightAddon,
-  isSubmenuOpened,
-  onMouseEnter,
-  onSubmenuOpen,
-  onSubmenuClose,
-  onMouseLeave
-}) => {
-  const timeoutRef = (0, import_react.useRef)(null);
-  const onMouseEnterHandler = (0, import_react.useCallback)(
-    (e) => {
-      if (rightAddon !== "ellipsis") {
-        if (timeoutRef.current !== null)
-          clearTimeout(timeoutRef.current);
-        else if (!isSubmenuOpened)
-          onSubmenuOpen(e);
-        timeoutRef.current = null;
-      }
-      onMouseEnter(e);
-    },
-    [isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon]
-  );
-  const onMouseLeaveHandler = (0, import_react.useCallback)(
-    (e) => {
-      if (rightAddon !== "ellipsis") {
-        if (timeoutRef.current === null) {
-          timeoutRef.current = setTimeout(() => {
-            timeoutRef.current = null;
-            onSubmenuClose(e);
-          }, 300);
-        }
-      }
-      onMouseLeave(e);
-    },
-    [onMouseLeave, onSubmenuClose, rightAddon]
-  );
-  const onEllipsisClick = (0, import_react.useCallback)(
-    (e) => {
-      if (disabled)
-        return;
-      e.stopPropagation();
-      if (isSubmenuOpened)
-        onSubmenuClose(e);
-      else
-        onSubmenuOpen(e);
-    },
-    [disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen]
-  );
-  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+var import_getEllipsisHandlers = require("./getEllipsisHandlers.js");
+var import_getChevronHandlers = require("./getChevronHandlers.js");
+const useGetSubmenuHandlers = (submenuProps) => {
+  const { rightAddon } = submenuProps;
+  return (0, import_react.useMemo)(() => {
+    if (rightAddon === "ellipsis")
+      return (0, import_getEllipsisHandlers.getEllipsisHandlers)(submenuProps);
+    return (0, import_getChevronHandlers.getChevronHandlers)(submenuProps);
+  }, [submenuProps, rightAddon]);
 };
 //# sourceMappingURL=useGetSubmenuHandlers.js.map

package/dist/cjs/components/SubmenuItem/useGetSubmenuHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/SubmenuItem/useGetSubmenuHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useRef, useCallback } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\nexport const useGetSubmenuHandlers = ({\n  disabled,\n  rightAddon,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SubmenuProps>) => {\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  const onMouseEnterHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n        else if (!isSubmenuOpened) onSubmenuOpen(e);\n        timeoutRef.current = null;\n      }\n      onMouseEnter(e);\n    },\n    [isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon],\n  );\n\n  const onMouseLeaveHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current === null) {\n          timeoutRef.current = setTimeout(() => {\n            timeoutRef.current = null;\n            onSubmenuClose(e);\n          }, 300);\n        }\n      }\n      onMouseLeave(e);\n    },\n    [onMouseLeave, onSubmenuClose, rightAddon],\n  );\n\n  const onEllipsisClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (disabled) return;\n      e.stopPropagation();\n      if (isSubmenuOpened) onSubmenuClose(e);\n      else onSubmenuOpen(e);\n    },\n    [disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen],\n  );\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAG7B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0C;AACxC,QAAM,iBAAa,qBAA8B,IAAI;AAErD,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY;AAAM,uBAAa,WAAW,OAAO;AAAA,iBACvD,CAAC;AAAiB,wBAAc,CAAC;AAC1C,mBAAW,UAAU;AAAA,MACvB;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,iBAAiB,cAAc,eAAe,UAAU;AAAA,EAC3D;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY,MAAM;AAC/B,qBAAW,UAAU,WAAW,MAAM;AACpC,uBAAW,UAAU;AACrB,2BAAe,CAAC;AAAA,UAClB,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,cAAc,gBAAgB,UAAU;AAAA,EAC3C;AAEA,QAAM,sBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI;AAAU;AACd,QAAE,gBAAgB;AAClB,UAAI;AAAiB,uBAAe,CAAC;AAAA;AAChC,sBAAc,CAAC;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,iBAAiB,gBAAgB,aAAa;AAAA,EAC3D;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
+  "sourcesContent": ["import { useMemo } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { getEllipsisHandlers } from './getEllipsisHandlers.js';\nimport { getChevronHandlers } from './getChevronHandlers.js';\n\n// what we are trying to do:\n//   Ellipsis case:\n//     onMouseEnter -> open submenu\n//     onMouseLeave -> close submenu\n//     onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n//   Chevron case:\n//     onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have chosen to abstract multiple possible logical \"flows\" into the same layer for some reason\n//      specifically speaking this is trying to solve the\n//         \"rightAddons\" is \"ellipsis\" case\n//            at the same time as the\n//         \"rightAddons\" is \"chevron\" case\n//    they have more differences than similarities, so this is messy\n\n// @yuri since I'm both lazy and stupid, I want my code to be as stupid simple as me\n//   I am removing one layer of abstraction,\n//       ellipsis gets it's own logical flow\n//       as does chevron\n//   if you are a DRY advocate, you will probably hate me for this, I'm all for AHA (Avoid Hasty Abstractions).\nexport const useGetSubmenuHandlers = (submenuProps: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n  const { rightAddon } = submenuProps;\n  return useMemo(() => {\n    if (rightAddon === 'ellipsis') return getEllipsisHandlers(submenuProps);\n    return getChevronHandlers(submenuProps);\n  }, [submenuProps, rightAddon]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,iCAAoC;AACpC,gCAAmC;AAyB5B,MAAM,wBAAwB,CAAC,iBAA+D;AACnG,QAAM,EAAE,WAAW,IAAI;AACvB,aAAO,sBAAQ,MAAM;AACnB,QAAI,eAAe;AAAY,iBAAO,gDAAoB,YAAY;AACtE,eAAO,8CAAmB,YAAY;AAAA,EACxC,GAAG,CAAC,cAAc,UAAU,CAAC;AAC/B;",
   "names": []
 }

package/dist/esm/components/SubmenuItem/getChevronHandlers.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+const getChevronHandlers = ({
+  isSubmenuOpened,
+  onMouseEnter,
+  onSubmenuOpen,
+  onSubmenuClose,
+  onMouseLeave
+}) => {
+  const timeoutRef = { current: null };
+  const onMouseEnterHandler = (e) => {
+    if (timeoutRef.current !== null)
+      clearTimeout(timeoutRef.current);
+    else if (!isSubmenuOpened)
+      onSubmenuOpen?.(e);
+    timeoutRef.current = null;
+    onMouseEnter?.(e);
+  };
+  const onMouseLeaveHandler = (e) => {
+    if (timeoutRef.current === null) {
+      timeoutRef.current = setTimeout(() => {
+        timeoutRef.current = null;
+        onSubmenuClose?.(e);
+      }, 300);
+    }
+    onMouseLeave?.(e);
+  };
+  const onEllipsisClick = () => {
+    throw new Error("Invoking onEllipsisClick from chevron handlers... this should never happen");
+  };
+  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+};
+export {
+  getChevronHandlers
+};
+//# sourceMappingURL=getChevronHandlers.js.map

package/dist/esm/components/SubmenuItem/getChevronHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/getChevronHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> open submenu\n//   onMouseLeave -> close submenu\n//   onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n\n// what are the \"challenges\" of the task:\n//  - the submenu close has an animation and we ideally want to be sure state changes after the animation is done\n//      (we do it via an hardcoded 300ms delay, this is know to cause issues in some cases)\n//  - \"what is open and what is closed\" state lives under ds-dropdownmenu,\n//      we manipulate it via \"onSubmenuOpen\" and \"onSubmenuClose\" callbacks\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\n// important and relevant info:\n//  when this comment has been written,\n//    onSubmenuOpen coming from SingleWithSubmenuProps is forcing only one submenu to be open at a time internally\n//      the logic for this is implemented in ds-dropdownmenu,\n//         we had a bug in which we were invoking a stale callback,\n//            we monkeypatching it by ensuring the callback never changes\n//            in the future we should create code with \"hydraters\" to avoid this as per shuttle-v2\n\nexport const getChevronHandlers = ({\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n  const timeoutRef: { current: NodeJS.Timeout | null } = { current: null };\n\n  const onMouseEnterHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    else if (!isSubmenuOpened) onSubmenuOpen?.(e);\n    timeoutRef.current = null;\n    onMouseEnter?.(e);\n  };\n\n  const onMouseLeaveHandler = (e: React.MouseEvent) => {\n    if (timeoutRef.current === null) {\n      timeoutRef.current = setTimeout(() => {\n        timeoutRef.current = null;\n        onSubmenuClose?.(e);\n      }, 300);\n    }\n    onMouseLeave?.(e);\n  };\n  const onEllipsisClick = () => {\n    throw new Error('Invoking onEllipsisClick from chevron handlers... this should never happen');\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBhB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoD;AAClD,QAAM,aAAiD,EAAE,SAAS,KAAK;AAEvE,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY;AAAM,mBAAa,WAAW,OAAO;AAAA,aACvD,CAAC;AAAiB,sBAAgB,CAAC;AAC5C,eAAW,UAAU;AACrB,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,MAAwB;AACnD,QAAI,WAAW,YAAY,MAAM;AAC/B,iBAAW,UAAU,WAAW,MAAM;AACpC,mBAAW,UAAU;AACrB,yBAAiB,CAAC;AAAA,MACpB,GAAG,GAAG;AAAA,IACR;AACA,mBAAe,CAAC;AAAA,EAClB;AACA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
+  "names": []
+}

package/dist/esm/components/SubmenuItem/getEllipsisHandlers.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+const getEllipsisHandlers = ({
+  disabled,
+  isSubmenuOpened,
+  onMouseEnter,
+  onSubmenuOpen,
+  onSubmenuClose,
+  onMouseLeave
+}) => {
+  const onMouseEnterHandler = (e) => onMouseEnter?.(e);
+  const onMouseLeaveHandler = (e) => onMouseLeave?.(e);
+  const onEllipsisClick = (e) => {
+    if (disabled)
+      return;
+    e.stopPropagation();
+    if (isSubmenuOpened)
+      onSubmenuClose(e);
+    else
+      onSubmenuOpen(e);
+  };
+  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+};
+export {
+  getEllipsisHandlers
+};
+//# sourceMappingURL=getEllipsisHandlers.js.map

package/dist/esm/components/SubmenuItem/getEllipsisHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/getEllipsisHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\n// what we are trying to do:\n//   onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//   onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have created the API in such a way that we implement a \"bridge\" and \"inversion of control\" pattern\n//      this requires extra care when handling the logic and designing the solution\n\nexport const getEllipsisHandlers = ({\n  disabled,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n  // why not just onMouseEnterHandler = onMouseEnter?\n  //  we expect onMouseEnterHandler/onMouseLeaveHandler\n  //    to always exist even if onMouseEnter/onMouseLeave are undefined\n  //  also, if in the future we need custom logic for these handlers, we can add it here\n  const onMouseEnterHandler: React.MouseEventHandler = (e) => onMouseEnter?.(e);\n  const onMouseLeaveHandler: React.MouseEventHandler = (e) => onMouseLeave?.(e);\n\n  const onEllipsisClick: React.MouseEventHandler = (e) => {\n    if (disabled) return;\n    e.stopPropagation();\n    if (isSubmenuOpened) onSubmenuClose(e);\n    else onSubmenuOpen(e);\n  };\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoD;AAKlD,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAC5E,QAAM,sBAA+C,CAAC,MAAM,eAAe,CAAC;AAE5E,QAAM,kBAA2C,CAAC,MAAM;AACtD,QAAI;AAAU;AACd,MAAE,gBAAgB;AAClB,QAAI;AAAiB,qBAAe,CAAC;AAAA;AAChC,oBAAc,CAAC;AAAA,EACtB;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
+  "names": []
+}

package/dist/esm/components/SubmenuItem/useGetSubmenuHandlers.js

@@ -1,55 +1,14 @@
 import * as React from "react";
-import { useRef, useCallback } from "react";
-const useGetSubmenuHandlers = ({
-  disabled,
-  rightAddon,
-  isSubmenuOpened,
-  onMouseEnter,
-  onSubmenuOpen,
-  onSubmenuClose,
-  onMouseLeave
-}) => {
-  const timeoutRef = useRef(null);
-  const onMouseEnterHandler = useCallback(
-    (e) => {
-      if (rightAddon !== "ellipsis") {
-        if (timeoutRef.current !== null)
-          clearTimeout(timeoutRef.current);
-        else if (!isSubmenuOpened)
-          onSubmenuOpen(e);
-        timeoutRef.current = null;
-      }
-      onMouseEnter(e);
-    },
-    [isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon]
-  );
-  const onMouseLeaveHandler = useCallback(
-    (e) => {
-      if (rightAddon !== "ellipsis") {
-        if (timeoutRef.current === null) {
-          timeoutRef.current = setTimeout(() => {
-            timeoutRef.current = null;
-            onSubmenuClose(e);
-          }, 300);
-        }
-      }
-      onMouseLeave(e);
-    },
-    [onMouseLeave, onSubmenuClose, rightAddon]
-  );
-  const onEllipsisClick = useCallback(
-    (e) => {
-      if (disabled)
-        return;
-      e.stopPropagation();
-      if (isSubmenuOpened)
-        onSubmenuClose(e);
-      else
-        onSubmenuOpen(e);
-    },
-    [disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen]
-  );
-  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };
+import { useMemo } from "react";
+import { getEllipsisHandlers } from "./getEllipsisHandlers.js";
+import { getChevronHandlers } from "./getChevronHandlers.js";
+const useGetSubmenuHandlers = (submenuProps) => {
+  const { rightAddon } = submenuProps;
+  return useMemo(() => {
+    if (rightAddon === "ellipsis")
+      return getEllipsisHandlers(submenuProps);
+    return getChevronHandlers(submenuProps);
+  }, [submenuProps, rightAddon]);
 };
 export {
   useGetSubmenuHandlers

package/dist/esm/components/SubmenuItem/useGetSubmenuHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SubmenuItem/useGetSubmenuHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useCallback } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\n\nexport const useGetSubmenuHandlers = ({\n  disabled,\n  rightAddon,\n  isSubmenuOpened,\n  onMouseEnter,\n  onSubmenuOpen,\n  onSubmenuClose,\n  onMouseLeave,\n}: Required<DSMenuItemT.SubmenuProps>) => {\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  const onMouseEnterHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n        else if (!isSubmenuOpened) onSubmenuOpen(e);\n        timeoutRef.current = null;\n      }\n      onMouseEnter(e);\n    },\n    [isSubmenuOpened, onMouseEnter, onSubmenuOpen, rightAddon],\n  );\n\n  const onMouseLeaveHandler = useCallback(\n    (e: React.MouseEvent) => {\n      if (rightAddon !== 'ellipsis') {\n        if (timeoutRef.current === null) {\n          timeoutRef.current = setTimeout(() => {\n            timeoutRef.current = null;\n            onSubmenuClose(e);\n          }, 300);\n        }\n      }\n      onMouseLeave(e);\n    },\n    [onMouseLeave, onSubmenuClose, rightAddon],\n  );\n\n  const onEllipsisClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (disabled) return;\n      e.stopPropagation();\n      if (isSubmenuOpened) onSubmenuClose(e);\n      else onSubmenuOpen(e);\n    },\n    [disabled, isSubmenuOpened, onSubmenuClose, onSubmenuOpen],\n  );\n\n  return { onMouseEnterHandler, onMouseLeaveHandler, onEllipsisClick };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,mBAAmB;AAG7B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0C;AACxC,QAAM,aAAa,OAA8B,IAAI;AAErD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY;AAAM,uBAAa,WAAW,OAAO;AAAA,iBACvD,CAAC;AAAiB,wBAAc,CAAC;AAC1C,mBAAW,UAAU;AAAA,MACvB;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,iBAAiB,cAAc,eAAe,UAAU;AAAA,EAC3D;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,eAAe,YAAY;AAC7B,YAAI,WAAW,YAAY,MAAM;AAC/B,qBAAW,UAAU,WAAW,MAAM;AACpC,uBAAW,UAAU;AACrB,2BAAe,CAAC;AAAA,UAClB,GAAG,GAAG;AAAA,QACR;AAAA,MACF;AACA,mBAAa,CAAC;AAAA,IAChB;AAAA,IACA,CAAC,cAAc,gBAAgB,UAAU;AAAA,EAC3C;AAEA,QAAM,kBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI;AAAU;AACd,QAAE,gBAAgB;AAClB,UAAI;AAAiB,uBAAe,CAAC;AAAA;AAChC,sBAAc,CAAC;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,iBAAiB,gBAAgB,aAAa;AAAA,EAC3D;AAEA,SAAO,EAAE,qBAAqB,qBAAqB,gBAAgB;AACrE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSMenuItemT } from '../../react-desc-prop-types.js';\nimport { getEllipsisHandlers } from './getEllipsisHandlers.js';\nimport { getChevronHandlers } from './getChevronHandlers.js';\n\n// what we are trying to do:\n//   Ellipsis case:\n//     onMouseEnter -> open submenu\n//     onMouseLeave -> close submenu\n//     onEllipsisClick -> we should not even invoke this handler, as the \"ellipsis\" should not even exist?\n//   Chevron case:\n//     onMouseEnter -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onMouseLeave -> be transparently \"doing nothing\" as hover does nothing by design for \"ellipsis\"\n//     onEllipsisClick -> toggle the submenu open/close as per design\n\n// what are the \"challenges\" of the task:\n//  - we have chosen to abstract multiple possible logical \"flows\" into the same layer for some reason\n//      specifically speaking this is trying to solve the\n//         \"rightAddons\" is \"ellipsis\" case\n//            at the same time as the\n//         \"rightAddons\" is \"chevron\" case\n//    they have more differences than similarities, so this is messy\n\n// @yuri since I'm both lazy and stupid, I want my code to be as stupid simple as me\n//   I am removing one layer of abstraction,\n//       ellipsis gets it's own logical flow\n//       as does chevron\n//   if you are a DRY advocate, you will probably hate me for this, I'm all for AHA (Avoid Hasty Abstractions).\nexport const useGetSubmenuHandlers = (submenuProps: Required<DSMenuItemT.SingleWithSubmenuProps>) => {\n  const { rightAddon } = submenuProps;\n  return useMemo(() => {\n    if (rightAddon === 'ellipsis') return getEllipsisHandlers(submenuProps);\n    return getChevronHandlers(submenuProps);\n  }, [submenuProps, rightAddon]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAyB5B,MAAM,wBAAwB,CAAC,iBAA+D;AACnG,QAAM,EAAE,WAAW,IAAI;AACvB,SAAO,QAAQ,MAAM;AACnB,QAAI,eAAe;AAAY,aAAO,oBAAoB,YAAY;AACtE,WAAO,mBAAmB,YAAY;AAAA,EACxC,GAAG,CAAC,cAAc,UAAU,CAAC;AAC/B;",
   "names": []
 }

package/dist/types/components/SubmenuItem/getChevronHandlers.d.ts

@@ -0,0 +1,6 @@
+import type { DSMenuItemT } from '../../react-desc-prop-types.js';
+export declare const getChevronHandlers: ({ isSubmenuOpened, onMouseEnter, onSubmenuOpen, onSubmenuClose, onMouseLeave, }: Required<DSMenuItemT.SingleWithSubmenuProps>) => {
+    onMouseEnterHandler: (e: React.MouseEvent) => void;
+    onMouseLeaveHandler: (e: React.MouseEvent) => void;
+    onEllipsisClick: () => never;
+};

package/dist/types/components/SubmenuItem/getEllipsisHandlers.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { DSMenuItemT } from '../../react-desc-prop-types.js';
+export declare const getEllipsisHandlers: ({ disabled, isSubmenuOpened, onMouseEnter, onSubmenuOpen, onSubmenuClose, onMouseLeave, }: Required<DSMenuItemT.SingleWithSubmenuProps>) => {
+    onMouseEnterHandler: import("react").MouseEventHandler<Element>;
+    onMouseLeaveHandler: import("react").MouseEventHandler<Element>;
+    onEllipsisClick: import("react").MouseEventHandler<Element>;
+};

package/dist/types/components/SubmenuItem/useGetSubmenuHandlers.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { DSMenuItemT } from '../../react-desc-prop-types.js';
-export declare const useGetSubmenuHandlers: ({ disabled, rightAddon, isSubmenuOpened, onMouseEnter, onSubmenuOpen, onSubmenuClose, onMouseLeave, }: Required<DSMenuItemT.SubmenuProps>) => {
-    onMouseEnterHandler: (e: React.MouseEvent) => void;
-    onMouseLeaveHandler: (e: React.MouseEvent) => void;
+export declare const useGetSubmenuHandlers: (submenuProps: Required<DSMenuItemT.SingleWithSubmenuProps>) => {
+    onMouseEnterHandler: import("react").MouseEventHandler<Element>;
+    onMouseLeaveHandler: import("react").MouseEventHandler<Element>;
     onEllipsisClick: import("react").MouseEventHandler<Element>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-menu-items",
-  "version": "3.18.0-next.4",
+  "version": "3.18.0-next.5",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Menu Items",
   "files": [
@@ -37,11 +37,11 @@
   "dependencies": {
     "@xstyled/system": "~3.7.3",
     "@xstyled/util": "3.7.0",
-    "@elliemae/ds-form-checkbox": "3.18.0-next.4",
-    "@elliemae/ds-icons": "3.18.0-next.4",
-    "@elliemae/ds-props-helpers": "3.18.0-next.4",
-    "@elliemae/ds-grid": "3.18.0-next.4",
-    "@elliemae/ds-system": "3.18.0-next.4"
+    "@elliemae/ds-form-checkbox": "3.18.0-next.5",
+    "@elliemae/ds-grid": "3.18.0-next.5",
+    "@elliemae/ds-icons": "3.18.0-next.5",
+    "@elliemae/ds-props-helpers": "3.18.0-next.5",
+    "@elliemae/ds-system": "3.18.0-next.5"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",