@mantine/schedule 9.3.1 → 9.4.0

package/cjs/components/ResourcesDayView/ResourcesDayView.cjs

@@ -0,0 +1,578 @@
+"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_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_expand_recurring_events = require("../../utils/expand-recurring-events/expand-recurring-events.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_use_horizontal_event_resize = require("../../hooks/use-horizontal-event-resize.cjs");
+const require_get_overlap_clusters = require("./get-overlap-clusters/get-overlap-clusters.cjs");
+const require_get_resources_day_view_events = require("./get-resources-day-view-events/get-resources-day-view-events.cjs");
+const require_ResourcesDayViewColumn = require("./ResourcesDayViewColumn.cjs");
+const require_ResourcesDayView_module = require("./ResourcesDayView.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/ResourcesDayView/ResourcesDayView.tsx
+const defaultProps = {
+	__staticSelector: "ResourcesDayView",
+	startTime: "00:00:00",
+	endTime: "23:59:59",
+	slotLabelFormat: "HH:mm",
+	intervalMinutes: 60,
+	withHeader: true,
+	headerFormat: "MMMM D, YYYY",
+	highlightBusinessHours: false,
+	businessHours: ["09:00:00", "17:00:00"],
+	withEventsDragAndDrop: false,
+	withDragSlotSelect: false,
+	withEventResize: false,
+	mode: "default",
+	maxEventsPerTimeSlot: 2
+};
+const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, slotWidth, rowHeight, groupLabelWidth }) => ({ resourcesDayView: {
+	"--resources-day-view-radius": radius ? (0, _mantine_core.getRadius)(radius) : void 0,
+	"--resources-day-view-slot-width": (0, _mantine_core.rem)(slotWidth),
+	"--resources-day-view-row-height": (0, _mantine_core.rem)(rowHeight),
+	"--resources-day-view-group-label-width": (0, _mantine_core.rem)(groupLabelWidth)
+} }));
+const ResourcesDayView = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.useProps)("ResourcesDayView", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, resources, intervalMinutes, slotLabelFormat, radius, startScrollTime, scrollAreaProps, locale, withCurrentTimeIndicator: _withCurrentTimeIndicator, withCurrentTimeBubble = true, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, headerFormat, events, slotWidth, rowHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, renderResourceLabel, groups, renderGroupLabel, groupLabelWidth, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, recurrenceExpansionLimit, maxEventsPerTimeSlot: _maxEventsPerTimeSlot, moreEventsProps, ...others } = props;
+	const maxEventsPerTimeSlot = _maxEventsPerTimeSlot !== void 0 ? Math.max(1, _maxEventsPerTimeSlot) : void 0;
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: __staticSelector,
+		classes: require_ResourcesDayView_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		vars,
+		varsResolver,
+		attributes,
+		rootSelector: "resourcesDayView"
+	});
+	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 handleExternalDrop = (0, react.useCallback)((e, target) => {
+		if (!onExternalEventDrop) return;
+		const slotDate = (0, dayjs.default)(date).format("YYYY-MM-DD");
+		onExternalEventDrop({
+			dataTransfer: e.dataTransfer,
+			dropDateTime: `${slotDate} ${slots[target.slotIndex].startTime}`,
+			resourceId: target.resourceId
+		});
+	}, [
+		onExternalEventDrop,
+		slots,
+		date
+	]);
+	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 slotTime = slots[target.slotIndex].startTime;
+			return require_calculate_drop_time.calculateDropTime({
+				draggedEvent,
+				targetDate: (0, dayjs.default)(date).format("YYYY-MM-DD"),
+				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 slotDate = (0, dayjs.default)(date).format("YYYY-MM-DD");
+			onSlotDragEnd({
+				rangeStart: `${slotDate} ${slots[startIndex].startTime}`,
+				rangeEnd: `${slotDate} ${slots[endIndex].endTime}`,
+				resourceId: groupToResourceId.get(group) ?? group
+			});
+		}
+	});
+	const eventResize = require_use_horizontal_event_resize.useHorizontalEventResize({
+		enabled: withEventResize,
+		mode,
+		startTime,
+		endTime,
+		intervalMinutes,
+		onEventResize,
+		canResizeEvent
+	});
+	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
+	const handleTimeSlotClick = (resourceId, slotTime, e) => {
+		if (!onTimeSlotClick) return;
+		const slotDate = (0, dayjs.default)(date).format("YYYY-MM-DD");
+		const slotIndex = slots.findIndex((s) => s.startTime === slotTime);
+		if (slotIndex === -1) return;
+		const slot = slots[slotIndex];
+		onTimeSlotClick({
+			slotStart: `${slotDate} ${slot.startTime}`,
+			slotEnd: `${slotDate} ${slot.endTime}`,
+			nativeEvent: e,
+			resourceId
+		});
+	};
+	const dateStr = (0, dayjs.default)(date).format("YYYY-MM-DD");
+	const isToday = (0, dayjs.default)(date).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 showTimeIndicator = withCurrentTimeIndicator && 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 expandedEvents = (0, react.useMemo)(() => require_expand_recurring_events.expandRecurringEvents({
+		events,
+		rangeStart: (0, dayjs.default)(date).startOf("day").toDate(),
+		rangeEnd: (0, dayjs.default)(date).endOf("day").toDate(),
+		expansionLimit: recurrenceExpansionLimit
+	}), [
+		events,
+		date,
+		recurrenceExpansionLimit
+	]);
+	const resourceEvents = (0, react.useMemo)(() => require_get_resources_day_view_events.getResourcesDayViewEvents({
+		date,
+		events: expandedEvents,
+		resources,
+		startTime,
+		endTime
+	}), [
+		date,
+		expandedEvents,
+		resources,
+		startTime,
+		endTime
+	]);
+	const timeLabels = slots.map((interval) => {
+		const label = require_format_date.formatDate({
+			date: (0, dayjs.default)(`${dateStr} ${interval.startTime}`),
+			locale: ctx.getLocale(locale),
+			format: slotLabelFormat
+		});
+		return /* @__PURE__ */ (0, react.createElement)(_mantine_core.Box, {
+			...getStyles("resourcesDayViewTimeLabel"),
+			key: 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 (!startScrollTime || !viewportRef.current) return;
+		const firstResourceSlots = slotsRef.current[0];
+		if (!firstResourceSlots || firstResourceSlots.length === 0) return;
+		const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);
+		if (targetIndex < 0) return;
+		const targetSlot = firstResourceSlots[targetIndex];
+		if (!targetSlot) return;
+		const slotRect = targetSlot.getBoundingClientRect();
+		const viewportRect = viewportRef.current.getBoundingClientRect();
+		const cornerEl = viewportRef.current.querySelector(`.${require_ResourcesDayView_module.default.resourcesDayViewCorner}`);
+		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 rows = orderedResources.map((resource, resourceIndex) => {
+		const backgroundEventNodes = [...resourceEvents.backgroundTimedEvents[resource.id] || [], ...resourceEvents.backgroundAllDayEvents[resource.id] || []].map((event) => {
+			const colors = theme.variantColorResolver({
+				color: event.color || theme.primaryColor,
+				theme,
+				variant: "light",
+				autoContrast: true
+			});
+			const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
+			const bgEventProps = {
+				key: `bg-${event.id}`,
+				...getStyles("resourcesDayViewBackgroundEvent", { style: {
+					left: `${event.position.top}%`,
+					width: `${event.position.height}%`,
+					top: 0,
+					height: "100%"
+				} }),
+				__vars: {
+					"--bg-event-bg": colors.background,
+					"--bg-event-color": colors.color
+				},
+				children: bgEventBody
+			};
+			if (typeof renderEvent === "function") return renderEvent(event, bgEventProps);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...bgEventProps });
+		});
+		const allRegularEvents = (resourceEvents.regularEvents[resource.id] || []).filter((event) => !require_is_all_day_event.isAllDayEvent({
+			event,
+			date
+		}));
+		const regularEvents = (maxEventsPerTimeSlot !== void 0 ? allRegularEvents.filter((event) => event.position.column < maxEventsPerTimeSlot) : allRegularEvents).map((event) => {
+			const isDraggable = dragDrop.isDraggableEvent(event);
+			const isResizable = eventResize.isResizableEvent(event);
+			const resizePosition = eventResize.getResizePosition(event.id);
+			const eventLeft = resizePosition ? resizePosition.left : event.position.top;
+			const eventWidth = resizePosition ? resizePosition.width : event.position.height;
+			const adjustPosition = maxEventsPerTimeSlot !== void 0 && event.position.overlaps > maxEventsPerTimeSlot;
+			const eventColors = isResizable ? theme.variantColorResolver({
+				color: event.color || theme.primaryColor,
+				theme,
+				variant: event.variant || "light",
+				autoContrast: true
+			}) : null;
+			const isThisEventResizing = resizePosition !== null;
+			const activeEdge = isThisEventResizing && eventResize.resizingEdge ? eventResize.resizingEdge : null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+				...getStyles("resourcesDayViewEventWrapper"),
+				__vars: eventColors ? { "--event-color": eventColors.color } : void 0,
+				"data-resizing": isThisEventResizing || void 0,
+				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,
+					isResizing: isThisEventResizing,
+					renderEventBody,
+					renderEvent,
+					radius,
+					mode,
+					onClick: onEventClick ? (e) => {
+						if (!eventResize.wasResizing()) onEventClick(event, e);
+					} : void 0,
+					style: {
+						width: "100%",
+						height: "100%"
+					}
+				}), isResizable && mode !== "static" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					...getStyles("resourcesDayViewResizeHandle"),
+					"data-edge": "start",
+					"data-active": activeEdge === "start" || void 0,
+					onPointerDown: (e) => {
+						const container = rowSlotsContainersRef.current[resourceIndex];
+						if (container) eventResize.handleResizeStart({
+							event,
+							edge: "start",
+							container,
+							originalLeft: event.position.top,
+							originalWidth: event.position.height,
+							eventDate: dateStr,
+							pointerEvent: e
+						});
+					}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					...getStyles("resourcesDayViewResizeHandle"),
+					"data-edge": "end",
+					"data-active": activeEdge === "end" || void 0,
+					onPointerDown: (e) => {
+						const container = rowSlotsContainersRef.current[resourceIndex];
+						if (container) eventResize.handleResizeStart({
+							event,
+							edge: "end",
+							container,
+							originalLeft: event.position.top,
+							originalWidth: event.position.height,
+							eventDate: dateStr,
+							pointerEvent: e
+						});
+					}
+				})] })]
+			}, event.id);
+		});
+		const allDayEvents = resourceEvents.allDayEvents[resource.id] || [];
+		const allDayEventNodes = allDayEvents.map((event, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
+			...getStyles("resourcesDayViewAllDayEvent", { style: { top: `calc(${index} * (var(--resources-day-view-all-day-height) + 2px) + 2px)` } }),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleEvent.ScheduleEvent, {
+				event,
+				autoSize: true,
+				nowrap: true,
+				renderEventBody,
+				renderEvent,
+				radius,
+				mode,
+				onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
+				style: {
+					width: "100%",
+					height: "100%"
+				}
+			})
+		}, `all-day-${event.id}`));
+		const moreEventsForResource = maxEventsPerTimeSlot !== void 0 ? require_get_overlap_clusters.getOverlapClusters(allRegularEvents).filter((cluster) => cluster.some((e) => e.position.column >= maxEventsPerTimeSlot)).map((cluster) => {
+			const hiddenCount = cluster.filter((e) => e.position.column >= maxEventsPerTimeSlot).length;
+			const leftPercent = Math.min(...cluster.map((e) => e.position.top));
+			const rightPercent = Math.max(...cluster.map((e) => e.position.top + e.position.height));
+			return /* @__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-${cluster[0].id}`);
+		}) : [];
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ResourcesDayViewColumn.ResourcesDayViewRow, {
+			resource,
+			resourceIndex,
+			date: dateStr,
+			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: allDayEvents.length,
+			children: [
+				backgroundEventNodes,
+				allDayEventNodes,
+				regularEvents,
+				moreEventsForResource
+			]
+		}, resource.id);
+	});
+	const headerLabel = require_format_date.formatDate({
+		date: (0, dayjs.default)(date),
+		locale: ctx.getLocale(locale),
+		format: headerFormat
+	});
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+		...getStyles("resourcesDayView"),
+		mod: {
+			static: mode === "static",
+			"slot-dragging": slotDragSelect.isDragging,
+			resizing: eventResize.isResizing,
+			"event-interaction": eventResize.isResizing || dragDrop.dragContextValue.isDragging
+		},
+		...others,
+		children: [withHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleHeaderBase.ScheduleHeaderBase, {
+			view: "day",
+			navigationHandlers: {
+				previous: () => require_to_date_string.toDateString((0, dayjs.default)(date).subtract(1, "day")),
+				next: () => require_to_date_string.toDateString((0, dayjs.default)(date).add(1, "day")),
+				today: () => require_to_date_string.toDateString((0, dayjs.default)())
+			},
+			control: {
+				miw: 140,
+				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("resourcesDayViewRoot"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ScrollArea, {
+				scrollbarSize: 4,
+				...scrollAreaProps,
+				...getStyles("resourcesDayViewScrollArea", {
+					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("resourcesDayViewInner"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+							...getStyles("resourcesDayViewTimeLabelsRow"),
+							mod: { scrolled },
+							children: [/* @__PURE__ */ (0, react.createElement)("div", {
+								...getStyles("resourcesDayViewCorner"),
+								key: "corner",
+								style: hasGroups ? {
+									flexBasis: "calc(var(--resources-day-view-resource-label-width) + var(--resources-day-view-group-label-width))",
+									minWidth: "calc(var(--resources-day-view-resource-label-width) + var(--resources-day-view-group-label-width))"
+								} : void 0
+							}, require_labels.getLabel("resources", labels)), timeLabels]
+						}),
+						rows,
+						showTimeIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+							...getStyles("resourcesDayViewCurrentTimeIndicator"),
+							__vars: {
+								"--indicator-left-offset": hasGroups ? `calc(var(--resources-day-view-resource-label-width) + var(--resources-day-view-group-label-width) + (100% - var(--resources-day-view-resource-label-width) - var(--resources-day-view-group-label-width)) * ${timeIndicatorOffset} / 100)` : `calc(var(--resources-day-view-resource-label-width) + (100% - var(--resources-day-view-resource-label-width)) * ${timeIndicatorOffset} / 100)`,
+								"--_time-bubble-width": formattedCurrentTime?.toString().toLowerCase().includes("m") ? "64px" : "46px"
+							},
+							children: [
+								withCurrentTimeBubble && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									...getStyles("resourcesDayViewCurrentTimeIndicatorTimeBubble"),
+									children: formattedCurrentTime
+								}),
+								!withCurrentTimeBubble && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("resourcesDayViewCurrentTimeIndicatorThumb") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("resourcesDayViewCurrentTimeIndicatorLine") })
+							]
+						})
+					]
+				})
+			})
+		})]
+	});
+	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;
+});
+ResourcesDayView.displayName = "@mantine/schedule/ResourcesDayView";
+ResourcesDayView.classes = require_ResourcesDayView_module.default;
+ResourcesDayView.varsResolver = varsResolver;
+//#endregion
+exports.ResourcesDayView = ResourcesDayView;
+
+//# sourceMappingURL=ResourcesDayView.cjs.map