payload 1.1.7 → 1.1.9

package/dist/admin/components/forms/field-types/Relationship/AddNew/Modal/index.scss

@@ -0,0 +1,117 @@
+@import '../../../../../../scss/styles.scss';
+
+.relationship-add-new-modal {
+  display: flex;
+  overflow: hidden;
+  position: fixed;
+  height: 100vh;
+
+  &__blur-bg {
+    @include blur-bg();
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    transition: all 300ms ease-out;
+  }
+
+  .collection-edit {
+    @include blur-bg();
+    transform: translateX(#{base(4)});
+    opacity: 0;
+    transition: all 300ms ease-out;
+    position: relative;
+    z-index: 2;
+  }
+
+  .collection-edit__form {
+    overflow: auto;
+    position: relative;
+    z-index: 1;
+  }
+
+  .collection-edit__document-actions {
+
+    &:before,
+    &:after {
+      content: none;
+    }
+  }
+
+  &--animated {
+
+    .collection-edit,
+    .relationship-add-new-modal__blur-bg,
+    .relationship-add-new-modal__close {
+      opacity: 1;
+    }
+
+    .collection-edit {
+      transform: translateX(0);
+    }
+  }
+
+  .collection-edit__document-actions {
+    margin-top: base(2.75);
+  }
+
+  &__close {
+    @extend %btn-reset;
+    position: relative;
+    z-index: 2;
+    flex-shrink: 0;
+    text-indent: -9999px;
+    background: rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    opacity: 0;
+    transition: all 300ms ease-in-out;
+    transition-delay: 100ms;
+
+    &:active,
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: base(2.5);
+  }
+
+  &__header-close {
+    svg {
+      width: base(2.5);
+      height: base(2.5);
+      position: relative;
+      top: base(-.5);
+      right: base(-.75);
+
+      .stroke {
+        stroke-width: .5px;
+      }
+    }
+  }
+
+  @include mid-break {
+    &__header-close {
+      svg {
+        top: base(-.75);
+      }
+    }
+
+    &__close {
+      width: base(1);
+    }
+  }
+}
+
+html[data-theme=dark] {
+  .relationship-add-new-modal__close {
+    background: rgba(0, 0, 0, 0.2);
+  }
+}

package/dist/admin/components/forms/field-types/Relationship/AddNew/Modal/types.d.ts

@@ -0,0 +1,6 @@
+import { SanitizedCollectionConfig } from '../../../../../../../collections/config/types';
+export declare type Props = {
+    modalSlug: string;
+    modalCollection: SanitizedCollectionConfig;
+    onSave: (json: Record<string, unknown>) => void;
+};

package/dist/admin/components/forms/field-types/Relationship/AddNew/Modal/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,79 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useModal } from '@faceless-ui/modal';
+import Button from '../../../../elements/Button';
+import Popup from '../../../../elements/Popup';
+import { useRelatedCollections } from './useRelatedCollections';
+import { useAuth } from '../../../../utilities/Auth';
+import { AddNewRelationModal } from './Modal';
+import { useEditDepth } from '../../../../utilities/EditDepth';
+import Plus from '../../../../icons/Plus';
+import './index.scss';
+const baseClass = 'relationship-add-new';
+export const AddNewRelation = ({ path, hasMany, relationTo, value, setValue, dispatchOptions }) => {
+    const relatedCollections = useRelatedCollections(relationTo);
+    const { toggleModal, modalState } = useModal();
+    const { permissions } = useAuth();
+    const [hasPermission, setHasPermission] = useState(false);
+    const [modalCollection, setModalCollection] = useState();
+    const [popupOpen, setPopupOpen] = useState(false);
+    const editDepth = useEditDepth();
+    const modalSlug = `${path}-add-modal-depth-${editDepth}`;
+    const openModal = useCallback(async (collection) => {
+        setModalCollection(collection);
+        toggleModal(modalSlug);
+    }, [toggleModal, modalSlug]);
+    const onSave = useCallback((json) => {
+        const newValue = Array.isArray(relationTo) ? {
+            relationTo: modalCollection.slug,
+            value: json.doc.id,
+        } : json.doc.id;
+        dispatchOptions({
+            type: 'ADD',
+            hasMultipleRelations: Array.isArray(relationTo),
+            collection: modalCollection,
+            docs: [
+                json.doc,
+            ],
+            sort: true,
+        });
+        if (hasMany) {
+            setValue([...(Array.isArray(value) ? value : []), newValue]);
+        }
+        else {
+            setValue(newValue);
+        }
+        setModalCollection(undefined);
+        toggleModal(modalSlug);
+    }, [relationTo, modalCollection, hasMany, toggleModal, modalSlug, setValue, value, dispatchOptions]);
+    const onPopopToggle = useCallback((state) => {
+        setPopupOpen(state);
+    }, []);
+    useEffect(() => {
+        if (permissions) {
+            if (relatedCollections.length === 1) {
+                setHasPermission(permissions.collections[relatedCollections[0].slug].create.permission);
+            }
+            else {
+                setHasPermission(relatedCollections.some((collection) => permissions.collections[collection.slug].create.permission));
+            }
+        }
+    }, [permissions, relatedCollections]);
+    useEffect(() => {
+        var _a;
+        if (!((_a = modalState[modalSlug]) === null || _a === void 0 ? void 0 : _a.isOpen)) {
+            setModalCollection(undefined);
+        }
+    }, [modalState, modalSlug]);
+    return hasPermission ? (React.createElement("div", { className: baseClass, id: `${path}-add-new` },
+        relatedCollections.length === 1 && (React.createElement(Button, { className: `${baseClass}__add-button`, onClick: () => openModal(relatedCollections[0]), buttonStyle: "none", tooltip: `Add new ${relatedCollections[0].labels.singular}` },
+            React.createElement(Plus, null))),
+        relatedCollections.length > 1 && (React.createElement(Popup, { buttonType: "custom", horizontalAlign: "center", onToggleOpen: onPopopToggle, button: (React.createElement(Button, { className: `${baseClass}__add-button`, buttonStyle: "none", tooltip: popupOpen ? undefined : 'Add new' },
+                React.createElement(Plus, null))), render: ({ close: closePopup }) => (React.createElement("ul", { className: `${baseClass}__relations` }, relatedCollections.map((relatedCollection) => {
+                if (permissions.collections[relatedCollection.slug].create.permission) {
+                    return (React.createElement("li", { key: relatedCollection.slug },
+                        React.createElement("button", { className: `${baseClass}__relation-button ${baseClass}__relation-button--${relatedCollection.slug}`, type: "button", onClick: () => { closePopup(); openModal(relatedCollection); } }, relatedCollection.labels.singular)));
+                }
+                return null;
+            }))) })),
+        modalCollection && (React.createElement(AddNewRelationModal, { ...{ onSave, modalSlug, modalCollection } })))) : null;
+};

package/dist/admin/components/forms/field-types/Relationship/AddNew/index.scss

@@ -0,0 +1,60 @@
+@import '../../../../../scss/styles.scss';
+
+.relationship-add-new {
+  display: flex;
+  align-items: stretch;
+
+  .popup__wrapper {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+  }
+
+  &__add-button {
+    @include formInput;
+    height: 100%;
+    margin-left: -1px;
+    display: flex;
+    padding: 0;
+
+    .btn__content,
+    .btn__label {
+      display: flex;
+    }
+
+    .btn__content,
+    .btn__label {
+      height: 100%;
+    }
+
+    .btn__label {
+      padding: 0 base(.5);
+      align-items: center;
+    }
+  }
+
+
+  &__relations {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li:not(:last-child) {
+      margin-bottom: base(.375);
+    }
+  }
+
+  &__relation-button {
+    @extend %btn-reset;
+    cursor: pointer;
+    @extend %btn-reset;
+    display: block;
+    padding: base(.125) 0;
+    text-align: center;
+    width: 100%;
+
+    &:hover {
+      opacity: .7;
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Action } from '../types';
+export declare type Props = {
+    hasMany: boolean;
+    relationTo: string | string[];
+    path: string;
+    value: unknown;
+    setValue: (value: unknown) => void;
+    dispatchOptions: React.Dispatch<Action>;
+};

package/dist/admin/components/forms/field-types/Relationship/AddNew/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/forms/field-types/Relationship/AddNew/useRelatedCollections.d.ts

@@ -0,0 +1,2 @@
+import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
+export declare const useRelatedCollections: (relationTo: string | string[]) => SanitizedCollectionConfig[];

package/dist/admin/components/forms/field-types/Relationship/AddNew/useRelatedCollections.js

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+import { useConfig } from '../../../../utilities/Config';
+export const useRelatedCollections = (relationTo) => {
+    const config = useConfig();
+    const [relatedCollections] = useState(() => {
+        const relations = typeof relationTo === 'string' ? [relationTo] : relationTo;
+        return relations.map((relation) => config.collections.find((collection) => collection.slug === relation));
+    });
+    return relatedCollections;
+};

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

@@ -10,13 +10,16 @@ import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
 import { relationship } from '../../../../../fields/validations';
-import { useFormProcessing, useWatchForm } from '../../Form/context';
+import { useFormProcessing, useAllFormFields } from '../../Form/context';
 import optionsReducer from './optionsReducer';
 import { createRelationMap } from './createRelationMap';
 import { useDebouncedCallback } from '../../../../hooks/useDebouncedCallback';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import { getFilterOptionsQuery } from '../getFilterOptionsQuery';
 import wordBoundariesRegex from '../../../../../utilities/wordBoundariesRegex';
+import reduceFieldsToValues from '../../Form/reduceFieldsToValues';
+import getSiblingData from '../../Form/getSiblingData';
+import { AddNewRelation } from './AddNew';
 import './index.scss';
 const maxResultsPerRequest = 10;
 const baseClass = 'relationship';
@@ -25,7 +28,7 @@ const Relationship = (props) => {
     const { serverURL, routes: { api, }, collections, } = useConfig();
     const { id } = useDocumentInfo();
     const { user, permissions } = useAuth();
-    const { getData, getSiblingData } = useWatchForm();
+    const [fields] = useAllFormFields();
     const formProcessing = useFormProcessing();
     const hasMultipleRelations = Array.isArray(relationTo);
     const [options, dispatchOptions] = useReducer(optionsReducer, required || hasMany ? [] : [{ value: null, label: 'None' }]);
@@ -37,6 +40,7 @@ const Relationship = (props) => {
     const [search, setSearch] = useState('');
     const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
     const firstRun = useRef(true);
+    const fieldsRef = useRef(fields);
     const memoizedValidate = useCallback((value, validationOptions) => {
         return validate(value, { ...validationOptions, required });
     }, [validate, required]);
@@ -45,6 +49,12 @@ const Relationship = (props) => {
         validate: memoizedValidate,
         condition,
     });
+    const getFormData = useCallback(() => {
+        return [
+            reduceFieldsToValues(fieldsRef.current, true),
+            getSiblingData(fieldsRef.current, path),
+        ];
+    }, [fieldsRef, path]);
     const getResults = useCallback(async ({ lastFullyLoadedRelation: lastFullyLoadedRelationArg, lastLoadedPage: lastLoadedPageArg, search: searchArg, value: valueArg, sort, }) => {
         if (!permissions) {
             return;
@@ -92,7 +102,7 @@ const Relationship = (props) => {
                         const data = await response.json();
                         if (data.docs.length > 0) {
                             resultsFetched += data.docs.length;
-                            dispatchOptions({ type: 'ADD', data, relation, hasMultipleRelations, collection, sort });
+                            dispatchOptions({ type: 'ADD', docs: data.docs, hasMultipleRelations, collection, sort });
                             setLastLoadedPage(data.page);
                             if (!data.nextPage) {
                                 setLastFullyLoadedRelation(relations.indexOf(relation));
@@ -107,7 +117,7 @@ const Relationship = (props) => {
                     else if (response.status === 403) {
                         setLastFullyLoadedRelation(relations.indexOf(relation));
                         lastLoadedPageToUse = 1;
-                        dispatchOptions({ type: 'ADD', data: { docs: [] }, relation, hasMultipleRelations, collection, sort, ids: relationMap[relation] });
+                        dispatchOptions({ type: 'ADD', docs: [], hasMultipleRelations, collection, sort, ids: relationMap[relation] });
                     }
                     else {
                         setErrorLoading('An error has occurred.');
@@ -175,11 +185,11 @@ const Relationship = (props) => {
         getResults({ search: searchArg, value: valueArg, sort: true });
         setSearch(searchArg);
     }, [getResults]);
-    const handleInputChange = (searchArg, valueArg) => {
+    const handleInputChange = useCallback((searchArg, valueArg) => {
         if (search !== searchArg) {
             updateSearch(searchArg, valueArg);
         }
-    };
+    }, [search, updateSearch]);
     // ///////////////////////////
     // Fetch value options when initialValue changes
     // ///////////////////////////
@@ -207,10 +217,10 @@ const Relationship = (props) => {
                         const collection = collections.find((coll) => coll.slug === relation);
                         if (response.ok) {
                             const data = await response.json();
-                            dispatchOptions({ type: 'ADD', data, relation, hasMultipleRelations, collection, sort: true, ids });
+                            dispatchOptions({ type: 'ADD', docs: data.docs, hasMultipleRelations, collection, sort: true, ids });
                         }
                         else if (response.status === 403) {
-                            dispatchOptions({ type: 'ADD', data: { docs: [] }, relation, hasMultipleRelations, collection, sort: true, ids });
+                            dispatchOptions({ type: 'ADD', docs: [], hasMultipleRelations, collection, sort: true, ids });
                         }
                     }
                 }
@@ -219,20 +229,20 @@ const Relationship = (props) => {
         }
     }, [hasMany, hasMultipleRelations, relationTo, initialValue, hasLoadedValueOptions, errorLoading, collections, api, serverURL]);
     useEffect(() => {
-        if (!filterOptions) {
+        if (!filterOptions)
             return;
-        }
+        const [data, siblingData] = getFormData();
         const newOptionFilters = getFilterOptionsQuery(filterOptions, {
             id,
-            data: getData(),
+            data,
             relationTo,
-            siblingData: getSiblingData(path),
+            siblingData,
             user,
         });
         if (!equal(newOptionFilters, optionFilters)) {
             setOptionFilters(newOptionFilters);
         }
-    }, [relationTo, filterOptions, optionFilters, id, getData, getSiblingData, path, user]);
+    }, [relationTo, filterOptions, optionFilters, id, getFormData, path, user]);
     useEffect(() => {
         if (optionFilters || !filterOptions) {
             setHasLoadedValueOptions(false);
@@ -279,39 +289,41 @@ const Relationship = (props) => {
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        !errorLoading && (React.createElement(ReactSelect, { isDisabled: readOnly, onInputChange: (newSearch) => handleInputChange(newSearch, value), onChange: !readOnly ? (selected) => {
-                if (hasMany) {
-                    setValue(selected ? selected.map((option) => {
-                        if (hasMultipleRelations) {
-                            return {
-                                relationTo: option.relationTo,
-                                value: option.value,
-                            };
-                        }
-                        return option.value;
-                    }) : null);
-                }
-                else if (hasMultipleRelations) {
-                    setValue({
-                        relationTo: selected.relationTo,
-                        value: selected.value,
+        !errorLoading && (React.createElement("div", { className: `${baseClass}__wrap` },
+            React.createElement(ReactSelect, { isDisabled: readOnly, onInputChange: (newSearch) => handleInputChange(newSearch, value), onChange: !readOnly ? (selected) => {
+                    if (hasMany) {
+                        setValue(selected ? selected.map((option) => {
+                            if (hasMultipleRelations) {
+                                return {
+                                    relationTo: option.relationTo,
+                                    value: option.value,
+                                };
+                            }
+                            return option.value;
+                        }) : null);
+                    }
+                    else if (hasMultipleRelations) {
+                        setValue({
+                            relationTo: selected.relationTo,
+                            value: selected.value,
+                        });
+                    }
+                    else {
+                        setValue(selected.value);
+                    }
+                } : undefined, onMenuScrollToBottom: () => {
+                    getResults({
+                        lastFullyLoadedRelation,
+                        lastLoadedPage: lastLoadedPage + 1,
+                        search,
+                        value: initialValue,
+                        sort: false,
                     });
-                }
-                else {
-                    setValue(selected.value);
-                }
-            } : undefined, onMenuScrollToBottom: () => {
-                getResults({
-                    lastFullyLoadedRelation,
-                    lastLoadedPage: lastLoadedPage + 1,
-                    search,
-                    value: initialValue,
-                    sort: false,
-                });
-            }, value: valueToRender, showError: showError, disabled: formProcessing, options: options, isMulti: hasMany, isSortable: isSortable, filterOption: enableWordBoundarySearch ? (item, searchFilter) => {
-                const r = wordBoundariesRegex(searchFilter || '');
-                return r.test(item.label);
-            } : undefined })),
+                }, value: valueToRender, showError: showError, disabled: formProcessing, options: options, isMulti: hasMany, isSortable: isSortable, filterOption: enableWordBoundarySearch ? (item, searchFilter) => {
+                    const r = wordBoundariesRegex(searchFilter || '');
+                    return r.test(item.label);
+                } : undefined }),
+            !readOnly && (React.createElement(AddNewRelation, { ...{ path, hasMany, relationTo, value, setValue, dispatchOptions } })))),
         errorLoading && (React.createElement("div", { className: `${baseClass}__error-loading` }, errorLoading)),
         React.createElement(FieldDescription, { value: value, description: description })));
 };

package/dist/admin/components/forms/field-types/Relationship/index.scss

@@ -5,18 +5,21 @@
   margin-bottom: $baseline;
 }
 
-.relationship__error-loading {
-  border: 1px solid var(--theme-error-500);
-  min-height: base(2);
-  padding: base(.5) base(.75);
-  background-color: var(--theme-error-500);
-  color: var(--theme-elevation-0);
-}
+.relationship {
+  &__wrap {
+    display: flex;
+    width: 100%;
 
-.relationship--read-only {
-  div.react-select {
-    div.rs__control {
-      background: var(--theme-elevation-100);
+    div.react-select {
+      flex-grow: 1;
     }
   }
-}
+
+  &__error-loading {
+    border: 1px solid var(--theme-error-500);
+    min-height: base(2);
+    padding: base(.5) base(.75);
+    background-color: var(--theme-error-500);
+    color: var(--theme-elevation-0);
+  }
+}

package/dist/admin/components/forms/field-types/Relationship/optionsReducer.js

@@ -23,24 +23,25 @@ const optionsReducer = (state, action) => {
             return [];
         }
         case 'ADD': {
-            const { hasMultipleRelations, collection, relation, data, sort, ids = [] } = action;
+            const { hasMultipleRelations, collection, docs, sort, ids = [] } = action;
+            const relation = collection.slug;
             const labelKey = collection.admin.useAsTitle || 'id';
             const loadedIDs = reduceToIDs(state);
             if (!hasMultipleRelations) {
                 const options = [
                     ...state,
-                    ...data.docs.reduce((docs, doc) => {
+                    ...docs.reduce((docOptions, doc) => {
                         if (loadedIDs.indexOf(doc.id) === -1) {
                             loadedIDs.push(doc.id);
                             return [
-                                ...docs,
+                                ...docOptions,
                                 {
                                     label: doc[labelKey] || `Untitled - ID: ${doc.id}`,
                                     value: doc.id,
                                 },
                             ];
                         }
-                        return docs;
+                        return docOptions;
                     }, []),
                 ];
                 ids.forEach((id) => {
@@ -55,11 +56,11 @@ const optionsReducer = (state, action) => {
             }
             const newOptions = [...state];
             const optionsToAddTo = newOptions.find((optionGroup) => optionGroup.label === collection.labels.plural);
-            const newSubOptions = data.docs.reduce((docs, doc) => {
+            const newSubOptions = docs.reduce((docSubOptions, doc) => {
                 if (loadedIDs.indexOf(doc.id) === -1) {
                     loadedIDs.push(doc.id);
                     return [
-                        ...docs,
+                        ...docSubOptions,
                         {
                             label: doc[labelKey] || `Untitled - ID: ${doc.id}`,
                             relationTo: relation,
@@ -67,7 +68,7 @@ const optionsReducer = (state, action) => {
                         },
                     ];
                 }
-                return docs;
+                return docSubOptions;
             }, []);
             ids.forEach((id) => {
                 if (!loadedIDs.includes(id)) {

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

@@ -1,5 +1,4 @@
 import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
-import { PaginatedDocs } from '../../../../../mongoose/types';
 import { RelationshipField } from '../../../../../fields/config/types';
 export declare type Props = Omit<RelationshipField, 'type'> & {
     path?: string;
@@ -15,8 +14,7 @@ declare type CLEAR = {
 };
 declare type ADD = {
     type: 'ADD';
-    data: PaginatedDocs<any>;
-    relation: string;
+    docs: any[];
     hasMultipleRelations: boolean;
     collection: SanitizedCollectionConfig;
     sort?: boolean;

package/dist/admin/components/forms/field-types/RichText/elements/relationship/Button/Fields/index.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useState, useEffect } from 'react';
 import { useConfig } from '../../../../../../../utilities/Config';
 import { useAuth } from '../../../../../../../utilities/Auth';
-import { useWatchForm } from '../../../../../../Form/context';
+import { useFormFields } from '../../../../../../Form/context';
 import Relationship from '../../../../../Relationship';
 import Select from '../../../../../Select';
 const createOptions = (collections, permissions) => collections.reduce((options, collection) => {
@@ -21,8 +21,7 @@ const RelationshipFields = () => {
     const { collections } = useConfig();
     const { permissions } = useAuth();
     const [options, setOptions] = useState(() => createOptions(collections, permissions));
-    const { getData } = useWatchForm();
-    const { relationTo } = getData();
+    const relationTo = useFormFields(([fields]) => { var _a; return (_a = fields.relationTo) === null || _a === void 0 ? void 0 : _a.value; });
     useEffect(() => {
         setOptions(createOptions(collections, permissions));
     }, [collections, permissions]);

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

@@ -3,12 +3,4 @@
 .field-type.select {
   position: relative;
   margin-bottom: $baseline;
-}
-
-.select--read-only {
-  div.react-select {
-    div.rs__control {
-      background: var(--theme-elevation-100);
-    }
-  }
-}
+}

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

@@ -12,7 +12,6 @@ const Text = (props) => {
     const field = useField({
         path,
         validate: memoizedValidate,
-        enableDebouncedValue: true,
         condition,
     });
     const { value, showError, setValue, errorMessage, } = field;

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

@@ -13,7 +13,6 @@ const Textarea = (props) => {
     const { value, showError, setValue, errorMessage, } = useField({
         path,
         validate: memoizedValidate,
-        enableDebouncedValue: true,
         condition,
     });
     return (React.createElement(TextareaInput, { path: path, name: name, onChange: (e) => {