@payloadcms/ui 3.0.0-beta.13 → 3.0.0-beta.131

package/dist/elements/ArrayAction/index.js

@@ -1,63 +1,108 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Chevron } from '../../icons/Chevron/index.js';
-import { Copy } from '../../icons/Copy/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { CopyIcon } from '../../icons/Copy/index.js';
 import { MoreIcon } from '../../icons/More/index.js';
-import { Plus } from '../../icons/Plus/index.js';
-import { X } from '../../icons/X/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
+import { XIcon } from '../../icons/X/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { PopupList } from '../Popup/index.js';
-import { Popup } from '../Popup/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
+import './index.scss';
 const baseClass = 'array-actions';
-export const ArrayAction = ({ addRow, duplicateRow, hasMaxRows, index, moveRow, removeRow, rowCount })=>{
-    const { t } = useTranslation();
-    return /*#__PURE__*/ React.createElement(Popup, {
-        button: /*#__PURE__*/ React.createElement(MoreIcon, null),
-        buttonClassName: `${baseClass}__button`,
-        className: baseClass,
-        horizontalAlign: "center",
-        render: ({ close })=>{
-            return /*#__PURE__*/ React.createElement(PopupList.ButtonGroup, {
-                buttonSize: "small"
-            }, index !== 0 && /*#__PURE__*/ React.createElement(PopupList.Button, {
-                className: `${baseClass}__action ${baseClass}__move-up`,
-                onClick: ()=>{
-                    moveRow(index, index - 1);
-                    close();
-                }
-            }, /*#__PURE__*/ React.createElement("div", {
-                className: `${baseClass}__action-chevron`
-            }, /*#__PURE__*/ React.createElement(Chevron, {
+export const ArrayAction = t0 => {
+  const $ = _c(10);
+  const {
+    addRow,
+    duplicateRow,
+    hasMaxRows,
+    index,
+    isSortable,
+    moveRow,
+    removeRow,
+    rowCount
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== isSortable || $[1] !== index || $[2] !== moveRow || $[3] !== t || $[4] !== rowCount || $[5] !== hasMaxRows || $[6] !== addRow || $[7] !== duplicateRow || $[8] !== removeRow) {
+    t1 = _jsx(Popup, {
+      button: _jsx(MoreIcon, {}),
+      buttonClassName: `${baseClass}__button`,
+      className: baseClass,
+      horizontalAlign: "center",
+      render: t2 => {
+        const {
+          close
+        } = t2;
+        return _jsxs(PopupList.ButtonGroup, {
+          buttonSize: "small",
+          children: [isSortable && index !== 0 && _jsxs(PopupList.Button, {
+            className: `${baseClass}__action ${baseClass}__move-up`,
+            onClick: () => {
+              moveRow(index, index - 1);
+              close();
+            },
+            children: [_jsx("div", {
+              className: `${baseClass}__action-chevron`,
+              children: _jsx(ChevronIcon, {
                 direction: "up"
-            })), t('general:moveUp')), index < rowCount - 1 && /*#__PURE__*/ React.createElement(PopupList.Button, {
-                className: `${baseClass}__action`,
-                onClick: ()=>{
-                    moveRow(index, index + 1);
-                    close();
-                }
-            }, /*#__PURE__*/ React.createElement("div", {
-                className: `${baseClass}__action-chevron`
-            }, /*#__PURE__*/ React.createElement(Chevron, null)), t('general:moveDown')), !hasMaxRows && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(PopupList.Button, {
-                className: `${baseClass}__action ${baseClass}__add`,
-                onClick: ()=>{
-                    addRow(index + 1);
-                    close();
-                }
-            }, /*#__PURE__*/ React.createElement(Plus, null), t('general:addBelow')), /*#__PURE__*/ React.createElement(PopupList.Button, {
-                className: `${baseClass}__action ${baseClass}__duplicate`,
-                onClick: ()=>{
-                    duplicateRow(index);
-                    close();
-                }
-            }, /*#__PURE__*/ React.createElement(Copy, null), t('general:duplicate'))), /*#__PURE__*/ React.createElement(PopupList.Button, {
-                className: `${baseClass}__action ${baseClass}__remove`,
-                onClick: ()=>{
-                    removeRow(index);
-                    close();
-                }
-            }, /*#__PURE__*/ React.createElement(X, null), t('general:remove')));
-        },
-        size: "medium"
+              })
+            }), t("general:moveUp")]
+          }), isSortable && index < rowCount - 1 && _jsxs(PopupList.Button, {
+            className: `${baseClass}__action`,
+            onClick: () => {
+              moveRow(index, index + 1);
+              close();
+            },
+            children: [_jsx("div", {
+              className: `${baseClass}__action-chevron`,
+              children: _jsx(ChevronIcon, {})
+            }), t("general:moveDown")]
+          }), !hasMaxRows && _jsxs(React.Fragment, {
+            children: [_jsxs(PopupList.Button, {
+              className: `${baseClass}__action ${baseClass}__add`,
+              onClick: () => {
+                addRow(index + 1);
+                close();
+              },
+              children: [_jsx(PlusIcon, {}), t("general:addBelow")]
+            }), _jsxs(PopupList.Button, {
+              className: `${baseClass}__action ${baseClass}__duplicate`,
+              onClick: () => {
+                duplicateRow(index);
+                close();
+              },
+              children: [_jsx(CopyIcon, {}), t("general:duplicate")]
+            })]
+          }), _jsxs(PopupList.Button, {
+            className: `${baseClass}__action ${baseClass}__remove`,
+            onClick: () => {
+              removeRow(index);
+              close();
+            },
+            children: [_jsx(XIcon, {}), t("general:remove")]
+          })]
+        });
+      },
+      size: "medium"
     });
+    $[0] = isSortable;
+    $[1] = index;
+    $[2] = moveRow;
+    $[3] = t;
+    $[4] = rowCount;
+    $[5] = hasMaxRows;
+    $[6] = addRow;
+    $[7] = duplicateRow;
+    $[8] = removeRow;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/ArrayAction/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ArrayAction/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { Copy } from '../../icons/Copy/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { Plus } from '../../icons/Plus/index.js'\nimport { X } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { PopupList } from '../Popup/index.js'\nimport { Popup } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'array-actions'\n\nexport type Props = {\n  addRow: (current: number, blockType?: string) => void\n  duplicateRow: (current: number) => void\n  hasMaxRows: boolean\n  index: number\n  moveRow: (from: number, to: number) => void\n  removeRow: (index: number) => void\n  rowCount: number\n}\n\nexport const ArrayAction: React.FC<Props> = ({\n  addRow,\n  duplicateRow,\n  hasMaxRows,\n  index,\n  moveRow,\n  removeRow,\n  rowCount,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      className={baseClass}\n      horizontalAlign=\"center\"\n      render={({ close }) => {\n        return (\n          <PopupList.ButtonGroup buttonSize=\"small\">\n            {index !== 0 && (\n              <PopupList.Button\n                className={`${baseClass}__action ${baseClass}__move-up`}\n                onClick={() => {\n                  moveRow(index, index - 1)\n                  close()\n                }}\n              >\n                <div className={`${baseClass}__action-chevron`}>\n                  <Chevron direction=\"up\" />\n                </div>\n                {t('general:moveUp')}\n              </PopupList.Button>\n            )}\n            {index < rowCount - 1 && (\n              <PopupList.Button\n                className={`${baseClass}__action`}\n                onClick={() => {\n                  moveRow(index, index + 1)\n                  close()\n                }}\n              >\n                <div className={`${baseClass}__action-chevron`}>\n                  <Chevron />\n                </div>\n                {t('general:moveDown')}\n              </PopupList.Button>\n            )}\n            {!hasMaxRows && (\n              <React.Fragment>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__add`}\n                  onClick={() => {\n                    addRow(index + 1)\n                    close()\n                  }}\n                >\n                  <Plus />\n                  {t('general:addBelow')}\n                </PopupList.Button>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__duplicate`}\n                  onClick={() => {\n                    duplicateRow(index)\n                    close()\n                  }}\n                >\n                  <Copy />\n                  {t('general:duplicate')}\n                </PopupList.Button>\n              </React.Fragment>\n            )}\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__remove`}\n              onClick={() => {\n                removeRow(index)\n                close()\n              }}\n            >\n              <X />\n              {t('general:remove')}\n            </PopupList.Button>\n          </PopupList.ButtonGroup>\n        )\n      }}\n      size=\"medium\"\n    />\n  )\n}\n"],"names":["React","Chevron","Copy","MoreIcon","Plus","X","useTranslation","PopupList","Popup","baseClass","ArrayAction","addRow","duplicateRow","hasMaxRows","index","moveRow","removeRow","rowCount","t","button","buttonClassName","className","horizontalAlign","render","close","ButtonGroup","buttonSize","Button","onClick","div","direction","Fragment","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,QAAQ,QAAQ,4BAA2B;AACpD,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,CAAC,QAAQ,yBAAwB;AAC1C,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,SAAS,QAAQ,oBAAmB;AAC7C,SAASC,KAAK,QAAQ,oBAAmB;AAGzC,MAAMC,YAAY;AAYlB,OAAO,MAAMC,cAA+B,CAAC,EAC3CC,MAAM,EACNC,YAAY,EACZC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,QAAQ,EACT;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGZ;IAEd,qBACE,oBAACE;QACCW,sBAAQ,oBAAChB;QACTiB,iBAAiB,CAAC,EAAEX,UAAU,QAAQ,CAAC;QACvCY,WAAWZ;QACXa,iBAAgB;QAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE;YAChB,qBACE,oBAACjB,UAAUkB,WAAW;gBAACC,YAAW;eAC/BZ,UAAU,mBACT,oBAACP,UAAUoB,MAAM;gBACfN,WAAW,CAAC,EAAEZ,UAAU,SAAS,EAAEA,UAAU,SAAS,CAAC;gBACvDmB,SAAS;oBACPb,QAAQD,OAAOA,QAAQ;oBACvBU;gBACF;6BAEA,oBAACK;gBAAIR,WAAW,CAAC,EAAEZ,UAAU,gBAAgB,CAAC;6BAC5C,oBAACR;gBAAQ6B,WAAU;iBAEpBZ,EAAE,oBAGNJ,QAAQG,WAAW,mBAClB,oBAACV,UAAUoB,MAAM;gBACfN,WAAW,CAAC,EAAEZ,UAAU,QAAQ,CAAC;gBACjCmB,SAAS;oBACPb,QAAQD,OAAOA,QAAQ;oBACvBU;gBACF;6BAEA,oBAACK;gBAAIR,WAAW,CAAC,EAAEZ,UAAU,gBAAgB,CAAC;6BAC5C,oBAACR,iBAEFiB,EAAE,sBAGN,CAACL,4BACA,oBAACb,MAAM+B,QAAQ,sBACb,oBAACxB,UAAUoB,MAAM;gBACfN,WAAW,CAAC,EAAEZ,UAAU,SAAS,EAAEA,UAAU,KAAK,CAAC;gBACnDmB,SAAS;oBACPjB,OAAOG,QAAQ;oBACfU;gBACF;6BAEA,oBAACpB,aACAc,EAAE,oCAEL,oBAACX,UAAUoB,MAAM;gBACfN,WAAW,CAAC,EAAEZ,UAAU,SAAS,EAAEA,UAAU,WAAW,CAAC;gBACzDmB,SAAS;oBACPhB,aAAaE;oBACbU;gBACF;6BAEA,oBAACtB,aACAgB,EAAE,sCAIT,oBAACX,UAAUoB,MAAM;gBACfN,WAAW,CAAC,EAAEZ,UAAU,SAAS,EAAEA,UAAU,QAAQ,CAAC;gBACtDmB,SAAS;oBACPZ,UAAUF;oBACVU;gBACF;6BAEA,oBAACnB,UACAa,EAAE;QAIX;QACAc,MAAK;;AAGX,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CopyIcon","MoreIcon","PlusIcon","XIcon","useTranslation","Popup","PopupList","baseClass","ArrayAction","t0","$","addRow","duplicateRow","hasMaxRows","index","isSortable","moveRow","removeRow","rowCount","t","t1","_jsx","button","buttonClassName","className","horizontalAlign","render","t2","close","_jsxs","ButtonGroup","buttonSize","children","Button","onClick","direction","Fragment"],"sources":["../../../src/elements/ArrayAction/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'array-actions'\n\nexport type Props = {\n  addRow: (current: number, blockType?: string) => Promise<void> | void\n  duplicateRow: (current: number) => void\n  hasMaxRows: boolean\n  index: number\n  isSortable?: boolean\n  moveRow: (from: number, to: number) => void\n  removeRow: (index: number) => void\n  rowCount: number\n}\n\nexport const ArrayAction: React.FC<Props> = ({\n  addRow,\n  duplicateRow,\n  hasMaxRows,\n  index,\n  isSortable,\n  moveRow,\n  removeRow,\n  rowCount,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      className={baseClass}\n      horizontalAlign=\"center\"\n      render={({ close }) => {\n        return (\n          <PopupList.ButtonGroup buttonSize=\"small\">\n            {isSortable && index !== 0 && (\n              <PopupList.Button\n                className={`${baseClass}__action ${baseClass}__move-up`}\n                onClick={() => {\n                  moveRow(index, index - 1)\n                  close()\n                }}\n              >\n                <div className={`${baseClass}__action-chevron`}>\n                  <ChevronIcon direction=\"up\" />\n                </div>\n                {t('general:moveUp')}\n              </PopupList.Button>\n            )}\n            {isSortable && index < rowCount - 1 && (\n              <PopupList.Button\n                className={`${baseClass}__action`}\n                onClick={() => {\n                  moveRow(index, index + 1)\n                  close()\n                }}\n              >\n                <div className={`${baseClass}__action-chevron`}>\n                  <ChevronIcon />\n                </div>\n                {t('general:moveDown')}\n              </PopupList.Button>\n            )}\n            {!hasMaxRows && (\n              <React.Fragment>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__add`}\n                  onClick={() => {\n                    void addRow(index + 1)\n                    close()\n                  }}\n                >\n                  <PlusIcon />\n                  {t('general:addBelow')}\n                </PopupList.Button>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__duplicate`}\n                  onClick={() => {\n                    duplicateRow(index)\n                    close()\n                  }}\n                >\n                  <CopyIcon />\n                  {t('general:duplicate')}\n                </PopupList.Button>\n              </React.Fragment>\n            )}\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__remove`}\n              onClick={() => {\n                removeRow(index)\n                close()\n              }}\n            >\n              <XIcon />\n              {t('general:remove')}\n            </PopupList.Button>\n          </PopupList.ButtonGroup>\n        )\n      }}\n      size=\"medium\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ArrayAction/index.scss

@@ -1,46 +1,35 @@
 @import '../../scss/styles.scss';
 
-.array-actions {
-  &__button {
-    @extend %btn-reset;
-    cursor: pointer;
-    border-radius: 100px;
-
-    &:hover {
-      background: var(--theme-elevation-0);
+@layer payload-default {
+  .array-actions {
+    &__button {
+      @extend %btn-reset;
+      cursor: pointer;
+      border-radius: 100px;
+
+      &:hover {
+        background: var(--theme-elevation-0);
+      }
     }
-  }
 
-  &__actions {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
+    &__actions {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
 
-  &__action {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    align-items: center;
+    &__action {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      align-items: center;
 
-    svg {
-      position: relative;
+      svg {
+        position: relative;
 
-      .stroke {
-        stroke-width: 1px;
+        .stroke {
+          stroke-width: 1px;
+        }
       }
     }
   }
-
-  &__move-up {
-    margin-bottom: 2px;
-  }
-
-  &__move-down {
-    margin-top: 6px;
-    margin-bottom: 2px;
-  }
-
-  &__action-chevron {
-    padding: 0 calc(var(--base) / 4);
-  }
 }

package/dist/elements/Autosave/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload/types';
+import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload';
 import React from 'react';
 import './index.scss';
 export type Props = {

package/dist/elements/Autosave/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/E,OAAO,KAAsC,MAAM,OAAO,CAAA;AAU1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,qBAAqB,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkHpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAkB1D,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,qBAAqB,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqPpC,CAAA"}

package/dist/elements/Autosave/index.js

@@ -1,112 +1,219 @@
 'use client';
-import React, { useEffect, useRef, useState } from 'react';
-import { useAllFormFields, useFormModified } from '../../forms/Form/context.js';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { versionDefaults } from 'payload/shared';
+import React, { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { useAllFormFields, useForm, useFormModified, useFormSubmitted } from '../../forms/Form/context.js';
 import { useDebounce } from '../../hooks/useDebounce.js';
+import { useIgnoredEffect } from '../../hooks/useIgnoredEffect.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { useDocumentEvents } from '../../providers/DocumentEvents/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { formatTimeToNow } from '../../utilities/formatDate.js';
-import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js';
+import { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js';
+import './index.scss';
 const baseClass = 'autosave';
-export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdatedAt })=>{
-    const { routes: { api }, serverURL } = useConfig();
-    const { docConfig, getVersions, versions } = useDocumentInfo();
-    const versionsConfig = docConfig?.versions;
-    const [fields] = useAllFormFields();
-    const modified = useFormModified();
-    const { code: locale } = useLocale();
-    const { i18n, t } = useTranslation();
-    let interval = 800;
-    if (versionsConfig.drafts && versionsConfig?.drafts?.autosave) interval = versionsConfig.drafts.autosave.interval;
-    const [saving, setSaving] = useState(false);
-    const [lastSaved, setLastSaved] = useState();
-    const debouncedFields = useDebounce(fields, interval);
-    const fieldRef = useRef(fields);
-    const modifiedRef = useRef(modified);
-    const localeRef = useRef(locale);
-    // Store fields in ref so the autosave func
-    // can always retrieve the most to date copies
-    // after the timeout has executed
-    fieldRef.current = fields;
-    // Store modified in ref so the autosave func
-    // can bail out if modified becomes false while
-    // timing out during autosave
-    modifiedRef.current = modified;
-    // Store locale in ref so the autosave func
-    // can always retrieve the most to date locale
-    localeRef.current = locale;
-    // When debounced fields change, autosave
-    useEffect(()=>{
-        const autosave = ()=>{
-            if (modified) {
-                setSaving(true);
-                let url;
-                let method;
-                if (collection && id) {
-                    url = `${serverURL}${api}/${collection.slug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`;
-                    method = 'PATCH';
+// The minimum time the saving state should be shown
+const minimumAnimationTime = 1000;
+export const Autosave = ({
+  id,
+  collection,
+  global: globalDoc
+}) => {
+  const {
+    config: {
+      routes: {
+        api
+      },
+      serverURL
+    }
+  } = useConfig();
+  const {
+    docConfig,
+    incrementVersionCount,
+    lastUpdateTime,
+    mostRecentVersionIsAutosaved,
+    setLastUpdateTime,
+    setMostRecentVersionIsAutosaved
+  } = useDocumentInfo();
+  const {
+    reportUpdate
+  } = useDocumentEvents();
+  const {
+    dispatchFields,
+    setSubmitted
+  } = useForm();
+  const submitted = useFormSubmitted();
+  const versionsConfig = docConfig?.versions;
+  const [fields] = useAllFormFields();
+  const formModified = useFormModified();
+  const {
+    code: locale
+  } = useLocale();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  let interval = versionDefaults.autosaveInterval;
+  if (versionsConfig.drafts && versionsConfig.drafts.autosave) {
+    interval = versionsConfig.drafts.autosave.interval;
+  }
+  const [saving, setSaving] = useState(false);
+  const debouncedFields = useDebounce(fields, interval);
+  const modified = useDebounce(formModified, interval);
+  const fieldRef = useRef(fields);
+  const modifiedRef = useRef(modified);
+  const localeRef = useRef(locale);
+  const debouncedRef = useRef(debouncedFields);
+  debouncedRef.current = debouncedFields;
+  // Store fields in ref so the autosave func
+  // can always retrieve the most to date copies
+  // after the timeout has executed
+  fieldRef.current = fields;
+  // Store modified in ref so the autosave func
+  // can bail out if modified becomes false while
+  // timing out during autosave
+  modifiedRef.current = modified;
+  // Store locale in ref so the autosave func
+  // can always retrieve the most to date locale
+  localeRef.current = locale;
+  // When debounced fields change, autosave
+  useIgnoredEffect(() => {
+    const abortController = new AbortController();
+    let autosaveTimeout = undefined;
+    // We need to log the time in order to figure out if we need to trigger the state off later
+    let startTimestamp = undefined;
+    let endTimestamp = undefined;
+    const autosave = () => {
+      if (modified) {
+        startTimestamp = new Date().getTime();
+        setSaving(true);
+        let url;
+        let method;
+        let entitySlug;
+        if (collection && id) {
+          entitySlug = collection.slug;
+          url = `${serverURL}${api}/${entitySlug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`;
+          method = 'PATCH';
+        }
+        if (globalDoc) {
+          entitySlug = globalDoc.slug;
+          url = `${serverURL}${api}/globals/${entitySlug}?draft=true&autosave=true&locale=${localeRef.current}`;
+          method = 'POST';
+        }
+        if (url) {
+          if (modifiedRef.current) {
+            const {
+              data,
+              valid
+            } = {
+              ...reduceFieldsToValuesWithValidation(fieldRef.current, true)
+            };
+            data._status = 'draft';
+            const skipSubmission = submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate;
+            if (!skipSubmission) {
+              void fetch(url, {
+                body: JSON.stringify(data),
+                credentials: 'include',
+                headers: {
+                  'Accept-Language': i18n.language,
+                  'Content-Type': 'application/json'
+                },
+                method,
+                signal: abortController.signal
+              }).then(res => {
+                const newDate = new Date();
+                // We need to log the time in order to figure out if we need to trigger the state off later
+                endTimestamp = newDate.getTime();
+                if (res.status === 200) {
+                  setLastUpdateTime(newDate.getTime());
+                  reportUpdate({
+                    id,
+                    entitySlug,
+                    updatedAt: newDate.toISOString()
+                  });
+                  if (!mostRecentVersionIsAutosaved) {
+                    incrementVersionCount();
+                    setMostRecentVersionIsAutosaved(true);
+                  }
+                } else {
+                  return res.json();
                 }
-                if (globalDoc) {
-                    url = `${serverURL}${api}/globals/${globalDoc.slug}?draft=true&autosave=true&locale=${localeRef.current}`;
-                    method = 'POST';
+              }).then(json => {
+                if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json?.errors) {
+                  if (Array.isArray(json.errors)) {
+                    const [fieldErrors, nonFieldErrors] = json.errors.reduce(([fieldErrs, nonFieldErrs], err) => {
+                      const newFieldErrs = [];
+                      const newNonFieldErrs = [];
+                      if (err?.message) {
+                        newNonFieldErrs.push(err);
+                      }
+                      if (Array.isArray(err?.data)) {
+                        err.data.forEach(dataError => {
+                          if (dataError?.field) {
+                            newFieldErrs.push(dataError);
+                          } else {
+                            newNonFieldErrs.push(dataError);
+                          }
+                        });
+                      }
+                      return [[...fieldErrs, ...newFieldErrs], [...nonFieldErrs, ...newNonFieldErrs]];
+                    }, [[], []]);
+                    dispatchFields({
+                      type: 'ADD_SERVER_ERRORS',
+                      errors: fieldErrors
+                    });
+                    nonFieldErrors.forEach(err_0 => {
+                      toast.error(err_0.message || i18n.t('error:unknown'));
+                    });
+                    setSubmitted(true);
+                    setSaving(false);
+                    return;
+                  }
                 }
-                if (url) {
-                    setTimeout(async ()=>{
-                        if (modifiedRef.current) {
-                            const body = {
-                                ...reduceFieldsToValues(fieldRef.current, true),
-                                _status: 'draft'
-                            };
-                            const res = await fetch(url, {
-                                body: JSON.stringify(body),
-                                credentials: 'include',
-                                headers: {
-                                    'Accept-Language': i18n.language,
-                                    'Content-Type': 'application/json'
-                                },
-                                method
-                            });
-                            if (res.status === 200) {
-                                setLastSaved(new Date().getTime());
-                                void getVersions();
-                            }
-                        }
-                        setSaving(false);
-                    }, 1000);
+              }).then(() => {
+                // If request was faster than minimum animation time, animate the difference
+                if (endTimestamp - startTimestamp < minimumAnimationTime) {
+                  autosaveTimeout = setTimeout(() => {
+                    setSaving(false);
+                  }, minimumAnimationTime - (endTimestamp - startTimestamp));
+                } else {
+                  setSaving(false);
                 }
+              });
             }
-        };
-        void autosave();
-    }, [
-        i18n,
-        debouncedFields,
-        modified,
-        serverURL,
-        api,
-        collection,
-        globalDoc,
-        id,
-        getVersions
-    ]);
-    useEffect(()=>{
-        if (versions?.docs?.[0]) {
-            setLastSaved(new Date(versions.docs[0].updatedAt).getTime());
-        } else if (publishedDocUpdatedAt) {
-            setLastSaved(new Date(publishedDocUpdatedAt).getTime());
+          }
         }
-    }, [
-        publishedDocUpdatedAt,
-        versions
-    ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, saving && t('general:saving'), !saving && lastSaved && /*#__PURE__*/ React.createElement(React.Fragment, null, t('version:lastSavedAgo', {
+      }
+    };
+    void autosave();
+    return () => {
+      if (autosaveTimeout) {
+        clearTimeout(autosaveTimeout);
+      }
+      if (abortController.signal) {
+        try {
+          abortController.abort('Autosave closed early.');
+        } catch (error) {
+          // swallow error
+        }
+      }
+      setSaving(false);
+    };
+  }, [debouncedFields], [api, collection, dispatchFields, globalDoc, i18n, id, interval, modified, reportUpdate, serverURL, setSubmitted, versionsConfig?.drafts, submitted, setLastUpdateTime, mostRecentVersionIsAutosaved, incrementVersionCount, setMostRecentVersionIsAutosaved]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [saving && t('general:saving'), !saving && Boolean(lastUpdateTime) && /*#__PURE__*/_jsx(React.Fragment, {
+      children: t('version:lastSavedAgo', {
         distance: formatTimeToNow({
-            date: lastSaved,
-            i18n
+          date: lastUpdateTime,
+          i18n
         })
-    })));
+      })
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map