stream-chat-react 14.2.0 → 14.3.0

package/README.md

@@ -54,26 +54,26 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
 
 ## Example Applications
 
-We have built five demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual event. You can preview these [demos](https://getstream.io/chat/demos/) on our website. Also, the code is [open source](https://github.com/GetStream/website-react-examples/).
+We have built demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual events. You can preview these [demos](https://getstream.io/chat/demos/) on our website.
 
 ## Documentation
 
 We use a doc generator to build our [component documentation](https://getstream.io/chat/docs/sdk/react/). We provide a brief description of each chat component and define all of the props it accepts.
 
-The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
+The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, you'll likely need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
 
 ## Component Reusability
 
-For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
+For components that implement significant logic, it's helpful to split the component into two parts: a top-level component that handles functionality and a lower-level component that renders the UI. This way, you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
 
 ```jsx
 <Channel>
   <Window>
     <ChannelHeader />
-    <WithComponents overrides={{ Message: CustomMessageUI }}>
+    <WithComponents overrides={{ MessageUI: CustomMessageUI }}>
       <MessageList />
     </WithComponents>
-    <MessageInput />
+    <MessageComposer />
   </Window>
   <Thread />
 </Channel>
@@ -81,14 +81,12 @@ For components that implement significant logic, it's helpful to split the compo
 
 ### Customizing Styles
 
-The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
+The preferred method for overriding the pre-defined styles in the library is a two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
 
 ```css title="index.css"
 @layer stream, stream-overrides;
 
-@import 'stream-chat-react/css/v2/index.css' layer(stream);
-/* or */
-@import 'stream-chat-react/dist/css/v2/index.css' layer(stream);
+@import 'stream-chat-react/css/index.css' layer(stream);
 
 @layer stream-overrides {
   /* your overrides */

package/dist/cjs/index.js

@@ -22380,6 +22380,7 @@ const defaultReactionOptions = {
     }
   }
 };
+const getHasExtendedReactions = (reactionOptions) => !Array.isArray(reactionOptions) && typeof reactionOptions.extended !== "undefined" && Object.keys(reactionOptions.extended).length > 0;
 const stableOwnReactions = [];
 const ReactionSelector = (props) => {
   const {
@@ -22425,7 +22426,7 @@ const ReactionSelector = (props) => {
       })
     );
   }, [reactionOptions]);
-  const hasExtendedReactions = !Array.isArray(reactionOptions) && reactionOptions.extended && Object.keys(reactionOptions.extended).length > 0;
+  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -22656,6 +22657,7 @@ const MessageReactionsDetail = ({
     reactionDetailsSort: contextReactionDetailsSort
   } = useMessageContext(MessageReactionsDetail.name);
   const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
+  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
   const {
     isLoading: areReactionsLoading,
     reactions: reactionDetails,
@@ -22702,7 +22704,7 @@ const MessageReactionsDetail = ({
             className: "str-chat__message-reactions-detail__reaction-type-list",
             "data-testid": "reaction-type-list",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__message-reactions-detail__reaction-type-list-item", children: /* @__PURE__ */ jsxRuntime.jsx(
+              hasExtendedReactions && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__message-reactions-detail__reaction-type-list-item", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   "aria-label": t("Add reaction"),
@@ -27292,6 +27294,9 @@ const useConnectionRecoveredListener = (forceUpdate) => {
 };
 const RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5e3;
 const MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2e3;
+const mapPredefinedFilterSortToChannelSort = (sort) => sort.map(({ direction = 1, field }) => ({
+  [field]: direction
+}));
 const usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
   const { addNotification } = useNotificationApi.useNotificationApi();
   const {
@@ -27300,6 +27305,10 @@ const usePaginatedChannels = (client, filters, sort, options, activeChannelHandl
   const { t } = useNotificationApi.useTranslationContext();
   const [channels, setChannels] = React.useState([]);
   const [hasNextPage, setHasNextPage] = React.useState(true);
+  const [responseFilters, setResponseFilters] = React.useState(
+    void 0
+  );
+  const [responseSort, setResponseSort] = React.useState(void 0);
   const lastRecoveryTimestamp = React.useRef(void 0);
   const recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS ? MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS : recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS;
   const filterString = React.useMemo(() => JSON.stringify(filters), [filters]);
@@ -27320,6 +27329,8 @@ const usePaginatedChannels = (client, filters, sort, options, activeChannelHandl
           setChannels,
           setHasNextPage
         });
+        setResponseFilters(void 0);
+        setResponseSort(void 0);
       } else {
         const newOptions = {
           offset,
@@ -27328,13 +27339,22 @@ const usePaginatedChannels = (client, filters, sort, options, activeChannelHandl
         const channelQueryResponse = await client.queryChannels(
           filters,
           sort || {},
-          newOptions
+          newOptions,
+          { withResponse: true }
         );
-        const newChannels = queryType === "reload" ? channelQueryResponse : uniqBy([...channels, ...channelQueryResponse], "cid");
+        const newChannels = queryType === "reload" ? channelQueryResponse.channels : uniqBy([...channels, ...channelQueryResponse.channels], "cid");
         setChannels(newChannels);
-        setHasNextPage(channelQueryResponse.length >= (newOptions.limit ?? 1));
+        setHasNextPage(channelQueryResponse.channels.length >= (newOptions.limit ?? 1));
+        const predefinedFilter = channelQueryResponse.predefined_filter;
+        const nextResponseFilters = predefinedFilter ? predefinedFilter.filter : void 0;
+        const nextResponseSort = predefinedFilter?.sort ? mapPredefinedFilterSortToChannelSort(predefinedFilter.sort) : void 0;
+        setResponseFilters(nextResponseFilters);
+        setResponseSort(nextResponseSort);
         if (!offset && activeChannelHandler) {
-          activeChannelHandler(newChannels, setChannels);
+          activeChannelHandler(newChannels, setChannels, {
+            filters: nextResponseFilters ?? filters,
+            sort: nextResponseSort ?? sort
+          });
         }
       }
     } catch (error2) {
@@ -27374,8 +27394,12 @@ const usePaginatedChannels = (client, filters, sort, options, activeChannelHandl
   React.useEffect(() => {
     queryChannels("reload");
   }, [filterString, sortString]);
+  const effectiveFilters = responseFilters ?? filters;
+  const effectiveSort = responseSort ?? sort;
   return {
     channels,
+    effectiveFilters,
+    effectiveSort,
     hasNextPage,
     loadNextPage,
     setChannels
@@ -28521,7 +28545,7 @@ const UnMemoizedChannelList = (props) => {
     searchController.state,
     searchControllerStateSelector
   );
-  const activeChannelHandler = async (channels2, setChannels2) => {
+  const activeChannelHandler = async (channels2, setChannels2, effectiveQueryParams) => {
     if (!channels2.length) {
       return;
     }
@@ -28539,7 +28563,7 @@ const UnMemoizedChannelList = (props) => {
         const newChannels = moveChannelUpwards({
           channels: channels2,
           channelToMove: customActiveChannelObject,
-          sort
+          sort: effectiveQueryParams.sort
         });
         setChannels2(newChannels);
         return;
@@ -28550,7 +28574,14 @@ const UnMemoizedChannelList = (props) => {
     }
   };
   const forceUpdate = React.useCallback(() => setChannelUpdateCount((count) => count + 1), []);
-  const { channels, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(
+  const {
+    channels,
+    effectiveFilters,
+    effectiveSort,
+    hasNextPage,
+    loadNextPage,
+    setChannels
+  } = usePaginatedChannels(
     client,
     filters || DEFAULT_FILTERS,
     sort || DEFAULT_SORT,
@@ -28562,7 +28593,11 @@ const UnMemoizedChannelList = (props) => {
   const loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
   const { customHandler, defaultHandler } = usePrepareShapeHandlers({
     allowNewMessagesFromUnfilteredChannels,
-    filters,
+    // `effectiveFilters`/`effectiveSort` reflect the backend-resolved
+    // `predefined_filter` metadata when `options.predefined_filter` is in use.
+    // For non-predefined queries they fall back to the caller-supplied
+    // `filters`/`sort` props so behavior is unchanged.
+    filters: effectiveFilters,
     lockChannelOrder,
     onAddedToChannel,
     onChannelDeleted,
@@ -28574,7 +28609,7 @@ const UnMemoizedChannelList = (props) => {
     onMessageNewHandler,
     onRemovedFromChannel,
     setChannels,
-    sort
+    sort: effectiveSort
     // TODO: implement
     // customHandleChannelListShape
   });
@@ -30006,7 +30041,7 @@ const Notification = React.forwardRef(
       }
       removeNotification(notification.id);
     };
-    const isPersistent = !notification.duration;
+    const isPersistent2 = !notification.duration;
     const severity = notification.severity;
     const livePriority = severity === "error" ? "assertive" : "polite";
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -30052,7 +30087,7 @@ const Notification = React.forwardRef(
             },
             index
           )) }),
-          (showClose || isPersistent) && /* @__PURE__ */ jsxRuntime.jsx(
+          (showClose || isPersistent2) && /* @__PURE__ */ jsxRuntime.jsx(
             useNotificationApi.Button,
             {
               appearance: "ghost",
@@ -30079,6 +30114,7 @@ const ENTER_TRANSLATION = {
   top: { x: "0%", y: "-100%" }
 };
 const EXIT_ANIMATION_MS = 340;
+const DEFAULT_MIN_DISPLAY_MS = 1e3;
 const isEnterFrom = (value) => value === "bottom" || value === "left" || value === "right" || value === "top";
 const getNotificationEnterFrom = (notification, fallbackEnterFrom) => {
   if (!notification) return fallbackEnterFrom;
@@ -30088,19 +30124,93 @@ const getNotificationEnterFrom = (notification, fallbackEnterFrom) => {
   if (isEnterFrom(originEnterFrom)) return originEnterFrom;
   return fallbackEnterFrom;
 };
+const isPersistent = (notification) => !notification.duration;
+const haveSameType = (a, b) => !!a?.type && !!b?.type && a.type === b.type;
+const pickOldest = (notifications, displayed) => {
+  const excludeId = displayed?.id ?? null;
+  let oldest = null;
+  for (const notification of notifications) {
+    if (notification.id === excludeId) continue;
+    if (!oldest || notification.createdAt < oldest.createdAt) {
+      oldest = notification;
+    }
+  }
+  return oldest;
+};
+const pickNewest = (notifications, displayed) => {
+  const excludeId = displayed?.id ?? null;
+  let newest = null;
+  for (const notification of notifications) {
+    if (notification.id === excludeId) continue;
+    if (!newest || notification.createdAt > newest.createdAt) {
+      newest = notification;
+    }
+  }
+  return newest;
+};
+const pickNewestPersistent = (notifications, excludeId) => {
+  let newest = null;
+  for (const notification of notifications) {
+    if (notification.id === excludeId) continue;
+    if (!isPersistent(notification)) continue;
+    if (!newest || notification.createdAt > newest.createdAt) {
+      newest = notification;
+    }
+  }
+  return newest;
+};
+const pickNewestOfType = (notifications, type, excludeId) => {
+  if (!type) return null;
+  let newest = null;
+  for (const notification of notifications) {
+    if (notification.id === excludeId) continue;
+    if (notification.type !== type) continue;
+    if (!newest || notification.createdAt > newest.createdAt) {
+      newest = notification;
+    }
+  }
+  return newest;
+};
+const createDefaultPickNext = (pickFromQueue = pickOldest) => (notifications, displayed) => {
+  if (notifications.length === 0) return null;
+  const newestPersistent = pickNewestPersistent(notifications, null);
+  if (!displayed) {
+    return newestPersistent ?? pickFromQueue(notifications, null);
+  }
+  const displayedInStore = notifications.some(({ id }) => id === displayed.id);
+  if (!displayedInStore) {
+    return newestPersistent ?? pickFromQueue(notifications, null);
+  }
+  if (isPersistent(displayed)) {
+    const newerPersistent = newestPersistent && newestPersistent.id !== displayed.id ? newestPersistent : pickNewestPersistent(notifications, displayed.id);
+    if (newerPersistent && newerPersistent.createdAt > displayed.createdAt) {
+      return newerPersistent;
+    }
+    return displayed;
+  }
+  const sameTypeNewest = pickNewestOfType(notifications, displayed.type, displayed.id);
+  if (sameTypeNewest) return sameTypeNewest;
+  if (newestPersistent) return newestPersistent;
+  return pickFromQueue(notifications, displayed) ?? displayed;
+};
+const defaultPickNext = createDefaultPickNext(pickOldest);
 const NotificationList = ({
   className,
   enterFrom = "bottom",
   fallbackPanel,
   filter,
+  minDisplayMs = DEFAULT_MIN_DISPLAY_MS,
   panel,
+  pickNext = defaultPickNext,
   verticalAlignment = "bottom"
 }) => {
   const { Notification: NotificationComponent = Notification } = useNotificationApi.useComponentContext();
   const { t } = useNotificationApi.useTranslationContext();
   const { removeNotification, startNotificationTimeout } = useNotificationApi.useNotificationApi();
   const exitTimeoutRef = React.useRef(null);
-  const latestNotificationRef = React.useRef(null);
+  const replacementTimeoutRef = React.useRef(null);
+  const candidateRef = React.useRef(null);
+  const displayedAtRef = React.useRef(null);
   const listRef = React.useRef(null);
   const observedElementRef = React.useRef(null);
   const startedTimeoutIdsRef = React.useRef(null);
@@ -30123,7 +30233,6 @@ const NotificationList = ({
     filter: combinedFilter,
     panel
   });
-  const nextNotification = notifications[0] ?? null;
   const dismiss = React.useCallback(
     (id) => {
       startedTimeoutIdsRef.current?.delete(id);
@@ -30139,33 +30248,105 @@ const NotificationList = ({
       }
     });
   }, [notifications]);
-  React.useEffect(() => {
-    latestNotificationRef.current = nextNotification;
-  }, [nextNotification]);
+  const clearReplacementTimeout = React.useCallback(() => {
+    if (replacementTimeoutRef.current !== null) {
+      window.clearTimeout(replacementTimeoutRef.current);
+      replacementTimeoutRef.current = null;
+    }
+  }, []);
   React.useEffect(
     () => () => {
-      if (exitTimeoutRef.current) {
+      clearReplacementTimeout();
+      if (exitTimeoutRef.current !== null) {
         window.clearTimeout(exitTimeoutRef.current);
+        exitTimeoutRef.current = null;
       }
     },
-    []
+    [clearReplacementTimeout]
   );
   React.useEffect(() => {
+    candidateRef.current = pickNext(notifications, displayedNotification);
+  }, [displayedNotification, notifications, pickNext]);
+  React.useEffect(() => {
+    if (transitionState === "exit") return;
     if (!displayedNotification) {
-      if (!nextNotification) return;
-      setDisplayedNotification(nextNotification);
-      setTransitionState("enter");
+      const candidate2 = pickNext(notifications, null);
+      if (candidate2) {
+        displayedAtRef.current = Date.now();
+        setDisplayedNotification(candidate2);
+        setTransitionState("enter");
+      }
       return;
     }
-    if (displayedNotification.id === nextNotification?.id) return;
-    if (transitionState === "exit") return;
-    setTransitionState("exit");
-    exitTimeoutRef.current = window.setTimeout(() => {
-      setDisplayedNotification(latestNotificationRef.current);
-      setTransitionState("enter");
-      exitTimeoutRef.current = null;
-    }, EXIT_ANIMATION_MS);
-  }, [displayedNotification, nextNotification, transitionState]);
+    const candidate = pickNext(notifications, displayedNotification);
+    if (!candidate) {
+      clearReplacementTimeout();
+      setTransitionState("exit");
+      exitTimeoutRef.current = window.setTimeout(() => {
+        exitTimeoutRef.current = null;
+        displayedAtRef.current = null;
+        setDisplayedNotification(null);
+        setTransitionState("enter");
+      }, EXIT_ANIMATION_MS);
+      return;
+    }
+    if (candidate.id === displayedNotification.id) {
+      clearReplacementTimeout();
+      return;
+    }
+    const displayedInStore = notifications.some(
+      ({ id }) => id === displayedNotification.id
+    );
+    const startSwap = () => {
+      replacementTimeoutRef.current = null;
+      setTransitionState("exit");
+      const previousId = displayedNotification.id;
+      const wasInStore = displayedInStore;
+      exitTimeoutRef.current = window.setTimeout(() => {
+        exitTimeoutRef.current = null;
+        if (wasInStore) {
+          startedTimeoutIdsRef.current?.delete(previousId);
+          removeNotification(previousId);
+        }
+        const next = candidateRef.current;
+        if (next && next.id !== previousId) {
+          displayedAtRef.current = Date.now();
+          setDisplayedNotification(next);
+          setTransitionState("enter");
+        } else {
+          displayedAtRef.current = null;
+          setDisplayedNotification(null);
+          setTransitionState("enter");
+        }
+      }, EXIT_ANIMATION_MS);
+    };
+    if (!displayedInStore) {
+      clearReplacementTimeout();
+      startSwap();
+      return;
+    }
+    if (haveSameType(displayedNotification, candidate)) {
+      clearReplacementTimeout();
+      startSwap();
+      return;
+    }
+    const elapsed = displayedAtRef.current ? Date.now() - displayedAtRef.current : 0;
+    const remaining = Math.max(0, minDisplayMs - elapsed);
+    if (remaining === 0) {
+      clearReplacementTimeout();
+      startSwap();
+    } else if (replacementTimeoutRef.current === null) {
+      replacementTimeoutRef.current = window.setTimeout(startSwap, remaining);
+    }
+  }, [
+    clearReplacementTimeout,
+    displayedNotification,
+    minDisplayMs,
+    notifications,
+    pickNext,
+    removeNotification,
+    transitionState
+  ]);
   const notification = displayedNotification;
   const notificationEnterFrom = getNotificationEnterFrom(notification, enterFrom);
   React.useEffect(() => {
@@ -30647,7 +30828,7 @@ const useChat = ({
   };
   React.useEffect(() => {
     if (!client) return;
-    const version = "14.2.0";
+    const version = "14.3.0";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -31336,6 +31517,7 @@ exports.WaveProgressBar = WaveProgressBar;
 exports.Window = Window;
 exports.WithComponents = WithComponents;
 exports.WithDragAndDropUpload = WithDragAndDropUpload;
+exports.createDefaultPickNext = createDefaultPickNext;
 exports.deTranslations = deTranslations;
 exports.defaultAllowedTagNames = defaultAllowedTagNames;
 exports.defaultAttachmentActionsDefaultFocus = defaultAttachmentActionsDefaultFocus;
@@ -31358,6 +31540,7 @@ exports.frTranslations = frTranslations;
 exports.getChannelDisplayImage = getChannelDisplayImage;
 exports.getCssDimensionsVariables = getCssDimensionsVariables;
 exports.getGroupChannelDisplayInfo = getGroupChannelDisplayInfo;
+exports.getHasExtendedReactions = getHasExtendedReactions;
 exports.getLatestMessagePreview = getLatestMessagePreview;
 exports.getTextareaCaretRect = getTextareaCaretRect;
 exports.getTranslatedMessageText = getTranslatedMessageText;
@@ -31388,6 +31571,8 @@ exports.modalDialogId = modalDialogId;
 exports.modalDialogManagerId = modalDialogManagerId;
 exports.moveChannelUpwards = moveChannelUpwards;
 exports.nlTranslations = nlTranslations;
+exports.pickNewest = pickNewest;
+exports.pickOldest = pickOldest;
 exports.plusPlusToEmphasis = plusPlusToEmphasis;
 exports.ptTranslations = ptTranslations;
 exports.reactionHandlerWarning = reactionHandlerWarning;