stream-chat-react 14.2.0 → 14.3.0

package/dist/es/index.mjs

@@ -22363,6 +22363,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 {
@@ -22408,7 +22409,7 @@ const ReactionSelector = (props) => {
       })
     );
   }, [reactionOptions]);
-  const hasExtendedReactions = !Array.isArray(reactionOptions) && reactionOptions.extended && Object.keys(reactionOptions.extended).length > 0;
+  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -22639,6 +22640,7 @@ const MessageReactionsDetail = ({
     reactionDetailsSort: contextReactionDetailsSort
   } = useMessageContext(MessageReactionsDetail.name);
   const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
+  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
   const {
     isLoading: areReactionsLoading,
     reactions: reactionDetails,
@@ -22685,7 +22687,7 @@ const MessageReactionsDetail = ({
             className: "str-chat__message-reactions-detail__reaction-type-list",
             "data-testid": "reaction-type-list",
             children: [
-              /* @__PURE__ */ jsx("li", { className: "str-chat__message-reactions-detail__reaction-type-list-item", children: /* @__PURE__ */ jsx(
+              hasExtendedReactions && /* @__PURE__ */ jsx("li", { className: "str-chat__message-reactions-detail__reaction-type-list-item", children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   "aria-label": t("Add reaction"),
@@ -27275,6 +27277,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();
   const {
@@ -27283,6 +27288,10 @@ const usePaginatedChannels = (client, filters, sort, options, activeChannelHandl
   const { t } = useTranslationContext();
   const [channels, setChannels] = useState([]);
   const [hasNextPage, setHasNextPage] = useState(true);
+  const [responseFilters, setResponseFilters] = useState(
+    void 0
+  );
+  const [responseSort, setResponseSort] = useState(void 0);
   const lastRecoveryTimestamp = 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 = useMemo(() => JSON.stringify(filters), [filters]);
@@ -27303,6 +27312,8 @@ const usePaginatedChannels = (client, filters, sort, options, activeChannelHandl
           setChannels,
           setHasNextPage
         });
+        setResponseFilters(void 0);
+        setResponseSort(void 0);
       } else {
         const newOptions = {
           offset,
@@ -27311,13 +27322,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) {
@@ -27357,8 +27377,12 @@ const usePaginatedChannels = (client, filters, sort, options, activeChannelHandl
   useEffect(() => {
     queryChannels("reload");
   }, [filterString, sortString]);
+  const effectiveFilters = responseFilters ?? filters;
+  const effectiveSort = responseSort ?? sort;
   return {
     channels,
+    effectiveFilters,
+    effectiveSort,
     hasNextPage,
     loadNextPage,
     setChannels
@@ -28504,7 +28528,7 @@ const UnMemoizedChannelList = (props) => {
     searchController.state,
     searchControllerStateSelector
   );
-  const activeChannelHandler = async (channels2, setChannels2) => {
+  const activeChannelHandler = async (channels2, setChannels2, effectiveQueryParams) => {
     if (!channels2.length) {
       return;
     }
@@ -28522,7 +28546,7 @@ const UnMemoizedChannelList = (props) => {
         const newChannels = moveChannelUpwards({
           channels: channels2,
           channelToMove: customActiveChannelObject,
-          sort
+          sort: effectiveQueryParams.sort
         });
         setChannels2(newChannels);
         return;
@@ -28533,7 +28557,14 @@ const UnMemoizedChannelList = (props) => {
     }
   };
   const forceUpdate = 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,
@@ -28545,7 +28576,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,
@@ -28557,7 +28592,7 @@ const UnMemoizedChannelList = (props) => {
     onMessageNewHandler,
     onRemovedFromChannel,
     setChannels,
-    sort
+    sort: effectiveSort
     // TODO: implement
     // customHandleChannelListShape
   });
@@ -29989,7 +30024,7 @@ const Notification = forwardRef(
       }
       removeNotification(notification.id);
     };
-    const isPersistent = !notification.duration;
+    const isPersistent2 = !notification.duration;
     const severity = notification.severity;
     const livePriority = severity === "error" ? "assertive" : "polite";
     return /* @__PURE__ */ jsxs(
@@ -30035,7 +30070,7 @@ const Notification = forwardRef(
             },
             index
           )) }),
-          (showClose || isPersistent) && /* @__PURE__ */ jsx(
+          (showClose || isPersistent2) && /* @__PURE__ */ jsx(
             Button,
             {
               appearance: "ghost",
@@ -30062,6 +30097,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;
@@ -30071,19 +30107,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 } = useComponentContext();
   const { t } = useTranslationContext();
   const { removeNotification, startNotificationTimeout } = useNotificationApi();
   const exitTimeoutRef = useRef(null);
-  const latestNotificationRef = useRef(null);
+  const replacementTimeoutRef = useRef(null);
+  const candidateRef = useRef(null);
+  const displayedAtRef = useRef(null);
   const listRef = useRef(null);
   const observedElementRef = useRef(null);
   const startedTimeoutIdsRef = useRef(null);
@@ -30106,7 +30216,6 @@ const NotificationList = ({
     filter: combinedFilter,
     panel
   });
-  const nextNotification = notifications[0] ?? null;
   const dismiss = useCallback(
     (id) => {
       startedTimeoutIdsRef.current?.delete(id);
@@ -30122,33 +30231,105 @@ const NotificationList = ({
       }
     });
   }, [notifications]);
-  useEffect(() => {
-    latestNotificationRef.current = nextNotification;
-  }, [nextNotification]);
+  const clearReplacementTimeout = useCallback(() => {
+    if (replacementTimeoutRef.current !== null) {
+      window.clearTimeout(replacementTimeoutRef.current);
+      replacementTimeoutRef.current = null;
+    }
+  }, []);
   useEffect(
     () => () => {
-      if (exitTimeoutRef.current) {
+      clearReplacementTimeout();
+      if (exitTimeoutRef.current !== null) {
         window.clearTimeout(exitTimeoutRef.current);
+        exitTimeoutRef.current = null;
       }
     },
-    []
+    [clearReplacementTimeout]
   );
   useEffect(() => {
+    candidateRef.current = pickNext(notifications, displayedNotification);
+  }, [displayedNotification, notifications, pickNext]);
+  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);
   useEffect(() => {
@@ -30630,7 +30811,7 @@ const useChat = ({
   };
   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}`);
@@ -31252,6 +31433,7 @@ export {
   areMessagePropsEqual,
   areMessageUIPropsEqual,
   countEmojis,
+  createDefaultPickNext,
   bK as createIcon,
   deTranslations,
   defaultAllowedTagNames,
@@ -31282,6 +31464,7 @@ export {
   getCssDimensionsVariables,
   getGroupChannelDisplayInfo,
   getGroupStyles,
+  getHasExtendedReactions,
   bS as getImages,
   getIsFirstUnreadMessage,
   getLastReceived,
@@ -31349,6 +31532,8 @@ export {
   modalDialogManagerId,
   moveChannelUpwards,
   nlTranslations,
+  pickNewest,
+  pickOldest,
   plusPlusToEmphasis,
   processMessages,
   ptTranslations,