@mantine/schedule 9.5.2 → 9.6.1

package/cjs/components/WeekView/WeekView.cjs

@@ -9,6 +9,7 @@ const require_get_week_days = require("../../utils/get-week-days/get-week-days.c
 const require_next_week = require("../../utils/next-week/next-week.cjs");
 const require_previous_week = require("../../utils/previous-week/previous-week.cjs");
 const require_is_all_day_event = require("../../utils/is-all-day-event/is-all-day-event.cjs");
+const require_get_day_position = require("../../utils/get-day-position/get-day-position.cjs");
 const require_get_time_axis_event_style = require("../../utils/get-time-axis-event-style/get-time-axis-event-style.cjs");
 const require_calculate_drop_time = require("../../utils/calculate-drop-time/calculate-drop-time.cjs");
 const require_get_business_hours_mod = require("../../utils/get-business-hours-mod/get-business-hours-mod.cjs");
@@ -21,6 +22,7 @@ const require_AgendaView = require("../AgendaView/AgendaView.cjs");
 const require_CurrentTimeIndicator = require("../CurrentTimeIndicator/CurrentTimeIndicator.cjs");
 const require_DragContext = require("../DragContext/DragContext.cjs");
 const require_ScheduleEvent = require("../ScheduleEvent/ScheduleEvent.cjs");
+const require_ScheduleBackgroundEvent = require("../ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs");
 const require_ScheduleHeaderBase = require("../ScheduleHeader/ScheduleHeaderBase.cjs");
 const require_get_week_label = require("./get-week-label/get-week-label.cjs");
 const require_get_week_view_events = require("./get-week-view-events/get-week-view-events.cjs");
@@ -55,7 +57,10 @@ const defaultProps = {
 	withEventsDragAndDrop: false,
 	withDragSlotSelect: false,
 	withEventResize: false,
-	mode: "default"
+	mode: "default",
+	withInteractiveBackgroundEvents: false,
+	eventOverlapMode: "columns",
+	eventOverlapRaiseDelay: 600
 };
 const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, allDaySlotHeight, slotHeight }) => ({ weekView: {
 	"--week-view-radius": radius !== void 0 ? (0, _mantine_core.getRadius)(radius) : void 0,
@@ -64,7 +69,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, al
 } }));
 const WeekView = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("WeekView", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
+	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, eventOverlapMode, eventOverlapRaiseDelay, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, eventResizeInterval, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
 	const [agendaOpen, setAgendaOpen] = (0, react.useState)(false);
 	const getStyles = (0, _mantine_core.useStyles)({
 		name: __staticSelector,
@@ -92,7 +97,6 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		__staticSelector,
 		radius
 	};
-	const theme = (0, _mantine_core.useMantineTheme)();
 	const [scrolled, setScrolled] = (0, react.useState)(false);
 	const ctx = (0, _mantine_dates.useDatesContext)();
 	const slots = require_get_day_time_intervals.getDayTimeIntervals({
@@ -105,11 +109,56 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		viewportRef,
 		enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
 	});
+	const dragOffsetRef = (0, react.useRef)({
+		offset: 0,
+		size: 0
+	});
+	const getDropTimeForSlot = (target, draggedEvent) => {
+		const slotTime = slots[target.slotIndex].startTime;
+		return require_calculate_drop_time.calculateDropTime({
+			draggedEvent,
+			targetDate: target.day,
+			targetSlotTime: slotTime,
+			intervalMinutes,
+			dragIntervalMinutes: eventDragInterval,
+			slotOffset: eventDragInterval == null ? void 0 : dragOffsetRef.current.offset,
+			slotSize: eventDragInterval == null ? void 0 : dragOffsetRef.current.size,
+			startTime,
+			endTime
+		});
+	};
 	const handleExternalDrop = (0, react.useCallback)((e, target) => {
 		if (!onExternalEventDrop) return;
 		const slotDate = (0, dayjs.default)(target.day).format("YYYY-MM-DD");
-		onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[target.slotIndex].startTime}`);
-	}, [onExternalEventDrop, slots]);
+		const slotTime = slots[target.slotIndex].startTime;
+		if (eventDragInterval == null) {
+			onExternalEventDrop(e.dataTransfer, `${slotDate} ${slotTime}`);
+			return;
+		}
+		const slotStart = `${slotDate} ${slotTime}`;
+		const { start } = require_calculate_drop_time.calculateDropTime({
+			draggedEvent: {
+				start: slotStart,
+				end: slotStart
+			},
+			targetDate: target.day,
+			targetSlotTime: slotTime,
+			intervalMinutes,
+			dragIntervalMinutes: eventDragInterval,
+			slotOffset: dragOffsetRef.current.offset,
+			slotSize: dragOffsetRef.current.size,
+			startTime,
+			endTime
+		});
+		onExternalEventDrop(e.dataTransfer, (0, dayjs.default)(start).format("YYYY-MM-DD HH:mm:ss"));
+	}, [
+		onExternalEventDrop,
+		slots,
+		eventDragInterval,
+		intervalMinutes,
+		startTime,
+		endTime
+	]);
 	const handleExternalAllDayDrop = (0, react.useCallback)((e, day) => {
 		if (!onExternalEventDrop) return;
 		onExternalEventDrop(e.dataTransfer, `${(0, dayjs.default)(day).format("YYYY-MM-DD")} 00:00:00`);
@@ -121,17 +170,21 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		canDragEvent,
 		onEventDragStart,
 		onEventDragEnd,
-		calculateDropTarget: (target, draggedEvent) => {
-			const slotTime = slots[target.slotIndex].startTime;
-			return require_calculate_drop_time.calculateDropTime({
-				draggedEvent,
-				targetDate: target.day,
-				targetSlotTime: slotTime,
-				intervalMinutes
-			});
-		},
+		calculateDropTarget: getDropTimeForSlot,
 		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
 	});
+	const updateDragPreview = (target) => {
+		const draggedEvent = dragDrop.dragContextValue.draggedEvent;
+		if (eventDragInterval == null || !draggedEvent) return;
+		const { start, end } = getDropTimeForSlot(target, draggedEvent);
+		const newStart = (0, dayjs.default)(start).format("YYYY-MM-DD HH:mm:ss");
+		if (dragDrop.dragPreview?.start !== newStart || dragDrop.dragPreview?.target.day !== target.day) dragDrop.setDragPreview({
+			start: newStart,
+			end: (0, dayjs.default)(end).format("YYYY-MM-DD HH:mm:ss"),
+			target
+		});
+	};
+	const suppressDropHighlight = eventDragInterval != null && dragDrop.dragContextValue.isDragging;
 	const allDayDragDrop = require_use_drag_drop_handlers.useDragDropHandlers({
 		enabled: withEventsDragAndDrop,
 		mode,
@@ -163,6 +216,7 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		startTime,
 		endTime,
 		intervalMinutes,
+		resizeIntervalMinutes: eventResizeInterval,
 		onEventResize,
 		canResizeEvent
 	});
@@ -185,25 +239,28 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		weekendDays: ctx.getWeekendDays(weekendDays),
 		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
 	});
+	const expandedEvents = require_expand_recurring_events.expandRecurringEvents({
+		events,
+		rangeStart: (0, dayjs.default)(weekdays[0]).startOf("day").toDate(),
+		rangeEnd: (0, dayjs.default)(weekdays[weekdays.length - 1]).endOf("day").toDate(),
+		expansionLimit: recurrenceExpansionLimit
+	});
 	const weekEvents = require_get_week_view_events.getWeekViewEvents({
 		date,
-		events: require_expand_recurring_events.expandRecurringEvents({
-			events,
-			rangeStart: (0, dayjs.default)(weekdays[0]).startOf("day").toDate(),
-			rangeEnd: (0, dayjs.default)(weekdays[weekdays.length - 1]).endOf("day").toDate(),
-			expansionLimit: recurrenceExpansionLimit
-		}),
+		events: expandedEvents,
 		startTime,
 		endTime,
 		intervalMinutes,
 		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
 		weekendDays: ctx.getWeekendDays(weekendDays),
-		withWeekendDays
+		withWeekendDays,
+		eventOverlapMode
 	});
 	const timeValues = slots.reduce((acc, interval) => {
 		if (!interval.isHourStart) return acc;
+		const intervalTime = (0, dayjs.default)(`${(0, dayjs.default)(date).format("YYYY-MM-DD")} ${interval.startTime}`);
 		const label = require_format_date.formatDate({
-			date: (0, dayjs.default)(`${(0, dayjs.default)(date).format("YYYY-MM-DD")} ${interval.startTime}`),
+			date: intervalTime,
 			locale: ctx.getLocale(locale),
 			format: slotLabelFormat
 		});
@@ -252,14 +309,33 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 			const rect = slotNode.getBoundingClientRect();
 			return event.clientY >= rect.top && event.clientY <= rect.bottom;
 		});
-		if (slotIndex >= 0) return slotIndex;
+		if (slotIndex >= 0) {
+			const rect = daySlots[slotIndex].getBoundingClientRect();
+			dragOffsetRef.current = {
+				offset: event.clientY - rect.top,
+				size: rect.height
+			};
+			return slotIndex;
+		}
 		const firstSlot = daySlots[0];
 		const lastSlot = daySlots[daySlots.length - 1];
 		if (!firstSlot || !lastSlot) return null;
 		const firstRect = firstSlot.getBoundingClientRect();
 		const lastRect = lastSlot.getBoundingClientRect();
-		if (event.clientY < firstRect.top) return 0;
-		if (event.clientY > lastRect.bottom) return daySlots.length - 1;
+		if (event.clientY < firstRect.top) {
+			dragOffsetRef.current = {
+				offset: 0,
+				size: firstRect.height
+			};
+			return 0;
+		}
+		if (event.clientY > lastRect.bottom) {
+			dragOffsetRef.current = {
+				offset: lastRect.height,
+				size: lastRect.height
+			};
+			return daySlots.length - 1;
+		}
 		return null;
 	}, []);
 	const handleSlotKeyDown = (event, dayIndex, slotIndex) => {
@@ -325,32 +401,20 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		...getStyles("weekViewDayNumber"),
 		key: "date"
 	}, (0, dayjs.default)(day).date())));
+	const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== "static";
 	const days = weekdays.map((day, dayIndex) => {
-		const backgroundEventNodes = (weekEvents.backgroundEvents[day] || []).filter((event) => !event.position.allDay).map((event) => {
-			const colors = theme.variantColorResolver({
-				color: event.color || theme.primaryColor,
-				theme,
-				variant: "light",
-				autoContrast: true
-			});
-			const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
-			const bgEventProps = {
-				key: `bg-${event.id}`,
-				...getStyles("weekViewBackgroundEvent", { style: {
-					top: `${event.position.top}%`,
-					height: `${event.position.height}%`,
-					width: "100%"
-				} }),
-				__vars: {
-					"--bg-event-bg": colors.background,
-					"--bg-event-color": colors.color
-				},
-				children: bgEventBody
-			};
-			if (typeof renderEvent === "function") return renderEvent(event, bgEventProps);
-			const { key: bgEventKey, ...restBgEventProps } = bgEventProps;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...restBgEventProps }, bgEventKey);
-		});
+		const backgroundEventNodes = (weekEvents.backgroundEvents[day] || []).filter((event) => !event.position.allDay).map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleBackgroundEvent.ScheduleBackgroundEvent, {
+			event,
+			renderEvent,
+			renderEventBody,
+			interactive: interactiveBackgroundEvents,
+			onEventClick,
+			...getStyles("weekViewBackgroundEvent", { style: {
+				top: `${event.position.top}%`,
+				height: `${event.position.height}%`,
+				width: "100%"
+			} })
+		}, `bg-${event.id}`));
 		const dayEvents = (weekEvents.regularEvents[day] || []).map((event) => {
 			const eventIsAllDay = require_is_all_day_event.isAllDayEvent({
 				event,
@@ -387,6 +451,7 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 				onClick: onEventClick ? (e) => {
 					if (!eventResize.wasResizing()) onEventClick(event, e);
 				} : void 0,
+				mod: { cascade: eventOverlapMode === "cascade" },
 				style: {
 					position: "absolute",
 					...require_get_time_axis_event_style.getTimeAxisEventStyle({
@@ -395,7 +460,9 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 						axis: "vertical"
 					}),
 					left: `${event.position.offset}%`,
-					width: `${event.position.width}%`
+					width: `${event.position.width}%`,
+					"--event-z-index": event.position.column + 3,
+					"--event-z-index-raised": event.position.overlaps + 3
 				}
 			}, event.id);
 		});
@@ -420,10 +487,16 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 			} : void 0,
 			onDaySlotsDragOver: (event, dayStr, dayIdx) => {
 				const slotIndex = getSlotIndexFromDragPoint(event, dayIdx);
-				if (slotIndex !== null) dragDrop.handleDragOver(event, {
-					day: dayStr,
-					slotIndex
-				});
+				if (slotIndex !== null) {
+					dragDrop.handleDragOver(event, {
+						day: dayStr,
+						slotIndex
+					});
+					updateDragPreview({
+						day: dayStr,
+						slotIndex
+					});
+				}
 			},
 			onDaySlotsDragLeave: dragDrop.handleDragLeave,
 			onDaySlotsDrop: (event, dayStr, dayIdx) => {
@@ -433,7 +506,7 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 					slotIndex
 				});
 			},
-			dropTargetSlotIndex: dragDrop.dropTarget?.day === day ? dragDrop.dropTarget.slotIndex : void 0,
+			dropTargetSlotIndex: !suppressDropHighlight && dragDrop.dropTarget?.day === day ? dragDrop.dropTarget.slotIndex : void 0,
 			withDragSlotSelect,
 			onSlotPointerDown: slotDragSelect.handleSlotPointerDown,
 			isSlotDragSelected: slotDragSelect.isSlotSelected,
@@ -441,7 +514,29 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 				daySlotsContainersRef.current[dayIndex] = node;
 			},
 			getTimeSlotProps,
-			children: [backgroundEventNodes, dayEvents]
+			children: [
+				backgroundEventNodes,
+				dayEvents,
+				dragDrop.dragPreview?.target.day === day && dragDrop.dragContextValue.draggedEvent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...getStyles("weekViewDragPreview", { style: (() => {
+					const { top, height } = require_get_day_position.getDayPosition({
+						event: {
+							...dragDrop.dragContextValue.draggedEvent,
+							start: dragDrop.dragPreview.start,
+							end: dragDrop.dragPreview.end
+						},
+						startTime,
+						endTime,
+						intervalMinutes
+					});
+					return {
+						position: "absolute",
+						insetInlineStart: 0,
+						insetInlineEnd: 0,
+						top: `${top}%`,
+						height: `${height}%`
+					};
+				})() }) })
+			]
 		}, day);
 	});
 	const allDaySlots = weekdays.map((day, dayIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
@@ -482,32 +577,19 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		const allDayBgEvents = (weekEvents.backgroundEvents[day] || []).filter((event) => event.position.allDay);
 		const dayWidth = 100 / weekdays.length;
 		const dayOffset = dayIndex * dayWidth;
-		return allDayBgEvents.map((event) => {
-			const colors = theme.variantColorResolver({
-				color: event.color || theme.primaryColor,
-				theme,
-				variant: "light",
-				autoContrast: true
-			});
-			const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
-			const bgEventProps = {
-				key: `bg-allday-${event.id}-${day}`,
-				...getStyles("weekViewBackgroundEvent", { style: {
-					top: 0,
-					height: "100%",
-					left: `${dayOffset}%`,
-					width: `${dayWidth}%`
-				} }),
-				__vars: {
-					"--bg-event-bg": colors.background,
-					"--bg-event-color": colors.color
-				},
-				children: bgEventBody
-			};
-			if (typeof renderEvent === "function") return renderEvent(event, bgEventProps);
-			const { key: bgEventKey, ...restBgEventProps } = bgEventProps;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...restBgEventProps }, bgEventKey);
-		});
+		return allDayBgEvents.map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleBackgroundEvent.ScheduleBackgroundEvent, {
+			event,
+			renderEvent,
+			renderEventBody,
+			interactive: interactiveBackgroundEvents,
+			onEventClick,
+			...getStyles("weekViewBackgroundEvent", { style: {
+				top: 0,
+				height: "100%",
+				left: `${dayOffset}%`,
+				width: `${dayWidth}%`
+			} })
+		}, `bg-allday-${event.id}-${day}`));
 	});
 	const extraRows = Math.max(...weekEvents.allDayEvents.map((event) => event.position.row), 1) - 1;
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
@@ -559,13 +641,15 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 			!agendaOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
 				...getStyles("weekViewRoot"),
 				__vars: {
+					"--event-raise-delay": `${eventOverlapRaiseDelay}ms`,
 					"--indicator-offset-index": currentWeekdayIndex === -1 ? void 0 : `${currentWeekdayIndex + 1}`,
 					"--number-of-days": withWeekendDays ? "7" : `${7 - ctx.getWeekendDays(weekendDays).length}`
 				},
 				mod: {
 					"with-weekends": withWeekendDays,
 					"hide-sub-hour-grid-lines": !withSubHourGridLines,
-					"event-interaction": eventResize.isResizing || dragDrop.dragContextValue.isDragging
+					"event-interaction": eventResize.isResizing || dragDrop.dragContextValue.isDragging,
+					"all-day-dragging": allDayDragDrop.dragContextValue.isDragging
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.ScrollArea.Autosize, {
 					scrollbarSize: 4,