@mantine/schedule 9.3.2 → 9.4.1

package/esm/components/ResourcesMonthView/ResourcesMonthView.mjs

@@ -0,0 +1,600 @@
+"use client";
+import { getLabel } from "../../labels.mjs";
+import { formatDate } from "../../utils/format-date/format-date.mjs";
+import { toDateString } from "../../utils/to-date-string/to-date-string.mjs";
+import { calculateMonthDropDate } from "../../utils/calculate-month-drop-date/calculate-month-drop-date.mjs";
+import { expandRecurringEvents } from "../../utils/expand-recurring-events/expand-recurring-events.mjs";
+import { getOrderedResources } from "../../utils/get-ordered-resources/get-ordered-resources.mjs";
+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 { useDragDropHandlers } from "../../hooks/use-drag-drop-handlers.mjs";
+import { useSlotDragSelect } from "../../hooks/use-slot-drag-select.mjs";
+import { DragContext } from "../DragContext/DragContext.mjs";
+import { ScheduleEvent } from "../ScheduleEvent/ScheduleEvent.mjs";
+import { MoreEvents } from "../MoreEvents/MoreEvents.mjs";
+import { ScheduleHeaderBase } from "../ScheduleHeader/ScheduleHeaderBase.mjs";
+import ResourcesMonthView_module_default from "./ResourcesMonthView.module.mjs";
+import dayjs from "dayjs";
+import { Box, ScrollArea, UnstyledButton, createVarsResolver, factory, getRadius, rem, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
+import { useIsomorphicEffect, useMergedRef } from "@mantine/hooks";
+import { createElement, useCallback, useMemo, useRef } from "react";
+import { useDatesContext } from "@mantine/dates";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/schedule/src/components/ResourcesMonthView/ResourcesMonthView.tsx
+const varsResolver = createVarsResolver((_theme, { radius, dayWidth, rowHeight, groupLabelWidth }) => ({ resourcesMonthView: {
+	"--resources-month-view-radius": radius ? getRadius(radius) : void 0,
+	"--resources-month-view-day-width": rem(dayWidth),
+	"--resources-month-view-row-height": rem(rowHeight),
+	"--resources-month-view-group-label-width": rem(groupLabelWidth)
+} }));
+const defaultProps = {
+	__staticSelector: "ResourcesMonthView",
+	highlightToday: true,
+	withHeader: true,
+	weekdayFormat: "ddd",
+	withWeekendDays: true,
+	withEventsDragAndDrop: false,
+	withDragSlotSelect: false,
+	mode: "default"
+};
+function compareCellEvents(a, b) {
+	const aStart = dayjs(a.start);
+	const bStart = dayjs(b.start);
+	const aSpan = dayjs(a.end).startOf("day").diff(aStart.startOf("day"), "day");
+	const bSpan = dayjs(b.end).startOf("day").diff(bStart.startOf("day"), "day");
+	if (aSpan !== bSpan) return bSpan - aSpan;
+	return aStart.valueOf() - bStart.valueOf();
+}
+function getFirstAvailableRow(usedRows, maxRows) {
+	for (let row = 0; row < maxRows; row += 1) if (!usedRows.has(row)) return row;
+	return null;
+}
+function isMultiDayEvent(event) {
+	return dayjs(event.end).startOf("day").isAfter(dayjs(event.start).startOf("day"));
+}
+const ResourcesMonthView = factory((_props) => {
+	const props = useProps("ResourcesMonthView", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, attributes, vars, mod, date, onDateChange, resources, locale, weekdayFormat, weekendDays, withWeekendDays, startScrollDate, __staticSelector, onDayClick, highlightToday, radius, withHeader, monthYearSelectProps, onViewChange, todayControlProps, nextControlProps, previousControlProps, viewSelectProps, events, dayWidth, rowHeight, renderResourceLabel, groups, renderGroupLabel, groupLabelWidth, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onEventClick, withDragSlotSelect, onSlotDragEnd, labels, mode, scrollAreaProps, onExternalEventDrop, maxEventsPerTimeSlot: _maxEventsPerTimeSlot, moreEventsProps, recurrenceExpansionLimit, ...others } = props;
+	const maxEventsPerTimeSlot = Math.min(10, Math.max(1, _maxEventsPerTimeSlot ?? 2));
+	const getStyles = useStyles({
+		name: __staticSelector,
+		classes: ResourcesMonthView_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "resourcesMonthView"
+	});
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		classNames,
+		styles,
+		props
+	});
+	const stylesApiProps = {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		attributes,
+		__staticSelector,
+		radius
+	};
+	const ctx = useDatesContext();
+	const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);
+	const { orderedResources, groupRanges, resourceGroupMap } = useMemo(() => getOrderedResources(resources, groups), [resources, groups]);
+	const hasGroups = groupRanges.length > 0;
+	const monthDays = useMemo(() => {
+		const start = dayjs(date).startOf("month");
+		const daysCount = start.endOf("month").date();
+		const weekendDayList = ctx.getWeekendDays(weekendDays);
+		const days = [];
+		for (let d = 1; d <= daysCount; d++) {
+			const day = start.date(d);
+			if (!withWeekendDays && weekendDayList.includes(day.day())) continue;
+			days.push(day.format("YYYY-MM-DD"));
+		}
+		return days;
+	}, [
+		date,
+		withWeekendDays,
+		weekendDays,
+		ctx
+	]);
+	const viewportRef = useRef(null);
+	const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);
+	const dayLabelRefs = useRef([]);
+	const resourceLabelRef = useRef(null);
+	const scrollToDay = useCallback((targetDate) => {
+		if (!viewportRef.current) return;
+		const targetIndex = monthDays.indexOf(targetDate);
+		if (targetIndex < 0) return;
+		const targetLabel = dayLabelRefs.current[targetIndex];
+		if (!targetLabel) return;
+		const labelRect = targetLabel.getBoundingClientRect();
+		const viewportRect = viewportRef.current.getBoundingClientRect();
+		const labelWidth = resourceLabelRef.current?.getBoundingClientRect().width ?? 0;
+		viewportRef.current.scrollTo({
+			left: labelRect.left - viewportRect.left - labelWidth,
+			top: 0
+		});
+	}, [monthDays]);
+	useIsomorphicEffect(() => {
+		if (startScrollDate) scrollToDay(startScrollDate);
+	}, []);
+	const expandedEvents = useMemo(() => expandRecurringEvents({
+		events,
+		rangeStart: dayjs(date).startOf("month").toDate(),
+		rangeEnd: dayjs(date).endOf("month").toDate(),
+		expansionLimit: recurrenceExpansionLimit
+	}), [
+		events,
+		date,
+		recurrenceExpansionLimit
+	]);
+	const { eventsByResourceAndDay, eventLayoutByResource } = useMemo(() => {
+		const eventsByResourceAndDay = {};
+		for (const resource of resources) {
+			eventsByResourceAndDay[resource.id] = {};
+			for (const day of monthDays) eventsByResourceAndDay[resource.id][day] = [];
+		}
+		if (expandedEvents) for (const event of expandedEvents) {
+			if (event.resourceId === void 0 || !(event.resourceId in eventsByResourceAndDay)) continue;
+			const eventStart = dayjs(event.start);
+			const eventEnd = dayjs(event.end);
+			for (const day of monthDays) {
+				const dayStart = dayjs(day).startOf("day");
+				const dayEnd = dayjs(day).endOf("day");
+				if (eventStart.isBefore(dayEnd) && eventEnd.isAfter(dayStart)) eventsByResourceAndDay[event.resourceId][day].push(event);
+			}
+		}
+		const eventLayoutByResource = {};
+		const monthRangeStart = dayjs(monthDays[0]).startOf("day");
+		const monthEndExclusive = dayjs(monthDays[monthDays.length - 1]).add(1, "day").startOf("day");
+		for (const resource of resources) {
+			const byDay = {};
+			const lastRow = /* @__PURE__ */ new Map();
+			const rowByEventDay = /* @__PURE__ */ new Map();
+			const overlapByEvent = /* @__PURE__ */ new Map();
+			monthDays.forEach((day, dayIndex) => {
+				const dayEvents = eventsByResourceAndDay[resource.id][day];
+				dayEvents.sort(compareCellEvents);
+				for (const event of dayEvents) {
+					const overlap = overlapByEvent.get(event.id);
+					if (overlap) overlap.days.push(dayIndex);
+					else overlapByEvent.set(event.id, {
+						event,
+						days: [dayIndex]
+					});
+				}
+				const usedRows = /* @__PURE__ */ new Set();
+				const visible = [];
+				let hiddenCount = 0;
+				for (const event of dayEvents) {
+					let row = lastRow.get(event.id);
+					if (row === void 0 || row >= maxEventsPerTimeSlot || usedRows.has(row)) row = getFirstAvailableRow(usedRows, maxEventsPerTimeSlot);
+					if (row === null) {
+						hiddenCount += 1;
+						continue;
+					}
+					usedRows.add(row);
+					visible.push({
+						event,
+						row
+					});
+					if (!rowByEventDay.has(event.id)) rowByEventDay.set(event.id, /* @__PURE__ */ new Map());
+					rowByEventDay.get(event.id).set(dayIndex, row);
+					lastRow.set(event.id, row);
+				}
+				byDay[day] = {
+					visible,
+					hiddenCount
+				};
+			});
+			const segments = [];
+			for (const { event, days } of overlapByEvent.values()) {
+				if (!isMultiDayEvent(event)) continue;
+				const firstOverlap = days[0];
+				const lastOverlap = days[days.length - 1];
+				const rows = rowByEventDay.get(event.id);
+				const extendsBefore = dayjs(event.start).isBefore(monthRangeStart);
+				const extendsAfter = dayjs(event.end).isAfter(monthEndExclusive);
+				let run = null;
+				const flushRun = () => {
+					if (!run) return;
+					const clipStart = run.startDayIndex > firstOverlap;
+					const clipEnd = run.endDayIndex < lastOverlap;
+					const hangStart = !clipStart && extendsBefore;
+					const hangEnd = !clipEnd && extendsAfter;
+					let hiddenInSpan = false;
+					for (let dayIndex = run.startDayIndex; dayIndex <= run.endDayIndex; dayIndex += 1) if ((byDay[monthDays[dayIndex]]?.hiddenCount ?? 0) > 0) {
+						hiddenInSpan = true;
+						break;
+					}
+					segments.push({
+						event,
+						startDayIndex: run.startDayIndex,
+						endDayIndex: run.endDayIndex,
+						row: run.row,
+						clipStart,
+						clipEnd,
+						hanging: hangStart && hangEnd ? "both" : hangStart ? "start" : hangEnd ? "end" : "none",
+						hiddenInSpan
+					});
+					run = null;
+				};
+				for (let dayIndex = firstOverlap; dayIndex <= lastOverlap; dayIndex += 1) {
+					const row = rows?.get(dayIndex);
+					if (row === void 0) {
+						flushRun();
+						continue;
+					}
+					if (run && run.row === row && run.endDayIndex === dayIndex - 1) run.endDayIndex = dayIndex;
+					else {
+						flushRun();
+						run = {
+							startDayIndex: dayIndex,
+							endDayIndex: dayIndex,
+							row
+						};
+					}
+				}
+				flushRun();
+			}
+			eventLayoutByResource[resource.id] = {
+				byDay,
+				segments
+			};
+		}
+		return {
+			eventsByResourceAndDay,
+			eventLayoutByResource
+		};
+	}, [
+		resources,
+		monthDays,
+		expandedEvents,
+		maxEventsPerTimeSlot
+	]);
+	const handleExternalDrop = useCallback((e, target) => {
+		if (!onExternalEventDrop) return;
+		onExternalEventDrop({
+			dataTransfer: e.dataTransfer,
+			dropDateTime: `${dayjs(target.day).format("YYYY-MM-DD")} 00:00:00`,
+			resourceId: target.resourceId
+		});
+	}, [onExternalEventDrop]);
+	const dragDrop = useDragDropHandlers({
+		enabled: withEventsDragAndDrop,
+		mode,
+		onEventDrop: (data) => {
+			onEventDrop?.({
+				...data,
+				resourceId: lastDropResourceId.current
+			});
+		},
+		canDragEvent,
+		onEventDragStart,
+		onEventDragEnd,
+		calculateDropTarget: (target, draggedEvent) => {
+			lastDropResourceId.current = target.resourceId;
+			return calculateMonthDropDate({
+				draggedEvent,
+				targetDay: target.day
+			});
+		},
+		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
+	});
+	const lastDropResourceId = useRef(void 0);
+	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
+	const groupToResourceId = useMemo(() => getGroupToResourceIdMap(resources), [resources]);
+	const slotDragSelect = useSlotDragSelect({
+		enabled: withDragSlotSelect && mode !== "static",
+		onDragEnd: (startIndex, endIndex, group) => {
+			if (!onSlotDragEnd) return;
+			const startDay = monthDays[startIndex];
+			const endDay = monthDays[endIndex];
+			if (startDay && endDay) onSlotDragEnd({
+				rangeStart: dayjs(startDay).startOf("day").format("YYYY-MM-DD HH:mm:ss"),
+				rangeEnd: dayjs(endDay).endOf("day").format("YYYY-MM-DD HH:mm:ss"),
+				resourceId: groupToResourceId.get(group) ?? group
+			});
+		}
+	});
+	const dayLabels = monthDays.map((day, dayIndex) => {
+		const d = dayjs(day);
+		const weekend = resolvedWeekendDays.includes(d.day());
+		const today = d.isSame(dayjs(), "day") && highlightToday;
+		return /* @__PURE__ */ createElement(Box, {
+			...getStyles("resourcesMonthViewDayLabel"),
+			key: day,
+			mod: {
+				weekend,
+				today
+			},
+			ref: (node) => {
+				dayLabelRefs.current[dayIndex] = node;
+			}
+		}, /* @__PURE__ */ jsx("span", {
+			...getStyles("resourcesMonthViewDayLabelWeekday"),
+			children: formatDate({
+				date: d,
+				locale: ctx.getLocale(locale),
+				format: weekdayFormat
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			...getStyles("resourcesMonthViewDayLabelNumber"),
+			children: d.date()
+		}));
+	});
+	const cellsRef = useRef([]);
+	const getDayIndexFromDragPoint = useCallback((event, resourceIndex) => {
+		return getIndexFromDragPoint(cellsRef.current[resourceIndex] ?? [], event.clientX);
+	}, []);
+	const handleCellKeyDown = (event, resourceIndex, dayIndex) => {
+		const key = event.key;
+		let nextResourceIndex = resourceIndex;
+		let nextDayIndex = dayIndex;
+		if (key === "ArrowRight") nextDayIndex = Math.min(dayIndex + 1, monthDays.length - 1);
+		else if (key === "ArrowLeft") nextDayIndex = Math.max(dayIndex - 1, 0);
+		else if (key === "ArrowDown") nextResourceIndex = Math.min(resourceIndex + 1, resources.length - 1);
+		else if (key === "ArrowUp") nextResourceIndex = Math.max(resourceIndex - 1, 0);
+		else return;
+		event.preventDefault();
+		cellsRef.current[nextResourceIndex]?.[nextDayIndex]?.focus();
+	};
+	const rowHeightPercent = 100 / maxEventsPerTimeSlot;
+	const rows = orderedResources.map((resource, resourceIndex) => {
+		if (!cellsRef.current[resourceIndex]) cellsRef.current[resourceIndex] = [];
+		const slotGroup = String(resource.id);
+		const dropTarget = dragDrop.dropTarget;
+		const totalDays = monthDays.length;
+		const eventNodes = [];
+		const moreNodes = [];
+		const cells = monthDays.map((day, dayIndex) => {
+			const d = dayjs(day);
+			const weekend = ctx.getWeekendDays(weekendDays).includes(d.day());
+			const isDropTarget = dropTarget !== null && typeof dropTarget === "object" && "day" in dropTarget && dropTarget.day === day && dropTarget.resourceId === resource.id;
+			const isDragSelected = slotDragSelect.isSlotSelected(dayIndex, slotGroup);
+			const dayEvents = eventsByResourceAndDay[resource.id]?.[day] || [];
+			const layout = eventLayoutByResource[resource.id]?.byDay[day];
+			const visibleEvents = layout?.visible ?? [];
+			const hiddenEventsCount = layout?.hiddenCount ?? 0;
+			const isFirstCell = resourceIndex === 0 && dayIndex === 0;
+			const dayLeftPercent = dayIndex / totalDays * 100;
+			const dayWidthPercent = 100 / totalDays;
+			const hasHiddenEvents = hiddenEventsCount > 0 && mode !== "static";
+			visibleEvents.forEach(({ event, row }) => {
+				if (isMultiDayEvent(event)) return;
+				const isDraggable = dragDrop.isDraggableEvent(event);
+				const topValue = hasHiddenEvents ? `calc((100% - 18px) * ${row} / ${maxEventsPerTimeSlot} + 1px)` : `calc(${row * rowHeightPercent}% + 1px)`;
+				const heightValue = hasHiddenEvents ? `calc((100% - 18px) / ${maxEventsPerTimeSlot} - 2px)` : `calc(${rowHeightPercent}% - 2px)`;
+				eventNodes.push(/* @__PURE__ */ jsx(ScheduleEvent, {
+					event,
+					nowrap: true,
+					autoSize: true,
+					size: "sm",
+					draggable: isDraggable,
+					renderEventBody,
+					renderEvent,
+					radius,
+					mode,
+					onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
+					style: {
+						position: "absolute",
+						top: topValue,
+						left: `calc(${dayLeftPercent}% + 1px)`,
+						width: `calc(${dayWidthPercent}% - 2px)`,
+						height: heightValue,
+						zIndex: 3
+					}
+				}, `${event.id}-${day}`));
+			});
+			if (hiddenEventsCount > 0 && mode !== "static") moreNodes.push(/* @__PURE__ */ jsx(MoreEvents, {
+				events: dayEvents,
+				moreEventsCount: hiddenEventsCount,
+				mode,
+				labels,
+				renderEventBody,
+				renderEvent,
+				onEventClick,
+				style: {
+					position: "absolute",
+					bottom: 1,
+					left: `calc(${dayLeftPercent}% + 1px)`,
+					width: `calc(${dayWidthPercent}% - 2px)`,
+					height: 18,
+					zIndex: 4
+				},
+				...stylesApiProps,
+				...moreEventsProps
+			}, `more-${resource.id}-${day}`));
+			return /* @__PURE__ */ jsx(UnstyledButton, {
+				ref: (node) => {
+					if (node) {
+						if (!cellsRef.current[resourceIndex]) cellsRef.current[resourceIndex] = [];
+						cellsRef.current[resourceIndex][dayIndex] = node;
+					}
+				},
+				...getStyles("resourcesMonthViewCell"),
+				"aria-label": `${resource.label} ${d.format("MMMM D, YYYY")}`,
+				"data-drag-slot-index": withDragSlotSelect && mode !== "static" ? dayIndex : void 0,
+				"data-drag-slot-group": withDragSlotSelect && mode !== "static" ? slotGroup : void 0,
+				mod: {
+					weekend,
+					"drop-target": isDropTarget,
+					"drag-selected": isDragSelected,
+					static: mode === "static"
+				},
+				tabIndex: mode === "static" ? -1 : isFirstCell ? 0 : -1,
+				onClick: mode === "static" ? void 0 : (e) => onDayClick?.({
+					date: day,
+					nativeEvent: e,
+					resourceId: resource.id
+				}),
+				onKeyDown: mode === "static" ? void 0 : (e) => handleCellKeyDown(e, resourceIndex, dayIndex),
+				onPointerDown: withDragSlotSelect && mode !== "static" ? (e) => slotDragSelect.handleSlotPointerDown(e, dayIndex, slotGroup) : void 0,
+				onDragOver: withDragHandlers ? (e) => e.preventDefault() : void 0
+			}, day);
+		});
+		(eventLayoutByResource[resource.id]?.segments ?? []).forEach((segment) => {
+			const isDraggable = dragDrop.isDraggableEvent(segment.event);
+			const segmentLeftPercent = segment.startDayIndex / totalDays * 100;
+			const segmentWidthPercent = (segment.endDayIndex - segment.startDayIndex + 1) / totalDays * 100;
+			const compressed = segment.hiddenInSpan && mode !== "static";
+			const topValue = compressed ? `calc((100% - 18px) * ${segment.row} / ${maxEventsPerTimeSlot} + 1px)` : `calc(${segment.row * rowHeightPercent}% + 1px)`;
+			const heightValue = compressed ? `calc((100% - 18px) / ${maxEventsPerTimeSlot} - 2px)` : `calc(${rowHeightPercent}% - 2px)`;
+			eventNodes.push(/* @__PURE__ */ jsx(ScheduleEvent, {
+				event: segment.event,
+				nowrap: true,
+				autoSize: true,
+				size: "sm",
+				hanging: segment.hanging,
+				draggable: isDraggable,
+				renderEventBody,
+				renderEvent,
+				radius,
+				mode,
+				mod: {
+					"clip-start": segment.clipStart,
+					"clip-end": segment.clipEnd
+				},
+				onClick: onEventClick ? (e) => onEventClick(segment.event, e) : void 0,
+				style: {
+					position: "absolute",
+					top: topValue,
+					left: `calc(${segmentLeftPercent}% + 1px)`,
+					width: `calc(${segmentWidthPercent}% - 2px)`,
+					height: heightValue,
+					zIndex: 3
+				}
+			}, `${segment.event.id}-segment-${segment.startDayIndex}`));
+		});
+		const groupInfo = hasGroups ? resourceGroupMap[resourceIndex] : void 0;
+		const isGroupStart = groupInfo?.position === "first" || groupInfo?.position === "only";
+		const groupCell = groupInfo !== void 0 ? groupInfo !== null ? /* @__PURE__ */ jsx(Box, {
+			...getStyles("resourcesMonthViewGroupColumn"),
+			mod: { "group-position": groupInfo.position },
+			children: isGroupStart && /* @__PURE__ */ jsx("span", {
+				style: groupInfo.count > 1 ? { transform: `translateY(calc((${groupInfo.count - 1} * (var(--resources-month-view-row-height) + 1px)) / 2))` } : void 0,
+				children: renderGroupLabel ? renderGroupLabel(groupInfo.group) : groupInfo.group.label
+			})
+		}) : /* @__PURE__ */ jsx(Box, { ...getStyles("resourcesMonthViewGroupColumnEmpty") }) : null;
+		return /* @__PURE__ */ createElement("div", {
+			...getStyles("resourcesMonthViewRow"),
+			key: resource.id
+		}, groupCell, /* @__PURE__ */ jsx("div", {
+			...getStyles("resourcesMonthViewResourceLabel"),
+			"data-has-groups": hasGroups || void 0,
+			children: renderResourceLabel ? renderResourceLabel(resource) : resource.label
+		}), /* @__PURE__ */ jsxs("div", {
+			...getStyles("resourcesMonthViewRowSlots"),
+			onDragOver: withDragHandlers ? (e) => {
+				const dayIndex = getDayIndexFromDragPoint(e, resourceIndex);
+				if (dayIndex !== null && monthDays[dayIndex]) dragDrop.handleDragOver(e, {
+					day: monthDays[dayIndex],
+					resourceId: resource.id
+				});
+			} : void 0,
+			onDragLeave: withDragHandlers ? dragDrop.handleDragLeave : void 0,
+			onDrop: withDragHandlers ? (e) => {
+				const dayIndex = getDayIndexFromDragPoint(e, resourceIndex);
+				if (dayIndex !== null && monthDays[dayIndex]) dragDrop.handleDrop(e, {
+					day: monthDays[dayIndex],
+					resourceId: resource.id
+				});
+			} : void 0,
+			children: [
+				eventNodes,
+				moreNodes,
+				cells
+			]
+		}));
+	});
+	const content = /* @__PURE__ */ jsxs(Box, {
+		mod: [{
+			static: mode === "static",
+			"slot-dragging": slotDragSelect.isDragging,
+			"event-interaction": dragDrop.dragContextValue.isDragging
+		}, mod],
+		...getStyles("resourcesMonthView"),
+		...others,
+		children: [withHeader && /* @__PURE__ */ jsx(ScheduleHeaderBase, {
+			view: "month",
+			navigationHandlers: {
+				previous: () => toDateString(dayjs(date).subtract(1, "month").startOf("month")),
+				next: () => toDateString(dayjs(date).add(1, "month").startOf("month")),
+				today: () => {
+					requestAnimationFrame(() => {
+						scrollToDay(dayjs().format("YYYY-MM-DD"));
+					});
+					return toDateString(dayjs());
+				}
+			},
+			control: { monthYearSelect: {
+				locale,
+				yearValue: dayjs(date).get("year"),
+				monthValue: dayjs(date).get("month"),
+				onYearChange: (year) => onDateChange?.(toDateString(dayjs(date).set("year", year).startOf("month"))),
+				onMonthChange: (month) => onDateChange?.(toDateString(dayjs(date).set("month", month).startOf("month"))),
+				...monthYearSelectProps
+			} },
+			labels,
+			onDateChange,
+			onViewChange,
+			previousControlProps,
+			nextControlProps,
+			todayControlProps,
+			viewSelectProps: {
+				views: [
+					"day",
+					"week",
+					"month"
+				],
+				...viewSelectProps
+			},
+			stylesApiProps
+		}), /* @__PURE__ */ jsx(Box, {
+			...getStyles("resourcesMonthViewRoot"),
+			children: /* @__PURE__ */ jsx(ScrollArea, {
+				scrollbars: "x",
+				scrollbarSize: 4,
+				...scrollAreaProps,
+				...getStyles("resourcesMonthViewScrollArea", {
+					className: scrollAreaProps?.className,
+					style: scrollAreaProps?.style
+				}),
+				viewportRef: mergedViewportRef,
+				children: /* @__PURE__ */ jsxs("div", {
+					...getStyles("resourcesMonthViewInner"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						...getStyles("resourcesMonthViewDayLabelsRow"),
+						children: [/* @__PURE__ */ createElement("div", {
+							...getStyles("resourcesMonthViewCorner"),
+							key: "corner",
+							ref: resourceLabelRef,
+							style: hasGroups ? {
+								flexBasis: "calc(var(--resources-month-view-resource-label-width) + var(--resources-month-view-group-label-width))",
+								minWidth: "calc(var(--resources-month-view-resource-label-width) + var(--resources-month-view-group-label-width))"
+							} : void 0
+						}, getLabel("resources", labels)), dayLabels]
+					}), rows]
+				})
+			})
+		})]
+	});
+	if (withEventsDragAndDrop) return /* @__PURE__ */ jsx(DragContext.Provider, {
+		value: dragDrop.dragContextValue,
+		children: content
+	});
+	return content;
+});
+ResourcesMonthView.displayName = "@mantine/schedule/ResourcesMonthView";
+ResourcesMonthView.classes = ResourcesMonthView_module_default;
+ResourcesMonthView.varsResolver = varsResolver;
+//#endregion
+export { ResourcesMonthView };
+
+//# sourceMappingURL=ResourcesMonthView.mjs.map