@yamada-ui/react/dist/esm/components/date-picker/date-picker.js

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

"use client";


import { mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { CalendarIcon } from "../icon/icons/calendar-icon.js";
import { XIcon } from "../icon/icons/x-icon.js";
import { PopoverContent, PopoverRoot, PopoverTrigger } from "../popover/popover.js";
import { useInputBorder } from "../input/use-input-border.js";
import { useInputPropsContext } from "../input/input.js";
import { InputElement } from "../input/input-element.js";
import { useGroupItemProps } from "../group/use-group.js";
import { InputGroupRoot } from "../input/input-group.js";
import { CalendarRoot } from "../calendar/calendar.js";
import { datePickerStyle } from "./date-picker.style.js";
import { useFieldSizing } from "../../hooks/use-field-sizing/index.js";
import { useDatePicker } from "./use-date-picker.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/date-picker/date-picker.tsx
const { ComponentContext, PropsContext: DatePickerPropsContext, useComponentContext, usePropsContext: useDatePickerPropsContext, withContext, withProvider } = createSlotComponent("date-picker", 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__ */ jsx(XIcon, {}), duration, errorBorderColor, focusBorderColor, icon, calendarProps, contentProps, elementProps, iconProps, inputProps, rootProps,...rest }] = useGroupItemProps(props);
	const { children: fieldChildren, range, separator, value, getCalendarProps, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, popoverProps } = useDatePicker(rest);
	const mergedPopoverProps = useMemo(() => ({
		animationScheme,
		duration,
		...popoverProps
	}), [
		animationScheme,
		duration,
		popoverProps
	]);
	const varProps = useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	const selectProps = useMemo(() => ({ contentProps: { portalProps: { disabled: true } } }), []);
	const componentContext = useMemo(() => ({
		range,
		separator,
		getInputProps,
		inputProps
	}), [
		getInputProps,
		inputProps,
		range,
		separator
	]);
	const hasValue = (0, utils_exports.isArray)(value) ? !!value.length : (0, utils_exports.isObject)(value) && !(0, utils_exports.isDate)(value) ? !!value.end || !!value.start : !!value;
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: componentContext,
		children: /* @__PURE__ */ jsxs(PopoverRoot, {
			...mergedPopoverProps,
			children: [/* @__PURE__ */ jsxs(InputGroupRoot, {
				className,
				css,
				colorScheme,
				...getRootProps({
					...groupItemProps,
					...rootProps
				}),
				children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(DatePickerField, {
					...getFieldProps(varProps),
					children: fieldChildren
				}) }), /* @__PURE__ */ jsx(InputElement, {
					clickable: clearable && hasValue,
					...elementProps,
					children: clearable && hasValue ? /* @__PURE__ */ jsx(DatePickerIcon, {
						icon: clearIcon,
						...getClearIconProps(iconProps)
					}) : /* @__PURE__ */ jsx(DatePickerIcon, {
						icon,
						...getIconProps(iconProps)
					})
				})]
			}), /* @__PURE__ */ jsx(DatePickerContent, {
				...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(contentProps))),
				children: /* @__PURE__ */ jsx(CalendarRoot, {
					colorScheme,
					size,
					fixed: false,
					selectProps,
					...getCalendarProps(calendarProps),
					children
				})
			})]
		})
	});
}, "root", { transferProps: ["size"] })((props) => {
	return {
		...useInputPropsContext(),
		...props
	};
});
const DatePickerField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children,...rest }) => {
	const { range, separator, getInputProps, inputProps } = useComponentContext();
	const computedChildren = useMemo(() => {
		if (range) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
			/* @__PURE__ */ jsx(DatePickerAdjustInput, { ...getInputProps({
				align: "start",
				...inputProps
			}) }),
			/* @__PURE__ */ jsx(DatePickerSeparator, { children: separator }),
			/* @__PURE__ */ jsx(DatePickerAdjustInput, { ...getInputProps({
				align: "end",
				...inputProps
			}) })
		] });
		else return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ 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 } = useFieldSizing({ value: value?.toString() || placeholder });
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [text, /* @__PURE__ */ jsx(styled.input, {
		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__ */ jsx(CalendarIcon, {}),
	...rest
}));
const DatePickerContent = withContext(PopoverContent, "content")();

//#endregion
export { DatePicker, DatePickerPropsContext, useDatePickerPropsContext };
//# sourceMappingURL=date-picker.js.map