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

package/blocks/DropArea/DropArea.js

@@ -4,7 +4,7 @@ import { Data } from '@symbiotejs/symbiote';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { stringToArray } from '../../utils/stringToArray.js';
-import { asBoolean } from '../Config/normalizeConfigValue.js';
+import { asBoolean } from '../Config/validatorsType.js';
 import { UploadSource } from '../utils/UploadSource.js';
 import { DropzoneState, addDropzone } from './addDropzone.js';
 
@@ -24,6 +24,7 @@ export class DropArea extends UploaderBlock {
       isFullscreen: false,
       isEnabled: true,
       isVisible: true,
+      isInitFlow: false,
       text: '',
       [REGISTRY_KEY]: null,
     };
@@ -69,6 +70,12 @@ export class DropArea extends UploaderBlock {
         this.set$({ isClickable: asBoolean(value) });
       },
     );
+    this.defineAccessor(
+      'initflow',
+      /** @param {unknown} value */ (value) => {
+        this.set$({ isInitFlow: asBoolean(value) });
+      },
+    );
     this.defineAccessor(
       'with-icon',
       /** @param {unknown} value */ (value) => {
@@ -119,7 +126,6 @@ export class DropArea extends UploaderBlock {
           this.set$({
             '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
           });
-          // this.setOrAddState('*modalActive', true);
         }
       },
     });
@@ -174,9 +180,19 @@ export class DropArea extends UploaderBlock {
         if (event.type === 'keydown') {
           // @ts-ignore
           if (event.code === 'Space' || event.code === 'Enter') {
+            if (this.$.isInitFlow) {
+              this.api.initFlow();
+              return;
+            }
+
             this.api.openSystemDialog();
           }
         } else if (event.type === 'click') {
+          if (this.$.isInitFlow) {
+            this.api.initFlow();
+            return;
+          }
+
           this.api.openSystemDialog();
         }
       };
@@ -271,4 +287,6 @@ DropArea.bindAttributes({
   fullscreen: null,
   // @ts-expect-error TODO: fix types inside symbiote
   disabled: null,
+  // @ts-expect-error TODO: fix types inside symbiote
+  initflow: null,
 });

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;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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;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;;;;6BAlQa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;8BAPd,iCAAiC"}

package/blocks/ExternalSource/ExternalSource.js

@@ -78,7 +78,6 @@ export class ExternalSource extends UploaderBlock {
         if (!externalSourceType) {
           this.modalManager.close(this.$['*currentActivity']);
           this.$['*currentActivity'] = null;
-          // this.setOrAddState('*modalActive', false);
           console.error(`Param "externalSourceType" is required for activity "${this.activityType}"`);
           return;
         }

package/blocks/FileItem/FileItem.d.ts

@@ -28,7 +28,7 @@ export class FileItem extends UploaderBlock {
         isUploading: boolean;
         isFocused: boolean;
         isEditable: boolean;
-        isFileName: boolean;
+        showFileNames: boolean;
         state: symbol;
         ariaLabelStatusFile: string;
         onEdit: () => void;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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,0BAeC;IAXC,wCAA0C;IAa5C,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAuCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAmDC;IAyDD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BA/c6B,iCAAiC;AAS/D;;;;;GAKG"}

package/blocks/FileItem/FileItem.js

@@ -57,7 +57,7 @@ export class FileItem extends UploaderBlock {
       isUploading: false,
       isFocused: false,
       isEditable: false,
-      isFileName: false,
+      showFileNames: false,
       state: FileItemState.IDLE,
       ariaLabelStatusFile: '',
       onEdit: () => {
@@ -93,6 +93,7 @@ export class FileItem extends UploaderBlock {
    */
   _observerCallback(entries) {
     let [entry] = entries;
+
     this._isIntersecting = entry.isIntersecting;
     this._thumbRect = entry.boundingClientRect;
 
@@ -100,11 +101,11 @@ export class FileItem extends UploaderBlock {
       this.render();
       this._renderedOnce = true;
     }
-    if (entry.intersectionRatio === 0) {
-      this._debouncedGenerateThumb.cancel();
-    } else {
-      this._debouncedGenerateThumb();
-    }
+    // if (entry.intersectionRatio === 0) {
+    //   this._debouncedGenerateThumb.cancel();
+    // } else {
+    //   this._debouncedGenerateThumb();
+    // }
   }
 
   /** @private */
@@ -154,10 +155,6 @@ export class FileItem extends UploaderBlock {
       return;
     }
 
-    if (entry.getValue('thumbUrl')) {
-      return;
-    }
-
     if (entry.getValue('file')?.type.includes('image')) {
       try {
         let thumbUrl = await generateThumb(entry.getValue('file'), this.cfg.thumbSize);
@@ -273,14 +270,26 @@ 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.subConfigValue('filesViewMode', (mode) => {
+      if (this.cfg.filesViewMode === 'grid') {
+        this.$.showFileNames = this.cfg.gridShowFileNames;
+      }
+      if (this.cfg.filesViewMode === 'list') {
+        this.$.showFileNames = true;
       }
 
       this.setAttribute('mode', mode);
     });
 
+    this.subConfigValue('gridShowFileNames', (value) => {
+      if (this.cfg.filesViewMode === 'grid') {
+        this.$.showFileNames = value;
+      }
+      if (this.cfg.filesViewMode === 'list') {
+        this.$.showFileNames = true;
+      }
+    });
+
     this.onclick = () => {
       FileItem.activeInstances.forEach((inst) => {
         if (inst === this) {
@@ -460,13 +469,10 @@ export class FileItem extends UploaderBlock {
 
 FileItem.template = /* HTML */ `
   <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
-      <div class="uc-badge">
-        <uc-icon set="@name: badgeIcon"></uc-icon>
-      </div>
-    </div>
+    <uc-thumb set="uid:uid;thumbUrl:thumbUrl;badgeIcon:badgeIcon"></uc-thumb>
+
     <div aria-atomic="true" aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
-      <span class="uc-file-name" set="@hidden: isFileName">{{itemName}}</span>
+      <span class="uc-file-name" set="@hidden: !showFileNames">{{itemName}}</span>
       <span class="uc-file-error" set="@hidden: !errorText;">{{errorText}}</span>
       <span class="uc-file-hint" set="@hidden: !hint">{{hint}}</span>
     </div>
@@ -491,7 +497,11 @@ FileItem.template = /* HTML */ `
         <uc-icon name="upload"></uc-icon>
       </button>
     </div>
-    <uc-progress-bar class="uc-progress-bar" set="value: progressValue; visible: progressVisible;"> </uc-progress-bar>
+    <uc-progress-bar
+      class="uc-progress-bar"
+      set="value: progressValue; visible: progressVisible; @hasFileName: showFileNames"
+    >
+    </uc-progress-bar>
   </div>
 `;
 FileItem.activeInstances = new Set();

package/blocks/FileItem/file-item.css

@@ -202,3 +202,33 @@ uc-file-item[mode='grid'] .uc-file-actions {
 uc-file-item[mode='grid'] button {
   background-color: var(--uc-background);
 }
+
+uc-file-item[mode='grid'] button:hover {
+  background-color: var(--uc-muted);
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar {
+  width: initial;
+  height: 4px !important;
+  opacity: 1;
+  top: initial !important;
+  bottom: var(--uc-padding);
+  left: var(--uc-padding);
+  right: var(--uc-padding);
+  border-radius: var(--uc-radius);
+  background-color: var(--uc-background);
+  z-index: 1;
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar.uc-progress-bar--hidden {
+  opacity: 0;
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar[hasfilename] {
+  bottom: calc(var(--uc-padding) + var(--uc-font-size));
+}
+
+uc-file-item[mode='grid'] .uc-progress-bar .uc-progress {
+  background-color: var(--uc-primary);
+  opacity: 0.7;
+}

package/blocks/Modal/Modal.d.ts

@@ -1,8 +1,6 @@
 export class Modal extends Block {
     static StateConsumerScope: string;
     init$: {
-        '*modalActive': boolean;
-        isOpen: boolean;
         closeClicked: () => void;
     };
     _handleBackdropClick: () => void;
@@ -16,6 +14,27 @@ export class Modal extends Block {
     _handleDialogMouseUp: (e: Event) => void;
     show(): void;
     hide(): void;
+    /**
+     * @private
+     * @type {import('../../abstract/ModalManager.js').ModalCb}
+     */
+    private _handleModalOpen;
+    /**
+     * @private
+     * @type {import('../../abstract/ModalManager.js').ModalCb}
+     */
+    private _handleModalClose;
+    /** @private */
+    private _handleModalCloseAll;
+    handleModalOpen: ((data: {
+        id: string;
+        modal?: Modal | undefined;
+    }) => void) | undefined;
+    handleModalClose: ((data: {
+        id: string;
+        modal?: Modal | undefined;
+    }) => void) | undefined;
+    handleModalCloseAll: (() => void) | undefined;
 }
 export namespace Modal {
     let template: string;

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAIA;IAEE,kCAAoC;IAIlC;;MAGC;IAGH,iCAEE;IAEF,yBAME;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAWC;IAED,aAOC;IAED;;;OAGG;IACH,yBAMC;IAED;;;OAGG;IACH,0BAIC;IAED,eAAe;IACf,6BAEC;IAmBC;;;4BAAuD;IACvD;;;4BAAyD;IACzD,8CAA+D;CAmBlE;;;;sBAnIqB,yBAAyB"}

package/blocks/Modal/Modal.js

@@ -10,8 +10,6 @@ export class Modal extends Block {
     super();
     this.init$ = {
       ...this.init$,
-      '*modalActive': false,
-      isOpen: false,
       closeClicked: this._handleDialogClose,
     };
   }
@@ -21,8 +19,6 @@ export class Modal extends Block {
   };
 
   _closeDialog = () => {
-    // this.setOrAddState('*modalActive', false);
-
     this.modalManager?.close(this.id);
 
     if (!this.modalManager.hasActiveModals) {
@@ -69,6 +65,33 @@ export class Modal extends Block {
     }
   }
 
+  /**
+   * @private
+   * @type {import('../../abstract/ModalManager.js').ModalCb}
+   */
+  _handleModalOpen({ id }) {
+    if (id === this.id) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * @private
+   * @type {import('../../abstract/ModalManager.js').ModalCb}
+   */
+  _handleModalClose({ id }) {
+    if (id === this.id) {
+      this.hide();
+    }
+  }
+
+  /** @private */
+  _handleModalCloseAll() {
+    this.hide();
+  }
+
   initCallback() {
     super.initCallback();
 
@@ -86,23 +109,13 @@ export class Modal extends Block {
       }
     });
 
-    this.modalManager.subscribe(ModalEvents.OPEN, (/** @type {{ id: string }} */ { id }) => {
-      if (id === this.id) {
-        this.show();
-      } else {
-        this.hide();
-      }
-    });
-
-    this.modalManager.subscribe(ModalEvents.CLOSE, (/** @type {{ id: string }} */ { id }) => {
-      if (id === this.id) {
-        this.hide();
-      }
-    });
+    this.handleModalOpen = this._handleModalOpen.bind(this);
+    this.handleModalClose = this._handleModalClose.bind(this);
+    this.handleModalCloseAll = this._handleModalCloseAll.bind(this);
 
-    this.modalManager.subscribe(ModalEvents.CLOSE_ALL, ({}) => {
-      this.hide();
-    });
+    this.modalManager.subscribe(ModalEvents.OPEN, this.handleModalOpen);
+    this.modalManager.subscribe(ModalEvents.CLOSE, this.handleModalClose);
+    this.modalManager.subscribe(ModalEvents.CLOSE_ALL, this.handleModalCloseAll);
   }
 
   destroyCallback() {
@@ -112,6 +125,10 @@ export class Modal extends Block {
     this.ref.dialog.removeEventListener('close', this._handleDialogClose);
     this.ref.dialog.removeEventListener('mousedown', this._handleDialogMouseDown);
     this.ref.dialog.removeEventListener('mouseup', this._handleDialogMouseUp);
+
+    this.modalManager.unsubscribe(ModalEvents.OPEN, this.handleModalOpen);
+    this.modalManager.unsubscribe(ModalEvents.CLOSE, this.handleModalClose);
+    this.modalManager.unsubscribe(ModalEvents.CLOSE_ALL, this.handleModalCloseAll);
   }
 }
 

package/blocks/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAEA;IACE,qBAAqB;IACrB,eAAW;IAEX,sBAAsB;IACtB,kBAAgB;IAEhB,WAIE;CA8CH;;;;sBA3DqB,yBAAyB"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAEA;IACE,qBAAqB;IACrB,eAAW;IAEX,sBAAsB;IACtB,kBAAgB;IAEhB,WAIE;CA+CH;;;;sBA5DqB,yBAAyB"}

package/blocks/ProgressBar/ProgressBar.js

@@ -24,6 +24,7 @@ export class ProgressBar extends Block {
         this.ref.realProgressLine.addEventListener(
           'transitionend',
           () => {
+            this.classList.add('uc-progress-bar--hidden');
             this.ref.realProgressLine.classList.toggle('uc-progress--hidden', true);
           },
           {

package/blocks/ProgressBar/progress-bar.css

@@ -41,6 +41,7 @@ uc-progress-bar .uc-fake-progress {
     display 1s;
   /* stylelint-disable-next-line property-no-unknown */
   transition-behavior: allow-discrete;
+  z-index: 1;
 }
 
 uc-progress-bar .uc-fake-progress--hidden {

package/blocks/SimpleBtn/SimpleBtn.js

@@ -1,6 +1,6 @@
 // @ts-check
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-import { asBoolean } from '../Config/normalizeConfigValue.js';
+import { asBoolean } from '../Config/validatorsType.js';
 
 export class SimpleBtn extends UploaderBlock {
   static styleAttrs = [...super.styleAttrs, 'uc-simple-btn'];

package/blocks/Thumb/Thumb.d.ts

@@ -0,0 +1,36 @@
+export class Thumb extends UploaderBlock {
+    _debouncedGenerateThumb: (() => Promise<void>) & {
+        cancel: () => void;
+    };
+    init$: {
+        thumbUrl: string;
+        badgeIcon: string;
+        uid: string;
+        '*commonProgress': number;
+        '*uploadList': never[];
+        '*uploadQueue': import("@uploadcare/upload-client").Queue;
+        '*collectionErrors': any[];
+        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
+        '*uploadTrigger': Set<string>;
+        '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
+        '*currentActivity': null;
+        '*currentActivityParams': {};
+        '*history': never[];
+        '*historyBack': null;
+        '*closeModal': () => void;
+    };
+    /** @private */
+    private _generateThumbnail;
+    /**
+     * @private
+     * @param {IntersectionObserverEntry[]} entries
+     */
+    private _observerCallback;
+    _observer: IntersectionObserver | undefined;
+}
+export namespace Thumb {
+    let template: string;
+}
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=Thumb.d.ts.map

package/blocks/Thumb/Thumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAKA;IACE;;MAA4E;IAK1E;;;;;;;;;;;;;;;;;MAKC;IAGH,eAAe;IACf,2BAEC;IAED;;;OAGG;IACH,0BAUC;IAkBC,4CAAuG;CAU1G;;;;8BAhE6B,iCAAiC"}

package/blocks/Thumb/Thumb.js

@@ -0,0 +1,84 @@
+//@ts-check
+
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { debounce } from '../utils/debounce.js';
+
+export class Thumb extends UploaderBlock {
+  _debouncedGenerateThumb = debounce(this._generateThumbnail.bind(this), 100);
+
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      thumbUrl: '',
+      badgeIcon: '',
+      uid: '',
+    };
+  }
+
+  /** @private */
+  async _generateThumbnail() {
+    console.log('Generating thumbnail for', this.$.uid);
+  }
+
+  /**
+   * @private
+   * @param {IntersectionObserverEntry[]} entries
+   */
+  _observerCallback(entries) {
+    const [entry] = entries;
+    if (entry.isIntersecting) {
+      this._debouncedGenerateThumb();
+      this._observer?.disconnect();
+    }
+
+    if (entry.intersectionRatio === 0) {
+      this._debouncedGenerateThumb.cancel();
+    }
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this.defineAccessor('thumbUrl', (/** @type {string} */ val) => (this.$.thumbUrl = val));
+    this.defineAccessor('badgeIcon', (/** @type {string} */ val) => (this.$.badgeIcon = val));
+
+    this.defineAccessor('uid', (/** @type {string} */ value) => {
+      this.set$({ uid: value });
+    });
+
+    this.setAttribute('role', 'img');
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this._observer = new window.IntersectionObserver(this._observerCallback.bind(this), { threshold: 0.1 });
+
+    this._observer.observe(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this._observer?.disconnect();
+  }
+}
+
+Thumb.template = /* html */ `
+  <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
+    <div class="uc-badge">
+      <uc-icon set="@name: badgeIcon"></uc-icon>
+    </div>
+  </div>
+`;
+
+Thumb.bindAttributes({
+  // @ts-expect-error TODO: fix types inside symbiote
+  thumbUrl: null,
+  // @ts-expect-error TODO: fix types inside symbiote
+  badgeIcon: null,
+  // @ts-expect-error TODO: fix types inside symbiote
+  uid: null,
+});

package/blocks/Thumb/thumb.css

@@ -0,0 +1,4 @@
+uc-thumb {
+  width: 100%;
+  height: 100%;
+}

package/blocks/UploadList/UploadList.d.ts

@@ -1,3 +1,4 @@
+/** @typedef {'grid' | 'list'} FilesViewMode */
 /**
  * @typedef {{
  *   total: number;
@@ -48,6 +49,7 @@ export class UploadList extends UploaderBlock {
 export namespace UploadList {
     let template: string;
 }
+export type FilesViewMode = 'grid' | 'list';
 export type Summary = {
     total: number;
     succeed: number;

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;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"}
+{"version":3,"file":"UploadList.d.ts","sourceRoot":"","sources":["UploadList.js"],"names":[],"mappings":"AAMA,+CAA+C;AAE/C;;;;;;;GAOG;AAEH;IAKE,4BAAoD;IAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;MA0BC;IAGH,eAAe;IACf,yCASQ;IAER,eAAe;IACf,4BAuCC;IAED;;;OAGG;IACH,uBAmBC;CAwEF;;;;4BAvMa,MAAM,GAAG,MAAM;sBAGhB;IACZ,KAAS,EAAE,MAAM,CAAC;IAClB,OAAW,EAAE,MAAM,CAAC;IACpB,SAAa,EAAE,MAAM,CAAC;IACtB,MAAU,EAAE,MAAM,CAAC;CAChB;8BAZ0B,iCAAiC"}

package/blocks/UploadList/UploadList.js

@@ -4,6 +4,8 @@ import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { EventType } from '../UploadCtxProvider/EventEmitter.js';
 import { throttle } from '../utils/throttle.js';
 
+/** @typedef {'grid' | 'list'} FilesViewMode */
+
 /**
  * @typedef {{
  *   total: number;
@@ -149,7 +151,7 @@ export class UploadList extends UploaderBlock {
       }
     });
 
-    this.subConfigValue('displayUploadList', (mode) => {
+    this.subConfigValue('filesViewMode', (mode) => {
       this.setAttribute('mode', mode);
     });
 

package/blocks/UploadList/upload-list.css

@@ -77,9 +77,10 @@ uc-upload-list[mode='grid'] .uc-files {
 
 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);
+  flex: 0 0 calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
+  max-width: calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
   height: var(--uc-grid-preview-image-height);
-  aspect-ratio: 1;
+  aspect-ratio: var(--uc-grid-aspect-ratio);
 }
 
 uc-upload-list .uc-files .uc-add-more-btn {

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

@@ -13,7 +13,7 @@
   display: none !important;
 }
 
-:where([uc-wgt-common]) [activity]:not([active]) {
+:where([uc-wgt-common]) [activity]:not([active], .active) {
   display: none;
 }
 

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

@@ -31,6 +31,7 @@
 @import url('../../CloudImageEditorActivity/index.css');
 @import url('../../Select/select.css');
 @import url('../../Spinner/spinner.css');
+@import url('../../Thumb/thumb.css');
 
 /* POST RESET */
 @import url('post-reset.css');

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

@@ -18,10 +18,9 @@
   --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);
+  --uc-grid-aspect-ratio: 1 / 1;
 
   /* Default colors, in case of media query failure */
   --uc-background: var(--uc-background-light);

package/index.d.ts

@@ -28,6 +28,7 @@ export { ActivityHeader } from "./blocks/ActivityHeader/ActivityHeader.js";
 export { Select } from "./blocks/Select/Select.js";
 export { Copyright } from "./blocks/Copyright/Copyright.js";
 export { Spinner } from "./blocks/Spinner/Spinner.js";
+export { Thumb } from "./blocks/Thumb/Thumb.js";
 export { FileUploaderRegular } from "./solutions/file-uploader/regular/FileUploaderRegular.js";
 export { FileUploaderMinimal } from "./solutions/file-uploader/minimal/FileUploaderMinimal.js";
 export { FileUploaderInline } from "./solutions/file-uploader/inline/FileUploaderInline.js";
@@ -36,6 +37,7 @@ export { defineComponents } from "./abstract/defineComponents.js";
 export { defineLocale } from "./abstract/localeRegistry.js";
 export { loadFileUploaderFrom } from "./abstract/loadFileUploaderFrom.js";
 export { toKebabCase } from "./utils/toKebabCase.js";
+export { ModalEvents } from "./abstract/ModalManager.js";
 export { BaseComponent, Data, UID } from "@symbiotejs/symbiote";
 export { UploadSource, ExternalUploadSource } from "./blocks/utils/UploadSource.js";
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -33,6 +33,7 @@ export { ActivityHeader } from './blocks/ActivityHeader/ActivityHeader.js';
 export { Select } from './blocks/Select/Select.js';
 export { Copyright } from './blocks/Copyright/Copyright.js';
 export { Spinner } from './blocks/Spinner/Spinner.js';
+export { Thumb } from './blocks/Thumb/Thumb.js';
 
 // Solutions:
 export { FileUploaderRegular } from './solutions/file-uploader/regular/FileUploaderRegular.js';
@@ -46,6 +47,7 @@ export { defineLocale } from './abstract/localeRegistry.js';
 export { loadFileUploaderFrom } from './abstract/loadFileUploaderFrom.js';
 export { toKebabCase } from './utils/toKebabCase.js';
 export { UploadSource, ExternalUploadSource } from './blocks/utils/UploadSource.js';
+export { ModalEvents } from './abstract/ModalManager.js';
 
 export * from './env.js';