feat: added doc for scroll-area

apps/portal/src/content/docs/components/scroll-area.mdx

@@ -0,0 +1,138 @@
+---
+title: ScrollArea
+description: ScrollArea component
+---
+
+The `ScrollArea` component provides a UI element for creating scrollable areas with custom scrollbars. It includes various customization options.
+
+import { DocsPage } from "@/components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`<ScrollArea className="h-24 w-64">
+    <div className="p-4">
+        <p>Scrollable content goes here.</p>
+        <p>Scrollable content goes here.</p>
+        <p>Scrollable content goes here.</p>
+        <p>Scrollable content goes here.</p>
+        <p>Scrollable content goes here.</p>
+    </div>
+</ScrollArea>`}
+/>
+
+## Usage
+
+```typescript jsx
+import { ScrollArea } from '@harnessio/ui/components'
+
+// ...
+
+return (
+  <ScrollArea
+    className="h-64 w-64"
+    viewportClassName="custom-viewport"
+  >
+    <div className="p-4">
+      <p>Scrollable content goes here.</p>
+      <p>Scrollable content goes here.</p>
+      <p>Scrollable content goes here.</p>
+      <p>Scrollable content goes here.</p>
+      <p>Scrollable content goes here.</p>
+    </div>
+  </ScrollArea>
+)
+```
+
+## Anatomy
+
+The ScrollArea component can be used to create scrollable areas.
+
+```typescript jsx
+<ScrollArea className="h-64 w-64">
+  <div className="p-4">
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+    <p>Scrollable content goes here.</p>
+  </div>
+</ScrollArea>
+```
+
+## API Reference
+
+### ScrollArea
+
+The `ScrollArea` component serves as the main container for the scrollable area.
+
+```typescript jsx
+<ScrollArea
+  type="hover"                         // [Optional] Scrollbar visibility behavior ('auto' | 'always' | 'scroll' | 'hover')
+  dir="ltr"                            // [Optional] Reading direction ('ltr' | 'rtl')
+  scrollHideDelay={600}                // [Optional] Delay before hiding scrollbar (in ms)
+  className="h-[300px] w-[400px]"      // [Optional] Container dimensions and styles
+  viewportClassName="p-4"              // [Optional] Viewport styles
+  scrollThumbClassName="bg-gray-400"   // [Optional] Scroll thumb styles
+  asChild={false}                      // [Optional] Change the rendered element
+>
+  {/* Scrollable content */}
+</ScrollArea>
+```
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the scroll area",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "type",
+      description: "Describes the nature of scrollbar visibility",
+      required: false,
+      value: "'auto' | 'always' | 'scroll' | 'hover'",
+      defaultValue: "'hover'",
+    },
+    {
+      name: "dir",
+      description: "The reading direction of the scroll area",
+      required: false,
+      value: "'ltr' | 'rtl'",
+    },
+    {
+      name: "scrollHideDelay",
+      description:
+        "The duration from when the user stops interacting with scrollbar to when it's hidden",
+      required: false,
+      value: "number",
+      defaultValue: "600",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the scroll area container",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "viewportClassName",
+      description:
+        "Class names for the viewport element that wraps the content",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "scrollThumbClassName",
+      description: "Class names for the scroll thumb element",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "asChild",
+      description:
+        "Change the default rendered element for the one passed as a child",
+      required: false,
+      value: "boolean",
+    },
+  ]}
+/>

packages/ui/src/components/scroll-area.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
 import { cn } from '@utils/cn'
@@ -27,6 +27,14 @@ const ScrollArea = React.forwardRef<
     }, 1000)
   }
 
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
   return (
     <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden flex-1', className)} {...props}>
       <ScrollAreaPrimitive.Viewport