mui-dynamic-field/dist/esm/components/AutocompleteSelect.js

A dynamic and customizable input field component for React, built with Material UI & TypeScript.

import { Autocomplete, TextField, MenuItem } from '@mui/material';
import { extractValue } from '../utils.js';
import { jsx } from 'react/jsx-runtime';

const AutocompleteSelect = props => {
  const {
    _key,
    error,
    errorText,
    value,
    onChange,
    disabled,
    size,
    placeholder,
    extraProps = {},
    extraData = []
  } = props;
  const {
    textFieldProps = {},
    ...restProps
  } = extraProps || {};
  const {
    slotProps = {},
    ...restTextFieldProps
  } = textFieldProps;
  return /*#__PURE__*/jsx(Autocomplete, {
    size: size,
    openOnFocus: true,
    disablePortal: false,
    disabled: disabled,
    isOptionEqualToValue: (option, value) => extractValue(option, "value") === value,
    getOptionLabel: option => {
      if (!option?.toString()) return "";
      const selected = extraData?.find(item => {
        return extractValue(option, "value") === extractValue(item, "value");
      });
      if (!selected) {
        return "";
      }
      return String(extractValue(selected, "label"));
    },
    options: extraData,
    value: extractValue(value, "value"),
    onChange: (_, value) => {
      if (onChange) onChange({
        value: extractValue(value, "value"),
        _key,
        textValue: extractValue(value, "label")
      });
    },
    renderOption: ({
      key,
      ...restProps
    }, option) => {
      return /*#__PURE__*/jsx(MenuItem, {
        ...restProps,
        children: String(extractValue(option, "label"))
      }, key);
    },
    renderInput: params => {
      return /*#__PURE__*/jsx(TextField, {
        ...params,
        label: placeholder,
        helperText: errorText,
        error: error,
        sx: {
          "& .MuiAutocomplete-inputRoot": {
            ...(slotProps?.input?.style || {})
          }
        },
        ...restTextFieldProps
      });
    },
    ...restProps
  });
};

export { AutocompleteSelect as default };
//# sourceMappingURL=AutocompleteSelect.js.map