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

package/esm/components/WeekView/WeekView.mjs

@@ -1,748 +1,621 @@
-'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, createElement, useMemo } from 'react';
-import dayjs from 'dayjs';
-import { createVarsResolver, rem, getRadius, factory, useProps, useStyles, useResolvedStylesApi, useMantineTheme, Box, UnstyledButton, 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 { useEventResize } from '../../hooks/use-event-resize.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 { getWeekNumber } from '../../utils/get-week-number/get-week-number.mjs';
-import { getDayTimeIntervals } from '../../utils/get-day-time-intervals/get-day-time-intervals.mjs';
-import { getWeekDays } from '../../utils/get-week-days/get-week-days.mjs';
-import { toDateString } from '../../utils/to-date-string/to-date-string.mjs';
-import { nextWeek } from '../../utils/next-week/next-week.mjs';
-import { previousWeek } from '../../utils/previous-week/previous-week.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 { CurrentTimeIndicator } from '../CurrentTimeIndicator/CurrentTimeIndicator.mjs';
-import { DragContext } from '../DragContext/DragContext.mjs';
-import { ScheduleEvent } from '../ScheduleEvent/ScheduleEvent.mjs';
-import { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase.mjs';
-import { getWeekLabel } from './get-week-label/get-week-label.mjs';
-import { getWeekViewEvents } from './get-week-view-events/get-week-view-events.mjs';
-import { handleWeekViewKeyDown } from './handle-week-view-key-down.mjs';
-import { WeekViewDay } from './WeekViewDay.mjs';
-import classes from './WeekView.module.css.mjs';
-
+"use client";
+import { getLabel } from "../../labels.mjs";
+import { formatDate } from "../../utils/format-date/format-date.mjs";
+import { getWeekNumber } from "../../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 { 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 { 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 { 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 { ScheduleHeaderBase } from "../ScheduleHeader/ScheduleHeaderBase.mjs";
+import { getWeekLabel } from "./get-week-label/get-week-label.mjs";
+import { getWeekViewEvents } from "./get-week-view-events/get-week-view-events.mjs";
+import { handleWeekViewKeyDown } from "./handle-week-view-key-down.mjs";
+import { WeekViewDay } from "./WeekViewDay.mjs";
+import WeekView_module_default from "./WeekView.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, useMemo, useRef, useState } from "react";
+import { useDatesContext } from "@mantine/dates";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/schedule/src/components/WeekView/WeekView.tsx
 const defaultProps = {
-  __staticSelector: "WeekView",
-  withWeekendDays: true,
-  withCurrentTimeIndicator: true,
-  startTime: "00:00:00",
-  endTime: "23:59:59",
-  slotLabelFormat: "HH:mm",
-  intervalMinutes: 60,
-  weekdayFormat: "ddd",
-  withWeekNumber: true,
-  withCurrentTimeBubble: true,
-  withAllDaySlots: true,
-  withHeader: true,
-  weekLabelFormat: "MMM DD",
-  highlightBusinessHours: false,
-  businessHours: ["09:00:00", "17:00:00"],
-  withEventsDragAndDrop: false,
-  withDragSlotSelect: false,
-  withEventResize: false,
-  mode: "default"
+	__staticSelector: "WeekView",
+	withWeekendDays: true,
+	withCurrentTimeIndicator: true,
+	startTime: "00:00:00",
+	endTime: "23:59:59",
+	slotLabelFormat: "HH:mm",
+	intervalMinutes: 60,
+	weekdayFormat: "ddd",
+	withWeekNumber: true,
+	withCurrentTimeBubble: true,
+	withAllDaySlots: true,
+	withHeader: true,
+	weekLabelFormat: "MMM DD",
+	highlightBusinessHours: false,
+	businessHours: ["09:00:00", "17:00:00"],
+	withEventsDragAndDrop: false,
+	withDragSlotSelect: false,
+	withEventResize: false,
+	mode: "default"
 };
-const varsResolver = createVarsResolver(
-  (_theme, { radius, allDaySlotHeight, slotHeight }) => ({
-    weekView: {
-      "--week-view-radius": radius ? getRadius(radius) : void 0,
-      "--week-view-all-day-slots-height": rem(allDaySlotHeight),
-      "--week-view-slot-height": rem(slotHeight)
-    }
-  })
-);
+const varsResolver = createVarsResolver((_theme, { radius, allDaySlotHeight, slotHeight }) => ({ weekView: {
+	"--week-view-radius": radius ? getRadius(radius) : void 0,
+	"--week-view-all-day-slots-height": rem(allDaySlotHeight),
+	"--week-view-slot-height": rem(slotHeight)
+} }));
 const WeekView = factory((_props) => {
-  const props = useProps("WeekView", defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    startTime,
-    endTime,
-    date,
-    onDateChange,
-    intervalMinutes,
-    slotLabelFormat,
-    withWeekendDays,
-    weekendDays,
-    firstDayOfWeek,
-    weekdayFormat,
-    radius,
-    highlightToday,
-    withCurrentTimeIndicator,
-    scrollAreaProps,
-    locale,
-    withWeekNumber,
-    withCurrentTimeBubble,
-    withAllDaySlots,
-    __staticSelector,
-    withHeader,
-    onViewChange,
-    previousControlProps,
-    nextControlProps,
-    todayControlProps,
-    viewSelectProps,
-    weekLabelFormat,
-    events,
-    allDaySlotHeight,
-    slotHeight,
-    labels,
-    highlightBusinessHours,
-    businessHours,
-    renderEventBody,
-    renderEvent,
-    withEventsDragAndDrop,
-    onEventDrop,
-    canDragEvent,
-    onEventDragStart,
-    onEventDragEnd,
-    onTimeSlotClick,
-    onAllDaySlotClick,
-    onEventClick,
-    withDragSlotSelect,
-    onSlotDragEnd,
-    mode,
-    startScrollTime,
-    renderWeekLabel,
-    onExternalEventDrop,
-    withEventResize,
-    onEventResize,
-    canResizeEvent,
-    recurrenceExpansionLimit,
-    ...others
-  } = props;
-  const getStyles = useStyles({
-    name: __staticSelector,
-    classes,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    vars,
-    varsResolver,
-    attributes,
-    rootSelector: "weekView"
-  });
-  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 ctx = useDatesContext();
-  const slots = getDayTimeIntervals({ startTime, endTime, intervalMinutes });
-  const viewportRef = useRef(null);
-  useAutoScrollOnDrag({
-    viewportRef,
-    enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
-  });
-  const handleExternalDrop = useCallback(
-    (e, target) => {
-      if (!onExternalEventDrop) {
-        return;
-      }
-      const slotDate = dayjs(target.day).format("YYYY-MM-DD");
-      onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[target.slotIndex].startTime}`);
-    },
-    [onExternalEventDrop, slots]
-  );
-  const handleExternalAllDayDrop = useCallback(
-    (e, day) => {
-      if (!onExternalEventDrop) {
-        return;
-      }
-      onExternalEventDrop(e.dataTransfer, `${dayjs(day).format("YYYY-MM-DD")} 00:00:00`);
-    },
-    [onExternalEventDrop]
-  );
-  const dragDrop = useDragDropHandlers({
-    enabled: withEventsDragAndDrop,
-    mode,
-    onEventDrop,
-    canDragEvent,
-    onEventDragStart,
-    onEventDragEnd,
-    calculateDropTarget: (target, draggedEvent) => {
-      const slotTime = slots[target.slotIndex].startTime;
-      return calculateDropTime({
-        draggedEvent,
-        targetDate: target.day,
-        targetSlotTime: slotTime,
-        intervalMinutes
-      });
-    },
-    onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
-  });
-  const allDayDragDrop = useDragDropHandlers({
-    enabled: withEventsDragAndDrop,
-    mode,
-    onEventDrop,
-    canDragEvent,
-    onEventDragStart,
-    onEventDragEnd,
-    calculateDropTarget: (targetDay, draggedEvent) => {
-      const eventDuration = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), "millisecond");
-      const newStart = dayjs(targetDay).startOf("day");
-      return { start: newStart.toDate(), end: newStart.add(eventDuration, "millisecond").toDate() };
-    },
-    onExternalDrop: onExternalEventDrop ? handleExternalAllDayDrop : void 0
-  });
-  const slotDragSelect = useSlotDragSelect({
-    enabled: withDragSlotSelect && mode !== "static",
-    onDragEnd: (startIndex, endIndex, group) => {
-      if (!onSlotDragEnd) {
-        return;
-      }
-      const slotDate = dayjs(group).format("YYYY-MM-DD");
-      onSlotDragEnd(
-        `${slotDate} ${slots[startIndex].startTime}`,
-        `${slotDate} ${slots[endIndex].endTime}`
-      );
-    }
-  });
-  const eventResize = useEventResize({
-    enabled: withEventResize,
-    mode,
-    startTime,
-    endTime,
-    intervalMinutes,
-    onEventResize,
-    canResizeEvent
-  });
-  const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
-  const handleTimeSlotClick = (day, slotTime, e) => {
-    if (!onTimeSlotClick) {
-      return;
-    }
-    const slotDate = dayjs(day).format("YYYY-MM-DD");
-    const slotIndex = slots.findIndex((s) => s.startTime === slotTime);
-    if (slotIndex === -1) {
-      return;
-    }
-    const slot = slots[slotIndex];
-    onTimeSlotClick(`${slotDate} ${slot.startTime}`, `${slotDate} ${slot.endTime}`, e);
-  };
-  const weekdays = getWeekDays({
-    week: date,
-    withWeekendDays,
-    weekendDays: ctx.getWeekendDays(weekendDays),
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-  });
-  const expandedEvents = expandRecurringEvents({
-    events,
-    rangeStart: dayjs(weekdays[0]).startOf("day").toDate(),
-    rangeEnd: dayjs(weekdays[weekdays.length - 1]).endOf("day").toDate(),
-    expansionLimit: recurrenceExpansionLimit
-  });
-  const weekEvents = getWeekViewEvents({
-    date,
-    events: expandedEvents,
-    startTime,
-    endTime,
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
-    weekendDays: ctx.getWeekendDays(weekendDays),
-    withWeekendDays
-  });
-  const timeValues = slots.map((interval) => {
-    const intervalTime = dayjs(`${dayjs(date).format("YYYY-MM-DD")} ${interval.startTime}`);
-    const label = formatDate({
-      date: intervalTime,
-      locale: ctx.getLocale(locale),
-      format: slotLabelFormat
-    });
-    return /* @__PURE__ */ createElement(
-      Box,
-      {
-        ...getStyles("weekViewSlotLabel"),
-        key: interval.startTime,
-        mod: {
-          "hour-start": interval.isHourStart,
-          ...getBusinessHoursMod({
-            time: interval.startTime,
-            businessHours,
-            highlightBusinessHours
-          })
-        }
-      },
-      label
-    );
-  });
-  const slotsRef = useRef([]);
-  const allDaySlotsRef = useRef([]);
-  const weekdaysRef = useRef([]);
-  const daySlotsContainersRef = useRef([]);
-  const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);
-  const firstSlotIndex = { dayIndex: 0, slotIndex: 0 };
-  useIsomorphicEffect(() => {
-    if (!startScrollTime || !viewportRef.current) {
-      return;
-    }
-    const firstDaySlots = slotsRef.current[0];
-    if (!firstDaySlots || firstDaySlots.length === 0) {
-      return;
-    }
-    const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);
-    if (targetIndex < 0) {
-      return;
-    }
-    const targetSlot = firstDaySlots[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, dayIndex) => {
-    const daySlots = slotsRef.current[dayIndex] ?? [];
-    const slotIndex = daySlots.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 = daySlots[0];
-    const lastSlot = daySlots[daySlots.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 daySlots.length - 1;
-    }
-    return null;
-  }, []);
-  const handleSlotKeyDown = (event, dayIndex, slotIndex) => {
-    handleWeekViewKeyDown({
-      controlsRef: slotsRef,
-      dayIndex,
-      slotIndex,
-      event
-    });
-  };
-  const handleAllDaySlotKeyDown = (event, dayIndex) => {
-    const direction = event.key;
-    if (direction === "ArrowRight" && dayIndex < weekdays.length - 1) {
-      event.preventDefault();
-      allDaySlotsRef.current[dayIndex + 1]?.focus();
-    } else if (direction === "ArrowLeft" && dayIndex > 0) {
-      event.preventDefault();
-      allDaySlotsRef.current[dayIndex - 1]?.focus();
-    } else if (direction === "ArrowDown") {
-      event.preventDefault();
-      slotsRef.current?.[dayIndex]?.[0]?.focus();
-    }
-  };
-  const handleWeekdayKeyDown = (event, dayIndex) => {
-    const direction = event.key;
-    if (direction === "ArrowRight" && dayIndex < weekdays.length - 1) {
-      event.preventDefault();
-      weekdaysRef.current[dayIndex + 1]?.focus();
-    } else if (direction === "ArrowLeft" && dayIndex > 0) {
-      event.preventDefault();
-      weekdaysRef.current[dayIndex - 1]?.focus();
-    }
-  };
-  const currentWeekdayIndex = withCurrentTimeIndicator ? weekdays.findIndex((day) => dayjs(day).isSame(dayjs(), "date")) : -1;
-  const weekdaysLabels = weekdays.map((day, dayIndex) => /* @__PURE__ */ createElement(
-    UnstyledButton,
-    {
-      ...getStyles("weekViewDayLabel"),
-      key: day,
-      ref: (node) => {
-        weekdaysRef.current[dayIndex] = node;
-      },
-      "aria-label": `${getLabel("weekday", labels)} ${dayjs(day).format("YYYY-MM-DD")}`,
-      mod: {
-        today: dayjs(day).isSame(dayjs(), "day") && !!highlightToday,
-        weekend: ctx.getWeekendDays(weekendDays).includes(dayjs(day).day()),
-        static: mode === "static"
-      },
-      tabIndex: mode === "static" ? -1 : dayIndex === 0 ? 0 : -1,
-      onKeyDown: mode === "static" ? void 0 : (event) => handleWeekdayKeyDown(event, dayIndex),
-      onClick: mode === "static" ? void 0 : () => {
-        onViewChange?.("day");
-        onDateChange?.(toDateString(day));
-      }
-    },
-    /* @__PURE__ */ createElement(Box, { ...getStyles("weekViewDayWeekday"), key: "weekday" }, formatDate({ locale: ctx.getLocale(locale), date: day, format: weekdayFormat })),
-    /* @__PURE__ */ createElement("div", { ...getStyles("weekViewDayNumber"), key: "date" }, dayjs(day).date())
-  ));
-  const days = weekdays.map((day, dayIndex) => {
-    const allBgEvents = weekEvents.backgroundEvents[day] || [];
-    const backgroundEventNodes = allBgEvents.filter((event) => !event.position.allDay).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("weekViewBackgroundEvent", {
-          style: {
-            top: `${event.position.top}%`,
-            height: `${event.position.height}%`,
-            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 dayEvents = (weekEvents.regularEvents[day] || []).map((event) => {
-      const eventIsAllDay = isAllDayEvent({ event, date: day });
-      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,
-          autoSize: true,
-          hanging: event.position.hanging,
-          draggable: isDraggable,
-          withResize: isResizable,
-          isResizing: resizePosition !== null,
-          onResizeStart: isResizable ? (edge, e) => {
-            const container = daySlotsContainersRef.current[dayIndex];
-            if (container) {
-              eventResize.handleResizeStart(
-                event,
-                edge,
-                container,
-                event.position.top,
-                event.position.height,
-                dayjs(day).format("YYYY-MM-DD"),
-                e
-              );
-            }
-          } : void 0,
-          renderEventBody,
-          renderEvent,
-          radius,
-          mode,
-          onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
-          style: {
-            position: "absolute",
-            top: `calc(${eventTop}% + 1px)`,
-            left: `${event.position.offset}%`,
-            width: `${event.position.width}%`,
-            height: `calc(${eventHeight}% - 1px)`
-          }
-        },
-        event.id
-      );
-    });
-    return /* @__PURE__ */ jsxs(
-      WeekViewDay,
-      {
-        day,
-        dayIndex,
-        slots,
-        getStyles,
-        weekendDays,
-        highlightBusinessHours,
-        businessHours,
-        labels,
-        withEventsDragAndDrop: withDragHandlers,
-        mode,
-        slotsRef,
-        firstSlotIndex,
-        onSlotKeyDown: handleSlotKeyDown,
-        onSlotClick: handleTimeSlotClick,
-        onFirstSlotArrowUp: withAllDaySlots ? (dayIdx) => {
-          allDaySlotsRef.current[dayIdx]?.focus();
-        } : void 0,
-        onDaySlotsDragOver: (event, dayStr, dayIdx) => {
-          const slotIndex = getSlotIndexFromDragPoint(event, dayIdx);
-          if (slotIndex !== null) {
-            dragDrop.handleDragOver(event, { day: dayStr, slotIndex });
-          }
-        },
-        onDaySlotsDragLeave: dragDrop.handleDragLeave,
-        onDaySlotsDrop: (event, dayStr, dayIdx) => {
-          const slotIndex = getSlotIndexFromDragPoint(event, dayIdx);
-          if (slotIndex !== null) {
-            dragDrop.handleDrop(event, { day: dayStr, slotIndex });
-          }
-        },
-        dropTargetSlotIndex: dragDrop.dropTarget?.day === day ? dragDrop.dropTarget.slotIndex : void 0,
-        withDragSlotSelect,
-        onSlotPointerDown: slotDragSelect.handleSlotPointerDown,
-        isSlotDragSelected: slotDragSelect.isSlotSelected,
-        daySlotsContainerRef: (node) => {
-          daySlotsContainersRef.current[dayIndex] = node;
-        },
-        children: [
-          backgroundEventNodes,
-          dayEvents
-        ]
-      },
-      day
-    );
-  });
-  const allDaySlots = weekdays.map((day, dayIndex) => /* @__PURE__ */ jsx(
-    UnstyledButton,
-    {
-      "aria-label": `${getLabel("allDay", labels)} ${dayjs(day).format("YYYY-MM-DD")}`,
-      ref: (node) => {
-        allDaySlotsRef.current[dayIndex] = node;
-      },
-      tabIndex: dayIndex === 0 ? 0 : -1,
-      onKeyDown: (event) => handleAllDaySlotKeyDown(event, dayIndex),
-      onClick: mode === "static" || !onAllDaySlotClick ? void 0 : (e) => onAllDaySlotClick(dayjs(day).format("YYYY-MM-DD"), e),
-      onDragOver: withDragHandlers ? (e) => allDayDragDrop.handleDragOver(e, day) : void 0,
-      onDragLeave: withDragHandlers ? allDayDragDrop.handleDragLeave : void 0,
-      onDrop: withDragHandlers ? (e) => allDayDragDrop.handleDrop(e, day) : void 0,
-      ...getStyles("weekViewDaySlot"),
-      mod: { "drop-target": allDayDragDrop.isDropTarget(day) }
-    },
-    day
-  ));
-  const allDayEventIds = useMemo(
-    () => new Set(weekEvents.allDayEvents.map((e) => e.id)),
-    [weekEvents.allDayEvents]
-  );
-  const allDayEvents = weekEvents.allDayEvents.map((event) => /* @__PURE__ */ jsx(
-    ScheduleEvent,
-    {
-      event,
-      autoSize: true,
-      nowrap: true,
-      hanging: event.position.hanging,
-      draggable: allDayDragDrop.isDraggableEvent(event),
-      renderEvent,
-      mode,
-      onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
-      style: {
-        position: "absolute",
-        zIndex: 2,
-        top: `calc(${event.position.row * 50}% + 1px)`,
-        left: `calc(${event.position.offset}% + 1px)`,
-        width: `calc(${event.position.width}% - 1px)`,
-        height: "calc(50% - 2px)",
-        maxHeight: "calc(50% - 2px)"
-      }
-    },
-    event.id
-  ));
-  const allDayBackgroundEventNodes = weekdays.flatMap((day, dayIndex) => {
-    const allDayBgEvents = (weekEvents.backgroundEvents[day] || []).filter(
-      (event) => event.position.allDay
-    );
-    const dayWidth = 100 / weekdays.length;
-    const dayOffset = dayIndex * dayWidth;
-    return allDayBgEvents.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}-${day}`,
-        ...getStyles("weekViewBackgroundEvent", {
-          style: {
-            top: 0,
-            height: "100%",
-            left: `${dayOffset}%`,
-            width: `${dayWidth}%`
-          }
-        }),
-        __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 extraRows = Math.max(...weekEvents.allDayEvents.map((event) => event.position.row), 1) - 1;
-  const content = /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...getStyles("weekView"),
-      mod: { static: mode === "static", "slot-dragging": slotDragSelect.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: 140,
-              title: getWeekLabel({
-                weekdays,
-                locale: ctx.getLocale(locale),
-                weekLabelFormat,
-                renderWeekLabel
-              })
-            },
-            labels,
-            onDateChange,
-            onViewChange,
-            previousControlProps,
-            nextControlProps,
-            todayControlProps,
-            viewSelectProps,
-            stylesApiProps
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            ...getStyles("weekViewRoot"),
-            __vars: {
-              "--indicator-offset-index": currentWeekdayIndex === -1 ? void 0 : `${currentWeekdayIndex + 1}`,
-              "--number-of-days": withWeekendDays ? "7" : `${7 - ctx.getWeekendDays(weekendDays).length}`
-            },
-            mod: { "with-weekends": withWeekendDays },
-            children: /* @__PURE__ */ jsxs(
-              ScrollArea.Autosize,
-              {
-                scrollbarSize: 4,
-                ...scrollAreaProps,
-                ...getStyles("weekViewScrollArea", {
-                  className: scrollAreaProps?.className,
-                  style: scrollAreaProps?.style
-                }),
-                onScrollPositionChange: (position) => {
-                  scrollAreaProps?.onScrollPositionChange?.(position);
-                  setScrolled(position.y !== 0);
-                },
-                viewportRef: mergedViewportRef,
-                children: [
-                  /* @__PURE__ */ jsxs(Box, { ...getStyles("weekViewHeader"), mod: { scrolled }, children: [
-                    /* @__PURE__ */ createElement("div", { ...getStyles("weekViewCorner"), key: "corner" }, withWeekNumber && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("div", { ...getStyles("weekViewWeekLabel"), children: getLabel("week", labels) }),
-                      /* @__PURE__ */ jsx("div", { ...getStyles("weekViewWeekNumber"), children: getWeekNumber(date) })
-                    ] })),
-                    weekdaysLabels
-                  ] }),
-                  withAllDaySlots && /* @__PURE__ */ jsxs("div", { ...getStyles("weekViewAllDaySlots"), children: [
-                    /* @__PURE__ */ jsx("div", { ...getStyles("weekViewAllDaySlotsLabel"), children: getLabel("allDay", labels) }),
-                    /* @__PURE__ */ jsxs("div", { ...getStyles("weekViewAllDaySlotsList"), children: [
-                      allDayBackgroundEventNodes,
-                      /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          ...getStyles("weekViewAllDaySlotsEvents"),
-                          __vars: { "--extra-rows": `${extraRows}` },
-                          children: allDayEvents
-                        }
-                      ),
-                      allDaySlots
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { ...getStyles("weekViewInner"), children: [
-                    /* @__PURE__ */ jsx("div", { ...getStyles("weekViewSlotLabels"), children: timeValues }),
-                    withCurrentTimeIndicator && currentWeekdayIndex !== -1 && /* @__PURE__ */ jsx(
-                      CurrentTimeIndicator,
-                      {
-                        startOffset: "calc(100% - (100% / var(--number-of-days)) * (var(--number-of-days) - var(--indicator-offset-index) + 1) + ((var(--number-of-days) - var(--indicator-offset-index) + 1) * var(--indicator-labels-offset)))",
-                        endOffset: "calc((100% / var(--number-of-days)) * (var(--number-of-days) - var(--indicator-offset-index)) - (var(--number-of-days) - var(--indicator-offset-index)) * var(--indicator-labels-offset))",
-                        timeBubbleStartOffset: "calc(var(--week-view-slots-label-width) - var(--time-bubble-width))",
-                        currentTimeFormat: slotLabelFormat,
-                        withTimeBubble: withCurrentTimeBubble,
-                        withThumb: withCurrentTimeBubble ? currentWeekdayIndex !== 0 : true,
-                        locale,
-                        startTime,
-                        endTime,
-                        ...stylesApiProps
-                      }
-                    ),
-                    days
-                  ] })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-  const mergedDragContextValue = useMemo(
-    () => ({
-      isDragging: dragDrop.dragContextValue.isDragging || allDayDragDrop.dragContextValue.isDragging,
-      draggedEventId: dragDrop.dragContextValue.draggedEventId ?? allDayDragDrop.dragContextValue.draggedEventId,
-      draggedEvent: dragDrop.dragContextValue.draggedEvent ?? allDayDragDrop.dragContextValue.draggedEvent,
-      dropTarget: dragDrop.dragContextValue.dropTarget ?? allDayDragDrop.dragContextValue.dropTarget,
-      onDragStart: (event) => {
-        if (allDayEventIds.has(event.id)) {
-          allDayDragDrop.handleDragStart(event);
-        } else {
-          dragDrop.handleDragStart(event);
-        }
-      },
-      onDragEnd: () => {
-        dragDrop.handleDragEnd();
-        allDayDragDrop.handleDragEnd();
-      },
-      setDropTarget: dragDrop.dragContextValue.setDropTarget
-    }),
-    [dragDrop.dragContextValue, allDayDragDrop.dragContextValue, allDayEventIds]
-  );
-  if (withEventsDragAndDrop) {
-    return /* @__PURE__ */ jsx(DragContext.Provider, { value: mergedDragContextValue, children: content });
-  }
-  return content;
+	const props = useProps("WeekView", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, slotLabelFormat, withWeekendDays, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, recurrenceExpansionLimit, ...others } = props;
+	const getStyles = useStyles({
+		name: __staticSelector,
+		classes: WeekView_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		vars,
+		varsResolver,
+		attributes,
+		rootSelector: "weekView"
+	});
+	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 ctx = useDatesContext();
+	const slots = getDayTimeIntervals({
+		startTime,
+		endTime,
+		intervalMinutes
+	});
+	const viewportRef = useRef(null);
+	useAutoScrollOnDrag({
+		viewportRef,
+		enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
+	});
+	const handleExternalDrop = useCallback((e, target) => {
+		if (!onExternalEventDrop) return;
+		const slotDate = dayjs(target.day).format("YYYY-MM-DD");
+		onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[target.slotIndex].startTime}`);
+	}, [onExternalEventDrop, slots]);
+	const handleExternalAllDayDrop = useCallback((e, day) => {
+		if (!onExternalEventDrop) return;
+		onExternalEventDrop(e.dataTransfer, `${dayjs(day).format("YYYY-MM-DD")} 00:00:00`);
+	}, [onExternalEventDrop]);
+	const dragDrop = useDragDropHandlers({
+		enabled: withEventsDragAndDrop,
+		mode,
+		onEventDrop,
+		canDragEvent,
+		onEventDragStart,
+		onEventDragEnd,
+		calculateDropTarget: (target, draggedEvent) => {
+			const slotTime = slots[target.slotIndex].startTime;
+			return calculateDropTime({
+				draggedEvent,
+				targetDate: target.day,
+				targetSlotTime: slotTime,
+				intervalMinutes
+			});
+		},
+		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
+	});
+	const allDayDragDrop = useDragDropHandlers({
+		enabled: withEventsDragAndDrop,
+		mode,
+		onEventDrop,
+		canDragEvent,
+		onEventDragStart,
+		onEventDragEnd,
+		calculateDropTarget: (targetDay, draggedEvent) => {
+			const eventDuration = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), "millisecond");
+			const newStart = dayjs(targetDay).startOf("day");
+			return {
+				start: newStart.toDate(),
+				end: newStart.add(eventDuration, "millisecond").toDate()
+			};
+		},
+		onExternalDrop: onExternalEventDrop ? handleExternalAllDayDrop : void 0
+	});
+	const slotDragSelect = useSlotDragSelect({
+		enabled: withDragSlotSelect && mode !== "static",
+		onDragEnd: (startIndex, endIndex, group) => {
+			if (!onSlotDragEnd) return;
+			const slotDate = dayjs(group).format("YYYY-MM-DD");
+			onSlotDragEnd(`${slotDate} ${slots[startIndex].startTime}`, `${slotDate} ${slots[endIndex].endTime}`);
+		}
+	});
+	const eventResize = useEventResize({
+		enabled: withEventResize,
+		mode,
+		startTime,
+		endTime,
+		intervalMinutes,
+		onEventResize,
+		canResizeEvent
+	});
+	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
+	const handleTimeSlotClick = (day, slotTime, e) => {
+		if (!onTimeSlotClick) return;
+		const slotDate = dayjs(day).format("YYYY-MM-DD");
+		const slotIndex = slots.findIndex((s) => s.startTime === slotTime);
+		if (slotIndex === -1) return;
+		const slot = slots[slotIndex];
+		onTimeSlotClick(`${slotDate} ${slot.startTime}`, `${slotDate} ${slot.endTime}`, e);
+	};
+	const weekdays = getWeekDays({
+		week: date,
+		withWeekendDays,
+		weekendDays: ctx.getWeekendDays(weekendDays),
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+	});
+	const weekEvents = getWeekViewEvents({
+		date,
+		events: expandRecurringEvents({
+			events,
+			rangeStart: dayjs(weekdays[0]).startOf("day").toDate(),
+			rangeEnd: dayjs(weekdays[weekdays.length - 1]).endOf("day").toDate(),
+			expansionLimit: recurrenceExpansionLimit
+		}),
+		startTime,
+		endTime,
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
+		weekendDays: ctx.getWeekendDays(weekendDays),
+		withWeekendDays
+	});
+	const timeValues = slots.map((interval) => {
+		const label = formatDate({
+			date: dayjs(`${dayjs(date).format("YYYY-MM-DD")} ${interval.startTime}`),
+			locale: ctx.getLocale(locale),
+			format: slotLabelFormat
+		});
+		return /* @__PURE__ */ createElement(Box, {
+			...getStyles("weekViewSlotLabel"),
+			key: interval.startTime,
+			mod: {
+				"hour-start": interval.isHourStart,
+				...getBusinessHoursMod({
+					time: interval.startTime,
+					businessHours,
+					highlightBusinessHours
+				})
+			}
+		}, label);
+	});
+	const slotsRef = useRef([]);
+	const allDaySlotsRef = useRef([]);
+	const weekdaysRef = useRef([]);
+	const daySlotsContainersRef = useRef([]);
+	const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);
+	const firstSlotIndex = {
+		dayIndex: 0,
+		slotIndex: 0
+	};
+	useIsomorphicEffect(() => {
+		if (!startScrollTime || !viewportRef.current) return;
+		const firstDaySlots = slotsRef.current[0];
+		if (!firstDaySlots || firstDaySlots.length === 0) return;
+		const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);
+		if (targetIndex < 0) return;
+		const targetSlot = firstDaySlots[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, dayIndex) => {
+		const daySlots = slotsRef.current[dayIndex] ?? [];
+		const slotIndex = daySlots.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 = daySlots[0];
+		const lastSlot = daySlots[daySlots.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 daySlots.length - 1;
+		return null;
+	}, []);
+	const handleSlotKeyDown = (event, dayIndex, slotIndex) => {
+		handleWeekViewKeyDown({
+			controlsRef: slotsRef,
+			dayIndex,
+			slotIndex,
+			event
+		});
+	};
+	const handleAllDaySlotKeyDown = (event, dayIndex) => {
+		const direction = event.key;
+		if (direction === "ArrowRight" && dayIndex < weekdays.length - 1) {
+			event.preventDefault();
+			allDaySlotsRef.current[dayIndex + 1]?.focus();
+		} else if (direction === "ArrowLeft" && dayIndex > 0) {
+			event.preventDefault();
+			allDaySlotsRef.current[dayIndex - 1]?.focus();
+		} else if (direction === "ArrowDown") {
+			event.preventDefault();
+			slotsRef.current?.[dayIndex]?.[0]?.focus();
+		}
+	};
+	const handleWeekdayKeyDown = (event, dayIndex) => {
+		const direction = event.key;
+		if (direction === "ArrowRight" && dayIndex < weekdays.length - 1) {
+			event.preventDefault();
+			weekdaysRef.current[dayIndex + 1]?.focus();
+		} else if (direction === "ArrowLeft" && dayIndex > 0) {
+			event.preventDefault();
+			weekdaysRef.current[dayIndex - 1]?.focus();
+		}
+	};
+	const currentWeekdayIndex = withCurrentTimeIndicator ? weekdays.findIndex((day) => dayjs(day).isSame(dayjs(), "date")) : -1;
+	const weekdaysLabels = weekdays.map((day, dayIndex) => /* @__PURE__ */ createElement(UnstyledButton, {
+		...getStyles("weekViewDayLabel"),
+		key: day,
+		ref: (node) => {
+			weekdaysRef.current[dayIndex] = node;
+		},
+		"aria-label": `${getLabel("weekday", labels)} ${dayjs(day).format("YYYY-MM-DD")}`,
+		mod: {
+			today: dayjs(day).isSame(dayjs(), "day") && !!highlightToday,
+			weekend: ctx.getWeekendDays(weekendDays).includes(dayjs(day).day()),
+			static: mode === "static"
+		},
+		tabIndex: mode === "static" ? -1 : dayIndex === 0 ? 0 : -1,
+		onKeyDown: mode === "static" ? void 0 : (event) => handleWeekdayKeyDown(event, dayIndex),
+		onClick: mode === "static" ? void 0 : () => {
+			onViewChange?.("day");
+			onDateChange?.(toDateString(day));
+		}
+	}, /* @__PURE__ */ createElement(Box, {
+		...getStyles("weekViewDayWeekday"),
+		key: "weekday"
+	}, formatDate({
+		locale: ctx.getLocale(locale),
+		date: day,
+		format: weekdayFormat
+	})), /* @__PURE__ */ createElement("div", {
+		...getStyles("weekViewDayNumber"),
+		key: "date"
+	}, dayjs(day).date())));
+	const days = weekdays.map((day, dayIndex) => {
+		const backgroundEventNodes = (weekEvents.backgroundEvents[day] || []).filter((event) => !event.position.allDay).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("weekViewBackgroundEvent", { style: {
+					top: `${event.position.top}%`,
+					height: `${event.position.height}%`,
+					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 dayEvents = (weekEvents.regularEvents[day] || []).map((event) => {
+			const eventIsAllDay = isAllDayEvent({
+				event,
+				date: day
+			});
+			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,
+				autoSize: true,
+				hanging: event.position.hanging,
+				draggable: isDraggable,
+				withResize: isResizable,
+				isResizing: resizePosition !== null,
+				onResizeStart: isResizable ? (edge, e) => {
+					const container = daySlotsContainersRef.current[dayIndex];
+					if (container) eventResize.handleResizeStart(event, edge, container, event.position.top, event.position.height, dayjs(day).format("YYYY-MM-DD"), e);
+				} : void 0,
+				renderEventBody,
+				renderEvent,
+				radius,
+				mode,
+				onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
+				style: {
+					position: "absolute",
+					top: `calc(${eventTop}% + 1px)`,
+					left: `${event.position.offset}%`,
+					width: `${event.position.width}%`,
+					height: `calc(${eventHeight}% - 1px)`
+				}
+			}, event.id);
+		});
+		return /* @__PURE__ */ jsxs(WeekViewDay, {
+			day,
+			dayIndex,
+			slots,
+			getStyles,
+			weekendDays,
+			highlightBusinessHours,
+			businessHours,
+			labels,
+			withEventsDragAndDrop: withDragHandlers,
+			mode,
+			slotsRef,
+			firstSlotIndex,
+			onSlotKeyDown: handleSlotKeyDown,
+			onSlotClick: handleTimeSlotClick,
+			onFirstSlotArrowUp: withAllDaySlots ? (dayIdx) => {
+				allDaySlotsRef.current[dayIdx]?.focus();
+			} : void 0,
+			onDaySlotsDragOver: (event, dayStr, dayIdx) => {
+				const slotIndex = getSlotIndexFromDragPoint(event, dayIdx);
+				if (slotIndex !== null) dragDrop.handleDragOver(event, {
+					day: dayStr,
+					slotIndex
+				});
+			},
+			onDaySlotsDragLeave: dragDrop.handleDragLeave,
+			onDaySlotsDrop: (event, dayStr, dayIdx) => {
+				const slotIndex = getSlotIndexFromDragPoint(event, dayIdx);
+				if (slotIndex !== null) dragDrop.handleDrop(event, {
+					day: dayStr,
+					slotIndex
+				});
+			},
+			dropTargetSlotIndex: dragDrop.dropTarget?.day === day ? dragDrop.dropTarget.slotIndex : void 0,
+			withDragSlotSelect,
+			onSlotPointerDown: slotDragSelect.handleSlotPointerDown,
+			isSlotDragSelected: slotDragSelect.isSlotSelected,
+			daySlotsContainerRef: (node) => {
+				daySlotsContainersRef.current[dayIndex] = node;
+			},
+			children: [backgroundEventNodes, dayEvents]
+		}, day);
+	});
+	const allDaySlots = weekdays.map((day, dayIndex) => /* @__PURE__ */ jsx(UnstyledButton, {
+		"aria-label": `${getLabel("allDay", labels)} ${dayjs(day).format("YYYY-MM-DD")}`,
+		ref: (node) => {
+			allDaySlotsRef.current[dayIndex] = node;
+		},
+		tabIndex: dayIndex === 0 ? 0 : -1,
+		onKeyDown: (event) => handleAllDaySlotKeyDown(event, dayIndex),
+		onClick: mode === "static" || !onAllDaySlotClick ? void 0 : (e) => onAllDaySlotClick(dayjs(day).format("YYYY-MM-DD"), e),
+		onDragOver: withDragHandlers ? (e) => allDayDragDrop.handleDragOver(e, day) : void 0,
+		onDragLeave: withDragHandlers ? allDayDragDrop.handleDragLeave : void 0,
+		onDrop: withDragHandlers ? (e) => allDayDragDrop.handleDrop(e, day) : void 0,
+		...getStyles("weekViewDaySlot"),
+		mod: { "drop-target": allDayDragDrop.isDropTarget(day) }
+	}, day));
+	const allDayEventIds = useMemo(() => new Set(weekEvents.allDayEvents.map((e) => e.id)), [weekEvents.allDayEvents]);
+	const allDayEvents = weekEvents.allDayEvents.map((event) => /* @__PURE__ */ jsx(ScheduleEvent, {
+		event,
+		autoSize: true,
+		nowrap: true,
+		hanging: event.position.hanging,
+		draggable: allDayDragDrop.isDraggableEvent(event),
+		renderEvent,
+		mode,
+		onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
+		style: {
+			position: "absolute",
+			zIndex: 2,
+			top: `calc(${event.position.row * 50}% + 1px)`,
+			left: `calc(${event.position.offset}% + 1px)`,
+			width: `calc(${event.position.width}% - 1px)`,
+			height: "calc(50% - 2px)",
+			maxHeight: "calc(50% - 2px)"
+		}
+	}, event.id));
+	const allDayBackgroundEventNodes = weekdays.flatMap((day, dayIndex) => {
+		const allDayBgEvents = (weekEvents.backgroundEvents[day] || []).filter((event) => event.position.allDay);
+		const dayWidth = 100 / weekdays.length;
+		const dayOffset = dayIndex * dayWidth;
+		return allDayBgEvents.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}-${day}`,
+				...getStyles("weekViewBackgroundEvent", { style: {
+					top: 0,
+					height: "100%",
+					left: `${dayOffset}%`,
+					width: `${dayWidth}%`
+				} }),
+				__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 extraRows = Math.max(...weekEvents.allDayEvents.map((event) => event.position.row), 1) - 1;
+	const content = /* @__PURE__ */ jsxs(Box, {
+		...getStyles("weekView"),
+		mod: {
+			static: mode === "static",
+			"slot-dragging": slotDragSelect.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: 140,
+				title: getWeekLabel({
+					weekdays,
+					locale: ctx.getLocale(locale),
+					weekLabelFormat,
+					renderWeekLabel
+				})
+			},
+			labels,
+			onDateChange,
+			onViewChange,
+			previousControlProps,
+			nextControlProps,
+			todayControlProps,
+			viewSelectProps,
+			stylesApiProps
+		}), /* @__PURE__ */ jsx(Box, {
+			...getStyles("weekViewRoot"),
+			__vars: {
+				"--indicator-offset-index": currentWeekdayIndex === -1 ? void 0 : `${currentWeekdayIndex + 1}`,
+				"--number-of-days": withWeekendDays ? "7" : `${7 - ctx.getWeekendDays(weekendDays).length}`
+			},
+			mod: { "with-weekends": withWeekendDays },
+			children: /* @__PURE__ */ jsxs(ScrollArea.Autosize, {
+				scrollbarSize: 4,
+				...scrollAreaProps,
+				...getStyles("weekViewScrollArea", {
+					className: scrollAreaProps?.className,
+					style: scrollAreaProps?.style
+				}),
+				onScrollPositionChange: (position) => {
+					scrollAreaProps?.onScrollPositionChange?.(position);
+					setScrolled(position.y !== 0);
+				},
+				viewportRef: mergedViewportRef,
+				children: [
+					/* @__PURE__ */ jsxs(Box, {
+						...getStyles("weekViewHeader"),
+						mod: { scrolled },
+						children: [/* @__PURE__ */ createElement("div", {
+							...getStyles("weekViewCorner"),
+							key: "corner"
+						}, withWeekNumber && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+							...getStyles("weekViewWeekLabel"),
+							children: getLabel("week", labels)
+						}), /* @__PURE__ */ jsx("div", {
+							...getStyles("weekViewWeekNumber"),
+							children: getWeekNumber(date)
+						})] })), weekdaysLabels]
+					}),
+					withAllDaySlots && /* @__PURE__ */ jsxs("div", {
+						...getStyles("weekViewAllDaySlots"),
+						children: [/* @__PURE__ */ jsx("div", {
+							...getStyles("weekViewAllDaySlotsLabel"),
+							children: getLabel("allDay", labels)
+						}), /* @__PURE__ */ jsxs("div", {
+							...getStyles("weekViewAllDaySlotsList"),
+							children: [
+								allDayBackgroundEventNodes,
+								/* @__PURE__ */ jsx(Box, {
+									...getStyles("weekViewAllDaySlotsEvents"),
+									__vars: { "--extra-rows": `${extraRows}` },
+									children: allDayEvents
+								}),
+								allDaySlots
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						...getStyles("weekViewInner"),
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								...getStyles("weekViewSlotLabels"),
+								children: timeValues
+							}),
+							withCurrentTimeIndicator && currentWeekdayIndex !== -1 && /* @__PURE__ */ jsx(CurrentTimeIndicator, {
+								startOffset: "calc(100% - (100% / var(--number-of-days)) * (var(--number-of-days) - var(--indicator-offset-index) + 1) + ((var(--number-of-days) - var(--indicator-offset-index) + 1) * var(--indicator-labels-offset)))",
+								endOffset: "calc((100% / var(--number-of-days)) * (var(--number-of-days) - var(--indicator-offset-index)) - (var(--number-of-days) - var(--indicator-offset-index)) * var(--indicator-labels-offset))",
+								timeBubbleStartOffset: "calc(var(--week-view-slots-label-width) - var(--time-bubble-width))",
+								currentTimeFormat: slotLabelFormat,
+								withTimeBubble: withCurrentTimeBubble,
+								withThumb: withCurrentTimeBubble ? currentWeekdayIndex !== 0 : true,
+								locale,
+								startTime,
+								endTime,
+								...stylesApiProps
+							}),
+							days
+						]
+					})
+				]
+			})
+		})]
+	});
+	const mergedDragContextValue = useMemo(() => ({
+		isDragging: dragDrop.dragContextValue.isDragging || allDayDragDrop.dragContextValue.isDragging,
+		draggedEventId: dragDrop.dragContextValue.draggedEventId ?? allDayDragDrop.dragContextValue.draggedEventId,
+		draggedEvent: dragDrop.dragContextValue.draggedEvent ?? allDayDragDrop.dragContextValue.draggedEvent,
+		dropTarget: dragDrop.dragContextValue.dropTarget ?? allDayDragDrop.dragContextValue.dropTarget,
+		onDragStart: (event) => {
+			if (allDayEventIds.has(event.id)) allDayDragDrop.handleDragStart(event);
+			else dragDrop.handleDragStart(event);
+		},
+		onDragEnd: () => {
+			dragDrop.handleDragEnd();
+			allDayDragDrop.handleDragEnd();
+		},
+		setDropTarget: dragDrop.dragContextValue.setDropTarget
+	}), [
+		dragDrop.dragContextValue,
+		allDayDragDrop.dragContextValue,
+		allDayEventIds
+	]);
+	if (withEventsDragAndDrop) return /* @__PURE__ */ jsx(DragContext.Provider, {
+		value: mergedDragContextValue,
+		children: content
+	});
+	return content;
 });
 WeekView.displayName = "@mantine/schedule/WeekView";
-WeekView.classes = classes;
+WeekView.classes = WeekView_module_default;
 WeekView.varsResolver = varsResolver;
-
+//#endregion
 export { WeekView };
-//# sourceMappingURL=WeekView.mjs.map
+
+//# sourceMappingURL=WeekView.mjs.map