first commit

calcom/packages/ui/components/scrollable/ScrollableArea.tsx

@@ -0,0 +1,34 @@
+import type { PropsWithChildren } from "react";
+import React, { useRef, useEffect, useState } from "react";
+
+import { classNames } from "@calcom/lib";
+
+const ScrollableArea = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const [isOverflowingY, setIsOverflowingY] = useState(false);
+
+  useEffect(() => {
+    const scrollableElement = scrollableRef.current;
+
+    if (scrollableElement) {
+      const isElementOverflowing = scrollableElement.scrollHeight > scrollableElement.clientHeight;
+      console.log({ isElementOverflowing });
+      setIsOverflowingY(isElementOverflowing);
+    }
+  }, []);
+
+  return (
+    <div
+      ref={scrollableRef}
+      className={classNames(
+        "scroll-bar overflow-y-scroll ",
+        isOverflowingY && " relative ",
+        className // Pass in your max-w / max-h
+      )}>
+      {children}
+      {isOverflowingY && <div data-testid="overflow-indicator" />}
+    </div>
+  );
+};
+
+export { ScrollableArea };

calcom/packages/ui/components/scrollable/scrollablearea.test.tsx

@@ -0,0 +1,46 @@
+import { render } from "@testing-library/react";
+
+import { ScrollableArea } from "./ScrollableArea";
+
+describe("Tests for ScrollableArea Component", () => {
+  test("Should render children inside the scrollable area", () => {
+    const { getByText } = render(
+      <ScrollableArea>
+        <div>Child 1</div>
+        <div>Child 2</div>
+      </ScrollableArea>
+    );
+
+    expect(getByText("Child 1")).toBeInTheDocument();
+    expect(getByText("Child 2")).toBeInTheDocument();
+  });
+
+  test("Shouldn't show the overflow indicator when content does not overflow vertically", () => {
+    const mockScrollHeight = 50;
+
+    const { queryByTestId } = render(
+      <ScrollableArea>
+        <div style={{ height: `${mockScrollHeight}px` }}>Non-Overflowing Content</div>
+      </ScrollableArea>
+    );
+
+    expect(queryByTestId("overflow-indicator")).not.toBeInTheDocument();
+  });
+
+  test("Should show the overflow indicator when content overflows vertically", () => {
+    const mockScrollHeight = 100;
+
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+      value: mockScrollHeight,
+      writable: true,
+    });
+
+    const { getByTestId } = render(
+      <ScrollableArea>
+        <div>Overflowing Content</div>
+      </ScrollableArea>
+    );
+
+    expect(getByTestId("overflow-indicator")).toBeInTheDocument();
+  });
+});