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

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>;
-}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "onClose" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "disableScrollLock" | "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/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)
@@ -147,7 +150,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   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(
+  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(
     "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/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

@@ -62,7 +62,7 @@ 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,
@@ -126,8 +126,8 @@ const Tabs = (props) => {
   });
   const handleClick = (0, import_utils.useEventCallback)(
     (e, item) => {
-      const { index, disabled: isDisabled = false } = item;
-      if (isDisabled || [void 0, null].includes(index))
+      const { index, disabled = false } = item;
+      if (disabled || [void 0, null].includes(index))
         return;
       if (index !== currentValue) {
         triggerValueChange(e, index);
@@ -164,33 +164,47 @@ const Tabs = (props) => {
       }
     }));
   }, [scrollViewId, registrationVersion, registeredTabValues.length]);
+  const centerActiveTab = (0, import_utils.useEventCallback)(() => __async(void 0, null, function* () {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    const { scrollView, scrollFields, wrapper, currentTab } = yield (0, import_queryBatch.batchQueryForScroll)({
+      scrollViewId,
+      wrapperId,
+      currentTabValue: currentValue
+    });
+    if (!scrollView || !scrollFields || !wrapper || !currentTab || currentTab.width === 0) {
+      return;
+    }
+    const tabLeftRelativeToWrapper = currentTab.left - wrapper.left;
+    const tabWidth = currentTab.width;
+    const containerViewWidth = scrollView.width;
+    const currentScrollWidth = scrollFields.scrollWidth || scrollView.width;
+    const targetScrollLeft = tabLeftRelativeToWrapper - (containerViewWidth - tabWidth) / 2;
+    const maxScrollDistance = currentScrollWidth - containerViewWidth;
+    const finalScrollLeft = Math.max(
+      0,
+      Math.min(targetScrollLeft, maxScrollDistance)
+    );
+    setScrollLeft(finalScrollLeft);
+    lastScrollLeftRef.current = finalScrollLeft;
+  }));
   import_react.default.useEffect(() => {
     if (!currentValue || registeredTabValues.length === 0) {
       return;
     }
-    import_taro.default.nextTick(() => __async(void 0, null, function* () {
-      const { scrollView, scrollFields, wrapper, currentTab } = yield (0, import_queryBatch.batchQueryForScroll)({
-        scrollViewId,
-        wrapperId,
-        currentTabValue: currentValue
-      });
-      if (!scrollView || !scrollFields || !wrapper || !currentTab || currentTab.width === 0) {
-        return;
-      }
-      const tabLeftRelativeToWrapper = currentTab.left - wrapper.left;
-      const tabWidth = currentTab.width;
-      const containerViewWidth = scrollView.width;
-      const currentScrollWidth = scrollFields.scrollWidth || scrollView.width;
-      const targetScrollLeft = tabLeftRelativeToWrapper - (containerViewWidth - tabWidth) / 2;
-      const maxScrollDistance = currentScrollWidth - containerViewWidth;
-      const finalScrollLeft = Math.max(
-        0,
-        Math.min(targetScrollLeft, maxScrollDistance)
-      );
-      setScrollLeft(finalScrollLeft);
-      lastScrollLeftRef.current = finalScrollLeft;
-    }));
-  }, [currentValue, scrollViewId, wrapperId]);
+    import_taro.default.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [currentValue, centerActiveTab]);
+  import_react.default.useEffect(() => {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    import_taro.default.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [registrationVersion, centerActiveTab]);
   const contextValue = (0, import_react.useMemo)(
     () => ({
       value: currentValue,
@@ -214,7 +228,7 @@ const Tabs = (props) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(import_classes.tabsRootClass, className), style }, /* @__PURE__ */ import_react.default.createElement(
+  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",
@@ -256,6 +270,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>;
-}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "container" | "open" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/Tabs/Tab.css

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

package/es/Tabs/Tabs.css

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

package/es/Tabs/Tabs.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -117,7 +120,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   if (process.env.NODE_ENV !== "production") {
     console.count("Tabs render......");
   }
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(tabsRootClass, className) }, others), /* @__PURE__ */ React.createElement(TabMask, { tabsContainerRef: tabsRef, position: "left" }), /* @__PURE__ */ React.createElement(TabMask, { tabsContainerRef: tabsRef, position: "right" }), /* @__PURE__ */ React.createElement(
+  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(
     "div",
     {
       className: `${tabsRootClass}-tabs`,

package/es/Tabs/index.css

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

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

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

package/es/Tabs/miniapp/Tab.js

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

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

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

package/es/Tabs/miniapp/Tabs.js

@@ -37,7 +37,7 @@ import {
   batchQueryForScroll
 } from "./utils/queryBatch";
 import "../Tabs.css";
-const Tabs = (props) => {
+const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -101,8 +101,8 @@ const Tabs = (props) => {
   });
   const handleClick = useEventCallback(
     (e, item) => {
-      const { index, disabled: isDisabled = false } = item;
-      if (isDisabled || [void 0, null].includes(index))
+      const { index, disabled = false } = item;
+      if (disabled || [void 0, null].includes(index))
         return;
       if (index !== currentValue) {
         triggerValueChange(e, index);
@@ -139,33 +139,47 @@ const Tabs = (props) => {
       }
     }));
   }, [scrollViewId, registrationVersion, registeredTabValues.length]);
+  const centerActiveTab = useEventCallback(() => __async(void 0, null, function* () {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    const { scrollView, scrollFields, wrapper, currentTab } = yield batchQueryForScroll({
+      scrollViewId,
+      wrapperId,
+      currentTabValue: currentValue
+    });
+    if (!scrollView || !scrollFields || !wrapper || !currentTab || currentTab.width === 0) {
+      return;
+    }
+    const tabLeftRelativeToWrapper = currentTab.left - wrapper.left;
+    const tabWidth = currentTab.width;
+    const containerViewWidth = scrollView.width;
+    const currentScrollWidth = scrollFields.scrollWidth || scrollView.width;
+    const targetScrollLeft = tabLeftRelativeToWrapper - (containerViewWidth - tabWidth) / 2;
+    const maxScrollDistance = currentScrollWidth - containerViewWidth;
+    const finalScrollLeft = Math.max(
+      0,
+      Math.min(targetScrollLeft, maxScrollDistance)
+    );
+    setScrollLeft(finalScrollLeft);
+    lastScrollLeftRef.current = finalScrollLeft;
+  }));
   React.useEffect(() => {
     if (!currentValue || registeredTabValues.length === 0) {
       return;
     }
-    Taro.nextTick(() => __async(void 0, null, function* () {
-      const { scrollView, scrollFields, wrapper, currentTab } = yield batchQueryForScroll({
-        scrollViewId,
-        wrapperId,
-        currentTabValue: currentValue
-      });
-      if (!scrollView || !scrollFields || !wrapper || !currentTab || currentTab.width === 0) {
-        return;
-      }
-      const tabLeftRelativeToWrapper = currentTab.left - wrapper.left;
-      const tabWidth = currentTab.width;
-      const containerViewWidth = scrollView.width;
-      const currentScrollWidth = scrollFields.scrollWidth || scrollView.width;
-      const targetScrollLeft = tabLeftRelativeToWrapper - (containerViewWidth - tabWidth) / 2;
-      const maxScrollDistance = currentScrollWidth - containerViewWidth;
-      const finalScrollLeft = Math.max(
-        0,
-        Math.min(targetScrollLeft, maxScrollDistance)
-      );
-      setScrollLeft(finalScrollLeft);
-      lastScrollLeftRef.current = finalScrollLeft;
-    }));
-  }, [currentValue, scrollViewId, wrapperId]);
+    Taro.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [currentValue, centerActiveTab]);
+  React.useEffect(() => {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    Taro.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [registrationVersion, centerActiveTab]);
   const contextValue = useMemo(
     () => ({
       value: currentValue,
@@ -189,7 +203,7 @@ const Tabs = (props) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React.createElement("div", { className: clsx(tabsRootClass, className), style }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: clsx(tabsRootClass, className), style, ref }, /* @__PURE__ */ React.createElement(
     TabMask,
     {
       position: "left",
@@ -231,7 +245,7 @@ const Tabs = (props) => {
       }
     ), /* @__PURE__ */ React.createElement(TabsContextProvider, { value: contextValue }, renderedTabs))
   ));
-};
+});
 Tabs.displayName = "BuiTabs";
 var Tabs_default = Tabs;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.17",
   "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/icons": "2.0.0-alpha.14",
-    "@bifrostui/types": "2.0.0-alpha.14",
-    "@bifrostui/styles": "2.0.0-alpha.14",
-    "@bifrostui/utils": "2.0.0-alpha.14"
+    "@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"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",