@uploadcare/file-uploader 1.23.0 → 1.24.0-alpha.0

package/blocks/DropArea/DropArea.d.ts

@@ -1,49 +0,0 @@
-export class DropArea extends UploaderBlock {
-    init$: {
-        state: number;
-        withIcon: boolean;
-        isClickable: boolean;
-        isFullscreen: boolean;
-        isEnabled: boolean;
-        isVisible: boolean;
-        isInitFlow: boolean;
-        text: string;
-        "uc-drop-area/registry": null;
-        '*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;
-        '*uploadTrigger': Set<string>;
-        '*secureUploadsManager': import("../../abstract/managers/SecureUploadsManager.js").SecureUploadsManager | null;
-        '*currentActivity': null;
-        '*currentActivityParams': {};
-        '*history': never[];
-        '*historyBack': null;
-        '*closeModal': () => void;
-    };
-    isActive(): boolean;
-    /** @private */
-    private _destroyDropzone;
-    _destroyContentWrapperDropzone: (() => void) | undefined;
-    /**
-     * @private
-     * @param {KeyboardEvent | Event} event
-     */
-    private _onAreaClicked;
-    /**
-     * Ignore drop events if there are other visible drop areas on the page
-     *
-     * @private
-     * @returns {Boolean}
-     */
-    private _shouldIgnore;
-    /** @private */
-    private _couldHandleFiles;
-}
-export namespace DropArea {
-    let template: string;
-}
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-//# sourceMappingURL=DropArea.d.ts.map

package/blocks/DropArea/DropArea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropArea.d.ts","sourceRoot":"","sources":["DropArea.js"],"names":[],"mappings":"AAaA;IAKI;;;;;;;;;;;;;;;;;;;;;;;MAWC;IAGH,oBAgBC;IAsDC,eAAe;IACf,yBA2BE;IAIA,yDAWE;IA6BF;;;OAGG;IACH,uBAmBC;IAOL;;;;;OAKG;IACH,sBAeC;IAED,eAAe;IACf,0BAcC;CAqBF;;;;8BAnQ6B,iCAAiC"}

package/blocks/DropArea/DropArea.js

@@ -1,292 +0,0 @@
-// @ts-check
-
-import { Data } from '@symbiotejs/symbiote';
-import { ActivityBlock } from '../../abstract/ActivityBlock.js';
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-import { stringToArray } from '../../utils/stringToArray.js';
-import { asBoolean } from '../Config/validatorsType.js';
-import { UploadSource } from '../utils/UploadSource.js';
-import { DropzoneState, addDropzone } from './addDropzone.js';
-
-const GLOBAL_CTX_NAME = 'uc-drop-area';
-const REGISTRY_KEY = `${GLOBAL_CTX_NAME}/registry`;
-
-export class DropArea extends UploaderBlock {
-  static styleAttrs = [...super.styleAttrs, 'uc-drop-area'];
-  constructor() {
-    super();
-
-    this.init$ = {
-      ...this.init$,
-      state: DropzoneState.INACTIVE,
-      withIcon: false,
-      isClickable: false,
-      isFullscreen: false,
-      isEnabled: true,
-      isVisible: true,
-      isInitFlow: false,
-      text: '',
-      [REGISTRY_KEY]: null,
-    };
-  }
-
-  isActive() {
-    if (!this.$.isEnabled) {
-      return false;
-    }
-    const bounds = this.getBoundingClientRect();
-    const hasSize = bounds.width > 0 && bounds.height > 0;
-    const isInViewport =
-      bounds.top >= 0 &&
-      bounds.left >= 0 &&
-      bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-      bounds.right <= (window.innerWidth || document.documentElement.clientWidth);
-
-    const style = window.getComputedStyle(this);
-    const visible = style.visibility !== 'hidden' && style.display !== 'none';
-
-    return hasSize && visible && isInViewport;
-  }
-
-  initCallback() {
-    super.initCallback();
-
-    this.bindL10n('text', () => this.l10n('drop-files-here'));
-
-    if (!this.$[REGISTRY_KEY]) {
-      this.$[REGISTRY_KEY] = new Set();
-    }
-    this.$[REGISTRY_KEY].add(this);
-
-    this.defineAccessor(
-      'disabled',
-      /** @param {unknown} value */ (value) => {
-        this.set$({ isEnabled: !asBoolean(value) });
-      },
-    );
-    this.defineAccessor(
-      'clickable',
-      /** @param {unknown} value */ (value) => {
-        this.set$({ isClickable: asBoolean(value) });
-      },
-    );
-    this.defineAccessor(
-      'initflow',
-      /** @param {unknown} value */ (value) => {
-        this.set$({ isInitFlow: asBoolean(value) });
-      },
-    );
-    this.defineAccessor(
-      'with-icon',
-      /** @param {unknown} value */ (value) => {
-        this.set$({ withIcon: asBoolean(value) });
-      },
-    );
-    this.defineAccessor(
-      'fullscreen',
-      /** @param {unknown} value */ (value) => {
-        this.set$({ isFullscreen: asBoolean(value) });
-      },
-    );
-
-    this.defineAccessor(
-      'text',
-      /** @param {unknown} value */ (value) => {
-        if (typeof value === 'string') {
-          this.bindL10n('text', () => this.l10n(value) || value);
-        } else {
-          this.bindL10n('text', () => this.l10n('drop-files-here'));
-        }
-      },
-    );
-
-    /** @private */
-    this._destroyDropzone = addDropzone({
-      element: this,
-      shouldIgnore: () => this._shouldIgnore(),
-      /** @param {DropzoneState} state */
-      onChange: (state) => {
-        this.$.state = state;
-      },
-      /** @param {import('./getDropItems.js').DropItem[]} items */
-      onItems: (items) => {
-        if (!items.length) {
-          return;
-        }
-
-        items.forEach((/** @type {import('./getDropItems.js').DropItem} */ item) => {
-          if (item.type === 'url') {
-            this.api.addFileFromUrl(item.url, { source: UploadSource.DROP_AREA });
-          } else if (item.type === 'file') {
-            this.api.addFileFromObject(item.file, { source: UploadSource.DROP_AREA, fullPath: item.fullPath });
-          }
-        });
-        if (this.uploadCollection.size) {
-          this.modalManager.open(ActivityBlock.activities.UPLOAD_LIST);
-          this.set$({
-            '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
-          });
-        }
-      },
-    });
-
-    let contentWrapperEl = this.ref['content-wrapper'];
-    if (contentWrapperEl) {
-      this._destroyContentWrapperDropzone = addDropzone({
-        element: contentWrapperEl,
-        /** @param {DropzoneState} state */
-        onChange: (state) => {
-          const stateText = Object.entries(DropzoneState)
-            .find(([, value]) => value === state)?.[0]
-            .toLowerCase();
-          stateText && contentWrapperEl.setAttribute('drag-state', stateText);
-        },
-        onItems: () => {},
-        shouldIgnore: () => this._shouldIgnore(),
-      });
-    }
-
-    this.sub('state', (state) => {
-      const stateText = Object.entries(DropzoneState)
-        .find(([, value]) => value === state)?.[0]
-        .toLowerCase();
-      if (stateText) {
-        this.setAttribute('drag-state', stateText);
-      }
-    });
-
-    this.subConfigValue('sourceList', (value) => {
-      const list = stringToArray(value);
-      // Enable drop area if local files are allowed
-      this.$.isEnabled = list.includes(UploadSource.LOCAL);
-      // Show drop area if it's enabled or default slot is overrided
-      this.$.isVisible = this.$.isEnabled || !this.querySelector('[data-default-slot]');
-    });
-
-    this.sub('isVisible', (value) => {
-      this.toggleAttribute('hidden', !value);
-    });
-
-    this.sub('isClickable', (value) => {
-      this.toggleAttribute('clickable', value);
-    });
-
-    if (this.$.isClickable) {
-      /**
-       * @private
-       * @param {KeyboardEvent | Event} event
-       */
-      this._onAreaClicked = (event) => {
-        if (event.type === 'keydown') {
-          // @ts-ignore
-          if (event.code === 'Space' || event.code === 'Enter') {
-            if (this.$.isInitFlow) {
-              this.api.initFlow();
-              return;
-            }
-
-            this.api.openSystemDialog();
-          }
-        } else if (event.type === 'click') {
-          if (this.$.isInitFlow) {
-            this.api.initFlow();
-            return;
-          }
-
-          this.api.openSystemDialog();
-        }
-      };
-
-      this.addEventListener('keydown', this._onAreaClicked);
-      this.addEventListener('click', this._onAreaClicked);
-    }
-  }
-
-  /**
-   * Ignore drop events if there are other visible drop areas on the page
-   *
-   * @private
-   * @returns {Boolean}
-   */
-  _shouldIgnore() {
-    if (!this.$.isEnabled) {
-      return true;
-    }
-    if (!this._couldHandleFiles()) {
-      return true;
-    }
-    if (!this.$.isFullscreen) {
-      return false;
-    }
-    const otherTargets = [...this.$[REGISTRY_KEY]].filter((el) => el !== this);
-    const activeTargets = otherTargets.filter((/** @type {typeof this} */ el) => {
-      return el.isActive();
-    });
-    return activeTargets.length > 0;
-  }
-
-  /** @private */
-  _couldHandleFiles() {
-    let isMultiple = this.cfg.multiple;
-    let multipleMax = this.cfg.multipleMax;
-    let currentFilesCount = this.uploadCollection.size;
-
-    if (isMultiple && multipleMax && currentFilesCount >= multipleMax) {
-      return false;
-    }
-
-    if (!isMultiple && currentFilesCount > 0) {
-      return false;
-    }
-
-    return true;
-  }
-
-  destroyCallback() {
-    super.destroyCallback();
-
-    /** @type {Set<DropArea>} */
-    const registry = this.$[REGISTRY_KEY];
-    if (registry) {
-      registry.delete(this);
-      if (registry.size === 0) {
-        Data.deleteCtx(GLOBAL_CTX_NAME);
-      }
-    }
-
-    this._destroyDropzone?.();
-    this._destroyContentWrapperDropzone?.();
-    if (this._onAreaClicked) {
-      this.removeEventListener('keydown', this._onAreaClicked);
-      this.removeEventListener('click', this._onAreaClicked);
-    }
-  }
-}
-
-DropArea.template = /* HTML */ `
-  <slot>
-    <div data-default-slot hidden></div>
-    <div ref="content-wrapper" class="uc-content-wrapper" set="@hidden: !isVisible">
-      <div class="uc-icon-container" set="@hidden: !withIcon">
-        <uc-icon name="default"></uc-icon>
-        <uc-icon name="arrow-down"></uc-icon>
-      </div>
-      <span class="uc-text">{{text}}</span>
-    </div>
-  </slot>
-`;
-
-DropArea.bindAttributes({
-  // @ts-expect-error TODO: fix types inside symbiote
-  'with-icon': null,
-  // @ts-expect-error TODO: fix types inside symbiote
-  clickable: null,
-  // @ts-expect-error TODO: fix types inside symbiote
-  text: null,
-  // @ts-expect-error TODO: fix types inside symbiote
-  fullscreen: null,
-  // @ts-expect-error TODO: fix types inside symbiote
-  disabled: null,
-  // @ts-expect-error TODO: fix types inside symbiote
-  initflow: null,
-});

package/blocks/DropArea/addDropzone.d.ts

@@ -1,21 +0,0 @@
-/**
- * @param {Object} desc
- * @param {HTMLElement} desc.element
- * @param {Function} desc.onChange
- * @param {Function} desc.onItems
- * @param {() => Boolean} desc.shouldIgnore
- */
-export function addDropzone(desc: {
-    element: HTMLElement;
-    onChange: Function;
-    onItems: Function;
-    shouldIgnore: () => boolean;
-}): () => void;
-export type DropzoneState = number;
-export namespace DropzoneState {
-    let ACTIVE: number;
-    let INACTIVE: number;
-    let NEAR: number;
-    let OVER: number;
-}
-//# sourceMappingURL=addDropzone.d.ts.map

package/blocks/DropArea/addDropzone.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"addDropzone.d.ts","sourceRoot":"","sources":["addDropzone.js"],"names":[],"mappings":"AA0BA;;;;;;GAMG;AACH,kCALG;IAA0B,OAAO,EAAzB,WAAW;IACI,QAAQ;IACR,OAAO;IACF,YAAY,EAAhC,aAAa;CACvB,cAwGA"}

package/blocks/DropArea/addDropzone.js

@@ -1,137 +0,0 @@
-import { getDropItems } from './getDropItems.js';
-
-/** @enum {Number} */
-export const DropzoneState = {
-  ACTIVE: 0,
-  INACTIVE: 1,
-  NEAR: 2,
-  OVER: 3,
-};
-
-let RESET_EVENTS = ['focus'];
-let NEAR_OFFSET = 100;
-let nearnessRegistry = new Map();
-
-/**
- * @param {[x: number, y: number]} p
- * @param {{ x: number; y: number; width: number; height: number }} r
- * @returns {number}
- */
-function distance(p, r) {
-  let cx = Math.max(Math.min(p[0], r.x + r.width), r.x);
-  let cy = Math.max(Math.min(p[1], r.y + r.height), r.y);
-
-  return Math.sqrt((p[0] - cx) * (p[0] - cx) + (p[1] - cy) * (p[1] - cy));
-}
-
-/**
- * @param {Object} desc
- * @param {HTMLElement} desc.element
- * @param {Function} desc.onChange
- * @param {Function} desc.onItems
- * @param {() => Boolean} desc.shouldIgnore
- */
-export function addDropzone(desc) {
-  let eventCounter = 0;
-
-  let body = document.body;
-  let switchHandlers = new Set();
-  let handleSwitch = (fn) => switchHandlers.add(fn);
-  let state = DropzoneState.INACTIVE;
-
-  let setState = (newState) => {
-    if (desc.shouldIgnore() && newState !== DropzoneState.INACTIVE) {
-      return;
-    }
-    if (state !== newState) {
-      switchHandlers.forEach((fn) => fn(newState));
-    }
-    state = newState;
-  };
-
-  let isDragging = () => eventCounter > 0;
-
-  handleSwitch((newState) => desc.onChange(newState));
-
-  let onResetEvent = () => {
-    eventCounter = 0;
-    setState(DropzoneState.INACTIVE);
-  };
-  let onDragEnter = () => {
-    eventCounter += 1;
-    if (state === DropzoneState.INACTIVE) {
-      setState(DropzoneState.ACTIVE);
-    }
-  };
-  let onDragLeave = () => {
-    eventCounter -= 1;
-    if (!isDragging()) {
-      setState(DropzoneState.INACTIVE);
-    }
-  };
-  let onDrop = (e) => {
-    e.preventDefault();
-    eventCounter = 0;
-    setState(DropzoneState.INACTIVE);
-  };
-
-  let onDragOver = (e) => {
-    if (desc.shouldIgnore()) {
-      return;
-    }
-
-    if (!isDragging()) {
-      eventCounter += 1;
-    }
-
-    /** @type {[Number, Number]} */
-    let dragPoint = [e.x, e.y];
-    let targetRect = desc.element.getBoundingClientRect();
-    let nearness = Math.floor(distance(dragPoint, targetRect));
-    let isNear = nearness < NEAR_OFFSET;
-    let isOver = e.composedPath().includes(desc.element);
-
-    nearnessRegistry.set(desc.element, nearness);
-    let isNearest = Math.min(...nearnessRegistry.values()) === nearness;
-
-    if (isOver && isNearest) {
-      e.preventDefault();
-      setState(DropzoneState.OVER);
-    } else if (isNear && isNearest) {
-      setState(DropzoneState.NEAR);
-    } else {
-      setState(DropzoneState.ACTIVE);
-    }
-  };
-
-  let onElementDrop = async (e) => {
-    if (desc.shouldIgnore()) {
-      return;
-    }
-    e.preventDefault();
-    let items = await getDropItems(e.dataTransfer);
-    desc.onItems(items);
-    setState(DropzoneState.INACTIVE);
-  };
-
-  body.addEventListener('drop', onDrop);
-  body.addEventListener('dragleave', onDragLeave);
-  body.addEventListener('dragenter', onDragEnter);
-  body.addEventListener('dragover', onDragOver);
-  desc.element.addEventListener('drop', onElementDrop);
-  RESET_EVENTS.forEach((eventName) => {
-    window.addEventListener(eventName, onResetEvent);
-  });
-
-  return () => {
-    nearnessRegistry.delete(desc.element);
-    body.removeEventListener('drop', onDrop);
-    body.removeEventListener('dragleave', onDragLeave);
-    body.removeEventListener('dragenter', onDragEnter);
-    body.removeEventListener('dragover', onDragOver);
-    desc.element.removeEventListener('drop', onElementDrop);
-    RESET_EVENTS.forEach((eventName) => {
-      window.removeEventListener(eventName, onResetEvent);
-    });
-  };
-}

package/blocks/DropArea/drop-area.css

@@ -1,201 +0,0 @@
-:where([uc-drop-area]) {
-  padding: 2px;
-  overflow: hidden;
-  border: 1px dashed var(--uc-border);
-  border-radius: calc(var(--uc-radius) * 1.75);
-  transition:
-    border var(--uc-transition),
-    border-radius var(--uc-transition);
-}
-
-:where([uc-drop-area]),
-:where([uc-drop-area]) .uc-content-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-:where([uc-drop-area]) .uc-text {
-  position: relative;
-  margin: var(--uc-padding);
-  color: var(--uc-muted-foreground);
-  transition: color var(--uc-transition);
-}
-
-:where([uc-drop-area])[ghost][drag-state='inactive'] {
-  display: none;
-}
-
-:where([uc-drop-area])[ghost]:not([fullscreen]):is([drag-state='active'], [drag-state='near'], [drag-state='over']) {
-  background: var(--uc-background);
-}
-
-:where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
-  background: var(--uc-primary-transparent);
-  border-color: var(--uc-primary-transparent);
-}
-
-:where(.uc-contrast)
-  :where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
-  color: var(--uc-foreground);
-  background: transparent;
-  border-color: var(--uc-foreground);
-  border-width: 2px;
-  border-style: solid;
-}
-
-:where([uc-drop-area]):is([drag-state='active'], [drag-state='near']) {
-  opacity: 1;
-}
-
-:where([uc-drop-area])[drag-state='over'] {
-  border-color: var(--uc-primary);
-  opacity: 1;
-}
-
-:where([uc-drop-area])[with-icon] {
-  min-height: 180px;
-}
-
-:where([uc-drop-area])[with-icon] .uc-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-:where([uc-drop-area])[with-icon] .uc-text {
-  color: var(--uc-foreground);
-  font-weight: 500;
-  font-size: 1.1em;
-}
-
-:where([uc-drop-area])[with-icon] .uc-icon-container {
-  position: relative;
-  width: 64px;
-  height: 64px;
-  margin: var(--uc-padding);
-  overflow: hidden;
-  color: var(--uc-foreground);
-  background-color: var(--uc-muted);
-  border-radius: 50%;
-  transition:
-    color var(--uc-transition),
-    background-color var(--uc-transition);
-}
-
-:where([uc-drop-area])[with-icon] uc-icon {
-  position: absolute;
-  width: 32px;
-  height: 32px;
-  top: calc(50% - 16px);
-  left: calc(50% - 16px);
-  transition: transform var(--uc-transition);
-}
-
-:where([uc-drop-area])[with-icon] uc-icon:last-child {
-  transform: translateY(48px);
-}
-
-:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container,
-:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-text {
-  color: var(--uc-foreground);
-}
-
-:where([uc-drop-area])[with-icon]:hover .uc-icon-container {
-  background-color: var(--uc-primary-transparent);
-}
-
-:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
-  background-color: var(--uc-muted);
-}
-
-:where([uc-drop-area])[with-icon]
-  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  .uc-icon-container {
-  color: var(--uc-primary-foreground);
-  background-color: var(--uc-primary);
-}
-
-:where([uc-drop-area])[with-icon]
-  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  .uc-text {
-  color: var(--uc-foreground);
-}
-
-:where(.uc-contrast)
-  :where([uc-drop-area])[with-icon]
-  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  .uc-text {
-  color: var(--uc-foreground);
-}
-
-:where([uc-drop-area])[with-icon]
-  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  uc-icon:first-child {
-  transform: translateY(-48px);
-}
-
-:where([uc-drop-area])[with-icon]
-  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  uc-icon:last-child {
-  transform: translateY(0);
-}
-
-:where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state='near'] uc-icon:last-child {
-  transform: scale(1.3);
-}
-
-:where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state='over'] uc-icon:last-child {
-  transform: scale(1.5);
-}
-
-:where([uc-drop-area])[fullscreen] {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2147483647;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(100vw - var(--uc-padding) * 2);
-  height: calc(100vh - var(--uc-padding) * 2);
-  margin: var(--uc-padding);
-}
-
-:where([uc-drop-area])[fullscreen] .uc-content-wrapper {
-  width: 100%;
-  max-width: calc(var(--uc-dialog-width) * 0.8);
-  height: 180px;
-  color: var(--uc-foreground);
-  background-color: var(--uc-background);
-  border-radius: calc(var(--uc-radius) * 1.75);
-  box-shadow: var(--uc-dialog-shadow);
-  transition:
-    color var(--uc-transition),
-    background-color var(--uc-transition),
-    box-shadow var(--uc-transition),
-    border-radius var(--uc-transition),
-    transform var(--uc-transition);
-}
-
-:where([uc-drop-area])[with-icon][fullscreen][drag-state='active'] > .uc-content-wrapper,
-:where([uc-drop-area])[with-icon][fullscreen][drag-state='near'] > .uc-content-wrapper {
-  transform: translateY(10px);
-  opacity: 0;
-}
-
-:where([uc-drop-area])[with-icon][fullscreen][drag-state='over'] > .uc-content-wrapper {
-  transform: translateY(0px);
-  opacity: 1;
-}
-
-:is(:where([uc-drop-area])[with-icon][fullscreen]) > .uc-content-wrapper uc-icon:first-child {
-  transform: translateY(-48px);
-}
-
-:where([uc-drop-area])[clickable] {
-  cursor: pointer;
-}