mcr-design-systems 1.0.212 → 1.0.214

package/dist/components/Avatar/helper/variants.js

@@ -4,7 +4,7 @@ const s = e({
   variants: {
     shape: {
       circle: "rounded-full",
-      square: "rounded-md"
+      square: "rounded-lg"
     },
     type: {
       initials: "font-semibold uppercase text-fg-brand-rest bg-bg-brand-subtle-rest",

package/dist/components/Avatar/index.d.ts

@@ -32,6 +32,8 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, Varia
     containerClassName?: string;
     outerClassName?: string;
     showHelperTextIcon?: boolean;
+    shouldShowPlaceholderIconUpload?: boolean;
+    shouldShowDropdownForOptions?: boolean;
 }
 declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

package/dist/components/Avatar/index.js

@@ -1,12 +1,12 @@
-import { jsxs as N, jsx as t, Fragment as he } from "react/jsx-runtime";
-import { useState as p, useRef as F, useEffect as M } from "react";
-import { avatar as fe, presenceBadge as pe } from "./helper/variants.js";
-import _ from "../Icon/Icon.js";
-import { cn as s } from "../../shared/utils/cn.js";
-import ue from "../Loading/index.js";
-import { Dropdown as de } from "../Dropdown/index.js";
-import $ from "../TextField/HelperText.js";
-const I = {
+import { jsxs as N, jsx as t, Fragment as pe } from "react/jsx-runtime";
+import { useState as p, useRef as $, useEffect as F } from "react";
+import { avatar as ue, presenceBadge as xe } from "./helper/variants.js";
+import B from "../Icon/Icon.js";
+import { cn as o } from "../../shared/utils/cn.js";
+import de from "../Loading/index.js";
+import { Dropdown as we } from "../Dropdown/index.js";
+import G from "../TextField/HelperText.js";
+const j = {
   10: "text-[4.55px]",
   12: "text-[5.45px]",
   14: "text-[6.36px]",
@@ -25,123 +25,125 @@ const I = {
   88: "text-[40px]",
   128: "text-[58.18px]",
   160: "text-[72.73px]"
-}, xe = 2 * 1024 * 1024, B = ["image/jpeg", "image/jpg", "image/png", "image/webp"], G = "avatar-cache-v1", je = ({
+}, ge = 2 * 1024 * 1024, T = ["image/jpeg", "image/jpg", "image/png", "image/webp"], W = "avatar-cache-v1", Ce = ({
   src: n = "",
   size: l = 48,
-  shape: T = "circle",
-  showPresence: W = !1,
-  presenceStatus: D = "available",
-  alt: H = "",
-  className: J,
-  firstName: j,
+  shape: H = "circle",
+  showPresence: J = !1,
+  presenceStatus: Z = "available",
+  alt: D = "",
+  className: V,
+  firstName: I,
   lastName: R,
-  onUpload: U,
-  onRemove: C,
-  isLoading: x = !1,
-  isCanEdit: Z = !0,
+  onUpload: C,
+  onRemove: L,
+  isLoading: d = !1,
+  isCanEdit: X = !0,
   disableCache: w = !1,
-  icon: L,
-  bordered: V = !1,
-  overlap: X = !1,
-  overlapPrefix: S = "",
-  helperText: k,
-  errors: i,
-  maxFileSize: Y = xe,
-  allowedFileTypes: q = B,
-  innerClass: K = "",
-  containerClassName: Q = "",
+  icon: U,
+  bordered: Y = !1,
+  overlap: q = !1,
+  overlapPrefix: k = "",
+  helperText: S,
+  errors: m,
+  maxFileSize: K = ge,
+  allowedFileTypes: Q = T,
+  innerClass: z = "",
+  containerClassName: ee = "",
   outerClassName: O = "",
-  showHelperTextIcon: z = !0,
+  showHelperTextIcon: te = !0,
+  shouldShowPlaceholderIconUpload: A = !0,
+  shouldShowDropdownForOptions: P = !0,
   ...g
 }) => {
-  const [ee, m] = p(!1), [v, u] = p(""), [a, c] = p(n || ""), [d, b] = p(""), [A, E] = p(!1), h = F(null), te = F(null), re = async (e) => {
+  const [re, s] = p(!1), [v, u] = p(""), [a, i] = p(n || ""), [x, b] = p(""), [M, E] = p(!1), f = $(null), ae = $(null), ne = async (e) => {
     try {
-      const r = await caches.open(G);
+      const r = await caches.open(W);
       if (!await r.match(e)) {
-        const f = await fetch(e, {
+        const h = await fetch(e, {
           mode: "cors",
           method: "GET",
           headers: { "Access-Control-Allow-Origin": "*" }
         });
-        if (!f.ok)
-          throw new Error(`Failed to fetch image: ${f.status}`);
-        await r.put(e, f.clone());
+        if (!h.ok)
+          throw new Error(`Failed to fetch image: ${h.status}`);
+        await r.put(e, h.clone());
       }
     } catch {
     }
   };
-  s();
-  const ae = async (e) => {
+  o();
+  const le = async (e) => {
     if (w) return null;
     try {
-      const o = await (await caches.open(G)).match(e);
-      if (o) {
-        const f = await o.blob();
-        return URL.createObjectURL(f);
+      const c = await (await caches.open(W)).match(e);
+      if (c) {
+        const h = await c.blob();
+        return URL.createObjectURL(h);
       }
       return null;
     } catch {
       return null;
     }
   };
-  M(() => {
+  F(() => {
     let e = null;
-    return n && !w ? (re(n), ae(n).then((r) => {
-      r ? (b(r), c(r), e = r) : c(n);
-    })) : c(n || ""), () => {
+    return n && !w ? (ne(n), le(n).then((r) => {
+      r ? (b(r), i(r), e = r) : i(n);
+    })) : i(n || ""), () => {
       e && URL.revokeObjectURL(e);
     };
-  }, [n, w]), M(() => {
+  }, [n, w]), F(() => {
     if (!a) {
       E(!1);
       return;
     }
     const e = new window.Image();
     return e.src = a, e.onload = () => E(!1), e.onerror = () => {
-      E(!0), d && a !== d && c(d);
+      E(!0), x && a !== x && i(x);
     }, () => {
       a.startsWith("blob:") && URL.revokeObjectURL(a);
     };
-  }, [a, d]);
-  const ne = () => S || (L ? /* @__PURE__ */ t(
+  }, [a, x]);
+  const ce = () => k || (U ? /* @__PURE__ */ t(
     "span",
     {
-      className: `flex h-full w-full items-center justify-center ${I[l ?? 48]}`,
-      children: L
+      className: `flex h-full w-full items-center justify-center ${j[l ?? 48]}`,
+      children: U
     }
-  ) : j || R ? `${j?.[0] || ""}${R?.[0] || ""}`.toUpperCase() : n ? n[0]?.toUpperCase() : ""), le = async (e) => {
+  ) : I || R ? `${I?.[0] || ""}${R?.[0] || ""}`.toUpperCase() : n ? n[0]?.toUpperCase() : ""), se = async (e) => {
     const r = e.target.files?.[0];
     if (!r) return;
-    if (!q.includes(r.type)) {
+    if (!Q.includes(r.type)) {
       u(
-        i?.imageFileTypeError || "Please select a valid image file (JPG, JPEG, PNG, or WEBP)"
+        m?.imageFileTypeError || "Please select a valid image file (JPG, JPEG, PNG, or WEBP)"
       );
       return;
     }
-    if (r.size > Y) {
+    if (r.size > K) {
       u(
-        i?.imageUploadLimitError || "Image is too large, must be no larger than 2 MB."
+        m?.imageUploadLimitError || "Image is too large, must be no larger than 2 MB."
       );
       return;
     }
     u("");
-    let o = null;
+    let c = null;
     try {
-      o = URL.createObjectURL(r), c(o), await U?.(r);
+      c = URL.createObjectURL(r), i(c), await C?.(r);
     } finally {
-      h.current && (h.current.value = ""), m(!1), o && URL.revokeObjectURL(o);
+      f.current && (f.current.value = ""), s(!1), c && URL.revokeObjectURL(c);
     }
-  }, oe = async () => {
+  }, ie = async () => {
     try {
-      await C?.(), c(""), b("");
+      await L?.(), i(""), b("");
     } finally {
-      m(!1), u("");
+      s(!1), u("");
     }
-  }, ce = (e) => {
-    e === "change-photo" ? h.current?.click() : e === "remove-photo" && oe().then(() => {
-      c(""), b("");
-    }), m(!1);
-  }, y = Z && (U || C) && l >= 24, se = ne(), ie = l && l >= 24 && l <= 64, { id: me } = "data-testid" in g ? g : { id: "avatar" }, P = {
+  }, oe = (e) => {
+    e === "change-photo" ? f.current?.click() : e === "remove-photo" && ie().then(() => {
+      i(""), b("");
+    }), s(!1);
+  }, y = X && (C || L) && l >= 24, me = ce(), fe = l && l >= 24 && l <= 64, { id: he } = "data-testid" in g ? g : { id: "avatar" }, _ = {
     10: "h-[0.625rem] w-[0.625rem]",
     // 10px
     12: "h-[0.75rem] w-[0.75rem]",
@@ -179,21 +181,21 @@ const I = {
     160: "h-[10rem] w-[10rem]"
     // 160px
   };
-  return /* @__PURE__ */ N("div", { "data-testid": me, className: "relative block w-fit", children: [
+  return /* @__PURE__ */ N("div", { "data-testid": he, className: "relative block w-fit", children: [
     /* @__PURE__ */ t(
       "div",
       {
-        className: s(
+        className: o(
           "w-fit overflow-hidden",
-          P[l ?? 48],
-          Q
+          _[l ?? 48],
+          ee
         ),
         children: /* @__PURE__ */ N(
-          de,
+          we,
           {
             selected: !0,
-            onValueChange: ce,
-            open: ee,
+            onValueChange: oe,
+            open: re,
             items: [
               {
                 label: "Change photo",
@@ -207,58 +209,68 @@ const I = {
               }
             ],
             align: "start",
-            onOpenChange: y && !x ? (e) => m(e) : void 0,
+            onOpenChange: (e) => {
+              if (!e)
+                return s(!1);
+              y && !d && P || !P && a ? s(e) : (f.current?.click(), s(!1));
+            },
             children: [
               /* @__PURE__ */ N(
                 "div",
                 {
-                  className: s(
-                    fe({
-                      shape: T,
+                  className: o(
+                    ue({
+                      shape: H,
                       // type: previewSrc && !isImageError ? 'image' : 'initials',
-                      className: s(P[l ?? 48], J),
-                      bordered: a && !A ? !0 : V,
-                      overlap: X
+                      className: o(_[l ?? 48], V),
+                      bordered: a && !M ? !0 : Y,
+                      overlap: q
                     }),
                     O
                   ),
                   ...g,
                   children: [
-                    a && !A ? /* @__PURE__ */ t(
+                    a && !M ? /* @__PURE__ */ t(
                       "img",
                       {
                         src: a,
-                        alt: H,
-                        className: s("object-cover", K)
+                        alt: D,
+                        className: o("object-cover", z)
                       }
                     ) : /* @__PURE__ */ t(
                       "div",
                       {
-                        className: `flex h-full w-full items-center justify-center ${I[l ?? 48]}`,
+                        className: `flex h-full w-full items-center justify-center ${j[l ?? 48]}`,
                         children: /* @__PURE__ */ t(
                           "div",
                           {
-                            className: s(
-                              `${I[l ?? 48]} leading-none`,
+                            className: o(
+                              `${j[l ?? 48]} leading-none`,
                               O
                             ),
-                            children: se
+                            children: me
                           }
                         )
                       }
                     ),
-                    y && !x && /* @__PURE__ */ t(
+                    y && !d && /* @__PURE__ */ t(
                       "div",
                       {
-                        ref: te,
-                        className: "absolute bottom-0 flex w-full cursor-pointer items-center justify-center bg-black-alpha-4",
+                        ref: ae,
+                        className: o(
+                          "absolute bottom-0 flex w-full cursor-pointer items-center justify-center",
+                          {
+                            "bg-black-alpha-4": A
+                          }
+                        ),
                         style: {
                           color: "white",
-                          height: ie ? "100%" : "24px"
+                          height: fe ? "100%" : "24px"
                         },
-                        onClick: () => a ? m(!0) : h.current?.click(),
-                        children: /* @__PURE__ */ t(
-                          _,
+                        onClick: () => {
+                        },
+                        children: A && /* @__PURE__ */ t(
+                          B,
                           {
                             name: "camera-01",
                             size: 16,
@@ -270,15 +282,15 @@ const I = {
                     /* @__PURE__ */ t(
                       "input",
                       {
-                        ref: h,
+                        ref: f,
                         type: "file",
-                        accept: B.join(","),
+                        accept: T.join(","),
                         className: "hidden",
-                        onChange: le
+                        onChange: se
                       }
                     ),
-                    x && /* @__PURE__ */ t("div", { className: "absolute bottom-0 inset-0 flex items-center justify-center bg-black-alpha-4", children: /* @__PURE__ */ t(
-                      ue,
+                    d && /* @__PURE__ */ t("div", { className: "absolute bottom-0 inset-0 flex items-center justify-center bg-black-alpha-4", children: /* @__PURE__ */ t(
+                      de,
                       {
                         thickness: 2,
                         width: 14,
@@ -288,21 +300,21 @@ const I = {
                   ]
                 }
               ),
-              W && !y && /* @__PURE__ */ t("span", { className: pe({ status: D }), children: /* @__PURE__ */ t("svg", { className: "h-2 w-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ t("circle", { cx: "10", cy: "10", r: "10" }) }) })
+              J && !y && /* @__PURE__ */ t("span", { className: xe({ status: Z }), children: /* @__PURE__ */ t("svg", { className: "h-2 w-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ t("circle", { cx: "10", cy: "10", r: "10" }) }) })
             ]
           }
         )
       }
     ),
-    v || i?.externalUploadError ? /* @__PURE__ */ t("div", { className: "mt-1 flex items-center gap-1", children: /* @__PURE__ */ t(
-      $,
+    v || m?.externalUploadError ? /* @__PURE__ */ t("div", { className: "mt-1 flex items-center gap-1", children: /* @__PURE__ */ t(
+      G,
       {
-        text: v || i?.externalUploadError,
+        text: v || m?.externalUploadError,
         error: !0,
         haveIcon: !0,
         iconsSize: 16,
         iconsCustom: /* @__PURE__ */ t(
-          _,
+          B,
           {
             name: "alert-octagon",
             className: "text-fg-accent-error",
@@ -311,16 +323,16 @@ const I = {
           }
         )
       }
-    ) }) : /* @__PURE__ */ t(he, { children: k ? /* @__PURE__ */ t(
-      $,
+    ) }) : /* @__PURE__ */ t(pe, { children: S ? /* @__PURE__ */ t(
+      G,
       {
-        text: k,
-        error: !!v || !!i?.externalUploadError,
-        haveIcon: z
+        text: S,
+        error: !!v || !!m?.externalUploadError,
+        haveIcon: te
       }
     ) : null })
   ] });
 };
 export {
-  je as default
+  Ce as default
 };