@nish1896/rhf-mui-components/mui-pickers/time/RHFTimePicker.js

A suite of 25+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.

"use client";
import { RHFMuiConfigContext } from "../../config/ConfigProvider.js";
import { keepLabelAboveFormField, mergeRefs } from "../../utils/control.js";
import { generateDateAdapterErrMsg } from "../../utils/errors.js";
import FormControl from "../../common/FormControl.js";
import FormHelperText from "../../common/FormHelperText.js";
import FormLabel from "../../common/FormLabel.js";
import FormLabelText from "../../common/FormLabelText.js";
import { fieldNameToLabel } from "../../utils/text-transform.js";
import { useFieldIds } from "../../utils/useFieldIds.js";
import { forwardRef, useContext } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { TimePicker } from "@mui/x-date-pickers";
//#region src/mui-pickers/time/RHFTimePicker.tsx
const RHFTimePicker = forwardRef(function RHFTimePicker({ fieldName, control, registerOptions, required, onChange: muiOnChange, onAccept: muiOnAccept, customOnChange, onValueChange, disabled: muiDisabled, label, showLabelAboveFormField, formLabelProps, hideLabel, helperText, errorMessage, hideErrorMessage, formHelperTextProps, slotProps: muiSlotProps, customIds, ...otherTimePickerProps }, ref) {
	const { dateAdapter, allLabelsAboveFields } = useContext(RHFMuiConfigContext);
	if (!dateAdapter) throw new Error(generateDateAdapterErrMsg("RHFTimePicker"));
	const { fieldId, labelId, helperTextId, errorId } = useFieldIds(fieldName, customIds);
	const { textField: textFieldSlotProps, ...otherSlotProps } = muiSlotProps ?? {};
	const isLabelAboveFormField = keepLabelAboveFormField(showLabelAboveFormField, allLabelsAboveFields);
	const fieldLabel = label ?? fieldNameToLabel(fieldName);
	const accessibleFieldLabel = typeof fieldLabel === "string" ? fieldLabel : fieldNameToLabel(fieldName);
	return /* @__PURE__ */ jsx(LocalizationProvider, {
		dateAdapter,
		children: /* @__PURE__ */ jsx(Controller, {
			name: fieldName,
			control,
			rules: registerOptions,
			render: ({ field: { name: rhfFieldName, value: rhfValue, onChange: rhfOnChange, onBlur: rhfOnBlur, ref: rhfRef, disabled: rhfDisabled }, fieldState: { error: fieldStateError } }) => {
				const isDisabled = muiDisabled || rhfDisabled;
				const fieldErrorMessage = fieldStateError?.message?.toString() ?? errorMessage;
				const isError = !!fieldErrorMessage;
				const showHelperTextElement = !!(helperText || isError && !hideErrorMessage);
				return /* @__PURE__ */ jsxs(FormControl, {
					error: isError,
					disabled: isDisabled,
					children: [
						!hideLabel && /* @__PURE__ */ jsx(FormLabel, {
							label: fieldLabel,
							isVisible: isLabelAboveFormField,
							required,
							error: isError,
							disabled: isDisabled,
							formLabelProps: {
								...formLabelProps,
								id: labelId,
								htmlFor: fieldId
							}
						}),
						/* @__PURE__ */ jsx(TimePicker, {
							...otherTimePickerProps,
							name: rhfFieldName,
							inputRef: mergeRefs(rhfRef, ref),
							value: rhfValue ?? null,
							disabled: isDisabled,
							onChange: (newValue, context) => {
								muiOnChange?.(newValue, context);
								if (customOnChange) {
									customOnChange({
										rhfOnChange,
										newValue,
										context
									});
									return;
								}
								if (context.validationError !== null) return;
								rhfOnChange(newValue);
								onValueChange?.({
									newValue,
									context
								});
							},
							onAccept: (newValue, context) => {
								muiOnAccept?.(newValue, context);
								rhfOnBlur();
							},
							label: !hideLabel && !isLabelAboveFormField ? /* @__PURE__ */ jsx(FormLabelText, {
								label: fieldLabel,
								required
							}) : void 0,
							slotProps: {
								...otherSlotProps,
								textField: (ownerState) => {
									const resolvedTextFieldSlotProps = typeof textFieldSlotProps === "function" ? textFieldSlotProps(ownerState) : textFieldSlotProps;
									return {
										...resolvedTextFieldSlotProps,
										id: fieldId,
										error: isError,
										onBlur: rhfOnBlur,
										inputProps: {
											...resolvedTextFieldSlotProps?.inputProps,
											"aria-labelledby": !hideLabel && isLabelAboveFormField ? labelId : void 0,
											"aria-label": hideLabel ? accessibleFieldLabel : void 0,
											"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
											"aria-invalid": isError || void 0,
											"aria-required": required || void 0
										}
									};
								}
							}
						}),
						/* @__PURE__ */ jsx(FormHelperText, {
							error: isError,
							errorMessage: fieldErrorMessage,
							hideErrorMessage,
							helperText,
							showHelperTextElement,
							formHelperTextProps: {
								...formHelperTextProps,
								id: isError ? errorId : helperTextId
							}
						})
					]
				});
			}
		})
	});
});
//#endregion
export { RHFTimePicker as default };