dap-design-system 0.44.2 → 0.44.3

package/dist/components.d.ts

@@ -2828,7 +2828,7 @@ declare const DapDSFeedback_base: typeof DdsElement & {
  * @event {{ void }} dds-all-uploads-complete - Fired when all file uploads are complete.
  * @event {{ file: FileListElement }} dds-file-removed - Fired when a file is removed from the file input.
  * @event {{ file: FileListElement, error: Error }} dds-file-delete-error - Fired when a file deletion from server encounters an error.
- * @event {{ files: File[] }} dds-file-change - Fired when the file input value changes.
+ * @event {{ newFiles: File[], files: File[], canceledFiles: Set<File> }} dds-file-change - Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files.
  *
  * @slot dropzone-content - The content to display in the dropzone.
  *
@@ -2957,6 +2957,11 @@ export declare class DapDSFileInput extends GenericFormElement {
      */
     private deleteUploadedFile;
     private uploadFiles;
+    /**
+     * Calculates what the new file list would be if the given files were added
+     * Does not modify component state
+     */
+    private calculateNewFileList;
     private handleFileList;
     onChange(event: InputEvent): void;
     onDragenter(event: DragEvent): void;
@@ -6455,7 +6460,9 @@ declare class DdsElement extends LitElement {
 export declare type DdsErrorEvent = CustomEvent<Record<PropertyKey, never>>;
 
 export declare type DdsFileChangeEvent = CustomEvent<{
+    newFiles: File[];
     files: File[];
+    canceledFiles: Set<File>;
 }>;
 
 export declare type DdsFileClickEvent = CustomEvent<{

package/dist/components.js

@@ -11523,6 +11523,21 @@ let X = class extends ge {
       }
     });
   }
+  /**
+   * Calculates what the new file list would be if the given files were added
+   * Does not modify component state
+   */
+  calculateNewFileList(t) {
+    var i;
+    if (!t || t.length === 0)
+      return [];
+    const e = [...this._files];
+    return this.keepValue && ((i = this._files) != null && i.length) ? (Object.values(t).forEach((a) => {
+      !!this._files.find(
+        (r) => this.checkFileEquality(r, a)
+      ) || e.push(a);
+    }), e) : Object.values(t);
+  }
   handleFileList(t) {
     var a;
     const e = [...this._files];
@@ -11539,19 +11554,39 @@ let X = class extends ge {
   onChange(t) {
     const i = (t == null ? void 0 : t.target).files;
     if (i) {
-      const a = this.validateFiles(i);
-      if (!a.isValid && a.errors) {
-        const o = a.errors.map((r) => r.file ? new qn(
-          r.message,
-          r.file,
-          r.type,
-          r.meta
-        ) : new Error(r.message));
-        this.emit("dds-upload-error", { errors: o });
+      const d = this.validateFiles(i);
+      if (!d.isValid && d.errors) {
+        const l = d.errors.map((c) => c.file ? new qn(
+          c.message,
+          c.file,
+          c.type,
+          c.meta
+        ) : new Error(c.message));
+        this.emit("dds-upload-error", { errors: l });
         return;
       }
     }
-    this.value = this.input.value, this.handleFileList(i), this.emit("dds-file-change", { files: this._files }), this.setValidity();
+    const a = i ? Array.from(i) : [], o = this.calculateNewFileList(i), r = /* @__PURE__ */ new Set();
+    if (this.emit(
+      "dds-file-change",
+      { newFiles: a, files: o, canceledFiles: r },
+      { cancelable: !0 }
+    ).defaultPrevented) {
+      this.input.value = "";
+      return;
+    }
+    if (r.size > 0 && i) {
+      const d = Array.from(i).filter(
+        (c) => !r.has(c)
+      );
+      if (d.length === 0) {
+        this.input.value = "";
+        return;
+      }
+      const l = new DataTransfer();
+      d.forEach((c) => l.items.add(c)), this.value = this.input.value, this.handleFileList(l.files), this.setValidity();
+    } else
+      this.value = this.input.value, this.handleFileList(i), this.setValidity();
   }
   onDragenter(t) {
     this.disabled || (t.preventDefault(), this._isDragOver = !0);
@@ -11563,24 +11598,39 @@ let X = class extends ge {
     this.disabled || (t.preventDefault(), this.contains(t.relatedTarget) || (this._isDragOver = !1));
   }
   onDrop(t) {
-    var i;
+    var n;
     if (this.disabled) return;
     t.preventDefault(), this._isDragOver = !1;
-    const e = (i = t.dataTransfer) == null ? void 0 : i.files;
+    const e = (n = t.dataTransfer) == null ? void 0 : n.files;
     if (e) {
-      const a = this.validateFiles(e);
-      if (!a.isValid && a.errors) {
-        const o = a.errors.map((r) => r.file ? new qn(
-          r.message,
-          r.file,
-          r.type,
-          r.meta
-        ) : new Error(r.message));
-        this.emit("dds-upload-error", { errors: o });
+      const d = this.validateFiles(e);
+      if (!d.isValid && d.errors) {
+        const l = d.errors.map((c) => c.file ? new qn(
+          c.message,
+          c.file,
+          c.type,
+          c.meta
+        ) : new Error(c.message));
+        this.emit("dds-upload-error", { errors: l });
         return;
       }
     }
-    this.handleFileList(e != null ? e : null), this.emit("dds-file-change", { files: this._files }), this.setValidity();
+    const i = e ? Array.from(e) : [], a = this.calculateNewFileList(e != null ? e : null), o = /* @__PURE__ */ new Set();
+    if (!this.emit(
+      "dds-file-change",
+      { newFiles: i, files: a, canceledFiles: o },
+      { cancelable: !0 }
+    ).defaultPrevented)
+      if (o.size > 0 && e) {
+        const d = Array.from(e).filter(
+          (c) => !o.has(c)
+        );
+        if (d.length === 0)
+          return;
+        const l = new DataTransfer();
+        d.forEach((c) => l.items.add(c)), this.handleFileList(l.files), this.setValidity();
+      } else
+        this.handleFileList(e != null ? e : null), this.setValidity();
   }
   render() {
     var t, e;