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

package/blocks/CameraSource/CameraSource.js

@@ -558,6 +558,7 @@ export class CameraSource extends UploaderBlock {
     this.set$({
       '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
     });
+    this.modalManager.open(ActivityBlock.activities.UPLOAD_LIST);
   };
 
   /** @private */

package/blocks/CloudImageEditorActivity/CloudImageEditorActivity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloudImageEditorActivity.d.ts","sourceRoot":"","sources":["CloudImageEditorActivity.js"],"names":[],"mappings":"AAKA,uDAAuD;AAEvD;IAEE,iCAAuD;IAEvD;;;OAGG;IACH,eAAO;IAEP;;;OAGG;IACH,kBAAU;IAEV,6BAA6B;IAC7B,qCAMC;IAuBD,qFAAqF;IACrF,eADY,YAAY,OAAO,kCAAkC,EAAE,WAAW,CAAC,QAW9E;IAED,qBAEC;IAED,oBA4CC;IAED,sBAIC;CACF;6BApHa;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE;8BAHN,iCAAiC"}
+{"version":3,"file":"CloudImageEditorActivity.d.ts","sourceRoot":"","sources":["CloudImageEditorActivity.js"],"names":[],"mappings":"AAKA,uDAAuD;AAEvD;IAEE,iCAAuD;IAEvD;;;OAGG;IACH,eAAO;IAEP;;;OAGG;IACH,kBAAU;IAEV,6BAA6B;IAC7B,qCAMC;IAuBD,qFAAqF;IACrF,eADY,YAAY,OAAO,kCAAkC,EAAE,WAAW,CAAC,QAY9E;IAED,qBAGC;IAED,oBA4CC;IAED,sBAIC;CACF;6BAtHa;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE;8BAHN,iCAAiC"}

package/blocks/CloudImageEditorActivity/CloudImageEditorActivity.js

@@ -61,10 +61,12 @@ export class CloudImageEditorActivity extends UploaderBlock {
       cdnUrl: result.cdnUrl,
       cdnUrlModifiers: result.cdnUrlModifiers,
     });
+    this.modalManager.close(ActivityBlock.activities.CLOUD_IMG_EDIT);
     this.historyBack();
   }
 
   handleCancel() {
+    this.modalManager.close(ActivityBlock.activities.CLOUD_IMG_EDIT);
     this.historyBack();
   }
 

package/blocks/Config/Config.d.ts

@@ -64,6 +64,6 @@ declare class ConfigClass extends Block {
 }
 import { Block } from '../../abstract/Block.js';
 /** Mapping of attribute names to state */
-declare const attrStateMapping: Record<"accept" | "pubkey" | "multiple" | "store" | "debug" | "crop-preset" | "secure-expire" | "max-local-file-size-bytes" | "multiple-min" | "multiple-max" | "confirm-upload" | "img-only" | "external-sources-preferred-types" | "external-sources-embed-css" | "camera-mirror" | "camera-capture" | "source-list" | "thumb-size" | "show-empty-list" | "use-local-image-editor" | "use-cloud-image-editor" | "cloud-image-editor-tabs" | "remove-copyright" | "image-shrink" | "modal-scroll-lock" | "modal-backdrop-strokes" | "source-list-wrap" | "remote-tab-session-key" | "cdn-cname" | "base-url" | "social-base-url" | "secure-signature" | "secure-delivery-proxy" | "retry-throttled-request-max-times" | "multipart-min-file-size" | "multipart-chunk-size" | "max-concurrent-requests" | "multipart-max-concurrent-requests" | "multipart-max-attempts" | "check-for-url-duplicates" | "save-url-for-recurrent-uploads" | "group-output" | "user-agent-integration" | "locale-name" | "secure-uploads-expire-threshold" | "camera-modes" | "default-camera-mode" | "enable-audio-recording" | "enable-video-recording" | "max-video-recording-duration" | "secureexpire" | "croppreset" | "maxlocalfilesizebytes" | "multiplemin" | "multiplemax" | "confirmupload" | "imgonly" | "externalsourcespreferredtypes" | "externalsourcesembedcss" | "cameramirror" | "cameracapture" | "sourcelist" | "thumbsize" | "showemptylist" | "uselocalimageeditor" | "usecloudimageeditor" | "cloudimageeditortabs" | "removecopyright" | "imageshrink" | "modalscrolllock" | "modalbackdropstrokes" | "sourcelistwrap" | "remotetabsessionkey" | "cdncname" | "baseurl" | "socialbaseurl" | "securesignature" | "securedeliveryproxy" | "retrythrottledrequestmaxtimes" | "multipartminfilesize" | "multipartchunksize" | "maxconcurrentrequests" | "multipartmaxconcurrentrequests" | "multipartmaxattempts" | "checkforurlduplicates" | "saveurlforrecurrentuploads" | "groupoutput" | "useragentintegration" | "localename" | "secureuploadsexpirethreshold" | "cameramodes" | "defaultcameramode" | "enableaudiorecording" | "enablevideorecording" | "maxvideorecordingduration", string>;
+declare const attrStateMapping: Record<"accept" | "pubkey" | "multiple" | "store" | "debug" | "crop-preset" | "secure-expire" | "max-local-file-size-bytes" | "multiple-min" | "multiple-max" | "confirm-upload" | "img-only" | "external-sources-preferred-types" | "external-sources-embed-css" | "camera-mirror" | "camera-capture" | "source-list" | "thumb-size" | "show-empty-list" | "use-local-image-editor" | "use-cloud-image-editor" | "cloud-image-editor-tabs" | "remove-copyright" | "image-shrink" | "modal-scroll-lock" | "modal-backdrop-strokes" | "source-list-wrap" | "remote-tab-session-key" | "cdn-cname" | "base-url" | "social-base-url" | "secure-signature" | "secure-delivery-proxy" | "retry-throttled-request-max-times" | "multipart-min-file-size" | "multipart-chunk-size" | "max-concurrent-requests" | "multipart-max-concurrent-requests" | "multipart-max-attempts" | "check-for-url-duplicates" | "save-url-for-recurrent-uploads" | "group-output" | "user-agent-integration" | "locale-name" | "secure-uploads-expire-threshold" | "camera-modes" | "default-camera-mode" | "enable-audio-recording" | "enable-video-recording" | "max-video-recording-duration" | "display-upload-list" | "enable-file-name" | "secureexpire" | "croppreset" | "maxlocalfilesizebytes" | "multiplemin" | "multiplemax" | "confirmupload" | "imgonly" | "externalsourcespreferredtypes" | "externalsourcesembedcss" | "cameramirror" | "cameracapture" | "sourcelist" | "thumbsize" | "showemptylist" | "uselocalimageeditor" | "usecloudimageeditor" | "cloudimageeditortabs" | "removecopyright" | "imageshrink" | "modalscrolllock" | "modalbackdropstrokes" | "sourcelistwrap" | "remotetabsessionkey" | "cdncname" | "baseurl" | "socialbaseurl" | "securesignature" | "securedeliveryproxy" | "retrythrottledrequestmaxtimes" | "multipartminfilesize" | "multipartchunksize" | "maxconcurrentrequests" | "multipartmaxconcurrentrequests" | "multipartmaxattempts" | "checkforurlduplicates" | "saveurlforrecurrentuploads" | "groupoutput" | "useragentintegration" | "localename" | "secureuploadsexpirethreshold" | "cameramodes" | "defaultcameramode" | "enableaudiorecording" | "enablevideorecording" | "maxvideorecordingduration" | "displayuploadlist" | "enablefilename", string>;
 export {};
 //# sourceMappingURL=Config.d.ts.map

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

@@ -20,9 +20,12 @@ export class SourceBtn extends UploaderBlock {
         iconName: string;
         'src-type': string;
         '*commonProgress': number;
-        '*uploadList': never[]; /** @type {string | undefined} */
+        '*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":"AAQA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;gCAXF,iCAAiC;;;;;;;;;;;;MAe9B;IAGH,kBAkDC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAYC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBAzIY;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;8BAf0B,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

@@ -1,8 +1,9 @@
 // @ts-check
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
-import { ExternalUploadSource, UploadSource } from '../utils/UploadSource.js';
+import { ExternalUploadSource, UploadSource, UploadSourceMobile } from '../utils/UploadSource.js';
 import { CameraSourceTypes } from '../CameraSource/constants.js';
+import { isSupportCapture } from '../utils/supportCapture.js';
 
 const L10N_PREFIX = 'src-type-';
 
@@ -54,30 +55,39 @@ export class SourceBtn extends UploaderBlock {
       type: UploadSource.CAMERA,
       activity: ActivityBlock.activities.CAMERA,
       activate: () => {
-        const supportsCapture = 'capture' in document.createElement('input');
-        if (supportsCapture) {
-          this.api.openSystemDialog({ captureCamera: true, modeCamera: CameraSourceTypes.PHOTO });
-        }
-        return !supportsCapture;
-      },
-    });
-    this.registerType({
-      type: UploadSource.VIDEO_CAMERA,
-      activity: ActivityBlock.activities.CAMERA,
-      activate: () => {
-        const supportsCapture = 'capture' in document.createElement('input');
+        const supportsCapture = isSupportCapture();
+
         if (supportsCapture) {
-          this.api.openSystemDialog({ captureCamera: true, modeCamera: CameraSourceTypes.VIDEO });
+          this.api.openSystemDialog({ captureCamera: true });
         }
         return !supportsCapture;
       },
     });
+
     this.registerType({
       type: 'draw',
       activity: ActivityBlock.activities.DRAW,
       icon: 'edit-draw',
     });
 
+    for (let mobileSourceType of Object.values(UploadSourceMobile)) {
+      this.registerType({
+        type: mobileSourceType,
+        activity: ActivityBlock.activities.CAMERA,
+        activate: () => {
+          const supportsCapture = isSupportCapture();
+          if (supportsCapture) {
+            this.api.openSystemDialog({
+              captureCamera: true,
+              modeCamera:
+                mobileSourceType === 'mobile-photo-camera' ? CameraSourceTypes.PHOTO : CameraSourceTypes.VIDEO,
+            });
+          }
+          return !supportsCapture;
+        },
+      });
+    }
+
     for (let externalSourceType of Object.values(ExternalUploadSource)) {
       this.registerType({
         type: externalSourceType,
@@ -122,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/SourceList/SourceList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAOA;CAqCC;sBA1CqB,yBAAyB"}
+{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAMA;CA4CC;sBAjDqB,yBAAyB"}

package/blocks/SourceList/SourceList.js

@@ -1,14 +1,12 @@
 // @ts-check
-import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { Block } from '../../abstract/Block.js';
 import { stringToArray } from '../../utils/stringToArray.js';
-import { calcCameraModes } from '../CameraSource/calcCameraModes.js';
-import { isMobileDevice } from '../utils/checkDevice.js';
+import { deserializeCsv } from '../utils/comma-separated.js';
+import { isSupportCapture } from '../utils/supportCapture.js';
 
 export class SourceList extends Block {
   initCallback() {
     super.initCallback();
-    const isMobile = isMobileDevice();
 
     this.subConfigValue('sourceList', (/** @type {String} */ val) => {
       let list = stringToArray(val);
@@ -24,15 +22,23 @@ export class SourceList extends Block {
           return;
         }
 
-        html += /* HTML */ `<uc-source-btn role="listitem" type="${srcName}"></uc-source-btn>`;
+        if (srcName === 'camera' && isSupportCapture()) {
+          this.subConfigValue('cameraModes', (/** @type {String} */ val) => {
+            const cameraModes = deserializeCsv(val);
+
+            cameraModes.forEach((mode) => {
+              html += /* HTML */ `<uc-source-btn role="listitem" type="mobile-${mode}-camera"></uc-source-btn>`;
+            });
+
+            if (cameraModes.length === 0) {
+              html += /* HTML */ `<uc-source-btn role="listitem" type="mobile-photo-camera"></uc-source-btn>`;
+            }
+          });
 
-        if (
-          srcName === ActivityBlock.activities.CAMERA &&
-          isMobile &&
-          calcCameraModes(this.cfg).isVideoRecordingEnabled
-        ) {
-          html += /* HTML */ `<uc-source-btn role="listitem" type="video-camera"></uc-source-btn>`;
+          return;
         }
+
+        html += /* HTML */ `<uc-source-btn role="listitem" type="${srcName}"></uc-source-btn>`;
       });
 
       if (this.cfg.sourceListWrap) {

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: () => {