@alixpartners/ui-components 2.4.2 → 2.4.3

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

@@ -39,7 +39,7 @@ type DragAndDropProps = {
     label?: string;
     required?: boolean;
     fileExtensionsAllowed: string[];
-    maxSize: number;
+    maxSize?: number;
     maxFiles?: number;
     value?: File | File[];
     onUpload?: (files: UploadFile[]) => void;
@@ -49,6 +49,8 @@ type DragAndDropProps = {
      */
     onRemoveFile?: (fileName: string) => 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 +85,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 p, useMemo as I } 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 = {
   "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,162 @@ 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,
-  type: i = "single",
-  disabled: w,
-  required: F,
+}, 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}.`;
+function Rr({
+  label: f,
+  type: d = "single",
+  disabled: q,
+  required: rr,
   fileExtensionsAllowed: c,
-  maxSize: p,
+  maxSize: g = Number.POSITIVE_INFINITY,
   maxFiles: l = Number.POSITIVE_INFINITY,
-  value: f,
-  onUpload: _,
-  onRemoveFile: v,
-  queueFiles: q,
-  className: U,
+  value: u,
+  onUpload: m,
+  onRemoveFile: T,
+  queueFiles: P,
+  className: er,
+  maxSizeErrorMessage: v,
+  fileExtensionInvalidErrorMessage: L,
   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
+  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: C,
+  ...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), [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) => {
     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;
+        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;
     }
     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({
+  }, [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({
     extensions: c,
-    maxSize: p,
-    type: i
-  }) : `${Y} ${i === "single" ? "file" : "files"} ${Z}`, [e, c, Y, p, Z, i]), lr = () => {
+    maxSize: g,
+    type: d
+  }) : `${M} ${d === "single" ? "file" : "files"} ${X}`, [e, c, M, g, X, d]), pr = () => {
     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();
+  }, 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);
+    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: A,
       errorCode: "SIZE_TOO_LARGE"
     };
-  }, [B]), O = A(() => ({
-    maxSize: p,
+  }, [w, v, L]), $ = I(() => ({
+    maxSize: g,
     fileExtensionsAllowed: c,
-    type: i,
+    type: d,
     maxFiles: l
-  }), [p, c, i, l]), T = m((r) => {
+  }), [g, c, d, l]), b = p((r) => {
     let a;
-    b ? a = r.map((o) => b(o, O)) : a = r.map((o) => H(o, O));
+    B ? a = r.map((o) => B(o, $)) : a = r.map((o) => F(o, $));
     let s = a.map((o) => {
-      const h = o.error ? G(o.error, o.errorCode) : void 0;
+      const A = 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: A
       };
     });
-    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 d === "single" && s.length > 1 ? s.slice(0, 1) : (l && l > 0 && s.length > l && (s = s.map((o, A) => A < l ? o : {
       ...o,
       error: o.error ?? `Maximum ${l} file${l === 1 ? "" : "s"} allowed.`
     })), s);
-  }, [i, l, b, O, G, H]), d = A(() => {
+  }, [d, l, B, $, Z, F]), i = I(() => {
     let r;
-    if (D) {
-      const a = Array.isArray(f) ? f : f ? [f] : [];
-      r = T(a);
+    if (h) {
+      const a = Array.isArray(u) ? u : u ? [u] : [];
+      r = b(a);
     } else
-      r = u;
+      r = D;
     return r.map((a) => ({
       ...a,
       // Validator errors take precedence over external errors
-      error: a.error ?? (I == null ? void 0 : I[a.file.name])
+      error: a.error ?? (C == null ? void 0 : C[a.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, 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);
+    if (h)
+      m == null || m(a);
     else {
-      const s = q ? [...u, ...a] : a;
-      S(s), _ == null || _(s);
+      const s = P ? [...D, ...a] : a;
+      Y(s), m == null || m(s);
     }
-  }, [T, D, q, u, _]), gr = (r) => {
+  }, [b, h, P, D, 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);
+    H(a), r.target.value = "";
+  }, k = p((r) => {
+    if (!h) {
+      const a = D.filter((s) => s.file.name !== r);
+      Y(a);
     }
-    v == null || v(r);
-  }, [D, u, v]), X = A(() => new Map(d.map((r) => [r.file.name, () => z(r.file.name)])), [d, z]), {
+    T == null || T(r);
+  }, [h, D, T]), W = I(() => new Map(i.map((r) => [r.file.name, () => k(r.file.name)])), [i, k]), {
     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);
+    H(a), 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(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: "*" })
     ] }),
-    /* @__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(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__ */ 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: 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: [
           " ",
-          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: [
+    (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: 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"] }),
+          /* @__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"] }),
             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: W.get(r.file.name), icon: dr, iconClassName: n["drag-and-drop-files-list-item-icon-delete"], "aria-label": `Remove ${r.file.name}` })
       ] })
     ] }) }, r.file.name)) })
   ] });
 }
 export {
-  Or as default
+  Rr as default
 };

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

@@ -33,13 +33,14 @@ export type FilePickerContextValue = {
     handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleRemoveFile: (fileName: string) => 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,12 +49,15 @@ 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;
     children?: ReactNode;
@@ -62,7 +66,7 @@ type FilePickerProps = {
  * 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;