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

@mantine/schedule 9.6.0 → 9.6.2

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 (98) hide show

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 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":"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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 withBackgroundEvents?: 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 withBackgroundEvents = false,\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, eventDate?: string) => {\n if (!resizeState \|\| resizeState.eventId !== eventId) {\n return null;\n }\n if (eventDate !== undefined && resizeState.eventDate !== eventDate) {\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') {\n return false;\n }\n if (event.display === 'background' && !withBackgroundEvents) {\n return false;\n }\n return canResizeEvent ? canResizeEvent(event) : true;\n },\n [enabled, mode, canResizeEvent, withBackgroundEvents]\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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"}

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, resizeIntervalMinutes, onEventResize, canResizeEvent }) {
+function useHorizontalEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, withBackgroundEvents = false }) {
 	const [resizeState, setResizeState] = useState(null);
 	const resizeRef = useRef(null);
 	const justResizedRef = useRef(false);
@@ -146,20 +146,23 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
 			document.removeEventListener("pointerup", handlePointerUp);
 		};
 	}, [isResizing]);
-	const getResizePosition = useCallback((eventId) => {
+	const getResizePosition = useCallback((eventId, eventDate) => {
 		if (!resizeState || resizeState.eventId !== eventId) return null;
+		if (eventDate !== void 0 && resizeState.eventDate !== eventDate) return null;
 		return {
 			left: resizeState.currentLeft,
 			width: resizeState.currentWidth
 		};
 	}, [resizeState]);
 	const isResizableEvent = useCallback((event) => {
-		if (!enabled || mode === "static" || event.display === "background") return false;
+		if (!enabled || mode === "static") return false;
+		if (event.display === "background" && !withBackgroundEvents) return false;
 		return canResizeEvent ? canResizeEvent(event) : true;
 	}, [
 		enabled,
 		mode,
-		canResizeEvent
+		canResizeEvent,
+		withBackgroundEvents
 	]);
 	const wasResizing = useCallback(() => justResizedRef.current, []);
 	return {

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 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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"}
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 withBackgroundEvents?: 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 withBackgroundEvents = false,\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, eventDate?: string) => {\n if (!resizeState \|\| resizeState.eventId !== eventId) {\n return null;\n }\n if (eventDate !== undefined && resizeState.eventDate !== eventDate) {\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') {\n return false;\n }\n if (event.display === 'background' && !withBackgroundEvents) {\n return false;\n }\n return canResizeEvent ? canResizeEvent(event) : true;\n },\n [enabled, mode, canResizeEvent, withBackgroundEvents]\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

@@ -41,6 +41,8 @@ import { handleResourcesGridKeyDown } from "./utils/handle-resources-grid-key-do
 import { getGroupToResourceIdMap } from "./utils/get-group-to-resource-id-map/get-group-to-resource-id-map.mjs";
 import { getIndexFromDragPoint } from "./utils/get-index-from-drag-point/get-index-from-drag-point.mjs";
 import { getDayRelativePercent } from "./utils/get-day-relative-percent/get-day-relative-percent.mjs";
+import { getOverlapClusters } from "./utils/get-overlap-clusters/get-overlap-clusters.mjs";
+import { applyCascadeLayout } from "./utils/apply-cascade-layout/apply-cascade-layout.mjs";
 import { AgendaView } from "./components/AgendaView/AgendaView.mjs";
 import { CurrentTimeIndicator } from "./components/CurrentTimeIndicator/CurrentTimeIndicator.mjs";
 import { DragContext } from "./components/DragContext/DragContext.mjs";
@@ -58,4 +60,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, 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 };
+export { AgendaView, CurrentTimeIndicator, DEFAULT_SCHEDULE_LABELS, DayView, DragContext, MobileMonthView, MonthView, MoreEvents, ResourcesDayView, ResourcesMonthView, ResourcesSchedule, ResourcesWeekView, Schedule, ScheduleBackgroundEvent, ScheduleEvent, ScheduleHeader, WeekView, YearView, applyCascadeLayout, calculateDropTime, calculateMonthDropDate, clampIntervalMinutes, expandRecurringEvents, formatDate, getBusinessHoursMod, getCurrentTimePosition, getDayPosition, getDayRelativePercent, getDayTimeIntervals, getEndOfWeek, getGroupToResourceIdMap, getIndexFromDragPoint, getLabel, getMonthDays, getMonthRange, getMonthsByQuarter, getMonthsList, getOrderedResources, getOverlapClusters, 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/apply-cascade-layout/apply-cascade-layout.mjs ADDED Viewed

@@ -0,0 +1,21 @@
+"use client";
+import { getOverlapClusters } from "../get-overlap-clusters/get-overlap-clusters.mjs";
+//#region packages/@mantine/schedule/src/utils/apply-cascade-layout/apply-cascade-layout.ts
+/** Indent applied per column before the cluster runs out of room, in percent */
+const BASE_STEP = 20;
+function applyCascadeLayout(events) {
+	const timedEvents = events.filter((event) => !event.position.allDay);
+	for (const cluster of getOverlapClusters(timedEvents)) {
+		const columns = Math.max(...cluster.map((event) => event.position.column)) + 1;
+		const step = columns > 1 ? Math.min(BASE_STEP, 40 / (columns - 1)) : 0;
+		for (const event of cluster) {
+			event.position.overlaps = columns;
+			event.position.offset = event.position.column * step;
+			event.position.width = 100 - event.position.offset;
+		}
+	}
+}
+//#endregion
+export { applyCascadeLayout };
+//# sourceMappingURL=apply-cascade-layout.mjs.map

package/esm/utils/apply-cascade-layout/apply-cascade-layout.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"apply-cascade-layout.mjs","names":[],"sources":["../../../src/utils/apply-cascade-layout/apply-cascade-layout.ts"],"sourcesContent":["import { DayEventPositionData, ScheduleEventData } from '../../types';\nimport { getOverlapClusters } from '../get-overlap-clusters/get-overlap-clusters';\n\n/** Indent applied per column before the cluster runs out of room, in percent */\nconst BASE_STEP = 20;\n\n/** Width the last event in a cluster is guaranteed to keep, in percent */\nconst MIN_TOP_WIDTH = 60;\n\n/** Minimal shape `applyCascadeLayout` needs, shared by day and week positioned events */\nexport type CascadePositionedEvent = ScheduleEventData & {\n position: Pick<DayEventPositionData, 'allDay' | 'column' | 'width' | 'offset' | 'overlaps'>;\n};\n\nexport function applyCascadeLayout<T extends CascadePositionedEvent>(events: T[]): void {\n const timedEvents = events.filter((event) => !event.position.allDay);\n\n for (const cluster of getOverlapClusters(timedEvents)) {\n const columns = Math.max(...cluster.map((event) => event.position.column)) + 1;\n const step = columns > 1 ? Math.min(BASE_STEP, (100 - MIN_TOP_WIDTH) / (columns - 1)) : 0;\n\n for (const event of cluster) {\n event.position.overlaps = columns;\n event.position.offset = event.position.column * step;\n event.position.width = 100 - event.position.offset;\n }\n }\n}\n"],"mappings":";;;;AAIA,MAAM,YAAY;AAUlB,SAAgB,mBAAqD,QAAmB;CACtF,MAAM,cAAc,OAAO,QAAQ,UAAU,CAAC,MAAM,SAAS,MAAM;CAEnE,KAAK,MAAM,WAAW,mBAAmB,WAAW,GAAG;EACrD,MAAM,UAAU,KAAK,IAAI,GAAG,QAAQ,KAAK,UAAU,MAAM,SAAS,MAAM,CAAC,IAAI;EAC7E,MAAM,OAAO,UAAU,IAAI,KAAK,IAAI,WAAY,MAAwB,UAAU,EAAE,IAAI;EAExF,KAAK,MAAM,SAAS,SAAS;GAC3B,MAAM,SAAS,WAAW;GAC1B,MAAM,SAAS,SAAS,MAAM,SAAS,SAAS;GAChD,MAAM,SAAS,QAAQ,MAAM,MAAM,SAAS;EAC9C;CACF;AACF"}

package/esm/{components/ResourcesDayView → utils}/get-overlap-clusters/get-overlap-clusters.mjs RENAMED Viewed

@@ -1,6 +1,6 @@
 "use client";
-import { isEventsOverlap } from "../../../utils/is-events-overlap/is-events-overlap.mjs";
-//#region packages/@mantine/schedule/src/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.ts
+import { isEventsOverlap } from "../is-events-overlap/is-events-overlap.mjs";
+//#region packages/@mantine/schedule/src/utils/get-overlap-clusters/get-overlap-clusters.ts
 function getOverlapClusters(events) {
 	const clusters = [];
 	const assigned = /* @__PURE__ */ new Set();

package/esm/utils/get-overlap-clusters/get-overlap-clusters.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"get-overlap-clusters.mjs","names":[],"sources":["../../../src/utils/get-overlap-clusters/get-overlap-clusters.ts"],"sourcesContent":["import { ScheduleEventData } from '../../types';\nimport { isEventsOverlap } from '../is-events-overlap/is-events-overlap';\n\nexport function getOverlapClusters<T extends ScheduleEventData>(events: T[]): T[][] {\n const clusters: T[][] = [];\n const assigned = new Set<number>();\n\n for (let i = 0; i < events.length; i++) {\n if (assigned.has(i)) {\n continue;\n }\n\n const cluster: T[] = [events[i]];\n assigned.add(i);\n\n let j = 0;\n while (j < cluster.length) {\n for (let k = 0; k < events.length; k++) {\n if (!assigned.has(k) && isEventsOverlap(cluster[j], events[k])) {\n cluster.push(events[k]);\n assigned.add(k);\n }\n }\n j++;\n }\n\n clusters.push(cluster);\n }\n\n return clusters;\n}\n"],"mappings":";;;AAGA,SAAgB,mBAAgD,QAAoB;CAClF,MAAM,WAAkB,CAAC;CACzB,MAAM,2BAAW,IAAI,IAAY;CAEjC,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;EACtC,IAAI,SAAS,IAAI,CAAC,GAChB;EAGF,MAAM,UAAe,CAAC,OAAO,EAAE;EAC/B,SAAS,IAAI,CAAC;EAEd,IAAI,IAAI;EACR,OAAO,IAAI,QAAQ,QAAQ;GACzB,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KACjC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,gBAAgB,QAAQ,IAAI,OAAO,EAAE,GAAG;IAC9D,QAAQ,KAAK,OAAO,EAAE;IACtB,SAAS,IAAI,CAAC;GAChB;GAEF;EACF;EAEA,SAAS,KAAK,OAAO;CACvB;CAEA,OAAO;AACT"}

package/esm/utils/is-event-in-time-range/is-event-in-time-range.mjs CHANGED Viewed

@@ -18,8 +18,9 @@ function isEventInTimeRange({ event, startTime, endTime }) {
 	const timeWindowEndMinutes = endHour * 60 + endMinute;
 	const eventStart = dayjs(event.start);
 	const eventEnd = dayjs(event.end);
+	const endsAtNextDayStart = eventEnd.isSame(eventStart.startOf("day").add(1, "day"), "second");
 	const eventStartMinutes = eventStart.hour() * 60 + eventStart.minute();
-	return !(eventEnd.hour() * 60 + eventEnd.minute() <= timeWindowStartMinutes || eventStartMinutes >= timeWindowEndMinutes);
+	return !((endsAtNextDayStart ? 1440 : eventEnd.hour() * 60 + eventEnd.minute()) <= timeWindowStartMinutes || eventStartMinutes >= timeWindowEndMinutes);
 }
 //#endregion
 export { isEventInTimeRange };

package/esm/utils/is-event-in-time-range/is-event-in-time-range.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"is-event-in-time-range.mjs","names":[],"sources":["../../../src/utils/is-event-in-time-range/is-event-in-time-range.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\nimport { isMultidayEvent } from '../is-multiday-event/is-multiday-event';\n\ninterface IsEventInTimeRangeInput {\n event: ScheduleEventData;\n startTime?: string;\n endTime?: string;\n}\n\nfunction spansFullDay(event: ScheduleEventData) {\n const start = dayjs(event.start);\n const end = dayjs(event.end);\n if (!start.isSame(start.startOf('day'))) {\n return false;\n }\n const nextDayStart = start.startOf('day').add(1, 'day');\n return end.isSame(nextDayStart) \|\| end.isSame(nextDayStart.subtract(1, 'second'));\n}\n\nexport function isEventInTimeRange({ event, startTime, endTime }: IsEventInTimeRangeInput) {\n if (isMultidayEvent(event) \|\| spansFullDay(event)) {\n return true;\n }\n\n if (!startTime \|\| !endTime) {\n return true;\n }\n\n const [startHour, startMinute] = startTime.split(':').map(Number);\n const [endHour, endMinute] = endTime.split(':').map(Number);\n const timeWindowStartMinutes = startHour * 60 + startMinute;\n const timeWindowEndMinutes = endHour * 60 + endMinute;\n\n const eventStart = dayjs(event.start);\n const eventEnd = dayjs(event.end);\n const eventStartMinutes = eventStart.hour() * 60 + eventStart.minute();\n const eventEndMinutes = eventEnd.hour() * 60 + eventEnd.minute();\n\n return !(eventEndMinutes <= timeWindowStartMinutes \|\| eventStartMinutes >= timeWindowEndMinutes);\n}\n"],"mappings":";;;;AAUA,SAAS,aAAa,OAA0B;CAC9C,MAAM,QAAQ,MAAM,MAAM,KAAK;CAC/B,MAAM,MAAM,MAAM,MAAM,GAAG;CAC3B,IAAI,CAAC,MAAM,OAAO,MAAM,QAAQ,KAAK,CAAC,GACpC,OAAO;CAET,MAAM,eAAe,MAAM,QAAQ,KAAK,CAAC,CAAC,IAAI,GAAG,KAAK;CACtD,OAAO,IAAI,OAAO,YAAY,KAAK,IAAI,OAAO,aAAa,SAAS,GAAG,QAAQ,CAAC;AAClF;AAEA,SAAgB,mBAAmB,EAAE,OAAO,WAAW,WAAoC;CACzF,IAAI,gBAAgB,KAAK,KAAK,aAAa,KAAK,GAC9C,OAAO;CAGT,IAAI,CAAC,aAAa,CAAC,SACjB,OAAO;CAGT,MAAM,CAAC,WAAW,eAAe,UAAU,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;CAChE,MAAM,CAAC,SAAS,aAAa,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;CAC1D,MAAM,yBAAyB,YAAY,KAAK;CAChD,MAAM,uBAAuB,UAAU,KAAK;CAE5C,MAAM,aAAa,MAAM,MAAM,KAAK;CACpC,MAAM,WAAW,MAAM,MAAM,GAAG;CAChC,MAAM,oBAAoB,WAAW,KAAK,IAAI,KAAK,WAAW,OAAO;CAGrE,OAAO,~~EAFiB~~,SAAS,KAAK,IAAI,KAAK,SAAS,OAAO,~~KAEnC~~,0BAA0B,qBAAqB;AAC7E"}
1	+ {"version":3,"file":"is-event-in-time-range.mjs","names":[],"sources":["../../../src/utils/is-event-in-time-range/is-event-in-time-range.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\nimport { isMultidayEvent } from '../is-multiday-event/is-multiday-event';\n\ninterface IsEventInTimeRangeInput {\n event: ScheduleEventData;\n startTime?: string;\n endTime?: string;\n}\n\nfunction spansFullDay(event: ScheduleEventData) {\n const start = dayjs(event.start);\n const end = dayjs(event.end);\n if (!start.isSame(start.startOf('day'))) {\n return false;\n }\n const nextDayStart = start.startOf('day').add(1, 'day');\n return end.isSame(nextDayStart) \|\| end.isSame(nextDayStart.subtract(1, 'second'));\n}\n\nexport function isEventInTimeRange({ event, startTime, endTime }: IsEventInTimeRangeInput) {\n if (isMultidayEvent(event) \|\| spansFullDay(event)) {\n return true;\n }\n\n if (!startTime \|\| !endTime) {\n return true;\n }\n\n const [startHour, startMinute] = startTime.split(':').map(Number);\n const [endHour, endMinute] = endTime.split(':').map(Number);\n const timeWindowStartMinutes = startHour * 60 + startMinute;\n const timeWindowEndMinutes = endHour * 60 + endMinute;\n\n const eventStart = dayjs(event.start);\n const eventEnd = dayjs(event.end);\n const endsAtNextDayStart = eventEnd.isSame(eventStart.startOf('day').add(1, 'day'), 'second');\n const eventStartMinutes = eventStart.hour() * 60 + eventStart.minute();\n const eventEndMinutes = endsAtNextDayStart ? 24 * 60 : eventEnd.hour() * 60 + eventEnd.minute();\n\n return !(eventEndMinutes <= timeWindowStartMinutes \|\| eventStartMinutes >= timeWindowEndMinutes);\n}\n"],"mappings":";;;;AAUA,SAAS,aAAa,OAA0B;CAC9C,MAAM,QAAQ,MAAM,MAAM,KAAK;CAC/B,MAAM,MAAM,MAAM,MAAM,GAAG;CAC3B,IAAI,CAAC,MAAM,OAAO,MAAM,QAAQ,KAAK,CAAC,GACpC,OAAO;CAET,MAAM,eAAe,MAAM,QAAQ,KAAK,CAAC,CAAC,IAAI,GAAG,KAAK;CACtD,OAAO,IAAI,OAAO,YAAY,KAAK,IAAI,OAAO,aAAa,SAAS,GAAG,QAAQ,CAAC;AAClF;AAEA,SAAgB,mBAAmB,EAAE,OAAO,WAAW,WAAoC;CACzF,IAAI,gBAAgB,KAAK,KAAK,aAAa,KAAK,GAC9C,OAAO;CAGT,IAAI,CAAC,aAAa,CAAC,SACjB,OAAO;CAGT,MAAM,CAAC,WAAW,eAAe,UAAU,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;CAChE,MAAM,CAAC,SAAS,aAAa,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;CAC1D,MAAM,yBAAyB,YAAY,KAAK;CAChD,MAAM,uBAAuB,UAAU,KAAK;CAE5C,MAAM,aAAa,MAAM,MAAM,KAAK;CACpC,MAAM,WAAW,MAAM,MAAM,GAAG;CAChC,MAAM,qBAAqB,SAAS,OAAO,WAAW,QAAQ,KAAK,CAAC,CAAC,IAAI,GAAG,KAAK,GAAG,QAAQ;CAC5F,MAAM,oBAAoB,WAAW,KAAK,IAAI,KAAK,WAAW,OAAO;CAGrE,OAAO,GAFiB,qBAAqB,OAAU,SAAS,KAAK,IAAI,KAAK,SAAS,OAAO,MAElE,0BAA0B,qBAAqB;AAC7E"}

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

@@ -1,6 +1,6 @@
 import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaAutosizeProps, StylesApiProps } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
-import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';
+import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleEventOverlapMode, ScheduleMode, ScheduleViewLevel } from '../../types';
 import { AgendaViewStylesNames } from '../AgendaView/AgendaView';
 import { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/CurrentTimeIndicator';
 import { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';
@@ -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' | 'dayViewDragPreview' | MoreEventsStylesNames | ScheduleEventStylesNames | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames> | CurrentTimeIndicatorStylesNames | AgendaViewStylesNames;
+export type DayViewStylesNames = 'dayView' | 'dayViewInner' | 'dayViewScrollArea' | 'dayViewAllDay' | 'dayViewAllDayEvents' | 'dayViewSlot' | 'dayViewSlots' | 'dayViewTimeSlots' | 'dayViewSlotLabel' | 'dayViewSlotLabels' | 'dayViewBackgroundEvent' | 'dayViewBackgroundEventResizeHandle' | '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';
 };
@@ -28,6 +28,10 @@ export interface DayViewProps extends BoxProps, StylesApiProps<DayViewFactory>,
     intervalMinutes?: number;
     /** If set, grid lines are displayed for intervals smaller than one hour, for example 15 and 30 minutes intervals @default true */
     withSubHourGridLines?: boolean;
+    /** Determines how events that overlap in time are laid out: `columns` splits the available width between them, `cascade` indents each event and stacks it over the previous one @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
+    /** Time in ms the pointer must rest on an event before it is raised above the events covering it, only used with `eventOverlapMode="cascade"` @default 600 */
+    eventOverlapRaiseDelay?: number;
     /** If set, the all-day slot is displayed below the header @default true */
     withAllDaySlot?: boolean;
     /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */
@@ -101,7 +105,7 @@ 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 */
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Combined with `withEventResize`, timed background events can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     /** If set, enables drag-to-select time slot ranges @default false */
     withDragSlotSelect?: boolean;

package/lib/components/DayView/get-day-view-events/get-day-positioned-events.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { AnyDateValue, DayPositionedEventData, ScheduleEventData } from '../../../types';
+import { AnyDateValue, DayPositionedEventData, ScheduleEventData, ScheduleEventOverlapMode } from '../../../types';
 interface GetDayPositionedEventsInput {
     /** Date at which events are positioned, used to check if events are all-day */
     date: AnyDateValue;
@@ -10,6 +10,8 @@ interface GetDayPositionedEventsInput {
     endTime?: string;
     /** Number of minutes per time slot, used to align the canvas to whole slots */
     intervalMinutes?: number;
+    /** Determines how events that overlap in time are laid out @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
 }
-export declare function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date, }: GetDayPositionedEventsInput): DayPositionedEventData[];
+export declare function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date, eventOverlapMode, }: GetDayPositionedEventsInput): DayPositionedEventData[];
 export {};

package/lib/components/DayView/get-day-view-events/get-day-view-events.d.ts CHANGED Viewed

@@ -1,12 +1,13 @@
-import { AnyDateValue, DayPositionedEventData, ScheduleEventData } from '../../../types';
+import { AnyDateValue, DayPositionedEventData, ScheduleEventData, ScheduleEventOverlapMode } from '../../../types';
 interface GetDayViewEventsInput {
     events: ScheduleEventData[] | undefined;
     date: AnyDateValue;
     startTime?: string;
     endTime?: string;
     intervalMinutes?: number;
+    eventOverlapMode?: ScheduleEventOverlapMode;
 }
-export declare function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes, }: GetDayViewEventsInput): {
+export declare function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes, eventOverlapMode, }: GetDayViewEventsInput): {
     allDayEvents: DayPositionedEventData[];
     regularEvents: DayPositionedEventData[];
     backgroundTimedEvents: DayPositionedEventData[];

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

@@ -106,7 +106,7 @@ 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 */
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Combined with `withEventResize`, timed background events can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     /** If set, enables drag-to-select time slot ranges @default false */
     withDragSlotSelect?: boolean;

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

@@ -95,7 +95,7 @@ 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 */
+    /** 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. Combined with `withEventResize`, timed background events can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     /** Max number of generated recurring instances @default 2000 */
     recurrenceExpansionLimit?: number;

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

@@ -76,7 +76,7 @@ export interface ResourcesWeekViewProps extends BoxProps, StylesApiProps<Resourc
         resourceId?: string | number;
     }) => void;
     onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
-    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick` @default false */
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Combined with `withEventResize`, timed background events can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     withDragSlotSelect?: boolean;
     onSlotDragEnd?: (data: {

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

@@ -84,7 +84,7 @@ export interface ScheduleProps extends BoxProps, StylesApiProps<ScheduleFactory>
     }) => 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`, `week` and `month` views only – `YearView` and the `MobileMonthView` used by `layout="responsive"` on small screens do not render background events at all. @default false */
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Applies to `day`, `week` and `month` views only – `YearView` and the `MobileMonthView` used by `layout="responsive"` on small screens do not render background events at all. Combined with `withEventResize`, timed background events in `day` and `week` views can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     /** Max number of generated recurring instances per recurring series @default 2000 */
     recurrenceExpansionLimit?: number;

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

@@ -1,7 +1,8 @@
 import { BoxProps, ElementProps } from '@mantine/core';
 import { ScheduleEventData } from '../../types';
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
-export interface ScheduleBackgroundEventProps extends BoxProps, ElementProps<'div', 'onClick'> {
+export type ScheduleBackgroundEventResizeEdge = 'top' | 'bottom' | 'start' | 'end';
+export interface ScheduleBackgroundEventProps<Edge extends ScheduleBackgroundEventResizeEdge = ScheduleBackgroundEventResizeEdge> extends BoxProps, ElementProps<'div', 'onClick'> {
     /** Background event to display */
     event: ScheduleEventData;
     /** If set, the root element is a `button` instead of a `div` and the event can be clicked @default false */
@@ -12,8 +13,20 @@ export interface ScheduleBackgroundEventProps extends BoxProps, ElementProps<'di
     renderEvent?: RenderEvent;
     /** Function to customize event body */
     renderEventBody?: RenderEventBody;
+    /** If set, the event renders resize handles on both of its edges @default false */
+    withResize?: boolean;
+    /** Axis along which the event is resized, defines which edges render handles @default 'vertical' */
+    resizeAxis?: 'vertical' | 'horizontal';
+    /** Props passed down to both resize handles, usually a styles api props object */
+    resizeHandleProps?: Record<string, any>;
+    /** Called when resize starts on an edge */
+    onResizeStart?: (edge: Edge, e: React.PointerEvent) => void;
+    /** If set, the event is currently being resized @default false */
+    isResizing?: boolean;
+    /** Edge that is currently being dragged, only relevant when `isResizing` is set */
+    activeResizeEdge?: Edge | null;
 }
-export declare function ScheduleBackgroundEvent(props: ScheduleBackgroundEventProps): import("react").JSX.Element;
+export declare function ScheduleBackgroundEvent<Edge extends ScheduleBackgroundEventResizeEdge = ScheduleBackgroundEventResizeEdge>(props: ScheduleBackgroundEventProps<Edge>): import("react").JSX.Element;
 export declare namespace ScheduleBackgroundEvent {
     var displayName: string;
 }

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

@@ -1,13 +1,13 @@
 import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaAutosizeProps, StylesApiProps } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
-import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';
+import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleEventOverlapMode, ScheduleMode, ScheduleViewLevel } from '../../types';
 import { BusinessHoursValue } from '../../utils';
 import { AgendaViewStylesNames } from '../AgendaView/AgendaView';
 import { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/CurrentTimeIndicator';
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
 import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
-export type WeekViewStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlot' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | 'weekViewBackgroundEvent' | 'weekViewDragPreview' | CurrentTimeIndicatorStylesNames | CombinedScheduleHeaderStylesNames | AgendaViewStylesNames;
+export type WeekViewStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlot' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | 'weekViewBackgroundEvent' | 'weekViewBackgroundEventResizeHandle' | 'weekViewDragPreview' | CurrentTimeIndicatorStylesNames | CombinedScheduleHeaderStylesNames | AgendaViewStylesNames;
 export type WeekViewCssVariables = {
     weekView: '--week-view-radius' | '--week-view-slot-height' | '--week-view-all-day-slots-height';
 };
@@ -35,6 +35,10 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     weekendDays?: DayOfWeek[];
     /** If set to false, weekend days are hidden @default true */
     withWeekendDays?: boolean;
+    /** Determines how events that overlap in time are laid out: `columns` splits the available width between them, `cascade` indents each event and stacks it over the previous one @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
+    /** Time in ms the pointer must rest on an event before it is raised above the events covering it, only used with `eventOverlapMode="cascade"` @default 600 */
+    eventOverlapRaiseDelay?: number;
     /** If set to true, highlights today in the weekday row @default false */
     highlightToday?: boolean;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
@@ -112,7 +116,7 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     onAllDaySlotClick?: (day: 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 */
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Combined with `withEventResize`, timed background events can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     /** If set, enables drag-to-select time slot ranges @default false */
     withDragSlotSelect?: boolean;

package/lib/components/WeekView/get-week-view-events/get-week-positioned-events.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { AnyDateValue, DateStringValue, DayOfWeek, ScheduleEventData, WeekPositionedEventData } from '../../../types';
+import { AnyDateValue, DateStringValue, DayOfWeek, ScheduleEventData, ScheduleEventOverlapMode, WeekPositionedEventData } from '../../../types';
 export interface GetWeekPositionedEventsInput {
     /** Date (week start) at which events are positioned, used to check if events are all-day */
     date: AnyDateValue;
@@ -16,6 +16,8 @@ export interface GetWeekPositionedEventsInput {
     weekendDays?: DayOfWeek[];
     /** If set to false, weekend days are hidden @default true */
     withWeekendDays?: boolean;
+    /** Determines how events that overlap in time are laid out @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
 }
 /** Events grouped by week day date (YYYY-MM-DD 00:00:00) and by columns */
 export interface GroupedWeekEvents {
@@ -23,4 +25,4 @@ export interface GroupedWeekEvents {
     regularEvents: Record<DateStringValue, WeekPositionedEventData[]>;
     backgroundEvents: Record<DateStringValue, WeekPositionedEventData[]>;
 }
-export declare function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMinutes, firstDayOfWeek, weekendDays, withWeekendDays, }: GetWeekPositionedEventsInput): GroupedWeekEvents;
+export declare function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMinutes, firstDayOfWeek, weekendDays, withWeekendDays, eventOverlapMode, }: GetWeekPositionedEventsInput): GroupedWeekEvents;

package/lib/hooks/use-event-resize.d.ts CHANGED Viewed

@@ -14,8 +14,9 @@ export interface UseEventResizeInput {
         event: ScheduleEventData;
     }) => void;
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    withBackgroundEvents?: boolean;
 }
-export declare function useEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, }: UseEventResizeInput): {
+export declare function useEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, withBackgroundEvents, }: UseEventResizeInput): {
     handleResizeStart: ({ event, edge, container, originalTop, originalHeight, eventDate, pointerEvent, }: {
         event: ScheduleEventData;
         edge: ResizeEdge;
@@ -27,7 +28,7 @@ export declare function useEventResize({ enabled, mode, startTime, endTime, inte
     }) => void;
     isResizing: boolean;
     resizingEventId: string | number | null;
-    getResizePosition: (eventId: string | number) => {
+    getResizePosition: (eventId: string | number, eventDate?: string) => {
         top: number;
         height: number;
     } | null;

package/lib/hooks/use-horizontal-event-resize.d.ts CHANGED Viewed

@@ -14,8 +14,9 @@ export interface UseHorizontalEventResizeInput {
         event: ScheduleEventData;
     }) => void;
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    withBackgroundEvents?: boolean;
 }
-export declare function useHorizontalEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, }: UseHorizontalEventResizeInput): {
+export declare function useHorizontalEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, withBackgroundEvents, }: UseHorizontalEventResizeInput): {
     handleResizeStart: ({ event, edge, container, originalLeft, originalWidth, eventDate, dayIndex, dayCount, pointerEvent, }: {
         event: ScheduleEventData;
         edge: ResizeEdge;
@@ -30,7 +31,7 @@ export declare function useHorizontalEventResize({ enabled, mode, startTime, end
     isResizing: boolean;
     resizingEventId: string | number | null;
     resizingEdge: ResizeEdge | null;
-    getResizePosition: (eventId: string | number) => {
+    getResizePosition: (eventId: string | number, eventDate?: string) => {
         left: number;
         width: number;
     } | null;

package/lib/types.d.ts CHANGED Viewed

@@ -102,6 +102,8 @@ interface ScheduleEventRuntimeMeta {
 }
 /** Event data object passed to all `@mantine/schedule` components */
 export type ScheduleEventData<Payload extends EventPayload = EventPayload> = (ScheduleSingleEventData<Payload> & ScheduleEventRuntimeMeta) | (ScheduleRecurringSeriesEventData<Payload> & ScheduleEventRuntimeMeta) | (ScheduleRecurringOverrideEventData<Payload> & ScheduleEventRuntimeMeta);
+/** Controls how events that overlap in time are laid out along the horizontal axis */
+export type ScheduleEventOverlapMode = 'columns' | 'cascade';
 export interface DayEventPositionData {
     /** All day events */
     allDay: boolean;

package/lib/utils/apply-cascade-layout/apply-cascade-layout.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { DayEventPositionData, ScheduleEventData } from '../../types';
+/** Minimal shape `applyCascadeLayout` needs, shared by day and week positioned events */
+export type CascadePositionedEvent = ScheduleEventData & {
+    position: Pick<DayEventPositionData, 'allDay' | 'column' | 'width' | 'offset' | 'overlaps'>;
+};
+export declare function applyCascadeLayout<T extends CascadePositionedEvent>(events: T[]): void;

package/lib/utils/get-overlap-clusters/get-overlap-clusters.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ScheduleEventData } from '../../types';
2	+ export declare function getOverlapClusters<T extends ScheduleEventData>(events: T[]): T[][];

package/lib/utils/index.d.ts CHANGED Viewed

@@ -47,3 +47,6 @@ export type { HandleResourcesGridKeyDownInput, ResourcesGridControlsRef, } from
 export { getGroupToResourceIdMap } from './get-group-to-resource-id-map/get-group-to-resource-id-map';
 export { getIndexFromDragPoint } from './get-index-from-drag-point/get-index-from-drag-point';
 export { getDayRelativePercent } from './get-day-relative-percent/get-day-relative-percent';
+export { getOverlapClusters } from './get-overlap-clusters/get-overlap-clusters';
+export { applyCascadeLayout } from './apply-cascade-layout/apply-cascade-layout';
+export type { CascadePositionedEvent } from './apply-cascade-layout/apply-cascade-layout';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/schedule",
-  "version": "9.6.0",
+  "version": "9.6.2",
   "description": "Schedule Mantine component",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,9 +35,9 @@
     "directory": "packages/@mantine/schedule"
   },
   "peerDependencies": {
-    "@mantine/core": "9.6.0",
-    "@mantine/dates": "9.6.0",
-    "@mantine/hooks": "9.6.0",
+    "@mantine/core": "9.6.2",
+    "@mantine/dates": "9.6.2",
+    "@mantine/hooks": "9.6.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },