gantt-task-react-v 1.1.15 → 1.1.17

package/dist/gantt-task-react.es.js

@@ -15621,7 +15621,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
 }
 function isTableElement(element) {
@@ -15629,7 +15629,7 @@ function isTableElement(element) {
 }
 function isContainingBlock(element) {
   const webkit = isWebKit();
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   return css.transform !== "none" || css.perspective !== "none" || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
 }
 function getContainingBlock(element) {
@@ -15651,7 +15651,7 @@ function isWebKit() {
 function isLastTraversableNode(node) {
   return ["html", "body", "#document"].includes(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -15706,7 +15706,7 @@ function getOverflowAncestors(node, list, traverseIframes) {
   return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   let width = parseFloat(css.width) || 0;
   let height = parseFloat(css.height) || 0;
   const hasOffset = isHTMLElement(element);
@@ -15802,7 +15802,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -15884,7 +15884,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll2.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll2.scrollTop;
-  if (getComputedStyle(body).direction === "rtl") {
+  if (getComputedStyle$1(body).direction === "rtl") {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -15957,7 +15957,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
 }
 function getClippingElementAncestors(element, cache) {
   const cachedResult = cache.get(element);
@@ -15966,10 +15966,10 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === "fixed";
+  const elementIsFixed = getComputedStyle$1(element).position === "fixed";
   let currentNode = elementIsFixed ? getParentNode(element) : element;
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === "fixed") {
       currentContainingBlockComputedStyle = null;
@@ -16052,7 +16052,7 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   };
 }
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
     return null;
   }
   if (polyfill) {
@@ -16066,10 +16066,10 @@ function getOffsetParent(element, polyfill) {
     return window2;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === "static") {
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === "static") {
     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
   }
-  if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle(offsetParent).position === "static" && !isContainingBlock(offsetParent))) {
+  if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle$1(offsetParent).position === "static" && !isContainingBlock(offsetParent))) {
     return window2;
   }
   return offsetParent || getContainingBlock(element) || window2;
@@ -16087,7 +16087,7 @@ const getElementRects = async function(data) {
   };
 };
 function isRTL(element) {
-  return getComputedStyle(element).direction === "rtl";
+  return getComputedStyle$1(element).direction === "rtl";
 }
 const platform = {
   convertOffsetParentRelativeRectToViewportRelativeRect,
@@ -16788,7 +16788,7 @@ function useDismiss(context, props) {
       const canScrollY = target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
       let xCond = canScrollY && event.offsetX > target.clientWidth;
       if (canScrollY) {
-        const isRTL2 = getComputedStyle(target).direction === "rtl";
+        const isRTL2 = getComputedStyle$1(target).direction === "rtl";
         if (isRTL2) {
           xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
         }
@@ -18019,46 +18019,179 @@ function MenuOption(props) {
     },
     handleAction,
     option,
-    option: { icon: icon2, label: label2, disabled }
+    option: { icon: icon2, label: label2, disabled, children }
   } = props;
+  const [hovered, setHovered] = useState(false);
+  const [coords, setCoords] = useState(null);
+  const btnRef = useRef(null);
+  const nestedRef = useRef(null);
+  const closeTimeoutRef = useRef(null);
   const onClick = useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) {
         return;
       }
+      if (children && children.length > 0) {
+        setHovered(true);
+        return;
+      }
       handleAction(option);
       onClose == null ? void 0 : onClose();
     },
-    [onClose, handleAction, option, disabled]
+    [onClose, handleAction, option, disabled, children]
   );
+  useEffect(() => {
+    if (!hovered || !nestedRef.current)
+      return;
+    const cssVars = [
+      "--gantt-context-menu-bg-color",
+      "--gantt-context-menu-box-shadow",
+      "--gantt-shape-border-radius",
+      "--gantt-font-family",
+      "--gantt-font-size",
+      "--gantt-context-menu-empty-color"
+    ];
+    const sourceEl = btnRef.current || (typeof document !== "undefined" ? document.body : null);
+    if (!sourceEl)
+      return;
+    const cs = getComputedStyle(sourceEl);
+    cssVars.forEach((v) => {
+      const val = cs.getPropertyValue(v).trim();
+      if (val) {
+        nestedRef.current.style.setProperty(v, val);
+      }
+    });
+  }, [hovered, coords]);
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      className: styles$1.menuOption,
-      "aria-disabled": disabled,
-      disabled,
-      style: {
-        height: contextMenuOptionHeight,
-        paddingLeft: contextMenuSidePadding,
-        paddingRight: contextMenuSidePadding,
-        color: "var(--gantt-context-menu-text-color)"
+      onMouseEnter: () => {
+        var _a, _b;
+        if (closeTimeoutRef.current) {
+          window.clearTimeout(closeTimeoutRef.current);
+          closeTimeoutRef.current = null;
+        }
+        setHovered(true);
+        const rect = (_a = btnRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        const parentMenu = (_b = btnRef.current) == null ? void 0 : _b.closest(
+          '[role="menu"]'
+        );
+        const parentRect = (parentMenu == null ? void 0 : parentMenu.getBoundingClientRect()) ?? null;
+        if (rect) {
+          setCoords({
+            left: parentRect ? parentRect.right : rect.right,
+            top: rect.top,
+            parentWidth: parentRect ? Math.round(parentRect.width) : void 0
+          });
+        }
       },
-      onClick,
+      onMouseLeave: () => {
+        closeTimeoutRef.current = window.setTimeout(() => {
+          setHovered(false);
+          setCoords(null);
+          closeTimeoutRef.current = null;
+        }, 200);
+      },
+      style: { position: "relative" },
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsxs(
+          "button",
           {
-            className: styles$1.icon,
+            className: styles$1.menuOption,
+            "aria-disabled": disabled,
+            disabled,
             style: {
-              width: contextMenuIconWidth,
-              color: "var(--gantt-context-menu-text-color)",
-              opacity: disabled ? 0.3 : 0.5
+              height: contextMenuOptionHeight,
+              paddingLeft: contextMenuSidePadding,
+              paddingRight: contextMenuSidePadding,
+              color: "var(--gantt-context-menu-text-color)"
             },
-            children: icon2
+            onClick,
+            ref: btnRef,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: styles$1.icon,
+                  style: {
+                    width: contextMenuIconWidth,
+                    color: "var(--gantt-context-menu-text-color)",
+                    opacity: disabled ? 0.3 : 0.5
+                  },
+                  children: icon2
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: styles$1.label, children: label2 }),
+              children && children.length > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginLeft: 8,
+                    opacity: 0.6,
+                    pointerEvents: "none"
+                  },
+                  children: /* @__PURE__ */ jsx("span", { style: { fontSize: "14px" }, children: "▶" })
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: styles$1.label, children: label2 })
+        children && children.length > 0 && hovered && typeof document !== "undefined" && coords && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "menu",
+              ref: nestedRef,
+              onMouseEnter: () => {
+                if (closeTimeoutRef.current) {
+                  window.clearTimeout(closeTimeoutRef.current);
+                  closeTimeoutRef.current = null;
+                }
+                setHovered(true);
+              },
+              onMouseLeave: () => {
+                closeTimeoutRef.current = window.setTimeout(() => {
+                  setHovered(false);
+                  setCoords(null);
+                  closeTimeoutRef.current = null;
+                }, 200);
+              },
+              style: {
+                position: "fixed",
+                // place submenu just to the right of parent menu
+                left: (coords.left ?? 0) + 8,
+                top: coords.top,
+                // match the parent menu container look & behavior
+                backgroundColor: "var(--gantt-context-menu-bg-color)",
+                boxShadow: "var(--gantt-context-menu-box-shadow)",
+                borderRadius: "var(--gantt-shape-border-radius)",
+                fontFamily: "var(--gantt-font-family)",
+                display: "flex",
+                flexDirection: "column",
+                width: "max-content",
+                minWidth: coords && coords.parentWidth ? coords.parentWidth : 140,
+                maxHeight: "calc(100vh - 24px)",
+                overflowY: "auto",
+                overflowX: "hidden",
+                gap: 6,
+                zIndex: 1e4,
+                pointerEvents: "auto"
+              },
+              children: children.map((child, index2) => /* @__PURE__ */ jsx(
+                MenuOption,
+                {
+                  distances: props.distances,
+                  handleAction,
+                  option: child,
+                  onClose
+                },
+                index2
+              ))
+            }
+          ),
+          document.body
+        )
       ]
     }
   );
@@ -18113,7 +18246,7 @@ function ContextMenu(props) {
         handleCloseContextMenu();
       }
     },
-    strategy: "absolute",
+    strategy: "fixed",
     placement: "bottom-start",
     middleware: [
       flip(),
@@ -18138,73 +18271,116 @@ function ContextMenu(props) {
     dismiss,
     role
   ]);
-  const floatingRef = useRef();
+  const floatingRef = useRef(null);
   const setFloatingRef = useCallback(
     (el) => {
-      floatingRef.current = el || void 0;
+      floatingRef.current = el;
       setFloating(el);
     },
     [setFloating]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...getReferenceProps(),
-        style: {
-          position: "absolute",
-          left: x,
-          top: y,
-          zIndex: 1
-        },
-        ref: setReference
+  useEffect(() => {
+    var _a2;
+    if (!task)
+      return;
+    const cssVars = [
+      "--gantt-context-menu-bg-color",
+      "--gantt-context-menu-box-shadow",
+      "--gantt-shape-border-radius",
+      "--gantt-font-family",
+      "--gantt-font-size",
+      "--gantt-context-menu-empty-color"
+    ];
+    const refEl = ((_a2 = refs == null ? void 0 : refs.reference) == null ? void 0 : _a2.current) ?? null;
+    const sourceEl = refEl || (typeof document !== "undefined" ? document.body : null);
+    if (!sourceEl || !floatingRef.current)
+      return;
+    const cs = getComputedStyle(sourceEl);
+    cssVars.forEach((v) => {
+      const val = cs.getPropertyValue(v).trim();
+      if (val) {
+        floatingRef.current.style.setProperty(v, val);
       }
-    ),
-    task && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: setFloatingRef,
-        style: {
-          position: strategy,
-          top: menuY ?? 0,
-          left: menuX ?? 0,
-          width: "max-content",
-          backgroundColor: "var(--gantt-context-menu-bg-color)",
-          boxShadow: "var(--gantt-context-menu-box-shadow)",
-          borderRadius: "var(--gantt-shape-border-radius)",
-          fontFamily: "var(--gantt-font-family)",
-          display: "flex",
-          flexDirection: "column",
-          overflow: "hidden",
-          gap: 6,
-          zIndex: 10
-        },
-        ...getFloatingProps(),
-        children: [
-          optionsForRender.map((option, index2) => /* @__PURE__ */ jsx(
-            MenuOption,
-            {
-              onClose: handleCloseContextMenu,
-              distances,
-              handleAction: handleOptionAction,
-              option
+    });
+  }, [task, refs, menuX, menuY]);
+  let viewportX = x;
+  let viewportY = y;
+  if (typeof document !== "undefined") {
+    const ganttWrapper = document.querySelector(
+      '[data-testid="gantt"]'
+    );
+    if (ganttWrapper) {
+      const rect = ganttWrapper.getBoundingClientRect();
+      viewportX = rect.left + x;
+      viewportY = rect.top + y;
+    }
+  }
+  const referenceNode = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...getReferenceProps(),
+      style: {
+        position: "fixed",
+        left: viewportX,
+        top: viewportY,
+        zIndex: 1,
+        pointerEvents: "none"
+      },
+      ref: setReference
+    }
+  );
+  const menuNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setFloatingRef,
+      style: {
+        position: strategy,
+        top: menuY ?? 0,
+        left: menuX ?? 0,
+        width: "max-content",
+        backgroundColor: "var(--gantt-context-menu-bg-color)",
+        boxShadow: "var(--gantt-context-menu-box-shadow)",
+        borderRadius: "var(--gantt-shape-border-radius)",
+        fontFamily: "var(--gantt-font-family)",
+        display: "flex",
+        flexDirection: "column",
+        // Allow the menu to scroll if it would otherwise overflow the viewport
+        maxHeight: "calc(100vh - 24px)",
+        overflowY: "auto",
+        overflowX: "hidden",
+        gap: 6,
+        zIndex: 1e4,
+        pointerEvents: "auto"
+      },
+      ...getFloatingProps(),
+      children: [
+        optionsForRender.map((option, index2) => /* @__PURE__ */ jsx(
+          MenuOption,
+          {
+            onClose: handleCloseContextMenu,
+            distances,
+            handleAction: handleOptionAction,
+            option
+          },
+          index2
+        )),
+        optionsForRender.length === 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "6px 12px",
+              color: "var(--gantt-context-menu-empty-color, #666)",
+              fontSize: "var(--gantt-font-size)"
             },
-            index2
-          )),
-          optionsForRender.length === 0 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                padding: "6px 12px",
-                color: "var(--gantt-context-menu-empty-color, #666)",
-                fontSize: "var(--gantt-font-size)"
-              },
-              children: "—"
-            }
-          )
-        ]
-      }
-    )
+            children: "—"
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    referenceNode,
+    task && typeof document !== "undefined" ? createPortal(menuNode, document.body) : task && menuNode
   ] });
 }
 const getParentTasks = (selectedTasks, tasksMap) => {

package/dist/gantt-task-react.umd.js

@@ -15638,7 +15638,7 @@
       overflowX,
       overflowY,
       display
-    } = getComputedStyle(element);
+    } = getComputedStyle$1(element);
     return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
   }
   function isTableElement(element) {
@@ -15646,7 +15646,7 @@
   }
   function isContainingBlock(element) {
     const webkit = isWebKit();
-    const css = getComputedStyle(element);
+    const css = getComputedStyle$1(element);
     return css.transform !== "none" || css.perspective !== "none" || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
   }
   function getContainingBlock(element) {
@@ -15668,7 +15668,7 @@
   function isLastTraversableNode(node) {
     return ["html", "body", "#document"].includes(getNodeName(node));
   }
-  function getComputedStyle(element) {
+  function getComputedStyle$1(element) {
     return getWindow(element).getComputedStyle(element);
   }
   function getNodeScroll(element) {
@@ -15723,7 +15723,7 @@
     return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
   }
   function getCssDimensions(element) {
-    const css = getComputedStyle(element);
+    const css = getComputedStyle$1(element);
     let width = parseFloat(css.width) || 0;
     let height = parseFloat(css.height) || 0;
     const hasOffset = isHTMLElement(element);
@@ -15819,7 +15819,7 @@
       while (currentIFrame && offsetParent && offsetWin !== currentWin) {
         const iframeScale = getScale(currentIFrame);
         const iframeRect = currentIFrame.getBoundingClientRect();
-        const css = getComputedStyle(currentIFrame);
+        const css = getComputedStyle$1(currentIFrame);
         const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
         const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
         x *= iframeScale.x;
@@ -15901,7 +15901,7 @@
     const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
     let x = -scroll2.scrollLeft + getWindowScrollBarX(element);
     const y = -scroll2.scrollTop;
-    if (getComputedStyle(body).direction === "rtl") {
+    if (getComputedStyle$1(body).direction === "rtl") {
       x += max(html.clientWidth, body.clientWidth) - width;
     }
     return {
@@ -15974,7 +15974,7 @@
     if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
       return false;
     }
-    return getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+    return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
   }
   function getClippingElementAncestors(element, cache) {
     const cachedResult = cache.get(element);
@@ -15983,10 +15983,10 @@
     }
     let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
     let currentContainingBlockComputedStyle = null;
-    const elementIsFixed = getComputedStyle(element).position === "fixed";
+    const elementIsFixed = getComputedStyle$1(element).position === "fixed";
     let currentNode = elementIsFixed ? getParentNode(element) : element;
     while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-      const computedStyle = getComputedStyle(currentNode);
+      const computedStyle = getComputedStyle$1(currentNode);
       const currentNodeIsContaining = isContainingBlock(currentNode);
       if (!currentNodeIsContaining && computedStyle.position === "fixed") {
         currentContainingBlockComputedStyle = null;
@@ -16069,7 +16069,7 @@
     };
   }
   function getTrueOffsetParent(element, polyfill) {
-    if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
+    if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
       return null;
     }
     if (polyfill) {
@@ -16083,10 +16083,10 @@
       return window2;
     }
     let offsetParent = getTrueOffsetParent(element, polyfill);
-    while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === "static") {
+    while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === "static") {
       offsetParent = getTrueOffsetParent(offsetParent, polyfill);
     }
-    if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle(offsetParent).position === "static" && !isContainingBlock(offsetParent))) {
+    if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle$1(offsetParent).position === "static" && !isContainingBlock(offsetParent))) {
       return window2;
     }
     return offsetParent || getContainingBlock(element) || window2;
@@ -16104,7 +16104,7 @@
     };
   };
   function isRTL(element) {
-    return getComputedStyle(element).direction === "rtl";
+    return getComputedStyle$1(element).direction === "rtl";
   }
   const platform = {
     convertOffsetParentRelativeRectToViewportRelativeRect,
@@ -16805,7 +16805,7 @@
         const canScrollY = target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
         let xCond = canScrollY && event.offsetX > target.clientWidth;
         if (canScrollY) {
-          const isRTL2 = getComputedStyle(target).direction === "rtl";
+          const isRTL2 = getComputedStyle$1(target).direction === "rtl";
           if (isRTL2) {
             xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
           }
@@ -18036,46 +18036,179 @@
       },
       handleAction,
       option,
-      option: { icon: icon2, label: label2, disabled }
+      option: { icon: icon2, label: label2, disabled, children }
     } = props;
+    const [hovered, setHovered] = React.useState(false);
+    const [coords, setCoords] = React.useState(null);
+    const btnRef = React.useRef(null);
+    const nestedRef = React.useRef(null);
+    const closeTimeoutRef = React.useRef(null);
     const onClick = React.useCallback(
       (e) => {
         e.preventDefault();
         if (disabled) {
           return;
         }
+        if (children && children.length > 0) {
+          setHovered(true);
+          return;
+        }
         handleAction(option);
         onClose == null ? void 0 : onClose();
       },
-      [onClose, handleAction, option, disabled]
+      [onClose, handleAction, option, disabled, children]
     );
+    React.useEffect(() => {
+      if (!hovered || !nestedRef.current)
+        return;
+      const cssVars = [
+        "--gantt-context-menu-bg-color",
+        "--gantt-context-menu-box-shadow",
+        "--gantt-shape-border-radius",
+        "--gantt-font-family",
+        "--gantt-font-size",
+        "--gantt-context-menu-empty-color"
+      ];
+      const sourceEl = btnRef.current || (typeof document !== "undefined" ? document.body : null);
+      if (!sourceEl)
+        return;
+      const cs = getComputedStyle(sourceEl);
+      cssVars.forEach((v) => {
+        const val = cs.getPropertyValue(v).trim();
+        if (val) {
+          nestedRef.current.style.setProperty(v, val);
+        }
+      });
+    }, [hovered, coords]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+      "div",
       {
-        className: styles$1.menuOption,
-        "aria-disabled": disabled,
-        disabled,
-        style: {
-          height: contextMenuOptionHeight,
-          paddingLeft: contextMenuSidePadding,
-          paddingRight: contextMenuSidePadding,
-          color: "var(--gantt-context-menu-text-color)"
+        onMouseEnter: () => {
+          var _a, _b;
+          if (closeTimeoutRef.current) {
+            window.clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+          }
+          setHovered(true);
+          const rect = (_a = btnRef.current) == null ? void 0 : _a.getBoundingClientRect();
+          const parentMenu = (_b = btnRef.current) == null ? void 0 : _b.closest(
+            '[role="menu"]'
+          );
+          const parentRect = (parentMenu == null ? void 0 : parentMenu.getBoundingClientRect()) ?? null;
+          if (rect) {
+            setCoords({
+              left: parentRect ? parentRect.right : rect.right,
+              top: rect.top,
+              parentWidth: parentRect ? Math.round(parentRect.width) : void 0
+            });
+          }
         },
-        onClick,
+        onMouseLeave: () => {
+          closeTimeoutRef.current = window.setTimeout(() => {
+            setHovered(false);
+            setCoords(null);
+            closeTimeoutRef.current = null;
+          }, 200);
+        },
+        style: { position: "relative" },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
             {
-              className: styles$1.icon,
+              className: styles$1.menuOption,
+              "aria-disabled": disabled,
+              disabled,
               style: {
-                width: contextMenuIconWidth,
-                color: "var(--gantt-context-menu-text-color)",
-                opacity: disabled ? 0.3 : 0.5
+                height: contextMenuOptionHeight,
+                paddingLeft: contextMenuSidePadding,
+                paddingRight: contextMenuSidePadding,
+                color: "var(--gantt-context-menu-text-color)"
               },
-              children: icon2
+              onClick,
+              ref: btnRef,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: styles$1.icon,
+                    style: {
+                      width: contextMenuIconWidth,
+                      color: "var(--gantt-context-menu-text-color)",
+                      opacity: disabled ? 0.3 : 0.5
+                    },
+                    children: icon2
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.label, children: label2 }),
+                children && children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      marginLeft: 8,
+                      opacity: 0.6,
+                      pointerEvents: "none"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px" }, children: "▶" })
+                  }
+                )
+              ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.label, children: label2 })
+          children && children.length > 0 && hovered && typeof document !== "undefined" && coords && ReactDOM.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "menu",
+                ref: nestedRef,
+                onMouseEnter: () => {
+                  if (closeTimeoutRef.current) {
+                    window.clearTimeout(closeTimeoutRef.current);
+                    closeTimeoutRef.current = null;
+                  }
+                  setHovered(true);
+                },
+                onMouseLeave: () => {
+                  closeTimeoutRef.current = window.setTimeout(() => {
+                    setHovered(false);
+                    setCoords(null);
+                    closeTimeoutRef.current = null;
+                  }, 200);
+                },
+                style: {
+                  position: "fixed",
+                  // place submenu just to the right of parent menu
+                  left: (coords.left ?? 0) + 8,
+                  top: coords.top,
+                  // match the parent menu container look & behavior
+                  backgroundColor: "var(--gantt-context-menu-bg-color)",
+                  boxShadow: "var(--gantt-context-menu-box-shadow)",
+                  borderRadius: "var(--gantt-shape-border-radius)",
+                  fontFamily: "var(--gantt-font-family)",
+                  display: "flex",
+                  flexDirection: "column",
+                  width: "max-content",
+                  minWidth: coords && coords.parentWidth ? coords.parentWidth : 140,
+                  maxHeight: "calc(100vh - 24px)",
+                  overflowY: "auto",
+                  overflowX: "hidden",
+                  gap: 6,
+                  zIndex: 1e4,
+                  pointerEvents: "auto"
+                },
+                children: children.map((child, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+                  MenuOption,
+                  {
+                    distances: props.distances,
+                    handleAction,
+                    option: child,
+                    onClose
+                  },
+                  index2
+                ))
+              }
+            ),
+            document.body
+          )
         ]
       }
     );
@@ -18130,7 +18263,7 @@
           handleCloseContextMenu();
         }
       },
-      strategy: "absolute",
+      strategy: "fixed",
       placement: "bottom-start",
       middleware: [
         flip(),
@@ -18155,73 +18288,116 @@
       dismiss,
       role
     ]);
-    const floatingRef = React.useRef();
+    const floatingRef = React.useRef(null);
     const setFloatingRef = React.useCallback(
       (el) => {
-        floatingRef.current = el || void 0;
+        floatingRef.current = el;
         setFloating(el);
       },
       [setFloating]
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ...getReferenceProps(),
-          style: {
-            position: "absolute",
-            left: x,
-            top: y,
-            zIndex: 1
-          },
-          ref: setReference
+    React.useEffect(() => {
+      var _a2;
+      if (!task)
+        return;
+      const cssVars = [
+        "--gantt-context-menu-bg-color",
+        "--gantt-context-menu-box-shadow",
+        "--gantt-shape-border-radius",
+        "--gantt-font-family",
+        "--gantt-font-size",
+        "--gantt-context-menu-empty-color"
+      ];
+      const refEl = ((_a2 = refs == null ? void 0 : refs.reference) == null ? void 0 : _a2.current) ?? null;
+      const sourceEl = refEl || (typeof document !== "undefined" ? document.body : null);
+      if (!sourceEl || !floatingRef.current)
+        return;
+      const cs = getComputedStyle(sourceEl);
+      cssVars.forEach((v) => {
+        const val = cs.getPropertyValue(v).trim();
+        if (val) {
+          floatingRef.current.style.setProperty(v, val);
         }
-      ),
-      task && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: setFloatingRef,
-          style: {
-            position: strategy,
-            top: menuY ?? 0,
-            left: menuX ?? 0,
-            width: "max-content",
-            backgroundColor: "var(--gantt-context-menu-bg-color)",
-            boxShadow: "var(--gantt-context-menu-box-shadow)",
-            borderRadius: "var(--gantt-shape-border-radius)",
-            fontFamily: "var(--gantt-font-family)",
-            display: "flex",
-            flexDirection: "column",
-            overflow: "hidden",
-            gap: 6,
-            zIndex: 10
-          },
-          ...getFloatingProps(),
-          children: [
-            optionsForRender.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(
-              MenuOption,
-              {
-                onClose: handleCloseContextMenu,
-                distances,
-                handleAction: handleOptionAction,
-                option
+      });
+    }, [task, refs, menuX, menuY]);
+    let viewportX = x;
+    let viewportY = y;
+    if (typeof document !== "undefined") {
+      const ganttWrapper = document.querySelector(
+        '[data-testid="gantt"]'
+      );
+      if (ganttWrapper) {
+        const rect = ganttWrapper.getBoundingClientRect();
+        viewportX = rect.left + x;
+        viewportY = rect.top + y;
+      }
+    }
+    const referenceNode = /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...getReferenceProps(),
+        style: {
+          position: "fixed",
+          left: viewportX,
+          top: viewportY,
+          zIndex: 1,
+          pointerEvents: "none"
+        },
+        ref: setReference
+      }
+    );
+    const menuNode = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: setFloatingRef,
+        style: {
+          position: strategy,
+          top: menuY ?? 0,
+          left: menuX ?? 0,
+          width: "max-content",
+          backgroundColor: "var(--gantt-context-menu-bg-color)",
+          boxShadow: "var(--gantt-context-menu-box-shadow)",
+          borderRadius: "var(--gantt-shape-border-radius)",
+          fontFamily: "var(--gantt-font-family)",
+          display: "flex",
+          flexDirection: "column",
+          // Allow the menu to scroll if it would otherwise overflow the viewport
+          maxHeight: "calc(100vh - 24px)",
+          overflowY: "auto",
+          overflowX: "hidden",
+          gap: 6,
+          zIndex: 1e4,
+          pointerEvents: "auto"
+        },
+        ...getFloatingProps(),
+        children: [
+          optionsForRender.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+            MenuOption,
+            {
+              onClose: handleCloseContextMenu,
+              distances,
+              handleAction: handleOptionAction,
+              option
+            },
+            index2
+          )),
+          optionsForRender.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                padding: "6px 12px",
+                color: "var(--gantt-context-menu-empty-color, #666)",
+                fontSize: "var(--gantt-font-size)"
               },
-              index2
-            )),
-            optionsForRender.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  padding: "6px 12px",
-                  color: "var(--gantt-context-menu-empty-color, #666)",
-                  fontSize: "var(--gantt-font-size)"
-                },
-                children: "—"
-              }
-            )
-          ]
-        }
-      )
+              children: "—"
+            }
+          )
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      referenceNode,
+      task && typeof document !== "undefined" ? ReactDOM.createPortal(menuNode, document.body) : task && menuNode
     ] });
   }
   const getParentTasks = (selectedTasks, tasksMap) => {

package/dist/types/public-types.d.ts

@@ -580,6 +580,8 @@ export type ContextMenuOptionType = {
     disabled?: boolean;
     label: ReactNode;
     icon?: ReactNode;
+    /** Optional nested submenu options. If present this option will render a nested submenu when hovered. */
+    children?: ContextMenuOptionType[];
 };
 export type CheckTaskIdExistsAtLevel = (newId: string, comparisonLevel?: number) => boolean;
 export type GetCopiedTaskId = (task: RenderTask, checkExists: (newId: string) => boolean) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",