@bifrostui/react 1.4.2 → 1.4.3

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" | keyof import("@bifrostui/types").ICommonProps | "container" | "BackdropProps" | "onClose" | "keepMounted" | "disablePortal" | "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/Select/Select.css

@@ -3,11 +3,6 @@
   --mini-width: var(--bui-select-min-width, 100px);
   --font-size: var(--bui-select-font-size, var(--bui-title-size-3));
   --padding: var(--bui-select-selector-container, 0 14px);
-  --option-container-padding: var(--bui-select-option-container-padding, 3px 0);
-  --option-container-margin-top: var(--bui-select-option-margin-top, 6px);
-  --option-padding: var(--bui-select-option-padding, 0 14px);
-  --option-margin: var(--bui-select-option-margin, 0 3px);
-  --option-height: var(--bui-select-option-height, 27px);
   position: relative;
   cursor: pointer;
   height: var(--height);
@@ -16,8 +11,8 @@
   border-radius: 5px;
   background-color: var(--bui-color-bg-view);
   font-family: var(--bui-font-family);
+  -webkit-tap-highlight-color: transparent;
 }
-.bui-select:active,
 .bui-select-active {
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
 }
@@ -32,6 +27,7 @@
   height: 0;
   border: 0;
   opacity: 0;
+  pointer-events: none;
 }
 .bui-select-placeholder {
   color: var(--bui-color-fg-disabled);
@@ -55,20 +51,32 @@
   top: 100%;
   left: 0;
   width: 100%;
-  z-index: var(--bui-z-index-dropdown);
-  margin-top: var(--option-container-margin-top);
+  font-size: var(--bui-select-font-size, var(--bui-title-size-3));
+  z-index: var(--bui-z-index-tooltip);
   border-radius: 3px;
   background-color: var(--bui-color-bg-view);
   padding: 2px;
   overflow: hidden;
 }
+.bui-select-option-container-top {
+  margin-top: -6px;
+}
+.bui-select-option-container-bottom {
+  margin-top: 6px;
+}
+.bui-select-option-container-hide {
+  pointer-events: none;
+}
 .bui-select-option-main {
   border-radius: 3px;
-  padding: var(--option-container-padding);
+  padding: var(--bui-select-option-container-padding, 3px 0);
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
   overflow: hidden;
 }
 .bui-select-option {
+  --option-padding: var(--bui-select-option-padding, 0 14px);
+  --option-margin: var(--bui-select-option-margin, 0 3px);
+  --option-height: var(--bui-select-option-height, 27px);
   display: flex;
   align-items: center;
   height: var(--option-height);

package/dist/Select/Select.js

@@ -67,8 +67,10 @@ var import_Fade = __toESM(require("../Fade"));
 var import_Slide = __toESM(require("../Slide"));
 var import_selectContext = __toESM(require("./selectContext"));
 var import_Backdrop = __toESM(require("../Backdrop"));
+var import_Portal = __toESM(require("../Portal"));
 var import_Select2 = require("./Select.css");
 const prefixCls = "bui-select";
+const defaultPlacement = "bottom";
 const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -83,6 +85,7 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     placeholder,
     icon,
     open,
+    scrollContainer,
     onChange,
     onClose,
     onOpen,
@@ -100,6 +103,7 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "placeholder",
     "icon",
     "open",
+    "scrollContainer",
     "onChange",
     "onClose",
     "onOpen",
@@ -110,19 +114,49 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     defaultValue,
     onChange
   });
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   const [renderValue, setRenderValue] = (0, import_react.useState)("");
-  const defaultIcon = isOpen ? /* @__PURE__ */ import_react.default.createElement(import_icons.CaretUpIcon, { className: `${prefixCls}-selector-icon`, htmlColor: "#9c9ca5" }) : /* @__PURE__ */ import_react.default.createElement(
-    import_icons.CaretDownIcon,
-    {
-      className: `${prefixCls}-selector-icon`,
-      htmlColor: "#9c9ca5"
+  const [placement, setPlacement] = (0, import_react.useState)(defaultPlacement);
+  const [optionStyle, setOptionStyle] = (0, import_react.useState)({});
+  const isOpen = open !== void 0 ? open : internalOpen;
+  const locatorRef = (0, import_react.useRef)(null);
+  const rootRef = (0, import_utils.useForkRef)(ref, locatorRef);
+  const ttId = (0, import_utils.useUniqueId)();
+  const dataId = `${prefixCls}-tt-${ttId}`;
+  const updateOptionStyle = (0, import_utils.throttle)(() => {
+    const curScrollRoot = scrollContainer();
+    if (!import_utils.isMini && curScrollRoot) {
+      const result = (0, import_utils.getStylesAndLocation)({
+        scrollRoot: curScrollRoot,
+        childrenRef: locatorRef,
+        arrowDirection: defaultPlacement,
+        arrowLocation: "none",
+        selector: `[data-id="${dataId}"]`,
+        offsetSpacing: 0
+      });
+      if (!result)
+        return;
+      const { styles, childrenStyle, newArrowDirection } = result;
+      setPlacement(newArrowDirection);
+      setOptionStyle(__spreadProps(__spreadValues({}, styles), { width: childrenStyle.width }));
     }
-  );
+  }, 100);
+  const changeOpen = (newOpen) => {
+    if (newOpen) {
+      updateOptionStyle();
+      setTimeout(() => {
+        setInternalOpen(newOpen);
+        onOpen == null ? void 0 : onOpen();
+      }, 100);
+    } else {
+      onClose == null ? void 0 : onClose();
+      setInternalOpen(newOpen);
+    }
+  };
   const handleSelectClick = (e) => {
     if (disabled)
       return;
-    setIsOpen(!isOpen);
+    changeOpen(!isOpen);
     if (typeof onClick === "function")
       onClick(e);
   };
@@ -133,28 +167,70 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     } else {
       onChange == null ? void 0 : onChange(e, { value: optionValue });
     }
-    setIsOpen(false);
+    changeOpen(false);
   };
-  const handleBackdropTouchStart = () => {
-    if (isOpen) {
-      setIsOpen(false);
-    }
+  const handleBackdropClick = () => {
+    changeOpen(false);
   };
   const selectContext = (0, import_react.useMemo)(
     () => ({ selectValue, setRenderValue, handleOptionClick }),
     [selectValue, onChange, setRenderValue]
   );
   (0, import_react.useEffect)(() => {
-    if (open !== void 0)
-      setIsOpen(open);
-  }, [open]);
-  (0, import_react.useEffect)(() => {
-    if (isOpen) {
-      onOpen == null ? void 0 : onOpen();
-    } else {
-      onClose == null ? void 0 : onClose();
+    if (!import_utils.isMini) {
+      window.addEventListener("resize", updateOptionStyle);
+      return () => {
+        window.removeEventListener("resize", updateOptionStyle);
+      };
     }
-  }, [isOpen]);
+  }, []);
+  const defaultIcon = isOpen ? /* @__PURE__ */ import_react.default.createElement(import_icons.CaretUpIcon, { className: `${prefixCls}-selector-icon`, htmlColor: "#9c9ca5" }) : /* @__PURE__ */ import_react.default.createElement(
+    import_icons.CaretDownIcon,
+    {
+      className: `${prefixCls}-selector-icon`,
+      htmlColor: "#9c9ca5"
+    }
+  );
+  const renderOptions = () => {
+    var _a2;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Fade.default,
+      {
+        in: isOpen,
+        timeout: {
+          enter: 150,
+          exit: 150
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(
+            `${prefixCls}-option-container`,
+            ...((_a2 = className == null ? void 0 : className.split(/\s+/)) == null ? void 0 : _a2.map((cls) => `${cls}-option-container`)) || [],
+            `${prefixCls}-option-container-${placement}`,
+            {
+              [`${prefixCls}-option-container-hide`]: !isOpen
+            }
+          ),
+          "data-id": dataId,
+          style: optionStyle
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_Slide.default,
+          {
+            in: isOpen,
+            direction: placement === "bottom" ? "down" : "up",
+            timeout: {
+              enter: 150,
+              exit: 150
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-option-main`) }, children)
+        )
+      )
+    );
+  };
   return /* @__PURE__ */ import_react.default.createElement(import_selectContext.default.Provider, { value: selectContext }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadProps(__spreadValues({
@@ -162,7 +238,7 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-active`]: isOpen
       }),
-      ref
+      ref: rootRef
     }, others), {
       onClick: handleSelectClick
     }),
@@ -179,34 +255,14 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
         })
       })
     ), icon || defaultIcon),
-    /* @__PURE__ */ import_react.default.createElement(
-      import_Fade.default,
-      {
-        in: isOpen,
-        timeout: {
-          enter: 150,
-          exit: 150
-        }
-      },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-option-container`) }, /* @__PURE__ */ import_react.default.createElement(
-        import_Slide.default,
-        {
-          in: isOpen,
-          timeout: {
-            enter: 150,
-            exit: 150
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-option-main`) }, children)
-      ))
-    )
-  ), /* @__PURE__ */ import_react.default.createElement(
+    import_utils.isMini && renderOptions()
+  ), !import_utils.isMini && /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ import_react.default.createElement(
     import_Backdrop.default,
     __spreadProps(__spreadValues({
       open: isOpen,
       invisible: true,
-      onTouchStart: handleBackdropTouchStart,
-      onClick: handleBackdropTouchStart
+      onTouchStart: handleBackdropClick,
+      onClick: handleBackdropClick
     }, BackdropProps), {
       className: (0, import_clsx.default)(`${prefixCls}-backdrop`, {
         [BackdropProps == null ? void 0 : BackdropProps.className]: BackdropProps == null ? void 0 : BackdropProps.className
@@ -216,6 +272,9 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
 });
 Select.displayName = "BuiSelect";
 Select.defaultProps = {
-  defaultValue: ""
+  defaultValue: "",
+  scrollContainer: () => {
+    return import_utils.isMini ? null : document.body;
+  }
 };
 var Select_default = Select;

package/dist/Select/Select.types.d.ts

@@ -76,6 +76,12 @@ export type SelectProps<D extends React.ElementType = 'div', P = {}> = OverrideP
          * 是否展开下拉框
          */
         open?: boolean;
+        /**
+         * 滚动容器
+         * 下拉框元素和children将会被append到scrollContainer中
+         * 默认是页面的根节点
+         */
+        scrollContainer?: () => Element | null;
         /**
          * 自定义选中后展示的内容
          */

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/Select/Select.css

@@ -3,11 +3,6 @@
   --mini-width: var(--bui-select-min-width, 100px);
   --font-size: var(--bui-select-font-size, var(--bui-title-size-3));
   --padding: var(--bui-select-selector-container, 0 14px);
-  --option-container-padding: var(--bui-select-option-container-padding, 3px 0);
-  --option-container-margin-top: var(--bui-select-option-margin-top, 6px);
-  --option-padding: var(--bui-select-option-padding, 0 14px);
-  --option-margin: var(--bui-select-option-margin, 0 3px);
-  --option-height: var(--bui-select-option-height, 27px);
   position: relative;
   cursor: pointer;
   height: var(--height);
@@ -16,8 +11,8 @@
   border-radius: 5px;
   background-color: var(--bui-color-bg-view);
   font-family: var(--bui-font-family);
+  -webkit-tap-highlight-color: transparent;
 }
-.bui-select:active,
 .bui-select-active {
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
 }
@@ -32,6 +27,7 @@
   height: 0;
   border: 0;
   opacity: 0;
+  pointer-events: none;
 }
 .bui-select-placeholder {
   color: var(--bui-color-fg-disabled);
@@ -55,20 +51,32 @@
   top: 100%;
   left: 0;
   width: 100%;
-  z-index: var(--bui-z-index-dropdown);
-  margin-top: var(--option-container-margin-top);
+  font-size: var(--bui-select-font-size, var(--bui-title-size-3));
+  z-index: var(--bui-z-index-tooltip);
   border-radius: 3px;
   background-color: var(--bui-color-bg-view);
   padding: 2px;
   overflow: hidden;
 }
+.bui-select-option-container-top {
+  margin-top: -6px;
+}
+.bui-select-option-container-bottom {
+  margin-top: 6px;
+}
+.bui-select-option-container-hide {
+  pointer-events: none;
+}
 .bui-select-option-main {
   border-radius: 3px;
-  padding: var(--option-container-padding);
+  padding: var(--bui-select-option-container-padding, 3px 0);
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
   overflow: hidden;
 }
 .bui-select-option {
+  --option-padding: var(--bui-select-option-padding, 0 14px);
+  --option-margin: var(--bui-select-option-margin, 0 3px);
+  --option-height: var(--bui-select-option-height, 27px);
   display: flex;
   align-items: center;
   height: var(--option-height);

package/es/Select/Select.js

@@ -30,15 +30,24 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { CaretDownIcon, CaretUpIcon } from "@bifrostui/icons";
-import { useValue } from "@bifrostui/utils";
+import {
+  getStylesAndLocation,
+  isMini,
+  throttle,
+  useForkRef,
+  useUniqueId,
+  useValue
+} from "@bifrostui/utils";
 import clsx from "clsx";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import Fade from "../Fade";
 import Slide from "../Slide";
 import BuiSelectContext from "./selectContext";
 import Backdrop from "../Backdrop";
+import Portal from "../Portal";
 import "./Select.css";
 const prefixCls = "bui-select";
+const defaultPlacement = "bottom";
 const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -53,6 +62,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     placeholder,
     icon,
     open,
+    scrollContainer,
     onChange,
     onClose,
     onOpen,
@@ -70,6 +80,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "placeholder",
     "icon",
     "open",
+    "scrollContainer",
     "onChange",
     "onClose",
     "onOpen",
@@ -80,19 +91,49 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     defaultValue,
     onChange
   });
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
   const [renderValue, setRenderValue] = useState("");
-  const defaultIcon = isOpen ? /* @__PURE__ */ React.createElement(CaretUpIcon, { className: `${prefixCls}-selector-icon`, htmlColor: "#9c9ca5" }) : /* @__PURE__ */ React.createElement(
-    CaretDownIcon,
-    {
-      className: `${prefixCls}-selector-icon`,
-      htmlColor: "#9c9ca5"
+  const [placement, setPlacement] = useState(defaultPlacement);
+  const [optionStyle, setOptionStyle] = useState({});
+  const isOpen = open !== void 0 ? open : internalOpen;
+  const locatorRef = useRef(null);
+  const rootRef = useForkRef(ref, locatorRef);
+  const ttId = useUniqueId();
+  const dataId = `${prefixCls}-tt-${ttId}`;
+  const updateOptionStyle = throttle(() => {
+    const curScrollRoot = scrollContainer();
+    if (!isMini && curScrollRoot) {
+      const result = getStylesAndLocation({
+        scrollRoot: curScrollRoot,
+        childrenRef: locatorRef,
+        arrowDirection: defaultPlacement,
+        arrowLocation: "none",
+        selector: `[data-id="${dataId}"]`,
+        offsetSpacing: 0
+      });
+      if (!result)
+        return;
+      const { styles, childrenStyle, newArrowDirection } = result;
+      setPlacement(newArrowDirection);
+      setOptionStyle(__spreadProps(__spreadValues({}, styles), { width: childrenStyle.width }));
     }
-  );
+  }, 100);
+  const changeOpen = (newOpen) => {
+    if (newOpen) {
+      updateOptionStyle();
+      setTimeout(() => {
+        setInternalOpen(newOpen);
+        onOpen == null ? void 0 : onOpen();
+      }, 100);
+    } else {
+      onClose == null ? void 0 : onClose();
+      setInternalOpen(newOpen);
+    }
+  };
   const handleSelectClick = (e) => {
     if (disabled)
       return;
-    setIsOpen(!isOpen);
+    changeOpen(!isOpen);
     if (typeof onClick === "function")
       onClick(e);
   };
@@ -103,28 +144,70 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     } else {
       onChange == null ? void 0 : onChange(e, { value: optionValue });
     }
-    setIsOpen(false);
+    changeOpen(false);
   };
-  const handleBackdropTouchStart = () => {
-    if (isOpen) {
-      setIsOpen(false);
-    }
+  const handleBackdropClick = () => {
+    changeOpen(false);
   };
   const selectContext = useMemo(
     () => ({ selectValue, setRenderValue, handleOptionClick }),
     [selectValue, onChange, setRenderValue]
   );
   useEffect(() => {
-    if (open !== void 0)
-      setIsOpen(open);
-  }, [open]);
-  useEffect(() => {
-    if (isOpen) {
-      onOpen == null ? void 0 : onOpen();
-    } else {
-      onClose == null ? void 0 : onClose();
+    if (!isMini) {
+      window.addEventListener("resize", updateOptionStyle);
+      return () => {
+        window.removeEventListener("resize", updateOptionStyle);
+      };
+    }
+  }, []);
+  const defaultIcon = isOpen ? /* @__PURE__ */ React.createElement(CaretUpIcon, { className: `${prefixCls}-selector-icon`, htmlColor: "#9c9ca5" }) : /* @__PURE__ */ React.createElement(
+    CaretDownIcon,
+    {
+      className: `${prefixCls}-selector-icon`,
+      htmlColor: "#9c9ca5"
     }
-  }, [isOpen]);
+  );
+  const renderOptions = () => {
+    var _a2;
+    return /* @__PURE__ */ React.createElement(
+      Fade,
+      {
+        in: isOpen,
+        timeout: {
+          enter: 150,
+          exit: 150
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(
+            `${prefixCls}-option-container`,
+            ...((_a2 = className == null ? void 0 : className.split(/\s+/)) == null ? void 0 : _a2.map((cls) => `${cls}-option-container`)) || [],
+            `${prefixCls}-option-container-${placement}`,
+            {
+              [`${prefixCls}-option-container-hide`]: !isOpen
+            }
+          ),
+          "data-id": dataId,
+          style: optionStyle
+        },
+        /* @__PURE__ */ React.createElement(
+          Slide,
+          {
+            in: isOpen,
+            direction: placement === "bottom" ? "down" : "up",
+            timeout: {
+              enter: 150,
+              exit: 150
+            }
+          },
+          /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-option-main`) }, children)
+        )
+      )
+    );
+  };
   return /* @__PURE__ */ React.createElement(BuiSelectContext.Provider, { value: selectContext }, /* @__PURE__ */ React.createElement(
     "div",
     __spreadProps(__spreadValues({
@@ -132,7 +215,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-active`]: isOpen
       }),
-      ref
+      ref: rootRef
     }, others), {
       onClick: handleSelectClick
     }),
@@ -149,34 +232,14 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
         })
       })
     ), icon || defaultIcon),
-    /* @__PURE__ */ React.createElement(
-      Fade,
-      {
-        in: isOpen,
-        timeout: {
-          enter: 150,
-          exit: 150
-        }
-      },
-      /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-option-container`) }, /* @__PURE__ */ React.createElement(
-        Slide,
-        {
-          in: isOpen,
-          timeout: {
-            enter: 150,
-            exit: 150
-          }
-        },
-        /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-option-main`) }, children)
-      ))
-    )
-  ), /* @__PURE__ */ React.createElement(
+    isMini && renderOptions()
+  ), !isMini && /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
     Backdrop,
     __spreadProps(__spreadValues({
       open: isOpen,
       invisible: true,
-      onTouchStart: handleBackdropTouchStart,
-      onClick: handleBackdropTouchStart
+      onTouchStart: handleBackdropClick,
+      onClick: handleBackdropClick
     }, BackdropProps), {
       className: clsx(`${prefixCls}-backdrop`, {
         [BackdropProps == null ? void 0 : BackdropProps.className]: BackdropProps == null ? void 0 : BackdropProps.className
@@ -186,7 +249,10 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
 });
 Select.displayName = "BuiSelect";
 Select.defaultProps = {
-  defaultValue: ""
+  defaultValue: "",
+  scrollContainer: () => {
+    return isMini ? null : document.body;
+  }
 };
 var Select_default = Select;
 export {

package/es/Select/Select.types.d.ts

@@ -76,6 +76,12 @@ export type SelectProps<D extends React.ElementType = 'div', P = {}> = OverrideP
          * 是否展开下拉框
          */
         open?: boolean;
+        /**
+         * 滚动容器
+         * 下拉框元素和children将会被append到scrollContainer中
+         * 默认是页面的根节点
+         */
+        scrollContainer?: () => Element | null;
         /**
          * 自定义选中后展示的内容
          */

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",
   "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",
+    "@bifrostui/styles": "1.4.3",
+    "@bifrostui/types": "1.4.3",
+    "@bifrostui/utils": "1.4.3"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",