feat: added scroll top on page changes (#2785)

* feat: added scroll top on page changes * fix: changelog --------- Co-authored-by: Alon Peretz <[email protected]> Co-authored-by: Tomer Shvadron <[email protected]>
ballerine-io · Dec 2, 2024 · 85eea80 · 85eea80
1 parent a0d208a
commit 85eea80
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 9 deletions.
diff --git a/apps/backoffice-v2/CHANGELOG.md b/apps/backoffice-v2/CHANGELOG.md
@@ -124,6 +124,12 @@
 
 - bump
 - Updated dependencies
+  - @ballerine/react-pdf-toolkit@1.2.40
+  - @ballerine/workflow-browser-sdk@0.6.56
+  - @ballerine/workflow-node-sdk@0.6.56
+  - @ballerine/common@0.9.44
+  - @ballerine/ui@0.5.40
+  - @ballerine/blocks@0.2.24
   - @ballerine/ui@0.5.43
   - @ballerine/react-pdf-toolkit@1.2.43
 

diff --git a/apps/kyb-app/CHANGELOG.md b/apps/kyb-app/CHANGELOG.md
@@ -115,7 +115,10 @@
 
 - bump
 - Updated dependencies
+  - @ballerine/blocks@0.2.24
+  - @ballerine/common@0.9.44
   - @ballerine/ui@0.5.43
+  - @ballerine/workflow-browser-sdk@0.6.56
 
 ## 0.3.75
 

diff --git a/apps/kyb-app/src/components/layouts/AppShell/FormContainer.tsx b/apps/kyb-app/src/components/layouts/AppShell/FormContainer.tsx
@@ -1,13 +1,32 @@
+import { usePageResolverContext } from '@/components/organisms/DynamicUI/PageResolver/hooks/usePageResolverContext';
 import { AnyChildren, ScrollArea } from '@ballerine/ui';
+import { useEffect, useRef } from 'react';
 
 interface Props {
   children: AnyChildren;
   header?: AnyChildren;
 }
 
 export const FormContainer = ({ children, header }: Props) => {
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+
+  const { currentPage } = usePageResolverContext();
+
+  // Scrolls to top of the page when page changes
+  useEffect(() => {
+    if (scrollAreaRef.current) {
+      setTimeout(() => {
+        scrollAreaRef.current!.scrollTo({
+          top: 0,
+          behavior: 'smooth',
+        });
+      }, 100);
+    }
+  }, [currentPage]);
+
   return (
-    <ScrollArea orientation="both" className="h-full">
+    //@ts-ignore
+    <ScrollArea orientation="both" className="h-full" ref={scrollAreaRef}>
       <div className="text-secondary-foreground box-content flex flex-col gap-5 pl-40 pt-20">
         {header ? <div>{header}</div> : null}
         <div className="flex-flex-col w-full max-w-[385px]">{children}</div>

diff --git a/apps/workflows-dashboard/CHANGELOG.md b/apps/workflows-dashboard/CHANGELOG.md
@@ -42,6 +42,7 @@
 
 - bump
 - Updated dependencies
+  - @ballerine/common@0.9.44
   - @ballerine/common@0.9.45
   - @ballerine/ui@0.5.40
 

diff --git a/examples/headless-example/CHANGELOG.md b/examples/headless-example/CHANGELOG.md
@@ -128,6 +128,8 @@
 
 - bump
 - Updated dependencies
+  - @ballerine/workflow-browser-sdk@0.6.56
+  - @ballerine/common@0.9.44
   - @ballerine/workflow-browser-sdk@0.6.57
   - @ballerine/common@0.9.45
 

diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
@@ -38,6 +38,7 @@
 
 - bump
 - Updated dependencies
+  - @ballerine/common@0.9.44
   - @ballerine/common@0.9.45
 
 ## 0.2.23

diff --git a/packages/ui/src/components/atoms/ScrollArea/ScrollArea.tsx b/packages/ui/src/components/atoms/ScrollArea/ScrollArea.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { ctw } from '@/common/utils/ctw';
 import { ScrollBar } from '@/components/atoms';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
 
 interface Props extends ScrollAreaPrimitive.ScrollAreaProps {
   orientation: 'vertical' | 'horizontal' | 'both';
@@ -11,12 +11,8 @@ export const ScrollArea = React.forwardRef<
   React.ElementRef<React.FC<Props>>,
   React.ComponentPropsWithoutRef<React.FC<Props>>
 >(({ className, children, orientation, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={ctw('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+  <ScrollAreaPrimitive.Root className={ctw('relative overflow-hidden', className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]" ref={ref}>
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar orientation="vertical" />

diff --git a/sdks/workflow-browser-sdk/CHANGELOG.md b/sdks/workflow-browser-sdk/CHANGELOG.md
@@ -135,6 +135,8 @@
 
 - bump
 - Updated dependencies
+  - @ballerine/workflow-core@0.6.56
+  - @ballerine/common@0.9.44
   - @ballerine/workflow-core@0.6.57
   - @ballerine/common@0.9.45
 

diff --git a/services/workflows-service/CHANGELOG.md b/services/workflows-service/CHANGELOG.md
@@ -162,6 +162,9 @@
 
 - bump
 - Updated dependencies
+  - @ballerine/workflow-core@0.6.56
+  - @ballerine/workflow-node-sdk@0.6.56
+  - @ballerine/common@0.9.44
   - @ballerine/workflow-core@0.6.57
   - @ballerine/workflow-node-sdk@0.6.57
   - @ballerine/common@0.9.45