@uploadcare/file-uploader 1.14.0 → 1.15.0-alpha.0

package/blocks/Config/Config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["Config.js"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;GAaG;AACH,gCAXU;IACT,UAAc;IACd,0BAA8B;IAC9B,gCAAoC;IACpC,gCAAoC;IACpC,kBAAsB;IACtB,gBAAoB;IACpB,sBAA0B;IAC1B,sBAA0B;CACvB,CAWF;qBAyNY,OAAO,2BAA2B,EAAE,UAAU,CAAC,kBAAkB,EAAE,OAAO,aAAa,EAAE,UAAU,CAAC;AAAlH,6HAA6H;AAG7H,4BAAmF;AA/LnF;IAkBE;;;;OAIG;IACH,+BAYC;IAED;;;;OAIG;IACH,2BAQC;IAED;;;;OAIG;IACH,kBAyBC;IAED;;;OAGG;IACH,kBAIC;IAED;;;;OAIG;IACH,wCAJW,MAAM,iBACN,OAAO,aACP,OAAO,QAoBjB;IA0CD;;;;OAIG;IACH,+BAJW,MAAM,uBAAuB,UAC7B,MAAM,UACN,MAAM,QAahB;CACF;sBAjPqB,yBAAyB;AAwD/C,0CAA0C;AAC1C,smEAGG"}
+{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["Config.js"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;GAaG;AACH,gCAXU;IACT,UAAc;IACd,0BAA8B;IAC9B,gCAAoC;IACpC,gCAAoC;IACpC,kBAAsB;IACtB,gBAAoB;IACpB,sBAA0B;IAC1B,sBAA0B;CACvB,CAWF;qBAyNY,OAAO,2BAA2B,EAAE,UAAU,CAAC,kBAAkB,EAAE,OAAO,aAAa,EAAE,UAAU,CAAC;AAAlH,6HAA6H;AAG7H,4BAAmF;AA/LnF;IAkBE;;;;OAIG;IACH,+BAYC;IAED;;;;OAIG;IACH,2BAQC;IAED;;;;OAIG;IACH,kBAyBC;IAED;;;OAGG;IACH,kBAIC;IAED;;;;OAIG;IACH,wCAJW,MAAM,iBACN,OAAO,aACP,OAAO,QAoBjB;IA0CD;;;;OAIG;IACH,+BAJW,MAAM,uBAAuB,UAC7B,MAAM,UACN,MAAM,QAahB;CACF;sBAjPqB,yBAAyB;AAwD/C,0CAA0C;AAC1C,4rEAGG"}

package/blocks/Config/initialConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,uDAAwD;AACxD,+DAAgE;AAChE,sEAAuE;AAEvE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CAmElD"}
+{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,uDAAwD;AACxD,+DAAgE;AAChE,sEAAuE;AAEvE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CAsElD"}

package/blocks/Config/initialConfig.js

@@ -74,4 +74,7 @@ export const initialConfig = {
   enableVideoRecording: null,
   maxVideoRecordingDuration: null,
   mediaRecorderOptions: null,
+
+  displayUploadList: 'grid',
+  enableFileName: false,
 };

package/blocks/Config/normalizeConfigValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AAiBO,iCADK,OAAO,WAWlB;AAwKM,sGAHI,OAAO,mDAcjB"}
+{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AAiBO,iCADK,OAAO,WAWlB;AA4KM,sGAHI,OAAO,mDAcjB"}

package/blocks/Config/normalizeConfigValue.js

@@ -185,6 +185,10 @@ const mapping = {
   mediaRecorderOptions: asObject,
 
   maxVideoRecordingDuration: asNumber,
+
+  displayUploadList: asString,
+
+  enableFileName: asBoolean,
 };
 
 /**

package/blocks/DropArea/DropArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropArea.d.ts","sourceRoot":"","sources":["DropArea.js"],"names":[],"mappings":"AAaA;IAKI;;;;;;;;;;;;;;;;;;;;;;MAUC;IAGH,oBAgBC;IAgDC,eAAe;IACf,yBA2BE;IAIA,yDAWE;IA6BF;;;OAGG;IACH,uBASC;IAOL;;;;;OAKG;IACH,sBAeC;IAED,eAAe;IACf,0BAcC;CAqBF;;;;8BAlP6B,iCAAiC"}
+{"version":3,"file":"DropArea.d.ts","sourceRoot":"","sources":["DropArea.js"],"names":[],"mappings":"AAaA;IAKI;;;;;;;;;;;;;;;;;;;;;;MAUC;IAGH,oBAgBC;IAgDC,eAAe;IACf,yBA4BE;IAIA,yDAWE;IA6BF;;;OAGG;IACH,uBASC;IAOL;;;;;OAKG;IACH,sBAeC;IAED,eAAe;IACf,0BAcC;CAqBF;;;;8BAnP6B,iCAAiC"}

package/blocks/DropArea/DropArea.js

@@ -115,10 +115,11 @@ export class DropArea extends UploaderBlock {
           }
         });
         if (this.uploadCollection.size) {
+          this.modalManager.open(ActivityBlock.activities.UPLOAD_LIST);
           this.set$({
             '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
           });
-          this.setOrAddState('*modalActive', true);
+          // this.setOrAddState('*modalActive', true);
         }
       },
     });

package/blocks/ExternalSource/ExternalSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalSource.d.ts","sourceRoot":"","sources":["ExternalSource.js"],"names":[],"mappings":"AAWA,+DAA+D;AAE/D;IAEE,yBAAiD;IAK/C;;;QAKE,6FAA6F;sBAAlF,OAAO,YAAY,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;MAiC1F;IAGH,6BAA6B;IAC7B,qCAMC;IAgDD;;;OAGG;IACH,mCAcC;IAED;;;OAGG;IACH,kCAsBC;IAED,eAAe;IACf,yBAIC;IAED,eAAe;IACf,mBAKC;IAED;;;OAGG;IACH,sBAKC;IAED,eAAe;IACf,kBAKC;IAED,eAAe;IACf,kBAeC;IAED,eAAe;IACf,oBA6BC;IALC,eAAe;IACf,uBAA6D;IAM/D,eAAe;IACf,sBAMC;IAED,eAAe;IACf,6BASC;CACF;;;;6BAjQa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;8BAPd,iCAAiC"}
+{"version":3,"file":"ExternalSource.d.ts","sourceRoot":"","sources":["ExternalSource.js"],"names":[],"mappings":"AAWA,+DAA+D;AAE/D;IAEE,yBAAiD;IAK/C;;;QAKE,6FAA6F;sBAAlF,OAAO,YAAY,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;MAkC1F;IAGH,6BAA6B;IAC7B,qCAMC;IAiDD;;;OAGG;IACH,mCAcC;IAED;;;OAGG;IACH,kCAsBC;IAED,eAAe;IACf,yBAIC;IAED,eAAe;IACf,mBAKC;IAED;;;OAGG;IACH,sBAKC;IAED,eAAe;IACf,kBAKC;IAED,eAAe;IACf,kBAeC;IAED,eAAe;IACf,oBA6BC;IALC,eAAe;IACf,uBAA6D;IAM/D,eAAe;IACf,sBAMC;IAED,eAAe;IACf,6BASC;CACF;;;;6BAnQa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;8BAPd,iCAAiC"}

package/blocks/ExternalSource/ExternalSource.js

@@ -44,6 +44,7 @@ export class ExternalSource extends UploaderBlock {
         }
 
         this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+        this.modalManager.open(ActivityBlock.activities.UPLOAD_LIST);
       },
       onCancel: () => {
         this.historyBack();
@@ -75,8 +76,9 @@ export class ExternalSource extends UploaderBlock {
         let { externalSourceType } = /** @type {ActivityParams} */ (this.activityParams);
 
         if (!externalSourceType) {
+          this.modalManager.close(this.$['*currentActivity']);
           this.$['*currentActivity'] = null;
-          this.setOrAddState('*modalActive', false);
+          // this.setOrAddState('*modalActive', false);
           console.error(`Param "externalSourceType" is required for activity "${this.activityType}"`);
           return;
         }

package/blocks/FileItem/FileItem.d.ts

@@ -28,6 +28,7 @@ export class FileItem extends UploaderBlock {
         isUploading: boolean;
         isFocused: boolean;
         isEditable: boolean;
+        isFileName: boolean;
         state: symbol;
         ariaLabelStatusFile: string;
         onEdit: () => void;
@@ -53,6 +54,7 @@ export class FileItem extends UploaderBlock {
      * @param {IntersectionObserverEntry[]} entries
      */
     private _observerCallback;
+    _thumbRect: DOMRectReadOnly | undefined;
     /** @private */
     private _calculateState;
     /** @private */

package/blocks/FileItem/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAoBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BC;IAGH,eASC;IAED;;;OAGG;IACH,0BAaC;IAED,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAsCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAmDC;IAsCD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BAvb6B,iCAAiC;AAS/D;;;;;GAKG"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAoBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BC;IAGH,eASC;IAED;;;OAGG;IACH,0BAcC;IAXC,wCAA0C;IAa5C,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BA2CC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAmDC;IA6CD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BAtc6B,iCAAiC;AAS/D;;;;;GAKG"}

package/blocks/FileItem/FileItem.js

@@ -57,12 +57,14 @@ export class FileItem extends UploaderBlock {
       isUploading: false,
       isFocused: false,
       isEditable: false,
+      isFileName: false,
       state: FileItemState.IDLE,
       ariaLabelStatusFile: '',
       onEdit: () => {
         this.$['*currentActivityParams'] = {
           internalId: this._entry.uid,
         };
+        this.modalManager.open(ActivityBlock.activities.CLOUD_IMG_EDIT);
         this.$['*currentActivity'] = ActivityBlock.activities.CLOUD_IMG_EDIT;
       },
       onRemove: () => {
@@ -92,6 +94,7 @@ export class FileItem extends UploaderBlock {
   _observerCallback(entries) {
     let [entry] = entries;
     this._isIntersecting = entry.isIntersecting;
+    this._thumbRect = entry.boundingClientRect;
 
     if (entry.isIntersecting && !this._renderedOnce) {
       this.render();
@@ -131,7 +134,12 @@ export class FileItem extends UploaderBlock {
     let entry = this._entry;
 
     if (entry.getValue('fileInfo') && entry.getValue('isImage')) {
-      let size = this.cfg.thumbSize;
+      let size = Math.max(
+        parseInt(String(this?._thumbRect?.height || 0)),
+        parseInt(String(this?._thumbRect?.width || 0)),
+        this.cfg.thumbSize,
+      );
+
       let thumbUrl = await this.proxyUrl(
         createCdnUrl(
           createOriginalUrl(this.cfg.cdnCname, this._entry.getValue('uuid')),
@@ -265,6 +273,13 @@ export class FileItem extends UploaderBlock {
     });
 
     this.subConfigValue('useCloudImageEditor', () => this._debouncedCalculateState());
+    this.subConfigValue('displayUploadList', (mode) => {
+      if (mode === 'grid') {
+        this.subConfigValue('enableFileName', (value) => (this.$.isFileName = !value));
+      }
+
+      this.setAttribute('mode', mode);
+    });
 
     this.onclick = () => {
       FileItem.activeInstances.forEach((inst) => {
@@ -451,8 +466,8 @@ FileItem.template = /* HTML */ `
       </div>
     </div>
     <div aria-atomic="true" aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
-      <span class="uc-file-name">{{itemName}}</span>
-      <span class="uc-file-error" set="@hidden: !errorText">{{errorText}}</span>
+      <span class="uc-file-name" set="@hidden: isFileName">{{itemName}}</span>
+      <span class="uc-file-error" set="@hidden: !errorText;">{{errorText}}</span>
       <span class="uc-file-hint" set="@hidden: !hint">{{hint}}</span>
     </div>
     <div class="uc-file-actions">

package/blocks/FileItem/file-item.css

@@ -45,6 +45,7 @@ uc-file-item .uc-thumb {
   height: var(--uc-preview-size);
   background-color: var(--uc-secondary);
   background-position: center center;
+  background-repeat: no-repeat;
   background-size: cover;
   border-radius: var(--uc-radius);
 }
@@ -142,3 +143,62 @@ uc-file-item .uc-file-actions {
   align-items: center;
   justify-content: center;
 }
+
+/* File item in the grid */
+uc-file-item[mode='grid'] {
+  overflow: visible;
+  min-height: initial;
+}
+
+uc-file-item[mode='grid'] .uc-inner {
+  height: 100%;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr max-content;
+  padding: 0;
+  background-color: transparent;
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+uc-file-item[mode='grid'] .uc-inner[failed] .uc-badge {
+  display: none;
+}
+
+uc-file-item[mode='grid'] .uc-thumb {
+  width: 100%;
+  height: 100%;
+}
+
+uc-file-item[mode='grid'] .uc-badge {
+  right: var(--uc-padding);
+  bottom: var(--uc-padding);
+}
+
+uc-file-item[mode='grid'] .uc-file-name-wrapper {
+  padding: 0;
+}
+
+uc-file-item[mode='grid'] .uc-file-name:not([hidden]) + .uc-file-error {
+  bottom: calc(var(--uc-padding) + var(--uc-font-size));
+}
+
+uc-file-item[mode='grid'] .uc-file-error {
+  position: absolute;
+  background-color: var(--uc-destructive-foreground);
+  border-radius: var(--uc-radius);
+  color: var(--uc-background);
+  bottom: var(--uc-padding);
+  left: var(--uc-padding);
+  right: var(--uc-padding);
+  padding: calc(var(--uc-padding) / 2) var(--uc-padding);
+}
+
+uc-file-item[mode='grid'] .uc-file-actions {
+  position: absolute;
+  top: var(--uc-padding);
+  right: var(--uc-padding);
+}
+
+uc-file-item[mode='grid'] button {
+  background-color: var(--uc-background);
+}

package/blocks/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAGA;IAEE,kCAAoC;IAIlC;;;;MAKC;IAGH,iCAEE;IAEF,yBAEE;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAMC;IAED,aAMC;CAgDF;;;;sBAvGqB,yBAAyB"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAIA;IAEE,kCAAoC;IAIlC;;;;MAKC;IAGH,iCAEE;IAEF,yBAQE;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAWC;IAED,aAOC;CA8CF;;;;sBAlHqB,yBAAyB"}

package/blocks/Modal/Modal.js

@@ -1,5 +1,6 @@
 // @ts-check
 import { Block } from '../../abstract/Block.js';
+import { ModalEvents } from '../../abstract/ModalManager.js';
 
 export class Modal extends Block {
   static styleAttrs = [...super.styleAttrs, 'uc-modal'];
@@ -20,7 +21,13 @@ export class Modal extends Block {
   };
 
   _closeDialog = () => {
-    this.setOrAddState('*modalActive', false);
+    // this.setOrAddState('*modalActive', false);
+
+    this.modalManager?.close(this.id);
+
+    if (!this.modalManager.hasActiveModals) {
+      document.body.style.overflow = '';
+    }
   };
 
   _handleDialogClose = () => {
@@ -42,14 +49,20 @@ export class Modal extends Block {
 
   show() {
     if (this.ref.dialog.showModal) {
+      this.setAttribute('aria-modal', 'true');
       this.ref.dialog.showModal();
     } else {
       this.ref.dialog.setAttribute('open', '');
     }
+
+    if (this.cfg.modalScrollLock) {
+      document.body.style.overflow = 'hidden';
+    }
   }
 
   hide() {
     if (this.ref.dialog.close) {
+      this.setAttribute('aria-modal', 'false');
       this.ref.dialog.close();
     } else {
       this.ref.dialog.removeAttribute('open');
@@ -59,22 +72,12 @@ export class Modal extends Block {
   initCallback() {
     super.initCallback();
 
+    this.modalManager?.registerModal(this.id, this);
+
     this.ref.dialog.addEventListener('close', this._handleDialogClose);
     this.ref.dialog.addEventListener('mousedown', this._handleDialogMouseDown);
     this.ref.dialog.addEventListener('mouseup', this._handleDialogMouseUp);
 
-    this.sub('*modalActive', (modalActive) => {
-      if (this.$.isOpen !== modalActive) {
-        this.$.isOpen = modalActive;
-      }
-
-      if (modalActive && this.cfg.modalScrollLock) {
-        document.body.style.overflow = 'hidden';
-      } else {
-        document.body.style.overflow = '';
-      }
-    });
-
     this.subConfigValue('modalBackdropStrokes', (val) => {
       if (val) {
         this.setAttribute('strokes', '');
@@ -83,15 +86,23 @@ export class Modal extends Block {
       }
     });
 
-    this.sub('isOpen', (isOpen) => {
-      if (isOpen) {
+    this.modalManager.subscribe(ModalEvents.OPEN, (/** @type {{ id: string }} */ { id }) => {
+      if (id === this.id) {
         this.show();
-        this.setAttribute('aria-modal', 'true');
       } else {
         this.hide();
-        this.setAttribute('aria-modal', 'false');
       }
     });
+
+    this.modalManager.subscribe(ModalEvents.CLOSE, (/** @type {{ id: string }} */ { id }) => {
+      if (id === this.id) {
+        this.hide();
+      }
+    });
+
+    this.modalManager.subscribe(ModalEvents.CLOSE_ALL, ({}) => {
+      this.hide();
+    });
   }
 
   destroyCallback() {

package/blocks/SourceBtn/SourceBtn.d.ts

@@ -22,7 +22,10 @@ export class SourceBtn extends UploaderBlock {
         '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': any[];
+        '*collectionErrors': any[]; /**
+         * @private
+         * @type {Record<string, TConfig>}
+         */
         '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;

package/blocks/SourceBtn/SourceBtn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceBtn.d.ts","sourceRoot":"","sources":["SourceBtn.js"],"names":[],"mappings":"AASA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;;;;;;;;;;;;;MAIC;IAGH,kBA2DC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAYC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBAlJY;IACZ,IAAQ,EAAE,MAAM,CAAC;IACjB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAY,CAAC,EAAE,MAAM,OAAO,CAAC;IAC7B,cAAkB,CAAC,EAAE,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;8BAhB0B,iCAAiC"}
+{"version":3,"file":"SourceBtn.d.ts","sourceRoot":"","sources":["SourceBtn.js"],"names":[],"mappings":"AASA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;;;oCATF;;;WAGG;;;;;;;;;;MAUA;IAGH,kBA2DC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAgBC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBAtJY;IACZ,IAAQ,EAAE,MAAM,CAAC;IACjB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAY,CAAC,EAAE,MAAM,OAAO,CAAC;IAC7B,cAAkB,CAAC,EAAE,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;8BAhB0B,iCAAiC"}

package/blocks/SourceBtn/SourceBtn.js

@@ -132,11 +132,15 @@ export class SourceBtn extends UploaderBlock {
     const configType = this._registeredTypes[this.type];
     const { activity, activate, activityParams = {} } = configType;
     const showActivity = activate ? activate() : !!activity;
-    showActivity &&
+
+    if (showActivity) {
+      this.modalManager.open(/** @type {string} */ (activity));
+
       this.set$({
         '*currentActivityParams': activityParams,
         '*currentActivity': activity,
       });
+    }
   }
 
   /** @param {string} type */

package/blocks/StartFrom/StartFrom.js

@@ -3,7 +3,7 @@ import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 export class StartFrom extends ActivityBlock {
   historyTracked = true;
   /** @type {import('../../abstract/ActivityBlock.js').ActivityType} */
-  activityType = 'start-from';
+  activityType = ActivityBlock.activities.START_FROM;
 
   initCallback() {
     super.initCallback();

package/blocks/UploadList/UploadList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadList.d.ts","sourceRoot":"","sources":["UploadList.js"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AAEH;IAKE,4BAAoD;IAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;MA0BC;IAGH,eAAe;IACf,yCASQ;IAER,eAAe;IACf,4BAuCC;IAED;;;OAGG;IACH,uBAmBC;CAoEF;;;;sBAhMY;IACZ,KAAS,EAAE,MAAM,CAAC;IAClB,OAAW,EAAE,MAAM,CAAC;IACpB,SAAa,EAAE,MAAM,CAAC;IACtB,MAAU,EAAE,MAAM,CAAC;CAChB;8BAV0B,iCAAiC"}
+{"version":3,"file":"UploadList.d.ts","sourceRoot":"","sources":["UploadList.js"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AAEH;IAKE,4BAAoD;IAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;MA0BC;IAGH,eAAe;IACf,yCASQ;IAER,eAAe;IACf,4BAuCC;IAED;;;OAGG;IACH,uBAmBC;CAwEF;;;;sBApMY;IACZ,KAAS,EAAE,MAAM,CAAC;IAClB,OAAW,EAAE,MAAM,CAAC;IACpB,SAAa,EAAE,MAAM,CAAC;IACtB,MAAU,EAAE,MAAM,CAAC;CAChB;8BAV0B,iCAAiC"}

package/blocks/UploadList/UploadList.js

@@ -149,6 +149,10 @@ export class UploadList extends UploaderBlock {
       }
     });
 
+    this.subConfigValue('displayUploadList', (mode) => {
+      this.setAttribute('mode', mode);
+    });
+
     this.sub('*currentActivity', (currentActivity) => {
       if (!this.couldOpenActivity && currentActivity === this.activityType) {
         this.$['*currentActivity'] = this.initActivity;
@@ -216,7 +220,16 @@ UploadList.template = /* HTML */ `
     <slot name="empty"><span l10n="no-files"></span></slot>
   </div>
 
-  <div class="uc-files" repeat="*uploadList" repeat-item-tag="uc-file-item"></div>
+  <div class="uc-files">
+    <div class="uc-files-wrapper" repeat="*uploadList" repeat-item-tag="uc-file-item"></div>
+    <button
+      type="button"
+      class="uc-add-more-btn uc-secondary-btn"
+      set="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible"
+    >
+      <uc-icon name="add"></uc-icon><span l10n="add-more"></span>
+    </button>
+  </div>
 
   <div class="uc-common-error" set="@hidden: !commonErrorMessage; textContent: commonErrorMessage;"></div>
 

package/blocks/UploadList/upload-list.css

@@ -22,6 +22,10 @@ uc-upload-list .uc-files {
   overflow: auto;
 }
 
+uc-upload-list .uc-files-wrapper {
+  display: contents;
+}
+
 uc-upload-list .uc-toolbar {
   display: flex;
   gap: 4px;
@@ -63,3 +67,21 @@ uc-upload-list .uc-common-error {
 uc-upload-list .uc-add-more-btn uc-icon {
   display: none;
 }
+
+/* GRID */
+uc-upload-list[mode='grid'] .uc-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--uc-grid-gap);
+}
+
+uc-upload-list .uc-files .uc-add-more-btn,
+uc-upload-list[mode='grid'] uc-file-item {
+  width: calc(100% / var(--uc-grid-col) - var(--uc-padding) / 2);
+  height: var(--uc-grid-preview-image-height);
+  aspect-ratio: 1;
+}
+
+uc-upload-list .uc-files .uc-add-more-btn {
+  display: none;
+}

package/blocks/UrlSource/UrlSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UrlSource.d.ts","sourceRoot":"","sources":["UrlSource.js"],"names":[],"mappings":"AAIA;IAEE,oBAA4C;IAE5C,WAiBE;CAWH;;;;8BApC6B,iCAAiC"}
+{"version":3,"file":"UrlSource.d.ts","sourceRoot":"","sources":["UrlSource.js"],"names":[],"mappings":"AAIA;IAEE,oBAA4C;IAE5C,WAkBE;CAWH;;;;8BArC6B,iCAAiC"}

package/blocks/UrlSource/UrlSource.js

@@ -14,6 +14,7 @@ export class UrlSource extends UploaderBlock {
 
       let url = this.ref.input['value'];
       this.api.addFileFromUrl(url, { source: UploadSource.URL });
+      this.modalManager.open(ActivityBlock.activities.UPLOAD_LIST);
       this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
     },
     onCancel: () => {

package/blocks/themes/uc-basic/theme.css

@@ -17,6 +17,12 @@
   --uc-dialog-max-height: 675px;
   --uc-simple-btn-padding: 7px 14px;
 
+  --uc-grid-col: 3;
+
+  /* --uc-grid-preview-image-width: 200px; */
+  --uc-grid-preview-image-height: auto;
+  --uc-grid-gap: calc(var(--uc-padding) / 2);
+
   /* Default colors, in case of media query failure */
   --uc-background: var(--uc-background-light);
   --uc-foreground: var(--uc-foreground-light);
@@ -136,10 +142,17 @@
   }
 }
 
+@media only screen and (max-width: 680px) {
+  :where([uc-wgt-common]) {
+    --uc-grid-col: 2;
+  }
+}
+
 @media only screen and (max-width: 430px) {
   :where([uc-wgt-common]) {
     --uc-dialog-max-width: 100vw;
     --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
+    --uc-grid-col: 1;
   }
 }
 

package/index.ssr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.ssr.d.ts","sourceRoot":"","sources":["index.ssr.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;EAcE;AACF;;;;;;;;;;;;;;;EAcE;AACF;;;;;EAIE;AACF;;;;;;EAKE;AACF;;;;;;;;EAgBE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4IE;AACF;;;;;;;;EAuCE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAuCE;AACF;;;;;;;EAsGE;AACF;;;;;;;EAaE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkEE;AACF;;;;;;;EAWE;AACF;;;;;;;EAWE;AACF;;;;;;;EASE;AACF;;;;;;EAKE;AACF;;;;;;;EAWE;AACF;;;;;;;EAME;AACF;;;;;;;EAWE;AACF;;;;;;;EA2IE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EE;;;;;;;;;;;;;AAaF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoFE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAWE;AACF;;;;;;EAwBE;AACF;;;;;;;EAUE;AACF;;;;;;;;EAWE;AACF,oCAAqC;AACrC,uCAAwC;AACxC;;;;;;;EAME;AACF;;;;;;;EASE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DE;AACF;;;;;;;EAeE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;EAWE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EE;AACK,yCAAiC;AACjC,qCAA6B;AAC7B,6CAAqC;AACrC,oCAA4B"}
+{"version":3,"file":"index.ssr.d.ts","sourceRoot":"","sources":["index.ssr.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;EAcE;AACF;;;;;;;;;;;;;;;EAcE;AACF;;;;;EAIE;AACF;;;;;;EAKE;AACF;;;;;;;;EAgBE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4IE;AACF;;;;;;;;EAuCE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAuCE;AACF;;;;;;;EA0GE;AACF;;;;;;;EAaE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkEE;AACF;;;;;;;EAWE;AACF;;;;;;;EAWE;AACF;;;;;;;EASE;AACF;;;;;;EAKE;AACF;;;;;;;EAWE;AACF;;;;;;;EAME;AACF;;;;;;;EAWE;AACF;;;;;;;EA2IE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EE;;;;;;;;;;;;;AAaF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoFE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAWE;AACF;;;;;;EAwBE;AACF;;;;;;;EAUE;AACF;;;;;;;;EAWE;AACF,oCAAqC;AACrC,uCAAwC;AACxC;;;;;;;EAME;AACF;;;;;;;EASE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DE;AACF;;;;;;;EAeE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;EAWE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EE;AACK,yCAAiC;AACjC,qCAA6B;AAC7B,6CAAqC;AACrC,oCAA4B"}

package/index.ssr.js

@@ -377,6 +377,8 @@ export const Config = class {
     "enable-audio-recording",
     "enable-video-recording",
     "max-video-recording-duration",
+    "display-upload-list",
+    "enable-file-name",
     "multiplemin",
     "multiplemax",
     "confirmupload",
@@ -422,6 +424,8 @@ export const Config = class {
     "enableaudiorecording",
     "enablevideorecording",
     "maxvideorecordingduration",
+    "displayuploadlist",
+    "enablefilename",
   ];
   static reg = () => {};
   static styleAttrs = [];
@@ -839,8 +843,8 @@ export const FileItem = class {
       </div>
     </div>
     <div aria-atomic="true" aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
-      <span class="uc-file-name">{{itemName}}</span>
-      <span class="uc-file-error" set="@hidden: !errorText">{{errorText}}</span>
+      <span class="uc-file-name" set="@hidden: isFileName">{{itemName}}</span>
+      <span class="uc-file-error" set="@hidden: !errorText;">{{errorText}}</span>
       <span class="uc-file-hint" set="@hidden: !hint">{{hint}}</span>
     </div>
     <div class="uc-file-actions">
@@ -1379,7 +1383,16 @@ export const UploadList = class {
     <slot name="empty"><span l10n="no-files"></span></slot>
   </div>
 
-  <div class="uc-files" repeat="*uploadList" repeat-item-tag="uc-file-item"></div>
+  <div class="uc-files">
+    <div class="uc-files-wrapper" repeat="*uploadList" repeat-item-tag="uc-file-item"></div>
+    <button
+      type="button"
+      class="uc-add-more-btn uc-secondary-btn"
+      set="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible"
+    >
+      <uc-icon name="add"></uc-icon><span l10n="add-more"></span>
+    </button>
+  </div>
 
   <div class="uc-common-error" set="@hidden: !commonErrorMessage; textContent: commonErrorMessage;"></div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.14.0",
+  "version": "1.15.0-alpha.0",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",
@@ -35,7 +35,9 @@
     "MIT"
   ],
   "type": "module",
-  "sideEffects": ["*.css"],
+  "sideEffects": [
+    "*.css"
+  ],
   "module": "./index.js",
   "exports": {
     ".": {

package/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAGA;CAkCC;;;;8BApC6B,oCAAoC"}
+{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAIA;CAoDC;;;;8BAvD6B,oCAAoC"}

package/solutions/file-uploader/minimal/FileUploaderMinimal.js

@@ -1,9 +1,18 @@
 import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
+import { ModalEvents } from '../../../abstract/ModalManager.js';
 
 export class FileUploaderMinimal extends SolutionBlock {
   static styleAttrs = [...super.styleAttrs, 'uc-file-uploader-minimal'];
 
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+    };
+  }
+
   initCallback() {
     super.initCallback();
 
@@ -34,6 +43,16 @@ export class FileUploaderMinimal extends SolutionBlock {
         this.cfg.confirmUpload = false;
       }
     });
+
+    this.subConfigValue('displayUploadList', (mode) => {
+      this.setAttribute('mode', mode);
+    });
+
+    this.modalManager.subscribe(ModalEvents.CLOSE, (e) => {
+      if (e.id === ActivityBlock.activities.CLOUD_IMG_EDIT) {
+        this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+      }
+    });
   }
 }
 
@@ -43,4 +62,8 @@ FileUploaderMinimal.template = /* HTML */ `
     <uc-copyright></uc-copyright>
   </uc-start-from>
   <uc-upload-list ref="uBlock"></uc-upload-list>
+
+  <uc-modal id="cloud-image-edit" strokes block-body-scrolling>
+    <uc-cloud-image-editor-activity></uc-cloud-image-editor-activity>
+  </uc-modal>
 `;