@mantine/schedule 9.0.0-alpha.4 → 9.0.0-alpha.6

package/esm/components/DayView/DayView.mjs

@@ -1,480 +1,466 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useCallback, createElement } from 'react';
-import dayjs from 'dayjs';
-import { createVarsResolver, rem, getRadius, factory, useProps, useStyles, useResolvedStylesApi, UnstyledButton, Box, ScrollArea } from '@mantine/core';
-import { useDatesContext } from '@mantine/dates';
-import { useMergedRef, useIsomorphicEffect } from '@mantine/hooks';
-import { useAutoScrollOnDrag } from '../../hooks/use-auto-scroll-on-drag.mjs';
-import { useDragDropHandlers } from '../../hooks/use-drag-drop-handlers.mjs';
-import { useSlotDragSelect } from '../../hooks/use-slot-drag-select.mjs';
-import { getLabel } from '../../labels.mjs';
-import { formatDate } from '../../utils/format-date/format-date.mjs';
-import '../../utils/get-week-number/get-week-number.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 { clampIntervalMinutes } from '../../utils/clamp-interval-minutes/clamp-interval-minutes.mjs';
-import { isAllDayEvent } from '../../utils/is-all-day-event/is-all-day-event.mjs';
-import { getVisibleEvents } from '../../utils/get-visible-events/get-visible-events.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 { CurrentTimeIndicator } from '../CurrentTimeIndicator/CurrentTimeIndicator.mjs';
-import { DragContext } from '../DragContext/DragContext.mjs';
-import { MoreEvents } from '../MoreEvents/MoreEvents.mjs';
-import { ScheduleEvent } from '../ScheduleEvent/ScheduleEvent.mjs';
-import { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase.mjs';
-import classes from './DayView.module.css.mjs';
-import { getDayViewEvents } from './get-day-view-events/get-day-view-events.mjs';
-
+"use client";
+import { getLabel } from "../../labels.mjs";
+import { formatDate } from "../../utils/format-date/format-date.mjs";
+import { clampIntervalMinutes } from "../../utils/clamp-interval-minutes/clamp-interval-minutes.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 { isAllDayEvent } from "../../utils/is-all-day-event/is-all-day-event.mjs";
+import { getVisibleEvents } from "../../utils/get-visible-events/get-visible-events.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 { useAutoScrollOnDrag } from "../../hooks/use-auto-scroll-on-drag.mjs";
+import { useDragDropHandlers } from "../../hooks/use-drag-drop-handlers.mjs";
+import { useEventResize } from "../../hooks/use-event-resize.mjs";
+import { useSlotDragSelect } from "../../hooks/use-slot-drag-select.mjs";
+import { CurrentTimeIndicator } from "../CurrentTimeIndicator/CurrentTimeIndicator.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 { getDayViewEvents } from "./get-day-view-events/get-day-view-events.mjs";
+import DayView_module_default from "./DayView.module.mjs";
+import dayjs from "dayjs";
+import { Box, ScrollArea, UnstyledButton, createVarsResolver, factory, getRadius, rem, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
+import { useIsomorphicEffect, useMergedRef } from "@mantine/hooks";
+import { createElement, useCallback, useRef } from "react";
+import { useDatesContext } from "@mantine/dates";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/schedule/src/components/DayView/DayView.tsx
 const defaultProps = {
-  __staticSelector: "DayView",
-  startTime: "00:00:00",
-  endTime: "23:59:59",
-  intervalMinutes: 15,
-  withAllDaySlot: true,
-  slotLabelFormat: "HH:mm",
-  headerFormat: "MMMM D, YYYY",
-  withCurrentTimeBubble: true,
-  withHeader: true,
-  highlightBusinessHours: false,
-  businessHours: ["09:00:00", "17:00:00"],
-  withEventsDragAndDrop: false,
-  withDragSlotSelect: false,
-  mode: "default"
+	__staticSelector: "DayView",
+	startTime: "00:00:00",
+	endTime: "23:59:59",
+	intervalMinutes: 15,
+	withAllDaySlot: true,
+	slotLabelFormat: "HH:mm",
+	headerFormat: "MMMM D, YYYY",
+	withCurrentTimeBubble: true,
+	withHeader: true,
+	highlightBusinessHours: false,
+	businessHours: ["09:00:00", "17:00:00"],
+	withEventsDragAndDrop: false,
+	withDragSlotSelect: false,
+	withEventResize: false,
+	mode: "default"
 };
-const varsResolver = createVarsResolver(
-  (_theme, { radius, slotHeight, allDaySlotHeight }) => ({
-    dayView: {
-      "--day-view-radius": radius !== void 0 ? getRadius(radius) : void 0,
-      "--day-view-slot-height": rem(slotHeight),
-      "--day-view-all-day-slot-height": rem(allDaySlotHeight)
-    }
-  })
-);
+const varsResolver = createVarsResolver((_theme, { radius, slotHeight, allDaySlotHeight }) => ({ dayView: {
+	"--day-view-radius": radius !== void 0 ? getRadius(radius) : void 0,
+	"--day-view-slot-height": rem(slotHeight),
+	"--day-view-all-day-slot-height": rem(allDaySlotHeight)
+} }));
 const DayView = factory((_props) => {
-  const props = useProps("DayView", defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    __staticSelector,
-    startTime,
-    endTime,
-    intervalMinutes,
-    withAllDaySlot,
-    date,
-    locale,
-    slotLabelFormat,
-    headerFormat,
-    withCurrentTimeIndicator = dayjs(date).isSame(dayjs(), "day"),
-    withCurrentTimeBubble,
-    withHeader,
-    radius,
-    onDateChange,
-    onViewChange,
-    previousControlProps,
-    nextControlProps,
-    todayControlProps,
-    viewSelectProps,
-    slotHeight,
-    allDaySlotHeight,
-    scrollAreaProps,
-    events,
-    moreEventsProps,
-    renderEventBody,
-    renderEvent,
-    labels,
-    highlightBusinessHours,
-    businessHours,
-    withEventsDragAndDrop,
-    onEventDrop,
-    canDragEvent,
-    onEventDragStart,
-    onEventDragEnd,
-    onTimeSlotClick,
-    onAllDaySlotClick,
-    onEventClick,
-    withDragSlotSelect,
-    onSlotDragEnd,
-    mode,
-    startScrollTime,
-    onExternalEventDrop,
-    ...others
-  } = props;
-  const getStyles = useStyles({
-    name: __staticSelector,
-    classes,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    varsResolver,
-    rootSelector: "dayView"
-  });
-  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
-    styles,
-    props
-  });
-  const stylesApiProps = {
-    classNames: resolvedClassNames,
-    styles: resolvedStyles,
-    attributes,
-    __staticSelector,
-    radius
-  };
-  const ctx = useDatesContext();
-  const slots = getDayTimeIntervals({ startTime, endTime, intervalMinutes });
-  const slotsRef = useRef([]);
-  const viewportRef = useRef(null);
-  const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);
-  useAutoScrollOnDrag({
-    viewportRef,
-    enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
-  });
-  useIsomorphicEffect(() => {
-    if (!startScrollTime || !viewportRef.current || slotsRef.current.length === 0) {
-      return;
-    }
-    const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);
-    if (targetIndex < 0) {
-      return;
-    }
-    const targetSlot = slotsRef.current[targetIndex];
-    if (!targetSlot) {
-      return;
-    }
-    const slotRect = targetSlot.getBoundingClientRect();
-    const viewportRect = viewportRef.current.getBoundingClientRect();
-    viewportRef.current.scrollTo({ left: 0, top: slotRect.top - viewportRect.top });
-  }, []);
-  const getSlotIndexFromDragPoint = useCallback((event) => {
-    const slotIndex = slotsRef.current.findIndex((slotNode) => {
-      if (!slotNode) {
-        return false;
-      }
-      const rect = slotNode.getBoundingClientRect();
-      return event.clientY >= rect.top && event.clientY <= rect.bottom;
-    });
-    if (slotIndex >= 0) {
-      return slotIndex;
-    }
-    const firstSlot = slotsRef.current[0];
-    const lastSlot = slotsRef.current[slotsRef.current.length - 1];
-    if (!firstSlot || !lastSlot) {
-      return null;
-    }
-    const firstRect = firstSlot.getBoundingClientRect();
-    const lastRect = lastSlot.getBoundingClientRect();
-    if (event.clientY < firstRect.top) {
-      return 0;
-    }
-    if (event.clientY > lastRect.bottom) {
-      return slotsRef.current.length - 1;
-    }
-    return null;
-  }, []);
-  const handleSlotKeyDown = (event, slotIndex) => {
-    const direction = event.key;
-    if (direction === "ArrowDown" && slotIndex < slots.length - 1) {
-      event.preventDefault();
-      slotsRef.current[slotIndex + 1]?.focus();
-    } else if (direction === "ArrowUp" && slotIndex > 0) {
-      event.preventDefault();
-      slotsRef.current[slotIndex - 1]?.focus();
-    }
-  };
-  const slotDragSelect = useSlotDragSelect({
-    enabled: withDragSlotSelect && mode !== "static",
-    onDragEnd: (startIndex, endIndex) => {
-      if (!onSlotDragEnd) {
-        return;
-      }
-      const slotDate = dayjs(date).format("YYYY-MM-DD");
-      onSlotDragEnd(
-        `${slotDate} ${slots[startIndex].startTime}`,
-        `${slotDate} ${slots[endIndex].endTime}`
-      );
-    }
-  });
-  const eventsData = getDayViewEvents({ events, date, startTime, endTime });
-  const handleExternalDrop = useCallback(
-    (e, slotIndex) => {
-      if (!onExternalEventDrop) {
-        return;
-      }
-      const slotDate = dayjs(date).format("YYYY-MM-DD");
-      onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[slotIndex].startTime}`);
-    },
-    [onExternalEventDrop, date, slots]
-  );
-  const dragDrop = useDragDropHandlers({
-    enabled: withEventsDragAndDrop,
-    mode,
-    onEventDrop,
-    canDragEvent,
-    onEventDragStart,
-    onEventDragEnd,
-    calculateDropTarget: (slotIndex, draggedEvent) => {
-      const slotTime = slots[slotIndex].startTime;
-      return calculateDropTime({
-        draggedEvent,
-        targetDate: date,
-        targetSlotTime: slotTime,
-        intervalMinutes
-      });
-    },
-    onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
-  });
-  const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
-  const eventsNodes = eventsData.regularEvents.map((event) => {
-    const eventIsAllDay = isAllDayEvent({ event, date });
-    const isDraggable = !eventIsAllDay && dragDrop.isDraggableEvent(event);
-    return /* @__PURE__ */ jsx(
-      ScheduleEvent,
-      {
-        event,
-        renderEventBody,
-        renderEvent,
-        autoSize: true,
-        draggable: isDraggable,
-        mode,
-        onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
-        ...stylesApiProps,
-        style: {
-          ...stylesApiProps.styles?.event,
-          top: `${event.position.top}%`,
-          height: `${event.position.height}%`,
-          insetInlineStart: `${event.position.offset}%`,
-          width: `${event.position.width}%`,
-          position: "absolute"
-        }
-      },
-      event.id
-    );
-  });
-  const allDayEventsCount = getVisibleEvents({
-    maxEvents: 2,
-    totalEvents: eventsData.allDayEvents.length
-  });
-  const allDayEventsNodes = eventsData.allDayEvents.slice(0, allDayEventsCount.visibleEventsCount).map((event) => /* @__PURE__ */ jsx(
-    ScheduleEvent,
-    {
-      event,
-      renderEventBody,
-      renderEvent,
-      style: { maxHeight: "50%" },
-      nowrap: true,
-      autoSize: true,
-      mode,
-      onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
-      ...stylesApiProps
-    },
-    event.id
-  ));
-  const dayGroup = dayjs(date).format("YYYY-MM-DD");
-  const items = slots.map((slot, index) => {
-    const isDropTarget = dragDrop.isDropTarget(index);
-    const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);
-    return /* @__PURE__ */ createElement(
-      UnstyledButton,
-      {
-        ...getStyles("dayViewSlot"),
-        key: slot.startTime,
-        ref: (node) => {
-          slotsRef.current[index] = node;
-        },
-        mod: {
-          "hour-start": slot.isHourStart,
-          ...getBusinessHoursMod({
-            time: slot.startTime,
-            businessHours,
-            highlightBusinessHours
-          }),
-          "drop-target": isDropTarget,
-          "drag-selected": isDragSelected,
-          static: mode === "static"
-        },
-        __vars: { "--slot-size": `${clampIntervalMinutes(intervalMinutes) / 60}` },
-        "aria-label": `${getLabel("timeSlot", labels)} ${slot.startTime} - ${slot.endTime}`,
-        tabIndex: mode === "static" ? -1 : index === 0 ? 0 : -1,
-        "data-drag-slot-index": withDragSlotSelect && mode !== "static" ? index : void 0,
-        "data-drag-slot-group": withDragSlotSelect && mode !== "static" ? dayGroup : void 0,
-        onKeyDown: mode === "static" ? void 0 : (e) => handleSlotKeyDown(e, index),
-        onPointerDown: withDragSlotSelect && mode !== "static" ? (e) => slotDragSelect.handleSlotPointerDown(e, index, dayGroup) : void 0,
-        onClick: mode === "static" || !onTimeSlotClick ? void 0 : (event) => {
-          const slotDate = dayjs(date).format("YYYY-MM-DD");
-          onTimeSlotClick(
-            `${slotDate} ${slot.startTime}`,
-            `${slotDate} ${slot.endTime}`,
-            event
-          );
-        },
-        onDragOver: withDragHandlers ? (event) => event.preventDefault() : void 0
-      }
-    );
-  });
-  const slotsLabels = slots.reduce((acc, slot) => {
-    if (slot.isHourStart) {
-      const slotTime = dayjs(`${dayjs(date).format("YYYY-MM-DD")} ${slot.startTime}`);
-      const label = formatDate({
-        locale: ctx.getLocale(locale),
-        date: slotTime,
-        format: slotLabelFormat
-      });
-      acc.push(
-        /* @__PURE__ */ createElement(
-          Box,
-          {
-            ...getStyles("dayViewSlotLabel"),
-            key: slot.startTime,
-            mod: getBusinessHoursMod({
-              time: slot.startTime,
-              businessHours,
-              highlightBusinessHours
-            })
-          },
-          label
-        )
-      );
-    }
-    return acc;
-  }, []);
-  const content = /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...getStyles("dayView"),
-      mod: { static: mode === "static", "slot-dragging": slotDragSelect.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: {
-              title: formatDate({ locale: ctx.getLocale(locale), date, format: headerFormat }),
-              miw: 140
-            },
-            labels,
-            onDateChange,
-            onViewChange,
-            previousControlProps,
-            nextControlProps,
-            todayControlProps,
-            viewSelectProps,
-            stylesApiProps
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ScrollArea.Autosize,
-          {
-            scrollbarSize: 4,
-            ...scrollAreaProps,
-            ...getStyles("dayViewScrollArea", {
-              className: scrollAreaProps?.className,
-              style: scrollAreaProps?.style
-            }),
-            viewportRef: mergedViewportRef,
-            children: /* @__PURE__ */ jsxs(Box, { ...getStyles("dayViewInner"), children: [
-              /* @__PURE__ */ jsxs("div", { ...getStyles("dayViewSlotLabels"), children: [
-                withAllDaySlot && /* @__PURE__ */ jsx(Box, { ...getStyles("dayViewSlotLabel"), mod: { "all-day": true }, children: getLabel("allDay", labels) }),
-                slotsLabels
-              ] }),
-              /* @__PURE__ */ jsxs("div", { ...getStyles("dayViewSlots"), children: [
-                withAllDaySlot && /* @__PURE__ */ jsxs("div", { ...getStyles("dayViewAllDay"), children: [
-                  /* @__PURE__ */ jsxs("div", { ...getStyles("dayViewAllDayEvents"), children: [
-                    allDayEventsNodes,
-                    allDayEventsCount.hiddenEventsCount > 0 && /* @__PURE__ */ jsx(
-                      MoreEvents,
-                      {
-                        events: eventsData.allDayEvents,
-                        moreEventsCount: allDayEventsCount.hiddenEventsCount,
-                        renderEventBody,
-                        mode,
-                        ...stylesApiProps,
-                        ...moreEventsProps
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    UnstyledButton,
-                    {
-                      ...getStyles("dayViewSlot"),
-                      mod: { "all-day": true },
-                      "aria-label": `${getLabel("timeSlot", labels)} ${getLabel("allDay", labels)}`,
-                      onClick: mode === "static" || !onAllDaySlotClick ? void 0 : (e) => {
-                        onAllDaySlotClick(dayjs(date).format("YYYY-MM-DD"), e);
-                      }
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    ...getStyles("dayViewTimeSlots"),
-                    onDragOver: withDragHandlers ? (event) => {
-                      const slotIndex = getSlotIndexFromDragPoint(event);
-                      if (slotIndex !== null) {
-                        dragDrop.handleDragOver(event, slotIndex);
-                      }
-                    } : void 0,
-                    onDragLeave: withDragHandlers ? dragDrop.handleDragLeave : void 0,
-                    onDrop: withDragHandlers ? (event) => {
-                      const slotIndex = getSlotIndexFromDragPoint(event);
-                      if (slotIndex !== null) {
-                        dragDrop.handleDrop(event, slotIndex);
-                      }
-                    } : void 0,
-                    children: [
-                      eventsNodes,
-                      withCurrentTimeIndicator && /* @__PURE__ */ jsx(
-                        CurrentTimeIndicator,
-                        {
-                          startOffset: "calc(var(--day-view-slot-labels-width) * -1)",
-                          endOffset: "0rem",
-                          topOffset: "0rem",
-                          timeBubbleStartOffset: "calc(var(--day-view-slot-labels-width) * -1 + 30px)",
-                          currentTimeFormat: slotLabelFormat,
-                          withTimeBubble: withCurrentTimeBubble,
-                          withThumb: !withCurrentTimeBubble,
-                          locale,
-                          startTime,
-                          endTime,
-                          ...stylesApiProps
-                        }
-                      ),
-                      items
-                    ]
-                  }
-                )
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-  if (withEventsDragAndDrop) {
-    return /* @__PURE__ */ jsx(DragContext.Provider, { value: dragDrop.dragContextValue, children: content });
-  }
-  return content;
+	const props = useProps("DayView", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, attributes, vars, __staticSelector, startTime, endTime, intervalMinutes, withAllDaySlot, date, locale, slotLabelFormat, headerFormat, withCurrentTimeIndicator = dayjs(date).isSame(dayjs(), "day"), withCurrentTimeBubble, withHeader, radius, onDateChange, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, slotHeight, allDaySlotHeight, scrollAreaProps, events, moreEventsProps, renderEventBody, renderEvent, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, recurrenceExpansionLimit, ...others } = props;
+	const getStyles = useStyles({
+		name: __staticSelector,
+		classes: DayView_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "dayView"
+	});
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		classNames,
+		styles,
+		props
+	});
+	const stylesApiProps = {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		attributes,
+		__staticSelector,
+		radius
+	};
+	const theme = useMantineTheme();
+	const ctx = useDatesContext();
+	const slots = getDayTimeIntervals({
+		startTime,
+		endTime,
+		intervalMinutes
+	});
+	const slotsRef = useRef([]);
+	const viewportRef = useRef(null);
+	const timeSlotsContainerRef = useRef(null);
+	const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);
+	useAutoScrollOnDrag({
+		viewportRef,
+		enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
+	});
+	useIsomorphicEffect(() => {
+		if (!startScrollTime || !viewportRef.current || slotsRef.current.length === 0) return;
+		const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);
+		if (targetIndex < 0) return;
+		const targetSlot = slotsRef.current[targetIndex];
+		if (!targetSlot) return;
+		const slotRect = targetSlot.getBoundingClientRect();
+		const viewportRect = viewportRef.current.getBoundingClientRect();
+		viewportRef.current.scrollTo({
+			left: 0,
+			top: slotRect.top - viewportRect.top
+		});
+	}, []);
+	const getSlotIndexFromDragPoint = useCallback((event) => {
+		const slotIndex = slotsRef.current.findIndex((slotNode) => {
+			if (!slotNode) return false;
+			const rect = slotNode.getBoundingClientRect();
+			return event.clientY >= rect.top && event.clientY <= rect.bottom;
+		});
+		if (slotIndex >= 0) return slotIndex;
+		const firstSlot = slotsRef.current[0];
+		const lastSlot = slotsRef.current[slotsRef.current.length - 1];
+		if (!firstSlot || !lastSlot) return null;
+		const firstRect = firstSlot.getBoundingClientRect();
+		const lastRect = lastSlot.getBoundingClientRect();
+		if (event.clientY < firstRect.top) return 0;
+		if (event.clientY > lastRect.bottom) return slotsRef.current.length - 1;
+		return null;
+	}, []);
+	const handleSlotKeyDown = (event, slotIndex) => {
+		const direction = event.key;
+		if (direction === "ArrowDown" && slotIndex < slots.length - 1) {
+			event.preventDefault();
+			slotsRef.current[slotIndex + 1]?.focus();
+		} else if (direction === "ArrowUp" && slotIndex > 0) {
+			event.preventDefault();
+			slotsRef.current[slotIndex - 1]?.focus();
+		}
+	};
+	const slotDragSelect = useSlotDragSelect({
+		enabled: withDragSlotSelect && mode !== "static",
+		onDragEnd: (startIndex, endIndex) => {
+			if (!onSlotDragEnd) return;
+			const slotDate = dayjs(date).format("YYYY-MM-DD");
+			onSlotDragEnd(`${slotDate} ${slots[startIndex].startTime}`, `${slotDate} ${slots[endIndex].endTime}`);
+		}
+	});
+	const eventsData = getDayViewEvents({
+		events: expandRecurringEvents({
+			events,
+			rangeStart: dayjs(date).startOf("day").toDate(),
+			rangeEnd: dayjs(date).endOf("day").toDate(),
+			expansionLimit: recurrenceExpansionLimit
+		}),
+		date,
+		startTime,
+		endTime
+	});
+	const handleExternalDrop = useCallback((e, slotIndex) => {
+		if (!onExternalEventDrop) return;
+		const slotDate = dayjs(date).format("YYYY-MM-DD");
+		onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[slotIndex].startTime}`);
+	}, [
+		onExternalEventDrop,
+		date,
+		slots
+	]);
+	const dragDrop = useDragDropHandlers({
+		enabled: withEventsDragAndDrop,
+		mode,
+		onEventDrop,
+		canDragEvent,
+		onEventDragStart,
+		onEventDragEnd,
+		calculateDropTarget: (slotIndex, draggedEvent) => {
+			const slotTime = slots[slotIndex].startTime;
+			return calculateDropTime({
+				draggedEvent,
+				targetDate: date,
+				targetSlotTime: slotTime,
+				intervalMinutes
+			});
+		},
+		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
+	});
+	const eventResize = useEventResize({
+		enabled: withEventResize,
+		mode,
+		startTime,
+		endTime,
+		intervalMinutes,
+		onEventResize,
+		canResizeEvent
+	});
+	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
+	const eventsNodes = eventsData.regularEvents.map((event) => {
+		const eventIsAllDay = isAllDayEvent({
+			event,
+			date
+		});
+		const isDraggable = !eventIsAllDay && dragDrop.isDraggableEvent(event);
+		const isResizable = !eventIsAllDay && eventResize.isResizableEvent(event);
+		const resizePosition = eventResize.getResizePosition(event.id);
+		const eventTop = resizePosition ? resizePosition.top : event.position.top;
+		const eventHeight = resizePosition ? resizePosition.height : event.position.height;
+		return /* @__PURE__ */ jsx(ScheduleEvent, {
+			event,
+			renderEventBody,
+			renderEvent,
+			autoSize: true,
+			draggable: isDraggable,
+			withResize: isResizable,
+			isResizing: resizePosition !== null,
+			onResizeStart: isResizable ? (edge, e) => {
+				if (timeSlotsContainerRef.current) eventResize.handleResizeStart(event, edge, timeSlotsContainerRef.current, event.position.top, event.position.height, dayjs(date).format("YYYY-MM-DD"), e);
+			} : void 0,
+			mode,
+			onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
+			...stylesApiProps,
+			style: {
+				...stylesApiProps.styles?.event,
+				top: `${eventTop}%`,
+				height: `${eventHeight}%`,
+				insetInlineStart: `${event.position.offset}%`,
+				width: `${event.position.width}%`,
+				position: "absolute"
+			}
+		}, event.id);
+	});
+	const allDayEventsCount = getVisibleEvents({
+		maxEvents: 2,
+		totalEvents: eventsData.allDayEvents.length
+	});
+	const allDayEventsNodes = eventsData.allDayEvents.slice(0, allDayEventsCount.visibleEventsCount).map((event) => /* @__PURE__ */ jsx(ScheduleEvent, {
+		event,
+		renderEventBody,
+		renderEvent,
+		style: { maxHeight: "50%" },
+		nowrap: true,
+		autoSize: true,
+		mode,
+		onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
+		...stylesApiProps
+	}, event.id));
+	const dayGroup = dayjs(date).format("YYYY-MM-DD");
+	const items = slots.map((slot, index) => {
+		const isDropTarget = dragDrop.isDropTarget(index);
+		const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);
+		return /* @__PURE__ */ createElement(UnstyledButton, {
+			...getStyles("dayViewSlot"),
+			key: slot.startTime,
+			ref: (node) => {
+				slotsRef.current[index] = node;
+			},
+			mod: {
+				"hour-start": slot.isHourStart,
+				...getBusinessHoursMod({
+					time: slot.startTime,
+					businessHours,
+					highlightBusinessHours
+				}),
+				"drop-target": isDropTarget,
+				"drag-selected": isDragSelected,
+				static: mode === "static"
+			},
+			__vars: { "--slot-size": `${clampIntervalMinutes(intervalMinutes) / 60}` },
+			"aria-label": `${getLabel("timeSlot", labels)} ${slot.startTime} - ${slot.endTime}`,
+			tabIndex: mode === "static" ? -1 : index === 0 ? 0 : -1,
+			"data-drag-slot-index": withDragSlotSelect && mode !== "static" ? index : void 0,
+			"data-drag-slot-group": withDragSlotSelect && mode !== "static" ? dayGroup : void 0,
+			onKeyDown: mode === "static" ? void 0 : (e) => handleSlotKeyDown(e, index),
+			onPointerDown: withDragSlotSelect && mode !== "static" ? (e) => slotDragSelect.handleSlotPointerDown(e, index, dayGroup) : void 0,
+			onClick: mode === "static" || !onTimeSlotClick ? void 0 : (event) => {
+				const slotDate = dayjs(date).format("YYYY-MM-DD");
+				onTimeSlotClick(`${slotDate} ${slot.startTime}`, `${slotDate} ${slot.endTime}`, event);
+			},
+			onDragOver: withDragHandlers ? (event) => event.preventDefault() : void 0
+		});
+	});
+	const slotsLabels = slots.reduce((acc, slot) => {
+		if (slot.isHourStart) {
+			const slotTime = dayjs(`${dayjs(date).format("YYYY-MM-DD")} ${slot.startTime}`);
+			const label = formatDate({
+				locale: ctx.getLocale(locale),
+				date: slotTime,
+				format: slotLabelFormat
+			});
+			acc.push(/* @__PURE__ */ createElement(Box, {
+				...getStyles("dayViewSlotLabel"),
+				key: slot.startTime,
+				mod: getBusinessHoursMod({
+					time: slot.startTime,
+					businessHours,
+					highlightBusinessHours
+				})
+			}, label));
+		}
+		return acc;
+	}, []);
+	const backgroundAllDayEventNodes = eventsData.backgroundAllDayEvents.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-allday-${event.id}`,
+			...getStyles("dayViewBackgroundEvent", { style: {
+				top: 0,
+				height: "100%",
+				width: "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 backgroundTimedEventNodes = eventsData.backgroundTimedEvents.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: event.id,
+			...getStyles("dayViewBackgroundEvent", { style: {
+				top: `calc(${event.position.top}% + 1px)`,
+				height: `calc(${event.position.height}% - 2px)`,
+				width: "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 content = /* @__PURE__ */ jsxs(Box, {
+		...getStyles("dayView"),
+		mod: {
+			static: mode === "static",
+			"slot-dragging": slotDragSelect.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: {
+				title: formatDate({
+					locale: ctx.getLocale(locale),
+					date,
+					format: headerFormat
+				}),
+				miw: 140
+			},
+			labels,
+			onDateChange,
+			onViewChange,
+			previousControlProps,
+			nextControlProps,
+			todayControlProps,
+			viewSelectProps,
+			stylesApiProps
+		}), /* @__PURE__ */ jsx(ScrollArea.Autosize, {
+			scrollbarSize: 4,
+			...scrollAreaProps,
+			...getStyles("dayViewScrollArea", {
+				className: scrollAreaProps?.className,
+				style: scrollAreaProps?.style
+			}),
+			viewportRef: mergedViewportRef,
+			children: /* @__PURE__ */ jsxs(Box, {
+				...getStyles("dayViewInner"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					...getStyles("dayViewSlotLabels"),
+					children: [withAllDaySlot && /* @__PURE__ */ jsx(Box, {
+						...getStyles("dayViewSlotLabel"),
+						mod: { "all-day": true },
+						children: getLabel("allDay", labels)
+					}), slotsLabels]
+				}), /* @__PURE__ */ jsxs("div", {
+					...getStyles("dayViewSlots"),
+					children: [withAllDaySlot && /* @__PURE__ */ jsxs("div", {
+						...getStyles("dayViewAllDay"),
+						children: [
+							backgroundAllDayEventNodes,
+							/* @__PURE__ */ jsxs("div", {
+								...getStyles("dayViewAllDayEvents"),
+								children: [allDayEventsNodes, allDayEventsCount.hiddenEventsCount > 0 && /* @__PURE__ */ jsx(MoreEvents, {
+									events: eventsData.allDayEvents,
+									moreEventsCount: allDayEventsCount.hiddenEventsCount,
+									renderEventBody,
+									mode,
+									...stylesApiProps,
+									...moreEventsProps
+								})]
+							}),
+							/* @__PURE__ */ jsx(UnstyledButton, {
+								...getStyles("dayViewSlot"),
+								mod: {
+									"all-day": true,
+									static: mode === "static"
+								},
+								"aria-label": `${getLabel("timeSlot", labels)} ${getLabel("allDay", labels)}`,
+								onClick: mode === "static" || !onAllDaySlotClick ? void 0 : (e) => {
+									onAllDaySlotClick(dayjs(date).format("YYYY-MM-DD"), e);
+								}
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						ref: timeSlotsContainerRef,
+						...getStyles("dayViewTimeSlots"),
+						onDragOver: withDragHandlers ? (event) => {
+							const slotIndex = getSlotIndexFromDragPoint(event);
+							if (slotIndex !== null) dragDrop.handleDragOver(event, slotIndex);
+						} : void 0,
+						onDragLeave: withDragHandlers ? dragDrop.handleDragLeave : void 0,
+						onDrop: withDragHandlers ? (event) => {
+							const slotIndex = getSlotIndexFromDragPoint(event);
+							if (slotIndex !== null) dragDrop.handleDrop(event, slotIndex);
+						} : void 0,
+						children: [
+							backgroundTimedEventNodes,
+							eventsNodes,
+							withCurrentTimeIndicator && /* @__PURE__ */ jsx(CurrentTimeIndicator, {
+								startOffset: "calc(var(--day-view-slot-labels-width) * -1)",
+								endOffset: "0rem",
+								topOffset: "0rem",
+								timeBubbleStartOffset: "calc(var(--day-view-slot-labels-width) * -1 + 30px)",
+								currentTimeFormat: slotLabelFormat,
+								withTimeBubble: withCurrentTimeBubble,
+								withThumb: !withCurrentTimeBubble,
+								locale,
+								startTime,
+								endTime,
+								...stylesApiProps
+							}),
+							items
+						]
+					})]
+				})]
+			})
+		})]
+	});
+	if (withEventsDragAndDrop) return /* @__PURE__ */ jsx(DragContext.Provider, {
+		value: dragDrop.dragContextValue,
+		children: content
+	});
+	return content;
 });
 DayView.displayName = "@mantine/schedule/DayView";
-DayView.classes = classes;
+DayView.classes = DayView_module_default;
 DayView.varsResolver = varsResolver;
-
+//#endregion
 export { DayView };
-//# sourceMappingURL=DayView.mjs.map
+
+//# sourceMappingURL=DayView.mjs.map