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

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" | "disablePortal" | "onClose" | "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/Tab.css

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

package/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.css

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

package/dist/Tabs/Tabs.js

@@ -1,6 +1,8 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -100,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(
@@ -144,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", __spreadValues({ ref, className: (0, import_clsx.default)(import_classes.tabsRootClass, className) }, others), /* @__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/index.css

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

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

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

package/dist/Tabs/miniapp/Tab.js

@@ -36,7 +36,7 @@ var import_utils = require("@bifrostui/utils");
 var import_TabsContext = __toESM(require("./TabsContext"));
 var import_classes = require("../classes");
 var import_Tab2 = require("../Tab.css");
-const Tab = (props) => {
+const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const {
     className,
     children,
@@ -45,6 +45,8 @@ const Tab = (props) => {
     onClick,
     style
   } = props;
+  const innerRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(ref, innerRef);
   const isActive = (0, import_utils.useContextSelector)(
     import_TabsContext.default,
     (ctx) => ctx.value === index
@@ -85,6 +87,7 @@ const Tab = (props) => {
     "div",
     {
       id: tabId,
+      ref: handleRef,
       className: rootCls,
       style,
       onClick: (e) => {
@@ -96,7 +99,7 @@ const Tab = (props) => {
     },
     children
   );
-};
+});
 Tab.displayName = "BuiTab";
 var Tab_default = /* @__PURE__ */ import_react.default.memo(Tab, (prevProps, nextProps) => {
   return prevProps.index === nextProps.index && prevProps.disabled === nextProps.disabled && prevProps.className === nextProps.className && prevProps.children === nextProps.children;

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.d.ts

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

package/dist/Tabs/miniapp/Tabs.js

@@ -57,12 +57,12 @@ 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");
 var import_Tabs2 = require("../Tabs.css");
-const Tabs = (props) => {
+const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -97,8 +97,10 @@ const Tabs = (props) => {
   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 = (props) => {
     (e) => {
       const { scrollLeft: newScrollLeft, scrollWidth: newScrollWidth } = e.detail;
       lastScrollLeftRef.current = newScrollLeft;
-      if (scrollLeftUpdateTimerRef.current) {
-        clearTimeout(scrollLeftUpdateTimerRef.current);
-      }
-      scrollLeftUpdateTimerRef.current = setTimeout(() => {
-        if (Math.abs(lastScrollLeftRef.current - scrollLeft) > 1) {
-          setScrollLeft(lastScrollLeftRef.current);
-        }
-      }, 150);
       if (newScrollWidth && newScrollWidth !== scrollWidth) {
         setScrollWidth(newScrollWidth);
       }
@@ -188,6 +182,12 @@ const Tabs = (props) => {
     );
     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 = (props) => {
     }
     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 }, /* @__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,
@@ -270,6 +246,6 @@ const Tabs = (props) => {
       }
     ), /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContextProvider, { value: contextValue }, renderedTabs))
   ));
-};
+});
 Tabs.displayName = "BuiTabs";
 var Tabs_default = Tabs;

package/es/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>, "defaultValue" | "onChange" | "value" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "value" | "defaultValue" | "onChange" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

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 | "open" | "container" | "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;