@mantine/dates/esm/components/MiniCalendar/MiniCalendar.mjs

Calendars, date and time pickers based on Mantine components

"use client";
import { toDateString } from "../../utils/to-date-string/to-date-string.mjs";
import { useDatesContext } from "../DatesProvider/use-dates-context.mjs";
import MiniCalendar_module_default from "./MiniCalendar.module.mjs";
import dayjs from "dayjs";
import { jsx, jsxs } from "react/jsx-runtime";
import { AccordionChevron, Box, UnstyledButton, createVarsResolver, factory, getSize, useProps, useStyles } from "@mantine/core";
import { useUncontrolled } from "@mantine/hooks";
//#region packages/@mantine/dates/src/components/MiniCalendar/MiniCalendar.tsx
const defaultProps = {
	size: "sm",
	numberOfDays: 7,
	monthLabelFormat: "MMM"
};
const varsResolver = createVarsResolver((_theme, { size }) => ({ root: { "--mini-calendar-font-size": getSize(size, "mantine-font-size") } }));
const MiniCalendar = factory((_props) => {
	const props = 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 = useStyles({
		name: "MiniCalendar",
		classes: MiniCalendar_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		vars,
		varsResolver,
		attributes
	});
	const _locale = useDatesContext().getLocale(locale);
	const [_date, setDate] = useUncontrolled({
		value: toDateString(date),
		defaultValue: toDateString(defaultDate),
		finalValue: toDateString(value) || dayjs().format("YYYY-MM-DD"),
		onChange: onDateChange
	});
	const handleNext = () => {
		onNext?.();
		setDate(toDateString(dayjs(_date).add(numberOfDays, "days")));
	};
	const handlePrevious = () => {
		onPrevious?.();
		setDate(toDateString(dayjs(_date).subtract(numberOfDays, "days")));
	};
	const previousDisabled = minDate ? dayjs(_date).subtract(1, "days").isBefore(dayjs(minDate)) : false;
	const nextDisabled = maxDate ? dayjs(_date).add(numberOfDays, "days").isAfter(dayjs(maxDate)) : false;
	const range = Array(numberOfDays).fill(0).map((_, index) => dayjs(_date).add(index, "days")).map((date) => {
		const disabled = minDate && date.isBefore(dayjs(minDate), "day") || maxDate && date.isAfter(dayjs(maxDate), "day") || false;
		const dayProps = getDayProps?.(toDateString(date));
		return /* @__PURE__ */ jsxs(UnstyledButton, {
			disabled,
			"aria-label": date.format("YYYY-MM-DD"),
			"data-disabled": disabled || void 0,
			"data-selected": value && dayjs(date).isSame(value, "day") ? true : void 0,
			...dayProps,
			onClick: (event) => {
				dayProps?.onClick?.(event);
				onChange?.(toDateString(date));
			},
			...getStyles("day", {
				active: !disabled,
				className: dayProps?.className,
				style: dayProps?.style
			}),
			children: [/* @__PURE__ */ jsx("span", {
				...getStyles("dayMonth"),
				children: date.locale(_locale).format(monthLabelFormat)
			}), /* @__PURE__ */ jsx("span", {
				...getStyles("dayNumber"),
				children: date.date()
			})]
		}, date.toString());
	});
	return /* @__PURE__ */ jsxs(Box, {
		size,
		...getStyles("root"),
		...others,
		children: [
			/* @__PURE__ */ jsx(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__ */ jsx(AccordionChevron, {
					"data-chevron": true,
					size
				})
			}),
			/* @__PURE__ */ jsx("div", {
				...getStyles("days"),
				children: range
			}),
			/* @__PURE__ */ jsx(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__ */ jsx(AccordionChevron, {
					"data-chevron": true,
					size
				})
			})
		]
	});
});
MiniCalendar.displayName = "@mantine/dates/MiniCalendar";
MiniCalendar.classes = MiniCalendar_module_default;
MiniCalendar.varsResolver = varsResolver;
//#endregion
export { MiniCalendar };

//# sourceMappingURL=MiniCalendar.mjs.map