enhance(Tabs): Add experimental prop autoScroll (#6497)

* chore: init

* feat: autoScroll disabled

* chore: comment it

src/components/tabs/tabs.tsx

@@ -35,6 +35,12 @@ export type TabsProps = {
   onChange?: (key: string) => void
   children?: ReactNode
   direction?: 'ltr' | 'rtl'
+  /**
+   * @experimental Support disabled auto scroll when Tabs header content change.
+   * This API name or function may change in the future.
+   * Please lock the version if you want to use it.
+   */
+  autoScroll?: boolean
 } & NativeProps<
   | '--fixed-active-line-width'
   | '--active-line-height'
@@ -83,7 +89,7 @@ export const Tabs: FC<TabsProps> = p => {
     },
   })
 
-  const [{ x, width }, api] = useSpring(() => ({
+  const [{ x, width }, inkApi] = useSpring(() => ({
     x: 0,
     width: 0,
     config: {
@@ -108,12 +114,13 @@ export const Tabs: FC<TabsProps> = p => {
     },
   }))
 
-  function animate(immediate = false) {
+  function animate(immediate = false, fromMutation = false) {
     const container = tabListContainerRef.current
     if (!container) return
+
     const activeIndex = keyToIndexRecord[activeKey as string]
     if (activeIndex === undefined) {
-      api.start({
+      inkApi.start({
         x: 0,
         width: 0,
         immediate: true,
@@ -161,7 +168,7 @@ export const Tabs: FC<TabsProps> = p => {
       x = -(containerWidth - x - w)
     }
 
-    api.start({
+    inkApi.start({
       x,
       width,
       immediate,
@@ -193,11 +200,13 @@ export const Tabs: FC<TabsProps> = p => {
       )
     }
 
-    scrollApi.start({
-      scrollLeft: nextScrollLeft,
-      from: { scrollLeft: containerScrollLeft },
-      immediate,
-    })
+    if (!fromMutation || props.autoScroll !== false) {
+      scrollApi.start({
+        scrollLeft: nextScrollLeft,
+        from: { scrollLeft: containerScrollLeft },
+        immediate,
+      })
+    }
   }
 
   useIsomorphicLayoutEffect(() => {
@@ -214,7 +223,7 @@ export const Tabs: FC<TabsProps> = p => {
 
   useMutationEffect(
     () => {
-      animate(!x.isAnimating)
+      animate(!x.isAnimating, true)
     },
     tabListContainerRef,
     {