@vebgen/mui-rff-autocomplete/index.esm.js

An auto-complete component that you can use in a React-Final-Form.

import 'core-js/modules/es.object.assign.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useCallback, useMemo } from 'react';
import { Field } from 'react-final-form';
import 'core-js/modules/es.array.includes.js';
import 'core-js/modules/es.iterator.constructor.js';
import 'core-js/modules/es.iterator.filter.js';
import 'core-js/modules/es.iterator.find.js';
import 'core-js/modules/es.iterator.map.js';
import 'core-js/modules/es.string.includes.js';
import MuiAutocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { showErrorOnChange } from '@vebgen/mui-rff-core';

/******************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */


function __rest(s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
}

typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
    var e = new Error(message);
    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};

/**
 * The inner component which is rendered by RFF field.
 */
function AutocompleteInner(props) {
  const {
      // FieldRenderProps
      input: {
        name,
        value,
        onChange
      },
      meta,
      // Our custom properties.
      label,
      placeholder,
      required,
      getOptionValue,
      textFieldProps,
      showError = showErrorOnChange,
      // MUI Autocomplete properties.
      options,
      multiple,
      onChange: onChangeCallback
    } = props,
    rest = __rest(props, ["input", "meta", "label", "placeholder", "required", "getOptionValue", "textFieldProps", "showError", "options", "multiple", "onChange"]);
  const {
      helperText
    } = rest,
    lessRest = __rest(rest, ["helperText"]);
  const _a = textFieldProps || {},
    {
      variant
    } = _a,
    restTextFieldProps = __rest(_a, ["variant"]);
  const {
    error,
    submitError
  } = meta;
  const isError = showError({
    meta
  });
  // Extract the value to use in RFF from the raw data.
  const getValue = useCallback(values => {
    if (!values) {
      return null;
    }
    if (!getOptionValue) {
      return values;
    }
    return multiple ? values.map(getOptionValue) : getOptionValue(values);
  }, [getOptionValue, multiple]);
  // Compute the value to set in the MUI Autocomplete */
  const currentValue = useMemo(() => {
    let result;
    if (!getOptionValue) {
      // If there is no converter function then simply return the values
      // in the RFF field.
      result = value;
    } else if (value) {
      if (multiple) {
        // We convert each element then we see if the converted
        // value exists in provided values.
        result = options.filter(option => value.includes(getOptionValue(option)));
      } else {
        result = options.find(option => value === getOptionValue(option));
      }
    }
    return result === undefined ? null : result;
  }, [getOptionValue, value, options, multiple]);
  // Callback fired by the MUI Autocomplete on change.
  const onChangeFunc = useCallback((event, changedValue, reason, details) => {
    const gotValue = getValue(changedValue);
    // Inform RFF about the change.
    onChange(gotValue);
    // Inform the user, too, if there's a callback.
    if (onChangeCallback) {
      onChangeCallback(event, changedValue, reason, details);
    }
  }, [onChange, onChangeCallback]);
  return jsx(MuiAutocomplete, Object.assign({
    multiple: multiple,
    onChange: onChangeFunc,
    options: options,
    value: currentValue,
    renderInput: params => {
      var _a, _b, _c, _d, _e;
      return jsx(TextField, Object.assign({
        label: label,
        required: required,
        helperText: isError ? error || submitError : helperText,
        error: isError,
        name: name,
        placeholder: placeholder,
        variant: variant
      }, params, restTextFieldProps, {
        InputProps: Object.assign(Object.assign(Object.assign(Object.assign({}, params.InputProps), restTextFieldProps.InputProps), ((_a = restTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment) && {
          startAdornment: jsxs(Fragment, {
            children: [restTextFieldProps.InputProps.startAdornment, (_b = params.InputProps) === null || _b === void 0 ? void 0 : _b.startAdornment]
          })
        }), ((_c = restTextFieldProps.InputProps) === null || _c === void 0 ? void 0 : _c.endAdornment) && {
          endAdornment: jsxs(Fragment, {
            children: [(_d = params.InputProps) === null || _d === void 0 ? void 0 : _d.endAdornment, (_e = restTextFieldProps.InputProps) === null || _e === void 0 ? void 0 : _e.endAdornment]
          })
        }),
        fullWidth: true
      }));
    }
  }, lessRest));
}

/**
 * A text autocomplete field.
 */
function Autocomplete(props) {
  // Our rendering function
  const renderer = useCallback(fieldRenderProps => {
    const {
        name,
        fieldProps
      } = props,
      rest = __rest(props, ["name", "fieldProps"]);
    return jsx(AutocompleteInner, Object.assign({}, fieldRenderProps, rest));
  }, [props]);
  const {
    name,
    fieldProps
  } = props;
  return jsx(Field, Object.assign({
    name: name,
    render: renderer
  }, fieldProps));
}

export { Autocomplete, AutocompleteInner };