@mantine/dates/cjs/components/Calendar/Calendar.cjs

Calendars, date and time pickers based on Mantine components

"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_to_date_string = require("../../utils/to-date-string/to-date-string.cjs");
const require_DecadeLevelGroup = require("../DecadeLevelGroup/DecadeLevelGroup.cjs");
const require_YearLevelGroup = require("../YearLevelGroup/YearLevelGroup.cjs");
const require_MonthLevelGroup = require("../MonthLevelGroup/MonthLevelGroup.cjs");
const require_use_uncontrolled_dates = require("../../hooks/use-uncontrolled-dates/use-uncontrolled-dates.cjs");
const require_clamp_level = require("./clamp-level/clamp-level.cjs");
let dayjs = require("dayjs");
dayjs = require_runtime.__toESM(dayjs);
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _mantine_core = require("@mantine/core");
let _mantine_hooks = require("@mantine/hooks");
//#region packages/@mantine/dates/src/components/Calendar/Calendar.tsx
const defaultProps = {
	maxLevel: "decade",
	minLevel: "month",
	__updateDateOnYearSelect: true,
	__updateDateOnMonthSelect: true,
	enableKeyboardNavigation: true
};
const Calendar = (0, _mantine_core.factory)((_props) => {
	const props = (0, _mantine_core.useProps)("Calendar", defaultProps, _props);
	const { vars, maxLevel, minLevel, defaultLevel, level, onLevelChange, date, defaultDate, onDateChange, numberOfColumns, columnsToScroll, ariaLabels, nextLabel, previousLabel, onYearSelect, onMonthSelect, onYearMouseEnter, onMonthMouseEnter, headerControlsOrder, __updateDateOnYearSelect, __updateDateOnMonthSelect, __setDateRef, __setLevelRef, firstDayOfWeek, weekdayFormat, weekendDays, getDayProps, excludeDate, renderDay, hideOutsideDates, hideWeekdays, getDayAriaLabel, monthLabelFormat, nextIcon, previousIcon, __onDayClick, __onDayMouseEnter, withCellSpacing, highlightToday, withWeekNumbers, monthsListFormat, getMonthControlProps, yearLabelFormat, yearsListFormat, getYearControlProps, decadeLabelFormat, classNames, styles, unstyled, minDate, maxDate, locale, __staticSelector, size, __preventFocus, __stopPropagation, onNextDecade, onPreviousDecade, onNextYear, onPreviousYear, onNextMonth, onPreviousMonth, static: isStatic, enableKeyboardNavigation, fullWidth, attributes, ref, ...others } = props;
	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
		classNames,
		styles,
		props
	});
	const [_level, setLevel] = (0, _mantine_hooks.useUncontrolled)({
		value: level ? require_clamp_level.clampLevel(level, minLevel, maxLevel) : void 0,
		defaultValue: defaultLevel ? require_clamp_level.clampLevel(defaultLevel, minLevel, maxLevel) : void 0,
		finalValue: require_clamp_level.clampLevel(void 0, minLevel, maxLevel),
		onChange: onLevelChange
	});
	const [_date, setDate] = require_use_uncontrolled_dates.useUncontrolledDates({
		type: "default",
		value: require_to_date_string.toDateString(date),
		defaultValue: require_to_date_string.toDateString(defaultDate),
		onChange: onDateChange
	});
	(0, react.useImperativeHandle)(__setDateRef, () => (date) => {
		setDate(date);
	});
	(0, react.useImperativeHandle)(__setLevelRef, () => (level) => {
		setLevel(level);
	});
	const stylesApiProps = {
		__staticSelector: __staticSelector || "Calendar",
		styles: resolvedStyles,
		classNames: resolvedClassNames,
		unstyled,
		size,
		attributes
	};
	const _columnsToScroll = columnsToScroll || numberOfColumns || 1;
	const fallbackDateRef = (0, react.useRef)(null);
	if (fallbackDateRef.current === null) {
		const now = /* @__PURE__ */ new Date();
		fallbackDateRef.current = minDate && (0, dayjs.default)(now).isAfter(minDate) ? minDate : (0, dayjs.default)(now).format("YYYY-MM-DD");
	}
	const currentDate = _date || fallbackDateRef.current;
	const handleNextMonth = () => {
		const nextDate = (0, dayjs.default)(currentDate).add(_columnsToScroll, "month").format("YYYY-MM-DD");
		onNextMonth?.(nextDate);
		setDate(nextDate);
	};
	const handlePreviousMonth = () => {
		const nextDate = (0, dayjs.default)(currentDate).subtract(_columnsToScroll, "month").format("YYYY-MM-DD");
		onPreviousMonth?.(nextDate);
		setDate(nextDate);
	};
	const handleNextYear = () => {
		const nextDate = (0, dayjs.default)(currentDate).add(_columnsToScroll, "year").format("YYYY-MM-DD");
		onNextYear?.(nextDate);
		setDate(nextDate);
	};
	const handlePreviousYear = () => {
		const nextDate = (0, dayjs.default)(currentDate).subtract(_columnsToScroll, "year").format("YYYY-MM-DD");
		onPreviousYear?.(nextDate);
		setDate(nextDate);
	};
	const handleNextDecade = () => {
		const nextDate = (0, dayjs.default)(currentDate).add(10 * _columnsToScroll, "year").format("YYYY-MM-DD");
		onNextDecade?.(nextDate);
		setDate(nextDate);
	};
	const handlePreviousDecade = () => {
		const nextDate = (0, dayjs.default)(currentDate).subtract(10 * _columnsToScroll, "year").format("YYYY-MM-DD");
		onPreviousDecade?.(nextDate);
		setDate(nextDate);
	};
	const calendarRef = (0, react.useRef)(null);
	(0, react.useEffect)(() => {
		if (!enableKeyboardNavigation || isStatic) return;
		const handleKeyDown = (event) => {
			if (!calendarRef.current?.contains(document.activeElement)) return;
			const isCtrlOrCmd = event.ctrlKey || event.metaKey;
			const isShift = event.shiftKey;
			switch (event.key) {
				case "ArrowUp":
					if (isCtrlOrCmd && isShift) {
						event.preventDefault();
						handlePreviousDecade();
					} else if (isCtrlOrCmd) {
						event.preventDefault();
						handlePreviousYear();
					}
					break;
				case "ArrowDown":
					if (isCtrlOrCmd && isShift) {
						event.preventDefault();
						handleNextDecade();
					} else if (isCtrlOrCmd) {
						event.preventDefault();
						handleNextYear();
					}
					break;
				case "y":
				case "Y":
					if (_level === "month") {
						event.preventDefault();
						setLevel("year");
					}
					break;
			}
		};
		document.addEventListener("keydown", handleKeyDown);
		return () => {
			document.removeEventListener("keydown", handleKeyDown);
		};
	}, [
		enableKeyboardNavigation,
		isStatic,
		_level,
		handleNextYear,
		handlePreviousYear,
		handleNextDecade,
		handlePreviousDecade
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
		ref: (0, _mantine_hooks.useMergedRef)(calendarRef, ref),
		size,
		"data-calendar": true,
		"data-full-width": fullWidth || void 0,
		...others,
		children: [
			_level === "month" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MonthLevelGroup.MonthLevelGroup, {
				month: currentDate,
				minDate,
				maxDate,
				firstDayOfWeek,
				weekdayFormat,
				weekendDays,
				getDayProps,
				excludeDate,
				renderDay,
				hideOutsideDates,
				hideWeekdays,
				getDayAriaLabel,
				onNext: handleNextMonth,
				onPrevious: handlePreviousMonth,
				hasNextLevel: maxLevel !== "month",
				onLevelClick: () => setLevel("year"),
				numberOfColumns,
				locale,
				levelControlAriaLabel: ariaLabels?.monthLevelControl,
				nextLabel: ariaLabels?.nextMonth ?? nextLabel,
				nextIcon,
				previousLabel: ariaLabels?.previousMonth ?? previousLabel,
				previousIcon,
				monthLabelFormat,
				__onDayClick,
				__onDayMouseEnter,
				__preventFocus,
				__stopPropagation,
				static: isStatic,
				withCellSpacing,
				highlightToday,
				withWeekNumbers,
				headerControlsOrder,
				fullWidth,
				...stylesApiProps
			}),
			_level === "year" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_YearLevelGroup.YearLevelGroup, {
				year: currentDate,
				numberOfColumns,
				minDate,
				maxDate,
				monthsListFormat,
				getMonthControlProps,
				locale,
				onNext: handleNextYear,
				onPrevious: handlePreviousYear,
				hasNextLevel: maxLevel !== "month" && maxLevel !== "year",
				onLevelClick: () => setLevel("decade"),
				levelControlAriaLabel: ariaLabels?.yearLevelControl,
				nextLabel: ariaLabels?.nextYear ?? nextLabel,
				nextIcon,
				previousLabel: ariaLabels?.previousYear ?? previousLabel,
				previousIcon,
				yearLabelFormat,
				__onControlMouseEnter: onMonthMouseEnter,
				__onControlClick: (_event, payload) => {
					__updateDateOnMonthSelect && setDate(payload);
					setLevel(require_clamp_level.clampLevel("month", minLevel, maxLevel));
					onMonthSelect?.(payload);
				},
				__preventFocus,
				__stopPropagation,
				withCellSpacing,
				headerControlsOrder,
				fullWidth,
				...stylesApiProps
			}),
			_level === "decade" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DecadeLevelGroup.DecadeLevelGroup, {
				decade: currentDate,
				minDate,
				maxDate,
				yearsListFormat,
				getYearControlProps,
				locale,
				onNext: handleNextDecade,
				onPrevious: handlePreviousDecade,
				numberOfColumns,
				nextLabel: ariaLabels?.nextDecade ?? nextLabel,
				nextIcon,
				previousLabel: ariaLabels?.previousDecade ?? previousLabel,
				previousIcon,
				decadeLabelFormat,
				__onControlMouseEnter: onYearMouseEnter,
				__onControlClick: (_event, payload) => {
					__updateDateOnYearSelect && setDate(payload);
					setLevel(require_clamp_level.clampLevel("year", minLevel, maxLevel));
					onYearSelect?.(payload);
				},
				__preventFocus,
				__stopPropagation,
				withCellSpacing,
				headerControlsOrder,
				fullWidth,
				...stylesApiProps
			})
		]
	});
});
Calendar.classes = {
	...require_DecadeLevelGroup.DecadeLevelGroup.classes,
	...require_YearLevelGroup.YearLevelGroup.classes,
	...require_MonthLevelGroup.MonthLevelGroup.classes
};
Calendar.displayName = "@mantine/dates/Calendar";
//#endregion
exports.Calendar = Calendar;

//# sourceMappingURL=Calendar.cjs.map