bj-web-components 0.2.27 → 0.2.28

package/dist/web/Tabs/BTabs.mjs

@@ -1,130 +1,150 @@
-import { jsxs as g, jsx as b } from "react/jsx-runtime";
-import { useRef as E, useState as A, useEffect as L, useMemo as T, Children as P, isValidElement as F } from "react";
-import { TabPane as G } from "./TabPane.mjs";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo, Children, isValidElement } from "react";
+import { TabPane } from "./TabPane.mjs";
 /* empty css            */
-function I(...n) {
-  return n.filter(Boolean).join(" ");
+function classNames(...values) {
+  return values.filter(Boolean).join(" ");
 }
-function U(n, s) {
-  const [t, a] = A(n);
-  return [s === void 0 ? t : s, a];
+function useMergedState(defaultValue, value) {
+  const [innerValue, setInnerValue] = useState(defaultValue);
+  return [value === void 0 ? innerValue : value, setInnerValue];
 }
-function q(n, s) {
-  return T(() => n ? n.filter((t) => !!(t && typeof t == "object" && "key" in t)) : P.toArray(s).flatMap((t) => {
-    if (!F(t)) return [];
-    const { tab: a, tabKey: l, ...u } = t.props, c = l ?? t.key;
-    return c === null ? [] : [{ ...u, key: String(c), label: a }];
-  }), [s, n]);
+function useLegacyItems(items, children) {
+  return useMemo(() => {
+    if (items) return items.filter((item) => Boolean(item && typeof item === "object" && "key" in item));
+    return Children.toArray(children).flatMap((child) => {
+      if (!isValidElement(child)) return [];
+      const { tab, tabKey, ...restProps } = child.props;
+      const key = tabKey ?? child.key;
+      return key === null ? [] : [{ ...restProps, key: String(key), label: tab }];
+    });
+  }, [children, items]);
 }
-function z({
-  active: n,
-  id: s,
-  item: t,
-  onClick: a,
-  onKeyDown: l,
-  tabCount: u,
-  tabIndex: c
+function TabNode({
+  active,
+  id,
+  item,
+  onClick,
+  onKeyDown,
+  tabCount,
+  tabIndex
 }) {
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
-      "aria-controls": `${s}-panel-${t.key}`,
-      "aria-disabled": t.disabled,
-      "aria-selected": n,
-      className: I("bj-tabs__tab", n && "bj-tabs__tab--active", t.disabled && "bj-tabs__tab--disabled"),
-      disabled: t.disabled,
-      id: `${s}-tab-${t.key}`,
-      onClick: a,
-      onKeyDown: l,
+      "aria-controls": `${id}-panel-${item.key}`,
+      "aria-disabled": item.disabled,
+      "aria-selected": active,
+      className: classNames("bj-tabs__tab", active && "bj-tabs__tab--active", item.disabled && "bj-tabs__tab--disabled"),
+      disabled: item.disabled,
+      id: `${id}-tab-${item.key}`,
+      onClick,
+      onKeyDown,
       role: "tab",
-      tabIndex: t.disabled ? -1 : n ? 0 : -1,
+      tabIndex: item.disabled ? -1 : active ? 0 : -1,
       type: "button",
       children: [
-        /* @__PURE__ */ b("span", { className: "bj-tabs__tab-btn", children: t.label }),
-        /* @__PURE__ */ b("span", { className: "bj-tabs__sr-only", children: `Tab ${c + 1} of ${u}` })
+        /* @__PURE__ */ jsx("span", { className: "bj-tabs__tab-btn", children: item.label }),
+        /* @__PURE__ */ jsx("span", { className: "bj-tabs__sr-only", children: `Tab ${tabIndex + 1} of ${tabCount}` })
       ]
     }
   );
 }
-function H({ activeKey: n, id: s, items: t }) {
-  return /* @__PURE__ */ b("div", { className: "bj-tabs__content-holder", children: /* @__PURE__ */ b("div", { className: "bj-tabs__content", children: t.map((a) => {
-    const l = a.key === n;
-    return !l && !a.forceRender ? null : /* @__PURE__ */ b(
+function TabPanelList({ activeKey, id, items }) {
+  return /* @__PURE__ */ jsx("div", { className: "bj-tabs__content-holder", children: /* @__PURE__ */ jsx("div", { className: "bj-tabs__content", children: items.map((item) => {
+    const active = item.key === activeKey;
+    if (!active && !item.forceRender) return null;
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        "aria-hidden": !l,
-        "aria-labelledby": `${s}-tab-${a.key}`,
-        className: I("bj-tabs__tabpane", l && "bj-tabs__tabpane--active", a.className),
-        id: `${s}-panel-${a.key}`,
+        "aria-hidden": !active,
+        "aria-labelledby": `${id}-tab-${item.key}`,
+        className: classNames("bj-tabs__tabpane", active && "bj-tabs__tabpane--active", item.className),
+        id: `${id}-panel-${item.key}`,
         role: "tabpanel",
-        style: a.style,
-        tabIndex: l ? 0 : -1,
-        children: a.children
+        style: item.style,
+        tabIndex: active ? 0 : -1,
+        children: item.children
       },
-      a.key
+      item.key
     );
   }) }) });
 }
-function J({
-  activeKey: n,
-  children: s,
-  centered: t,
-  className: a,
-  defaultActiveKey: l,
-  id: u,
-  items: c,
-  onChange: f,
-  onTabClick: p,
-  style: w,
-  tabBarGutter: O,
-  tabBarStyle: M,
-  tabPosition: _ = "top",
-  type: K = "line"
+function BTabs({
+  activeKey,
+  children,
+  centered,
+  className,
+  defaultActiveKey,
+  id,
+  items,
+  onChange,
+  onTabClick,
+  style,
+  tabBarGutter,
+  tabBarStyle,
+  tabPosition = "top",
+  type = "line"
 }) {
-  const r = q(c, s), B = E(`bj-tabs-${Math.random().toString(36).slice(2, 10)}`), j = u ?? B.current, [o, k] = U(
+  const tabs = useLegacyItems(items, children);
+  const generatedIdRef = useRef(`bj-tabs-${Math.random().toString(36).slice(2, 10)}`);
+  const mergedId = id ?? generatedIdRef.current;
+  const [mergedActiveKey, setMergedActiveKey] = useMergedState(
     () => {
-      var e;
-      return l ?? ((e = r[0]) == null ? void 0 : e.key);
+      var _a;
+      return defaultActiveKey ?? ((_a = tabs[0]) == null ? void 0 : _a.key);
     },
-    n
-  ), [$, V] = A(() => r.findIndex((e) => e.key === o));
-  L(() => {
-    var d;
-    let e = r.findIndex((i) => i.key === o);
-    e === -1 && (e = Math.max(0, Math.min($, r.length - 1)), k((d = r[e]) == null ? void 0 : d.key)), V(e);
-  }, [$, o, k, r]);
-  const R = (e, d) => {
-    p == null || p(e, d), e !== o && (k(e), f == null || f(e));
-  }, S = (e, d) => {
-    var m;
-    const x = _ === "left" || _ === "right" ? e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0 : e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
-    if (!x) return;
-    e.preventDefault();
-    const y = r.filter((h) => !h.disabled), D = y.findIndex((h) => {
-      var N;
-      return h.key === ((N = r[d]) == null ? void 0 : N.key);
-    }), v = y[(D + x + y.length) % y.length];
-    (m = document.getElementById(`${j}-tab-${v == null ? void 0 : v.key}`)) == null || m.focus();
+    activeKey
+  );
+  const [activeIndex, setActiveIndex] = useState(() => tabs.findIndex((tab) => tab.key === mergedActiveKey));
+  useEffect(() => {
+    var _a;
+    let nextActiveIndex = tabs.findIndex((tab) => tab.key === mergedActiveKey);
+    if (nextActiveIndex === -1) {
+      nextActiveIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1));
+      setMergedActiveKey((_a = tabs[nextActiveIndex]) == null ? void 0 : _a.key);
+    }
+    setActiveIndex(nextActiveIndex);
+  }, [activeIndex, mergedActiveKey, setMergedActiveKey, tabs]);
+  const activateTab = (key, event) => {
+    onTabClick == null ? void 0 : onTabClick(key, event);
+    if (key === mergedActiveKey) return;
+    setMergedActiveKey(key);
+    onChange == null ? void 0 : onChange(key);
+  };
+  const moveFocus = (event, index) => {
+    var _a;
+    const isVertical = tabPosition === "left" || tabPosition === "right";
+    const nextKey = isVertical ? event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0 : event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    if (!nextKey) return;
+    event.preventDefault();
+    const enabledTabs = tabs.filter((tab) => !tab.disabled);
+    const enabledIndex = enabledTabs.findIndex((tab) => {
+      var _a2;
+      return tab.key === ((_a2 = tabs[index]) == null ? void 0 : _a2.key);
+    });
+    const nextTab = enabledTabs[(enabledIndex + nextKey + enabledTabs.length) % enabledTabs.length];
+    (_a = document.getElementById(`${mergedId}-tab-${nextTab == null ? void 0 : nextTab.key}`)) == null ? void 0 : _a.focus();
   };
-  return /* @__PURE__ */ g("div", { className: I("bj-tabs", `bj-tabs--${_}`, `bj-tabs--${K}`, t && "bj-tabs--centered", a), style: w, children: [
-    /* @__PURE__ */ b("div", { className: "bj-tabs__nav", role: "tablist", style: M, children: /* @__PURE__ */ b("div", { className: "bj-tabs__nav-wrap", children: /* @__PURE__ */ b("div", { className: "bj-tabs__nav-list", children: r.map((e, d) => /* @__PURE__ */ b(
-      z,
+  return /* @__PURE__ */ jsxs("div", { className: classNames("bj-tabs", `bj-tabs--${tabPosition}`, `bj-tabs--${type}`, centered && "bj-tabs--centered", className), style, children: [
+    /* @__PURE__ */ jsx("div", { className: "bj-tabs__nav", role: "tablist", style: tabBarStyle, children: /* @__PURE__ */ jsx("div", { className: "bj-tabs__nav-wrap", children: /* @__PURE__ */ jsx("div", { className: "bj-tabs__nav-list", children: tabs.map((item, index) => /* @__PURE__ */ jsx(
+      TabNode,
       {
-        active: e.key === o,
-        id: j,
-        item: e,
-        onClick: (i) => R(e.key, i),
-        onKeyDown: (i) => S(i, d),
-        tabCount: r.length,
-        tabIndex: d
+        active: item.key === mergedActiveKey,
+        id: mergedId,
+        item,
+        onClick: (event) => activateTab(item.key, event),
+        onKeyDown: (event) => moveFocus(event, index),
+        tabCount: tabs.length,
+        tabIndex: index
       },
-      e.key
+      item.key
     )) }) }) }),
-    /* @__PURE__ */ b(H, { activeKey: o, id: j, items: r })
+    /* @__PURE__ */ jsx(TabPanelList, { activeKey: mergedActiveKey, id: mergedId, items: tabs })
   ] });
 }
-J.TabPane = G;
+BTabs.TabPane = TabPane;
 export {
-  G as TabPane,
-  J as default
+  TabPane,
+  BTabs as default
 };

package/dist/web/Tabs/TabPane.js

@@ -1 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function e(a){return null}e.displayName="BTabs.TabPane";exports.TabPane=e;exports.default=e;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+function TabPane(_) {
+  return null;
+}
+TabPane.displayName = "BTabs.TabPane";
+exports.TabPane = TabPane;
+exports.default = TabPane;

package/dist/web/Tabs/TabPane.mjs

@@ -1,8 +1,8 @@
-function a(e) {
+function TabPane(_) {
   return null;
 }
-a.displayName = "BTabs.TabPane";
+TabPane.displayName = "BTabs.TabPane";
 export {
-  a as TabPane,
-  a as default
+  TabPane,
+  TabPane as default
 };

package/dist/web/Tooltip/ConfirmTooltip.js

@@ -1 +1,26 @@
-"use strict";const o=require("react/jsx-runtime");;/* empty css              */const m=require("./useAutoPlacement.js");function f({placement:e="top",title:i="是否使用当前自动翻译的英文？",okText:s="使用",cancelText:c="我去改改",onOk:l,onCancel:n,className:r,style:p}){const[t,a]=m.useAutoPlacement(e),u=["tooltip-popup",`tooltip-popup--${t}`,r].filter(Boolean).join(" ");return o.jsxs("div",{ref:a,className:u,style:p,children:[o.jsx("div",{className:`tooltip-arrow tooltip-arrow--${t}`}),o.jsx("p",{className:"tooltip-confirm__title",children:i}),o.jsxs("div",{className:"tooltip-confirm__actions",children:[o.jsx("button",{className:"tooltip-confirm__cancel",onClick:n,children:c}),o.jsx("button",{className:"tooltip-confirm__ok",onClick:l,children:s})]})]})}module.exports=f;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css              */
+const useAutoPlacement = require("./useAutoPlacement.js");
+function ConfirmTooltip({
+  placement = "top",
+  title = "是否使用当前自动翻译的英文？",
+  okText = "使用",
+  cancelText = "我去改改",
+  onOk,
+  onCancel,
+  className,
+  style
+}) {
+  const [activePlacement, popupRef] = useAutoPlacement.useAutoPlacement(placement);
+  const popupCls = ["tooltip-popup", `tooltip-popup--${activePlacement}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: popupRef, className: popupCls, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `tooltip-arrow tooltip-arrow--${activePlacement}` }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tooltip-confirm__title", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tooltip-confirm__actions", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "tooltip-confirm__cancel", onClick: onCancel, children: cancelText }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "tooltip-confirm__ok", onClick: onOk, children: okText })
+    ] })
+  ] });
+}
+module.exports = ConfirmTooltip;

package/dist/web/Tooltip/ConfirmTooltip.mjs

@@ -1,26 +1,27 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 /* empty css              */
-import { useAutoPlacement as u } from "./useAutoPlacement.mjs";
-function h({
-  placement: l = "top",
-  title: p = "是否使用当前自动翻译的英文？",
-  okText: c = "使用",
-  cancelText: e = "我去改改",
-  onOk: n,
-  onCancel: r,
-  className: a,
-  style: s
+import { useAutoPlacement } from "./useAutoPlacement.mjs";
+function ConfirmTooltip({
+  placement = "top",
+  title = "是否使用当前自动翻译的英文？",
+  okText = "使用",
+  cancelText = "我去改改",
+  onOk,
+  onCancel,
+  className,
+  style
 }) {
-  const [t, m] = u(l), f = ["tooltip-popup", `tooltip-popup--${t}`, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i("div", { ref: m, className: f, style: s, children: [
-    /* @__PURE__ */ o("div", { className: `tooltip-arrow tooltip-arrow--${t}` }),
-    /* @__PURE__ */ o("p", { className: "tooltip-confirm__title", children: p }),
-    /* @__PURE__ */ i("div", { className: "tooltip-confirm__actions", children: [
-      /* @__PURE__ */ o("button", { className: "tooltip-confirm__cancel", onClick: r, children: e }),
-      /* @__PURE__ */ o("button", { className: "tooltip-confirm__ok", onClick: n, children: c })
+  const [activePlacement, popupRef] = useAutoPlacement(placement);
+  const popupCls = ["tooltip-popup", `tooltip-popup--${activePlacement}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref: popupRef, className: popupCls, style, children: [
+    /* @__PURE__ */ jsx("div", { className: `tooltip-arrow tooltip-arrow--${activePlacement}` }),
+    /* @__PURE__ */ jsx("p", { className: "tooltip-confirm__title", children: title }),
+    /* @__PURE__ */ jsxs("div", { className: "tooltip-confirm__actions", children: [
+      /* @__PURE__ */ jsx("button", { className: "tooltip-confirm__cancel", onClick: onCancel, children: cancelText }),
+      /* @__PURE__ */ jsx("button", { className: "tooltip-confirm__ok", onClick: onOk, children: okText })
     ] })
   ] });
 }
 export {
-  h as default
+  ConfirmTooltip as default
 };

package/dist/web/Tooltip/ContentTooltip.js

@@ -1 +1,94 @@
-"use strict";const t=require("react/jsx-runtime"),y=require("react"),B=require("react-dom"),$=require("antd");;/* empty css              */const P=require("./useAutoPlacement.js");function k({children:j,placement:i="top",content:a="这里是提示内容，可以包含更多详细信息。",variant:c="default",className:w,style:h,getPopupContainer:e,getAnchorElement:s,color:o,fontColor:r,autoAdjustOverflow:q=!0}){const[v,N]=P.useAutoPlacement(i),n=y.useRef(null),[b,S]=y.useState(),u=["tooltip-popup","tooltip-popup--content",`tooltip-popup--${v}`,c!=="default"?`tooltip-popup--${c}`:"",w].filter(Boolean).join(" "),p=["tooltip-arrow",`tooltip-arrow--${v}`,c==="tinted"?"tooltip-arrow--tinted-bg":""].filter(Boolean).join(" "),d={...h,...o?{backgroundColor:o}:{},...r?{color:r}:{}},f=o?{backgroundColor:o,borderColor:o}:void 0,x=r?{color:r}:void 0,_=t.jsxs("div",{className:`${u} tooltip-popup--antd`,style:d,children:[t.jsx("div",{className:p,style:f}),t.jsx("div",{className:"bu-tooltip-content__text",style:x,children:a})]});if(j)return t.jsx($.Tooltip,{title:_,placement:i==="auto"?"top":i,arrowPointAtCenter:!0,autoAdjustOverflow:q,getPopupContainer:e,overlayClassName:"bu-content-tooltip",children:j});const R=t.jsxs("div",{ref:N,className:u,style:d,children:[t.jsx("div",{className:p,style:f}),t.jsx("div",{className:"bu-tooltip-content__text",style:x,children:a})]});if(y.useLayoutEffect(()=>{if(!e||!n.current)return;const l=(s==null?void 0:s())??n.current.parentElement;if(!l)return;const m=l.getBoundingClientRect();S({position:"fixed",left:m.left+m.width/2,top:m.top,right:"auto",bottom:"auto",transform:"translate(-50%, calc(-100% - 16px))"})},[s,e]),e&&typeof document<"u"){const l=e();return t.jsxs(t.Fragment,{children:[t.jsx("span",{ref:n,className:"tooltip-portal-anchor"}),b&&B.createPortal(t.jsxs("div",{ref:N,className:u,style:{...d,...b},children:[t.jsx("div",{className:p,style:f}),t.jsx("div",{className:"bu-tooltip-content__text",style:x,children:a})]}),l)]})}return R}module.exports=k;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactDom = require("react-dom");
+const antd = require("antd");
+;/* empty css              */
+const useAutoPlacement = require("./useAutoPlacement.js");
+function BTooltip({
+  children,
+  placement = "top",
+  content = "这里是提示内容，可以包含更多详细信息。",
+  variant = "default",
+  className,
+  style,
+  getPopupContainer,
+  getAnchorElement,
+  color,
+  fontColor,
+  autoAdjustOverflow = true
+}) {
+  const [activePlacement, popupRef] = useAutoPlacement.useAutoPlacement(placement);
+  const anchorRef = react.useRef(null);
+  const [portalStyle, setPortalStyle] = react.useState();
+  const popupCls = [
+    "tooltip-popup",
+    "tooltip-popup--content",
+    `tooltip-popup--${activePlacement}`,
+    variant !== "default" ? `tooltip-popup--${variant}` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const arrowCls = [
+    "tooltip-arrow",
+    `tooltip-arrow--${activePlacement}`,
+    variant === "tinted" ? "tooltip-arrow--tinted-bg" : ""
+  ].filter(Boolean).join(" ");
+  const mergedPopupStyle = {
+    ...style,
+    ...color ? { backgroundColor: color } : {},
+    ...fontColor ? { color: fontColor } : {}
+  };
+  const arrowStyle = color ? { backgroundColor: color, borderColor: color } : void 0;
+  const contentStyle = fontColor ? { color: fontColor } : void 0;
+  const customContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${popupCls} tooltip-popup--antd`, style: mergedPopupStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowCls, style: arrowStyle }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
+  ] });
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      antd.Tooltip,
+      {
+        title: customContent,
+        placement: placement === "auto" ? "top" : placement,
+        arrowPointAtCenter: true,
+        autoAdjustOverflow,
+        getPopupContainer,
+        overlayClassName: "bu-content-tooltip",
+        children
+      }
+    );
+  }
+  const popup = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: popupRef, className: popupCls, style: mergedPopupStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowCls, style: arrowStyle }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
+  ] });
+  react.useLayoutEffect(() => {
+    if (!getPopupContainer || !anchorRef.current) return;
+    const anchor = (getAnchorElement == null ? void 0 : getAnchorElement()) ?? anchorRef.current.parentElement;
+    if (!anchor) return;
+    const rect = anchor.getBoundingClientRect();
+    setPortalStyle({
+      position: "fixed",
+      left: rect.left + rect.width / 2,
+      top: rect.top,
+      right: "auto",
+      bottom: "auto",
+      transform: "translate(-50%, calc(-100% - 16px))"
+    });
+  }, [getAnchorElement, getPopupContainer]);
+  if (getPopupContainer && typeof document !== "undefined") {
+    const container = getPopupContainer();
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { ref: anchorRef, className: "tooltip-portal-anchor" }),
+      portalStyle && reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: popupRef, className: popupCls, style: { ...mergedPopupStyle, ...portalStyle }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowCls, style: arrowStyle }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
+        ] }),
+        container
+      )
+    ] });
+  }
+  return popup;
+}
+module.exports = BTooltip;

package/dist/web/Tooltip/ContentTooltip.mjs

@@ -1,85 +1,95 @@
-import { jsx as t, jsxs as i, Fragment as $ } from "react/jsx-runtime";
-import { useRef as k, useState as C, useLayoutEffect as P } from "react";
-import { createPortal as T } from "react-dom";
-import { Tooltip as F } from "antd";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { Tooltip } from "antd";
 /* empty css              */
-import { useAutoPlacement as L } from "./useAutoPlacement.mjs";
-function J({
-  children: N,
-  placement: a = "top",
-  content: p = "这里是提示内容，可以包含更多详细信息。",
-  variant: n = "default",
-  className: h,
-  style: S,
-  getPopupContainer: o,
-  getAnchorElement: l,
-  color: e,
-  fontColor: r,
-  autoAdjustOverflow: _ = !0
+import { useAutoPlacement } from "./useAutoPlacement.mjs";
+function BTooltip({
+  children,
+  placement = "top",
+  content = "这里是提示内容，可以包含更多详细信息。",
+  variant = "default",
+  className,
+  style,
+  getPopupContainer,
+  getAnchorElement,
+  color,
+  fontColor,
+  autoAdjustOverflow = true
 }) {
-  const [b, x] = L(a), c = k(null), [w, j] = C(), u = [
+  const [activePlacement, popupRef] = useAutoPlacement(placement);
+  const anchorRef = useRef(null);
+  const [portalStyle, setPortalStyle] = useState();
+  const popupCls = [
     "tooltip-popup",
     "tooltip-popup--content",
-    `tooltip-popup--${b}`,
-    n !== "default" ? `tooltip-popup--${n}` : "",
-    h
-  ].filter(Boolean).join(" "), d = [
+    `tooltip-popup--${activePlacement}`,
+    variant !== "default" ? `tooltip-popup--${variant}` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const arrowCls = [
     "tooltip-arrow",
-    `tooltip-arrow--${b}`,
-    n === "tinted" ? "tooltip-arrow--tinted-bg" : ""
-  ].filter(Boolean).join(" "), f = {
-    ...S,
-    ...e ? { backgroundColor: e } : {},
-    ...r ? { color: r } : {}
-  }, m = e ? { backgroundColor: e, borderColor: e } : void 0, y = r ? { color: r } : void 0, B = /* @__PURE__ */ i("div", { className: `${u} tooltip-popup--antd`, style: f, children: [
-    /* @__PURE__ */ t("div", { className: d, style: m }),
-    /* @__PURE__ */ t("div", { className: "bu-tooltip-content__text", style: y, children: p })
+    `tooltip-arrow--${activePlacement}`,
+    variant === "tinted" ? "tooltip-arrow--tinted-bg" : ""
+  ].filter(Boolean).join(" ");
+  const mergedPopupStyle = {
+    ...style,
+    ...color ? { backgroundColor: color } : {},
+    ...fontColor ? { color: fontColor } : {}
+  };
+  const arrowStyle = color ? { backgroundColor: color, borderColor: color } : void 0;
+  const contentStyle = fontColor ? { color: fontColor } : void 0;
+  const customContent = /* @__PURE__ */ jsxs("div", { className: `${popupCls} tooltip-popup--antd`, style: mergedPopupStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: arrowCls, style: arrowStyle }),
+    /* @__PURE__ */ jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
   ] });
-  if (N)
-    return /* @__PURE__ */ t(
-      F,
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      Tooltip,
       {
-        title: B,
-        placement: a === "auto" ? "top" : a,
-        arrowPointAtCenter: !0,
-        autoAdjustOverflow: _,
-        getPopupContainer: o,
+        title: customContent,
+        placement: placement === "auto" ? "top" : placement,
+        arrowPointAtCenter: true,
+        autoAdjustOverflow,
+        getPopupContainer,
         overlayClassName: "bu-content-tooltip",
-        children: N
+        children
       }
     );
-  const R = /* @__PURE__ */ i("div", { ref: x, className: u, style: f, children: [
-    /* @__PURE__ */ t("div", { className: d, style: m }),
-    /* @__PURE__ */ t("div", { className: "bu-tooltip-content__text", style: y, children: p })
+  }
+  const popup = /* @__PURE__ */ jsxs("div", { ref: popupRef, className: popupCls, style: mergedPopupStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: arrowCls, style: arrowStyle }),
+    /* @__PURE__ */ jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
   ] });
-  if (P(() => {
-    if (!o || !c.current) return;
-    const s = (l == null ? void 0 : l()) ?? c.current.parentElement;
-    if (!s) return;
-    const v = s.getBoundingClientRect();
-    j({
+  useLayoutEffect(() => {
+    if (!getPopupContainer || !anchorRef.current) return;
+    const anchor = (getAnchorElement == null ? void 0 : getAnchorElement()) ?? anchorRef.current.parentElement;
+    if (!anchor) return;
+    const rect = anchor.getBoundingClientRect();
+    setPortalStyle({
       position: "fixed",
-      left: v.left + v.width / 2,
-      top: v.top,
+      left: rect.left + rect.width / 2,
+      top: rect.top,
       right: "auto",
       bottom: "auto",
       transform: "translate(-50%, calc(-100% - 16px))"
     });
-  }, [l, o]), o && typeof document < "u") {
-    const s = o();
-    return /* @__PURE__ */ i($, { children: [
-      /* @__PURE__ */ t("span", { ref: c, className: "tooltip-portal-anchor" }),
-      w && T(
-        /* @__PURE__ */ i("div", { ref: x, className: u, style: { ...f, ...w }, children: [
-          /* @__PURE__ */ t("div", { className: d, style: m }),
-          /* @__PURE__ */ t("div", { className: "bu-tooltip-content__text", style: y, children: p })
+  }, [getAnchorElement, getPopupContainer]);
+  if (getPopupContainer && typeof document !== "undefined") {
+    const container = getPopupContainer();
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { ref: anchorRef, className: "tooltip-portal-anchor" }),
+      portalStyle && createPortal(
+        /* @__PURE__ */ jsxs("div", { ref: popupRef, className: popupCls, style: { ...mergedPopupStyle, ...portalStyle }, children: [
+          /* @__PURE__ */ jsx("div", { className: arrowCls, style: arrowStyle }),
+          /* @__PURE__ */ jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
         ] }),
-        s
+        container
       )
     ] });
   }
-  return R;
+  return popup;
 }
 export {
-  J as default
+  BTooltip as default
 };