@payloadcms/ui 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

package/dist/elements/Upload/index.js

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useModal } from '@faceless-ui/modal';
 import { isImage } from 'payload/shared';
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
@@ -41,79 +40,30 @@ export const UploadActions = ({ customActions, enableAdjustments, enablePreviewS
     if (!fileTypeIsAdjustable && (!customActions || customActions.length === 0)) {
         return null;
     }
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: `${baseClass}__upload-actions`,
-        children: [
-            fileTypeIsAdjustable && /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                children: [
-                    enablePreviewSizes && /*#__PURE__*/ _jsxDEV(Button, {
-                        buttonStyle: "pill",
-                        className: `${baseClass}__previewSizes`,
-                        margin: false,
-                        onClick: ()=>{
-                            openModal(sizePreviewSlug);
-                        },
-                        size: "small",
-                        children: t('upload:previewSizes')
-                    }, void 0, false, {
-                        fileName: "src/elements/Upload/index.tsx",
-                        lineNumber: 72,
-                        columnNumber: 13
-                    }, this),
-                    enableAdjustments && /*#__PURE__*/ _jsxDEV(Button, {
-                        buttonStyle: "pill",
-                        className: `${baseClass}__edit`,
-                        margin: false,
-                        onClick: ()=>{
-                            openModal(editDrawerSlug);
-                        },
-                        size: "small",
-                        children: t('upload:editImage')
-                    }, void 0, false, {
-                        fileName: "src/elements/Upload/index.tsx",
-                        lineNumber: 85,
-                        columnNumber: 13
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/elements/Upload/index.tsx",
-                lineNumber: 70,
-                columnNumber: 9
-            }, this),
-            customActions && customActions.map((CustomAction, i)=>{
-                return /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                    children: CustomAction
-                }, i, false, {
-                    fileName: "src/elements/Upload/index.tsx",
-                    lineNumber: 102,
-                    columnNumber: 18
-                }, this);
-            })
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/Upload/index.tsx",
-        lineNumber: 68,
-        columnNumber: 5
-    }, this);
+    return <div className={`${baseClass}__upload-actions`}>
+      {fileTypeIsAdjustable && <React.Fragment>
+          {enablePreviewSizes && <Button buttonStyle="pill" className={`${baseClass}__previewSizes`} margin={false} onClick={()=>{
+        openModal(sizePreviewSlug);
+    }} size="small">
+              {t('upload:previewSizes')}
+            </Button>}
+          {enableAdjustments && <Button buttonStyle="pill" className={`${baseClass}__edit`} margin={false} onClick={()=>{
+        openModal(editDrawerSlug);
+    }} size="small">
+              {t('upload:editImage')}
+            </Button>}
+        </React.Fragment>}
+
+      {customActions && customActions.map((CustomAction, i)=>{
+        return <React.Fragment key={i}>{CustomAction}</React.Fragment>;
+    })}
+    </div>;
 };
 export const Upload = (props)=>{
     const { resetUploadEdits, updateUploadEdits, uploadEdits } = useUploadEdits();
-    return /*#__PURE__*/ _jsxDEV(UploadControlsProvider, {
-        children: /*#__PURE__*/ _jsxDEV(Upload_v4, {
-            ...props,
-            resetUploadEdits: resetUploadEdits,
-            updateUploadEdits: updateUploadEdits,
-            uploadEdits: uploadEdits
-        }, void 0, false, {
-            fileName: "src/elements/Upload/index.tsx",
-            lineNumber: 121,
-            columnNumber: 7
-        }, this)
-    }, void 0, false, {
-        fileName: "src/elements/Upload/index.tsx",
-        lineNumber: 120,
-        columnNumber: 5
-    }, this);
+    return <UploadControlsProvider>
+      <Upload_v4 {...props} resetUploadEdits={resetUploadEdits} updateUploadEdits={updateUploadEdits} uploadEdits={uploadEdits}/>
+    </UploadControlsProvider>;
 };
 export const Upload_v4 = (props)=>{
     const { collectionSlug, customActions, initialState, onChange, resetUploadEdits, updateUploadEdits, uploadConfig, UploadControls, uploadEdits } = props;
@@ -332,336 +282,94 @@ export const Upload_v4 = (props)=>{
         uploadControlFile,
         handleFileChange
     ]);
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            fieldBaseClass,
-            baseClass
-        ].filter(Boolean).join(' '),
-        children: [
-            /*#__PURE__*/ _jsxDEV(FieldError, {
-                message: errorMessage,
-                showError: showError
-            }, void 0, false, {
-                fileName: "src/elements/Upload/index.tsx",
-                lineNumber: 380,
-                columnNumber: 7
-            }, this),
-            data && data.filename && !removedFile && /*#__PURE__*/ _jsxDEV(FileDetails, {
-                collectionSlug: collectionSlug,
-                customUploadActions: customActions,
-                doc: data,
-                enableAdjustments: showCrop || showFocalPoint,
-                handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
-                hasImageSizes: hasImageSizes,
-                hideRemoveFile: uploadConfig.hideRemoveFile,
-                imageCacheTag: imageCacheTag,
-                uploadConfig: uploadConfig
-            }, void 0, false, {
-                fileName: "src/elements/Upload/index.tsx",
-                lineNumber: 382,
-                columnNumber: 9
-            }, this),
-            (!uploadConfig.hideFileInputOnCreate && !data?.filename || removedFile) && /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__upload`,
-                children: [
-                    !value && !showUrlInput && /*#__PURE__*/ _jsxDEV(Dropzone, {
-                        onChange: handleFileSelection,
-                        children: /*#__PURE__*/ _jsxDEV("div", {
-                            className: `${baseClass}__dropzoneContent`,
-                            children: [
-                                /*#__PURE__*/ _jsxDEV("div", {
-                                    className: `${baseClass}__dropzoneButtons`,
-                                    children: [
-                                        /*#__PURE__*/ _jsxDEV(Button, {
-                                            buttonStyle: "pill",
-                                            onClick: ()=>{
-                                                if (inputRef.current) {
-                                                    inputRef.current.click();
-                                                }
-                                            },
-                                            size: "small",
-                                            children: t('upload:selectFile')
-                                        }, void 0, false, {
-                                            fileName: "src/elements/Upload/index.tsx",
-                                            lineNumber: 400,
-                                            columnNumber: 19
-                                        }, this),
-                                        /*#__PURE__*/ _jsxDEV("input", {
-                                            accept: acceptMimeTypes,
-                                            "aria-hidden": "true",
-                                            className: `${baseClass}__hidden-input`,
-                                            hidden: true,
-                                            onChange: (e)=>{
-                                                if (e.target.files && e.target.files.length > 0) {
-                                                    handleFileSelection(e.target.files);
-                                                }
-                                            },
-                                            ref: inputRef,
-                                            type: "file"
-                                        }, void 0, false, {
-                                            fileName: "src/elements/Upload/index.tsx",
-                                            lineNumber: 411,
-                                            columnNumber: 19
-                                        }, this),
-                                        uploadConfig?.pasteURL !== false && /*#__PURE__*/ _jsxDEV(Fragment, {
-                                            children: [
-                                                /*#__PURE__*/ _jsxDEV("span", {
-                                                    className: `${baseClass}__orText`,
-                                                    children: t('general:or')
-                                                }, void 0, false, {
-                                                    fileName: "src/elements/Upload/index.tsx",
-                                                    lineNumber: 426,
-                                                    columnNumber: 23
-                                                }, this),
-                                                /*#__PURE__*/ _jsxDEV(Button, {
-                                                    buttonStyle: "pill",
-                                                    onClick: ()=>{
-                                                        setShowUrlInput(true);
-                                                        setUploadControlFileUrl('');
-                                                        setUploadControlFile(null);
-                                                        setUploadControlFileName(null);
-                                                    },
-                                                    size: "small",
-                                                    children: t('upload:pasteURL')
-                                                }, void 0, false, {
-                                                    fileName: "src/elements/Upload/index.tsx",
-                                                    lineNumber: 427,
-                                                    columnNumber: 23
-                                                }, this)
-                                            ]
-                                        }, void 0, true, {
-                                            fileName: "src/elements/Upload/index.tsx",
-                                            lineNumber: 425,
-                                            columnNumber: 21
-                                        }, this),
-                                        UploadControls ? UploadControls : null
-                                    ]
-                                }, void 0, true, {
-                                    fileName: "src/elements/Upload/index.tsx",
-                                    lineNumber: 399,
-                                    columnNumber: 17
-                                }, this),
-                                /*#__PURE__*/ _jsxDEV("p", {
-                                    className: `${baseClass}__dragAndDropText`,
-                                    children: [
-                                        t('general:or'),
-                                        " ",
-                                        t('upload:dragAndDrop')
-                                    ]
-                                }, void 0, true, {
-                                    fileName: "src/elements/Upload/index.tsx",
-                                    lineNumber: 444,
-                                    columnNumber: 17
-                                }, this)
-                            ]
-                        }, void 0, true, {
-                            fileName: "src/elements/Upload/index.tsx",
-                            lineNumber: 398,
-                            columnNumber: 15
-                        }, this)
-                    }, void 0, false, {
-                        fileName: "src/elements/Upload/index.tsx",
-                        lineNumber: 397,
-                        columnNumber: 13
-                    }, this),
-                    showUrlInput && /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsxDEV("div", {
-                                className: `${baseClass}__remote-file-wrap`,
-                                children: [
-                                    /* eslint-disable-next-line jsx-a11y/control-has-associated-label */ /*#__PURE__*/ _jsxDEV("input", {
-                                        className: `${baseClass}__remote-file`,
-                                        onChange: (e)=>{
-                                            setFileUrl(e.target.value);
-                                        },
-                                        ref: urlInputRef,
-                                        title: fileUrl,
-                                        type: "text",
-                                        value: fileUrl
-                                    }, void 0, false, {
-                                        fileName: "src/elements/Upload/index.tsx",
-                                        lineNumber: 454,
-                                        columnNumber: 17
-                                    }, this),
-                                    /*#__PURE__*/ _jsxDEV("div", {
-                                        className: `${baseClass}__add-file-wrap`,
-                                        children: /*#__PURE__*/ _jsxDEV("button", {
-                                            className: `${baseClass}__add-file`,
-                                            onClick: ()=>{
-                                                void handleUrlSubmit();
-                                            },
-                                            type: "button",
-                                            children: t('upload:addFile')
-                                        }, void 0, false, {
-                                            fileName: "src/elements/Upload/index.tsx",
-                                            lineNumber: 465,
-                                            columnNumber: 19
-                                        }, this)
-                                    }, void 0, false, {
-                                        fileName: "src/elements/Upload/index.tsx",
-                                        lineNumber: 464,
-                                        columnNumber: 17
-                                    }, this)
-                                ]
-                            }, void 0, true, {
-                                fileName: "src/elements/Upload/index.tsx",
-                                lineNumber: 452,
-                                columnNumber: 15
-                            }, this),
-                            /*#__PURE__*/ _jsxDEV(Button, {
-                                buttonStyle: "icon-label",
-                                className: `${baseClass}__remove`,
-                                icon: "x",
-                                iconStyle: "with-border",
-                                onClick: ()=>{
-                                    setShowUrlInput(false);
-                                    setUploadControlFileUrl('');
-                                    setUploadControlFile(null);
-                                    setUploadControlFileName(null);
-                                },
-                                round: true,
-                                tooltip: t('general:cancel')
-                            }, void 0, false, {
-                                fileName: "src/elements/Upload/index.tsx",
-                                lineNumber: 476,
-                                columnNumber: 15
-                            }, this)
-                        ]
-                    }, void 0, true, {
-                        fileName: "src/elements/Upload/index.tsx",
-                        lineNumber: 451,
-                        columnNumber: 13
-                    }, this),
-                    value && fileSrc && /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsxDEV("div", {
-                                className: `${baseClass}__thumbnail-wrap`,
-                                children: /*#__PURE__*/ _jsxDEV(Thumbnail, {
-                                    collectionSlug: collectionSlug,
-                                    fileSrc: isImage(value.type) ? fileSrc : null
-                                }, void 0, false, {
-                                    fileName: "src/elements/Upload/index.tsx",
-                                    lineNumber: 495,
-                                    columnNumber: 17
-                                }, this)
-                            }, void 0, false, {
-                                fileName: "src/elements/Upload/index.tsx",
-                                lineNumber: 494,
-                                columnNumber: 15
-                            }, this),
-                            /*#__PURE__*/ _jsxDEV("div", {
-                                className: `${baseClass}__file-adjustments`,
-                                children: [
-                                    /* eslint-disable-next-line jsx-a11y/control-has-associated-label */ /*#__PURE__*/ _jsxDEV("input", {
-                                        className: `${baseClass}__filename`,
-                                        onChange: handleFileNameChange,
-                                        title: filename || value.name,
-                                        type: "text",
-                                        value: filename || value.name
-                                    }, void 0, false, {
-                                        fileName: "src/elements/Upload/index.tsx",
-                                        lineNumber: 502,
-                                        columnNumber: 17
-                                    }, this),
-                                    /*#__PURE__*/ _jsxDEV(UploadActions, {
-                                        customActions: customActions,
-                                        enableAdjustments: showCrop || showFocalPoint,
-                                        enablePreviewSizes: hasImageSizes && data?.filename && !removedFile,
-                                        mimeType: value.type
-                                    }, void 0, false, {
-                                        fileName: "src/elements/Upload/index.tsx",
-                                        lineNumber: 509,
-                                        columnNumber: 17
-                                    }, this)
-                                ]
-                            }, void 0, true, {
-                                fileName: "src/elements/Upload/index.tsx",
-                                lineNumber: 500,
-                                columnNumber: 15
-                            }, this),
-                            /*#__PURE__*/ _jsxDEV(Button, {
-                                buttonStyle: "icon-label",
-                                className: `${baseClass}__remove`,
-                                icon: "x",
-                                iconStyle: "with-border",
-                                onClick: handleFileRemoval,
-                                round: true,
-                                tooltip: t('general:cancel')
-                            }, void 0, false, {
-                                fileName: "src/elements/Upload/index.tsx",
-                                lineNumber: 516,
-                                columnNumber: 15
-                            }, this)
-                        ]
-                    }, void 0, true, {
-                        fileName: "src/elements/Upload/index.tsx",
-                        lineNumber: 493,
-                        columnNumber: 13
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/elements/Upload/index.tsx",
-                lineNumber: 395,
-                columnNumber: 9
-            }, this),
-            (value || data?.filename) && /*#__PURE__*/ _jsxDEV(EditDepthProvider, {
-                children: /*#__PURE__*/ _jsxDEV(Drawer, {
-                    Header: null,
-                    slug: editDrawerSlug,
-                    children: /*#__PURE__*/ _jsxDEV(EditUpload, {
-                        fileName: value?.name || data?.filename,
-                        fileSrc: data?.url || fileSrc,
-                        imageCacheTag: imageCacheTag,
-                        initialCrop: uploadEdits?.crop ?? undefined,
-                        initialFocalPoint: {
-                            x: uploadEdits?.focalPoint?.x || data?.focalX || 50,
-                            y: uploadEdits?.focalPoint?.y || data?.focalY || 50
-                        },
-                        onSave: onEditsSave,
-                        showCrop: showCrop,
-                        showFocalPoint: showFocalPoint
-                    }, void 0, false, {
-                        fileName: "src/elements/Upload/index.tsx",
-                        lineNumber: 532,
-                        columnNumber: 13
-                    }, this)
-                }, void 0, false, {
-                    fileName: "src/elements/Upload/index.tsx",
-                    lineNumber: 531,
-                    columnNumber: 11
-                }, this)
-            }, void 0, false, {
-                fileName: "src/elements/Upload/index.tsx",
-                lineNumber: 530,
-                columnNumber: 9
-            }, this),
-            data && hasImageSizes && /*#__PURE__*/ _jsxDEV(Drawer, {
-                className: `${baseClass}__previewDrawer`,
-                hoverTitle: true,
-                slug: sizePreviewSlug,
-                title: t('upload:sizesFor', {
-                    label: data.filename
-                }),
-                children: /*#__PURE__*/ _jsxDEV(PreviewSizes, {
-                    doc: data,
-                    imageCacheTag: imageCacheTag,
-                    uploadConfig: uploadConfig
-                }, void 0, false, {
-                    fileName: "src/elements/Upload/index.tsx",
-                    lineNumber: 555,
-                    columnNumber: 11
-                }, this)
-            }, void 0, false, {
-                fileName: "src/elements/Upload/index.tsx",
-                lineNumber: 549,
-                columnNumber: 9
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/Upload/index.tsx",
-        lineNumber: 379,
-        columnNumber: 5
-    }, this);
+    return <div className={[
+        fieldBaseClass,
+        baseClass
+    ].filter(Boolean).join(' ')}>
+      <FieldError message={errorMessage} showError={showError}/>
+      {data && data.filename && !removedFile && <FileDetails collectionSlug={collectionSlug} customUploadActions={customActions} doc={data} enableAdjustments={showCrop || showFocalPoint} handleRemove={canRemoveUpload ? handleFileRemoval : undefined} hasImageSizes={hasImageSizes} hideRemoveFile={uploadConfig.hideRemoveFile} imageCacheTag={imageCacheTag} uploadConfig={uploadConfig}/>}
+      {(!uploadConfig.hideFileInputOnCreate && !data?.filename || removedFile) && <div className={`${baseClass}__upload`}>
+          {!value && !showUrlInput && <Dropzone onChange={handleFileSelection}>
+              <div className={`${baseClass}__dropzoneContent`}>
+                <div className={`${baseClass}__dropzoneButtons`}>
+                  <Button buttonStyle="pill" onClick={()=>{
+        if (inputRef.current) {
+            inputRef.current.click();
+        }
+    }} size="small">
+                    {t('upload:selectFile')}
+                  </Button>
+                  <input accept={acceptMimeTypes} aria-hidden="true" className={`${baseClass}__hidden-input`} hidden onChange={(e)=>{
+        if (e.target.files && e.target.files.length > 0) {
+            handleFileSelection(e.target.files);
+        }
+    }} ref={inputRef} type="file"/>
+                  {uploadConfig?.pasteURL !== false && <Fragment>
+                      <span className={`${baseClass}__orText`}>{t('general:or')}</span>
+                      <Button buttonStyle="pill" onClick={()=>{
+        setShowUrlInput(true);
+        setUploadControlFileUrl('');
+        setUploadControlFile(null);
+        setUploadControlFileName(null);
+    }} size="small">
+                        {t('upload:pasteURL')}
+                      </Button>
+                    </Fragment>}
+
+                  {UploadControls ? UploadControls : null}
+                </div>
+                <p className={`${baseClass}__dragAndDropText`}>
+                  {t('general:or')} {t('upload:dragAndDrop')}
+                </p>
+              </div>
+            </Dropzone>}
+          {showUrlInput && <React.Fragment>
+              <div className={`${baseClass}__remote-file-wrap`}>
+                {}
+                <input className={`${baseClass}__remote-file`} onChange={(e)=>{
+        setFileUrl(e.target.value);
+    }} ref={urlInputRef} title={fileUrl} type="text" value={fileUrl}/>
+                <div className={`${baseClass}__add-file-wrap`}>
+                  <button className={`${baseClass}__add-file`} onClick={()=>{
+        void handleUrlSubmit();
+    }} type="button">
+                    {t('upload:addFile')}
+                  </button>
+                </div>
+              </div>
+              <Button buttonStyle="icon-label" className={`${baseClass}__remove`} icon="x" iconStyle="with-border" onClick={()=>{
+        setShowUrlInput(false);
+        setUploadControlFileUrl('');
+        setUploadControlFile(null);
+        setUploadControlFileName(null);
+    }} round tooltip={t('general:cancel')}/>
+            </React.Fragment>}
+          {value && fileSrc && <React.Fragment>
+              <div className={`${baseClass}__thumbnail-wrap`}>
+                <Thumbnail collectionSlug={collectionSlug} fileSrc={isImage(value.type) ? fileSrc : null}/>
+              </div>
+              <div className={`${baseClass}__file-adjustments`}>
+                {}
+                <input className={`${baseClass}__filename`} onChange={handleFileNameChange} title={filename || value.name} type="text" value={filename || value.name}/>
+                <UploadActions customActions={customActions} enableAdjustments={showCrop || showFocalPoint} enablePreviewSizes={hasImageSizes && data?.filename && !removedFile} mimeType={value.type}/>
+              </div>
+              <Button buttonStyle="icon-label" className={`${baseClass}__remove`} icon="x" iconStyle="with-border" onClick={handleFileRemoval} round tooltip={t('general:cancel')}/>
+            </React.Fragment>}
+        </div>}
+      {(value || data?.filename) && <EditDepthProvider>
+          <Drawer Header={null} slug={editDrawerSlug}>
+            <EditUpload fileName={value?.name || data?.filename} fileSrc={data?.url || fileSrc} imageCacheTag={imageCacheTag} initialCrop={uploadEdits?.crop ?? undefined} initialFocalPoint={{
+        x: uploadEdits?.focalPoint?.x || data?.focalX || 50,
+        y: uploadEdits?.focalPoint?.y || data?.focalY || 50
+    }} onSave={onEditsSave} showCrop={showCrop} showFocalPoint={showFocalPoint}/>
+          </Drawer>
+        </EditDepthProvider>}
+      {data && hasImageSizes && <Drawer className={`${baseClass}__previewDrawer`} hoverTitle slug={sizePreviewSlug} title={t('upload:sizesFor', {
+        label: data.filename
+    })}>
+          <PreviewSizes doc={data} imageCacheTag={imageCacheTag} uploadConfig={uploadConfig}/>
+        </Drawer>}
+    </div>;
 };
 
 //# sourceMappingURL=index.js.map