@bifrostui/react 2.0.0-alpha.15 → 2.0.0-alpha.18

package/es/Tabs/Tab.css

@@ -17,7 +17,6 @@
 .bui-tab-active {
   color: var(--bui-tab-active-color);
   font-weight: var(--bui-font-weight-bold);
-  font-family: var(--bui-tab-active-font-family);
 }
 .bui-tab-disabled {
   opacity: 0.5;

package/es/Tabs/TabIndicator.js

@@ -11,23 +11,26 @@ const TabIndicator = ({
   registrationVersion
 }) => {
   const indicatorRef = useRef(null);
+  const isFirstRender = useRef(true);
   const getActiveTabElement = useEventCallback(
     (activeValue) => {
       const tabRef = registeredTabs.current[activeValue];
       return tabRef == null ? void 0 : tabRef.current;
     }
   );
-  const scrollIntoView = useEventCallback((activeTab) => {
-    const tabsEl = tabsContainerRef.current;
-    if (!tabsEl || !activeTab) {
-      return;
+  const scrollIntoView = useEventCallback(
+    (activeTab, animate2 = true) => {
+      const tabsEl = tabsContainerRef.current;
+      if (!tabsEl || !activeTab) {
+        return;
+      }
+      scrollLeftTo(
+        tabsEl,
+        activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
+        animate2 ? duration : 0
+      );
     }
-    scrollLeftTo(
-      tabsEl,
-      activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
-      duration
-    );
-  });
+  );
   const animate = useEventCallback(() => {
     const tabsEl = tabsContainerRef.current;
     if (!tabsEl)
@@ -47,7 +50,15 @@ const TabIndicator = ({
       indicator.style.visibility = "visible";
       const maxScrollDistance = containerScrollWidth - containerWidth;
       if (maxScrollDistance > 0 && !isMini) {
-        scrollIntoView(activeTab);
+        scrollIntoView(activeTab, !isFirstRender.current);
+      }
+      if (isFirstRender.current) {
+        isFirstRender.current = false;
+        requestAnimationFrame(() => {
+          if (indicator) {
+            indicator.style.transition = "transform 0.3s ease-in-out";
+          }
+        });
       }
     } else {
       indicator.style.visibility = "hidden";
@@ -71,7 +82,7 @@ const TabIndicator = ({
       ref: indicatorRef,
       className: clsx(`${rootClass}-indicator`),
       style: {
-        transition: "transform 0.3s ease-in-out",
+        transition: "none",
         transform: "translate(0px, 0px)",
         visibility: "hidden"
       },

package/es/Tabs/TabMask.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
 export interface TabMaskProps {
-    /** Tabs 容器的引用，用于监听滚动 */
-    tabsContainerRef: React.RefObject<HTMLDivElement>;
     /** 位置：左侧或右侧 */
     position: 'left' | 'right';
 }
-declare const TabMask: React.FC<TabMaskProps>;
-export default TabMask;
+declare const _default: React.NamedExoticComponent<TabMaskProps>;
+export default _default;

package/es/Tabs/TabMask.js

@@ -1,59 +1,18 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React from "react";
 import clsx from "clsx";
-import { throttle } from "@bifrostui/utils";
-const rootClass = "bui-tabs";
-const TabMask = ({ tabsContainerRef, position }) => {
-  const maskRef = useRef(null);
-  const updateMaskOpacity = useMemo(
-    () => throttle(
-      () => {
-        const tabsEl = tabsContainerRef.current;
-        const mask = maskRef.current;
-        if (!tabsEl || !mask)
-          return;
-        const { scrollLeft, scrollWidth, offsetWidth } = tabsEl;
-        let shouldShow = false;
-        if (position === "left") {
-          shouldShow = scrollLeft > 0;
-        } else {
-          const rightRange = Math.abs(
-            scrollWidth - (scrollLeft + offsetWidth)
-          );
-          shouldShow = rightRange > 1;
-        }
-        mask.style.opacity = shouldShow ? "1" : "0";
-      },
-      100,
-      {
-        trailing: true,
-        leading: true
-      }
+import { tabMaskClass, tabMaskLeftClass, tabMaskRightClass } from "./classes";
+const TabMask = ({ position }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: clsx(
+      tabMaskClass,
+      position === "left" ? tabMaskLeftClass : tabMaskRightClass
     ),
-    [tabsContainerRef, position]
-  );
-  useEffect(() => {
-    const tabsEl = tabsContainerRef.current;
-    if (!tabsEl)
-      return void 0;
-    updateMaskOpacity();
-    tabsEl.addEventListener("scroll", updateMaskOpacity);
-    return () => {
-      tabsEl.removeEventListener("scroll", updateMaskOpacity);
-    };
-  }, [tabsContainerRef, updateMaskOpacity]);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref: maskRef,
-      className: clsx(`${rootClass}-mask`, `${rootClass}-mask-${position}`),
-      style: {
-        opacity: 0
-      },
-      "aria-hidden": "true"
-    }
-  );
-};
-var TabMask_default = TabMask;
+    "aria-hidden": "true"
+  }
+);
+TabMask.displayName = "BuiTabsMask";
+var TabMask_default = /* @__PURE__ */ React.memo(TabMask);
 export {
   TabMask_default as default
 };

package/es/Tabs/Tabs.css

@@ -16,7 +16,6 @@ xhs-page {
   --bui-tab-height: 100%;
   --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
   --bui-tab-active-color: var(--bui-color-fg-default);
-  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
 }
 .bui-tabs {
   position: relative;

package/es/Tabs/Tabs.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -26,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
 import { useValue, useEventCallback } from "@bifrostui/utils";
 import Tab from "./Tab";
@@ -70,6 +73,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     {}
   );
   const [registrationVersion, setRegistrationVersion] = useState(0);
+  const [isScrollable, setIsScrollable] = useState(false);
   if (process.env.NODE_ENV !== "production") {
     if (tabs.length > 0 && React.Children.count(children) > 0) {
       console.warn(
@@ -114,10 +118,21 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     }
     return children;
   }, [tabs, children]);
-  if (process.env.NODE_ENV !== "production") {
-    console.count("Tabs render......");
-  }
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(tabsRootClass, className) }, others), /* @__PURE__ */ React.createElement(TabMask, { tabsContainerRef: tabsRef, position: "left" }), /* @__PURE__ */ React.createElement(TabMask, { tabsContainerRef: tabsRef, position: "right" }), /* @__PURE__ */ React.createElement(
+  useEffect(() => {
+    const tabsEl = tabsRef.current;
+    if (!tabsEl)
+      return;
+    const checkScrollable = () => {
+      setIsScrollable(tabsEl.scrollWidth > tabsEl.offsetWidth);
+    };
+    checkScrollable();
+    const resizeObserver = new ResizeObserver(checkScrollable);
+    resizeObserver.observe(tabsEl);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [registrationVersion]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({ className: clsx(tabsRootClass, className) }, others), { ref }), isScrollable && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TabMask, { position: "left" }), /* @__PURE__ */ React.createElement(TabMask, { position: "right" })), /* @__PURE__ */ React.createElement(
     "div",
     {
       className: `${tabsRootClass}-tabs`,

package/es/Tabs/index.css

@@ -16,7 +16,6 @@ xhs-page {
   --bui-tab-height: 100%;
   --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
   --bui-tab-active-color: var(--bui-color-fg-default);
-  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
 }
 .bui-tabs {
   position: relative;
@@ -107,7 +106,6 @@ xhs-page {
 .bui-tab-active {
   color: var(--bui-tab-active-color);
   font-weight: var(--bui-font-weight-bold);
-  font-family: var(--bui-tab-active-font-family);
 }
 .bui-tab-disabled {
   opacity: 0.5;

package/es/Tabs/miniapp/Tab.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TabProps } from '../Tab.types';
 import '../Tab.less';
-declare const _default: React.NamedExoticComponent<TabProps<"div", {}>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TabProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>>;
 export default _default;

package/es/Tabs/miniapp/Tab.js

@@ -1,10 +1,10 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import clsx from "clsx";
-import { useContextSelector } from "@bifrostui/utils";
+import { useContextSelector, useForkRef } from "@bifrostui/utils";
 import TabsContext from "./TabsContext";
 import { tabRootClass, tabActiveClass, tabDisabledClass } from "../classes";
 import "../Tab.css";
-const Tab = (props) => {
+const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const {
     className,
     children,
@@ -13,6 +13,8 @@ const Tab = (props) => {
     onClick,
     style
   } = props;
+  const innerRef = useRef(null);
+  const handleRef = useForkRef(ref, innerRef);
   const isActive = useContextSelector(
     TabsContext,
     (ctx) => ctx.value === index
@@ -53,6 +55,7 @@ const Tab = (props) => {
     "div",
     {
       id: tabId,
+      ref: handleRef,
       className: rootCls,
       style,
       onClick: (e) => {
@@ -64,7 +67,7 @@ const Tab = (props) => {
     },
     children
   );
-};
+});
 Tab.displayName = "BuiTab";
 var Tab_default = /* @__PURE__ */ React.memo(Tab, (prevProps, nextProps) => {
   return prevProps.index === nextProps.index && prevProps.disabled === nextProps.disabled && prevProps.className === nextProps.className && prevProps.children === nextProps.children;

package/es/Tabs/miniapp/TabIndicator.js

@@ -18,12 +18,15 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import clsx from "clsx";
 import Taro from "@tarojs/taro";
 import { useEventCallback } from "@bifrostui/utils";
 import { tabIndicatorClass } from "../classes";
 import { batchQueryTabs } from "./utils/queryBatch";
+const isValidTabValue = (value) => {
+  return value !== void 0 && value !== null;
+};
 const TabIndicator = ({
   currentValue,
   registeredTabValues,
@@ -31,8 +34,7 @@ const TabIndicator = ({
   scrollViewId,
   registrationVersion
 }) => {
-  const [transform, setTransform] = useState("translate(0px, 0px)");
-  const [visibility, setVisibility] = useState("hidden");
+  const indicatorRef = useRef(null);
   const animationTimerRef = useRef(null);
   const positionCacheRef = useRef(/* @__PURE__ */ new Map());
   const containerInfoRef = useRef(null);
@@ -40,14 +42,21 @@ const TabIndicator = ({
   const isInitializedRef = useRef(false);
   const initRetryCountRef = useRef(0);
   const maxInitRetries = 5;
+  const isFirstRender = useRef(true);
+  const isInitializingRef = useRef(false);
+  const initVersionRef = useRef(0);
+  const isMountedRef = useRef(true);
   const updateIndicatorPosition = useEventCallback(() => {
-    if (!currentValue || !registeredTabValues.includes(currentValue)) {
-      setVisibility("hidden");
+    const indicator = indicatorRef.current;
+    if (!indicator)
+      return;
+    if (!isValidTabValue(currentValue) || !registeredTabValues.includes(currentValue)) {
+      indicator.style.visibility = "hidden";
       return;
     }
     const cachedPosition = positionCacheRef.current.get(currentValue);
     const containerInfo = containerInfoRef.current;
-    if (!cachedPosition || !containerInfo) {
+    if (!cachedPosition || !containerInfo || !isInitializedRef.current) {
       if (!isInitializedRef.current) {
         initializePositions();
       }
@@ -57,16 +66,41 @@ const TabIndicator = ({
     const activeTabWidth = cachedPosition.width;
     const indicatorWidth = indicatorWidthRef.current;
     const x = activeTabLeft + (activeTabWidth - indicatorWidth) / 2;
-    setTransform(`translate(${x}px, 0px)`);
-    setVisibility("visible");
+    indicator.style.transform = `translate(${x}px, 0px)`;
+    if (isFirstRender.current) {
+      Taro.nextTick(() => {
+        if (!isMountedRef.current || !indicatorRef.current)
+          return;
+        indicatorRef.current.style.visibility = "visible";
+        Taro.nextTick(() => {
+          if (!isMountedRef.current || !indicatorRef.current)
+            return;
+          indicatorRef.current.style.transition = "transform 0.3s ease-in-out";
+        });
+      });
+      isFirstRender.current = false;
+    } else {
+      indicator.style.visibility = "visible";
+    }
   });
   const initializePositions = useEventCallback(() => __async(void 0, null, function* () {
+    if (!isMountedRef.current)
+      return;
+    if (isInitializingRef.current)
+      return;
+    isInitializingRef.current = true;
+    initVersionRef.current += 1;
+    const currentVersion = initVersionRef.current;
     try {
       const result = yield batchQueryTabs({
         scrollViewId,
         wrapperId,
         tabValues: registeredTabValues
       });
+      if (!isMountedRef.current)
+        return;
+      if (currentVersion !== initVersionRef.current)
+        return;
       const { scrollView, scrollFields, wrapper, indicator, tabs } = result;
       if (!scrollView || !wrapper || !indicator || !scrollFields) {
         if (initRetryCountRef.current < maxInitRetries) {
@@ -75,8 +109,30 @@ const TabIndicator = ({
             clearTimeout(animationTimerRef.current);
           }
           animationTimerRef.current = setTimeout(() => {
+            if (!isMountedRef.current)
+              return;
+            isInitializingRef.current = false;
             initializePositions();
           }, 100);
+        } else {
+          isInitializingRef.current = false;
+        }
+        return;
+      }
+      if (!indicator.width || indicator.width <= 0) {
+        if (initRetryCountRef.current < maxInitRetries) {
+          initRetryCountRef.current += 1;
+          if (animationTimerRef.current) {
+            clearTimeout(animationTimerRef.current);
+          }
+          animationTimerRef.current = setTimeout(() => {
+            if (!isMountedRef.current)
+              return;
+            isInitializingRef.current = false;
+            initializePositions();
+          }, 100);
+        } else {
+          isInitializingRef.current = false;
         }
         return;
       }
@@ -89,9 +145,8 @@ const TabIndicator = ({
       registeredTabValues.forEach((value, index) => {
         const tabRect = tabs[index];
         if (tabRect && tabRect.width > 0) {
-          const relativeLeft = tabRect.left - wrapper.left;
           newCache.set(value, {
-            left: relativeLeft,
+            left: tabRect.left - wrapper.left,
             width: tabRect.width
           });
         }
@@ -103,40 +158,74 @@ const TabIndicator = ({
             clearTimeout(animationTimerRef.current);
           }
           animationTimerRef.current = setTimeout(() => {
+            if (!isMountedRef.current)
+              return;
+            isInitializingRef.current = false;
             initializePositions();
           }, 100);
+        } else {
+          isInitializingRef.current = false;
         }
         return;
       }
+      if (currentVersion !== initVersionRef.current || !isMountedRef.current) {
+        return;
+      }
       initRetryCountRef.current = 0;
       positionCacheRef.current = newCache;
       isInitializedRef.current = true;
+      isInitializingRef.current = false;
       updateIndicatorPosition();
     } catch (error) {
       console.error("[TabIndicator] \u6279\u91CF\u67E5\u8BE2\u5931\u8D25:", error);
+      isInitializingRef.current = false;
+      if (isMountedRef.current && initRetryCountRef.current < maxInitRetries) {
+        initRetryCountRef.current += 1;
+        if (animationTimerRef.current) {
+          clearTimeout(animationTimerRef.current);
+        }
+        animationTimerRef.current = setTimeout(() => {
+          if (!isMountedRef.current)
+            return;
+          initializePositions();
+        }, 100);
+      }
     }
   }));
   useEffect(() => {
     if (registeredTabValues.length === 0) {
+      if (indicatorRef.current) {
+        indicatorRef.current.style.visibility = "hidden";
+      }
       return void 0;
     }
+    initVersionRef.current += 1;
     if (animationTimerRef.current) {
       clearTimeout(animationTimerRef.current);
+      animationTimerRef.current = null;
     }
     isInitializedRef.current = false;
+    isInitializingRef.current = false;
     initRetryCountRef.current = 0;
     Taro.nextTick(() => {
+      if (!isMountedRef.current)
+        return;
       initializePositions();
     });
     return () => {
       if (animationTimerRef.current) {
         clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
       }
+      initVersionRef.current += 1;
+      isInitializingRef.current = false;
     };
   }, [registrationVersion, initializePositions]);
   useEffect(() => {
-    if (!currentValue) {
-      setVisibility("hidden");
+    if (!isValidTabValue(currentValue)) {
+      if (indicatorRef.current) {
+        indicatorRef.current.style.visibility = "hidden";
+      }
       return;
     }
     updateIndicatorPosition();
@@ -144,10 +233,20 @@ const TabIndicator = ({
   useEffect(() => {
     var _a, _b;
     const handleResize = () => {
+      if (!isMountedRef.current)
+        return;
+      initVersionRef.current += 1;
       isInitializedRef.current = false;
+      isInitializingRef.current = false;
       initRetryCountRef.current = 0;
       positionCacheRef.current.clear();
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
+      }
       Taro.nextTick(() => {
+        if (!isMountedRef.current)
+          return;
         initializePositions();
       });
     };
@@ -157,15 +256,26 @@ const TabIndicator = ({
       (_b2 = (_a2 = Taro).offWindowResize) == null ? void 0 : _b2.call(_a2, handleResize);
     };
   }, [initializePositions]);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
+      }
+    };
+  }, []);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref: indicatorRef,
       id: `${wrapperId}-indicator`,
       className: clsx(tabIndicatorClass),
       style: {
-        transition: "transform 0.3s ease-in-out",
-        transform,
-        visibility
+        transition: "none",
+        transform: "translate(0px, 0px)",
+        visibility: "hidden"
       }
     }
   );

package/es/Tabs/miniapp/Tabs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TabsProps } from '../Tabs.types';
 import '../Tabs.less';
-declare const Tabs: React.FC<TabsProps>;
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;

package/es/Tabs/miniapp/Tabs.js

@@ -25,7 +25,7 @@ import { ScrollView } from "@tarojs/components";
 import { useValue, useEventCallback } from "@bifrostui/utils";
 import Tab from "./Tab";
 import TabIndicator from "./TabIndicator";
-import TabMask from "./TabMask";
+import TabMask from "../TabMask";
 import { TabsContextProvider } from "./TabsContext";
 import {
   tabsRootClass,
@@ -37,7 +37,7 @@ import {
   batchQueryForScroll
 } from "./utils/queryBatch";
 import "../Tabs.css";
-const Tabs = (props) => {
+const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -72,8 +72,10 @@ const Tabs = (props) => {
   const [scrollLeft, setScrollLeft] = useState(0);
   const [containerWidth, setContainerWidth] = useState(0);
   const [scrollWidth, setScrollWidth] = useState(0);
-  const scrollLeftUpdateTimerRef = React.useRef(null);
   const lastScrollLeftRef = React.useRef(0);
+  const isFirstScroll = React.useRef(true);
+  const [scrollWithAnimation, setScrollWithAnimation] = React.useState(false);
+  const isScrollable = scrollWidth > containerWidth;
   if (process.env.NODE_ENV !== "production") {
     if (tabs.length > 0 && React.Children.count(children) > 0) {
       console.warn(
@@ -113,14 +115,6 @@ const Tabs = (props) => {
     (e) => {
       const { scrollLeft: newScrollLeft, scrollWidth: newScrollWidth } = e.detail;
       lastScrollLeftRef.current = newScrollLeft;
-      if (scrollLeftUpdateTimerRef.current) {
-        clearTimeout(scrollLeftUpdateTimerRef.current);
-      }
-      scrollLeftUpdateTimerRef.current = setTimeout(() => {
-        if (Math.abs(lastScrollLeftRef.current - scrollLeft) > 1) {
-          setScrollLeft(lastScrollLeftRef.current);
-        }
-      }, 150);
       if (newScrollWidth && newScrollWidth !== scrollWidth) {
         setScrollWidth(newScrollWidth);
       }
@@ -163,6 +157,12 @@ const Tabs = (props) => {
     );
     setScrollLeft(finalScrollLeft);
     lastScrollLeftRef.current = finalScrollLeft;
+    if (isFirstScroll.current) {
+      Taro.nextTick(() => {
+        setScrollWithAnimation(true);
+      });
+      isFirstScroll.current = false;
+    }
   }));
   React.useEffect(() => {
     if (!currentValue || registeredTabValues.length === 0) {
@@ -196,38 +196,14 @@ const Tabs = (props) => {
     }
     return children;
   }, [tabs, children]);
-  React.useEffect(() => {
-    return () => {
-      if (scrollLeftUpdateTimerRef.current) {
-        clearTimeout(scrollLeftUpdateTimerRef.current);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement("div", { className: clsx(tabsRootClass, className), style }, /* @__PURE__ */ React.createElement(
-    TabMask,
-    {
-      position: "left",
-      scrollLeft,
-      containerWidth,
-      scrollWidth
-    }
-  ), /* @__PURE__ */ React.createElement(
-    TabMask,
-    {
-      position: "right",
-      scrollLeft,
-      containerWidth,
-      scrollWidth
-    }
-  ), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: clsx(tabsRootClass, className), style, ref }, isScrollable && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TabMask, { position: "left" }), /* @__PURE__ */ React.createElement(TabMask, { position: "right" })), /* @__PURE__ */ React.createElement(
     ScrollView,
     {
       id: scrollViewId,
       className: tabsScrollClass,
       scrollX: true,
-      scrollWithAnimation: true,
+      scrollWithAnimation,
       scrollLeft,
-      scrollAnimationDuration: "200",
       onScroll: handleScroll,
       enhanced: true,
       showScrollbar: false,
@@ -245,7 +221,7 @@ const Tabs = (props) => {
       }
     ), /* @__PURE__ */ React.createElement(TabsContextProvider, { value: contextValue }, renderedTabs))
   ));
-};
+});
 Tabs.displayName = "BuiTabs";
 var Tabs_default = Tabs;
 export {