From 1c3d57420516e9f8647bb3ab5e649135c993f09b Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Tue, 26 Nov 2024 11:01:35 -0500
Subject: [PATCH] chore(merge): merge latest changes from the main branch

---
 .../__storybook__/stories/demo.tsx            |  4 ----
 .../src/core/NavigationJumpTo/index.tsx       | 21 ++++++++++++-------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/core/NavigationJumpTo/__storybook__/stories/demo.tsx b/packages/components/src/core/NavigationJumpTo/__storybook__/stories/demo.tsx
index 3921761de..3d7f4f174 100644
--- a/packages/components/src/core/NavigationJumpTo/__storybook__/stories/demo.tsx
+++ b/packages/components/src/core/NavigationJumpTo/__storybook__/stories/demo.tsx
@@ -101,10 +101,6 @@ export const NavigationJumpToDemo = (props: Args): JSX.Element => {
               { elementRef: sectionRef3, title: "Section 4" },
               { elementRef: sectionRef4, title: "Section 5" },
             ]}
-            onChange={(value, type, event) => {
-              console.log("On Change");
-              console.log(value, type, event);
-            }}
           />
         </Box>
         <Box
diff --git a/packages/components/src/core/NavigationJumpTo/index.tsx b/packages/components/src/core/NavigationJumpTo/index.tsx
index b8ca4d407..3199a2ecf 100644
--- a/packages/components/src/core/NavigationJumpTo/index.tsx
+++ b/packages/components/src/core/NavigationJumpTo/index.tsx
@@ -14,8 +14,8 @@ export interface NavigationJumpToProps extends NavigationJumpToExtraProps {
   offsetTop?: number;
   onChange?: (
     value: number,
-    type?: "click" | "scroll",
-    event?: React.SyntheticEvent
+    event?: React.SyntheticEvent,
+    type?: "click" | "scroll"
   ) => void;
 }
 
@@ -63,12 +63,12 @@ const NavigationJumpTo = forwardRef<HTMLDivElement, NavigationJumpToProps>(
     // Emit changes only once
     const handleOnChange = useCallback(
       (
-        event: React.SyntheticEvent,
         value: number,
+        event: React.SyntheticEvent,
         type: "click" | "scroll"
       ) => {
         if (value !== emittedValue) {
-          onChange?.(value, type, event);
+          onChange?.(value, event, type);
           setEmittedValue(value);
         }
       },
@@ -102,7 +102,7 @@ const NavigationJumpTo = forwardRef<HTMLDivElement, NavigationJumpToProps>(
       setFirstTabIndexInview(newValue);
 
       // Invoke the custom onChange prop
-      handleOnChange(event, newValue, "click");
+      handleOnChange(newValue, event, "click");
     };
 
     // Observe changes in the sectionIsInView object to update the tabs value
@@ -120,9 +120,16 @@ const NavigationJumpTo = forwardRef<HTMLDivElement, NavigationJumpToProps>(
         setFirstTabIndexInview(sectionInView);
 
         // Invoke the custom onChange prop
-        handleOnChange({} as React.SyntheticEvent, sectionInView, "scroll");
+        handleOnChange(
+          sectionInView,
+          {
+            target: items[sectionInView],
+            type: "scroll",
+          } as unknown as React.SyntheticEvent,
+          "scroll"
+        );
       }
-    }, [handleOnChange, navItemClicked, sectionIsInView]);
+    }, [handleOnChange, items, navItemClicked, sectionIsInView]);
 
     // Set navItemClicked to false to re-enable the option
     // to update the tab value based on scroll.