@alixpartners/ui-components 2.4.3 → 2.4.4

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

@@ -45,9 +45,10 @@ type DragAndDropProps = {
     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;

package/dist/components/DragAndDrop/DragAndDrop.js

@@ -1,9 +1,9 @@
 import { jsxs as _, jsx as t } from "react/jsx-runtime";
-import { useId as vr, useRef as Lr, useState as J, useCallback as p, useMemo as I } from "react";
+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", n = {
+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: Cr,
   required: br,
@@ -24,23 +24,23 @@ import '../../assets/DragAndDrop.css';const Cr = "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"
-}, Br = (f) => `File size is too large. Must be up to ${f}MB.`, Sr = (f) => `The file format is incorrect. Please make sure it is one of the extensions: ${f}.`;
+}, 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: f,
-  type: d = "single",
+  label: u,
+  type: i = "single",
   disabled: q,
   required: rr,
   fileExtensionsAllowed: c,
-  maxSize: g = Number.POSITIVE_INFINITY,
+  maxSize: p = Number.POSITIVE_INFINITY,
   maxFiles: l = Number.POSITIVE_INFINITY,
-  value: u,
+  value: D,
   onUpload: m,
-  onRemoveFile: T,
+  onRemoveFile: I,
   queueFiles: P,
   className: er,
-  maxSizeErrorMessage: v,
-  fileExtensionInvalidErrorMessage: L,
-  texts: e,
+  maxSizeErrorMessage: T,
+  fileExtensionInvalidErrorMessage: v,
+  texts: a,
   fileIcon: ar = "ap-icon-document",
   errorIcon: nr = "ap-icon-alert",
   deleteIcon: dr = "ap-icon-delete",
@@ -49,27 +49,27 @@ function Rr({
   fileSizeFormatter: O,
   browseButtonProps: or,
   validator: B,
-  errors: C,
+  errors: L,
   ...sr
 }) {
-  const j = vr(), y = Lr(null), [D, Y] = J([]), [G, S] = J(!1), h = u !== void 0, M = c.join(", "), X = g ? `up to ${g}MB` : "", tr = c.map((r) => `.${r.replace(/^\./, "")}`).join(","), Z = p((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(g) : 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, g, c]), lr = p(() => e != null && e.browse ? typeof e.browse == "function" ? e.browse(d) : e.browse : d === "single" ? "Browse file" : "Browse files", [e, d]), cr = p(() => e != null && e.drag ? typeof e.drag == "function" ? e.drag(d) : e.drag : d === "single" ? "or drag your file" : "or drag multiple files", [e, d]), _r = p(() => 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: g,
-    type: d
-  }) : `${M} ${d === "single" ? "file" : "files"} ${X}`, [e, c, M, g, X, d]), pr = () => {
+    maxSize: p,
+    type: i
+  }) : `${M} ${i === "single" ? "file" : "files"} ${X}`, [a, c, M, p, X, i]), gr = () => {
     var r;
     N || (r = y.current) == null || r.click();
-  }, w = I(() => new Set(c.map((r) => r.toLowerCase().replace(/^\./, ""))), [c]), F = p((r, a) => {
-    const s = a.maxSize ? a.maxSize * 1024 * 1024 : Number.POSITIVE_INFINITY, o = a.fileExtensionsAllowed.join(", "), A = (v == null ? void 0 : v.replace(/\{maxSize\}/g, String(a.maxSize))) ?? Br(a.maxSize), Nr = (L == null ? void 0 : L.replace(/\{fileExtensionsAllowed\}/g, o)) ?? Sr(o), Ar = r.size <= s, Q = r.name.toLowerCase(), Ir = Q.includes(".") ? Q.split(".").pop() ?? "" : "", Tr = w.size === 0 || w.has(Ir);
+  }, $ = 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
     } : {
@@ -78,60 +78,58 @@ function Rr({
       errorCode: "INVALID_EXTENSION"
     } : {
       file: r,
-      error: A,
+      error: f,
       errorCode: "SIZE_TOO_LARGE"
     };
-  }, [w, v, L]), $ = I(() => ({
-    maxSize: g,
+  }, [$, T, v]), k = A(() => ({
+    maxSize: p,
     fileExtensionsAllowed: c,
-    type: d,
+    type: i,
     maxFiles: l
-  }), [g, c, d, l]), b = p((r) => {
-    let a;
-    B ? a = r.map((o) => B(o, $)) : a = r.map((o) => F(o, $));
-    let s = a.map((o) => {
-      const A = o.error ? Z(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: A
+        error: f
       };
     });
-    return d === "single" && s.length > 1 ? s.slice(0, 1) : (l && l > 0 && s.length > l && (s = s.map((o, A) => A < 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);
-  }, [d, l, B, $, Z, F]), i = I(() => {
+  }, [i, l, B, k, Z, H]), n = A(() => {
     let r;
     if (h) {
-      const a = Array.isArray(u) ? u : u ? [u] : [];
-      r = b(a);
+      const e = Array.isArray(D) ? D : D ? [D] : [];
+      r = b(e);
     } else
-      r = D;
-    return r.map((a) => ({
-      ...a,
+      r = C;
+    return r.map((e) => ({
+      ...e,
       // Validator errors take precedence over external errors
-      error: a.error ?? (C == null ? void 0 : C[a.file.name])
+      error: e.error ?? (L == null ? void 0 : L[e.file.name])
     }));
-  }, [h, u, b, D, C]), gr = p((r) => O ? O(r) : (r / 1024).toFixed(2) + " KB", [O]), N = I(() => q || (i == null ? void 0 : i.length) >= l || d === "single" && (i == null ? void 0 : i.length) > 0, [q, i, l, d]), H = p((r) => {
-    const a = b(r);
+  }, [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(a);
+      m == null || m(e);
     else {
-      const s = P ? [...D, ...a] : a;
+      const s = P ? [...C, ...e] : e;
       Y(s), m == null || m(s);
     }
-  }, [b, h, P, D, m]), mr = (r) => {
+  }, [b, h, P, C, m]), mr = (r) => {
     if (!r.target.files) return;
-    const a = Array.from(r.target.files);
-    H(a), r.target.value = "";
-  }, k = p((r) => {
-    if (!h) {
-      const a = D.filter((s) => s.file.name !== r);
-      Y(a);
-    }
-    T == null || T(r);
-  }, [h, D, T]), W = I(() => new Map(i.map((r) => [r.file.name, () => k(r.file.name)])), [i, k]), {
+    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: z,
     onDrop: R,
@@ -143,41 +141,41 @@ function Rr({
   }, hr = (r) => {
     if (N) return;
     r.preventDefault();
-    const a = Array.from(r.dataTransfer.files);
-    H(a), r.dataTransfer.clearData(), S(!1), R == null || R(r);
+    const e = Array.from(r.dataTransfer.files);
+    W(e), r.dataTransfer.clearData(), S(!1), R == null || R(r);
   };
-  return /* @__PURE__ */ _("div", { className: U(n["drag-and-drop-container"], N && n.disabled, er), ...fr, children: [
-    f && /* @__PURE__ */ _("label", { htmlFor: j, children: [
-      f,
-      rr && /* @__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__ */ _("div", { className: U(n["drag-and-drop-space"], G && n.active), onDragOver: ur, onDragLeave: Dr, onDrop: hr, children: [
-      /* @__PURE__ */ t(K, { type: "secondary", variant: "default", size: "sm", ...or, disabled: N, onClick: pr, icon: ir, children: lr() }),
+    /* @__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: d === "multiple", accept: tr, onChange: mr }),
-      /* @__PURE__ */ _("div", { className: n["drag-and-drop-space-text"], children: [
-        /* @__PURE__ */ t("span", { className: n["drag-and-drop-space-text-message"], children: cr() }),
-        /* @__PURE__ */ _("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: [
           " ",
           _r()
         ] })
       ] })
     ] }),
-    (i == null ? void 0 : i.length) > 0 && /* @__PURE__ */ t("ul", { className: n["drag-and-drop-files-list"], children: i == null ? void 0 : i.map((r, a) => V ? /* @__PURE__ */ t("li", { children: V(r, a, W.get(r.file.name) ?? (() => k(r.file.name))) }, r.file.name) : /* @__PURE__ */ t("li", { className: n["drag-and-drop-files-list-item"], children: /* @__PURE__ */ _("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(x, { icon: ar, className: n["drag-and-drop-files-list-item-icon"] }) }),
-      /* @__PURE__ */ _("div", { className: n["drag-and-drop-files-list-item-content-data"], children: [
-        /* @__PURE__ */ _("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: gr(r.file.size) }),
-          r.error && /* @__PURE__ */ _("span", { className: n["drag-and-drop-files-list-item-error"], children: [
-            /* @__PURE__ */ t(x, { icon: nr, 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(K, { type: "tertiary", variant: "default", size: "sm", onClick: W.get(r.file.name), icon: dr, 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 {

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,7 +31,7 @@ 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;
 };
@@ -59,7 +59,7 @@ type FilePickerProps = {
     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;
 /**

package/dist/components/FilePicker/FilePicker.js

@@ -1,7 +1,7 @@
-import { jsxs as c, jsx as t, Fragment as ce } from "react/jsx-runtime";
-import { createContext as ae, useId as pe, useRef as ue, useState as M, useCallback as _, useEffect as me, useContext as de } from "react";
+import { jsxs as r, jsx as t, Fragment as ce } from "react/jsx-runtime";
+import { createContext as ae, useId as pe, useRef as ue, useState as A, useCallback as _, useEffect as me, useContext as de } from "react";
 import _e from "../Tooltip/Tooltip.js";
-import B from "../Icon/Icon.js";
+import R from "../Icon/Icon.js";
 import y from "../Button/Button.js";
 import { c as D } from "../../clsx-OuTLNxxd.js";
 import '../../assets/FilePicker.css';const Fe = "FilePicker-module__container___knCCi", Ie = "FilePicker-module__containerMultiple___Psi5u", Le = "FilePicker-module__label___al7Xe", he = "FilePicker-module__required___41Vjd", ke = "FilePicker-module__labelTooltipIcon___Cc1QF", ge = "FilePicker-module__helpers___79-g5", fe = "FilePicker-module__helperText___ja9Rr", Ne = "FilePicker-module__errorMessage___TvHrL", Pe = "FilePicker-module__singleFileHelpLinkContainer___mpjUf", Ce = "FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b", Te = "FilePicker-module__helpLink___uu45D", be = "FilePicker-module__input___cL1Hs", xe = "FilePicker-module__singleFileContainer___OFSDt", ye = "FilePicker-module__singleFileInputContainer___MOkES", De = "FilePicker-module__inputFileName___sMs7R", Se = "FilePicker-module__inputFileNamePlaceholder___-mkDD", we = "FilePicker-module__inputButton___ghLlD", Be = "FilePicker-module__multipleHelpText___5tnnn", Re = "FilePicker-module__multipleInputButton___WCJp9", He = "FilePicker-module__multipleFilesList___Kim0I", ve = "FilePicker-module__multipleFilesListItem___01PDS", Me = "FilePicker-module__multipleFilesListItemContent___pKbho", Ae = "FilePicker-module__multipleFilesListItemContentData___5GC-C", Ee = "FilePicker-module__multipleFilesListItemIconContainer___7sUL5", ze = "FilePicker-module__multipleFilesListItemIcon___nfMX9", je = "FilePicker-module__multipleFilesListItemText___nPqrL", Oe = "FilePicker-module__multipleFilesListItemName___NjHhX", Ve = "FilePicker-module__multipleFilesListItemSize___wc8LJ", Ke = "FilePicker-module__multipleFilesListItemError___x9qkT", qe = "FilePicker-module__multipleFilesListItemIconError___0RO46", Xe = "FilePicker-module__multipleFilesListItemAppendedRow___nzls7", $e = "FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl", Ye = "FilePicker-module__disabled___szMiq", i = {
@@ -38,9 +38,9 @@ import '../../assets/FilePicker.css';const Fe = "FilePicker-module__container___
   multipleFilesListItemAppendedRow: Xe,
   multipleFilesListItemIconDelete: $e,
   disabled: Ye
-}, A = ae(null);
-function p() {
-  const e = de(A);
+}, E = ae(null);
+function m() {
+  const e = de(E);
   if (!e)
     throw new Error("FilePicker compound components must be used within a FilePicker.");
   return e;
@@ -56,103 +56,103 @@ function Qe({
   fileExtensionsAllowed: s,
   maxSize: o = Number.POSITIVE_INFINITY,
   queueFiles: I = !1,
-  disabled: a = !1,
-  isUploadDisabled: z = !1,
-  value: h,
-  label: j,
-  required: O = !1,
-  placeholder: V,
-  errorMessage: K,
-  maxSizeErrorMessage: k,
-  fileExtensionInvalidErrorMessage: g,
-  helpText: q,
-  helpLink: X,
-  helpLinkText: $,
-  multipleHelpText: Y,
-  multipleButtonHelpText: G,
-  labelTooltip: J,
-  uploadedFileAppendedRow: Z,
+  disabled: c = !1,
+  isUploadDisabled: j = !1,
+  value: k,
+  label: O,
+  required: V = !1,
+  placeholder: K,
+  errorMessage: q,
+  maxSizeErrorMessage: g,
+  fileExtensionInvalidErrorMessage: f,
+  helpText: X,
+  helpLink: $,
+  helpLinkText: Y,
+  multipleHelpText: G,
+  multipleButtonHelpText: J,
+  labelTooltip: Z,
+  uploadedFileAppendedRow: Q,
   onUpload: d,
-  onRemoveFile: f,
-  children: N
+  onRemoveFile: N,
+  children: P
 }) {
-  const R = pe(), P = ue(null), [u, C] = M(h ? h.map((n) => ({
+  const H = pe(), C = ue(null), [a, T] = A(k ? k.map((n) => ({
     file: n
-  })) : []), [Q, S] = M(!1), T = s.join(", "), H = s.map((n) => `.${n.replace(/^\./, "")}`).join(","), b = _((n) => {
-    const r = o ? o * 1024 * 1024 : Number.POSITIVE_INFINITY, m = new Set(s.map((L) => L.toLowerCase().replace(/^\./, ""))), x = (k == null ? void 0 : k.replace(/\{maxSize\}/g, String(o))) ?? Ge(o), se = (g == null ? void 0 : g.replace(/\{fileExtensionsAllowed\}/g, T)) ?? Je(T);
-    return n.map((L) => {
-      const oe = L.size <= r, re = m.size === 0 || m.has(Ze(L));
-      let w;
-      return oe || (w = x), re || (w = se), {
-        file: L,
-        error: w
+  })) : []), [U, S] = A(!1), b = s.join(", "), v = s.map((n) => `.${n.replace(/^\./, "")}`).join(","), x = _((n) => {
+    const p = o ? o * 1024 * 1024 : Number.POSITIVE_INFINITY, u = new Set(s.map((h) => h.toLowerCase().replace(/^\./, ""))), L = (g == null ? void 0 : g.replace(/\{maxSize\}/g, String(o))) ?? Ge(o), w = (f == null ? void 0 : f.replace(/\{fileExtensionsAllowed\}/g, b)) ?? Je(b);
+    return n.map((h) => {
+      const oe = h.size <= p, re = u.size === 0 || u.has(Ze(h));
+      let B;
+      return oe || (B = L), re || (B = w), {
+        file: h,
+        error: B
       };
     });
-  }, [s, T, o, k, g]), v = _((n) => {
-    const r = u.length;
-    return S(r + n.length > l), b(n);
-  }, [l, u.length, b]);
+  }, [s, b, o, g, f]), M = _((n) => {
+    const p = a.length;
+    return S(p + n.length > l), x(n);
+  }, [l, a.length, x]);
   me(() => {
-    const n = b(h ?? []);
-    C(n), S(n.length > l);
-  }, [h, l, b]);
-  const U = _((n) => (n / 1024).toFixed(2) + " KB", []), W = _(() => {
+    const n = x(k ?? []);
+    T(n), S(n.length > l);
+  }, [k, l, x]);
+  const W = _((n) => (n / 1024).toFixed(2) + " KB", []), ee = _(() => {
     var n;
-    a || (n = P.current) == null || n.click();
-  }, [a]), ee = _((n) => {
-    var r;
-    a || n.key === "Enter" && ((r = P.current) == null || r.click());
-  }, [a]), le = _((n) => {
-    if (a) return;
-    const r = n.target.files, m = v(Array.from(r ?? []));
+    c || (n = C.current) == null || n.click();
+  }, [c]), le = _((n) => {
+    var p;
+    c || n.key === "Enter" && ((p = C.current) == null || p.click());
+  }, [c]), ie = _((n) => {
+    if (c) return;
+    const p = n.target.files, u = M(Array.from(p ?? []));
     if (e === "multiple" && I) {
-      const x = [...u, ...m];
-      C(x), d == null || d(x);
+      const L = [...a, ...u];
+      T(L), d == null || d(L);
     } else
-      C(m), d == null || d(m);
+      T(u), d == null || d(u);
     n.target.value = "";
-  }, [a, e, I, u, v, d]), ie = _((n) => {
-    if (a || !u) return;
-    const r = u.filter((m) => m.file.name !== n);
-    S(r.length > l), C(r), f == null || f(n);
-  }, [a, u, l, f]), te = {
-    id: R,
+  }, [c, e, I, a, M, d]), te = _((n) => {
+    if (c || !a || n < 0 || n >= a.length) return;
+    const p = a[n], u = a.filter((L, w) => w !== n);
+    S(u.length > l), T(u), N == null || N(p.file, u);
+  }, [c, a, l, N]), ne = {
+    id: H,
     type: e,
     maxFiles: l,
     fileExtensionsAllowed: s,
-    fileExtensionsAllowedText: T,
+    fileExtensionsAllowedText: b,
     maxSize: o,
     queueFiles: I,
-    disabled: a,
-    isUploadDisabled: z,
-    uploadedFiles: u,
-    isMaxFilesExceeded: Q,
-    label: j,
-    required: O,
-    placeholder: V,
-    errorMessage: K,
-    helpText: q,
-    helpLink: X,
-    helpLinkText: $,
-    multipleHelpText: Y,
-    multipleButtonHelpText: G,
-    labelTooltip: J,
-    accept: H,
-    inputRef: P,
-    triggerInput: W,
-    handleKeyDown: ee,
-    handleRemoveFile: ie,
-    displayFileSize: U,
-    uploadedFileAppendedRow: Z
-  }, ne = N != null && (Array.isArray(N) ? N.length > 0 : !0);
-  return /* @__PURE__ */ c(A.Provider, { value: te, children: [
-    /* @__PURE__ */ t("input", { accept: H, multiple: e === "multiple", ref: P, type: "file", id: R, className: i.input, onChange: le }),
-    /* @__PURE__ */ t("div", { className: D(i.container, e === "multiple" && i.containerMultiple, a && i.disabled), children: ne ? N : /* @__PURE__ */ t(Ue, {}) })
+    disabled: c,
+    isUploadDisabled: j,
+    uploadedFiles: a,
+    isMaxFilesExceeded: U,
+    label: O,
+    required: V,
+    placeholder: K,
+    errorMessage: q,
+    helpText: X,
+    helpLink: $,
+    helpLinkText: Y,
+    multipleHelpText: G,
+    multipleButtonHelpText: J,
+    labelTooltip: Z,
+    accept: v,
+    inputRef: C,
+    triggerInput: ee,
+    handleKeyDown: le,
+    handleRemoveFile: te,
+    displayFileSize: W,
+    uploadedFileAppendedRow: Q
+  }, se = P != null && (Array.isArray(P) ? P.length > 0 : !0);
+  return /* @__PURE__ */ r(E.Provider, { value: ne, children: [
+    /* @__PURE__ */ t("input", { accept: v, multiple: e === "multiple", ref: C, type: "file", id: H, className: i.input, onChange: ie }),
+    /* @__PURE__ */ t("div", { className: D(i.container, e === "multiple" && i.containerMultiple, c && i.disabled), children: se ? P : /* @__PURE__ */ t(Ue, {}) })
   ] });
 }
 function Ue() {
-  const e = p();
-  return /* @__PURE__ */ c(ce, { children: [
+  const e = m();
+  return /* @__PURE__ */ r(ce, { children: [
     /* @__PURE__ */ t(F.Label, {}),
     e.type === "single" && /* @__PURE__ */ t(F.SingleFileRow, { children: /* @__PURE__ */ t(F.BrowseButton, {}) }),
     e.type === "single" && e.uploadedFiles.length > 0 && /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ t(F.SingleFileDeleteButton, {}) }),
@@ -164,11 +164,11 @@ function Ue() {
 function We({
   children: e
 }) {
-  const l = p(), s = e ?? l.label;
-  return /* @__PURE__ */ c("label", { htmlFor: l.id, onClick: (o) => o.preventDefault(), className: D(i.label, l.type === "multiple" && i.labelMultiple), children: [
+  const l = m(), s = e ?? l.label;
+  return /* @__PURE__ */ r("label", { htmlFor: l.id, onClick: (o) => o.preventDefault(), className: D(i.label, l.type === "multiple" && i.labelMultiple), children: [
     /* @__PURE__ */ t("span", { title: l.label, className: i.labelText, children: s }),
     l.required && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: i.required, children: "*" }),
-    l.labelTooltip && /* @__PURE__ */ t(_e, { content: l.labelTooltip.content, size: l.labelTooltip.size, theme: l.labelTooltip.theme, tipSide: l.labelTooltip.tipSide, tipAlignment: l.labelTooltip.tipAlignment, startVisible: l.labelTooltip.startVisible, children: /* @__PURE__ */ t(B, { icon: "ap-icon-info", className: i.labelTooltipIcon }) }),
+    l.labelTooltip && /* @__PURE__ */ t(_e, { content: l.labelTooltip.content, size: l.labelTooltip.size, theme: l.labelTooltip.theme, tipSide: l.labelTooltip.tipSide, tipAlignment: l.labelTooltip.tipAlignment, startVisible: l.labelTooltip.startVisible, children: /* @__PURE__ */ t(R, { icon: "ap-icon-info", className: i.labelTooltipIcon }) }),
     l.type === "multiple" && l.multipleHelpText && /* @__PURE__ */ t("span", { className: i.multipleHelpText, children: l.multipleHelpText })
   ] });
 }
@@ -176,7 +176,7 @@ function el({
   children: e,
   className: l
 }) {
-  const s = p();
+  const s = m();
   return s.type === "multiple" ? /* @__PURE__ */ t(y, { type: "secondary", variant: "default", size: "md", icon: "ap-icon-upload", className: D(i.multipleInputButton, l), onClick: s.triggerInput, onKeyDown: s.handleKeyDown, disabled: s.disabled || s.isUploadDisabled, children: /* @__PURE__ */ t("span", { children: e ?? `Browse files ${s.multipleButtonHelpText ?? ""}` }) }) : /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-upload", className: D(i.inputButton, l), tabIndex: -1, disabled: s.disabled || s.isUploadDisabled, onClick: (o) => {
     o.preventDefault(), o.stopPropagation(), s.triggerInput();
   }, children: /* @__PURE__ */ t("span", { children: e ?? "Browse file" }) });
@@ -184,52 +184,50 @@ function el({
 function ll({
   children: e
 }) {
-  return p().type !== "single" ? null : /* @__PURE__ */ t("div", { className: i.singleFileContainer, children: e });
+  return m().type !== "single" ? null : /* @__PURE__ */ t("div", { className: i.singleFileContainer, children: e });
 }
 function il({
   children: e
 }) {
-  const l = p();
-  return l.type !== "single" ? null : /* @__PURE__ */ c("div", { tabIndex: l.disabled ? -1 : 0, onClick: l.triggerInput, onKeyDown: l.handleKeyDown, className: i.singleFileInputContainer, children: [
+  const l = m();
+  return l.type !== "single" ? null : /* @__PURE__ */ r("div", { tabIndex: l.disabled ? -1 : 0, onClick: l.triggerInput, onKeyDown: l.handleKeyDown, className: i.singleFileInputContainer, children: [
     /* @__PURE__ */ t("span", { className: i.inputFileName, children: l.uploadedFiles.length > 0 ? /* @__PURE__ */ t("span", { className: i.inputFileNameText, children: l.uploadedFiles[0].file.name }) : /* @__PURE__ */ t("span", { className: i.inputFileNamePlaceholder, children: l.placeholder }) }),
     e
   ] });
 }
 function tl() {
-  return p().type !== "single" ? null : /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ t(E, {}) });
+  return m().type !== "single" ? null : /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ t(z, {}) });
 }
-function E() {
-  const e = p();
-  if (e.type !== "single" || e.uploadedFiles.length === 0) return null;
-  const l = e.uploadedFiles[0].file.name;
-  return /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-delete", className: i.singleFileDeleteButton, onClick: () => e.handleRemoveFile(l), disabled: e.disabled });
+function z() {
+  const e = m();
+  return e.type !== "single" || e.uploadedFiles.length === 0 ? null : /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-delete", className: i.singleFileDeleteButton, onClick: () => e.handleRemoveFile(0), disabled: e.disabled });
 }
 function nl() {
   var o, I;
-  const e = p(), l = e.errorMessage || e.isMaxFilesExceeded || e.type === "single" && ((o = e.uploadedFiles[0]) == null ? void 0 : o.error), s = e.type === "single" ? e.errorMessage || ((I = e.uploadedFiles[0]) == null ? void 0 : I.error) : e.errorMessage || (e.isMaxFilesExceeded ? `You can only upload up to ${e.maxFiles} files.` : "");
-  return e.type === "multiple" && !s ? null : /* @__PURE__ */ c("div", { className: i.helpers, children: [
+  const e = m(), l = e.errorMessage || e.isMaxFilesExceeded || e.type === "single" && ((o = e.uploadedFiles[0]) == null ? void 0 : o.error), s = e.type === "single" ? e.errorMessage || ((I = e.uploadedFiles[0]) == null ? void 0 : I.error) : e.errorMessage || (e.isMaxFilesExceeded ? `You can only upload up to ${e.maxFiles} files.` : "");
+  return e.type === "multiple" && !s ? null : /* @__PURE__ */ r("div", { className: i.helpers, children: [
     l ? /* @__PURE__ */ t("span", { title: e.errorMessage, className: i.errorMessage, children: s }) : e.helpText && e.type === "single" && /* @__PURE__ */ t("span", { title: e.helpText, className: i.helperText, children: e.helpText }),
-    e.type === "single" && e.helpLink && e.helpLinkText && /* @__PURE__ */ c("span", { className: i.singleFileHelpLinkContainer, children: [
+    e.type === "single" && e.helpLink && e.helpLinkText && /* @__PURE__ */ r("span", { className: i.singleFileHelpLinkContainer, children: [
       /* @__PURE__ */ t("a", { href: e.helpLink, className: i.helpLink, target: "_blank", rel: "noopener noreferrer", tabIndex: e.disabled ? -1 : 0, children: e.helpLinkText }),
       /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace })
     ] })
   ] });
 }
 function sl() {
-  const e = p();
-  return e.type !== "multiple" || !e.uploadedFiles.length ? null : /* @__PURE__ */ t("ul", { className: i.multipleFilesList, children: e.uploadedFiles.map((l, s) => /* @__PURE__ */ c("li", { className: i.multipleFilesListItem, children: [
-    /* @__PURE__ */ c("div", { className: i.multipleFilesListItemContent, children: [
-      /* @__PURE__ */ t("span", { className: i.multipleFilesListItemIconContainer, children: /* @__PURE__ */ t(B, { icon: "ap-icon-document", className: i.multipleFilesListItemIcon }) }),
-      /* @__PURE__ */ c("div", { className: i.multipleFilesListItemContentData, children: [
-        /* @__PURE__ */ c("div", { className: i.multipleFilesListItemText, children: [
+  const e = m();
+  return e.type !== "multiple" || !e.uploadedFiles.length ? null : /* @__PURE__ */ t("ul", { className: i.multipleFilesList, children: e.uploadedFiles.map((l, s) => /* @__PURE__ */ r("li", { className: i.multipleFilesListItem, children: [
+    /* @__PURE__ */ r("div", { className: i.multipleFilesListItemContent, children: [
+      /* @__PURE__ */ t("span", { className: i.multipleFilesListItemIconContainer, children: /* @__PURE__ */ t(R, { icon: "ap-icon-document", className: i.multipleFilesListItemIcon }) }),
+      /* @__PURE__ */ r("div", { className: i.multipleFilesListItemContentData, children: [
+        /* @__PURE__ */ r("div", { className: i.multipleFilesListItemText, children: [
           /* @__PURE__ */ t("span", { className: i.multipleFilesListItemName, children: l.file.name }),
           /* @__PURE__ */ t("span", { className: i.multipleFilesListItemSize, children: e.displayFileSize(l.file.size) }),
-          l.error && /* @__PURE__ */ c("span", { className: i.multipleFilesListItemError, children: [
-            /* @__PURE__ */ t(B, { icon: "ap-icon-alert", className: i.multipleFilesListItemIconError }),
+          l.error && /* @__PURE__ */ r("span", { className: i.multipleFilesListItemError, children: [
+            /* @__PURE__ */ t(R, { icon: "ap-icon-alert", className: i.multipleFilesListItemIconError }),
             l.error
           ] })
         ] }),
-        /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "sm", onClick: () => e.handleRemoveFile(l.file.name), icon: "ap-icon-delete", iconClassName: i.multipleFilesListItemIconDelete, disabled: e.disabled })
+        /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "sm", onClick: () => e.handleRemoveFile(s), icon: "ap-icon-delete", iconClassName: i.multipleFilesListItemIconDelete, disabled: e.disabled })
       ] })
     ] }),
     e.uploadedFileAppendedRow && /* @__PURE__ */ t("div", { className: i.multipleFilesListItemAppendedRow, children: e.uploadedFileAppendedRow(l, s) })
@@ -243,9 +241,9 @@ const F = Object.assign(Qe, {
   SingleFileContainer: ll,
   SingleFileRow: il,
   SingleFileActions: tl,
-  SingleFileDeleteButton: E
+  SingleFileDeleteButton: z
 });
 export {
   F as default,
-  p as useFilePickerContext
+  m as useFilePickerContext
 };

package/dist/components/FilePicker/FilePicker.test.js

@@ -1,8 +1,8 @@
-import { jsx as i } from "react/jsx-runtime";
-import { d as h, i as o, r as n, g as e, s as l, w as x, v as f, f as B } from "../../vi.bdSIJ99Y-017e_Pkz.js";
+import { jsx as o } from "react/jsx-runtime";
+import { d as B, i as n, r as s, g as e, s as l, w as m, v as f, f as T } from "../../vi.bdSIJ99Y-017e_Pkz.js";
 import { u as r } from "../../index-DkTDHhag.js";
-import s from "./FilePicker.js";
-const a = {
+import a from "./FilePicker.js";
+const c = {
   fileExtensionsAllowed: ["xlsx", "csv"],
   maxSize: 5,
   maxFiles: 10,
@@ -13,141 +13,145 @@ const a = {
   helpLink: "https://example.com",
   helpLinkText: "Help link"
 };
-function d(t, c = 100, u = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
-  return new File(["x".repeat(c)], t, {
+function d(t, i = 100, u = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
+  return new File(["x".repeat(i)], t, {
     type: u
   });
 }
-h("FilePicker", () => {
-  h("Rendering", () => {
-    o("should render with required props", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a })), e(l.getByText("Upload files")).toBeInTheDocument(), e(l.getByText("Select a file")).toBeInTheDocument(), e(l.getByText("Browse file")).toBeInTheDocument();
-    }), o("should render required asterisk when required is true", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, required: !0 }));
+B("FilePicker", () => {
+  B("Rendering", () => {
+    n("should render with required props", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c })), e(l.getByText("Upload files")).toBeInTheDocument(), e(l.getByText("Select a file")).toBeInTheDocument(), e(l.getByText("Browse file")).toBeInTheDocument();
+    }), n("should render required asterisk when required is true", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, required: !0 }));
       const t = document.querySelector('[aria-hidden="true"]');
       e(t).toBeInTheDocument(), e(t).toHaveTextContent("*");
-    }), o("should render single mode with Browse file button", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a })), e(l.getByText("Browse file")).toBeInTheDocument(), e(l.queryByText(/Browse files \(max/)).not.toBeInTheDocument();
-    }), o("should render multiple mode with Browse files button and max count", () => {
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, maxFiles: 5, multipleHelpText: "Only xlsx, csv files with max size of 5MB", multipleButtonHelpText: "(max 5 files)" })), e(l.getByText("Browse files (max 5 files)")).toBeInTheDocument(), e(l.getByText(/Only xlsx, csv files with max size of 5MB/)).toBeInTheDocument();
-    }), o("should display custom multipleHelpText when provided in multiple mode", () => {
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, multipleHelpText: "Custom extensions and size info" })), e(l.getByText("Custom extensions and size info")).toBeInTheDocument();
-    }), o("should not render multipleHelpText in single mode", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, multipleHelpText: "This should not appear" })), e(l.queryByText("This should not appear")).not.toBeInTheDocument();
-    }), o("should display custom multipleButtonHelpText in button when provided in multiple mode", () => {
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, multipleButtonHelpText: "(max 3 files, 2MB each)" })), e(l.getByText("Browse files (max 3 files, 2MB each)")).toBeInTheDocument();
-    }), o("should render file input with correct accept and multiple attributes", () => {
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a }));
+    }), n("should render single mode with Browse file button", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c })), e(l.getByText("Browse file")).toBeInTheDocument(), e(l.queryByText(/Browse files \(max/)).not.toBeInTheDocument();
+    }), n("should render multiple mode with Browse files button and max count", () => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, maxFiles: 5, multipleHelpText: "Only xlsx, csv files with max size of 5MB", multipleButtonHelpText: "(max 5 files)" })), e(l.getByText("Browse files (max 5 files)")).toBeInTheDocument(), e(l.getByText(/Only xlsx, csv files with max size of 5MB/)).toBeInTheDocument();
+    }), n("should display custom multipleHelpText when provided in multiple mode", () => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, multipleHelpText: "Custom extensions and size info" })), e(l.getByText("Custom extensions and size info")).toBeInTheDocument();
+    }), n("should not render multipleHelpText in single mode", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, multipleHelpText: "This should not appear" })), e(l.queryByText("This should not appear")).not.toBeInTheDocument();
+    }), n("should display custom multipleButtonHelpText in button when provided in multiple mode", () => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, multipleButtonHelpText: "(max 3 files, 2MB each)" })), e(l.getByText("Browse files (max 3 files, 2MB each)")).toBeInTheDocument();
+    }), n("should render file input with correct accept and multiple attributes", () => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c }));
       const t = l.getByTestId("file-picker-input");
       e(t).toHaveAttribute("accept", ".xlsx,.csv"), e(t).toHaveAttribute("multiple");
-    }), o("should render single file input without multiple attribute", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a }));
+    }), n("should render single file input without multiple attribute", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c }));
       const t = l.getByTestId("file-picker-input");
       e(t).not.toHaveAttribute("multiple");
-    }), o("should display selected file name in single mode", async () => {
+    }), n("should display selected file name in single mode", async () => {
       const t = d("report.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a }));
-      const c = l.getByTestId("file-picker-input");
-      await r.upload(c, t), await x(() => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c }));
+      const i = l.getByTestId("file-picker-input");
+      await r.upload(i, t), await m(() => {
         e(l.getByText("report.xlsx")).toBeInTheDocument();
       });
-    }), o("should display error message when provided", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, errorMessage: "Please select a file" })), e(l.getByText("Please select a file")).toBeInTheDocument();
+    }), n("should display error message when provided", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, errorMessage: "Please select a file" })), e(l.getByText("Please select a file")).toBeInTheDocument();
     });
-  }), h("onUpload", () => {
-    o("should call onUpload with uploaded file when single file is selected", async () => {
-      const t = f.fn(), c = d("document.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, onUpload: t }));
+  }), B("onUpload", () => {
+    n("should call onUpload with uploaded file when single file is selected", async () => {
+      const t = f.fn(), i = d("document.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, onUpload: t }));
       const u = l.getByTestId("file-picker-input");
-      await r.upload(u, c), await x(() => {
+      await r.upload(u, i), await m(() => {
         e(t).toHaveBeenCalledTimes(1), e(t).toHaveBeenCalledWith([e.objectContaining({
           file: e.any(File),
           error: void 0
         })]), e(t.mock.calls[0][0][0].file.name).toBe("document.xlsx");
       });
-    }), o("should call onUpload with all selected files when multiple files selected (non-queue)", async () => {
-      const t = f.fn(), c = d("a.xlsx"), u = d("b.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "multiple", queueFiles: !1, ...a, onUpload: t }));
-      const m = l.getByTestId("file-picker-input");
-      await r.upload(m, [c, u]), await x(() => {
+    }), n("should call onUpload with all selected files when multiple files selected (non-queue)", async () => {
+      const t = f.fn(), i = d("a.xlsx"), u = d("b.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "multiple", queueFiles: !1, ...c, onUpload: t }));
+      const x = l.getByTestId("file-picker-input");
+      await r.upload(x, [i, u]), await m(() => {
         e(t).toHaveBeenCalledTimes(1);
         const p = t.mock.calls[0][0];
         e(p).toHaveLength(2), e(p[0].file.name).toBe("a.xlsx"), e(p[1].file.name).toBe("b.xlsx");
       });
-    }), o("should call onUpload with accumulated files when queueFiles is true", async () => {
-      const t = f.fn(), c = d("first.xlsx"), u = d("second.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "multiple", queueFiles: !0, ...a, maxFiles: 10, onUpload: t }));
-      const m = l.getByTestId("file-picker-input");
-      await r.upload(m, c), await x(() => {
+    }), n("should call onUpload with accumulated files when queueFiles is true", async () => {
+      const t = f.fn(), i = d("first.xlsx"), u = d("second.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "multiple", queueFiles: !0, ...c, maxFiles: 10, onUpload: t }));
+      const x = l.getByTestId("file-picker-input");
+      await r.upload(x, i), await m(() => {
         e(t).toHaveBeenCalledTimes(1);
         const p = t.mock.calls[0][0];
         e(p).toHaveLength(1), e(p[0].file.name).toBe("first.xlsx");
-      }), await r.upload(m, u), await x(() => {
+      }), await r.upload(x, u), await m(() => {
         e(t).toHaveBeenCalledTimes(2);
         const p = t.mock.calls[1][0];
         e(p).toHaveLength(2), e(p[0].file.name).toBe("first.xlsx"), e(p[1].file.name).toBe("second.xlsx");
       });
-    }), o("should include validation error in onUpload when file extension is invalid", async () => {
-      const t = f.fn(), c = d("document.pdf", 100, "application/pdf");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, fileExtensionsAllowed: ["xlsx"], onUpload: t }));
+    }), n("should include validation error in onUpload when file extension is invalid", async () => {
+      const t = f.fn(), i = d("document.pdf", 100, "application/pdf");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, fileExtensionsAllowed: ["xlsx"], onUpload: t }));
       const u = l.getByTestId("file-picker-input");
-      B.change(u, {
+      T.change(u, {
         target: {
-          files: [c]
+          files: [i]
         }
-      }), await x(() => {
+      }), await m(() => {
         e(t).toHaveBeenCalledWith([e.objectContaining({
           file: e.any(File),
           error: e.stringContaining("file format is incorrect")
         })]);
       });
     });
-  }), h("onRemoveFile", () => {
-    o("should call onRemoveFile when remove button is clicked in single mode", async () => {
-      const t = f.fn(), c = d("to-remove.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, onRemoveFile: t }));
+  }), B("onRemoveFile", () => {
+    n("should call onRemoveFile when remove button is clicked in single mode", async () => {
+      const t = f.fn(), i = d("to-remove.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, onRemoveFile: t }));
       const u = l.getByTestId("file-picker-input");
-      await r.upload(u, c), await x(() => {
+      await r.upload(u, i), await m(() => {
         e(l.getByText("to-remove.xlsx")).toBeInTheDocument();
       });
-      const m = l.getByTestId("file-picker-remove-single");
-      await r.click(m), e(t).toHaveBeenCalledWith("to-remove.xlsx");
-    }), o("should call onRemoveFile when remove button is clicked in multiple mode", async () => {
-      const t = f.fn(), c = d("one.xlsx"), u = d("two.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, onRemoveFile: t }));
-      const m = l.getByTestId("file-picker-input");
-      await r.upload(m, [c, u]), await x(() => {
+      const x = l.getByTestId("file-picker-remove-single");
+      await r.click(x), e(t).toHaveBeenCalledTimes(1);
+      const [p, h] = t.mock.calls[0];
+      e(p).toBe(i), e(h).toHaveLength(0);
+    }), n("should call onRemoveFile when remove button is clicked in multiple mode", async () => {
+      const t = f.fn(), i = d("one.xlsx"), u = d("two.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, onRemoveFile: t }));
+      const x = l.getByTestId("file-picker-input");
+      await r.upload(x, [i, u]), await m(() => {
         e(l.getByText("one.xlsx")).toBeInTheDocument(), e(l.getByText("two.xlsx")).toBeInTheDocument();
       });
-      const p = l.getByTestId("file-picker-remove-two.xlsx");
-      await r.click(p), e(t).toHaveBeenCalledWith("two.xlsx");
+      const p = l.getByTestId("file-picker-remove-1");
+      await r.click(p), e(t).toHaveBeenCalledTimes(1);
+      const [h, y] = t.mock.calls[0];
+      e(h).toBe(u), e(y).toHaveLength(1), e(y[0].file).toBe(i);
     });
-  }), h("Disabled state", () => {
-    o("should not call onUpload when disabled and file is selected", async () => {
-      const t = f.fn(), c = d("doc.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, disabled: !0, onUpload: t }));
+  }), B("Disabled state", () => {
+    n("should not call onUpload when disabled and file is selected", async () => {
+      const t = f.fn(), i = d("doc.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, disabled: !0, onUpload: t }));
       const u = l.getByTestId("file-picker-input");
-      await r.upload(u, c), e(t).not.toHaveBeenCalled();
-    }), o("should not call onRemoveFile when disabled and remove is clicked", async () => {
-      const t = f.fn(), c = d("doc.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, disabled: !0, value: [c], onRemoveFile: t })), e(l.getByText("doc.xlsx")).toBeInTheDocument();
+      await r.upload(u, i), e(t).not.toHaveBeenCalled();
+    }), n("should not call onRemoveFile when disabled and remove is clicked", async () => {
+      const t = f.fn(), i = d("doc.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, disabled: !0, value: [i], onRemoveFile: t })), e(l.getByText("doc.xlsx")).toBeInTheDocument();
       const u = l.getByTestId("file-picker-remove-single");
       e(u).toBeDisabled(), await r.click(u), e(t).not.toHaveBeenCalled();
     });
-  }), h("Controlled value", () => {
-    o("should display files from value prop", () => {
+  }), B("Controlled value", () => {
+    n("should display files from value prop", () => {
       const t = d("controlled.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, value: [t] })), e(l.getByText("controlled.xlsx")).toBeInTheDocument();
-    }), o("should display multiple files from value prop", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, value: [t] })), e(l.getByText("controlled.xlsx")).toBeInTheDocument();
+    }), n("should display multiple files from value prop", () => {
       const t = [d("a.xlsx"), d("b.xlsx")];
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, value: t })), e(l.getByText("a.xlsx")).toBeInTheDocument(), e(l.getByText("b.xlsx")).toBeInTheDocument();
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, value: t })), e(l.getByText("a.xlsx")).toBeInTheDocument(), e(l.getByText("b.xlsx")).toBeInTheDocument();
     });
-  }), h("Max files exceeded", () => {
-    o("should show max files exceeded message when over limit in multiple mode", async () => {
+  }), B("Max files exceeded", () => {
+    n("should show max files exceeded message when over limit in multiple mode", async () => {
       const t = [d("1.xlsx"), d("2.xlsx"), d("3.xlsx")];
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, maxFiles: 2 }));
-      const c = l.getByTestId("file-picker-input");
-      await r.upload(c, t), await x(() => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, maxFiles: 2 }));
+      const i = l.getByTestId("file-picker-input");
+      await r.upload(i, t), await m(() => {
         e(l.getByText(/You can only upload up to 2 files/)).toBeInTheDocument();
       });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alixpartners/ui-components",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "type": "module",
   "files": [
     "dist"