@kkkarsss/ui 1.4.10 → 1.4.12

package/dist/ui/information/calendar-like/calendar-item-wrapper.d.ts

@@ -10,7 +10,7 @@ export type TCalendarItemWrapperProps = {
     };
     onDragStart?: (e: DragEvent<HTMLDivElement>, id: string) => void;
     onDragEnd?: (e: DragEvent<HTMLDivElement>, id: string) => void;
-    onResize?: (id: string, newEstimatedTime: number) => void;
+    onResize?: (id: string, newEstimatedTime: number, newStartHour?: number, newStartMinutes?: number) => void;
     renderTask: (task: TCalendarTask) => ReactNode;
     overlappingTasksCount?: number;
 };

package/dist/ui/information/calendar-like/calendar-item-wrapper.js

@@ -2,28 +2,60 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { jc } from '../../../utils';
 export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, onResize, renderTask, }) => {
-    const [previewEstimatedTime, setPreviewEstimatedTime] = useState(null);
-    const handleMouseDown = (e) => {
+    const [preview, setPreview] = useState(null);
+    const handleResize = (e, type) => {
         if (onResize) {
             e.preventDefault();
             e.stopPropagation();
             const startY = e.clientY;
             const startHeight = (task.estimatedTime / 15) * 20;
+            const startHour = task.dueDate.getHours();
+            const startMinutes = task.dueDate.getMinutes();
             const onMouseMove = (moveEvent) => {
                 const deltaY = moveEvent.clientY - startY;
-                const newHeight = Math.max(20, startHeight + deltaY);
-                // Округляем до 15 минут (20px)
-                const newEstimatedTime = Math.max(15, Math.round(newHeight / 20) * 15);
-                setPreviewEstimatedTime(newEstimatedTime);
+                let newHeight;
+                let newEstimatedTime;
+                let newStartHour = startHour;
+                let newStartMinutes = startMinutes;
+                if (type === 'bottom') {
+                    newHeight = Math.max(20, startHeight + deltaY);
+                    newEstimatedTime = Math.max(15, Math.round(newHeight / 20) * 15);
+                }
+                else {
+                    // Resizing top
+                    const deltaMinutes = Math.round(deltaY / 20) * 15;
+                    newEstimatedTime = Math.max(15, task.estimatedTime - deltaMinutes);
+                    // If we hit min height, don't move the top further down
+                    const actualDeltaMinutes = task.estimatedTime - newEstimatedTime;
+                    const totalStartMinutes = startHour * 60 + startMinutes + actualDeltaMinutes;
+                    newStartHour = Math.floor(totalStartMinutes / 60);
+                    newStartMinutes = totalStartMinutes % 60;
+                }
+                setPreview({ estimatedTime: newEstimatedTime, startHour: newStartHour, startMinutes: newStartMinutes });
             };
             const onMouseUp = (upEvent) => {
                 const deltaY = upEvent.clientY - startY;
-                const newHeight = Math.max(20, startHeight + deltaY);
-                const newEstimatedTime = Math.max(15, Math.round(newHeight / 20) * 15);
-                if (newEstimatedTime !== task.estimatedTime) {
-                    onResize(task.id, newEstimatedTime);
+                let finalEstimatedTime;
+                let finalStartHour = startHour;
+                let finalStartMinutes = startMinutes;
+                if (type === 'bottom') {
+                    const finalHeight = Math.max(20, startHeight + deltaY);
+                    finalEstimatedTime = Math.max(15, Math.round(finalHeight / 20) * 15);
+                }
+                else {
+                    const deltaMinutes = Math.round(deltaY / 20) * 15;
+                    finalEstimatedTime = Math.max(15, task.estimatedTime - deltaMinutes);
+                    const actualDeltaMinutes = task.estimatedTime - finalEstimatedTime;
+                    const totalStartMinutes = startHour * 60 + startMinutes + actualDeltaMinutes;
+                    finalStartHour = Math.floor(totalStartMinutes / 60);
+                    finalStartMinutes = totalStartMinutes % 60;
+                }
+                if (finalEstimatedTime !== task.estimatedTime ||
+                    finalStartHour !== startHour ||
+                    finalStartMinutes !== startMinutes) {
+                    onResize(task.id, finalEstimatedTime, finalStartHour, finalStartMinutes);
                 }
-                setPreviewEstimatedTime(null);
+                setPreview(null);
                 document.removeEventListener('mousemove', onMouseMove);
                 document.removeEventListener('mouseup', onMouseUp);
                 const clickPreventer = (e) => {
@@ -36,9 +68,18 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
             document.addEventListener('mouseup', onMouseUp);
         }
     };
-    const displayHeight = previewEstimatedTime ? `${(previewEstimatedTime / 15) * 20}px` : position.height;
+    const displayHeight = preview ? `${(preview.estimatedTime / 15) * 20}px` : position.height;
+    let displayTop = position.top;
+    if (preview && (preview.startHour !== undefined || preview.startMinutes !== undefined)) {
+        const originalStartTotalMinutes = task.dueDate.getHours() * 60 + task.dueDate.getMinutes();
+        const newStartTotalMinutes = preview.startHour * 60 + preview.startMinutes;
+        const diffMinutes = newStartTotalMinutes - originalStartTotalMinutes;
+        const diffPixels = (diffMinutes / 15) * 20;
+        // Исходный position.top уже включает minutes % 15
+        const originalTopPx = parseInt(position.top, 10);
+        displayTop = `${originalTopPx + diffPixels}px`;
+    }
     return (_jsx("div", { draggable: !!onDragStart, onDragStart: (e) => {
-            console.log('CalendarItemWrapper: onDragStart', task.id);
             onDragStart?.(e, task.id);
             const el = e.currentTarget;
             // Создаем пустой элемент для скрытия стандартного ghost image браузера
@@ -53,7 +94,6 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
                 }, 0);
             }
         }, onDragEnd: (e) => {
-            console.log('CalendarItemWrapper: onDragEnd');
             onDragEnd?.(e, task.id);
             const el = e.currentTarget;
             if (el) {
@@ -64,6 +104,6 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
             height: displayHeight,
             width: position.width,
             left: position.left,
-            top: position.top,
-        }, className: jc('calendar-item absolute p-[2px] transition-[height,width,left,opacity] flex flex-col z-50 select-none', onDragStart ? 'cursor-move' : '', 'hover:z-[60]', previewEstimatedTime !== null ? 'transition-none z-[60]' : '', 'active:z-[100]'), children: _jsxs("div", { className: "w-full h-full relative group/item", children: [renderTask(task), onResize && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center z-[70]", onMouseDown: handleMouseDown, children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
+            top: displayTop,
+        }, className: jc('calendar-item absolute p-[2px] transition-[height,width,left,top,opacity] flex flex-col z-50 select-none', onDragStart ? 'cursor-move' : '', 'hover:z-[60]', preview !== null ? 'transition-none z-[60]' : '', 'active:z-[100]'), children: _jsxs("div", { className: "w-full h-full relative group/item", children: [onResize && (_jsx("div", { className: "absolute top-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center z-[70]", onMouseDown: (e) => handleResize(e, 'top'), children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) })), renderTask(task), onResize && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center z-[70]", onMouseDown: (e) => handleResize(e, 'bottom'), children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
 };

package/dist/ui/information/calendar-like/calendar-like.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState, useEffect, useRef } from 'react';
+import { useMemo, useState, useRef } from 'react';
 import { CalendarItemWrapper } from './calendar-item-wrapper';
 import { CalendarSlot } from './calendar-slot';
+import { useAutoScroll } from './use-auto-scroll';
+import { useCurrentTime } from './use-current-time';
 import { calculateTaskPositions, groupTasksBySlot } from './utils';
 import { jc } from '../../../utils';
 export * from './types';
@@ -9,128 +11,40 @@ export * from './calendar-item-wrapper';
 export * from './calendar-item';
 const DEFAULT_SLOTS = Array.from({ length: 96 }, (_, i) => i);
 const CurrentTimeLine = () => {
-    const [now, setNow] = useState(new Date());
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setNow(new Date());
-        }, 60000);
-        return () => clearInterval(interval);
-    }, []);
-    const topOffset = useMemo(() => {
-        const hours = now.getHours();
-        const minutes = now.getMinutes();
-        const totalMinutes = hours * 60 + minutes;
-        // 15 минут = 20 пикселей (высота слота)
-        return totalMinutes * (20 / 15);
-    }, [now]);
+    const { topOffset } = useCurrentTime();
     return (_jsxs("div", { className: "absolute left-0 right-0 z-[101] pointer-events-none flex items-center", style: { top: `${topOffset}px` }, children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-red-500 -ml-1" }), _jsx("div", { className: "flex-1 h-[2px] bg-red-500" })] }));
 };
 export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = true, autoScrollToCurrentTime = true, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
     const containerRef = useRef(null);
-    const [isDragging, setIsDragging] = useState(false);
+    const [draggingTask, setDraggingTask] = useState(null);
     const tasksWithPosition = useMemo(() => calculateTaskPositions(tasks), [tasks]);
     const tasksBySlot = useMemo(() => groupTasksBySlot(tasksWithPosition), [tasksWithPosition]);
-    useEffect(() => {
-        if (showCurrentTime && autoScrollToCurrentTime && containerRef.current) {
-            const scroll = (retryCount = 0) => {
-                if (!containerRef.current)
-                    return;
-                const now = new Date();
-                const hours = now.getHours();
-                const minutes = now.getMinutes();
-                const totalMinutes = hours * 60 + minutes;
-                // 15 минут = 20 пикселей (высота слота)
-                const topOffset = totalMinutes * (20 / 15);
-                // Находим ближайший скроллируемый родитель или используем окно
-                const scrollParent = (node) => {
-                    if (!node)
-                        return null;
-                    const style = window.getComputedStyle(node);
-                    const overflow = style.overflow + style.overflowY + style.overflowX;
-                    if (/(auto|scroll)/.test(overflow))
-                        return node;
-                    return scrollParent(node.parentElement);
-                };
-                const parent = scrollParent(containerRef.current);
-                if (parent) {
-                    const getRelativeOffsetTop = (target, ancestor) => {
-                        let offset = 0;
-                        let current = target;
-                        while (current && current !== ancestor) {
-                            offset += current.offsetTop;
-                            current = current.offsetParent;
-                        }
-                        return offset;
-                    };
-                    const relativeTop = getRelativeOffsetTop(containerRef.current, parent);
-                    // Если relativeTop равен 0 и это не начало дня, возможно DOM еще не готов
-                    if (relativeTop === 0 && totalMinutes > 60 && retryCount < 5) {
-                        setTimeout(() => scroll(retryCount + 1), 100);
-                        return;
-                    }
-                    console.log('CalendarLike scroll:', {
-                        totalMinutes,
-                        topOffset,
-                        parentScrollTop: parent.scrollTop,
-                        parentClientHeight: parent.clientHeight,
-                        relativeTop,
-                        retryCount,
-                        scrollTarget: relativeTop + topOffset - parent.clientHeight / 2,
-                    });
-                    parent.scrollTo({
-                        top: relativeTop + topOffset - parent.clientHeight / 2,
-                        behavior: 'smooth',
-                    });
-                }
-            };
-            const timeoutId = setTimeout(() => scroll(0), 100);
-            return () => clearTimeout(timeoutId);
-        }
-    }, [showCurrentTime, autoScrollToCurrentTime]);
+    const { topOffset } = useCurrentTime();
+    useAutoScroll(containerRef, showCurrentTime && autoScrollToCurrentTime, topOffset);
     const handleDragStart = (e, task) => {
-        console.log('CalendarLike: handleDragStart', task.id);
-        setIsDragging(true);
+        setDraggingTask(task);
         e.dataTransfer.setData('taskId', task.id);
         e.dataTransfer.setData('taskTitle', task.title || '');
         e.dataTransfer.setData('taskEstimatedTime', String(task.estimatedTime));
         if (task.color) {
             e.dataTransfer.setData('taskColor', task.color);
         }
-        // Сохраняем в глобальную переменную для доступа во время dragOver
-        // eslint-disable-next-line react-hooks/immutability
-        window._draggingTask = task;
     };
     const handleDragEnd = () => {
-        setIsDragging(false);
-        delete window._draggingTask;
+        setDraggingTask(null);
     };
     const handleDrop = (e, hour, minutes) => {
-        console.log('CalendarLike: handleDrop triggered', { hour, minutes });
-        setIsDragging(false);
-        // Пытаемся получить taskId из dataTransfer
-        let taskId = e.dataTransfer.getData('taskId');
-        // Если в dataTransfer пусто (бывает в некоторых браузерах/ситуациях),
-        // берем из глобальной переменной, которую мы засетили в handleDragStart
-        if (!taskId && window._draggingTask) {
-            taskId = window._draggingTask.id;
-            console.log('CalendarLike: taskId recovered from _draggingTask:', taskId);
-        }
-        console.log('CalendarLike: taskId for drop:', taskId);
+        const taskId = e.dataTransfer.getData('taskId') || draggingTask?.id;
+        setDraggingTask(null);
         if (taskId && onTaskDrop) {
             onTaskDrop(taskId, hour, minutes);
         }
-        else {
-            console.warn('CalendarLike: taskId or onTaskDrop missing', { taskId, hasOnTaskDrop: !!onTaskDrop });
-        }
-        // Очищаем глобальную переменную после дропа
-        delete window._draggingTask;
     };
-    return (_jsxs("div", { ref: containerRef, className: jc('relative border-l border-secondary ml-12 select-none', isDragging ? 'is-dragging' : ''), children: [showCurrentTime && _jsx(CurrentTimeLine, {}), slots.map((slotIndex) => {
+    return (_jsxs("div", { ref: containerRef, className: jc('relative border-l border-secondary ml-12 select-none', draggingTask ? 'is-dragging' : ''), children: [showCurrentTime && _jsx(CurrentTimeLine, {}), slots.map((slotIndex) => {
                 const tasksForSlot = tasksBySlot[slotIndex];
                 const currentSlotTime = slotIndex * 15; // в минутах от начала дня
                 // Считаем сколько задач пересекают этот слот (для кластеризации превью)
                 // Исключаем текущую перетаскиваемую задачу из подсчета, чтобы превью не считало себя помехой
-                const draggingTask = window._draggingTask;
                 const overlappingTasksCount = tasks.filter((task) => {
                     if (draggingTask && task.id === draggingTask.id)
                         return false;
@@ -138,6 +52,6 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = t
                     const taskEnd = taskStart + task.estimatedTime;
                     return currentSlotTime >= taskStart && currentSlotTime < taskEnd;
                 }).length;
-                return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, renderTask: renderTask, overlappingTasksCount: overlappingTasksCount, children: tasksForSlot?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: (e) => handleDragStart(e, task), onDragEnd: handleDragEnd, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, slotIndex));
+                return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, renderTask: renderTask, overlappingTasksCount: overlappingTasksCount, draggingTask: draggingTask || undefined, children: tasksForSlot?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: (e) => handleDragStart(e, task), onDragEnd: handleDragEnd, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, slotIndex));
             })] }));
 };

package/dist/ui/information/calendar-like/calendar-like.stories.js

@@ -73,9 +73,20 @@ export const Interactive = {
                 return t;
             }));
         };
-        const handleTaskResize = (taskId, newEstimatedTime) => {
-            console.log(`Task ${taskId} resized to ${newEstimatedTime} minutes`);
-            setTasks((prev) => prev.map((t) => (t.id === taskId ? { ...t, estimatedTime: newEstimatedTime } : t)));
+        const handleTaskResize = (taskId, newEstimatedTime, newStartHour, newStartMinutes) => {
+            console.log(`Task ${taskId} resized to ${newEstimatedTime} minutes. New start: ${newStartHour}:${newStartMinutes}`);
+            setTasks((prev) => prev.map((t) => {
+                if (t.id === taskId) {
+                    const newTask = { ...t, estimatedTime: newEstimatedTime };
+                    if (newStartHour !== undefined && newStartMinutes !== undefined) {
+                        const newDate = new Date(t.dueDate);
+                        newDate.setHours(newStartHour, newStartMinutes, 0, 0);
+                        newTask.dueDate = newDate;
+                    }
+                    return newTask;
+                }
+                return t;
+            }));
         };
         const handleCreateTask = (hour, minutes, estimatedTime) => {
             console.log(`Create task at ${hour}:${minutes} with duration ${estimatedTime}`);
@@ -92,7 +103,7 @@ export const Interactive = {
             console.log(`Task ${taskId} clicked`);
             alert(`Клик по задаче ${taskId}`);
         };
-        return (_jsxs("div", { style: { height: '600px', overflowY: 'auto', background: 'var(--bg-primary)', padding: '20px' }, children: [_jsxs("p", { style: { marginBottom: '20px', color: 'var(--secondary)' }, children: ["\u0418\u043D\u0441\u0442\u0440\u0443\u043A\u0446\u0438\u044F: ", _jsx("br", {}), "1. \u041F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043C\u0435\u0436\u0434\u0443 \u0447\u0430\u0441\u0430\u043C\u0438. ", _jsx("br", {}), "2. \u0418\u0437\u043C\u0435\u043D\u044F\u0439\u0442\u0435 \u0434\u043B\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u044C \u0437\u0430\u0434\u0430\u0447\u0438, \u043F\u043E\u0442\u044F\u043D\u0443\u0432 \u0437\u0430 \u043D\u0438\u0436\u043D\u0438\u0439 \u043A\u0440\u0430\u0439. ", _jsx("br", {}), "3. \u0421\u043E\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043D\u043E\u0432\u044B\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043A\u043B\u0438\u043A\u043D\u0443\u0432 \u0438 \u043F\u043E\u0442\u044F\u043D\u0443\u0432 \u043D\u0430 \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u043E\u043C \u043C\u0435\u0441\u0442\u0435. ", _jsx("br", {}), "\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432\u044B\u0432\u043E\u0434\u044F\u0442\u0441\u044F \u0432 \u043A\u043E\u043D\u0441\u043E\u043B\u044C."] }), _jsxs("div", { style: { marginBottom: '20px', color: 'var(--secondary)', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { type: "checkbox", checked: showCompleted, onChange: (e) => setShowCompleted(e.target.checked), id: "show-completed" }), _jsx("label", { htmlFor: "show-completed", style: { cursor: 'pointer' }, children: "\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043D\u043D\u044B\u0435" })] }), _jsx(CalendarLike, { tasks: filteredTasks, onTaskDrop: handleTaskDrop, onTaskResize: handleTaskResize, onCreateTask: handleCreateTask, renderTask: (task) => {
+        return (_jsxs("div", { style: { height: '600px', overflowY: 'auto', background: 'var(--bg-primary)', padding: '20px' }, children: [_jsxs("p", { style: { marginBottom: '20px', color: 'var(--secondary)' }, children: ["\u0418\u043D\u0441\u0442\u0440\u0443\u043A\u0446\u0438\u044F: ", _jsx("br", {}), "1. \u041F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043C\u0435\u0436\u0434\u0443 \u0447\u0430\u0441\u0430\u043C\u0438. ", _jsx("br", {}), "2. \u0418\u0437\u043C\u0435\u043D\u044F\u0439\u0442\u0435 \u0434\u043B\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u044C \u0437\u0430\u0434\u0430\u0447\u0438, \u043F\u043E\u0442\u044F\u043D\u0443\u0432 \u0437\u0430 \u043D\u0438\u0436\u043D\u0438\u0439 \u043A\u0440\u0430\u0439. ", _jsx("br", {}), "3. \u0418\u0437\u043C\u0435\u043D\u044F\u0439\u0442\u0435 \u0432\u0440\u0435\u043C\u044F \u043D\u0430\u0447\u0430\u043B\u0430 \u0438 \u0434\u043B\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u044C, \u043F\u043E\u0442\u044F\u043D\u0443\u0432 \u0437\u0430 \u0432\u0435\u0440\u0445\u043D\u0438\u0439 \u043A\u0440\u0430\u0439. ", _jsx("br", {}), "4. \u0421\u043E\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043D\u043E\u0432\u044B\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043A\u043B\u0438\u043A\u043D\u0443\u0432 \u0438 \u043F\u043E\u0442\u044F\u043D\u0443\u0432 \u043D\u0430 \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u043E\u043C \u043C\u0435\u0441\u0442\u0435. ", _jsx("br", {}), "\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432\u044B\u0432\u043E\u0434\u044F\u0442\u0441\u044F \u0432 \u043A\u043E\u043D\u0441\u043E\u043B\u044C."] }), _jsxs("div", { style: { marginBottom: '20px', color: 'var(--secondary)', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { type: "checkbox", checked: showCompleted, onChange: (e) => setShowCompleted(e.target.checked), id: "show-completed" }), _jsx("label", { htmlFor: "show-completed", style: { cursor: 'pointer' }, children: "\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043D\u043D\u044B\u0435" })] }), _jsx(CalendarLike, { tasks: filteredTasks, onTaskDrop: handleTaskDrop, onTaskResize: handleTaskResize, onCreateTask: handleCreateTask, renderTask: (task) => {
                         const isCompleted = task.isCompleted;
                         return (_jsx(CalendarItem, { title: _jsx(Cell, { subtitle: _jsx(Typo, { size: 'xs', weight: '500', children: "CODE-1" }), title: _jsx(Typo, { weight: "500", textDecoration: isCompleted ? 'line-through' : 'none', className: "truncate", children: task.title }), accLeft: [
                                     {

package/dist/ui/information/calendar-like/calendar-slot.d.ts

@@ -7,5 +7,6 @@ export type TCalendarSlotProps = {
     renderTask?: (task: TCalendarTask) => ReactNode;
     children?: ReactNode;
     overlappingTasksCount?: number;
+    draggingTask?: TCalendarTask;
 };
 export declare const CalendarSlot: FC<TCalendarSlotProps>;

package/dist/ui/information/calendar-like/calendar-slot.js

@@ -3,7 +3,7 @@ import { animated, config, useSpring } from '@react-spring/web';
 import { useState } from 'react';
 import { jc } from '../../../utils';
 import { Typo } from '../text/typo';
-export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, children, overlappingTasksCount = 0, }) => {
+export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, children, overlappingTasksCount = 0, draggingTask, }) => {
     const hour = Math.floor(slotIndex / 4);
     const minutes = (slotIndex % 4) * 15;
     const isTopSlot = slotIndex % 4 === 0;
@@ -22,8 +22,6 @@ export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, chil
     const handleDragOver = (e) => {
         e.preventDefault();
         e.dataTransfer.dropEffect = 'move';
-        // Пытаемся получить данные из глобальной переменной
-        const draggingTask = window._draggingTask;
         if (!draggingTask)
             return;
         if (!dragOverInfo) {
@@ -37,7 +35,6 @@ export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, chil
         setDragOverInfo(null);
     };
     const handleInternalDrop = (e) => {
-        console.log('CalendarSlot: handleInternalDrop triggered', { hour, minutes });
         setDragOverInfo(null);
         onDrop?.(e, hour, minutes); // Приклеиваем к началу слота (15-минутка)
     };

package/dist/ui/information/calendar-like/types.d.ts

@@ -21,7 +21,7 @@ export type TCalendarLikeProps = {
     autoScrollToCurrentTime?: boolean;
     renderTask: (task: TCalendarTask) => ReactNode;
     onTaskDrop?: (taskId: string, hour: number, minutes: number) => void;
-    onTaskResize?: (taskId: string, newEstimatedTime: number) => void;
+    onTaskResize?: (taskId: string, newEstimatedTime: number, newStartHour?: number, newStartMinutes?: number) => void;
     onTaskClick?: (taskId: string) => void;
     onCreateTask?: (hour: number, minutes: number, estimatedTime: number) => void;
 };

package/dist/ui/information/calendar-like/use-auto-scroll.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useAutoScroll: (containerRef: RefObject<HTMLDivElement | null>, enabled: boolean, topOffset: number) => void;

package/dist/ui/information/calendar-like/use-auto-scroll.js

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+export const useAutoScroll = (containerRef, enabled, topOffset) => {
+    useEffect(() => {
+        if (enabled && containerRef.current) {
+            const scroll = (retryCount = 0) => {
+                if (!containerRef.current)
+                    return;
+                const now = new Date();
+                const hours = now.getHours();
+                const minutes = now.getMinutes();
+                const totalMinutes = hours * 60 + minutes;
+                // Находим ближайший скроллируемый родитель или используем окно
+                const scrollParent = (node) => {
+                    if (!node)
+                        return null;
+                    const style = window.getComputedStyle(node);
+                    const overflow = style.overflow + style.overflowY + style.overflowX;
+                    if (/(auto|scroll)/.test(overflow))
+                        return node;
+                    return scrollParent(node.parentElement);
+                };
+                const parent = scrollParent(containerRef.current);
+                if (parent) {
+                    const getRelativeOffsetTop = (target, ancestor) => {
+                        let offset = 0;
+                        let current = target;
+                        while (current && current !== ancestor) {
+                            offset += current.offsetTop;
+                            current = current.offsetParent;
+                        }
+                        return offset;
+                    };
+                    const relativeTop = getRelativeOffsetTop(containerRef.current, parent);
+                    // Если relativeTop равен 0 и это не начало дня, возможно DOM еще не готов
+                    if (relativeTop === 0 && totalMinutes > 60 && retryCount < 5) {
+                        setTimeout(() => scroll(retryCount + 1), 100);
+                        return;
+                    }
+                    parent.scrollTo({
+                        top: relativeTop + topOffset - parent.clientHeight / 2,
+                        behavior: 'smooth',
+                    });
+                }
+            };
+            const timeoutId = setTimeout(() => scroll(0), 100);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [enabled, topOffset, containerRef]);
+};

package/dist/ui/information/calendar-like/use-current-time.d.ts

@@ -0,0 +1,4 @@
+export declare const useCurrentTime: (updateInterval?: number) => {
+    now: Date;
+    topOffset: number;
+};

package/dist/ui/information/calendar-like/use-current-time.js

@@ -0,0 +1,18 @@
+import { useState, useEffect, useMemo } from 'react';
+export const useCurrentTime = (updateInterval = 60000) => {
+    const [now, setNow] = useState(new Date());
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setNow(new Date());
+        }, updateInterval);
+        return () => clearInterval(interval);
+    }, [updateInterval]);
+    const topOffset = useMemo(() => {
+        const hours = now.getHours();
+        const minutes = now.getMinutes();
+        const totalMinutes = hours * 60 + minutes;
+        // 15 минут = 20 пикселей (высота слота)
+        return totalMinutes * (20 / 15);
+    }, [now]);
+    return { now, topOffset };
+};

package/dist/ui/layout/main-page-layout/main-page-layout.js

@@ -8,5 +8,5 @@ import { IconAction } from '../icon-action/icon-action';
 export const MainPageLayout = ({ children, leftPanel, rightPanel, leftIcon, rightIcon, }) => {
     const { widget } = useWidget();
     const { expandedPanel, toggleLeftPanel, toggleRightPanel } = useLayout();
-    return (_jsx("div", { className: "@container w-full h-[100dvh]", children: _jsxs("main", { className: "grid h-full w-full grid-cols-1 @s:grid-cols-[300px_1fr_300px] @s:py-xl @s:px-l @s:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @s:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@s:hidden absolute left-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'left' ? _jsx(X, { size: 20 }) : leftIcon || _jsx(Menu, { size: 20 }), onClick: toggleLeftPanel }) }), _jsxs(Flex, { justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s:flex' : 'flex', 'h-full mt-[50px] @s:m-0'), children: [children, widget && _jsx(Fragment, { children: widget.ui }, widget.id)] }), _jsx("aside", { className: "hidden @s:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@s:hidden absolute right-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'right' ? _jsx(X, { size: 20 }) : rightIcon || _jsx(Menu, { size: 20 }), onClick: toggleRightPanel }) }), expandedPanel && (_jsx("div", { className: "@s:hidden absolute inset-0 z-40 bg-background pt-16 px-4 pb-4 overflow-auto", children: expandedPanel === 'left' ? leftPanel : rightPanel }))] }) }));
+    return (_jsx("div", { className: "@container w-full h-[100dvh]", children: _jsxs("main", { className: "grid h-full w-full grid-cols-1 @s:grid-cols-[300px_1fr_300px] @s:py-xl @s:px-l @s:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @s:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@s:hidden absolute left-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'left' ? _jsx(X, { size: 20 }) : leftIcon || _jsx(Menu, { size: 20 }), onClick: toggleLeftPanel }) }), _jsxs(Flex, { justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s:flex' : 'flex', 'h-full mt-[50px] @s:m-0'), children: [_jsx("div", { className: 'hidden @m:flex', children: children }), widget && _jsx(Fragment, { children: widget.ui }, widget.id)] }), _jsx("aside", { className: "hidden @s:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@s:hidden absolute right-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'right' ? _jsx(X, { size: 20 }) : rightIcon || _jsx(Menu, { size: 20 }), onClick: toggleRightPanel }) }), expandedPanel && (_jsx("div", { className: "@s:hidden absolute inset-0 z-40 bg-background pt-16 px-4 pb-4 overflow-auto", children: expandedPanel === 'left' ? leftPanel : rightPanel }))] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.4.10",
+  "version": "1.4.12",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",