payload 1.2.0 → 1.2.2

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

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState, useReducer, useRef, } from 'react';
-import equal from 'deep-equal';
 import qs from 'qs';
 import { useTranslation } from 'react-i18next';
 import { useConfig } from '../../../utilities/Config';
@@ -11,16 +10,14 @@ import Label from '../../Label';
 import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
 import { relationship } from '../../../../../fields/validations';
-import { useFormProcessing, useAllFormFields } from '../../Form/context';
+import { useFormProcessing } 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 { findOptionsByValue } from './findOptionsByValue';
+import { GetFilterOptions } from './GetFilterOptions';
 import './index.scss';
 const maxResultsPerRequest = 10;
 const baseClass = 'relationship';
@@ -28,21 +25,19 @@ const Relationship = (props) => {
     const { relationTo, validate = relationship, path, name, required, label, hasMany, filterOptions, admin: { readOnly, style, className, width, description, condition, isSortable = true, } = {}, } = props;
     const { serverURL, routes: { api, }, collections, } = useConfig();
     const { t, i18n } = useTranslation('fields');
-    const { id } = useDocumentInfo();
-    const { user, permissions } = useAuth();
-    const [fields] = useAllFormFields();
+    const { permissions } = useAuth();
     const formProcessing = useFormProcessing();
     const hasMultipleRelations = Array.isArray(relationTo);
-    const [options, dispatchOptions] = useReducer(optionsReducer, required || hasMany ? [] : [{ value: null, label: t('general:none') }]);
+    const [options, dispatchOptions] = useReducer(optionsReducer, []);
     const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
     const [lastLoadedPage, setLastLoadedPage] = useState(1);
     const [errorLoading, setErrorLoading] = useState('');
-    const [optionFilters, setOptionFilters] = useState();
-    const [hasLoadedValueOptions, setHasLoadedValueOptions] = useState(false);
+    const [filterOptionsResult, setFilterOptionsResult] = useState();
     const [search, setSearch] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [hasLoadedFirstPage, setHasLoadedFirstPage] = useState(false);
     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]);
@@ -51,13 +46,7 @@ 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, }) => {
+    const getResults = useCallback(async ({ lastFullyLoadedRelation: lastFullyLoadedRelationArg, lastLoadedPage: lastLoadedPageArg, search: searchArg, value: valueArg, sort, onSuccess, }) => {
         if (!permissions) {
             return;
         }
@@ -96,8 +85,8 @@ const Relationship = (props) => {
                             },
                         });
                     }
-                    if (optionFilters === null || optionFilters === void 0 ? void 0 : optionFilters[relation]) {
-                        query.where.and.push(optionFilters[relation]);
+                    if (filterOptionsResult === null || filterOptionsResult === void 0 ? void 0 : filterOptionsResult[relation]) {
+                        query.where.and.push(filterOptionsResult[relation]);
                     }
                     const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {
                         credentials: 'include',
@@ -109,7 +98,7 @@ const Relationship = (props) => {
                         const data = await response.json();
                         if (data.docs.length > 0) {
                             resultsFetched += data.docs.length;
-                            dispatchOptions({ type: 'ADD', docs: data.docs, hasMultipleRelations, collection, sort, i18n });
+                            dispatchOptions({ type: 'ADD', docs: data.docs, collection, sort, i18n });
                             setLastLoadedPage(data.page);
                             if (!data.nextPage) {
                                 setLastFullyLoadedRelation(relations.indexOf(relation));
@@ -124,13 +113,15 @@ const Relationship = (props) => {
                     else if (response.status === 403) {
                         setLastFullyLoadedRelation(relations.indexOf(relation));
                         lastLoadedPageToUse = 1;
-                        dispatchOptions({ type: 'ADD', docs: [], hasMultipleRelations, collection, sort, ids: relationMap[relation], i18n });
+                        dispatchOptions({ type: 'ADD', docs: [], collection, sort, ids: relationMap[relation], i18n });
                     }
                     else {
                         setErrorLoading(t('error:unspecific'));
                     }
                 }
             }, Promise.resolve());
+            if (typeof onSuccess === 'function')
+                onSuccess();
         }
     }, [
         permissions,
@@ -138,58 +129,12 @@ const Relationship = (props) => {
         hasMany,
         errorLoading,
         collections,
-        optionFilters,
+        filterOptionsResult,
         serverURL,
         api,
-        hasMultipleRelations,
         t,
         i18n,
     ]);
-    const findOptionsByValue = useCallback(() => {
-        if (value) {
-            if (hasMany) {
-                if (Array.isArray(value)) {
-                    return value.map((val) => {
-                        if (hasMultipleRelations) {
-                            let matchedOption;
-                            options.forEach((opt) => {
-                                if (opt.options) {
-                                    opt.options.some((subOpt) => {
-                                        if ((subOpt === null || subOpt === void 0 ? void 0 : subOpt.value) === val.value) {
-                                            matchedOption = subOpt;
-                                            return true;
-                                        }
-                                        return false;
-                                    });
-                                }
-                            });
-                            return matchedOption;
-                        }
-                        return options.find((opt) => opt.value === val);
-                    });
-                }
-                return undefined;
-            }
-            if (hasMultipleRelations) {
-                let matchedOption;
-                const valueWithRelation = value;
-                options.forEach((opt) => {
-                    if (opt === null || opt === void 0 ? void 0 : opt.options) {
-                        opt.options.some((subOpt) => {
-                            if ((subOpt === null || subOpt === void 0 ? void 0 : subOpt.value) === valueWithRelation.value) {
-                                matchedOption = subOpt;
-                                return true;
-                            }
-                            return false;
-                        });
-                    }
-                });
-                return matchedOption;
-            }
-            return options.find((opt) => opt.value === value);
-        }
-        return undefined;
-    }, [hasMany, hasMultipleRelations, value, options]);
     const updateSearch = useDebouncedCallback((searchArg, valueArg) => {
         getResults({ search: searchArg, value: valueArg, sort: true });
         setSearch(searchArg);
@@ -199,72 +144,60 @@ const Relationship = (props) => {
             updateSearch(searchArg, valueArg);
         }
     }, [search, updateSearch]);
-    // ///////////////////////////
-    // Fetch value options when initialValue changes
-    // ///////////////////////////
+    // ///////////////////////////////////
+    // Ensure we have an option for each value
+    // ///////////////////////////////////
     useEffect(() => {
-        if (initialValue && !hasLoadedValueOptions) {
-            const relationMap = createRelationMap({
-                hasMany,
-                relationTo,
-                value: initialValue,
+        const relationMap = createRelationMap({
+            hasMany,
+            relationTo,
+            value,
+        });
+        Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {
+            await priorRelation;
+            const idsToLoad = ids.filter((id) => {
+                return !options.find((optionGroup) => { var _a; return (_a = optionGroup === null || optionGroup === void 0 ? void 0 : optionGroup.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === id && option.relationTo === relation); });
             });
-            Object.entries(relationMap).reduce(async (priorRelation, [relation, ids]) => {
-                await priorRelation;
-                if (ids.length > 0) {
-                    const query = {
-                        where: {
-                            id: {
-                                in: ids,
-                            },
+            if (idsToLoad.length > 0) {
+                const query = {
+                    where: {
+                        id: {
+                            in: idsToLoad,
                         },
-                        depth: 0,
-                        limit: ids.length,
-                    };
-                    if (!errorLoading) {
-                        const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {
-                            credentials: 'include',
-                            headers: {
-                                'Accept-Language': i18n.language,
-                            },
-                        });
-                        const collection = collections.find((coll) => coll.slug === relation);
-                        if (response.ok) {
-                            const data = await response.json();
-                            dispatchOptions({ type: 'ADD', docs: data.docs, hasMultipleRelations, collection, sort: true, ids, i18n });
-                        }
-                        else if (response.status === 403) {
-                            dispatchOptions({ type: 'ADD', docs: [], hasMultipleRelations, collection, sort: true, ids, i18n });
-                        }
+                    },
+                    depth: 0,
+                    limit: idsToLoad.length,
+                };
+                if (!errorLoading) {
+                    const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(query)}`, {
+                        credentials: 'include',
+                        headers: {
+                            'Accept-Language': i18n.language,
+                        },
+                    });
+                    const collection = collections.find((coll) => coll.slug === relation);
+                    if (response.ok) {
+                        const data = await response.json();
+                        dispatchOptions({ type: 'ADD', docs: data.docs, collection, sort: true, ids: idsToLoad, i18n });
+                    }
+                    else if (response.status === 403) {
+                        dispatchOptions({ type: 'ADD', docs: [], collection, sort: true, ids: idsToLoad, i18n });
                     }
                 }
-            }, Promise.resolve());
-            setHasLoadedValueOptions(true);
-        }
-    }, [hasMany, hasMultipleRelations, relationTo, initialValue, hasLoadedValueOptions, errorLoading, collections, api, serverURL, i18n]);
-    useEffect(() => {
-        if (!filterOptions)
-            return;
-        const [data, siblingData] = getFormData();
-        const newOptionFilters = getFilterOptionsQuery(filterOptions, {
-            id,
-            data,
-            relationTo,
-            siblingData,
-            user,
-        });
-        if (!equal(newOptionFilters, optionFilters)) {
-            setOptionFilters(newOptionFilters);
-        }
-    }, [relationTo, filterOptions, optionFilters, id, getFormData, path, user]);
-    useEffect(() => {
-        if (optionFilters || !filterOptions) {
-            setHasLoadedValueOptions(false);
-            getResults({
-                value: initialValue,
-            });
-        }
-    }, [initialValue, getResults, optionFilters, filterOptions]);
+            }
+        }, Promise.resolve());
+    }, [
+        options,
+        value,
+        hasMany,
+        errorLoading,
+        collections,
+        hasMultipleRelations,
+        serverURL,
+        api,
+        i18n,
+        relationTo,
+    ]);
     // Determine if we should switch to word boundary search
     useEffect(() => {
         const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
@@ -276,7 +209,7 @@ const Relationship = (props) => {
         }, true);
         setEnableWordBoundarySearch(!isIdOnly);
     }, [relationTo, collections]);
-    // When relationTo changes, reset relationship options
+    // When relationTo or filterOptionsResult changes, reset component
     // Note - effect should not run on first run
     useEffect(() => {
         if (firstRun.current) {
@@ -284,8 +217,10 @@ const Relationship = (props) => {
             return;
         }
         dispatchOptions({ type: 'CLEAR' });
-        setHasLoadedValueOptions(false);
-    }, [relationTo]);
+        setLastFullyLoadedRelation(-1);
+        setLastLoadedPage(1);
+        setHasLoadedFirstPage(false);
+    }, [relationTo, filterOptionsResult]);
     const classes = [
         'field-type',
         baseClass,
@@ -294,8 +229,8 @@ const Relationship = (props) => {
         errorLoading && 'error-loading',
         readOnly && `${baseClass}--read-only`,
     ].filter(Boolean).join(' ');
-    const valueToRender = (findOptionsByValue() || value);
-    if ((valueToRender === null || valueToRender === void 0 ? void 0 : valueToRender.value) === 'null')
+    const valueToRender = findOptionsByValue({ value, options });
+    if (!Array.isArray(valueToRender) && (valueToRender === null || valueToRender === void 0 ? void 0 : valueToRender.value) === 'null')
         valueToRender.value = null;
     return (React.createElement("div", { id: `field-${(path || name).replace(/\./gi, '__')}`, className: classes, style: {
             ...style,
@@ -303,9 +238,13 @@ const Relationship = (props) => {
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement(Label, { htmlFor: path, label: label, required: required }),
+        React.createElement(GetFilterOptions, { ...{ filterOptionsResult, setFilterOptionsResult, filterOptions, path, relationTo } }),
         !errorLoading && (React.createElement("div", { className: `${baseClass}__wrap` },
             React.createElement(ReactSelect, { isDisabled: readOnly, onInputChange: (newSearch) => handleInputChange(newSearch, value), onChange: !readOnly ? (selected) => {
-                    if (hasMany) {
+                    if (selected === null) {
+                        setValue(hasMany ? [] : null);
+                    }
+                    else if (hasMany) {
                         setValue(selected ? selected.map((option) => {
                             if (hasMultipleRelations) {
                                 return {
@@ -333,7 +272,18 @@ const Relationship = (props) => {
                         value: initialValue,
                         sort: false,
                     });
-                }, value: valueToRender, showError: showError, disabled: formProcessing, options: options, isMulti: hasMany, isSortable: isSortable, filterOption: enableWordBoundarySearch ? (item, searchFilter) => {
+                }, value: valueToRender, showError: showError, disabled: formProcessing, options: options, isMulti: hasMany, isSortable: isSortable, isLoading: isLoading, onMenuOpen: () => {
+                    if (!hasLoadedFirstPage) {
+                        setIsLoading(true);
+                        getResults({
+                            value: initialValue,
+                            onSuccess: () => {
+                                setHasLoadedFirstPage(true);
+                                setIsLoading(false);
+                            },
+                        });
+                    }
+                }, filterOption: enableWordBoundarySearch ? (item, searchFilter) => {
                     const r = wordBoundariesRegex(searchFilter || '');
                     return r.test(item.label);
                 } : undefined }),

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

@@ -1,3 +1,3 @@
-import { Option, Action } from './types';
-declare const optionsReducer: (state: Option[], action: Action) => Option[];
+import { Action, OptionGroup } from './types';
+declare const optionsReducer: (state: OptionGroup[], action: Action) => OptionGroup[];
 export default optionsReducer;

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

@@ -24,37 +24,10 @@ const optionsReducer = (state, action) => {
             return [];
         }
         case 'ADD': {
-            const { hasMultipleRelations, collection, docs, sort, ids = [], i18n } = action;
+            const { collection, docs, sort, ids = [], i18n } = action;
             const relation = collection.slug;
             const labelKey = collection.admin.useAsTitle || 'id';
             const loadedIDs = reduceToIDs(state);
-            if (!hasMultipleRelations) {
-                const options = [
-                    ...state,
-                    ...docs.reduce((docOptions, doc) => {
-                        if (loadedIDs.indexOf(doc.id) === -1) {
-                            loadedIDs.push(doc.id);
-                            return [
-                                ...docOptions,
-                                {
-                                    label: doc[labelKey] || `${i18n.t('general:untitled')} - ID: ${doc.id}`,
-                                    value: doc.id,
-                                },
-                            ];
-                        }
-                        return docOptions;
-                    }, []),
-                ];
-                ids.forEach((id) => {
-                    if (!loadedIDs.includes(id)) {
-                        options.push({
-                            label: labelKey === 'id' ? id : `${i18n.t('general:untitled')} - ID: ${id}`,
-                            value: id,
-                        });
-                    }
-                });
-                return sort ? sortOptions(options) : options;
-            }
             const newOptions = [...state];
             const optionsToAddTo = newOptions.find((optionGroup) => optionGroup.label === collection.labels.plural);
             const newSubOptions = docs.reduce((docSubOptions, doc) => {
@@ -74,6 +47,7 @@ const optionsReducer = (state, action) => {
             ids.forEach((id) => {
                 if (!loadedIDs.includes(id)) {
                     newSubOptions.push({
+                        relationTo: relation,
                         label: labelKey === 'id' ? id : `${i18n.t('general:untitled')} - ID: ${id}`,
                         value: id,
                     });
@@ -90,7 +64,6 @@ const optionsReducer = (state, action) => {
                 newOptions.push({
                     label: getTranslation(collection.labels.plural, i18n),
                     options: sort ? sortOptions(newSubOptions) : newSubOptions,
-                    value: undefined,
                 });
             }
             return newOptions;

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

@@ -1,22 +1,30 @@
 import i18n from 'i18next';
 import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
 import { RelationshipField } from '../../../../../fields/config/types';
+import { Where } from '../../../../../types';
 export declare type Props = Omit<RelationshipField, 'type'> & {
     path?: string;
 };
 export declare type Option = {
     label: string;
-    value: string;
+    value: string | number;
     relationTo?: string;
     options?: Option[];
 };
+export declare type OptionGroup = {
+    label: string;
+    options: Option[];
+};
+export declare type Value = {
+    relationTo: string;
+    value: string | number;
+} | string | number;
 declare type CLEAR = {
     type: 'CLEAR';
 };
 declare type ADD = {
     type: 'ADD';
     docs: any[];
-    hasMultipleRelations: boolean;
     collection: SanitizedCollectionConfig;
     sort?: boolean;
     ids?: unknown[];
@@ -33,5 +41,9 @@ export declare type GetResults = (args: {
     search?: string;
     value?: unknown;
     sort?: boolean;
+    onSuccess?: () => void;
 }) => Promise<void>;
+export declare type FilterOptionsResult = {
+    [relation: string]: Where;
+};
 export {};

package/dist/admin/components/forms/field-types/RichText/elements/link/Element.js

@@ -15,6 +15,7 @@ import { getBaseFields } from './Modal/baseFields';
 import reduceFieldsToValues from '../../../../Form/reduceFieldsToValues';
 import deepCopyObject from '../../../../../../../utilities/deepCopyObject';
 import Button from '../../../../../elements/Button';
+import { getTranslation } from '../../../../../../../utilities/getTranslation';
 import './index.scss';
 const baseClass = 'rich-text-link';
 // TODO: Multiple modal windows stacked go boom (rip). Edit Upload in fields -> rich text
@@ -25,7 +26,7 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
     const config = useConfig();
     const { user } = useAuth();
     const locale = useLocale();
-    const { t } = useTranslation('fields');
+    const { t, i18n } = useTranslation('fields');
     const { openModal, toggleModal } = useModal();
     const [renderModal, setRenderModal] = useState(false);
     const [renderPopup, setRenderPopup] = useState(false);
@@ -100,8 +101,7 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
             React.createElement(Popup, { buttonType: "none", size: "small", forceOpen: renderPopup, onToggleOpen: handleTogglePopup, horizontalAlign: "left", verticalAlign: "bottom", boundingRef: editorRef, render: () => {
                     var _a, _b, _c, _d;
                     return (React.createElement("div", { className: `${baseClass}__popup` },
-                        element.linkType === 'internal' && ((_a = element.doc) === null || _a === void 0 ? void 0 : _a.relationTo) && ((_b = element.doc) === null || _b === void 0 ? void 0 : _b.value) && (React.createElement(Trans, { i18nKey: "linkedTo", values: { label: (_d = (_c = config.collections.find(({ slug }) => slug === element.doc.relationTo)) === null || _c === void 0 ? void 0 : _c.labels) === null || _d === void 0 ? void 0 : _d.singular } },
-                            "linkedTo",
+                        element.linkType === 'internal' && ((_a = element.doc) === null || _a === void 0 ? void 0 : _a.relationTo) && ((_b = element.doc) === null || _b === void 0 ? void 0 : _b.value) && (React.createElement(Trans, { i18nKey: "fields:linkedTo", values: { label: getTranslation((_d = (_c = config.collections.find(({ slug }) => slug === element.doc.relationTo)) === null || _c === void 0 ? void 0 : _c.labels) === null || _d === void 0 ? void 0 : _d.singular, i18n) } },
                             React.createElement("a", { className: `${baseClass}__link-label`, href: `${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`, target: "_blank", rel: "noreferrer" }, "label"))),
                         (element.linkType === 'custom' || !element.linkType) && (React.createElement("a", { className: `${baseClass}__link-label`, href: element.url, target: "_blank", rel: "noreferrer" }, element.url)),
                         React.createElement(Button, { className: `${baseClass}__link-edit`, icon: "edit", round: true, buttonStyle: "icon-label", onClick: (e) => {

package/dist/admin/components/forms/field-types/RichText/elements/link/index.scss

@@ -18,6 +18,7 @@
     }
 
     .popup__scroll {
+      white-space: pre;
       padding-right: base(.5);
     }
   }
@@ -66,4 +67,4 @@
   &--open {
     z-index: var(--z-popup);
   }
-}
+}

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

@@ -96,7 +96,7 @@ const UploadButton = ({ path }) => {
             React.createElement(UploadIcon, null)),
         renderModal && (React.createElement(Modal, { className: baseModalClass, slug: modalSlug }, isOpen && (React.createElement(MinimalTemplate, { width: "wide" },
             React.createElement("header", { className: `${baseModalClass}__header` },
-                React.createElement("h1", null, t('addLabel', { label: getTranslation(modalCollection.labels.singular, i18n) })),
+                React.createElement("h1", null, t('fields:addLabel', { label: getTranslation(modalCollection.labels.singular, i18n) })),
                 React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => {
                         toggleModal(modalSlug);
                         setRenderModal(false);

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

@@ -4,7 +4,7 @@ import withCondition from '../../withCondition';
 import { getFieldPath } from '../getFieldPath';
 import './index.scss';
 const Row = (props) => {
-    const { fields, fieldTypes, path, permissions, admin: { readOnly, className, }, indexPath } = props;
+    const { fields, fieldTypes, path, permissions, admin: { readOnly, className, }, indexPath, } = props;
     const classes = [
         'field-type',
         'row',

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

@@ -1,7 +1,7 @@
 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 { Option } from '../../../elements/ReactSelect/types';
 import './index.scss';
 export declare type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> & {
     showError?: boolean;
@@ -11,7 +11,7 @@ export declare type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'opt
     required?: boolean;
     value?: string | string[];
     description?: Description;
-    onChange?: (value: ReactSelectValue) => void;
+    onChange?: (value: Option) => void;
     style?: React.CSSProperties;
     className?: string;
     width?: string;

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

@@ -18,10 +18,20 @@ const SelectInput = (props) => {
     ].filter(Boolean).join(' ');
     let valueToRender;
     if (hasMany && Array.isArray(value)) {
-        valueToRender = value.map((val) => options.find((option) => option.value === val));
+        valueToRender = value.map((val) => {
+            const matchingOption = options.find((option) => option.value === val);
+            return {
+                label: getTranslation(matchingOption.label, i18n),
+                value: matchingOption.value,
+            };
+        });
     }
-    else {
-        valueToRender = options.find((option) => option.value === value);
+    else if (value) {
+        const matchingOption = options.find((option) => option.value === value);
+        valueToRender = {
+            label: getTranslation(matchingOption.label, i18n),
+            value: matchingOption.value,
+        };
     }
     return (React.createElement("div", { id: `field-${path.replace(/\./gi, '__')}`, className: classes, style: {
             ...style,

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

@@ -21,7 +21,7 @@ const TextareaInput = (props) => {
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
-        React.createElement("div", { className: "textarea-outer" },
+        React.createElement("label", { className: "textarea-outer", htmlFor: `field-${path.replace(/\./gi, '__')}` },
             React.createElement("div", { className: "textarea-inner" },
                 React.createElement("div", { className: "textarea-clone", "data-value": value || placeholder || '' }),
                 React.createElement("textarea", { className: "textarea-element", id: `field-${path.replace(/\./gi, '__')}`, value: value || '', onChange: onChange, disabled: readOnly, placeholder: getTranslation(placeholder, i18n), name: path, rows: rows }))),

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

@@ -6,12 +6,13 @@
 
   .textarea-outer {
     @include formInput();
+    display: flex;
     resize: vertical;
-    height: auto;
     min-height: base(3);
+    height: 100%;
 
     // Scrollbar for giant content
-    max-height: 90vh;
+    max-height: calc(100vh - $top-header-offset - calc(#{base(5)}));
     overflow: auto;
 
     @include mid-break {
@@ -31,7 +32,6 @@
     position: relative;
     line-height: inherit;
     flex-grow: 1;
-    box-sizing: border-box;
     background: none;
     outline: none;
   }
@@ -49,7 +49,6 @@
     line-height: inherit;
     color: inherit;
     background: none;
-    box-sizing: border-box;
     overflow: auto;
     resize: none;
     outline: none;
@@ -65,8 +64,6 @@
     vertical-align: top;
     display: inline-block;
     flex-grow: 1;
-    white-space: pre;
-    box-sizing: border-box;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: pre-wrap;

package/dist/admin/components/forms/useField/index.d.ts

@@ -1,3 +1,8 @@
 import { Options, FieldType } from './types';
+/**
+ * Get and set the value of a form field.
+ *
+ * @see https://payloadcms.com/docs/admin/hooks#usefield
+ */
 declare const useField: <T extends unknown>(options: Options) => FieldType<T>;
 export default useField;

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

@@ -5,6 +5,11 @@ import { useFormProcessing, useFormSubmitted, useFormModified, useForm, useFormF
 import { useDocumentInfo } from '../../utilities/DocumentInfo';
 import { useOperation } from '../../utilities/OperationProvider';
 import useThrottledEffect from '../../../hooks/useThrottledEffect';
+/**
+ * Get and set the value of a form field.
+ *
+ * @see https://payloadcms.com/docs/admin/hooks#usefield
+ */
 const useField = (options) => {
     const { path, validate, disableFormData = false, condition, } = options;
     const submitted = useFormSubmitted();

package/dist/admin/components/utilities/I18n/index.js

@@ -12,7 +12,7 @@ export const I18n = () => {
     i18n
         .use(LanguageDetector)
         .use(initReactI18next)
-        .init(deepmerge(defaultOptions, config.i18n || { debug: true }));
+        .init(deepmerge(defaultOptions, config.i18n || {}));
     return null;
 };
 export default I18n;