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

package/cjs/components/DayView/DayView.cjs

@@ -1,584 +1,488 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var dayjs = require('dayjs');
-var core = require('@mantine/core');
-var dates = require('@mantine/dates');
-var hooks = require('@mantine/hooks');
-var useAutoScrollOnDrag = require('../../hooks/use-auto-scroll-on-drag.cjs');
-var useDragDropHandlers = require('../../hooks/use-drag-drop-handlers.cjs');
-var useEventResize = require('../../hooks/use-event-resize.cjs');
-var useSlotDragSelect = require('../../hooks/use-slot-drag-select.cjs');
-var labels = require('../../labels.cjs');
-var formatDate = require('../../utils/format-date/format-date.cjs');
-require('../../utils/get-week-number/get-week-number.cjs');
-var getDayTimeIntervals = require('../../utils/get-day-time-intervals/get-day-time-intervals.cjs');
-var toDateString = require('../../utils/to-date-string/to-date-string.cjs');
-var clampIntervalMinutes = require('../../utils/clamp-interval-minutes/clamp-interval-minutes.cjs');
-var isAllDayEvent = require('../../utils/is-all-day-event/is-all-day-event.cjs');
-var getVisibleEvents = require('../../utils/get-visible-events/get-visible-events.cjs');
-var calculateDropTime = require('../../utils/calculate-drop-time/calculate-drop-time.cjs');
-var getBusinessHoursMod = require('../../utils/get-business-hours-mod/get-business-hours-mod.cjs');
-var expandRecurringEvents = require('../../utils/expand-recurring-events/expand-recurring-events.cjs');
-var CurrentTimeIndicator = require('../CurrentTimeIndicator/CurrentTimeIndicator.cjs');
-var DragContext = require('../DragContext/DragContext.cjs');
-var MoreEvents = require('../MoreEvents/MoreEvents.cjs');
-var ScheduleEvent = require('../ScheduleEvent/ScheduleEvent.cjs');
-var ScheduleHeaderBase = require('../ScheduleHeader/ScheduleHeaderBase.cjs');
-var getDayViewEvents = require('./get-day-view-events/get-day-view-events.cjs');
-var DayView_module = require('./DayView.module.css.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
-
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_labels = require("../../labels.cjs");
+const require_format_date = require("../../utils/format-date/format-date.cjs");
+const require_clamp_interval_minutes = require("../../utils/clamp-interval-minutes/clamp-interval-minutes.cjs");
+const require_get_day_time_intervals = require("../../utils/get-day-time-intervals/get-day-time-intervals.cjs");
+const require_to_date_string = require("../../utils/to-date-string/to-date-string.cjs");
+const require_is_all_day_event = require("../../utils/is-all-day-event/is-all-day-event.cjs");
+const require_get_visible_events = require("../../utils/get-visible-events/get-visible-events.cjs");
+const require_calculate_drop_time = require("../../utils/calculate-drop-time/calculate-drop-time.cjs");
+const require_get_business_hours_mod = require("../../utils/get-business-hours-mod/get-business-hours-mod.cjs");
+const require_expand_recurring_events = require("../../utils/expand-recurring-events/expand-recurring-events.cjs");
+const require_use_auto_scroll_on_drag = require("../../hooks/use-auto-scroll-on-drag.cjs");
+const require_use_drag_drop_handlers = require("../../hooks/use-drag-drop-handlers.cjs");
+const require_use_event_resize = require("../../hooks/use-event-resize.cjs");
+const require_use_slot_drag_select = require("../../hooks/use-slot-drag-select.cjs");
+const require_CurrentTimeIndicator = require("../CurrentTimeIndicator/CurrentTimeIndicator.cjs");
+const require_DragContext = require("../DragContext/DragContext.cjs");
+const require_ScheduleEvent = require("../ScheduleEvent/ScheduleEvent.cjs");
+const require_MoreEvents = require("../MoreEvents/MoreEvents.cjs");
+const require_ScheduleHeaderBase = require("../ScheduleHeader/ScheduleHeaderBase.cjs");
+const require_get_day_view_events = require("./get-day-view-events/get-day-view-events.cjs");
+const require_DayView_module = require("./DayView.module.cjs");
+let dayjs = require("dayjs");
+dayjs = require_runtime.__toESM(dayjs);
+let _mantine_core = require("@mantine/core");
+let _mantine_hooks = require("@mantine/hooks");
+let react = require("react");
+let _mantine_dates = require("@mantine/dates");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/schedule/src/components/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,
-  withEventResize: 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 = core.createVarsResolver(
-  (_theme, { radius, slotHeight, allDaySlotHeight }) => ({
-    dayView: {
-      "--day-view-radius": radius !== void 0 ? core.getRadius(radius) : void 0,
-      "--day-view-slot-height": core.rem(slotHeight),
-      "--day-view-all-day-slot-height": core.rem(allDaySlotHeight)
-    }
-  })
-);
-const DayView = core.factory((_props) => {
-  const props = core.useProps("DayView", defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    __staticSelector,
-    startTime,
-    endTime,
-    intervalMinutes,
-    withAllDaySlot,
-    date,
-    locale,
-    slotLabelFormat,
-    headerFormat,
-    withCurrentTimeIndicator = dayjs__default.default(date).isSame(dayjs__default.default(), "day"),
-    withCurrentTimeBubble,
-    withHeader,
-    radius,
-    onDateChange,
-    onViewChange,
-    previousControlProps,
-    nextControlProps,
-    todayControlProps,
-    viewSelectProps,
-    slotHeight,
-    allDaySlotHeight,
-    scrollAreaProps,
-    events,
-    moreEventsProps,
-    renderEventBody,
-    renderEvent,
-    labels: labels$1,
-    highlightBusinessHours,
-    businessHours,
-    withEventsDragAndDrop,
-    onEventDrop,
-    canDragEvent,
-    onEventDragStart,
-    onEventDragEnd,
-    onTimeSlotClick,
-    onAllDaySlotClick,
-    onEventClick,
-    withDragSlotSelect,
-    onSlotDragEnd,
-    mode,
-    startScrollTime,
-    onExternalEventDrop,
-    withEventResize,
-    onEventResize,
-    canResizeEvent,
-    recurrenceExpansionLimit,
-    ...others
-  } = props;
-  const getStyles = core.useStyles({
-    name: __staticSelector,
-    classes: DayView_module,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    varsResolver,
-    rootSelector: "dayView"
-  });
-  const { resolvedClassNames, resolvedStyles } = core.useResolvedStylesApi({
-    classNames,
-    styles,
-    props
-  });
-  const stylesApiProps = {
-    classNames: resolvedClassNames,
-    styles: resolvedStyles,
-    attributes,
-    __staticSelector,
-    radius
-  };
-  const theme = core.useMantineTheme();
-  const ctx = dates.useDatesContext();
-  const slots = getDayTimeIntervals.getDayTimeIntervals({ startTime, endTime, intervalMinutes });
-  const slotsRef = React.useRef([]);
-  const viewportRef = React.useRef(null);
-  const timeSlotsContainerRef = React.useRef(null);
-  const mergedViewportRef = hooks.useMergedRef(viewportRef, scrollAreaProps?.viewportRef);
-  useAutoScrollOnDrag.useAutoScrollOnDrag({
-    viewportRef,
-    enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
-  });
-  hooks.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 = React.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.useSlotDragSelect({
-    enabled: withDragSlotSelect && mode !== "static",
-    onDragEnd: (startIndex, endIndex) => {
-      if (!onSlotDragEnd) {
-        return;
-      }
-      const slotDate = dayjs__default.default(date).format("YYYY-MM-DD");
-      onSlotDragEnd(
-        `${slotDate} ${slots[startIndex].startTime}`,
-        `${slotDate} ${slots[endIndex].endTime}`
-      );
-    }
-  });
-  const expandedEvents = expandRecurringEvents.expandRecurringEvents({
-    events,
-    rangeStart: dayjs__default.default(date).startOf("day").toDate(),
-    rangeEnd: dayjs__default.default(date).endOf("day").toDate(),
-    expansionLimit: recurrenceExpansionLimit
-  });
-  const eventsData = getDayViewEvents.getDayViewEvents({ events: expandedEvents, date, startTime, endTime });
-  const handleExternalDrop = React.useCallback(
-    (e, slotIndex) => {
-      if (!onExternalEventDrop) {
-        return;
-      }
-      const slotDate = dayjs__default.default(date).format("YYYY-MM-DD");
-      onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[slotIndex].startTime}`);
-    },
-    [onExternalEventDrop, date, slots]
-  );
-  const dragDrop = useDragDropHandlers.useDragDropHandlers({
-    enabled: withEventsDragAndDrop,
-    mode,
-    onEventDrop,
-    canDragEvent,
-    onEventDragStart,
-    onEventDragEnd,
-    calculateDropTarget: (slotIndex, draggedEvent) => {
-      const slotTime = slots[slotIndex].startTime;
-      return calculateDropTime.calculateDropTime({
-        draggedEvent,
-        targetDate: date,
-        targetSlotTime: slotTime,
-        intervalMinutes
-      });
-    },
-    onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
-  });
-  const eventResize = useEventResize.useEventResize({
-    enabled: withEventResize,
-    mode,
-    startTime,
-    endTime,
-    intervalMinutes,
-    onEventResize,
-    canResizeEvent
-  });
-  const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
-  const eventsNodes = eventsData.regularEvents.map((event) => {
-    const eventIsAllDay = isAllDayEvent.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__ */ jsxRuntime.jsx(
-      ScheduleEvent.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__default.default(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.getVisibleEvents({
-    maxEvents: 2,
-    totalEvents: eventsData.allDayEvents.length
-  });
-  const allDayEventsNodes = eventsData.allDayEvents.slice(0, allDayEventsCount.visibleEventsCount).map((event) => /* @__PURE__ */ jsxRuntime.jsx(
-    ScheduleEvent.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__default.default(date).format("YYYY-MM-DD");
-  const items = slots.map((slot, index) => {
-    const isDropTarget = dragDrop.isDropTarget(index);
-    const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);
-    return /* @__PURE__ */ React.createElement(
-      core.UnstyledButton,
-      {
-        ...getStyles("dayViewSlot"),
-        key: slot.startTime,
-        ref: (node) => {
-          slotsRef.current[index] = node;
-        },
-        mod: {
-          "hour-start": slot.isHourStart,
-          ...getBusinessHoursMod.getBusinessHoursMod({
-            time: slot.startTime,
-            businessHours,
-            highlightBusinessHours
-          }),
-          "drop-target": isDropTarget,
-          "drag-selected": isDragSelected,
-          static: mode === "static"
-        },
-        __vars: { "--slot-size": `${clampIntervalMinutes.clampIntervalMinutes(intervalMinutes) / 60}` },
-        "aria-label": `${labels.getLabel("timeSlot", labels$1)} ${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__default.default(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__default.default(`${dayjs__default.default(date).format("YYYY-MM-DD")} ${slot.startTime}`);
-      const label = formatDate.formatDate({
-        locale: ctx.getLocale(locale),
-        date: slotTime,
-        format: slotLabelFormat
-      });
-      acc.push(
-        /* @__PURE__ */ React.createElement(
-          core.Box,
-          {
-            ...getStyles("dayViewSlotLabel"),
-            key: slot.startTime,
-            mod: getBusinessHoursMod.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(core.Box, { ...bgEventProps });
-  });
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(
-    core.Box,
-    {
-      ...getStyles("dayView"),
-      mod: { static: mode === "static", "slot-dragging": slotDragSelect.isDragging },
-      ...others,
-      children: [
-        withHeader && /* @__PURE__ */ jsxRuntime.jsx(
-          ScheduleHeaderBase.ScheduleHeaderBase,
-          {
-            view: "day",
-            navigationHandlers: {
-              previous: () => toDateString.toDateString(dayjs__default.default(date).subtract(1, "day")),
-              next: () => toDateString.toDateString(dayjs__default.default(date).add(1, "day")),
-              today: () => toDateString.toDateString(dayjs__default.default())
-            },
-            control: {
-              title: formatDate.formatDate({ locale: ctx.getLocale(locale), date, format: headerFormat }),
-              miw: 140
-            },
-            labels: labels$1,
-            onDateChange,
-            onViewChange,
-            previousControlProps,
-            nextControlProps,
-            todayControlProps,
-            viewSelectProps,
-            stylesApiProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.ScrollArea.Autosize,
-          {
-            scrollbarSize: 4,
-            ...scrollAreaProps,
-            ...getStyles("dayViewScrollArea", {
-              className: scrollAreaProps?.className,
-              style: scrollAreaProps?.style
-            }),
-            viewportRef: mergedViewportRef,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { ...getStyles("dayViewInner"), children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("dayViewSlotLabels"), children: [
-                withAllDaySlot && /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("dayViewSlotLabel"), mod: { "all-day": true }, children: labels.getLabel("allDay", labels$1) }),
-                slotsLabels
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("dayViewSlots"), children: [
-                withAllDaySlot && /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("dayViewAllDay"), children: [
-                  backgroundAllDayEventNodes,
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("dayViewAllDayEvents"), children: [
-                    allDayEventsNodes,
-                    allDayEventsCount.hiddenEventsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                      MoreEvents.MoreEvents,
-                      {
-                        events: eventsData.allDayEvents,
-                        moreEventsCount: allDayEventsCount.hiddenEventsCount,
-                        renderEventBody,
-                        mode,
-                        ...stylesApiProps,
-                        ...moreEventsProps
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    core.UnstyledButton,
-                    {
-                      ...getStyles("dayViewSlot"),
-                      mod: { "all-day": true },
-                      "aria-label": `${labels.getLabel("timeSlot", labels$1)} ${labels.getLabel("allDay", labels$1)}`,
-                      onClick: mode === "static" || !onAllDaySlotClick ? void 0 : (e) => {
-                        onAllDaySlotClick(dayjs__default.default(date).format("YYYY-MM-DD"), e);
-                      }
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                        CurrentTimeIndicator.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__ */ jsxRuntime.jsx(DragContext.DragContext.Provider, { value: dragDrop.dragContextValue, children: content });
-  }
-  return content;
+const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, slotHeight, allDaySlotHeight }) => ({ dayView: {
+	"--day-view-radius": radius !== void 0 ? (0, _mantine_core.getRadius)(radius) : void 0,
+	"--day-view-slot-height": (0, _mantine_core.rem)(slotHeight),
+	"--day-view-all-day-slot-height": (0, _mantine_core.rem)(allDaySlotHeight)
+} }));
+const DayView = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.useProps)("DayView", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, attributes, vars, __staticSelector, startTime, endTime, intervalMinutes, withAllDaySlot, date, locale, slotLabelFormat, headerFormat, withCurrentTimeIndicator = (0, dayjs.default)(date).isSame((0, dayjs.default)(), "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, getTimeSlotProps, ...others } = props;
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: __staticSelector,
+		classes: require_DayView_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "dayView"
+	});
+	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
+		classNames,
+		styles,
+		props
+	});
+	const stylesApiProps = {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		attributes,
+		__staticSelector,
+		radius
+	};
+	const theme = (0, _mantine_core.useMantineTheme)();
+	const ctx = (0, _mantine_dates.useDatesContext)();
+	const slots = require_get_day_time_intervals.getDayTimeIntervals({
+		startTime,
+		endTime,
+		intervalMinutes
+	});
+	const slotsRef = (0, react.useRef)([]);
+	const viewportRef = (0, react.useRef)(null);
+	const timeSlotsContainerRef = (0, react.useRef)(null);
+	const mergedViewportRef = (0, _mantine_hooks.useMergedRef)(viewportRef, scrollAreaProps?.viewportRef);
+	require_use_auto_scroll_on_drag.useAutoScrollOnDrag({
+		viewportRef,
+		enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
+	});
+	(0, _mantine_hooks.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 = (0, react.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 = require_use_slot_drag_select.useSlotDragSelect({
+		enabled: withDragSlotSelect && mode !== "static",
+		onDragEnd: (startIndex, endIndex) => {
+			if (!onSlotDragEnd) return;
+			const slotDate = (0, dayjs.default)(date).format("YYYY-MM-DD");
+			onSlotDragEnd(`${slotDate} ${slots[startIndex].startTime}`, `${slotDate} ${slots[endIndex].endTime}`);
+		}
+	});
+	const eventsData = require_get_day_view_events.getDayViewEvents({
+		events: require_expand_recurring_events.expandRecurringEvents({
+			events,
+			rangeStart: (0, dayjs.default)(date).startOf("day").toDate(),
+			rangeEnd: (0, dayjs.default)(date).endOf("day").toDate(),
+			expansionLimit: recurrenceExpansionLimit
+		}),
+		date,
+		startTime,
+		endTime
+	});
+	const handleExternalDrop = (0, react.useCallback)((e, slotIndex) => {
+		if (!onExternalEventDrop) return;
+		const slotDate = (0, dayjs.default)(date).format("YYYY-MM-DD");
+		onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[slotIndex].startTime}`);
+	}, [
+		onExternalEventDrop,
+		date,
+		slots
+	]);
+	const dragDrop = require_use_drag_drop_handlers.useDragDropHandlers({
+		enabled: withEventsDragAndDrop,
+		mode,
+		onEventDrop,
+		canDragEvent,
+		onEventDragStart,
+		onEventDragEnd,
+		calculateDropTarget: (slotIndex, draggedEvent) => {
+			const slotTime = slots[slotIndex].startTime;
+			return require_calculate_drop_time.calculateDropTime({
+				draggedEvent,
+				targetDate: date,
+				targetSlotTime: slotTime,
+				intervalMinutes
+			});
+		},
+		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
+	});
+	const eventResize = require_use_event_resize.useEventResize({
+		enabled: withEventResize,
+		mode,
+		startTime,
+		endTime,
+		intervalMinutes,
+		onEventResize,
+		canResizeEvent
+	});
+	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
+	const eventsNodes = eventsData.regularEvents.map((event) => {
+		const eventIsAllDay = require_is_all_day_event.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__ */ (0, react_jsx_runtime.jsx)(require_ScheduleEvent.ScheduleEvent, {
+			event,
+			renderEventBody,
+			renderEvent,
+			autoSize: true,
+			draggable: isDraggable,
+			withResize: isResizable,
+			isResizing: resizePosition !== null,
+			onResizeStart: isResizable ? (edge, e) => {
+				if (timeSlotsContainerRef.current) eventResize.handleResizeStart({
+					event,
+					edge,
+					container: timeSlotsContainerRef.current,
+					originalTop: event.position.top,
+					originalHeight: event.position.height,
+					eventDate: (0, dayjs.default)(date).format("YYYY-MM-DD"),
+					pointerEvent: 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 = require_get_visible_events.getVisibleEvents({
+		maxEvents: 2,
+		totalEvents: eventsData.allDayEvents.length
+	});
+	const allDayEventsNodes = eventsData.allDayEvents.slice(0, allDayEventsCount.visibleEventsCount).map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleEvent.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 = (0, dayjs.default)(date).format("YYYY-MM-DD");
+	const items = slots.map((slot, index) => {
+		const isDropTarget = dragDrop.isDropTarget(index);
+		const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);
+		const slotStart = `${dayGroup} ${slot.startTime}`;
+		const slotEnd = `${dayGroup} ${slot.endTime}`;
+		const { onClick: externalOnClick, ...externalSlotProps } = getTimeSlotProps?.({
+			start: slotStart,
+			end: slotEnd
+		}) || {};
+		const handleClick = mode === "static" ? void 0 : (event) => {
+			onTimeSlotClick?.({
+				slotStart,
+				slotEnd,
+				nativeEvent: event
+			});
+			externalOnClick?.(event);
+		};
+		return /* @__PURE__ */ (0, react.createElement)(_mantine_core.UnstyledButton, {
+			...getStyles("dayViewSlot"),
+			key: slot.startTime,
+			ref: (node) => {
+				slotsRef.current[index] = node;
+			},
+			mod: {
+				"hour-start": slot.isHourStart,
+				...require_get_business_hours_mod.getBusinessHoursMod({
+					time: slot.startTime,
+					businessHours,
+					highlightBusinessHours
+				}),
+				"drop-target": isDropTarget,
+				"drag-selected": isDragSelected,
+				static: mode === "static"
+			},
+			__vars: { "--slot-size": `${require_clamp_interval_minutes.clampIntervalMinutes(intervalMinutes) / 60}` },
+			"aria-label": `${require_labels.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: handleClick,
+			onDragOver: withDragHandlers ? (event) => event.preventDefault() : void 0,
+			...externalSlotProps
+		});
+	});
+	const slotsLabels = slots.reduce((acc, slot) => {
+		if (slot.isHourStart) {
+			const slotTime = (0, dayjs.default)(`${(0, dayjs.default)(date).format("YYYY-MM-DD")} ${slot.startTime}`);
+			const label = require_format_date.formatDate({
+				locale: ctx.getLocale(locale),
+				date: slotTime,
+				format: slotLabelFormat
+			});
+			acc.push(/* @__PURE__ */ (0, react.createElement)(_mantine_core.Box, {
+				...getStyles("dayViewSlotLabel"),
+				key: slot.startTime,
+				mod: require_get_business_hours_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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...bgEventProps });
+	});
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+		...getStyles("dayView"),
+		mod: {
+			static: mode === "static",
+			"slot-dragging": slotDragSelect.isDragging
+		},
+		...others,
+		children: [withHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleHeaderBase.ScheduleHeaderBase, {
+			view: "day",
+			navigationHandlers: {
+				previous: () => require_to_date_string.toDateString((0, dayjs.default)(date).subtract(1, "day")),
+				next: () => require_to_date_string.toDateString((0, dayjs.default)(date).add(1, "day")),
+				today: () => require_to_date_string.toDateString((0, dayjs.default)())
+			},
+			control: {
+				title: require_format_date.formatDate({
+					locale: ctx.getLocale(locale),
+					date,
+					format: headerFormat
+				}),
+				miw: 140
+			},
+			labels,
+			onDateChange,
+			onViewChange,
+			previousControlProps,
+			nextControlProps,
+			todayControlProps,
+			viewSelectProps,
+			stylesApiProps
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ScrollArea.Autosize, {
+			scrollbarSize: 4,
+			...scrollAreaProps,
+			...getStyles("dayViewScrollArea", {
+				className: scrollAreaProps?.className,
+				style: scrollAreaProps?.style
+			}),
+			viewportRef: mergedViewportRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+				...getStyles("dayViewInner"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					...getStyles("dayViewSlotLabels"),
+					children: [withAllDaySlot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
+						...getStyles("dayViewSlotLabel"),
+						mod: { "all-day": true },
+						children: require_labels.getLabel("allDay", labels)
+					}), slotsLabels]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					...getStyles("dayViewSlots"),
+					children: [withAllDaySlot && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						...getStyles("dayViewAllDay"),
+						children: [
+							backgroundAllDayEventNodes,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								...getStyles("dayViewAllDayEvents"),
+								children: [allDayEventsNodes, allDayEventsCount.hiddenEventsCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MoreEvents.MoreEvents, {
+									events: eventsData.allDayEvents,
+									moreEventsCount: allDayEventsCount.hiddenEventsCount,
+									renderEventBody,
+									mode,
+									...stylesApiProps,
+									...moreEventsProps
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+								...getStyles("dayViewSlot"),
+								mod: {
+									"all-day": true,
+									static: mode === "static"
+								},
+								"aria-label": `${require_labels.getLabel("timeSlot", labels)} ${require_labels.getLabel("allDay", labels)}`,
+								onClick: mode === "static" || !onAllDaySlotClick ? void 0 : (e) => {
+									onAllDaySlotClick((0, dayjs.default)(date).format("YYYY-MM-DD"), e);
+								}
+							})
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_CurrentTimeIndicator.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__ */ (0, react_jsx_runtime.jsx)(require_DragContext.DragContext.Provider, {
+		value: dragDrop.dragContextValue,
+		children: content
+	});
+	return content;
 });
 DayView.displayName = "@mantine/schedule/DayView";
-DayView.classes = DayView_module;
+DayView.classes = require_DayView_module.default;
 DayView.varsResolver = varsResolver;
-
+//#endregion
 exports.DayView = DayView;
-//# sourceMappingURL=DayView.cjs.map
+
+//# sourceMappingURL=DayView.cjs.map