payload 0.13.3 → 0.13.4

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [0.13.4](https://github.com/payloadcms/payload/compare/v0.13.3...v0.13.4) (2021-11-30)
+
+
+### Bug Fixes
+
+* passes hasMany through select component ([c77bf3a](https://github.com/payloadcms/payload/commit/c77bf3aa42d76b7a0649b28fee3fe5d4bd06dcf6))
+* prevents uncontrolled text field component ([f0fd859](https://github.com/payloadcms/payload/commit/f0fd859347804fdf0d79bbe566412abaeec6ff6a))
+* select component types ([7e2b259](https://github.com/payloadcms/payload/commit/7e2b2598167dc59b8982f635cb95eacf247abb43))
+* threads props through textarea component ([0b13eda](https://github.com/payloadcms/payload/commit/0b13eda1e55299f7d6dfac2854acc04cff459396))
+
+
+### Features
+
+* abstracts input from text component ([615e369](https://github.com/payloadcms/payload/commit/615e3695f2e62ce5d8a43ccb84192aca57770af8))
+* abstracts select component ([fa67137](https://github.com/payloadcms/payload/commit/fa671378c7282cda1ed6f46340a53622e3bc96dc))
+* abstracts textarea component and improves event typing ([86480b7](https://github.com/payloadcms/payload/commit/86480b7482b2b9413272ab0f9d0a82cd5e2920b8))
+* abstracts upload component ([f234f68](https://github.com/payloadcms/payload/commit/f234f68019f122bd46cb2af2e8f62cf07cd53c1b))
+
 ## [0.13.3](https://github.com/payloadcms/payload/compare/v0.13.2...v0.13.3) (2021-11-29)
 
 

package/dist/admin/components/elements/ReactSelect/types.d.ts

@@ -1,8 +1,9 @@
 import { OptionsType, GroupedOptionsType } from 'react-select';
+export declare type Options = OptionsType<Value> | GroupedOptionsType<Value>;
 export declare type Value = {
     label: string;
-    value: any;
-    options?: Value[];
+    value: string;
+    options?: Options;
 };
 export declare type Props = {
     className?: string;
@@ -10,7 +11,7 @@ export declare type Props = {
     onChange?: (value: any) => void;
     disabled?: boolean;
     showError?: boolean;
-    options: OptionsType<Value> | GroupedOptionsType<Value>;
+    options: Options;
     isMulti?: boolean;
     isDisabled?: boolean;
     onInputChange?: (val: string) => void;

package/dist/admin/components/forms/field-types/Select/Input.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OptionObject, SelectField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+import { Value as ReactSelectValue } from '../../../elements/ReactSelect/types';
+import './index.scss';
+export declare type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> & {
+    showError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    path?: string;
+    required?: boolean;
+    value?: string;
+    description?: Description;
+    onChange?: (value: ReactSelectValue) => void;
+    style?: React.CSSProperties;
+    width?: string;
+    hasMany?: boolean;
+    options?: OptionObject[];
+};
+declare const SelectInput: React.FC<SelectInputProps>;
+export default SelectInput;

package/dist/admin/components/forms/field-types/Select/Input.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+import ReactSelect from '../../../elements/ReactSelect';
+// import { FieldType } from '../../useField/types';
+import './index.scss';
+const SelectInput = (props) => {
+    const { showError, errorMessage, readOnly, path, label, required, value, onChange, description, style, width, options, hasMany, } = props;
+    const classes = [
+        'field-type',
+        'select',
+        showError && 'error',
+        readOnly && 'read-only',
+    ].filter(Boolean).join(' ');
+    const selectedOption = options.find((option) => option.value === value);
+    return (React.createElement("div", { className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement(Error, { showError: showError, message: errorMessage }),
+        React.createElement(Label, { htmlFor: path, label: label, required: required }),
+        React.createElement(ReactSelect, { onChange: onChange, value: selectedOption, showError: showError, isDisabled: readOnly, options: options, isMulti: hasMany }),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default SelectInput;

package/dist/admin/components/forms/field-types/Select/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { Props } from './types';
-import './index.scss';
 declare const _default: React.FC<Props>;
 export default _default;

package/dist/admin/components/forms/field-types/Select/index.js

@@ -1,13 +1,8 @@
 import React, { useCallback, useState } from 'react';
 import withCondition from '../../withCondition';
-import ReactSelect from '../../../elements/ReactSelect';
 import useField from '../../useField';
-import Label from '../../Label';
-import Error from '../../Error';
-import FieldDescription from '../../FieldDescription';
 import { select } from '../../../../../fields/validations';
-import './index.scss';
-const baseClass = 'select';
+import SelectInput from './Input';
 const formatOptions = (options) => options.map((option) => {
     if (typeof option === 'object' && option.value) {
         return option;
@@ -18,7 +13,7 @@ const formatOptions = (options) => options.map((option) => {
     };
 });
 const Select = (props) => {
-    const { path: pathFromProps, name, required, validate = select, label, options: optionsFromProps, hasMany, admin: { readOnly, style, width, description, condition, } = {}, value: valueFromProps, onChange: onChangeFromProps } = props;
+    const { path: pathFromProps, name, required, validate = select, label, options: optionsFromProps, hasMany, admin: { readOnly, style, width, description, condition, } = {}, value: valueFromProps, onChange: onChangeFromProps, } = props;
     const path = pathFromProps || name;
     const [options] = useState(formatOptions(optionsFromProps));
     const memoizedValidate = useCallback((value) => {
@@ -55,14 +50,8 @@ const Select = (props) => {
         readOnly,
         hasMany,
         onChangeFromProps,
-        setValue
+        setValue,
     ]);
-    const classes = [
-        'field-type',
-        baseClass,
-        showError && 'error',
-        readOnly && `${baseClass}--read-only`,
-    ].filter(Boolean).join(' ');
     let valueToRender;
     const value = valueFromProps || valueFromContext || '';
     if (hasMany && Array.isArray(value)) {
@@ -71,13 +60,6 @@ const Select = (props) => {
     else {
         valueToRender = options.find((option) => option.value === value);
     }
-    return (React.createElement("div", { className: classes, style: {
-            ...style,
-            width,
-        } },
-        React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement(ReactSelect, { onChange: onChange, value: valueToRender, showError: showError, isDisabled: readOnly, options: options, isMulti: hasMany }),
-        React.createElement(FieldDescription, { value: value, description: description })));
+    return (React.createElement(SelectInput, { onChange: onChange, value: valueToRender, name: name, options: options, label: label, showError: showError, errorMessage: errorMessage, description: description, style: style, width: width, hasMany: hasMany }));
 };
 export default withCondition(Select);

package/dist/admin/components/forms/field-types/Select/types.d.ts

@@ -1,8 +1,4 @@
 import { SelectField } from '../../../../../fields/config/types';
-export declare type Option = {
-    label: string;
-    value: any;
-};
 export declare type Props = Omit<SelectField, 'type'> & {
     path?: string;
 };

package/dist/admin/components/forms/field-types/Text/Input.d.ts

@@ -0,0 +1,19 @@
+import React, { ChangeEvent } from 'react';
+import { TextField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+import './index.scss';
+export declare type TextInputProps = Omit<TextField, 'type'> & {
+    showError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    path?: string;
+    required?: boolean;
+    value?: string;
+    description?: Description;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    width?: string;
+};
+declare const TextInput: React.FC<TextInputProps>;
+export default TextInput;

package/dist/admin/components/forms/field-types/Text/Input.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+// import { FieldType } from '../../useField/types';
+import './index.scss';
+const TextInput = (props) => {
+    const { showError, errorMessage, placeholder, readOnly, path, label, required, value, onChange, description, style, width, } = props;
+    const classes = [
+        'field-type',
+        'text',
+        showError && 'error',
+        readOnly && 'read-only',
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement(Error, { showError: showError, message: errorMessage }),
+        React.createElement(Label, { htmlFor: path, label: label, required: required }),
+        React.createElement("input", { value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, type: "text", id: path, name: path }),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default TextInput;

package/dist/admin/components/forms/field-types/Text/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { Props } from './types';
-import './index.scss';
 declare const _default: React.FC<Props>;
 export default _default;

package/dist/admin/components/forms/field-types/Text/index.js

@@ -1,47 +1,20 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import useField from '../../useField';
 import withCondition from '../../withCondition';
-import Label from '../../Label';
-import Error from '../../Error';
 import { text } from '../../../../../fields/validations';
-import FieldDescription from '../../FieldDescription';
-import './index.scss';
+import TextInput from './Input';
 const Text = (props) => {
-    const { path: pathFromProps, name, required, validate = text, label, admin: { placeholder, readOnly, style, width, description, condition, } = {}, value: valueFromProps, onChange: onChangeFromProps, } = props;
+    const { path: pathFromProps, name, required, validate = text, label, admin: { placeholder, readOnly, style, width, description, condition, } = {}, } = props;
     const path = pathFromProps || name;
-    const fieldType = useField({
+    const field = useField({
         path,
         validate,
         enableDebouncedValue: true,
         condition,
     });
-    const { value: valueFromContext, showError, setValue, errorMessage, } = fieldType;
-    const onChange = useCallback((e) => {
-        const { value: incomingValue } = e.target;
-        if (typeof onChangeFromProps === 'function') {
-            onChangeFromProps(incomingValue);
-        }
-        else {
-            setValue(e);
-        }
-    }, [
-        onChangeFromProps,
-        setValue,
-    ]);
-    const classes = [
-        'field-type',
-        'text',
-        showError && 'error',
-        readOnly && 'read-only',
-    ].filter(Boolean).join(' ');
-    const value = valueFromProps || valueFromContext || '';
-    return (React.createElement("div", { className: classes, style: {
-            ...style,
-            width,
-        } },
-        React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("input", { value: value, onChange: onChange, disabled: readOnly, placeholder: placeholder, type: "text", id: path, name: path }),
-        React.createElement(FieldDescription, { value: value, description: description })));
+    const { value, showError, setValue, errorMessage, } = field;
+    return (React.createElement(TextInput, { name: name, onChange: (e) => {
+            setValue(e.target.value);
+        }, showError: showError, errorMessage: errorMessage, required: required, label: label, value: value, placeholder: placeholder, readOnly: readOnly, style: style, width: width, description: description }));
 };
 export default withCondition(Text);

package/dist/admin/components/forms/field-types/Textarea/Input.d.ts

@@ -0,0 +1,20 @@
+import React, { ChangeEvent } from 'react';
+import { TextareaField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+import './index.scss';
+export declare type TextAreaInputProps = Omit<TextareaField, 'type'> & {
+    showError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    path?: string;
+    required?: boolean;
+    value?: string;
+    description?: Description;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    width?: string;
+    rows?: number;
+};
+declare const TextareaInput: React.FC<TextAreaInputProps>;
+export default TextareaInput;

package/dist/admin/components/forms/field-types/Textarea/Input.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+import './index.scss';
+const TextareaInput = (props) => {
+    const { path, required, readOnly, style, width, placeholder, description, label, showError, value, errorMessage, onChange, rows, } = props;
+    const classes = [
+        'field-type',
+        'textarea',
+        showError && 'error',
+        readOnly && 'read-only',
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement(Error, { showError: showError, message: errorMessage }),
+        React.createElement(Label, { htmlFor: path, label: label, required: required }),
+        React.createElement("textarea", { value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, id: path, name: path, rows: rows }),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default TextareaInput;

package/dist/admin/components/forms/field-types/Textarea/index.js

@@ -1,11 +1,9 @@
 import React, { useCallback } from 'react';
 import useField from '../../useField';
 import withCondition from '../../withCondition';
-import Label from '../../Label';
-import Error from '../../Error';
-import FieldDescription from '../../FieldDescription';
 import { textarea } from '../../../../../fields/validations';
 import './index.scss';
+import TextareaInput from './Input';
 const Textarea = (props) => {
     const { path: pathFromProps, name, required, validate = textarea, admin: { readOnly, style, width, placeholder, rows, description, condition, } = {}, label, minLength, maxLength, } = props;
     const path = pathFromProps || name;
@@ -19,19 +17,8 @@ const Textarea = (props) => {
         enableDebouncedValue: true,
         condition,
     });
-    const classes = [
-        'field-type',
-        'textarea',
-        showError && 'error',
-        readOnly && 'read-only',
-    ].filter(Boolean).join(' ');
-    return (React.createElement("div", { className: classes, style: {
-            ...style,
-            width,
-        } },
-        React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("textarea", { value: value || '', onChange: setValue, disabled: readOnly, placeholder: placeholder, id: path, name: path, rows: rows }),
-        React.createElement(FieldDescription, { value: value, description: description })));
+    return (React.createElement(TextareaInput, { name: name, onChange: (e) => {
+            setValue(e.target.value);
+        }, showError: showError, errorMessage: errorMessage, required: required, label: label, value: value, placeholder: placeholder, readOnly: readOnly, style: style, width: width, description: description, rows: rows }));
 };
 export default withCondition(Textarea);

package/dist/admin/components/forms/field-types/Upload/Input.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { UploadField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+import { FieldTypes } from '..';
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import './index.scss';
+export declare type UploadInputProps = Omit<UploadField, 'type'> & {
+    showError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    path?: string;
+    required?: boolean;
+    value?: string;
+    description?: Description;
+    onChange?: (e: any) => void;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    width?: string;
+    fieldTypes?: FieldTypes;
+    collection?: SanitizedCollectionConfig;
+    serverURL?: string;
+    api?: string;
+};
+declare const UploadInput: React.FC<UploadInputProps>;
+export default UploadInput;

package/dist/admin/components/forms/field-types/Upload/Input.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { useModal } from '@faceless-ui/modal';
+import Button from '../../../elements/Button';
+import Label from '../../Label';
+import Error from '../../Error';
+import FileDetails from '../../../elements/FileDetails';
+import FieldDescription from '../../FieldDescription';
+import AddModal from './Add';
+import SelectExistingModal from './SelectExisting';
+import './index.scss';
+const baseClass = 'upload';
+const UploadInput = (props) => {
+    const { path, required, readOnly, style, width, description, label, relationTo, fieldTypes, value, onChange, showError, serverURL = 'http://localhost:3000', api = '/api', collection, errorMessage, } = props;
+    const { toggle } = useModal();
+    const addModalSlug = `${path}-add`;
+    const selectExistingModalSlug = `${path}-select-existing`;
+    const [file, setFile] = useState(undefined);
+    const [missingFile, setMissingFile] = useState(false);
+    const classes = [
+        'field-type',
+        baseClass,
+        showError && 'error',
+        readOnly && 'read-only',
+    ].filter(Boolean).join(' ');
+    useEffect(() => {
+        if (typeof value === 'string' && value !== '') {
+            const fetchFile = async () => {
+                const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`);
+                if (response.ok) {
+                    const json = await response.json();
+                    setFile(json);
+                }
+                else {
+                    setMissingFile(true);
+                    setFile(undefined);
+                }
+            };
+            fetchFile();
+        }
+        else {
+            setFile(undefined);
+        }
+    }, [
+        value,
+        relationTo,
+        api,
+        serverURL,
+    ]);
+    return (React.createElement("div", { className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement(Error, { showError: showError, message: errorMessage }),
+        React.createElement(Label, { htmlFor: path, label: label, required: required }),
+        (collection === null || collection === void 0 ? void 0 : collection.upload) && (React.createElement(React.Fragment, null,
+            (file && !missingFile) && (React.createElement(FileDetails, { collection: collection, doc: file, handleRemove: () => {
+                    onChange(null);
+                } })),
+            (!file || missingFile) && (React.createElement("div", { className: `${baseClass}__wrap` },
+                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
+                        toggle(addModalSlug);
+                    } },
+                    "Upload new",
+                    ' ',
+                    collection.labels.singular),
+                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
+                        toggle(selectExistingModalSlug);
+                    } }, "Choose from existing"))),
+            React.createElement(AddModal, { ...{
+                    collection,
+                    slug: addModalSlug,
+                    fieldTypes,
+                    setValue: onChange,
+                } }),
+            React.createElement(SelectExistingModal, { ...{
+                    collection,
+                    slug: selectExistingModalSlug,
+                    setValue: onChange,
+                    addModalSlug,
+                } }),
+            React.createElement(FieldDescription, { value: file, description: description })))));
+};
+export default UploadInput;

package/dist/admin/components/forms/field-types/Upload/index.js

@@ -1,28 +1,15 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useModal } from '@faceless-ui/modal';
+import React, { useCallback } from 'react';
 import { useConfig } from '@payloadcms/config-provider';
 import useField from '../../useField';
 import withCondition from '../../withCondition';
-import Button from '../../../elements/Button';
-import Label from '../../Label';
-import Error from '../../Error';
 import { upload } from '../../../../../fields/validations';
-import FileDetails from '../../../elements/FileDetails';
-import AddModal from './Add';
-import SelectExistingModal from './SelectExisting';
+import UploadInput from './Input';
 import './index.scss';
-import FieldDescription from '../../FieldDescription';
-const baseClass = 'upload';
 const Upload = (props) => {
-    const { toggle } = useModal();
-    const [internalValue, setInternalValue] = useState(undefined);
-    const [missingFile, setMissingFile] = useState(false);
-    const { collections, serverURL, routes: { api } } = useConfig();
-    const { path: pathFromProps, name, required, admin: { readOnly, style, width, description, condition, } = {}, label, validate = upload, relationTo, fieldTypes, value: valueFromProps, onChange: onChangeFromProps, } = props;
+    const { collections, serverURL, routes: { api, }, } = useConfig();
+    const { path: pathFromProps, name, required, admin: { readOnly, style, width, description, condition, } = {}, label, validate = upload, relationTo, fieldTypes, } = props;
     const collection = collections.find((coll) => coll.slug === relationTo);
     const path = pathFromProps || name;
-    const addModalSlug = `${path}-add`;
-    const selectExistingModalSlug = `${path}-select-existing`;
     const memoizedValidate = useCallback((value) => {
         const validationResult = validate(value, { required });
         return validationResult;
@@ -32,84 +19,16 @@ const Upload = (props) => {
         validate: memoizedValidate,
         condition,
     });
-    const { value: valueFromContext, showError, setValue, errorMessage, } = fieldType;
-    const value = valueFromProps || valueFromContext || '';
-    const classes = [
-        'field-type',
-        baseClass,
-        showError && 'error',
-        readOnly && 'read-only',
-    ].filter(Boolean).join(' ');
-    useEffect(() => {
-        if (typeof value === 'string') {
-            const fetchFile = async () => {
-                const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`);
-                if (response.ok) {
-                    const json = await response.json();
-                    setInternalValue(json);
-                }
-                else {
-                    setInternalValue(undefined);
-                    setMissingFile(true);
-                }
-            };
-            fetchFile();
-        }
+    const { value, showError, setValue, errorMessage, } = fieldType;
+    const onChange = useCallback((incomingValue) => {
+        const incomingID = (incomingValue === null || incomingValue === void 0 ? void 0 : incomingValue.id) || incomingValue;
+        setValue(incomingID);
     }, [
-        value,
-        relationTo,
-        api,
-        serverURL,
-        setValue
+        setValue,
     ]);
-    useEffect(() => {
-        const { id: incomingID } = internalValue || {};
-        if (typeof onChangeFromProps === 'function') {
-            onChangeFromProps(incomingID);
-        }
-        else {
-            setValue(incomingID);
-        }
-    }, [internalValue]);
-    return (React.createElement("div", { className: classes, style: {
-            ...style,
-            width,
-        } },
-        React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        (collection === null || collection === void 0 ? void 0 : collection.upload) && (React.createElement(React.Fragment, null,
-            (internalValue && !missingFile) && (React.createElement(FileDetails, { collection: collection, doc: internalValue, handleRemove: () => {
-                    setInternalValue(undefined);
-                    setValue(null);
-                } })),
-            (!value || missingFile) && (React.createElement("div", { className: `${baseClass}__wrap` },
-                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
-                        toggle(addModalSlug);
-                    } },
-                    "Upload new",
-                    ' ',
-                    collection.labels.singular),
-                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
-                        toggle(selectExistingModalSlug);
-                    } }, "Choose from existing"))),
-            React.createElement(AddModal, { ...{
-                    collection,
-                    slug: addModalSlug,
-                    fieldTypes,
-                    setValue: (val) => {
-                        setMissingFile(false);
-                        setInternalValue(val);
-                    },
-                } }),
-            React.createElement(SelectExistingModal, { ...{
-                    collection,
-                    slug: selectExistingModalSlug,
-                    setValue: (val) => {
-                        setMissingFile(false);
-                        setInternalValue(val);
-                    },
-                    addModalSlug,
-                } }),
-            React.createElement(FieldDescription, { value: value, description: description })))));
+    if (collection.upload) {
+        return (React.createElement(UploadInput, { value: value, onChange: onChange, description: description, label: label, required: required, showError: showError, serverURL: serverURL, api: api, errorMessage: errorMessage, readOnly: readOnly, style: style, width: width, collection: collection, fieldTypes: fieldTypes, name: name, relationTo: relationTo }));
+    }
+    return null;
 };
 export default withCondition(Upload);

package/dist/admin/components/forms/useField/index.js

@@ -51,7 +51,7 @@ const useField = (options) => {
         ignoreWhileFlattening,
         initialValue,
         stringify,
-        condition
+        condition,
     ]);
     // Method to return from `useField`, used to
     // update internal field values from field component(s)
@@ -67,7 +67,7 @@ const useField = (options) => {
     }, [
         setModified,
         modified,
-        ignoreWhileFlattening
+        ignoreWhileFlattening,
     ]);
     useEffect(() => {
         setInternalValue(initialValue);
@@ -81,9 +81,10 @@ const useField = (options) => {
             sendField(valueToSend);
         }
     }, [
+        path,
         valueToSend,
         sendField,
-        field
+        field,
     ]);
     return {
         ...options,

package/dist/fields/config/types.d.ts

@@ -86,8 +86,6 @@ export declare type TextField = FieldBase & {
         placeholder?: string;
         autoComplete?: string;
     };
-    value?: string;
-    onChange?: (value: string) => void;
 };
 export declare type EmailField = FieldBase & {
     type: 'email';
@@ -150,8 +148,6 @@ export declare type UploadField = FieldBase & {
     type: 'upload';
     relationTo: string;
     maxDepth?: number;
-    value?: string;
-    onChange?: (value: string) => void;
 };
 declare type CodeAdmin = Admin & {
     language?: string;

package/dist/fields/config/types.js

@@ -41,4 +41,4 @@ function fieldAffectsData(field) {
     return 'name' in field && !fieldIsPresentationalOnly(field);
 }
 exports.fieldAffectsData = fieldAffectsData;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZmllbGRzL2NvbmZpZy90eXBlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUEwVkEsU0FBZ0IsaUJBQWlCLENBQUMsS0FBWTtJQUM1QyxPQUFPLENBQUMsS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxLQUFLLENBQUMsQ0FBQztBQUNwRixDQUFDO0FBRkQsOENBRUM7QUFFRCxTQUFnQixnQkFBZ0IsQ0FBQyxLQUFZO0lBQzNDLE9BQU8sS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLENBQUM7QUFDaEMsQ0FBQztBQUZELDRDQUVDO0FBRUQsU0FBZ0IsZ0JBQWdCLENBQUMsS0FBWTtJQUMzQyxPQUFPLEtBQUssQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDO0FBQ2pDLENBQUM7QUFGRCw0Q0FFQztBQUVELFNBQWdCLGNBQWMsQ0FBQyxNQUFjO0lBQzNDLE9BQU8sT0FBTyxNQUFNLEtBQUssUUFBUSxDQUFDO0FBQ3BDLENBQUM7QUFGRCx3Q0FFQztBQUVELFNBQWdCLGlCQUFpQixDQUFDLE9BQWlCO0lBQ2pELE9BQU8sS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxPQUFPLENBQUEsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxDQUFBLEtBQUssUUFBUSxDQUFDO0FBQ3BFLENBQUM7QUFGRCw4Q0FFQztBQUVELFNBQWdCLGFBQWEsQ0FBQyxNQUFjO0lBQzFDLE9BQU8sT0FBTyxNQUFNLEtBQUssUUFBUSxDQUFDO0FBQ3BDLENBQUM7QUFGRCxzQ0FFQztBQUVELFNBQWdCLGlCQUFpQixDQUFDLEtBQVk7SUFDNUMsT0FBTyxLQUFLLENBQUMsSUFBSSxLQUFLLFFBQVEsSUFBSSxLQUFLLENBQUMsSUFBSSxLQUFLLGNBQWMsQ0FBQztBQUNsRSxDQUFDO0FBRkQsOENBRUM7QUFFRCxTQUFnQixnQkFBZ0IsQ0FBQyxLQUFZO0lBQzNDLE9BQU8sQ0FBQyxLQUFLLENBQUMsSUFBSSxLQUFLLFFBQVEsSUFBSSxLQUFLLENBQUMsSUFBSSxLQUFLLGNBQWMsQ0FBQyxJQUFJLE9BQU8sS0FBSyxDQUFDLFFBQVEsS0FBSyxRQUFRLENBQUM7QUFDMUcsQ0FBQztBQUZELDRDQUVDO0FBRUQsU0FBZ0IseUJBQXlCLENBQUMsS0FBWTtJQUNwRCxPQUFPLEtBQUssQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDO0FBQzdCLENBQUM7QUFGRCw4REFFQztBQUVELFNBQWdCLGdCQUFnQixDQUFDLEtBQVk7SUFDM0MsT0FBTyxNQUFNLElBQUksS0FBSyxJQUFJLENBQUMseUJBQXlCLENBQUMsS0FBSyxDQUFDLENBQUM7QUFDOUQsQ0FBQztBQUZELDRDQUVDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZmllbGRzL2NvbmZpZy90eXBlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFzVkEsU0FBZ0IsaUJBQWlCLENBQUMsS0FBWTtJQUM1QyxPQUFPLENBQUMsS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxLQUFLLENBQUMsQ0FBQztBQUNwRixDQUFDO0FBRkQsOENBRUM7QUFFRCxTQUFnQixnQkFBZ0IsQ0FBQyxLQUFZO0lBQzNDLE9BQU8sS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLENBQUM7QUFDaEMsQ0FBQztBQUZELDRDQUVDO0FBRUQsU0FBZ0IsZ0JBQWdCLENBQUMsS0FBWTtJQUMzQyxPQUFPLEtBQUssQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDO0FBQ2pDLENBQUM7QUFGRCw0Q0FFQztBQUVELFNBQWdCLGNBQWMsQ0FBQyxNQUFjO0lBQzNDLE9BQU8sT0FBTyxNQUFNLEtBQUssUUFBUSxDQUFDO0FBQ3BDLENBQUM7QUFGRCx3Q0FFQztBQUVELFNBQWdCLGlCQUFpQixDQUFDLE9BQWlCO0lBQ2pELE9BQU8sS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxPQUFPLENBQUEsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxDQUFBLEtBQUssUUFBUSxDQUFDO0FBQ3BFLENBQUM7QUFGRCw4Q0FFQztBQUVELFNBQWdCLGFBQWEsQ0FBQyxNQUFjO0lBQzFDLE9BQU8sT0FBTyxNQUFNLEtBQUssUUFBUSxDQUFDO0FBQ3BDLENBQUM7QUFGRCxzQ0FFQztBQUVELFNBQWdCLGlCQUFpQixDQUFDLEtBQVk7SUFDNUMsT0FBTyxLQUFLLENBQUMsSUFBSSxLQUFLLFFBQVEsSUFBSSxLQUFLLENBQUMsSUFBSSxLQUFLLGNBQWMsQ0FBQztBQUNsRSxDQUFDO0FBRkQsOENBRUM7QUFFRCxTQUFnQixnQkFBZ0IsQ0FBQyxLQUFZO0lBQzNDLE9BQU8sQ0FBQyxLQUFLLENBQUMsSUFBSSxLQUFLLFFBQVEsSUFBSSxLQUFLLENBQUMsSUFBSSxLQUFLLGNBQWMsQ0FBQyxJQUFJLE9BQU8sS0FBSyxDQUFDLFFBQVEsS0FBSyxRQUFRLENBQUM7QUFDMUcsQ0FBQztBQUZELDRDQUVDO0FBRUQsU0FBZ0IseUJBQXlCLENBQUMsS0FBWTtJQUNwRCxPQUFPLEtBQUssQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDO0FBQzdCLENBQUM7QUFGRCw4REFFQztBQUVELFNBQWdCLGdCQUFnQixDQUFDLEtBQVk7SUFDM0MsT0FBTyxNQUFNLElBQUksS0FBSyxJQUFJLENBQUMseUJBQXlCLENBQUMsS0FBSyxDQUFDLENBQUM7QUFDOUQsQ0FBQztBQUZELDRDQUVDIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "SEE LICENSE IN license.md",
   "author": {