@alixpartners/ui-components 2.2.0 → 2.3.1

package/dist/components/DragAndDrop/DragAndDrop.test.js

@@ -0,0 +1,606 @@
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import { d as y, i as l, r as p, g as e, s as o, v as c, w as f, f as B } from "../../vi.bdSIJ99Y-017e_Pkz.js";
+import d from "./DragAndDrop.js";
+import { c as h, d as I } from "../../DragAndDrop.utils-D3xTV9EK.js";
+import { u as w } from "../../index-DkTDHhag.js";
+y("DragAndDrop", () => {
+  y("Rendering", () => {
+    y("Basic rendering", () => {
+      l("should render component with required props", () => {
+        p(/* @__PURE__ */ i(d, { label: "Upload File", fileExtensionsAllowed: ["pdf"], maxSize: 5 })), e(o.getByText("Upload File")).toBeInTheDocument(), e(o.getByTestId("drag-and-drop-zone")).toBeInTheDocument(), e(o.getByTestId("drag-and-drop-input")).toBeInTheDocument();
+      }), l("should not render label element when label prop is omitted", () => {
+        p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5 })), e(o.queryByText("Upload File")).not.toBeInTheDocument(), e(o.getByTestId("drag-and-drop-zone")).toBeInTheDocument();
+      }), l("should render required asterisk when required prop is true", () => {
+        p(/* @__PURE__ */ i(d, { label: "Upload File", required: !0, fileExtensionsAllowed: ["pdf"], maxSize: 5 })), e(o.getByTestId("drag-and-drop-required")).toBeInTheDocument(), e(o.getByTestId("drag-and-drop-required")).toHaveTextContent("*");
+      }), l("should not render required asterisk when required prop is false", () => {
+        p(/* @__PURE__ */ i(d, { label: "Upload File", required: !1, fileExtensionsAllowed: ["pdf"], maxSize: 5 })), e(o.queryByTestId("drag-and-drop-required")).not.toBeInTheDocument();
+      }), l("should render browse button with default text for single file", () => {
+        p(/* @__PURE__ */ i(d, { type: "single", fileExtensionsAllowed: ["pdf"], maxSize: 5 }));
+        const t = o.getByText("Browse file");
+        e(t).toBeInTheDocument();
+      }), l("should render browse button with default text for multiple files", () => {
+        p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5 }));
+        const t = o.getByText("Browse files");
+        e(t).toBeInTheDocument();
+      }), l("should render drag text for single file", () => {
+        p(/* @__PURE__ */ i(d, { type: "single", fileExtensionsAllowed: ["pdf"], maxSize: 5 })), e(o.getByText("or drag your file")).toBeInTheDocument();
+      }), l("should render drag text for multiple files", () => {
+        p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5 })), e(o.getByText("or drag multiple files")).toBeInTheDocument();
+      }), l("should render file list when files are present", async () => {
+        const t = new File(["test"], "test.pdf", {
+          type: "application/pdf"
+        }), a = c.fn();
+        p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a }));
+        const n = o.getByTestId("drag-and-drop-input");
+        await w.upload(n, t), await f(() => {
+          e(o.getByTestId("drag-and-drop-files-list")).toBeInTheDocument();
+        });
+      });
+    }), y("Disabled state", () => {
+      l("should render browse button as enabled by default", () => {
+        p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5 }));
+        const t = o.getByText("Browse file");
+        e(t).not.toBeDisabled();
+      }), l("should render browse button as disabled when disabled prop is true", () => {
+        p(/* @__PURE__ */ i(d, { disabled: !0, fileExtensionsAllowed: ["pdf"], maxSize: 5 }));
+        const t = o.getByTestId("button");
+        e(t).toBeDisabled();
+      });
+    }), y("CSS Classes", () => {
+      l("should apply disabled CSS class to container when disabled prop is true", () => {
+        const {
+          container: t
+        } = p(/* @__PURE__ */ i(d, { disabled: !0, fileExtensionsAllowed: ["pdf"], maxSize: 5 })), a = t.firstChild;
+        e(a.className).toContain("disabled");
+      }), l("should merge custom className with default container classes", () => {
+        const {
+          container: t
+        } = p(/* @__PURE__ */ i(d, { className: "custom-class", fileExtensionsAllowed: ["pdf"], maxSize: 5 })), a = t.firstChild;
+        e(a.className).toContain("custom-class");
+      });
+    });
+  }), y("Text Customization", () => {
+    l("should use custom browse text when provided as string", () => {
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, texts: {
+        browse: "Select File"
+      } })), e(o.getByText("Select File")).toBeInTheDocument();
+    }), l("should use custom browse text when provided as function", () => {
+      p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, texts: {
+        browse: (t) => t === "single" ? "Choose One" : "Choose Many"
+      } })), e(o.getByText("Choose Many")).toBeInTheDocument();
+    }), l("should use custom drag text when provided as string", () => {
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, texts: {
+        drag: "or drop here"
+      } })), e(o.getByText("or drop here")).toBeInTheDocument();
+    }), l("should use custom drag text when provided as function", () => {
+      p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, texts: {
+        drag: (t) => t === "single" ? "drop one" : "drop many"
+      } })), e(o.getByText("drop many")).toBeInTheDocument();
+    }), l("should use custom constraints text when provided", () => {
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf", "doc"], maxSize: 10, texts: {
+        constraints: ({
+          extensions: t,
+          maxSize: a
+        }) => `Formats: ${t.join(", ")}. Max: ${a}MB`
+      } })), e(o.getByText(/Formats: pdf, doc. Max: 10MB/)).toBeInTheDocument();
+    }), l("should use custom error messages when provided", async () => {
+      const t = new File(["x".repeat(10485760)], "large.pdf", {
+        type: "application/pdf"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 1, onUpload: a, texts: {
+        errors: {
+          sizeTooLarge: (s) => `File is too big! Maximum is ${s}MB`
+        }
+      } }));
+      const n = o.getByTestId("drag-and-drop-input");
+      await w.upload(n, t), await f(() => {
+        e(o.getByText(/File is too big! Maximum is 1MB/)).toBeInTheDocument();
+      });
+    });
+  }), y("Icon Customization", () => {
+    l("should use custom file icon when provided", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, fileIcon: "ap-icon-document-rpm" }));
+      const n = o.getByTestId("drag-and-drop-input");
+      await w.upload(n, t), await f(() => {
+        const s = o.getByTestId("drag-and-drop-file-item-0").querySelector(".ap-icon-document-rpm");
+        e(s).toBeInTheDocument();
+      });
+    }), l("should use custom error icon when provided", async () => {
+      const t = new File(["test"], "test.txt", {
+        type: "text/plain"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, errorIcon: "ap-icon-alert-filled" }));
+      const n = o.getByTestId("drag-and-drop-input"), s = new DataTransfer();
+      s.items.add(t), Object.defineProperty(n, "files", {
+        value: s.files,
+        writable: !1
+      }), B.change(n), await f(() => {
+        const r = o.getByTestId("drag-and-drop-file-error-0");
+        e(r).toBeInTheDocument();
+        const u = r.querySelector(".ap-icon-alert-filled");
+        e(u).toBeInTheDocument();
+      });
+    }), l("should use custom browse button icon when provided", () => {
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, browseButtonIcon: "ap-icon-upload" }));
+      const t = o.getByTestId("button-icon");
+      e(t).toBeInTheDocument(), e(t.className).toContain("ap-icon-upload");
+    });
+  }), y("Render Props", () => {
+    l("should use custom renderFileItem when provided", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), n = c.fn((r, u, g) => /* @__PURE__ */ v("div", { children: [
+        "Custom: ",
+        r.file.name,
+        /* @__PURE__ */ i("button", { onClick: g, children: "Remove" })
+      ] }));
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, renderFileItem: n }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, t), await f(() => {
+        e(o.getByTestId("custom-file-item")).toBeInTheDocument(), e(o.getByText("Custom: test.pdf")).toBeInTheDocument(), e(n).toHaveBeenCalledTimes(1);
+      });
+    }), l("should call renderFileItem with correct parameters", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), n = c.fn((r, u, g) => /* @__PURE__ */ i("div", { children: "Custom" }));
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, renderFileItem: n }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, t), await f(() => {
+        e(n).toHaveBeenCalledWith(e.objectContaining({
+          file: e.any(File),
+          error: void 0
+        }), 0, e.any(Function));
+      });
+    });
+  }), y("File Size Formatter", () => {
+    l("should use custom fileSizeFormatter when provided", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), n = c.fn((r) => `${(r / 1024).toFixed(0)} KB`);
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, fileSizeFormatter: n }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, t), await f(() => {
+        e(n).toHaveBeenCalled();
+        const r = o.getByTestId("drag-and-drop-file-size-0");
+        e(r.textContent).toBe(`${Math.round(t.size / 1024)} KB`);
+      });
+    }), l("should use default formatter when fileSizeFormatter is not provided", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a }));
+      const n = o.getByTestId("drag-and-drop-input");
+      await w.upload(n, t), await f(() => {
+        const s = o.getByTestId("drag-and-drop-file-size-0");
+        e(s.textContent).toBe((t.size / 1024).toFixed(2) + " KB");
+      });
+    });
+  }), y("Button Customization", () => {
+    l("should apply browseButtonProps to browse button", () => {
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, browseButtonProps: {
+        type: "primary",
+        variant: "danger",
+        size: "md"
+      } }));
+      const t = o.getByTestId("button");
+      e(t.className).toContain("btn-primary"), e(t.className).toContain("btn-danger"), e(t.className).toContain("btn-md");
+    });
+  }), y("File Upload Interactions", () => {
+    l("should call onUpload when file is selected", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a }));
+      const n = o.getByTestId("drag-and-drop-input");
+      await w.upload(n, t), await f(() => {
+        e(a).toHaveBeenCalledTimes(1), e(a).toHaveBeenCalledWith(e.arrayContaining([e.objectContaining({
+          file: e.any(File)
+        })]));
+      });
+    }), l("should handle multiple file selection", async () => {
+      const t = new File(["test1"], "test1.pdf", {
+        type: "application/pdf"
+      }), a = new File(["test2"], "test2.pdf", {
+        type: "application/pdf"
+      }), n = c.fn();
+      p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: n }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, [t, a]), await f(() => {
+        e(n).toHaveBeenCalledTimes(1);
+        const r = n.mock.calls[0][0];
+        e(r).toHaveLength(2);
+      });
+    }), l("should call onRemoveFile when remove button is clicked", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), n = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, onRemoveFile: n }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, t), await f(() => {
+        e(o.getByTestId("drag-and-drop-files-list")).toBeInTheDocument();
+      });
+      const r = o.getByTestId("drag-and-drop-remove-0");
+      B.click(r), e(n).toHaveBeenCalledTimes(1), e(n).toHaveBeenCalledWith("test.pdf"), await f(() => {
+        e(o.queryByTestId("drag-and-drop-files-list")).not.toBeInTheDocument();
+      });
+    }), l("should queue files when queueFiles is true", async () => {
+      const t = new File(["test1"], "test1.pdf", {
+        type: "application/pdf"
+      }), a = new File(["test2"], "test2.pdf", {
+        type: "application/pdf"
+      }), n = c.fn();
+      p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: n, queueFiles: !0 }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, t), await f(() => {
+        e(n).toHaveBeenCalledTimes(1);
+      }), await w.upload(s, a), await f(() => {
+        e(n).toHaveBeenCalledTimes(2);
+        const r = n.mock.calls[1][0];
+        e(r.length).toBeGreaterThan(1);
+      });
+    });
+  }), y("Drag and Drop Interactions", () => {
+    l("should handle drag over event", () => {
+      const t = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onDragOver: t }));
+      const a = o.getByTestId("drag-and-drop-zone");
+      B.dragOver(a), e(t).toHaveBeenCalledTimes(1);
+    }), l("should handle drag leave event", () => {
+      const t = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onDragLeave: t }));
+      const a = o.getByTestId("drag-and-drop-zone");
+      B.dragLeave(a), e(t).toHaveBeenCalledTimes(1);
+    }), l("should handle drop event and call onUpload", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), n = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, onDrop: n }));
+      const s = o.getByTestId("drag-and-drop-zone"), r = {
+        files: [t],
+        clearData: c.fn()
+      };
+      B.drop(s, {
+        dataTransfer: r
+      }), await f(() => {
+        e(n).toHaveBeenCalledTimes(1), e(a).toHaveBeenCalledTimes(1);
+      });
+    });
+  }), y("Validation", () => {
+    l("should validate file size and show error for oversized files", async () => {
+      const t = new File(["x".repeat(10485760)], "large.pdf", {
+        type: "application/pdf"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 1, onUpload: a }));
+      const n = o.getByTestId("drag-and-drop-input");
+      await w.upload(n, t), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument();
+        const s = o.getByTestId("drag-and-drop-file-error-0");
+        e(s.textContent).toContain("too large");
+      });
+    }), l("should validate file extension and show error for invalid extensions", async () => {
+      const t = new File(["test"], "test.txt", {
+        type: "text/plain"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a }));
+      const n = o.getByTestId("drag-and-drop-input"), s = new DataTransfer();
+      s.items.add(t), Object.defineProperty(n, "files", {
+        value: s.files,
+        writable: !1
+      }), B.change(n), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument();
+        const r = o.getByTestId("drag-and-drop-file-error-0");
+        e(r.textContent).toContain("format is incorrect");
+      });
+    }), l("should use custom validator when provided", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), n = c.fn(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (r, u) => r.name.includes("test") ? {
+          file: r,
+          error: 'Files with "test" in name are not allowed'
+        } : {
+          file: r
+        }
+      );
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, validator: n }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, t), await f(() => {
+        e(n).toHaveBeenCalledTimes(1), e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument(), e(o.getByText('Files with "test" in name are not allowed')).toBeInTheDocument();
+      });
+    }), l("should execute synchronous custom validator and display returned error message", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), n = c.fn(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (r, u) => ({
+          file: r,
+          error: "Synchronous validation failed"
+        })
+      );
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, validator: n }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, t), await f(() => {
+        e(n).toHaveBeenCalledTimes(1), e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument(), e(o.getByText("Synchronous validation failed")).toBeInTheDocument();
+      });
+    }), l("should accept first N files and mark excess files with error when maxFiles limit is exceeded", async () => {
+      const t = new File(["test1"], "test1.pdf", {
+        type: "application/pdf"
+      }), a = new File(["test2"], "test2.pdf", {
+        type: "application/pdf"
+      }), n = new File(["test3"], "test3.pdf", {
+        type: "application/pdf"
+      }), s = c.fn();
+      p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, maxFiles: 2, onUpload: s }));
+      const r = o.getByTestId("drag-and-drop-input");
+      await w.upload(r, [t, a, n]), await f(() => {
+        e(s).toHaveBeenCalledTimes(1);
+        const u = s.mock.calls[0][0];
+        e(u).toHaveLength(3), e(u[0].error).toBeUndefined(), e(u[1].error).toBeUndefined(), e(u[2].error).toContain("Maximum 2 files allowed");
+      });
+    }), l("should only accept first file when type is single and multiple files are dropped", async () => {
+      const t = new File(["test1"], "test1.pdf", {
+        type: "application/pdf"
+      }), a = new File(["test2"], "test2.pdf", {
+        type: "application/pdf"
+      }), n = c.fn();
+      p(/* @__PURE__ */ i(d, { type: "single", fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: n }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, [t, a]), await f(() => {
+        e(n).toHaveBeenCalledTimes(1);
+        const r = n.mock.calls[0][0];
+        e(r).toHaveLength(1);
+      });
+    });
+  }), y("Controlled Mode", () => {
+    l("should use controlled value when value prop is provided", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), {
+        rerender: n
+      } = p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, value: t, onUpload: a }));
+      await f(() => {
+        e(o.getByTestId("drag-and-drop-files-list")).toBeInTheDocument(), e(o.getByTestId("drag-and-drop-file-name-0")).toHaveTextContent("test.pdf");
+      });
+      const s = new File(["new"], "new.pdf", {
+        type: "application/pdf"
+      });
+      n(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, value: s, onUpload: a })), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-name-0")).toHaveTextContent("new.pdf");
+      });
+    }), l("should use controlled value array when value prop is array", async () => {
+      const t = new File(["test1"], "test1.pdf", {
+        type: "application/pdf"
+      }), a = new File(["test2"], "test2.pdf", {
+        type: "application/pdf"
+      }), n = c.fn();
+      p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, value: [t, a], onUpload: n })), await f(() => {
+        e(o.getByTestId("drag-and-drop-files-list")).toBeInTheDocument(), e(o.getByTestId("drag-and-drop-file-name-0")).toHaveTextContent("test1.pdf"), e(o.getByTestId("drag-and-drop-file-name-1")).toHaveTextContent("test2.pdf");
+      });
+    }), l("should remove files by filename in controlled mode", async () => {
+      const t = new File(["test1"], "test1.pdf", {
+        type: "application/pdf"
+      }), a = new File(["test2"], "test2.pdf", {
+        type: "application/pdf"
+      });
+      let n = [];
+      const s = c.fn((m) => {
+        n = m;
+      }), r = c.fn((m) => {
+        n = n.filter((T) => T.file.name !== m);
+      }), {
+        rerender: u
+      } = p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, value: n.map((m) => m.file), onUpload: s, onRemoveFile: r })), g = o.getByTestId("drag-and-drop-input");
+      await w.upload(g, [t, a]), await f(() => {
+        e(s).toHaveBeenCalled(), e(n.length).toBe(2);
+      }), u(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, value: n.map((m) => m.file), onUpload: s, onRemoveFile: r })), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-name-0")).toHaveTextContent("test1.pdf"), e(o.getByTestId("drag-and-drop-file-name-1")).toHaveTextContent("test2.pdf");
+      });
+      const x = o.getByTestId("drag-and-drop-remove-0");
+      B.click(x), await f(() => {
+        e(r).toHaveBeenCalledTimes(1), e(r).toHaveBeenCalledWith("test1.pdf");
+      }), e(n.length).toBe(1), e(n.find((m) => m.file.name === "test1.pdf")).toBeUndefined(), u(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, value: n.map((m) => m.file), onUpload: s, onRemoveFile: r })), await f(() => {
+        e(o.getByTestId("drag-and-drop-files-list")).toBeInTheDocument();
+        const m = n[0];
+        e(o.getByTestId("drag-and-drop-file-name-0")).toHaveTextContent(m.file.name), e(o.queryByTestId("drag-and-drop-file-name-1")).not.toBeInTheDocument();
+      });
+    });
+  }), y("File Display", () => {
+    l("should display file name", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a }));
+      const n = o.getByTestId("drag-and-drop-input");
+      await w.upload(n, t), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-name-0")).toHaveTextContent("test.pdf");
+      });
+    }), l("should display file size", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a }));
+      const n = o.getByTestId("drag-and-drop-input");
+      await w.upload(n, t), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-size-0")).toBeInTheDocument();
+      });
+    }), l("should display error message when file has error", async () => {
+      const t = new File(["test"], "test.txt", {
+        type: "text/plain"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a }));
+      const n = o.getByTestId("drag-and-drop-input"), s = new DataTransfer();
+      s.items.add(t), Object.defineProperty(n, "files", {
+        value: s.files,
+        writable: !1
+      }), B.change(n), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument();
+        const r = o.getByTestId("drag-and-drop-file-error-0");
+        e(r.textContent).toContain("format is incorrect");
+      });
+    });
+  }), y("External Errors Prop", () => {
+    l("should display external errors when no validator errors exist", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, errors: {
+        "test.pdf": "Custom external error message"
+      } }));
+      const s = o.getByTestId("drag-and-drop-input");
+      await w.upload(s, t), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument(), e(o.getByText("Custom external error message")).toBeInTheDocument();
+      });
+    }), l("should hide external errors when validator errors exist (precedence)", async () => {
+      const t = new File(["test"], "test.txt", {
+        type: "text/plain"
+      }), a = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, errors: {
+        "test.txt": "Custom external error message"
+      } }));
+      const s = o.getByTestId("drag-and-drop-input"), r = new DataTransfer();
+      r.items.add(t), Object.defineProperty(s, "files", {
+        value: r.files,
+        writable: !1
+      }), B.change(s), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument(), e(o.getByText(/format is incorrect/)).toBeInTheDocument(), e(o.queryByText("Custom external error message")).not.toBeInTheDocument();
+      });
+    }), l("should update external errors when errors prop changes", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), {
+        rerender: n
+      } = p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, value: t }));
+      await f(() => {
+        e(o.getByTestId("drag-and-drop-files-list")).toBeInTheDocument(), e(o.queryByTestId("drag-and-drop-file-error-0")).not.toBeInTheDocument();
+      }), n(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, value: t, errors: {
+        "test.pdf": "New error message"
+      } })), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument(), e(o.getByText("New error message")).toBeInTheDocument();
+      });
+    }), l("should clear external errors when errors prop is cleared", async () => {
+      const t = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), a = c.fn(), {
+        rerender: n
+      } = p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, value: t, errors: {
+        "test.pdf": "Error message"
+      } }));
+      await f(() => {
+        e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument();
+      }), n(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: a, value: t, errors: {} })), await f(() => {
+        e(o.queryByTestId("drag-and-drop-file-error-0")).not.toBeInTheDocument();
+      });
+    }), l("should handle external errors with duplicate filenames correctly", async () => {
+      const t = new File(["test1"], "test.pdf", {
+        type: "application/pdf"
+      }), a = new File(["test2"], "test.pdf", {
+        type: "application/pdf"
+      }), n = c.fn();
+      p(/* @__PURE__ */ i(d, { type: "multiple", fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: n, value: [t, a], errors: {
+        "test.pdf": "Error for duplicate filename"
+      } })), await f(() => {
+        const r = o.getAllByTestId(/drag-and-drop-file-error-/);
+        e(r.length).toBeGreaterThan(0);
+      });
+    });
+  }), y("composeValidators", () => {
+    l("should compose multiple validators correctly", () => {
+      const t = c.fn((m) => m.name.includes("test") ? {
+        file: m,
+        error: "Validator 1 error"
+      } : {
+        file: m
+      }), a = c.fn((m) => m.size > 1e3 ? {
+        file: m,
+        error: "Validator 2 error"
+      } : {
+        file: m
+      }), n = h(t, a), s = {
+        maxSize: 5,
+        fileExtensionsAllowed: ["pdf"],
+        type: "single",
+        maxFiles: 1
+      }, r = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), u = n(r, s);
+      e(u.error).toBe("Validator 1 error"), e(t).toHaveBeenCalledTimes(1), e(a).not.toHaveBeenCalled();
+      const g = new File(["x".repeat(2e3)], "valid.pdf", {
+        type: "application/pdf"
+      }), x = n(g, s);
+      e(x.error).toBe("Validator 2 error"), e(a).toHaveBeenCalledTimes(1);
+    }), l("should return first error encountered", () => {
+      const t = c.fn((g) => ({
+        file: g,
+        error: "First error"
+      })), a = c.fn((g) => ({
+        file: g,
+        error: "Second error"
+      })), n = h(t, a), s = {
+        maxSize: 5,
+        fileExtensionsAllowed: ["pdf"],
+        type: "single",
+        maxFiles: 1
+      }, r = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), u = n(r, s);
+      e(u.error).toBe("First error"), e(t).toHaveBeenCalledTimes(1), e(a).not.toHaveBeenCalled();
+    }), l("should return success when all validators pass", () => {
+      const t = c.fn((g) => ({
+        file: g
+      })), a = c.fn((g) => ({
+        file: g
+      })), n = h(t, a), s = {
+        maxSize: 5,
+        fileExtensionsAllowed: ["pdf"],
+        type: "single",
+        maxFiles: 1
+      }, r = new File(["test"], "test.pdf", {
+        type: "application/pdf"
+      }), u = n(r, s);
+      e(u.error).toBeUndefined(), e(t).toHaveBeenCalledTimes(1), e(a).toHaveBeenCalledTimes(1);
+    }), l("should work with defaultValidator in composition", () => {
+      const t = c.fn((x, m) => {
+        const T = I(x, m);
+        return T.error ? T : x.name.startsWith("reject") ? {
+          file: x,
+          error: "Custom rejection error"
+        } : {
+          file: x
+        };
+      }), a = h(I, t), n = {
+        maxSize: 1,
+        fileExtensionsAllowed: ["pdf"],
+        type: "single",
+        maxFiles: 1
+      }, s = new File(["x".repeat(2 * 1024 * 1024)], "large.pdf", {
+        type: "application/pdf"
+      }), r = a(s, n);
+      e(r.error).toContain("too large"), e(r.errorCode).toBe("SIZE_TOO_LARGE");
+      const u = new File(["test"], "reject.pdf", {
+        type: "application/pdf"
+      }), g = a(u, n);
+      e(g.error).toBe("Custom rejection error");
+    }), l("should integrate composeValidators with component", async () => {
+      const t = c.fn((u, g) => {
+        const x = I(u, g);
+        return x.error ? x : u.name.startsWith("blocked") ? {
+          file: u,
+          error: "File name blocked"
+        } : {
+          file: u
+        };
+      }), a = h(I, t), n = new File(["test"], "blocked.pdf", {
+        type: "application/pdf"
+      }), s = c.fn();
+      p(/* @__PURE__ */ i(d, { fileExtensionsAllowed: ["pdf"], maxSize: 5, onUpload: s, validator: a }));
+      const r = o.getByTestId("drag-and-drop-input");
+      await w.upload(r, n), await f(() => {
+        e(o.getByTestId("drag-and-drop-file-error-0")).toBeInTheDocument(), e(o.getByText("File name blocked")).toBeInTheDocument();
+      });
+    });
+  });
+});

package/dist/components/DragAndDrop/DragAndDrop.utils.d.ts

@@ -0,0 +1,30 @@
+import { ValidationContext, ValidationResult, Validator } from './DragAndDrop';
+/**
+ * Default validator function for file uploads.
+ * Validates file size and extension against the provided context.
+ * Can be used standalone or composed with custom validation logic.
+ *
+ * @param file - The file to validate
+ * @param context - Validation context containing maxSize, fileExtensionsAllowed, etc.
+ * @returns ValidationResult with the file and optional error message
+ */
+export declare function defaultValidator(file: File, context: ValidationContext): ValidationResult;
+/**
+ * Composes multiple validators into a single validator function.
+ * Validators are executed in order; the first error encountered is returned.
+ *
+ * @param validators - Array of validator functions to compose
+ * @returns A composed validator function
+ *
+ * @example
+ * const myValidator = composeValidators(
+ *   defaultValidator,
+ *   (file, context) => {
+ *     if (file.name.startsWith('test')) {
+ *       return { file, error: 'Test files not allowed' }
+ *     }
+ *     return { file }
+ *   }
+ * )
+ */
+export declare function composeValidators(...validators: Validator[]): Validator;

package/dist/components/FilePicker/FilePicker.d.ts

@@ -20,6 +20,8 @@ type FilePickerProps = {
     helpLink?: string;
     helpLinkText?: string;
     labelTooltip?: InputLabelTooltipProps;
+    onUpload?: (files: UploadFile[]) => void;
+    onRemoveFile?: (fileName: string) => void;
 } & InteractiveEventHandlers;
 /**
  * FilePicker component for uploading files.
@@ -42,5 +44,5 @@ type FilePickerProps = {
  * @param {InputLabelTooltipProps} props.labelTooltip - The label tooltip of the component
  * @returns {JSX.Element} The rendered FilePicker component
  */
-export default function FilePicker({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, value, label, required, placeholder, errorMessage, helpText, helpLink, helpLinkText, labelTooltip, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+export default function FilePicker({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, value, label, required, placeholder, errorMessage, helpText, helpLink, helpLinkText, labelTooltip, onUpload, onRemoveFile, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};