fix(ModalBasicLayout): fix for logic of when to show modal footer sha…

…dow (#2665)

packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx

@@ -15,7 +15,7 @@ const ModalBasicLayout = forwardRef(
     { children, className, id, "data-testid": dataTestId }: ModalBasicLayoutProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
-    const { isContentScrolled, onScroll } = useLayoutScrolledContent();
+    const { ref: contentRef, isContentScrolled, isScrollable, isScrolledToEnd, onScroll } = useLayoutScrolledContent();
     const [header, content] = React.Children.toArray(children);
 
     return (
@@ -30,11 +30,11 @@ const ModalBasicLayout = forwardRef(
         >
           <div className={styles.header}>{header}</div>
           <Divider className={cx(styles.divider, { [styles.showDivider]: isContentScrolled })} withoutMargin />
-          <ModalLayoutScrollableContent onScroll={onScroll} className={styles.content}>
+          <ModalLayoutScrollableContent onScroll={onScroll} className={styles.content} ref={contentRef}>
             {content}
           </ModalLayoutScrollableContent>
         </Flex>
-        <ModalFooterShadow show={isContentScrolled} />
+        {isScrollable && <ModalFooterShadow show={!isScrolledToEnd} />}
       </>
     );
   }

packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.tsx

@@ -1,14 +1,16 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import cx from "classnames";
 import styles from "./ModalLayoutScrollableContent.module.scss";
 import { ModalLayoutScrollableContentProps } from "./ModalLayoutScrollableContent.types";
 
-const ModalLayoutScrollableContent = ({ onScroll, className, children }: ModalLayoutScrollableContentProps) => {
-  return (
-    <div className={cx(styles.content, className)} onScroll={onScroll}>
-      {children}
-    </div>
-  );
-};
+const ModalLayoutScrollableContent = forwardRef(
+  ({ onScroll, className, children }: ModalLayoutScrollableContentProps, ref: ForwardedRef<HTMLDivElement>) => {
+    return (
+      <div ref={ref} className={cx(styles.content, className)} onScroll={onScroll}>
+        {children}
+      </div>
+    );
+  }
+);
 
 export default ModalLayoutScrollableContent;

packages/core/src/components/Modal/layouts/useLayoutScrolledContent.ts

@@ -1,16 +1,44 @@
-import { UIEventHandler, useCallback, useState } from "react";
+import { UIEventHandler, useCallback, useEffect, useRef, useState } from "react";
 
 const useLayoutScrolledContent = () => {
   const [isContentScrolled, setContentScrolled] = useState<boolean>(false);
+  const [isScrollable, setScrollable] = useState<boolean>(false);
+  const [isScrolledToEnd, setScrolledToEnd] = useState<boolean>(false);
 
-  const onScroll: UIEventHandler<HTMLDivElement> = useCallback(
-    e => {
-      setContentScrolled(e.currentTarget?.scrollTop > 0);
-    },
-    [setContentScrolled]
-  );
+  const ref = useRef<HTMLDivElement>(null);
 
-  return { isContentScrolled, onScroll };
+  const checkScroll = useCallback(() => {
+    const element = ref.current;
+    if (element) {
+      const { scrollTop, scrollHeight, clientHeight } = element;
+      setScrollable(scrollHeight > clientHeight);
+      setContentScrolled(scrollTop > 0);
+      setScrolledToEnd(scrollTop + clientHeight >= scrollHeight);
+    }
+  }, []);
+
+  const onScroll: UIEventHandler<HTMLDivElement> = useCallback(() => {
+    checkScroll();
+  }, [checkScroll]);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      checkScroll();
+    });
+
+    resizeObserver.observe(element);
+
+    checkScroll();
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [checkScroll]);
+
+  return { ref, isContentScrolled, isScrollable, isScrolledToEnd, onScroll };
 };
 
 export default useLayoutScrolledContent;