@uploadcare/file-uploader 1.3.0-alpha.4 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.3.0-alpha.4",
+  "version": "1.3.0",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",
@@ -50,7 +50,7 @@
     "./types/jsx": "./types/jsx.d.ts",
     "./locales/*": "./locales/*"
   },
-  "repository": "https://github.com/uploadcare/blocks/",
+  "repository": "https://github.com/uploadcare/file-uploader/",
   "files": [
     "{abstract,blocks,solutions,web,utils,types,locales}/**/*.{js,css,d.ts,d.ts.map}",
     "index.{js,d.ts,d.ts.map}",
@@ -99,12 +99,12 @@
     "@happy-dom/global-registrator": "^9.8.4",
     "@jam-do/jam-tools": "^0.0.4",
     "@total-typescript/ts-reset": "^0.5.1",
-    "@types/chai": "^4.3.17",
+    "@types/chai": "^4.3.4",
     "@types/mocha": "^10.0.1",
     "@types/node": "^18.15.11",
     "@types/react": "^18.2.34",
-    "@web/dev-server": "^0.4.6",
-    "@web/test-runner": "^0.18.2",
+    "@web/dev-server": "^0.1.38",
+    "@web/test-runner": "^0.15.3",
     "esbuild": "^0.19.9",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -128,17 +128,15 @@
     "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
     "stylelint-order": "^6.0.3",
     "svg-sprite": "^2.0.4",
-    "tsd": "^0.31.1",
-    "typescript": "^5.5.4"
+    "tsd": "^0.29.0",
+    "typescript": "^5.2.2"
   },
   "author": "Uploadcare Inc.",
   "license": "MIT",
   "dependencies": {
-    "@symbiotejs/symbiote": "^2.3.0",
-    "@types/sinon": "^17.0.3",
+    "@symbiotejs/symbiote": "^1.11.7",
     "@uploadcare/image-shrink": "^6.14.1",
     "@uploadcare/upload-client": "^6.14.1",
-    "D": "^1.0.0",
     "keyux": "^0.7.1"
   }
 }

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

@@ -6,8 +6,8 @@ export class FileUploaderInline extends SolutionBlock {
         '*uploadList': never[];
         '*focusedEntry': null;
         '*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;;;;;;;oCAaQ,YAAU;mCAEW,YAAS;6BAGxB,2BACG;;wCAMS,2CAA2B;;;;;;MAfpD;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 '@symbiotejs/symbiote';
 import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 
@@ -57,14 +56,15 @@ 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
       type="button"
       l10n="start-from-cancel"
       class="uc-cancel-btn uc-secondary-btn"
-      bind="onclick: cancel; @hidden: !couldCancel"
+      set="onclick: cancel; @hidden: !couldCancel"
     ></button>
     <uc-copyright></uc-copyright>
   </uc-start-from>
@@ -72,5 +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-progress-bar></uc-progress-bar>
-  <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 '@symbiotejs/symbiote';
 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

@@ -5,8 +5,8 @@ export class FileUploaderRegular extends SolutionBlock {
         '*uploadList': never[];
         '*focusedEntry': null;
         '*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/regular/FileUploaderRegular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderRegular.d.ts","sourceRoot":"","sources":["FileUploaderRegular.js"],"names":[],"mappings":"AAMA;IAMI;;;;;;oCAYgB,YAAU;mCAMxB,YAAO;6BAEK,2BAA2B;;wCAIf,2CAE5B;;;;;;MAvBG;IAoBG,eAAe;IACf,yBAAmC;CAK1C;;;;8BAvC6B,oCAAoC"}
+{"version":3,"file":"FileUploaderRegular.d.ts","sourceRoot":"","sources":["FileUploaderRegular.js"],"names":[],"mappings":"AAKA;IAMI;;;;;;;;;;;;;;;;MAGC;IAoBG,eAAe;IACf,yBAAmC;CAK1C;;;;8BAvC6B,oCAAoC"}

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

@@ -1,5 +1,4 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
 import { asBoolean } from '../../../blocks/Config/normalizeConfigValue.js';
 import { EventType } from '../../../blocks/UploadCtxProvider/EventEmitter.js';
@@ -41,14 +40,14 @@ export class FileUploaderRegular extends SolutionBlock {
   }
 }
 
-FileUploaderRegular.template = html`
-  <uc-simple-btn bind="@hidden: isHidden"></uc-simple-btn>
+FileUploaderRegular.template = /* HTML */ `
+  <uc-simple-btn set="@hidden: isHidden"></uc-simple-btn>
 
   <uc-modal strokes block-body-scrolling>
     <uc-start-from>
       <uc-drop-area with-icon clickable></uc-drop-area>
       <uc-source-list wrap></uc-source-list>
-      <button type="button" l10n="start-from-cancel" class="uc-secondary-btn" bind="onclick: *historyBack"></button>
+      <button type="button" l10n="start-from-cancel" class="uc-secondary-btn" set="onclick: *historyBack"></button>
       <uc-copyright></uc-copyright>
     </uc-start-from>
     <uc-upload-list></uc-upload-list>
@@ -57,8 +56,6 @@ FileUploaderRegular.template = html`
     <uc-external-source></uc-external-source>
     <uc-cloud-image-editor-activity></uc-cloud-image-editor-activity>
   </uc-modal>
-
-  <uc-progress-bar-common></uc-progress-bar-common>
 `;
 
 FileUploaderRegular.bindAttributes({

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;
   });
 });