stream-chat-react 13.1.1 → 13.1.2

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.1.1";
+        const version = "13.1.2";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts

@@ -42,4 +42,4 @@ export type InfiniteScrollProps = PaginatorProps & {
  * In general, the infinite scroll controller should not aim for checking the loading state and whether there is more data to load.
  * That should be controlled by the loading function.
  */
-export declare const InfiniteScroll: (props: PropsWithChildren<InfiniteScrollProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const InfiniteScroll: (props: PropsWithChildren<InfiniteScrollProps>) => React.JSX.Element;

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';
 /**
@@ -21,17 +21,17 @@ const mousewheelListener = (event) => {
  * That should be controlled by the loading function.
  */
 export const InfiniteScroll = (props) => {
-    const { children, element = 'div', hasMore, hasMoreNewer, hasNextPage, hasPreviousPage, head, initialLoad = true, isLoading, listenToScroll, loader, loadMore, loadMoreNewer, loadNextPage, loadPreviousPage, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, ...elementProps } = props;
+    const { children, element: Component = 'div', hasMore, hasMoreNewer, hasNextPage, hasPreviousPage, head, initialLoad = true, isLoading, listenToScroll, loader, loadMore, loadMoreNewer, loadNextPage, loadPreviousPage, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, ...elementProps } = props;
     const loadNextPageFn = loadNextPage || loadMoreNewer;
     const loadPreviousPageFn = loadPreviousPage || loadMore;
     const hasNextPageFlag = hasNextPage || hasMoreNewer;
     const hasPreviousPageFlag = hasPreviousPage || hasMore;
-    const scrollComponent = useRef(undefined);
+    const [scrollComponent, setScrollComponent] = useState(null);
     const previousOffset = useRef(undefined);
     const previousReverseOffset = useRef(undefined);
     const scrollListenerRef = useRef(undefined);
     scrollListenerRef.current = () => {
-        const element = scrollComponent.current;
+        const element = scrollComponent;
         if (!element || element.offsetParent === null) {
             return;
         }
@@ -71,7 +71,7 @@ export const InfiniteScroll = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        const scrollElement = scrollComponent.current?.parentNode;
+        const scrollElement = scrollComponent?.parentNode;
         if (!scrollElement)
             return;
         const scrollListener = () => scrollListenerRef.current?.();
@@ -82,27 +82,18 @@ export const InfiniteScroll = (props) => {
             scrollElement.removeEventListener('scroll', scrollListener, useCapture);
             scrollElement.removeEventListener('resize', scrollListener, useCapture);
         };
-    }, [initialLoad, useCapture]);
+    }, [initialLoad, scrollComponent, useCapture]);
     useEffect(() => {
-        const scrollElement = scrollComponent.current?.parentNode;
-        if (scrollElement) {
-            scrollElement.addEventListener('wheel', mousewheelListener, { passive: false });
-        }
+        const scrollElement = scrollComponent?.parentNode;
+        if (!scrollElement)
+            return;
+        scrollElement.addEventListener('wheel', mousewheelListener, { passive: false });
         return () => {
-            if (scrollElement) {
-                scrollElement.removeEventListener('wheel', mousewheelListener, useCapture);
-            }
+            scrollElement.removeEventListener('wheel', mousewheelListener, useCapture);
         };
-    }, [useCapture]);
-    const attributes = {
-        ...elementProps,
-        ref: (element) => {
-            scrollComponent.current = element;
-        },
-    };
-    const childrenArray = [loader, children];
-    if (head) {
-        childrenArray.unshift(head);
-    }
-    return React.createElement(element, attributes, childrenArray);
+    }, [scrollComponent, useCapture]);
+    return (React.createElement(Component, { ...elementProps, ref: setScrollComponent },
+        head,
+        loader,
+        children));
 };

package/dist/index.browser.cjs

@@ -45425,7 +45425,7 @@ var mousewheelListener2 = (event) => {
 var InfiniteScroll = (props) => {
   const {
     children,
-    element: element4 = "div",
+    element: Component2 = "div",
     hasMore,
     hasMoreNewer,
     hasNextPage,
@@ -45447,17 +45447,17 @@ var InfiniteScroll = (props) => {
   const loadPreviousPageFn = loadPreviousPage || loadMore;
   const hasNextPageFlag = hasNextPage || hasMoreNewer;
   const hasPreviousPageFlag = hasPreviousPage || hasMore;
-  const scrollComponent = (0, import_react181.useRef)(void 0);
+  const [scrollComponent, setScrollComponent] = (0, import_react181.useState)(null);
   const previousOffset = (0, import_react181.useRef)(void 0);
   const previousReverseOffset = (0, import_react181.useRef)(void 0);
   const scrollListenerRef = (0, import_react181.useRef)(void 0);
   scrollListenerRef.current = () => {
-    const element5 = scrollComponent.current;
-    if (!element5 || element5.offsetParent === null) {
+    const element4 = scrollComponent;
+    if (!element4 || element4.offsetParent === null) {
       return;
     }
-    const parentElement = element5.parentElement;
-    const offset = element5.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
+    const parentElement = element4.parentElement;
+    const offset = element4.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
     const reverseOffset = parentElement.scrollTop;
     if (listenToScroll) {
       listenToScroll(offset, reverseOffset, threshold);
@@ -45486,7 +45486,7 @@ var InfiniteScroll = (props) => {
     );
   }, []);
   (0, import_react181.useEffect)(() => {
-    const scrollElement = scrollComponent.current?.parentNode;
+    const scrollElement = scrollComponent?.parentNode;
     if (!scrollElement) return;
     const scrollListener = () => scrollListenerRef.current?.();
     scrollElement.addEventListener("scroll", scrollListener, useCapture);
@@ -45496,29 +45496,16 @@ var InfiniteScroll = (props) => {
       scrollElement.removeEventListener("scroll", scrollListener, useCapture);
       scrollElement.removeEventListener("resize", scrollListener, useCapture);
     };
-  }, [initialLoad, useCapture]);
+  }, [initialLoad, scrollComponent, useCapture]);
   (0, import_react181.useEffect)(() => {
-    const scrollElement = scrollComponent.current?.parentNode;
-    if (scrollElement) {
-      scrollElement.addEventListener("wheel", mousewheelListener2, { passive: false });
-    }
+    const scrollElement = scrollComponent?.parentNode;
+    if (!scrollElement) return;
+    scrollElement.addEventListener("wheel", mousewheelListener2, { passive: false });
     return () => {
-      if (scrollElement) {
-        scrollElement.removeEventListener("wheel", mousewheelListener2, useCapture);
-      }
+      scrollElement.removeEventListener("wheel", mousewheelListener2, useCapture);
     };
-  }, [useCapture]);
-  const attributes = {
-    ...elementProps,
-    ref: (element5) => {
-      scrollComponent.current = element5;
-    }
-  };
-  const childrenArray = [loader, children];
-  if (head) {
-    childrenArray.unshift(head);
-  }
-  return import_react181.default.createElement(element4, attributes, childrenArray);
+  }, [scrollComponent, useCapture]);
+  return /* @__PURE__ */ import_react181.default.createElement(Component2, { ...elementProps, ref: setScrollComponent }, head, loader, children);
 };
 
 // src/components/TypingIndicator/TypingIndicator.tsx
@@ -52651,7 +52638,7 @@ var useChat = ({
   };
   (0, import_react272.useEffect)(() => {
     if (!client) return;
-    const version = "13.1.1";
+    const version = "13.1.2";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);