@mantine/schedule 9.3.1 → 9.4.0

package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs

@@ -0,0 +1,610 @@
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_labels = require("../../labels.cjs");
+const require_format_date = require("../../utils/format-date/format-date.cjs");
+const require_get_day_time_intervals = require("../../utils/get-day-time-intervals/get-day-time-intervals.cjs");
+const require_to_date_string = require("../../utils/to-date-string/to-date-string.cjs");
+const require_get_week_days = require("../../utils/get-week-days/get-week-days.cjs");
+const require_next_week = require("../../utils/next-week/next-week.cjs");
+const require_previous_week = require("../../utils/previous-week/previous-week.cjs");
+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_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");
+const require_get_ordered_resources = require("../../utils/get-ordered-resources/get-ordered-resources.cjs");
+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_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_ScheduleHeaderBase = require("../ScheduleHeader/ScheduleHeaderBase.cjs");
+const require_get_week_label = require("../WeekView/get-week-label/get-week-label.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");
+let dayjs = require("dayjs");
+dayjs = require_runtime.__toESM(dayjs);
+let _mantine_core = require("@mantine/core");
+let _mantine_hooks = require("@mantine/hooks");
+let react = require("react");
+let _mantine_dates = require("@mantine/dates");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/schedule/src/components/ResourcesWeekView/ResourcesWeekView.tsx
+const defaultProps = {
+	__staticSelector: "ResourcesWeekView",
+	startTime: "00:00:00",
+	endTime: "23:59:59",
+	slotLabelFormat: "HH:mm",
+	intervalMinutes: 60,
+	withHeader: true,
+	weekLabelFormat: "MMM DD",
+	weekdayFormat: "ddd D",
+	highlightBusinessHours: false,
+	businessHours: ["09:00:00", "17:00:00"],
+	withEventsDragAndDrop: false,
+	withDragSlotSelect: false,
+	withWeekendDays: true,
+	withCurrentTimeBubble: true,
+	highlightToday: true,
+	mode: "default",
+	maxEventsPerTimeSlot: 2
+};
+const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, slotWidth, rowHeight, groupLabelWidth }) => ({ resourcesWeekView: {
+	"--resources-week-view-radius": radius ? (0, _mantine_core.getRadius)(radius) : void 0,
+	"--resources-week-view-slot-width": (0, _mantine_core.rem)(slotWidth),
+	"--resources-week-view-row-height": (0, _mantine_core.rem)(rowHeight),
+	"--resources-week-view-group-label-width": (0, _mantine_core.rem)(groupLabelWidth)
+} }));
+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, slotLabelFormat, radius, startScrollDateTime, scrollAreaProps, locale, withCurrentTimeIndicator: _withCurrentTimeIndicator, withCurrentTimeBubble, __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, onTimeSlotClick, onEventClick, 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,
+		classes: require_ResourcesWeekView_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		vars,
+		varsResolver,
+		attributes,
+		rootSelector: "resourcesWeekView"
+	});
+	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
+		classNames,
+		styles,
+		props
+	});
+	const stylesApiProps = {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		attributes,
+		__staticSelector,
+		radius
+	};
+	const theme = (0, _mantine_core.useMantineTheme)();
+	const [scrolled, setScrolled] = (0, react.useState)(false);
+	const [scrolledX, setScrolledX] = (0, react.useState)(false);
+	const ctx = (0, _mantine_dates.useDatesContext)();
+	const slots = require_get_day_time_intervals.getDayTimeIntervals({
+		startTime,
+		endTime,
+		intervalMinutes
+	});
+	const { orderedResources, groupRanges, resourceGroupMap } = (0, react.useMemo)(() => require_get_ordered_resources.getOrderedResources(resources, groups), [resources, groups]);
+	const hasGroups = groupRanges.length > 0;
+	const weekdays = (0, react.useMemo)(() => require_get_week_days.getWeekDays({
+		week: date,
+		withWeekendDays,
+		weekendDays: ctx.getWeekendDays(weekendDays),
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+	}), [
+		date,
+		withWeekendDays,
+		weekendDays,
+		firstDayOfWeek,
+		ctx
+	]);
+	const totalSlotsPerDay = slots.length;
+	const isToday = weekdays.some((day) => (0, dayjs.default)(day).isSame((0, dayjs.default)(), "day"));
+	const withCurrentTimeIndicator = _withCurrentTimeIndicator ?? isToday;
+	const [timeIndicatorOffset, setTimeIndicatorOffset] = (0, react.useState)(require_get_current_time_position.getCurrentTimePosition({
+		startTime,
+		endTime,
+		intervalMinutes
+	}));
+	(0, _mantine_hooks.useInterval)(() => setTimeIndicatorOffset(require_get_current_time_position.getCurrentTimePosition({
+		startTime,
+		endTime,
+		intervalMinutes
+	})), 6e4, { autoInvoke: true });
+	const todayDayIndex = weekdays.findIndex((day) => (0, dayjs.default)(day).isSame((0, dayjs.default)(), "day"));
+	const showTimeIndicator = withCurrentTimeIndicator && todayDayIndex >= 0 && require_is_in_time_range.isInTimeRange({
+		date: (0, dayjs.default)().toDate(),
+		startTime,
+		endTime
+	});
+	const formattedCurrentTime = withCurrentTimeBubble ? require_format_date.formatDate({
+		locale: ctx.getLocale(locale),
+		date: (0, dayjs.default)(),
+		format: slotLabelFormat
+	}) : "";
+	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
+		});
+	}, [
+		onExternalEventDrop,
+		slots,
+		weekdays,
+		totalSlotsPerDay
+	]);
+	const lastDropResourceId = (0, react.useRef)(void 0);
+	const dragDrop = require_use_drag_drop_handlers.useDragDropHandlers({
+		enabled: withEventsDragAndDrop,
+		mode,
+		onEventDrop: (0, react.useCallback)((data) => {
+			onEventDrop?.({
+				...data,
+				resourceId: lastDropResourceId.current
+			});
+		}, [onEventDrop]),
+		canDragEvent,
+		onEventDragStart,
+		onEventDragEnd,
+		calculateDropTarget: (target, draggedEvent) => {
+			lastDropResourceId.current = target.resourceId;
+			const dayIndex = Math.floor(target.slotIndex / totalSlotsPerDay);
+			const slotTime = slots[target.slotIndex % totalSlotsPerDay].startTime;
+			return require_calculate_drop_time.calculateDropTime({
+				draggedEvent,
+				targetDate: weekdays[dayIndex] || weekdays[0],
+				targetSlotTime: slotTime,
+				intervalMinutes
+			});
+		},
+		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
+	});
+	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",
+		onDragEnd: (startIndex, endIndex, group) => {
+			if (!onSlotDragEnd) return;
+			const startDayIndex = Math.floor(startIndex / totalSlotsPerDay);
+			const startSlotInDay = startIndex % totalSlotsPerDay;
+			const endDayIndex = Math.floor(endIndex / totalSlotsPerDay);
+			const endSlotInDay = endIndex % totalSlotsPerDay;
+			const startDay = weekdays[startDayIndex];
+			const endDay = weekdays[endDayIndex];
+			if (startDay && endDay) onSlotDragEnd({
+				rangeStart: `${(0, dayjs.default)(startDay).format("YYYY-MM-DD")} ${slots[startSlotInDay].startTime}`,
+				rangeEnd: `${(0, dayjs.default)(endDay).format("YYYY-MM-DD")} ${slots[endSlotInDay].endTime}`,
+				resourceId: groupToResourceId.get(group) ?? group
+			});
+		}
+	});
+	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
+	const handleTimeSlotClick = (resourceId, day, slotTime, e) => {
+		if (!onTimeSlotClick) return;
+		const slotIndex = slots.findIndex((s) => s.startTime === slotTime);
+		if (slotIndex === -1) return;
+		const slot = slots[slotIndex];
+		const dayStr = (0, dayjs.default)(day).format("YYYY-MM-DD");
+		onTimeSlotClick({
+			slotStart: `${dayStr} ${slot.startTime}`,
+			slotEnd: `${dayStr} ${slot.endTime}`,
+			nativeEvent: e,
+			resourceId
+		});
+	};
+	const weekViewEvents = (0, react.useMemo)(() => require_get_resources_week_view_events.getResourcesWeekViewEvents({
+		events,
+		resources,
+		weekdays,
+		startTime,
+		endTime,
+		expansionLimit: recurrenceExpansionLimit
+	}), [
+		events,
+		resources,
+		weekdays,
+		startTime,
+		endTime,
+		recurrenceExpansionLimit
+	]);
+	const dayLabels = weekdays.map((day) => {
+		const d = (0, dayjs.default)(day);
+		const today = d.isSame((0, dayjs.default)(), "day") && highlightToday;
+		const weekend = ctx.getWeekendDays(weekendDays).includes(d.day());
+		return /* @__PURE__ */ (0, react.createElement)(_mantine_core.Box, {
+			...getStyles("resourcesWeekViewDayLabel"),
+			key: day,
+			mod: {
+				today,
+				weekend
+			},
+			style: { width: `calc(var(--resources-week-view-slot-width) * ${totalSlotsPerDay})` }
+		}, require_format_date.formatDate({
+			date: d,
+			locale: ctx.getLocale(locale),
+			format: weekdayFormat
+		}));
+	});
+	const timeLabels = weekdays.flatMap((day) => slots.map((interval) => {
+		const label = require_format_date.formatDate({
+			date: (0, dayjs.default)(`${(0, dayjs.default)(day).format("YYYY-MM-DD")} ${interval.startTime}`),
+			locale: ctx.getLocale(locale),
+			format: slotLabelFormat
+		});
+		return /* @__PURE__ */ (0, react.createElement)(_mantine_core.Box, {
+			...getStyles("resourcesWeekViewTimeLabel"),
+			key: `${day}-${interval.startTime}`,
+			mod: {
+				"hour-start": interval.isHourStart,
+				...require_get_business_hours_mod.getBusinessHoursMod({
+					time: interval.startTime,
+					businessHours,
+					highlightBusinessHours
+				})
+			}
+		}, label);
+	}));
+	const slotsRef = (0, react.useRef)([]);
+	const rowSlotsContainersRef = (0, react.useRef)([]);
+	const viewportRef = (0, react.useRef)(null);
+	const mergedViewportRef = (0, _mantine_hooks.useMergedRef)(viewportRef, scrollAreaProps?.viewportRef);
+	const firstSlotIndex = {
+		resourceIndex: 0,
+		slotIndex: 0
+	};
+	(0, _mantine_hooks.useIsomorphicEffect)(() => {
+		if (!startScrollDateTime || !viewportRef.current) return;
+		const parsed = (0, dayjs.default)(startScrollDateTime);
+		const targetDayStr = parsed.format("YYYY-MM-DD 00:00:00");
+		const targetTime = parsed.format("HH:mm:ss");
+		const dayIndex = weekdays.indexOf(targetDayStr);
+		if (dayIndex < 0) return;
+		const slotInDay = slots.findIndex((s) => s.startTime >= targetTime);
+		if (slotInDay < 0) return;
+		const flatIndex = dayIndex * totalSlotsPerDay + slotInDay;
+		const firstResourceSlots = slotsRef.current[0];
+		if (!firstResourceSlots || firstResourceSlots.length === 0) return;
+		const targetSlot = firstResourceSlots[flatIndex];
+		if (!targetSlot) return;
+		const slotRect = targetSlot.getBoundingClientRect();
+		const viewportRect = viewportRef.current.getBoundingClientRect();
+		const cornerEl = viewportRef.current.querySelector(`.${require_ResourcesWeekView_module.default.resourcesWeekViewCorner}`);
+		const labelWidth = cornerEl ? cornerEl.getBoundingClientRect().width : 0;
+		viewportRef.current.scrollTo({
+			left: slotRect.left - viewportRect.left - labelWidth,
+			top: 0
+		});
+	}, []);
+	const getSlotIndexFromDragPoint = (0, react.useCallback)((event, resourceIndex) => {
+		return require_get_index_from_drag_point.getIndexFromDragPoint(slotsRef.current[resourceIndex] ?? [], event.clientX);
+	}, []);
+	const handleSlotKeyDown = (event, resourceIndex, slotIndex) => {
+		require_handle_resources_grid_key_down.handleResourcesGridKeyDown({
+			controlsRef: slotsRef,
+			resourceIndex,
+			slotIndex,
+			event
+		});
+	};
+	const dayWidthPercent = 100 / weekdays.length;
+	const rows = orderedResources.map((resource, resourceIndex) => {
+		const eventNodes = [];
+		const resourceAllDayBars = weekViewEvents.allDayBars[resource.id] ?? [];
+		const maxAllDayCount = resourceAllDayBars.reduce((max, bar) => Math.max(max, bar.row + 1), 0);
+		weekdays.forEach((day, dayIndex) => {
+			const dayEvents = weekViewEvents.byDay[day];
+			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 }));
+			}
+			const allRegularEvents = (dayEvents.regularEvents[resource.id] || []).filter((event) => !require_is_all_day_event.isAllDayEvent({
+				event,
+				date: day
+			}));
+			const visibleEvents = maxEventsPerTimeSlot !== void 0 ? allRegularEvents.filter((event) => event.position.column < maxEventsPerTimeSlot) : allRegularEvents;
+			for (const event of visibleEvents) {
+				const isDraggable = dragDrop.isDraggableEvent(event);
+				const eventLeft = dayOffsetPercent + event.position.top / 100 * dayWidthPercent;
+				const eventWidth = event.position.height / 100 * dayWidthPercent;
+				const adjustPosition = maxEventsPerTimeSlot !== void 0 && event.position.overlaps > maxEventsPerTimeSlot;
+				eventNodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					...getStyles("resourcesWeekViewEventWrapper"),
+					style: {
+						left: `calc(${eventLeft}% + 1px)`,
+						top: adjustPosition ? `calc((100% - 22px) * ${event.position.column} / ${maxEventsPerTimeSlot})` : `${event.position.offset}%`,
+						width: `calc(${eventWidth}% - 2px)`,
+						height: adjustPosition ? `calc((100% - 22px) / ${maxEventsPerTimeSlot})` : `${event.position.width}%`
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleEvent.ScheduleEvent, {
+						event,
+						autoSize: true,
+						nowrap: true,
+						draggable: isDraggable,
+						renderEventBody,
+						renderEvent,
+						radius,
+						mode,
+						onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
+						style: {
+							width: "100%",
+							height: "100%"
+						}
+					})
+				}, `${event.id}-${day}`));
+			}
+			if (maxEventsPerTimeSlot !== void 0) {
+				const clusters = require_get_overlap_clusters.getOverlapClusters(allRegularEvents);
+				for (const cluster of clusters) {
+					const hiddenCount = cluster.filter((e) => e.position.column >= maxEventsPerTimeSlot).length;
+					if (hiddenCount > 0 && mode !== "static") {
+						const leftPercent = dayOffsetPercent + Math.min(...cluster.map((e) => e.position.top)) / 100 * dayWidthPercent;
+						const rightPercent = dayOffsetPercent + Math.max(...cluster.map((e) => e.position.top + e.position.height)) / 100 * dayWidthPercent;
+						eventNodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MoreEvents.MoreEvents, {
+							events: cluster,
+							moreEventsCount: hiddenCount,
+							mode,
+							labels,
+							renderEventBody,
+							renderEvent,
+							onEventClick,
+							style: {
+								position: "absolute",
+								left: `calc(${leftPercent}% + 1px)`,
+								width: `calc(${rightPercent - leftPercent}% - 2px)`,
+								bottom: 0,
+								height: "22px",
+								paddingInline: 4,
+								zIndex: 4
+							},
+							...stylesApiProps,
+							...moreEventsProps
+						}, `more-${resource.id}-${day}-${cluster[0].id}`));
+					}
+				}
+			}
+		});
+		const stickyLabelOffset = hasGroups ? "calc(var(--resources-week-view-group-label-width) + var(--resources-week-view-resource-label-width) + 5px)" : "calc(var(--resources-week-view-resource-label-width) + 5px)";
+		resourceAllDayBars.forEach((bar) => {
+			const leftPercent = bar.startDayIndex * dayWidthPercent;
+			const widthPercent = (bar.endDayIndex - bar.startDayIndex + 1) * dayWidthPercent;
+			eventNodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...getStyles("resourcesWeekViewAllDayEvent", { style: {
+					left: `calc(${leftPercent}% + 1px)`,
+					width: `calc(${widthPercent}% - 2px)`,
+					top: `calc(${bar.row} * (var(--resources-week-view-all-day-height) + 2px) + 2px)`
+				} }),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleEvent.ScheduleEvent, {
+					event: bar.event,
+					autoSize: true,
+					nowrap: true,
+					renderEventBody: (barEvent) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							position: "sticky",
+							insetInlineStart: stickyLabelOffset,
+							display: "inline-block",
+							maxWidth: "100%",
+							overflow: "hidden",
+							textOverflow: "ellipsis"
+						},
+						children: renderEventBody ? renderEventBody(barEvent) : barEvent.title
+					}),
+					renderEvent,
+					radius,
+					mode,
+					onClick: onEventClick ? (e) => onEventClick(bar.event, e) : void 0,
+					style: {
+						width: "100%",
+						height: "100%",
+						overflow: "visible"
+					},
+					styles: { eventInner: {
+						display: "block",
+						overflow: "visible",
+						lineHeight: "var(--resources-week-view-all-day-height)"
+					} }
+				})
+			}, `all-day-${bar.event.id}-${bar.startDayIndex}`));
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourcesWeekViewRow.ResourcesWeekViewRow, {
+			resource,
+			resourceIndex,
+			weekdays,
+			slots,
+			getStyles,
+			labels,
+			highlightBusinessHours,
+			businessHours,
+			withEventsDragAndDrop: withDragHandlers,
+			mode,
+			slotsRef,
+			firstSlotIndex,
+			onSlotKeyDown: handleSlotKeyDown,
+			onSlotClick: handleTimeSlotClick,
+			onRowSlotsDragOver: (event, resourceId, resIdx) => {
+				const slotIndex = getSlotIndexFromDragPoint(event, resIdx);
+				if (slotIndex !== null) dragDrop.handleDragOver(event, {
+					resourceId,
+					slotIndex
+				});
+			},
+			onRowSlotsDragLeave: dragDrop.handleDragLeave,
+			onRowSlotsDrop: (event, resourceId, resIdx) => {
+				const slotIndex = getSlotIndexFromDragPoint(event, resIdx);
+				if (slotIndex !== null) dragDrop.handleDrop(event, {
+					resourceId,
+					slotIndex
+				});
+			},
+			dropTargetSlotIndex: dragDrop.dropTarget?.resourceId === resource.id ? dragDrop.dropTarget.slotIndex : void 0,
+			withDragSlotSelect,
+			onSlotPointerDown: slotDragSelect.handleSlotPointerDown,
+			isSlotDragSelected: slotDragSelect.isSlotSelected,
+			rowSlotsContainerRef: (node) => {
+				rowSlotsContainersRef.current[resourceIndex] = node;
+			},
+			renderResourceLabel,
+			renderGroupLabel,
+			scrolledX,
+			groupInfo: hasGroups ? resourceGroupMap[resourceIndex] : void 0,
+			allDayCount: maxAllDayCount,
+			children: eventNodes
+		}, resource.id);
+	});
+	const headerLabel = require_get_week_label.getWeekLabel({
+		weekdays,
+		locale: ctx.getLocale(locale),
+		weekLabelFormat,
+		renderWeekLabel
+	});
+	const indicatorLeftPercent = todayDayIndex >= 0 ? (todayDayIndex + timeIndicatorOffset / 100) / weekdays.length * 100 : 0;
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+		...getStyles("resourcesWeekView"),
+		mod: {
+			static: mode === "static",
+			"slot-dragging": slotDragSelect.isDragging,
+			"event-interaction": dragDrop.dragContextValue.isDragging
+		},
+		...others,
+		children: [withHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleHeaderBase.ScheduleHeaderBase, {
+			view: "week",
+			navigationHandlers: {
+				previous: () => require_previous_week.previousWeek(date, ctx.getFirstDayOfWeek(firstDayOfWeek)),
+				next: () => require_next_week.nextWeek(date, ctx.getFirstDayOfWeek(firstDayOfWeek)),
+				today: () => require_to_date_string.toDateString((0, dayjs.default)())
+			},
+			control: {
+				miw: 180,
+				title: headerLabel
+			},
+			labels,
+			onDateChange,
+			onViewChange,
+			previousControlProps,
+			nextControlProps,
+			todayControlProps,
+			viewSelectProps: {
+				views: [
+					"day",
+					"week",
+					"month"
+				],
+				...viewSelectProps
+			},
+			stylesApiProps
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
+			...getStyles("resourcesWeekViewRoot"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ScrollArea, {
+				scrollbarSize: 4,
+				...scrollAreaProps,
+				...getStyles("resourcesWeekViewScrollArea", {
+					className: scrollAreaProps?.className,
+					style: scrollAreaProps?.style
+				}),
+				onScrollPositionChange: (position) => {
+					scrollAreaProps?.onScrollPositionChange?.(position);
+					setScrolled(position.y !== 0);
+					setScrolledX(position.x !== 0);
+				},
+				viewportRef: mergedViewportRef,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					...getStyles("resourcesWeekViewInner"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							...getStyles("resourcesWeekViewHeaderRows"),
+							children: [/* @__PURE__ */ (0, react.createElement)("div", {
+								...getStyles("resourcesWeekViewCorner"),
+								key: "corner",
+								style: hasGroups ? {
+									flexBasis: "calc(var(--resources-week-view-resource-label-width) + var(--resources-week-view-group-label-width))",
+									minWidth: "calc(var(--resources-week-view-resource-label-width) + var(--resources-week-view-group-label-width))"
+								} : void 0
+							}, require_labels.getLabel("resources", labels)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								...getStyles("resourcesWeekViewHeaderContent"),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									...getStyles("resourcesWeekViewDayLabelsRow"),
+									children: dayLabels
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
+									...getStyles("resourcesWeekViewTimeLabelsRow"),
+									mod: { scrolled },
+									children: timeLabels
+								})]
+							})]
+						}),
+						rows,
+						showTimeIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+							...getStyles("resourcesWeekViewCurrentTimeIndicator"),
+							__vars: {
+								"--indicator-left-offset": hasGroups ? `calc(var(--resources-week-view-resource-label-width) + var(--resources-week-view-group-label-width) + (100% - var(--resources-week-view-resource-label-width) - var(--resources-week-view-group-label-width)) * ${indicatorLeftPercent} / 100)` : `calc(var(--resources-week-view-resource-label-width) + (100% - var(--resources-week-view-resource-label-width)) * ${indicatorLeftPercent} / 100)`,
+								"--_time-bubble-width": formattedCurrentTime?.toString().toLowerCase().includes("m") ? "64px" : "46px"
+							},
+							children: [
+								withCurrentTimeBubble && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									...getStyles("resourcesWeekViewCurrentTimeIndicatorTimeBubble"),
+									children: formattedCurrentTime
+								}),
+								!withCurrentTimeBubble && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("resourcesWeekViewCurrentTimeIndicatorThumb") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("resourcesWeekViewCurrentTimeIndicatorLine") })
+							]
+						})
+					]
+				})
+			})
+		})]
+	});
+	const dragContextValue = (0, react.useMemo)(() => dragDrop.dragContextValue, [dragDrop.dragContextValue]);
+	if (withEventsDragAndDrop) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DragContext.DragContext.Provider, {
+		value: dragContextValue,
+		children: content
+	});
+	return content;
+});
+ResourcesWeekView.displayName = "@mantine/schedule/ResourcesWeekView";
+ResourcesWeekView.classes = require_ResourcesWeekView_module.default;
+ResourcesWeekView.varsResolver = varsResolver;
+//#endregion
+exports.ResourcesWeekView = ResourcesWeekView;
+
+//# sourceMappingURL=ResourcesWeekView.cjs.map