@nish1896/rhf-mui-components/mui/native-select/index.js

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

"use client";
import { validateArray } from "../../utils/array.js";
import { getOptionValue, isKeyValueOption, normalizeSelectValue } from "../../utils/object.js";
import { fieldNameToLabel } from "../../utils/text-transform.js";
import { useFieldIds } from "../../utils/useFieldIds.js";
import FormHelperText from "../../common/FormHelperText.js";
import FormLabel from "../../common/FormLabel.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
import FormControl from "@mui/material/FormControl";
import NativeSelect from "@mui/material/NativeSelect";
//#region src/mui/native-select/index.tsx
const RHFNativeSelect = ({ fieldName, control, registerOptions, options, labelKey, valueKey, onValueChange, disabled: muiDisabled, defaultOptionText, showLabelAboveFormField, formLabelProps, label, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, sx, onBlur, autoComplete = "off", placeholder, ...otherNativeSelectProps }) => {
	validateArray("RHFNativeSelect", options, labelKey, valueKey);
	const { fieldId, labelId, helperTextId, errorId } = useFieldIds(fieldName);
	const fieldLabel = label ?? fieldNameToLabel(fieldName);
	const isError = !!errorMessage;
	const showHelperTextElement = !!helperText || isError && !hideErrorMessage;
	const blankOptionText = defaultOptionText ?? placeholder ?? "";
	return /* @__PURE__ */ jsxs(FormControl, {
		fullWidth: true,
		error: isError,
		children: [
			/* @__PURE__ */ jsx(FormLabel, {
				label: fieldLabel,
				isVisible: showLabelAboveFormField ?? true,
				required,
				error: isError,
				formLabelProps: {
					id: labelId,
					htmlFor: fieldId,
					...formLabelProps
				}
			}),
			/* @__PURE__ */ jsx(Controller, {
				name: fieldName,
				control,
				rules: registerOptions,
				render: ({ field: { name: rhfFieldName, value: rhfValue, onChange: rhfOnChange, onBlur: rhfOnBlur, ref: rhfRef } }) => /* @__PURE__ */ jsxs(NativeSelect, {
					id: fieldId,
					name: rhfFieldName,
					autoComplete,
					"aria-required": required,
					"aria-invalid": isError,
					"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
					value: rhfValue ?? "",
					inputRef: rhfRef,
					disabled: muiDisabled,
					onChange: (event) => {
						const selectedValue = event.target.value;
						const normalizedValue = normalizeSelectValue(selectedValue, options, labelKey, valueKey);
						rhfOnChange(normalizedValue);
						onValueChange?.(normalizedValue, event);
					},
					onBlur: (blurEvent) => {
						rhfOnBlur();
						onBlur?.(blurEvent);
					},
					sx: {
						...sx,
						"&.MuiNativeSelect-root": { margin: 0 }
					},
					...otherNativeSelectProps,
					children: [/* @__PURE__ */ jsx("option", {
						value: "",
						disabled: required,
						children: blankOptionText
					}), options.map((option) => {
						const isObject = isKeyValueOption(option, labelKey, valueKey);
						const opnValue = getOptionValue(option, valueKey);
						return /* @__PURE__ */ jsx("option", {
							value: opnValue,
							children: isObject ? String(option[labelKey]) : String(option)
						}, opnValue);
					})]
				})
			}),
			/* @__PURE__ */ jsx(FormHelperText, {
				error: isError,
				errorMessage,
				hideErrorMessage,
				helperText,
				showHelperTextElement,
				formHelperTextProps: {
					id: isError ? errorId : helperTextId,
					...formHelperTextProps
				}
			})
		]
	});
};
//#endregion
export { RHFNativeSelect as default };