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

package/cjs/components/MobileMonthView/MobileMonthView.cjs

@@ -1,303 +1,267 @@
-'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 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 formatDate = require('../../utils/format-date/format-date.cjs');
-var sortEvents = require('../../utils/sort-events/sort-events.cjs');
-var expandRecurringEvents = require('../../utils/expand-recurring-events/expand-recurring-events.cjs');
-var handleMonthViewKeyDown = require('../MonthView/handle-month-view-key-down.cjs');
-var getMobileMonthViewEvents = require('./get-mobile-month-view-events.cjs');
-var MobileMonthView_module = require('./MobileMonthView.module.css.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-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_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_sort_events = require("../../utils/sort-events/sort-events.cjs");
+const require_expand_recurring_events = require("../../utils/expand-recurring-events/expand-recurring-events.cjs");
+const require_handle_month_view_key_down = require("../MonthView/handle-month-view-key-down.cjs");
+const require_get_mobile_month_view_events = require("./get-mobile-month-view-events.cjs");
+const require_MobileMonthView_module = require("./MobileMonthView.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");
+react = require_runtime.__toESM(react);
+let _mantine_dates = require("@mantine/dates");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/schedule/src/components/MobileMonthView/MobileMonthView.tsx
 const defaultProps = {
-  __staticSelector: "MobileMonthView",
-  withWeekDays: true,
-  consistentWeeks: true,
-  highlightToday: true,
-  mode: "default",
-  eventsHeaderFormat: "dddd, MMMM D",
-  noEventsText: "No events"
+	__staticSelector: "MobileMonthView",
+	withWeekDays: true,
+	consistentWeeks: true,
+	highlightToday: true,
+	mode: "default",
+	eventsHeaderFormat: "dddd, MMMM D"
 };
-const varsResolver = core.createVarsResolver((_theme, { radius }) => ({
-  mobileMonthView: {
-    "--mobile-month-view-radius": core.getRadius(radius)
-  }
-}));
-const MobileMonthView = core.factory((_props) => {
-  const props = core.useProps("MobileMonthView", defaultProps, _props);
-  const {
-    classNames,
-    className,
-    style,
-    styles,
-    unstyled,
-    vars,
-    attributes,
-    __staticSelector,
-    date,
-    onDateChange,
-    selectedDate,
-    defaultSelectedDate,
-    onSelectedDateChange,
-    withWeekNumbers,
-    withWeekDays,
-    locale,
-    firstDayOfWeek,
-    weekdayFormat,
-    weekendDays,
-    getWeekNumberProps,
-    getDayProps,
-    onDayClick,
-    onWeekNumberClick,
-    consistentWeeks,
-    highlightToday,
-    radius,
-    withOutsideDays,
-    events,
-    labels,
-    mode,
-    renderEvent,
-    eventsHeaderFormat,
-    noEventsText,
-    onYearClick,
-    onEventClick,
-    renderHeader,
-    recurrenceExpansionLimit,
-    ...others
-  } = props;
-  const ctx = dates.useDatesContext();
-  const theme = core.useMantineTheme();
-  const today = dayjs__default.default();
-  const [_selectedDate, _setSelectedDate] = hooks.useUncontrolled({
-    value: selectedDate,
-    defaultValue: defaultSelectedDate ?? toDateString.toDateString(today),
-    onChange: (value) => onSelectedDateChange?.(value ? toDateString.toDateString(dayjs__default.default(value)) : null)
-  });
-  const getStyles = core.useStyles({
-    name: __staticSelector,
-    classes: MobileMonthView_module,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    attributes,
-    vars,
-    varsResolver,
-    rootSelector: "mobileMonthView"
-  });
-  const daysRef = React.useRef([]);
-  const firstDayPosition = React.useRef(null);
-  const expandedEvents = expandRecurringEvents.expandRecurringEvents({
-    events,
-    rangeStart: dayjs__default.default(date).startOf("month").toDate(),
-    rangeEnd: dayjs__default.default(date).endOf("month").toDate(),
-    expansionLimit: recurrenceExpansionLimit
-  });
-  const groupedEvents = getMobileMonthViewEvents.getMobileMonthViewEvents({ date, events: expandedEvents });
-  const weekdays = withWeekDays ? getWeekdaysNames.getWeekdaysNames({
-    locale: ctx.getLocale(locale),
-    format: weekdayFormat,
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-  }).map((day, index) => /* @__PURE__ */ React.createElement("div", { ...getStyles("mobileMonthViewWeekday"), key: index }, day)) : null;
-  const weeks = getMonthDays.getMonthDays({
-    month: dayjs__default.default(date).format("YYYY-MM-DD"),
-    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
-    consistentWeeks
-  }).map((week, weekIndex) => {
-    const days = week.map((dayDate, dayIndex) => {
-      const outside = !isSameMonth.isSameMonth(dayDate, date);
-      const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs__default.default(dayDate).day());
-      const ariaLabel = dayjs__default.default(dayDate).locale(locale || ctx.locale).format("MMMM D, YYYY");
-      const dayProps = getDayProps?.(dayjs__default.default(dayDate).format("YYYY-MM-DD")) || {};
-      const isToday = dayjs__default.default(dayDate).isSame(today, "day") && highlightToday;
-      const isSelected = _selectedDate && dayjs__default.default(dayDate).isSame(dayjs__default.default(_selectedDate), "day");
-      const dayEvents = groupedEvents[dayjs__default.default(dayDate).format("YYYY-MM-DD")] || [];
-      const shouldRender = withOutsideDays || !outside;
-      if (shouldRender && firstDayPosition.current === null) {
-        firstDayPosition.current = { weekIndex, dayIndex };
-      }
-      const isFirstDay = firstDayPosition.current?.weekIndex === weekIndex && firstDayPosition.current?.dayIndex === dayIndex;
-      const indicators = dayEvents.slice(0, 3).map((event) => /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          ...getStyles("mobileMonthViewDayIndicator", {
-            style: { backgroundColor: core.getThemeColor(event.color, theme) }
-          }),
-          key: event.id
-        }
-      ));
-      const handleDayClick = (event) => {
-        const dateStr = dayjs__default.default(dayDate).format("YYYY-MM-DD");
-        _setSelectedDate(dateStr);
-        onDayClick?.(dateStr, event);
-        dayProps.onClick?.(event);
-      };
-      const handleDayKeyDown = (event) => {
-        handleMonthViewKeyDown.handleMonthViewKeyDown({
-          controlsRef: daysRef,
-          weekIndex,
-          dayIndex,
-          event
-        });
-      };
-      return /* @__PURE__ */ React.createElement(
-        core.UnstyledButton,
-        {
-          "aria-label": ariaLabel,
-          "aria-selected": isSelected || void 0,
-          ...dayProps,
-          ...getStyles("mobileMonthViewDay", {
-            className: dayProps.className,
-            style: dayProps.style
-          }),
-          key: dayDate,
-          ref: (node) => {
-            if (node) {
-              if (!daysRef.current[weekIndex]) {
-                daysRef.current[weekIndex] = [];
-              }
-              daysRef.current[weekIndex][dayIndex] = node;
-            }
-          },
-          mod: [
-            {
-              outside,
-              weekend,
-              today: isToday,
-              selected: isSelected,
-              static: mode === "static",
-              hidden: !shouldRender
-            },
-            dayProps.mod
-          ],
-          tabIndex: mode === "static" || !shouldRender ? -1 : isFirstDay ? 0 : -1,
-          onClick: mode === "static" || !shouldRender ? void 0 : handleDayClick,
-          onKeyDown: mode === "static" || !shouldRender ? void 0 : handleDayKeyDown
-        },
-        shouldRender ? dayjs__default.default(dayDate).format("D") : null,
-        shouldRender && /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("mobileMonthViewDayIndicators"), children: indicators })
-      );
-    });
-    const weekNumberProps = getWeekNumberProps?.(dayjs__default.default(week[0]).format("YYYY-MM-DD")) || {};
-    const weekNumber = getWeekNumber.getWeekNumber(week);
-    return /* @__PURE__ */ React.createElement("div", { ...getStyles("mobileMonthViewWeek"), key: weekIndex }, withWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx(
-      core.UnstyledButton,
-      {
-        "aria-label": `Week ${weekNumber}`,
-        ...weekNumberProps,
-        onClick: mode === "static" ? void 0 : (event) => {
-          onWeekNumberClick?.(dayjs__default.default(week[0]).format("YYYY-MM-DD"), event);
-          weekNumberProps.onClick?.(event);
-        },
-        mod: { static: mode === "static" },
-        tabIndex: mode === "static" ? -1 : 0,
-        ...getStyles("mobileMonthViewWeekNumber", {
-          className: weekNumberProps.className,
-          style: weekNumberProps.style
-        }),
-        children: weekNumber
-      },
-      weekNumber
-    ), days);
-  });
-  const selectedDateEvents = _selectedDate ? sortEvents.sortEvents(groupedEvents[dayjs__default.default(_selectedDate).format("YYYY-MM-DD")] || []) : [];
-  const eventsList = selectedDateEvents.map((event) => {
-    const startTime = dayjs__default.default(event.start).format("HH:mm");
-    const endTime = dayjs__default.default(event.end).format("HH:mm");
-    const isAllDay = startTime === "00:00" && endTime === "00:00";
-    const eventChildren = /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { ...getStyles("mobileMonthViewEventBody"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ...getStyles("mobileMonthViewEventColor", {
-            style: { backgroundColor: core.getThemeColor(event.color, theme) }
-          })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ...getStyles("mobileMonthViewEventTitle"), children: event.title }),
-        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ...getStyles("mobileMonthViewEventTime"), size: "xs", c: "dimmed", children: isAllDay ? "All day" : `${startTime} \u2013 ${endTime}` })
-      ] })
-    ] });
-    const rootProps = {
-      ...getStyles("mobileMonthViewEvent"),
-      onClick: mode === "static" ? void 0 : (e) => {
-        onEventClick?.(event, e);
-      },
-      tabIndex: mode === "static" ? -1 : 0,
-      children: eventChildren
-    };
-    if (typeof renderEvent === "function") {
-      return /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: renderEvent(event, rootProps) }, event.id);
-    }
-    return /* @__PURE__ */ React.createElement(core.UnstyledButton, { ...rootProps, key: event.id });
-  });
-  const eventsHeader = _selectedDate ? formatDate.formatDate({
-    locale: ctx.getLocale(locale),
-    date: _selectedDate,
-    format: eventsHeaderFormat
-  }) : "";
-  const { dir } = core.useDirection();
-  const headerLabel = formatDate.formatDate({ locale: ctx.getLocale(locale), date, format: "MMMM YYYY" });
-  const defaultHeader = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      core.UnstyledButton,
-      {
-        ...getStyles("mobileMonthViewHeaderBackButton"),
-        onClick: onYearClick,
-        mod: { static: mode === "static" },
-        tabIndex: mode === "static" ? -1 : 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.AccordionChevron, { transform: `rotate(${dir === "rtl" ? -90 : 90} 0 0)`, size: 20 }),
-          dayjs__default.default(date).format("YYYY")
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ...getStyles("mobileMonthViewHeaderLabel"), fw: 600, tt: "capitalize", children: headerLabel })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    core.Box,
-    {
-      ...getStyles("mobileMonthView"),
-      mod: { "with-week-numbers": withWeekNumbers },
-      ...others,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("mobileMonthViewHeader"), children: typeof renderHeader === "function" ? renderHeader({ mode, date, defaultHeader }) : defaultHeader }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { ...getStyles("mobileMonthViewCalendar"), mod: { "with-weekdays": withWeekDays }, children: [
-          weekdays && /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("mobileMonthViewWeekdays"), children: [
-            withWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("mobileMonthViewWeekdaysCorner") }),
-            weekdays
-          ] }),
-          weeks
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { ...getStyles("mobileMonthViewEventsList"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ...getStyles("mobileMonthViewEventsHeader"), fw: 600, tt: "capitalize", children: eventsHeader }),
-          eventsList.length > 0 ? eventsList : /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ...getStyles("mobileMonthViewNoEvents"), c: "dimmed", ta: "center", py: "xl", children: noEventsText })
-        ] })
-      ]
-    }
-  );
+const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius }) => ({ mobileMonthView: { "--mobile-month-view-radius": (0, _mantine_core.getRadius)(radius) } }));
+const MobileMonthView = (0, _mantine_core.factory)((_props) => {
+	const props = (0, _mantine_core.useProps)("MobileMonthView", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, attributes, __staticSelector, date, onDateChange, selectedDate, defaultSelectedDate, onSelectedDateChange, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, getWeekNumberProps, getDayProps, onDayClick, onWeekNumberClick, consistentWeeks, highlightToday, radius, withOutsideDays, events, labels, mode, renderEvent, eventsHeaderFormat, onYearClick, onEventClick, renderHeader, recurrenceExpansionLimit, ...others } = props;
+	const ctx = (0, _mantine_dates.useDatesContext)();
+	const theme = (0, _mantine_core.useMantineTheme)();
+	const today = (0, dayjs.default)();
+	const [_selectedDate, _setSelectedDate] = (0, _mantine_hooks.useUncontrolled)({
+		value: selectedDate,
+		defaultValue: defaultSelectedDate ?? require_to_date_string.toDateString(today),
+		onChange: (value) => onSelectedDateChange?.(value ? require_to_date_string.toDateString((0, dayjs.default)(value)) : null)
+	});
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: __staticSelector,
+		classes: require_MobileMonthView_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "mobileMonthView"
+	});
+	const daysRef = (0, react.useRef)([]);
+	const firstDayPosition = (0, react.useRef)(null);
+	const groupedEvents = require_get_mobile_month_view_events.getMobileMonthViewEvents({
+		date,
+		events: require_expand_recurring_events.expandRecurringEvents({
+			events,
+			rangeStart: (0, dayjs.default)(date).startOf("month").toDate(),
+			rangeEnd: (0, dayjs.default)(date).endOf("month").toDate(),
+			expansionLimit: recurrenceExpansionLimit
+		})
+	});
+	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("mobileMonthViewWeekday"),
+		key: index
+	}, day)) : null;
+	const weeks = require_get_month_days.getMonthDays({
+		month: (0, dayjs.default)(date).format("YYYY-MM-DD"),
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
+		consistentWeeks
+	}).map((week, weekIndex) => {
+		const days = week.map((dayDate, dayIndex) => {
+			const outside = !require_is_same_month.isSameMonth(dayDate, date);
+			const weekend = ctx.getWeekendDays(weekendDays).includes((0, dayjs.default)(dayDate).day());
+			const ariaLabel = (0, dayjs.default)(dayDate).locale(locale || ctx.locale).format("MMMM D, YYYY");
+			const dayProps = getDayProps?.((0, dayjs.default)(dayDate).format("YYYY-MM-DD")) || {};
+			const isToday = (0, dayjs.default)(dayDate).isSame(today, "day") && highlightToday;
+			const isSelected = _selectedDate && (0, dayjs.default)(dayDate).isSame((0, dayjs.default)(_selectedDate), "day");
+			const dayEvents = groupedEvents[(0, dayjs.default)(dayDate).format("YYYY-MM-DD")] || [];
+			const shouldRender = withOutsideDays || !outside;
+			if (shouldRender && firstDayPosition.current === null) firstDayPosition.current = {
+				weekIndex,
+				dayIndex
+			};
+			const isFirstDay = firstDayPosition.current?.weekIndex === weekIndex && firstDayPosition.current?.dayIndex === dayIndex;
+			const indicators = dayEvents.slice(0, 3).map((event) => /* @__PURE__ */ (0, react.createElement)("div", {
+				...getStyles("mobileMonthViewDayIndicator", { style: { backgroundColor: (0, _mantine_core.getThemeColor)(event.color, theme) } }),
+				key: event.id
+			}));
+			const handleDayClick = (event) => {
+				const dateStr = (0, dayjs.default)(dayDate).format("YYYY-MM-DD");
+				_setSelectedDate(dateStr);
+				onDayClick?.(dateStr, event);
+				dayProps.onClick?.(event);
+			};
+			const handleDayKeyDown = (event) => {
+				require_handle_month_view_key_down.handleMonthViewKeyDown({
+					controlsRef: daysRef,
+					weekIndex,
+					dayIndex,
+					event
+				});
+			};
+			return /* @__PURE__ */ (0, react.createElement)(_mantine_core.UnstyledButton, {
+				"aria-label": ariaLabel,
+				"aria-selected": isSelected || void 0,
+				...dayProps,
+				...getStyles("mobileMonthViewDay", {
+					className: dayProps.className,
+					style: dayProps.style
+				}),
+				key: dayDate,
+				ref: (node) => {
+					if (node) {
+						if (!daysRef.current[weekIndex]) daysRef.current[weekIndex] = [];
+						daysRef.current[weekIndex][dayIndex] = node;
+					}
+				},
+				mod: [{
+					outside,
+					weekend,
+					today: isToday,
+					selected: isSelected,
+					static: mode === "static",
+					hidden: !shouldRender
+				}, dayProps.mod],
+				tabIndex: mode === "static" || !shouldRender ? -1 : isFirstDay ? 0 : -1,
+				onClick: mode === "static" || !shouldRender ? void 0 : handleDayClick,
+				onKeyDown: mode === "static" || !shouldRender ? void 0 : handleDayKeyDown
+			}, shouldRender ? (0, dayjs.default)(dayDate).format("D") : null, shouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...getStyles("mobileMonthViewDayIndicators"),
+				children: indicators
+			}));
+		});
+		const weekNumberProps = getWeekNumberProps?.((0, dayjs.default)(week[0]).format("YYYY-MM-DD")) || {};
+		const weekNumber = require_get_week_number.getWeekNumber(week);
+		return /* @__PURE__ */ (0, react.createElement)("div", {
+			...getStyles("mobileMonthViewWeek"),
+			key: weekIndex
+		}, withWeekNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+			"aria-label": `Week ${weekNumber}`,
+			...weekNumberProps,
+			onClick: mode === "static" ? void 0 : (event) => {
+				onWeekNumberClick?.((0, dayjs.default)(week[0]).format("YYYY-MM-DD"), event);
+				weekNumberProps.onClick?.(event);
+			},
+			mod: { static: mode === "static" },
+			tabIndex: mode === "static" ? -1 : 0,
+			...getStyles("mobileMonthViewWeekNumber", {
+				className: weekNumberProps.className,
+				style: weekNumberProps.style
+			}),
+			children: weekNumber
+		}, weekNumber), days);
+	});
+	const eventsList = (_selectedDate ? require_sort_events.sortEvents(groupedEvents[(0, dayjs.default)(_selectedDate).format("YYYY-MM-DD")] || []) : []).map((event) => {
+		const startTime = (0, dayjs.default)(event.start).format("HH:mm");
+		const endTime = (0, dayjs.default)(event.end).format("HH:mm");
+		const isAllDay = startTime === "00:00" && endTime === "00:00";
+		const eventChildren = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+			...getStyles("mobileMonthViewEventBody"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("mobileMonthViewEventColor", { style: { backgroundColor: (0, _mantine_core.getThemeColor)(event.color, theme) } }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
+				...getStyles("mobileMonthViewEventTitle"),
+				children: event.title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
+				...getStyles("mobileMonthViewEventTime"),
+				size: "xs",
+				c: "dimmed",
+				children: isAllDay ? "All day" : `${startTime} – ${endTime}`
+			})] })]
+		});
+		const rootProps = {
+			...getStyles("mobileMonthViewEvent"),
+			onClick: mode === "static" ? void 0 : (e) => {
+				onEventClick?.(event, e);
+			},
+			tabIndex: mode === "static" ? -1 : 0,
+			children: eventChildren
+		};
+		if (typeof renderEvent === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderEvent(event, rootProps) }, event.id);
+		return /* @__PURE__ */ (0, react.createElement)(_mantine_core.UnstyledButton, {
+			...rootProps,
+			key: event.id
+		});
+	});
+	const eventsHeader = _selectedDate ? require_format_date.formatDate({
+		locale: ctx.getLocale(locale),
+		date: _selectedDate,
+		format: eventsHeaderFormat
+	}) : "";
+	const { dir } = (0, _mantine_core.useDirection)();
+	const headerLabel = require_format_date.formatDate({
+		locale: ctx.getLocale(locale),
+		date,
+		format: "MMMM YYYY"
+	});
+	const defaultHeader = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.UnstyledButton, {
+		...getStyles("mobileMonthViewHeaderBackButton"),
+		onClick: onYearClick,
+		mod: { static: mode === "static" },
+		tabIndex: mode === "static" ? -1 : 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.AccordionChevron, {
+			transform: `rotate(${dir === "rtl" ? -90 : 90} 0 0)`,
+			size: 20
+		}), (0, dayjs.default)(date).format("YYYY")]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
+		...getStyles("mobileMonthViewHeaderLabel"),
+		fw: 600,
+		tt: "capitalize",
+		children: headerLabel
+	})] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+		...getStyles("mobileMonthView"),
+		mod: { "with-week-numbers": withWeekNumbers },
+		...others,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...getStyles("mobileMonthViewHeader"),
+				children: typeof renderHeader === "function" ? renderHeader({
+					mode,
+					date,
+					defaultHeader
+				}) : defaultHeader
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+				...getStyles("mobileMonthViewCalendar"),
+				mod: { "with-weekdays": withWeekDays },
+				children: [weekdays && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					...getStyles("mobileMonthViewWeekdays"),
+					children: [withWeekNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...getStyles("mobileMonthViewWeekdaysCorner") }), weekdays]
+				}), weeks]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+				...getStyles("mobileMonthViewEventsList"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
+					...getStyles("mobileMonthViewEventsHeader"),
+					fw: 600,
+					tt: "capitalize",
+					children: eventsHeader
+				}), eventsList.length > 0 ? eventsList : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
+					...getStyles("mobileMonthViewNoEvents"),
+					c: "dimmed",
+					ta: "center",
+					py: "xl",
+					children: require_labels.getLabel("noEvents", labels)
+				})]
+			})
+		]
+	});
 });
 MobileMonthView.displayName = "@mantine/schedule/MobileMonthView";
-MobileMonthView.classes = MobileMonthView_module;
+MobileMonthView.classes = require_MobileMonthView_module.default;
 MobileMonthView.varsResolver = varsResolver;
-
+//#endregion
 exports.MobileMonthView = MobileMonthView;
-//# sourceMappingURL=MobileMonthView.cjs.map
+
+//# sourceMappingURL=MobileMonthView.cjs.map