feat: support for view management (#2892)

packages/component/src/ui/scrollbar/scrollbar.tsx

@@ -8,22 +8,28 @@ import * as styles from './index.css';
 export type ScrollableContainerProps = {
   showScrollTopBorder?: boolean;
   inTableView?: boolean;
+  className?: string;
+  viewPortClassName?: string;
 };
 
 export const ScrollableContainer = ({
   children,
   showScrollTopBorder = false,
   inTableView = false,
+  className,
+  viewPortClassName,
 }: PropsWithChildren<ScrollableContainerProps>) => {
   const [hasScrollTop, ref] = useHasScrollTop();
   return (
-    <ScrollArea.Root className={styles.scrollableContainerRoot}>
+    <ScrollArea.Root
+      className={clsx(styles.scrollableContainerRoot, className)}
+    >
       <div
         data-has-scroll-top={hasScrollTop}
         className={clsx({ [styles.scrollTopBorder]: showScrollTopBorder })}
       />
       <ScrollArea.Viewport
-        className={clsx([styles.scrollableViewport])}
+        className={clsx([styles.scrollableViewport, viewPortClassName])}
         ref={ref}
       >
         <div className={styles.scrollableContainer}>{children}</div>