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

package/dist/Tabs/Tab.js

@@ -63,8 +63,8 @@ var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_utils = require("@bifrostui/utils");
 var import_TabsContext = __toESM(require("./TabsContext"));
+var import_classes = require("./classes");
 var import_Tab2 = require("./Tab.css");
-const rootClass = "bui-tab";
 const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -105,10 +105,10 @@ const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     };
   }, [onRegister, onUnregister, index]);
   const rootCls = (0, import_clsx.default)(
-    rootClass,
+    import_classes.tabRootClass,
     {
-      [`${rootClass}-active`]: !import_utils.isMini && isActive,
-      [`${rootClass}-disabled`]: disabled
+      [import_classes.tabActiveClass]: !import_utils.isMini && isActive,
+      [import_classes.tabDisabledClass]: disabled
     },
     className
   );

package/dist/Tabs/TabIndicator.js

@@ -34,7 +34,7 @@ var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_utils = require("@bifrostui/utils");
 var import_scroll = __toESM(require("./utils/scroll"));
-const rootClass = "bui-tabs";
+var import_classes = require("./classes");
 const duration = 300;
 const DEFAULT_INDICATOR_WIDTH = 24;
 const TabIndicator = ({
@@ -44,7 +44,6 @@ const TabIndicator = ({
 }) => {
   const indicatorRef = (0, import_react.useRef)(null);
   const hasRenderedOnce = (0, import_react.useRef)(false);
-  const indicatorWidthCache = (0, import_react.useRef)(null);
   const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(
     null
   );
@@ -68,19 +67,11 @@ const TabIndicator = ({
     }
   );
   const getIndicatorWidth = (0, import_utils.useEventCallback)(() => {
-    if (indicatorWidthCache.current !== null) {
-      return indicatorWidthCache.current;
-    }
     const indicator = indicatorRef.current;
     if (!indicator)
       return DEFAULT_INDICATOR_WIDTH;
-    const cssValue = getComputedStyle(indicator).getPropertyValue(
-      "--bui-tabs-indicator-width"
-    );
-    const parsed = Number.parseFloat(cssValue);
-    const width = Number.isNaN(parsed) ? DEFAULT_INDICATOR_WIDTH : parsed;
-    indicatorWidthCache.current = width;
-    return width;
+    const rect = indicator.getBoundingClientRect();
+    return rect.width > 0 ? rect.width : DEFAULT_INDICATOR_WIDTH;
   });
   const getTabsMeta = (0, import_utils.useEventCallback)(() => {
     const tabsNode = tabsContainerRef.current;
@@ -135,15 +126,48 @@ const TabIndicator = ({
     updateIndicatorState();
   });
   (0, import_react.useEffect)(() => {
+    const tabsContainer = tabsContainerRef.current;
+    if (!tabsContainer)
+      return void 0;
     const handleResize = (0, import_utils.debounce)(() => {
-      indicatorWidthCache.current = null;
-      updateIndicatorState();
+      if (tabsContainerRef.current) {
+        updateIndicatorState();
+      }
     }, 100);
     window.addEventListener("resize", handleResize);
+    let resizeObserver;
+    let mutationObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(handleResize);
+      Array.from(tabsContainer.children).forEach((child) => {
+        resizeObserver == null ? void 0 : resizeObserver.observe(child);
+      });
+    }
+    if (typeof MutationObserver !== "undefined") {
+      const handleMutation = (records) => {
+        records.forEach((record) => {
+          record.removedNodes.forEach((item) => {
+            if (item instanceof Element) {
+              resizeObserver == null ? void 0 : resizeObserver.unobserve(item);
+            }
+          });
+          record.addedNodes.forEach((item) => {
+            if (item instanceof Element) {
+              resizeObserver == null ? void 0 : resizeObserver.observe(item);
+            }
+          });
+        });
+        handleResize();
+      };
+      mutationObserver = new MutationObserver(handleMutation);
+      mutationObserver.observe(tabsContainer, { childList: true });
+    }
     return () => {
       window.removeEventListener("resize", handleResize);
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
     };
-  }, [updateIndicatorState]);
+  }, [updateIndicatorState, tabsContainerRef]);
   if (!indicatorStyle) {
     return null;
   }
@@ -151,7 +175,7 @@ const TabIndicator = ({
     "div",
     {
       ref: indicatorRef,
-      className: (0, import_clsx.default)(`${rootClass}-indicator`),
+      className: (0, import_clsx.default)(import_classes.tabIndicatorClass),
       style: indicatorStyle,
       "aria-hidden": "true"
     }

package/dist/Tabs/TabPanel.js

@@ -58,8 +58,8 @@ __export(TabPanel_exports, {
 module.exports = __toCommonJS(TabPanel_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
+var import_classes = require("./classes");
 var import_TabPanel2 = require("./TabPanel.css");
-const prefixCls = "bui-tabpanel";
 const TabPanel = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
@@ -83,9 +83,9 @@ const TabPanel = (0, import_react.forwardRef)((props, ref) => {
       "aria-hidden": !isActive,
       tabIndex: 0,
       ref,
-      className: (0, import_clsx.default)(prefixCls, className, {
-        [`${prefixCls}-active`]: isActive,
-        [`${prefixCls}-inactive`]: !isActive
+      className: (0, import_clsx.default)(import_classes.tabPanelRootClass, className, {
+        [import_classes.tabPanelActiveClass]: isActive,
+        [import_classes.tabPanelInactiveClass]: !isActive
       })
     }, others),
     isActive ? children : keepActiveDom

package/dist/Tabs/Tabs.js

@@ -72,15 +72,15 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     children,
     className,
-    value,
     defaultValue,
+    value,
     tabs = [],
     onChange
   } = _a, others = __objRest(_a, [
     "children",
     "className",
-    "value",
     "defaultValue",
+    "value",
     "tabs",
     "onChange"
   ]);
@@ -151,11 +151,14 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   (0, import_react.useEffect)(() => {
     const tabsEl = tabsRef.current;
     if (!tabsEl)
-      return;
+      return void 0;
     const checkScrollable = () => {
       setIsScrollable(tabsEl.scrollWidth > tabsEl.offsetWidth);
     };
     checkScrollable();
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
     const resizeObserver = new ResizeObserver(checkScrollable);
     resizeObserver.observe(tabsEl);
     return () => {
@@ -165,7 +168,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   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`,
+      className: import_classes.tabsScrollClass,
       ref: tabsRef,
       role: "tablist",
       "aria-orientation": "horizontal"

package/dist/Tabs/classes.d.ts

@@ -1,5 +1,6 @@
 export declare const tabsRootClass = "bui-tabs";
 export declare const tabRootClass = "bui-tab";
+export declare const tabPanelRootClass = "bui-tabpanel";
 export declare const tabsScrollClass: string;
 export declare const tabsScrollWrapperClass: string;
 export declare const tabActiveClass: string;
@@ -8,3 +9,5 @@ export declare const tabIndicatorClass: string;
 export declare const tabMaskClass: string;
 export declare const tabMaskLeftClass: string;
 export declare const tabMaskRightClass: string;
+export declare const tabPanelActiveClass: string;
+export declare const tabPanelInactiveClass: string;

package/dist/Tabs/classes.js

@@ -23,6 +23,9 @@ __export(classes_exports, {
   tabMaskClass: () => tabMaskClass,
   tabMaskLeftClass: () => tabMaskLeftClass,
   tabMaskRightClass: () => tabMaskRightClass,
+  tabPanelActiveClass: () => tabPanelActiveClass,
+  tabPanelInactiveClass: () => tabPanelInactiveClass,
+  tabPanelRootClass: () => tabPanelRootClass,
   tabRootClass: () => tabRootClass,
   tabsRootClass: () => tabsRootClass,
   tabsScrollClass: () => tabsScrollClass,
@@ -31,6 +34,7 @@ __export(classes_exports, {
 module.exports = __toCommonJS(classes_exports);
 const tabsRootClass = "bui-tabs";
 const tabRootClass = "bui-tab";
+const tabPanelRootClass = "bui-tabpanel";
 const tabsScrollClass = `${tabsRootClass}-tabs`;
 const tabsScrollWrapperClass = `${tabsRootClass}-scroll-wrapper`;
 const tabActiveClass = `${tabRootClass}-active`;
@@ -39,6 +43,8 @@ const tabIndicatorClass = `${tabsRootClass}-indicator`;
 const tabMaskClass = `${tabsRootClass}-mask`;
 const tabMaskLeftClass = `${tabMaskClass}-left`;
 const tabMaskRightClass = `${tabMaskClass}-right`;
+const tabPanelActiveClass = `${tabPanelRootClass}-active`;
+const tabPanelInactiveClass = `${tabPanelRootClass}-inactive`;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   tabActiveClass,
@@ -47,6 +53,9 @@ const tabMaskRightClass = `${tabMaskClass}-right`;
   tabMaskClass,
   tabMaskLeftClass,
   tabMaskRightClass,
+  tabPanelActiveClass,
+  tabPanelInactiveClass,
+  tabPanelRootClass,
   tabRootClass,
   tabsRootClass,
   tabsScrollClass,

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

package/es/Tabs/Tab.js

@@ -33,8 +33,8 @@ import React, { useEffect, useRef } from "react";
 import clsx from "clsx";
 import { isMini, useContextSelector, useForkRef } from "@bifrostui/utils";
 import TabsContext from "./TabsContext";
+import { tabRootClass, tabActiveClass, tabDisabledClass } from "./classes";
 import "./Tab.css";
-const rootClass = "bui-tab";
 const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -75,10 +75,10 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
     };
   }, [onRegister, onUnregister, index]);
   const rootCls = clsx(
-    rootClass,
+    tabRootClass,
     {
-      [`${rootClass}-active`]: !isMini && isActive,
-      [`${rootClass}-disabled`]: disabled
+      [tabActiveClass]: !isMini && isActive,
+      [tabDisabledClass]: disabled
     },
     className
   );

package/es/Tabs/TabIndicator.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { debounce, isMini, useEventCallback } from "@bifrostui/utils";
 import scrollLeftTo from "./utils/scroll";
-const rootClass = "bui-tabs";
+import { tabIndicatorClass } from "./classes";
 const duration = 300;
 const DEFAULT_INDICATOR_WIDTH = 24;
 const TabIndicator = ({
@@ -12,7 +12,6 @@ const TabIndicator = ({
 }) => {
   const indicatorRef = useRef(null);
   const hasRenderedOnce = useRef(false);
-  const indicatorWidthCache = useRef(null);
   const [indicatorStyle, setIndicatorStyle] = useState(
     null
   );
@@ -36,19 +35,11 @@ const TabIndicator = ({
     }
   );
   const getIndicatorWidth = useEventCallback(() => {
-    if (indicatorWidthCache.current !== null) {
-      return indicatorWidthCache.current;
-    }
     const indicator = indicatorRef.current;
     if (!indicator)
       return DEFAULT_INDICATOR_WIDTH;
-    const cssValue = getComputedStyle(indicator).getPropertyValue(
-      "--bui-tabs-indicator-width"
-    );
-    const parsed = Number.parseFloat(cssValue);
-    const width = Number.isNaN(parsed) ? DEFAULT_INDICATOR_WIDTH : parsed;
-    indicatorWidthCache.current = width;
-    return width;
+    const rect = indicator.getBoundingClientRect();
+    return rect.width > 0 ? rect.width : DEFAULT_INDICATOR_WIDTH;
   });
   const getTabsMeta = useEventCallback(() => {
     const tabsNode = tabsContainerRef.current;
@@ -103,15 +94,48 @@ const TabIndicator = ({
     updateIndicatorState();
   });
   useEffect(() => {
+    const tabsContainer = tabsContainerRef.current;
+    if (!tabsContainer)
+      return void 0;
     const handleResize = debounce(() => {
-      indicatorWidthCache.current = null;
-      updateIndicatorState();
+      if (tabsContainerRef.current) {
+        updateIndicatorState();
+      }
     }, 100);
     window.addEventListener("resize", handleResize);
+    let resizeObserver;
+    let mutationObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(handleResize);
+      Array.from(tabsContainer.children).forEach((child) => {
+        resizeObserver == null ? void 0 : resizeObserver.observe(child);
+      });
+    }
+    if (typeof MutationObserver !== "undefined") {
+      const handleMutation = (records) => {
+        records.forEach((record) => {
+          record.removedNodes.forEach((item) => {
+            if (item instanceof Element) {
+              resizeObserver == null ? void 0 : resizeObserver.unobserve(item);
+            }
+          });
+          record.addedNodes.forEach((item) => {
+            if (item instanceof Element) {
+              resizeObserver == null ? void 0 : resizeObserver.observe(item);
+            }
+          });
+        });
+        handleResize();
+      };
+      mutationObserver = new MutationObserver(handleMutation);
+      mutationObserver.observe(tabsContainer, { childList: true });
+    }
     return () => {
       window.removeEventListener("resize", handleResize);
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
     };
-  }, [updateIndicatorState]);
+  }, [updateIndicatorState, tabsContainerRef]);
   if (!indicatorStyle) {
     return null;
   }
@@ -119,7 +143,7 @@ const TabIndicator = ({
     "div",
     {
       ref: indicatorRef,
-      className: clsx(`${rootClass}-indicator`),
+      className: clsx(tabIndicatorClass),
       style: indicatorStyle,
       "aria-hidden": "true"
     }

package/es/Tabs/TabPanel.js

@@ -28,8 +28,12 @@ var __objRest = (source, exclude) => {
 };
 import React, { forwardRef } from "react";
 import clsx from "clsx";
+import {
+  tabPanelRootClass,
+  tabPanelActiveClass,
+  tabPanelInactiveClass
+} from "./classes";
 import "./TabPanel.css";
-const prefixCls = "bui-tabpanel";
 const TabPanel = forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -53,9 +57,9 @@ const TabPanel = forwardRef((props, ref) => {
       "aria-hidden": !isActive,
       tabIndex: 0,
       ref,
-      className: clsx(prefixCls, className, {
-        [`${prefixCls}-active`]: isActive,
-        [`${prefixCls}-inactive`]: !isActive
+      className: clsx(tabPanelRootClass, className, {
+        [tabPanelActiveClass]: isActive,
+        [tabPanelInactiveClass]: !isActive
       })
     }, others),
     isActive ? children : keepActiveDom

package/es/Tabs/Tabs.js

@@ -36,21 +36,21 @@ import Tab from "./Tab";
 import TabIndicator from "./TabIndicator";
 import TabMask from "./TabMask";
 import { TabsContextProvider } from "./TabsContext";
-import { tabsRootClass } from "./classes";
+import { tabsRootClass, tabsScrollClass } from "./classes";
 import "./Tabs.css";
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     children,
     className,
-    value,
     defaultValue,
+    value,
     tabs = [],
     onChange
   } = _a, others = __objRest(_a, [
     "children",
     "className",
-    "value",
     "defaultValue",
+    "value",
     "tabs",
     "onChange"
   ]);
@@ -121,11 +121,14 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   useEffect(() => {
     const tabsEl = tabsRef.current;
     if (!tabsEl)
-      return;
+      return void 0;
     const checkScrollable = () => {
       setIsScrollable(tabsEl.scrollWidth > tabsEl.offsetWidth);
     };
     checkScrollable();
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
     const resizeObserver = new ResizeObserver(checkScrollable);
     resizeObserver.observe(tabsEl);
     return () => {
@@ -135,7 +138,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   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`,
+      className: tabsScrollClass,
       ref: tabsRef,
       role: "tablist",
       "aria-orientation": "horizontal"

package/es/Tabs/classes.d.ts

@@ -1,5 +1,6 @@
 export declare const tabsRootClass = "bui-tabs";
 export declare const tabRootClass = "bui-tab";
+export declare const tabPanelRootClass = "bui-tabpanel";
 export declare const tabsScrollClass: string;
 export declare const tabsScrollWrapperClass: string;
 export declare const tabActiveClass: string;
@@ -8,3 +9,5 @@ export declare const tabIndicatorClass: string;
 export declare const tabMaskClass: string;
 export declare const tabMaskLeftClass: string;
 export declare const tabMaskRightClass: string;
+export declare const tabPanelActiveClass: string;
+export declare const tabPanelInactiveClass: string;

package/es/Tabs/classes.js

@@ -1,5 +1,6 @@
 const tabsRootClass = "bui-tabs";
 const tabRootClass = "bui-tab";
+const tabPanelRootClass = "bui-tabpanel";
 const tabsScrollClass = `${tabsRootClass}-tabs`;
 const tabsScrollWrapperClass = `${tabsRootClass}-scroll-wrapper`;
 const tabActiveClass = `${tabRootClass}-active`;
@@ -8,6 +9,8 @@ const tabIndicatorClass = `${tabsRootClass}-indicator`;
 const tabMaskClass = `${tabsRootClass}-mask`;
 const tabMaskLeftClass = `${tabMaskClass}-left`;
 const tabMaskRightClass = `${tabMaskClass}-right`;
+const tabPanelActiveClass = `${tabPanelRootClass}-active`;
+const tabPanelInactiveClass = `${tabPanelRootClass}-inactive`;
 export {
   tabActiveClass,
   tabDisabledClass,
@@ -15,6 +18,9 @@ export {
   tabMaskClass,
   tabMaskLeftClass,
   tabMaskRightClass,
+  tabPanelActiveClass,
+  tabPanelInactiveClass,
+  tabPanelRootClass,
   tabRootClass,
   tabsRootClass,
   tabsScrollClass,

package/package.json

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