react-weekly-planning 1.0.39 → 1.0.40

package/dist/components/AddTask/index.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const AddTask = ({ currentGroup, handleAddTask, addTaskRender, dayInfo, addTaskStyle, addTaskClassName, }) => {
+    if (addTaskRender) {
+        return (_jsx(_Fragment, { children: addTaskRender({
+                currentGroup,
+                dayInfo,
+            }) }));
+    }
+    const handleClick = () => {
+        if (!handleAddTask)
+            return;
+        handleAddTask(currentGroup, dayInfo);
+    };
+    return (_jsx("div", { onClick: handleClick, style: addTaskStyle, className: `addPlanStyle ${addTaskClassName}`, children: "+" }));
+};
+export default AddTask;

package/dist/components/CalendarForWeek.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import GroupsHeadContainer from "./GroupsHeadContainer";
+import { theadTrStyle } from "../lib/slyles";
+import DayContainer from "./DayContainer";
+import { getHash, updateOffsetWithDateCalendar, } from "../lib/utils";
+import { memo, useMemo } from "react";
+import useCalendarDateState from "../hooks/useCalendarDateState";
+import { useCalendarTaskContext } from "../contexts/CalendarTaskContext";
+import VirtualGroupRow from "./VirtualGroupRow";
+const CalendarForWeek = (props) => {
+    var _a;
+    const { getTasks, isValidTask, addTask, deleteTask, getTask, hashScope, tasks } = useCalendarTaskContext();
+    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) => {
+                        var _a;
+                        const scope = hashScope || "week";
+                        const groupHash = getHash(offset, group.id);
+                        const sumHoursByGroupsCount = ((_a = tasks.buckets[groupHash[scope]]) === null || _a === void 0 ? void 0 : _a.sumOfTaskDuration) || 0;
+                        return (_jsx(VirtualGroupRow, { group: group, i: i, props: props, getTasks: getTasks, isValidTask: isValidTask, addTask: addTask, deleteTask: deleteTask, getTask: getTask, dailyHours: dailyHours, hashScope: scope, tasks: tasks, sumHoursByGroupsCount: sumHoursByGroupsCount }, `${group.id}-${i}`));
+                    }) })] }) }));
+};
+export default memo(CalendarForWeek, (prevProps, nextProps) => {
+    var _a, _b;
+    return (((_a = prevProps.date) === null || _a === void 0 ? void 0 : _a.getTime()) === ((_b = nextProps.date) === null || _b === void 0 ? void 0 : _b.getTime()) &&
+        prevProps.weekOffset === nextProps.weekOffset &&
+        prevProps.groups === nextProps.groups &&
+        prevProps.className === nextProps.className);
+});

package/dist/components/CalendarForday.js

@@ -0,0 +1,22 @@
+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";
+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]);
+    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) => {
+    var _a, _b;
+    return (((_a = prevProps.date) === null || _a === void 0 ? void 0 : _a.getTime()) === ((_b = nextProps.date) === null || _b === void 0 ? void 0 : _b.getTime()) &&
+        prevProps.weekOffset === nextProps.weekOffset &&
+        prevProps.dayOffset === nextProps.dayOffset &&
+        prevProps.groups === nextProps.groups &&
+        prevProps.className === nextProps.className);
+});

package/dist/components/DayContainer/index.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const DayContainer = ({ dayIndex, dayOfTheMonth, day, dayMonth, dayYear, dayRender, className, style, }) => {
+    if (dayRender) {
+        return (_jsx(_Fragment, { children: dayRender({
+                dayIndex,
+                day,
+                dayOfTheMonth,
+                dayMonth,
+                dayYear,
+            }) }));
+    }
+    return (_jsx("div", { className: `${className}`, style: style, children: `${day}. ${dayOfTheMonth}` }));
+};
+export default memo(DayContainer);

package/dist/components/GroupContainer/index.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { groupContainerStyle } from "../../lib/slyles";
+const GroupContainer = ({ className, style, groupRender, currentGroup, handleClickGroup, }) => {
+    if (groupRender) {
+        return _jsx(_Fragment, { children: groupRender({ currentGroup }) });
+    }
+    const handleClick = () => {
+        if (!handleClickGroup)
+            return;
+        handleClickGroup(currentGroup);
+    };
+    return (_jsxs("div", { onClick: handleClick, className: `${className}`, style: Object.assign(Object.assign({}, groupContainerStyle), style), children: [currentGroup.imageUrl && (_jsx("img", { width: 30, height: 30, src: currentGroup.imageUrl, alt: "groupimg" })), _jsx("label", { children: currentGroup.label && currentGroup.label })] }));
+};
+export default memo(GroupContainer);

package/dist/components/GroupsHeadContainer/index.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const GroupsHeadContainer = ({ groupsHeadRender, style, className, }) => {
+    if (groupsHeadRender) {
+        return _jsx(_Fragment, { children: groupsHeadRender() });
+    }
+    return (_jsx("div", { className: `${className}`, style: style, children: "WeeklyCalendar" }));
+};
+export default GroupsHeadContainer;

package/dist/components/SumHoursContainer/index.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { totalLabel } from "../../lib/utils";
+const SumHoursContainer = ({ groupId, weekOffset, calendarDate, sumHoursByGroups, sumHoursRender, className, style, }) => {
+    if (sumHoursRender) {
+        return (_jsx(_Fragment, { children: sumHoursRender({
+                groupId,
+                weekOffset,
+                calendarDate,
+                sumHoursByGroups,
+            }) }));
+    }
+    return (_jsx("div", { style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), className: `${className}`, children: totalLabel(sumHoursByGroups) }));
+};
+export default memo(SumHoursContainer);

package/dist/components/SumHoursHead/index.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const SumHoursHead = ({ sumHoursHeadRender, className, style, }) => {
+    if (sumHoursHeadRender) {
+        return _jsx(_Fragment, { children: sumHoursHeadRender() });
+    }
+    return (_jsx("div", { className: `${className}`, style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), children: "Hours" }));
+};
+export default SumHoursHead;

package/dist/components/TaskContainer/TaskVirtual.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef } from "react";
+import { useIntersectionObserver } from "../../hooks/useIntersectionObserver";
+import TaskContainer from ".";
+const TaskVirtual = (props) => {
+    const ref = useRef(null);
+    const entry = 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",
+            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" } })) }));
+};
+export default React.memo(TaskVirtual);

package/dist/components/TaskContainer/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { millisecondsToDate } from "../../lib/utils";
+const TaskContainer = ({ handleDragTask, taskRender, handleDragTaskEnd, style, className, currentTask, handleClickTask, }) => {
+    const handleDragStart = (event) => {
+        if (!handleDragTask)
+            return;
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", currentTask.id);
+        window.sessionStorage.setItem("calendardragtaskId", currentTask.id);
+        window.sessionStorage.setItem("calendardragtaskStart", `${currentTask.taskStart}`);
+        window.sessionStorage.setItem("calendardragtaskEnd", `${currentTask.taskEnd}`);
+        window.sessionStorage.setItem("calendardragdayIndex", `${currentTask.dayIndex}`);
+        window.sessionStorage.setItem("calendardraghash", `${currentTask.hash}`);
+        handleDragTask(event, currentTask);
+    };
+    const handleDragEnd = (event) => {
+        if (!handleDragTaskEnd)
+            return;
+        handleDragTaskEnd(event);
+    };
+    const handleClick = () => {
+        if (!handleClickTask)
+            return;
+        handleClickTask(currentTask);
+    };
+    if (taskRender) {
+        return (_jsx("div", { onClick: handleClick, id: currentTask.id, className: `taskContainer ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: taskRender({
+                currentTask,
+            }) }));
+    }
+    return (_jsxs("div", { onClick: handleClick, id: currentTask.id, className: `taskContainer  ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx("p", { className: "tasklabel", children: currentTask.task && currentTask.task }), _jsx("p", { className: "taskhour", children: currentTask.taskStart &&
+                    currentTask.taskEnd &&
+                    `${millisecondsToDate(currentTask.taskStart).formattedDate} - ${millisecondsToDate(currentTask.taskEnd).formattedDate}` })] }));
+};
+export default memo(TaskContainer);

package/dist/components/TaskList/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TaskContainer from "../TaskContainer";
+const TaskList = ({ tasks }) => (_jsx("div", { style: { height: 300, width: "100%" }, children: _jsx("div", { style: { display: "flex", flexDirection: "column" }, children: tasks.map(task => _jsx(TaskContainer, { currentTask: task }, task.id)) }) }));
+export default TaskList;

package/dist/components/VirtualGroupRow.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useRef, useMemo } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
+import GroupContainer from "./GroupContainer";
+import TaskVirtual from "./TaskContainer/TaskVirtual";
+import AddTask from "./AddTask";
+import { getHash, getSessionStorageRecordForDragAndDrop, getUnqueId, updateOffsetWithDateCalendar, } from "../lib/utils";
+import { groupTdStyle } from "../lib/slyles";
+const VirtualGroupRow = ({ group, i, props, getTasks, isValidTask, addTask, deleteTask, getTask, dailyHours, hashScope, tasks, sumHoursByGroupsCount }) => {
+    const ref = useRef(null);
+    const entry = 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 cellData = useMemo(() => {
+        if (!isVisible)
+            return [];
+        return dailyHours.map((_, positionDay) => {
+            const hash = getHash(offset, group.id, positionDay);
+            const cellTasks = getTasks(hash[hashScope]);
+            return {
+                hash: hash[hashScope],
+                tasks: cellTasks,
+                positionDay
+            };
+        });
+    }, [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", { onDragOver: (e) => e.preventDefault(), onDrop: (event) => {
+                            const dropInfo = getSessionStorageRecordForDragAndDrop(cell.tasks, cell.positionDay, group.id, getTask, cell.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: getUnqueId() }));
+                        }, 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) => {
+                                    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`));
+                                    }
+                                    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%" } })) }));
+};
+export default memo(VirtualGroupRow, (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.sumHoursByGroupsCount === next.sumHoursByGroupsCount);
+});

package/dist/components/VirtualGroupRowDay.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useRef, useMemo } from "react";
+import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
+import GroupContainer from "./GroupContainer";
+import TaskVirtual from "./TaskContainer/TaskVirtual";
+import AddTask from "./AddTask";
+import { getHash, getSessionStorageRecordForDragAndDrop, getUnqueId, 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, {
+        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 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) => {
+                        if (!cellTasks)
+                            return;
+                        const dropInfo = getSessionStorageRecordForDragAndDrop(cellTasks, currentDailyHours.positionDay, group.id, getTask, hash[hashScope]);
+                        if (!dropInfo)
+                            return;
+                        if (props.drop === "copy") {
+                            addTask(Object.assign(Object.assign({}, dropInfo.newTask), { id: getUnqueId() }));
+                            return;
+                        }
+                        updateTask(hash[hashScope], dropInfo.newTask.id, dropInfo.newTask);
+                    }, children: [cellTasks.map((task) => {
+                            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`));
+                            }
+                            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%" } })) }));
+};
+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);
+});

package/dist/components/index.js

@@ -0,0 +1,70 @@
+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.
+ *
+ * @param {CalendarPropsType} props - The props for the Calendar component.
+ * @param {number} [props.weekOffset] - Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week).
+ * @param {GroupFeildsType[]} props.groups - Array of group data to be displayed in the calendar.
+ * @param {string} [props.className] - Additional class names for the calendar component.
+ * @param {React.CSSProperties} [props.style] - Additional styles for the calendar component.
+ * @param {Date} props.date - The current date to display in the calendar.
+ * @param {(currentGroup: { currentGroup: GroupFeildsType }) => React.ReactNode} [props.groupRender] - Custom render function for a group.
+ * @param {({ dayIndex, day, dayOfTheMonth, dayMonth, dayYear }: { dayIndex: number; day: string; dayOfTheMonth: number; dayMonth: string; dayYear: number }) => React.ReactNode} [props.dayRender] - Custom render function for a day.
+ * @param {(currentTask: { currentTask: TaskFeildsType }) => React.ReactNode} [props.taskRender] - Custom render function for a task.
+ * @param {React.CSSProperties} [props.rowsStyle] - Additional styles for the rows.
+ * @param {string} [props.rowsClassName] - Additional class names for the rows.
+ * @param {React.CSSProperties} [props.groupsColsStyle] - Additional styles for the group columns.
+ * @param {string} [props.groupsColsClassName] - Additional class names for the group columns.
+ * @param {React.CSSProperties} [props.daysColsStyle] - Additional styles for the day columns.
+ * @param {string} [props.daysColsClassName] - Additional class names for the day columns.
+ * @param {string} [props.addTaskClassName] - Additional class names for the add-task button.
+ * @param {React.CSSProperties} [props.addTaskStyle] - Additional styles for the add-task button.
+ * @param {string} [props.groupContainerClassName] - Additional class names for the group containers.
+ * @param {React.CSSProperties} [props.groupContainerStyle] - Additional styles for the group containers.
+ * @param {string} [props.dayClassName] - Additional class names for the day elements.
+ * @param {React.CSSProperties} [props.dayStyle] - Additional styles for the day elements.
+ * @param {React.CSSProperties} [props.taskContainerStyle] - Additional styles for the task container.
+ * @param {string} [props.taskContainerClassName] - Additional class names for the task container.
+ * @param {React.CSSProperties} [props.groupHeadContainerStyle] - Additional styles for the group header container.
+ * @param {string} [props.groupHeadContainerClassName] - Additional class names for the group header container.
+ * @param {React.CSSProperties} [props.sumHoursContainerStyle] - Additional styles for the sum-of-hours container.
+ * @param {string} [props.sumHoursContainerClassName] - Additional class names for the sum-of-hours container.
+ * @param {React.CSSProperties} [props.sumHoursHeadStyle] - Additional styles for the sum-of-hours header.
+ * @param {string} [props.sumHoursHeadClassName] - Additional class names for the sum-of-hours header.
+ * @param {(currentGroup: GroupFeildsType, dayInfo: dayInfoType) => void} [props.handleAddTask] - Handler function for adding a new task.
+ * @param {({ currentGroup, dayInfo }: { currentGroup: GroupFeildsType; dayInfo: dayInfoType }) => React.ReactNode} [props.addTaskRender] - Custom render function for adding a task.
+ * @param {TasksType} props.tasks - Array of tasks to be displayed in the calendar.
+ * @param {(event: React.DragEvent<HTMLDivElement>, currentTask: TaskFeildsType) => void} [props.handleDragTask] - Handler function for dragging a task.
+ * @param {(event: React.DragEvent<HTMLDivElement>, taskStart: number, taskEnd: number, taskDate: Date, groupId: string, dayIndex: number, newTask: TaskFeildsType, newTasks: TasksType) => void} [props.handleDropTask] - Handler function for dropping a task.
+ * @param {(event: React.DragEvent<HTMLDivElement>) => void} [props.handleDragTaskEnd] - Handler function for ending the drag of a task.
+ * @param {() => React.ReactNode} [props.groupsHeadRender] - Custom render function for the groups header.
+ * @param {({
+ *   groupId,
+ *   tasks,
+ *   weekOffset,
+ *   calendarDate,
+ *   sumHoursByGroups
+ * }: {
+ *   groupId: string;
+ *   tasks: TasksType;
+ *   weekOffset: number;
+ *   calendarDate: Date;
+ *   sumHoursByGroups: number;
+ * }) => React.ReactNode} [props.sumHoursRender] - Custom render function for the sum of hours.
+ * @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)) }));
+};
+export default Calendar;

package/dist/contexts/CalendarContext.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const CalendarContext = createContext({});
+const CalendarContextProvider = ({ children, }) => {
+    return (_jsx(CalendarContext.Provider, { value: {}, children: children }));
+};
+export const useCalendarContext = () => useContext(CalendarContext);
+export default CalendarContextProvider;

package/dist/contexts/CalendarTaskContext.js

@@ -0,0 +1,32 @@
+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: {} },
+    addTask: () => { },
+    getTasks: () => [],
+    updateTask: () => { },
+    deleteTask: () => { },
+    cleanExpiredTasks: () => { },
+    cleanExpiredTasksByHash: () => { },
+    isValidTask: () => false,
+    getTask: () => undefined,
+    hashScope: "week"
+});
+const CalendarTaskContextProvider = ({ children, hashScope }) => {
+    const { tasks, addTask, getTasks, updateTask, deleteTask, cleanExpiredTasks, cleanExpiredTasksByHash, isValidTask, getTask } = useCalendarTask(hashScope || "week");
+    return (_jsx(CalendarTaskContext.Provider, { value: {
+            tasks,
+            addTask,
+            getTasks,
+            updateTask,
+            deleteTask,
+            cleanExpiredTasks,
+            cleanExpiredTasksByHash,
+            isValidTask,
+            getTask,
+            hashScope
+        }, children: children }));
+};
+export const useCalendarTaskContext = () => useContext(CalendarTaskContext);
+export default CalendarTaskContextProvider;

package/dist/definitions/index.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useCalendarDateState.js

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