@payloadcms/ui 4.0.0-internal.2fddfc0 → 4.0.0-internal.314c594

package/dist/elements/Upload/UploadFromURLModal/index.js

@@ -0,0 +1,88 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { TextInput } from '../../../fields/Text/Input.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js';
+export const pasteURLDrawerSlug = 'upload-paste-url';
+export const UploadFromURLModal = t0 => {
+  const $ = _c(12);
+  const {
+    fileUrl,
+    handleUrlSubmit,
+    isValidUrl,
+    setFileUrl
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== fileUrl || $[1] !== handleUrlSubmit || $[2] !== isValidUrl || $[3] !== setFileUrl || $[4] !== t) {
+    let t2;
+    if ($[6] !== handleUrlSubmit) {
+      t2 = e => {
+        e.preventDefault();
+        handleUrlSubmit();
+      };
+      $[6] = handleUrlSubmit;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    let t3;
+    if ($[8] !== setFileUrl) {
+      t3 = e_0 => setFileUrl(e_0.target.value);
+      $[8] = setFileUrl;
+      $[9] = t3;
+    } else {
+      t3 = $[9];
+    }
+    let t4;
+    if ($[10] !== handleUrlSubmit) {
+      t4 = () => void handleUrlSubmit();
+      $[10] = handleUrlSubmit;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    t1 = _jsxs(DialogModal, {
+      closeOnBlur: true,
+      slug: pasteURLDrawerSlug,
+      children: [_jsx(DialogHeader, {
+        showClose: true,
+        title: t("upload:fromURL")
+      }), _jsx(DialogBody, {
+        children: _jsx("form", {
+          onSubmit: t2,
+          children: _jsx(TextInput, {
+            label: t("upload:linkToFile"),
+            onChange: t3,
+            path: "url",
+            placeholder: "https://",
+            value: fileUrl
+          })
+        })
+      }), _jsx(DialogFooter, {
+        children: _jsx(Button, {
+          buttonStyle: "primary",
+          disabled: !isValidUrl,
+          onClick: t4,
+          children: t("upload:addFile")
+        })
+      })]
+    });
+    $[0] = fileUrl;
+    $[1] = handleUrlSubmit;
+    $[2] = isValidUrl;
+    $[3] = setFileUrl;
+    $[4] = t;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Upload/UploadFromURLModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","TextInput","useTranslation","Button","DialogBody","DialogFooter","DialogHeader","DialogModal","pasteURLDrawerSlug","UploadFromURLModal","t0","$","fileUrl","handleUrlSubmit","isValidUrl","setFileUrl","t","t1","t2","e","preventDefault","t3","e_0","target","value","t4","_jsxs","closeOnBlur","slug","children","_jsx","showClose","title","onSubmit","label","onChange","path","placeholder","buttonStyle","disabled","onClick"],"sources":["../../../../src/elements/Upload/UploadFromURLModal/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { TextInput } from '../../../fields/Text/Input.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js'\n\nexport const pasteURLDrawerSlug = 'upload-paste-url'\n\ntype Props = {\n  readonly fileUrl: string\n  readonly handleUrlSubmit: () => Promise<boolean>\n  readonly isValidUrl: boolean\n  readonly setFileUrl: (url: string) => void\n}\n\nexport const UploadFromURLModal: React.FC<Props> = ({\n  fileUrl,\n  handleUrlSubmit,\n  isValidUrl,\n  setFileUrl,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <DialogModal closeOnBlur slug={pasteURLDrawerSlug}>\n      <DialogHeader showClose title={t('upload:fromURL')} />\n      <DialogBody>\n        <form\n          onSubmit={(e) => {\n            e.preventDefault()\n            void handleUrlSubmit()\n          }}\n        >\n          <TextInput\n            label={t('upload:linkToFile')}\n            onChange={(e) => setFileUrl(e.target.value)}\n            path=\"url\"\n            placeholder=\"https://\"\n            value={fileUrl}\n          />\n        </form>\n      </DialogBody>\n      <DialogFooter>\n        <Button buttonStyle=\"primary\" disabled={!isValidUrl} onClick={() => void handleUrlSubmit()}>\n          {t('upload:addFile')}\n        </Button>\n      </DialogFooter>\n    </DialogModal>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,QAAQ;AAEpE,OAAO,MAAMC,kBAAA,GAAqB;AASlC,OAAO,MAAMC,kBAAA,GAAsCC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,OAAA;IAAAC,eAAA;IAAAC,UAAA;IAAAC;EAAA,IAAAL,EAKnD;EACC;IAAAM;EAAA,IAAcd,cAAA;EAAA,IAAAe,EAAA;EAAA,IAAAN,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,eAAA,IAAAF,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAK,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAP,CAAA,QAAAE,eAAA;MAOIK,EAAA,GAAAC,CAAA;QACRA,CAAA,CAAAC,cAAA,CAAgB;QACXP,eAAA;MAAA;MACPF,CAAA,MAAAE,eAAA;MAAAF,CAAA,MAAAO,EAAA;IAAA;MAAAA,EAAA,GAAAP,CAAA;IAAA;IAAA,IAAAU,EAAA;IAAA,IAAAV,CAAA,QAAAI,UAAA;MAIYM,EAAA,GAAAC,GAAA,IAAOP,UAAA,CAAWI,GAAA,CAAAI,MAAA,CAAAC,KAAc;MAAAb,CAAA,MAAAI,UAAA;MAAAJ,CAAA,MAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IAAA,IAAAc,EAAA;IAAA,IAAAd,CAAA,SAAAE,eAAA;MAQgBY,EAAA,GAAAA,CAAA,UAAWZ,eAAA;MAAAF,CAAA,OAAAE,eAAA;MAAAF,CAAA,OAAAc,EAAA;IAAA;MAAAA,EAAA,GAAAd,CAAA;IAAA;IAnB7EM,EAAA,GAAAS,KAAA,CAAAnB,WAAA;MAAAoB,WAAA;MAAAC,IAAA,EAAApB,kBAAA;MAAAqB,QAAA,GACEC,IAAA,CAAAxB,YAAA;QAAAyB,SAAA;QAAAC,KAAA,EAA+BhB,CAAA,CAAE;MAAA,C,GACjCc,IAAA,CAAA1B,UAAA;QAAAyB,QAAA,EACEC,IAAA,CAAC;UAAAG,QAAA,EACWf,EAGV;UAAAW,QAAA,EAEAC,IAAA,CAAA7B,SAAA;YAAAiC,KAAA,EACSlB,CAAA,CAAE;YAAAmB,QAAA,EACCd,EAAgC;YAAAe,IAAA,EACrC;YAAAC,WAAA,EACO;YAAAb,KAAA,EACLZ;UAAA,C;;UAIbkB,IAAA,CAAAzB,YAAA;QAAAwB,QAAA,EACEC,IAAA,CAAA3B,MAAA;UAAAmC,WAAA,EAAoB;UAAAC,QAAA,GAAqBzB,UAAA;UAAA0B,OAAA,EAAqBf,EAAW;UAAAI,QAAA,EACtEb,CAAA,CAAE;QAAA,C;;;;;;;;;;;;SApBTC,E;CAyBJ","ignoreList":[]}

package/dist/elements/Upload/index.css

@@ -8,11 +8,9 @@
 
   .file-field__upload {
     display: flex;
-  }
-
-  .file-field .tooltip.error-message {
-    z-index: 3;
-    bottom: calc(100% - var(--spacer-2));
+    position: relative;
+    flex-wrap: wrap;
+    justify-content: space-between;
   }
 
   .file-field__file-selected {
@@ -21,7 +19,7 @@
 
   .file-field__thumbnail-wrap {
     position: relative;
-    width: 150px;
+    width: 50%;
 
     .thumbnail {
       position: relative;
@@ -33,61 +31,28 @@
   }
 
   .file-field__remove {
-    margin: var(--spacer-4) var(--spacer-3) var(--spacer-3) 0;
-    place-self: flex-start;
+    position: absolute;
+    top: var(--spacer-2);
+    right: var(--spacer-2);
+    margin: var(--spacer-3);
+    z-index: 1;
+    order: 2;
   }
 
-  .file-field__file-adjustments,
-  .file-field__remote-file-wrap {
-    padding: var(--spacer-3);
+  .file-field__file-adjustments {
+    padding: var(--spacer-2);
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: var(--spacer-2);
+    gap: 0;
+    order: 3;
+    border-top: var(--stroke-width-medium) solid var(--color-bg-primary);
   }
 
-  .file-field__filename,
-  .file-field__remote-file {
-    font-family: var(--font-body);
-    width: 100%;
-    border: var(--stroke-width-small) solid var(--color-border);
-    border-radius: var(--radius-small);
-    background: var(--color-bg-primary);
-    color: var(--color-text);
-    font-size: 1rem;
-    height: var(--spacer-6);
-    line-height: var(--spacer-3);
-    padding: var(--spacer-1) var(--spacer-2-5);
-    -webkit-appearance: none;
-
-    &[data-rtl='true'] {
-      direction: rtl;
-    }
-
-    &::-webkit-input-placeholder {
-      color: var(--color-text-tertiary);
-      font-weight: normal;
-      font-size: 1rem;
-    }
-
-    &:hover {
-      border-color: var(--color-border-hover);
-    }
-
-    &:focus {
-      border-color: var(--color-border-selected);
-      outline: none;
-    }
-  }
-
-  .file-field__upload-actions,
-  .file-field__add-file-wrap {
+  .file-field__upload-actions {
     display: flex;
     gap: var(--spacer-2);
     flex-wrap: wrap;
-  }
-
-  .file-field__upload-actions {
     margin-top: var(--spacer-2);
   }
 
@@ -104,13 +69,18 @@
   .file-field .dropzone {
     background-color: transparent;
     padding: var(--spacer-2-5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .file-field__dropzoneContent {
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
-    gap: var(--spacer-1);
-    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacer-2);
+    justify-content: center;
     width: 100%;
   }
 
@@ -131,37 +101,158 @@
     text-transform: lowercase;
     align-self: center;
     color: var(--color-text-tertiary);
+    display: none;
+  }
+
+  .file-field--side-panel {
+    position: relative;
+    flex: 1 0 0;
+    width: 100%;
+    min-height: 400px;
+    margin-bottom: 0;
+    border-radius: 0;
+    background: var(--color-bg-secondary);
+  }
+
+  .file-field__side-panel {
+    position: static;
+    height: auto;
+    min-height: 400px;
+  }
+
+  .file-field__side-panel__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
   }
 
-  @media (max-width: 768px) {
+  .file-field__side-panel__preview {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    min-width: 0;
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-3) var(--spacer-4);
+    gap: var(--spacer-3);
+    overflow: hidden;
+    height: auto;
+  }
+
+  .file-field__side-panel__info {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+    min-width: 0;
+  }
+
+  .file-field__side-panel__info-label {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--spacer-2);
+    height: 16px;
+    border-radius: var(--radius-small);
+    background: var(--color-bg-secondary-hover);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .file-field__side-panel__info-meta {
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .file-field__side-panel__image-wrap {
+    flex: 1 0 0;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .thumbnail {
+      max-width: 100%;
+      max-height: 100%;
+
+      img,
+      svg {
+        object-fit: scale-down;
+      }
+    }
+  }
+
+  .file-field__side-panel__upload {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-4);
+    height: 100%;
+
+    .dropzone {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .file-field--side-panel {
+      min-height: max(500px, calc(100dvh - var(--doc-controls-height) - var(--app-header-height)));
+    }
+
+    .file-field__side-panel {
+      min-height: auto;
+    }
+
+    .file-field__side-panel__content {
+      flex-direction: row;
+    }
+  }
+
+  @media (min-width: 768px) {
     .file-field__upload {
-      flex-wrap: wrap;
-      justify-content: space-between;
+      flex-wrap: nowrap;
+      justify-content: normal;
     }
 
     .file-field__remove {
-      margin: var(--spacer-3);
-      order: 2;
+      margin: 0;
+      order: 0;
     }
 
     .file-field__file-adjustments {
-      order: 3;
-      border-top: 2px solid var(--color-bg-primary);
-      padding: var(--spacer-2);
-      gap: 0;
+      order: 0;
+      border-top: none;
+      padding: var(--spacer-3);
+      gap: var(--spacer-2);
     }
 
     .file-field__thumbnail-wrap {
-      order: 1;
-      width: 50%;
-
-      .thumbnail {
-        width: 100%;
-      }
+      order: 0;
+      width: 150px;
     }
 
     .file-field__edit {
-      display: none;
+      /* display: revert; */
+    }
+
+    .file-field__dragAndDropText {
+      display: block;
     }
   }
 }

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

@@ -1,6 +1,8 @@
-import type { FormState, SanitizedCollectionConfig, UploadEdits } from 'payload';
+import type { FormState, SanitizedCollectionConfig } from 'payload';
 import React from 'react';
 import './index.css';
+import { pasteURLDrawerSlug } from './UploadFromURLModal/index.js';
+export { pasteURLDrawerSlug };
 export declare const editDrawerSlug = "edit-upload";
 export declare const sizePreviewSlug = "preview-sizes";
 type UploadActionsArgs = {
@@ -19,11 +21,4 @@ export type UploadProps = {
     readonly UploadControls?: React.ReactNode;
 };
 export declare const Upload: React.FC<UploadProps>;
-export type UploadProps_v4 = {
-    readonly resetUploadEdits?: () => void;
-    readonly updateUploadEdits?: (args: UploadEdits) => void;
-    readonly uploadEdits?: UploadEdits;
-} & UploadProps;
-export declare const Upload_v4: React.FC<UploadProps_v4>;
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Upload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIhF,OAAO,KAA6D,MAAM,OAAO,CAAA;AAiBjF,OAAO,aAAa,CAAA;AAMpB,eAAO,MAAM,cAAc,gBAAgB,CAAA;AAC3C,eAAO,MAAM,eAAe,kBAAkB,CAAA;AAc9C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,qEAK3B,iBAAiB,sBAkDnB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAC1D,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAYxC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IACtC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACxD,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;CACnC,GAAG,WAAW,CAAA;AAEf,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwa9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Upload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAIhF,OAAO,KAAmD,MAAM,OAAO,CAAA;AAevE,OAAO,aAAa,CAAA;AAKpB,OAAO,EAAE,kBAAkB,EAAsB,MAAM,+BAA+B,CAAA;AAItF,OAAO,EAAE,kBAAkB,EAAE,CAAA;AAG7B,eAAO,MAAM,cAAc,gBAAgB,CAAA;AAC3C,eAAO,MAAM,eAAe,kBAAkB,CAAA;AAc9C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,aAAa,wEAKvB,iBAAiB,sBAkDnB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAC1D,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAYxC,CAAA"}