stream-chat-react 14.0.0-beta.5 → 14.0.0-beta.6

package/dist/cjs/emojis.js

@@ -25,7 +25,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Picker = require("@emoji-mart/react");
-const WithAudioPlayback = require("./WithAudioPlayback.0c10cb67.js");
+const WithAudioPlayback = require("./WithAudioPlayback.f9abf707.js");
 const mergeWith = require("lodash.mergewith");
 const streamChat = require("stream-chat");
 const isShadowRoot = (node) => !!node.host;

package/dist/cjs/index.js

@@ -5,7 +5,7 @@ const clsx = require("clsx");
 const nanoid = require("nanoid");
 const React = require("react");
 const audioProcessing = require("./audioProcessing.56e5db9d.js");
-const WithAudioPlayback = require("./WithAudioPlayback.0c10cb67.js");
+const WithAudioPlayback = require("./WithAudioPlayback.f9abf707.js");
 const streamChat = require("stream-chat");
 const throttle = require("lodash.throttle");
 const linkify = require("linkifyjs");
@@ -9309,12 +9309,17 @@ const ErrorBadge = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...rest, className, size, variant: "error", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMarkFill, {}) });
 function AvatarStack({
   badgeSize,
+  capLimit = 3,
   component: Component = "div",
   displayInfo = [],
-  overflowCount,
   size
 }) {
   const { Avatar: Avatar$1 = Avatar } = WithAudioPlayback.useComponentContext(AvatarStack.name);
+  const displayInfoToRender = React.useMemo(
+    () => displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo,
+    [displayInfo, capLimit]
+  );
+  const overflowCount = displayInfo.length - displayInfoToRender.length;
   if (!displayInfo.length) {
     return null;
   }
@@ -9324,8 +9329,9 @@ function AvatarStack({
       className: clsx("str-chat__avatar-stack", {
         [`str-chat__avatar-stack--size-${size}`]: typeof size === "string"
       }),
+      "data-testid": "avatar-stack",
       children: [
-        displayInfo.map((info, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        displayInfoToRender.map((info, index) => /* @__PURE__ */ jsxRuntime.jsx(
           Avatar$1,
           {
             imageUrl: info.imageUrl,
@@ -9338,6 +9344,7 @@ function AvatarStack({
           Badge,
           {
             className: "str-chat__avatar-stack__count-badge",
+            "data-testid": "avatar-stack-count-badge",
             size: badgeSize ?? size,
             variant: "counter",
             children: [
@@ -9353,34 +9360,36 @@ function AvatarStack({
 const ChannelAvatar = ({
   displayMembers,
   imageUrl,
-  overflowCount,
   size,
   userName,
   ...sharedProps
 }) => {
-  if ((displayMembers?.length ?? 0) >= 2) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      GroupAvatar,
+  const displayInfo = React.useMemo(() => {
+    if (displayMembers && displayMembers.length > 0) {
+      return displayMembers;
+    }
+    return [
       {
-        displayMembers,
-        overflowCount,
-        size,
-        ...sharedProps
+        imageUrl,
+        userName
       }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { imageUrl, size, userName, ...sharedProps });
+    ];
+  }, [displayMembers, imageUrl, userName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupAvatar, { displayMembers: displayInfo, size, ...sharedProps });
 };
 const GroupAvatar = ({
   badgeSize,
   className,
   displayMembers = [],
   isOnline,
-  overflowCount,
   size,
   ...rest
 }) => {
-  const displayCountBadge = typeof overflowCount === "number" && overflowCount > 0;
+  const displayMembersToRender = React.useMemo(
+    () => displayMembers.length > 4 ? displayMembers.slice(0, 2) : displayMembers,
+    [displayMembers]
+  );
+  const overflowCount = displayMembers.length - displayMembersToRender.length;
   if (displayMembers.length < 2) {
     const firstUser = displayMembers[0];
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9418,19 +9427,20 @@ const GroupAvatar = ({
       role: "button",
       ...rest,
       children: [
-        displayMembers.slice(0, displayCountBadge ? 2 : 4).map(({ imageUrl, userName }, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        displayMembersToRender.map(({ id, imageUrl, userName }, index) => /* @__PURE__ */ jsxRuntime.jsx(
           Avatar,
           {
             imageUrl,
             size: avatarSize,
             userName
           },
-          `${userName}-${imageUrl}-${index}`
+          id || `${userName}-${imageUrl}-${index}`
         )),
-        displayCountBadge && /* @__PURE__ */ jsxRuntime.jsxs(
+        typeof overflowCount === "number" && overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
           Badge,
           {
             className: "str-chat__avatar-group__count-badge",
+            "data-testid": "group-avatar-count-badge",
             size: badgeSize,
             variant: "counter",
             children: [
@@ -12028,7 +12038,7 @@ const RemoveAttachmentPreviewButton = ({
       "data-testid": "preview-item-delete-button",
       disabled: uploadState === "uploading",
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossSmall, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmarkSmall, {})
     }
   );
 };
@@ -16244,7 +16254,7 @@ const FileAttachmentPreview = ({
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: hasSizeLimitError ? t("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })
             ] }),
             hasRetriableError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__attachment-preview-file__retriable-error", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationTriangle, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationTriangleFill, {}),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("Upload error") }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -16464,7 +16474,7 @@ const ProgressBar = ({ className, progress, seek }) => {
         {
           className: "str-chat__message-attachment-audio-widget--progress-indicator",
           ref: setProgressIndicator,
-          style: { left: `${indicatorLeft}px` }
+          style: { insetInlineStart: `${indicatorLeft}px` }
         }
       )
     }
@@ -16700,7 +16710,7 @@ const WaveProgressBar = ({
             "data-testid": "wave-progress-bar-progress-indicator",
             ref: setProgressIndicator,
             style: {
-              left: `${indicatorLeft}px`
+              insetInlineStart: `${indicatorLeft}px`
             }
           }
         )
@@ -16799,7 +16809,7 @@ const AudioAttachmentPreview = ({
               /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMark, {}),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: hasSizeLimitError ? t("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })
             ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__attachment-preview-file__retriable-error", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationTriangle, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationTriangleFill, {}),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("Upload error") }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -16842,7 +16852,7 @@ const MediaAttachmentPreview = ({
   removeAttachments
 }) => {
   const { t } = WithAudioPlayback.useTranslationContext();
-  const { BaseImage: BaseImage$1 = BaseImage, LoadingIndicator: LoadingIndicator2 = LoadingIndicatorIcon } = WithAudioPlayback.useComponentContext();
+  const { BaseImage: BaseImage$1 = BaseImage, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator } = WithAudioPlayback.useComponentContext();
   const [thumbnailPreviewError, setThumbnailPreviewError] = React.useState(false);
   const { id, uploadPermissionCheck, uploadState } = attachment.localMetadata ?? {};
   const isUploading = uploadState === "uploading";
@@ -16893,7 +16903,7 @@ const MediaAttachmentPreview = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("str-chat__attachment-preview-media__overlay"), children: [
-            isUploading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator2, {}),
+            isUploading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator$1, { "data-testid": "loading-indicator" }),
             streamChat.isVideoAttachment(attachment) && !hasUploadError && uploadState !== "uploading" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__attachment-preview-media__video-indicator", children: [
               /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconVideoFill, {}),
               attachment.duration && /* @__PURE__ */ jsxRuntime.jsx("div", { children: attachment.duration })
@@ -18985,8 +18995,7 @@ const getGroupChannelDisplayInfo = (channel) => {
     memberList.push({ imageUrl: user.image, userName: user.name });
   }
   return {
-    members: memberList,
-    overflowCount: memberList.length > 4 ? memberList.length - 2 : void 0
+    members: memberList
   };
 };
 function computeChannelDisplayName(channel, directMessageLabel) {
@@ -19192,7 +19201,7 @@ const useChat = ({
   };
   React.useEffect(() => {
     if (!client) return;
-    const version = "14.0.0-beta.5";
+    const version = "14.0.0-beta.6";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -22335,7 +22344,6 @@ const InfiniteScroll = (props) => {
     children
   ] });
 };
-const MAX_AVATARS = 3;
 const UnMemoizedTypingIndicator = (props) => {
   const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;
   const { channelConfig, thread } = WithAudioPlayback.useChannelStateContext("TypingIndicator");
@@ -22352,11 +22360,16 @@ const UnMemoizedTypingIndicator = (props) => {
   const typingUsers = threadList ? typingInThread : typingInChannel;
   const { displayUsers } = useDebouncedTypingActive(typingUsers);
   const showIndicator = displayUsers.length > 0;
-  const displayInfo = displayUsers.slice(0, MAX_AVATARS).map(({ user }) => ({
-    id: user?.id,
-    imageUrl: user?.image,
-    userName: user?.name ?? ""
-  }));
+  const displayInfo = React.useMemo(
+    () => displayUsers.map(
+      ({ user }) => ({
+        id: user?.id,
+        imageUrl: user?.image,
+        userName: user?.name
+      })
+    ),
+    [displayUsers]
+  );
   React.useEffect(() => {
     if (showIndicator && isMessageListScrolledToBottom) scrollToBottom();
   }, [scrollToBottom, isMessageListScrolledToBottom, showIndicator]);
@@ -22366,7 +22379,6 @@ const UnMemoizedTypingIndicator = (props) => {
   if (!showIndicator || !isMessageListScrolledToBottom) {
     return null;
   }
-  const overflowCount = displayUsers.length > MAX_AVATARS ? displayUsers.length - MAX_AVATARS : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -22379,15 +22391,7 @@ const UnMemoizedTypingIndicator = (props) => {
       ),
       "data-testid": "typing-indicator",
       children: [
-        displayInfo.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          AvatarStack,
-          {
-            badgeSize: "md",
-            displayInfo,
-            overflowCount: overflowCount > 0 ? overflowCount : void 0,
-            size: "md"
-          }
-        ),
+        displayInfo.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(AvatarStack, { badgeSize: "md", displayInfo, size: "md" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__typing-indicator__bubble", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__typing-indicator__dots", children: /* @__PURE__ */ jsxRuntime.jsx(TypingIndicatorDots, {}) }) })
       ]
     }
@@ -26230,7 +26234,6 @@ const UnMemoizedChannelListItemUI = (props) => {
             {
               displayMembers: groupChannelDisplayInfo?.members,
               imageUrl: displayImage,
-              overflowCount: groupChannelDisplayInfo?.overflowCount,
               size: "xl",
               userName: avatarName
             }
@@ -26911,7 +26914,7 @@ const IconsBySeverity = {
   info: null,
   loading: WithAudioPlayback.IconRefresh,
   success: WithAudioPlayback.IconCheckmark,
-  warning: WithAudioPlayback.IconExclamationTriangle
+  warning: WithAudioPlayback.IconExclamationTriangleFill
 };
 const DefaultNotificationIcon = ({ notification }) => {
   if (!notification.severity) return null;
@@ -27851,7 +27854,7 @@ const UnsupportedAttachment = ({ attachment }) => {
 const VisibilityDisclaimer = () => {
   const { t } = WithAudioPlayback.useTranslationContext();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__visibility-disclaimer", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconEyeOpen, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconEyeFill, {}),
     t("Only visible to you")
   ] });
 };
@@ -28312,7 +28315,6 @@ const ChannelHeader = (props) => {
             className: "str-chat__avatar--channel-header",
             displayMembers: groupChannelDisplayInfo?.members,
             imageUrl: displayImage,
-            overflowCount: groupChannelDisplayInfo?.overflowCount,
             size: "lg",
             userName: displayTitle
           }
@@ -28376,15 +28378,14 @@ exports.IconChevronRight = WithAudioPlayback.IconChevronRight;
 exports.IconClock = WithAudioPlayback.IconClock;
 exports.IconCommand = WithAudioPlayback.IconCommand;
 exports.IconCopy = WithAudioPlayback.IconCopy;
-exports.IconCrossSmall = WithAudioPlayback.IconCrossSmall;
 exports.IconDelete = WithAudioPlayback.IconDelete;
 exports.IconEdit = WithAudioPlayback.IconEdit;
 exports.IconEmoji = WithAudioPlayback.IconEmoji;
 exports.IconExclamationCircleFill = WithAudioPlayback.IconExclamationCircleFill;
 exports.IconExclamationMark = WithAudioPlayback.IconExclamationMark;
 exports.IconExclamationMarkFill = WithAudioPlayback.IconExclamationMarkFill;
-exports.IconExclamationTriangle = WithAudioPlayback.IconExclamationTriangle;
-exports.IconEyeOpen = WithAudioPlayback.IconEyeOpen;
+exports.IconExclamationTriangleFill = WithAudioPlayback.IconExclamationTriangleFill;
+exports.IconEyeFill = WithAudioPlayback.IconEyeFill;
 exports.IconFile = WithAudioPlayback.IconFile;
 exports.IconFlag = WithAudioPlayback.IconFlag;
 exports.IconGiphy = WithAudioPlayback.IconGiphy;
@@ -28432,6 +28433,7 @@ exports.IconVideoFill = WithAudioPlayback.IconVideoFill;
 exports.IconVoice = WithAudioPlayback.IconVoice;
 exports.IconXCircle = WithAudioPlayback.IconXCircle;
 exports.IconXmark = WithAudioPlayback.IconXmark;
+exports.IconXmarkSmall = WithAudioPlayback.IconXmarkSmall;
 exports.LoadingChannel = WithAudioPlayback.LoadingChannel;
 exports.LoadingErrorIndicator = WithAudioPlayback.LoadingErrorIndicator;
 exports.MESSAGE_ACTIONS = WithAudioPlayback.MESSAGE_ACTIONS;