@mantine/dates/cjs/components/MiniCalendar/MiniCalendar.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_use_dates_context = require("../DatesProvider/use-dates-context.cjs");
const require_MiniCalendar_module = require("./MiniCalendar.module.cjs");
let dayjs = require("dayjs");
dayjs = require_runtime.__toESM(dayjs);
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/MiniCalendar/MiniCalendar.tsx
const defaultProps = {
	size: "sm",
	numberOfDays: 7,
	monthLabelFormat: "MMM"
};
const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { size }) => ({ root: { "--mini-calendar-font-size": (0, _mantine_core.getSize)(size, "mantine-font-size") } }));
const MiniCalendar = (0, _mantine_core.factory)((_props) => {
	const props = (0, _mantine_core.useProps)("MiniCalendar", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, attributes, date, defaultDate, onDateChange, value, onChange, onNext, onPrevious, getDayProps, numberOfDays, size, minDate, maxDate, monthLabelFormat, nextControlProps, previousControlProps, locale, ...others } = props;
	const getStyles = (0, _mantine_core.useStyles)({
		name: "MiniCalendar",
		classes: require_MiniCalendar_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		vars,
		varsResolver,
		attributes
	});
	const _locale = require_use_dates_context.useDatesContext().getLocale(locale);
	const [_date, setDate] = (0, _mantine_hooks.useUncontrolled)({
		value: require_to_date_string.toDateString(date),
		defaultValue: require_to_date_string.toDateString(defaultDate),
		finalValue: require_to_date_string.toDateString(value) || (0, dayjs.default)().format("YYYY-MM-DD"),
		onChange: onDateChange
	});
	const handleNext = () => {
		onNext?.();
		setDate(require_to_date_string.toDateString((0, dayjs.default)(_date).add(numberOfDays, "days")));
	};
	const handlePrevious = () => {
		onPrevious?.();
		setDate(require_to_date_string.toDateString((0, dayjs.default)(_date).subtract(numberOfDays, "days")));
	};
	const previousDisabled = minDate ? (0, dayjs.default)(_date).subtract(1, "days").isBefore((0, dayjs.default)(minDate)) : false;
	const nextDisabled = maxDate ? (0, dayjs.default)(_date).add(numberOfDays, "days").isAfter((0, dayjs.default)(maxDate)) : false;
	const range = Array(numberOfDays).fill(0).map((_, index) => (0, dayjs.default)(_date).add(index, "days")).map((date) => {
		const disabled = minDate && date.isBefore((0, dayjs.default)(minDate), "day") || maxDate && date.isAfter((0, dayjs.default)(maxDate), "day") || false;
		const dayProps = getDayProps?.(require_to_date_string.toDateString(date));
		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.UnstyledButton, {
			disabled,
			"aria-label": date.format("YYYY-MM-DD"),
			"data-disabled": disabled || void 0,
			"data-selected": value && (0, dayjs.default)(date).isSame(value, "day") ? true : void 0,
			...dayProps,
			onClick: (event) => {
				dayProps?.onClick?.(event);
				onChange?.(require_to_date_string.toDateString(date));
			},
			...getStyles("day", {
				active: !disabled,
				className: dayProps?.className,
				style: dayProps?.style
			}),
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
				...getStyles("dayMonth"),
				children: date.locale(_locale).format(monthLabelFormat)
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
				...getStyles("dayNumber"),
				children: date.date()
			})]
		}, date.toString());
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
		size,
		...getStyles("root"),
		...others,
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
				size,
				onClick: handlePrevious,
				disabled: previousDisabled,
				"data-disabled": previousDisabled || void 0,
				"data-direction": "previous",
				...previousControlProps,
				...getStyles("control", {
					active: !previousDisabled,
					className: previousControlProps?.className,
					style: previousControlProps?.style
				}),
				children: previousControlProps?.children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.AccordionChevron, {
					"data-chevron": true,
					size
				})
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				...getStyles("days"),
				children: range
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
				size,
				onClick: handleNext,
				disabled: nextDisabled,
				"data-disabled": nextDisabled || void 0,
				"data-direction": "next",
				...nextControlProps,
				...getStyles("control", {
					active: !nextDisabled,
					className: nextControlProps?.className,
					style: nextControlProps?.style
				}),
				children: nextControlProps?.children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.AccordionChevron, {
					"data-chevron": true,
					size
				})
			})
		]
	});
});
MiniCalendar.displayName = "@mantine/dates/MiniCalendar";
MiniCalendar.classes = require_MiniCalendar_module.default;
MiniCalendar.varsResolver = varsResolver;
//#endregion
exports.MiniCalendar = MiniCalendar;

//# sourceMappingURL=MiniCalendar.cjs.map