@bifrostui/react 2.0.0-alpha.17 → 2.0.0-alpha.19

package/es/Tabs/TabIndicator.d.ts

@@ -6,8 +6,6 @@ export interface TabIndicatorProps {
     registeredTabs: React.MutableRefObject<Record<string, React.RefObject<HTMLElement>>>;
     /** tabs 容器的引用 */
     tabsContainerRef: React.RefObject<HTMLDivElement>;
-    /** 注册版本号，每次 tab 注册/取消注册时递增 */
-    registrationVersion: number;
 }
 declare const TabIndicator: React.FC<TabIndicatorProps>;
 export default TabIndicator;

package/es/Tabs/TabIndicator.js

@@ -1,80 +1,126 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { debounce, isMini, useEventCallback } from "@bifrostui/utils";
 import scrollLeftTo from "./utils/scroll";
 const rootClass = "bui-tabs";
 const duration = 300;
+const DEFAULT_INDICATOR_WIDTH = 24;
 const TabIndicator = ({
   currentValue,
   registeredTabs,
-  tabsContainerRef,
-  registrationVersion
+  tabsContainerRef
 }) => {
   const indicatorRef = useRef(null);
+  const hasRenderedOnce = useRef(false);
+  const indicatorWidthCache = useRef(null);
+  const [indicatorStyle, setIndicatorStyle] = useState(
+    null
+  );
   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, animate = true) => {
+      const tabsEl = tabsContainerRef.current;
+      if (!tabsEl || !activeTab) {
+        return;
+      }
+      scrollLeftTo(
+        tabsEl,
+        activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
+        animate ? duration : 0
+      );
+    }
+  );
+  const getIndicatorWidth = useEventCallback(() => {
+    if (indicatorWidthCache.current !== null) {
+      return indicatorWidthCache.current;
     }
-    scrollLeftTo(
-      tabsEl,
-      activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
-      duration
-    );
-  });
-  const animate = useEventCallback(() => {
-    const tabsEl = tabsContainerRef.current;
-    if (!tabsEl)
-      return;
     const indicator = indicatorRef.current;
     if (!indicator)
+      return DEFAULT_INDICATOR_WIDTH;
+    const cssValue = getComputedStyle(indicator).getPropertyValue(
+      "--bui-tabs-indicator-width"
+    );
+    const parsed = Number.parseFloat(cssValue);
+    const width = Number.isNaN(parsed) ? DEFAULT_INDICATOR_WIDTH : parsed;
+    indicatorWidthCache.current = width;
+    return width;
+  });
+  const getTabsMeta = useEventCallback(() => {
+    const tabsNode = tabsContainerRef.current;
+    let tabsMeta = null;
+    if (tabsNode) {
+      const rect = tabsNode.getBoundingClientRect();
+      tabsMeta = {
+        clientWidth: tabsNode.clientWidth,
+        scrollLeft: tabsNode.scrollLeft,
+        scrollWidth: tabsNode.scrollWidth,
+        left: rect.left
+      };
+    }
+    let tabMeta = null;
+    const activeTab = getActiveTabElement(currentValue);
+    if (activeTab) {
+      tabMeta = activeTab.getBoundingClientRect();
+    }
+    return { tabsMeta, tabMeta };
+  });
+  const updateIndicatorState = useEventCallback(() => {
+    const { tabsMeta, tabMeta } = getTabsMeta();
+    if (!tabMeta || !tabsMeta) {
+      setIndicatorStyle(null);
       return;
+    }
+    const tabLeft = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;
+    const tabWidth = tabMeta.width;
+    const indicatorWidth = getIndicatorWidth();
+    const leftPosition = tabLeft + (tabWidth - indicatorWidth) / 2;
+    const newIndicatorStyle = {
+      left: leftPosition
+    };
+    if (indicatorStyle === null) {
+      setIndicatorStyle(newIndicatorStyle);
+    } else {
+      const dLeft = Math.abs(indicatorStyle.left - newIndicatorStyle.left);
+      if (dLeft >= 1) {
+        setIndicatorStyle(newIndicatorStyle);
+      }
+    }
     const activeTab = getActiveTabElement(currentValue);
     if (activeTab) {
-      const activeTabLeft = activeTab.offsetLeft;
-      const activeTabWidth = activeTab.offsetWidth;
-      const containerWidth = tabsEl.offsetWidth;
-      const containerScrollWidth = tabsEl.scrollWidth;
-      const activeLineWidth = indicator.offsetWidth;
-      const x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
-      indicator.style.transform = `translate(${x}px, 0px)`;
-      indicator.style.visibility = "visible";
-      const maxScrollDistance = containerScrollWidth - containerWidth;
+      const maxScrollDistance = tabsMeta.scrollWidth - tabsMeta.clientWidth;
       if (maxScrollDistance > 0 && !isMini) {
-        scrollIntoView(activeTab);
+        scrollIntoView(activeTab, hasRenderedOnce.current);
       }
-    } else {
-      indicator.style.visibility = "hidden";
+      hasRenderedOnce.current = true;
     }
   });
   useEffect(() => {
-    animate();
-  }, [animate, currentValue, registrationVersion]);
+    updateIndicatorState();
+  });
   useEffect(() => {
     const handleResize = debounce(() => {
-      animate();
+      indicatorWidthCache.current = null;
+      updateIndicatorState();
     }, 100);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [animate]);
+  }, [updateIndicatorState]);
+  if (!indicatorStyle) {
+    return null;
+  }
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: indicatorRef,
       className: clsx(`${rootClass}-indicator`),
-      style: {
-        transition: "transform 0.3s ease-in-out",
-        transform: "translate(0px, 0px)",
-        visibility: "hidden"
-      },
+      style: indicatorStyle,
       "aria-hidden": "true"
     }
   );

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

@@ -49,7 +49,6 @@ xhs-page {
   position: absolute;
   top: unset;
   bottom: var(--bui-tabs-indicator-bottom, 0);
-  left: 0;
   width: var(--bui-tabs-indicator-width);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
@@ -58,6 +57,7 @@ xhs-page {
   box-shadow: var(--bui-tabs-indicator-box-shadow);
   z-index: 1;
   pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);

package/es/Tabs/Tabs.js

@@ -29,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";
@@ -73,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(
@@ -117,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", __spreadProps(__spreadValues({ className: clsx(tabsRootClass, className) }, others), { ref }), /* @__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`,
@@ -133,8 +145,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       {
         currentValue,
         registeredTabs,
-        tabsContainerRef: tabsRef,
-        registrationVersion
+        tabsContainerRef: tabsRef
       }
     ),
     /* @__PURE__ */ React.createElement(TabsContextProvider, { value: contextValue }, renderedTabs)

package/es/Tabs/index.css

@@ -49,7 +49,6 @@ xhs-page {
   position: absolute;
   top: unset;
   bottom: var(--bui-tabs-indicator-bottom, 0);
-  left: 0;
   width: var(--bui-tabs-indicator-width);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
@@ -58,6 +57,7 @@ xhs-page {
   box-shadow: var(--bui-tabs-indicator-box-shadow);
   z-index: 1;
   pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);

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,20 @@ const TabIndicator = ({
   const isInitializedRef = useRef(false);
   const initRetryCountRef = useRef(0);
   const maxInitRetries = 5;
+  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.opacity = "0";
       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 +65,27 @@ 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)`;
+    indicator.style.opacity = "1";
   });
   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 +94,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 +130,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 +143,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.opacity = "0";
+      }
       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.opacity = "0";
+      }
       return;
     }
     updateIndicatorPosition();
@@ -144,10 +218,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 +241,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: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
+        transform: "translate(0px, 0px)",
+        opacity: 0
       }
     }
   );

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,
@@ -72,8 +72,10 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   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 = /* @__PURE__ */ React.forwardRef((props, ref) => {
     (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 = /* @__PURE__ */ React.forwardRef((props, ref) => {
     );
     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 = /* @__PURE__ */ React.forwardRef((props, ref) => {
     }
     return children;
   }, [tabs, children]);
-  React.useEffect(() => {
-    return () => {
-      if (scrollLeftUpdateTimerRef.current) {
-        clearTimeout(scrollLeftUpdateTimerRef.current);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement("div", { className: clsx(tabsRootClass, className), style, ref }, /* @__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,