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

package/cjs/components/MonthView/MonthView.cjs

@@ -1,473 +1,371 @@
-'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 useDragDropHandlers = require('../../hooks/use-drag-drop-handlers.cjs');
-var useSlotDragSelect = require('../../hooks/use-slot-drag-select.cjs');
-var getWeekdaysNames = require('../../utils/get-weekdays-names/get-weekdays-names.cjs');
-var getWeekNumber = require('../../utils/get-week-number/get-week-number.cjs');
-var getMonthDays = require('../../utils/get-month-days/get-month-days.cjs');
-var isSameMonth = require('../../utils/is-same-month/is-same-month.cjs');
-var toDateString = require('../../utils/to-date-string/to-date-string.cjs');
-var getMonthRange = require('../../utils/get-month-range/get-month-range.cjs');
-var calculateMonthDropDate = require('../../utils/calculate-month-drop-date/calculate-month-drop-date.cjs');
-var expandRecurringEvents = require('../../utils/expand-recurring-events/expand-recurring-events.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 getMonthViewEvents = require('./get-month-view-events/get-month-view-events.cjs');
-var handleMonthViewKeyDown = require('./handle-month-view-key-down.cjs');
-var MonthView_module = require('./MonthView.module.css.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
-
-const varsResolver = core.createVarsResolver(
-  (_theme, { radius, maxEventsPerDay }) => ({
-    monthView: {
-      "--month-view-radius": radius ? core.getRadius(radius) : void 0,
-      "--month-view-max-events": maxEventsPerDay !== void 0 ? `${Math.min(10, Math.max(1, maxEventsPerDay))}` : void 0
-    }
-  })
-);
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_get_weekdays_names = require("../../utils/get-weekdays-names/get-weekdays-names.cjs");
+const require_get_week_number = require("../../utils/get-week-number/get-week-number.cjs");
+const require_get_month_days = require("../../utils/get-month-days/get-month-days.cjs");
+const require_is_same_month = require("../../utils/is-same-month/is-same-month.cjs");
+const require_to_date_string = require("../../utils/to-date-string/to-date-string.cjs");
+const require_get_month_range = require("../../utils/get-month-range/get-month-range.cjs");
+const require_calculate_month_drop_date = require("../../utils/calculate-month-drop-date/calculate-month-drop-date.cjs");
+const require_expand_recurring_events = require("../../utils/expand-recurring-events/expand-recurring-events.cjs");
+const require_use_drag_drop_handlers = require("../../hooks/use-drag-drop-handlers.cjs");
+const require_use_slot_drag_select = require("../../hooks/use-slot-drag-select.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_handle_month_view_key_down = require("./handle-month-view-key-down.cjs");
+const require_get_month_view_events = require("./get-month-view-events/get-month-view-events.cjs");
+const require_MonthView_module = require("./MonthView.module.cjs");
+let dayjs = require("dayjs");
+dayjs = require_runtime.__toESM(dayjs);
+let _mantine_core = require("@mantine/core");
+let react = require("react");
+let _mantine_dates = require("@mantine/dates");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/schedule/src/components/MonthView/MonthView.tsx
+const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, maxEventsPerDay }) => ({ monthView: {
+	"--month-view-radius": radius ? (0, _mantine_core.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 = core.factory((_props) => {
-  const props = core.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 = core.useStyles({
-    name: __staticSelector,
-    classes: MonthView_module,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    varsResolver,
-    rootSelector: "monthView"
-  });
-  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 range = getMonthRange.getMonthRange({
-    month: date,
-    withOutsideDays,
-    consistentWeeks,
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-  });
-  const expandedEvents = expandRecurringEvents.expandRecurringEvents({
-    events,
-    rangeStart: dayjs__default.default(range.start).startOf("day").toDate(),
-    rangeEnd: dayjs__default.default(range.end).endOf("day").toDate(),
-    expansionLimit: recurrenceExpansionLimit
-  });
-  const monthEvents = getMonthViewEvents.getMonthViewEvents({
-    date,
-    events: expandedEvents,
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
-    withOutsideDays,
-    consistentWeeks
-  });
-  const handleExternalDrop = React.useCallback(
-    (e, day) => {
-      if (!onExternalEventDrop) {
-        return;
-      }
-      onExternalEventDrop(e.dataTransfer, `${dayjs__default.default(day).format("YYYY-MM-DD")} 00:00:00`);
-    },
-    [onExternalEventDrop]
-  );
-  const dragDrop = useDragDropHandlers.useDragDropHandlers({
-    enabled: withEventsDragAndDrop,
-    mode,
-    onEventDrop,
-    canDragEvent,
-    onEventDragStart,
-    onEventDragEnd,
-    calculateDropTarget: (targetDay, draggedEvent) => {
-      return calculateMonthDropDate.calculateMonthDropDate({
-        draggedEvent,
-        targetDay
-      });
-    },
-    onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
-  });
-  const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
-  const flatDaysRef = React.useRef([]);
-  const slotDragSelect = useSlotDragSelect.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__default.default(startDay).startOf("day").format("YYYY-MM-DD HH:mm:ss"),
-          dayjs__default.default(endDay).endOf("day").format("YYYY-MM-DD HH:mm:ss")
-        );
-      }
-    }
-  });
-  const daysRef = React.useRef([]);
-  const monthDays = getMonthDays.getMonthDays({
-    month: dayjs__default.default(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.isSameMonth(date, day);
-        if (!outside || withOutsideDays) {
-          return { weekIndex, dayIndex };
-        }
-      }
-    }
-    return { weekIndex: 0, dayIndex: 0 };
-  })();
-  const weekdays = withWeekDays ? getWeekdaysNames.getWeekdaysNames({
-    locale: ctx.getLocale(locale),
-    format: weekdayFormat,
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-  }).map((day, index) => /* @__PURE__ */ React.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.isSameMonth(date, day);
-      const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs__default.default(day).day());
-      const ariaLabel = dayjs__default.default(day).locale(locale || ctx.locale).format("MMMM D, YYYY");
-      const dayProps = getDayProps?.(dayjs__default.default(day).format("YYYY-MM-DD")) || {};
-      const today = dayjs__default.default(day).isSame(dayjs__default.default(), "day") && highlightToday;
-      if (outside && !withOutsideDays) {
-        return /* @__PURE__ */ jsxRuntime.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__ */ React.createElement(
-        core.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__default.default(day).format("YYYY-MM-DD"), event);
-            dayProps.onClick?.(event);
-          },
-          onPointerDown: withDragSlotSelect && mode !== "static" ? (e) => slotDragSelect.handleSlotPointerDown(
-            e,
-            flatIndex,
-            monthGroup
-          ) : void 0,
-          onKeyDown: (event) => {
-            handleMonthViewKeyDown.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__ */ jsxRuntime.jsx("span", { "data-today": today || void 0, ...getStyles("monthViewDayLabel"), children: dayjs__default.default(day).format("D") })
-      );
-    });
-    const weekNumberProps = getWeekNumberProps?.(dayjs__default.default(week[0]).format("YYYY-MM-DD")) || {};
-    const weekNumber = getWeekNumber.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(
-        ScheduleEvent.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__ */ jsxRuntime.jsx(
-        MoreEvents.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__ */ React.createElement("div", { ...getStyles("monthViewWeek"), key: weekIndex }, withWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx(
-      core.UnstyledButton,
-      {
-        "aria-label": `Week ${weekNumber}`,
-        ...weekNumberProps,
-        onClick: mode === "static" ? void 0 : (event) => {
-          onViewChange?.("week");
-          onDateChange?.(toDateString.toDateString(week[0]));
-          onWeekNumberClick?.(dayjs__default.default(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__ */ React.createElement("div", { ...getStyles("monthViewEvents"), key: "week-events" }, backgroundEventNodes, events2, moreEventsNodes), days);
-  });
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(
-    core.Box,
-    {
-      mod: [
-        {
-          "with-week-numbers": withWeekNumbers,
-          "with-weekdays": withWeekDays,
-          static: mode === "static",
-          "slot-dragging": slotDragSelect.isDragging
-        },
-        mod
-      ],
-      ...getStyles("monthView"),
-      ...others,
-      children: [
-        withHeader && /* @__PURE__ */ jsxRuntime.jsx(
-          ScheduleHeaderBase.ScheduleHeaderBase,
-          {
-            view: "month",
-            navigationHandlers: {
-              previous: () => toDateString.toDateString(dayjs__default.default(date).subtract(1, "month").startOf("month")),
-              next: () => toDateString.toDateString(dayjs__default.default(date).add(1, "month").startOf("month")),
-              today: () => toDateString.toDateString(dayjs__default.default())
-            },
-            control: {
-              monthYearSelect: {
-                yearValue: dayjs__default.default(date).get("year"),
-                monthValue: dayjs__default.default(date).get("month"),
-                onYearChange: (year) => onDateChange?.(toDateString.toDateString(dayjs__default.default(date).set("year", year).startOf("month"))),
-                onMonthChange: (month) => onDateChange?.(toDateString.toDateString(dayjs__default.default(date).set("month", month).startOf("month"))),
-                ...monthYearSelectProps
-              }
-            },
-            labels,
-            onDateChange,
-            onViewChange,
-            previousControlProps,
-            nextControlProps,
-            todayControlProps,
-            viewSelectProps,
-            stylesApiProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.ScrollArea,
-          {
-            scrollbarSize: 4,
-            ...scrollAreaProps,
-            ...getStyles("monthViewScrollArea", {
-              className: scrollAreaProps?.className,
-              style: scrollAreaProps?.style
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("monthViewInner"), children: [
-              weekdays && /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("monthViewWeekdays"), children: [
-                withWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("monthViewWeekdaysCorner") }),
-                weekdays
-              ] }),
-              weeks
-            ] })
-          }
-        )
-      ]
-    }
-  );
-  if (withEventsDragAndDrop) {
-    return /* @__PURE__ */ jsxRuntime.jsx(DragContext.DragContext.Provider, { value: dragDrop.dragContextValue, children: content });
-  }
-  return content;
+const MonthView = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.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 = (0, _mantine_core.useStyles)({
+		name: __staticSelector,
+		classes: require_MonthView_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "monthView"
+	});
+	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 range = require_get_month_range.getMonthRange({
+		month: date,
+		withOutsideDays,
+		consistentWeeks,
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+	});
+	const monthEvents = require_get_month_view_events.getMonthViewEvents({
+		date,
+		events: require_expand_recurring_events.expandRecurringEvents({
+			events,
+			rangeStart: (0, dayjs.default)(range.start).startOf("day").toDate(),
+			rangeEnd: (0, dayjs.default)(range.end).endOf("day").toDate(),
+			expansionLimit: recurrenceExpansionLimit
+		}),
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
+		withOutsideDays,
+		consistentWeeks
+	});
+	const handleExternalDrop = (0, react.useCallback)((e, day) => {
+		if (!onExternalEventDrop) return;
+		onExternalEventDrop(e.dataTransfer, `${(0, dayjs.default)(day).format("YYYY-MM-DD")} 00:00:00`);
+	}, [onExternalEventDrop]);
+	const dragDrop = require_use_drag_drop_handlers.useDragDropHandlers({
+		enabled: withEventsDragAndDrop,
+		mode,
+		onEventDrop,
+		canDragEvent,
+		onEventDragStart,
+		onEventDragEnd,
+		calculateDropTarget: (targetDay, draggedEvent) => {
+			return require_calculate_month_drop_date.calculateMonthDropDate({
+				draggedEvent,
+				targetDay
+			});
+		},
+		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
+	});
+	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
+	const flatDaysRef = (0, react.useRef)([]);
+	const slotDragSelect = require_use_slot_drag_select.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((0, dayjs.default)(startDay).startOf("day").format("YYYY-MM-DD HH:mm:ss"), (0, dayjs.default)(endDay).endOf("day").format("YYYY-MM-DD HH:mm:ss"));
+		}
+	});
+	const daysRef = (0, react.useRef)([]);
+	const monthDays = require_get_month_days.getMonthDays({
+		month: (0, dayjs.default)(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 (!!require_is_same_month.isSameMonth(date, day) || withOutsideDays) return {
+					weekIndex,
+					dayIndex
+				};
+			}
+		}
+		return {
+			weekIndex: 0,
+			dayIndex: 0
+		};
+	})();
+	const weekdays = withWeekDays ? require_get_weekdays_names.getWeekdaysNames({
+		locale: ctx.getLocale(locale),
+		format: weekdayFormat,
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+	}).map((day, index) => /* @__PURE__ */ (0, react.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 = !require_is_same_month.isSameMonth(date, day);
+			const weekend = ctx.getWeekendDays(weekendDays).includes((0, dayjs.default)(day).day());
+			const ariaLabel = (0, dayjs.default)(day).locale(locale || ctx.locale).format("MMMM D, YYYY");
+			const dayProps = getDayProps?.((0, dayjs.default)(day).format("YYYY-MM-DD")) || {};
+			const today = (0, dayjs.default)(day).isSame((0, dayjs.default)(), "day") && highlightToday;
+			if (outside && !withOutsideDays) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react.createElement)(_mantine_core.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?.((0, dayjs.default)(day).format("YYYY-MM-DD"), event);
+					dayProps.onClick?.(event);
+				},
+				onPointerDown: withDragSlotSelect && mode !== "static" ? (e) => slotDragSelect.handleSlotPointerDown(e, flatIndex, monthGroup) : void 0,
+				onKeyDown: (event) => {
+					require_handle_month_view_key_down.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-today": today || void 0,
+				...getStyles("monthViewDayLabel"),
+				children: (0, dayjs.default)(day).format("D")
+			}));
+		});
+		const weekNumberProps = getWeekNumberProps?.((0, dayjs.default)(week[0]).format("YYYY-MM-DD")) || {};
+		const weekNumber = require_get_week_number.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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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__ */ (0, react_jsx_runtime.jsx)(require_ScheduleEvent.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__ */ (0, react_jsx_runtime.jsx)(require_MoreEvents.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__ */ (0, react.createElement)("div", {
+			...getStyles("monthViewWeek"),
+			key: weekIndex
+		}, withWeekNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+			"aria-label": `Week ${weekNumber}`,
+			...weekNumberProps,
+			onClick: mode === "static" ? void 0 : (event) => {
+				onViewChange?.("week");
+				onDateChange?.(require_to_date_string.toDateString(week[0]));
+				onWeekNumberClick?.((0, dayjs.default)(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__ */ (0, react.createElement)("div", {
+			...getStyles("monthViewEvents"),
+			key: "week-events"
+		}, backgroundEventNodes, events, moreEventsNodes), days);
+	});
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+		mod: [{
+			"with-week-numbers": withWeekNumbers,
+			"with-weekdays": withWeekDays,
+			static: mode === "static",
+			"slot-dragging": slotDragSelect.isDragging
+		}, mod],
+		...getStyles("monthView"),
+		...others,
+		children: [withHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleHeaderBase.ScheduleHeaderBase, {
+			view: "month",
+			navigationHandlers: {
+				previous: () => require_to_date_string.toDateString((0, dayjs.default)(date).subtract(1, "month").startOf("month")),
+				next: () => require_to_date_string.toDateString((0, dayjs.default)(date).add(1, "month").startOf("month")),
+				today: () => require_to_date_string.toDateString((0, dayjs.default)())
+			},
+			control: { monthYearSelect: {
+				locale,
+				yearValue: (0, dayjs.default)(date).get("year"),
+				monthValue: (0, dayjs.default)(date).get("month"),
+				onYearChange: (year) => onDateChange?.(require_to_date_string.toDateString((0, dayjs.default)(date).set("year", year).startOf("month"))),
+				onMonthChange: (month) => onDateChange?.(require_to_date_string.toDateString((0, dayjs.default)(date).set("month", month).startOf("month"))),
+				...monthYearSelectProps
+			} },
+			labels,
+			onDateChange,
+			onViewChange,
+			previousControlProps,
+			nextControlProps,
+			todayControlProps,
+			viewSelectProps,
+			stylesApiProps
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ScrollArea, {
+			scrollbarSize: 4,
+			...scrollAreaProps,
+			...getStyles("monthViewScrollArea", {
+				className: scrollAreaProps?.className,
+				style: scrollAreaProps?.style
+			}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...getStyles("monthViewInner"),
+				children: [weekdays && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					...getStyles("monthViewWeekdays"),
+					children: [withWeekNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("monthViewWeekdaysCorner") }), weekdays]
+				}), weeks]
+			})
+		})]
+	});
+	if (withEventsDragAndDrop) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DragContext.DragContext.Provider, {
+		value: dragDrop.dragContextValue,
+		children: content
+	});
+	return content;
 });
 MonthView.displayName = "@mantine/schedule/MonthView";
-MonthView.classes = MonthView_module;
+MonthView.classes = require_MonthView_module.default;
 MonthView.varsResolver = varsResolver;
-
+//#endregion
 exports.MonthView = MonthView;
-//# sourceMappingURL=MonthView.cjs.map
+
+//# sourceMappingURL=MonthView.cjs.map