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

packages/core/API.md

@@ -417,7 +417,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;
 ```
 
@@ -431,7 +436,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/src/data-editor/data-editor.tsx

@@ -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.
      */
@@ -1608,10 +1609,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",
+                            });
                         }
                     }
                 }
@@ -1638,7 +1640,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;
@@ -1664,7 +1666,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/docs/examples/imperative-scroll.stories.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],
+    },
 };