react-weekly-planning 1.0.42 → 1.0.44

package/README.md

@@ -215,7 +215,7 @@ Use this hook within any component nested under the provider to access the task
 | `getTask` | `(hash: string, taskId: string) => Task \| undefined` | Finds a specific task by ID. |
 | `updateTask` | `(hash: string, taskId: string, updatedTask: Partial<Task>) => void` | Updates an existing task's properties. |
 | `deleteTask` | `(hash: string, taskId: string) => void` | Removes a task from the store. |
-| `isValidTask` | `(task: Task) => boolean` | Checks if a task object has all required fields. |
+| `isValidTask` | `(task: Task) => boolean` | Verifies if a task has not yet expired. |
 | `cleanExpiredTasks` | `() => void` | Removes all tasks that have passed their `taskExpiryDate`. |
 | `cleanExpiredTasksByHash` | `(hash: string) => void` | Removes expired tasks within a specific hash bucket. |
 | `hashScope` | `"week" \| "group" \| "day"` | The active hashing strategy. |
@@ -314,7 +314,7 @@ The library uses "hashes" to bucket tasks efficiently. When calling `getTasks(ha
 
 - **Manual Rendering**: Use `getTasks(hash)` to retrieve only the tasks relevant to the current view.
 - **CRUD Operations**: Use `addTask`, `updateTask`, and `deleteTask` to modify the store. The UI will re-render automatically thanks to the context.
-- **Validation**: Use `isValidTask(task)` to verify if a task is expired before displaying it, or rely on `cleanExpiredTasks()` to prune the store.
+- **Validation**: Use `isValidTask(task)` to verify if a task has not yet expired before displaying it, or rely on `cleanExpiredTasks()` to prune the store.
 - **Performance**: Accessing tasks by hash is highly optimized. Avoid looping through the entire `tasks.buckets` manually if possible.
 
 ---
@@ -425,6 +425,33 @@ to create an organization that truly reflects you.
   console.log(hashes.day);   // "0/group-1/2"
   ```
 
+### `calculateWeekDifference`
+
+- **Description**: Calculates the week difference in days between a selected date and the current date, normalized to Sundays.
+- **Parameters**: 
+  - `dateSelectionnee` (Date): The date to compare.
+  - `timeZone` (string, optional): The timezone to use for the comparison.
+- **Returns**: The difference in days (e.g., 0, 7, -7, 14, -14...).
+
+  **Example**:
+  ```javascript
+  import { calculateWeekDifference } from "react-weekly-planning";
+  const diff = calculateWeekDifference(new Date());
+  console.log(diff); // Logs 0 if it's the current week
+  ```
+
+### `getUniqueId`
+
+- **Description**: Generates a unique identifier (UUID v4).
+- **Returns**: A unique ID string.
+
+  **Example**:
+  ```javascript
+  import { getUniqueId } from "react-weekly-planning";
+  const id = getUniqueId();
+  console.log(id); // Logs a unique UUID
+  ```
+
 ### `getNewTaskForDropOrPaste`
 
 - **Description**: Utility function to generate a new task correctly positioned when dropping or pasting it in a custom calendar context. It reads the dragged task information from the browser's `sessionStorage` and calculates the new start/end dates based on the drop target.
@@ -461,5 +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

@@ -5,11 +5,11 @@ import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
 import GroupContainer from "./GroupContainer";
 import TaskVirtual from "./TaskContainer/TaskVirtual";
 import AddTask from "./AddTask";
-import { getHash, getNewTaskForDropOrPaste, getUnqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
+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)
@@ -38,22 +38,22 @@ const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, dele
                                 return;
                             }
                             deleteTask(dropInfo.newTask.draghash, dropInfo.newTask.id);
-                            addTask(Object.assign(Object.assign({}, dropInfo.newTask), { id: getUnqueId() }));
+                            addTask(Object.assign(Object.assign({}, dropInfo.newTask), { id: getUniqueId() }));
                         }, id: `col-${group.id}day-i`, className: `dayCol ${props.dayColsClassName}`, style: props.dayColsStyle, children: _jsxs("div", { style: {
                                 display: "flex",
                                 width: "100%",
                                 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

@@ -4,10 +4,10 @@ import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
 import GroupContainer from "./GroupContainer";
 import TaskVirtual from "./TaskContainer/TaskVirtual";
 import AddTask from "./AddTask";
-import { getHash, getNewTaskForDropOrPaste, getUnqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
+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,26 +19,26 @@ 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]);
                         if (!dropInfo)
                             return;
                         if (props.drop === "copy") {
-                            addTask(Object.assign(Object.assign({}, dropInfo.newTask), { id: getUnqueId() }));
+                            addTask(Object.assign(Object.assign({}, dropInfo.newTask), { id: getUniqueId() }));
                             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

@@ -1,167 +1,171 @@
 .addPlanStyle {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  background-color: #f2f8fb;
-  opacity: 0;
-  border-radius: 5px;
-  color: #0f5173;
-  transition: background-color 0.3s, opacity 0.3s;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    background-color: #f2f8fb;
+    opacity: 0;
+    border-radius: 5px;
+    color: #0f5173;
+    transition: background-color 0.3s, opacity 0.3s;
 }
 
 .addPlanStyle:hover {
-  background-color: #c6dbe159;
-  opacity: 1;
+    background-color: #c6dbe159;
+    opacity: 1;
 }
 
 .taskContainer {
-  box-shadow: 0px 7px 18px 0px rgba(15, 105, 115, 0.03),
-    0px 6px 10px 0px rgba(15, 105, 115, 0.04),
-    0px 3px 5px 0px rgba(15, 105, 115, 0.05);
-  display: flex;
-  justify-content: center;
-  column-gap: 10px;
-  flex-direction: column;
-  height: auto;
-  border-left: 5px solid #457993;
-  background-color: #f4ffff;
-  color: #457993;
-  cursor: pointer;
-  border-radius: 5px;
-  margin-bottom: 5px;
-  font-size: 13px;
-  overflow: auto;
-  padding: 2px;
-  z-index: 10;
+    box-shadow: 0px 7px 18px 0px rgba(15, 105, 115, 0.03),
+        0px 6px 10px 0px rgba(15, 105, 115, 0.04),
+        0px 3px 5px 0px rgba(15, 105, 115, 0.05);
+    display: flex;
+    justify-content: center;
+    column-gap: 10px;
+    flex-direction: column;
+    height: auto;
+    border-left: 5px solid #457993;
+    background-color: #f4ffff;
+    color: #457993;
+    cursor: pointer;
+    border-radius: 5px;
+    margin-bottom: 5px;
+    font-size: 13px;
+    overflow: auto;
+    padding: 2px;
+    z-index: 10;
 }
 
 .tasklabel {
-  color: #55585d;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 400;
-  margin-left: 5px;
+    color: #55585d;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    margin-left: 5px;
 }
 
 .taskhour {
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  margin-left: 5px;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 600;
+    margin-left: 5px;
 }
 
 .planningCalendar {
-  width: 100%;
-  border-radius: 0.5rem;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  border: 0.74px solid rgba(198, 219, 225, 0.68);
-
-  background-color: white;
+    width: 100%;
+    border-radius: 0.5rem;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    border: 0.74px solid rgba(198, 219, 225, 0.68);
+    border-bottom: none;
+    background-color: white;
 
 }
 
 .planningCalendarHeader {
-  display: flex;
-  width: 100%;
-  z-index: 200;
-  border-bottom: 1.5px solid #0f52737e;
-  background-color: #fff;
+    display: flex;
+    width: 100%;
+    z-index: 200;
+    border-bottom: 1.5px solid #0f52737e;
+    background-color: #fff;
+    position: sticky;
+    top: 0px;
 }
 
 .planningCalendarRow {
-  display: flex;
-  width: 100%;
-  border-bottom: 1.5px solid #0f52737e;
+    display: flex;
+    width: 100%;
+    border-bottom: 1.5px solid #0f52737e;
 }
 
 .planningCalendarRow:last-child {
-  border-bottom: none;
+    border-bottom: none;
 }
 
 .planningCalendar .dayTh,
 .planningCalendar .groupCol {
-  flex: 0 0 150px;
-  color: #0f5173;
-  padding-left: 5px;
-  display: flex;
-  align-items: center;
+    flex: 0 0 150px;
+    color: #0f5173;
+    padding-left: 5px;
+    display: flex;
+    align-items: center;
 }
 
 .planningCalendar .dayCol {
-  flex: 1;
-  border-left: 0.74px solid rgba(198, 219, 225, 0.68);
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+    flex: 1;
+    border-left: 0.74px solid rgba(198, 219, 225, 0.68);
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .planningCalendar .totalTh,
 .planningCalendar .totalCol {
-  flex: 0 0 50px;
-  color: #0f5173;
-  text-align: right;
-  padding-right: 5px;
-  border-left: 0.74px solid rgba(198, 219, 225, 0.68);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+    flex: 0 0 50px;
+    color: #0f5173;
+    text-align: right;
+    padding-right: 5px;
+    border-left: 0.74px solid rgba(198, 219, 225, 0.68);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
 
 .CalendarTableForDay {
-  display: flex;
-  gap: 10px;
-  width: 100vw;
-  height: auto;
+    display: flex;
+    gap: 10px;
+    width: 100vw;
+    height: auto;
 }
 
 .CalendarTableForDayTasksContainer {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: auto;
-  padding: 10px;
-  position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    padding: 10px;
+    position: relative;
 }
 
 .CalendarTableForDayRow {
-  display: flex !important;
-  flex-direction: row !important;
-  gap: 15px;
-  align-items: flex-start;
-  padding: 15px !important;
+    display: flex !important;
+    flex-direction: row !important;
+    gap: 15px;
+    align-items: flex-start;
+    padding: 15px !important;
 }
 
 .CalendarTableForDayGroupTasks {
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 10px;
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
 }
 
 .CalendarTableForDayGroupTasks .taskContainer,
 .CalendarTableForDayGroupTasks .addPlanStyle {
-  margin-bottom: 0px;
-  height: 100%;
-  min-height: 80px;
+    margin-bottom: 0px;
+    height: 100%;
+    min-height: 80px;
 }
 
-.calendarForWeek {
-  display: flex;
-  width: 100%;
-  flex: 1;
-  overflow: auto;
-  position: relative;
+.calendarForWeek,
+.calendarForDay {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+    position: relative;
 
 }
 
-.calendarForWeek-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+.calendarForWeek-container,
+.calendarForDay-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 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/lib/utils.js

@@ -388,7 +388,7 @@ function recurring(ecartDay, task, timeZone) {
         newTask.taskExpiryDate = new Date(newTask.taskExpiryDate.getTime() + ecartDay);
     newTask.taskDate = new Date(newTask.taskStart);
     newTask.dayIndex = getArbitraryDateInTimeZone(newTask.taskDate, timeZone).getDay();
-    newTask.id = getUnqueId();
+    newTask.id = getUniqueId();
     return newTask;
 }
 export function recurringTasks(allTasks, task, recurrenceType, occurrences, timeZone) {
@@ -539,7 +539,7 @@ function updateTaskStartTimeAnEndTime(start, end, calendarOffset, dayIndex, task
     const endTime = end + diffDay * DAY_IN_MILLISECONDS;
     return { startTime, endTime };
 }
-export function getUnqueId() {
+export function getUniqueId() {
     const uid = uuidv4();
     return uid;
 }
@@ -552,7 +552,7 @@ export function pastTasks(dayInfo, groupId, tasks, taskExpiryDate, timeZone) {
                 const newTaskStartAndEnd = updateTaskStartTimeAnEndTime(copiedTasktaskStart, copiedTasktaskEnd, updateOffsetWithDateCalendar(dayInfo.day, timeZone), dayInfo.positionDay, copiedTaskDayIndex, timeZone);
                 if (!checkDuplicates(previousTasks, newTaskStartAndEnd.startTime, newTaskStartAndEnd.endTime, groupId)) {
                     const newTaskDate = new Date(newTaskStartAndEnd.startTime);
-                    const newTaskId = `${getUnqueId()}`;
+                    const newTaskId = `${getUniqueId()}`;
                     const newTask = Object.assign({ taskStart: newTaskStartAndEnd.startTime, taskEnd: newTaskStartAndEnd.endTime, dayIndex: dayInfo.positionDay, id: newTaskId, taskDate: newTaskDate, groupId: groupId, taskExpiryDate: taskExpiryDate }, rest);
                     return [...previousTasks, newTask];
                 }
@@ -591,7 +591,7 @@ export function duplicateTasksForPeriod(periodStart, periodEnd, calendarOffset,
                 const newTaskEnd = taskEnd + ecartDay * DAY_IN_MILLISECONDS;
                 const newTaskDate = new Date(taskDate.getTime() + ecartDay * DAY_IN_MILLISECONDS);
                 if (!checkDuplicates(allTasks, newTaskStart, newTaskEnd, rest.groupId)) {
-                    const newTask = Object.assign(Object.assign({}, rest), { taskDate: newTaskDate, taskStart: newTaskStart, taskEnd: newTaskEnd, id: getUnqueId() });
+                    const newTask = Object.assign(Object.assign({}, rest), { taskDate: newTaskDate, taskStart: newTaskStart, taskEnd: newTaskEnd, id: getUniqueId() });
                     tasks.push(Object.assign(Object.assign({}, newTask), { offset: newOffset }));
                 }
             });
@@ -613,7 +613,7 @@ export function duplicateTaskForPeriod(periodStart, periodEnd, task, ecartDay, g
         const newTaskEnd = taskEnd + ecartDay * DAY_IN_MILLISECONDS;
         const newTaskDate = new Date(taskDate.getTime() + ecartDay * DAY_IN_MILLISECONDS);
         if (!checkDuplicates(allTasks, newTaskStart, newTaskEnd, rest.groupId)) {
-            const newTask = Object.assign(Object.assign({}, rest), { taskDate: newTaskDate, taskStart: newTaskStart, taskEnd: newTaskEnd, id: getUnqueId(), groupId: groupId ? groupId : currentTaskGroupId, taskExpiryDate: taskExpiryDate });
+            const newTask = Object.assign(Object.assign({}, rest), { taskDate: newTaskDate, taskStart: newTaskStart, taskEnd: newTaskEnd, id: getUniqueId(), groupId: groupId ? groupId : currentTaskGroupId, taskExpiryDate: taskExpiryDate });
             allTasks.push(Object.assign(Object.assign({}, newTask), { offset: newOffset }));
         }
     }

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/dist/types/lib/utils.d.ts

@@ -76,7 +76,7 @@ export declare function selectTask(task: TaskFeildsType): void;
 export declare function deSelectTask(task: TaskFeildsType): void;
 export declare function copyTasks(task: TaskFeildsType): void;
 export declare function cutTasks(task: TaskFeildsType, tasks: TaskFeildsType[]): TaskFeildsType[];
-export declare function getUnqueId(): string;
+export declare function getUniqueId(): string;
 export declare function pastTasks(dayInfo: dayInfoType, groupId: string, tasks: TaskFeildsType[], taskExpiryDate?: Date, timeZone?: TimeZone): TaskFeildsType[] | undefined;
 export declare function updateTask(tasks: TaskFeildsType[], taskId: string, newtask: TaskFeildsType): TaskFeildsType[];
 export declare function duplicateTasksForPeriod(periodStart: Date, periodEnd: Date, calendarOffset: number, allTasks: TasksType): TasksType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-weekly-planning",
-  "version": "1.0.42",
+  "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": [