@mantine/dates/cjs/components/DatePicker/DatePicker.cjs

Calendars, date and time pickers based on Mantine components

"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_is_same_month = require("../Month/is-same-month/is-same-month.cjs");
const require_use_dates_state = require("../../hooks/use-dates-state/use-dates-state.cjs");
const require_Calendar = require("../Calendar/Calendar.cjs");
const require_pick_calendar_levels_props = require("../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.cjs");
const require_DatePicker_module = require("./DatePicker.module.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");
//#region packages/@mantine/dates/src/components/DatePicker/DatePicker.tsx
const varsResolver = (0, _mantine_core.createVarsResolver)((_, { size }) => ({ datePickerRoot: { "--preset-font-size": (0, _mantine_core.getFontSize)(size) } }));
const defaultProps = {
	type: "default",
	defaultLevel: "month",
	numberOfColumns: 1,
	size: "sm"
};
const DatePicker = (0, _mantine_core.factory)((_props) => {
	const props = (0, _mantine_core.useProps)("DatePicker", defaultProps, _props);
	const { allowDeselect, allowSingleDateInRange, value, defaultValue, onChange, onMouseLeave, classNames, styles, __staticSelector, __onDayClick, __onDayMouseEnter, __onPresetSelect, __stopPropagation, presets, className, style, unstyled, size, vars, attributes, fullWidth, ...rest } = props;
	const { calendarProps, others } = require_pick_calendar_levels_props.pickCalendarProps(rest);
	const setDateRef = (0, react.useRef)(null);
	const setLevelRef = (0, react.useRef)(null);
	const getStyles = (0, _mantine_core.useStyles)({
		name: __staticSelector || "DatePicker",
		classes: require_DatePicker_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		rootSelector: presets ? "datePickerRoot" : void 0,
		varsResolver,
		vars
	});
	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, _value, setValue } = require_use_dates_state.useDatesState({
		type: others.type,
		level: "day",
		allowDeselect,
		allowSingleDateInRange,
		value,
		defaultValue,
		onChange,
		onMouseLeave
	});
	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
		classNames,
		styles,
		props
	});
	const calendar = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, {
		classNames: resolvedClassNames,
		styles: resolvedStyles,
		__staticSelector: __staticSelector || "DatePicker",
		onMouseLeave: onRootMouseLeave,
		size,
		fullWidth,
		...calendarProps,
		...!presets ? others : {},
		__stopPropagation,
		__setDateRef: setDateRef,
		__setLevelRef: setLevelRef,
		minLevel: calendarProps.minLevel || "month",
		__onDayMouseEnter: (_event, date) => {
			onHoveredDateChange(date);
			__onDayMouseEnter?.(_event, date);
		},
		__onDayClick: (_event, date) => {
			onDateChange(date);
			__onDayClick?.(_event, date);
		},
		getDayProps: (date) => ({
			...getControlProps(date),
			...calendarProps.getDayProps?.(date)
		}),
		getMonthControlProps: (date) => ({
			selected: typeof _value === "string" ? require_is_same_month.isSameMonth(date, _value) : false,
			...calendarProps.getMonthControlProps?.(date)
		}),
		getYearControlProps: (date) => ({
			selected: typeof _value === "string" ? (0, dayjs.default)(date).isSame(_value, "year") : false,
			...calendarProps.getYearControlProps?.(date)
		}),
		hideOutsideDates: calendarProps.hideOutsideDates ?? calendarProps.numberOfColumns !== 1,
		attributes,
		...!presets ? {
			className,
			style
		} : {}
	});
	if (!presets) return calendar;
	const handlePresetSelect = (val) => {
		const _val = Array.isArray(val) ? val[0] : val;
		if (_val !== void 0) {
			setDateRef.current?.(_val);
			setLevelRef.current?.("month");
			__onPresetSelect ? __onPresetSelect(val) : setValue(val);
		}
	};
	const presetButtons = presets.map((preset, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
		...getStyles("presetButton"),
		onClick: () => handlePresetSelect(preset.value),
		onMouseDown: (event) => event.preventDefault(),
		"data-mantine-stop-propagation": __stopPropagation || void 0,
		children: preset.label
	}, index));
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
		...getStyles("datePickerRoot"),
		size,
		...others,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			...getStyles("presetsList"),
			children: presetButtons
		}), calendar]
	});
});
DatePicker.classes = require_Calendar.Calendar.classes;
DatePicker.varsResolver = varsResolver;
DatePicker.displayName = "@mantine/dates/DatePicker";
//#endregion
exports.DatePicker = DatePicker;

//# sourceMappingURL=DatePicker.cjs.map