gantt-task-react-v 1.0.44 → 1.0.46

package/README.md

@@ -6,6 +6,8 @@
 
 - Flexible Gantt height now adapts to its parent container, now we always see the horizontal scrolls for both task list and gantt.
 - Fixed sticky gantt header on drag
+- Fixed Tooltip should show only on gantt section current view boundaries
+- Added Tooltip for comparison bars
 
 ## [Live Demo In Storybook](https://661071b076b50cb537c16c19-yrsukdfefs.chromatic.com/)
 

package/dist/components/task-item/bar-comparison/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TaskComparisonDatesCoordinates } from "../../../types";
+import { TaskComparisonDatesCoordinates, Task } from "../../../types";
 interface Props extends Omit<TaskComparisonDatesCoordinates, "x" | "y"> {
     barCornerRadius: number;
     borderHeight: number;
@@ -8,6 +8,8 @@ interface Props extends Omit<TaskComparisonDatesCoordinates, "x" | "y"> {
     isPlan?: boolean;
     isCritical?: boolean;
     inProgress?: boolean;
+    task?: Task;
+    onTooltipTask?: (task: Task | null, element: Element | null) => void;
 }
 export declare const BarComparison: React.FC<Props>;
 export {};

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

@@ -12668,7 +12668,19 @@ const styles$3 = {
   barComparison
 };
 const BarComparison = (props) => {
-  const { yOffset, borderHeight, barCornerRadius, isWarning, isPlan, isCritical, width, height, inProgress } = props;
+  const {
+    yOffset,
+    borderHeight,
+    barCornerRadius,
+    isWarning,
+    isPlan,
+    isCritical,
+    width,
+    height,
+    inProgress,
+    task,
+    onTooltipTask
+  } = props;
   const lineHeight = useMemo(() => Math.max(height, 4), [height]);
   const barColor = useMemo(() => {
     if (inProgress) {
@@ -12685,41 +12697,54 @@ const BarComparison = (props) => {
     }
     return "var(--gantt-bar-comparison-default-color)";
   }, [inProgress, isCritical, isPlan, isWarning]);
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: 0,
-        width,
-        y: borderHeight + yOffset,
-        height: lineHeight,
-        ry: barCornerRadius,
-        rx: barCornerRadius,
-        fill: barColor,
-        className: styles$3.barComparison
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: 0,
-        fill: barColor,
-        y: yOffset,
-        width: height,
-        height: borderHeight + lineHeight - yOffset
-      }
-    ),
-    !inProgress && /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: width - height,
-        fill: barColor,
-        y: yOffset,
-        width: height,
-        height: borderHeight + lineHeight - yOffset
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      onMouseEnter: (e) => {
+        e.stopPropagation();
+        onTooltipTask && onTooltipTask(task || null, e.currentTarget);
+      },
+      onMouseLeave: (e) => {
+        e.stopPropagation();
+        onTooltipTask && onTooltipTask(null, null);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            width,
+            y: borderHeight + yOffset,
+            height: lineHeight,
+            ry: barCornerRadius,
+            rx: barCornerRadius,
+            fill: barColor,
+            className: styles$3.barComparison
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            fill: barColor,
+            y: yOffset,
+            width: height,
+            height: borderHeight + lineHeight - yOffset
+          }
+        ),
+        !inProgress && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: width - height,
+            fill: barColor,
+            y: yOffset,
+            width: height,
+            height: borderHeight + lineHeight - yOffset
+          }
+        )
+      ]
+    }
+  );
 };
 const DELTA_RELATION_WIDTH = 100;
 const TaskGanttContentInner = (props) => {
@@ -12914,14 +12939,16 @@ const TaskGanttContentInner = (props) => {
                 BarComparison,
                 {
                   inProgress: !task.comparisonDates.end,
-                  isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && (!!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime()) || task.comparisonDates.start.getTime() <= task.start.getTime() && (!!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime()),
+                  isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime() || task.comparisonDates.start.getTime() <= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime(),
                   isWarning: !!task.comparisonDates.end && task.comparisonDates.end.getTime() >= task.end.getTime(),
                   isCritical: task.comparisonDates.start.getTime() > task.start.getTime(),
                   barCornerRadius: distances.barCornerRadius,
                   height: comparisonDates.height,
                   width: comparisonDates.width,
                   borderHeight: distances.barComparisonTaskBorderHeight,
-                  yOffset: distances.barComparisonTaskYOffset
+                  yOffset: distances.barComparisonTaskYOffset,
+                  task,
+                  onTooltipTask
                 }
               )
             },
@@ -17050,7 +17077,7 @@ function useRole(context, props) {
     };
   }, [enabled, role, ariaRole, open, floatingId, referenceId, isNested]);
 }
-const useTaskTooltip = (changeInProgress) => {
+const useTaskTooltip = (changeInProgress, boundaryElement) => {
   const [hoverTooltipTask, setHoverTooltipTask] = useState(null);
   const [hoverTooltipEl, setHoverTooltipEl] = useState(null);
   const tooltipTask = useMemo(() => {
@@ -17073,7 +17100,14 @@ const useTaskTooltip = (changeInProgress) => {
     context
   } = useFloating({
     open: Boolean(tooltipTask),
-    middleware: [offset(10), flip(), shift()],
+    middleware: [
+      offset(10),
+      flip(),
+      shift({
+        boundary: (boundaryElement == null ? void 0 : boundaryElement.current) || void 0,
+        padding: 8
+      })
+    ],
     whileElementsMounted: autoUpdate,
     strategy: "absolute"
   });
@@ -19256,7 +19290,7 @@ const Gantt = (props) => {
     setFloatingRef,
     getFloatingProps,
     onChangeTooltipTask
-  } = useTaskTooltip(changeInProgress);
+  } = useTaskTooltip(changeInProgress, verticalGanttContainerRef);
   const handleDeleteTasks = useCallback(
     (tasksForDelete) => {
       onChangeTooltipTask(null, null);

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

@@ -12685,7 +12685,19 @@
     barComparison
   };
   const BarComparison = (props) => {
-    const { yOffset, borderHeight, barCornerRadius, isWarning, isPlan, isCritical, width, height, inProgress } = props;
+    const {
+      yOffset,
+      borderHeight,
+      barCornerRadius,
+      isWarning,
+      isPlan,
+      isCritical,
+      width,
+      height,
+      inProgress,
+      task,
+      onTooltipTask
+    } = props;
     const lineHeight = React.useMemo(() => Math.max(height, 4), [height]);
     const barColor = React.useMemo(() => {
       if (inProgress) {
@@ -12702,41 +12714,54 @@
       }
       return "var(--gantt-bar-comparison-default-color)";
     }, [inProgress, isCritical, isPlan, isWarning]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "rect",
-        {
-          x: 0,
-          width,
-          y: borderHeight + yOffset,
-          height: lineHeight,
-          ry: barCornerRadius,
-          rx: barCornerRadius,
-          fill: barColor,
-          className: styles$3.barComparison
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "rect",
-        {
-          x: 0,
-          fill: barColor,
-          y: yOffset,
-          width: height,
-          height: borderHeight + lineHeight - yOffset
-        }
-      ),
-      !inProgress && /* @__PURE__ */ jsxRuntime.jsx(
-        "rect",
-        {
-          x: width - height,
-          fill: barColor,
-          y: yOffset,
-          width: height,
-          height: borderHeight + lineHeight - yOffset
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "g",
+      {
+        onMouseEnter: (e) => {
+          e.stopPropagation();
+          onTooltipTask && onTooltipTask(task || null, e.currentTarget);
+        },
+        onMouseLeave: (e) => {
+          e.stopPropagation();
+          onTooltipTask && onTooltipTask(null, null);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: 0,
+              width,
+              y: borderHeight + yOffset,
+              height: lineHeight,
+              ry: barCornerRadius,
+              rx: barCornerRadius,
+              fill: barColor,
+              className: styles$3.barComparison
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: 0,
+              fill: barColor,
+              y: yOffset,
+              width: height,
+              height: borderHeight + lineHeight - yOffset
+            }
+          ),
+          !inProgress && /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: width - height,
+              fill: barColor,
+              y: yOffset,
+              width: height,
+              height: borderHeight + lineHeight - yOffset
+            }
+          )
+        ]
+      }
+    );
   };
   const DELTA_RELATION_WIDTH = 100;
   const TaskGanttContentInner = (props) => {
@@ -12931,14 +12956,16 @@
                   BarComparison,
                   {
                     inProgress: !task.comparisonDates.end,
-                    isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && (!!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime()) || task.comparisonDates.start.getTime() <= task.start.getTime() && (!!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime()),
+                    isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime() || task.comparisonDates.start.getTime() <= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime(),
                     isWarning: !!task.comparisonDates.end && task.comparisonDates.end.getTime() >= task.end.getTime(),
                     isCritical: task.comparisonDates.start.getTime() > task.start.getTime(),
                     barCornerRadius: distances.barCornerRadius,
                     height: comparisonDates.height,
                     width: comparisonDates.width,
                     borderHeight: distances.barComparisonTaskBorderHeight,
-                    yOffset: distances.barComparisonTaskYOffset
+                    yOffset: distances.barComparisonTaskYOffset,
+                    task,
+                    onTooltipTask
                   }
                 )
               },
@@ -17067,7 +17094,7 @@
       };
     }, [enabled, role, ariaRole, open, floatingId, referenceId, isNested]);
   }
-  const useTaskTooltip = (changeInProgress) => {
+  const useTaskTooltip = (changeInProgress, boundaryElement) => {
     const [hoverTooltipTask, setHoverTooltipTask] = React.useState(null);
     const [hoverTooltipEl, setHoverTooltipEl] = React.useState(null);
     const tooltipTask = React.useMemo(() => {
@@ -17090,7 +17117,14 @@
       context
     } = useFloating({
       open: Boolean(tooltipTask),
-      middleware: [offset(10), flip(), shift()],
+      middleware: [
+        offset(10),
+        flip(),
+        shift({
+          boundary: (boundaryElement == null ? void 0 : boundaryElement.current) || void 0,
+          padding: 8
+        })
+      ],
       whileElementsMounted: autoUpdate,
       strategy: "absolute"
     });
@@ -19273,7 +19307,7 @@
       setFloatingRef,
       getFloatingProps,
       onChangeTooltipTask
-    } = useTaskTooltip(changeInProgress);
+    } = useTaskTooltip(changeInProgress, verticalGanttContainerRef);
     const handleDeleteTasks = React.useCallback(
       (tasksForDelete) => {
         onChangeTooltipTask(null, null);

package/dist/helpers/use-task-tooltip.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import type { ChangeInProgress, Task } from "../types";
-export declare const useTaskTooltip: (changeInProgress: ChangeInProgress | null) => {
+export declare const useTaskTooltip: (changeInProgress: ChangeInProgress | null, boundaryElement?: RefObject<HTMLElement>) => {
     tooltipTask: Task;
     tooltipX: number;
     tooltipY: number;

package/package.json

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