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

package/esm/components/MonthView/MonthView.mjs

@@ -1,467 +1,369 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCallback, useRef, createElement } from 'react';
-import dayjs from 'dayjs';
-import { createVarsResolver, getRadius, factory, useProps, useStyles, useResolvedStylesApi, useMantineTheme, UnstyledButton, Box, ScrollArea } from '@mantine/core';
-import { useDatesContext } from '@mantine/dates';
-import { useDragDropHandlers } from '../../hooks/use-drag-drop-handlers.mjs';
-import { useSlotDragSelect } from '../../hooks/use-slot-drag-select.mjs';
-import { getWeekdaysNames } from '../../utils/get-weekdays-names/get-weekdays-names.mjs';
-import { getWeekNumber } from '../../utils/get-week-number/get-week-number.mjs';
-import { getMonthDays } from '../../utils/get-month-days/get-month-days.mjs';
-import { isSameMonth } from '../../utils/is-same-month/is-same-month.mjs';
-import { toDateString } from '../../utils/to-date-string/to-date-string.mjs';
-import { getMonthRange } from '../../utils/get-month-range/get-month-range.mjs';
-import { calculateMonthDropDate } from '../../utils/calculate-month-drop-date/calculate-month-drop-date.mjs';
-import { expandRecurringEvents } from '../../utils/expand-recurring-events/expand-recurring-events.mjs';
-import { DragContext } from '../DragContext/DragContext.mjs';
-import { MoreEvents } from '../MoreEvents/MoreEvents.mjs';
-import { ScheduleEvent } from '../ScheduleEvent/ScheduleEvent.mjs';
-import { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase.mjs';
-import { getMonthViewEvents } from './get-month-view-events/get-month-view-events.mjs';
-import { handleMonthViewKeyDown } from './handle-month-view-key-down.mjs';
-import classes from './MonthView.module.css.mjs';
-
-const varsResolver = createVarsResolver(
-  (_theme, { radius, maxEventsPerDay }) => ({
-    monthView: {
-      "--month-view-radius": radius ? getRadius(radius) : void 0,
-      "--month-view-max-events": maxEventsPerDay !== void 0 ? `${Math.min(10, Math.max(1, maxEventsPerDay))}` : void 0
-    }
-  })
-);
+"use client";
+import { getWeekdaysNames } from "../../utils/get-weekdays-names/get-weekdays-names.mjs";
+import { getWeekNumber } from "../../utils/get-week-number/get-week-number.mjs";
+import { getMonthDays } from "../../utils/get-month-days/get-month-days.mjs";
+import { isSameMonth } from "../../utils/is-same-month/is-same-month.mjs";
+import { toDateString } from "../../utils/to-date-string/to-date-string.mjs";
+import { getMonthRange } from "../../utils/get-month-range/get-month-range.mjs";
+import { calculateMonthDropDate } from "../../utils/calculate-month-drop-date/calculate-month-drop-date.mjs";
+import { expandRecurringEvents } from "../../utils/expand-recurring-events/expand-recurring-events.mjs";
+import { useDragDropHandlers } from "../../hooks/use-drag-drop-handlers.mjs";
+import { useSlotDragSelect } from "../../hooks/use-slot-drag-select.mjs";
+import { DragContext } from "../DragContext/DragContext.mjs";
+import { ScheduleEvent } from "../ScheduleEvent/ScheduleEvent.mjs";
+import { MoreEvents } from "../MoreEvents/MoreEvents.mjs";
+import { ScheduleHeaderBase } from "../ScheduleHeader/ScheduleHeaderBase.mjs";
+import { handleMonthViewKeyDown } from "./handle-month-view-key-down.mjs";
+import { getMonthViewEvents } from "./get-month-view-events/get-month-view-events.mjs";
+import MonthView_module_default from "./MonthView.module.mjs";
+import dayjs from "dayjs";
+import { Box, ScrollArea, UnstyledButton, createVarsResolver, factory, getRadius, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
+import { createElement, useCallback, useRef } from "react";
+import { useDatesContext } from "@mantine/dates";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/schedule/src/components/MonthView/MonthView.tsx
+const varsResolver = createVarsResolver((_theme, { radius, maxEventsPerDay }) => ({ monthView: {
+	"--month-view-radius": radius ? getRadius(radius) : void 0,
+	"--month-view-max-events": maxEventsPerDay !== void 0 ? `${Math.min(10, Math.max(1, maxEventsPerDay))}` : void 0
+} }));
 const defaultProps = {
-  __staticSelector: "MonthView",
-  withWeekDays: true,
-  consistentWeeks: true,
-  highlightToday: true,
-  withOutsideDays: true,
-  withHeader: true,
-  weekdayFormat: "ddd",
-  withEventsDragAndDrop: false,
-  withDragSlotSelect: false,
-  mode: "default"
+	__staticSelector: "MonthView",
+	withWeekDays: true,
+	consistentWeeks: true,
+	highlightToday: true,
+	withOutsideDays: true,
+	withHeader: true,
+	weekdayFormat: "ddd",
+	withEventsDragAndDrop: false,
+	withDragSlotSelect: false,
+	mode: "default"
 };
 const MonthView = factory((_props) => {
-  const props = useProps("MonthView", defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    mod,
-    date,
-    onDateChange,
-    withWeekNumbers,
-    withWeekDays,
-    locale,
-    weekdayFormat,
-    firstDayOfWeek,
-    weekendDays,
-    __staticSelector,
-    getDayProps,
-    getWeekNumberProps,
-    onDayClick,
-    onWeekNumberClick,
-    consistentWeeks,
-    highlightToday,
-    radius,
-    withOutsideDays,
-    withHeader,
-    monthYearSelectProps,
-    onViewChange,
-    todayControlProps,
-    nextControlProps,
-    previousControlProps,
-    viewSelectProps,
-    events,
-    moreEventsProps,
-    renderEventBody,
-    renderEvent,
-    withEventsDragAndDrop,
-    onEventDrop,
-    canDragEvent,
-    onEventDragStart,
-    onEventDragEnd,
-    onEventClick,
-    withDragSlotSelect,
-    onSlotDragEnd,
-    labels,
-    mode,
-    scrollAreaProps,
-    onExternalEventDrop,
-    recurrenceExpansionLimit,
-    maxEventsPerDay: _maxEventsPerDay,
-    ...others
-  } = props;
-  const maxEventsPerDay = Math.min(10, Math.max(1, _maxEventsPerDay ?? 2));
-  const getStyles = useStyles({
-    name: __staticSelector,
-    classes,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    varsResolver,
-    rootSelector: "monthView"
-  });
-  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
-    styles,
-    props
-  });
-  const stylesApiProps = {
-    classNames: resolvedClassNames,
-    styles: resolvedStyles,
-    attributes,
-    __staticSelector,
-    radius
-  };
-  const theme = useMantineTheme();
-  const ctx = useDatesContext();
-  const range = getMonthRange({
-    month: date,
-    withOutsideDays,
-    consistentWeeks,
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-  });
-  const expandedEvents = expandRecurringEvents({
-    events,
-    rangeStart: dayjs(range.start).startOf("day").toDate(),
-    rangeEnd: dayjs(range.end).endOf("day").toDate(),
-    expansionLimit: recurrenceExpansionLimit
-  });
-  const monthEvents = getMonthViewEvents({
-    date,
-    events: expandedEvents,
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
-    withOutsideDays,
-    consistentWeeks
-  });
-  const handleExternalDrop = 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: (targetDay, draggedEvent) => {
-      return calculateMonthDropDate({
-        draggedEvent,
-        targetDay
-      });
-    },
-    onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
-  });
-  const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
-  const flatDaysRef = useRef([]);
-  const slotDragSelect = useSlotDragSelect({
-    enabled: withDragSlotSelect && mode !== "static",
-    onDragEnd: (startIndex, endIndex) => {
-      if (!onSlotDragEnd) {
-        return;
-      }
-      const startDay = flatDaysRef.current[startIndex];
-      const endDay = flatDaysRef.current[endIndex];
-      if (startDay && endDay) {
-        onSlotDragEnd(
-          dayjs(startDay).startOf("day").format("YYYY-MM-DD HH:mm:ss"),
-          dayjs(endDay).endOf("day").format("YYYY-MM-DD HH:mm:ss")
-        );
-      }
-    }
-  });
-  const daysRef = useRef([]);
-  const monthDays = getMonthDays({
-    month: dayjs(date).format("YYYY-MM-DD 00:00:00"),
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
-    consistentWeeks: consistentWeeks && withOutsideDays
-  });
-  const firstDayIndex = (() => {
-    for (let weekIndex = 0; weekIndex < monthDays.length; weekIndex++) {
-      const week = monthDays[weekIndex];
-      for (let dayIndex = 0; dayIndex < week.length; dayIndex++) {
-        const day = week[dayIndex];
-        const outside = !isSameMonth(date, day);
-        if (!outside || withOutsideDays) {
-          return { weekIndex, dayIndex };
-        }
-      }
-    }
-    return { weekIndex: 0, dayIndex: 0 };
-  })();
-  const weekdays = withWeekDays ? getWeekdaysNames({
-    locale: ctx.getLocale(locale),
-    format: weekdayFormat,
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-  }).map((day, index) => /* @__PURE__ */ createElement("div", { ...getStyles("monthViewWeekday"), key: index }, day)) : null;
-  const monthGroup = "month";
-  flatDaysRef.current = monthDays.flat();
-  const weeks = monthDays.map((week, weekIndex) => {
-    if (!daysRef.current[weekIndex]) {
-      daysRef.current[weekIndex] = [];
-    }
-    const days = week.map((day, dayIndex) => {
-      const outside = !isSameMonth(date, day);
-      const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs(day).day());
-      const ariaLabel = dayjs(day).locale(locale || ctx.locale).format("MMMM D, YYYY");
-      const dayProps = getDayProps?.(dayjs(day).format("YYYY-MM-DD")) || {};
-      const today = dayjs(day).isSame(dayjs(), "day") && highlightToday;
-      if (outside && !withOutsideDays) {
-        return /* @__PURE__ */ jsx("div", { "data-static": true, ...getStyles("monthViewDay", { style: dayProps.style }) }, day);
-      }
-      const isFirstDay = weekIndex === firstDayIndex.weekIndex && dayIndex === firstDayIndex.dayIndex;
-      const isDropTarget = dragDrop.isDropTarget(day);
-      const flatIndex = weekIndex * 7 + dayIndex;
-      const isDragSelected = slotDragSelect.isSlotSelected(flatIndex, monthGroup);
-      return /* @__PURE__ */ createElement(
-        UnstyledButton,
-        {
-          "aria-label": ariaLabel,
-          ...dayProps,
-          ...getStyles("monthViewDay", { className: dayProps.className, style: dayProps.style }),
-          key: day,
-          ref: (node) => {
-            if (node) {
-              if (!daysRef.current[weekIndex]) {
-                daysRef.current[weekIndex] = [];
-              }
-              daysRef.current[weekIndex][dayIndex] = node;
-            }
-          },
-          "data-drag-slot-index": withDragSlotSelect && mode !== "static" ? flatIndex : void 0,
-          "data-drag-slot-group": withDragSlotSelect && mode !== "static" ? monthGroup : void 0,
-          onClick: mode === "static" ? void 0 : (event) => {
-            onDayClick?.(dayjs(day).format("YYYY-MM-DD"), event);
-            dayProps.onClick?.(event);
-          },
-          onPointerDown: withDragSlotSelect && mode !== "static" ? (e) => slotDragSelect.handleSlotPointerDown(
-            e,
-            flatIndex,
-            monthGroup
-          ) : void 0,
-          onKeyDown: (event) => {
-            handleMonthViewKeyDown({
-              controlsRef: daysRef,
-              weekIndex,
-              dayIndex,
-              event
-            });
-            dayProps.onKeyDown?.(event);
-          },
-          mod: [
-            {
-              outside,
-              weekend,
-              today,
-              "drop-target": isDropTarget,
-              "drag-selected": isDragSelected,
-              static: mode === "static"
-            },
-            dayProps.mod
-          ],
-          "data-outside": outside || void 0,
-          tabIndex: mode === "static" ? -1 : isFirstDay ? 0 : -1,
-          onDragOver: withDragHandlers ? (e) => dragDrop.handleDragOver(e, day) : void 0,
-          onDragLeave: withDragHandlers ? dragDrop.handleDragLeave : void 0,
-          onDrop: withDragHandlers ? (e) => dragDrop.handleDrop(e, day) : void 0
-        },
-        /* @__PURE__ */ jsx("span", { "data-today": today || void 0, ...getStyles("monthViewDayLabel"), children: dayjs(day).format("D") })
-      );
-    });
-    const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format("YYYY-MM-DD")) || {};
-    const weekNumber = getWeekNumber(week);
-    const backgroundEventNodes = (monthEvents.backgroundByWeek[weekIndex] || []).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}-${weekIndex}`,
-        ...getStyles("monthViewBackgroundEvent", {
-          style: {
-            left: `calc(${event.position.startOffset}% + 2px)`,
-            width: `calc(${event.position.width}% - 3px)`
-          }
-        }),
-        __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 rowHeightPercent = 100 / maxEventsPerDay;
-    const events2 = (monthEvents.groupedByWeek[weekIndex] || []).filter((event) => event.position.row < maxEventsPerDay).map((event) => {
-      const isDraggable = dragDrop.isDraggableEvent(event);
-      return /* @__PURE__ */ jsx(
-        ScheduleEvent,
-        {
-          event,
-          nowrap: true,
-          autoSize: true,
-          hanging: event.position.hanging,
-          draggable: isDraggable,
-          renderEventBody,
-          renderEvent,
-          radius,
-          mode,
-          onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
-          style: {
-            position: "absolute",
-            top: `calc(${event.position.row * rowHeightPercent}% + 1px)`,
-            left: `calc(${event.position.startOffset}% + 1px)`,
-            width: `calc(${event.position.width}% - 2px)`,
-            height: `calc(${rowHeightPercent}% - 2px)`
-          }
-        },
-        event.id
-      );
-    });
-    const moreEventsNodes = week.map((day, dayIndex) => {
-      const dayEvents = monthEvents.groupedByDay[day] || [];
-      const hiddenEventsCount = Math.max(0, dayEvents.length - maxEventsPerDay);
-      if (hiddenEventsCount <= 0) {
-        return null;
-      }
-      const dayStartOffset = dayIndex / 7 * 100;
-      const dayWidth = 1 / 7 * 100;
-      return /* @__PURE__ */ jsx(
-        MoreEvents,
-        {
-          events: dayEvents,
-          moreEventsCount: hiddenEventsCount,
-          mode,
-          style: {
-            position: "absolute",
-            top: `calc(100% - 2px)`,
-            left: `calc(${dayStartOffset}% + 1px)`,
-            width: `calc(${dayWidth}% - 1px)`,
-            height: "22px",
-            paddingInline: 4
-          },
-          ...moreEventsProps
-        },
-        `more-${day}`
-      );
-    });
-    return /* @__PURE__ */ createElement("div", { ...getStyles("monthViewWeek"), key: weekIndex }, withWeekNumbers && /* @__PURE__ */ jsx(
-      UnstyledButton,
-      {
-        "aria-label": `Week ${weekNumber}`,
-        ...weekNumberProps,
-        onClick: mode === "static" ? void 0 : (event) => {
-          onViewChange?.("week");
-          onDateChange?.(toDateString(week[0]));
-          onWeekNumberClick?.(dayjs(week[0]).format("YYYY-MM-DD"), event);
-          weekNumberProps.onClick?.(event);
-        },
-        mod: { static: mode === "static" },
-        tabIndex: mode === "static" ? -1 : 0,
-        ...getStyles("monthViewWeekNumber", {
-          className: weekNumberProps.className,
-          style: weekNumberProps.style
-        }),
-        children: weekNumber
-      },
-      weekNumber
-    ), /* @__PURE__ */ createElement("div", { ...getStyles("monthViewEvents"), key: "week-events" }, backgroundEventNodes, events2, moreEventsNodes), days);
-  });
-  const content = /* @__PURE__ */ jsxs(
-    Box,
-    {
-      mod: [
-        {
-          "with-week-numbers": withWeekNumbers,
-          "with-weekdays": withWeekDays,
-          static: mode === "static",
-          "slot-dragging": slotDragSelect.isDragging
-        },
-        mod
-      ],
-      ...getStyles("monthView"),
-      ...others,
-      children: [
-        withHeader && /* @__PURE__ */ jsx(
-          ScheduleHeaderBase,
-          {
-            view: "month",
-            navigationHandlers: {
-              previous: () => toDateString(dayjs(date).subtract(1, "month").startOf("month")),
-              next: () => toDateString(dayjs(date).add(1, "month").startOf("month")),
-              today: () => toDateString(dayjs())
-            },
-            control: {
-              monthYearSelect: {
-                yearValue: dayjs(date).get("year"),
-                monthValue: dayjs(date).get("month"),
-                onYearChange: (year) => onDateChange?.(toDateString(dayjs(date).set("year", year).startOf("month"))),
-                onMonthChange: (month) => onDateChange?.(toDateString(dayjs(date).set("month", month).startOf("month"))),
-                ...monthYearSelectProps
-              }
-            },
-            labels,
-            onDateChange,
-            onViewChange,
-            previousControlProps,
-            nextControlProps,
-            todayControlProps,
-            viewSelectProps,
-            stylesApiProps
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ScrollArea,
-          {
-            scrollbarSize: 4,
-            ...scrollAreaProps,
-            ...getStyles("monthViewScrollArea", {
-              className: scrollAreaProps?.className,
-              style: scrollAreaProps?.style
-            }),
-            children: /* @__PURE__ */ jsxs("div", { ...getStyles("monthViewInner"), children: [
-              weekdays && /* @__PURE__ */ jsxs("div", { ...getStyles("monthViewWeekdays"), children: [
-                withWeekNumbers && /* @__PURE__ */ jsx("div", { ...getStyles("monthViewWeekdaysCorner") }),
-                weekdays
-              ] }),
-              weeks
-            ] })
-          }
-        )
-      ]
-    }
-  );
-  if (withEventsDragAndDrop) {
-    return /* @__PURE__ */ jsx(DragContext.Provider, { value: dragDrop.dragContextValue, children: content });
-  }
-  return content;
+	const props = useProps("MonthView", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, attributes, vars, mod, date, onDateChange, withWeekNumbers, withWeekDays, locale, weekdayFormat, firstDayOfWeek, weekendDays, __staticSelector, getDayProps, getWeekNumberProps, onDayClick, onWeekNumberClick, consistentWeeks, highlightToday, radius, withOutsideDays, withHeader, monthYearSelectProps, onViewChange, todayControlProps, nextControlProps, previousControlProps, viewSelectProps, events, moreEventsProps, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onEventClick, withDragSlotSelect, onSlotDragEnd, labels, mode, scrollAreaProps, onExternalEventDrop, recurrenceExpansionLimit, maxEventsPerDay: _maxEventsPerDay, ...others } = props;
+	const maxEventsPerDay = Math.min(10, Math.max(1, _maxEventsPerDay ?? 2));
+	const getStyles = useStyles({
+		name: __staticSelector,
+		classes: MonthView_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "monthView"
+	});
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		classNames,
+		styles,
+		props
+	});
+	const stylesApiProps = {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		attributes,
+		__staticSelector,
+		radius
+	};
+	const theme = useMantineTheme();
+	const ctx = useDatesContext();
+	const range = getMonthRange({
+		month: date,
+		withOutsideDays,
+		consistentWeeks,
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+	});
+	const monthEvents = getMonthViewEvents({
+		date,
+		events: expandRecurringEvents({
+			events,
+			rangeStart: dayjs(range.start).startOf("day").toDate(),
+			rangeEnd: dayjs(range.end).endOf("day").toDate(),
+			expansionLimit: recurrenceExpansionLimit
+		}),
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
+		withOutsideDays,
+		consistentWeeks
+	});
+	const handleExternalDrop = 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: (targetDay, draggedEvent) => {
+			return calculateMonthDropDate({
+				draggedEvent,
+				targetDay
+			});
+		},
+		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
+	});
+	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
+	const flatDaysRef = useRef([]);
+	const slotDragSelect = useSlotDragSelect({
+		enabled: withDragSlotSelect && mode !== "static",
+		onDragEnd: (startIndex, endIndex) => {
+			if (!onSlotDragEnd) return;
+			const startDay = flatDaysRef.current[startIndex];
+			const endDay = flatDaysRef.current[endIndex];
+			if (startDay && endDay) onSlotDragEnd(dayjs(startDay).startOf("day").format("YYYY-MM-DD HH:mm:ss"), dayjs(endDay).endOf("day").format("YYYY-MM-DD HH:mm:ss"));
+		}
+	});
+	const daysRef = useRef([]);
+	const monthDays = getMonthDays({
+		month: dayjs(date).format("YYYY-MM-DD 00:00:00"),
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
+		consistentWeeks: consistentWeeks && withOutsideDays
+	});
+	const firstDayIndex = (() => {
+		for (let weekIndex = 0; weekIndex < monthDays.length; weekIndex++) {
+			const week = monthDays[weekIndex];
+			for (let dayIndex = 0; dayIndex < week.length; dayIndex++) {
+				const day = week[dayIndex];
+				if (!!isSameMonth(date, day) || withOutsideDays) return {
+					weekIndex,
+					dayIndex
+				};
+			}
+		}
+		return {
+			weekIndex: 0,
+			dayIndex: 0
+		};
+	})();
+	const weekdays = withWeekDays ? getWeekdaysNames({
+		locale: ctx.getLocale(locale),
+		format: weekdayFormat,
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+	}).map((day, index) => /* @__PURE__ */ createElement("div", {
+		...getStyles("monthViewWeekday"),
+		key: index
+	}, day)) : null;
+	const monthGroup = "month";
+	flatDaysRef.current = monthDays.flat();
+	const weeks = monthDays.map((week, weekIndex) => {
+		if (!daysRef.current[weekIndex]) daysRef.current[weekIndex] = [];
+		const days = week.map((day, dayIndex) => {
+			const outside = !isSameMonth(date, day);
+			const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs(day).day());
+			const ariaLabel = dayjs(day).locale(locale || ctx.locale).format("MMMM D, YYYY");
+			const dayProps = getDayProps?.(dayjs(day).format("YYYY-MM-DD")) || {};
+			const today = dayjs(day).isSame(dayjs(), "day") && highlightToday;
+			if (outside && !withOutsideDays) return /* @__PURE__ */ jsx("div", {
+				"data-static": true,
+				...getStyles("monthViewDay", { style: dayProps.style })
+			}, day);
+			const isFirstDay = weekIndex === firstDayIndex.weekIndex && dayIndex === firstDayIndex.dayIndex;
+			const isDropTarget = dragDrop.isDropTarget(day);
+			const flatIndex = weekIndex * 7 + dayIndex;
+			const isDragSelected = slotDragSelect.isSlotSelected(flatIndex, monthGroup);
+			return /* @__PURE__ */ createElement(UnstyledButton, {
+				"aria-label": ariaLabel,
+				...dayProps,
+				...getStyles("monthViewDay", {
+					className: dayProps.className,
+					style: dayProps.style
+				}),
+				key: day,
+				ref: (node) => {
+					if (node) {
+						if (!daysRef.current[weekIndex]) daysRef.current[weekIndex] = [];
+						daysRef.current[weekIndex][dayIndex] = node;
+					}
+				},
+				"data-drag-slot-index": withDragSlotSelect && mode !== "static" ? flatIndex : void 0,
+				"data-drag-slot-group": withDragSlotSelect && mode !== "static" ? monthGroup : void 0,
+				onClick: mode === "static" ? void 0 : (event) => {
+					onDayClick?.(dayjs(day).format("YYYY-MM-DD"), event);
+					dayProps.onClick?.(event);
+				},
+				onPointerDown: withDragSlotSelect && mode !== "static" ? (e) => slotDragSelect.handleSlotPointerDown(e, flatIndex, monthGroup) : void 0,
+				onKeyDown: (event) => {
+					handleMonthViewKeyDown({
+						controlsRef: daysRef,
+						weekIndex,
+						dayIndex,
+						event
+					});
+					dayProps.onKeyDown?.(event);
+				},
+				mod: [{
+					outside,
+					weekend,
+					today,
+					"drop-target": isDropTarget,
+					"drag-selected": isDragSelected,
+					static: mode === "static"
+				}, dayProps.mod],
+				"data-outside": outside || void 0,
+				tabIndex: mode === "static" ? -1 : isFirstDay ? 0 : -1,
+				onDragOver: withDragHandlers ? (e) => dragDrop.handleDragOver(e, day) : void 0,
+				onDragLeave: withDragHandlers ? dragDrop.handleDragLeave : void 0,
+				onDrop: withDragHandlers ? (e) => dragDrop.handleDrop(e, day) : void 0
+			}, /* @__PURE__ */ jsx("span", {
+				"data-today": today || void 0,
+				...getStyles("monthViewDayLabel"),
+				children: dayjs(day).format("D")
+			}));
+		});
+		const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format("YYYY-MM-DD")) || {};
+		const weekNumber = getWeekNumber(week);
+		const backgroundEventNodes = (monthEvents.backgroundByWeek[weekIndex] || []).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}-${weekIndex}`,
+				...getStyles("monthViewBackgroundEvent", { style: {
+					left: `calc(${event.position.startOffset}% + 2px)`,
+					width: `calc(${event.position.width}% - 3px)`
+				} }),
+				__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 rowHeightPercent = 100 / maxEventsPerDay;
+		const events = (monthEvents.groupedByWeek[weekIndex] || []).filter((event) => event.position.row < maxEventsPerDay).map((event) => {
+			const isDraggable = dragDrop.isDraggableEvent(event);
+			return /* @__PURE__ */ jsx(ScheduleEvent, {
+				event,
+				nowrap: true,
+				autoSize: true,
+				hanging: event.position.hanging,
+				draggable: isDraggable,
+				renderEventBody,
+				renderEvent,
+				radius,
+				mode,
+				onClick: onEventClick ? (e) => onEventClick(event, e) : void 0,
+				style: {
+					position: "absolute",
+					top: `calc(${event.position.row * rowHeightPercent}% + 1px)`,
+					left: `calc(${event.position.startOffset}% + 1px)`,
+					width: `calc(${event.position.width}% - 2px)`,
+					height: `calc(${rowHeightPercent}% - 2px)`
+				}
+			}, event.id);
+		});
+		const moreEventsNodes = week.map((day, dayIndex) => {
+			const dayEvents = monthEvents.groupedByDay[day] || [];
+			const hiddenEventsCount = Math.max(0, dayEvents.length - maxEventsPerDay);
+			if (hiddenEventsCount <= 0) return null;
+			return /* @__PURE__ */ jsx(MoreEvents, {
+				events: dayEvents,
+				moreEventsCount: hiddenEventsCount,
+				mode,
+				style: {
+					position: "absolute",
+					top: `calc(100% - 2px)`,
+					left: `calc(${dayIndex / 7 * 100}% + 1px)`,
+					width: `calc(${1 / 7 * 100}% - 1px)`,
+					height: "22px",
+					paddingInline: 4
+				},
+				...moreEventsProps
+			}, `more-${day}`);
+		});
+		return /* @__PURE__ */ createElement("div", {
+			...getStyles("monthViewWeek"),
+			key: weekIndex
+		}, withWeekNumbers && /* @__PURE__ */ jsx(UnstyledButton, {
+			"aria-label": `Week ${weekNumber}`,
+			...weekNumberProps,
+			onClick: mode === "static" ? void 0 : (event) => {
+				onViewChange?.("week");
+				onDateChange?.(toDateString(week[0]));
+				onWeekNumberClick?.(dayjs(week[0]).format("YYYY-MM-DD"), event);
+				weekNumberProps.onClick?.(event);
+			},
+			mod: { static: mode === "static" },
+			tabIndex: mode === "static" ? -1 : 0,
+			...getStyles("monthViewWeekNumber", {
+				className: weekNumberProps.className,
+				style: weekNumberProps.style
+			}),
+			children: weekNumber
+		}, weekNumber), /* @__PURE__ */ createElement("div", {
+			...getStyles("monthViewEvents"),
+			key: "week-events"
+		}, backgroundEventNodes, events, moreEventsNodes), days);
+	});
+	const content = /* @__PURE__ */ jsxs(Box, {
+		mod: [{
+			"with-week-numbers": withWeekNumbers,
+			"with-weekdays": withWeekDays,
+			static: mode === "static",
+			"slot-dragging": slotDragSelect.isDragging
+		}, mod],
+		...getStyles("monthView"),
+		...others,
+		children: [withHeader && /* @__PURE__ */ jsx(ScheduleHeaderBase, {
+			view: "month",
+			navigationHandlers: {
+				previous: () => toDateString(dayjs(date).subtract(1, "month").startOf("month")),
+				next: () => toDateString(dayjs(date).add(1, "month").startOf("month")),
+				today: () => toDateString(dayjs())
+			},
+			control: { monthYearSelect: {
+				locale,
+				yearValue: dayjs(date).get("year"),
+				monthValue: dayjs(date).get("month"),
+				onYearChange: (year) => onDateChange?.(toDateString(dayjs(date).set("year", year).startOf("month"))),
+				onMonthChange: (month) => onDateChange?.(toDateString(dayjs(date).set("month", month).startOf("month"))),
+				...monthYearSelectProps
+			} },
+			labels,
+			onDateChange,
+			onViewChange,
+			previousControlProps,
+			nextControlProps,
+			todayControlProps,
+			viewSelectProps,
+			stylesApiProps
+		}), /* @__PURE__ */ jsx(ScrollArea, {
+			scrollbarSize: 4,
+			...scrollAreaProps,
+			...getStyles("monthViewScrollArea", {
+				className: scrollAreaProps?.className,
+				style: scrollAreaProps?.style
+			}),
+			children: /* @__PURE__ */ jsxs("div", {
+				...getStyles("monthViewInner"),
+				children: [weekdays && /* @__PURE__ */ jsxs("div", {
+					...getStyles("monthViewWeekdays"),
+					children: [withWeekNumbers && /* @__PURE__ */ jsx("div", { ...getStyles("monthViewWeekdaysCorner") }), weekdays]
+				}), weeks]
+			})
+		})]
+	});
+	if (withEventsDragAndDrop) return /* @__PURE__ */ jsx(DragContext.Provider, {
+		value: dragDrop.dragContextValue,
+		children: content
+	});
+	return content;
 });
 MonthView.displayName = "@mantine/schedule/MonthView";
-MonthView.classes = classes;
+MonthView.classes = MonthView_module_default;
 MonthView.varsResolver = varsResolver;
-
+//#endregion
 export { MonthView };
-//# sourceMappingURL=MonthView.mjs.map
+
+//# sourceMappingURL=MonthView.mjs.map