@uploadcare/file-uploader 1.25.0-alpha.1 → 1.25.0-alpha.3

package/dist/env.js

@@ -25,7 +25,7 @@
  */
 
 // package.json
-var version = "1.25.0-alpha.1";
+var version = "1.25.0-alpha.3";
 
 // src/env.ts
 var PACKAGE_NAME = "blocks";

package/dist/index.css

@@ -255,7 +255,7 @@ uc-camera-source:not(#\#) .uc-camera-action {
 [uc-cloud-image-editor]:not(#\#):not(#\#):not(#\#) :is([can-handle-paste]:hover, [can-handle-paste]:focus) {
     --can-handle-paste: "true";
   }
-[uc-cloud-image-editor]:not(#\#):not(#\#):not(#\#) :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover) {
+[uc-cloud-image-editor]:not(#\#):not(#\#):not(#\#) :is([tabindex]:focus-visible, [tabindex]:hover, [with-effects]:focus-visible, [with-effects]:hover) {
     --filter-effect: var(--hover-filter) !important;
     --opacity-effect: var(--hover-opacity) !important;
     --color-effect: var(--hover-color-rgb) !important;

package/dist/index.d.ts

@@ -254,6 +254,9 @@ declare class CameraSource extends LitUploaderBlock {
     private _cameraDevices;
     private _audioDevices;
     private _permissionResponses;
+    private _permissionCleanupFns;
+    private readonly _handlePreviewPlay;
+    private readonly _handlePreviewPause;
     private timerRef;
     private lineRef;
     private videoRef;
@@ -306,6 +309,8 @@ declare class CameraSource extends LitUploaderBlock {
      * Previewing the video that was recorded on the camera
      */
     private _previewVideo;
+    private _attachPreviewListeners;
+    private _detachPreviewListeners;
     _retake: () => void;
     _accept: () => void;
     _handlePhoto: (status: CameraStatus) => void;
@@ -326,6 +331,7 @@ declare class CameraSource extends LitUploaderBlock {
     _capture: () => Promise<void>;
     _handlePermissionsChange: () => void;
     _permissionAccess: () => Promise<void>;
+    private _teardownPermissionListeners;
     _getPermission: () => void;
     _requestDeviceAccess: () => Promise<void>;
     _getDevices: () => Promise<void>;
@@ -1128,6 +1134,7 @@ declare class ExternalSource extends LitUploaderBlock {
     private mountIframe;
     private unmountIframe;
     private resetSelectionStatus;
+    disconnectedCallback(): void;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -1999,7 +2006,7 @@ declare class FileItemConfig extends LitUploaderBlock {
 
 declare class FileItem extends FileItemConfig {
     couldBeCtxOwner: boolean;
-    pauseRender: boolean;
+    private pauseRender;
     uid: string;
     protected itemName: string;
     protected errorText: string;

package/dist/index.js

@@ -1050,7 +1050,7 @@ var config = {
 var initialConfig = Object.freeze(config);
 
 // package.json
-var version = "1.25.0-alpha.1";
+var version = "1.25.0-alpha.3";
 
 // src/env.ts
 var PACKAGE_NAME = "blocks";
@@ -1531,6 +1531,7 @@ function SymbioteMixin(ctor) {
       this._ctxNameProvider = void 0;
       this._warnedAboutLocalState = false;
       this._pendingSharedAdds = /* @__PURE__ */ new Map();
+      this._symbioteSubscriptions = /* @__PURE__ */ new Set();
       // Symbiote-style initial values declaration
       this.init$ = {};
       this.ctxOwner = false;
@@ -1725,8 +1726,22 @@ function SymbioteMixin(ctor) {
     sub(key, callback, init = true) {
       const sharedKey = this._requireSharedKey(key);
       const subscription = this._requireSharedPubSub().sub(sharedKey, callback, init);
-      return subscription ? subscription.remove : () => {
+      if (!subscription || typeof subscription.remove !== "function") {
+        return () => {
+        };
+      }
+      const removeFn = subscription.remove.bind(subscription);
+      let removed = false;
+      const trackedRemove = () => {
+        if (removed) {
+          return;
+        }
+        removed = true;
+        removeFn();
+        this._symbioteSubscriptions.delete(trackedRemove);
       };
+      this._symbioteSubscriptions.add(trackedRemove);
+      return trackedRemove;
     }
     pub(key, value) {
       const sharedKey = this._requireSharedKey(key);
@@ -1827,11 +1842,21 @@ function SymbioteMixin(ctor) {
       }
     }
     disconnectedCallback() {
+      this._cleanupSymbioteSubscriptions();
       super.disconnectedCallback();
       if (this._symbioteFirstUpdated) {
         this._needsReconnectInit = true;
       }
     }
+    _cleanupSymbioteSubscriptions() {
+      if (this._symbioteSubscriptions.size === 0) {
+        return;
+      }
+      for (const unsubscribe of [...this._symbioteSubscriptions]) {
+        unsubscribe();
+      }
+      this._symbioteSubscriptions.clear();
+    }
     initCallback() {
     }
   }
@@ -4724,6 +4749,15 @@ var CameraSource = class extends LitUploaderBlock {
     this._cameraDevices = [];
     this._audioDevices = [];
     this._permissionResponses = {};
+    this._permissionCleanupFns = [];
+    this._handlePreviewPlay = () => {
+      this._startTimeline();
+      this.currentTimelineIcon = "pause";
+    };
+    this._handlePreviewPause = () => {
+      this.currentTimelineIcon = "play";
+      this._stopTimeline();
+    };
     this.timerRef = createRef();
     this.lineRef = createRef();
     this.videoRef = createRef();
@@ -4980,14 +5014,7 @@ var CameraSource = class extends LitUploaderBlock {
         videoElement.volume = 1;
         this.video = null;
         videoElement.src = videoURL;
-        videoElement.addEventListener("play", () => {
-          this._startTimeline();
-          this.currentTimelineIcon = "pause";
-        });
-        videoElement.addEventListener("pause", () => {
-          this.currentTimelineIcon = "play";
-          this._stopTimeline();
-        });
+        this._attachPreviewListeners(videoElement);
       } catch (error) {
         console.error("Failed to preview video", error);
         this.telemetryManager.sendEventError(error, "camera previewing. Failed to preview video");
@@ -5175,6 +5202,7 @@ var CameraSource = class extends LitUploaderBlock {
         }
         const tracks = this.video?.getTracks?.();
         tracks?.[0]?.stop();
+        this._detachPreviewListeners(this.videoRef.value);
         this.video = null;
         this._makeStreamInactive();
         this._stopTimer();
@@ -5223,14 +5251,22 @@ var CameraSource = class extends LitUploaderBlock {
     };
     this._permissionAccess = async () => {
       try {
+        this._teardownPermissionListeners();
         for (const permission of DEFAULT_PERMISSIONS) {
           const response = await navigator.permissions.query({
             name: permission
           });
           this._permissionResponses[permission] = response;
           response.addEventListener("change", this._handlePermissionsChange);
+          this._permissionCleanupFns.push(() => {
+            response.removeEventListener("change", this._handlePermissionsChange);
+          });
         }
+        this._unsubPermissions = () => {
+          this._teardownPermissionListeners();
+        };
       } catch (error) {
+        this._teardownPermissionListeners();
         console.log("Failed to use permissions API. Fallback to manual request mode.", error);
         this.telemetryManager.sendEventError(error, "camera permissions. Failed to use permissions API");
         this._capture();
@@ -5298,6 +5334,15 @@ var CameraSource = class extends LitUploaderBlock {
       }
     };
   }
+  _attachPreviewListeners(videoElement) {
+    this._detachPreviewListeners(videoElement);
+    videoElement.addEventListener("play", this._handlePreviewPlay);
+    videoElement.addEventListener("pause", this._handlePreviewPause);
+  }
+  _detachPreviewListeners(videoElement) {
+    videoElement?.removeEventListener("play", this._handlePreviewPlay);
+    videoElement?.removeEventListener("pause", this._handlePreviewPause);
+  }
   _shot() {
     this._setCameraState("shot");
     this._canvas = document.createElement("canvas");
@@ -5346,6 +5391,16 @@ var CameraSource = class extends LitUploaderBlock {
       (mode) => mode === CameraSourceTypes.PHOTO || mode === CameraSourceTypes.VIDEO
     );
   }
+  _teardownPermissionListeners() {
+    if (this._permissionCleanupFns.length === 0) {
+      return;
+    }
+    for (const cleanup of this._permissionCleanupFns) {
+      cleanup();
+    }
+    this._permissionCleanupFns = [];
+    this._unsubPermissions = null;
+  }
   initCallback() {
     super.initCallback();
     this.registerActivity(this.activityType, {
@@ -5370,10 +5425,9 @@ var CameraSource = class extends LitUploaderBlock {
     });
   }
   _destroy() {
-    for (const permission of DEFAULT_PERMISSIONS) {
-      this._permissionResponses[permission]?.removeEventListener("change", this._handlePermissionsChange);
-    }
+    this._teardownPermissionListeners();
     navigator.mediaDevices?.removeEventListener("devicechange", this._getDevices);
+    this._detachPreviewListeners(this.videoRef.value);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -10677,6 +10731,10 @@ var ExternalSource = class extends LitUploaderBlock {
     this.doneBtnTextClass = "uc-hidden";
     this._latestSelectionSummary = null;
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unmountIframe();
+  }
   render() {
     return html18`
       <uc-activity-header>
@@ -10819,13 +10877,13 @@ var FileItemConfig = class extends LitUploaderBlock {
 
 // src/blocks/FileItem/FileItem.ts
 var FileItemState = Object.freeze({
-  FINISHED: Symbol("FINISHED"),
-  FAILED: Symbol("FAILED"),
-  UPLOADING: Symbol("UPLOADING"),
-  VALIDATION: Symbol("VALIDATION"),
-  QUEUED_UPLOADING: Symbol("QUEUED-UPLOADING"),
-  QUEUED_VALIDATION: Symbol("QUEUED-VALIDATION"),
-  IDLE: Symbol("IDLE")
+  FINISHED: /* @__PURE__ */ Symbol("FINISHED"),
+  FAILED: /* @__PURE__ */ Symbol("FAILED"),
+  UPLOADING: /* @__PURE__ */ Symbol("UPLOADING"),
+  VALIDATION: /* @__PURE__ */ Symbol("VALIDATION"),
+  QUEUED_UPLOADING: /* @__PURE__ */ Symbol("QUEUED-UPLOADING"),
+  QUEUED_VALIDATION: /* @__PURE__ */ Symbol("QUEUED-VALIDATION"),
+  IDLE: /* @__PURE__ */ Symbol("IDLE")
 });
 var _FileItem = class _FileItem extends FileItemConfig {
   constructor() {
@@ -11200,6 +11258,9 @@ var _FileItem = class _FileItem extends FileItemConfig {
     `;
   }
 };
+__decorateClass([
+  state14()
+], _FileItem.prototype, "pauseRender", 2);
 __decorateClass([
   property12({ type: String, attribute: false })
 ], _FileItem.prototype, "uid", 2);
@@ -13055,6 +13116,9 @@ __decorateClass([
 __decorateClass([
   state22()
 ], UploadList.prototype, "hasFiles", 2);
+__decorateClass([
+  state22()
+], UploadList.prototype, "_latestSummary", 2);
 
 // src/blocks/UrlSource/UrlSource.ts
 import { html as html32 } from "lit";

package/dist/index.layered.css

@@ -245,7 +245,7 @@
   [uc-cloud-image-editor] :is([can-handle-paste]:hover, [can-handle-paste]:focus) {
     --can-handle-paste: "true";
   }
-  [uc-cloud-image-editor] :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover) {
+  [uc-cloud-image-editor] :is([tabindex]:focus-visible, [tabindex]:hover, [with-effects]:focus-visible, [with-effects]:hover) {
     --filter-effect: var(--hover-filter) !important;
     --opacity-effect: var(--hover-opacity) !important;
     --color-effect: var(--hover-color-rgb) !important;

package/dist/index.ssr.js

@@ -892,7 +892,7 @@ export const ModalEvents = {
 	DESTROY: "modal:destroy",
 };
 export const PACKAGE_NAME = `blocks`;
-export const PACKAGE_VERSION = `1.25.0-alpha.1`;
+export const PACKAGE_VERSION = `1.25.0-alpha.3`;
 export const PresenceToggle = class {
 	static elementProperties = {};
 	static styleAttrs = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.25.0-alpha.1",
+  "version": "1.25.0-alpha.3",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",
@@ -55,7 +55,6 @@
       "default": "./dist/index.layered.css"
     },
     "./abstract/loadFileUploaderFrom.js": "./dist/abstract/loadFileUploaderFrom.js",
-    "./lit": "./dist/lit.js",
     "./env": "./dist/env.js",
     "./web/*": "./web/*",
     "./types/jsx": "./types/jsx.d.ts",
@@ -111,43 +110,43 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
-    "@biomejs/biome": "2.3.6",
+    "@biomejs/biome": "2.3.8",
     "@biomejs/js-api": "^4.0.0",
-    "@biomejs/wasm-nodejs": "^2.3.6",
+    "@biomejs/wasm-nodejs": "^2.3.8",
     "@csstools/postcss-cascade-layers": "^5.0.2",
-    "@happy-dom/global-registrator": "^20.0.10",
-    "@size-limit/esbuild-why": "^11.2.0",
-    "@size-limit/preset-small-lib": "^11.2.0",
+    "@happy-dom/global-registrator": "^20.0.11",
+    "@size-limit/esbuild-why": "^12.0.0",
+    "@size-limit/preset-small-lib": "^12.0.0",
     "@total-typescript/ts-reset": "^0.6.1",
-    "@types/node": "^24",
+    "@types/node": "^22",
     "@types/react": "^18.0.0",
     "@types/svg-sprite": "^0.0.39",
-    "@vitest/browser": "^4.0.14",
-    "@vitest/browser-playwright": "^4.0.14",
-    "@vitest/coverage-v8": "^4.0.14",
-    "esbuild": "^0.25.12",
+    "@vitest/browser": "^4.0.15",
+    "@vitest/browser-playwright": "^4.0.15",
+    "@vitest/coverage-v8": "^4.0.15",
+    "esbuild": "^0.27.1",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.6",
+    "lint-staged": "^16.2.7",
     "node-watch": "^0.7.4",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.56.1",
+    "playwright": "^1.57.0",
     "postcss": "^8.5.6",
     "publint": "^0.3.15",
     "render-jsx": "^0.2.4",
-    "rimraf": "^6.1.0",
+    "rimraf": "^6.1.2",
     "shipjs": "^0.27.0",
-    "size-limit": "^11.2.0",
-    "stylelint": "^16.25.0",
+    "size-limit": "^12.0.0",
+    "stylelint": "^16.26.1",
     "stylelint-config-standard": "^39.0.1",
     "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
     "stylelint-order": "^7.0.0",
     "svg-sprite": "^2.0.4",
     "tsd": "^0.33.0",
-    "tsup": "^8.5.0",
-    "tsx": "^4.20.6",
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "npm:rolldown-vite@latest",
-    "vitest": "^4.0.14",
+    "vitest": "^4.0.15",
     "vitest-browser-lit": "^1.0.1"
   },
   "author": "Uploadcare Inc.",
@@ -159,7 +158,7 @@
     "@uploadcare/image-shrink": "^6.18.2",
     "@uploadcare/quality-insights": "^6.18.2",
     "@uploadcare/upload-client": "^6.18.2",
-    "keyux": "^0.7.1",
+    "keyux": "^0.11.3",
     "lit": "^3.3.1"
   },
   "size-limit": [

package/web/file-uploader.iife.min.d.ts

@@ -265,6 +265,9 @@ declare class CameraSource extends LitUploaderBlock {
     private _cameraDevices;
     private _audioDevices;
     private _permissionResponses;
+    private _permissionCleanupFns;
+    private readonly _handlePreviewPlay;
+    private readonly _handlePreviewPause;
     private timerRef;
     private lineRef;
     private videoRef;
@@ -317,6 +320,8 @@ declare class CameraSource extends LitUploaderBlock {
      * Previewing the video that was recorded on the camera
      */
     private _previewVideo;
+    private _attachPreviewListeners;
+    private _detachPreviewListeners;
     _retake: () => void;
     _accept: () => void;
     _handlePhoto: (status: CameraStatus) => void;
@@ -337,6 +342,7 @@ declare class CameraSource extends LitUploaderBlock {
     _capture: () => Promise<void>;
     _handlePermissionsChange: () => void;
     _permissionAccess: () => Promise<void>;
+    private _teardownPermissionListeners;
     _getPermission: () => void;
     _requestDeviceAccess: () => Promise<void>;
     _getDevices: () => Promise<void>;
@@ -1139,6 +1145,7 @@ declare class ExternalSource extends LitUploaderBlock {
     private mountIframe;
     private unmountIframe;
     private resetSelectionStatus;
+    disconnectedCallback(): void;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -2010,7 +2017,7 @@ declare class FileItemConfig extends LitUploaderBlock {
 
 declare class FileItem extends FileItemConfig {
     couldBeCtxOwner: boolean;
-    pauseRender: boolean;
+    private pauseRender;
     uid: string;
     protected itemName: string;
     protected errorText: string;