Updating ScrollArea component and some styles

src/components/ScrollArea/ScrollArea.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+import React, {forwardRef, ForwardRefRenderFunction, memo, useImperativeHandle} from "react";
 import classnames from "classnames";
 import {
     Corner,
@@ -30,23 +30,43 @@ const ScrollArea: ForwardRefRenderFunction<HTMLDivElement, ScrollAreaProps> = (p
         children,
         className,
         horizontalScroll,
+        onScroll,
         thumbClassName,
         cornerClassName,
         viewportClassName,
         scrollbarClassName,
         ...other
     } = {...useComponentProps("scrollArea"), ...props};
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const viewportRef = React.useRef<HTMLDivElement | null>(null);
 
+    useImperativeHandle(
+        ref,
+        () => ({
+            ...rootRef.current!,
+            scrollTo: ((optionsOrX?: ScrollToOptions | number, y?: number) => {
+                if (typeof optionsOrX === 'number') {
+                    viewportRef.current?.scrollTo(optionsOrX, y!);
+                } else {
+                    viewportRef.current?.scrollTo(optionsOrX);
+                }
+            }) as HTMLElement['scrollTo'],
+
+        }),
+        []
+    );
     return (
-        <Root ref={ref} className={classnames(styles["scroll-area"], className)} {...other}>
+        <Root ref={rootRef} className={classnames(styles["scroll-area"], className)} {...other}>
             <Viewport
+                ref={viewportRef}
                 className={classnames(
                     styles["scroll-area__viewport"],
                     {
                         [styles["scroll-area__viewport--horizontal"]]: !horizontalScroll,
                     },
                     viewportClassName
                 )}
+                onScroll={onScroll}
             >
                 {children}
             </Viewport>
@@ -56,18 +76,18 @@ const ScrollArea: ForwardRefRenderFunction<HTMLDivElement, ScrollAreaProps> = (p
                 style={{padding: `0 ${xOffset}px`}}
                 className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
             >
-                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)}/>
             </Scrollbar>
 
             <Scrollbar
                 orientation="horizontal"
                 style={{padding: `${yOffset}px 0`}}
                 className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)}
             >
-                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)} />
+                <Thumb className={classnames(styles["scroll-area__thumb"], thumbClassName)}/>
             </Scrollbar>
 
-            <Corner className={classnames(styles["scroll-area__corner"], cornerClassName)} />
+            <Corner className={classnames(styles["scroll-area__corner"], cornerClassName)}/>
         </Root>
     );
 };

src/components/ScrollArea/scroll-area.module.scss

@@ -19,7 +19,7 @@ $root: scroll-area;
     touch-action: none;
     padding: var(--scroll-area-scrollbar-padding, 3px);
     background: var(--scroll-area-scrollbar-bg-color, transparent);
-    transition: background var(--transition-speed-sm) ease-in-out;
+    transition: background var(--transition-speed-sm);
 
     &:hover {
       background: var(--scroll-area-scrollbar-bg-color-hover, transparent);
@@ -42,6 +42,7 @@ $root: scroll-area;
     position: relative;
     background: var(--scroll-area-thumb-bg-color);
     border-radius: var(--scroll-area-thumb-border-radius, 100px);
+    transition: background var(--transition-speed-sm);
 
     &:hover {
       background: var(--scroll-area-thumb-bg-color-hover, var(--scroll-area-thumb-bg-color));

src/components/Tooltip/Tooltip.tsx

@@ -29,7 +29,7 @@ const Tooltip: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (props,
         open,
         defaultOpen,
         disableHoverableContent,
-        delayDuration,
+        delayDuration = 250,
         onOpenChange,
 
         arrowWidth,

src/components/Viewport/Provider.tsx

@@ -17,12 +17,21 @@ import styles from "./viewport.module.scss";
 
 export type ViewportProps = ComponentProps<"div"> & {
     mode?: ViewportMode;
+    transition?: boolean;
 };
 
 const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<ViewportProps>> = (
-    {children, className, style, mode: viewportMode = ViewportMode.Adaptive, ...props},
+    {
+        children,
+        className,
+        style,
+        mode: viewportMode = ViewportMode.Adaptive,
+        transition: viewportTransition = true,
+        ...props
+    },
     ref
 ) => {
+    const [transition, withTransition] = useState(viewportTransition);
     const [mode, setModeState] = useState<ViewportMode>(viewportMode);
     const [sizes, setSizesState] = useState<ViewportSizes | null>(null);
 
@@ -40,6 +49,7 @@ const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<Viewp
             setSizes,
             setMode,
             resetSizes,
+            withTransition
         }),
         [mode, setSizes, setMode, resetSizes]
     );
@@ -81,6 +91,7 @@ const Provider: ForwardRefRenderFunction<HTMLDivElement, PropsWithChildren<Viewp
                 className={classnames(
                     styles["viewport"],
                     {
+                        [styles["viewport--transition"]]: transition,
                         [styles["viewport--expanded"]]: mode === ViewportMode.Expanded,
                         [styles["viewport--fixed"]]: mode === ViewportMode.Fixed,
                     },

src/components/Viewport/context.ts

@@ -20,6 +20,8 @@ export interface ViewportContract {
 
     setSizes(sizes: ViewportSizes): void;
 
+    withTransition(transition: boolean): void;
+
     resetSizes(): void;
 }
 
@@ -30,6 +32,8 @@ export const ViewportContext = createContext<ViewportContract>({
 
     setSizes() {},
 
+    withTransition() {},
+
     resetSizes() {},
 });
 

src/components/Viewport/viewport.module.scss

@@ -6,13 +6,15 @@
   max-width: var(--viewport-max-width);
   min-height: var(--viewport-min-height);
   max-height: var(--viewport-max-height);
-  transition:
-    height var(--transition-speed-md) ease-in-out,
-    width var(--transition-speed-md) ease-in-out,
-    min-height var(--transition-speed-md) ease-in-out,
-    min-width var(--transition-speed-md) ease-in-out,
-    max-height var(--transition-speed-md) ease-in-out,
-    max-width var(--transition-speed-md) ease-in-out;
+
+  &--transition {
+    transition: height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    width var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    min-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    min-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    max-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out,
+    max-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out;
+  }
 
   &--expanded {
     min-height: var(--viewport-max-height);

src/components/types.ts

@@ -58,7 +58,7 @@ export interface ComponentsProps {
         | "radius"
         | "color"
     >;
-    tooltip?: TooltipProps;
+    tooltip?: Omit<TooltipProps, "content">;
     view?: ViewProps;
     viewDrawer?: ViewDrawerProps;
     viewModal?: ViewModalProps;

src/providers/ui/styles/reset.scss

@@ -123,5 +123,7 @@ body {
   will-change: background-color, color;
   transition:
     background-color var(--transition-speed-md),
+    border-color var(--transition-speed-md),
+    background var(--transition-speed-md),
     color var(--transition-speed-md);
 }

src/styles/mixins.scss

@@ -22,6 +22,12 @@
   }
 }
 
+@mixin view($view) {
+  html[view="#{$view}"] & {
+    @content;
+  }
+}
+
 @mixin browser($browser) {
   html[browser="#{$browser}"] & {
     @content;