@bifrostui/react 1.4.2 → 1.4.3-beta.0

package/dist/Input/Input.css

@@ -30,6 +30,7 @@
 }
 .bui-input-input {
   flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   padding: 0;
@@ -39,16 +40,11 @@
   outline: none;
   background-color: var(--background-color);
   font-size: var(--bui-text-size-2);
-  width: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 .bui-input-input::placeholder {
   color: var(--bui-color-fg-subtle);
 }
 .bui-input-disabled {
-  pointer-events: none;
   background-color: var(--disabled-background-color);
 }
 .bui-input-disabled .bui-input-input {

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

package/dist/Popover/Popover.css

@@ -3,7 +3,7 @@
   --localtion-position: var(--bui-popover-localtion-position, 8PX);
   --max-width: var(--bui-popover-max-width, 350px);
   --content-min-width: var(--bui-popover-content-min-width, 30px);
-  --content-padding: var(--bui-popover-content-padding, 0);
+  --content-padding: var(--bui-popover-content-padding, 6px 8px);
   max-width: var(--max-width);
   font-size: var(--bui-text-size-1);
   position: absolute;

package/dist/Popover/Popover.js

@@ -70,6 +70,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     title,
     content,
     defaultOpen,
+    offsetSpacing = 0,
     placement = "top",
     trigger = "click",
     onOpenChange,
@@ -82,6 +83,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "title",
     "content",
     "defaultOpen",
+    "offsetSpacing",
     "placement",
     "trigger",
     "onOpenChange",
@@ -89,15 +91,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "hideArrow"
   ]);
   const controlByUser = typeof open !== "undefined";
-  const positionArr = placement.split(/([A-Z])/);
-  const direction = positionArr[0];
-  let location;
-  if (positionArr.length > 1) {
-    positionArr.splice(0, 1);
-    location = positionArr.join("").toLowerCase();
-  } else {
-    location = "center";
-  }
+  const { direction, location = "center" } = (0, import_utils.parsePlacement)(placement);
   const childrenRef = (0, import_react.useRef)();
   const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
   const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
@@ -132,10 +126,15 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     hidePopover(event);
   };
   const onRootElementMouted = (0, import_utils.throttle)(() => {
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = "center"
+    } = (0, import_utils.parsePlacement)(placement);
     const result = (0, import_utils.getStylesAndLocation)({
       childrenRef,
-      arrowDirection,
-      arrowLocation,
+      arrowDirection: newParsedDirection,
+      arrowLocation: newParsedLocation,
+      offsetSpacing,
       selector: `[data-id="tt_${ttId}"]`
     });
     if (!result)

package/dist/Popover/Popover.types.d.ts

@@ -25,6 +25,10 @@ export type PopoverProps<D extends React.ElementType = 'div', P = {}> = Override
          * @default false
          */
         hideArrow?: boolean;
+        /**
+         * 用于控制浮层和目标元素偏移量
+         */
+        offsetSpacing?: number;
         /**
          * 气泡框位置
          * @default 'top'

package/dist/Tabs/TabPanel.js

@@ -61,7 +61,19 @@ var import_react = __toESM(require("react"));
 var import_TabPanel = require("./TabPanel.css");
 const prefixCls = "bui-tabpanel";
 const TabPanel = (0, import_react.forwardRef)((props, ref) => {
-  const _a = props, { className, children, value, index, keepMounted } = _a, others = __objRest(_a, ["className", "children", "value", "index", "keepMounted"]);
+  const _a = props, {
+    className,
+    children,
+    value,
+    index,
+    keepMounted = false
+  } = _a, others = __objRest(_a, [
+    "className",
+    "children",
+    "value",
+    "index",
+    "keepMounted"
+  ]);
   const keepActiveDom = keepMounted ? children : null;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
@@ -76,7 +88,4 @@ const TabPanel = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 TabPanel.displayName = "BuiTabPanel";
-TabPanel.defaultProps = {
-  keepMounted: false
-};
 var TabPanel_default = TabPanel;

package/dist/Tabs/Tabs.d.ts

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

package/dist/Tabs/Tabs.js

@@ -60,9 +60,9 @@ var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Tab = __toESM(require("./Tab"));
-var import_Tabs = require("./Tabs.css");
 var import_TabsContext = require("./TabsContext");
 var import_bound = __toESM(require("./utils/bound"));
+var import_Tabs2 = require("./Tabs.css");
 const prefixCls = "bui-tabs";
 const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
@@ -81,16 +81,13 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     const container = tabsRef.current;
     if (!container)
       return;
-    const activeIndex = !!tabs.length && tabs.findIndex((item) => {
-      var _a2;
-      return item.index === (active || ((_a2 = tabs[0]) == null ? void 0 : _a2.index));
-    });
+    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
     const activeLine = activeLineRef.current;
     if (!activeLine)
       return;
     let activeTab;
     if (tabs.length) {
-      activeTab = container.childNodes[activeIndex + 1];
+      activeTab = activeIndex > -1 ? container.childNodes[activeIndex + 1] : void 0;
     } else {
       activeTab = [...container.childNodes].find((child) => {
         if (import_utils.isMini) {
@@ -101,20 +98,26 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
         return [...child.classList].includes("bui-tab-active");
       });
     }
-    if (!activeTab)
-      return;
-    const activeTabLeft = activeTab.offsetLeft;
-    const activeTabWidth = activeTab.offsetWidth;
-    const containerWidth = container.offsetWidth;
-    const containerScrollWidth = container.scrollWidth;
-    const activeLineWidth = activeLine.offsetWidth;
-    const x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+    let activeTabLeft = 0;
+    let activeTabWidth = 0;
+    let containerWidth = 0;
+    let containerScrollWidth = 0;
+    let activeLineWidth = 0;
+    let x = 0;
+    if (activeTab) {
+      activeTabLeft = activeTab.offsetLeft;
+      activeTabWidth = activeTab.offsetWidth;
+      containerWidth = container.offsetWidth;
+      containerScrollWidth = container.scrollWidth;
+      activeLineWidth = activeLine.offsetWidth;
+      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+    }
     setLineData({
       x,
       transitionInUse
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
-    if (maxScrollDistance <= 0)
+    if (maxScrollDistance <= 0 || !activeTab)
       return;
     const nextScrollLeft = (0, import_bound.default)(
       activeTabLeft - (containerWidth - activeTabWidth) / 2,
@@ -126,8 +129,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     }
   };
   (0, import_react.useEffect)(() => {
-    const defaultIndex = safeValue();
-    setActive(defaultIndex);
+    setActive(value);
   }, [value]);
   (0, import_react.useLayoutEffect)(() => {
     animate({ transitionInUse: false });
@@ -145,26 +147,6 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   (0, import_utils.useDidMountEffect)(() => {
     animate({ transitionInUse: true });
   }, [active, tabs, children]);
-  const safeValue = () => {
-    var _a2;
-    let defaultIndex = value;
-    const childs = import_react.default.Children.toArray(children);
-    const hasSameChild = !!childs.length && childs.some(
-      (child) => {
-        var _a3;
-        return import_react.default.isValidElement(child) && ((_a3 = child == null ? void 0 : child.props) == null ? void 0 : _a3.index) === value;
-      }
-    );
-    if (!!tabs.length && !tabs.some((item) => item.index === value)) {
-      defaultIndex = (_a2 = tabs[0]) == null ? void 0 : _a2.index;
-    } else if (children && !hasSameChild) {
-      const childNode = childs[0];
-      if (import_react.default.isValidElement(childNode)) {
-        defaultIndex = childNode.props.index;
-      }
-    }
-    return defaultIndex;
-  };
   const updateMask = (0, import_react.useMemo)(
     () => (0, import_utils.throttle)(
       () => {
@@ -205,8 +187,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     }
   };
   const providerValue = (0, import_react.useMemo)(() => {
-    const v = safeValue();
-    return { value: v, align, triggerChange: handleClick };
+    return { value, align, triggerChange: handleClick };
   }, [value, align, children, handleClick]);
   return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(prefixCls, className) }, others), /* @__PURE__ */ import_react.default.createElement(
     "div",
@@ -229,7 +210,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     {
       ref: activeLineRef,
       className: (0, import_clsx.default)(`${prefixCls}-tabline`, {
-        "bui-tabline-invisible": import_utils.isMini
+        "bui-tabline-invisible": import_utils.isMini || !lineData.x
       }),
       style: {
         transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,

package/dist/Tooltip/Tooltip.js

@@ -69,6 +69,7 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     children,
     title,
     defaultOpen,
+    offsetSpacing = 0,
     placement = "top",
     trigger = "click",
     onOpenChange,
@@ -79,21 +80,14 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "children",
     "title",
     "defaultOpen",
+    "offsetSpacing",
     "placement",
     "trigger",
     "onOpenChange",
     "open"
   ]);
   const controlByUser = typeof open !== "undefined";
-  const positionArr = placement.split(/([A-Z])/);
-  const direction = positionArr[0];
-  let location;
-  if (positionArr.length > 1) {
-    positionArr.splice(0, 1);
-    location = positionArr.join("").toLowerCase();
-  } else {
-    location = "center";
-  }
+  const { direction, location = "center" } = (0, import_utils.parsePlacement)(placement);
   const childrenRef = (0, import_react.useRef)();
   const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
   const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
@@ -128,10 +122,15 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     hideTooltip(event);
   };
   const onRootElementMouted = (0, import_utils.throttle)(() => {
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = "center"
+    } = (0, import_utils.parsePlacement)(placement);
     const result = (0, import_utils.getStylesAndLocation)({
       childrenRef,
-      arrowDirection,
-      arrowLocation,
+      arrowDirection: newParsedDirection,
+      arrowLocation: newParsedLocation,
+      offsetSpacing,
       selector: `[data-id="tt_${ttId}"]`
     });
     if (!result)

package/dist/Tooltip/Tooltip.types.d.ts

@@ -16,6 +16,10 @@ export type TooltipProps<D extends React.ElementType = 'div', P = {}> = Override
          * 用于手动控制气泡浮层显隐
          */
         open?: boolean;
+        /**
+         * 用于控制气泡浮层和目标元素偏移量
+         */
+        offsetSpacing?: number;
         /**
          * 气泡框位置
          * @default 'top'

package/es/Input/Input.css

@@ -30,6 +30,7 @@
 }
 .bui-input-input {
   flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   padding: 0;
@@ -39,16 +40,11 @@
   outline: none;
   background-color: var(--background-color);
   font-size: var(--bui-text-size-2);
-  width: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 .bui-input-input::placeholder {
   color: var(--bui-color-fg-subtle);
 }
 .bui-input-disabled {
-  pointer-events: none;
   background-color: var(--disabled-background-color);
 }
 .bui-input-disabled .bui-input-input {

package/es/Popover/Popover.css

@@ -3,7 +3,7 @@
   --localtion-position: var(--bui-popover-localtion-position, 8PX);
   --max-width: var(--bui-popover-max-width, 350px);
   --content-min-width: var(--bui-popover-content-min-width, 30px);
-  --content-padding: var(--bui-popover-content-padding, 0);
+  --content-padding: var(--bui-popover-content-padding, 6px 8px);
   max-width: var(--max-width);
   font-size: var(--bui-text-size-1);
   position: absolute;

package/es/Popover/Popover.js

@@ -31,6 +31,7 @@ import React, { useState, useRef, useEffect } from "react";
 import {
   getStylesAndLocation,
   triggerEventTransform,
+  parsePlacement,
   useUniqueId,
   throttle
 } from "@bifrostui/utils";
@@ -45,6 +46,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     title,
     content,
     defaultOpen,
+    offsetSpacing = 0,
     placement = "top",
     trigger = "click",
     onOpenChange,
@@ -57,6 +59,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "title",
     "content",
     "defaultOpen",
+    "offsetSpacing",
     "placement",
     "trigger",
     "onOpenChange",
@@ -64,15 +67,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "hideArrow"
   ]);
   const controlByUser = typeof open !== "undefined";
-  const positionArr = placement.split(/([A-Z])/);
-  const direction = positionArr[0];
-  let location;
-  if (positionArr.length > 1) {
-    positionArr.splice(0, 1);
-    location = positionArr.join("").toLowerCase();
-  } else {
-    location = "center";
-  }
+  const { direction, location = "center" } = parsePlacement(placement);
   const childrenRef = useRef();
   const [openStatus, setOpenStatus] = useState(defaultOpen);
   const [arrowDirection, setArrowDirection] = useState(direction);
@@ -107,10 +102,15 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     hidePopover(event);
   };
   const onRootElementMouted = throttle(() => {
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = "center"
+    } = parsePlacement(placement);
     const result = getStylesAndLocation({
       childrenRef,
-      arrowDirection,
-      arrowLocation,
+      arrowDirection: newParsedDirection,
+      arrowLocation: newParsedLocation,
+      offsetSpacing,
       selector: `[data-id="tt_${ttId}"]`
     });
     if (!result)

package/es/Popover/Popover.types.d.ts

@@ -25,6 +25,10 @@ export type PopoverProps<D extends React.ElementType = 'div', P = {}> = Override
          * @default false
          */
         hideArrow?: boolean;
+        /**
+         * 用于控制浮层和目标元素偏移量
+         */
+        offsetSpacing?: number;
         /**
          * 气泡框位置
          * @default 'top'

package/es/Tabs/TabPanel.js

@@ -31,7 +31,19 @@ import React, { forwardRef } from "react";
 import "./TabPanel.css";
 const prefixCls = "bui-tabpanel";
 const TabPanel = forwardRef((props, ref) => {
-  const _a = props, { className, children, value, index, keepMounted } = _a, others = __objRest(_a, ["className", "children", "value", "index", "keepMounted"]);
+  const _a = props, {
+    className,
+    children,
+    value,
+    index,
+    keepMounted = false
+  } = _a, others = __objRest(_a, [
+    "className",
+    "children",
+    "value",
+    "index",
+    "keepMounted"
+  ]);
   const keepActiveDom = keepMounted ? children : null;
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -46,9 +58,6 @@ const TabPanel = forwardRef((props, ref) => {
   );
 });
 TabPanel.displayName = "BuiTabPanel";
-TabPanel.defaultProps = {
-  keepMounted: false
-};
 var TabPanel_default = TabPanel;
 export {
   TabPanel_default as default

package/es/Tabs/Tabs.d.ts

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

package/es/Tabs/Tabs.js

@@ -41,9 +41,9 @@ import React, {
   useState
 } from "react";
 import Tab from "./Tab";
-import "./Tabs.css";
 import { TabsContextProvider } from "./TabsContext";
 import bound from "./utils/bound";
+import "./Tabs.css";
 const prefixCls = "bui-tabs";
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
@@ -62,16 +62,13 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     const container = tabsRef.current;
     if (!container)
       return;
-    const activeIndex = !!tabs.length && tabs.findIndex((item) => {
-      var _a2;
-      return item.index === (active || ((_a2 = tabs[0]) == null ? void 0 : _a2.index));
-    });
+    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
     const activeLine = activeLineRef.current;
     if (!activeLine)
       return;
     let activeTab;
     if (tabs.length) {
-      activeTab = container.childNodes[activeIndex + 1];
+      activeTab = activeIndex > -1 ? container.childNodes[activeIndex + 1] : void 0;
     } else {
       activeTab = [...container.childNodes].find((child) => {
         if (isMini) {
@@ -82,20 +79,26 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
         return [...child.classList].includes("bui-tab-active");
       });
     }
-    if (!activeTab)
-      return;
-    const activeTabLeft = activeTab.offsetLeft;
-    const activeTabWidth = activeTab.offsetWidth;
-    const containerWidth = container.offsetWidth;
-    const containerScrollWidth = container.scrollWidth;
-    const activeLineWidth = activeLine.offsetWidth;
-    const x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+    let activeTabLeft = 0;
+    let activeTabWidth = 0;
+    let containerWidth = 0;
+    let containerScrollWidth = 0;
+    let activeLineWidth = 0;
+    let x = 0;
+    if (activeTab) {
+      activeTabLeft = activeTab.offsetLeft;
+      activeTabWidth = activeTab.offsetWidth;
+      containerWidth = container.offsetWidth;
+      containerScrollWidth = container.scrollWidth;
+      activeLineWidth = activeLine.offsetWidth;
+      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+    }
     setLineData({
       x,
       transitionInUse
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
-    if (maxScrollDistance <= 0)
+    if (maxScrollDistance <= 0 || !activeTab)
       return;
     const nextScrollLeft = bound(
       activeTabLeft - (containerWidth - activeTabWidth) / 2,
@@ -107,8 +110,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     }
   };
   useEffect(() => {
-    const defaultIndex = safeValue();
-    setActive(defaultIndex);
+    setActive(value);
   }, [value]);
   useLayoutEffect(() => {
     animate({ transitionInUse: false });
@@ -126,26 +128,6 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   useDidMountEffect(() => {
     animate({ transitionInUse: true });
   }, [active, tabs, children]);
-  const safeValue = () => {
-    var _a2;
-    let defaultIndex = value;
-    const childs = React.Children.toArray(children);
-    const hasSameChild = !!childs.length && childs.some(
-      (child) => {
-        var _a3;
-        return React.isValidElement(child) && ((_a3 = child == null ? void 0 : child.props) == null ? void 0 : _a3.index) === value;
-      }
-    );
-    if (!!tabs.length && !tabs.some((item) => item.index === value)) {
-      defaultIndex = (_a2 = tabs[0]) == null ? void 0 : _a2.index;
-    } else if (children && !hasSameChild) {
-      const childNode = childs[0];
-      if (React.isValidElement(childNode)) {
-        defaultIndex = childNode.props.index;
-      }
-    }
-    return defaultIndex;
-  };
   const updateMask = useMemo(
     () => throttle(
       () => {
@@ -186,8 +168,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     }
   };
   const providerValue = useMemo(() => {
-    const v = safeValue();
-    return { value: v, align, triggerChange: handleClick };
+    return { value, align, triggerChange: handleClick };
   }, [value, align, children, handleClick]);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), /* @__PURE__ */ React.createElement(
     "div",
@@ -210,7 +191,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     {
       ref: activeLineRef,
       className: clsx(`${prefixCls}-tabline`, {
-        "bui-tabline-invisible": isMini
+        "bui-tabline-invisible": isMini || !lineData.x
       }),
       style: {
         transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,

package/es/Tooltip/Tooltip.js

@@ -31,6 +31,7 @@ import React, { useState, useRef, useEffect } from "react";
 import {
   getStylesAndLocation,
   triggerEventTransform,
+  parsePlacement,
   useUniqueId,
   throttle
 } from "@bifrostui/utils";
@@ -44,6 +45,7 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     children,
     title,
     defaultOpen,
+    offsetSpacing = 0,
     placement = "top",
     trigger = "click",
     onOpenChange,
@@ -54,21 +56,14 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "children",
     "title",
     "defaultOpen",
+    "offsetSpacing",
     "placement",
     "trigger",
     "onOpenChange",
     "open"
   ]);
   const controlByUser = typeof open !== "undefined";
-  const positionArr = placement.split(/([A-Z])/);
-  const direction = positionArr[0];
-  let location;
-  if (positionArr.length > 1) {
-    positionArr.splice(0, 1);
-    location = positionArr.join("").toLowerCase();
-  } else {
-    location = "center";
-  }
+  const { direction, location = "center" } = parsePlacement(placement);
   const childrenRef = useRef();
   const [openStatus, setOpenStatus] = useState(defaultOpen);
   const [arrowDirection, setArrowDirection] = useState(direction);
@@ -103,10 +98,15 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     hideTooltip(event);
   };
   const onRootElementMouted = throttle(() => {
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = "center"
+    } = parsePlacement(placement);
     const result = getStylesAndLocation({
       childrenRef,
-      arrowDirection,
-      arrowLocation,
+      arrowDirection: newParsedDirection,
+      arrowLocation: newParsedLocation,
+      offsetSpacing,
       selector: `[data-id="tt_${ttId}"]`
     });
     if (!result)

package/es/Tooltip/Tooltip.types.d.ts

@@ -16,6 +16,10 @@ export type TooltipProps<D extends React.ElementType = 'div', P = {}> = Override
          * 用于手动控制气泡浮层显隐
          */
         open?: boolean;
+        /**
+         * 用于控制气泡浮层和目标元素偏移量
+         */
+        offsetSpacing?: number;
         /**
          * 气泡框位置
          * @default 'top'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.4.2",
+  "version": "1.4.3-beta.0",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "1.4.2",
-    "@bifrostui/styles": "1.4.2",
-    "@bifrostui/types": "1.4.2",
-    "@bifrostui/utils": "1.4.2"
+    "@bifrostui/icons": "1.4.3-beta.0",
+    "@bifrostui/styles": "1.4.3-beta.0",
+    "@bifrostui/types": "1.4.3-beta.0",
+    "@bifrostui/utils": "1.4.3-beta.0"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",