gantt-task-react-v 1.1.16 → 1.1.18

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

@@ -18001,9 +18001,9 @@ const useContextMenu = (wrapperRef, scrollToTask) => {
     handleOpenContextMenu
   };
 };
-const menuOption = "_menuOption_1frh4_3";
-const icon = "_icon_1frh4_79";
-const label = "_label_1frh4_87";
+const menuOption = "_menuOption_1c3e3_3";
+const icon = "_icon_1c3e3_81";
+const label = "_label_1c3e3_89";
 const styles$1 = {
   menuOption,
   icon,
@@ -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", width: "100%" },
       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
+        )
       ]
     }
   );

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

@@ -18018,9 +18018,9 @@
       handleOpenContextMenu
     };
   };
-  const menuOption = "_menuOption_1frh4_3";
-  const icon = "_icon_1frh4_79";
-  const label = "_label_1frh4_87";
+  const menuOption = "_menuOption_1c3e3_3";
+  const icon = "_icon_1c3e3_81";
+  const label = "_label_1c3e3_89";
   const styles$1 = {
     menuOption,
     icon,
@@ -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", width: "100%" },
         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
+          )
         ]
       }
     );

package/dist/style.css

@@ -636,7 +636,7 @@
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/
-._menuOption_1frh4_3 {
+._menuOption_1c3e3_3 {
   display: flex;
   align-items: center;
   text-align: left;
@@ -644,6 +644,7 @@
   background-color: #fff;
   cursor: pointer;
   font-size: 16px;
+  width: 100%;
   min-width: 120px;
   border: none;
   padding-block: unset;
@@ -653,32 +654,32 @@
   fill: var(--gantt-table-action-color);
 }
 
-._menuOption_1frh4_3 svg {
+._menuOption_1c3e3_3 svg {
   width: 20px;
   height: 20px;
 }
 
-._menuOption_1frh4_3:hover {
+._menuOption_1c3e3_3:hover {
   background-color: #eeeeee;
 }
 
-._menuOption_1frh4_3[aria-disabled="true"],
-._menuOption_1frh4_3:disabled {
+._menuOption_1c3e3_3[aria-disabled="true"],
+._menuOption_1c3e3_3:disabled {
   opacity: 0.6;
   cursor: default;
   background-color: transparent;
 }
 
-._menuOption_1frh4_3[aria-disabled="true"]:hover,
-._menuOption_1frh4_3:disabled:hover {
+._menuOption_1c3e3_3[aria-disabled="true"]:hover,
+._menuOption_1c3e3_3:disabled:hover {
   background-color: transparent;
 }
 
-._icon_1frh4_79 {
+._icon_1c3e3_81 {
   font-size: inherit;
 }
 
-._label_1frh4_87 {
+._label_1c3e3_89 {
   flex: 1;
 }
 /* HTML: <div class="loader"></div> */

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.16",
+  "version": "1.1.18",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",