@payloadcms/ui 4.0.0-internal.011fd46 → 4.0.0-internal.078835b

package/dist/elements/BulkUpload/AddFilesView/index.css

@@ -1,22 +1,28 @@
 @layer payload-default {
-  .bulk-upload--add-files {
-    height: 100%;
+  .bulk-upload--add-files__body {
     display: flex;
-    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--spacer-2-5);
   }
 
   .bulk-upload--add-files__dropArea {
-    height: 100%;
-    padding: var(--spacer-2-5);
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    /* Prefer a 1.5 aspect ratio, but never exceed the available height. When the dialog is height
+       constrained the body shrinks (via the flex chain) and `max-height: 100%` caps the drop area so
+       the ratio yields instead of the bottom being clipped by the dialog's `overflow: clip`. */
+    max-height: 100%;
+    aspect-ratio: 1.5;
 
     .dropzone {
-      height: 100%;
+      flex: 1 1 auto;
       align-items: center;
       flex-direction: column;
       justify-content: center;
       display: flex;
-      gap: var(--spacer-4);
-      background-color: var(--color-bg-secondary);
+      gap: var(--spacer-2);
 
       p {
         margin: 0;

package/dist/elements/BulkUpload/AddFilesView/index.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import './index.css';
 type Props = {
     readonly acceptMimeTypes?: string;
-    readonly onCancel: () => void;
+    readonly modalSlug: string;
     readonly onDrop: (acceptedFiles: FileList) => void;
 };
-export declare function AddFilesView({ acceptMimeTypes, onCancel, onDrop }: Props): React.JSX.Element;
+export declare function AddFilesView({ acceptMimeTypes, modalSlug: modalSlug, onDrop }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/BulkUpload/AddFilesView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAA;CACnD,CAAA;AACD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,KAAK,qBA4CxE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAA;CACnD,CAAA;AACD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,qBA8CpF"}

package/dist/elements/BulkUpload/AddFilesView/index.js

@@ -4,56 +4,61 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
+import { DialogHeader, DialogModal } from '../../Dialog/index.js';
 import { Dropzone } from '../../Dropzone/index.js';
-import { DrawerHeader } from '../Header/index.js';
 import './index.css';
 const baseClass = 'bulk-upload--add-files';
 export function AddFilesView({
   acceptMimeTypes,
-  onCancel,
+  modalSlug: modalSlug,
   onDrop
 }) {
   const {
     t
   } = useTranslation();
   const inputRef = React.useRef(null);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(DialogModal, {
     className: baseClass,
-    children: [/*#__PURE__*/_jsx(DrawerHeader, {
-      onClose: onCancel,
+    size: "large",
+    slug: modalSlug,
+    children: [/*#__PURE__*/_jsx(DialogHeader, {
+      showClose: true,
       title: t('upload:addFiles')
     }), /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__dropArea`,
-      children: /*#__PURE__*/_jsxs(Dropzone, {
-        multipleFiles: true,
-        onChange: onDrop,
-        children: [/*#__PURE__*/_jsx(Button, {
-          buttonStyle: "primary",
-          iconPosition: "left",
-          onClick: () => {
-            if (inputRef.current) {
-              inputRef.current.click();
-            }
-          },
-          size: "medium",
-          children: t('upload:selectFile')
-        }), /*#__PURE__*/_jsx("input", {
-          accept: acceptMimeTypes,
-          "aria-hidden": "true",
-          className: `${baseClass}__hidden-input`,
-          hidden: true,
-          multiple: true,
-          onChange: e => {
-            if (e.target.files && e.target.files.length > 0) {
-              onDrop(e.target.files);
-            }
-          },
-          ref: inputRef,
-          type: "file"
-        }), /*#__PURE__*/_jsxs("p", {
-          className: `${baseClass}__dragAndDropText`,
-          children: [t('general:or'), " ", t('upload:dragAndDrop')]
-        })]
+      className: `${baseClass}__body`,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__dropArea`,
+        children: /*#__PURE__*/_jsxs(Dropzone, {
+          multipleFiles: true,
+          onChange: onDrop,
+          children: [/*#__PURE__*/_jsx(Button, {
+            buttonStyle: "primary",
+            iconPosition: "left",
+            onClick: () => {
+              if (inputRef.current) {
+                inputRef.current.click();
+              }
+            },
+            size: "medium",
+            children: t('upload:selectFile')
+          }), /*#__PURE__*/_jsx("input", {
+            accept: acceptMimeTypes,
+            "aria-hidden": "true",
+            className: `${baseClass}__hidden-input`,
+            hidden: true,
+            multiple: true,
+            onChange: e => {
+              if (e.target.files && e.target.files.length > 0) {
+                onDrop(e.target.files);
+              }
+            },
+            ref: inputRef,
+            type: "file"
+          }), /*#__PURE__*/_jsxs("p", {
+            className: `${baseClass}__dragAndDropText`,
+            children: [t('general:or'), " ", t('upload:dragAndDrop')]
+          })]
+        })
       })
     })]
   });

package/dist/elements/BulkUpload/AddFilesView/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useTranslation","Button","Dropzone","DrawerHeader","baseClass","AddFilesView","acceptMimeTypes","onCancel","onDrop","t","inputRef","useRef","_jsxs","className","_jsx","onClose","title","multipleFiles","onChange","buttonStyle","iconPosition","onClick","current","click","size","accept","hidden","multiple","e","target","files","length","ref","type"],"sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Dropzone } from '../../Dropzone/index.js'\nimport { DrawerHeader } from '../Header/index.js'\nimport './index.css'\n\nconst baseClass = 'bulk-upload--add-files'\n\ntype Props = {\n  readonly acceptMimeTypes?: string\n  readonly onCancel: () => void\n  readonly onDrop: (acceptedFiles: FileList) => void\n}\nexport function AddFilesView({ acceptMimeTypes, onCancel, onDrop }: Props) {\n  const { t } = useTranslation()\n\n  const inputRef = React.useRef(null)\n\n  return (\n    <div className={baseClass}>\n      <DrawerHeader onClose={onCancel} title={t('upload:addFiles')} />\n      <div className={`${baseClass}__dropArea`}>\n        <Dropzone multipleFiles onChange={onDrop}>\n          <Button\n            buttonStyle=\"primary\"\n            iconPosition=\"left\"\n            onClick={() => {\n              if (inputRef.current) {\n                inputRef.current.click()\n              }\n            }}\n            size=\"medium\"\n          >\n            {t('upload:selectFile')}\n          </Button>\n          <input\n            accept={acceptMimeTypes}\n            aria-hidden=\"true\"\n            className={`${baseClass}__hidden-input`}\n            hidden\n            multiple\n            onChange={(e) => {\n              if (e.target.files && e.target.files.length > 0) {\n                onDrop(e.target.files)\n              }\n            }}\n            ref={inputRef}\n            type=\"file\"\n          />\n\n          <p className={`${baseClass}__dragAndDropText`}>\n            {t('general:or')} {t('upload:dragAndDrop')}\n          </p>\n        </Dropzone>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,SAASC,aAAa;EAAEC,eAAe;EAAEC,QAAQ;EAAEC;AAAM,CAAS;EACvE,MAAM;IAAEC;EAAC,CAAE,GAAGT,cAAA;EAEd,MAAMU,QAAA,GAAWX,KAAA,CAAMY,MAAM,CAAC;EAE9B,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAWT,SAAA;4BACdU,IAAA,CAACX,YAAA;MAAaY,OAAA,EAASR,QAAA;MAAUS,KAAA,EAAOP,CAAA,CAAE;qBAC1CK,IAAA,CAAC;MAAID,SAAA,EAAW,GAAGT,SAAA,YAAqB;gBACtC,aAAAQ,KAAA,CAACV,QAAA;QAASe,aAAa;QAACC,QAAA,EAAUV,MAAA;gCAChCM,IAAA,CAACb,MAAA;UACCkB,WAAA,EAAY;UACZC,YAAA,EAAa;UACbC,OAAA,EAASA,CAAA;YACP,IAAIX,QAAA,CAASY,OAAO,EAAE;cACpBZ,QAAA,CAASY,OAAO,CAACC,KAAK;YACxB;UACF;UACAC,IAAA,EAAK;oBAEJf,CAAA,CAAE;yBAELK,IAAA,CAAC;UACCW,MAAA,EAAQnB,eAAA;UACR,eAAY;UACZO,SAAA,EAAW,GAAGT,SAAA,gBAAyB;UACvCsB,MAAM;UACNC,QAAQ;UACRT,QAAA,EAAWU,CAAA;YACT,IAAIA,CAAA,CAAEC,MAAM,CAACC,KAAK,IAAIF,CAAA,CAAEC,MAAM,CAACC,KAAK,CAACC,MAAM,GAAG,GAAG;cAC/CvB,MAAA,CAAOoB,CAAA,CAAEC,MAAM,CAACC,KAAK;YACvB;UACF;UACAE,GAAA,EAAKtB,QAAA;UACLuB,IAAA,EAAK;yBAGPrB,KAAA,CAAC;UAAEC,SAAA,EAAW,GAAGT,SAAA,mBAA4B;qBAC1CK,CAAA,CAAE,eAAc,KAAEA,CAAA,CAAE;;;;;AAMjC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useTranslation","Button","DialogHeader","DialogModal","Dropzone","baseClass","AddFilesView","acceptMimeTypes","modalSlug","onDrop","t","inputRef","useRef","_jsxs","className","size","slug","_jsx","showClose","title","multipleFiles","onChange","buttonStyle","iconPosition","onClick","current","click","accept","hidden","multiple","e","target","files","length","ref","type"],"sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogHeader, DialogModal } from '../../Dialog/index.js'\nimport { Dropzone } from '../../Dropzone/index.js'\nimport './index.css'\n\nconst baseClass = 'bulk-upload--add-files'\n\ntype Props = {\n  readonly acceptMimeTypes?: string\n  readonly modalSlug: string\n  readonly onDrop: (acceptedFiles: FileList) => void\n}\nexport function AddFilesView({ acceptMimeTypes, modalSlug: modalSlug, onDrop }: Props) {\n  const { t } = useTranslation()\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  return (\n    <DialogModal className={baseClass} size=\"large\" slug={modalSlug}>\n      <DialogHeader showClose title={t('upload:addFiles')} />\n      <div className={`${baseClass}__body`}>\n        <div className={`${baseClass}__dropArea`}>\n          <Dropzone multipleFiles onChange={onDrop}>\n            <Button\n              buttonStyle=\"primary\"\n              iconPosition=\"left\"\n              onClick={() => {\n                if (inputRef.current) {\n                  inputRef.current.click()\n                }\n              }}\n              size=\"medium\"\n            >\n              {t('upload:selectFile')}\n            </Button>\n            <input\n              accept={acceptMimeTypes}\n              aria-hidden=\"true\"\n              className={`${baseClass}__hidden-input`}\n              hidden\n              multiple\n              onChange={(e) => {\n                if (e.target.files && e.target.files.length > 0) {\n                  onDrop(e.target.files)\n                }\n              }}\n              ref={inputRef}\n              type=\"file\"\n            />\n\n            <p className={`${baseClass}__dragAndDropText`}>\n              {t('general:or')} {t('upload:dragAndDrop')}\n            </p>\n          </Dropzone>\n        </div>\n      </div>\n    </DialogModal>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,YAAY,EAAEC,WAAW,QAAQ;AAC1C,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,SAASC,aAAa;EAAEC,eAAe;EAAEC,SAAA,EAAWA,SAAS;EAAEC;AAAM,CAAS;EACnF,MAAM;IAAEC;EAAC,CAAE,GAAGV,cAAA;EAEd,MAAMW,QAAA,GAAWZ,KAAA,CAAMa,MAAM,CAAmB;EAEhD,oBACEC,KAAA,CAACV,WAAA;IAAYW,SAAA,EAAWT,SAAA;IAAWU,IAAA,EAAK;IAAQC,IAAA,EAAMR,SAAA;4BACpDS,IAAA,CAACf,YAAA;MAAagB,SAAS;MAACC,KAAA,EAAOT,CAAA,CAAE;qBACjCO,IAAA,CAAC;MAAIH,SAAA,EAAW,GAAGT,SAAA,QAAiB;gBAClC,aAAAY,IAAA,CAAC;QAAIH,SAAA,EAAW,GAAGT,SAAA,YAAqB;kBACtC,aAAAQ,KAAA,CAACT,QAAA;UAASgB,aAAa;UAACC,QAAA,EAAUZ,MAAA;kCAChCQ,IAAA,CAAChB,MAAA;YACCqB,WAAA,EAAY;YACZC,YAAA,EAAa;YACbC,OAAA,EAASA,CAAA;cACP,IAAIb,QAAA,CAASc,OAAO,EAAE;gBACpBd,QAAA,CAASc,OAAO,CAACC,KAAK;cACxB;YACF;YACAX,IAAA,EAAK;sBAEJL,CAAA,CAAE;2BAELO,IAAA,CAAC;YACCU,MAAA,EAAQpB,eAAA;YACR,eAAY;YACZO,SAAA,EAAW,GAAGT,SAAA,gBAAyB;YACvCuB,MAAM;YACNC,QAAQ;YACRR,QAAA,EAAWS,CAAA;cACT,IAAIA,CAAA,CAAEC,MAAM,CAACC,KAAK,IAAIF,CAAA,CAAEC,MAAM,CAACC,KAAK,CAACC,MAAM,GAAG,GAAG;gBAC/CxB,MAAA,CAAOqB,CAAA,CAAEC,MAAM,CAACC,KAAK;cACvB;YACF;YACAE,GAAA,EAAKvB,QAAA;YACLwB,IAAA,EAAK;2BAGPtB,KAAA,CAAC;YAAEC,SAAA,EAAW,GAAGT,SAAA,mBAA4B;uBAC1CK,CAAA,CAAE,eAAc,KAAEA,CAAA,CAAE;;;;;;AAOnC","ignoreList":[]}

package/dist/elements/BulkUpload/AddingFilesView/index.css

@@ -1,25 +1,177 @@
 @layer payload-default {
-  .bulk-upload--file-manager {
+  .bulk-upload--file-manager__header-title-section {
     display: flex;
-    height: 100%;
+    gap: var(--spacer-2);
+    align-items: center;
+  }
+
+  .bulk-upload--file-manager .dialog__header-extras {
+    display: flex;
+    gap: var(--spacer-2);
+  }
+
+  /* The dialog is otherwise content-sized; give it a definite height so the inner flex chain has
+     something to resolve against and the fields column can scroll internally. */
+  .dialog.bulk-upload--file-manager {
+    height: min(720px, var(--dialog-max-height));
+  }
+
+  /* The body is the two-column row (file tree + edit view) that fills the space between the header
+     and the actions footer. */
+  .bulk-upload--file-manager__body {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
     width: 100%;
     overflow: hidden;
   }
 
+  .bulk-upload--file-manager > .dialog__footer {
+    border-block-start: var(--stroke-width-small) solid var(--color-border);
+  }
+
   .bulk-upload--file-manager__editView {
-    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    /* Edit view holds the 4fr content + 5fr media columns, so it takes 9fr next to the 3fr tree. */
+    flex: 9 1 0;
+    min-width: 0;
     height: 100%;
     max-height: 100%;
-    overflow: auto;
+    /* The edit view itself does not scroll — the preview stays put while the fields column scrolls
+       internally. */
+    overflow: hidden;
   }
 
+  .bulk-upload--file-manager .collection-edit__form {
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* Desktop: fields sit on the left and the preview on the right as a fixed-width side panel,
+     separated by a divider. The shared layout has no base flex rules of its own, so the row,
+     ordering and sizing are established here. The responsive stacking is handled by the viewport
+     media query below (the bulk modal does not establish the `edit-main` container query the
+     document edit page relies on). */
+  .bulk-upload--file-manager .collection-edit__upload-layout {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: stretch;
+  }
+
+  /* The fields scroll within their own column so the preview stays in place. */
+  .bulk-upload--file-manager .collection-edit__upload-layout .document-fields {
+    order: 0;
+    flex: 4 1 0;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  /* The preview sits on the right (5fr media : 4fr content) with a divider. */
+  .bulk-upload--file-manager .collection-edit__upload-layout .file-manager {
+    order: 1;
+    flex: 5 1 0;
+    min-height: 0;
+    border-inline-start: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  /* Contained file manager (not the full-viewport sticky panel used on the document edit page);
+     the preview fills its column and bleeds to the edges. */
+  .bulk-upload--file-manager .file-manager {
+    min-height: 0;
+    border: none;
+  }
+
+  .bulk-upload--file-manager .file-manager__panel {
+    position: static;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .bulk-upload--file-manager .file-manager__upload {
+    padding: 0;
+    justify-content: flex-start;
+  }
+
+  /* The preview panel bleeds to the edges, but the media itself is inset so it has breathing room. */
+  .bulk-upload--file-manager .file-manager__selected-preview {
+    max-width: none;
+    width: 100%;
+    flex: 1;
+    height: auto;
+    min-height: 0;
+    padding: var(--gutter-h);
+    border-radius: 0;
+  }
+
+  /* Align the file name input with the document fields (same horizontal gutter), so they line up
+     when stacked. */
+  .bulk-upload--file-manager .file-manager__file-adjustments {
+    padding-inline: var(--gutter-h);
+  }
+
+  /* Stack on mobile — the modal is full-screen and there is no room for two columns. The whole
+     edit view scrolls as one column (no divider, no internal field scroll). */
   @media (max-width: 1024px) {
-    .bulk-upload--file-manager {
+    .bulk-upload--file-manager__body {
       flex-direction: column-reverse;
     }
 
     .bulk-upload--file-manager__editView {
-      flex-grow: 1;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    .bulk-upload--file-manager .collection-edit__upload-layout {
+      flex-direction: column;
+      height: auto;
+    }
+
+    .bulk-upload--file-manager .collection-edit__upload-layout .file-manager {
+      order: 0;
+      border-inline-start: 0;
+      /* Size to content in the stacked column. The desktop fill chain uses flex-basis: 0, which
+         collapses to 0 height here (auto-height column) and lets the preview overflow the fields. */
+      flex: 0 0 auto;
+    }
+
+    .bulk-upload--file-manager .file-manager__content {
+      flex: 0 0 auto;
+    }
+
+    .bulk-upload--file-manager .file-manager__panel {
+      height: auto;
+    }
+
+    /* Stack the preview above the file name and size to content. The base layout uses
+       `flex: 1 0 0`, which caps the upload at the column's available height and lets the file name
+       overflow out the bottom; `flex: 0 0 auto` lets it grow to contain both. The min-height keeps
+       the (absolutely positioned) empty-state dropzone room when no preview is present. */
+    .bulk-upload--file-manager .file-manager__upload {
+      flex: 0 0 auto;
+      min-height: min(50dvh, 360px);
+    }
+
+    .bulk-upload--file-manager .file-manager__selected-preview {
+      flex: none;
+      height: min(50dvh, 360px);
+    }
+
+    .bulk-upload--file-manager .collection-edit__upload-layout .document-fields {
+      /* Reset the desktop flex-basis: 0 fill so the fields size to their content in the auto-height
+         stacked column instead of collapsing to zero height. */
+      flex: 0 0 auto;
+      height: auto;
+      overflow-y: visible;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .bulk-upload--file-manager .document-fields__edit {
+      padding-top: var(--spacer-3);
     }
   }
 }

package/dist/elements/BulkUpload/AddingFilesView/index.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import './index.css';
-export declare function AddingFilesView(): React.JSX.Element;
+type Props = {
+    readonly modalSlug: string;
+};
+export declare function AddingFilesView({ modalSlug }: Props): React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/BulkUpload/AddingFilesView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddingFilesView/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,OAAO,aAAa,CAAA;AAIpB,wBAAgB,eAAe,sBAgE9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddingFilesView/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAoBzB,OAAO,aAAa,CAAA;AAMpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,KAAK,qBA2GnD"}

package/dist/elements/BulkUpload/AddingFilesView/index.js

@@ -1,27 +1,39 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
-import { getTranslation } from '@payloadcms/translations';
 import { reduceFieldsToValues } from 'payload/shared';
 import React from 'react';
+import { PlusIcon } from '../../../icons/Plus/index.js';
 import { useAuth } from '../../../providers/Auth/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { DocumentInfoProvider } from '../../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import { DialogHeader } from '../../Dialog/DialogHeader/index.js';
+import { DialogModal } from '../../Dialog/DialogModal/index.js';
+import { DialogTitle } from '../../Dialog/DialogTitle/index.js';
+import { ErrorPill } from '../../ErrorPill/index.js';
 import { ActionsBar } from '../ActionsBar/index.js';
+import { AddFilesView } from '../AddFilesView/index.js';
 import { discardBulkUploadModalSlug, DiscardWithoutSaving } from '../DiscardWithoutSaving/index.js';
 import { EditForm } from '../EditForm/index.js';
+import { EditManyBulkUploads } from '../EditMany/index.js';
 import { FileSidebar } from '../FileSidebar/index.js';
 import { useFormsManager } from '../FormsManager/index.js';
-import { DrawerHeader } from '../Header/index.js';
+import { useBulkUpload } from '../index.js';
 import './index.css';
 const baseClass = 'bulk-upload--file-manager';
-export function AddingFilesView() {
-  const $ = _c(18);
+const addMoreFilesModalSlug = 'bulk-upload-modal--add-more-files';
+export function AddingFilesView(t0) {
+  const $ = _c(26);
+  const {
+    modalSlug
+  } = t0;
   const {
     activeIndex,
+    addFiles,
     collectionSlug,
     docPermissions,
     documentSlots,
@@ -29,89 +41,146 @@ export function AddingFilesView() {
     hasPublishPermission,
     hasSavePermission,
     hasSubmitted,
+    isInitializing,
     resetUploadEdits,
+    totalErrorCount,
     updateUploadEdits
   } = useFormsManager();
+  const {
+    initialFiles,
+    initialForms,
+    maxFiles
+  } = useBulkUpload();
   const activeForm = forms[activeIndex];
   const {
     getEntityConfig
   } = useConfig();
   const {
-    i18n
+    i18n,
+    t
   } = useTranslation();
   const {
     user
   } = useAuth();
   const {
+    closeModal,
     openModal
   } = useModal();
-  let t0;
-  if ($[0] !== activeForm || $[1] !== activeIndex || $[2] !== collectionSlug || $[3] !== docPermissions || $[4] !== documentSlots || $[5] !== forms.length || $[6] !== getEntityConfig || $[7] !== hasPublishPermission || $[8] !== hasSavePermission || $[9] !== hasSubmitted || $[10] !== i18n || $[11] !== openModal || $[12] !== resetUploadEdits || $[13] !== updateUploadEdits || $[14] !== user) {
+  let t1;
+  if ($[0] !== addFiles || $[1] !== closeModal) {
+    t1 = filelist => {
+      addFiles(filelist);
+      closeModal(addMoreFilesModalSlug);
+    };
+    $[0] = addFiles;
+    $[1] = closeModal;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const handleAddFiles = t1;
+  const totalFileCount = isInitializing ? initialFiles?.length ?? initialForms?.length : forms.length;
+  const canAddMoreFiles = typeof maxFiles === "number" ? totalFileCount < maxFiles : true;
+  let t2;
+  if ($[3] !== activeForm || $[4] !== activeIndex || $[5] !== canAddMoreFiles || $[6] !== collectionSlug || $[7] !== docPermissions || $[8] !== documentSlots || $[9] !== forms.length || $[10] !== getEntityConfig || $[11] !== handleAddFiles || $[12] !== hasPublishPermission || $[13] !== hasSavePermission || $[14] !== hasSubmitted || $[15] !== i18n || $[16] !== modalSlug || $[17] !== openModal || $[18] !== resetUploadEdits || $[19] !== t || $[20] !== totalErrorCount || $[21] !== updateUploadEdits || $[22] !== user) {
     const collectionConfig = getEntityConfig({
       collectionSlug
     });
-    let t1;
-    if ($[16] !== openModal) {
-      t1 = () => openModal(discardBulkUploadModalSlug);
-      $[16] = openModal;
-      $[17] = t1;
+    let t3;
+    if ($[24] !== openModal) {
+      t3 = () => openModal(discardBulkUploadModalSlug);
+      $[24] = openModal;
+      $[25] = t3;
     } else {
-      t1 = $[17];
+      t3 = $[25];
     }
-    t0 = _jsxs("div", {
-      className: baseClass,
-      children: [_jsx(FileSidebar, {}), _jsxs("div", {
-        className: `${baseClass}__editView`,
-        children: [_jsx(DrawerHeader, {
-          onClose: t1,
-          title: getTranslation(collectionConfig.labels.singular, i18n)
-        }), activeForm ? _jsxs(DocumentInfoProvider, {
-          collectionSlug,
-          currentEditor: user,
-          docPermissions,
-          hasPublishedDoc: false,
-          hasPublishPermission,
-          hasSavePermission,
-          id: null,
-          initialData: reduceFieldsToValues(activeForm.formState, true),
-          initialState: activeForm.formState,
-          isLocked: false,
-          lastUpdateTime: 0,
-          mostRecentVersionIsAutosaved: false,
-          unpublishedVersionCount: 0,
-          Upload: documentSlots.Upload,
-          versionCount: 0,
-          children: [_jsx(ActionsBar, {
-            collectionConfig
-          }), _jsx(EditForm, {
-            BeforeDocumentMeta: documentSlots.BeforeDocumentMeta,
-            resetUploadEdits,
-            submitted: hasSubmitted,
-            updateUploadEdits,
-            uploadEdits: activeForm?.uploadEdits
+    t2 = _jsx(_Fragment, {
+      children: _jsxs(DialogModal, {
+        className: baseClass,
+        size: "large",
+        slug: modalSlug,
+        children: [_jsxs(DialogHeader, {
+          onClose: t3,
+          showClose: true,
+          title: _jsxs("div", {
+            className: `${baseClass}__header-title-section`,
+            children: [_jsx(DialogTitle, {
+              title: t("upload:bulkUpload")
+            }), totalErrorCount > 0 && _jsx(ErrorPill, {
+              count: totalErrorCount,
+              i18n,
+              withMessage: true
+            })]
+          }),
+          children: [canAddMoreFiles ? _jsx(Button, {
+            buttonStyle: "secondary",
+            icon: _jsx(PlusIcon, {
+              size: 24
+            }),
+            iconPosition: "left",
+            onClick: () => openModal(addMoreFilesModalSlug),
+            children: t("upload:addFiles")
+          }) : null, _jsx(EditManyBulkUploads, {
+            collection: collectionConfig
+          })]
+        }), _jsxs("div", {
+          className: `${baseClass}__body`,
+          children: [_jsx(FileSidebar, {}), _jsx("div", {
+            className: `${baseClass}__editView`,
+            children: activeForm ? _jsx(DocumentInfoProvider, {
+              collectionSlug,
+              currentEditor: user,
+              docPermissions,
+              hasPublishedDoc: false,
+              hasPublishPermission,
+              hasSavePermission,
+              id: null,
+              initialData: reduceFieldsToValues(activeForm.formState, true),
+              initialState: activeForm.formState,
+              isLocked: false,
+              lastUpdateTime: 0,
+              mostRecentVersionIsAutosaved: false,
+              unpublishedVersionCount: 0,
+              Upload: documentSlots.Upload,
+              versionCount: 0,
+              children: _jsx(EditForm, {
+                resetUploadEdits,
+                submitted: hasSubmitted,
+                updateUploadEdits,
+                uploadEdits: activeForm?.uploadEdits
+              })
+            }, `${activeIndex}-${forms.length}`) : null
           })]
-        }, `${activeIndex}-${forms.length}`) : null]
-      }), _jsx(DiscardWithoutSaving, {})]
+        }), _jsx(ActionsBar, {}), _jsx(AddFilesView, {
+          modalSlug: addMoreFilesModalSlug,
+          onDrop: handleAddFiles
+        }), _jsx(DiscardWithoutSaving, {})]
+      })
     });
-    $[0] = activeForm;
-    $[1] = activeIndex;
-    $[2] = collectionSlug;
-    $[3] = docPermissions;
-    $[4] = documentSlots;
-    $[5] = forms.length;
-    $[6] = getEntityConfig;
-    $[7] = hasPublishPermission;
-    $[8] = hasSavePermission;
-    $[9] = hasSubmitted;
-    $[10] = i18n;
-    $[11] = openModal;
-    $[12] = resetUploadEdits;
-    $[13] = updateUploadEdits;
-    $[14] = user;
-    $[15] = t0;
+    $[3] = activeForm;
+    $[4] = activeIndex;
+    $[5] = canAddMoreFiles;
+    $[6] = collectionSlug;
+    $[7] = docPermissions;
+    $[8] = documentSlots;
+    $[9] = forms.length;
+    $[10] = getEntityConfig;
+    $[11] = handleAddFiles;
+    $[12] = hasPublishPermission;
+    $[13] = hasSavePermission;
+    $[14] = hasSubmitted;
+    $[15] = i18n;
+    $[16] = modalSlug;
+    $[17] = openModal;
+    $[18] = resetUploadEdits;
+    $[19] = t;
+    $[20] = totalErrorCount;
+    $[21] = updateUploadEdits;
+    $[22] = user;
+    $[23] = t2;
   } else {
-    t0 = $[15];
+    t2 = $[23];
   }
-  return t0;
+  return t2;
 }
 //# sourceMappingURL=index.js.map