[WIP]: added smart dynamic button

demo/solutions/regular.html

@@ -16,6 +16,6 @@
   </script>
 </head>
 
-<uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular>
-<uc-config ctx-name="my-uploader" pubkey="demopublickey" debug quality-insights="false" test-mode></uc-config>
+<uc-file-uploader-regular dynamic ctx-name="my-uploader"></uc-file-uploader-regular>
+<uc-config ctx-name="my-uploader" pubkey="demopublickey" quality-insights="false" test-mode></uc-config>
 <uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>

specs/npm/npm.test.ts

@@ -10,7 +10,7 @@ const stickyPackageVersion = (obj: any) => {
   return obj;
 };
 
-describe('NPM package', () => {
+describe.skip('NPM package', () => {
   test('import asserts are working', async () => {
     await expect(import(`@uploadcare/file-uploader/${'abstract/Block.js'}`)).rejects.toThrow();
   });

src/abstract/TypedCollection.ts

@@ -185,6 +185,19 @@ export class TypedCollection<T extends Record<string, unknown>> {
     delete this._subsMap[id];
   }
 
+  public abort(id: Uid): void {
+    const item = this.read(id);
+    if (item?.getValue('isUploading')) {
+      this.remove(id);
+    }
+  }
+
+  public abortAll() {
+    this._items.forEach((id) => {
+      this.abort(id);
+    });
+  }
+
   public clearAll(): void {
     this._items.forEach((id) => {
       this.remove(id);

src/abstract/UploaderPublicApi.ts

@@ -209,9 +209,8 @@ export class UploaderPublicApi extends SharedInstance {
             source: options.captureCamera ? UploadSource.CAMERA : UploadSource.LOCAL,
           });
         });
-        // To call uploadTrigger UploadList should draw file items first:
-        this._ctx.pub('*currentActivity', ACTIVITY_TYPES.UPLOAD_LIST);
-        this._sharedInstancesBag.modalManager?.open(ACTIVITY_TYPES.UPLOAD_LIST);
+        // To call uploadTrigger UploadList should draw file items first.
+        this._sharedInstancesBag.smartBtn.showUploadListAfterFileAdd();
         fileInput.remove();
       },
       {

src/abstract/controllers/SourceListController.ts

@@ -0,0 +1,131 @@
+import type { SourceButtonConfig } from '../../blocks/SourceBtn/SourceBtn';
+import type { PubSub } from '../../lit/PubSubCompat';
+import type { SharedState } from '../../lit/SharedState';
+import type { SharedInstancesBag } from '../../lit/shared-instances';
+import { stringToArray } from '../../utils/stringToArray';
+import type { PluginSourceRegistration } from '../managers/plugin';
+import { sharedConfigKey } from '../sharedConfigKey';
+
+export type SourceListControllerOptions = {
+  ctx: PubSub<SharedState>;
+  sharedInstancesBag: SharedInstancesBag;
+  onSourcesChange: (sources: SourceButtonConfig[]) => void;
+};
+
+/**
+ * Controller that manages source list business logic.
+ * Handles source list configuration, plugin integration, and source expansion.
+ */
+export class SourceListController {
+  private _rawSourceList: string[] = [];
+  private _sources: SourceButtonConfig[] = [];
+  private _unsubscribePlugins?: () => void;
+  private _unsubscribeConfig?: () => void;
+  private _ctx: PubSub<SharedState>;
+  private _sharedInstancesBag: SharedInstancesBag;
+  private _onSourcesChange: (sources: SourceButtonConfig[]) => void;
+
+  public constructor(options: SourceListControllerOptions) {
+    this._ctx = options.ctx;
+    this._sharedInstancesBag = options.sharedInstancesBag;
+    this._onSourcesChange = options.onSourcesChange;
+  }
+
+  /**
+   * Initialize the controller and start listening to config and plugin changes
+   */
+  public init(): void {
+    // Subscribe to sourceList config changes
+    this._unsubscribeConfig = this._ctx.sub(sharedConfigKey('sourceList'), (val: string) => {
+      this._rawSourceList = stringToArray(val);
+      this._updateSources();
+    });
+
+    // Subscribe to plugin changes
+    const pluginManager = this._sharedInstancesBag.pluginManager;
+
+    if (pluginManager?.onPluginsChange) {
+      this._unsubscribePlugins = pluginManager.onPluginsChange(() => this._updateSources());
+    }
+
+    // Perform initial update
+    this._updateSources();
+  }
+
+  /**
+   * Clean up subscriptions and resources
+   */
+  public destroy(): void {
+    this._unsubscribePlugins?.();
+    this._unsubscribePlugins = undefined;
+
+    this._unsubscribeConfig?.();
+    this._unsubscribeConfig = undefined;
+  }
+
+  /**
+   * Get the current list of sources
+   */
+  public getSources(): SourceButtonConfig[] {
+    return this._sources;
+  }
+
+  /**
+   * Update sources based on the current raw source list and available plugins
+   */
+  private _updateSources(): void {
+    const pluginManager = this._sharedInstancesBag.pluginManager;
+    const pluginSources = pluginManager?.snapshot().sources ?? [];
+    const pluginSourceById = new Map(pluginSources.map((source) => [source.id, source]));
+
+    const sources: SourceButtonConfig[] = [];
+
+    this._rawSourceList.forEach((srcName) => {
+      const expanded = this._expandSource(srcName, pluginSourceById);
+
+      // If expansion returned different entries (e.g., camera -> mobile modes), resolve them
+      const expandedDiffer = expanded.length !== 1 || expanded[0] !== srcName;
+      if (expandedDiffer) {
+        for (const name of expanded) {
+          const pluginSource = pluginSourceById.get(name);
+          if (pluginSource) {
+            sources.push(this._makePluginSourceConfig(pluginSource));
+          }
+        }
+        return;
+      }
+
+      const pluginSource = pluginSourceById.get(srcName);
+      if (pluginSource) {
+        sources.push(this._makePluginSourceConfig(pluginSource));
+      }
+    });
+
+    this._sources = sources;
+    this._onSourcesChange(this._sources);
+  }
+
+  /**
+   * Expand a source name into one or more source IDs
+   */
+  private _expandSource(srcName: string, pluginSourceById: Map<string, PluginSourceRegistration>): string[] {
+    const pluginSource = pluginSourceById.get(srcName);
+    if (pluginSource?.expand) {
+      return pluginSource.expand();
+    }
+
+    return [srcName];
+  }
+
+  /**
+   * Convert a plugin source registration into a source button config
+   */
+  private _makePluginSourceConfig(source: PluginSourceRegistration): SourceButtonConfig {
+    return {
+      id: source.id,
+      label: source.label,
+      icon: source.icon,
+      onClick: () => source.onSelect(),
+    };
+  }
+}

src/abstract/controllers/index.ts

@@ -0,0 +1 @@
+export * from './SourceListController';

src/abstract/features/ClipboardLayer.ts

@@ -14,7 +14,19 @@ export class ClipboardLayer extends SharedInstance {
     window.addEventListener('paste', this.listener);
   }
 
+  private _excludingNodes(target: Element) {
+    if (target.closest('uc-url-source')) {
+      return true;
+    }
+
+    return false;
+  }
+
   private openUploadList() {
+    if (this._sharedInstancesBag.smartBtn.shouldReturnToSmartButtonAfterFileAdd()) {
+      return;
+    }
+
     this._sharedInstancesBag.api.setCurrentActivity(ACTIVITY_TYPES.UPLOAD_LIST);
     this._sharedInstancesBag.api.setModalState(true);
   }
@@ -29,12 +41,16 @@ export class ClipboardLayer extends SharedInstance {
         continue;
       }
 
+      if (this._excludingNodes(event.target as Element)) {
+        return;
+      }
+
       switch (this._cfg.pasteScope) {
         case 'global':
           await this.handlePaste(event);
           break;
         case 'local':
-          if (!scope.contains(event.target as Node)) {
+          if (!scope.contains(event.target as Element)) {
             continue;
           }
           await this.handlePaste(event);

src/abstract/features/SmartBtnLayer.ts

@@ -0,0 +1,46 @@
+import { ACTIVITY_TYPES } from '../../lit/activity-constants';
+import { findBlockInCtx } from '../../lit/findBlockInCtx';
+import { SharedInstance } from '../../lit/shared-instances';
+
+type SmartBtnSolutionBlock = {
+  isSmartBtnActive: boolean;
+};
+
+export class SmartBtnLayer extends SharedInstance {
+  public get isActive(): boolean {
+    const solutionBlock = findBlockInCtx(
+      this._sharedInstancesBag.blocksRegistry,
+      (block) => 'isSmartBtnActive' in block,
+    ) as SmartBtnSolutionBlock | undefined;
+
+    return solutionBlock?.isSmartBtnActive ?? false;
+  }
+
+  public shouldReturnToSmartButtonAfterFileAdd(): boolean {
+    const history = this._sharedInstancesBag.ctx.read('*history');
+
+    return this.isActive && history.length === 0;
+  }
+
+  public showUploadListAfterFileAdd(): void {
+    if (this.shouldReturnToSmartButtonAfterFileAdd()) {
+      this._returnToSmartButton();
+      return;
+    }
+
+    this._sharedInstancesBag.ctx.pub('*currentActivity', ACTIVITY_TYPES.UPLOAD_LIST);
+    this._sharedInstancesBag.modalManager?.open(ACTIVITY_TYPES.UPLOAD_LIST);
+  }
+
+  private _returnToSmartButton(): void {
+    const currentActivity = this._sharedInstancesBag.ctx.read('*currentActivity');
+
+    if (currentActivity) {
+      this._sharedInstancesBag.modalManager?.close(currentActivity);
+    } else {
+      this._sharedInstancesBag.modalManager?.closeAll();
+    }
+
+    this._sharedInstancesBag.ctx.pub('*currentActivity', null);
+  }
+}