react-weekly-planning 1.0.43 → 1.0.45

package/README.md

@@ -54,27 +54,7 @@ It is possible to use either Weekoffset or Date, or even both simultaneously.
   ```
 
 
-#### `scope`
 
-- **Description**: This prop sets the view scope of the calendar.
-- **Type**: `"day" | "week"`
-- **Use Case**: Use this prop to define whether the calendar should display a full week or only a single day. If omitted, it defaults to a weekly view.
-
-  **Example**:
-  ```jsx
-  <Calendar scope="day" dayOffset={0} ... />
-  ```
-
-#### `dayOffset`
-
-- **Description**: This prop specifies which day of the week to display when the scope is set to "day".
-- **Type**: `0 | 1 | 2 | 3 | 4 | 5 | 6`
-- **Use Case**: If `scope="day"`, use this prop to target a specific day of the week (`0` being the first day of the week, up to `6`).
-
-  **Example**:
-  ```jsx
-  <Calendar scope="day" dayOffset={2} ... />
-  ```
 
 
 ---
@@ -106,7 +86,6 @@ const App = () => {
           date={date}
           weekOffset={0}
           groups={groups}
-          scope="week"
         />
       </div>
     </CalendarTaskContextProvider>
@@ -126,8 +105,6 @@ Props for the Calendar component.
 | Prop Name                    | Type                                                                                  | Description                                                                                       |
 |------------------------------|---------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
 | `weekOffset`                 | number                                                                                | Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week).                |
-| `scope`                      | "day" \| "week"                                                                       | Sets the calendar view to either a full week or a single day.                                     |
-| `dayOffset`                  | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6                                                       | Offset index for the day column (0 = first day of week, …, 6 = last day) when scope is "day".     |
 | `groups`                     | GroupFeildsType[]                                                                     | Array of group data to be displayed in the calendar.                                              |
 | `className`                  | string                                                                                | Additional class names for the calendar component.                                                |
 | `style`                      | React.CSSProperties \| undefined                                                      | Additional styles for the calendar component.                                                     |
@@ -300,7 +277,7 @@ const App = () => (
 
 ### 2. Default Behavior of `<Calendar />`
 
-It's important to note that the main `<Calendar />` component uses the `"week"` hash scope by default. If you use the standard component, you are implicitly using this scope. Explicitly defining a `hashScope` on the `CalendarTaskContextProvider` is only necessary when you want to change how tasks are indexed or when building a fully custom UI as shown above.
+It's important to note that the main `<Calendar />` component uses the `"day"` hash scope by default. If you use the standard component, you are implicitly using this scope. Explicitly defining a `hashScope` on the `CalendarTaskContextProvider` is only necessary when you want to change how tasks are indexed or when building a fully custom UI as shown above.
 
 ### 3. Understanding Hashes and Scopes
 
@@ -488,4 +465,39 @@ 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.
+  👉 **Watch the performance demo (rendering 7,000 tasks in a single week):**  
+  [![Performance Demo](https://img.youtube.com/vi/st4QmsaHoDM/0.jpg)](https://youtu.be/st4QmsaHoDM)
+- **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,7 @@ 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: {}, 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

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./style.css";
 import { memo, useMemo } from "react";
-import useCalendarDateState from "../hooks/useCalendarDateState";
 import VirtualGroupRowDay from "./VirtualGroupRowDay";
 import DayContainer from "./DayContainer";
 import { useCalendarTaskContext } from "../contexts/CalendarTaskContext";
+import useCalendarDateStateForDay from "../hooks/useCalendarDateStateForDay";
 function CalendarForDay(props) {
-    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
+    const { dailyHours, weekDays, weekOffset: currentWeekOffset } = useCalendarDateStateForDay(props.date, props.weekOffset, props.timeZone, props.dayOffset);
     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]);
-    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}`))) })] }));
+    const dayIndex = props.dayOffset !== undefined ? props.dayOffset : props.date.getDay();
+    const currentDay = weekDays[dayIndex];
+    const memoizedHeader = useMemo(() => (currentDay ? (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: dayIndex, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })) : null), [weekDays, dayIndex, 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: dayIndex, weekOffset: currentWeekOffset, hashScope: hashScope || "day", tasks: tasks }, `${group.id}-${i}`))) })] }));
 }
 export default memo(CalendarForDay, (prevProps, nextProps) => {
     var _a, _b;

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

@@ -4,22 +4,21 @@ import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
 import GroupContainer from "./GroupContainer";
 import TaskVirtual from "./TaskContainer/TaskVirtual";
 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, }) => {
+import { getHash, getNewTaskForDropOrPaste, getUniqueId, } from "../lib/utils";
+const VirtualGroupRowDay = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, updateTask, getTask, dailyHours, dayOffset, weekOffset, hashScope, tasks, }) => {
     const ref = useRef(null);
-    const entry = useIntersectionObserver(ref, {
+    const { entry, height } = useIntersectionObserver(ref, {
         rootMargin: "600px",
         threshold: 0,
     });
     const isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
-    const offset = useMemo(() => updateOffsetWithDateCalendar(props.date), [props.date]);
     const currentDailyHours = dailyHours[dayOffset];
-    const hash = useMemo(() => getHash(offset, group.id, dayOffset), [offset, group.id, dayOffset]);
+    const hash = useMemo(() => getHash(weekOffset, group.id, dayOffset), [weekOffset, group.id, dayOffset]);
     const cellTasks = useMemo(() => getTasks(hash[hashScope]), [getTasks, hash, hashScope, tasks]);
     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,20 +29,21 @@ 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 &&
         prev.i === next.i &&
         prev.tasks === next.tasks &&
         prev.props.date.getTime() === next.props.date.getTime() &&
-        prev.dayOffset === next.dayOffset);
+        prev.dayOffset === next.dayOffset &&
+        prev.weekOffset === next.weekOffset);
 });

package/dist/components/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./style.css";
 import CalendarForWeek from "./CalendarForWeek";
-import CalendarForDay from "./CalendarForday";
 import CalendarTaskContextProvider from "../contexts/CalendarTaskContext";
 /**
  * Calendar component to display tasks and groups in a weekly view.
@@ -58,13 +57,12 @@ import CalendarTaskContextProvider from "../contexts/CalendarTaskContext";
  * @param {() => React.ReactNode} [props.sumHoursHeadRender] - Custom render function for the sum-of-hours header.
  * @param {(currentTask: TaskFeildsType) => void} [props.handleClickTask] - Handler function for clicking a task.
  * @param {(currentGroup: GroupFeildsType) => void} [props.handleClickGroup] - Handler function for clicking a group.
- * @param {0|1|2|3|4|5|6} [props.dayOffset] - Offset index for the day column (0 = first day of week, …, 6 = last day).
  * @param {React.CSSProperties} [props.dayColsStyle] - Additional styles for the day columns.
  * @param {string} [props.dayColsClassName] - Additional class names for the day columns.
  * @param {React.CSSProperties} [props.hoursColsStyle] - Additional styles for the hours columns.
  * @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: _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 {
@@ -85,24 +87,66 @@
 .planningCalendar .dayTh,
 .planningCalendar .groupCol {
     flex: 0 0 150px;
+    min-width: 150px;
     color: #0f5173;
     padding-left: 5px;
     display: flex;
     align-items: center;
+    background-color: inherit;
 }
 
 .planningCalendar .dayCol {
     flex: 1;
+    min-width: 120px;
     border-left: 0.74px solid rgba(198, 219, 225, 0.68);
-    min-width: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
+@media (max-width: 768px) {
+
+    .planningCalendar .dayTh,
+    .planningCalendar .groupCol {
+        flex: 0 0 100px;
+        min-width: 100px;
+        font-size: 13px;
+        position: sticky;
+        left: 0;
+        z-index: 50;
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
+        background-color: #fff;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-left: 10px;
+    }
+
+    .planningCalendar .dayCol {
+        min-width: 120px;
+    }
+
+    .planningCalendarHeader {
+        z-index: 201;
+        /* Layer over the sticky row column */
+    }
+
+    /* Make sure the group container labels also truncate */
+    .groupCol label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+    }
+
+    .planningCalendar {
+        width: auto;
+    }
+}
+
 .planningCalendar .totalTh,
 .planningCalendar .totalCol {
     flex: 0 0 50px;
+    min-width: 50px;
     color: #0f5173;
     text-align: right;
     padding-right: 5px;
@@ -156,7 +200,6 @@
     flex: 1;
     overflow: auto;
     position: relative;
-
 }
 
 .calendarForWeek-container {

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/useCalendarDateStateForDay.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { calculateWeekDifference, getDateObjectInTimeZone, getDayHourly, getWeekDays, } from "../lib/utils";
+function useCalendarDateStateForDay(date, weekOffset, timeZone, dayOffset) {
+    let calendarDateState = useMemo(() => {
+        const currentWeekOffset = (weekOffset !== undefined) ? weekOffset : (timeZone
+            ? calculateWeekDifference(getDateObjectInTimeZone(timeZone), timeZone)
+            : calculateWeekDifference(date, timeZone));
+        const weekDays = getWeekDays(currentWeekOffset, timeZone);
+        const dailyHours = getDayHourly(currentWeekOffset, timeZone);
+        const calData = {
+            dailyHours: dailyHours,
+            weekDays,
+            weekOffset: currentWeekOffset,
+        };
+        return calData;
+    }, [date, weekOffset, dayOffset, timeZone]);
+    return Object.assign({}, calendarDateState);
+}
+export default useCalendarDateStateForDay;

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/components/VirtualGroupRowDay.d.ts

@@ -12,6 +12,7 @@ interface VirtualGroupRowDayProps {
     getTask: (hash: string, taskId: string) => TaskType | undefined;
     dailyHours: dayInfoType[];
     dayOffset: number;
+    weekOffset: number;
     hashScope: "week" | "group" | "day";
     tasks: TasksStore;
 }

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

@@ -55,7 +55,6 @@ import { CalendarPropsType } from "../definitions";
  * @param {() => React.ReactNode} [props.sumHoursHeadRender] - Custom render function for the sum-of-hours header.
  * @param {(currentTask: TaskFeildsType) => void} [props.handleClickTask] - Handler function for clicking a task.
  * @param {(currentGroup: GroupFeildsType) => void} [props.handleClickGroup] - Handler function for clicking a group.
- * @param {0|1|2|3|4|5|6} [props.dayOffset] - Offset index for the day column (0 = first day of week, …, 6 = last day).
  * @param {React.CSSProperties} [props.dayColsStyle] - Additional styles for the day columns.
  * @param {string} [props.dayColsClassName] - Additional class names for the day columns.
  * @param {React.CSSProperties} [props.hoursColsStyle] - Additional styles for the hours columns.

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

@@ -96,7 +96,6 @@ export type DayPropsType = {
  */
 export type CalendarPropsType = {
     drop?: "copy" | "move";
-    scope?: "day" | "week";
     /** Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week). */
     weekOffset?: number;
     /** Array of group data to be displayed in the calendar. */
@@ -194,8 +193,6 @@ export type CalendarPropsType = {
     handleClickGroup?: (currentGroup: GroupFeildsType) => void;
     /** your timezones */
     timeZone?: TimeZone;
-    /** day id */
-    dayOffset?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /**day columns styles */
     dayColsStyle?: React.CSSProperties | undefined;
     /**day columns className*/
@@ -413,5 +410,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/useCalendarDateStateForDay.d.ts

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

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.45",
   "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": [