@bifrostui/react 2.0.0-alpha.3 → 2.0.0-alpha.31

package/dist/Tabs/Tab.css

@@ -1,5 +1,5 @@
 .bui-tab {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
@@ -17,30 +17,8 @@
 .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-miniapp-active {
-  color: var(--bui-tab-active-color);
-  line-height: 1.5;
-  font-weight: var(--bui-font-weight-bold);
-  position: relative;
-}
-.bui-tab-miniapp-active-line {
-  position: absolute;
-  bottom: 0;
-  left: -12px;
-  right: -12px;
-  margin: 0 auto !important;
-  width: 18px;
-  height: 2px;
-  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  background-color: var(--bui-color-primary);
 }
 .bui-tab-disabled {
   opacity: 0.5;
   pointer-events: none;
 }
-.bui-indicator-invisible {
-  visibility: hidden;
-  background-color: transparent;
-}

package/dist/Tabs/Tab.d.ts

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

package/dist/Tabs/Tab.js

@@ -63,39 +63,52 @@ 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 prefixCls = "bui-tab";
 const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
     children,
     index,
     disabled = false,
-    onClick,
-    role = "tab",
-    tabIndex,
-    "aria-selected": ariaSelected,
-    "aria-disabled": ariaDisabled
+    onClick
   } = _a, others = __objRest(_a, [
     "className",
     "children",
     "index",
     "disabled",
-    "onClick",
-    "role",
-    "tabIndex",
-    "aria-selected",
-    "aria-disabled"
+    "onClick"
   ]);
-  const tabsContext = import_react.default.useContext(import_TabsContext.default);
-  const { value, triggerChange } = tabsContext;
-  const isActive = index === value;
+  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
+  );
+  const triggerChange = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.triggerChange
+  );
+  const onRegister = (0, import_utils.useContextSelector)(import_TabsContext.default, (ctx) => ctx.onRegister);
+  const onUnregister = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.onUnregister
+  );
+  (0, import_react.useEffect)(() => {
+    if (index !== void 0 && index !== null) {
+      onRegister == null ? void 0 : onRegister({ value: index, ref: innerRef });
+    }
+    return () => {
+      if (index !== void 0 && index !== null) {
+        onUnregister == null ? void 0 : onUnregister({ value: index });
+      }
+    };
+  }, [onRegister, onUnregister, index]);
   const rootCls = (0, import_clsx.default)(
-    prefixCls,
+    import_classes.tabRootClass,
     {
-      [`${prefixCls}-active`]: !import_utils.isMini && isActive,
-      [`${prefixCls}-miniapp-active`]: import_utils.isMini && isActive,
-      [`${prefixCls}-disabled`]: disabled
+      [import_classes.tabActiveClass]: !import_utils.isMini && isActive,
+      [import_classes.tabDisabledClass]: disabled
     },
     className
   );
@@ -103,31 +116,26 @@ const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     if (disabled)
       return;
     e.preventDefault();
-    triggerChange(e, { index });
+    triggerChange == null ? void 0 : triggerChange(e, { index });
     onClick == null ? void 0 : onClick(e, { index });
   };
+  if (process.env.NODE_ENV !== "production") {
+    console.count("Tab render");
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadProps(__spreadValues({
-      role,
-      "aria-selected": ariaSelected != null ? ariaSelected : isActive,
-      "aria-disabled": ariaDisabled != null ? ariaDisabled : disabled,
-      tabIndex: tabIndex != null ? tabIndex : disabled ? -1 : 0,
-      ref,
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0,
+      ref: handleRef,
       className: rootCls
     }, others), {
       onClick: handleClick
     }),
-    children,
-    import_utils.isMini && /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_clsx.default)(`${prefixCls}-miniapp-active-line`, {
-          "bui-indicator-invisible": !isActive
-        })
-      }
-    )
+    children
   );
 });
 Tab.displayName = "BuiTab";
-var Tab_default = Tab;
+var Tab_default = /* @__PURE__ */ import_react.default.memo(Tab);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@bifrostui/types';
 import { ITabItem, TabChangeEvent } from './Tabs.types';
 export type TabProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{

package/dist/Tabs/TabIndicator.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface TabIndicatorProps {
+    /** 当前选中的 tab 值 */
+    currentValue: string;
+    /** 已注册的 tabs 引用映射表 */
+    registeredTabs: React.MutableRefObject<Record<string, React.RefObject<HTMLElement>>>;
+    /** tabs 容器的引用 */
+    tabsContainerRef: React.RefObject<HTMLDivElement>;
+}
+declare const TabIndicator: React.FC<TabIndicatorProps>;
+export default TabIndicator;

package/dist/Tabs/TabIndicator.js

@@ -0,0 +1,185 @@
+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 TabIndicator_exports = {};
+__export(TabIndicator_exports, {
+  default: () => TabIndicator_default
+});
+module.exports = __toCommonJS(TabIndicator_exports);
+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"));
+var import_classes = require("./classes");
+const duration = 300;
+const DEFAULT_INDICATOR_WIDTH = 24;
+const TabIndicator = ({
+  currentValue,
+  registeredTabs,
+  tabsContainerRef
+}) => {
+  const indicatorRef = (0, import_react.useRef)(null);
+  const hasRenderedOnce = (0, import_react.useRef)(false);
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(
+    null
+  );
+  const getActiveTabElement = (0, import_utils.useEventCallback)(
+    (activeValue) => {
+      const tabRef = registeredTabs.current[activeValue];
+      return tabRef == null ? void 0 : tabRef.current;
+    }
+  );
+  const scrollIntoView = (0, import_utils.useEventCallback)(
+    (activeTab, animate = true) => {
+      const tabsEl = tabsContainerRef.current;
+      if (!tabsEl || !activeTab) {
+        return;
+      }
+      (0, import_scroll.default)(
+        tabsEl,
+        activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
+        animate ? duration : 0
+      );
+    }
+  );
+  const getIndicatorWidth = (0, import_utils.useEventCallback)(() => {
+    const indicator = indicatorRef.current;
+    if (!indicator)
+      return DEFAULT_INDICATOR_WIDTH;
+    const rect = indicator.getBoundingClientRect();
+    return rect.width > 0 ? rect.width : DEFAULT_INDICATOR_WIDTH;
+  });
+  const getTabsMeta = (0, import_utils.useEventCallback)(() => {
+    const tabsNode = tabsContainerRef.current;
+    let tabsMeta = null;
+    if (tabsNode) {
+      const rect = tabsNode.getBoundingClientRect();
+      tabsMeta = {
+        clientWidth: tabsNode.clientWidth,
+        scrollLeft: tabsNode.scrollLeft,
+        scrollWidth: tabsNode.scrollWidth,
+        left: rect.left
+      };
+    }
+    let tabMeta = null;
+    const activeTab = getActiveTabElement(currentValue);
+    if (activeTab) {
+      tabMeta = activeTab.getBoundingClientRect();
+    }
+    return { tabsMeta, tabMeta };
+  });
+  const updateIndicatorState = (0, import_utils.useEventCallback)(() => {
+    const { tabsMeta, tabMeta } = getTabsMeta();
+    if (!tabMeta || !tabsMeta) {
+      setIndicatorStyle(null);
+      return;
+    }
+    const tabLeft = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;
+    const tabWidth = tabMeta.width;
+    const indicatorWidth = getIndicatorWidth();
+    const leftPosition = tabLeft + (tabWidth - indicatorWidth) / 2;
+    const newIndicatorStyle = {
+      left: leftPosition
+    };
+    if (indicatorStyle === null) {
+      setIndicatorStyle(newIndicatorStyle);
+    } else {
+      const dLeft = Math.abs(indicatorStyle.left - newIndicatorStyle.left);
+      if (dLeft >= 1) {
+        setIndicatorStyle(newIndicatorStyle);
+      }
+    }
+    const activeTab = getActiveTabElement(currentValue);
+    if (activeTab) {
+      const maxScrollDistance = tabsMeta.scrollWidth - tabsMeta.clientWidth;
+      if (maxScrollDistance > 0 && !import_utils.isMini) {
+        scrollIntoView(activeTab, hasRenderedOnce.current);
+      }
+      hasRenderedOnce.current = true;
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    updateIndicatorState();
+  });
+  (0, import_react.useEffect)(() => {
+    const tabsContainer = tabsContainerRef.current;
+    if (!tabsContainer)
+      return void 0;
+    const handleResize = (0, import_utils.debounce)(() => {
+      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, tabsContainerRef]);
+  if (!indicatorStyle) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: indicatorRef,
+      className: (0, import_clsx.default)(import_classes.tabIndicatorClass),
+      style: indicatorStyle,
+      "aria-hidden": "true"
+    }
+  );
+};
+TabIndicator.displayName = "BuiTabsIndicator";
+var TabIndicator_default = TabIndicator;

package/dist/Tabs/TabMask.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TabMaskProps {
+    /** 位置：左侧或右侧 */
+    position: 'left' | 'right';
+}
+declare const _default: React.NamedExoticComponent<TabMaskProps>;
+export default _default;

package/dist/Tabs/TabMask.js

@@ -0,0 +1,47 @@
+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 }) => /* @__PURE__ */ import_react.default.createElement(
+  "div",
+  {
+    className: (0, import_clsx.default)(
+      import_classes.tabMaskClass,
+      position === "left" ? import_classes.tabMaskLeftClass : import_classes.tabMaskRightClass
+    ),
+    "aria-hidden": "true"
+  }
+);
+TabMask.displayName = "BuiTabsMask";
+var TabMask_default = /* @__PURE__ */ import_react.default.memo(TabMask);

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/TabPanel.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 export type TabPanelProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {
         /**

package/dist/Tabs/Tabs.css

@@ -2,6 +2,7 @@
 page,
 xhs-page {
   --bui-tabs-height: 39px;
+  --bui-tabs-padding: 0;
   --bui-tabs-font-weight: var(--bui-font-weight-medium);
   --bui-tabs-indicator-bg: var(--bui-color-primary);
   --bui-tabs-indicator-height: 3PX;
@@ -16,10 +17,10 @@ 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;
+  padding: var(--bui-tabs-padding);
   font-family: var(--bui-font-family);
   font-weight: var(--bui-tabs-font-weight);
 }
@@ -29,6 +30,7 @@ xhs-page {
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
+  white-space: nowrap;
   position: relative;
   overflow-x: scroll;
   scrollbar-width: none;
@@ -36,15 +38,28 @@ xhs-page {
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
+.bui-tabs-scroll-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  min-width: 100%;
+}
 .bui-tabs-indicator {
   position: absolute;
+  top: unset;
+  bottom: var(--bui-tabs-indicator-bottom, 0);
   width: var(--bui-tabs-indicator-width);
-  bottom: var(--bui-tabs-indicator-bottom);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
   background: var(--bui-tabs-indicator-bg);
   border-radius: var(--bui-tabs-indicator-border-radius);
   box-shadow: var(--bui-tabs-indicator-box-shadow);
+  pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -74,7 +89,3 @@ xhs-page {
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-indicator-invisible {
-  visibility: hidden;
-  background-color: transparent;
-}