payload 1.1.23 → 1.1.25

package/dist/admin/components/Routes.js

@@ -26,7 +26,8 @@ const Routes = () => {
     const [initialized, setInitialized] = useState(null);
     const { user, permissions, refreshCookie } = useAuth();
     const canAccessAdmin = permissions === null || permissions === void 0 ? void 0 : permissions.canAccessAdmin;
-    const { admin: { user: userSlug, components: { routes: customRoutes, } = {}, }, routes, collections, globals, } = useConfig();
+    const config = useConfig();
+    const { admin: { user: userSlug, logoutRoute, inactivityRoute: logoutInactivityRoute, components: { routes: customRoutes, } = {}, }, routes, collections, globals, } = config;
     const userCollection = collections.find(({ slug }) => slug === userSlug);
     useEffect(() => {
         const { slug } = userCollection;
@@ -59,9 +60,9 @@ const Routes = () => {
                             React.createElement(Component, { user: user, canAccessAdmin: canAccessAdmin })))),
                         React.createElement(Route, { path: `${match.url}/login` },
                             React.createElement(Login, null)),
-                        React.createElement(Route, { path: `${match.url}/logout` },
+                        React.createElement(Route, { path: `${match.url}${logoutRoute}` },
                             React.createElement(Logout, null)),
-                        React.createElement(Route, { path: `${match.url}/logout-inactivity` },
+                        React.createElement(Route, { path: `${match.url}${logoutInactivityRoute}` },
                             React.createElement(Logout, { inactivity: true })),
                         !userCollection.auth.disableLocalStrategy && (React.createElement(Route, { path: `${match.url}/forgot` },
                             React.createElement(ForgotPassword, null))),

package/dist/admin/components/elements/Logout/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Logout: React.FC;
+export default Logout;

package/dist/admin/components/elements/Logout/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useConfig } from '../../utilities/Config';
+import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import LogOut from '../../icons/LogOut';
+const baseClass = 'nav';
+const DefaultLogout = () => {
+    const config = useConfig();
+    const { routes: { admin }, admin: { logoutRoute, components: { logout } } } = config;
+    return (React.createElement(Link, { to: `${admin}${logoutRoute}`, className: `${baseClass}__log-out` },
+        React.createElement(LogOut, null)));
+};
+const Logout = () => {
+    const { admin: { components: { logout: { Button: CustomLogout } = {
+        Button: undefined,
+    }, } = {}, } = {}, } = useConfig();
+    return (React.createElement(RenderCustomComponent, { CustomComponent: CustomLogout, DefaultComponent: DefaultLogout }));
+};
+export default Logout;

package/dist/admin/components/elements/Nav/index.js

@@ -4,7 +4,6 @@ import { useConfig } from '../../utilities/Config';
 import { useAuth } from '../../utilities/Auth';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import Chevron from '../../icons/Chevron';
-import LogOut from '../../icons/LogOut';
 import Menu from '../../icons/Menu';
 import CloseMenu from '../../icons/CloseMenu';
 import Icon from '../../graphics/Icon';
@@ -13,13 +12,14 @@ import Localizer from '../Localizer';
 import NavGroup from '../NavGroup';
 import { groupNavItems, EntityType } from '../../../utilities/groupNavItems';
 import './index.scss';
+import Logout from '../Logout';
 const baseClass = 'nav';
 const DefaultNav = () => {
     const { permissions } = useAuth();
     const [menuActive, setMenuActive] = useState(false);
     const [groups, setGroups] = useState([]);
     const history = useHistory();
-    const { collections, globals, routes: { admin, }, admin: { components: { beforeNavLinks, afterNavLinks, }, }, } = useConfig();
+    const { collections, globals, routes: { admin, }, admin: { components: { beforeNavLinks, afterNavLinks }, }, } = useConfig();
     const classes = [
         baseClass,
         menuActive && `${baseClass}--menu-active`,
@@ -81,8 +81,7 @@ const DefaultNav = () => {
                     React.createElement(Localizer, null),
                     React.createElement(Link, { to: `${admin}/account`, className: `${baseClass}__account` },
                         React.createElement(Account, null)),
-                    React.createElement(Link, { to: `${admin}/logout`, className: `${baseClass}__log-out` },
-                        React.createElement(LogOut, null)))))));
+                    React.createElement(Logout, null))))));
 };
 const Nav = () => {
     const { admin: { components: { Nav: CustomNav, } = {

package/dist/admin/components/elements/UploadGallery/index.js

@@ -5,7 +5,7 @@ const baseClass = 'upload-gallery';
 const UploadGallery = (props) => {
     const { docs, onCardClick, collection } = props;
     if (docs && docs.length > 0) {
-        return (React.createElement("ul", { className: baseClass }, docs.map((doc, i) => (React.createElement("li", { key: i },
+        return (React.createElement("ul", { className: baseClass }, docs.map((doc) => (React.createElement("li", { key: String(doc.id) },
             React.createElement(UploadCard, { doc: doc, ...{ collection }, onClick: () => onCardClick(doc) }))))));
     }
     return null;

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

@@ -9,7 +9,7 @@ const intersectionObserverOptions = {
 };
 const RenderFields = (props) => {
     var _a;
-    const { fieldSchema, fieldTypes, filter, permissions, readOnly: readOnlyOverride, className, forceRender, } = props;
+    const { fieldSchema, fieldTypes, filter, permissions, readOnly: readOnlyOverride, className, forceRender, indexPath: incomingIndexPath } = props;
     const [hasRendered, setHasRendered] = useState(Boolean(forceRender));
     const [intersectionRef, entry] = useIntersect(intersectionObserverOptions);
     const operation = useOperation();
@@ -26,14 +26,14 @@ const RenderFields = (props) => {
         className,
     ].filter(Boolean).join(' ');
     if (fieldSchema) {
-        return (React.createElement("div", { ref: intersectionRef, className: classes }, hasRendered && (fieldSchema.map((field, i) => {
+        return (React.createElement("div", { ref: intersectionRef, className: classes }, hasRendered && (fieldSchema.map((field, fieldIndex) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const fieldIsPresentational = fieldIsPresentationalOnly(field);
             let FieldComponent = fieldTypes[field.type];
             if (fieldIsPresentational || (!(field === null || field === void 0 ? void 0 : field.hidden) && ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.disabled) !== true)) {
                 if ((filter && typeof filter === 'function' && filter(field)) || !filter) {
                     if (fieldIsPresentational) {
-                        return (React.createElement(FieldComponent, { ...field, key: i }));
+                        return (React.createElement(FieldComponent, { ...field, key: fieldIndex }));
                     }
                     if ((_b = field === null || field === void 0 ? void 0 : field.admin) === null || _b === void 0 ? void 0 : _b.hidden) {
                         FieldComponent = fieldTypes.hidden;
@@ -48,10 +48,11 @@ const RenderFields = (props) => {
                             readOnly = true;
                         }
                         if (FieldComponent) {
-                            return (React.createElement(RenderCustomComponent, { key: i, CustomComponent: (_h = (_g = field === null || field === void 0 ? void 0 : field.admin) === null || _g === void 0 ? void 0 : _g.components) === null || _h === void 0 ? void 0 : _h.Field, DefaultComponent: FieldComponent, componentProps: {
+                            return (React.createElement(RenderCustomComponent, { key: fieldIndex, CustomComponent: (_h = (_g = field === null || field === void 0 ? void 0 : field.admin) === null || _g === void 0 ? void 0 : _g.components) === null || _h === void 0 ? void 0 : _h.Field, DefaultComponent: FieldComponent, componentProps: {
                                     ...field,
                                     path: field.path || (isFieldAffectingData ? field.name : ''),
                                     fieldTypes,
+                                    indexPath: incomingIndexPath ? `${incomingIndexPath}.${fieldIndex}` : `${fieldIndex}`,
                                     admin: {
                                         ...(field.admin || {}),
                                         readOnly,
@@ -59,7 +60,7 @@ const RenderFields = (props) => {
                                     permissions: fieldPermissions,
                                 } }));
                         }
-                        return (React.createElement("div", { className: "missing-field", key: i },
+                        return (React.createElement("div", { className: "missing-field", key: fieldIndex },
                             "No matched field found for",
                             ' ',
                             "\"",

package/dist/admin/components/forms/RenderFields/types.d.ts

@@ -11,4 +11,5 @@ export declare type Props = {
     filter?: (field: Field) => boolean;
     fieldSchema: FieldWithPath[];
     fieldTypes: FieldTypes;
+    indexPath?: string;
 };

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

@@ -25,7 +25,7 @@ import './index.scss';
 const baseClass = 'array-field';
 const ArrayFieldType = (props) => {
     var _a, _b;
-    const { name, path: pathFromProps, fields, fieldTypes, validate = array, required, maxRows, minRows, permissions, admin: { readOnly, description, condition, initCollapsed, className, }, } = props;
+    const { name, path: pathFromProps, fields, fieldTypes, validate = array, required, maxRows, minRows, permissions, indexPath, admin: { readOnly, description, condition, initCollapsed, className, }, } = props;
     const path = pathFromProps || name;
     // Handle labeling for Arrays, Global Arrays, and Blocks
     const getLabels = (p) => {
@@ -174,7 +174,7 @@ const ArrayFieldType = (props) => {
                     return (React.createElement(Draggable, { key: row.id, draggableId: row.id, index: i, isDragDisabled: readOnly }, (providedDrag) => (React.createElement("div", { id: `${path}-row-${i}`, ref: providedDrag.innerRef, ...providedDrag.draggableProps },
                         React.createElement(Collapsible, { collapsed: row.collapsed, onToggle: (collapsed) => setCollapse(row.id, collapsed), className: `${baseClass}__row`, key: row.id, dragHandleProps: providedDrag.dragHandleProps, header: `${labels.singular} ${rowNumber >= 10 ? rowNumber : `0${rowNumber}`}`, actions: !readOnly ? (React.createElement(ArrayAction, { rowCount: rows.length, duplicateRow: duplicateRow, addRow: addRow, moveRow: moveRow, removeRow: removeRow, index: i })) : undefined },
                             React.createElement(HiddenInput, { name: `${path}.${i}.id`, value: row.id }),
-                            React.createElement(RenderFields, { className: `${baseClass}__fields`, forceRender: true, readOnly: readOnly, fieldTypes: fieldTypes, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldSchema: fields.map((field) => ({
+                            React.createElement(RenderFields, { className: `${baseClass}__fields`, forceRender: true, readOnly: readOnly, fieldTypes: fieldTypes, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, indexPath: indexPath, fieldSchema: fields.map((field) => ({
                                     ...field,
                                     path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`,
                                 })) }))))));

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

@@ -6,4 +6,5 @@ export declare type Props = Omit<ArrayField, 'type'> & {
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;
     label: string | false;
+    indexPath: string;
 };

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

@@ -32,7 +32,7 @@ const labelDefaults = {
     plural: 'Blocks',
 };
 const BlocksField = (props) => {
-    const { label, name, path: pathFromProps, blocks, labels = labelDefaults, fieldTypes, maxRows, minRows, required, validate = blocksValidator, permissions, admin: { readOnly, description, condition, initCollapsed, className, }, } = props;
+    const { label, name, path: pathFromProps, blocks, labels = labelDefaults, fieldTypes, maxRows, minRows, required, validate = blocksValidator, permissions, indexPath, admin: { readOnly, description, condition, initCollapsed, className, }, } = props;
     const path = pathFromProps || name;
     const { preferencesKey } = useDocumentInfo();
     const { getPreference } = usePreferences();
@@ -189,7 +189,7 @@ const BlocksField = (props) => {
                                 React.createElement(RenderFields, { className: `${baseClass}__fields`, forceRender: true, readOnly: readOnly, fieldTypes: fieldTypes, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldSchema: blockToRender.fields.map((field) => ({
                                         ...field,
                                         path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`,
-                                    })) }))))));
+                                    })), indexPath: indexPath }))))));
                     }
                     return null;
                 }),

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

@@ -5,4 +5,5 @@ export declare type Props = Omit<BlockField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;
+    indexPath: string;
 };

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

@@ -10,7 +10,7 @@ import { getFieldPath } from '../getFieldPath';
 import './index.scss';
 const baseClass = 'collapsible-field';
 const CollapsibleField = (props) => {
-    const { label, fields, fieldTypes, path, permissions, admin: { readOnly, className, initCollapsed, description, }, } = props;
+    const { label, fields, fieldTypes, path, permissions, indexPath, admin: { readOnly, className, initCollapsed, description, }, } = props;
     const { getPreference, setPreference } = usePreferences();
     const { preferencesKey } = useDocumentInfo();
     const [collapsedOnMount, setCollapsedOnMount] = useState();
@@ -45,7 +45,7 @@ const CollapsibleField = (props) => {
                 baseClass,
                 className,
             ].filter(Boolean).join(' '), header: React.createElement("div", { className: `${baseClass}__label` }, label), onToggle: onToggle },
-            React.createElement(RenderFields, { forceRender: true, readOnly: readOnly, permissions: permissions, fieldTypes: fieldTypes, fieldSchema: fields.map((field) => ({
+            React.createElement(RenderFields, { forceRender: true, readOnly: readOnly, permissions: permissions, fieldTypes: fieldTypes, indexPath: indexPath, fieldSchema: fields.map((field) => ({
                     ...field,
                     path: getFieldPath(path, field),
                 })) })),

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

@@ -5,4 +5,5 @@ export declare type Props = Omit<CollapsibleField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;
+    indexPath: string;
 };

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

@@ -9,7 +9,7 @@ import { GroupProvider, useGroup } from './provider';
 import { useTabs } from '../Tabs/provider';
 const baseClass = 'group-field';
 const Group = (props) => {
-    const { label, fields, name, path: pathFromProps, fieldTypes, admin: { readOnly, style, className, width, description, hideGutter = false, }, permissions, } = props;
+    const { label, fields, name, path: pathFromProps, fieldTypes, indexPath, admin: { readOnly, style, className, width, description, hideGutter = false, }, permissions, } = props;
     const isWithinCollapsible = useCollapsible();
     const isWithinGroup = useGroup();
     const isWithinTab = useTabs();
@@ -31,7 +31,7 @@ const Group = (props) => {
                 (label || description) && (React.createElement("header", { className: `${baseClass}__header` },
                     label && (React.createElement("h3", { className: `${baseClass}__title` }, label)),
                     React.createElement(FieldDescription, { value: null, description: description }))),
-                React.createElement(RenderFields, { permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, readOnly: readOnly, fieldTypes: fieldTypes, fieldSchema: fields.map((subField) => ({
+                React.createElement(RenderFields, { permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, readOnly: readOnly, fieldTypes: fieldTypes, indexPath: indexPath, fieldSchema: fields.map((subField) => ({
                         ...subField,
                         path: `${path}${fieldAffectsData(subField) ? `.${subField.name}` : ''}`,
                     })) })))));

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

@@ -5,4 +5,5 @@ export declare type Props = Omit<GroupField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;
+    indexPath: string;
 };

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

@@ -4,13 +4,13 @@ import withCondition from '../../withCondition';
 import { getFieldPath } from '../getFieldPath';
 import './index.scss';
 const Row = (props) => {
-    const { fields, fieldTypes, path, permissions, admin: { readOnly, className, }, } = props;
+    const { fields, fieldTypes, path, permissions, admin: { readOnly, className, }, indexPath } = props;
     const classes = [
         'field-type',
         'row',
         className,
     ].filter(Boolean).join(' ');
-    return (React.createElement(RenderFields, { readOnly: readOnly, className: classes, permissions: permissions, fieldTypes: fieldTypes, fieldSchema: fields.map((field) => ({
+    return (React.createElement(RenderFields, { readOnly: readOnly, className: classes, permissions: permissions, fieldTypes: fieldTypes, indexPath: indexPath, fieldSchema: fields.map((field) => ({
             ...field,
             path: getFieldPath(path, field),
         })) }));

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

@@ -5,4 +5,5 @@ export declare type Props = Omit<RowField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;
+    indexPath: string;
 };

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import RenderFields from '../../RenderFields';
 import withCondition from '../../withCondition';
 import { fieldAffectsData, tabHasName } from '../../../../../fields/config/types';
@@ -6,13 +6,52 @@ import FieldDescription from '../../FieldDescription';
 import toKebabCase from '../../../../../utilities/toKebabCase';
 import { useCollapsible } from '../../../elements/Collapsible/provider';
 import { TabsProvider } from './provider';
+import { usePreferences } from '../../../utilities/Preferences';
+import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import './index.scss';
 const baseClass = 'tabs-field';
 const TabsField = (props) => {
-    const { tabs, fieldTypes, path, permissions, admin: { readOnly, className, }, } = props;
+    const { tabs, fieldTypes, path, permissions, indexPath, admin: { readOnly, className, }, } = props;
+    const { getPreference, setPreference } = usePreferences();
+    const { preferencesKey } = useDocumentInfo();
     const isWithinCollapsible = useCollapsible();
-    const [active, setActive] = useState(0);
-    const activeTab = tabs[active];
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+    const tabsPrefKey = `tabs-${indexPath}`;
+    useEffect(() => {
+        const getInitialPref = async () => {
+            var _a, _b, _c, _d;
+            const existingPreferences = await getPreference(preferencesKey);
+            const initialIndex = path ? (_b = (_a = existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.tabIndex : (_d = (_c = existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields) === null || _c === void 0 ? void 0 : _c[tabsPrefKey]) === null || _d === void 0 ? void 0 : _d.tabIndex;
+            setActiveTabIndex(initialIndex || 0);
+        };
+        getInitialPref();
+    }, [path, indexPath]);
+    const handleTabChange = useCallback(async (incomingTabIndex) => {
+        var _a, _b;
+        setActiveTabIndex(incomingTabIndex);
+        const existingPreferences = await getPreference(preferencesKey);
+        setPreference(preferencesKey, {
+            ...existingPreferences,
+            ...path ? {
+                fields: {
+                    ...(existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields) || {},
+                    [path]: {
+                        ...(_a = existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields) === null || _a === void 0 ? void 0 : _a[path],
+                        tabIndex: incomingTabIndex,
+                    },
+                },
+            } : {
+                fields: {
+                    ...existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields,
+                    [tabsPrefKey]: {
+                        ...(_b = existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields) === null || _b === void 0 ? void 0 : _b[tabsPrefKey],
+                        tabIndex: incomingTabIndex,
+                    }
+                },
+            }
+        });
+    }, [indexPath, preferencesKey, getPreference, setPreference, path]);
+    const activeTabConfig = tabs[activeTabIndex];
     return (React.createElement("div", { className: [
             className,
             baseClass,
@@ -20,20 +59,22 @@ const TabsField = (props) => {
         ].filter(Boolean).join(' ') },
         React.createElement(TabsProvider, null,
             React.createElement("div", { className: `${baseClass}__tabs-wrap` },
-                React.createElement("div", { className: `${baseClass}__tabs` }, tabs.map((tab, i) => {
-                    return (React.createElement("button", { key: i, type: "button", className: [
+                React.createElement("div", { className: `${baseClass}__tabs` }, tabs.map((tab, tabIndex) => {
+                    return (React.createElement("button", { key: tabIndex, type: "button", className: [
                             `${baseClass}__tab-button`,
-                            active === i && `${baseClass}__tab-button--active`,
-                        ].filter(Boolean).join(' '), onClick: () => setActive(i) }, tab.label ? tab.label : (tabHasName(tab) && tab.name)));
+                            activeTabIndex === tabIndex && `${baseClass}__tab-button--active`,
+                        ].filter(Boolean).join(' '), onClick: () => {
+                            handleTabChange(tabIndex);
+                        } }, tab.label ? tab.label : (tabHasName(tab) && tab.name)));
                 }))),
-            React.createElement("div", { className: `${baseClass}__content-wrap` }, activeTab && (React.createElement("div", { className: [
+            React.createElement("div", { className: `${baseClass}__content-wrap` }, activeTabConfig && (React.createElement("div", { className: [
                     `${baseClass}__tab`,
-                    `${baseClass}__tab-${toKebabCase(activeTab.label)}`,
+                    `${baseClass}__tab-${toKebabCase(activeTabConfig.label)}`,
                 ].join(' ') },
-                React.createElement(FieldDescription, { className: `${baseClass}__description`, description: activeTab.description }),
-                React.createElement(RenderFields, { key: String(activeTab.label), forceRender: true, readOnly: readOnly, permissions: tabHasName(activeTab) ? permissions[activeTab.name].fields : permissions, fieldTypes: fieldTypes, fieldSchema: activeTab.fields.map((field) => ({
+                React.createElement(FieldDescription, { className: `${baseClass}__description`, description: activeTabConfig.description }),
+                React.createElement(RenderFields, { key: String(activeTabConfig.label), forceRender: true, readOnly: readOnly, permissions: tabHasName(activeTabConfig) ? permissions[activeTabConfig.name].fields : permissions, fieldTypes: fieldTypes, fieldSchema: activeTabConfig.fields.map((field) => ({
                         ...field,
-                        path: `${path ? `${path}.` : ''}${tabHasName(activeTab) ? `${activeTab.name}.` : ''}${fieldAffectsData(field) ? field.name : ''}`,
-                    })) })))))));
+                        path: `${path ? `${path}.` : ''}${tabHasName(activeTabConfig) ? `${activeTabConfig.name}.` : ''}${fieldAffectsData(field) ? field.name : ''}`,
+                    })), indexPath: indexPath })))))));
 };
 export default withCondition(TabsField);

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

@@ -5,4 +5,5 @@ export declare type Props = Omit<TabsField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;
+    indexPath: string;
 };

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

@@ -18,7 +18,10 @@ const TextareaInput = (props) => {
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
-        React.createElement("textarea", { id: `field-${path.replace(/\./gi, '__')}`, value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, name: path, rows: rows }),
+        React.createElement("div", { className: "textarea-outer" },
+            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: placeholder, name: path, rows: rows }))),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default TextareaInput;

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

@@ -1,14 +1,22 @@
-@import '../../../../scss/styles.scss';
+@import "../../../../scss/styles.scss";
 
 .field-type.textarea {
   position: relative;
   margin-bottom: $baseline;
 
-  textarea {
+  .textarea-outer {
     @include formInput();
+    resize: vertical;
     height: auto;
     min-height: base(3);
-    resize: vertical;
+
+    // Scrollbar for giant content
+    max-height: 90vh;
+    overflow: auto;
+
+    @include mid-break {
+      max-height: 60vh;
+    }
   }
 
   &.error {
@@ -16,4 +24,65 @@
       background-color: var(--theme-error-200);
     }
   }
+
+  // This element takes exactly the same dimensions as the clone
+  .textarea-inner {
+    display: block;
+    position: relative;
+    line-height: inherit;
+    flex-grow: 1;
+    box-sizing: border-box;
+    background: none;
+    outline: none;
+  }
+
+  // Unstyle the textarea, the border is rendered on .textarea-outer
+  .textarea-element {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: inherit;
+    padding: inherit;
+    font: inherit;
+    line-height: inherit;
+    color: inherit;
+    background: none;
+    box-sizing: border-box;
+    overflow: auto;
+    resize: none;
+    outline: none;
+    text-transform: inherit;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  // Clone of textarea with same height
+  .textarea-clone {
+    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;
+    pointer-events: none;
+  }
+
+  .textarea-clone::before {
+    content: attr(data-value) " ";
+    visibility: hidden;
+    opacity: 0;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  .textarea-clone::after {
+    content: attr(data-after);
+    opacity: 0.5;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useAuth } from '../../utilities/Auth';
 import { useFormProcessing, useFormSubmitted, useFormModified, useForm, useFormFields } from '../Form/context';
 import { useDocumentInfo } from '../../utilities/DocumentInfo';
@@ -15,24 +15,19 @@ const useField = (options) => {
     const field = useFormFields(([fields]) => fields[path]);
     const dispatchField = useFormFields(([_, dispatch]) => dispatch);
     const { getData, getSiblingData, setModified } = useForm();
+    const value = field === null || field === void 0 ? void 0 : field.value;
     const initialValue = field === null || field === void 0 ? void 0 : field.initialValue;
     const valid = typeof (field === null || field === void 0 ? void 0 : field.valid) === 'boolean' ? field.valid : true;
     const showError = valid === false && submitted;
-    // We store internal value to ensure that components react immediately
-    // to any value changes, therefore preventing "cursor jump" that can be seen
-    // if a user types quickly in an input
-    const [internalValue, setInternalValue] = useState(() => field === null || field === void 0 ? void 0 : field.value);
-    const [internalInitialValue, setInternalInitialValue] = useState(() => field === null || field === void 0 ? void 0 : field.initialValue);
     // Method to return from `useField`, used to
     // update field values from field component(s)
     const setValue = useCallback((e, disableModifyingForm = false) => {
         const val = (e && e.target) ? e.target.value : e;
         if (!modified && !disableModifyingForm) {
             if (typeof setModified === 'function') {
-                setModified(true);
+                Promise.resolve(() => setModified(true));
             }
         }
-        setInternalValue(val);
         dispatchField({
             type: 'UPDATE',
             path,
@@ -51,12 +46,12 @@ const useField = (options) => {
     const result = useMemo(() => ({
         showError,
         errorMessage: field === null || field === void 0 ? void 0 : field.errorMessage,
-        value: internalValue,
+        value,
         formSubmitted: submitted,
         formProcessing: processing,
         setValue,
         initialValue,
-    }), [field, processing, setValue, showError, submitted, internalValue, initialValue]);
+    }), [field, processing, setValue, showError, submitted, value, initialValue]);
     // Throttle the validate function
     useThrottledEffect(() => {
         const validateField = async () => {
@@ -66,7 +61,7 @@ const useField = (options) => {
                 disableFormData,
                 validate,
                 condition,
-                value: internalValue,
+                value,
                 valid: false,
                 errorMessage: undefined,
             };
@@ -77,7 +72,7 @@ const useField = (options) => {
                 siblingData: getSiblingData(path),
                 operation,
             };
-            const validationResult = typeof validate === 'function' ? await validate(internalValue, validateOptions) : true;
+            const validationResult = typeof validate === 'function' ? await validate(value, validateOptions) : true;
             if (typeof validationResult === 'string') {
                 action.errorMessage = validationResult;
                 action.valid = false;
@@ -92,7 +87,7 @@ const useField = (options) => {
         };
         validateField();
     }, 150, [
-        internalValue,
+        value,
         condition,
         disableFormData,
         dispatchField,
@@ -104,12 +99,6 @@ const useField = (options) => {
         user,
         validate,
     ]);
-    useEffect(() => {
-        if (initialValue !== internalInitialValue) {
-            setInternalValue(initialValue);
-            setInternalInitialValue(initialValue);
-        }
-    }, [initialValue, internalInitialValue]);
     return result;
 };
 export default useField;

package/dist/admin/components/modals/StayLoggedIn/index.js

@@ -10,7 +10,8 @@ const modalSlug = 'stay-logged-in';
 const StayLoggedInModal = (props) => {
     const { refreshCookie } = props;
     const history = useHistory();
-    const { routes: { admin } } = useConfig();
+    const config = useConfig();
+    const { routes: { admin }, admin: { logoutRoute } } = config;
     const { toggleModal } = useModal();
     return (React.createElement(Modal, { className: baseClass, slug: "stay-logged-in" },
         React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
@@ -19,7 +20,7 @@ const StayLoggedInModal = (props) => {
             React.createElement("div", { className: `${baseClass}__actions` },
                 React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
                         toggleModal(modalSlug);
-                        history.push(`${admin}/logout`);
+                        history.push(`${admin}${logoutRoute}`);
                     } }, "Log out"),
                 React.createElement(Button, { onClick: () => {
                         refreshCookie();

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

@@ -13,7 +13,7 @@ export const AuthProvider = ({ children }) => {
     const { pathname } = useLocation();
     const { push } = useHistory();
     const config = useConfig();
-    const { admin: { user: userSlug, }, serverURL, routes: { admin, api, }, } = config;
+    const { admin: { user: userSlug, inactivityRoute: logoutInactivityRoute, }, serverURL, routes: { admin, api, }, } = config;
     const exp = user === null || user === void 0 ? void 0 : user.exp;
     const [permissions, setPermissions] = useState();
     const { openModal, closeAllModals } = useModal();
@@ -32,7 +32,7 @@ export const AuthProvider = ({ children }) => {
                 }
                 else {
                     setUser(null);
-                    push(`${admin}/logout-inactivity`);
+                    push(`${admin}${logoutInactivityRoute}`);
                 }
             }, 1000);
         }
@@ -104,7 +104,7 @@ export const AuthProvider = ({ children }) => {
         if (remainingTime > 0) {
             forceLogOut = setTimeout(() => {
                 setUser(null);
-                push(`${admin}/logout-inactivity`);
+                push(`${admin}${logoutInactivityRoute}`);
                 closeAllModals();
             }, Math.min(remainingTime * 1000, maxTimeoutTime));
         }

package/dist/admin/components/utilities/DocumentInfo/types.d.ts

@@ -8,6 +8,8 @@ export declare type ContextType = {
     collection?: SanitizedCollectionConfig;
     global?: SanitizedGlobalConfig;
     type: 'global' | 'collection';
+    /** Slug of the collection or global */
+    slug?: string;
     id?: string | number;
     preferencesKey?: string;
     versions?: PaginatedDocs<Version>;