@mantine/dates/cjs/components/TimePicker/TimePicker.cjs

Calendars, date and time pickers based on Mantine components

"use client";
const require_pad_time = require("./utils/pad-time/pad-time.cjs");
const require_SpinInput = require("../SpinInput/SpinInput.cjs");
const require_TimePicker_context = require("./TimePicker.context.cjs");
const require_AmPmInput = require("./AmPmInput/AmPmInput.cjs");
const require_AmPmControlsList = require("./TimeControlsList/AmPmControlsList.cjs");
const require_TimeControlsList = require("./TimeControlsList/TimeControlsList.cjs");
const require_TimePresets = require("./TimePresets/TimePresets.cjs");
const require_clamp_time = require("./utils/clamp-time/clamp-time.cjs");
const require_get_parsed_time = require("./utils/get-parsed-time/get-parsed-time.cjs");
const require_get_time_string = require("./utils/get-time-string/get-time-string.cjs");
const require_use_time_picker = require("./use-time-picker.cjs");
const require_TimePicker_module = require("./TimePicker.module.cjs");
let react = require("react");
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/TimePicker/TimePicker.tsx
const defaultProps = {
	type: "time",
	hoursStep: 1,
	minutesStep: 1,
	secondsStep: 1,
	format: "24h",
	amPmLabels: {
		am: "AM",
		pm: "PM"
	},
	pasteSplit: require_get_parsed_time.getParsedTime,
	maxDropdownContentHeight: 200,
	hoursPlaceholder: "--",
	minutesPlaceholder: "--",
	secondsPlaceholder: "--",
	minHoursDigits: 2
};
const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { size }) => ({ dropdown: { "--control-font-size": (0, _mantine_core.getFontSize)(size) } }));
const DURATION_HOURS_MAX = Infinity;
const TimePicker = (0, _mantine_core.factory)((_props) => {
	const props = (0, _mantine_core.useProps)([
		"Input",
		"InputWrapper",
		"TimePicker"
	], defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, onClick, type, format: _format, value, defaultValue, onChange, hoursStep, minutesStep, secondsStep, withSeconds, hoursInputLabel, minutesInputLabel, secondsInputLabel, amPmInputLabel, amPmLabels, clearable, clearSectionMode, onMouseDown, onFocusCapture, onBlurCapture, min, max, popoverProps, withDropdown, rightSection, onFocus, onBlur, clearButtonProps, hoursInputProps, minutesInputProps, secondsInputProps, amPmSelectProps, readOnly, disabled, size, name, form, hiddenInputProps, labelProps, pasteSplit, hoursRef, minutesRef, secondsRef, amPmRef, presets, closeDropdownOnPresetSelect, maxDropdownContentHeight, scrollAreaProps, attributes, reverseTimeControlsList, hoursPlaceholder, minutesPlaceholder, secondsPlaceholder, minHoursDigits, ...others } = props;
	const isDuration = type === "duration";
	const format = isDuration ? "24h" : _format;
	const resolvedHoursPlaceholder = isDuration && hoursPlaceholder === "--" ? "-".repeat(minHoursDigits) : hoursPlaceholder;
	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
		classNames,
		styles,
		props
	});
	const getStyles = (0, _mantine_core.useStyles)({
		name: "TimePicker",
		classes: require_TimePicker_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const controller = require_use_time_picker.useTimePicker({
		value,
		defaultValue,
		onChange,
		format,
		amPmLabels,
		withSeconds,
		min,
		max,
		clearable,
		disabled,
		readOnly,
		pasteSplit,
		type
	});
	const _hoursRef = (0, _mantine_hooks.useMergedRef)(controller.refs.hours, hoursRef);
	const _minutesRef = (0, _mantine_hooks.useMergedRef)(controller.refs.minutes, minutesRef);
	const _secondsRef = (0, _mantine_hooks.useMergedRef)(controller.refs.seconds, secondsRef);
	const _amPmRef = (0, _mantine_hooks.useMergedRef)(controller.refs.amPm, amPmRef);
	const hoursInputId = (0, _mantine_hooks.useId)();
	const hasFocusRef = (0, react.useRef)(false);
	const [dropdownOpened, setDropdownOpened] = (0, react.useState)(false);
	const handleFocus = (event) => {
		if (!hasFocusRef.current) {
			hasFocusRef.current = true;
			onFocus?.(event);
		}
	};
	const handlePresetSelect = (timeString) => {
		controller.setTimeString(timeString);
		if (closeDropdownOnPresetSelect) {
			setDropdownOpened(false);
			popoverProps?.onChange?.(false);
		}
	};
	const handleBlur = (event) => {
		if (!event.currentTarget.contains(event.relatedTarget)) {
			const computedValue = controller.values;
			const timeString = require_get_time_string.getTimeString({
				...computedValue,
				format,
				amPmLabels,
				withSeconds: !!withSeconds
			});
			if (timeString.valid && (min || max)) {
				const clamped = require_clamp_time.clampTime(timeString.value, min, max);
				if (clamped.timeString !== timeString.value) controller.setTimeString(clamped.timeString);
			}
			hasFocusRef.current = false;
			onBlur?.(event);
		}
	};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimePicker_context.TimePickerProvider, {
		value: {
			getStyles,
			scrollAreaProps,
			maxDropdownContentHeight
		},
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Popover, {
			opened: dropdownOpened,
			transitionProps: { duration: 0 },
			position: "bottom-start",
			withRoles: false,
			disabled: disabled || readOnly || !withDropdown || isDuration,
			...popoverProps,
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.InputBase, {
				component: "div",
				size,
				disabled,
				onClick: (event) => {
					onClick?.(event);
					controller.focus("hours");
					if (!disabled) setDropdownOpened(true);
				},
				onMouseDown: (event) => {
					event.preventDefault();
					onMouseDown?.(event);
				},
				onFocusCapture: (event) => {
					setDropdownOpened(true);
					onFocusCapture?.(event);
				},
				onBlurCapture: (event) => {
					setDropdownOpened(false);
					onBlurCapture?.(event);
				},
				rightSection,
				__clearSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.CloseButton, {
					...clearButtonProps,
					size,
					onClick: (event) => {
						controller.clear();
						clearButtonProps?.onClick?.(event);
					},
					onMouseDown: (event) => {
						event.preventDefault();
						clearButtonProps?.onMouseDown?.(event);
					}
				}),
				__clearable: controller.isClearable,
				__clearSectionMode: clearSectionMode,
				labelProps: {
					htmlFor: hoursInputId,
					...labelProps
				},
				style,
				className,
				classNames: resolvedClassNames,
				styles: resolvedStyles,
				attributes,
				__staticSelector: "TimePicker",
				...others,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					...getStyles("fieldsRoot"),
					dir: "ltr",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						...getStyles("fieldsGroup"),
						onBlur: handleBlur,
						children: [
							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpinInput.SpinInput, {
								id: hoursInputId,
								...hoursInputProps,
								...getStyles("field", {
									className: hoursInputProps?.className,
									style: isDuration ? {
										width: `calc(${Math.max(minHoursDigits, require_pad_time.padTime(controller.values.hours ?? 0).length)}ch + 0.3em)`,
										...hoursInputProps?.style
									} : hoursInputProps?.style
								}),
								value: controller.values.hours,
								onChange: controller.setHours,
								onNextInput: () => controller.focus("minutes"),
								min: format === "12h" ? 1 : 0,
								max: isDuration ? DURATION_HOURS_MAX : format === "12h" ? 12 : 23,
								allowTemporaryZero: format === "12h",
								disableAutoAdvance: isDuration,
								focusable: true,
								step: hoursStep,
								ref: _hoursRef,
								"aria-label": hoursInputLabel,
								readOnly,
								disabled,
								onPaste: controller.onPaste,
								onFocus: (event) => {
									handleFocus(event);
									hoursInputProps?.onFocus?.(event);
								},
								onBlur: (event) => {
									const actualInputValue = event.currentTarget.value;
									if (format === "12h" && (actualInputValue ? parseInt(actualInputValue, 10) : null) === 0) controller.setHours(12);
									hoursInputProps?.onBlur?.(event);
								},
								placeholder: resolvedHoursPlaceholder
							}),
							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: ":" }),
							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpinInput.SpinInput, {
								...minutesInputProps,
								...getStyles("field", {
									className: minutesInputProps?.className,
									style: minutesInputProps?.style
								}),
								value: controller.values.minutes,
								onChange: controller.setMinutes,
								min: 0,
								max: 59,
								focusable: true,
								step: minutesStep,
								ref: _minutesRef,
								onPreviousInput: () => controller.focus("hours"),
								onNextInput: () => withSeconds ? controller.focus("seconds") : controller.focus("amPm"),
								"aria-label": minutesInputLabel,
								tabIndex: -1,
								readOnly,
								disabled,
								onPaste: controller.onPaste,
								onFocus: (event) => {
									handleFocus(event);
									minutesInputProps?.onFocus?.(event);
								},
								placeholder: minutesPlaceholder
							}),
							withSeconds && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: ":" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpinInput.SpinInput, {
								...secondsInputProps,
								...getStyles("field", {
									className: secondsInputProps?.className,
									style: secondsInputProps?.style
								}),
								value: controller.values.seconds,
								onChange: controller.setSeconds,
								min: 0,
								max: 59,
								focusable: true,
								step: secondsStep,
								ref: _secondsRef,
								onPreviousInput: () => controller.focus("minutes"),
								onNextInput: () => controller.focus("amPm"),
								"aria-label": secondsInputLabel,
								tabIndex: -1,
								readOnly,
								disabled,
								onPaste: controller.onPaste,
								onFocus: (event) => {
									handleFocus(event);
									secondsInputProps?.onFocus?.(event);
								},
								placeholder: secondsPlaceholder
							})] }),
							format === "12h" && !isDuration && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AmPmInput.AmPmInput, {
								...amPmSelectProps,
								inputType: withDropdown ? "input" : "select",
								labels: amPmLabels,
								value: controller.values.amPm,
								onChange: controller.setAmPm,
								ref: _amPmRef,
								"aria-label": amPmInputLabel,
								onPreviousInput: () => withSeconds ? controller.focus("seconds") : controller.focus("minutes"),
								readOnly,
								disabled,
								tabIndex: -1,
								onPaste: controller.onPaste,
								onFocus: (event) => {
									handleFocus(event);
									amPmSelectProps?.onFocus?.(event);
								}
							})
						]
					})
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
					type: "hidden",
					name,
					form,
					value: controller.hiddenInputValue,
					...hiddenInputProps
				})]
			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Dropdown, {
				...getStyles("dropdown"),
				onMouseDown: (event) => event.preventDefault(),
				children: presets ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimePresets.TimePresets, {
					value: controller.hiddenInputValue,
					onChange: handlePresetSelect,
					format,
					presets,
					amPmLabels,
					withSeconds: withSeconds || false
				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					...getStyles("controlsListGroup"),
					children: [
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimeControlsList.TimeControlsList, {
							min: format === "12h" ? 1 : 0,
							max: format === "12h" ? 12 : 23,
							step: hoursStep,
							value: controller.values.hours,
							onSelect: controller.setHours,
							reversed: reverseTimeControlsList
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimeControlsList.TimeControlsList, {
							min: 0,
							max: 59,
							step: minutesStep,
							value: controller.values.minutes,
							onSelect: controller.setMinutes,
							reversed: reverseTimeControlsList
						}),
						withSeconds && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimeControlsList.TimeControlsList, {
							min: 0,
							max: 59,
							step: secondsStep,
							value: controller.values.seconds,
							onSelect: controller.setSeconds,
							reversed: reverseTimeControlsList
						}),
						format === "12h" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AmPmControlsList.AmPmControlsList, {
							labels: amPmLabels,
							value: controller.values.amPm,
							onSelect: controller.setAmPm
						})
					]
				})
			})]
		})
	});
});
TimePicker.displayName = "@mantine/dates/TimePicker";
TimePicker.classes = require_TimePicker_module.default;
TimePicker.varsResolver = varsResolver;
//#endregion
exports.TimePicker = TimePicker;

//# sourceMappingURL=TimePicker.cjs.map