@georapbox/files-dropzone-element 1.2.1 → 2.0.1

package/package.json

@@ -1,51 +1,30 @@
 {
   "name": "@georapbox/files-dropzone-element",
-  "version": "1.2.1",
+  "version": "2.0.1",
   "description": "A custom element that creates a drag and drop zone for files",
   "main": "dist/files-dropzone.js",
   "module": "dist/files-dropzone.js",
   "unpkg": "dist/files-dropzone.js",
   "type": "module",
   "types": "dist/files-dropzone.d.ts",
-  "targets": {
-    "files-dropzone": {
-      "context": "browser",
-      "outputFormat": "esmodule",
-      "source": "src/files-dropzone.js",
-      "optimize": true,
-      "isLibrary": true,
-      "distDir": "dist",
-      "engines": {
-        "browsers": "> 0.5%, last 2 versions, not dead"
-      }
-    },
-    "files-dropzone-defined": {
-      "context": "browser",
-      "outputFormat": "esmodule",
-      "source": "src/files-dropzone-defined.js",
-      "optimize": true,
-      "isLibrary": true,
-      "distDir": "dist",
-      "engines": {
-        "browsers": "> 0.5%, last 2 versions, not dead"
-      }
-    }
-  },
   "files": [
     "/src",
     "/dist"
   ],
   "scripts": {
-    "lint": "eslint . --ext .js",
+    "lint": "eslint",
+    "format": "prettier --ignore-unknown --write .",
     "test": "web-test-runner",
     "test:watch": "npm run test -- --watch",
     "test:coverage": "npm run test -- --coverage",
     "types": "tsc --project tsconfig.json",
-    "dev:parcel": "parcel watch",
-    "dev": "npm-run-all clean dev:parcel",
-    "build:parcel": "parcel build",
-    "build": "npm-run-all clean build:parcel",
-    "clean": "rimraf dist .parcel-cache",
+    "dev:esbuild": "node ./scripts/dev.mjs",
+    "dev": "npm-run-all clean dev:esbuild",
+    "serve:dev": "web-dev-server --node-resolve --open /docs/ --watch",
+    "start": "npm-run-all --parallel \"serve:dev -- {1}\" dev",
+    "build:esbuild": "node ./scripts/build.mjs",
+    "build": "npm-run-all clean build:esbuild",
+    "clean": "rimraf dist",
     "prepare": "npm-run-all clean lint test build types"
   },
   "keywords": [
@@ -67,16 +46,23 @@
   },
   "homepage": "https://github.com/georapbox/files-dropzone-element#readme",
   "devDependencies": {
+    "@eslint/js": "~9.9.0",
     "@esm-bundle/chai": "~4.3.4-fix.0",
-    "@open-wc/testing": "~3.2.2",
-    "@web/test-runner": "~0.18.0",
+    "@open-wc/testing": "~4.0.0",
+    "@web/dev-server": "~0.4.6",
+    "@web/test-runner": "~0.18.3",
     "@web/test-runner-playwright": "~0.11.0",
-    "eslint": "~8.55.0",
-    "eslint-plugin-wc": "~2.0.4",
+    "esbuild": "~0.23.1",
+    "eslint": "~9.9.0",
+    "eslint-plugin-wc": "~2.1.1",
+    "globals": "~15.9.0",
     "npm-run-all": "~4.1.5",
-    "parcel": "~2.9.3",
-    "rimraf": "~5.0.5",
-    "sinon": "~17.0.1",
-    "typescript": "~5.3.3"
+    "prettier": "~3.3.3",
+    "rimraf": "~6.0.1",
+    "sinon": "~18.0.0",
+    "typescript": "~5.5.4"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

package/src/files-dropzone.js

@@ -17,7 +17,7 @@ const FILE_TOO_SMALL = 'FILE_TOO_SMALL';
 const INVALID_MIME_TYPE = 'INVALID_MIME_TYPE';
 const template = document.createElement('template');
 
-const styles = /* css */`
+const styles = /* css */ `
   *,
   *::before,
   *::after {
@@ -62,13 +62,10 @@ const styles = /* css */`
     transition: border var(--dropzone-transition-duration) ease-in-out, background-color var(--dropzone-transition-duration) ease-in-out, color var(--dropzone-transition-duration) ease-in-out, box-shadow var(--dropzone-transition-duration) ease-in-out;
   }
 
-  :host(:not([no-style])[no-click]) .dropzone {
-    cursor: default;
-  }
-
   :host(:not([no-style])[disabled]) .dropzone {
     opacity: 0.8;
     cursor: not-allowed;
+    user-select: none;
   }
 
   :host(:not([no-style]):not([disabled])) .dropzone--dragover {
@@ -91,14 +88,14 @@ const styles = /* css */`
   }
 `;
 
-template.innerHTML = /* html */`
+template.innerHTML = /* html */ `
   <style>
     ${styles}
   </style>
 
-  <input type="file" id="fileInput" hidden>
+  <input type="file" id="file-input" hidden>
 
-  <div part="dropzone" class="dropzone" id="dropzoneEl" tabindex="0" role="presentation">
+  <div part="dropzone" class="dropzone" id="dropzone" tabindex="0" role="button" aria-disabled="false">
     <slot>Drag 'n' drop files here, or click to select files</slot>
   </div>
 `;
@@ -115,9 +112,6 @@ template.innerHTML = /* html */`
  * @property {number} maxSize - The maximum file size allowed in bytes.
  * @property {number} minSize - The minimum file size allowed in bytes.
  * @property {boolean} multiple - Allows multiple files to be dropped.
- * @property {boolean} noClick - Prevents the file dialog from opening when the dropzone is clicked.
- * @property {boolean} noDrag - Prevents the dropzone from reacting to drag events.
- * @property {boolean} noKeyboard - Prevents the dropzone from reacting to keyboard events.
  * @property {boolean} autoFocus - Automatically focuses the dropzone when it's connected to the DOM.
  * @property {boolean} noStyle - Prevents the dropzone from applying any styling.
  *
@@ -127,9 +121,6 @@ template.innerHTML = /* html */`
  * @attribute {number} max-size - Reflects the maxSize property.
  * @attribute {number} min-size - Reflects the minSize property.
  * @attribute {boolean} multiple - Reflects the multiple property.
- * @attribute {boolean} no-click - Reflects the noClick property.
- * @attribute {boolean} no-drag - Reflects the noDrag property.
- * @attribute {boolean} no-keyboard - Reflects the noKeyboard property.
  * @attribute {boolean} auto-focus - Reflects the autoFocus property.
  * @attribute {boolean} no-style - Reflects the noStyle property.
  *
@@ -176,18 +167,18 @@ class FilesDropzone extends HTMLElement {
     super();
 
     if (!this.shadowRoot) {
-      const shadowRoot = this.attachShadow({ mode: 'open' });
+      const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true });
       shadowRoot.appendChild(template.content.cloneNode(true));
     }
 
     if (this.shadowRoot) {
-      this.#fileInput = /** @type {Nullable<HTMLInputElement>} */(this.shadowRoot.getElementById('fileInput'));
-      this.#dropzoneEl = this.shadowRoot.getElementById('dropzoneEl');
+      this.#fileInput = /** @type {Nullable<HTMLInputElement>} */ (this.shadowRoot.getElementById('file-input'));
+      this.#dropzoneEl = this.shadowRoot.getElementById('dropzone');
     }
   }
 
   static get observedAttributes() {
-    return ['accept', 'disabled', 'multiple', 'no-keyboard'];
+    return ['accept', 'disabled', 'multiple'];
   }
 
   /**
@@ -207,22 +198,16 @@ class FilesDropzone extends HTMLElement {
 
       if (this.disabled) {
         this.#dropzoneEl?.removeAttribute('tabindex');
+        this.#dropzoneEl?.setAttribute('aria-disabled', 'true');
       } else {
         this.#dropzoneEl?.setAttribute('tabindex', '0');
+        this.#dropzoneEl?.setAttribute('aria-disabled', 'false');
       }
     }
 
     if (name === 'multiple' && oldValue !== newValue && this.#fileInput) {
       this.#fileInput.multiple = this.multiple;
     }
-
-    if (name === 'no-keyboard' && oldValue !== newValue && this.#dropzoneEl) {
-      if (this.noKeyboard) {
-        this.#dropzoneEl.removeAttribute('tabindex');
-      } else {
-        this.#dropzoneEl.setAttribute('tabindex', '0');
-      }
-    }
   }
 
   /**
@@ -235,9 +220,6 @@ class FilesDropzone extends HTMLElement {
     this.#upgradeProperty('maxSize');
     this.#upgradeProperty('minSize');
     this.#upgradeProperty('multiple');
-    this.#upgradeProperty('noClick');
-    this.#upgradeProperty('noDrag');
-    this.#upgradeProperty('noKeyboard');
     this.#upgradeProperty('autoFocus');
     this.#upgradeProperty('noStyle');
 
@@ -364,45 +346,6 @@ class FilesDropzone extends HTMLElement {
     this.toggleAttribute('multiple', !!value);
   }
 
-  /**
-   * @type {boolean} - Prevents the file dialog from opening when the dropzone is clicked.
-   * @default false
-   * @attribute no-click - Reflects the noClick property.
-   */
-  get noClick() {
-    return this.hasAttribute('no-click');
-  }
-
-  set noClick(value) {
-    this.toggleAttribute('no-click', !!value);
-  }
-
-  /**
-   * @type {boolean} - Prevents the dropzone from reacting to drag events.
-   * @default false
-   * @attribute no-drag - Reflects the noDrag property.
-   */
-  get noDrag() {
-    return this.hasAttribute('no-drag');
-  }
-
-  set noDrag(value) {
-    this.toggleAttribute('no-drag', !!value);
-  }
-
-  /**
-   * @type {boolean} - Prevents the dropzone from reacting to keyboard events.
-   * @default false
-   * @attribute no-keyboard - Reflects the noKeyboard property.
-   */
-  get noKeyboard() {
-    return this.hasAttribute('no-keyboard');
-  }
-
-  set noKeyboard(value) {
-    this.toggleAttribute('no-keyboard', !!value);
-  }
-
   /**
    * @type {boolean} - Automatically focuses the dropzone when it's connected to the DOM.
    * @default false
@@ -438,11 +381,13 @@ class FilesDropzone extends HTMLElement {
     try {
       this.#handleFilesSelect(await getFilesFromEvent(evt));
     } catch (error) {
-      this.dispatchEvent(new CustomEvent(`${COMPONENT_NAME}-error`, {
-        bubbles: true,
-        composed: true,
-        detail: { error }
-      }));
+      this.dispatchEvent(
+        new CustomEvent(`${COMPONENT_NAME}-error`, {
+          bubbles: true,
+          composed: true,
+          detail: { error }
+        })
+      );
     }
   };
 
@@ -450,14 +395,16 @@ class FilesDropzone extends HTMLElement {
    * Handles the dragenter event of the dropzone.
    */
   #handleDragEnter = () => {
-    if (this.disabled || this.noDrag) {
+    if (this.disabled) {
       return;
     }
 
-    this.dispatchEvent(new Event(`${COMPONENT_NAME}-dragenter`, {
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new Event(`${COMPONENT_NAME}-dragenter`, {
+        bubbles: true,
+        composed: true
+      })
+    );
   };
 
   /**
@@ -468,7 +415,7 @@ class FilesDropzone extends HTMLElement {
   #handleDragOver = evt => {
     evt.preventDefault();
 
-    if (this.disabled || this.noDrag) {
+    if (this.disabled) {
       evt.dataTransfer.dropEffect = 'none';
       return;
     }
@@ -480,17 +427,19 @@ class FilesDropzone extends HTMLElement {
       this.#dropzoneEl.part.add('dropzone--dragover');
     }
 
-    this.dispatchEvent(new Event(`${COMPONENT_NAME}-dragover`, {
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new Event(`${COMPONENT_NAME}-dragover`, {
+        bubbles: true,
+        composed: true
+      })
+    );
   };
 
   /**
    * Handles the dragleave event of the dropzone.
    */
   #handleDragLeave = () => {
-    if (this.disabled || this.noDrag) {
+    if (this.disabled) {
       return;
     }
 
@@ -499,10 +448,12 @@ class FilesDropzone extends HTMLElement {
       this.#dropzoneEl.part.remove('dropzone--dragover');
     }
 
-    this.dispatchEvent(new Event(`${COMPONENT_NAME}-dragleave`, {
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new Event(`${COMPONENT_NAME}-dragleave`, {
+        bubbles: true,
+        composed: true
+      })
+    );
   };
 
   /**
@@ -511,7 +462,7 @@ class FilesDropzone extends HTMLElement {
    * @param {*} evt - The event object.
    */
   #handleDrop = async evt => {
-    if (this.disabled || this.noDrag) {
+    if (this.disabled) {
       return;
     }
 
@@ -525,11 +476,13 @@ class FilesDropzone extends HTMLElement {
     try {
       this.#handleFilesSelect(await getFilesFromEvent(evt));
     } catch (error) {
-      this.dispatchEvent(new CustomEvent(`${COMPONENT_NAME}-error`, {
-        bubbles: true,
-        composed: true,
-        detail: { error }
-      }));
+      this.dispatchEvent(
+        new CustomEvent(`${COMPONENT_NAME}-error`, {
+          bubbles: true,
+          composed: true,
+          detail: { error }
+        })
+      );
     }
   };
 
@@ -537,7 +490,7 @@ class FilesDropzone extends HTMLElement {
    * Handles the click event of the dropzone.
    */
   #handleClick = () => {
-    if (this.disabled || this.noClick) {
+    if (this.disabled) {
       return;
     }
 
@@ -550,7 +503,7 @@ class FilesDropzone extends HTMLElement {
    * @param {*} evt - The event object.
    */
   #handleKeyUp = evt => {
-    if (this.disabled || this.noKeyboard) {
+    if (this.disabled) {
       return;
     }
 
@@ -578,10 +531,12 @@ class FilesDropzone extends HTMLElement {
       for (const file of files) {
         rejectedFiles.push({
           file,
-          errors: [{
-            code: TOO_MANY_FILES,
-            message: `Too many files selected. Only 1 file is allowed.`
-          }]
+          errors: [
+            {
+              code: TOO_MANY_FILES,
+              message: `Too many files selected. Only 1 file is allowed.`
+            }
+          ]
         });
       }
     } else if (this.multiple && filesLength > this.maxFiles) {
@@ -590,10 +545,12 @@ class FilesDropzone extends HTMLElement {
       for (const file of files) {
         rejectedFiles.push({
           file,
-          errors: [{
-            code: TOO_MANY_FILES,
-            message: `Too many files selected. Only ${this.maxFiles} ${this.maxFiles > 1 ? 'files are' : 'file is'} allowed.`
-          }]
+          errors: [
+            {
+              code: TOO_MANY_FILES,
+              message: `Too many files selected. Only ${this.maxFiles} ${this.maxFiles > 1 ? 'files are' : 'file is'} allowed.`
+            }
+          ]
         });
       }
     } else {
@@ -635,33 +592,39 @@ class FilesDropzone extends HTMLElement {
       }
     }
 
-    this.dispatchEvent(new CustomEvent(`${COMPONENT_NAME}-drop`, {
-      bubbles: true,
-      composed: true,
-      detail: {
-        acceptedFiles,
-        rejectedFiles
-      }
-    }));
-
-    if (acceptedFiles.length > 0) {
-      this.dispatchEvent(new CustomEvent(`${COMPONENT_NAME}-drop-accepted`, {
+    this.dispatchEvent(
+      new CustomEvent(`${COMPONENT_NAME}-drop`, {
         bubbles: true,
         composed: true,
         detail: {
-          acceptedFiles
+          acceptedFiles,
+          rejectedFiles
         }
-      }));
+      })
+    );
+
+    if (acceptedFiles.length > 0) {
+      this.dispatchEvent(
+        new CustomEvent(`${COMPONENT_NAME}-drop-accepted`, {
+          bubbles: true,
+          composed: true,
+          detail: {
+            acceptedFiles
+          }
+        })
+      );
     }
 
     if (rejectedFiles.length > 0) {
-      this.dispatchEvent(new CustomEvent(`${COMPONENT_NAME}-drop-rejected`, {
-        bubbles: true,
-        composed: true,
-        detail: {
-          rejectedFiles
-        }
-      }));
+      this.dispatchEvent(
+        new CustomEvent(`${COMPONENT_NAME}-drop-rejected`, {
+          bubbles: true,
+          composed: true,
+          detail: {
+            rejectedFiles
+          }
+        })
+      );
     }
 
     if (this.#fileInput) {
@@ -687,7 +650,7 @@ class FilesDropzone extends HTMLElement {
    *
    * https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
    *
-   * @param {'accept' | 'disabled' | 'maxFiles' | 'maxSize' | 'minSize' | 'multiple' | 'noClick' | 'noDrag' | 'noKeyboard' | 'autoFocus' | 'noStyle'} prop - The property name to upgrade.
+   * @param {'accept' | 'disabled' | 'maxFiles' | 'maxSize' | 'minSize' | 'multiple' | 'autoFocus' | 'noStyle'} prop - The property name to upgrade.
    */
   #upgradeProperty(prop) {
     /** @type {any} */

package/src/utils/files-selector.js

@@ -239,7 +239,7 @@ const getFilesFromDataTransferItemList = async dataTransferItemList => {
         files.push(file);
       }
     } else if (entry.isDirectory) {
-      queue.push(...await readAllDirectoryEntries(entry.createReader()));
+      queue.push(...(await readAllDirectoryEntries(entry.createReader())));
     }
   }
 

package/src/utils/is-valid-file.js

@@ -13,7 +13,12 @@ export function isValidFile(file, acceptedTypeSpecifiers = '') {
   }
 
   const acceptedMimeTypesList = [
-    ...new Set(acceptedTypeSpecifiers.split(',').map(v => v.trim()).filter(Boolean))
+    ...new Set(
+      acceptedTypeSpecifiers
+        .split(',')
+        .map(v => v.trim())
+        .filter(Boolean)
+    )
   ];
 
   const fileMimeType = file.type;