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

package/dist/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "value" | "defaultValue" | "onChange" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "defaultValue" | "onChange" | "value" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

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>>;
+}, keyof import("@bifrostui/types").ICommonProps | "open" | "onClose" | "container" | "disableScrollLock" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Tabs/TabIndicator.js

@@ -43,23 +43,26 @@ const TabIndicator = ({
   registrationVersion
 }) => {
   const indicatorRef = (0, import_react.useRef)(null);
+  const isFirstRender = (0, import_react.useRef)(true);
   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, animate2 = true) => {
+      const tabsEl = tabsContainerRef.current;
+      if (!tabsEl || !activeTab) {
+        return;
+      }
+      (0, import_scroll.default)(
+        tabsEl,
+        activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
+        animate2 ? duration : 0
+      );
     }
-    (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)
@@ -79,7 +82,15 @@ const TabIndicator = ({
       indicator.style.visibility = "visible";
       const maxScrollDistance = containerScrollWidth - containerWidth;
       if (maxScrollDistance > 0 && !import_utils.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";
@@ -103,7 +114,7 @@ const TabIndicator = ({
       ref: indicatorRef,
       className: (0, import_clsx.default)(`${rootClass}-indicator`),
       style: {
-        transition: "transform 0.3s ease-in-out",
+        transition: "none",
         transform: "translate(0px, 0px)",
         visibility: "hidden"
       },

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.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`,

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,21 @@ const TabIndicator = ({
   const isInitializedRef = (0, import_react.useRef)(false);
   const initRetryCountRef = (0, import_react.useRef)(0);
   const maxInitRetries = 5;
+  const isFirstRender = (0, import_react.useRef)(true);
+  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.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();
       }
@@ -89,16 +98,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) {
+      import_taro.default.nextTick(() => {
+        if (!isMountedRef.current || !indicatorRef.current)
+          return;
+        indicatorRef.current.style.visibility = "visible";
+        import_taro.default.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 = (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 +141,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 +177,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 +190,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.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;
     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.visibility = "hidden";
+      }
       return;
     }
     updateIndicatorPosition();
@@ -176,10 +265,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 +288,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: "none",
+        transform: "translate(0px, 0px)",
+        visibility: "hidden"
       }
     }
   );

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>>;
+}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

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.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`,

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.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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "2.0.0-alpha.17",
+  "version": "2.0.0-alpha.18",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -43,10 +43,10 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/styles": "2.0.0-alpha.17",
-    "@bifrostui/types": "2.0.0-alpha.17",
-    "@bifrostui/icons": "2.0.0-alpha.17",
-    "@bifrostui/utils": "2.0.0-alpha.17"
+    "@bifrostui/icons": "2.0.0-alpha.18",
+    "@bifrostui/types": "2.0.0-alpha.18",
+    "@bifrostui/utils": "2.0.0-alpha.18",
+    "@bifrostui/styles": "2.0.0-alpha.18"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",

package/dist/Tabs/miniapp/TabMask.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-export interface TabMaskProps {
-    /** 位置：左侧或右侧 */
-    position: 'left' | 'right';
-    /** 当前滚动位置 */
-    scrollLeft: number;
-    /** 容器宽度 */
-    containerWidth: number;
-    /** 滚动区域总宽度 */
-    scrollWidth: number;
-}
-declare const _default: React.NamedExoticComponent<TabMaskProps>;
-export default _default;

package/dist/Tabs/miniapp/TabMask.js

@@ -1,66 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var TabMask_exports = {};
-__export(TabMask_exports, {
-  default: () => TabMask_default
-});
-module.exports = __toCommonJS(TabMask_exports);
-var import_react = __toESM(require("react"));
-var import_clsx = __toESM(require("clsx"));
-var import_classes = require("../classes");
-const TabMask = ({
-  position,
-  scrollLeft,
-  containerWidth,
-  scrollWidth
-}) => {
-  const shouldShow = import_react.default.useMemo(() => {
-    if (position === "left") {
-      return scrollLeft > 0;
-    }
-    const rightRange = Math.abs(scrollWidth - (scrollLeft + containerWidth));
-    return rightRange > 1;
-  }, [position, scrollLeft, containerWidth, scrollWidth]);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_clsx.default)(
-        import_classes.tabMaskClass,
-        position === "left" ? import_classes.tabMaskLeftClass : import_classes.tabMaskRightClass
-      ),
-      style: {
-        opacity: shouldShow ? 1 : 0,
-        transition: "opacity 0.1s ease-in-out"
-      }
-    }
-  );
-};
-TabMask.displayName = "BuiTabsMask";
-var TabMask_default = /* @__PURE__ */ import_react.default.memo(TabMask, (prevProps, nextProps) => {
-  return prevProps.position === nextProps.position && prevProps.scrollLeft === nextProps.scrollLeft && prevProps.containerWidth === nextProps.containerWidth && prevProps.scrollWidth === nextProps.scrollWidth;
-});

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

@@ -1,13 +0,0 @@
-import React from 'react';
-export interface TabMaskProps {
-    /** 位置：左侧或右侧 */
-    position: 'left' | 'right';
-    /** 当前滚动位置 */
-    scrollLeft: number;
-    /** 容器宽度 */
-    containerWidth: number;
-    /** 滚动区域总宽度 */
-    scrollWidth: number;
-}
-declare const _default: React.NamedExoticComponent<TabMaskProps>;
-export default _default;

package/es/Tabs/miniapp/TabMask.js

@@ -1,37 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import { tabMaskClass, tabMaskLeftClass, tabMaskRightClass } from "../classes";
-const TabMask = ({
-  position,
-  scrollLeft,
-  containerWidth,
-  scrollWidth
-}) => {
-  const shouldShow = React.useMemo(() => {
-    if (position === "left") {
-      return scrollLeft > 0;
-    }
-    const rightRange = Math.abs(scrollWidth - (scrollLeft + containerWidth));
-    return rightRange > 1;
-  }, [position, scrollLeft, containerWidth, scrollWidth]);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: clsx(
-        tabMaskClass,
-        position === "left" ? tabMaskLeftClass : tabMaskRightClass
-      ),
-      style: {
-        opacity: shouldShow ? 1 : 0,
-        transition: "opacity 0.1s ease-in-out"
-      }
-    }
-  );
-};
-TabMask.displayName = "BuiTabsMask";
-var TabMask_default = /* @__PURE__ */ React.memo(TabMask, (prevProps, nextProps) => {
-  return prevProps.position === nextProps.position && prevProps.scrollLeft === nextProps.scrollLeft && prevProps.containerWidth === nextProps.containerWidth && prevProps.scrollWidth === nextProps.scrollWidth;
-});
-export {
-  TabMask_default as default
-};