Add ability to set scroll behavior when calling ref.scrollTo (#1004)

* feature/scroll-behavior: add ability to set scroll behavior when calling ref.scrollTo

* feature/scroll-behavior: add ability to set scroll behavior when calling ref.appendRow

* Fix unit tets

* Update  again

---------

Co-authored-by: Lukas Masuch <[email protected]>

Author: Tintef

package-lock.json

@@ -418,7 +418,12 @@ scrollTo: (
         row: number,
         dir?: "horizontal" | "vertical" | "both",
         paddingX?: number,
-        paddingY?: number
+        paddingY?: number,
+        options?: {
+            hAlign?: "start" | "center" | "end";
+            vAlign?: "start" | "center" | "end";
+            behavior?: ScrollBehavior; // "auto" | "smooth" | "instant"
+        }
     ) => void;
 ```
 
@@ -432,7 +437,11 @@ Requests the data grid to scroll to a particular location. If only one direction
 ## appendRow
 
 ```ts
-appendRow: (col: number, openOverlay: boolean = true) => Promise<void>;
+appendRow: (
+         col: number,
+         openOverlay: boolean = true,
+         behavior?: ScrollBehavior; // "auto" | "smooth" | "instant"
+) => Promise<void>;
 ```
 
 Appends a row to the data grid.

packages/core/API.md

@@ -687,6 +687,7 @@ type ScrollToFn = (
     options?: {
         hAlign?: "start" | "center" | "end";
         vAlign?: "start" | "center" | "end";
+        behavior?: ScrollBehavior;
     }
 ) => void;
 
@@ -697,7 +698,7 @@ export interface DataEditorRef {
      * @param col The column index to focus in the new row.
      * @returns A promise which waits for the append to complete.
      */
-    appendRow: (col: number, openOverlay?: boolean) => Promise<void>;
+    appendRow: (col: number, openOverlay?: boolean, behavior?: ScrollBehavior) => Promise<void>;
     /**
      * Triggers cells to redraw.
      */
@@ -1611,10 +1612,11 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                                 scrollX /= scale;
                                 scrollY /= scale;
                             }
-                            scrollRef.current.scrollTo(
-                                scrollX + scrollRef.current.scrollLeft,
-                                scrollY + scrollRef.current.scrollTop
-                            );
+                            scrollRef.current.scrollTo({
+                                left: scrollX + scrollRef.current.scrollLeft,
+                                top: scrollY + scrollRef.current.scrollTop,
+                                behavior: options?.behavior ?? "auto",
+                            });
                         }
                     }
                 }
@@ -1641,7 +1643,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     getCellContentRef.current = getCellContent;
     rowsRef.current = rows;
     const appendRow = React.useCallback(
-        async (col: number, openOverlay: boolean = true): Promise<void> => {
+        async (col: number, openOverlay: boolean = true, behavior?:  ScrollBehavior): Promise<void> => {
             const c = mangledCols[col];
             if (c?.trailingRowOptions?.disabled === true) {
                 return;
@@ -1667,7 +1669,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 }
 
                 const row = typeof r === "number" ? r : bottom ? rows : 0;
-                scrollToRef.current(col - rowMarkerOffset, row);
+                scrollToRef.current(col - rowMarkerOffset, row, "both", 0, 0, behavior ? { behavior } : undefined);
                 setCurrent(
                     {
                         cell: [col, row],

packages/core/src/data-editor/data-editor.tsx

@@ -28,6 +28,7 @@ interface ImperativeScrollProps {
     paddingX: number;
     vAlign?: "start" | "center" | "end";
     hAlign?: "start" | "center" | "end";
+    behavior?: "smooth" | "instant" | "auto";
 }
 
 export const ImperativeScroll: React.VFC<ImperativeScrollProps> = p => {
@@ -39,6 +40,7 @@ export const ImperativeScroll: React.VFC<ImperativeScrollProps> = p => {
         ref.current?.scrollTo(4, 99, "both", p.paddingX, p.paddingY, {
             vAlign: p.vAlign,
             hAlign: p.hAlign,
+            behavior: p.behavior,
         });
     };
 
@@ -74,6 +76,7 @@ export const ImperativeScroll: React.VFC<ImperativeScrollProps> = p => {
     paddingX: 0,
     vAlign: "start",
     hAlign: "start",
+    behavior: "auto",
 };
 (ImperativeScroll as any).argTypes = {
     paddingY: 0,
@@ -86,4 +89,8 @@ export const ImperativeScroll: React.VFC<ImperativeScrollProps> = p => {
         control: { type: "select" },
         options: ["start", "center", "end", undefined],
     },
+    behavior: {
+        control: { type: "select" },
+        options: ["smooth", "instant", "auto", undefined],
+    },
 };

packages/core/src/docs/examples/imperative-scroll.stories.tsx

@@ -1396,7 +1396,7 @@ describe("data-editor", () => {
             clientX: 300, // Col B
             clientY: 36 + 32 + 16, // Row 1 (0 indexed)
         });
-        
+
         const testKeys = [
             {
                 keyCode: 74,
@@ -1422,24 +1422,24 @@ describe("data-editor", () => {
                 keyCode: 222,
                 key: "'",
             },
-        ]
+        ];
 
         for (const key of testKeys) {
             fireEvent.keyDown(canvas, key);
             fireEvent.keyUp(canvas, key);
-    
+
             const overlay = screen.getByDisplayValue(key.key);
             expect(document.body.contains(overlay)).toBe(true);
-    
+
             vi.useFakeTimers();
             fireEvent.keyDown(overlay, {
                 key: "Escape",
             });
-    
+
             act(() => {
                 vi.runAllTimers();
             });
-    
+
             expect(document.body.contains(overlay)).toBe(false);
         }
     });
@@ -3731,7 +3731,11 @@ describe("data-editor", () => {
         act(() => {
             vi.runAllTimers();
         });
-        expect(Element.prototype.scrollTo).toBeCalledWith(0, 15_101);
+        expect(Element.prototype.scrollTo).toBeCalledWith({
+            behavior: "auto",
+            left: 0,
+            top: 15_101,
+        });
     });
 
     test("Imperative scrollTo pixel", async () => {
@@ -3751,7 +3755,11 @@ describe("data-editor", () => {
         act(() => {
             vi.runAllTimers();
         });
-        expect(Element.prototype.scrollTo).toBeCalledWith(0, 533);
+        expect(Element.prototype.scrollTo).toBeCalledWith({
+            behavior: "auto",
+            left: 0,
+            top: 533,
+        });
     });
 
     test("Imperative scrollTo pixel start", async () => {
@@ -3780,7 +3788,11 @@ describe("data-editor", () => {
         act(() => {
             vi.runAllTimers();
         });
-        expect(Element.prototype.scrollTo).toBeCalledWith(0, 1464);
+        expect(Element.prototype.scrollTo).toBeCalledWith({
+            behavior: "auto",
+            left: 0,
+            top: 1464,
+        });
     });
 
     test("Imperative scrollTo pixel center", async () => {
@@ -3809,7 +3821,11 @@ describe("data-editor", () => {
         act(() => {
             vi.runAllTimers();
         });
-        expect(Element.prototype.scrollTo).toBeCalledWith(0, 998.5);
+        expect(Element.prototype.scrollTo).toBeCalledWith({
+            behavior: "auto",
+            left: 0,
+            top: 998.5,
+        });
     });
 
     test("Imperative scrollTo pixel end", async () => {
@@ -3838,7 +3854,11 @@ describe("data-editor", () => {
         act(() => {
             vi.runAllTimers();
         });
-        expect(Element.prototype.scrollTo).toBeCalledWith(0, 533);
+        expect(Element.prototype.scrollTo).toBeCalledWith({
+            behavior: "auto",
+            left: 0,
+            top: 533,
+        });
     });
 
     test("Imperative damage gets right cell", async () => {