@uploadcare/file-uploader 1.15.0-alpha.8 → 1.15.0-alpha.9

package/abstract/ActivityBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityBlock.d.ts","sourceRoot":"","sources":["ActivityBlock.js"],"names":[],"mappings":"AASA;;;;;GAKG;AAEH;IA+EE;;;;;;OAMG;IACH,kCAAsC;IArFtC,iBAAiB;IACjB,kCAAuB;IAEvB;;;;;;MAA+B;IAE/B;;MAAqE;IAErE,eAAe;IACf,oBAKC;IAED,eAAe;IACf,kBAaC;IA8BD,eAAe;IACf,sBAWC;IAED,eAAe;IACf,8BAEC;IAWD,4CAEC;IAED,iCAEC;IAED;;;;;;;OAOG;IACH;4BAHiB,IAAI;8BACJ,IAAI;yBAQpB;IAED,2BAKC;IAoBD,0BAEC;IAED,yDAAyD;IACzD,oLAEC;IAED,qBAAqB;IACrB,2BAEC;IAED,qBAAqB;IACrB,2BAEC;IAED,oBA+BC;IAhLC,8CAAyB;CAiL5B;;;;;;;;;;;;gCAlMY;IACZ,kBAAsB,EAAE,OAAO,gEAAgE,EAAE,cAAc,CAAC;IAChH,UAAc,OAAO,4CAA4C,EAAE,cAAc,CAAC;CAC/E;qCA2MU,CAAC,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;2BAChF,sBAAsB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,IAAI;sBAtNrC,YAAY"}
+{"version":3,"file":"ActivityBlock.d.ts","sourceRoot":"","sources":["ActivityBlock.js"],"names":[],"mappings":"AASA;;;;;GAKG;AAEH;IA+EE;;;;;;OAMG;IACH,kCAAsC;IArFtC,iBAAiB;IACjB,kCAAuB;IAEvB;;;;;;MAA+B;IAE/B;;MAAqE;IAErE,eAAe;IACf,oBAKC;IAED,eAAe;IACf,kBAaC;IA8BD,eAAe;IACf,sBAWC;IAED,eAAe;IACf,8BAEC;IAWD,4CAEC;IAED,iCAEC;IAED;;;;;;;OAOG;IACH;4BAHiB,IAAI;8BACJ,IAAI;yBAQpB;IAED,2BAKC;IAoBD,0BAEC;IAED,yDAAyD;IACzD,oLAEC;IAED,qBAAqB;IACrB,2BAEC;IAED,qBAAqB;IACrB,2BAEC;IAED,oBA4BC;IA7KC,8CAAyB;CA8K5B;;;;;;;;;;;;gCA/LY;IACZ,kBAAsB,EAAE,OAAO,gEAAgE,EAAE,cAAc,CAAC;IAChH,UAAc,OAAO,4CAA4C,EAAE,cAAc,CAAC;CAC/E;qCAwMU,CAAC,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;2BAChF,sBAAsB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,IAAI;sBAnNrC,YAAY"}

package/abstract/ActivityBlock.js

@@ -187,9 +187,6 @@ export class ActivityBlock extends Block {
         couldOpenActivity = /** @type {ActivityBlock} */ (nextActivityBlock)?.couldOpenActivity ?? false;
       }
 
-      // // TODO: Возможно стоит обработать поведение activity start-from для minimal mode
-      // console.log({ nextActivity });
-
       nextActivity = couldOpenActivity ? nextActivity : undefined;
 
       if (nextActivity) this.modalManager.open(nextActivity);

package/abstract/Block.js

@@ -252,7 +252,7 @@ export class Block extends BaseComponent {
 
     this.localeManager?.destroy();
 
-    this.modalManager?.destroy();
+    this.modalManager && this.modalManager?.destroy();
   }
 
   /**

package/abstract/ModalManager.d.ts

@@ -1,5 +1,3 @@
-/** @typedef {string} ModalId */
-/** @typedef {import('../blocks/Modal/Modal.js').Modal} ModalNode */
 export const ModalEvents: Readonly<{
     ADD: "modal:add";
     DELETE: "modal:delete";
@@ -8,6 +6,10 @@ export const ModalEvents: Readonly<{
     CLOSE_ALL: "modal:closeAll";
     DESTROY: "modal:destroy";
 }>;
+/** @typedef {string} ModalId */
+/** @typedef {import('../blocks/Modal/Modal.js').Modal} ModalNode */
+/** @typedef {(data: { id: ModalId; modal?: ModalNode }) => void} ModalCb */
+/** @typedef {(typeof ModalEvents)[keyof ModalEvents]} ModalEventType */
 export class ModalManager {
     /** @param {import('./Block.js').Block} block */
     constructor(block: import('./Block.js').Block);
@@ -79,23 +81,23 @@ export class ModalManager {
     /**
      * Subscribe to modal events
      *
-     * @param {string} event
-     * @param {() => void} callback
+     * @param {ModalEventType} event
+     * @param {ModalCb} callback
      * @returns {() => void}
      */
-    subscribe(event: string, callback: () => void): () => void;
+    subscribe(event: ModalEventType, callback: ModalCb): () => void;
     /**
      * Unsubscribe from modal events
      *
-     * @param {string} event
-     * @param {() => void} callback
+     * @param {ModalEventType} event
+     * @param {ModalCb | undefined} callback
      */
-    unsubscribe(event: string, callback: () => void): void;
+    unsubscribe(event: ModalEventType, callback: ModalCb | undefined): void;
     /**
      * Notify all subscribers of a modal event
      *
      * @private
-     * @param {string} event - Event name
+     * @param {ModalEventType} event - Event name
      * @param {{
      *       id?: ModalId | ModalId[];
      *       modal?: ModalNode | ModalNode[];
@@ -110,4 +112,16 @@ export class ModalManager {
 }
 export type ModalId = string;
 export type ModalNode = import('../blocks/Modal/Modal.js').Modal;
+export type ModalCb = (data: {
+    id: ModalId;
+    modal?: ModalNode;
+}) => void;
+export type ModalEventType = (typeof ModalEvents)[keyof {
+    readonly ADD: "modal:add";
+    readonly DELETE: "modal:delete";
+    readonly OPEN: "modal:open";
+    readonly CLOSE: "modal:close";
+    readonly CLOSE_ALL: "modal:closeAll";
+    readonly DESTROY: "modal:destroy";
+}];
 //# sourceMappingURL=ModalManager.d.ts.map

package/abstract/ModalManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalManager.d.ts","sourceRoot":"","sources":["ModalManager.js"],"names":[],"mappings":"AAEA,gCAAgC;AAEhC,oEAAoE;AAEpE;;;;;;;GAOG;AAEH;IAeE,gDAAgD;IAChD,mBADY,OAAO,YAAY,EAAE,KAAK,EAGrC;IAjBD;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,sBAA0B;IAE1B,4BAAyB;IAIvB,mCAAmB;IAGrB;;;OAGG;IACH,oBAEC;IAED;;;;;OAKG;IACH,kBAHW,OAAO,SACP,SAAS,QAKnB;IAED,4DAA4D;IAC5D,gBADY,OAAO,WASlB;IAED;;;;;OAKG;IACH,SAHW,OAAO,GACL,OAAO,CAanB;IAED;;;;;OAKG;IACH,UAHW,OAAO,GACL,OAAO,CAanB;IAED;;;;;OAKG;IACH,WAHW,OAAO,GACL,OAAO,CAanB;IAED;;;;OAIG;IACH,+BAEC;IAED;;;;OAIG;IACH,QAFa,OAAO,CAWnB;IAED;;;;OAIG;IACH,YAFa,MAAM,CAQlB;IAED;;;;;;OAMG;IACH,iBAJW,MAAM,YACN,MAAM,IAAI,GACR,MAAM,IAAI,CAStB;IAED;;;;;OAKG;IACH,mBAHW,MAAM,YACN,MAAM,IAAI,QAMpB;IAED;;;;;;;;;;;;OAYG;IACH,gBAUC;IAED,oDAAoD;IACpD,gBAKC;CACF;sBA1Na,MAAM;wBAEN,OAAO,0BAA0B,EAAE,KAAK"}
+{"version":3,"file":"ModalManager.d.ts","sourceRoot":"","sources":["ModalManager.js"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,gCAAgC;AAEhC,oEAAoE;AAEpE,4EAA4E;AAE5E,wEAAwE;AAExE;IAeE,gDAAgD;IAChD,mBADY,OAAO,YAAY,EAAE,KAAK,EAGrC;IAjBD;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,sBAA0B;IAE1B,4BAAyB;IAIvB,mCAAmB;IAGrB;;;OAGG;IACH,oBAEC;IAED;;;;;OAKG;IACH,kBAHW,OAAO,SACP,SAAS,QAKnB;IAED,4DAA4D;IAC5D,gBADY,OAAO,WASlB;IAED;;;;;OAKG;IACH,SAHW,OAAO,GACL,OAAO,CAanB;IAED;;;;;OAKG;IACH,UAHW,OAAO,GACL,OAAO,CAanB;IAED;;;;;OAKG;IACH,WAHW,OAAO,GACL,OAAO,CAanB;IAED;;;;OAIG;IACH,+BAEC;IAED;;;;OAIG;IACH,QAFa,OAAO,CAWnB;IAED;;;;OAIG;IACH,YAFa,MAAM,CAQlB;IAED;;;;;;OAMG;IACH,iBAJW,cAAc,YACd,OAAO,GACL,MAAM,IAAI,CAStB;IAED;;;;;OAKG;IACH,mBAHW,cAAc,YACd,OAAO,GAAG,SAAS,QAM7B;IAED;;;;;;;;;;;;OAYG;IACH,gBAUC;IAED,oDAAoD;IACpD,gBAKC;CACF;sBArNa,MAAM;wBAEN,OAAO,0BAA0B,EAAE,KAAK;6BAEjC;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,KAAK,IAAI;6BAElD,CAAC,kBAAkB,CAAC,CAAC;;;;;;;CAAiB,CAAC"}

package/abstract/ModalManager.js

@@ -1,9 +1,5 @@
 //@ts-check
 
-/** @typedef {string} ModalId */
-
-/** @typedef {import('../blocks/Modal/Modal.js').Modal} ModalNode */
-
 export const ModalEvents = Object.freeze({
   ADD: 'modal:add',
   DELETE: 'modal:delete',
@@ -13,6 +9,14 @@ export const ModalEvents = Object.freeze({
   DESTROY: 'modal:destroy',
 });
 
+/** @typedef {string} ModalId */
+
+/** @typedef {import('../blocks/Modal/Modal.js').Modal} ModalNode */
+
+/** @typedef {(data: { id: ModalId; modal?: ModalNode }) => void} ModalCb */
+
+/** @typedef {(typeof ModalEvents)[keyof ModalEvents]} ModalEventType */
+
 export class ModalManager {
   /**
    * @private
@@ -161,8 +165,8 @@ export class ModalManager {
   /**
    * Subscribe to modal events
    *
-   * @param {string} event
-   * @param {() => void} callback
+   * @param {ModalEventType} event
+   * @param {ModalCb} callback
    * @returns {() => void}
    */
   subscribe(event, callback) {
@@ -177,8 +181,8 @@ export class ModalManager {
   /**
    * Unsubscribe from modal events
    *
-   * @param {string} event
-   * @param {() => void} callback
+   * @param {ModalEventType} event
+   * @param {ModalCb | undefined} callback
    */
   unsubscribe(event, callback) {
     if (this._subscribers.has(event)) {
@@ -190,7 +194,7 @@ export class ModalManager {
    * Notify all subscribers of a modal event
    *
    * @private
-   * @param {string} event - Event name
+   * @param {ModalEventType} event - Event name
    * @param {{
    *       id?: ModalId | ModalId[];
    *       modal?: ModalNode | ModalNode[];

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,0BAeC;IAXC,wCAA0C;IAa5C,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAuCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAmDC;IA+CD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BArc6B,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,0BAgBC;IAZC,wCAA0C;IAc5C,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;;;;;8BAhd6B,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: () => {
@@ -105,6 +105,7 @@ export class FileItem extends UploaderBlock {
       this._debouncedGenerateThumb.cancel();
     } else {
       this._debouncedGenerateThumb();
+      // this?._observer.disconnect();
     }
   }
 
@@ -271,15 +272,25 @@ export class FileItem extends UploaderBlock {
 
     this.subConfigValue('useCloudImageEditor', () => this._debouncedCalculateState());
     this.subConfigValue('filesViewMode', (mode) => {
-      if (mode === 'grid') {
-        this.subConfigValue('gridShowFileNames', (value) => (this.$.isFileName = !value));
-      } else {
-        this.$.isFileName = false;
+      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) {
@@ -459,10 +470,10 @@ export class FileItem extends UploaderBlock {
 
 FileItem.template = /* HTML */ `
   <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <uc-thumb set="thumbUrl:thumbUrl;badgeIcon:badgeIcon"></uc-thumb>
+    <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>
@@ -489,7 +500,7 @@ FileItem.template = /* HTML */ `
     </div>
     <uc-progress-bar
       class="uc-progress-bar"
-      set="value: progressValue; visible: progressVisible; @hasFileName: !isFileName"
+      set="value: progressValue; visible: progressVisible; @hasFileName: showFileNames"
     >
     </uc-progress-bar>
   </div>

package/blocks/Modal/Modal.d.ts

@@ -14,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;;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;CA8CF;;;;sBA9GqB,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

@@ -65,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();
 
@@ -82,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() {
@@ -108,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/Thumb/Thumb.d.ts

@@ -17,6 +17,7 @@ export class Thumb extends UploaderBlock {
         '*historyBack': null;
         '*closeModal': () => void;
     };
+    _observer: any;
 }
 export namespace Thumb {
     let template: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAIA;IAII;;;;;;;;;;;;;;;;;MAKC;CAeJ;;;;8BA1B6B,iCAAiC"}
+{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAIA;IAII;;;;;;;;;;;;;;;;;MAKC;IAeD,eASC;CAUJ;;;;8BA7C6B,iCAAiC"}

package/blocks/Thumb/Thumb.js

@@ -25,6 +25,25 @@ export class Thumb extends UploaderBlock {
 
   connectedCallback() {
     super.connectedCallback();
+
+    this._observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting) {
+          this.setAttribute('aria-hidden', 'true');
+          this._observer.disconnect(); // Stop observing after the first intersection
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    this._observer.observe(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this._observer.disconnect();
   }
 }
 
@@ -44,5 +63,5 @@ Thumb.bindAttributes({
   // @ts-expect-error TODO: fix types inside symbiote
   badgeIcon: null,
   // @ts-expect-error TODO: fix types inside symbiote
-  id: null,
+  uid: null,
 });

package/index.ssr.js

@@ -840,10 +840,10 @@ export const ExternalUploadSource = {
 export const FileItem = class {
   static template = `
   <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <uc-thumb set="thumbUrl:thumbUrl;badgeIcon:badgeIcon"></uc-thumb>
+    <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>
@@ -870,7 +870,7 @@ export const FileItem = class {
     </div>
     <uc-progress-bar
       class="uc-progress-bar"
-      set="value: progressValue; visible: progressVisible; @hasFileName: !isFileName"
+      set="value: progressValue; visible: progressVisible; @hasFileName: showFileNames"
     >
     </uc-progress-bar>
   </div>
@@ -1299,7 +1299,7 @@ export const Thumb = class {
     </div>
   </slot>
 `;
-  static observedAttributes = ["thumbUrl", "badgeIcon", "id"];
+  static observedAttributes = ["thumbUrl", "badgeIcon", "uid"];
   static extSrcList = {
     FACEBOOK: "facebook",
     DROPBOX: "dropbox",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.15.0-alpha.8",
+  "version": "1.15.0-alpha.9",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",

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

@@ -18,6 +18,22 @@ export class FileUploaderMinimal extends SolutionBlock {
         '*historyBack': null;
         '*closeModal': () => void;
     };
+    _handleModalOpen(data: {
+        id: string;
+        modal?: import("./index.js").Modal | undefined;
+    }): void;
+    _handleModalClose(data: {
+        id: string;
+        modal?: import("./index.js").Modal | undefined;
+    }): void;
+    handleModalOpen: ((data: {
+        id: string;
+        modal?: import("./index.js").Modal | undefined;
+    }) => void) | undefined;
+    handleModalClose: ((data: {
+        id: string;
+        modal?: import("./index.js").Modal | undefined;
+    }) => void) | undefined;
 }
 export namespace FileUploaderMinimal {
     let template: string;

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAQA;IAMI;;;;;;;;;;;;;;;;;;MAMC;CA+FJ;;;;8BAjH6B,oCAAoC"}
+{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAQA;IAMI;;;;;;;;;;;;;;;;;;MAMC;IAXF;;;aAAkD;IAAlD;;;aAAkD;IAkGjD;;;4BAAuD;IACvD;;;4BAAyD;CAW5D;;;;8BArH6B,oCAAoC"}

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

@@ -21,6 +21,36 @@ export class FileUploaderMinimal extends SolutionBlock {
     };
   }
 
+  /** @type {import('../../../abstract/ModalManager.js').ModalCb} */
+  _handleModalOpen() {
+    if (this.$['*currentActivity'] === ActivityBlock.activities.UPLOAD_LIST) {
+      this.set$({
+        classUploadList: ACTIVE_CLASS,
+        isHiddenStartFrom: true,
+      });
+    }
+
+    if (this.$['*uploadList']?.length <= 0) {
+      this.set$({
+        classStartFrom: ACTIVE_CLASS,
+      });
+    }
+  }
+
+  /** @type {import('../../../abstract/ModalManager.js').ModalCb} */
+  _handleModalClose(e) {
+    if (e.id === this.$['*currentActivity']) {
+      this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+      this.set$({
+        isHiddenStartFrom: false,
+      });
+    }
+
+    if (e.id === ActivityBlock.activities.CLOUD_IMG_EDIT) {
+      this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+    }
+  }
+
   initCallback() {
     super.initCallback();
 
@@ -75,43 +105,17 @@ export class FileUploaderMinimal extends SolutionBlock {
       });
     });
 
-    this.modalManager.subscribe(ModalEvents.OPEN, () => {
-      if (this.$['*currentActivity'] === ActivityBlock.activities.UPLOAD_LIST) {
-        this.set$({
-          classUploadList: ACTIVE_CLASS,
-          isHiddenStartFrom: true,
-        });
-      }
-
-      if (this.$['*uploadList']?.length <= 0) {
-        this.set$({
-          classStartFrom: ACTIVE_CLASS,
-        });
-      }
-    });
+    this.handleModalOpen = this._handleModalOpen.bind(this);
+    this.handleModalClose = this._handleModalClose.bind(this);
 
-    this.modalManager.subscribe(
-      ModalEvents.CLOSE,
-      (
-        /**
-         * @type {{
-         *   id: import('../../../abstract/ModalManager.js').ModalId;
-         *   modal: import('../../../abstract/ModalManager.js').ModalNode;
-         * }}
-         */ e,
-      ) => {
-        if (e.id === this.$['*currentActivity']) {
-          this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-          this.set$({
-            isHiddenStartFrom: false,
-          });
-        }
+    this.modalManager.subscribe(ModalEvents.OPEN, this.handleModalOpen);
+    this.modalManager.subscribe(ModalEvents.CLOSE, this.handleModalClose);
+  }
 
-        if (e.id === ActivityBlock.activities.CLOUD_IMG_EDIT) {
-          this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-        }
-      },
-    );
+  destroyCallback() {
+    super.destroyCallback();
+    this.modalManager.unsubscribe(ModalEvents.OPEN, this.handleModalOpen);
+    this.modalManager.unsubscribe(ModalEvents.CLOSE, this.handleModalClose);
   }
 }