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

package/dist/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "onClose" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/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/dist/Tabs/TabIndicator.js

@@ -36,77 +36,123 @@ var import_utils = require("@bifrostui/utils");
 var import_scroll = __toESM(require("./utils/scroll"));
 const rootClass = "bui-tabs";
 const duration = 300;
+const DEFAULT_INDICATOR_WIDTH = 24;
 const TabIndicator = ({
   currentValue,
   registeredTabs,
-  tabsContainerRef,
-  registrationVersion
+  tabsContainerRef
 }) => {
   const indicatorRef = (0, import_react.useRef)(null);
+  const hasRenderedOnce = (0, import_react.useRef)(false);
+  const indicatorWidthCache = (0, import_react.useRef)(null);
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(
+    null
+  );
   const getActiveTabElement = (0, import_utils.useEventCallback)(
     (activeValue) => {
       const tabRef = registeredTabs.current[activeValue];
       return tabRef == null ? void 0 : tabRef.current;
     }
   );
-  const scrollIntoView = (0, import_utils.useEventCallback)((activeTab) => {
-    const tabsEl = tabsContainerRef.current;
-    if (!tabsEl || !activeTab) {
-      return;
+  const scrollIntoView = (0, import_utils.useEventCallback)(
+    (activeTab, animate = true) => {
+      const tabsEl = tabsContainerRef.current;
+      if (!tabsEl || !activeTab) {
+        return;
+      }
+      (0, import_scroll.default)(
+        tabsEl,
+        activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
+        animate ? duration : 0
+      );
+    }
+  );
+  const getIndicatorWidth = (0, import_utils.useEventCallback)(() => {
+    if (indicatorWidthCache.current !== null) {
+      return indicatorWidthCache.current;
     }
-    (0, import_scroll.default)(
-      tabsEl,
-      activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
-      duration
-    );
-  });
-  const animate = (0, import_utils.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 = (0, import_utils.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 = (0, import_utils.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 && !import_utils.isMini) {
-        scrollIntoView(activeTab);
+        scrollIntoView(activeTab, hasRenderedOnce.current);
       }
-    } else {
-      indicator.style.visibility = "hidden";
+      hasRenderedOnce.current = true;
     }
   });
   (0, import_react.useEffect)(() => {
-    animate();
-  }, [animate, currentValue, registrationVersion]);
+    updateIndicatorState();
+  });
   (0, import_react.useEffect)(() => {
     const handleResize = (0, import_utils.debounce)(() => {
-      animate();
+      indicatorWidthCache.current = null;
+      updateIndicatorState();
     }, 100);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [animate]);
+  }, [updateIndicatorState]);
+  if (!indicatorStyle) {
+    return null;
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       ref: indicatorRef,
       className: (0, import_clsx.default)(`${rootClass}-indicator`),
-      style: {
-        transition: "transform 0.3s ease-in-out",
-        transform: "translate(0px, 0px)",
-        visibility: "hidden"
-      },
+      style: indicatorStyle,
       "aria-hidden": "true"
     }
   );

package/dist/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/dist/Tabs/TabMask.js

@@ -32,57 +32,16 @@ __export(TabMask_exports, {
 module.exports = __toCommonJS(TabMask_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
-var import_utils = require("@bifrostui/utils");
-const rootClass = "bui-tabs";
-const TabMask = ({ tabsContainerRef, position }) => {
-  const maskRef = (0, import_react.useRef)(null);
-  const updateMaskOpacity = (0, import_react.useMemo)(
-    () => (0, import_utils.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
-      }
+var import_classes = require("./classes");
+const TabMask = ({ position }) => /* @__PURE__ */ import_react.default.createElement(
+  "div",
+  {
+    className: (0, import_clsx.default)(
+      import_classes.tabMaskClass,
+      position === "left" ? import_classes.tabMaskLeftClass : import_classes.tabMaskRightClass
     ),
-    [tabsContainerRef, position]
-  );
-  (0, import_react.useEffect)(() => {
-    const tabsEl = tabsContainerRef.current;
-    if (!tabsEl)
-      return void 0;
-    updateMaskOpacity();
-    tabsEl.addEventListener("scroll", updateMaskOpacity);
-    return () => {
-      tabsEl.removeEventListener("scroll", updateMaskOpacity);
-    };
-  }, [tabsContainerRef, updateMaskOpacity]);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      ref: maskRef,
-      className: (0, import_clsx.default)(`${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__ */ import_react.default.memo(TabMask);

package/dist/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/dist/Tabs/Tabs.js

@@ -103,6 +103,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     {}
   );
   const [registrationVersion, setRegistrationVersion] = (0, import_react.useState)(0);
+  const [isScrollable, setIsScrollable] = (0, import_react.useState)(false);
   if (process.env.NODE_ENV !== "production") {
     if (tabs.length > 0 && import_react.default.Children.count(children) > 0) {
       console.warn(
@@ -147,10 +148,21 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     }
     return children;
   }, [tabs, children]);
-  if (process.env.NODE_ENV !== "production") {
-    console.count("Tabs render......");
-  }
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({ className: (0, import_clsx.default)(import_classes.tabsRootClass, className) }, others), { ref }), /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { tabsContainerRef: tabsRef, position: "left" }), /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { tabsContainerRef: tabsRef, position: "right" }), /* @__PURE__ */ import_react.default.createElement(
+  (0, import_react.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__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({ className: (0, import_clsx.default)(import_classes.tabsRootClass, className) }, others), { ref }), isScrollable && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { position: "left" }), /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { position: "right" })), /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: `${import_classes.tabsRootClass}-tabs`,
@@ -163,8 +175,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       {
         currentValue,
         registeredTabs,
-        tabsContainerRef: tabsRef,
-        registrationVersion
+        tabsContainerRef: tabsRef
       }
     ),
     /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContextProvider, { value: contextValue }, renderedTabs)

package/dist/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/dist/Tabs/miniapp/TabIndicator.js

@@ -56,6 +56,9 @@ var import_taro = __toESM(require("@tarojs/taro"));
 var import_utils = require("@bifrostui/utils");
 var import_classes = require("../classes");
 var import_queryBatch = require("./utils/queryBatch");
+const isValidTabValue = (value) => {
+  return value !== void 0 && value !== null;
+};
 const TabIndicator = ({
   currentValue,
   registeredTabValues,
@@ -63,8 +66,7 @@ const TabIndicator = ({
   scrollViewId,
   registrationVersion
 }) => {
-  const [transform, setTransform] = (0, import_react.useState)("translate(0px, 0px)");
-  const [visibility, setVisibility] = (0, import_react.useState)("hidden");
+  const indicatorRef = (0, import_react.useRef)(null);
   const animationTimerRef = (0, import_react.useRef)(null);
   const positionCacheRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   const containerInfoRef = (0, import_react.useRef)(null);
@@ -72,14 +74,20 @@ const TabIndicator = ({
   const isInitializedRef = (0, import_react.useRef)(false);
   const initRetryCountRef = (0, import_react.useRef)(0);
   const maxInitRetries = 5;
+  const isInitializingRef = (0, import_react.useRef)(false);
+  const initVersionRef = (0, import_react.useRef)(0);
+  const isMountedRef = (0, import_react.useRef)(true);
   const updateIndicatorPosition = (0, import_utils.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();
       }
@@ -89,16 +97,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 = (0, import_utils.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 (0, import_queryBatch.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) {
@@ -107,8 +126,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;
       }
@@ -121,9 +162,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
           });
         }
@@ -135,40 +175,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);
+      }
     }
   }));
   (0, import_react.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;
     import_taro.default.nextTick(() => {
+      if (!isMountedRef.current)
+        return;
       initializePositions();
     });
     return () => {
       if (animationTimerRef.current) {
         clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
       }
+      initVersionRef.current += 1;
+      isInitializingRef.current = false;
     };
   }, [registrationVersion, initializePositions]);
   (0, import_react.useEffect)(() => {
-    if (!currentValue) {
-      setVisibility("hidden");
+    if (!isValidTabValue(currentValue)) {
+      if (indicatorRef.current) {
+        indicatorRef.current.style.opacity = "0";
+      }
       return;
     }
     updateIndicatorPosition();
@@ -176,10 +250,20 @@ const TabIndicator = ({
   (0, import_react.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;
+      }
       import_taro.default.nextTick(() => {
+        if (!isMountedRef.current)
+          return;
         initializePositions();
       });
     };
@@ -189,15 +273,26 @@ const TabIndicator = ({
       (_b2 = (_a2 = import_taro.default).offWindowResize) == null ? void 0 : _b2.call(_a2, handleResize);
     };
   }, [initializePositions]);
+  (0, import_react.useEffect)(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
+      }
+    };
+  }, []);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
+      ref: indicatorRef,
       id: `${wrapperId}-indicator`,
       className: (0, import_clsx.default)(import_classes.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/dist/Tabs/miniapp/Tabs.js

@@ -57,7 +57,7 @@ var import_components = require("@tarojs/components");
 var import_utils = require("@bifrostui/utils");
 var import_Tab = __toESM(require("./Tab"));
 var import_TabIndicator = __toESM(require("./TabIndicator"));
-var import_TabMask = __toESM(require("./TabMask"));
+var import_TabMask = __toESM(require("../TabMask"));
 var import_TabsContext = require("./TabsContext");
 var import_classes = require("../classes");
 var import_queryBatch = require("./utils/queryBatch");
@@ -97,8 +97,10 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const [scrollLeft, setScrollLeft] = (0, import_react.useState)(0);
   const [containerWidth, setContainerWidth] = (0, import_react.useState)(0);
   const [scrollWidth, setScrollWidth] = (0, import_react.useState)(0);
-  const scrollLeftUpdateTimerRef = import_react.default.useRef(null);
   const lastScrollLeftRef = import_react.default.useRef(0);
+  const isFirstScroll = import_react.default.useRef(true);
+  const [scrollWithAnimation, setScrollWithAnimation] = import_react.default.useState(false);
+  const isScrollable = scrollWidth > containerWidth;
   if (process.env.NODE_ENV !== "production") {
     if (tabs.length > 0 && import_react.default.Children.count(children) > 0) {
       console.warn(
@@ -138,14 +140,6 @@ const Tabs = /* @__PURE__ */ import_react.default.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);
       }
@@ -188,6 +182,12 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     );
     setScrollLeft(finalScrollLeft);
     lastScrollLeftRef.current = finalScrollLeft;
+    if (isFirstScroll.current) {
+      import_taro.default.nextTick(() => {
+        setScrollWithAnimation(true);
+      });
+      isFirstScroll.current = false;
+    }
   }));
   import_react.default.useEffect(() => {
     if (!currentValue || registeredTabValues.length === 0) {
@@ -221,38 +221,14 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     }
     return children;
   }, [tabs, children]);
-  import_react.default.useEffect(() => {
-    return () => {
-      if (scrollLeftUpdateTimerRef.current) {
-        clearTimeout(scrollLeftUpdateTimerRef.current);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(import_classes.tabsRootClass, className), style, ref }, /* @__PURE__ */ import_react.default.createElement(
-    import_TabMask.default,
-    {
-      position: "left",
-      scrollLeft,
-      containerWidth,
-      scrollWidth
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_TabMask.default,
-    {
-      position: "right",
-      scrollLeft,
-      containerWidth,
-      scrollWidth
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(import_classes.tabsRootClass, className), style, ref }, isScrollable && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { position: "left" }), /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { position: "right" })), /* @__PURE__ */ import_react.default.createElement(
     import_components.ScrollView,
     {
       id: scrollViewId,
       className: import_classes.tabsScrollClass,
       scrollX: true,
-      scrollWithAnimation: true,
+      scrollWithAnimation,
       scrollLeft,
-      scrollAnimationDuration: "200",
       onScroll: handleScroll,
       enhanced: true,
       showScrollbar: false,

package/es/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, keyof import("@bifrostui/types").ICommonProps | "container" | "open" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "keepMounted" | "container" | "disablePortal" | "open" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;