@alixpartners/ui-components 2.4.2 → 2.4.4

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

@@ -39,16 +39,19 @@ type DragAndDropProps = {
     label?: string;
     required?: boolean;
     fileExtensionsAllowed: string[];
-    maxSize: number;
+    maxSize?: number;
     maxFiles?: number;
     value?: File | File[];
     onUpload?: (files: UploadFile[]) => void;
     /**
      * Callback fired when a file is removed.
-     * @param fileName - Name of the file to remove
+     * @param removedFile - The file that was removed
+     * @param remaining - The list of files remaining after removal
      */
-    onRemoveFile?: (fileName: string) => void;
+    onRemoveFile?: (removedFile: File, remaining: UploadFile[]) => void;
     queueFiles?: boolean;
+    maxSizeErrorMessage?: string;
+    fileExtensionInvalidErrorMessage?: string;
     /**
      * Customizable text content for the component.
      * @note Should be memoized (e.g., using `useMemo`) to prevent unnecessary re-renders.
@@ -83,12 +86,12 @@ type DragAndDropProps = {
  * @param {string} [props.label] - Optional label displayed above the drop area
  * @param {boolean} [props.required] - Whether the field is required; shows an asterisk
  * @param {string[]} props.fileExtensionsAllowed - Allowed file extensions (e.g. ['pdf','png'])
- * @param {number} props.maxSize - Maximum file size in MB
+ * @param {number} [props.maxSize] - Maximum file size in MB; default no limit
  * @param {number} [props.maxFiles] - Maximum number of files when type is 'multiple'
  * @param {File | File[]} [props.value] - Controlled value for the component; accepts a single File or array of Files
  * @param {(files: UploadFile[]) => void} [props.onUpload] - Callback fired with validated files upon selection or drop
  * @param {boolean} [props.queueFiles] - When true, newly selected files are appended to the existing list
  * @returns {JSX.Element} The rendered DragAndDrop component
  */
-export default function DragAndDrop({ label, type, disabled, required, fileExtensionsAllowed, maxSize, maxFiles, value, onUpload, onRemoveFile, queueFiles, className, texts, fileIcon, errorIcon, deleteIcon, browseButtonIcon, renderFileItem, fileSizeFormatter, browseButtonProps, validator, errors: externalErrors, ...props }: DragAndDropProps): import("react/jsx-runtime").JSX.Element;
+export default function DragAndDrop({ label, type, disabled, required, fileExtensionsAllowed, maxSize, maxFiles, value, onUpload, onRemoveFile, queueFiles, className, maxSizeErrorMessage, fileExtensionInvalidErrorMessage, texts, fileIcon, errorIcon, deleteIcon, browseButtonIcon, renderFileItem, fileSizeFormatter, browseButtonProps, validator, errors: externalErrors, ...props }: DragAndDropProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DragAndDrop/DragAndDrop.js

@@ -1,16 +1,16 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { useId as hr, useRef as Nr, useState as Q, useCallback as m, useMemo as A } from "react";
-import R from "../Button/Button.js";
-import { c as J } from "../../clsx-OuTLNxxd.js";
-import K from "../Icon/Icon.js";
-import '../../assets/DragAndDrop.css';const Ar = "DragAndDrop-module__disabled___h47do", vr = "DragAndDrop-module__required___z3cHB", Ir = "DragAndDrop-module__active___ZMuEx", n = {
+import { jsxs as _, jsx as t } from "react/jsx-runtime";
+import { useId as vr, useRef as Lr, useState as J, useCallback as g, useMemo as A } from "react";
+import K from "../Button/Button.js";
+import { c as U } from "../../clsx-OuTLNxxd.js";
+import x from "../Icon/Icon.js";
+import '../../assets/DragAndDrop.css';const Cr = "DragAndDrop-module__disabled___h47do", br = "DragAndDrop-module__required___z3cHB", Or = "DragAndDrop-module__active___ZMuEx", d = {
   "drag-and-drop-container": "DragAndDrop-module__drag-and-drop-container___WHqGh",
-  disabled: Ar,
-  required: vr,
+  disabled: Cr,
+  required: br,
   "drag-and-drop-space-text-message": "DragAndDrop-module__drag-and-drop-space-text-message___fL-Ac",
   "drag-and-drop-space-text-constraints": "DragAndDrop-module__drag-and-drop-space-text-constraints___YrL7J",
   "drag-and-drop-space": "DragAndDrop-module__drag-and-drop-space___09a0I",
-  active: Ir,
+  active: Or,
   "drag-and-drop-space-text": "DragAndDrop-module__drag-and-drop-space-text___-8rqC",
   "drag-and-drop-files-list": "DragAndDrop-module__drag-and-drop-files-list___7WNCk",
   "drag-and-drop-files-list-item": "DragAndDrop-module__drag-and-drop-files-list-item___vQO6M",
@@ -24,160 +24,160 @@ import '../../assets/DragAndDrop.css';const Ar = "DragAndDrop-module__disabled__
   "drag-and-drop-files-list-item-error": "DragAndDrop-module__drag-and-drop-files-list-item-error___yR0DY",
   "drag-and-drop-files-list-item-icon-error": "DragAndDrop-module__drag-and-drop-files-list-item-icon-error___17EE-",
   "drag-and-drop-files-list-item-icon-delete": "DragAndDrop-module__drag-and-drop-files-list-item-icon-delete___Z1l-B"
-};
-function Or({
-  label: k,
+}, Br = (u) => `File size is too large. Must be up to ${u}MB.`, Sr = (u) => `The file format is incorrect. Please make sure it is one of the extensions: ${u}.`;
+function Rr({
+  label: u,
   type: i = "single",
-  disabled: w,
-  required: F,
+  disabled: q,
+  required: rr,
   fileExtensionsAllowed: c,
-  maxSize: p,
+  maxSize: p = Number.POSITIVE_INFINITY,
   maxFiles: l = Number.POSITIVE_INFINITY,
-  value: f,
-  onUpload: _,
-  onRemoveFile: v,
-  queueFiles: q,
-  className: U,
-  texts: e,
-  fileIcon: x = "ap-icon-document",
-  errorIcon: rr = "ap-icon-alert",
-  deleteIcon: er = "ap-icon-delete",
-  browseButtonIcon: ar,
-  renderFileItem: j,
-  fileSizeFormatter: C,
-  browseButtonProps: nr,
-  validator: b,
-  errors: I,
-  ...ir
+  value: D,
+  onUpload: m,
+  onRemoveFile: I,
+  queueFiles: P,
+  className: er,
+  maxSizeErrorMessage: T,
+  fileExtensionInvalidErrorMessage: v,
+  texts: a,
+  fileIcon: ar = "ap-icon-document",
+  errorIcon: nr = "ap-icon-alert",
+  deleteIcon: dr = "ap-icon-delete",
+  browseButtonIcon: ir,
+  renderFileItem: V,
+  fileSizeFormatter: O,
+  browseButtonProps: or,
+  validator: B,
+  errors: L,
+  ...sr
 }) {
-  const y = hr(), P = Nr(null), [u, S] = Q([]), [V, L] = Q(!1), D = f !== void 0, Y = c.join(", "), Z = p ? `up to ${p}MB` : "", dr = c.map((r) => `.${r.replace(/^\./, "")}`).join(","), G = m((r, a) => {
+  const j = vr(), y = Lr(null), [C, Y] = J([]), [G, S] = J(!1), h = D !== void 0, M = c.join(", "), X = p ? `up to ${p}MB` : "", tr = c.map((r) => `.${r.replace(/^\./, "")}`).join(","), Z = g((r, e) => {
     if (!r) return r || "";
-    if (e != null && e.errors && a) {
-      if (a === "SIZE_TOO_LARGE" && e.errors.sizeTooLarge)
-        return typeof e.errors.sizeTooLarge == "function" ? e.errors.sizeTooLarge(p) : e.errors.sizeTooLarge;
-      if (a === "INVALID_EXTENSION" && e.errors.invalidExtension)
-        return typeof e.errors.invalidExtension == "function" ? e.errors.invalidExtension(c) : e.errors.invalidExtension;
+    if (a != null && a.errors && e) {
+      if (e === "SIZE_TOO_LARGE" && a.errors.sizeTooLarge)
+        return typeof a.errors.sizeTooLarge == "function" ? a.errors.sizeTooLarge(p) : a.errors.sizeTooLarge;
+      if (e === "INVALID_EXTENSION" && a.errors.invalidExtension)
+        return typeof a.errors.invalidExtension == "function" ? a.errors.invalidExtension(c) : a.errors.invalidExtension;
     }
     return r;
-  }, [e, p, c]), or = m(() => e != null && e.browse ? typeof e.browse == "function" ? e.browse(i) : e.browse : i === "single" ? "Browse file" : "Browse files", [e, i]), sr = m(() => e != null && e.drag ? typeof e.drag == "function" ? e.drag(i) : e.drag : i === "single" ? "or drag your file" : "or drag multiple files", [e, i]), tr = m(() => e != null && e.constraints ? e.constraints({
+  }, [a, p, c]), lr = g(() => a != null && a.browse ? typeof a.browse == "function" ? a.browse(i) : a.browse : i === "single" ? "Browse file" : "Browse files", [a, i]), cr = g(() => a != null && a.drag ? typeof a.drag == "function" ? a.drag(i) : a.drag : i === "single" ? "or drag your file" : "or drag multiple files", [a, i]), _r = g(() => a != null && a.constraints ? a.constraints({
     extensions: c,
     maxSize: p,
     type: i
-  }) : `${Y} ${i === "single" ? "file" : "files"} ${Z}`, [e, c, Y, p, Z, i]), lr = () => {
+  }) : `${M} ${i === "single" ? "file" : "files"} ${X}`, [a, c, M, p, X, i]), gr = () => {
     var r;
-    N || (r = P.current) == null || r.click();
-  }, B = A(() => new Set(c.map((r) => r.toLowerCase().replace(/^\./, ""))), [c]), H = m((r, a) => {
-    const s = a.maxSize ? a.maxSize * 1024 * 1024 : Number.POSITIVE_INFINITY, o = r.size <= s, h = r.name.toLowerCase(), ur = h.includes(".") ? h.split(".").pop() ?? "" : "", Dr = B.size === 0 || B.has(ur);
-    return o ? Dr ? {
+    N || (r = y.current) == null || r.click();
+  }, $ = A(() => new Set(c.map((r) => r.toLowerCase().replace(/^\./, ""))), [c]), H = g((r, e) => {
+    const s = e.maxSize ? e.maxSize * 1024 * 1024 : Number.POSITIVE_INFINITY, o = e.fileExtensionsAllowed.join(", "), f = (T == null ? void 0 : T.replace(/\{maxSize\}/g, String(e.maxSize))) ?? Br(e.maxSize), Nr = (v == null ? void 0 : v.replace(/\{fileExtensionsAllowed\}/g, o)) ?? Sr(o), Ar = r.size <= s, Q = r.name.toLowerCase(), Ir = Q.includes(".") ? Q.split(".").pop() ?? "" : "", Tr = $.size === 0 || $.has(Ir);
+    return Ar ? Tr ? {
       file: r
     } : {
       file: r,
-      error: `The file format is incorrect. Please make sure it is one of the extensions: ${a.fileExtensionsAllowed.join(", ")}.`,
+      error: Nr,
       errorCode: "INVALID_EXTENSION"
     } : {
       file: r,
-      error: `File size is too large. Must be up to ${a.maxSize}MB.`,
+      error: f,
       errorCode: "SIZE_TOO_LARGE"
     };
-  }, [B]), O = A(() => ({
+  }, [$, T, v]), k = A(() => ({
     maxSize: p,
     fileExtensionsAllowed: c,
     type: i,
     maxFiles: l
-  }), [p, c, i, l]), T = m((r) => {
-    let a;
-    b ? a = r.map((o) => b(o, O)) : a = r.map((o) => H(o, O));
-    let s = a.map((o) => {
-      const h = o.error ? G(o.error, o.errorCode) : void 0;
+  }), [p, c, i, l]), b = g((r) => {
+    let e;
+    B ? e = r.map((o) => B(o, k)) : e = r.map((o) => H(o, k));
+    let s = e.map((o) => {
+      const f = o.error ? Z(o.error, o.errorCode) : void 0;
       return {
         file: o.file,
         // Don't merge external errors here - that happens in files useMemo
-        error: h
+        error: f
       };
     });
-    return i === "single" && s.length > 1 ? s.slice(0, 1) : (l && l > 0 && s.length > l && (s = s.map((o, h) => h < l ? o : {
+    return i === "single" && s.length > 1 ? s.slice(0, 1) : (l && l > 0 && s.length > l && (s = s.map((o, f) => f < l ? o : {
       ...o,
       error: o.error ?? `Maximum ${l} file${l === 1 ? "" : "s"} allowed.`
     })), s);
-  }, [i, l, b, O, G, H]), d = A(() => {
+  }, [i, l, B, k, Z, H]), n = A(() => {
     let r;
-    if (D) {
-      const a = Array.isArray(f) ? f : f ? [f] : [];
-      r = T(a);
+    if (h) {
+      const e = Array.isArray(D) ? D : D ? [D] : [];
+      r = b(e);
     } else
-      r = u;
-    return r.map((a) => ({
-      ...a,
+      r = C;
+    return r.map((e) => ({
+      ...e,
       // Validator errors take precedence over external errors
-      error: a.error ?? (I == null ? void 0 : I[a.file.name])
+      error: e.error ?? (L == null ? void 0 : L[e.file.name])
     }));
-  }, [D, f, T, u, I]), cr = m((r) => C ? C(r) : (r / 1024).toFixed(2) + " KB", [C]), N = A(() => w || (d == null ? void 0 : d.length) >= l || i === "single" && (d == null ? void 0 : d.length) > 0, [w, d, l, i]), W = m((r) => {
-    const a = T(r);
-    if (D)
-      _ == null || _(a);
+  }, [h, D, b, C, L]), pr = g((r) => O ? O(r) : (r / 1024).toFixed(2) + " KB", [O]), N = A(() => q || (n == null ? void 0 : n.length) >= l || i === "single" && (n == null ? void 0 : n.length) > 0, [q, n, l, i]), W = g((r) => {
+    const e = b(r);
+    if (h)
+      m == null || m(e);
     else {
-      const s = q ? [...u, ...a] : a;
-      S(s), _ == null || _(s);
+      const s = P ? [...C, ...e] : e;
+      Y(s), m == null || m(s);
     }
-  }, [T, D, q, u, _]), gr = (r) => {
+  }, [b, h, P, C, m]), mr = (r) => {
     if (!r.target.files) return;
-    const a = Array.from(r.target.files);
-    W(a), r.target.value = "";
-  }, z = m((r) => {
-    if (!D) {
-      const a = u.filter((s) => s.file.name !== r);
-      S(a);
-    }
-    v == null || v(r);
-  }, [D, u, v]), X = A(() => new Map(d.map((r) => [r.file.name, () => z(r.file.name)])), [d, z]), {
+    const e = Array.from(r.target.files);
+    W(e), r.target.value = "";
+  }, w = g((r) => {
+    if (!(n != null && n.length) || r < 0 || r >= n.length) return;
+    const e = n[r], s = n.filter((o, f) => f !== r);
+    h || Y(s), I == null || I(e.file, s);
+  }, [h, n, I]), F = A(() => new Map(n.map((r, e) => [e, () => w(e)])), [n, w]), {
     onDragOver: E,
-    onDragLeave: M,
-    onDrop: $,
-    ...mr
-  } = ir, pr = (r) => {
-    N || (r.preventDefault(), V || L(!0), E == null || E(r));
-  }, _r = (r) => {
-    r.preventDefault(), L(!1), M == null || M(r);
-  }, fr = (r) => {
+    onDragLeave: z,
+    onDrop: R,
+    ...fr
+  } = sr, ur = (r) => {
+    N || (r.preventDefault(), G || S(!0), E == null || E(r));
+  }, Dr = (r) => {
+    r.preventDefault(), S(!1), z == null || z(r);
+  }, hr = (r) => {
     if (N) return;
     r.preventDefault();
-    const a = Array.from(r.dataTransfer.files);
-    W(a), r.dataTransfer.clearData(), L(!1), $ == null || $(r);
+    const e = Array.from(r.dataTransfer.files);
+    W(e), r.dataTransfer.clearData(), S(!1), R == null || R(r);
   };
-  return /* @__PURE__ */ g("div", { className: J(n["drag-and-drop-container"], N && n.disabled, U), ...mr, children: [
-    k && /* @__PURE__ */ g("label", { htmlFor: y, children: [
-      k,
-      F && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: n.required, children: "*" })
+  return /* @__PURE__ */ _("div", { className: U(d["drag-and-drop-container"], N && d.disabled, er), ...fr, children: [
+    u && /* @__PURE__ */ _("label", { htmlFor: j, children: [
+      u,
+      rr && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: d.required, children: "*" })
     ] }),
-    /* @__PURE__ */ g("div", { className: J(n["drag-and-drop-space"], V && n.active), onDragOver: pr, onDragLeave: _r, onDrop: fr, children: [
-      /* @__PURE__ */ t(R, { type: "secondary", variant: "default", size: "sm", ...nr, disabled: N, onClick: lr, icon: ar, children: or() }),
-      /* @__PURE__ */ t("input", { id: y, ref: P, type: "file", style: {
+    /* @__PURE__ */ _("div", { className: U(d["drag-and-drop-space"], G && d.active), onDragOver: ur, onDragLeave: Dr, onDrop: hr, children: [
+      /* @__PURE__ */ t(K, { type: "secondary", variant: "default", size: "sm", ...or, disabled: N, onClick: gr, icon: ir, children: lr() }),
+      /* @__PURE__ */ t("input", { id: j, ref: y, type: "file", style: {
         display: "none"
-      }, multiple: i === "multiple", accept: dr, onChange: gr }),
-      /* @__PURE__ */ g("div", { className: n["drag-and-drop-space-text"], children: [
-        /* @__PURE__ */ t("span", { className: n["drag-and-drop-space-text-message"], children: sr() }),
-        /* @__PURE__ */ g("span", { className: n["drag-and-drop-space-text-constraints"], children: [
+      }, multiple: i === "multiple", accept: tr, onChange: mr }),
+      /* @__PURE__ */ _("div", { className: d["drag-and-drop-space-text"], children: [
+        /* @__PURE__ */ t("span", { className: d["drag-and-drop-space-text-message"], children: cr() }),
+        /* @__PURE__ */ _("span", { className: d["drag-and-drop-space-text-constraints"], children: [
           " ",
-          tr()
+          _r()
         ] })
       ] })
     ] }),
-    (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ t("ul", { className: n["drag-and-drop-files-list"], children: d == null ? void 0 : d.map((r, a) => j ? /* @__PURE__ */ t("li", { children: j(r, a, X.get(r.file.name) ?? (() => z(r.file.name))) }, r.file.name) : /* @__PURE__ */ t("li", { className: n["drag-and-drop-files-list-item"], children: /* @__PURE__ */ g("div", { className: n["drag-and-drop-files-list-item-content"], children: [
-      /* @__PURE__ */ t("span", { className: n["drag-and-drop-files-list-item-icon-container"], children: /* @__PURE__ */ t(K, { icon: x, className: n["drag-and-drop-files-list-item-icon"] }) }),
-      /* @__PURE__ */ g("div", { className: n["drag-and-drop-files-list-item-content-data"], children: [
-        /* @__PURE__ */ g("div", { className: n["drag-and-drop-files-list-item-text"], children: [
-          /* @__PURE__ */ t("span", { className: n["drag-and-drop-files-list-item-name"], children: r.file.name }),
-          /* @__PURE__ */ t("span", { className: n["drag-and-drop-files-list-item-size"], children: cr(r.file.size) }),
-          r.error && /* @__PURE__ */ g("span", { className: n["drag-and-drop-files-list-item-error"], children: [
-            /* @__PURE__ */ t(K, { icon: rr, className: n["drag-and-drop-files-list-item-icon-error"] }),
+    (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ t("ul", { className: d["drag-and-drop-files-list"], children: n == null ? void 0 : n.map((r, e) => V ? /* @__PURE__ */ t("li", { children: V(r, e, F.get(e) ?? (() => w(e))) }, e) : /* @__PURE__ */ t("li", { className: d["drag-and-drop-files-list-item"], children: /* @__PURE__ */ _("div", { className: d["drag-and-drop-files-list-item-content"], children: [
+      /* @__PURE__ */ t("span", { className: d["drag-and-drop-files-list-item-icon-container"], children: /* @__PURE__ */ t(x, { icon: ar, className: d["drag-and-drop-files-list-item-icon"] }) }),
+      /* @__PURE__ */ _("div", { className: d["drag-and-drop-files-list-item-content-data"], children: [
+        /* @__PURE__ */ _("div", { className: d["drag-and-drop-files-list-item-text"], children: [
+          /* @__PURE__ */ t("span", { className: d["drag-and-drop-files-list-item-name"], children: r.file.name }),
+          /* @__PURE__ */ t("span", { className: d["drag-and-drop-files-list-item-size"], children: pr(r.file.size) }),
+          r.error && /* @__PURE__ */ _("span", { className: d["drag-and-drop-files-list-item-error"], children: [
+            /* @__PURE__ */ t(x, { icon: nr, className: d["drag-and-drop-files-list-item-icon-error"] }),
             r.error
           ] })
         ] }),
-        /* @__PURE__ */ t(R, { type: "tertiary", variant: "default", size: "sm", onClick: X.get(r.file.name), icon: er, iconClassName: n["drag-and-drop-files-list-item-icon-delete"], "aria-label": `Remove ${r.file.name}` })
+        /* @__PURE__ */ t(K, { type: "tertiary", variant: "default", size: "sm", onClick: F.get(e), icon: dr, iconClassName: d["drag-and-drop-files-list-item-icon-delete"], "aria-label": `Remove ${r.file.name}` })
       ] })
-    ] }) }, r.file.name)) })
+    ] }) }, e)) })
   ] });
 }
 export {
-  Or as default
+  Rr as default
 };

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

@@ -1,7 +1,7 @@
 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 { c as T, d as I } from "../../DragAndDrop.utils-D3xTV9EK.js";
 import { u as w } from "../../index-DkTDHhag.js";
 y("DragAndDrop", () => {
   y("Rendering", () => {
@@ -223,7 +223,9 @@ y("DragAndDrop", () => {
         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(() => {
+      B.click(r), e(n).toHaveBeenCalledTimes(1);
+      const [u, g] = n.mock.calls[0];
+      e(u).toBe(t), e(g).toHaveLength(0), await f(() => {
         e(o.queryByTestId("drag-and-drop-files-list")).not.toBeInTheDocument();
       });
     }), l("should queue files when queueFiles is true", async () => {
@@ -389,8 +391,8 @@ y("DragAndDrop", () => {
       let n = [];
       const s = c.fn((m) => {
         n = m;
-      }), r = c.fn((m) => {
-        n = n.filter((T) => T.file.name !== m);
+      }), r = c.fn((m, h) => {
+        n = h;
       }), {
         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");
@@ -401,7 +403,9 @@ y("DragAndDrop", () => {
       });
       const x = o.getByTestId("drag-and-drop-remove-0");
       B.click(x), await f(() => {
-        e(r).toHaveBeenCalledTimes(1), e(r).toHaveBeenCalledWith("test1.pdf");
+        e(r).toHaveBeenCalledTimes(1);
+        const [m, h] = r.mock.calls[0];
+        e(m).toBe(t), e(h).toHaveLength(1), e(h[0].file).toBe(a);
       }), 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];
@@ -519,7 +523,7 @@ y("DragAndDrop", () => {
         error: "Validator 2 error"
       } : {
         file: m
-      }), n = h(t, a), s = {
+      }), n = T(t, a), s = {
         maxSize: 5,
         fileExtensionsAllowed: ["pdf"],
         type: "single",
@@ -539,7 +543,7 @@ y("DragAndDrop", () => {
       })), a = c.fn((g) => ({
         file: g,
         error: "Second error"
-      })), n = h(t, a), s = {
+      })), n = T(t, a), s = {
         maxSize: 5,
         fileExtensionsAllowed: ["pdf"],
         type: "single",
@@ -553,7 +557,7 @@ y("DragAndDrop", () => {
         file: g
       })), a = c.fn((g) => ({
         file: g
-      })), n = h(t, a), s = {
+      })), n = T(t, a), s = {
         maxSize: 5,
         fileExtensionsAllowed: ["pdf"],
         type: "single",
@@ -564,14 +568,14 @@ y("DragAndDrop", () => {
       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") ? {
+        const h = I(x, m);
+        return h.error ? h : x.name.startsWith("reject") ? {
           file: x,
           error: "Custom rejection error"
         } : {
           file: x
         };
-      }), a = h(I, t), n = {
+      }), a = T(I, t), n = {
         maxSize: 1,
         fileExtensionsAllowed: ["pdf"],
         type: "single",
@@ -593,7 +597,7 @@ y("DragAndDrop", () => {
         } : {
           file: u
         };
-      }), a = h(I, t), n = new File(["test"], "blocked.pdf", {
+      }), a = T(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 }));

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

@@ -31,15 +31,16 @@ export type FilePickerContextValue = {
     inputRef: React.RefObject<HTMLInputElement | null>;
     triggerInput: () => void;
     handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
-    handleRemoveFile: (fileName: string) => void;
+    handleRemoveFile: (index: number) => void;
     displayFileSize: (size: number) => string;
+    uploadedFileAppendedRow?: (item: UploadFile, index: number) => ReactNode;
 };
 declare function useFilePickerContext(): FilePickerContextValue;
 type FilePickerProps = {
     type?: 'single' | 'multiple';
     maxFiles?: number;
     fileExtensionsAllowed: string[];
-    maxSize: number;
+    maxSize?: number;
     queueFiles?: boolean;
     isUploadDisabled?: boolean;
     disabled?: boolean;
@@ -48,21 +49,24 @@ type FilePickerProps = {
     required?: boolean;
     placeholder?: string;
     errorMessage?: string;
+    maxSizeErrorMessage?: string;
+    fileExtensionInvalidErrorMessage?: string;
     helpText?: string;
     helpLink?: string;
     helpLinkText?: string;
     multipleHelpText?: string;
     multipleButtonHelpText?: string;
     labelTooltip?: InputLabelTooltipProps;
+    uploadedFileAppendedRow?: (item: UploadFile, index: number) => ReactNode;
     onUpload?: (files: UploadFile[]) => void;
-    onRemoveFile?: (fileName: string) => void;
+    onRemoveFile?: (removedFile: File, remaining: UploadFile[]) => void;
     children?: ReactNode;
 } & InteractiveEventHandlers;
 /**
  * FilePicker root. Use with no children for default layout, or compose with
  * FilePicker.Label, FilePicker.BrowseButton, FilePicker.HelpText, FilePicker.UploadedFilesList, etc.
  */
-declare function FilePickerRoot({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, isUploadDisabled, value, label, required, placeholder, errorMessage, helpText, helpLink, helpLinkText, multipleHelpText, multipleButtonHelpText, labelTooltip, onUpload, onRemoveFile, children, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function FilePickerRoot({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, isUploadDisabled, value, label, required, placeholder, errorMessage, maxSizeErrorMessage, fileExtensionInvalidErrorMessage, helpText, helpLink, helpLinkText, multipleHelpText, multipleButtonHelpText, labelTooltip, uploadedFileAppendedRow, onUpload, onRemoveFile, children, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
 type FilePickerLabelProps = {
     /** Override label text. If not provided, uses FilePicker's label prop. */
     children?: ReactNode;