@nish1896/rhf-mui-components/mui/native-select/index.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 { mergeRefs, resolveLabelAboveControl } from "../../utils/control.js";
import { generateLargeOptionsErrMsg } from "../../utils/errors.js";
import FormHelperText from "../../common/FormHelperText.js";
import FormLabel from "../../common/FormLabel.js";
import { getOptionValue, isKeyValueOption, normalizeSelectValue } from "../../utils/object.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 MuiFormControl from "@mui/material/FormControl";
import NativeSelect from "@mui/material/NativeSelect";
//#region src/mui/native-select/index.tsx
const componentName = "RHFNativeSelect";
const RHFNativeSelect = forwardRef(function RHFNativeSelect({ fieldName, control, registerOptions, options, renderOptionLabel, getOptionDisabled, labelKey, valueKey, customOnChange, onValueChange, disabled: muiDisabled, defaultOptionText, label, showLabelAboveFormField, formLabelProps, hideLabel, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, sx, onBlur, autoComplete = "off", placeholder, customIds, ...otherNativeSelectProps }, ref) {
	const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
	if (options.length > 40) console.warn(generateLargeOptionsErrMsg(componentName, options.length));
	const { fieldId, labelId, helperTextId, errorId } = useFieldIds(fieldName, customIds);
	const defaultFieldLabel = fieldNameToLabel(fieldName);
	const fieldLabel = label ?? defaultFieldLabel;
	const accessibleFieldLabel = typeof fieldLabel === "string" ? fieldLabel : defaultFieldLabel;
	const isLabelAboveControl = resolveLabelAboveControl(showLabelAboveFormField, allLabelsAboveFields);
	const defaultOptionLabel = defaultOptionText ?? placeholder ?? "";
	return /* @__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(MuiFormControl, {
				error: isError,
				disabled: isDisabled,
				fullWidth: true,
				children: [
					!hideLabel && isLabelAboveControl && /* @__PURE__ */ jsx(FormLabel, {
						label: fieldLabel,
						isVisible: true,
						required,
						error: isError,
						disabled: isDisabled,
						formLabelProps: {
							...formLabelProps,
							id: labelId,
							htmlFor: fieldId
						}
					}),
					/* @__PURE__ */ jsxs(NativeSelect, {
						...otherNativeSelectProps,
						id: fieldId,
						name: rhfFieldName,
						inputRef: mergeRefs(rhfRef, ref),
						autoComplete,
						"aria-required": required,
						"aria-invalid": isError,
						"aria-labelledby": !hideLabel && !isLabelAboveControl ? labelId : void 0,
						"aria-label": hideLabel ? accessibleFieldLabel : void 0,
						"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
						value: rhfValue ?? "",
						disabled: isDisabled,
						onChange: (event) => {
							const selectedValue = event.target.value;
							const normalizedValue = normalizeSelectValue(selectedValue, options, labelKey, valueKey);
							if (customOnChange) {
								customOnChange({
									rhfOnChange,
									newValue: normalizedValue,
									event
								});
								return;
							}
							rhfOnChange(normalizedValue);
							onValueChange?.({
								newValue: normalizedValue,
								event
							});
						},
						onBlur: (blurEvent) => {
							rhfOnBlur();
							onBlur?.(blurEvent);
						},
						sx: {
							...sx,
							"&.MuiNativeSelect-root": { margin: 0 }
						},
						children: [/* @__PURE__ */ jsx("option", {
							value: "",
							disabled: required,
							children: defaultOptionLabel
						}), options.map((option, index) => {
							const isObject = isKeyValueOption(option, labelKey, valueKey);
							const opnValue = getOptionValue(option, valueKey);
							const opnLabel = isObject ? String(option[labelKey]) : String(option);
							return /* @__PURE__ */ jsx("option", {
								value: opnValue,
								disabled: getOptionDisabled?.(option) ?? false,
								children: renderOptionLabel?.(option) ?? opnLabel
							}, `${opnValue}-${index}`);
						})]
					}),
					/* @__PURE__ */ jsx(FormHelperText, {
						error: isError,
						errorMessage: fieldErrorMessage,
						hideErrorMessage,
						helperText,
						showHelperTextElement,
						formHelperTextProps: {
							...formHelperTextProps,
							id: isError ? errorId : helperTextId
						}
					})
				]
			});
		}
	});
});
//#endregion
export { RHFNativeSelect as default };