formik-mui/dist/Select.js

import { jsxs, jsx } from "react/jsx-runtime";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import InputLabel from "@mui/material/InputLabel";
import MuiSelect from "@mui/material/Select";
import { getIn } from "formik";
function fieldToSelect({
  disabled,
  field: { onBlur: _onBlur, onChange: fieldOnChange, ...field },
  form: { isSubmitting, touched, errors, setFieldTouched, setFieldValue },
  onClose,
  ...props
}) {
  const fieldError = getIn(errors, field.name);
  const showError = getIn(touched, field.name) && !!fieldError;
  return {
    disabled: disabled ?? isSubmitting,
    error: showError,
    formError: showError ? fieldError : void 0,
    onBlur: () => {
    },
    onChange: fieldOnChange ?? (() => {
    }),
    // we must use `onClose` instead of `onChange` to be able to trigger validation when users click outside of the select list.
    onClose: onClose ?? (async (e) => {
      const dataset = e.target.dataset;
      if (dataset && dataset.value) {
        await setFieldValue(field.name, dataset.value, false);
      }
      setFieldTouched(field.name, true, true);
    }),
    ...field,
    ...props
  };
}
function Select({
  formControl,
  inputLabel,
  formHelperText,
  ...selectProps
}) {
  const { error, formError, disabled, ...selectFieldProps } = fieldToSelect(selectProps);
  const { children: formHelperTextChildren, ...formHelperTextProps } = formHelperText || {};
  const shouldDisplayFormHelperText = error || formHelperTextChildren;
  return /* @__PURE__ */ jsxs(FormControl, { disabled, error, ...formControl, children: [
    /* @__PURE__ */ jsx(InputLabel, { id: selectFieldProps.labelId, ...inputLabel, children: selectFieldProps.label }),
    /* @__PURE__ */ jsx(MuiSelect, { ...selectFieldProps }),
    shouldDisplayFormHelperText && /* @__PURE__ */ jsx(FormHelperText, { ...formHelperTextProps, children: error ? formError : formHelperTextChildren })
  ] });
}
Select.displayName = "FormikMaterialUISelect";
export {
  Select,
  fieldToSelect
};
//# sourceMappingURL=Select.js.map