@connectif/ui-components 2.0.7 → 2.0.9

package/dist/components/chat/Chat.d.ts

@@ -20,6 +20,10 @@ export type ChatProps = React.PropsWithChildren<{
      * Number that change to trigger scroll to class in scrollToLastClassName
      */
     triggerScroll?: number;
+    /**
+     * Distance between elements to calculate scrolled height. By default 12px because is margin top in chatMessage.
+     */
+    gapBetweenElements?: number;
 }>;
-declare const Chat: ({ children, header, backgroundColor, scrollToLastClassName, scrollbarColor, triggerScroll }: ChatProps) => import("react/jsx-runtime").JSX.Element;
+declare const Chat: ({ children, header, backgroundColor, scrollToLastClassName, scrollbarColor, triggerScroll, gapBetweenElements }: ChatProps) => import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/dist/index.js

@@ -13908,7 +13908,8 @@ var Chat = ({
   backgroundColor: backgroundColor2,
   scrollToLastClassName,
   scrollbarColor,
-  triggerScroll
+  triggerScroll,
+  gapBetweenElements = 12
 }) => {
   const ref = React36.useRef(null);
   const innerRef = React36.useRef(null);
@@ -13929,21 +13930,40 @@ var Chat = ({
     setIsInitialize(true);
     return () => observer.disconnect();
   }, []);
+  const getPaddingBottom = React36.useCallback(
+    (lastElementClass, clientHeight) => {
+      if (lastElementClass && innerRef.current) {
+        let lastChildren = innerRef.current.children[innerRef.current.children.length - 1];
+        if (!lastChildren) {
+          lastChildren = lastElementClass;
+        }
+        const scrollTo = lastElementClass.offsetTop - gapBetweenElements;
+        const innerRefScroll = lastChildren.offsetTop + lastChildren.offsetHeight;
+        const scrolledHeight = innerRefScroll - scrollTo;
+        return Math.max(clientHeight - scrolledHeight, 0);
+      }
+      return PADDING_BOTTOM;
+    },
+    [gapBetweenElements]
+  );
   React36.useEffect(() => {
     const container = ref.current;
     if (!container) {
       return;
     }
-    if (innerRef.current && innerRef.current.style.paddingBottom !== "0px" && innerRef.current.style.paddingBottom !== `${PADDING_BOTTOM}px` && innerRef.current.style.paddingBottom !== "") {
-      const paddingBottom = parseInt(
-        innerRef.current.style.paddingBottom || "0",
-        10
+    const elements = container.querySelectorAll(
+      `.${scrollToLastClassName}`
+    );
+    const lastElementClass = elements[elements.length - 1];
+    if (lastElementClass && innerRef.current && innerRef.current.style.paddingBottom !== `${PADDING_BOTTOM}px`) {
+      const clientHeight = container.clientHeight - PADDING_BOTTOM;
+      const paddingBottom = getPaddingBottom(
+        lastElementClass,
+        clientHeight
       );
-      const childrenHeight = innerRef.current.scrollHeight - paddingBottom;
-      const childrenHeightVisible = childrenHeight - container.scrollTop;
-      innerRef.current.style.paddingBottom = childrenHeightVisible > container.clientHeight ? "0px" : `${container.clientHeight - childrenHeightVisible}px`;
+      innerRef.current.style.paddingBottom = paddingBottom >= clientHeight ? `${PADDING_BOTTOM}px` : `${paddingBottom}px`;
     }
-  }, [children]);
+  }, [children, getPaddingBottom, scrollToLastClassName]);
   React36.useEffect(() => {
     const container = ref.current;
     if (!container || !scrollToLastClassName || !triggerScroll) {
@@ -13952,13 +13972,24 @@ var Chat = ({
     const elements = container.querySelectorAll(
       `.${scrollToLastClassName}`
     );
-    const last = elements[elements.length - 1];
-    if (last && innerRef.current) {
-      const paddingBottom = container.clientHeight - last.offsetHeight;
+    const lastElementClass = elements[elements.length - 1];
+    if (lastElementClass && innerRef.current) {
+      const paddingBottom = getPaddingBottom(
+        lastElementClass,
+        container.clientHeight - PADDING_BOTTOM
+      );
       innerRef.current.style.paddingBottom = `${paddingBottom}px`;
-      last.scrollIntoView({ behavior: "smooth", block: "start" });
+      lastElementClass.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
     }
-  }, [scrollToLastClassName, triggerScroll]);
+  }, [
+    gapBetweenElements,
+    getPaddingBottom,
+    scrollToLastClassName,
+    triggerScroll
+  ]);
   return /* @__PURE__ */ jsxs36(
     Stack5,
     {
@@ -26092,27 +26123,27 @@ var MinimizableWindow = React86.forwardRef(function MinimizableWindow2({
 var MinimizableWindow_default = MinimizableWindow;
 
 // src/hooks/useFormatters.ts
-import { useCallback as useCallback18, useContext as useContext16 } from "react";
+import { useCallback as useCallback19, useContext as useContext16 } from "react";
 var useFormatters = () => {
   const { locale, currency, timezone } = useContext16(IntlContext);
   return {
-    formatCompactNumber: useCallback18(
+    formatCompactNumber: useCallback19(
       (value) => formatCompactNumber(value, locale),
       [locale]
     ),
-    formatNumber: useCallback18(
+    formatNumber: useCallback19(
       (value, fractionSize) => formatNumber(value, locale, fractionSize),
       [locale]
     ),
-    formatPercentage: useCallback18(
+    formatPercentage: useCallback19(
       (value, fractionSize) => formatPercentage(value, locale, fractionSize),
       [locale]
     ),
-    formatCurrency: useCallback18(
+    formatCurrency: useCallback19(
       (value, notation) => formatCurrency(value, locale, currency, notation),
       [currency, locale]
     ),
-    formatDate: useCallback18(
+    formatDate: useCallback19(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
     )