@mantine/schedule 9.5.2 → 9.6.1

package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs

@@ -10,6 +10,7 @@ const require_previous_week = require("../../utils/previous-week/previous-week.c
 const require_get_current_time_position = require("../../utils/get-current-time-position/get-current-time-position.cjs");
 const require_is_in_time_range = require("../../utils/is-in-time-range/is-in-time-range.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");
@@ -17,15 +18,16 @@ const require_get_ordered_resources = require("../../utils/get-ordered-resources
 const require_handle_resources_grid_key_down = require("../../utils/handle-resources-grid-key-down/handle-resources-grid-key-down.cjs");
 const require_get_group_to_resource_id_map = require("../../utils/get-group-to-resource-id-map/get-group-to-resource-id-map.cjs");
 const require_get_index_from_drag_point = require("../../utils/get-index-from-drag-point/get-index-from-drag-point.cjs");
+const require_get_overlap_clusters = require("../../utils/get-overlap-clusters/get-overlap-clusters.cjs");
 const require_use_drag_drop_handlers = require("../../hooks/use-drag-drop-handlers.cjs");
 const require_use_slot_drag_select = require("../../hooks/use-slot-drag-select.cjs");
 const require_DragContext = require("../DragContext/DragContext.cjs");
 const require_ScheduleEvent = require("../ScheduleEvent/ScheduleEvent.cjs");
 const require_MoreEvents = require("../MoreEvents/MoreEvents.cjs");
+const require_ScheduleBackgroundEvent = require("../ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs");
 const require_ScheduleHeaderBase = require("../ScheduleHeader/ScheduleHeaderBase.cjs");
 const require_get_week_label = require("../WeekView/get-week-label/get-week-label.cjs");
 const require_use_horizontal_event_resize = require("../../hooks/use-horizontal-event-resize.cjs");
-const require_get_overlap_clusters = require("../ResourcesDayView/get-overlap-clusters/get-overlap-clusters.cjs");
 const require_get_resources_week_view_events = require("./get-resources-week-view-events/get-resources-week-view-events.cjs");
 const require_ResourcesWeekViewRow = require("./ResourcesWeekViewRow.cjs");
 const require_ResourcesWeekView_module = require("./ResourcesWeekView.module.cjs");
@@ -56,7 +58,8 @@ const defaultProps = {
 	withCurrentTimeBubble: true,
 	highlightToday: true,
 	mode: "default",
-	maxEventsPerTimeSlot: 2
+	maxEventsPerTimeSlot: 2,
+	withInteractiveBackgroundEvents: false
 };
 const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, slotWidth, rowHeight, groupLabelWidth }) => ({ resourcesWeekView: {
 	"--resources-week-view-radius": radius ? (0, _mantine_core.getRadius)(radius) : void 0,
@@ -66,7 +69,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, sl
 } }));
 const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("ResourcesWeekView", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, resources, intervalMinutes, minEventSize, slotLabelFormat, radius, startScrollDateTime, scrollAreaProps, locale, withCurrentTimeIndicator: _withCurrentTimeIndicator, withCurrentTimeBubble, getCurrentTime, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, renderWeekLabel, events, slotWidth, rowHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, renderResourceLabel, groups, renderGroupLabel, groupLabelWidth, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, withEventResize, onEventResize, canResizeEvent, onTimeSlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, onExternalEventDrop, recurrenceExpansionLimit, maxEventsPerTimeSlot: _maxEventsPerTimeSlot, moreEventsProps, firstDayOfWeek, weekendDays, withWeekendDays, weekdayFormat, highlightToday, ...others } = props;
+	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, resources, intervalMinutes, minEventSize, slotLabelFormat, radius, startScrollDateTime, scrollAreaProps, locale, withCurrentTimeIndicator: _withCurrentTimeIndicator, withCurrentTimeBubble, getCurrentTime, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, renderWeekLabel, events, slotWidth, rowHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, renderResourceLabel, groups, renderGroupLabel, groupLabelWidth, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, withEventResize, onEventResize, canResizeEvent, eventResizeInterval, onTimeSlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, onExternalEventDrop, recurrenceExpansionLimit, maxEventsPerTimeSlot: _maxEventsPerTimeSlot, moreEventsProps, firstDayOfWeek, weekendDays, withWeekendDays, weekdayFormat, highlightToday, ...others } = props;
 	const maxEventsPerTimeSlot = _maxEventsPerTimeSlot !== void 0 ? Math.max(1, _maxEventsPerTimeSlot) : void 0;
 	const getStyles = (0, _mantine_core.useStyles)({
 		name: __staticSelector,
@@ -95,6 +98,7 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 		radius
 	};
 	const theme = (0, _mantine_core.useMantineTheme)();
+	const { dir } = (0, _mantine_core.useDirection)();
 	const [scrolled, setScrolled] = (0, react.useState)(false);
 	const [scrolledX, setScrolledX] = (0, react.useState)(false);
 	const ctx = (0, _mantine_dates.useDatesContext)();
@@ -122,6 +126,7 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 	const now = resolveNow();
 	const isToday = weekdays.some((day) => (0, dayjs.default)(day).isSame(now, "day"));
 	const withCurrentTimeIndicator = _withCurrentTimeIndicator ?? isToday;
+	const mounted = (0, _mantine_hooks.useMounted)();
 	const [, setTimeIndicatorTick] = (0, react.useState)(0);
 	(0, _mantine_hooks.useInterval)(() => setTimeIndicatorTick((tick) => tick + 1), 6e4, { autoInvoke: true });
 	const timeIndicatorOffset = require_get_current_time_position.getCurrentTimePosition({
@@ -131,7 +136,7 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 		now
 	});
 	const todayDayIndex = weekdays.findIndex((day) => (0, dayjs.default)(day).isSame(now, "day"));
-	const showTimeIndicator = withCurrentTimeIndicator && todayDayIndex >= 0 && require_is_in_time_range.isInTimeRange({
+	const showTimeIndicator = mounted && withCurrentTimeIndicator && todayDayIndex >= 0 && require_is_in_time_range.isInTimeRange({
 		date: now.toDate(),
 		startTime,
 		endTime
@@ -141,49 +146,101 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 		date: now,
 		format: slotLabelFormat
 	}) : "";
+	const dragOffsetRef = (0, react.useRef)({
+		offset: 0,
+		size: 0
+	});
 	const handleExternalDrop = (0, react.useCallback)((e, target) => {
 		if (!onExternalEventDrop) return;
 		const dayIndex = Math.floor(target.slotIndex / totalSlotsPerDay);
 		const slotInDay = target.slotIndex % totalSlotsPerDay;
 		const slotDay = weekdays[dayIndex];
-		if (slotDay) onExternalEventDrop({
-			dataTransfer: e.dataTransfer,
-			dropDateTime: `${(0, dayjs.default)(slotDay).format("YYYY-MM-DD")} ${slots[slotInDay].startTime}`,
-			resourceId: target.resourceId
-		});
+		if (slotDay) {
+			const slotDate = (0, dayjs.default)(slotDay).format("YYYY-MM-DD");
+			const slotTime = slots[slotInDay].startTime;
+			let dropDateTime = `${slotDate} ${slotTime}`;
+			if (eventDragInterval != null) {
+				const { start } = require_calculate_drop_time.calculateDropTime({
+					draggedEvent: {
+						start: dropDateTime,
+						end: dropDateTime
+					},
+					targetDate: slotDate,
+					targetSlotTime: slotTime,
+					intervalMinutes,
+					dragIntervalMinutes: eventDragInterval,
+					slotOffset: dragOffsetRef.current.offset,
+					slotSize: dragOffsetRef.current.size,
+					startTime,
+					endTime
+				});
+				dropDateTime = (0, dayjs.default)(start).format("YYYY-MM-DD HH:mm:ss");
+			}
+			onExternalEventDrop({
+				dataTransfer: e.dataTransfer,
+				dropDateTime,
+				resourceId: target.resourceId
+			});
+		}
 	}, [
 		onExternalEventDrop,
 		slots,
 		weekdays,
-		totalSlotsPerDay
+		totalSlotsPerDay,
+		eventDragInterval,
+		intervalMinutes,
+		startTime,
+		endTime
 	]);
 	const lastDropResourceId = (0, react.useRef)(void 0);
+	const getDropTimeForSlot = (target, draggedEvent) => {
+		const dayIndex = Math.floor(target.slotIndex / totalSlotsPerDay);
+		const slotInDay = target.slotIndex % totalSlotsPerDay;
+		const slotTime = slots[slotInDay].startTime;
+		const targetDay = weekdays[dayIndex] || weekdays[0];
+		return require_calculate_drop_time.calculateDropTime({
+			draggedEvent,
+			targetDate: targetDay,
+			targetSlotTime: slotTime,
+			intervalMinutes,
+			dragIntervalMinutes: eventDragInterval,
+			slotOffset: eventDragInterval == null ? void 0 : dragOffsetRef.current.offset,
+			slotSize: eventDragInterval == null ? void 0 : dragOffsetRef.current.size,
+			startTime,
+			endTime
+		});
+	};
+	const handleInternalEventDrop = (0, react.useCallback)((data) => {
+		onEventDrop?.({
+			...data,
+			resourceId: lastDropResourceId.current
+		});
+	}, [onEventDrop]);
 	const dragDrop = require_use_drag_drop_handlers.useDragDropHandlers({
 		enabled: withEventsDragAndDrop,
 		mode,
-		onEventDrop: (0, react.useCallback)((data) => {
-			onEventDrop?.({
-				...data,
-				resourceId: lastDropResourceId.current
-			});
-		}, [onEventDrop]),
+		onEventDrop: handleInternalEventDrop,
 		canDragEvent,
 		onEventDragStart,
 		onEventDragEnd,
 		calculateDropTarget: (target, draggedEvent) => {
 			lastDropResourceId.current = target.resourceId;
-			const dayIndex = Math.floor(target.slotIndex / totalSlotsPerDay);
-			const slotInDay = target.slotIndex % totalSlotsPerDay;
-			const slotTime = slots[slotInDay].startTime;
-			return require_calculate_drop_time.calculateDropTime({
-				draggedEvent,
-				targetDate: weekdays[dayIndex] || weekdays[0],
-				targetSlotTime: slotTime,
-				intervalMinutes
-			});
+			return getDropTimeForSlot(target, draggedEvent);
 		},
 		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.resourceId !== target.resourceId) 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 groupToResourceId = (0, react.useMemo)(() => require_get_group_to_resource_id_map.getGroupToResourceIdMap(resources), [resources]);
 	const slotDragSelect = require_use_slot_drag_select.useSlotDragSelect({
 		enabled: withDragSlotSelect && mode !== "static",
@@ -208,6 +265,7 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 		startTime,
 		endTime,
 		intervalMinutes,
+		resizeIntervalMinutes: eventResizeInterval,
 		onEventResize,
 		canResizeEvent
 	});
@@ -261,8 +319,10 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 		}));
 	});
 	const timeLabels = weekdays.flatMap((day) => slots.map((interval) => {
+		const dayStr = (0, dayjs.default)(day).format("YYYY-MM-DD");
+		const intervalTime = (0, dayjs.default)(`${dayStr} ${interval.startTime}`);
 		const label = require_format_date.formatDate({
-			date: (0, dayjs.default)(`${(0, dayjs.default)(day).format("YYYY-MM-DD")} ${interval.startTime}`),
+			date: intervalTime,
 			locale: ctx.getLocale(locale),
 			format: slotLabelFormat
 		});
@@ -311,8 +371,20 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 		});
 	}, []);
 	const getSlotIndexFromDragPoint = (0, react.useCallback)((event, resourceIndex) => {
-		return require_get_index_from_drag_point.getIndexFromDragPoint(slotsRef.current[resourceIndex] ?? [], event.clientX);
-	}, []);
+		const daySlots = slotsRef.current[resourceIndex] ?? [];
+		const index = require_get_index_from_drag_point.getIndexFromDragPoint(daySlots, event.clientX);
+		if (index !== null) {
+			const rect = daySlots[index]?.getBoundingClientRect();
+			if (rect) {
+				const rawOffset = dir === "rtl" ? rect.right - event.clientX : event.clientX - rect.left;
+				dragOffsetRef.current = {
+					offset: Math.max(0, Math.min(rect.width, rawOffset)),
+					size: rect.width
+				};
+			}
+		}
+		return index;
+	}, [dir]);
 	const handleSlotKeyDown = (event, resourceIndex, slotIndex) => {
 		require_handle_resources_grid_key_down.handleResourcesGridKeyDown({
 			controlsRef: slotsRef,
@@ -322,6 +394,7 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 		});
 	};
 	const dayWidthPercent = 100 / weekdays.length;
+	const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== "static";
 	const rows = orderedResources.map((resource, resourceIndex) => {
 		const eventNodes = [];
 		const resourceAllDayBars = weekViewEvents.allDayBars[resource.id] ?? [];
@@ -331,31 +404,19 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 			if (!dayEvents) return;
 			const dayOffsetPercent = dayIndex / weekdays.length * 100;
 			const bgEvents = [...dayEvents.backgroundTimedEvents[resource.id] || [], ...dayEvents.backgroundAllDayEvents[resource.id] || []];
-			for (const event of bgEvents) {
-				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}-${day}`,
-					...getStyles("resourcesWeekViewBackgroundEvent", { style: {
-						left: `${dayOffsetPercent + event.position.top / 100 * dayWidthPercent}%`,
-						width: `${event.position.height / 100 * dayWidthPercent}%`,
-						top: 0,
-						height: "100%"
-					} }),
-					__vars: {
-						"--bg-event-bg": colors.background,
-						"--bg-event-color": colors.color
-					},
-					children: bgEventBody
-				};
-				if (typeof renderEvent === "function") eventNodes.push(renderEvent(event, bgEventProps));
-				else eventNodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...bgEventProps }));
-			}
+			for (const event of bgEvents) eventNodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleBackgroundEvent.ScheduleBackgroundEvent, {
+				event,
+				renderEvent,
+				renderEventBody,
+				interactive: interactiveBackgroundEvents,
+				onEventClick,
+				...getStyles("resourcesWeekViewBackgroundEvent", { style: {
+					left: `${dayOffsetPercent + event.position.top / 100 * dayWidthPercent}%`,
+					width: `${event.position.height / 100 * dayWidthPercent}%`,
+					top: 0,
+					height: "100%"
+				} })
+			}, `bg-${event.id}-${day}`));
 			const allRegularEvents = (dayEvents.regularEvents[resource.id] || []).filter((event) => !require_is_all_day_event.isAllDayEvent({
 				event,
 				date: day
@@ -522,7 +583,7 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 				})
 			}, `all-day-${bar.event.id}-${bar.startDayIndex}`));
 		});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourcesWeekViewRow.ResourcesWeekViewRow, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ResourcesWeekViewRow.ResourcesWeekViewRow, {
 			resource,
 			resourceIndex,
 			weekdays,
@@ -539,10 +600,16 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 			onSlotClick: handleTimeSlotClick,
 			onRowSlotsDragOver: (event, resourceId, resIdx) => {
 				const slotIndex = getSlotIndexFromDragPoint(event, resIdx);
-				if (slotIndex !== null) dragDrop.handleDragOver(event, {
-					resourceId,
-					slotIndex
-				});
+				if (slotIndex !== null) {
+					dragDrop.handleDragOver(event, {
+						resourceId,
+						slotIndex
+					});
+					updateDragPreview({
+						resourceId,
+						slotIndex
+					});
+				}
 			},
 			onRowSlotsDragLeave: dragDrop.handleDragLeave,
 			onRowSlotsDrop: (event, resourceId, resIdx) => {
@@ -552,7 +619,7 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 					slotIndex
 				});
 			},
-			dropTargetSlotIndex: dragDrop.dropTarget?.resourceId === resource.id ? dragDrop.dropTarget.slotIndex : void 0,
+			dropTargetSlotIndex: !suppressDropHighlight && dragDrop.dropTarget?.resourceId === resource.id ? dragDrop.dropTarget.slotIndex : void 0,
 			withDragSlotSelect,
 			onSlotPointerDown: slotDragSelect.handleSlotPointerDown,
 			isSlotDragSelected: slotDragSelect.isSlotSelected,
@@ -564,7 +631,31 @@ const ResourcesWeekView = (0, _mantine_core.factory)((_props) => {
 			scrolledX,
 			groupInfo: hasGroups ? resourceGroupMap[resourceIndex] : void 0,
 			allDayCount: maxAllDayCount,
-			children: eventNodes
+			children: [eventNodes, dragDrop.dragPreview?.target.resourceId === resource.id && dragDrop.dragContextValue.draggedEvent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...getStyles("resourcesWeekViewDragPreview", { style: (() => {
+				const previewDayIndex = Math.floor(dragDrop.dragPreview.target.slotIndex / totalSlotsPerDay);
+				const { top, height } = require_get_day_position.getDayPosition({
+					event: {
+						...dragDrop.dragContextValue.draggedEvent,
+						start: dragDrop.dragPreview.start,
+						end: dragDrop.dragPreview.end
+					},
+					startTime,
+					endTime,
+					intervalMinutes
+				});
+				const eventLeft = previewDayIndex / weekdays.length * 100 + top / 100 * dayWidthPercent;
+				const eventWidth = height / 100 * dayWidthPercent;
+				return {
+					position: "absolute",
+					insetBlockStart: 0,
+					insetBlockEnd: 0,
+					...require_get_time_axis_event_style.getTimeAxisEventStyle({
+						start: eventLeft,
+						span: eventWidth,
+						axis: "horizontal"
+					})
+				};
+			})() }) })]
 		}, resource.id);
 	});
 	const headerLabel = require_get_week_label.getWeekLabel({