react-weekly-planning 1.0.43 → 1.0.44

package/README.md

@@ -488,4 +488,37 @@ to create an organization that truly reflects you.
   };
   ```
 
+### `useIntersectionObserver`
+
+- **Description**: Utility hook designed to help virtualize scrolling components. It leverages the Intersection Observer API to detect when an element enters or leaves the viewport, allowing you to mount or unmount heavy DOM elements dynamically for better performance in long lists or large grids.
+- **Parameters**:
+  - `ref` (React.RefObject): The ref assigned to the DOM element you want to observe.
+  - `options` (IntersectionObserverInit, optional): Configuration object (e.g., `rootMargin`, `threshold`).
+- **Returns**: An object containing `{ entry, height }`. `entry` is the `IntersectionObserverEntry` which can be used to check `isIntersecting`. `height` provides the element's cached height when it is unmounted to maintain scroll position consistency.
+
+  **Example**:
+  ```tsx
+  import React, { useRef } from "react";
+  import { useIntersectionObserver } from "react-pweekly-planning";
+
+  const VirtualItem = ({ children }) => {
+    const ref = useRef(null);
+    const { entry, height } = useIntersectionObserver(ref, {
+      rootMargin: "600px",
+      threshold: 0
+    });
+
+    const isVisible = !!entry?.isIntersecting;
+
+    return (
+      <div 
+        ref={ref} 
+        style={{ minHeight: isVisible ? "auto" : `${height}px` }}
+      >
+        {isVisible ? children : null}
+      </div>
+    );
+  };
+  ```
+
 ---

package/dist/components/CalendarForWeek.js

@@ -13,7 +13,12 @@ const CalendarForWeek = (props) => {
     const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
     const memoizedHeader = useMemo(() => (_jsx("div", { className: "planningCalendarHeader", children: _jsxs("div", { className: `planningCalendarRow ${props.rowsClassName}`, style: Object.assign(Object.assign({}, theadTrStyle), props.rowsStyle), children: [_jsx("div", { className: `dayTh ${props.groupsColsClassName}`, style: Object.assign({}, props.groupsColsStyle), children: _jsx(GroupsHeadContainer, { className: `${props.groupHeadContainerClassName}`, style: props.groupHeadContainerStyle, groupsHeadRender: props.groupsHeadRender }) }), weekDays.map((day, i) => (_jsx("div", { className: `dayCol ${props.daysColsClassName}`, style: Object.assign({}, props.daysColsStyle), children: _jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: i, dayRender: props.dayRender, day: day.day, dayOfTheMonth: day.dayOfTheMonth, dayMonth: day.dayMonth, dayYear: day.dayYear }) }, i)))] }, "header") })), [weekDays, props.rowsClassName, props.rowsStyle, props.groupsColsClassName, props.groupsColsStyle, props.groupHeadContainerClassName, props.groupHeadContainerStyle, props.groupsHeadRender, props.daysColsClassName, props.daysColsStyle, props.dayStyle, props.dayClassName, props.dayRender]);
     const offset = useMemo(() => updateOffsetWithDateCalendar(props.date), [props.date]);
-    return (_jsx("div", { className: "calendarForWeek", style: { position: "relative" }, children: _jsxs("div", { className: `planningCalendar ${props.className}`, style: Object.assign({}, props.style), children: [memoizedHeader, _jsx("div", { className: "planningCalendarBody", children: (_a = props.groups) === null || _a === void 0 ? void 0 : _a.map((group, i) => {
+    return (_jsx("div", { className: "calendarForWeek", style: { position: "relative" }, children: _jsxs("div", { className: `planningCalendar ${props.className}`, style: Object.assign({}, props.style), children: [memoizedHeader, _jsx("div", { className: "planningCalendarBody", style: {
+                    // position: "absolute",
+                    // width: "100%",
+                    // // top: `${36 + 5}px`,
+                    // top: `${36 + 5 + ((65 + 4) * Math.max(rowSliceIndexStart, 0))}px`,
+                    }, children: (_a = props.groups) === null || _a === void 0 ? void 0 : _a.map((group, i) => {
                         var _a;
                         const scope = hashScope || "week";
                         const groupHash = getHash(offset, group.id);

package/dist/components/CalendarForday.js

@@ -9,7 +9,7 @@ function CalendarForDay(props) {
     const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
     const { getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, hashScope, tasks } = useCalendarTaskContext();
     const currentDay = weekDays[props.dayOffset || 0];
-    const memoizedHeader = useMemo(() => (currentDay ? (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: props.dayOffset || 0, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })) : null), [currentDay, props.dayStyle, props.dayClassName, props.dayOffset, props.dayRender]);
+    const memoizedHeader = useMemo(() => (currentDay ? (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: props.dayOffset || 0, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })) : null), [weekDays, props.rowsClassName, props.rowsStyle, props.groupsColsClassName, props.groupsColsStyle, props.groupHeadContainerClassName, props.groupHeadContainerStyle, props.groupsHeadRender, props.daysColsClassName, props.daysColsStyle, props.dayStyle, props.dayClassName, props.dayRender]);
     return (_jsxs("div", { className: `CalendarTableForDay ${props.className}`, style: Object.assign({ position: "relative" }, props.style), children: [memoizedHeader, _jsx("div", { className: `CalendarTableForDayTasksContainer`, children: props.groups.map((group, i) => (_jsx(VirtualGroupRowDay, { group: group, i: i, props: props, getTasks: getTasks, isValidTask: isValidTask, addTask: addTask, deleteTask: deleteTask, updateTask: updateTask, getTask: getTask, dailyHours: dailyHours, dayOffset: props.dayOffset || 0, hashScope: hashScope || "day", tasks: tasks }, `${group.id}-${i}`))) })] }));
 }
 export default memo(CalendarForDay, (prevProps, nextProps) => {

package/dist/components/TaskContainer/TaskVirtual.js

@@ -4,15 +4,15 @@ import { useIntersectionObserver } from "../../hooks/useIntersectionObserver";
 import TaskContainer from ".";
 const TaskVirtual = (props) => {
     const ref = useRef(null);
-    const entry = useIntersectionObserver(ref, {
+    const { entry, height } = useIntersectionObserver(ref, {
         rootMargin: "200px", // Margin to pre-render tasks before they appear
         threshold: 0,
     });
     const isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     return (_jsx("div", { ref: ref, style: {
-            minHeight: isVisible ? "auto" : "40px",
+            minHeight: isVisible ? "auto" : `${height}px`,
             width: "100%",
             marginBottom: "4px"
-        }, children: isVisible ? (_jsx(TaskContainer, Object.assign({}, props))) : (_jsx("div", { style: { height: "60px", backgroundColor: "rgba(200, 200, 200, 0.1)", borderRadius: "4px" } })) }));
+        }, "data-index": props.index, children: isVisible ? (_jsx(TaskContainer, Object.assign({}, props))) : (_jsx("div", { style: { height: `${height}px`, backgroundColor: "rgba(200, 200, 200, 0.1)", borderRadius: "4px" } })) }));
 };
 export default React.memo(TaskVirtual);

package/dist/components/VirtualGroupCell.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { v4 as uuidv4 } from "uuid";
+import TaskVirtual from "./TaskContainer/TaskVirtual";
+import AddTask from "./AddTask";
+import { getNewTaskForDropOrPaste, getUniqueId, } from "../lib/utils";
+import { memo } from "react";
+const VirtualGroupCell = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, getTask, day, hash, tasks, tasksStore, start, end }) => {
+    return (_jsx("div", { onDragOver: (e) => e.preventDefault(), onDrop: (event) => {
+            const dropInfo = getNewTaskForDropOrPaste(day.positionDay, group.id, getTask, hash);
+            if (!dropInfo)
+                return;
+            if (props.drop === "copy") {
+                addTask(Object.assign(Object.assign({}, dropInfo.newTask), { id: uuidv4() }));
+                return;
+            }
+            deleteTask(dropInfo.newTask.draghash, dropInfo.newTask.id);
+            addTask(Object.assign(Object.assign({}, dropInfo.newTask), { id: getUniqueId() }));
+        }, id: `col-${group.id}day-i`, className: `dayCol ${props.dayColsClassName}`, style: Object.assign(Object.assign({}, props.dayColsStyle), { minHeight: '60px' }), children: _jsxs("div", { style: {
+                display: "flex",
+                width: "100%",
+                height: "100%",
+                flexDirection: "column",
+                padding: "5px",
+            }, children: [tasks.slice(start, end).map((task) => {
+                    if (task.dayIndex === day.positionDay &&
+                        task.groupId === group.id && isValidTask(task)) {
+                        return (_jsx(TaskVirtual, { handleDragTask: props.handleDragTask, taskRender: props.taskRender, handleDragTaskEnd: props.handleDragTaskEnd, style: props.taskContainerStyle, className: `${props.taskContainerClassName}`, currentTask: task, handleClickTask: props.handleClickTask }, `${task.id} task`));
+                    }
+                    else
+                        return null;
+                }), _jsx(AddTask, { addTaskStyle: props.addTaskStyle, addTaskClassName: props.addTaskClassName, currentGroup: group, dayInfo: day, addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] }) }, `col-${group.id}day-i${day.positionDay}`));
+};
+export default memo(VirtualGroupCell);

package/dist/components/VirtualGroupRow.js

@@ -7,9 +7,9 @@ import TaskVirtual from "./TaskContainer/TaskVirtual";
 import AddTask from "./AddTask";
 import { getHash, getNewTaskForDropOrPaste, getUniqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
 import { groupTdStyle } from "../lib/slyles";
-const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, getTask, dailyHours, hashScope, tasks, sumHoursByGroupsCount }) => {
+const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, getTask, dailyHours, hashScope, tasks, sumHoursByGroupsCount, }) => {
     const ref = useRef(null);
-    const entry = useIntersectionObserver(ref, {
+    const { entry, height } = useIntersectionObserver(ref, {
         rootMargin: "600px",
         threshold: 0,
     });
@@ -28,7 +28,7 @@ const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, dele
             };
         });
     }, [isVisible, offset, group.id, dailyHours, hashScope, getTasks, isValidTask, tasks]);
-    return (_jsx("div", { ref: ref, className: `planningCalendarRow ${props.rowsClassName}`, style: Object.assign(Object.assign({}, props.rowsStyle), { minHeight: isVisible ? "auto" : "60px" }), children: isVisible ? (_jsxs(_Fragment, { children: [_jsx("div", { className: `groupCol ${props.groupsColsClassName}`, style: Object.assign(Object.assign({}, groupTdStyle), props.groupsColsStyle), children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }, group.id), cellData.map((cell) => {
+    return (_jsx("div", { ref: ref, className: `planningCalendarRow ${props.rowsClassName}`, style: Object.assign(Object.assign({}, props.rowsStyle), { minHeight: isVisible ? "auto" : `${height}px` }), "data-index": i, children: isVisible ? (_jsxs(_Fragment, { children: [_jsx("div", { className: `groupCol ${props.groupsColsClassName}`, style: Object.assign(Object.assign({}, groupTdStyle), props.groupsColsStyle), children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }, group.id), cellData.map((cell) => {
                     return (_jsx("div", { onDragOver: (e) => e.preventDefault(), onDrop: (event) => {
                             const dropInfo = getNewTaskForDropOrPaste(cell.positionDay, group.id, getTask, cell.hash);
                             if (!dropInfo)
@@ -45,15 +45,15 @@ const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, dele
                                 height: "100%",
                                 flexDirection: "column",
                                 padding: "5px",
-                            }, children: [cell.tasks.map((task) => {
+                            }, children: [cell.tasks.map((task, index) => {
                                     if (task.dayIndex === cell.positionDay &&
                                         task.groupId === group.id && isValidTask(task)) {
-                                        return (_jsx(TaskVirtual, { handleDragTask: props.handleDragTask, taskRender: props.taskRender, handleDragTaskEnd: props.handleDragTaskEnd, style: props.taskContainerStyle, className: `${props.taskContainerClassName}`, currentTask: task, handleClickTask: props.handleClickTask }, `${task.id} task`));
+                                        return (_jsx(TaskVirtual, { index: index, handleDragTask: props.handleDragTask, taskRender: props.taskRender, handleDragTaskEnd: props.handleDragTaskEnd, style: props.taskContainerStyle, className: `${props.taskContainerClassName}`, currentTask: task, handleClickTask: props.handleClickTask }, `${task.id} task`));
                                     }
                                     else
                                         return null;
                                 }), _jsx(AddTask, { addTaskStyle: props.addTaskStyle, addTaskClassName: props.addTaskClassName, currentGroup: group, dayInfo: dailyHours[cell.positionDay], addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] }) }, `col-${group.id}day-i${cell.positionDay}`));
-                })] })) : (_jsx("div", { style: { height: "60px", width: "100%" } })) }));
+                })] })) : (_jsx("div", { style: { height: `${height}px`, width: "100%" } })) }));
 };
 export default memo(VirtualGroupRow, (prev, next) => {
     return (prev.group.id === next.group.id &&

package/dist/components/VirtualGroupRowDay.js

@@ -7,7 +7,7 @@ import AddTask from "./AddTask";
 import { getHash, getNewTaskForDropOrPaste, getUniqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
 const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, dailyHours, dayOffset, hashScope, tasks, }) => {
     const ref = useRef(null);
-    const entry = useIntersectionObserver(ref, {
+    const { entry, height } = useIntersectionObserver(ref, {
         rootMargin: "600px",
         threshold: 0,
     });
@@ -19,7 +19,7 @@ const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, d
     const handleDragOver = (event) => {
         event.preventDefault();
     };
-    return (_jsx("div", { ref: ref, style: Object.assign({ width: "100%", height: "auto", padding: "5px", borderBottom: "1.5px solid #0f52737e", borderRight: "0.74px solid rgba(198, 219, 225, 0.68)", borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)", minHeight: isVisible ? "auto" : "60px" }, props.rowsStyle), className: `CalendarTableForDayRow ${props.rowsClassName}`, children: isVisible ? (_jsxs(_Fragment, { children: [_jsx("div", { style: Object.assign({ width: "auto", height: "auto" }, props.groupsColsStyle), className: props.groupsColsClassName, children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }), _jsxs("div", { className: "CalendarTableForDayGroupTasks", onDragOver: handleDragOver, onDrop: (event) => {
+    return (_jsx("div", { ref: ref, style: Object.assign({ width: "100%", height: "auto", padding: "5px", borderBottom: "1.5px solid #0f52737e", borderRight: "0.74px solid rgba(198, 219, 225, 0.68)", borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)", minHeight: isVisible ? "auto" : `${height}px` }, props.rowsStyle), className: `CalendarTableForDayRow ${props.rowsClassName}`, children: isVisible ? (_jsxs(_Fragment, { children: [_jsx("div", { style: Object.assign({ width: "auto", height: "auto" }, props.groupsColsStyle), className: props.groupsColsClassName, children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }), _jsxs("div", { className: "CalendarTableForDayGroupTasks", onDragOver: handleDragOver, onDrop: (event) => {
                         if (!cellTasks)
                             return;
                         const dropInfo = getNewTaskForDropOrPaste(currentDailyHours.positionDay, group.id, getTask, hash[hashScope]);
@@ -30,15 +30,15 @@ const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, d
                             return;
                         }
                         updateTask(hash[hashScope], dropInfo.newTask.id, dropInfo.newTask);
-                    }, children: [cellTasks.map((task) => {
+                    }, children: [cellTasks.map((task, index) => {
                             if (task.dayIndex === dayOffset &&
                                 task.groupId === group.id &&
                                 isValidTask(task)) {
-                                return (_jsx(TaskVirtual, { handleDragTask: props.handleDragTask, taskRender: props.taskRender, handleDragTaskEnd: props.handleDragTaskEnd, style: props.taskContainerStyle, className: `${props.taskContainerClassName}`, currentTask: task, handleClickTask: props.handleClickTask }, `${task.id} task`));
+                                return (_jsx(TaskVirtual, { index: index, handleDragTask: props.handleDragTask, taskRender: props.taskRender, handleDragTaskEnd: props.handleDragTaskEnd, style: props.taskContainerStyle, className: `${props.taskContainerClassName}`, currentTask: task, handleClickTask: props.handleClickTask }, `${task.id} task`));
                             }
                             else
                                 return null;
-                        }), _jsx(AddTask, { addTaskStyle: props.addTaskStyle, addTaskClassName: props.addTaskClassName, currentGroup: group, dayInfo: currentDailyHours, addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] })] })) : (_jsx("div", { style: { height: "60px", width: "100%" } })) }));
+                        }), _jsx(AddTask, { addTaskStyle: props.addTaskStyle, addTaskClassName: props.addTaskClassName, currentGroup: group, dayInfo: currentDailyHours, addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] })] })) : (_jsx("div", { style: { height: `${height}px`, width: "100%" } })) }));
 };
 export default memo(VirtualGroupRowDay, (prev, next) => {
     return (prev.group.id === next.group.id &&

package/dist/components/index.js

@@ -65,6 +65,6 @@ import CalendarTaskContextProvider from "../contexts/CalendarTaskContext";
  * @param {string} [props.hoursColsClassName] - Additional class names for the hours columns.
  */
 const Calendar = (props) => {
-    return (_jsx(CalendarTaskContextProvider, { hashScope: "week", children: props.scope === "day" ? _jsx(CalendarForDay, Object.assign({}, props)) : _jsx(CalendarForWeek, Object.assign({}, props)) }));
+    return (_jsx(CalendarTaskContextProvider, { hashScope: "day", children: props.scope === "day" ? _jsx(CalendarForDay, Object.assign({}, props)) : _jsx(CalendarForWeek, Object.assign({}, props)) }));
 };
 export default Calendar;

package/dist/components/style.css

@@ -59,7 +59,7 @@
     display: flex;
     flex-direction: column;
     border: 0.74px solid rgba(198, 219, 225, 0.68);
-
+    border-bottom: none;
     background-color: white;
 
 }
@@ -70,6 +70,8 @@
     z-index: 200;
     border-bottom: 1.5px solid #0f52737e;
     background-color: #fff;
+    position: sticky;
+    top: 0px;
 }
 
 .planningCalendarRow {
@@ -150,7 +152,8 @@
     min-height: 80px;
 }
 
-.calendarForWeek {
+.calendarForWeek,
+.calendarForDay {
     display: flex;
     width: 100%;
     flex: 1;
@@ -159,7 +162,8 @@
 
 }
 
-.calendarForWeek-container {
+.calendarForWeek-container,
+.calendarForDay-container {
     display: flex;
     flex-direction: column;
     width: 100%;

package/dist/contexts/CalendarTaskContext.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { useCalendarTask } from "../hooks/useCalendarTask";
 const CalendarTaskContext = createContext({
-    tasks: { buckets: {}, dataLength: 0, taskCache: {} },
+    tasks: { buckets: {}, dataLength: 0, taskCache: {}, maxBucketSize: 0 },
     addTask: () => { },
     getTasks: () => [],
     updateTask: () => { },

package/dist/hooks/useCalendarDateState.js

@@ -1,8 +1,7 @@
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 import { calculateWeekDifference, getDateObjectInTimeZone, getDayHourly, getWeekDays, } from "../lib/utils";
 function useCalendarDateState(date, weekOffset, timeZone) {
-    const [calendarDateState, setCalendarDateState] = useState({ dailyHours: [], weekDays: [] });
-    useEffect(() => {
+    let calendarDateState = useMemo(() => {
         const weekOffsetByDate = timeZone
             ? calculateWeekDifference(getDateObjectInTimeZone(timeZone), timeZone)
             : calculateWeekDifference(date, timeZone);
@@ -12,7 +11,7 @@ function useCalendarDateState(date, weekOffset, timeZone) {
             dailyHours: dailyHours,
             weekDays,
         };
-        setCalendarDateState(calData);
+        return calData;
     }, [date, weekOffset]);
     return Object.assign({}, calendarDateState);
 }

package/dist/hooks/useCalendarTask.js

@@ -2,7 +2,8 @@ import { useEffect, useRef, useState, useMemo } from "react";
 import { getHash, updateOffsetWithDateCalendar } from "../lib/utils";
 const STORAGE_KEY = "calendar_tasks";
 export function useCalendarTask(hashScope, timeZone) {
-    const tasksRef = useRef({ buckets: {}, dataLength: 0, taskCache: {} });
+    const tasksRef = useRef({ buckets: {}, dataLength: 0, taskCache: {}, maxBucketSize: 0 });
+    const bucketSizeCountsRef = useRef({});
     const scheduleCleanRef = useRef(null);
     const [render, forceRender] = useState(0);
     const cleanExpiredTasks = () => {
@@ -110,6 +111,7 @@ export function useCalendarTask(hashScope, timeZone) {
         const bucket = tasksRef.current.buckets[hash];
         const index = bucket.list.length;
         bucket.list.push(Object.assign(Object.assign({}, task), { hash }));
+        tasksRef.current.maxBucketSize = Math.max(tasksRef.current.maxBucketSize, bucket.list.length);
         bucket.indexMap[task.id] = index;
         bucket.sumOfTaskDuration += task.taskEnd - task.taskStart;
         tasksRef.current.dataLength++;
@@ -148,6 +150,7 @@ export function useCalendarTask(hashScope, timeZone) {
             }
         }
         bucket.list[index] = Object.assign(Object.assign({}, bucket.list[index]), updatedTask);
+        tasksRef.current.maxBucketSize = Math.max(tasksRef.current.maxBucketSize, bucket.list.length);
         saveToStorage();
         scheduleClean();
         forceRender((x) => x + 1);
@@ -172,6 +175,7 @@ export function useCalendarTask(hashScope, timeZone) {
         delete bucket.indexMap[taskId];
         bucket.sumOfTaskDuration -= oldTAskDuration;
         tasksRef.current.dataLength--;
+        tasksRef.current.maxBucketSize = Math.max(tasksRef.current.maxBucketSize, bucket.list.length);
         saveToStorage();
         scheduleClean();
         forceRender((x) => x + 1);

package/dist/hooks/useContainerScroll.js

@@ -1,14 +1,93 @@
-import { useState, useEffect } from "react";
-export function useContainerScroll(mainContaierRef, cardHeight, gridGap) {
-    const [sliceIndex, setSliceIndex] = useState(0);
+import { useState, useEffect, useRef } from "react";
+export function useContainerScroll(mainContaierRef, cardHeight, gridContaineRef) {
+    const [rowSliceIndexStart, setRowSliceIndexStart] = useState(0);
+    const [rowSliceIndexEnd, setRowSliceIndexEnd] = useState(15);
+    const [taskSliceIdexStart, setTaskSliceIdexStart] = useState(0);
+    const [taskSLiceIdexEnd, setTaskSLiceIdexEnd] = useState(30);
+    const [rowHeight, setRowHeight] = useState(0);
+    const visibleRows = useRef(new Set());
     useEffect(() => {
         const mainContainer = mainContaierRef.current;
+        const gridContainer = gridContaineRef.current;
+        if (!mainContainer || !gridContainer)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                const row = entry.target;
+                const indexAttr = row.getAttribute('data-index');
+                if (!indexAttr)
+                    return;
+                const index = parseInt(indexAttr, 10);
+                if (entry.isIntersecting) {
+                    visibleRows.current.add(index);
+                }
+                else {
+                    visibleRows.current.delete(index);
+                }
+            });
+        }, {
+            root: mainContainer,
+            threshold: 0,
+        });
+        const observedElements = new Set();
+        const observeChildren = () => {
+            if (!gridContainer.children)
+                return;
+            for (let i = 0; i < gridContainer.children.length; i++) {
+                const element = gridContainer.children[i];
+                if (!observedElements.has(element)) {
+                    observer.observe(element);
+                    observedElements.add(element);
+                }
+            }
+        };
+        const mutationObserver = new MutationObserver(() => {
+            observeChildren();
+        });
+        observeChildren();
+        mutationObserver.observe(gridContainer, { childList: true });
         const handleScroll = () => {
-            const computeIndex = Math.floor(mainContainer.scrollTop / (cardHeight + gridGap));
-            setSliceIndex(computeIndex);
+            const scrollTop = mainContainer.scrollTop;
+            const containerHeight = mainContainer.clientHeight || 800;
+            // ---- CALCUL POUR LES ROWS ----
+            const baseRowHeight = 72;
+            let startRowIndex = Math.floor(scrollTop / baseRowHeight);
+            if (visibleRows.current.size > 0) {
+                const firstVisibleRowIndex = Math.min(...Array.from(visibleRows.current));
+                if (startRowIndex > firstVisibleRowIndex) {
+                    startRowIndex = firstVisibleRowIndex;
+                }
+            }
+            // Calcul de la fin (avec un buffer de vue de 2 éléments)
+            const visibleRowsCount = Math.ceil(containerHeight / baseRowHeight);
+            const endRowIndex = startRowIndex + visibleRowsCount + 2;
+            // ---- CALCUL POUR LES TASKS ----
+            // Base théorique pour une task (environ 40px minimum)
+            const baseTaskHeight = 40;
+            // Attention : Ceci est une estimation globale. Si chaque ROW scrolle individuellement, 
+            // cette formule devra être ajustée.
+            const startTaskIndex = Math.floor(Math.max(0, scrollTop) / baseTaskHeight);
+            const visibleTasksCount = Math.ceil(containerHeight / baseTaskHeight);
+            const endTaskIndex = startTaskIndex + visibleTasksCount + 5;
+            setRowSliceIndexStart(startRowIndex);
+            setRowSliceIndexEnd(endRowIndex);
+            setTaskSliceIdexStart(startTaskIndex);
+            setTaskSLiceIdexEnd(endTaskIndex);
         };
         mainContainer.addEventListener("scroll", handleScroll);
-        return () => mainContainer.removeEventListener("scroll", handleScroll);
-    }, [cardHeight, gridGap]);
-    return { sliceIndex };
+        // Exécution initiale
+        handleScroll();
+        return () => {
+            mainContainer.removeEventListener("scroll", handleScroll);
+            observer.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [mainContaierRef, gridContaineRef]);
+    return {
+        rowSliceIndexStart,
+        rowSliceIndexEnd,
+        taskSliceIdexStart,
+        taskSLiceIdexEnd,
+        rowHeight
+    };
 }

package/dist/hooks/useGridContainer.js

@@ -8,17 +8,17 @@ export const useGridContainer = (gridContaineRef) => {
     useEffect(() => {
         if (typeof window === "undefined")
             return;
-        //si le parent n'a aucun enfant on sort
+        // //si le parent n'a aucun enfant on sort
         if (gridContaineRef.current.hasChildNodes() === false)
             return;
-        //la hauteur du premier enfant de la grid
-        const cardH = gridContaineRef.current.firstChild.clientHeight;
-        if (cardH !== cardCompH) {
-            const gridW = gridContaineRef.current.clientWidth;
-            const cardW = gridContaineRef.current.firstChild.clientWidth;
-            setCardCompH(cardH);
-            setItemsByLines(Math.floor(gridW / cardW));
-        }
+        // //la hauteur du premier enfant de la grid
+        // const cardH = gridContaineRef.current.firstChild.clientHeight;
+        // if (cardH !== cardCompH) {
+        //     const gridW = gridContaineRef.current.clientWidth;
+        //     const cardW = gridContaineRef.current.firstChild.clientWidth;
+        //     setCardCompH(cardH);
+        //     setItemsByLines(Math.floor(gridW / cardW));
+        // }
     }, [width]);
-    return { cardCompH, cardRef, itemsByLine };
+    return { cardCompH: 65, cardRef, itemsByLine: 1 };
 };

package/dist/hooks/useIntersectionObserver.js

@@ -1,12 +1,18 @@
 import { useEffect, useState } from "react";
 export function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false, } = {}) {
     const [entry, setEntry] = useState();
+    const [height, setHeight] = useState(60);
     const frozen = (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && freezeOnceVisible;
     const updateEntry = ([entry]) => {
         setEntry(entry);
+        if (entry.boundingClientRect) {
+            if (entry.boundingClientRect.height > 0) {
+                setHeight(entry.boundingClientRect.height);
+            }
+        }
     };
     useEffect(() => {
-        const node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current; // DOM node
+        const node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
         const hasIOSupport = !!window.IntersectionObserver;
         if (!hasIOSupport || frozen || !node)
             return;
@@ -15,5 +21,5 @@ export function useIntersectionObserver(elementRef, { threshold = 0, root = null
         observer.observe(node);
         return () => observer.disconnect();
     }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);
-    return entry;
+    return { entry, height };
 }

package/dist/index.js

@@ -17,3 +17,4 @@ export * from './components/VirtualGroupRowDay';
 export * from './components/DayContainer';
 export * from './hooks/useCalendarDateState';
 export * from './contexts/CalendarTaskContext';
+export * from './hooks/useIntersectionObserver';

package/dist/types/components/TaskContainer/TaskVirtual.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
 import { TaskContainerPropsType } from "../../definitions";
-declare const _default: React.MemoExoticComponent<(props: TaskContainerPropsType) => import("react/jsx-runtime").JSX.Element>;
+interface TaskVirtualProps extends TaskContainerPropsType {
+    index?: number;
+}
+declare const _default: React.MemoExoticComponent<(props: TaskVirtualProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/types/components/VirtualGroupCell.d.ts

@@ -0,0 +1,20 @@
+import { CalendarTablePropsType, GroupFeildsType, TaskType, TasksStore, TasksType, dayInfoType } from "../definitions";
+import React from "react";
+interface VirtualGroupCellProps {
+    group: GroupFeildsType;
+    i: number;
+    props: CalendarTablePropsType;
+    getTasks: (hash: string) => TasksType;
+    isValidTask: (task: TaskType) => boolean;
+    addTask: (task: TaskType) => void;
+    deleteTask: (hash: string, taskId: string) => void;
+    getTask: (hash: string, taskId: string) => TaskType | undefined;
+    day: dayInfoType;
+    hash: string;
+    tasks: TasksType;
+    tasksStore: TasksStore;
+    start: number;
+    end: number;
+}
+declare const _default: React.NamedExoticComponent<VirtualGroupCellProps>;
+export default _default;

package/dist/types/definitions/index.d.ts

@@ -413,5 +413,6 @@ export type TasksStore = {
     buckets: Record<string, TaskBucket>;
     dataLength: number;
     taskCache: Record<string, Task[]>;
+    maxBucketSize: number;
 };
 export {};

package/dist/types/hooks/useCalendarDateState.d.ts

@@ -1,6 +1,16 @@
-import { dailyHoursType, TimeZone, weekDaysType } from "../definitions";
+import { TimeZone } from "../definitions";
 declare function useCalendarDateState(date: Date, weekOffset: number | undefined, timeZone: TimeZone | undefined): {
-    weekDays: weekDaysType;
-    dailyHours: dailyHoursType;
+    dailyHours: {
+        positionDay: number;
+        day: Date;
+        start: number;
+        end: number;
+    }[];
+    weekDays: {
+        day: string;
+        dayMonth: string;
+        dayYear: number;
+        dayOfTheMonth: number;
+    }[];
 };
 export default useCalendarDateState;

package/dist/types/hooks/useCalendarTask.d.ts

@@ -4,6 +4,7 @@ export declare function useCalendarTask(hashScope: "week" | "group" | "day", tim
         buckets: Record<string, import("../definitions").TaskBucket>;
         dataLength: number;
         taskCache: Record<string, Task[]>;
+        maxBucketSize: number;
     };
     addTask: (task: Task) => void;
     getTasks: (hash: string) => Task[];

package/dist/types/hooks/useContainerScroll.d.ts

@@ -1,3 +1,7 @@
-export declare function useContainerScroll(mainContaierRef: React.RefObject<any>, cardHeight: number, gridGap: number): {
-    sliceIndex: number;
+export declare function useContainerScroll(mainContaierRef: React.RefObject<any>, cardHeight: number, gridContaineRef: React.RefObject<any>): {
+    rowSliceIndexStart: number;
+    rowSliceIndexEnd: number;
+    taskSliceIdexStart: number;
+    taskSLiceIdexEnd: number;
+    rowHeight: number;
 };

package/dist/types/hooks/useIntersectionObserver.d.ts

@@ -1,5 +1,8 @@
 interface UseIntersectionObserverProps extends IntersectionObserverInit {
     freezeOnceVisible?: boolean;
 }
-export declare function useIntersectionObserver(elementRef: React.RefObject<Element | null>, { threshold, root, rootMargin, freezeOnceVisible, }?: UseIntersectionObserverProps): IntersectionObserverEntry | undefined;
+export declare function useIntersectionObserver(elementRef: React.RefObject<Element | null>, { threshold, root, rootMargin, freezeOnceVisible, }?: UseIntersectionObserverProps): {
+    entry: IntersectionObserverEntry | undefined;
+    height: number;
+};
 export {};

package/dist/types/index.d.ts

@@ -14,3 +14,4 @@ export * from './components/VirtualGroupRowDay';
 export * from './components/DayContainer';
 export * from './hooks/useCalendarDateState';
 export * from './contexts/CalendarTaskContext';
+export * from './hooks/useIntersectionObserver';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-weekly-planning",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
@@ -63,6 +63,10 @@
     "./components/GroupContainer": {
       "types": "./dist/types/components/GroupContainer.d.ts",
       "default": "./dist/components/GroupContainer.js"
+    },
+    "./hooks/useIntersectionObserver": {
+      "types": "./dist/types/hooks/useIntersectionObserver.d.ts",
+      "default": "./dist/hooks/useIntersectionObserver.js"
     }
   },
   "files": [