@payloadcms/ui 3.31.0 → 3.32.0-canary.1

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

@@ -1,7 +1,7 @@
 import type { JsonObject } from 'payload';
 import React from 'react';
-import type { ReloadDoc } from '../types.js';
 import './index.scss';
+import type { ReloadDoc } from '../types.js';
 type Props = {
     readonly className?: string;
     readonly displayPreview?: boolean;

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,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,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,qBAyHlD"}
+{"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;AAYzB,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAI5C,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,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,qBAkIlD"}

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

@@ -9,7 +9,9 @@ import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
 import { RelationshipContent } from '../RelationshipContent/index.js';
 import { UploadCard } from '../UploadCard/index.js';
 const baseClass = 'upload upload--has-many';
+import { isImage } from 'payload/shared';
 import './index.scss';
+import { getBestFitFromSizes } from '../../../utilities/getBestFitFromSizes.js';
 export function UploadComponentHasMany(props) {
   const $ = _c(27);
   const {
@@ -104,6 +106,14 @@ export function UploadComponentHasMany(props) {
             thumbnailSrc = `${serverURL}${value_0.thumbnailURL}`;
           }
         }
+        if (isImage(value_0.mimeType)) {
+          thumbnailSrc = getBestFitFromSizes({
+            sizes: value_0.sizes,
+            thumbnailURL: thumbnailSrc,
+            url: src,
+            width: value_0.width
+          });
+        }
         return _jsx(DraggableSortableItem, {
           disabled: !isSortable || readonly,
           id,
@@ -135,7 +145,7 @@ export function UploadComponentHasMany(props) {
                 onRemove: () => removeItem(index_0),
                 reloadDoc,
                 src,
-                thumbnailSrc: thumbnailSrc || src,
+                thumbnailSrc,
                 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","displayPreview","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 displayPreview?: boolean\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 {\n    className,\n    displayPreview,\n    fileDocs,\n    isSortable,\n    onRemove,\n    onReorder,\n    readonly,\n    reloadDoc,\n    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                      displayPreview={displayPreview}\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":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","DraggableSortableItem","DraggableSortable","DragHandleIcon","RelationshipContent","UploadCard","baseClass","isImage","getBestFitFromSizes","UploadComponentHasMany","props","$","className","displayPreview","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","mimeType","sizes","width","_jsx","disabled","children","draggableSortableItemProps","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","_jsxs","size","attributes","listeners","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","withMeta","x","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 { isImage } from 'payload/shared'\n\nimport './index.scss'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport { getBestFitFromSizes } from '../../../utilities/getBestFitFromSizes.js'\n\ntype Props = {\n  readonly className?: string\n  readonly displayPreview?: boolean\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 {\n    className,\n    displayPreview,\n    fileDocs,\n    isSortable,\n    onRemove,\n    onReorder,\n    readonly,\n    reloadDoc,\n    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          if (isImage(value.mimeType)) {\n            thumbnailSrc = getBestFitFromSizes({\n              sizes: value.sizes,\n              thumbnailURL: thumbnailSrc,\n              url: src,\n              width: value.width,\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                      displayPreview={displayPreview}\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}\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,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,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,qBA6CjD"}
+{"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;AAGzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAG5C,OAAO,cAAc,CAAA;AAMrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,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,qBAsDjD"}

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

@@ -1,10 +1,12 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
+import { isImage } from 'payload/shared';
 import React from 'react';
+import { getBestFitFromSizes } from '../../../utilities/getBestFitFromSizes.js';
+import './index.scss';
 import { RelationshipContent } from '../RelationshipContent/index.js';
 import { UploadCard } from '../UploadCard/index.js';
-import './index.scss';
 const baseClass = 'upload upload--has-one';
 export function UploadComponentHasOne(props) {
   const {
@@ -37,6 +39,14 @@ export function UploadComponentHasOne(props) {
       thumbnailSrc = `${serverURL}${value.thumbnailURL}`;
     }
   }
+  if (isImage(value.mimeType)) {
+    thumbnailSrc = getBestFitFromSizes({
+      sizes: value.sizes,
+      thumbnailURL: thumbnailSrc,
+      url: src,
+      width: value.width
+    });
+  }
   return /*#__PURE__*/_jsx(UploadCard, {
     className: [baseClass, className].filter(Boolean).join(' '),
     children: /*#__PURE__*/_jsx(RelationshipContent, {
@@ -52,7 +62,7 @@ export function UploadComponentHasOne(props) {
       onRemove: onRemove,
       reloadDoc: reloadDoc,
       src: src,
-      thumbnailSrc: thumbnailSrc || src,
+      thumbnailSrc: thumbnailSrc,
       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","displayPreview","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 displayPreview?: boolean\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, displayPreview, 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        displayPreview={displayPreview}\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;AAelB,OAAO,SAASC,sBAAsBC,KAAY;EAChD,MAAM;IAAEC,SAAS;IAAEC,cAAc;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAS,CAAE,GAAGP,KAAA;EACzF,MAAM;IAAEQ,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,CAACrB,UAAA;IAAWI,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACkB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cACjE,aAAAH,IAAA,CAACtB,mBAAA;MACC0B,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;MAChBN,cAAA,EAAgBA,cAAA;MAChBuB,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":[]}
+{"version":3,"file":"index.js","names":["isImage","React","getBestFitFromSizes","RelationshipContent","UploadCard","baseClass","UploadComponentHasOne","props","className","displayPreview","fileDoc","onRemove","readonly","reloadDoc","serverURL","relationTo","value","id","String","src","thumbnailSrc","url","URL","toString","thumbnailURL","mimeType","sizes","width","_jsx","filter","Boolean","join","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","x","y","height"],"sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JsonObject } from 'payload'\n\nimport { isImage } from 'payload/shared'\nimport React from 'react'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport { getBestFitFromSizes } from '../../../utilities/getBestFitFromSizes.js'\nimport './index.scss'\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\n\nconst baseClass = 'upload upload--has-one'\n\ntype Props = {\n  readonly className?: string\n  readonly displayPreview?: boolean\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, displayPreview, 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  if (isImage(value.mimeType)) {\n    thumbnailSrc = getBestFitFromSizes({\n      sizes: value.sizes,\n      thumbnailURL: thumbnailSrc,\n      url: src,\n      width: value.width,\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        displayPreview={displayPreview}\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}\n        x={value?.width as number}\n        y={value?.height as number}\n      />\n    </UploadCard>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,OAAO,QAAQ;AACxB,OAAOC,KAAA,MAAW;AAIlB,SAASC,mBAAmB,QAAQ;AACpC,OAAO;AACP,SAASC,mBAAmB,QAAQ;AACpC,SAASC,UAAU,QAAQ;AAE3B,MAAMC,SAAA,GAAY;AAelB,OAAO,SAASC,sBAAsBC,KAAY;EAChD,MAAM;IAAEC,SAAS;IAAEC,cAAc;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAS,CAAE,GAAGP,KAAA;EACzF,MAAM;IAAEQ,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,IAAIxB,OAAA,CAAQgB,KAAA,CAAMS,QAAQ,GAAG;IAC3BL,YAAA,GAAelB,mBAAA,CAAoB;MACjCwB,KAAA,EAAOV,KAAA,CAAMU,KAAK;MAClBF,YAAA,EAAcJ,YAAA;MACdC,GAAA,EAAKF,GAAA;MACLQ,KAAA,EAAOX,KAAA,CAAMW;IACf;EACF;EAEA,oBACEC,IAAA,CAACxB,UAAA;IAAWI,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACqB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cACjE,aAAAH,IAAA,CAACzB,mBAAA;MACC6B,SAAA,EAAW,CAACpB,QAAA;MACZqB,WAAA,EAAa,CAACrB,QAAA;MACdsB,GAAA,EAAMlB,KAAA,EAAOkB,GAAA,IAAOlB,KAAA,EAAOmB,QAAA;MAC3BC,QAAA,EAAUpB,KAAA,CAAMqB,QAAQ;MACxBC,cAAA,EAAgBvB,UAAA;MAChBN,cAAA,EAAgBA,cAAA;MAChB0B,QAAA,EAAUnB,KAAA,CAAMmB,QAAQ;MACxBlB,EAAA,EAAIA,EAAA;MACJQ,QAAA,EAAUT,KAAA,EAAOS,QAAA;MACjBd,QAAA,EAAUA,QAAA;MACVE,SAAA,EAAWA,SAAA;MACXM,GAAA,EAAKA,GAAA;MACLC,YAAA,EAAcA,YAAA;MACdmB,CAAA,EAAGvB,KAAA,EAAOW,KAAA;MACVa,CAAA,EAAGxB,KAAA,EAAOyB;;;AAIlB","ignoreList":[]}

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

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatFilesize } from 'payload/shared';
+import { formatFilesize, isImage } from 'payload/shared';
 import React from 'react';
 import { Button } from '../../../elements/Button/index.js';
 import { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js';
@@ -11,7 +11,7 @@ import { useConfig } from '../../../providers/Config/index.js';
 import './index.scss';
 const baseClass = 'upload-relationship-details';
 export function RelationshipContent(props) {
-  const $ = _c(34);
+  const $ = _c(35);
   const {
     id,
     allowEdit,
@@ -111,37 +111,38 @@ export function RelationshipContent(props) {
   }
   const t8 = t7.join(" ");
   let t9;
-  if ($[14] !== alt || $[15] !== filename || $[16] !== previewAllowed || $[17] !== thumbnailSrc) {
+  if ($[14] !== alt || $[15] !== filename || $[16] !== mimeType || $[17] !== previewAllowed || $[18] !== thumbnailSrc) {
     t9 = previewAllowed && _jsx(ThumbnailComponent, {
       alt,
       className: `${baseClass}__thumbnail`,
       filename,
-      fileSrc: thumbnailSrc,
+      fileSrc: isImage(mimeType) && thumbnailSrc,
       size: "small"
     });
     $[14] = alt;
     $[15] = filename;
-    $[16] = previewAllowed;
-    $[17] = thumbnailSrc;
-    $[18] = t9;
+    $[16] = mimeType;
+    $[17] = previewAllowed;
+    $[18] = thumbnailSrc;
+    $[19] = t9;
   } else {
-    t9 = $[18];
+    t9 = $[19];
   }
   let t10;
-  if ($[19] !== filename || $[20] !== src) {
+  if ($[20] !== filename || $[21] !== src) {
     t10 = src ? _jsx("a", {
       href: src,
       target: "_blank",
       children: filename
     }) : filename;
-    $[19] = filename;
-    $[20] = src;
-    $[21] = t10;
+    $[20] = filename;
+    $[21] = src;
+    $[22] = t10;
   } else {
-    t10 = $[21];
+    t10 = $[22];
   }
   let t11;
-  if ($[22] !== DocumentDrawer || $[23] !== allowEdit || $[24] !== allowRemove || $[25] !== metaText || $[26] !== onRemove || $[27] !== onSave || $[28] !== openDrawer || $[29] !== t10 || $[30] !== t8 || $[31] !== t9 || $[32] !== withMeta) {
+  if ($[23] !== DocumentDrawer || $[24] !== allowEdit || $[25] !== allowRemove || $[26] !== metaText || $[27] !== onRemove || $[28] !== onSave || $[29] !== openDrawer || $[30] !== t10 || $[31] !== t8 || $[32] !== t9 || $[33] !== withMeta) {
     t11 = _jsxs("div", {
       className: t8,
       children: [_jsxs("div", {
@@ -175,20 +176,20 @@ export function RelationshipContent(props) {
         })]
       }) : null]
     });
-    $[22] = DocumentDrawer;
-    $[23] = allowEdit;
-    $[24] = allowRemove;
-    $[25] = metaText;
-    $[26] = onRemove;
-    $[27] = onSave;
-    $[28] = openDrawer;
-    $[29] = t10;
-    $[30] = t8;
-    $[31] = t9;
-    $[32] = withMeta;
-    $[33] = t11;
+    $[23] = DocumentDrawer;
+    $[24] = allowEdit;
+    $[25] = allowRemove;
+    $[26] = metaText;
+    $[27] = onRemove;
+    $[28] = onSave;
+    $[29] = openDrawer;
+    $[30] = t10;
+    $[31] = t8;
+    $[32] = t9;
+    $[33] = withMeta;
+    $[34] = t11;
   } else {
-    t11 = $[33];
+    t11 = $[34];
   }
   return t11;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","formatFilesize","React","Button","useDocumentDrawer","ThumbnailComponent","useConfig","baseClass","RelationshipContent","props","$","id","allowEdit","allowRemove","alt","byteSize","className","collectionSlug","displayPreview","filename","mimeType","onRemove","reloadDoc","src","thumbnailSrc","withMeta","t0","x","y","undefined","config","t1","collections","find","collection","slug","collectionConfig","t2","t3","DocumentDrawer","t4","openDrawer","t5","t6","doc","onSave","generateMetaText","mimeType_0","size","sections","push","join","metaText","previewAllowed","upload","t7","filter","Boolean","t8","t9","_jsx","fileSrc","t10","href","target","children","t11","_jsxs","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 { useConfig } from '../../../providers/Config/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 displayPreview?: boolean\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    displayPreview,\n    filename,\n    mimeType,\n    onRemove,\n    reloadDoc,\n    src,\n    thumbnailSrc,\n    withMeta = true,\n    x,\n    y,\n  } = props\n\n  const { config } = useConfig()\n  const collectionConfig =\n    'collections' in config\n      ? config.collections.find((collection) => collection.slug === collectionSlug)\n      : undefined\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  const previewAllowed = displayPreview ?? collectionConfig.upload?.displayPreview ?? true\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__imageAndDetails`}>\n        {previewAllowed && (\n          <ThumbnailComponent\n            alt={alt}\n            className={`${baseClass}__thumbnail`}\n            filename={filename}\n            fileSrc={thumbnailSrc}\n            size=\"small\"\n          />\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","isImage","React","Button","useDocumentDrawer","ThumbnailComponent","useConfig","baseClass","RelationshipContent","props","$","id","allowEdit","allowRemove","alt","byteSize","className","collectionSlug","displayPreview","filename","mimeType","onRemove","reloadDoc","src","thumbnailSrc","withMeta","t0","x","y","undefined","config","t1","collections","find","collection","slug","collectionConfig","t2","t3","DocumentDrawer","t4","openDrawer","t5","t6","doc","onSave","generateMetaText","mimeType_0","size","sections","push","join","metaText","previewAllowed","upload","t7","filter","Boolean","t8","t9","_jsx","fileSrc","t10","href","target","children","t11","_jsxs","buttonStyle","icon","iconStyle","onClick"],"sources":["../../../../src/fields/Upload/RelationshipContent/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TypeWithID } from 'payload'\n\nimport { formatFilesize, isImage } 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 { useConfig } from '../../../providers/Config/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 displayPreview?: boolean\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    displayPreview,\n    filename,\n    mimeType,\n    onRemove,\n    reloadDoc,\n    src,\n    thumbnailSrc,\n    withMeta = true,\n    x,\n    y,\n  } = props\n\n  const { config } = useConfig()\n  const collectionConfig =\n    'collections' in config\n      ? config.collections.find((collection) => collection.slug === collectionSlug)\n      : undefined\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  const previewAllowed = displayPreview ?? collectionConfig.upload?.displayPreview ?? true\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__imageAndDetails`}>\n        {previewAllowed && (\n          <ThumbnailComponent\n            alt={alt}\n            className={`${baseClass}__thumbnail`}\n            filename={filename}\n            fileSrc={isImage(mimeType) && thumbnailSrc}\n            size=\"small\"\n          />\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/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;AAqCnB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA0vBpC,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;AAqCnB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAwvBpC,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

@@ -583,46 +583,45 @@ export const Form = props => {
     setModified(false);
   }, [locale]);
   const classes = [className, baseClass].filter(Boolean).join(' ');
-  const executeOnChange = useEffectEvent(async (submitted_0, signal) => {
-    if (Array.isArray(onChange)) {
-      let revalidatedFormState_0 = contextRef.current.fields;
-      for (const onChangeFn of onChange) {
-        if (signal.aborted) {
+  const executeOnChange = useEffectEvent(submitted_0 => {
+    queueTask(async () => {
+      if (Array.isArray(onChange)) {
+        let revalidatedFormState_0 = contextRef.current.fields;
+        for (const onChangeFn of onChange) {
+          // Edit view default onChange is in packages/ui/src/views/Edit/index.tsx. This onChange usually sends a form state request
+          revalidatedFormState_0 = await onChangeFn({
+            formState: deepCopyObjectSimpleWithoutReactComponents(contextRef.current.fields),
+            submitted: submitted_0
+          });
+        }
+        if (!revalidatedFormState_0) {
           return;
         }
-        // Edit view default onChange is in packages/ui/src/views/Edit/index.tsx. This onChange usually sends a form state request
-        revalidatedFormState_0 = await onChangeFn({
-          formState: deepCopyObjectSimpleWithoutReactComponents(contextRef.current.fields),
-          submitted: submitted_0
-        });
-      }
-      if (!revalidatedFormState_0) {
-        return;
-      }
-      const {
-        changed,
-        newState: newState_0
-      } = mergeServerFormState({
-        existingState: contextRef.current.fields || {},
-        incomingState: revalidatedFormState_0
-      });
-      if (changed && !signal.aborted) {
-        prevFields.current = newState_0;
-        dispatchFields({
-          type: 'REPLACE_STATE',
-          optimize: false,
-          state: newState_0
+        const {
+          changed,
+          newState: newState_0
+        } = mergeServerFormState({
+          existingState: contextRef.current.fields || {},
+          incomingState: revalidatedFormState_0
         });
+        if (changed) {
+          prevFields.current = newState_0;
+          dispatchFields({
+            type: 'REPLACE_STATE',
+            optimize: false,
+            state: newState_0
+          });
+        }
       }
-    }
+    });
   });
   useDebouncedEffect(() => {
     if ((isFirstRenderRef.current || !dequal(fields, prevFields.current)) && modified) {
-      queueTask(async signal_0 => executeOnChange(submitted, signal_0));
+      executeOnChange(submitted);
     }
     prevFields.current = fields;
     isFirstRenderRef.current = false;
-  }, [modified, submitted, fields, queueTask], 250);
+  }, [modified, submitted, fields], 250);
   const DocumentFormContextComponent = isDocumentForm ? DocumentFormContext : React.Fragment;
   const documentFormContextProps = isDocumentForm ? {
     value: contextRef.current