@payloadcms/ui 3.25.0 → 3.26.0

package/dist/fields/Upload/HasMany/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAE5C,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE;QACjB,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,UAAU,CAAA;KAClB,EAAE,CAAA;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,KAAK,qBAsGlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAE5C,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE;QACjB,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,UAAU,CAAA;KAClB,EAAE,CAAA;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,KAAK,qBA+GlD"}

package/dist/fields/Upload/HasMany/index.js

@@ -87,13 +87,20 @@ export function UploadComponentHasMany(props) {
           value: value_0
         } = t7;
         const id = String(value_0.id);
-        const url = value_0.thumbnailURL || value_0.url;
         let src;
-        if (url) {
+        let thumbnailSrc;
+        if (value_0.url) {
           try {
-            src = new URL(url, serverURL).toString();
+            src = new URL(value_0.url, serverURL).toString();
           } catch {
-            src = `${serverURL}${url}`;
+            src = `${serverURL}${value_0.url}`;
+          }
+        }
+        if (value_0.thumbnailURL) {
+          try {
+            thumbnailSrc = new URL(value_0.thumbnailURL, serverURL).toString();
+          } catch {
+            thumbnailSrc = `${serverURL}${value_0.thumbnailURL}`;
           }
         }
         return _jsx(DraggableSortableItem, {
@@ -126,6 +133,7 @@ export function UploadComponentHasMany(props) {
                 onRemove: () => removeItem(index_0),
                 reloadDoc,
                 src,
+                thumbnailSrc: thumbnailSrc || src,
                 withMeta: false,
                 x: value_0?.width,
                 y: value_0?.height

package/dist/fields/Upload/HasMany/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","DraggableSortableItem","DraggableSortable","DragHandleIcon","RelationshipContent","UploadCard","baseClass","UploadComponentHasMany","props","$","className","fileDocs","isSortable","onRemove","onReorder","readonly","reloadDoc","serverURL","t0","moveFromIndex","moveToIndex","updatedArray","item","splice","moveRow","t1","index","updatedArray_0","length","removeItem","t2","filter","Boolean","t3","join","t4","t5","t6","moveFromIndex_0","moveToIndex_0","t7","index_0","relationTo","value","value_0","id","String","url","thumbnailURL","src","toString","_jsx","disabled","children","draggableSortableItemProps","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","_jsxs","size","attributes","listeners","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","mimeType","withMeta","x","width","y","height","ids","map","_temp","onDragEnd"],"sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"sourcesContent":["'use client'\nimport type { JsonObject } from 'payload'\n\nimport React from 'react'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../../../elements/DraggableSortable/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\n\nconst baseClass = 'upload upload--has-many'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport './index.scss'\n\ntype Props = {\n  readonly className?: string\n  readonly fileDocs: {\n    relationTo: string\n    value: JsonObject\n  }[]\n  readonly isSortable?: boolean\n  readonly onRemove?: (value) => void\n  readonly onReorder?: (value) => void\n  readonly readonly?: boolean\n  readonly reloadDoc: ReloadDoc\n  readonly serverURL: string\n}\n\nexport function UploadComponentHasMany(props: Props) {\n  const { className, fileDocs, isSortable, onRemove, onReorder, readonly, reloadDoc, serverURL } =\n    props\n\n  const moveRow = React.useCallback(\n    (moveFromIndex: number, moveToIndex: number) => {\n      if (moveFromIndex === moveToIndex) {\n        return\n      }\n\n      const updatedArray = [...fileDocs]\n      const [item] = updatedArray.splice(moveFromIndex, 1)\n\n      updatedArray.splice(moveToIndex, 0, item)\n\n      onReorder(updatedArray)\n    },\n    [fileDocs, onReorder],\n  )\n\n  const removeItem = React.useCallback(\n    (index: number) => {\n      const updatedArray = [...(fileDocs || [])]\n      updatedArray.splice(index, 1)\n      onRemove(updatedArray.length === 0 ? [] : updatedArray)\n    },\n    [fileDocs, onRemove],\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <DraggableSortable\n        className={`${baseClass}__draggable-rows`}\n        ids={fileDocs?.map(({ value }) => String(value.id))}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}\n      >\n        {fileDocs.map(({ relationTo, value }, index) => {\n          const id = String(value.id)\n          const url: string = value.thumbnailURL || value.url\n          let src: string\n\n          if (url) {\n            try {\n              src = new URL(url, serverURL).toString()\n            } catch {\n              src = `${serverURL}${url}`\n            }\n          }\n\n          return (\n            <DraggableSortableItem disabled={!isSortable || readonly} id={id} key={id}>\n              {(draggableSortableItemProps) => (\n                <div\n                  className={[\n                    `${baseClass}__dragItem`,\n                    draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  ref={draggableSortableItemProps.setNodeRef}\n                  style={{\n                    transform: draggableSortableItemProps.transform,\n                    transition: draggableSortableItemProps.transition,\n                    zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n                  }}\n                >\n                  <UploadCard size=\"small\">\n                    {draggableSortableItemProps && (\n                      <div\n                        className={`${baseClass}__drag`}\n                        {...draggableSortableItemProps.attributes}\n                        {...draggableSortableItemProps.listeners}\n                      >\n                        <DragHandleIcon />\n                      </div>\n                    )}\n\n                    <RelationshipContent\n                      allowEdit={!readonly}\n                      allowRemove={!readonly}\n                      alt={(value?.alt || value?.filename) as string}\n                      byteSize={value.filesize as number}\n                      collectionSlug={relationTo}\n                      filename={value.filename as string}\n                      id={id}\n                      mimeType={value?.mimeType as string}\n                      onRemove={() => removeItem(index)}\n                      reloadDoc={reloadDoc}\n                      src={src}\n                      withMeta={false}\n                      x={value?.width as number}\n                      y={value?.height as number}\n                    />\n                  </UploadCard>\n                </div>\n              )}\n            </DraggableSortableItem>\n          )\n        })}\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","DraggableSortableItem","DraggableSortable","DragHandleIcon","RelationshipContent","UploadCard","baseClass","UploadComponentHasMany","props","$","className","fileDocs","isSortable","onRemove","onReorder","readonly","reloadDoc","serverURL","t0","moveFromIndex","moveToIndex","updatedArray","item","splice","moveRow","t1","index","updatedArray_0","length","removeItem","t2","filter","Boolean","t3","join","t4","t5","t6","moveFromIndex_0","moveToIndex_0","t7","index_0","relationTo","value","value_0","id","String","src","thumbnailSrc","url","toString","thumbnailURL","_jsx","disabled","children","draggableSortableItemProps","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","_jsxs","size","attributes","listeners","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","mimeType","withMeta","x","width","y","height","ids","map","_temp","onDragEnd"],"sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"sourcesContent":["'use client'\nimport type { JsonObject } from 'payload'\n\nimport React from 'react'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../../../elements/DraggableSortable/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\n\nconst baseClass = 'upload upload--has-many'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport './index.scss'\n\ntype Props = {\n  readonly className?: string\n  readonly fileDocs: {\n    relationTo: string\n    value: JsonObject\n  }[]\n  readonly isSortable?: boolean\n  readonly onRemove?: (value) => void\n  readonly onReorder?: (value) => void\n  readonly readonly?: boolean\n  readonly reloadDoc: ReloadDoc\n  readonly serverURL: string\n}\n\nexport function UploadComponentHasMany(props: Props) {\n  const { className, fileDocs, isSortable, onRemove, onReorder, readonly, reloadDoc, serverURL } =\n    props\n\n  const moveRow = React.useCallback(\n    (moveFromIndex: number, moveToIndex: number) => {\n      if (moveFromIndex === moveToIndex) {\n        return\n      }\n\n      const updatedArray = [...fileDocs]\n      const [item] = updatedArray.splice(moveFromIndex, 1)\n\n      updatedArray.splice(moveToIndex, 0, item)\n\n      onReorder(updatedArray)\n    },\n    [fileDocs, onReorder],\n  )\n\n  const removeItem = React.useCallback(\n    (index: number) => {\n      const updatedArray = [...(fileDocs || [])]\n      updatedArray.splice(index, 1)\n      onRemove(updatedArray.length === 0 ? [] : updatedArray)\n    },\n    [fileDocs, onRemove],\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <DraggableSortable\n        className={`${baseClass}__draggable-rows`}\n        ids={fileDocs?.map(({ value }) => String(value.id))}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}\n      >\n        {fileDocs.map(({ relationTo, value }, index) => {\n          const id = String(value.id)\n          let src: string\n          let thumbnailSrc: string\n\n          if (value.url) {\n            try {\n              src = new URL(value.url, serverURL).toString()\n            } catch {\n              src = `${serverURL}${value.url}`\n            }\n          }\n\n          if (value.thumbnailURL) {\n            try {\n              thumbnailSrc = new URL(value.thumbnailURL, serverURL).toString()\n            } catch {\n              thumbnailSrc = `${serverURL}${value.thumbnailURL}`\n            }\n          }\n\n          return (\n            <DraggableSortableItem disabled={!isSortable || readonly} id={id} key={id}>\n              {(draggableSortableItemProps) => (\n                <div\n                  className={[\n                    `${baseClass}__dragItem`,\n                    draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  ref={draggableSortableItemProps.setNodeRef}\n                  style={{\n                    transform: draggableSortableItemProps.transform,\n                    transition: draggableSortableItemProps.transition,\n                    zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n                  }}\n                >\n                  <UploadCard size=\"small\">\n                    {draggableSortableItemProps && (\n                      <div\n                        className={`${baseClass}__drag`}\n                        {...draggableSortableItemProps.attributes}\n                        {...draggableSortableItemProps.listeners}\n                      >\n                        <DragHandleIcon />\n                      </div>\n                    )}\n\n                    <RelationshipContent\n                      allowEdit={!readonly}\n                      allowRemove={!readonly}\n                      alt={(value?.alt || value?.filename) as string}\n                      byteSize={value.filesize as number}\n                      collectionSlug={relationTo}\n                      filename={value.filename as string}\n                      id={id}\n                      mimeType={value?.mimeType as string}\n                      onRemove={() => removeItem(index)}\n                      reloadDoc={reloadDoc}\n                      src={src}\n                      thumbnailSrc={thumbnailSrc || src}\n                      withMeta={false}\n                      x={value?.width as number}\n                      y={value?.height as number}\n                    />\n                  </UploadCard>\n                </div>\n              )}\n            </DraggableSortableItem>\n          )\n        })}\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Upload/HasOne/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAI5C,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE;QAChB,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,UAAU,CAAA;KAClB,CAAA;IACD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,KAAK,qBAiCjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAI5C,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE;QAChB,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,UAAU,CAAA;KAClB,CAAA;IACD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,KAAK,qBA4CjD"}

package/dist/fields/Upload/HasOne/index.js

@@ -20,12 +20,21 @@ export function UploadComponentHasOne(props) {
     value
   } = fileDoc;
   const id = String(value?.id);
-  const url = value.thumbnailURL || value.url;
   let src;
-  try {
-    src = new URL(url, serverURL).toString();
-  } catch {
-    src = `${serverURL}${url}`;
+  let thumbnailSrc;
+  if (value.url) {
+    try {
+      src = new URL(value.url, serverURL).toString();
+    } catch {
+      src = `${serverURL}${value.url}`;
+    }
+  }
+  if (value.thumbnailURL) {
+    try {
+      thumbnailSrc = new URL(value.thumbnailURL, serverURL).toString();
+    } catch {
+      thumbnailSrc = `${serverURL}${value.thumbnailURL}`;
+    }
   }
   return /*#__PURE__*/_jsx(UploadCard, {
     className: [baseClass, className].filter(Boolean).join(' '),
@@ -41,6 +50,7 @@ export function UploadComponentHasOne(props) {
       onRemove: onRemove,
       reloadDoc: reloadDoc,
       src: src,
+      thumbnailSrc: thumbnailSrc || src,
       x: value?.width,
       y: value?.height
     })

package/dist/fields/Upload/HasOne/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","RelationshipContent","UploadCard","baseClass","UploadComponentHasOne","props","className","fileDoc","onRemove","readonly","reloadDoc","serverURL","relationTo","value","id","String","url","thumbnailURL","src","URL","toString","_jsx","filter","Boolean","join","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","mimeType","x","width","y","height"],"sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JsonObject } from 'payload'\n\nimport React from 'react'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\nimport './index.scss'\n\nconst baseClass = 'upload upload--has-one'\n\ntype Props = {\n  readonly className?: string\n  readonly fileDoc: {\n    relationTo: string\n    value: JsonObject\n  }\n  readonly onRemove?: () => void\n  readonly readonly?: boolean\n  readonly reloadDoc: ReloadDoc\n  readonly serverURL: string\n}\n\nexport function UploadComponentHasOne(props: Props) {\n  const { className, fileDoc, onRemove, readonly, reloadDoc, serverURL } = props\n  const { relationTo, value } = fileDoc\n  const id = String(value?.id)\n\n  const url: string = value.thumbnailURL || value.url\n  let src: string\n\n  try {\n    src = new URL(url, serverURL).toString()\n  } catch {\n    src = `${serverURL}${url}`\n  }\n\n  return (\n    <UploadCard className={[baseClass, className].filter(Boolean).join(' ')}>\n      <RelationshipContent\n        allowEdit={!readonly}\n        allowRemove={!readonly}\n        alt={(value?.alt || value?.filename) as string}\n        byteSize={value.filesize as number}\n        collectionSlug={relationTo}\n        filename={value.filename as string}\n        id={id}\n        mimeType={value?.mimeType as string}\n        onRemove={onRemove}\n        reloadDoc={reloadDoc}\n        src={src}\n        x={value?.width as number}\n        y={value?.height as number}\n      />\n    </UploadCard>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,MAAW;AAIlB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,UAAU,QAAQ;AAC3B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB,OAAO,SAASC,sBAAsBC,KAAY;EAChD,MAAM;IAAEC,SAAS;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAS,CAAE,GAAGN,KAAA;EACzE,MAAM;IAAEO,UAAU;IAAEC;EAAK,CAAE,GAAGN,OAAA;EAC9B,MAAMO,EAAA,GAAKC,MAAA,CAAOF,KAAA,EAAOC,EAAA;EAEzB,MAAME,GAAA,GAAcH,KAAA,CAAMI,YAAY,IAAIJ,KAAA,CAAMG,GAAG;EACnD,IAAIE,GAAA;EAEJ,IAAI;IACFA,GAAA,GAAM,IAAIC,GAAA,CAAIH,GAAA,EAAKL,SAAA,EAAWS,QAAQ;EACxC,EAAE,MAAM;IACNF,GAAA,GAAM,GAAGP,SAAA,GAAYK,GAAA,EAAK;EAC5B;EAEA,oBACEK,IAAA,CAACnB,UAAA;IAAWI,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACgB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cACjE,aAAAH,IAAA,CAACpB,mBAAA;MACCwB,SAAA,EAAW,CAAChB,QAAA;MACZiB,WAAA,EAAa,CAACjB,QAAA;MACdkB,GAAA,EAAMd,KAAA,EAAOc,GAAA,IAAOd,KAAA,EAAOe,QAAA;MAC3BC,QAAA,EAAUhB,KAAA,CAAMiB,QAAQ;MACxBC,cAAA,EAAgBnB,UAAA;MAChBgB,QAAA,EAAUf,KAAA,CAAMe,QAAQ;MACxBd,EAAA,EAAIA,EAAA;MACJkB,QAAA,EAAUnB,KAAA,EAAOmB,QAAA;MACjBxB,QAAA,EAAUA,QAAA;MACVE,SAAA,EAAWA,SAAA;MACXQ,GAAA,EAAKA,GAAA;MACLe,CAAA,EAAGpB,KAAA,EAAOqB,KAAA;MACVC,CAAA,EAAGtB,KAAA,EAAOuB;;;AAIlB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","RelationshipContent","UploadCard","baseClass","UploadComponentHasOne","props","className","fileDoc","onRemove","readonly","reloadDoc","serverURL","relationTo","value","id","String","src","thumbnailSrc","url","URL","toString","thumbnailURL","_jsx","filter","Boolean","join","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","mimeType","x","width","y","height"],"sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JsonObject } from 'payload'\n\nimport React from 'react'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\nimport './index.scss'\n\nconst baseClass = 'upload upload--has-one'\n\ntype Props = {\n  readonly className?: string\n  readonly fileDoc: {\n    relationTo: string\n    value: JsonObject\n  }\n  readonly onRemove?: () => void\n  readonly readonly?: boolean\n  readonly reloadDoc: ReloadDoc\n  readonly serverURL: string\n}\n\nexport function UploadComponentHasOne(props: Props) {\n  const { className, fileDoc, onRemove, readonly, reloadDoc, serverURL } = props\n  const { relationTo, value } = fileDoc\n  const id = String(value?.id)\n\n  let src: string\n  let thumbnailSrc: string\n\n  if (value.url) {\n    try {\n      src = new URL(value.url, serverURL).toString()\n    } catch {\n      src = `${serverURL}${value.url}`\n    }\n  }\n\n  if (value.thumbnailURL) {\n    try {\n      thumbnailSrc = new URL(value.thumbnailURL, serverURL).toString()\n    } catch {\n      thumbnailSrc = `${serverURL}${value.thumbnailURL}`\n    }\n  }\n\n  return (\n    <UploadCard className={[baseClass, className].filter(Boolean).join(' ')}>\n      <RelationshipContent\n        allowEdit={!readonly}\n        allowRemove={!readonly}\n        alt={(value?.alt || value?.filename) as string}\n        byteSize={value.filesize as number}\n        collectionSlug={relationTo}\n        filename={value.filename as string}\n        id={id}\n        mimeType={value?.mimeType as string}\n        onRemove={onRemove}\n        reloadDoc={reloadDoc}\n        src={src}\n        thumbnailSrc={thumbnailSrc || src}\n        x={value?.width as number}\n        y={value?.height as number}\n      />\n    </UploadCard>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,MAAW;AAIlB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,UAAU,QAAQ;AAC3B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB,OAAO,SAASC,sBAAsBC,KAAY;EAChD,MAAM;IAAEC,SAAS;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAS,CAAE,GAAGN,KAAA;EACzE,MAAM;IAAEO,UAAU;IAAEC;EAAK,CAAE,GAAGN,OAAA;EAC9B,MAAMO,EAAA,GAAKC,MAAA,CAAOF,KAAA,EAAOC,EAAA;EAEzB,IAAIE,GAAA;EACJ,IAAIC,YAAA;EAEJ,IAAIJ,KAAA,CAAMK,GAAG,EAAE;IACb,IAAI;MACFF,GAAA,GAAM,IAAIG,GAAA,CAAIN,KAAA,CAAMK,GAAG,EAAEP,SAAA,EAAWS,QAAQ;IAC9C,EAAE,MAAM;MACNJ,GAAA,GAAM,GAAGL,SAAA,GAAYE,KAAA,CAAMK,GAAG,EAAE;IAClC;EACF;EAEA,IAAIL,KAAA,CAAMQ,YAAY,EAAE;IACtB,IAAI;MACFJ,YAAA,GAAe,IAAIE,GAAA,CAAIN,KAAA,CAAMQ,YAAY,EAAEV,SAAA,EAAWS,QAAQ;IAChE,EAAE,MAAM;MACNH,YAAA,GAAe,GAAGN,SAAA,GAAYE,KAAA,CAAMQ,YAAY,EAAE;IACpD;EACF;EAEA,oBACEC,IAAA,CAACpB,UAAA;IAAWI,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACiB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cACjE,aAAAH,IAAA,CAACrB,mBAAA;MACCyB,SAAA,EAAW,CAACjB,QAAA;MACZkB,WAAA,EAAa,CAAClB,QAAA;MACdmB,GAAA,EAAMf,KAAA,EAAOe,GAAA,IAAOf,KAAA,EAAOgB,QAAA;MAC3BC,QAAA,EAAUjB,KAAA,CAAMkB,QAAQ;MACxBC,cAAA,EAAgBpB,UAAA;MAChBiB,QAAA,EAAUhB,KAAA,CAAMgB,QAAQ;MACxBf,EAAA,EAAIA,EAAA;MACJmB,QAAA,EAAUpB,KAAA,EAAOoB,QAAA;MACjBzB,QAAA,EAAUA,QAAA;MACVE,SAAA,EAAWA,SAAA;MACXM,GAAA,EAAKA,GAAA;MACLC,YAAA,EAAcA,YAAA,IAAgBD,GAAA;MAC9BkB,CAAA,EAAGrB,KAAA,EAAOsB,KAAA;MACVC,CAAA,EAAGvB,KAAA,EAAOwB;;;AAIlB","ignoreList":[]}

package/dist/fields/Upload/RelationshipContent/index.d.ts

@@ -14,6 +14,7 @@ type Props = {
     readonly onRemove: () => void;
     readonly reloadDoc: ReloadDoc;
     readonly src: string;
+    readonly thumbnailSrc: string;
     readonly withMeta?: boolean;
     readonly x?: number;
     readonly y?: number;

package/dist/fields/Upload/RelationshipContent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/RelationshipContent/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAK5C,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AACD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,qBAiG/C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/RelationshipContent/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAK5C,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AACD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,qBAkG/C"}

package/dist/fields/Upload/RelationshipContent/index.js

@@ -10,7 +10,7 @@ import { ThumbnailComponent } from '../../../elements/Thumbnail/index.js';
 import './index.scss';
 const baseClass = 'upload-relationship-details';
 export function RelationshipContent(props) {
-  const $ = _c(27);
+  const $ = _c(28);
   const {
     id,
     allowEdit,
@@ -24,6 +24,7 @@ export function RelationshipContent(props) {
     onRemove,
     reloadDoc,
     src,
+    thumbnailSrc,
     withMeta: t0,
     x,
     y
@@ -94,19 +95,19 @@ export function RelationshipContent(props) {
   }
   const t7 = t6.join(" ");
   let t8;
-  if ($[11] !== DocumentDrawer || $[12] !== allowEdit || $[13] !== allowRemove || $[14] !== alt || $[15] !== filename || $[16] !== metaText || $[17] !== onRemove || $[18] !== onSave || $[19] !== openDrawer || $[20] !== src || $[21] !== t7 || $[22] !== withMeta) {
+  if ($[11] !== DocumentDrawer || $[12] !== allowEdit || $[13] !== allowRemove || $[14] !== alt || $[15] !== filename || $[16] !== metaText || $[17] !== onRemove || $[18] !== onSave || $[19] !== openDrawer || $[20] !== src || $[21] !== t7 || $[22] !== thumbnailSrc || $[23] !== withMeta) {
     let t9;
-    if ($[24] !== filename || $[25] !== src) {
+    if ($[25] !== filename || $[26] !== src) {
       t9 = src ? _jsx("a", {
         href: src,
         target: "_blank",
         children: filename
       }) : filename;
-      $[24] = filename;
-      $[25] = src;
-      $[26] = t9;
+      $[25] = filename;
+      $[26] = src;
+      $[27] = t9;
     } else {
-      t9 = $[26];
+      t9 = $[27];
     }
     t8 = _jsxs("div", {
       className: t7,
@@ -116,7 +117,7 @@ export function RelationshipContent(props) {
           alt,
           className: `${baseClass}__thumbnail`,
           filename,
-          fileSrc: src,
+          fileSrc: thumbnailSrc,
           size: "small"
         }), _jsxs("div", {
           className: `${baseClass}__details`,
@@ -158,10 +159,11 @@ export function RelationshipContent(props) {
     $[19] = openDrawer;
     $[20] = src;
     $[21] = t7;
-    $[22] = withMeta;
-    $[23] = t8;
+    $[22] = thumbnailSrc;
+    $[23] = withMeta;
+    $[24] = t8;
   } else {
-    t8 = $[23];
+    t8 = $[24];
   }
   return t8;
 }

package/dist/fields/Upload/RelationshipContent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","formatFilesize","React","Button","useDocumentDrawer","ThumbnailComponent","baseClass","RelationshipContent","props","$","id","allowEdit","allowRemove","alt","byteSize","className","collectionSlug","filename","mimeType","onRemove","reloadDoc","src","withMeta","t0","x","y","undefined","t1","t2","DocumentDrawer","t3","openDrawer","t4","t5","doc","onSave","generateMetaText","mimeType_0","size","sections","push","join","metaText","t6","filter","Boolean","t7","t8","t9","_jsx","href","target","children","_jsxs","fileSrc","buttonStyle","icon","iconStyle","onClick"],"sources":["../../../../src/fields/Upload/RelationshipContent/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TypeWithID } from 'payload'\n\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js'\nimport { ThumbnailComponent } from '../../../elements/Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'upload-relationship-details'\n\ntype Props = {\n  readonly allowEdit?: boolean\n  readonly allowRemove?: boolean\n  readonly alt: string\n  readonly byteSize: number\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly filename: string\n  readonly id?: number | string\n  readonly mimeType: string\n  readonly onRemove: () => void\n  readonly reloadDoc: ReloadDoc\n  readonly src: string\n  readonly withMeta?: boolean\n  readonly x?: number\n  readonly y?: number\n}\nexport function RelationshipContent(props: Props) {\n  const {\n    id,\n    allowEdit,\n    allowRemove,\n    alt,\n    byteSize,\n    className,\n    collectionSlug,\n    filename,\n    mimeType,\n    onRemove,\n    reloadDoc,\n    src,\n    withMeta = true,\n    x,\n    y,\n  } = props\n\n  const [DocumentDrawer, _, { openDrawer }] = useDocumentDrawer({\n    id: src ? id : undefined,\n    collectionSlug,\n  })\n\n  const onSave = React.useCallback(\n    async ({ doc }: { doc: TypeWithID }) => reloadDoc(doc.id, collectionSlug),\n    [reloadDoc, collectionSlug],\n  )\n\n  function generateMetaText(mimeType: string, size: number): string {\n    const sections: string[] = []\n    if (size) {\n      sections.push(formatFilesize(size))\n    }\n\n    if (x && y) {\n      sections.push(`${x}x${y}`)\n    }\n\n    if (mimeType) {\n      sections.push(mimeType)\n    }\n\n    return sections.join(' — ')\n  }\n\n  const metaText = withMeta ? generateMetaText(mimeType, byteSize) : ''\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__imageAndDetails`}>\n        <ThumbnailComponent\n          alt={alt}\n          className={`${baseClass}__thumbnail`}\n          filename={filename}\n          fileSrc={src}\n          size=\"small\"\n        />\n        <div className={`${baseClass}__details`}>\n          <p className={`${baseClass}__filename`}>\n            {src ? (\n              <a href={src} target=\"_blank\">\n                {filename}\n              </a>\n            ) : (\n              filename\n            )}\n          </p>\n          {withMeta ? <p className={`${baseClass}__meta`}>{metaText}</p> : null}\n        </div>\n      </div>\n\n      {allowEdit !== false || allowRemove !== false ? (\n        <div className={`${baseClass}__actions`}>\n          {allowEdit !== false ? (\n            <Button\n              buttonStyle=\"icon-label\"\n              className={`${baseClass}__edit`}\n              icon=\"edit\"\n              iconStyle=\"none\"\n              onClick={openDrawer}\n            />\n          ) : null}\n          {allowRemove !== false ? (\n            <Button\n              buttonStyle=\"icon-label\"\n              className={`${baseClass}__remove`}\n              icon=\"x\"\n              iconStyle=\"none\"\n              onClick={() => onRemove()}\n            />\n          ) : null}\n          <DocumentDrawer onSave={onSave} />\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","formatFilesize","React","Button","useDocumentDrawer","ThumbnailComponent","baseClass","RelationshipContent","props","$","id","allowEdit","allowRemove","alt","byteSize","className","collectionSlug","filename","mimeType","onRemove","reloadDoc","src","thumbnailSrc","withMeta","t0","x","y","undefined","t1","t2","DocumentDrawer","t3","openDrawer","t4","t5","doc","onSave","generateMetaText","mimeType_0","size","sections","push","join","metaText","t6","filter","Boolean","t7","t8","t9","_jsx","href","target","children","_jsxs","fileSrc","buttonStyle","icon","iconStyle","onClick"],"sources":["../../../../src/fields/Upload/RelationshipContent/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TypeWithID } from 'payload'\n\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js'\nimport { ThumbnailComponent } from '../../../elements/Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'upload-relationship-details'\n\ntype Props = {\n  readonly allowEdit?: boolean\n  readonly allowRemove?: boolean\n  readonly alt: string\n  readonly byteSize: number\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly filename: string\n  readonly id?: number | string\n  readonly mimeType: string\n  readonly onRemove: () => void\n  readonly reloadDoc: ReloadDoc\n  readonly src: string\n  readonly thumbnailSrc: string\n  readonly withMeta?: boolean\n  readonly x?: number\n  readonly y?: number\n}\nexport function RelationshipContent(props: Props) {\n  const {\n    id,\n    allowEdit,\n    allowRemove,\n    alt,\n    byteSize,\n    className,\n    collectionSlug,\n    filename,\n    mimeType,\n    onRemove,\n    reloadDoc,\n    src,\n    thumbnailSrc,\n    withMeta = true,\n    x,\n    y,\n  } = props\n\n  const [DocumentDrawer, _, { openDrawer }] = useDocumentDrawer({\n    id: src ? id : undefined,\n    collectionSlug,\n  })\n\n  const onSave = React.useCallback(\n    async ({ doc }: { doc: TypeWithID }) => reloadDoc(doc.id, collectionSlug),\n    [reloadDoc, collectionSlug],\n  )\n\n  function generateMetaText(mimeType: string, size: number): string {\n    const sections: string[] = []\n    if (size) {\n      sections.push(formatFilesize(size))\n    }\n\n    if (x && y) {\n      sections.push(`${x}x${y}`)\n    }\n\n    if (mimeType) {\n      sections.push(mimeType)\n    }\n\n    return sections.join(' — ')\n  }\n\n  const metaText = withMeta ? generateMetaText(mimeType, byteSize) : ''\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__imageAndDetails`}>\n        <ThumbnailComponent\n          alt={alt}\n          className={`${baseClass}__thumbnail`}\n          filename={filename}\n          fileSrc={thumbnailSrc}\n          size=\"small\"\n        />\n        <div className={`${baseClass}__details`}>\n          <p className={`${baseClass}__filename`}>\n            {src ? (\n              <a href={src} target=\"_blank\">\n                {filename}\n              </a>\n            ) : (\n              filename\n            )}\n          </p>\n          {withMeta ? <p className={`${baseClass}__meta`}>{metaText}</p> : null}\n        </div>\n      </div>\n\n      {allowEdit !== false || allowRemove !== false ? (\n        <div className={`${baseClass}__actions`}>\n          {allowEdit !== false ? (\n            <Button\n              buttonStyle=\"icon-label\"\n              className={`${baseClass}__edit`}\n              icon=\"edit\"\n              iconStyle=\"none\"\n              onClick={openDrawer}\n            />\n          ) : null}\n          {allowRemove !== false ? (\n            <Button\n              buttonStyle=\"icon-label\"\n              className={`${baseClass}__remove`}\n              icon=\"x\"\n              iconStyle=\"none\"\n              onClick={() => onRemove()}\n            />\n          ) : null}\n          <DocumentDrawer onSave={onSave} />\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/forms/Form/context.d.ts

@@ -5,6 +5,11 @@ declare const DocumentFormContext: import("react").Context<Context>;
 declare const FormWatchContext: import("react").Context<Context>;
 declare const SubmittedContext: import("react").Context<boolean>;
 declare const ProcessingContext: import("react").Context<boolean>;
+/**
+ * If the form has started processing in the background (e.g.
+ * if autosave is running), this will be true.
+ */
+declare const BackgroundProcessingContext: import("react").Context<boolean>;
 declare const ModifiedContext: import("react").Context<boolean>;
 declare const InitializingContext: import("react").Context<boolean>;
 declare const FormFieldsContext: import("use-context-selector").Context<FormFieldsContextType>;
@@ -23,6 +28,11 @@ declare const useDocumentForm: () => Context;
 declare const useWatchForm: () => Context;
 declare const useFormSubmitted: () => boolean;
 declare const useFormProcessing: () => boolean;
+/**
+ * If the form has started processing in the background (e.g.
+ * if autosave is running), this will be true.
+ */
+declare const useFormBackgroundProcessing: () => boolean;
 declare const useFormModified: () => boolean;
 declare const useFormInitializing: () => boolean;
 /**
@@ -37,5 +47,5 @@ declare const useFormFields: <Value = unknown>(selector: (context: FormFieldsCon
  * @see https://payloadcms.com/docs/admin/react-hooks#useallformfields
  */
 declare const useAllFormFields: () => FormFieldsContextType;
-export { DocumentFormContext, FormContext, FormFieldsContext, FormWatchContext, InitializingContext, ModifiedContext, ProcessingContext, SubmittedContext, useAllFormFields, useDocumentForm, useForm, useFormFields, useFormInitializing, useFormModified, useFormProcessing, useFormSubmitted, useWatchForm, };
+export { BackgroundProcessingContext, DocumentFormContext, FormContext, FormFieldsContext, FormWatchContext, InitializingContext, ModifiedContext, ProcessingContext, SubmittedContext, useAllFormFields, useDocumentForm, useForm, useFormBackgroundProcessing, useFormFields, useFormInitializing, useFormModified, useFormProcessing, useFormSubmitted, useWatchForm, };
 //# sourceMappingURL=context.d.ts.map

package/dist/forms/Form/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/forms/Form/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAS5C,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,IAAI,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAErF,QAAA,MAAM,WAAW,kCAA+B,CAAA;AAChD,QAAA,MAAM,mBAAmB,kCAA+B,CAAA;AACxD,QAAA,MAAM,gBAAgB,kCAA+B,CAAA;AACrD,QAAA,MAAM,gBAAgB,kCAAuB,CAAA;AAC7C,QAAA,MAAM,iBAAiB,kCAAuB,CAAA;AAC9C,QAAA,MAAM,eAAe,kCAAuB,CAAA;AAC5C,QAAA,MAAM,mBAAmB,kCAAuB,CAAA;AAChD,QAAA,MAAM,iBAAiB,+DAAiE,CAAA;AAExF,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;AAE3D;;;;GAIG;AACH,QAAA,MAAM,OAAO,QAAO,OAAkC,CAAA;AACtD;;;GAGG;AACH,QAAA,MAAM,eAAe,QAAO,OAA0C,CAAA;AAEtE,QAAA,MAAM,YAAY,QAAO,OAAuC,CAAA;AAChE,QAAA,MAAM,gBAAgB,QAAO,OAAuC,CAAA;AACpE,QAAA,MAAM,iBAAiB,QAAO,OAAwC,CAAA;AACtE,QAAA,MAAM,eAAe,QAAO,OAAsC,CAAA;AAClE,QAAA,MAAM,mBAAmB,QAAO,OAA0C,CAAA;AAE1E;;;;GAIG;AACH,QAAA,MAAM,aAAa,GAAI,KAAK,sBAChB,CAAC,OAAO,EAAE,qBAAqB,KAAK,KAAK,KAClD,KAAwD,CAAA;AAE3D;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,QAAO,qBAA0D,CAAA;AAEvF,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GACb,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/forms/Form/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAS5C,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,IAAI,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAErF,QAAA,MAAM,WAAW,kCAA+B,CAAA;AAChD,QAAA,MAAM,mBAAmB,kCAA+B,CAAA;AACxD,QAAA,MAAM,gBAAgB,kCAA+B,CAAA;AACrD,QAAA,MAAM,gBAAgB,kCAAuB,CAAA;AAC7C,QAAA,MAAM,iBAAiB,kCAAuB,CAAA;AAC9C;;;GAGG;AACH,QAAA,MAAM,2BAA2B,kCAAuB,CAAA;AACxD,QAAA,MAAM,eAAe,kCAAuB,CAAA;AAC5C,QAAA,MAAM,mBAAmB,kCAAuB,CAAA;AAChD,QAAA,MAAM,iBAAiB,+DAAiE,CAAA;AAExF,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;AAE3D;;;;GAIG;AACH,QAAA,MAAM,OAAO,QAAO,OAAkC,CAAA;AACtD;;;GAGG;AACH,QAAA,MAAM,eAAe,QAAO,OAA0C,CAAA;AAEtE,QAAA,MAAM,YAAY,QAAO,OAAuC,CAAA;AAChE,QAAA,MAAM,gBAAgB,QAAO,OAAuC,CAAA;AACpE,QAAA,MAAM,iBAAiB,QAAO,OAAwC,CAAA;AACtE;;;GAGG;AACH,QAAA,MAAM,2BAA2B,QAAO,OAAkD,CAAA;AAC1F,QAAA,MAAM,eAAe,QAAO,OAAsC,CAAA;AAClE,QAAA,MAAM,mBAAmB,QAAO,OAA0C,CAAA;AAE1E;;;;GAIG;AACH,QAAA,MAAM,aAAa,GAAI,KAAK,sBAChB,CAAC,OAAO,EAAE,qBAAqB,KAAK,KAAK,KAClD,KAAwD,CAAA;AAE3D;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,QAAO,qBAA0D,CAAA;AAEvF,OAAO,EACL,2BAA2B,EAC3B,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,2BAA2B,EAC3B,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GACb,CAAA"}

package/dist/forms/Form/context.js

@@ -7,6 +7,11 @@ const DocumentFormContext = createContext({});
 const FormWatchContext = createContext({});
 const SubmittedContext = createContext(false);
 const ProcessingContext = createContext(false);
+/**
+ * If the form has started processing in the background (e.g.
+ * if autosave is running), this will be true.
+ */
+const BackgroundProcessingContext = createContext(false);
 const ModifiedContext = createContext(false);
 const InitializingContext = createContext(false);
 const FormFieldsContext = createSelectorContext([{}, () => null]);
@@ -34,6 +39,13 @@ const useFormSubmitted = () => {
 const useFormProcessing = () => {
   return useContext(ProcessingContext);
 };
+/**
+ * If the form has started processing in the background (e.g.
+ * if autosave is running), this will be true.
+ */
+const useFormBackgroundProcessing = () => {
+  return useContext(BackgroundProcessingContext);
+};
 const useFormModified = () => {
   return useContext(ModifiedContext);
 };
@@ -56,5 +68,5 @@ const useFormFields = selector => {
 const useAllFormFields = () => {
   return useFullContext(FormFieldsContext);
 };
-export { DocumentFormContext, FormContext, FormFieldsContext, FormWatchContext, InitializingContext, ModifiedContext, ProcessingContext, SubmittedContext, useAllFormFields, useDocumentForm, useForm, useFormFields, useFormInitializing, useFormModified, useFormProcessing, useFormSubmitted, useWatchForm };
+export { BackgroundProcessingContext, DocumentFormContext, FormContext, FormFieldsContext, FormWatchContext, InitializingContext, ModifiedContext, ProcessingContext, SubmittedContext, useAllFormFields, useDocumentForm, useForm, useFormBackgroundProcessing, useFormFields, useFormInitializing, useFormModified, useFormProcessing, useFormSubmitted, useWatchForm };
 //# sourceMappingURL=context.js.map

package/dist/forms/Form/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["createContext","useContext","createSelectorContext","useContextSelector","useFullContext","FormContext","DocumentFormContext","FormWatchContext","SubmittedContext","ProcessingContext","ModifiedContext","InitializingContext","FormFieldsContext","useForm","useDocumentForm","useWatchForm","useFormSubmitted","useFormProcessing","useFormModified","useFormInitializing","useFormFields","selector","useAllFormFields"],"sources":["../../../src/forms/Form/context.ts"],"sourcesContent":["'use client'\nimport type { RenderedField } from 'payload'\n\nimport { createContext, useContext } from 'react'\nimport {\n  createContext as createSelectorContext,\n  useContextSelector,\n  useContext as useFullContext,\n} from 'use-context-selector'\n\nimport type { Context, FormFieldsContext as FormFieldsContextType } from './types.js'\n\nconst FormContext = createContext({} as Context)\nconst DocumentFormContext = createContext({} as Context)\nconst FormWatchContext = createContext({} as Context)\nconst SubmittedContext = createContext(false)\nconst ProcessingContext = createContext(false)\nconst ModifiedContext = createContext(false)\nconst InitializingContext = createContext(false)\nconst FormFieldsContext = createSelectorContext<FormFieldsContextType>([{}, () => null])\n\nexport type RenderedFieldSlots = Map<string, RenderedField>\n\n/**\n * Get the state of the form, can be used to submit & validate the form.\n *\n * @see https://payloadcms.com/docs/admin/react-hooks#useform\n */\nconst useForm = (): Context => useContext(FormContext)\n/**\n * Get the state of the document-level form. This is useful if you need to access the document-level Form from within a child Form.\n * This is the case withing lexical Blocks, as each lexical blocks renders their own Form.\n */\nconst useDocumentForm = (): Context => useContext(DocumentFormContext)\n\nconst useWatchForm = (): Context => useContext(FormWatchContext)\nconst useFormSubmitted = (): boolean => useContext(SubmittedContext)\nconst useFormProcessing = (): boolean => useContext(ProcessingContext)\nconst useFormModified = (): boolean => useContext(ModifiedContext)\nconst useFormInitializing = (): boolean => useContext(InitializingContext)\n\n/**\n * Get and set the value of a form field based on a selector\n *\n * @see https://payloadcms.com/docs/admin/react-hooks#useformfields\n */\nconst useFormFields = <Value = unknown>(\n  selector: (context: FormFieldsContextType) => Value,\n): Value => useContextSelector(FormFieldsContext, selector)\n\n/**\n * Get the state of all form fields.\n *\n * @see https://payloadcms.com/docs/admin/react-hooks#useallformfields\n */\nconst useAllFormFields = (): FormFieldsContextType => useFullContext(FormFieldsContext)\n\nexport {\n  DocumentFormContext,\n  FormContext,\n  FormFieldsContext,\n  FormWatchContext,\n  InitializingContext,\n  ModifiedContext,\n  ProcessingContext,\n  SubmittedContext,\n  useAllFormFields,\n  useDocumentForm,\n  useForm,\n  useFormFields,\n  useFormInitializing,\n  useFormModified,\n  useFormProcessing,\n  useFormSubmitted,\n  useWatchForm,\n}\n"],"mappings":"AAAA;;AAGA,SAASA,aAAa,EAAEC,UAAU,QAAQ;AAC1C,SACED,aAAA,IAAiBE,qBAAqB,EACtCC,kBAAkB,EAClBF,UAAA,IAAcG,cAAc,QACvB;AAIP,MAAMC,WAAA,GAAcL,aAAA,CAAc,CAAC;AACnC,MAAMM,mBAAA,GAAsBN,aAAA,CAAc,CAAC;AAC3C,MAAMO,gBAAA,GAAmBP,aAAA,CAAc,CAAC;AACxC,MAAMQ,gBAAA,GAAmBR,aAAA,CAAc;AACvC,MAAMS,iBAAA,GAAoBT,aAAA,CAAc;AACxC,MAAMU,eAAA,GAAkBV,aAAA,CAAc;AACtC,MAAMW,mBAAA,GAAsBX,aAAA,CAAc;AAC1C,MAAMY,iBAAA,GAAoBV,qBAAA,CAA6C,CAAC,CAAC,GAAG,MAAM,KAAK;AAIvF;;;;;AAKA,MAAMW,OAAA,GAAUA,CAAA;EAAA,OAAeZ,UAAA,CAAAI,WAAW;AAAA;AAC1C;;;;AAIA,MAAMS,eAAA,GAAkBA,CAAA;EAAA,OAAeb,UAAA,CAAAK,mBAAW;AAAA;AAElD,MAAMS,YAAA,GAAeA,CAAA;EAAA,OAAed,UAAA,CAAAM,gBAAW;AAAA;AAC/C,MAAMS,gBAAA,GAAmBA,CAAA;EAAA,OAAef,UAAA,CAAAO,gBAAW;AAAA;AACnD,MAAMS,iBAAA,GAAoBA,CAAA;EAAA,OAAehB,UAAA,CAAAQ,iBAAW;AAAA;AACpD,MAAMS,eAAA,GAAkBA,CAAA;EAAA,OAAejB,UAAA,CAAAS,eAAW;AAAA;AAClD,MAAMS,mBAAA,GAAsBA,CAAA;EAAA,OAAelB,UAAA,CAAAU,mBAAW;AAAA;AAEtD;;;;;AAKA,MAAMS,aAAA,GAAgBC,QAAA;EAAA,OAEVlB,kBAAA,CAAAS,iBAAA,EAAsCS,QAAA;AAAA;AAElD;;;;;AAKA,MAAMC,gBAAA,GAAmBA,CAAA;EAAA,OAA6BlB,cAAA,CAAAQ,iBAAe;AAAA;AAErE,SACEN,mBAAmB,EACnBD,WAAW,EACXO,iBAAiB,EACjBL,gBAAgB,EAChBI,mBAAmB,EACnBD,eAAe,EACfD,iBAAiB,EACjBD,gBAAgB,EAChBc,gBAAgB,EAChBR,eAAe,EACfD,OAAO,EACPO,aAAa,EACbD,mBAAmB,EACnBD,eAAe,EACfD,iBAAiB,EACjBD,gBAAgB,EAChBD,YAAY","ignoreList":[]}
+{"version":3,"file":"context.js","names":["createContext","useContext","createSelectorContext","useContextSelector","useFullContext","FormContext","DocumentFormContext","FormWatchContext","SubmittedContext","ProcessingContext","BackgroundProcessingContext","ModifiedContext","InitializingContext","FormFieldsContext","useForm","useDocumentForm","useWatchForm","useFormSubmitted","useFormProcessing","useFormBackgroundProcessing","useFormModified","useFormInitializing","useFormFields","selector","useAllFormFields"],"sources":["../../../src/forms/Form/context.ts"],"sourcesContent":["'use client'\nimport type { RenderedField } from 'payload'\n\nimport { createContext, useContext } from 'react'\nimport {\n  createContext as createSelectorContext,\n  useContextSelector,\n  useContext as useFullContext,\n} from 'use-context-selector'\n\nimport type { Context, FormFieldsContext as FormFieldsContextType } from './types.js'\n\nconst FormContext = createContext({} as Context)\nconst DocumentFormContext = createContext({} as Context)\nconst FormWatchContext = createContext({} as Context)\nconst SubmittedContext = createContext(false)\nconst ProcessingContext = createContext(false)\n/**\n * If the form has started processing in the background (e.g.\n * if autosave is running), this will be true.\n */\nconst BackgroundProcessingContext = createContext(false)\nconst ModifiedContext = createContext(false)\nconst InitializingContext = createContext(false)\nconst FormFieldsContext = createSelectorContext<FormFieldsContextType>([{}, () => null])\n\nexport type RenderedFieldSlots = Map<string, RenderedField>\n\n/**\n * Get the state of the form, can be used to submit & validate the form.\n *\n * @see https://payloadcms.com/docs/admin/react-hooks#useform\n */\nconst useForm = (): Context => useContext(FormContext)\n/**\n * Get the state of the document-level form. This is useful if you need to access the document-level Form from within a child Form.\n * This is the case withing lexical Blocks, as each lexical blocks renders their own Form.\n */\nconst useDocumentForm = (): Context => useContext(DocumentFormContext)\n\nconst useWatchForm = (): Context => useContext(FormWatchContext)\nconst useFormSubmitted = (): boolean => useContext(SubmittedContext)\nconst useFormProcessing = (): boolean => useContext(ProcessingContext)\n/**\n * If the form has started processing in the background (e.g.\n * if autosave is running), this will be true.\n */\nconst useFormBackgroundProcessing = (): boolean => useContext(BackgroundProcessingContext)\nconst useFormModified = (): boolean => useContext(ModifiedContext)\nconst useFormInitializing = (): boolean => useContext(InitializingContext)\n\n/**\n * Get and set the value of a form field based on a selector\n *\n * @see https://payloadcms.com/docs/admin/react-hooks#useformfields\n */\nconst useFormFields = <Value = unknown>(\n  selector: (context: FormFieldsContextType) => Value,\n): Value => useContextSelector(FormFieldsContext, selector)\n\n/**\n * Get the state of all form fields.\n *\n * @see https://payloadcms.com/docs/admin/react-hooks#useallformfields\n */\nconst useAllFormFields = (): FormFieldsContextType => useFullContext(FormFieldsContext)\n\nexport {\n  BackgroundProcessingContext,\n  DocumentFormContext,\n  FormContext,\n  FormFieldsContext,\n  FormWatchContext,\n  InitializingContext,\n  ModifiedContext,\n  ProcessingContext,\n  SubmittedContext,\n  useAllFormFields,\n  useDocumentForm,\n  useForm,\n  useFormBackgroundProcessing,\n  useFormFields,\n  useFormInitializing,\n  useFormModified,\n  useFormProcessing,\n  useFormSubmitted,\n  useWatchForm,\n}\n"],"mappings":"AAAA;;AAGA,SAASA,aAAa,EAAEC,UAAU,QAAQ;AAC1C,SACED,aAAA,IAAiBE,qBAAqB,EACtCC,kBAAkB,EAClBF,UAAA,IAAcG,cAAc,QACvB;AAIP,MAAMC,WAAA,GAAcL,aAAA,CAAc,CAAC;AACnC,MAAMM,mBAAA,GAAsBN,aAAA,CAAc,CAAC;AAC3C,MAAMO,gBAAA,GAAmBP,aAAA,CAAc,CAAC;AACxC,MAAMQ,gBAAA,GAAmBR,aAAA,CAAc;AACvC,MAAMS,iBAAA,GAAoBT,aAAA,CAAc;AACxC;;;;AAIA,MAAMU,2BAAA,GAA8BV,aAAA,CAAc;AAClD,MAAMW,eAAA,GAAkBX,aAAA,CAAc;AACtC,MAAMY,mBAAA,GAAsBZ,aAAA,CAAc;AAC1C,MAAMa,iBAAA,GAAoBX,qBAAA,CAA6C,CAAC,CAAC,GAAG,MAAM,KAAK;AAIvF;;;;;AAKA,MAAMY,OAAA,GAAUA,CAAA;EAAA,OAAeb,UAAA,CAAAI,WAAW;AAAA;AAC1C;;;;AAIA,MAAMU,eAAA,GAAkBA,CAAA;EAAA,OAAed,UAAA,CAAAK,mBAAW;AAAA;AAElD,MAAMU,YAAA,GAAeA,CAAA;EAAA,OAAef,UAAA,CAAAM,gBAAW;AAAA;AAC/C,MAAMU,gBAAA,GAAmBA,CAAA;EAAA,OAAehB,UAAA,CAAAO,gBAAW;AAAA;AACnD,MAAMU,iBAAA,GAAoBA,CAAA;EAAA,OAAejB,UAAA,CAAAQ,iBAAW;AAAA;AACpD;;;;AAIA,MAAMU,2BAAA,GAA8BA,CAAA;EAAA,OAAelB,UAAA,CAAAS,2BAAW;AAAA;AAC9D,MAAMU,eAAA,GAAkBA,CAAA;EAAA,OAAenB,UAAA,CAAAU,eAAW;AAAA;AAClD,MAAMU,mBAAA,GAAsBA,CAAA;EAAA,OAAepB,UAAA,CAAAW,mBAAW;AAAA;AAEtD;;;;;AAKA,MAAMU,aAAA,GAAgBC,QAAA;EAAA,OAEVpB,kBAAA,CAAAU,iBAAA,EAAsCU,QAAA;AAAA;AAElD;;;;;AAKA,MAAMC,gBAAA,GAAmBA,CAAA;EAAA,OAA6BpB,cAAA,CAAAS,iBAAe;AAAA;AAErE,SACEH,2BAA2B,EAC3BJ,mBAAmB,EACnBD,WAAW,EACXQ,iBAAiB,EACjBN,gBAAgB,EAChBK,mBAAmB,EACnBD,eAAe,EACfF,iBAAiB,EACjBD,gBAAgB,EAChBgB,gBAAgB,EAChBT,eAAe,EACfD,OAAO,EACPK,2BAA2B,EAC3BG,aAAa,EACbD,mBAAmB,EACnBD,eAAe,EACfF,iBAAiB,EACjBD,gBAAgB,EAChBD,YAAY","ignoreList":[]}

package/dist/forms/Form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Form/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAGnF,OAAO,KAAK,EAGV,SAAS,EAGV,MAAM,YAAY,CAAA;AAkCnB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsvBpC,CAAA;AAED,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GACb,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Form/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAGnF,OAAO,KAAK,EAGV,SAAS,EAGV,MAAM,YAAY,CAAA;AAmCnB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA+vBpC,CAAA;AAED,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GACb,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/forms/Form/index.js

@@ -21,7 +21,7 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { useUploadHandlers } from '../../providers/UploadHandlers/index.js';
 import { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js';
 import { requests } from '../../utilities/api.js';
-import { DocumentFormContext, FormContext, FormFieldsContext, FormWatchContext, InitializingContext, ModifiedContext, ProcessingContext, SubmittedContext, useDocumentForm } from './context.js';
+import { BackgroundProcessingContext, DocumentFormContext, FormContext, FormFieldsContext, FormWatchContext, InitializingContext, ModifiedContext, ProcessingContext, SubmittedContext, useDocumentForm } from './context.js';
 import { errorMessages } from './errorMessages.js';
 import { fieldReducer } from './fieldReducer.js';
 import { initContextState } from './initContextState.js';
@@ -44,6 +44,7 @@ export const Form = props => {
     disableSuccessStatus,
     disableValidationOnSubmit,
     // fields: fieldsFromProps = collection?.fields || global?.fields,
+    el,
     handleResponse,
     initialState,
     isDocumentForm,
@@ -93,6 +94,7 @@ export const Form = props => {
   const [isValid, setIsValid] = useState(true);
   const [initializing, setInitializing] = useState(initializingFromProps);
   const [processing, setProcessing] = useState(false);
+  const [backgroundProcessing, setBackgroundProcessing] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const formRef = useRef(null);
   const contextRef = useRef({});
@@ -523,6 +525,7 @@ export const Form = props => {
   contextRef.current.createFormData = createFormData;
   contextRef.current.setModified = setModified;
   contextRef.current.setProcessing = setProcessing;
+  contextRef.current.setBackgroundProcessing = setBackgroundProcessing;
   contextRef.current.setSubmitted = setSubmitted;
   contextRef.current.setIsValid = setIsValid;
   contextRef.current.disabled = disabled;
@@ -626,7 +629,8 @@ export const Form = props => {
   const documentFormContextProps = isDocumentForm ? {
     value: contextRef.current
   } : {};
-  return /*#__PURE__*/_jsx("form", {
+  const El = el || 'form';
+  return /*#__PURE__*/_jsx(El, {
     action: typeof action === 'function' ? void action : action,
     className: classes,
     method: method,
@@ -648,11 +652,14 @@ export const Form = props => {
               value: !isMounted || isMounted && initializing,
               children: /*#__PURE__*/_jsx(ProcessingContext.Provider, {
                 value: processing,
-                children: /*#__PURE__*/_jsx(ModifiedContext.Provider, {
-                  value: modified,
-                  children: /*#__PURE__*/_jsx(FormFieldsContext.Provider, {
-                    value: fieldsReducer,
-                    children: children
+                children: /*#__PURE__*/_jsx(BackgroundProcessingContext.Provider, {
+                  value: backgroundProcessing,
+                  children: /*#__PURE__*/_jsx(ModifiedContext.Provider, {
+                    value: modified,
+                    children: /*#__PURE__*/_jsx(FormFieldsContext.Provider, {
+                      value: fieldsReducer,
+                      children: children
+                    })
                   })
                 })
               })