@mantine/schedule 9.3.2 → 9.4.1

package/esm/components/ResourcesDayView/ResourcesDayView.mjs

@@ -0,0 +1,576 @@
+"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 { 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 { expandRecurringEvents } from "../../utils/expand-recurring-events/expand-recurring-events.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 { useHorizontalEventResize } from "../../hooks/use-horizontal-event-resize.mjs";
+import { getOverlapClusters } from "./get-overlap-clusters/get-overlap-clusters.mjs";
+import { getResourcesDayViewEvents } from "./get-resources-day-view-events/get-resources-day-view-events.mjs";
+import { ResourcesDayViewRow } from "./ResourcesDayViewColumn.mjs";
+import ResourcesDayView_module_default from "./ResourcesDayView.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 { Fragment, jsx, jsxs } from "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 = createVarsResolver((_theme, { radius, slotWidth, rowHeight, groupLabelWidth }) => ({ resourcesDayView: {
+	"--resources-day-view-radius": radius ? getRadius(radius) : void 0,
+	"--resources-day-view-slot-width": rem(slotWidth),
+	"--resources-day-view-row-height": rem(rowHeight),
+	"--resources-day-view-group-label-width": rem(groupLabelWidth)
+} }));
+const ResourcesDayView = factory((_props) => {
+	const props = 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 = useStyles({
+		name: __staticSelector,
+		classes: ResourcesDayView_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		vars,
+		varsResolver,
+		attributes,
+		rootSelector: "resourcesDayView"
+	});
+	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 handleExternalDrop = useCallback((e, target) => {
+		if (!onExternalEventDrop) return;
+		const slotDate = dayjs(date).format("YYYY-MM-DD");
+		onExternalEventDrop({
+			dataTransfer: e.dataTransfer,
+			dropDateTime: `${slotDate} ${slots[target.slotIndex].startTime}`,
+			resourceId: target.resourceId
+		});
+	}, [
+		onExternalEventDrop,
+		slots,
+		date
+	]);
+	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 slotTime = slots[target.slotIndex].startTime;
+			return calculateDropTime({
+				draggedEvent,
+				targetDate: dayjs(date).format("YYYY-MM-DD"),
+				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 slotDate = dayjs(date).format("YYYY-MM-DD");
+			onSlotDragEnd({
+				rangeStart: `${slotDate} ${slots[startIndex].startTime}`,
+				rangeEnd: `${slotDate} ${slots[endIndex].endTime}`,
+				resourceId: groupToResourceId.get(group) ?? group
+			});
+		}
+	});
+	const eventResize = 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 = dayjs(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 = dayjs(date).format("YYYY-MM-DD");
+	const isToday = dayjs(date).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 showTimeIndicator = withCurrentTimeIndicator && isInTimeRange({
+		date: dayjs().toDate(),
+		startTime,
+		endTime
+	});
+	const formattedCurrentTime = withCurrentTimeBubble ? formatDate({
+		locale: ctx.getLocale(locale),
+		date: dayjs(),
+		format: slotLabelFormat
+	}) : "";
+	const expandedEvents = useMemo(() => expandRecurringEvents({
+		events,
+		rangeStart: dayjs(date).startOf("day").toDate(),
+		rangeEnd: dayjs(date).endOf("day").toDate(),
+		expansionLimit: recurrenceExpansionLimit
+	}), [
+		events,
+		date,
+		recurrenceExpansionLimit
+	]);
+	const resourceEvents = useMemo(() => getResourcesDayViewEvents({
+		date,
+		events: expandedEvents,
+		resources,
+		startTime,
+		endTime
+	}), [
+		date,
+		expandedEvents,
+		resources,
+		startTime,
+		endTime
+	]);
+	const timeLabels = slots.map((interval) => {
+		const label = formatDate({
+			date: dayjs(`${dateStr} ${interval.startTime}`),
+			locale: ctx.getLocale(locale),
+			format: slotLabelFormat
+		});
+		return /* @__PURE__ */ createElement(Box, {
+			...getStyles("resourcesDayViewTimeLabel"),
+			key: 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 (!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(`.${ResourcesDayView_module_default.resourcesDayViewCorner}`);
+		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 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__ */ jsx(Box, { ...bgEventProps });
+		});
+		const allRegularEvents = (resourceEvents.regularEvents[resource.id] || []).filter((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__ */ jsxs(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__ */ jsx(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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ 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__ */ 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__ */ jsx(Box, {
+			...getStyles("resourcesDayViewAllDayEvent", { style: { top: `calc(${index} * (var(--resources-day-view-all-day-height) + 2px) + 2px)` } }),
+			children: /* @__PURE__ */ jsx(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 ? 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__ */ 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-${cluster[0].id}`);
+		}) : [];
+		return /* @__PURE__ */ jsxs(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 = formatDate({
+		date: dayjs(date),
+		locale: ctx.getLocale(locale),
+		format: headerFormat
+	});
+	const content = /* @__PURE__ */ jsxs(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__ */ jsx(ScheduleHeaderBase, {
+			view: "day",
+			navigationHandlers: {
+				previous: () => toDateString(dayjs(date).subtract(1, "day")),
+				next: () => toDateString(dayjs(date).add(1, "day")),
+				today: () => toDateString(dayjs())
+			},
+			control: {
+				miw: 140,
+				title: headerLabel
+			},
+			labels,
+			onDateChange,
+			onViewChange,
+			previousControlProps,
+			nextControlProps,
+			todayControlProps,
+			viewSelectProps: {
+				views: [
+					"day",
+					"week",
+					"month"
+				],
+				...viewSelectProps
+			},
+			stylesApiProps
+		}), /* @__PURE__ */ jsx(Box, {
+			...getStyles("resourcesDayViewRoot"),
+			children: /* @__PURE__ */ jsx(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__ */ jsxs("div", {
+					...getStyles("resourcesDayViewInner"),
+					children: [
+						/* @__PURE__ */ jsxs(Box, {
+							...getStyles("resourcesDayViewTimeLabelsRow"),
+							mod: { scrolled },
+							children: [/* @__PURE__ */ 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
+							}, getLabel("resources", labels)), timeLabels]
+						}),
+						rows,
+						showTimeIndicator && /* @__PURE__ */ jsxs(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__ */ jsx("div", {
+									...getStyles("resourcesDayViewCurrentTimeIndicatorTimeBubble"),
+									children: formattedCurrentTime
+								}),
+								!withCurrentTimeBubble && /* @__PURE__ */ jsx("div", { ...getStyles("resourcesDayViewCurrentTimeIndicatorThumb") }),
+								/* @__PURE__ */ jsx("div", { ...getStyles("resourcesDayViewCurrentTimeIndicatorLine") })
+							]
+						})
+					]
+				})
+			})
+		})]
+	});
+	const dragContextValue = useMemo(() => dragDrop.dragContextValue, [dragDrop.dragContextValue]);
+	if (withEventsDragAndDrop) return /* @__PURE__ */ jsx(DragContext.Provider, {
+		value: dragContextValue,
+		children: content
+	});
+	return content;
+});
+ResourcesDayView.displayName = "@mantine/schedule/ResourcesDayView";
+ResourcesDayView.classes = ResourcesDayView_module_default;
+ResourcesDayView.varsResolver = varsResolver;
+//#endregion
+export { ResourcesDayView };
+
+//# sourceMappingURL=ResourcesDayView.mjs.map