@yamada-ui/react/dist/cjs/components/date-picker/date-picker.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_calendar_icon = require('../icon/icons/calendar-icon.cjs');
const require_x_icon = require('../icon/icons/x-icon.cjs');
const require_popover = require('../popover/popover.cjs');
const require_use_input_border = require('../input/use-input-border.cjs');
const require_input = require('../input/input.cjs');
const require_input_element = require('../input/input-element.cjs');
const require_use_group = require('../group/use-group.cjs');
const require_input_group = require('../input/input-group.cjs');
const require_calendar = require('../calendar/calendar.cjs');
const require_date_picker_style = require('./date-picker.style.cjs');
const require_hooks_use_field_sizing_index = require('../../hooks/use-field-sizing/index.cjs');
const require_use_date_picker = require('./use-date-picker.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/date-picker/date-picker.tsx
const { ComponentContext, PropsContext: DatePickerPropsContext, useComponentContext, usePropsContext: useDatePickerPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("date-picker", require_date_picker_style.datePickerStyle);
/**
* `DatePicker` is a component used for users to select a date.
*
* @see https://yamada-ui.com/docs/components/date-picker
*/
const DatePicker = withProvider((props) => {
	const [groupItemProps, { className, css, colorScheme, size, animationScheme = "block-start", children, clearable = true, clearIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_x_icon.XIcon, {}), duration, errorBorderColor, focusBorderColor, icon, calendarProps, contentProps, elementProps, iconProps, inputProps, rootProps,...rest }] = require_use_group.useGroupItemProps(props);
	const { children: fieldChildren, range, separator, value, getCalendarProps, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, popoverProps } = require_use_date_picker.useDatePicker(rest);
	const mergedPopoverProps = (0, react.useMemo)(() => ({
		animationScheme,
		duration,
		...popoverProps
	}), [
		animationScheme,
		duration,
		popoverProps
	]);
	const varProps = require_use_input_border.useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	const selectProps = (0, react.useMemo)(() => ({ contentProps: { portalProps: { disabled: true } } }), []);
	const componentContext = (0, react.useMemo)(() => ({
		range,
		separator,
		getInputProps,
		inputProps
	}), [
		getInputProps,
		inputProps,
		range,
		separator
	]);
	const hasValue = (0, require_utils_index.utils_exports.isArray)(value) ? !!value.length : (0, require_utils_index.utils_exports.isObject)(value) && !(0, require_utils_index.utils_exports.isDate)(value) ? !!value.end || !!value.start : !!value;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
		value: componentContext,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverRoot, {
			...mergedPopoverProps,
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_input_group.InputGroupRoot, {
				className,
				css,
				colorScheme,
				...getRootProps({
					...groupItemProps,
					...rootProps
				}),
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerField, {
					...getFieldProps(varProps),
					children: fieldChildren
				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_element.InputElement, {
					clickable: clearable && hasValue,
					...elementProps,
					children: clearable && hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerIcon, {
						icon: clearIcon,
						...getClearIconProps(iconProps)
					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerIcon, {
						icon,
						...getIconProps(iconProps)
					})
				})]
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerContent, {
				...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(contentProps))),
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar.CalendarRoot, {
					colorScheme,
					size,
					fixed: false,
					selectProps,
					...getCalendarProps(calendarProps),
					children
				})
			})]
		})
	});
}, "root", { transferProps: ["size"] })((props) => {
	return {
		...require_input.useInputPropsContext(),
		...props
	};
});
const DatePickerField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children,...rest }) => {
	const { range, separator, getInputProps, inputProps } = useComponentContext();
	const computedChildren = (0, react.useMemo)(() => {
		if (range) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerAdjustInput, { ...getInputProps({
				align: "start",
				...inputProps
			}) }),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerSeparator, { children: separator }),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerAdjustInput, { ...getInputProps({
				align: "end",
				...inputProps
			}) })
		] });
		else return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerInput, { ...getInputProps(inputProps) })] });
	}, [
		children,
		getInputProps,
		inputProps,
		range,
		separator
	]);
	return {
		...rest,
		children: computedChildren
	};
});
const DatePickerInput = withContext("input", "input")();
const DatePickerAdjustInput = withContext(({ ref, placeholder, value,...rest }) => {
	const { ref: inputRef, text } = require_hooks_use_field_sizing_index.useFieldSizing({ value: value?.toString() || placeholder });
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [text, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, {
		ref: require_ref.mergeRefs(ref, inputRef),
		placeholder,
		value,
		...rest
	})] });
}, ["input", "adjust"])();
const DatePickerSeparator = withContext("span", "separator")();
const DatePickerIcon = withContext("div", "icon")(void 0, ({ children, icon,...rest }) => ({
	children: icon || children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar_icon.CalendarIcon, {}),
	...rest
}));
const DatePickerContent = withContext(require_popover.PopoverContent, "content")();

//#endregion
exports.DatePicker = DatePicker;
exports.DatePickerPropsContext = DatePickerPropsContext;
exports.useDatePickerPropsContext = useDatePickerPropsContext;
//# sourceMappingURL=date-picker.cjs.map