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

A suite of 20+ reusable Material UI components for React Hook Form to minimize your time and effort in creating and styling forms

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, Fragment } from 'react';
import { Controller } from 'react-hook-form';
import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import MuiSelect from '@mui/material/Select';
import { RHFMuiConfigContext } from '../../config/ConfigProvider';
import { FormControl, FormLabel, FormLabelText, FormHelperText } from '../../mui/common';
import { fieldNameToLabel, validateArray, isKeyValueOption, keepLabelAboveFormField, } from '../../utils';
const RHFSelect = ({ fieldName, control, registerOptions, options, labelKey, valueKey, showDefaultOption, defaultOptionText, onValueChange, label, showLabelAboveFormField, formLabelProps, multiple, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, ...otherSelectProps }) => {
    validateArray('RHFSelect', options, labelKey, valueKey);
    const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
    const isLabelAboveFormField = keepLabelAboveFormField(showLabelAboveFormField, allLabelsAboveFields);
    const fieldLabelText = fieldNameToLabel(fieldName);
    const fieldLabel = label ?? fieldLabelText;
    const SelectFormLabel = (_jsx(FormLabelText, { label: fieldLabel, required: required }));
    const isError = Boolean(errorMessage);
    return (_jsxs(FormControl, { error: isError, children: [_jsx(FormLabel, { label: fieldLabel, isVisible: isLabelAboveFormField, required: required, error: isError, formLabelProps: formLabelProps }), _jsx(Fragment, { children: !isLabelAboveFormField && (_jsx(InputLabel, { id: fieldName, children: SelectFormLabel })) }), _jsx(Controller, { name: fieldName, control: control, rules: registerOptions, render: ({ field: { value, onChange, ...otherFieldProps } }) => {
                    return (_jsxs(MuiSelect, { ...otherFieldProps, id: fieldName, labelId: isLabelAboveFormField ? undefined : fieldName, label: isLabelAboveFormField ? undefined : SelectFormLabel, value: value ?? (multiple ? [] : ''), error: isError, multiple: multiple, onChange: (event, child) => {
                            const selectedValue = event.target.value;
                            onChange(selectedValue);
                            if (onValueChange) {
                                onValueChange(selectedValue, event, child);
                            }
                        }, ...otherSelectProps, children: [_jsx(MenuItem, { value: "", disabled: true, sx: { display: showDefaultOption ? 'block' : 'none' }, children: defaultOptionText ?? `Select ${fieldLabelText}` }), options.map(option => {
                                const isObject = isKeyValueOption(option, labelKey, valueKey);
                                const opnValue = isObject
                                    ? `${option[valueKey ?? '']}`
                                    : option;
                                const opnLabel = isObject
                                    ? `${option[labelKey ?? '']}`
                                    : option;
                                return (_jsx(MenuItem, { value: opnValue, children: opnLabel }, opnValue));
                            })] }));
                } }), _jsx(FormHelperText, { error: isError, errorMessage: errorMessage, hideErrorMessage: hideErrorMessage, helperText: helperText, formHelperTextProps: formHelperTextProps })] }));
};
export default RHFSelect;