@doist/reactist 31.3.0 → 32.0.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [32.0.0](https://github.com/Doist/reactist/compare/v31.3.0...v32.0.0) (2026-05-28)
+
+### ⚠ BREAKING CHANGES
+
+- Revamped Avatar component (#1048)
+
+### Features
+
+- Revamped Avatar component ([#1048](https://github.com/Doist/reactist/issues/1048)) ([fbf1e54](https://github.com/Doist/reactist/commit/fbf1e54f17d965912edac24d6ca049bf4c5d756a))
+
 ## [31.3.0](https://github.com/Doist/reactist/compare/v31.2.0...v31.3.0) (2026-05-28)
 
 ### Features

package/dist/reactist.cjs.development.js

@@ -4483,132 +4483,296 @@ function useAutoExpand(t0) {
   React__namespace.useEffect(t3, t4);
 }
 
+/**
+ * Supported avatar sizes, in CSS pixels.
+ */
+
+/**
+ * Supported avatar clipping shapes.
+ */
+
+/**
+ * Avatar image source.
+ *
+ * Use a string for a single image URL, or a source map keyed by intrinsic image width. Source maps
+ * are converted to native `srcSet` width descriptors.
+ */
+
+const AVATAR_META_COLOR_COUNT = 20;
+const WHITESPACE_REGEXP = new RegExp('\\p{White_Space}+', 'gu');
+const GRAPHEME_SEGMENTER = typeof Intl !== 'undefined' && 'Segmenter' in Intl ? new Intl.Segmenter('und', {
+  granularity: 'grapheme'
+}) : undefined;
+function normalizeAvatarName(name) {
+  return name?.normalize('NFC').trim().replace(WHITESPACE_REGEXP, ' ') ?? '';
+}
+function getGraphemeClusters(value) {
+  if (GRAPHEME_SEGMENTER) {
+    return Array.from(GRAPHEME_SEGMENTER.segment(value), ({
+      segment
+    }) => segment);
+  }
+  return Array.from(value);
+}
+function getInitialGrapheme(value) {
+  return getGraphemeClusters(value?.toUpperCase() ?? '')[0] ?? '';
+}
 function getInitials(name) {
-  if (!name) {
+  const nameParts = normalizeAvatarName(name).split(' ').filter(Boolean);
+  if (nameParts.length === 0) {
     return '';
   }
-  const seed = name.trim().split(' ');
-  const firstInitial = seed[0];
-  const lastInitial = seed[seed.length - 1];
-  let initials = firstInitial?.[0];
-  if (firstInitial != null && lastInitial != null && initials != null &&
-  // Better readable this way.
-  // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
-  firstInitial[0] !== lastInitial[0]) {
-    initials += lastInitial[0];
-  }
-  return initials?.toUpperCase();
+  if (nameParts.length === 1) {
+    return getGraphemeClusters(nameParts[0].toUpperCase()).slice(0, 2).join('');
+  }
+  return `${getInitialGrapheme(nameParts[0])}${getInitialGrapheme(nameParts[nameParts.length - 1])}`;
 }
-function emailToIndex(email, maxIndex) {
-  const seed = email.split('@')[0];
-  const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0;
-  return hash % maxIndex;
+function getSortedImageSources(image) {
+  return Object.entries(image).map(([sourceSize, src]) => ({
+    sourceSize: Number(sourceSize),
+    src
+  })).filter(({
+    sourceSize,
+    src
+  }) => Number.isFinite(sourceSize) && sourceSize > 0 && src).sort((a, b) => a.sourceSize - b.sourceSize);
 }
-
-var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
-
-const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
-function Avatar(t0) {
-  const $ = reactCompilerRuntime.c(26);
-  let avatarUrl;
-  let className;
-  let exceptionallySetClassName;
-  let props;
-  let t1;
-  let t2;
-  let user;
-  if ($[0] !== t0) {
-    ({
-      user,
-      avatarUrl,
-      size: t1,
-      className,
-      colorList: t2,
-      exceptionallySetClassName,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = avatarUrl;
-    $[2] = className;
-    $[3] = exceptionallySetClassName;
-    $[4] = props;
-    $[5] = t1;
-    $[6] = t2;
-    $[7] = user;
-  } else {
-    avatarUrl = $[1];
-    className = $[2];
-    exceptionallySetClassName = $[3];
-    props = $[4];
-    t1 = $[5];
-    t2 = $[6];
-    user = $[7];
+function getImagePropsFromSources(sources, sizes) {
+  if (sources.length === 0) {
+    return undefined;
   }
-  const size = t1 === undefined ? "l" : t1;
-  const colorList = t2 === undefined ? AVATAR_COLORS : t2;
-  let t3;
-  if ($[8] !== user.email || $[9] !== user.name) {
-    t3 = getInitials(user.name) || getInitials(user.email);
-    $[8] = user.email;
-    $[9] = user.name;
-    $[10] = t3;
-  } else {
-    t3 = $[10];
+  return {
+    src: sources[sources.length - 1].src,
+    srcSet: sources.map(({
+      sourceSize,
+      src
+    }) => `${src} ${sourceSize}w`).join(', '),
+    sizes,
+    sources
+  };
+}
+function getSources(image, size) {
+  if (!image) {
+    return undefined;
   }
-  const userInitials = t3;
-  const avatarSize = size ? size : "l";
-  let t4;
-  if ($[11] !== avatarUrl || $[12] !== colorList || $[13] !== user.email) {
-    t4 = avatarUrl ? {
-      backgroundImage: `url(${avatarUrl})`,
-      textIndent: "-9999px"
-    } : {
-      backgroundColor: colorList[emailToIndex(user.email, colorList.length)]
+  if (typeof image === 'string') {
+    return {
+      src: image
     };
-    $[11] = avatarUrl;
-    $[12] = colorList;
-    $[13] = user.email;
-    $[14] = t4;
-  } else {
-    t4 = $[14];
   }
-  const style = t4;
-  let t5;
-  if ($[15] !== avatarSize) {
-    t5 = getClassNames(modules_08f3eeac, "size", avatarSize);
-    $[15] = avatarSize;
-    $[16] = t5;
-  } else {
-    t5 = $[16];
+  const sources = getSortedImageSources(image);
+  return getImagePropsFromSources(sources, `${size}px`);
+}
+function getAvatarImageIdentityKey(image) {
+  if (!image) {
+    return 'fallback';
   }
-  const sizeClassName = t5;
-  let t6;
-  if ($[17] !== className || $[18] !== exceptionallySetClassName || $[19] !== sizeClassName) {
-    t6 = [className, modules_08f3eeac.avatar, sizeClassName, exceptionallySetClassName];
-    $[17] = className;
-    $[18] = exceptionallySetClassName;
-    $[19] = sizeClassName;
-    $[20] = t6;
+  if (typeof image === 'string') {
+    return image;
+  }
+  const sources = getSortedImageSources(image);
+  if (sources.length === 0) {
+    return 'fallback';
+  }
+  return sources.map(({
+    sourceSize,
+    src
+  }) => `${sourceSize}:${src}`).join('|');
+}
+function getAvailableImageSources(imageProps, failedSources) {
+  if (!imageProps) {
+    return undefined;
+  }
+  if (failedSources.length === 0) {
+    return imageProps;
+  }
+  if (!imageProps.sources) {
+    return failedSources.includes(imageProps.src) ? undefined : imageProps;
+  }
+  return getImagePropsFromSources(imageProps.sources.filter(({
+    src
+  }) => !failedSources.includes(src)), imageProps.sizes);
+}
+function getAvatarMetaColorIndex(name) {
+  const normalizedName = normalizeAvatarName(name);
+  let hash = 0;
+  for (const char of normalizedName) {
+    hash = hash * 31 + (char.codePointAt(0) ?? 0) >>> 0;
+  }
+  return hash % AVATAR_META_COLOR_COUNT;
+}
+
+var modules_08f3eeac = {"avatar":"acf9ee3d","size-80":"_5b32f21b","size-72":"_5dd2ceae","size-62":"_0737423f","size-50":"_47744c53","size-40":"_087775aa","size-36":"_02c89bce","size-30":"_3ed61ce0","size-28":"c9fa2651","size-24":"_89506d0e","size-20":"d7ab9fd7","size-18":"_32fef877","size-16":"_8962c0a0","size-12":"a06fa349","initials":"_80b6bfbf","meta-color-0":"_64da0562","meta-color-1":"ee7c29c0","meta-color-2":"_70215fb1","meta-color-3":"_488b23cd","meta-color-4":"f6b3e824","meta-color-5":"_88b828ae","meta-color-6":"f931ad92","meta-color-7":"_504e515a","meta-color-8":"_277cc6cd","meta-color-9":"db85100e","meta-color-10":"c76af5ed","meta-color-11":"ab7368dc","meta-color-12":"c2a85a75","meta-color-13":"_0e942ae0","meta-color-14":"_2f79016f","meta-color-15":"_118f815d","meta-color-16":"_6e5574e6","meta-color-17":"_49d688e7","meta-color-18":"d5233bf3","meta-color-19":"_710699d5","shape-circle":"_2b4e8069","shape-rounded":"_28fdd710","image":"bda7eadb"};
+
+/**
+ * Props for the `Avatar` component.
+ */
+
+/**
+ * Displays an avatar from an image URL, a source map keyed by intrinsic
+ * image width, or initials derived from the provided name (with a background
+ * color).
+ */
+const Avatar = polymorphicComponent(function Avatar({
+  as,
+  size,
+  shape = 'circle',
+  name,
+  image,
+  alt,
+  exceptionallySetClassName,
+  'data-testid': testId,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
+  ...restProps
+}, ref) {
+  const label = getAvatarLabel({
+    alt,
+    name,
+    'aria-label': ariaLabel
+  });
+  const isDecorative = Boolean(ariaHidden ?? label === '');
+  return /*#__PURE__*/React__namespace.createElement(Box$1, _extends__default["default"]({
+    as: as,
+    ref: ref,
+    className: classNames__default["default"](modules_08f3eeac.avatar, modules_08f3eeac[`size-${size}`], modules_08f3eeac[`shape-${shape}`], exceptionallySetClassName),
+    "data-testid": testId,
+    display: "inlineFlex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    overflow: "hidden",
+    textAlign: "center"
+  }, restProps), /*#__PURE__*/React__namespace.createElement(AvatarImage
+  // Allows `AvatarImage` to remount when the image map changes,
+  // which resets error states without replacing the avatar root.
+  , {
+    key: getAvatarImageIdentityKey(image),
+    size: size,
+    name: name,
+    image: image,
+    label: label,
+    "aria-hidden": isDecorative
+  }));
+});
+function getAvatarLabel({
+  alt,
+  name,
+  'aria-label': ariaLabel
+}) {
+  return ariaLabel ?? alt ?? normalizeAvatarName(name);
+}
+function AvatarImage(t0) {
+  const $ = reactCompilerRuntime.c(22);
+  const {
+    size,
+    name,
+    image,
+    label,
+    "aria-hidden": ariaHidden
+  } = t0;
+  const imageSources = getSources(image, size);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[0] = t1;
   } else {
-    t6 = $[20];
+    t1 = $[0];
   }
-  let t7;
-  if ($[21] !== props || $[22] !== style || $[23] !== t6 || $[24] !== userInitials) {
-    t7 = /*#__PURE__*/React__namespace.createElement(Box$1, _extends__default["default"]({
-      className: t6,
-      style: style
-    }, props), userInitials);
-    $[21] = props;
-    $[22] = style;
-    $[23] = t6;
-    $[24] = userInitials;
-    $[25] = t7;
+  const [failedImageSources, setFailedImageSources] = React__namespace.useState(t1);
+  const availableImageSources = getAvailableImageSources(imageSources, failedImageSources);
+  let t2;
+  if ($[1] !== availableImageSources || $[2] !== name) {
+    t2 = availableImageSources ? "" : getInitials(name);
+    $[1] = availableImageSources;
+    $[2] = name;
+    $[3] = t2;
   } else {
-    t7 = $[25];
+    t2 = $[3];
   }
-  return t7;
+  const initials = t2;
+  const hasInitials = initials !== "";
+  if (availableImageSources) {
+    let t3;
+    if ($[4] !== availableImageSources || $[5] !== setFailedImageSources) {
+      t3 = event => {
+        const failedSource = getFailedImageSource(availableImageSources, event.currentTarget);
+        setFailedImageSources(currentFailedSources => currentFailedSources.includes(failedSource) ? currentFailedSources : [...currentFailedSources, failedSource]);
+      };
+      $[4] = availableImageSources;
+      $[5] = setFailedImageSources;
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    let t4;
+    if ($[7] !== ariaHidden || $[8] !== availableImageSources.sizes || $[9] !== availableImageSources.src || $[10] !== availableImageSources.srcSet || $[11] !== label || $[12] !== t3) {
+      t4 = /*#__PURE__*/React__namespace.createElement("img", {
+        className: modules_08f3eeac.image,
+        src: availableImageSources.src,
+        srcSet: availableImageSources.srcSet,
+        sizes: availableImageSources.sizes,
+        alt: label,
+        "aria-hidden": ariaHidden,
+        onError: t3
+      });
+      $[7] = ariaHidden;
+      $[8] = availableImageSources.sizes;
+      $[9] = availableImageSources.src;
+      $[10] = availableImageSources.srcSet;
+      $[11] = label;
+      $[12] = t3;
+      $[13] = t4;
+    } else {
+      t4 = $[13];
+    }
+    return t4;
+  }
+  if (hasInitials) {
+    const t3 = modules_08f3eeac[`meta-color-${getAvatarMetaColorIndex(name)}`];
+    let t4;
+    if ($[14] !== t3) {
+      t4 = classNames__default["default"](modules_08f3eeac.initials, t3);
+      $[14] = t3;
+      $[15] = t4;
+    } else {
+      t4 = $[15];
+    }
+    const t5 = label ? "img" : undefined;
+    let t6;
+    if ($[16] !== ariaHidden || $[17] !== initials || $[18] !== label || $[19] !== t4 || $[20] !== t5) {
+      t6 = /*#__PURE__*/React__namespace.createElement("div", {
+        className: t4,
+        role: t5,
+        "aria-label": label,
+        "aria-hidden": ariaHidden
+      }, initials);
+      $[16] = ariaHidden;
+      $[17] = initials;
+      $[18] = label;
+      $[19] = t4;
+      $[20] = t5;
+      $[21] = t6;
+    } else {
+      t6 = $[21];
+    }
+    return t6;
+  }
+  return null;
+}
+function getAbsoluteImageSource(src, image) {
+  try {
+    return new URL(src, image.ownerDocument.baseURI).href;
+  } catch {
+    return src;
+  }
+}
+function getFailedImageSource(imageProps, image) {
+  const failedSrc = image.currentSrc || image.src || imageProps.src;
+  const matchingSource = imageProps.sources?.find(({
+    src
+  }) => src === failedSrc || getAbsoluteImageSource(src, image) === failedSrc);
+  return matchingSource?.src ?? imageProps.src;
 }
-Avatar.displayName = 'Avatar';
 
 var modules_33c7c985 = {"badge":"_2714fc40","badge-info":"_3397e001","badge-positive":"b7b8944a","badge-promote":"bfc2b0e9","badge-attention":"d45e594f","badge-warning":"_1e30e9b3"};