@uploadcare/file-uploader 1.5.3-alpha.6 → 1.6.0

package/solutions/file-uploader/inline/FileUploaderInline.d.ts

@@ -5,8 +5,8 @@ export class FileUploaderInline extends SolutionBlock {
         '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': import("./index.js").OutputErrorCollection[];
-        '*collectionState': import("./index.js").OutputCollectionState | null;
+        '*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;

package/solutions/file-uploader/inline/FileUploaderInline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderInline.d.ts","sourceRoot":"","sources":["FileUploaderInline.js"],"names":[],"mappings":"AAKA;IAMI;;;;;;oCAUA,YACF;mCAIK,YAAU;6BAAmF,2BAGhF;;wCAOf,2CAA2B;;;;;;MAf3B;IAGH,gCAGC;IAED,6BAEC;CA0BF;;;;8BAtD6B,oCAAoC"}
+{"version":3,"file":"FileUploaderInline.d.ts","sourceRoot":"","sources":["FileUploaderInline.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;;;;;;;;;;MAUC;IAGH,gCAGC;IAED,6BAEC;CA0BF;;;;8BAtD6B,oCAAoC"}

package/solutions/file-uploader/inline/FileUploaderInline.js

@@ -1,5 +1,4 @@
 // @ts-check
-import { html } from '../../../symbiote.js';
 import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 
@@ -57,7 +56,8 @@ export class FileUploaderInline extends SolutionBlock {
   }
 }
 
-FileUploaderInline.template = html` <uc-start-from>
+FileUploaderInline.template = /* HTML */ `
+  <uc-start-from>
     <uc-drop-area with-icon clickable></uc-drop-area>
     <uc-source-list wrap></uc-source-list>
     <button
@@ -72,4 +72,5 @@ FileUploaderInline.template = html` <uc-start-from>
   <uc-camera-source></uc-camera-source>
   <uc-url-source></uc-url-source>
   <uc-external-source></uc-external-source>
-  <uc-cloud-image-editor-activity></uc-cloud-image-editor-activity>`;
+  <uc-cloud-image-editor-activity></uc-cloud-image-editor-activity>
+`;

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

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

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

@@ -1,4 +1,3 @@
-import { html } from '../../../symbiote.js';
 import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 
@@ -38,7 +37,7 @@ export class FileUploaderMinimal extends SolutionBlock {
   }
 }
 
-FileUploaderMinimal.template = html`
+FileUploaderMinimal.template = /* HTML */ `
   <uc-start-from>
     <uc-drop-area tabindex="0" clickable l10n="choose-file"></uc-drop-area>
     <uc-copyright></uc-copyright>

package/solutions/file-uploader/regular/FileUploaderRegular.d.ts

@@ -4,9 +4,9 @@ export class FileUploaderRegular extends SolutionBlock {
         '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': import("./index.js").OutputErrorCollection[];
-        '*collectionState': import("./index.js").OutputCollectionState | null;
-        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
+        '*collectionErrors': any[];
+        '*collectionState': import("./index.js").OutputCollectionState<import("./index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null; /** @private */
         '*uploadTrigger': Set<string>;
         '*secureUploadsManager': import("../../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
         '*currentActivity': null;

package/solutions/file-uploader/regular/FileUploaderRegular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderRegular.d.ts","sourceRoot":"","sources":["FileUploaderRegular.js"],"names":[],"mappings":"AAMA;IAMI;;;;;oCAWwC,YACvC;mCAKC,YAAI;6BAEoC,2BAC1B;;wCAIZ,2CAAuB;;;;;;MArB1B;IAoBG,eAAe;IACf,yBAAmC;CAK1C;;;;8BAvC6B,oCAAoC"}
+{"version":3,"file":"FileUploaderRegular.d.ts","sourceRoot":"","sources":["FileUploaderRegular.js"],"names":[],"mappings":"AAKA;IAMI;;;;;;;kFAuBI,eAAe;;;;;;;;MApBlB;IAoBG,eAAe;IACf,yBAAmC;CAK1C;;;;8BAvC6B,oCAAoC"}

package/solutions/file-uploader/regular/FileUploaderRegular.js

@@ -1,5 +1,4 @@
 // @ts-check
-import { html } from '../../../symbiote.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 import { asBoolean } from '../../../blocks/Config/normalizeConfigValue.js';
 import { EventType } from '../../../blocks/UploadCtxProvider/EventEmitter.js';
@@ -41,7 +40,7 @@ export class FileUploaderRegular extends SolutionBlock {
   }
 }
 
-FileUploaderRegular.template = html`
+FileUploaderRegular.template = /* HTML */ `
   <uc-simple-btn set="@hidden: isHidden"></uc-simple-btn>
 
   <uc-modal strokes block-body-scrolling>

package/types/exported.d.ts

@@ -21,6 +21,7 @@ export type SecureUploadsSignatureResolver = () => Promise<SecureUploadsSignatur
 export type IconHrefResolver = (iconName: string) => string;
 export type FileValidators = FuncFileValidator[];
 export type CollectionValidators = FuncCollectionValidator[];
+export type SourceTypes = import('../blocks/utils/UploadSource').SourceTypes
 
 export type ConfigType = {
   pubkey: string;
@@ -168,6 +169,7 @@ export type OutputFileEntry<TStatus extends OutputFileStatus = OutputFileStatus>
   externalUrl: string | null;
   uploadProgress: number;
   fullPath: string | null;
+  source: SourceTypes | null;
 } & (
     | {
       status: 'success';

package/types/jsx.d.ts

@@ -8,15 +8,9 @@ type FileUploaderRegular = import('../index.js').FileUploaderRegular;
 type FileUploaderMinimal = import('../index.js').FileUploaderMinimal;
 type FormInput = import('../index.js').FormInput;
 type CloudImageEditorBlock = import('../index.js').CloudImageEditorBlock;
-type CtxAttributes =
-  | {
-      ctx: string;
-      'ctx-name'?: never;
-    }
-  | {
-      ctx?: never;
-      'ctx-name': string;
-    };
+type CtxAttributes = {
+  'ctx-name': string;
+};
 type CommonHtmlAttributes<T> = Partial<
   Pick<React.HTMLAttributes<T>, 'id' | 'children' | 'hidden'> & { class: React.HTMLAttributes<T>['className'] }
 >;

package/utils/getPluralForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getPluralForm.d.ts","sourceRoot":"","sources":["getPluralForm.js"],"names":[],"mappings":"AASO,sCAJI,MAAM,SACN,MAAM,GACJ,UAAU,CAKtB;yBAVa,IAAI,CAAC,cAAc"}
+{"version":3,"file":"getPluralForm.d.ts","sourceRoot":"","sources":["getPluralForm.js"],"names":[],"mappings":"AASO,sCAJI,MAAM,SACN,MAAM,GACJ,UAAU,CAKtB;yBAVa,KAAK,cAAc"}

package/utils/isSecureTokenExpired.d.ts

@@ -1,4 +1,4 @@
-export function isSecureTokenExpired(secureToken: import("../types").SecureUploadsSignatureAndExpire, { threshold }: {
+export function isSecureTokenExpired(secureToken: import('../types').SecureUploadsSignatureAndExpire, { threshold }: {
     threshold?: number;
 }): boolean;
 //# sourceMappingURL=isSecureTokenExpired.d.ts.map

package/utils/memoize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"memoize.d.ts","sourceRoot":"","sources":["memoize.js"],"names":[],"mappings":"AASO,wBANc,KAAK,SAAZ,GAAG,EAAG,EACD,OAAO,kBACiB,CAAC,SAA/B,CAAE,GAAG,IAAI,EAAE,KAAK,KAAK,OAAQ,MAC/B,CAAC,GACC,CAAC,CAeb"}
+{"version":3,"file":"memoize.d.ts","sourceRoot":"","sources":["memoize.js"],"names":[],"mappings":"AASO,uHAaN"}

package/utils/mixinClass.d.ts

@@ -4,7 +4,5 @@ export type GConstructor<T> = new (...args: any[]) => T;
  * are some dynamic generated properties or native overrides in the class. We're use it to define dynamic access
  * properties and events to subscribe to.
  */
-export type MixinClass<Base extends GConstructor<HTMLElement>, InstanceProperties extends Record<string, any> = {}> = {
-    new (...args: ConstructorParameters<Base>): InstanceProperties & InstanceType<Base>;
-} & Omit<Base, "new">;
+export type MixinClass<Base extends GConstructor<HTMLElement>, InstanceProperties extends Record<string, any> = {}> = (new (...args: ConstructorParameters<Base>) => InstanceProperties & InstanceType<Base>) & Omit<Base, "new">;
 //# sourceMappingURL=mixinClass.d.ts.map

package/utils/mixinClass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mixinClass.d.ts","sourceRoot":"","sources":["mixinClass.js"],"names":[],"mappings":"yBACa,CAAC,IACD,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC;;;;;;uBAQG,IAAI,SAA/B,YAAY,CAAC,WAAW,CAAE,EACJ,kBAAkB,SAAxC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAE,SACrB;IACZ,KAAS,GAAG,IAAI,EAAE,qBAAqB,CAAC,IAAI,CAAC,GAAG,kBAAkB,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;CACrF,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC"}
+{"version":3,"file":"mixinClass.d.ts","sourceRoot":"","sources":["mixinClass.js"],"names":[],"mappings":"4CAE2B,GAAG,EAAE,KAAK,CAAC;;;;;;qIAWnB,sBAAsB,IAAI,CAAC,KAAG,kBAAkB,GAAG,aAAa,IAAI,CAAC"}

package/utils/prettyBytes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prettyBytes.d.ts","sourceRoot":"","sources":["prettyBytes.js"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AAiBI,mCAJI,MAAM,SACN,CAAC,OAAO,YAAY,EAAE,MAAM,OAAO,YAAY,CAAC,GAC9C,MAAM,CAmClB"}
+{"version":3,"file":"prettyBytes.d.ts","sourceRoot":"","sources":["prettyBytes.js"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AAiBI,mCAJI,MAAM,SACN,CAAC,mBAAmB,CAAC,CAAC,MAAM,mBAAmB,CAAC,GAC9C,MAAM,CAmClB"}

package/utils/template-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-utils.d.ts","sourceRoot":"","sources":["template-utils.js"],"names":[],"mappings":"AAOA;;;;;GAKG;AAEH;;;;;GAKG;AACH,yHAQC;AAED;;;GAGG;AACH,oDAFa;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,EAAE,CAiB5E;;;;;;;;;;;;;;;wBAjDa;IAAE,CAAC,GAAG,QAAQ,GAAG,4BAA4B,SAAS,CAAA;CAAE"}
+{"version":3,"file":"template-utils.d.ts","sourceRoot":"","sources":["template-utils.js"],"names":[],"mappings":"AAOA;;;;;GAKG;AAEH;;;;;GAKG;AACH,yHAQC;AAED;;;GAGG;AACH,oDAFa;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,EAAE,CAiB5E"}

package/utils/toKebabCase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toKebabCase.d.ts","sourceRoot":"","sources":["toKebabCase.js"],"names":[],"mappings":"AAUO,4BAJe,CAAC,SAAV,MAAQ,OACV,CAAC,GACC,SAAS,CAAC,CAAC,CAAC,CAMX;sBAbQ,CAAC,SAAV,MAAQ,IACR,CAAC,SAAS,GAAG,MAAM,IAAI,IAAI,MAAM,IAAI,EAAE,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC"}
+{"version":3,"file":"toKebabCase.d.ts","sourceRoot":"","sources":["toKebabCase.js"],"names":[],"mappings":"AAUO,oEAIO"}

package/utils/uniqueArray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uniqueArray.d.ts","sourceRoot":"","sources":["uniqueArray.js"],"names":[],"mappings":"AAKO,4BAJM,CAAC,OACH,CAAC,EAAE,GACD,CAAC,EAAE,CAIf"}
+{"version":3,"file":"uniqueArray.d.ts","sourceRoot":"","sources":["uniqueArray.js"],"names":[],"mappings":"AAKO,8CAEN"}

package/utils/validators/collection/validateCollectionUploadError.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncCollectionValidator} */
-export const validateCollectionUploadError: import("../../../abstract/ValidationManager.js").FuncCollectionValidator;
+export const validateCollectionUploadError: import('../../../abstract/ValidationManager.js').FuncCollectionValidator;
 //# sourceMappingURL=validateCollectionUploadError.d.ts.map

package/utils/validators/collection/validateMultiple.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncCollectionValidator} */
-export const validateMultiple: import("../../../abstract/ValidationManager.js").FuncCollectionValidator;
+export const validateMultiple: import('../../../abstract/ValidationManager.js').FuncCollectionValidator;
 //# sourceMappingURL=validateMultiple.d.ts.map

package/utils/validators/file/validateFileType.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateFileType: import("../../../abstract/ValidationManager.js").FuncFileValidator;
+export const validateFileType: import('../../../abstract/ValidationManager.js').FuncFileValidator;
 //# sourceMappingURL=validateFileType.d.ts.map

package/utils/validators/file/validateIsImage.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateIsImage: import("../../../abstract/ValidationManager.js").FuncFileValidator;
+export const validateIsImage: import('../../../abstract/ValidationManager.js').FuncFileValidator;
 //# sourceMappingURL=validateIsImage.d.ts.map

package/utils/validators/file/validateMaxSizeLimit.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateMaxSizeLimit: import("../../../abstract/ValidationManager.js").FuncFileValidator;
+export const validateMaxSizeLimit: import('../../../abstract/ValidationManager.js').FuncFileValidator;
 //# sourceMappingURL=validateMaxSizeLimit.d.ts.map

package/utils/validators/file/validateUploadError.d.ts

@@ -1,3 +1,3 @@
 /** @type {import('../../../abstract/ValidationManager.js').FuncFileValidator} */
-export const validateUploadError: import("../../../abstract/ValidationManager.js").FuncFileValidator;
+export const validateUploadError: import('../../../abstract/ValidationManager.js').FuncFileValidator;
 //# sourceMappingURL=validateUploadError.d.ts.map

package/utils/waitForAttribute.d.ts

@@ -1,14 +1,8 @@
-export function waitForAttribute<T extends string>({ element, attribute, timeout }: {
+export function waitForAttribute({ element, attribute, onSuccess, onTimeout, timeout }: {
     element: HTMLElement;
-    attribute: T;
-    timeout?: number;
-}): Promise<ReturnType<T>>;
-export type ReturnType<T extends string> = {
-    success: true;
-    attribute: T;
-    value: string;
-} | {
-    success: false;
-    attribute: T;
-};
+    attribute: string;
+    onSuccess: (value: string) => void;
+    onTimeout: () => void;
+    timeout?: number | undefined;
+}): void;
 //# sourceMappingURL=waitForAttribute.d.ts.map

package/utils/waitForAttribute.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"waitForAttribute.d.ts","sourceRoot":"","sources":["waitForAttribute.js"],"names":[],"mappings":"AA0BO,iCARe,CAAC,SAAV,MAAQ,mCACV;IACV,OAAW,EAAE,WAAW,CAAC;IACzB,SAAa,EAAE,CAAC,CAAC;IACjB,OAAW,CAAC,EAAE,MAAM,CAAC;CAClB,GACS,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAgDlC;uBAnEqB,CAAC,SAAV,MAAQ,IACR;IACZ,OAAe,EAAE,IAAI,CAAC;IACtB,SAAiB,EAAE,CAAC,CAAC;IACrB,KAAa,EAAE,MAAM,CAAC;CACf,GACD;IACN,OAAe,EAAE,KAAK,CAAC;IACvB,SAAiB,EAAE,CAAC,CAAC;CACd"}
+{"version":3,"file":"waitForAttribute.d.ts","sourceRoot":"","sources":["waitForAttribute.js"],"names":[],"mappings":"AAWO;aAPO,WAAW;eACT,MAAM;uBACE,MAAM,KAAK,IAAI;eACvB,MAAM,IAAI;;SAmCzB"}

package/utils/waitForAttribute.js

@@ -1,40 +1,19 @@
 // @ts-check
 
-import { withResolvers } from './withResolvers.js';
-
-/**
- * @template {string} T
- * @typedef {{
- *       success: true;
- *       attribute: T;
- *       value: string;
- *     }
- *   | {
- *       success: false;
- *       attribute: T;
- *     }} ReturnType
- */
-
 /**
- * @template {string} T
  * @param {{
  *   element: HTMLElement;
- *   attribute: T;
+ *   attribute: string;
+ *   onSuccess: (value: string) => void;
+ *   onTimeout: () => void;
  *   timeout?: number;
  * }} options
- * @returns {Promise<ReturnType<T>>}
  */
-export const waitForAttribute = async ({ element, attribute, timeout = 300 }) => {
-  const { promise, resolve } = /** @type {typeof withResolvers<ReturnType<T>>} */ (withResolvers)();
-
+export const waitForAttribute = ({ element, attribute, onSuccess, onTimeout, timeout = 300 }) => {
   const currentAttrValue = element.getAttribute(attribute);
   if (currentAttrValue !== null) {
-    resolve({
-      success: true,
-      value: currentAttrValue,
-      attribute,
-    });
-    return promise;
+    onSuccess(currentAttrValue);
+    return;
   }
 
   const observer = new MutationObserver((mutations) => {
@@ -49,10 +28,7 @@ export const waitForAttribute = async ({ element, attribute, timeout = 300 }) =>
 
   const timeoutId = setTimeout(() => {
     observer.disconnect();
-    resolve({
-      success: false,
-      attribute,
-    });
+    onTimeout();
   }, timeout);
 
   /** @param {MutationRecord} mutation */
@@ -61,13 +37,7 @@ export const waitForAttribute = async ({ element, attribute, timeout = 300 }) =>
     if (mutation.type === 'attributes' && mutation.attributeName === attribute && attrValue !== null) {
       clearTimeout(timeoutId);
       observer.disconnect();
-      resolve({
-        success: true,
-        value: attrValue,
-        attribute,
-      });
+      onSuccess(attrValue);
     }
   };
-
-  return promise;
 };

package/utils/waitForAttribute.test.js

@@ -1,41 +1,78 @@
-// @ts-check
 import { expect } from '@esm-bundle/chai';
+import { spy } from 'sinon';
 import { delay } from './delay';
 import { waitForAttribute } from './waitForAttribute';
 
 const TEST_ATTRIBUTE = 'test-attribute';
 
 describe('waitForAttribute', () => {
-  it('should resolve success false when timeout is over', async () => {
+  it('should call onTimeout callback when timeout is over', async () => {
     const element = document.createElement('div');
-    const promise = waitForAttribute({
+    const onSuccess = spy();
+    const onTimeout = spy();
+    waitForAttribute({
       element,
       attribute: TEST_ATTRIBUTE,
+      onSuccess,
+      onTimeout,
       timeout: 10,
     });
     await delay(100);
-    expect(await promise).to.be.eql({ success: false, attribute: TEST_ATTRIBUTE });
+    expect(onSuccess.called).to.be.false;
+    expect(onTimeout.calledOnce).to.be.true;
   });
-  it('should resolve success true when attribute is set async', async () => {
+  it('should call onSuccess callback when attribute is set async', async () => {
     const element = document.createElement('div');
-    const promise = waitForAttribute({
+    const onSuccess = spy();
+    const onTimeout = spy();
+    waitForAttribute({
       element,
       attribute: TEST_ATTRIBUTE,
+      onSuccess,
+      onTimeout,
       timeout: 10,
     });
     element.setAttribute(TEST_ATTRIBUTE, 'test');
     await delay(100);
-    expect(await promise).to.be.eql({ success: true, attribute: TEST_ATTRIBUTE, value: 'test' });
+    expect(onSuccess.calledOnce).to.be.true;
+    expect(onSuccess.getCall(0).args[0]).to.equal('test');
+    expect(onTimeout.called).to.be.false;
   });
-  it('should resolve success true when attribute is set sync', async () => {
+  it('should call onSuccess callback when attribute is set sync', async () => {
     const element = document.createElement('div');
     element.setAttribute(TEST_ATTRIBUTE, 'test');
-    const promise = waitForAttribute({
+    const onSuccess = spy();
+    const onTimeout = spy();
+    waitForAttribute({
       element,
       attribute: TEST_ATTRIBUTE,
+      onSuccess,
+      onTimeout,
       timeout: 10,
     });
     await delay(100);
-    expect(await promise).to.be.eql({ success: true, attribute: TEST_ATTRIBUTE, value: 'test' });
+    expect(onSuccess.calledOnce).to.be.true;
+    expect(onSuccess.getCall(0).args[0]).to.equal('test');
+    expect(onTimeout.called).to.be.false;
+  });
+
+  it('should not call onSuccess on the second attribute change', async () => {
+    const element = document.createElement('div');
+    element.setAttribute(TEST_ATTRIBUTE, 'test');
+    const onSuccess = spy();
+    const onTimeout = spy();
+    waitForAttribute({
+      element,
+      attribute: TEST_ATTRIBUTE,
+      onSuccess,
+      onTimeout,
+      timeout: 10,
+    });
+    await delay(100);
+    element.setAttribute(TEST_ATTRIBUTE, 'tes2');
+    await delay(100);
+    expect(onSuccess.calledOnce).to.be.true;
+    expect(onSuccess.getCall(0).args[0]).to.equal('test');
+    expect(onTimeout.called).to.be.false;
   });
 });