@alixpartners/ui-components 2.4.3 → 2.5.0

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;
 /**