npm - @mantine/schedule - Versions diffs - 9.5.2 → 9.6.0 - Mend

@mantine/schedule 9.5.2 → 9.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (208) hide show

package/esm/hooks/use-drag-drop-handlers.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-drag-drop-handlers.mjs","names":[],"sources":["../../src/hooks/use-drag-drop-handlers.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffectEvent, useState } from 'react';\nimport { DragContextValue } from '../components/DragContext/DragContext';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { useDragState } from './use-drag-state';\n\nexport interface UseDragDropHandlersOptions<T = any> {\n /** Whether drag and drop is enabled /\n enabled: boolean;\n\n /* Schedule interaction mode /\n mode: ScheduleMode;\n\n /* Called when event is dropped at new location /\n onEventDrop?: (data: {\n eventId: string \| number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n\n /* Function to determine if event can be dragged /\n canDragEvent?: (event: ScheduleEventData) => boolean;\n\n /* Called when any event drag starts /\n onEventDragStart?: (event: ScheduleEventData) => void;\n\n /* Called when any event drag ends /\n onEventDragEnd?: () => void;\n\n /\n Function to calculate drop target dates from drop location.\n * Receives the target location and the dragged event.\n /\n calculateDropTarget: (target: T, draggedEvent: ScheduleEventData) => { start: Date; end: Date };\n\n /* Called when an external item is dropped onto the schedule /\n onExternalDrop?: (e: React.DragEvent, target: T) => void;\n}\n\nexport interface DragDropHandlers<T = any> {\n /* Context value for DragContext.Provider /\n dragContextValue: DragContextValue;\n\n /* Current drop target /\n dropTarget: T \| null;\n\n /* Handle drag start event /\n handleDragStart: (event: ScheduleEventData) => void;\n\n /* Handle drag end event /\n handleDragEnd: () => void;\n\n /* Handle drag over event /\n handleDragOver: (e: React.DragEvent, target: T) => void;\n\n /* Handle drag leave event /\n handleDragLeave: () => void;\n\n /* Handle drop event /\n handleDrop: (e: React.DragEvent, target: T) => void;\n\n /* Check if event is draggable /\n isDraggableEvent: (event: ScheduleEventData) => boolean;\n\n /* Check if target is the current drop target /\n isDropTarget: (target: T) => boolean;\n}\n\n/\n Hook that provides unified drag-drop handlers for Schedule views.\n * Handles drag state management and event drops across Day, Week, and Month views.\n \n @template T - Type of the drop target (e.g., slot index, day string, etc.)\n */\nexport function useDragDropHandlers<T = any>(\n options: UseDragDropHandlersOptions<T>\n): DragDropHandlers<T> {\n const {\n enabled,\n mode,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n calculateDropTarget,\n onExternalDrop,\n } = options;\n\n const stableOnEventDrop = useEffectEvent(onEventDrop \|\| (() => {}));\n const stableOnEventDragStart = useEffectEvent(onEventDragStart \|\| (() => {}));\n const stableOnEventDragEnd = useEffectEvent(onEventDragEnd \|\| (() => {}));\n const stableOnExternalDrop = useEffectEvent(onExternalDrop \|\| (() => {}));\n\n const dragState = useDragState();\n const [dropTarget, setDropTarget] = useState<T \| null>(null);\n\n const handleDragEnd = useCallback(() => {\n dragState.endDrag();\n setDropTarget(null);\n stableOnEventDragEnd();\n }, [dragState]);\n\n const handleDragStart = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled \|\| mode === 'static') {\n return;\n }\n dragState.startDrag(event);\n stableOnEventDragStart(event);\n },\n [enabled, mode, dragState]\n );\n\n const handleDragOver = useCallback(\n (event: React.DragEvent, target: T) => {\n if (mode === 'static') {\n return;\n }\n\n let isInternalDrag = dragState.state.isDragging;\n\n if (isInternalDrag && !event.dataTransfer.types.includes('application/json')) {\n handleDragEnd();\n isInternalDrag = false;\n }\n\n if (isInternalDrag && !enabled) {\n return;\n }\n\n if (!isInternalDrag && !onExternalDrop) {\n return;\n }\n\n event.preventDefault();\n event.dataTransfer.dropEffect = isInternalDrag ? 'move' : 'copy';\n setDropTarget(target);\n },\n [enabled, mode, dragState.state.isDragging, onExternalDrop, handleDragEnd]\n );\n\n const handleDragLeave = useCallback(() => {\n setDropTarget(null);\n }, []);\n\n const handleDrop = useCallback(\n (event: React.DragEvent, target: T) => {\n event.preventDefault();\n\n const isInternalDrag =\n dragState.state.isDragging && event.dataTransfer.types.includes('application/json');\n\n if (isInternalDrag && enabled && dragState.state.draggedEvent && onEventDrop) {\n const { start, end } = calculateDropTarget(target, dragState.state.draggedEvent);\n stableOnEventDrop({\n eventId: dragState.state.draggedEventId!,\n newStart: dayjs(start).format('YYYY-MM-DD HH:mm:ss'),\n newEnd: dayjs(end).format('YYYY-MM-DD HH:mm:ss'),\n event: dragState.state.draggedEvent,\n });\n handleDragEnd();\n return;\n }\n\n if (!isInternalDrag && onExternalDrop) {\n if (dragState.state.isDragging) {\n handleDragEnd();\n }\n stableOnExternalDrop(event, target);\n setDropTarget(null);\n return;\n }\n\n setDropTarget(null);\n },\n [\n enabled,\n dragState.state,\n onEventDrop,\n onExternalDrop,\n calculateDropTarget,\n handleDragEnd,\n stableOnEventDrop,\n stableOnExternalDrop,\n ]\n );\n\n const isDraggableEvent = useCallback(\n (event: ScheduleEventData) => {\n return (\n enabled &&\n mode !== 'static' &&\n event.display !== 'background' &&\n (canDragEvent ? canDragEvent(event) : true)\n );\n },\n [enabled, mode, canDragEvent]\n );\n\n const isDropTarget = useCallback(\n (target: T) => {\n // Handle complex target comparison (for WeekView with day + slotIndex)\n if (dropTarget && typeof dropTarget === 'object' && typeof target === 'object') {\n return JSON.stringify(dropTarget) === JSON.stringify(target);\n }\n return dropTarget === target;\n },\n [dropTarget]\n );\n\n const dragContextValue: DragContextValue = {\n isDragging: dragState.state.isDragging,\n draggedEventId: dragState.state.draggedEventId,\n draggedEvent: dragState.state.draggedEvent,\n dropTarget: dragState.state.dropTarget,\n onDragStart: handleDragStart,\n onDragEnd: handleDragEnd,\n setDropTarget: dragState.setDropTarget,\n };\n\n return {\n dragContextValue,\n dropTarget,\n handleDragStart,\n handleDragEnd,\n handleDragOver,\n handleDragLeave,\n handleDrop,\n isDraggableEvent,\n isDropTarget,\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-drag-drop-handlers.mjs","names":[],"sources":["../../src/hooks/use-drag-drop-handlers.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffectEvent, useState } from 'react';\nimport { DragContextValue } from '../components/DragContext/DragContext';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { useDragState } from './use-drag-state';\n\nexport interface DragPreview<T = any> {\n start: DateTimeStringValue;\n end: DateTimeStringValue;\n target: T;\n}\n\nexport interface UseDragDropHandlersOptions<T = any> {\n /** Whether drag and drop is enabled /\n enabled: boolean;\n\n /* Schedule interaction mode /\n mode: ScheduleMode;\n\n /* Called when event is dropped at new location /\n onEventDrop?: (data: {\n eventId: string \| number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n\n /* Function to determine if event can be dragged /\n canDragEvent?: (event: ScheduleEventData) => boolean;\n\n /* Called when any event drag starts /\n onEventDragStart?: (event: ScheduleEventData) => void;\n\n /* Called when any event drag ends /\n onEventDragEnd?: () => void;\n\n /\n Function to calculate drop target dates from drop location.\n * Receives the target location and the dragged event.\n /\n calculateDropTarget: (target: T, draggedEvent: ScheduleEventData) => { start: Date; end: Date };\n\n /* Called when an external item is dropped onto the schedule /\n onExternalDrop?: (e: React.DragEvent, target: T) => void;\n}\n\nexport interface DragDropHandlers<T = any> {\n /* Context value for DragContext.Provider /\n dragContextValue: DragContextValue;\n\n /* Current drop target /\n dropTarget: T \| null;\n\n /* Handle drag start event /\n handleDragStart: (event: ScheduleEventData) => void;\n\n /* Handle drag end event /\n handleDragEnd: () => void;\n\n /* Handle drag over event /\n handleDragOver: (e: React.DragEvent, target: T) => void;\n\n /* Handle drag leave event /\n handleDragLeave: (event?: React.DragEvent) => void;\n\n /* Handle drop event /\n handleDrop: (e: React.DragEvent, target: T) => void;\n\n /* Check if event is draggable /\n isDraggableEvent: (event: ScheduleEventData) => boolean;\n\n /* Check if target is the current drop target /\n isDropTarget: (target: T) => boolean;\n\n /* Snapped drop preview used to render the drag ghost, or `null` when not dragging /\n dragPreview: DragPreview<T> \| null;\n\n /* Sets the current drag preview /\n setDragPreview: (preview: DragPreview<T> \| null) => void;\n}\n\n/\n Hook that provides unified drag-drop handlers for Schedule views.\n * Handles drag state management and event drops across Day, Week, and Month views.\n \n @template T - Type of the drop target (e.g., slot index, day string, etc.)\n */\nexport function useDragDropHandlers<T = any>(\n options: UseDragDropHandlersOptions<T>\n): DragDropHandlers<T> {\n const {\n enabled,\n mode,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n calculateDropTarget,\n onExternalDrop,\n } = options;\n\n const stableOnEventDrop = useEffectEvent(onEventDrop \|\| (() => {}));\n const stableOnEventDragStart = useEffectEvent(onEventDragStart \|\| (() => {}));\n const stableOnEventDragEnd = useEffectEvent(onEventDragEnd \|\| (() => {}));\n const stableOnExternalDrop = useEffectEvent(onExternalDrop \|\| (() => {}));\n\n const dragState = useDragState();\n const [dropTarget, setDropTarget] = useState<T \| null>(null);\n const [dragPreview, setDragPreview] = useState<DragPreview<T> \| null>(null);\n\n const handleDragEnd = useCallback(() => {\n dragState.endDrag();\n setDropTarget(null);\n setDragPreview(null);\n stableOnEventDragEnd();\n }, [dragState]);\n\n const handleDragStart = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled \|\| mode === 'static') {\n return;\n }\n dragState.startDrag(event);\n stableOnEventDragStart(event);\n },\n [enabled, mode, dragState]\n );\n\n const handleDragOver = useCallback(\n (event: React.DragEvent, target: T) => {\n if (mode === 'static') {\n return;\n }\n\n let isInternalDrag = dragState.state.isDragging;\n\n if (isInternalDrag && !event.dataTransfer.types.includes('application/json')) {\n handleDragEnd();\n isInternalDrag = false;\n }\n\n if (isInternalDrag && !enabled) {\n return;\n }\n\n if (!isInternalDrag && !onExternalDrop) {\n return;\n }\n\n event.preventDefault();\n event.dataTransfer.dropEffect = isInternalDrag ? 'move' : 'copy';\n setDropTarget(target);\n },\n [enabled, mode, dragState.state.isDragging, onExternalDrop, handleDragEnd]\n );\n\n const handleDragLeave = useCallback((event?: React.DragEvent) => {\n if (event?.currentTarget) {\n const rect = event.currentTarget.getBoundingClientRect();\n const isInside =\n event.clientX >= rect.left &&\n event.clientX < rect.right &&\n event.clientY >= rect.top &&\n event.clientY < rect.bottom;\n if (isInside) {\n return;\n }\n }\n\n setDropTarget(null);\n setDragPreview(null);\n }, []);\n\n const handleDrop = useCallback(\n (event: React.DragEvent, target: T) => {\n event.preventDefault();\n\n const isInternalDrag =\n dragState.state.isDragging && event.dataTransfer.types.includes('application/json');\n\n if (isInternalDrag && enabled && dragState.state.draggedEvent && onEventDrop) {\n const { start, end } = calculateDropTarget(target, dragState.state.draggedEvent);\n stableOnEventDrop({\n eventId: dragState.state.draggedEventId!,\n newStart: dayjs(start).format('YYYY-MM-DD HH:mm:ss'),\n newEnd: dayjs(end).format('YYYY-MM-DD HH:mm:ss'),\n event: dragState.state.draggedEvent,\n });\n handleDragEnd();\n return;\n }\n\n if (!isInternalDrag && onExternalDrop) {\n if (dragState.state.isDragging) {\n handleDragEnd();\n }\n stableOnExternalDrop(event, target);\n setDropTarget(null);\n setDragPreview(null);\n return;\n }\n\n setDropTarget(null);\n setDragPreview(null);\n },\n [\n enabled,\n dragState.state,\n onEventDrop,\n onExternalDrop,\n calculateDropTarget,\n handleDragEnd,\n stableOnEventDrop,\n stableOnExternalDrop,\n ]\n );\n\n const isDraggableEvent = useCallback(\n (event: ScheduleEventData) => {\n return (\n enabled &&\n mode !== 'static' &&\n event.display !== 'background' &&\n (canDragEvent ? canDragEvent(event) : true)\n );\n },\n [enabled, mode, canDragEvent]\n );\n\n const isDropTarget = useCallback(\n (target: T) => {\n // Handle complex target comparison (for WeekView with day + slotIndex)\n if (dropTarget && typeof dropTarget === 'object' && typeof target === 'object') {\n return JSON.stringify(dropTarget) === JSON.stringify(target);\n }\n return dropTarget === target;\n },\n [dropTarget]\n );\n\n const dragContextValue: DragContextValue = {\n isDragging: dragState.state.isDragging,\n draggedEventId: dragState.state.draggedEventId,\n draggedEvent: dragState.state.draggedEvent,\n dropTarget: dragState.state.dropTarget,\n onDragStart: handleDragStart,\n onDragEnd: handleDragEnd,\n setDropTarget: dragState.setDropTarget,\n };\n\n return {\n dragContextValue,\n dropTarget,\n handleDragStart,\n handleDragEnd,\n handleDragOver,\n handleDragLeave,\n handleDrop,\n isDraggableEvent,\n isDropTarget,\n dragPreview,\n setDragPreview,\n };\n}\n"],"mappings":"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"}

package/esm/hooks/use-event-resize.mjs CHANGED Viewed

@@ -4,7 +4,7 @@ import { parseTimeString } from "../utils/parse-time-string/parse-time-string.mj
 import dayjs from "dayjs";
 import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
 //#region packages/@mantine/schedule/src/hooks/use-event-resize.ts
-function useEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, onEventResize, canResizeEvent }) {
+function useEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent }) {
 	const [resizeState, setResizeState] = useState(null);
 	const resizeRef = useRef(null);
 	const justResizedRef = useRef(false);
@@ -14,13 +14,17 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
 	const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;
 	const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;
 	const clampedInterval = clampIntervalMinutes(intervalMinutes);
+	const clampedResizeInterval = clampIntervalMinutes(resizeIntervalMinutes ?? intervalMinutes);
 	const literalRange = endMinutes - startMinutes;
 	const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;
-	const minHeightPercent = clampedInterval / totalMinutes * 100;
 	const clampAndSnap = useCallback((minutes) => {
-		const snapped = Math.round(minutes / clampedInterval) * clampedInterval;
-		return Math.max(0, Math.min(literalRange, snapped));
-	}, [literalRange, clampedInterval]);
+		const snapped = Math.round((startMinutes + minutes) / clampedResizeInterval) * clampedResizeInterval;
+		return Math.max(0, Math.min(literalRange, snapped - startMinutes));
+	}, [
+		literalRange,
+		clampedResizeInterval,
+		startMinutes
+	]);
 	const percentToDateTime = useCallback((percent, eventDate) => {
 		const minutes = percent / 100 * totalMinutes;
 		const snappedMinutes = clampAndSnap(minutes);
@@ -33,10 +37,17 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
 		startMinutes,
 		clampAndSnap
 	]);
-	const snapPercent = useCallback((percent) => {
-		const minutes = percent / 100 * totalMinutes;
-		return clampAndSnap(minutes) / totalMinutes * 100;
-	}, [totalMinutes, clampAndSnap]);
+	const snapEdgeMinutes = useCallback((minutes, direction) => {
+		const absolute = startMinutes + minutes;
+		const snapped = direction === "up" ? Math.ceil(absolute / clampedResizeInterval) * clampedResizeInterval : Math.floor(absolute / clampedResizeInterval) * clampedResizeInterval;
+		return Math.max(0, Math.min(literalRange, snapped - startMinutes));
+	}, [
+		literalRange,
+		clampedResizeInterval,
+		startMinutes
+	]);
+	const percentToMinutes = useCallback((percent) => percent / 100 * totalMinutes, [totalMinutes]);
+	const minutesToPercent = useCallback((minutes) => minutes / totalMinutes * 100, [totalMinutes]);
 	const handleResizeStart = useCallback(({ event, edge, container, originalTop, originalHeight, eventDate, pointerEvent }) => {
 		if (!enabled || mode === "static") return;
 		pointerEvent.preventDefault();
@@ -68,14 +79,18 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
 			const containerRect = state.container.getBoundingClientRect();
 			const relativeY = e.clientY - containerRect.top;
 			const rawPercent = Math.max(0, Math.min(100, relativeY / containerRect.height * 100));
-			const snappedPercent = snapPercent(rawPercent);
+			const draggedMinutes = clampAndSnap(percentToMinutes(rawPercent));
 			let newTop = state.originalTop;
 			let newHeight = state.originalHeight;
-			if (state.edge === "bottom") newHeight = Math.max(minHeightPercent, snappedPercent - state.originalTop);
-			else {
-				const originalBottom = state.originalTop + state.originalHeight;
-				newTop = Math.min(snappedPercent, originalBottom - minHeightPercent);
-				newHeight = originalBottom - newTop;
+			if (state.edge === "bottom") {
+				const topMinutes = percentToMinutes(state.originalTop);
+				const minEndMinutes = snapEdgeMinutes(topMinutes + clampedResizeInterval, "up");
+				newHeight = Math.max(0, minutesToPercent(Math.max(draggedMinutes, minEndMinutes)) - state.originalTop);
+			} else {
+				const bottomMinutes = percentToMinutes(state.originalTop + state.originalHeight);
+				const maxStartMinutes = snapEdgeMinutes(bottomMinutes - clampedResizeInterval, "down");
+				newTop = minutesToPercent(Math.min(draggedMinutes, maxStartMinutes));
+				newHeight = Math.max(0, state.originalTop + state.originalHeight - newTop);
 			}
 			resizeRef.current = {
 				...state,

package/esm/hooks/use-event-resize.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-event-resize.mjs","names":[],"sources":["../../src/hooks/use-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'top' \| 'bottom';\n\ninterface ResizeState {\n eventId: string \| number;\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalTop: number;\n originalHeight: number;\n currentTop: number;\n currentHeight: number;\n eventDate: string;\n originalStart: DateTimeStringValue;\n originalEnd: DateTimeStringValue;\n}\n\nexport interface UseEventResizeInput {\n enabled?: boolean;\n mode?: ScheduleMode;\n startTime: string;\n endTime: string;\n intervalMinutes: number;\n onEventResize?: (data: {\n eventId: string \| number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useEventResize({\n enabled = false,\n mode = 'default',\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n}: UseEventResizeInput) {\n const [resizeState, setResizeState] = useState<ResizeState \| null>(null);\n const resizeRef = useRef<ResizeState \| null>(null);\n const justResizedRef = useRef(false);\n const stableOnEventResize = useEffectEvent(onEventResize \|\| (() => {}));\n\n const parsedStartTime = parseTimeString(startTime);\n const parsedEndTime = parseTimeString(endTime);\n const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n const clampedInterval = clampIntervalMinutes(intervalMinutes);\n const literalRange = endMinutes - startMinutes;\n const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n const minHeightPercent = (clampedInterval / totalMinutes) * 100;\n\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped = Math.round(minutes / clampedInterval) * clampedInterval;\n return Math.max(0, Math.min(literalRange, snapped));\n },\n [literalRange, clampedInterval]\n );\n\n const percentToDateTime = useCallback(\n (percent: number, eventDate: string): DateTimeStringValue => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n const totalMins = startMinutes + snappedMinutes;\n const hours = Math.floor(totalMins / 60);\n const mins = totalMins % 60;\n return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n },\n [totalMinutes, startMinutes, clampAndSnap]\n );\n\n const snapPercent = useCallback(\n (percent: number): number => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n return (snappedMinutes / totalMinutes) * 100;\n },\n [totalMinutes, clampAndSnap]\n );\n\n const handleResizeStart = useCallback(\n ({\n event,\n edge,\n container,\n originalTop,\n originalHeight,\n eventDate,\n pointerEvent,\n }: {\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalTop: number;\n originalHeight: number;\n eventDate: string;\n pointerEvent: React.PointerEvent;\n }) => {\n if (!enabled \|\| mode === 'static') {\n return;\n }\n\n pointerEvent.preventDefault();\n pointerEvent.stopPropagation();\n\n const state: ResizeState = {\n eventId: event.id,\n event,\n edge,\n container,\n originalTop,\n originalHeight,\n currentTop: originalTop,\n currentHeight: originalHeight,\n eventDate,\n originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n };\n\n resizeRef.current = state;\n setResizeState(state);\n },\n [enabled, mode]\n );\n\n const isResizing = resizeState !== null;\n\n useEffect(() => {\n if (!isResizing) {\n return undefined;\n }\n\n const savedUserSelect = document.body.style.userSelect;\n document.body.style.userSelect = 'none';\n\n const handlePointerMove = (e: PointerEvent) => {\n const state = resizeRef.current;\n if (!state) {\n return;\n }\n\n const containerRect = state.container.getBoundingClientRect();\n const relativeY = e.clientY - containerRect.top;\n const rawPercent = Math.max(0, Math.min(100, (relativeY / containerRect.height) * 100));\n const snappedPercent = snapPercent(rawPercent);\n\n let newTop = state.originalTop;\n let newHeight = state.originalHeight;\n\n if (state.edge === 'bottom') {\n newHeight = Math.max(minHeightPercent, snappedPercent - state.originalTop);\n } else {\n const originalBottom = state.originalTop + state.originalHeight;\n newTop = Math.min(snappedPercent, originalBottom - minHeightPercent);\n newHeight = originalBottom - newTop;\n }\n\n resizeRef.current = { ...state, currentTop: newTop, currentHeight: newHeight };\n setResizeState(resizeRef.current);\n };\n\n const handlePointerUp = () => {\n const state = resizeRef.current;\n if (state) {\n if (\n state.currentTop !== state.originalTop \|\|\n state.currentHeight !== state.originalHeight\n ) {\n let newStart: DateTimeStringValue;\n let newEnd: DateTimeStringValue;\n\n if (state.edge === 'top') {\n newStart = percentToDateTime(state.currentTop, state.eventDate);\n newEnd = state.originalEnd;\n } else {\n newStart = state.originalStart;\n newEnd = percentToDateTime(state.currentTop + state.currentHeight, state.eventDate);\n }\n\n stableOnEventResize({\n eventId: state.eventId,\n newStart,\n newEnd,\n event: state.event,\n });\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n justResizedRef.current = true;\n requestAnimationFrame(() => {\n justResizedRef.current = false;\n });\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.body.style.userSelect = savedUserSelect;\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, [isResizing]);\n\n const getResizePosition = useCallback(\n (eventId: string \| number) => {\n if (!resizeState \|\| resizeState.eventId !== eventId) {\n return null;\n }\n return { top: resizeState.currentTop, height: resizeState.currentHeight };\n },\n [resizeState]\n );\n\n const isResizableEvent = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled \|\| mode === 'static' \|\| event.display === 'background') {\n return false;\n }\n return canResizeEvent ? canResizeEvent(event) : true;\n },\n [enabled, mode, canResizeEvent]\n );\n\n const wasResizing = useCallback(() => justResizedRef.current, []);\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n getResizePosition,\n isResizableEvent,\n wasResizing,\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-event-resize.mjs","names":[],"sources":["../../src/hooks/use-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'top' \| 'bottom';\n\ninterface ResizeState {\n eventId: string \| number;\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalTop: number;\n originalHeight: number;\n currentTop: number;\n currentHeight: number;\n eventDate: string;\n originalStart: DateTimeStringValue;\n originalEnd: DateTimeStringValue;\n}\n\nexport interface UseEventResizeInput {\n enabled?: boolean;\n mode?: ScheduleMode;\n startTime: string;\n endTime: string;\n intervalMinutes: number;\n resizeIntervalMinutes?: number;\n onEventResize?: (data: {\n eventId: string \| number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useEventResize({\n enabled = false,\n mode = 'default',\n startTime,\n endTime,\n intervalMinutes,\n resizeIntervalMinutes,\n onEventResize,\n canResizeEvent,\n}: UseEventResizeInput) {\n const [resizeState, setResizeState] = useState<ResizeState \| null>(null);\n const resizeRef = useRef<ResizeState \| null>(null);\n const justResizedRef = useRef(false);\n const stableOnEventResize = useEffectEvent(onEventResize \|\| (() => {}));\n\n const parsedStartTime = parseTimeString(startTime);\n const parsedEndTime = parseTimeString(endTime);\n const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n const clampedInterval = clampIntervalMinutes(intervalMinutes);\n const clampedResizeInterval = clampIntervalMinutes(resizeIntervalMinutes ?? intervalMinutes);\n const literalRange = endMinutes - startMinutes;\n const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n\n // Snapping happens in absolute minutes from midnight – the same grid `calculateDropTime`\n // uses for drag and drop. Snapping relative to `startTime` would put resized edges on a\n // different grid than dragged events whenever `startTime` is not a multiple of the interval\n // (with `startTime=\"08:10\"` and a 30 minute step, drops land on :00/:30 but resizes on\n // :10/:40, so the two operations could never align an event).\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped =\n Math.round((startMinutes + minutes) / clampedResizeInterval) * clampedResizeInterval;\n return Math.max(0, Math.min(literalRange, snapped - startMinutes));\n },\n [literalRange, clampedResizeInterval, startMinutes]\n );\n\n const percentToDateTime = useCallback(\n (percent: number, eventDate: string): DateTimeStringValue => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n const totalMins = startMinutes + snappedMinutes;\n const hours = Math.floor(totalMins / 60);\n const mins = totalMins % 60;\n return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n },\n [totalMinutes, startMinutes, clampAndSnap]\n );\n\n const snapEdgeMinutes = useCallback(\n (minutes: number, direction: 'up' \| 'down'): number => {\n const absolute = startMinutes + minutes;\n const snapped =\n direction === 'up'\n ? Math.ceil(absolute / clampedResizeInterval) * clampedResizeInterval\n : Math.floor(absolute / clampedResizeInterval) * clampedResizeInterval;\n return Math.max(0, Math.min(literalRange, snapped - startMinutes));\n },\n [literalRange, clampedResizeInterval, startMinutes]\n );\n\n const percentToMinutes = useCallback(\n (percent: number): number => (percent / 100) * totalMinutes,\n [totalMinutes]\n );\n\n const minutesToPercent = useCallback(\n (minutes: number): number => (minutes / totalMinutes) * 100,\n [totalMinutes]\n );\n\n const handleResizeStart = useCallback(\n ({\n event,\n edge,\n container,\n originalTop,\n originalHeight,\n eventDate,\n pointerEvent,\n }: {\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalTop: number;\n originalHeight: number;\n eventDate: string;\n pointerEvent: React.PointerEvent;\n }) => {\n if (!enabled \|\| mode === 'static') {\n return;\n }\n\n pointerEvent.preventDefault();\n pointerEvent.stopPropagation();\n\n const state: ResizeState = {\n eventId: event.id,\n event,\n edge,\n container,\n originalTop,\n originalHeight,\n currentTop: originalTop,\n currentHeight: originalHeight,\n eventDate,\n originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n };\n\n resizeRef.current = state;\n setResizeState(state);\n },\n [enabled, mode]\n );\n\n const isResizing = resizeState !== null;\n\n useEffect(() => {\n if (!isResizing) {\n return undefined;\n }\n\n const savedUserSelect = document.body.style.userSelect;\n document.body.style.userSelect = 'none';\n\n const handlePointerMove = (e: PointerEvent) => {\n const state = resizeRef.current;\n if (!state) {\n return;\n }\n\n const containerRect = state.container.getBoundingClientRect();\n const relativeY = e.clientY - containerRect.top;\n const rawPercent = Math.max(0, Math.min(100, (relativeY / containerRect.height) * 100));\n const draggedMinutes = clampAndSnap(percentToMinutes(rawPercent));\n\n let newTop = state.originalTop;\n let newHeight = state.originalHeight;\n\n if (state.edge === 'bottom') {\n const topMinutes = percentToMinutes(state.originalTop);\n const minEndMinutes = snapEdgeMinutes(topMinutes + clampedResizeInterval, 'up');\n const endMinutes = Math.max(draggedMinutes, minEndMinutes);\n newHeight = Math.max(0, minutesToPercent(endMinutes) - state.originalTop);\n } else {\n const bottomMinutes = percentToMinutes(state.originalTop + state.originalHeight);\n const maxStartMinutes = snapEdgeMinutes(bottomMinutes - clampedResizeInterval, 'down');\n const startMinutesValue = Math.min(draggedMinutes, maxStartMinutes);\n newTop = minutesToPercent(startMinutesValue);\n newHeight = Math.max(0, state.originalTop + state.originalHeight - newTop);\n }\n\n resizeRef.current = { ...state, currentTop: newTop, currentHeight: newHeight };\n setResizeState(resizeRef.current);\n };\n\n const handlePointerUp = () => {\n const state = resizeRef.current;\n if (state) {\n if (\n state.currentTop !== state.originalTop \|\|\n state.currentHeight !== state.originalHeight\n ) {\n let newStart: DateTimeStringValue;\n let newEnd: DateTimeStringValue;\n\n if (state.edge === 'top') {\n newStart = percentToDateTime(state.currentTop, state.eventDate);\n newEnd = state.originalEnd;\n } else {\n newStart = state.originalStart;\n newEnd = percentToDateTime(state.currentTop + state.currentHeight, state.eventDate);\n }\n\n stableOnEventResize({\n eventId: state.eventId,\n newStart,\n newEnd,\n event: state.event,\n });\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n justResizedRef.current = true;\n requestAnimationFrame(() => {\n justResizedRef.current = false;\n });\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.body.style.userSelect = savedUserSelect;\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, [isResizing]);\n\n const getResizePosition = useCallback(\n (eventId: string \| number) => {\n if (!resizeState \|\| resizeState.eventId !== eventId) {\n return null;\n }\n return { top: resizeState.currentTop, height: resizeState.currentHeight };\n },\n [resizeState]\n );\n\n const isResizableEvent = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled \|\| mode === 'static' \|\| event.display === 'background') {\n return false;\n }\n return canResizeEvent ? canResizeEvent(event) : true;\n },\n [enabled, mode, canResizeEvent]\n );\n\n const wasResizing = useCallback(() => justResizedRef.current, []);\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n getResizePosition,\n isResizableEvent,\n wasResizing,\n };\n}\n"],"mappings":";;;;;;AAsCA,SAAgB,eAAe,EAC7B,UAAU,OACV,OAAO,WACP,WACA,SACA,iBACA,uBACA,eACA,kBACsB;CACtB,MAAM,CAAC,aAAa,kBAAkB,SAA6B,IAAI;CACvE,MAAM,YAAY,OAA2B,IAAI;CACjD,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,sBAAsB,eAAe,wBAAwB,CAAC,EAAE;CAEtE,MAAM,kBAAkB,gBAAgB,SAAS;CACjD,MAAM,gBAAgB,gBAAgB,OAAO;CAC7C,MAAM,eAAe,gBAAgB,QAAQ,KAAK,gBAAgB;CAClE,MAAM,aAAa,cAAc,QAAQ,KAAK,cAAc;CAC5D,MAAM,kBAAkB,qBAAqB,eAAe;CAC5D,MAAM,wBAAwB,qBAAqB,yBAAyB,eAAe;CAC3F,MAAM,eAAe,aAAa;CAClC,MAAM,eAAe,KAAK,KAAK,eAAe,eAAe,IAAI;CAOjE,MAAM,eAAe,aAClB,YAA4B;EAC3B,MAAM,UACJ,KAAK,OAAO,eAAe,WAAW,qBAAqB,IAAI;EACjE,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,UAAU,YAAY,CAAC;CACnE,GACA;EAAC;EAAc;EAAuB;CAAY,CACpD;CAEA,MAAM,oBAAoB,aACvB,SAAiB,cAA2C;EAC3D,MAAM,UAAW,UAAU,MAAO;EAClC,MAAM,iBAAiB,aAAa,OAAO;EAC3C,MAAM,YAAY,eAAe;EACjC,MAAM,QAAQ,KAAK,MAAM,YAAY,EAAE;EACvC,MAAM,OAAO,YAAY;EACzB,OAAO,GAAG,UAAU,GAAG,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE;CACzF,GACA;EAAC;EAAc;EAAc;CAAY,CAC3C;CAEA,MAAM,kBAAkB,aACrB,SAAiB,cAAqC;EACrD,MAAM,WAAW,eAAe;EAChC,MAAM,UACJ,cAAc,OACV,KAAK,KAAK,WAAW,qBAAqB,IAAI,wBAC9C,KAAK,MAAM,WAAW,qBAAqB,IAAI;EACrD,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,UAAU,YAAY,CAAC;CACnE,GACA;EAAC;EAAc;EAAuB;CAAY,CACpD;CAEA,MAAM,mBAAmB,aACtB,YAA6B,UAAU,MAAO,cAC/C,CAAC,YAAY,CACf;CAEA,MAAM,mBAAmB,aACtB,YAA6B,UAAU,eAAgB,KACxD,CAAC,YAAY,CACf;CAEA,MAAM,oBAAoB,aACvB,EACC,OACA,MACA,WACA,aACA,gBACA,WACA,mBASI;EACJ,IAAI,CAAC,WAAW,SAAS,UACvB;EAGF,aAAa,eAAe;EAC5B,aAAa,gBAAgB;EAE7B,MAAM,QAAqB;GACzB,SAAS,MAAM;GACf;GACA;GACA;GACA;GACA;GACA,YAAY;GACZ,eAAe;GACf;GACA,eAAe,MAAM,MAAM,KAAK,CAAC,CAAC,OAAO,qBAAqB;GAC9D,aAAa,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,qBAAqB;EAC5D;EAEA,UAAU,UAAU;EACpB,eAAe,KAAK;CACtB,GACA,CAAC,SAAS,IAAI,CAChB;CAEA,MAAM,aAAa,gBAAgB;CAEnC,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,MAAM,kBAAkB,SAAS,KAAK,MAAM;EAC5C,SAAS,KAAK,MAAM,aAAa;EAEjC,MAAM,qBAAqB,MAAoB;GAC7C,MAAM,QAAQ,UAAU;GACxB,IAAI,CAAC,OACH;GAGF,MAAM,gBAAgB,MAAM,UAAU,sBAAsB;GAC5D,MAAM,YAAY,EAAE,UAAU,cAAc;GAC5C,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,KAAM,YAAY,cAAc,SAAU,GAAG,CAAC;GACtF,MAAM,iBAAiB,aAAa,iBAAiB,UAAU,CAAC;GAEhE,IAAI,SAAS,MAAM;GACnB,IAAI,YAAY,MAAM;GAEtB,IAAI,MAAM,SAAS,UAAU;IAC3B,MAAM,aAAa,iBAAiB,MAAM,WAAW;IACrD,MAAM,gBAAgB,gBAAgB,aAAa,uBAAuB,IAAI;IAE9E,YAAY,KAAK,IAAI,GAAG,iBADL,KAAK,IAAI,gBAAgB,aACM,CAAC,IAAI,MAAM,WAAW;GAC1E,OAAO;IACL,MAAM,gBAAgB,iBAAiB,MAAM,cAAc,MAAM,cAAc;IAC/E,MAAM,kBAAkB,gBAAgB,gBAAgB,uBAAuB,MAAM;IAErF,SAAS,iBADiB,KAAK,IAAI,gBAAgB,eACT,CAAC;IAC3C,YAAY,KAAK,IAAI,GAAG,MAAM,cAAc,MAAM,iBAAiB,MAAM;GAC3E;GAEA,UAAU,UAAU;IAAE,GAAG;IAAO,YAAY;IAAQ,eAAe;GAAU;GAC7E,eAAe,UAAU,OAAO;EAClC;EAEA,MAAM,wBAAwB;GAC5B,MAAM,QAAQ,UAAU;GACxB,IAAI,OAEA;QAAA,MAAM,eAAe,MAAM,eAC3B,MAAM,kBAAkB,MAAM,gBAC9B;KACA,IAAI;KACJ,IAAI;KAEJ,IAAI,MAAM,SAAS,OAAO;MACxB,WAAW,kBAAkB,MAAM,YAAY,MAAM,SAAS;MAC9D,SAAS,MAAM;KACjB,OAAO;MACL,WAAW,MAAM;MACjB,SAAS,kBAAkB,MAAM,aAAa,MAAM,eAAe,MAAM,SAAS;KACpF;KAEA,oBAAoB;MAClB,SAAS,MAAM;MACf;MACA;MACA,OAAO,MAAM;KACf,CAAC;IACH;;GAEF,UAAU,UAAU;GACpB,eAAe,IAAI;GACnB,eAAe,UAAU;GACzB,4BAA4B;IAC1B,eAAe,UAAU;GAC3B,CAAC;EACH;EAEA,SAAS,iBAAiB,eAAe,iBAAiB;EAC1D,SAAS,iBAAiB,aAAa,eAAe;EAEtD,aAAa;GACX,SAAS,KAAK,MAAM,aAAa;GACjC,SAAS,oBAAoB,eAAe,iBAAiB;GAC7D,SAAS,oBAAoB,aAAa,eAAe;EAC3D;CACF,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,oBAAoB,aACvB,YAA6B;EAC5B,IAAI,CAAC,eAAe,YAAY,YAAY,SAC1C,OAAO;EAET,OAAO;GAAE,KAAK,YAAY;GAAY,QAAQ,YAAY;EAAc;CAC1E,GACA,CAAC,WAAW,CACd;CAEA,MAAM,mBAAmB,aACtB,UAA6B;EAC5B,IAAI,CAAC,WAAW,SAAS,YAAY,MAAM,YAAY,cACrD,OAAO;EAET,OAAO,iBAAiB,eAAe,KAAK,IAAI;CAClD,GACA;EAAC;EAAS;EAAM;CAAc,CAChC;CAEA,MAAM,cAAc,kBAAkB,eAAe,SAAS,CAAC,CAAC;CAEhE,OAAO;EACL;EACA;EACA,iBAAiB,aAAa,WAAW;EACzC;EACA;EACA;CACF;AACF"}

package/esm/hooks/use-horizontal-event-resize.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ import { getDayRelativePercent } from "../utils/get-day-relative-percent/get-day
 import dayjs from "dayjs";
 import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
 //#region packages/@mantine/schedule/src/hooks/use-horizontal-event-resize.ts
-function useHorizontalEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, onEventResize, canResizeEvent }) {
+function useHorizontalEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent }) {
 	const [resizeState, setResizeState] = useState(null);
 	const resizeRef = useRef(null);
 	const justResizedRef = useRef(false);
@@ -15,13 +15,17 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
 	const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;
 	const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;
 	const clampedInterval = clampIntervalMinutes(intervalMinutes);
+	const clampedResizeInterval = clampIntervalMinutes(resizeIntervalMinutes ?? intervalMinutes);
 	const literalRange = endMinutes - startMinutes;
 	const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;
-	const minWidthPercent = clampedInterval / totalMinutes * 100;
 	const clampAndSnap = useCallback((minutes) => {
-		const snapped = Math.round(minutes / clampedInterval) * clampedInterval;
-		return Math.max(0, Math.min(literalRange, snapped));
-	}, [literalRange, clampedInterval]);
+		const snapped = Math.round((startMinutes + minutes) / clampedResizeInterval) * clampedResizeInterval;
+		return Math.max(0, Math.min(literalRange, snapped - startMinutes));
+	}, [
+		literalRange,
+		clampedResizeInterval,
+		startMinutes
+	]);
 	const percentToDateTime = useCallback((percent, eventDate) => {
 		const minutes = percent / 100 * totalMinutes;
 		const snappedMinutes = clampAndSnap(minutes);
@@ -34,10 +38,17 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
 		startMinutes,
 		clampAndSnap
 	]);
-	const snapPercent = useCallback((percent) => {
-		const minutes = percent / 100 * totalMinutes;
-		return clampAndSnap(minutes) / totalMinutes * 100;
-	}, [totalMinutes, clampAndSnap]);
+	const snapEdgeMinutes = useCallback((minutes, direction) => {
+		const absolute = startMinutes + minutes;
+		const snapped = direction === "up" ? Math.ceil(absolute / clampedResizeInterval) * clampedResizeInterval : Math.floor(absolute / clampedResizeInterval) * clampedResizeInterval;
+		return Math.max(0, Math.min(literalRange, snapped - startMinutes));
+	}, [
+		literalRange,
+		clampedResizeInterval,
+		startMinutes
+	]);
+	const percentToMinutes = useCallback((percent) => percent / 100 * totalMinutes, [totalMinutes]);
+	const minutesToPercent = useCallback((minutes) => minutes / totalMinutes * 100, [totalMinutes]);
 	const handleResizeStart = useCallback(({ event, edge, container, originalLeft, originalWidth, eventDate, dayIndex = 0, dayCount = 1, pointerEvent }) => {
 		if (!enabled || mode === "static") return;
 		pointerEvent.preventDefault();
@@ -78,14 +89,18 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
 				dayIndex: state.dayIndex,
 				dayCount: state.dayCount
 			});
-			const snappedPercent = snapPercent(rawPercent);
+			const draggedMinutes = clampAndSnap(percentToMinutes(rawPercent));
 			let newLeft = state.originalLeft;
 			let newWidth = state.originalWidth;
-			if (state.edge === "end") newWidth = Math.max(minWidthPercent, snappedPercent - state.originalLeft);
-			else {
-				const originalRight = state.originalLeft + state.originalWidth;
-				newLeft = Math.min(snappedPercent, originalRight - minWidthPercent);
-				newWidth = originalRight - newLeft;
+			if (state.edge === "end") {
+				const leftMinutes = percentToMinutes(state.originalLeft);
+				const minEndMinutes = snapEdgeMinutes(leftMinutes + clampedResizeInterval, "up");
+				newWidth = Math.max(0, minutesToPercent(Math.max(draggedMinutes, minEndMinutes)) - state.originalLeft);
+			} else {
+				const rightMinutes = percentToMinutes(state.originalLeft + state.originalWidth);
+				const maxStartMinutes = snapEdgeMinutes(rightMinutes - clampedResizeInterval, "down");
+				newLeft = minutesToPercent(Math.min(draggedMinutes, maxStartMinutes));
+				newWidth = Math.max(0, state.originalLeft + state.originalWidth - newLeft);
 			}
 			resizeRef.current = {
 				...state,

package/esm/hooks/use-horizontal-event-resize.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-horizontal-event-resize.mjs","names":[],"sources":["../../src/hooks/use-horizontal-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { getDayRelativePercent } from '../utils/get-day-relative-percent/get-day-relative-percent';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'start' \| 'end';\n\ninterface ResizeState {\n eventId: string \| number;\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalLeft: number;\n originalWidth: number;\n currentLeft: number;\n currentWidth: number;\n eventDate: string;\n originalStart: DateTimeStringValue;\n originalEnd: DateTimeStringValue;\n dayIndex: number;\n dayCount: number;\n}\n\nexport interface UseHorizontalEventResizeInput {\n enabled?: boolean;\n mode?: ScheduleMode;\n startTime: string;\n endTime: string;\n intervalMinutes: number;\n onEventResize?: (data: {\n eventId: string \| number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useHorizontalEventResize({\n enabled = false,\n mode = 'default',\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n}: UseHorizontalEventResizeInput) {\n const [resizeState, setResizeState] = useState<ResizeState \| null>(null);\n const resizeRef = useRef<ResizeState \| null>(null);\n const justResizedRef = useRef(false);\n const stableOnEventResize = useEffectEvent(onEventResize \|\| (() => {}));\n\n const parsedStartTime = parseTimeString(startTime);\n const parsedEndTime = parseTimeString(endTime);\n const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n const clampedInterval = clampIntervalMinutes(intervalMinutes);\n const literalRange = endMinutes - startMinutes;\n const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n const minWidthPercent = (clampedInterval / totalMinutes) * 100;\n\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped = Math.round(minutes / clampedInterval) * clampedInterval;\n return Math.max(0, Math.min(literalRange, snapped));\n },\n [literalRange, clampedInterval]\n );\n\n const percentToDateTime = useCallback(\n (percent: number, eventDate: string): DateTimeStringValue => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n const totalMins = startMinutes + snappedMinutes;\n const hours = Math.floor(totalMins / 60);\n const mins = totalMins % 60;\n return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n },\n [totalMinutes, startMinutes, clampAndSnap]\n );\n\n const snapPercent = useCallback(\n (percent: number): number => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n return (snappedMinutes / totalMinutes) * 100;\n },\n [totalMinutes, clampAndSnap]\n );\n\n const handleResizeStart = useCallback(\n ({\n event,\n edge,\n container,\n originalLeft,\n originalWidth,\n eventDate,\n dayIndex = 0,\n dayCount = 1,\n pointerEvent,\n }: {\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalLeft: number;\n originalWidth: number;\n eventDate: string;\n dayIndex?: number;\n dayCount?: number;\n pointerEvent: React.PointerEvent;\n }) => {\n if (!enabled \|\| mode === 'static') {\n return;\n }\n\n pointerEvent.preventDefault();\n pointerEvent.stopPropagation();\n\n const state: ResizeState = {\n eventId: event.id,\n event,\n edge,\n container,\n originalLeft,\n originalWidth,\n currentLeft: originalLeft,\n currentWidth: originalWidth,\n eventDate,\n originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n dayIndex,\n dayCount,\n };\n\n resizeRef.current = state;\n setResizeState(state);\n },\n [enabled, mode]\n );\n\n const isResizing = resizeState !== null;\n\n useEffect(() => {\n if (!isResizing) {\n return undefined;\n }\n\n const savedUserSelect = document.body.style.userSelect;\n const savedCursor = document.body.style.cursor;\n document.body.style.userSelect = 'none';\n document.body.style.cursor = 'ew-resize';\n\n const handlePointerMove = (e: PointerEvent) => {\n const state = resizeRef.current;\n if (!state) {\n return;\n }\n\n const containerRect = state.container.getBoundingClientRect();\n const rawPercent = getDayRelativePercent({\n clientX: e.clientX,\n containerLeft: containerRect.left,\n containerWidth: containerRect.width,\n dayIndex: state.dayIndex,\n dayCount: state.dayCount,\n });\n const snappedPercent = snapPercent(rawPercent);\n\n let newLeft = state.originalLeft;\n let newWidth = state.originalWidth;\n\n if (state.edge === 'end') {\n newWidth = Math.max(minWidthPercent, snappedPercent - state.originalLeft);\n } else {\n const originalRight = state.originalLeft + state.originalWidth;\n newLeft = Math.min(snappedPercent, originalRight - minWidthPercent);\n newWidth = originalRight - newLeft;\n }\n\n resizeRef.current = { ...state, currentLeft: newLeft, currentWidth: newWidth };\n setResizeState(resizeRef.current);\n };\n\n const handlePointerUp = () => {\n const state = resizeRef.current;\n if (state) {\n if (\n state.currentLeft !== state.originalLeft \|\|\n state.currentWidth !== state.originalWidth\n ) {\n let newStart: DateTimeStringValue;\n let newEnd: DateTimeStringValue;\n\n if (state.edge === 'start') {\n newStart = percentToDateTime(state.currentLeft, state.eventDate);\n newEnd = state.originalEnd;\n } else {\n newStart = state.originalStart;\n newEnd = percentToDateTime(state.currentLeft + state.currentWidth, state.eventDate);\n }\n\n stableOnEventResize({\n eventId: state.eventId,\n newStart,\n newEnd,\n event: state.event,\n });\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n justResizedRef.current = true;\n requestAnimationFrame(() => {\n justResizedRef.current = false;\n });\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.body.style.userSelect = savedUserSelect;\n document.body.style.cursor = savedCursor;\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, [isResizing]);\n\n const getResizePosition = useCallback(\n (eventId: string \| number) => {\n if (!resizeState \|\| resizeState.eventId !== eventId) {\n return null;\n }\n return { left: resizeState.currentLeft, width: resizeState.currentWidth };\n },\n [resizeState]\n );\n\n const isResizableEvent = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled \|\| mode === 'static' \|\| event.display === 'background') {\n return false;\n }\n return canResizeEvent ? canResizeEvent(event) : true;\n },\n [enabled, mode, canResizeEvent]\n );\n\n const wasResizing = useCallback(() => justResizedRef.current, []);\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n resizingEdge: resizeState?.edge ?? null,\n getResizePosition,\n isResizableEvent,\n wasResizing,\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-horizontal-event-resize.mjs","names":[],"sources":["../../src/hooks/use-horizontal-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { getDayRelativePercent } from '../utils/get-day-relative-percent/get-day-relative-percent';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'start' \| 'end';\n\ninterface ResizeState {\n eventId: string \| number;\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalLeft: number;\n originalWidth: number;\n currentLeft: number;\n currentWidth: number;\n eventDate: string;\n originalStart: DateTimeStringValue;\n originalEnd: DateTimeStringValue;\n dayIndex: number;\n dayCount: number;\n}\n\nexport interface UseHorizontalEventResizeInput {\n enabled?: boolean;\n mode?: ScheduleMode;\n startTime: string;\n endTime: string;\n intervalMinutes: number;\n resizeIntervalMinutes?: number;\n onEventResize?: (data: {\n eventId: string \| number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useHorizontalEventResize({\n enabled = false,\n mode = 'default',\n startTime,\n endTime,\n intervalMinutes,\n resizeIntervalMinutes,\n onEventResize,\n canResizeEvent,\n}: UseHorizontalEventResizeInput) {\n const [resizeState, setResizeState] = useState<ResizeState \| null>(null);\n const resizeRef = useRef<ResizeState \| null>(null);\n const justResizedRef = useRef(false);\n const stableOnEventResize = useEffectEvent(onEventResize \|\| (() => {}));\n\n const parsedStartTime = parseTimeString(startTime);\n const parsedEndTime = parseTimeString(endTime);\n const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n const clampedInterval = clampIntervalMinutes(intervalMinutes);\n const clampedResizeInterval = clampIntervalMinutes(resizeIntervalMinutes ?? intervalMinutes);\n const literalRange = endMinutes - startMinutes;\n const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n\n // Snapped in absolute minutes from midnight so resized edges land on the same grid as\n // dragged events – see the matching comment in `use-event-resize`.\n const clampAndSnap = useCallback(\n (minutes: number): number => {\n const snapped =\n Math.round((startMinutes + minutes) / clampedResizeInterval) * clampedResizeInterval;\n return Math.max(0, Math.min(literalRange, snapped - startMinutes));\n },\n [literalRange, clampedResizeInterval, startMinutes]\n );\n\n const percentToDateTime = useCallback(\n (percent: number, eventDate: string): DateTimeStringValue => {\n const minutes = (percent / 100) * totalMinutes;\n const snappedMinutes = clampAndSnap(minutes);\n const totalMins = startMinutes + snappedMinutes;\n const hours = Math.floor(totalMins / 60);\n const mins = totalMins % 60;\n return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n },\n [totalMinutes, startMinutes, clampAndSnap]\n );\n\n const snapEdgeMinutes = useCallback(\n (minutes: number, direction: 'up' \| 'down'): number => {\n const absolute = startMinutes + minutes;\n const snapped =\n direction === 'up'\n ? Math.ceil(absolute / clampedResizeInterval) * clampedResizeInterval\n : Math.floor(absolute / clampedResizeInterval) * clampedResizeInterval;\n return Math.max(0, Math.min(literalRange, snapped - startMinutes));\n },\n [literalRange, clampedResizeInterval, startMinutes]\n );\n\n const percentToMinutes = useCallback(\n (percent: number): number => (percent / 100) * totalMinutes,\n [totalMinutes]\n );\n\n const minutesToPercent = useCallback(\n (minutes: number): number => (minutes / totalMinutes) * 100,\n [totalMinutes]\n );\n\n const handleResizeStart = useCallback(\n ({\n event,\n edge,\n container,\n originalLeft,\n originalWidth,\n eventDate,\n dayIndex = 0,\n dayCount = 1,\n pointerEvent,\n }: {\n event: ScheduleEventData;\n edge: ResizeEdge;\n container: HTMLElement;\n originalLeft: number;\n originalWidth: number;\n eventDate: string;\n dayIndex?: number;\n dayCount?: number;\n pointerEvent: React.PointerEvent;\n }) => {\n if (!enabled \|\| mode === 'static') {\n return;\n }\n\n pointerEvent.preventDefault();\n pointerEvent.stopPropagation();\n\n const state: ResizeState = {\n eventId: event.id,\n event,\n edge,\n container,\n originalLeft,\n originalWidth,\n currentLeft: originalLeft,\n currentWidth: originalWidth,\n eventDate,\n originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n dayIndex,\n dayCount,\n };\n\n resizeRef.current = state;\n setResizeState(state);\n },\n [enabled, mode]\n );\n\n const isResizing = resizeState !== null;\n\n useEffect(() => {\n if (!isResizing) {\n return undefined;\n }\n\n const savedUserSelect = document.body.style.userSelect;\n const savedCursor = document.body.style.cursor;\n document.body.style.userSelect = 'none';\n document.body.style.cursor = 'ew-resize';\n\n const handlePointerMove = (e: PointerEvent) => {\n const state = resizeRef.current;\n if (!state) {\n return;\n }\n\n const containerRect = state.container.getBoundingClientRect();\n const rawPercent = getDayRelativePercent({\n clientX: e.clientX,\n containerLeft: containerRect.left,\n containerWidth: containerRect.width,\n dayIndex: state.dayIndex,\n dayCount: state.dayCount,\n });\n const draggedMinutes = clampAndSnap(percentToMinutes(rawPercent));\n\n let newLeft = state.originalLeft;\n let newWidth = state.originalWidth;\n\n if (state.edge === 'end') {\n const leftMinutes = percentToMinutes(state.originalLeft);\n const minEndMinutes = snapEdgeMinutes(leftMinutes + clampedResizeInterval, 'up');\n const endMinutes = Math.max(draggedMinutes, minEndMinutes);\n newWidth = Math.max(0, minutesToPercent(endMinutes) - state.originalLeft);\n } else {\n const rightMinutes = percentToMinutes(state.originalLeft + state.originalWidth);\n const maxStartMinutes = snapEdgeMinutes(rightMinutes - clampedResizeInterval, 'down');\n const startMinutesValue = Math.min(draggedMinutes, maxStartMinutes);\n newLeft = minutesToPercent(startMinutesValue);\n newWidth = Math.max(0, state.originalLeft + state.originalWidth - newLeft);\n }\n\n resizeRef.current = { ...state, currentLeft: newLeft, currentWidth: newWidth };\n setResizeState(resizeRef.current);\n };\n\n const handlePointerUp = () => {\n const state = resizeRef.current;\n if (state) {\n if (\n state.currentLeft !== state.originalLeft \|\|\n state.currentWidth !== state.originalWidth\n ) {\n let newStart: DateTimeStringValue;\n let newEnd: DateTimeStringValue;\n\n if (state.edge === 'start') {\n newStart = percentToDateTime(state.currentLeft, state.eventDate);\n newEnd = state.originalEnd;\n } else {\n newStart = state.originalStart;\n newEnd = percentToDateTime(state.currentLeft + state.currentWidth, state.eventDate);\n }\n\n stableOnEventResize({\n eventId: state.eventId,\n newStart,\n newEnd,\n event: state.event,\n });\n }\n }\n resizeRef.current = null;\n setResizeState(null);\n justResizedRef.current = true;\n requestAnimationFrame(() => {\n justResizedRef.current = false;\n });\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.body.style.userSelect = savedUserSelect;\n document.body.style.cursor = savedCursor;\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, [isResizing]);\n\n const getResizePosition = useCallback(\n (eventId: string \| number) => {\n if (!resizeState \|\| resizeState.eventId !== eventId) {\n return null;\n }\n return { left: resizeState.currentLeft, width: resizeState.currentWidth };\n },\n [resizeState]\n );\n\n const isResizableEvent = useCallback(\n (event: ScheduleEventData) => {\n if (!enabled \|\| mode === 'static' \|\| event.display === 'background') {\n return false;\n }\n return canResizeEvent ? canResizeEvent(event) : true;\n },\n [enabled, mode, canResizeEvent]\n );\n\n const wasResizing = useCallback(() => justResizedRef.current, []);\n\n return {\n handleResizeStart,\n isResizing,\n resizingEventId: resizeState?.eventId ?? null,\n resizingEdge: resizeState?.edge ?? null,\n getResizePosition,\n isResizableEvent,\n wasResizing,\n };\n}\n"],"mappings":"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"}

package/esm/index.mjs CHANGED Viewed

@@ -46,6 +46,7 @@ import { CurrentTimeIndicator } from "./components/CurrentTimeIndicator/CurrentT
 import { DragContext } from "./components/DragContext/DragContext.mjs";
 import { ScheduleEvent } from "./components/ScheduleEvent/ScheduleEvent.mjs";
 import { MoreEvents } from "./components/MoreEvents/MoreEvents.mjs";
+import { ScheduleBackgroundEvent } from "./components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs";
 import { ScheduleHeader } from "./components/ScheduleHeader/ScheduleHeader.mjs";
 import { DayView } from "./components/DayView/DayView.mjs";
 import { MobileMonthView } from "./components/MobileMonthView/MobileMonthView.mjs";
@@ -57,4 +58,4 @@ import { ResourcesDayView } from "./components/ResourcesDayView/ResourcesDayView
 import { ResourcesWeekView } from "./components/ResourcesWeekView/ResourcesWeekView.mjs";
 import { ResourcesMonthView } from "./components/ResourcesMonthView/ResourcesMonthView.mjs";
 import { ResourcesSchedule } from "./components/ResourcesSchedule/ResourcesSchedule.mjs";
-export { AgendaView, CurrentTimeIndicator, DEFAULT_SCHEDULE_LABELS, DayView, DragContext, MobileMonthView, MonthView, MoreEvents, ResourcesDayView, ResourcesMonthView, ResourcesSchedule, ResourcesWeekView, Schedule, ScheduleEvent, ScheduleHeader, WeekView, YearView, calculateDropTime, calculateMonthDropDate, clampIntervalMinutes, expandRecurringEvents, formatDate, getBusinessHoursMod, getCurrentTimePosition, getDayPosition, getDayRelativePercent, getDayTimeIntervals, getEndOfWeek, getGroupToResourceIdMap, getIndexFromDragPoint, getLabel, getMonthDays, getMonthRange, getMonthsByQuarter, getMonthsList, getOrderedResources, getStartOfWeek, getTimeAxisEventStyle, getVisibleEvents, getWeekDays, getWeekNumber, getWeekdaysNames, getYearsList, handleResourcesGridKeyDown, isAfterMinDate, isAllDayEvent, isBeforeMaxDate, isEventInTimeRange, isEventsOverlap, isInTimeRange, isMultidayEvent, isSameMonth, isWithinWeek, nextWeek, parseTimeString, previousWeek, sortEvents, toDateString, toTimeString, validateEvent };
+export { AgendaView, CurrentTimeIndicator, DEFAULT_SCHEDULE_LABELS, DayView, DragContext, MobileMonthView, MonthView, MoreEvents, ResourcesDayView, ResourcesMonthView, ResourcesSchedule, ResourcesWeekView, Schedule, ScheduleBackgroundEvent, ScheduleEvent, ScheduleHeader, WeekView, YearView, calculateDropTime, calculateMonthDropDate, clampIntervalMinutes, expandRecurringEvents, formatDate, getBusinessHoursMod, getCurrentTimePosition, getDayPosition, getDayRelativePercent, getDayTimeIntervals, getEndOfWeek, getGroupToResourceIdMap, getIndexFromDragPoint, getLabel, getMonthDays, getMonthRange, getMonthsByQuarter, getMonthsList, getOrderedResources, getStartOfWeek, getTimeAxisEventStyle, getVisibleEvents, getWeekDays, getWeekNumber, getWeekdaysNames, getYearsList, handleResourcesGridKeyDown, isAfterMinDate, isAllDayEvent, isBeforeMaxDate, isEventInTimeRange, isEventsOverlap, isInTimeRange, isMultidayEvent, isSameMonth, isWithinWeek, nextWeek, parseTimeString, previousWeek, sortEvents, toDateString, toTimeString, validateEvent };

package/esm/utils/calculate-drop-time/calculate-drop-time.mjs CHANGED Viewed

@@ -1,14 +1,35 @@
 "use client";
+import { clampIntervalMinutes } from "../clamp-interval-minutes/clamp-interval-minutes.mjs";
 import { parseTimeString } from "../parse-time-string/parse-time-string.mjs";
 import dayjs from "dayjs";
 //#region packages/@mantine/schedule/src/utils/calculate-drop-time/calculate-drop-time.ts
-function calculateDropTime({ draggedEvent, targetDate, targetSlotTime, mouseYOffset = 0, slotHeight = 64, intervalMinutes = 15 }) {
+function calculateDropTime({ draggedEvent, targetDate, targetSlotTime, mouseYOffset = 0, slotHeight = 64, intervalMinutes = 15, slotOffset, slotSize, dragIntervalMinutes, startTime, endTime }) {
 	const eventDuration = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), "millisecond");
 	const parsedTime = parseTimeString(targetSlotTime);
-	const baseTargetTime = dayjs(targetDate).startOf("day").hour(parsedTime.hours).minute(parsedTime.minutes).second(0);
+	const targetDay = dayjs(targetDate).startOf("day");
+	const baseTargetTime = targetDay.hour(parsedTime.hours).minute(parsedTime.minutes).second(0);
 	let finalTargetTime = baseTargetTime;
-	if (mouseYOffset > 0 && slotHeight > 0) {
-		const offsetRatio = mouseYOffset / slotHeight;
+	const offset = slotOffset ?? mouseYOffset;
+	const size = slotSize ?? slotHeight;
+	if (dragIntervalMinutes != null) {
+		const clampedDrag = clampIntervalMinutes(dragIntervalMinutes);
+		const gridInterval = clampIntervalMinutes(intervalMinutes);
+		const rawStartMinutes = parsedTime.hours * 60 + parsedTime.minutes + (size > 0 ? offset / size : 0) * gridInterval;
+		let snappedStartMinutes = Math.round(rawStartMinutes / clampedDrag) * clampedDrag;
+		const parsedEnd = endTime ? parseTimeString(endTime) : null;
+		const parsedStart = startTime ? parseTimeString(startTime) : null;
+		const maxStart = parsedEnd ? Math.floor((parsedEnd.hours * 60 + parsedEnd.minutes - 1) / clampedDrag) * clampedDrag : null;
+		const minStart = parsedStart ? Math.ceil((parsedStart.hours * 60 + parsedStart.minutes) / clampedDrag) * clampedDrag : null;
+		if (minStart !== null && maxStart !== null && minStart > maxStart) snappedStartMinutes = parsedStart.hours * 60 + parsedStart.minutes;
+		else {
+			if (maxStart !== null) snappedStartMinutes = Math.min(snappedStartMinutes, maxStart);
+			if (minStart !== null) snappedStartMinutes = Math.max(snappedStartMinutes, minStart);
+		}
+		const dayOffset = Math.floor(snappedStartMinutes / 1440);
+		const minutesInDay = snappedStartMinutes - dayOffset * 1440;
+		finalTargetTime = targetDay.add(dayOffset, "day").hour(Math.floor(minutesInDay / 60)).minute(minutesInDay % 60).second(0);
+	} else if (offset > 0 && size > 0) {
+		const offsetRatio = offset / size;
 		const offsetMinutes = Math.round(offsetRatio * intervalMinutes);
 		finalTargetTime = baseTargetTime.add(offsetMinutes, "minute");
 	}

package/esm/utils/calculate-drop-time/calculate-drop-time.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calculate-drop-time.mjs","names":[],"sources":["../../../src/utils/calculate-drop-time/calculate-drop-time.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, ScheduleEventData } from '../../types';\nimport { parseTimeString } from '../parse-time-string/parse-time-string';\n\nexport interface CalculateDropTimeInput {\n /** The event being dragged /\n draggedEvent: ScheduleEventData;\n\n /* Target date where event will be dropped /\n targetDate: AnyDateValue;\n\n /* Target time slot start time in HH:mm:ss format /\n targetSlotTime: string;\n\n /* Mouse Y position relative to the slot /\n mouseYOffset?: number;\n\n /* Height of one slot in pixels /\n slotHeight?: number;\n\n /* Minutes per slot /\n intervalMinutes?: number;\n}\n\nexport interface CalculateDropTimeResult {\n /* New start date/time for the event /\n start: Date;\n\n /* New end date/time for the event /\n end: Date;\n}\n\nexport function calculateDropTime({\n draggedEvent,\n targetDate,\n targetSlotTime,\n mouseYOffset = 0,\n slotHeight = 64,\n intervalMinutes = 15,\n}: CalculateDropTimeInput): CalculateDropTimeResult {\n const eventDuration = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), 'millisecond');\n\n const parsedTime = parseTimeString(targetSlotTime);\n const targetDay = dayjs(targetDate).startOf('day');\n\n const baseTargetTime = targetDay.hour(parsedTime.hours).minute(parsedTime.minutes).second(0);\n\n let finalTargetTime = baseTargetTime;\n\n if (~~mouseYOffset~~ > 0 && ~~slotHeight~~ > 0) {\n const offsetRatio = ~~mouseYOffset~~ / ~~slotHeight~~;\n const offsetMinutes = Math.round(offsetRatio intervalMinutes);\n finalTargetTime = baseTargetTime.add(offsetMinutes, 'minute');\n }\n\n const newStart = finalTargetTime.toDate();\n const newEnd = finalTargetTime.add(eventDuration, 'millisecond').toDate();\n\n return {\n start: newStart,\n end: newEnd,\n };\n}\n"],"mappings":"~~;;;;AAgCA~~,SAAgB,kBAAkB,EAChC,cACA,YACA,gBACA,eAAe,GACf,aAAa,IACb,kBAAkB,~~MACgC~~;CAClD,MAAM,gBAAgB,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,MAAM,aAAa,KAAK,GAAG,aAAa;CAE3F,MAAM,aAAa,gBAAgB,cAAc;~~CAGjD~~,MAAM,~~iBAFY~~,MAAM,UAAU,CAAC,CAAC,QAAQ,~~KAEb~~,~~CAAC~~,~~CAAC~~,KAAK,WAAW,KAAK,CAAC,CAAC,OAAO,WAAW,OAAO,CAAC,CAAC,OAAO,CAAC;CAE3F,IAAI,kBAAkB;CAEtB,IAAI,eAAe,KAAK,aAAa,GAAG;~~EACtC~~,MAAM,cAAc,~~eAAe~~;~~EACnC~~,MAAM,gBAAgB,KAAK,MAAM,cAAc,eAAe;EAC9D,kBAAkB,eAAe,IAAI,eAAe,QAAQ;CAC9D;CAKA,OAAO;EACL,OAJe,gBAAgB,OAIjB;EACd,KAJa,gBAAgB,IAAI,eAAe,aAAa,CAAC,CAAC,OAIrD;CACZ;AACF"}
1	+ {"version":3,"file":"calculate-drop-time.mjs","names":[],"sources":["../../../src/utils/calculate-drop-time/calculate-drop-time.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, ScheduleEventData } from '../../types';\nimport { clampIntervalMinutes } from '../clamp-interval-minutes/clamp-interval-minutes';\nimport { parseTimeString } from '../parse-time-string/parse-time-string';\n\nexport interface CalculateDropTimeInput {\n /** The event being dragged /\n draggedEvent: ScheduleEventData;\n\n /* Target date where event will be dropped /\n targetDate: AnyDateValue;\n\n /* Target time slot start time in HH:mm:ss format /\n targetSlotTime: string;\n\n /* Mouse Y position relative to the slot /\n mouseYOffset?: number;\n\n /* Height of one slot in pixels /\n slotHeight?: number;\n\n /* Minutes per slot /\n intervalMinutes?: number;\n\n /* Pointer offset along the time axis within the target slot, in px. Axis-agnostic alias for `mouseYOffset`; when both are set, `slotOffset` wins. /\n slotOffset?: number;\n\n /* Size of the target slot along the time axis, in px. Axis-agnostic alias for `slotHeight`; when both are set, `slotSize` wins. /\n slotSize?: number;\n\n /* Snap step for the resulting start time, in minutes. When set, the start snaps to this interval (absolute, from the day boundary) instead of the slot start. /\n dragIntervalMinutes?: number;\n\n /* Start time boundary of the schedule in HH:mm:ss format. When set together with `dragIntervalMinutes`, the snapped start is clamped to stay within the displayed range (the event may still extend past `endTime`, matching how overflowing events are clipped). /\n startTime?: string;\n\n /* End time boundary of the schedule in HH:mm:ss format. When set together with `dragIntervalMinutes`, the snapped start is clamped to stay within the displayed range (the event may still extend past `endTime`, matching how overflowing events are clipped). /\n endTime?: string;\n}\n\nexport interface CalculateDropTimeResult {\n /* New start date/time for the event /\n start: Date;\n\n /* New end date/time for the event /\n end: Date;\n}\n\nexport function calculateDropTime({\n draggedEvent,\n targetDate,\n targetSlotTime,\n mouseYOffset = 0,\n slotHeight = 64,\n intervalMinutes = 15,\n slotOffset,\n slotSize,\n dragIntervalMinutes,\n startTime,\n endTime,\n}: CalculateDropTimeInput): CalculateDropTimeResult {\n const eventDuration = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), 'millisecond');\n\n const parsedTime = parseTimeString(targetSlotTime);\n const targetDay = dayjs(targetDate).startOf('day');\n\n const baseTargetTime = targetDay.hour(parsedTime.hours).minute(parsedTime.minutes).second(0);\n\n let finalTargetTime = baseTargetTime;\n\n const offset = slotOffset ?? mouseYOffset;\n const size = slotSize ?? slotHeight;\n\n if (dragIntervalMinutes != null) {\n const clampedDrag = clampIntervalMinutes(dragIntervalMinutes);\n const gridInterval = clampIntervalMinutes(intervalMinutes);\n const slotStartMinutes = parsedTime.hours 60 + parsedTime.minutes;\n const offsetRatio = size > 0 ? offset / size : 0;\n const rawStartMinutes = slotStartMinutes + offsetRatio * gridInterval;\n let snappedStartMinutes = Math.round(rawStartMinutes / clampedDrag) * clampedDrag;\n\n const parsedEnd = endTime ? parseTimeString(endTime) : null;\n const parsedStart = startTime ? parseTimeString(startTime) : null;\n const maxStart = parsedEnd\n ? Math.floor((parsedEnd.hours * 60 + parsedEnd.minutes - 1) / clampedDrag) * clampedDrag\n : null;\n const minStart = parsedStart\n ? Math.ceil((parsedStart.hours * 60 + parsedStart.minutes) / clampedDrag) * clampedDrag\n : null;\n\n if (minStart !== null && maxStart !== null && minStart > maxStart) {\n // The snap grid is coarser than the displayed range, so no snapped start falls\n // inside it – the start of the range is the only sensible drop target.\n snappedStartMinutes = parsedStart!.hours * 60 + parsedStart!.minutes;\n } else {\n if (maxStart !== null) {\n snappedStartMinutes = Math.min(snappedStartMinutes, maxStart);\n }\n if (minStart !== null) {\n snappedStartMinutes = Math.max(snappedStartMinutes, minStart);\n }\n }\n\n const dayOffset = Math.floor(snappedStartMinutes / 1440);\n const minutesInDay = snappedStartMinutes - dayOffset * 1440;\n\n // Built from wall clock fields rather than by adding minutes to the start of the day.\n // On a DST transition a day is 23 or 25 hours long, so `startOf('day').add(180, 'minute')`\n // lands on 04:00 (spring forward) or 01:00 (fall back) instead of the 03:00/02:00 slot the\n // user dropped on. Not covered by tests: the process timezone cannot be changed from\n // inside a test, so any assertion here would pass in every zone regardless.\n finalTargetTime = targetDay\n .add(dayOffset, 'day')\n .hour(Math.floor(minutesInDay / 60))\n .minute(minutesInDay % 60)\n .second(0);\n } else if (offset > 0 && size > 0) {\n const offsetRatio = offset / size;\n const offsetMinutes = Math.round(offsetRatio * intervalMinutes);\n finalTargetTime = baseTargetTime.add(offsetMinutes, 'minute');\n }\n\n const newStart = finalTargetTime.toDate();\n const newEnd = finalTargetTime.add(eventDuration, 'millisecond').toDate();\n\n return {\n start: newStart,\n end: newEnd,\n };\n}\n"],"mappings":";;;;;AAgDA,SAAgB,kBAAkB,EAChC,cACA,YACA,gBACA,eAAe,GACf,aAAa,IACb,kBAAkB,IAClB,YACA,UACA,qBACA,WACA,WACkD;CAClD,MAAM,gBAAgB,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,MAAM,aAAa,KAAK,GAAG,aAAa;CAE3F,MAAM,aAAa,gBAAgB,cAAc;CACjD,MAAM,YAAY,MAAM,UAAU,CAAC,CAAC,QAAQ,KAAK;CAEjD,MAAM,iBAAiB,UAAU,KAAK,WAAW,KAAK,CAAC,CAAC,OAAO,WAAW,OAAO,CAAC,CAAC,OAAO,CAAC;CAE3F,IAAI,kBAAkB;CAEtB,MAAM,SAAS,cAAc;CAC7B,MAAM,OAAO,YAAY;CAEzB,IAAI,uBAAuB,MAAM;EAC/B,MAAM,cAAc,qBAAqB,mBAAmB;EAC5D,MAAM,eAAe,qBAAqB,eAAe;EAGzD,MAAM,kBAFmB,WAAW,QAAQ,KAAK,WAAW,WACxC,OAAO,IAAI,SAAS,OAAO,KACU;EACzD,IAAI,sBAAsB,KAAK,MAAM,kBAAkB,WAAW,IAAI;EAEtE,MAAM,YAAY,UAAU,gBAAgB,OAAO,IAAI;EACvD,MAAM,cAAc,YAAY,gBAAgB,SAAS,IAAI;EAC7D,MAAM,WAAW,YACb,KAAK,OAAO,UAAU,QAAQ,KAAK,UAAU,UAAU,KAAK,WAAW,IAAI,cAC3E;EACJ,MAAM,WAAW,cACb,KAAK,MAAM,YAAY,QAAQ,KAAK,YAAY,WAAW,WAAW,IAAI,cAC1E;EAEJ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW,UAGvD,sBAAsB,YAAa,QAAQ,KAAK,YAAa;OACxD;GACL,IAAI,aAAa,MACf,sBAAsB,KAAK,IAAI,qBAAqB,QAAQ;GAE9D,IAAI,aAAa,MACf,sBAAsB,KAAK,IAAI,qBAAqB,QAAQ;EAEhE;EAEA,MAAM,YAAY,KAAK,MAAM,sBAAsB,IAAI;EACvD,MAAM,eAAe,sBAAsB,YAAY;EAOvD,kBAAkB,UACf,IAAI,WAAW,KAAK,CAAC,CACrB,KAAK,KAAK,MAAM,eAAe,EAAE,CAAC,CAAC,CACnC,OAAO,eAAe,EAAE,CAAC,CACzB,OAAO,CAAC;CACb,OAAO,IAAI,SAAS,KAAK,OAAO,GAAG;EACjC,MAAM,cAAc,SAAS;EAC7B,MAAM,gBAAgB,KAAK,MAAM,cAAc,eAAe;EAC9D,kBAAkB,eAAe,IAAI,eAAe,QAAQ;CAC9D;CAKA,OAAO;EACL,OAJe,gBAAgB,OAIjB;EACd,KAJa,gBAAgB,IAAI,eAAe,aAAa,CAAC,CAAC,OAIrD;CACZ;AACF"}

package/esm/utils/get-month-days/get-month-days.mjs CHANGED Viewed

@@ -4,9 +4,11 @@ import { getEndOfWeek } from "../get-end-of-week/get-end-of-week.mjs";
 import dayjs from "dayjs";
 //#region packages/@mantine/schedule/src/utils/get-month-days/get-month-days.ts
 function getMonthDays({ month, firstDayOfWeek = 1, consistentWeeks }) {
-	const start = dayjs(dayjs(month).subtract(dayjs(month).date() - 1, "day").format("YYYY-MM-DD"));
+	const day = dayjs(month).subtract(dayjs(month).date() - 1, "day");
+	const start = dayjs(day.format("YYYY-MM-DD"));
 	const startOfMonth = start.format("YYYY-MM-DD");
-	const endDate = getEndOfWeek(start.add(+start.daysInMonth() - 1, "day").format("YYYY-MM-DD"), firstDayOfWeek);
+	const endOfMonth = start.add(+start.daysInMonth() - 1, "day").format("YYYY-MM-DD");
+	const endDate = getEndOfWeek(endOfMonth, firstDayOfWeek);
 	const weeks = [];
 	let date = dayjs(getStartOfWeek({
 		date: startOfMonth,

package/esm/utils/get-month-days/get-month-days.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"get-month-days.mjs","names":[],"sources":["../../../src/utils/get-month-days/get-month-days.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, DayOfWeek } from '../../types';\nimport { getEndOfWeek } from '../get-end-of-week/get-end-of-week';\nimport { getStartOfWeek } from '../get-start-of-week/get-start-of-week';\n\ninterface GetMonthDaysInput {\n month: AnyDateValue;\n firstDayOfWeek: DayOfWeek \| undefined;\n consistentWeeks: boolean \| undefined;\n}\n\nexport function getMonthDays({\n month,\n firstDayOfWeek = 1,\n consistentWeeks,\n}: GetMonthDaysInput): DateStringValue[][] {\n const day = dayjs(month).subtract(dayjs(month).date() - 1, 'day');\n const start = dayjs(day.format('YYYY-MM-DD'));\n const startOfMonth = start.format('YYYY-MM-DD');\n const endOfMonth = start.add(+start.daysInMonth() - 1, 'day').format('YYYY-MM-DD');\n const endDate = getEndOfWeek(endOfMonth, firstDayOfWeek);\n const weeks: DateStringValue[][] = [];\n\n let date = dayjs(getStartOfWeek({ date: startOfMonth, firstDayOfWeek }));\n\n while (dayjs(date).isBefore(endDate, 'day')) {\n const days: DateStringValue[] = [];\n\n for (let i = 0; i < 7; i += 1) {\n days.push(date.format('YYYY-MM-DD 00:00:00'));\n date = date.add(1, 'day');\n }\n\n weeks.push(days);\n }\n\n if (consistentWeeks && weeks.length < 6) {\n const lastWeek = weeks[weeks.length - 1];\n const lastDay = lastWeek[lastWeek.length - 1];\n let nextDay = dayjs(lastDay).add(1, 'day');\n\n while (weeks.length < 6) {\n const days: DateStringValue[] = [];\n\n for (let i = 0; i < 7; i += 1) {\n days.push(nextDay.format('YYYY-MM-DD 00:00:00'));\n nextDay = nextDay.add(1, 'day');\n }\n\n weeks.push(days);\n }\n }\n\n return weeks;\n}\n"],"mappings":";;;;;AAWA,SAAgB,aAAa,EAC3B,OACA,iBAAiB,GACjB,mBACyC;~~CAEzC~~,MAAM,~~QAAQ~~,~~MADF,~~MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,CAAC,KAAK,IAAI,GAAG,~~KACrC~~,~~CAAC~~,~~CAAC~~,OAAO,YAAY,CAAC;CAC5C,MAAM,eAAe,MAAM,OAAO,YAAY;~~CAE9C~~,MAAM,~~UAAU~~,~~aADG,~~MAAM,IAAI,CAAC,MAAM,YAAY,IAAI,GAAG,KAAK,CAAC,CAAC,OAAO,~~YAC/B~~,~~GAAG~~,cAAc;CACvD,MAAM,QAA6B,CAAC;CAEpC,IAAI,OAAO,MAAM,eAAe;EAAE,MAAM;EAAc;CAAe,CAAC,CAAC;CAEvE,OAAO,MAAM,IAAI,CAAC,CAAC,SAAS,SAAS,KAAK,GAAG;EAC3C,MAAM,OAA0B,CAAC;EAEjC,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG;GAC7B,KAAK,KAAK,KAAK,OAAO,qBAAqB,CAAC;GAC5C,OAAO,KAAK,IAAI,GAAG,KAAK;EAC1B;EAEA,MAAM,KAAK,IAAI;CACjB;CAEA,IAAI,mBAAmB,MAAM,SAAS,GAAG;EACvC,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,UAAU,SAAS,SAAS,SAAS;EAC3C,IAAI,UAAU,MAAM,OAAO,CAAC,CAAC,IAAI,GAAG,KAAK;EAEzC,OAAO,MAAM,SAAS,GAAG;GACvB,MAAM,OAA0B,CAAC;GAEjC,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG;IAC7B,KAAK,KAAK,QAAQ,OAAO,qBAAqB,CAAC;IAC/C,UAAU,QAAQ,IAAI,GAAG,KAAK;GAChC;GAEA,MAAM,KAAK,IAAI;EACjB;CACF;CAEA,OAAO;AACT"}
1	+ {"version":3,"file":"get-month-days.mjs","names":[],"sources":["../../../src/utils/get-month-days/get-month-days.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, DayOfWeek } from '../../types';\nimport { getEndOfWeek } from '../get-end-of-week/get-end-of-week';\nimport { getStartOfWeek } from '../get-start-of-week/get-start-of-week';\n\ninterface GetMonthDaysInput {\n month: AnyDateValue;\n firstDayOfWeek: DayOfWeek \| undefined;\n consistentWeeks: boolean \| undefined;\n}\n\nexport function getMonthDays({\n month,\n firstDayOfWeek = 1,\n consistentWeeks,\n}: GetMonthDaysInput): DateStringValue[][] {\n const day = dayjs(month).subtract(dayjs(month).date() - 1, 'day');\n const start = dayjs(day.format('YYYY-MM-DD'));\n const startOfMonth = start.format('YYYY-MM-DD');\n const endOfMonth = start.add(+start.daysInMonth() - 1, 'day').format('YYYY-MM-DD');\n const endDate = getEndOfWeek(endOfMonth, firstDayOfWeek);\n const weeks: DateStringValue[][] = [];\n\n let date = dayjs(getStartOfWeek({ date: startOfMonth, firstDayOfWeek }));\n\n while (dayjs(date).isBefore(endDate, 'day')) {\n const days: DateStringValue[] = [];\n\n for (let i = 0; i < 7; i += 1) {\n days.push(date.format('YYYY-MM-DD 00:00:00'));\n date = date.add(1, 'day');\n }\n\n weeks.push(days);\n }\n\n if (consistentWeeks && weeks.length < 6) {\n const lastWeek = weeks[weeks.length - 1];\n const lastDay = lastWeek[lastWeek.length - 1];\n let nextDay = dayjs(lastDay).add(1, 'day');\n\n while (weeks.length < 6) {\n const days: DateStringValue[] = [];\n\n for (let i = 0; i < 7; i += 1) {\n days.push(nextDay.format('YYYY-MM-DD 00:00:00'));\n nextDay = nextDay.add(1, 'day');\n }\n\n weeks.push(days);\n }\n }\n\n return weeks;\n}\n"],"mappings":";;;;;AAWA,SAAgB,aAAa,EAC3B,OACA,iBAAiB,GACjB,mBACyC;CACzC,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,CAAC,KAAK,IAAI,GAAG,KAAK;CAChE,MAAM,QAAQ,MAAM,IAAI,OAAO,YAAY,CAAC;CAC5C,MAAM,eAAe,MAAM,OAAO,YAAY;CAC9C,MAAM,aAAa,MAAM,IAAI,CAAC,MAAM,YAAY,IAAI,GAAG,KAAK,CAAC,CAAC,OAAO,YAAY;CACjF,MAAM,UAAU,aAAa,YAAY,cAAc;CACvD,MAAM,QAA6B,CAAC;CAEpC,IAAI,OAAO,MAAM,eAAe;EAAE,MAAM;EAAc;CAAe,CAAC,CAAC;CAEvE,OAAO,MAAM,IAAI,CAAC,CAAC,SAAS,SAAS,KAAK,GAAG;EAC3C,MAAM,OAA0B,CAAC;EAEjC,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG;GAC7B,KAAK,KAAK,KAAK,OAAO,qBAAqB,CAAC;GAC5C,OAAO,KAAK,IAAI,GAAG,KAAK;EAC1B;EAEA,MAAM,KAAK,IAAI;CACjB;CAEA,IAAI,mBAAmB,MAAM,SAAS,GAAG;EACvC,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,UAAU,SAAS,SAAS,SAAS;EAC3C,IAAI,UAAU,MAAM,OAAO,CAAC,CAAC,IAAI,GAAG,KAAK;EAEzC,OAAO,MAAM,SAAS,GAAG;GACvB,MAAM,OAA0B,CAAC;GAEjC,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG;IAC7B,KAAK,KAAK,QAAQ,OAAO,qBAAqB,CAAC;IAC/C,UAAU,QAAQ,IAAI,GAAG,KAAK;GAChC;GAEA,MAAM,KAAK,IAAI;EACjB;CACF;CAEA,OAAO;AACT"}

package/esm/utils/get-week-number/get-week-number.mjs CHANGED Viewed

@@ -4,7 +4,10 @@ import isoWeek from "dayjs/plugin/isoWeek.js";
 //#region packages/@mantine/schedule/src/utils/get-week-number/get-week-number.ts
 dayjs.extend(isoWeek);
 function getWeekNumber(week) {
-	if (Array.isArray(week)) return dayjs(week.find((date) => dayjs(date).day() === 1)).isoWeek();
+	if (Array.isArray(week)) {
+		const monday = week.find((date) => dayjs(date).day() === 1);
+		return dayjs(monday).isoWeek();
+	}
 	return dayjs(week).isoWeek();
 }
 //#endregion

package/esm/utils/get-week-number/get-week-number.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"get-week-number.mjs","names":[],"sources":["../../../src/utils/get-week-number/get-week-number.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport isoWeek from 'dayjs/plugin/isoWeek.js';\nimport { AnyDateValue } from '../../types';\n\ndayjs.extend(isoWeek);\n\nexport function getWeekNumber(week: AnyDateValue \| AnyDateValue[]): number {\n if (Array.isArray(week)) {\n const monday = week.find((date) => dayjs(date).day() === 1);\n return dayjs(monday).isoWeek();\n }\n\n return dayjs(week).isoWeek();\n}\n"],"mappings":";;;;AAIA,MAAM,OAAO,OAAO;AAEpB,SAAgB,cAAc,MAA6C;CACzE,IAAI,MAAM,QAAQ,IAAI,~~GAEpB~~,~~OAAO~~,~~MADQ~~,KAAK,MAAM,SAAS,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,~~CACvC,~~CAAC,CAAC,CAAC,QAAQ;~~CAG~~/B,OAAO,MAAM,IAAI,CAAC,CAAC,QAAQ;AAC7B"}
1	+ {"version":3,"file":"get-week-number.mjs","names":[],"sources":["../../../src/utils/get-week-number/get-week-number.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport isoWeek from 'dayjs/plugin/isoWeek.js';\nimport { AnyDateValue } from '../../types';\n\ndayjs.extend(isoWeek);\n\nexport function getWeekNumber(week: AnyDateValue \| AnyDateValue[]): number {\n if (Array.isArray(week)) {\n const monday = week.find((date) => dayjs(date).day() === 1);\n return dayjs(monday).isoWeek();\n }\n\n return dayjs(week).isoWeek();\n}\n"],"mappings":";;;;AAIA,MAAM,OAAO,OAAO;AAEpB,SAAgB,cAAc,MAA6C;CACzE,IAAI,MAAM,QAAQ,IAAI,GAAG;EACvB,MAAM,SAAS,KAAK,MAAM,SAAS,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC;EAC1D,OAAO,MAAM,MAAM,CAAC,CAAC,QAAQ;CAC/B;CAEA,OAAO,MAAM,IAAI,CAAC,CAAC,QAAQ;AAC7B"}

package/lib/components/DayView/DayView.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import { RenderEvent, RenderEventBody, ScheduleEventStylesNames } from '../Sched
 import { MonthYearSelectStylesNames } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
 import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
-export type DayViewStylesNames = 'dayView' | 'dayViewInner' | 'dayViewScrollArea' | 'dayViewAllDay' | 'dayViewAllDayEvents' | 'dayViewSlot' | 'dayViewSlots' | 'dayViewTimeSlots' | 'dayViewSlotLabel' | 'dayViewSlotLabels' | 'dayViewBackgroundEvent' | MoreEventsStylesNames | ScheduleEventStylesNames | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames> | CurrentTimeIndicatorStylesNames | AgendaViewStylesNames;
+export type DayViewStylesNames = 'dayView' | 'dayViewInner' | 'dayViewScrollArea' | 'dayViewAllDay' | 'dayViewAllDayEvents' | 'dayViewSlot' | 'dayViewSlots' | 'dayViewTimeSlots' | 'dayViewSlotLabel' | 'dayViewSlotLabels' | 'dayViewBackgroundEvent' | 'dayViewDragPreview' | MoreEventsStylesNames | ScheduleEventStylesNames | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames> | CurrentTimeIndicatorStylesNames | AgendaViewStylesNames;
 export type DayViewCssVariables = {
     dayView: '--day-view-radius' | '--day-view-slot-height' | '--day-view-all-day-slot-height';
 };
@@ -85,6 +85,8 @@ export interface DayViewProps extends BoxProps, StylesApiProps<DayViewFactory>,
     }) => void;
     /** Function to determine if event can be dragged */
     canDragEvent?: (event: ScheduleEventData) => boolean;
+    /** Snap step for moving events by drag and drop, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */
+    eventDragInterval?: number;
     /** Called when any event drag starts */
     onEventDragStart?: (event: ScheduleEventData) => void;
     /** Called when any event drag ends */
@@ -99,6 +101,8 @@ export interface DayViewProps extends BoxProps, StylesApiProps<DayViewFactory>,
     onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Called when event is clicked */
     onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick` @default false */
+    withInteractiveBackgroundEvents?: boolean;
     /** If set, enables drag-to-select time slot ranges @default false */
     withDragSlotSelect?: boolean;
     /** Called when a time slot range is selected by dragging */
@@ -120,6 +124,8 @@ export interface DayViewProps extends BoxProps, StylesApiProps<DayViewFactory>,
     }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    /** Snap step for resizing events, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */
+    eventResizeInterval?: number;
     /** Max number of generated recurring instances per recurring series @default 2000 */
     recurrenceExpansionLimit?: number;
     /** Function to get additional props for each time slot. Receives slot start and end datetime strings. Returned props are spread onto the slot element. Event handlers returned by this function are composed with internal handlers (e.g. onClick) rather than overriding them. */

package/lib/components/MonthView/MonthView.d.ts CHANGED Viewed

@@ -86,6 +86,8 @@ export interface MonthViewProps extends BoxProps, StylesApiProps<MonthViewFactor
     onEventDragEnd?: () => void;
     /** Called when event is clicked */
     onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick` @default false */
+    withInteractiveBackgroundEvents?: boolean;
     /** If set, enables drag-to-select day ranges @default false */
     withDragSlotSelect?: boolean;
     /** Called when a day range is selected by dragging */

package/lib/components/ResourcesDayView/ResourcesDayView.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
 import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
-export type ResourcesDayViewStylesNames = 'resourcesDayView' | 'resourcesDayViewRoot' | 'resourcesDayViewInner' | 'resourcesDayViewTimeLabelsRow' | 'resourcesDayViewScrollArea' | 'resourcesDayViewCorner' | 'resourcesDayViewTimeLabel' | 'resourcesDayViewResourceLabel' | 'resourcesDayViewRow' | 'resourcesDayViewRowSlot' | 'resourcesDayViewRowSlots' | 'resourcesDayViewBackgroundEvent' | 'resourcesDayViewAllDayEvent' | 'resourcesDayViewCurrentTimeIndicator' | 'resourcesDayViewCurrentTimeIndicatorLine' | 'resourcesDayViewCurrentTimeIndicatorThumb' | 'resourcesDayViewCurrentTimeIndicatorTimeBubble' | 'resourcesDayViewEventWrapper' | 'resourcesDayViewResizeHandle' | 'resourcesDayViewGroupColumn' | 'resourcesDayViewGroupColumnEmpty' | MoreEventsStylesNames | CombinedScheduleHeaderStylesNames;
+export type ResourcesDayViewStylesNames = 'resourcesDayView' | 'resourcesDayViewRoot' | 'resourcesDayViewInner' | 'resourcesDayViewTimeLabelsRow' | 'resourcesDayViewScrollArea' | 'resourcesDayViewCorner' | 'resourcesDayViewTimeLabel' | 'resourcesDayViewResourceLabel' | 'resourcesDayViewRow' | 'resourcesDayViewRowSlot' | 'resourcesDayViewRowSlots' | 'resourcesDayViewBackgroundEvent' | 'resourcesDayViewAllDayEvent' | 'resourcesDayViewCurrentTimeIndicator' | 'resourcesDayViewCurrentTimeIndicatorLine' | 'resourcesDayViewCurrentTimeIndicatorThumb' | 'resourcesDayViewCurrentTimeIndicatorTimeBubble' | 'resourcesDayViewEventWrapper' | 'resourcesDayViewDragPreview' | 'resourcesDayViewResizeHandle' | 'resourcesDayViewGroupColumn' | 'resourcesDayViewGroupColumnEmpty' | MoreEventsStylesNames | CombinedScheduleHeaderStylesNames;
 export type ResourcesDayViewCssVariables = {
     resourcesDayView: '--resources-day-view-radius' | '--resources-day-view-slot-width' | '--resources-day-view-row-height' | '--resources-day-view-group-label-width';
 };
@@ -91,6 +91,8 @@ export interface ResourcesDayViewProps extends BoxProps, StylesApiProps<Resource
     }) => void;
     /** Function to determine if event can be dragged */
     canDragEvent?: (event: ScheduleEventData) => boolean;
+    /** Snap step for moving events by drag and drop, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */
+    eventDragInterval?: number;
     /** Called when any event drag starts */
     onEventDragStart?: (event: ScheduleEventData) => void;
     /** Called when any event drag ends */
@@ -104,6 +106,8 @@ export interface ResourcesDayViewProps extends BoxProps, StylesApiProps<Resource
     }) => void;
     /** Called when event is clicked */
     onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick` @default false */
+    withInteractiveBackgroundEvents?: boolean;
     /** If set, enables drag-to-select time slot ranges @default false */
     withDragSlotSelect?: boolean;
     /** Called when a time slot range is selected by dragging, includes resourceId */
@@ -131,6 +135,8 @@ export interface ResourcesDayViewProps extends BoxProps, StylesApiProps<Resource
     }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    /** Snap step for resizing events, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */
+    eventResizeInterval?: number;
     /** Max number of generated recurring instances per recurring series @default 2000 */
     recurrenceExpansionLimit?: number;
     /** Maximum number of events visible per time slot before "+more" indicator shows, minimum value is 1 @default 2 */

package/lib/components/ResourcesDayView/ResourcesDayViewColumn.d.ts CHANGED Viewed

@@ -36,4 +36,4 @@ export interface ResourcesDayViewRowProps {
     groupInfo?: ResourceGroupInfo | null;
     allDayCount?: number;
 }
-export declare function ResourcesDayViewRow({ resource, resourceIndex, date, slots, getStyles, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onRowSlotsDragOver, onRowSlotsDragLeave, onRowSlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, rowSlotsContainerRef, renderResourceLabel, renderGroupLabel, scrolledX, groupInfo, allDayCount, }: ResourcesDayViewRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResourcesDayViewRow({ resource, resourceIndex, date, slots, getStyles, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onRowSlotsDragOver, onRowSlotsDragLeave, onRowSlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, rowSlotsContainerRef, renderResourceLabel, renderGroupLabel, scrolledX, groupInfo, allDayCount, }: ResourcesDayViewRowProps): import("react").JSX.Element;

package/lib/components/ResourcesSchedule/ResourcesSchedule.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import { ResourcesWeekViewProps, ResourcesWeekViewStylesNames } from '../Resourc
 import { RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 export type ResourcesScheduleStylesNames = 'root' | ResourcesDayViewStylesNames | ResourcesWeekViewStylesNames | ResourcesMonthViewStylesNames;
 export type ResourcesScheduleViewLevel = 'day' | 'week' | 'month';
-type ResourcesScheduleCommonProps = 'date' | 'onDateChange' | 'resources' | 'events' | 'locale' | 'radius' | 'labels' | 'renderEventBody' | 'renderResourceLabel' | 'withEventsDragAndDrop' | 'onEventDrop' | 'canDragEvent' | 'onEventDragStart' | 'onEventDragEnd' | 'onTimeSlotClick' | 'onEventClick' | 'onDayClick' | 'withDragSlotSelect' | 'onSlotDragEnd' | 'view' | 'onViewChange' | 'mode' | 'onExternalEventDrop' | 'withEventResize' | 'onEventResize' | 'canResizeEvent' | 'recurrenceExpansionLimit';
+type ResourcesScheduleCommonProps = 'date' | 'onDateChange' | 'resources' | 'events' | 'locale' | 'radius' | 'labels' | 'renderEventBody' | 'renderResourceLabel' | 'withEventsDragAndDrop' | 'onEventDrop' | 'canDragEvent' | 'onEventDragStart' | 'onEventDragEnd' | 'onTimeSlotClick' | 'onEventClick' | 'onDayClick' | 'withDragSlotSelect' | 'onSlotDragEnd' | 'view' | 'onViewChange' | 'mode' | 'onExternalEventDrop' | 'withEventResize' | 'onEventResize' | 'canResizeEvent' | 'recurrenceExpansionLimit' | 'withInteractiveBackgroundEvents';
 type ResourcesScheduleViewProps<T> = Partial<Omit<T, ResourcesScheduleCommonProps>>;
 export interface ResourcesScheduleProps extends BoxProps, StylesApiProps<ResourcesScheduleFactory>, ElementProps<'div'> {
     __staticSelector?: string;
@@ -95,6 +95,8 @@ export interface ResourcesScheduleProps extends BoxProps, StylesApiProps<Resourc
     }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Applies to `day` and `week` views only – `ResourcesMonthView` does not render background events separately. @default false */
+    withInteractiveBackgroundEvents?: boolean;
     /** Max number of generated recurring instances @default 2000 */
     recurrenceExpansionLimit?: number;
     /** Props specific to ResourcesDayView */