feat: added doc for scroll-area

Author: harish-viswa

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

@@ -0,0 +1,111 @@
+---
+title: Scroll Area
+description: Scroll Area component documentation
+---
+
+The Scroll Area 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 Scroll Area component can be used to create scrollable areas with custom scrollbars.
+
+```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.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "children",
+      description: "The content to display inside the scroll area",
+      required: true,
+      value: "ReactNode",
+    },
+    {
+      name: "className",
+      description: "Additional class names for the scroll area",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "viewportClassName",
+      description: "Additional class names for the viewport",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### ScrollBar
+
+The `ScrollBar` component is used to display a custom scrollbar inside the scroll area.
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "orientation",
+      description:
+        "The orientation of the scrollbar. Controls whether it appears on the side or bottom.",
+      required: false,
+      value: "'horizontal' | 'vertical'",
+      defaultValue: "'vertical'",
+    },
+    {
+      name: "className",
+      description:
+        "Additional class names for styling the scrollbar's appearance",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>

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