@mantine/schedule 9.3.2 → 9.4.0

package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs

@@ -0,0 +1,608 @@
+"use client";
+import { getLabel } from "../../labels.mjs";
+import { formatDate } from "../../utils/format-date/format-date.mjs";
+import { getDayTimeIntervals } from "../../utils/get-day-time-intervals/get-day-time-intervals.mjs";
+import { toDateString } from "../../utils/to-date-string/to-date-string.mjs";
+import { getWeekDays } from "../../utils/get-week-days/get-week-days.mjs";
+import { nextWeek } from "../../utils/next-week/next-week.mjs";
+import { previousWeek } from "../../utils/previous-week/previous-week.mjs";
+import { getCurrentTimePosition } from "../../utils/get-current-time-position/get-current-time-position.mjs";
+import { isInTimeRange } from "../../utils/is-in-time-range/is-in-time-range.mjs";
+import { isAllDayEvent } from "../../utils/is-all-day-event/is-all-day-event.mjs";
+import { calculateDropTime } from "../../utils/calculate-drop-time/calculate-drop-time.mjs";
+import { getBusinessHoursMod } from "../../utils/get-business-hours-mod/get-business-hours-mod.mjs";
+import { getOrderedResources } from "../../utils/get-ordered-resources/get-ordered-resources.mjs";
+import { handleResourcesGridKeyDown } from "../../utils/handle-resources-grid-key-down/handle-resources-grid-key-down.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 { getWeekLabel } from "../WeekView/get-week-label/get-week-label.mjs";
+import { getOverlapClusters } from "../ResourcesDayView/get-overlap-clusters/get-overlap-clusters.mjs";
+import { getResourcesWeekViewEvents } from "./get-resources-week-view-events/get-resources-week-view-events.mjs";
+import { ResourcesWeekViewRow } from "./ResourcesWeekViewRow.mjs";
+import ResourcesWeekView_module_default from "./ResourcesWeekView.module.mjs";
+import dayjs from "dayjs";
+import { Box, ScrollArea, createVarsResolver, factory, getRadius, rem, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
+import { useInterval, useIsomorphicEffect, useMergedRef } from "@mantine/hooks";
+import { createElement, useCallback, useMemo, useRef, useState } from "react";
+import { useDatesContext } from "@mantine/dates";
+import { jsx, jsxs } from "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 = createVarsResolver((_theme, { radius, slotWidth, rowHeight, groupLabelWidth }) => ({ resourcesWeekView: {
+	"--resources-week-view-radius": radius ? getRadius(radius) : void 0,
+	"--resources-week-view-slot-width": rem(slotWidth),
+	"--resources-week-view-row-height": rem(rowHeight),
+	"--resources-week-view-group-label-width": rem(groupLabelWidth)
+} }));
+const ResourcesWeekView = factory((_props) => {
+	const props = 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 = useStyles({
+		name: __staticSelector,
+		classes: ResourcesWeekView_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		vars,
+		varsResolver,
+		attributes,
+		rootSelector: "resourcesWeekView"
+	});
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		classNames,
+		styles,
+		props
+	});
+	const stylesApiProps = {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		attributes,
+		__staticSelector,
+		radius
+	};
+	const theme = useMantineTheme();
+	const [scrolled, setScrolled] = useState(false);
+	const [scrolledX, setScrolledX] = useState(false);
+	const ctx = useDatesContext();
+	const slots = getDayTimeIntervals({
+		startTime,
+		endTime,
+		intervalMinutes
+	});
+	const { orderedResources, groupRanges, resourceGroupMap } = useMemo(() => getOrderedResources(resources, groups), [resources, groups]);
+	const hasGroups = groupRanges.length > 0;
+	const weekdays = useMemo(() => 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) => dayjs(day).isSame(dayjs(), "day"));
+	const withCurrentTimeIndicator = _withCurrentTimeIndicator ?? isToday;
+	const [timeIndicatorOffset, setTimeIndicatorOffset] = useState(getCurrentTimePosition({
+		startTime,
+		endTime,
+		intervalMinutes
+	}));
+	useInterval(() => setTimeIndicatorOffset(getCurrentTimePosition({
+		startTime,
+		endTime,
+		intervalMinutes
+	})), 6e4, { autoInvoke: true });
+	const todayDayIndex = weekdays.findIndex((day) => dayjs(day).isSame(dayjs(), "day"));
+	const showTimeIndicator = withCurrentTimeIndicator && todayDayIndex >= 0 && isInTimeRange({
+		date: dayjs().toDate(),
+		startTime,
+		endTime
+	});
+	const formattedCurrentTime = withCurrentTimeBubble ? formatDate({
+		locale: ctx.getLocale(locale),
+		date: dayjs(),
+		format: slotLabelFormat
+	}) : "";
+	const handleExternalDrop = 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: `${dayjs(slotDay).format("YYYY-MM-DD")} ${slots[slotInDay].startTime}`,
+			resourceId: target.resourceId
+		});
+	}, [
+		onExternalEventDrop,
+		slots,
+		weekdays,
+		totalSlotsPerDay
+	]);
+	const lastDropResourceId = useRef(void 0);
+	const dragDrop = useDragDropHandlers({
+		enabled: withEventsDragAndDrop,
+		mode,
+		onEventDrop: 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 calculateDropTime({
+				draggedEvent,
+				targetDate: weekdays[dayIndex] || weekdays[0],
+				targetSlotTime: slotTime,
+				intervalMinutes
+			});
+		},
+		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
+	});
+	const groupToResourceId = useMemo(() => getGroupToResourceIdMap(resources), [resources]);
+	const slotDragSelect = 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: `${dayjs(startDay).format("YYYY-MM-DD")} ${slots[startSlotInDay].startTime}`,
+				rangeEnd: `${dayjs(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 = dayjs(day).format("YYYY-MM-DD");
+		onTimeSlotClick({
+			slotStart: `${dayStr} ${slot.startTime}`,
+			slotEnd: `${dayStr} ${slot.endTime}`,
+			nativeEvent: e,
+			resourceId
+		});
+	};
+	const weekViewEvents = useMemo(() => getResourcesWeekViewEvents({
+		events,
+		resources,
+		weekdays,
+		startTime,
+		endTime,
+		expansionLimit: recurrenceExpansionLimit
+	}), [
+		events,
+		resources,
+		weekdays,
+		startTime,
+		endTime,
+		recurrenceExpansionLimit
+	]);
+	const dayLabels = weekdays.map((day) => {
+		const d = dayjs(day);
+		const today = d.isSame(dayjs(), "day") && highlightToday;
+		const weekend = ctx.getWeekendDays(weekendDays).includes(d.day());
+		return /* @__PURE__ */ createElement(Box, {
+			...getStyles("resourcesWeekViewDayLabel"),
+			key: day,
+			mod: {
+				today,
+				weekend
+			},
+			style: { width: `calc(var(--resources-week-view-slot-width) * ${totalSlotsPerDay})` }
+		}, formatDate({
+			date: d,
+			locale: ctx.getLocale(locale),
+			format: weekdayFormat
+		}));
+	});
+	const timeLabels = weekdays.flatMap((day) => slots.map((interval) => {
+		const label = formatDate({
+			date: dayjs(`${dayjs(day).format("YYYY-MM-DD")} ${interval.startTime}`),
+			locale: ctx.getLocale(locale),
+			format: slotLabelFormat
+		});
+		return /* @__PURE__ */ createElement(Box, {
+			...getStyles("resourcesWeekViewTimeLabel"),
+			key: `${day}-${interval.startTime}`,
+			mod: {
+				"hour-start": interval.isHourStart,
+				...getBusinessHoursMod({
+					time: interval.startTime,
+					businessHours,
+					highlightBusinessHours
+				})
+			}
+		}, label);
+	}));
+	const slotsRef = useRef([]);
+	const rowSlotsContainersRef = useRef([]);
+	const viewportRef = useRef(null);
+	const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);
+	const firstSlotIndex = {
+		resourceIndex: 0,
+		slotIndex: 0
+	};
+	useIsomorphicEffect(() => {
+		if (!startScrollDateTime || !viewportRef.current) return;
+		const parsed = dayjs(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(`.${ResourcesWeekView_module_default.resourcesWeekViewCorner}`);
+		const labelWidth = cornerEl ? cornerEl.getBoundingClientRect().width : 0;
+		viewportRef.current.scrollTo({
+			left: slotRect.left - viewportRect.left - labelWidth,
+			top: 0
+		});
+	}, []);
+	const getSlotIndexFromDragPoint = useCallback((event, resourceIndex) => {
+		return getIndexFromDragPoint(slotsRef.current[resourceIndex] ?? [], event.clientX);
+	}, []);
+	const handleSlotKeyDown = (event, resourceIndex, slotIndex) => {
+		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__ */ jsx(Box, { ...bgEventProps }));
+			}
+			const allRegularEvents = (dayEvents.regularEvents[resource.id] || []).filter((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__ */ 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__ */ jsx(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 = 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__ */ jsx(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__ */ 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__ */ jsx(ScheduleEvent, {
+					event: bar.event,
+					autoSize: true,
+					nowrap: true,
+					renderEventBody: (barEvent) => /* @__PURE__ */ 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__ */ jsx(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 = getWeekLabel({
+		weekdays,
+		locale: ctx.getLocale(locale),
+		weekLabelFormat,
+		renderWeekLabel
+	});
+	const indicatorLeftPercent = todayDayIndex >= 0 ? (todayDayIndex + timeIndicatorOffset / 100) / weekdays.length * 100 : 0;
+	const content = /* @__PURE__ */ jsxs(Box, {
+		...getStyles("resourcesWeekView"),
+		mod: {
+			static: mode === "static",
+			"slot-dragging": slotDragSelect.isDragging,
+			"event-interaction": dragDrop.dragContextValue.isDragging
+		},
+		...others,
+		children: [withHeader && /* @__PURE__ */ jsx(ScheduleHeaderBase, {
+			view: "week",
+			navigationHandlers: {
+				previous: () => previousWeek(date, ctx.getFirstDayOfWeek(firstDayOfWeek)),
+				next: () => nextWeek(date, ctx.getFirstDayOfWeek(firstDayOfWeek)),
+				today: () => toDateString(dayjs())
+			},
+			control: {
+				miw: 180,
+				title: headerLabel
+			},
+			labels,
+			onDateChange,
+			onViewChange,
+			previousControlProps,
+			nextControlProps,
+			todayControlProps,
+			viewSelectProps: {
+				views: [
+					"day",
+					"week",
+					"month"
+				],
+				...viewSelectProps
+			},
+			stylesApiProps
+		}), /* @__PURE__ */ jsx(Box, {
+			...getStyles("resourcesWeekViewRoot"),
+			children: /* @__PURE__ */ jsx(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__ */ jsxs("div", {
+					...getStyles("resourcesWeekViewInner"),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							...getStyles("resourcesWeekViewHeaderRows"),
+							children: [/* @__PURE__ */ 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
+							}, getLabel("resources", labels)), /* @__PURE__ */ jsxs("div", {
+								...getStyles("resourcesWeekViewHeaderContent"),
+								children: [/* @__PURE__ */ jsx("div", {
+									...getStyles("resourcesWeekViewDayLabelsRow"),
+									children: dayLabels
+								}), /* @__PURE__ */ jsx(Box, {
+									...getStyles("resourcesWeekViewTimeLabelsRow"),
+									mod: { scrolled },
+									children: timeLabels
+								})]
+							})]
+						}),
+						rows,
+						showTimeIndicator && /* @__PURE__ */ jsxs(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__ */ jsx("div", {
+									...getStyles("resourcesWeekViewCurrentTimeIndicatorTimeBubble"),
+									children: formattedCurrentTime
+								}),
+								!withCurrentTimeBubble && /* @__PURE__ */ jsx("div", { ...getStyles("resourcesWeekViewCurrentTimeIndicatorThumb") }),
+								/* @__PURE__ */ jsx("div", { ...getStyles("resourcesWeekViewCurrentTimeIndicatorLine") })
+							]
+						})
+					]
+				})
+			})
+		})]
+	});
+	const dragContextValue = useMemo(() => dragDrop.dragContextValue, [dragDrop.dragContextValue]);
+	if (withEventsDragAndDrop) return /* @__PURE__ */ jsx(DragContext.Provider, {
+		value: dragContextValue,
+		children: content
+	});
+	return content;
+});
+ResourcesWeekView.displayName = "@mantine/schedule/ResourcesWeekView";
+ResourcesWeekView.classes = ResourcesWeekView_module_default;
+ResourcesWeekView.varsResolver = varsResolver;
+//#endregion
+export { ResourcesWeekView };
+
+//# sourceMappingURL=ResourcesWeekView.mjs.map