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

package/es/TextArea/TextArea.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import { isMini, useForkRef, useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
@@ -169,9 +170,9 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
         focus: autoFocus
       });
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         className: clsx(
           prefixCls,
           {
@@ -180,40 +181,43 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
           className
         ),
         ref
-      }, others),
-      /* @__PURE__ */ React.createElement(
-        "textarea",
-        __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-          ref: handleInputRef
-        }, nativeProps), {
-          name,
-          value: textAreaValue,
-          placeholder,
-          disabled,
-          rows
-        }), textareaProps), {
-          onChange: (e) => {
-            var _a2;
-            triggerChange(e, e.target.value);
-            (_a2 = textareaProps == null ? void 0 : textareaProps.onChange) == null ? void 0 : _a2.call(textareaProps, e);
-          },
-          onInput: (e) => {
-            var _a2;
-            if (showCount) {
-              const remaining = maxLength - e.target.value.length;
-              setAriaDescription(
-                `${textareaText.remaining} ${remaining} ${textareaText.characters}`
-              );
-            }
-            if (isMini) {
-              triggerChange(e, e.target.value);
-            }
-            (_a2 = textareaProps == null ? void 0 : textareaProps.onInput) == null ? void 0 : _a2.call(textareaProps, e);
-          },
-          className: clsx(`${prefixCls}-content`, textareaProps == null ? void 0 : textareaProps.className)
-        })
-      ),
-      showCount && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-count` }, maxLength === void 0 ? textAreaValue.length : `${textAreaValue.length}/${maxLength}`)
+      }, others), {
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+              ref: handleInputRef
+            }, nativeProps), {
+              name,
+              value: textAreaValue,
+              placeholder,
+              disabled,
+              rows
+            }), textareaProps), {
+              onChange: (e) => {
+                var _a2;
+                triggerChange(e, e.target.value);
+                (_a2 = textareaProps == null ? void 0 : textareaProps.onChange) == null ? void 0 : _a2.call(textareaProps, e);
+              },
+              onInput: (e) => {
+                var _a2;
+                if (showCount) {
+                  const remaining = maxLength - e.target.value.length;
+                  setAriaDescription(
+                    `${textareaText.remaining} ${remaining} ${textareaText.characters}`
+                  );
+                }
+                if (isMini) {
+                  triggerChange(e, e.target.value);
+                }
+                (_a2 = textareaProps == null ? void 0 : textareaProps.onInput) == null ? void 0 : _a2.call(textareaProps, e);
+              },
+              className: clsx(`${prefixCls}-content`, textareaProps == null ? void 0 : textareaProps.className)
+            })
+          ),
+          showCount && /* @__PURE__ */ jsx("div", { className: `${prefixCls}-count`, children: maxLength === void 0 ? textAreaValue.length : `${textAreaValue.length}/${maxLength}` })
+        ]
+      })
     );
   }
 );

package/es/TextArea/__tests__/fixtures/A11yDemos.d.ts

@@ -1,19 +1,18 @@
-import * as React from 'react';
 /**
  * 自定义 TextArea 组件 Demo 集合
  * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
  * 文件名必须是 customDemoComponent.tsx（固定约定）
  */
-export declare const basicTextAreaDemo: () => React.JSX.Element;
-export declare const ariaLabelTextAreaDemo: () => React.JSX.Element;
-export declare const requiredAndReadonlyTextAreaDemo: () => React.JSX.Element;
-export declare const showCountTextAreaDemo: () => React.JSX.Element;
-export declare const autoFocusTextAreaDemo: () => React.JSX.Element;
+export declare const basicTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const ariaLabelTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const requiredAndReadonlyTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const showCountTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const autoFocusTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
 declare const _default: {
-    basicTextAreaDemo: () => React.JSX.Element;
-    ariaLabelTextAreaDemo: () => React.JSX.Element;
-    requiredAndReadonlyTextAreaDemo: () => React.JSX.Element;
-    showCountTextAreaDemo: () => React.JSX.Element;
-    autoFocusTextAreaDemo: () => React.JSX.Element;
+    basicTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
+    ariaLabelTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
+    requiredAndReadonlyTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
+    showCountTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
+    autoFocusTextAreaDemo: () => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/es/TextArea/__tests__/fixtures/A11yDemos.js

@@ -1,23 +1,26 @@
-import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import TextArea from "../../TextArea";
 const basicTextAreaDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TextArea, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" }));
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(TextArea, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" }) });
 };
 const ariaLabelTextAreaDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TextArea, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", "aria-label": "\u7528\u6237\u8BC4\u8BBA\u8F93\u5165\u6846" }));
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(TextArea, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", "aria-label": "\u7528\u6237\u8BC4\u8BBA\u8F93\u5165\u6846" }) });
 };
 const requiredAndReadonlyTextAreaDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TextArea, { placeholder: "\u5FC5\u586B\u9879", "aria-required": true }), /* @__PURE__ */ React.createElement(
-    TextArea,
-    {
-      placeholder: "\u53EA\u8BFB\u9879",
-      "aria-readonly": true,
-      defaultValue: "\u8FD9\u662F\u53EA\u8BFB\u5185\u5BB9"
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(TextArea, { placeholder: "\u5FC5\u586B\u9879", "aria-required": true }),
+    /* @__PURE__ */ jsx(
+      TextArea,
+      {
+        placeholder: "\u53EA\u8BFB\u9879",
+        "aria-readonly": true,
+        defaultValue: "\u8FD9\u662F\u53EA\u8BFB\u5185\u5BB9"
+      }
+    )
+  ] });
 };
 const showCountTextAreaDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     TextArea,
     {
       placeholder: "\u6700\u591A\u8F93\u516550\u4E2A\u5B57",
@@ -25,17 +28,17 @@ const showCountTextAreaDemo = () => {
       showCount: true,
       "aria-label": "\u5E26\u5B57\u6570\u7EDF\u8BA1\u7684\u8F93\u5165\u6846"
     }
-  ));
+  ) });
 };
 const autoFocusTextAreaDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     TextArea,
     {
       placeholder: "\u81EA\u52A8\u805A\u7126",
       autoFocus: true,
       "aria-label": "\u81EA\u52A8\u805A\u7126\u7684\u8F93\u5165\u6846"
     }
-  ));
+  ) });
 };
 var A11yDemos_default = {
   basicTextAreaDemo,

package/es/ThemeProvider/ThemeProvider.d.ts

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

package/es/ThemeProvider/ThemeProvider.js

@@ -1,3 +1,4 @@
+import { jsx } from "react/jsx-runtime";
 import React, { useMemo, useEffect } from "react";
 import { useUniqueId } from "@bifrostui/utils";
 import { ThemeContext } from "./hooks";
@@ -24,7 +25,7 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
     let childrenNode = children;
     if (!isRoot && React.isValidElement(children)) {
       childrenNode = React.cloneElement(children, {
-        className: `${containerId} ${((_a = children == null ? void 0 : children.props) == null ? void 0 : _a.className) || ""}`.trim()
+        className: `${containerId} ${((_a = children.props) == null ? void 0 : _a.className) || ""}`.trim()
       });
     }
     useEffect(() => {
@@ -49,7 +50,7 @@ const ThemeProvider = /* @__PURE__ */ React.forwardRef(
       dmLightToken,
       token
     ]);
-    return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: theme }, childrenNode);
+    return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme, children: childrenNode });
   }
 );
 ThemeProvider.displayName = "BuiThemeProvider";

package/es/Toast/FunctionalToast.js

@@ -29,7 +29,8 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React, {
+import { Fragment, jsx } from "react/jsx-runtime";
+import {
   useCallback,
   useEffect,
   useState,
@@ -99,9 +100,9 @@ const Toast = (props) => {
       }
     };
     instance.close = close;
-    return /* @__PURE__ */ React.createElement(Portal, { container }, /* @__PURE__ */ React.createElement(ToastView, __spreadProps(__spreadValues({}, others), { open, onExited: onProxyExited })));
+    return /* @__PURE__ */ jsx(Portal, { container, children: /* @__PURE__ */ jsx(ToastView, __spreadProps(__spreadValues({}, others), { open, onExited: onProxyExited })) });
   };
-  render(/* @__PURE__ */ React.createElement(ToastComponent, null), rootWrapper);
+  render(/* @__PURE__ */ jsx(ToastComponent, {}), rootWrapper);
   return instance;
 };
 ["warning", "loading", "success", "fail"].forEach(
@@ -165,14 +166,14 @@ const UseToastComponent = (props) => {
     onEnd == null ? void 0 : onEnd();
     onExited == null ? void 0 : onExited();
   };
-  return /* @__PURE__ */ React.createElement(Portal, { container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(Portal, { container, children: /* @__PURE__ */ jsx(
     ToastView,
     __spreadProps(__spreadValues({}, others), {
       open,
       onExited: onProxyExited,
       ref: domRef
     })
-  ));
+  ) });
 };
 UseToastComponent.displayName = "UseToastComponent";
 const useToast = () => {
@@ -228,11 +229,9 @@ const useToast = () => {
         )
       );
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       UseToastComponent,
-      __spreadProps(__spreadValues({
-        key: element.key
-      }, element.props), {
+      __spreadProps(__spreadValues({}, element.props), {
         open: element.open,
         onSetOpenFalse,
         domRef: element.ref,
@@ -244,10 +243,11 @@ const useToast = () => {
             hookToastClosesRef.current.splice(index, 1);
           }
         }
-      })
+      }),
+      element.key
     );
   });
-  return [hookToast, /* @__PURE__ */ React.createElement(React.Fragment, null, renderedElements)];
+  return [hookToast, /* @__PURE__ */ jsx(Fragment, { children: renderedElements })];
 };
 Toast.useToast = useToast;
 var FunctionalToast_default = Toast;

package/es/Toast/Toast.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import clsx from "clsx";
 import {
@@ -66,28 +67,28 @@ const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "transitionDuration"
   ]);
   const iconMap = {
-    fail: /* @__PURE__ */ React.createElement(
+    fail: /* @__PURE__ */ jsx(
       ErrorCircleFilledBoldIcon,
       {
         htmlColor: "var(--bui-color-white)",
         "aria-hidden": "true"
       }
     ),
-    loading: /* @__PURE__ */ React.createElement(
+    loading: /* @__PURE__ */ jsx(
       AccessTimeCircleFilledBoldIcon,
       {
         htmlColor: "var(--bui-color-white)",
         "aria-hidden": "true"
       }
     ),
-    warning: /* @__PURE__ */ React.createElement(
+    warning: /* @__PURE__ */ jsx(
       AlertCircleFilledBoldIcon,
       {
         htmlColor: "var(--bui-color-white)",
         "aria-hidden": "true"
       }
     ),
-    success: /* @__PURE__ */ React.createElement(
+    success: /* @__PURE__ */ jsx(
       SuccessCircleFilledBoldIcon,
       {
         htmlColor: "var(--bui-color-white)",
@@ -102,36 +103,41 @@ const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
     role = "alert";
     ariaLive = "assertive";
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, disableClick && /* @__PURE__ */ React.createElement(Backdrop, { invisible: true, open: true }), /* @__PURE__ */ React.createElement(
-    Fade,
-    __spreadProps(__spreadValues({}, others), {
-      in: open,
-      appear,
-      timeout: transitionDuration,
-      unmountOnExit: true
-    }),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref,
-        className: clsx(
-          prefixCls,
-          `${prefixCls}-${position}`,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    disableClick && /* @__PURE__ */ jsx(Backdrop, { invisible: true, open: true }),
+    /* @__PURE__ */ jsx(
+      Fade,
+      __spreadProps(__spreadValues({}, others), {
+        in: open,
+        appear,
+        timeout: transitionDuration,
+        unmountOnExit: true,
+        children: /* @__PURE__ */ jsxs(
+          "div",
           {
-            [`${prefixCls}-icon`]: !!iconDom,
-            [`${prefixCls}-allow-click`]: !disableClick
-          },
-          className
-        ),
-        style,
-        role,
-        "aria-live": ariaLive,
-        "aria-atomic": "true"
-      },
-      iconDom,
-      message
+            ref,
+            className: clsx(
+              prefixCls,
+              `${prefixCls}-${position}`,
+              {
+                [`${prefixCls}-icon`]: !!iconDom,
+                [`${prefixCls}-allow-click`]: !disableClick
+              },
+              className
+            ),
+            style,
+            role,
+            "aria-live": ariaLive,
+            "aria-atomic": "true",
+            children: [
+              iconDom,
+              message
+            ]
+          }
+        )
+      })
     )
-  ));
+  ] });
 });
 ToastComponent.displayName = "BuiToast";
 var Toast_default = ToastComponent;

package/es/Toast/__tests__/fixtures/A11yDemos.d.ts

@@ -1,2 +1 @@
-import * as React from 'react';
-export declare const ToastDemo: () => React.JSX.Element;
+export declare const ToastDemo: () => import("react/jsx-runtime").JSX.Element;

package/es/Toast/__tests__/fixtures/A11yDemos.js

@@ -1,9 +1,9 @@
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { Button } from "../../../Button";
 import Toast from "../../FunctionalToast";
 const ToastDemo = () => {
   const [toast] = Toast.useToast();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Button,
     {
       onClick: () => {
@@ -11,9 +11,9 @@ const ToastDemo = () => {
           message: "Hello World",
           duration: 0
         });
-      }
-    },
-    "\u57FA\u7840 Toast"
+      },
+      children: "\u57FA\u7840 Toast"
+    }
   );
 };
 export {

package/es/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { TooltipProps } from './Tooltip.types';
 import './index.less';
-declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps<"div", {}>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default Tooltip;

package/es/Tooltip/Tooltip.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as React from "react";
 import Portal from "../Portal";
@@ -109,12 +110,18 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
   }));
   const childProps = getChildProps();
   const portalProps = getPortalProps();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen && title ? /* @__PURE__ */ React.createElement(Portal, __spreadValues({}, portalProps), /* @__PURE__ */ React.createElement("div", __spreadValues({}, tooltipProps), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: clsx("bui-tooltip-arrow", `location-${arrowLocation}`)
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "bui-tooltip-content" }, title))) : null, React.cloneElement(children, childProps));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isOpen && title ? /* @__PURE__ */ jsx(Portal, __spreadProps(__spreadValues({}, portalProps), { children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, tooltipProps), { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx("bui-tooltip-arrow", `location-${arrowLocation}`)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "bui-tooltip-content", children: title })
+    ] })) })) : null,
+    React.cloneElement(children, childProps)
+  ] });
 });
 Tooltip.displayName = "BuiTooltip";
 var Tooltip_default = Tooltip;

package/es/Tooltip/__tests__/fixtures/A11yDemos.d.ts

@@ -1,25 +1,24 @@
-import * as React from 'react';
 /**
  * 自定义 Tooltip 组件 Demo 集合
  * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
  * 文件名必须是 A11yDemos.tsx（固定约定）
  */
-export declare const basicTooltipDemo: () => React.JSX.Element;
-export declare const placementTooltipDemo: () => React.JSX.Element;
-export declare const triggerTooltipDemo: () => React.JSX.Element;
-export declare const accessibilityTooltipDemo: () => React.JSX.Element;
-export declare const complexInteractionTooltipDemo: () => React.JSX.Element;
-export declare const complexContentTooltipDemo: () => React.JSX.Element;
-export declare const offsetTooltipDemo: () => React.JSX.Element;
-export declare const edgeCaseTooltipDemo: () => React.JSX.Element;
+export declare const basicTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const placementTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const triggerTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const accessibilityTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const complexInteractionTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const complexContentTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const offsetTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const edgeCaseTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
 declare const _default: {
-    basicTooltipDemo: () => React.JSX.Element;
-    placementTooltipDemo: () => React.JSX.Element;
-    triggerTooltipDemo: () => React.JSX.Element;
-    accessibilityTooltipDemo: () => React.JSX.Element;
-    complexInteractionTooltipDemo: () => React.JSX.Element;
-    complexContentTooltipDemo: () => React.JSX.Element;
-    offsetTooltipDemo: () => React.JSX.Element;
-    edgeCaseTooltipDemo: () => React.JSX.Element;
+    basicTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+    placementTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+    triggerTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+    accessibilityTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+    complexInteractionTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+    complexContentTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+    offsetTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
+    edgeCaseTooltipDemo: () => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/es/Tooltip/__tests__/fixtures/A11yDemos.js

@@ -1,41 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import Tooltip from "../../Tooltip";
 const basicTooltipDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tooltip, { title: "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684\u63D0\u793A\u6587\u672C" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u57FA\u7840Tooltip")));
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { title: "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684\u63D0\u793A\u6587\u672C", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u57FA\u7840Tooltip" }) }) });
 };
 const placementTooltipDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", flexWrap: "wrap" } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "\u9876\u90E8\u63D0\u793A", placement: "top" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u9876\u90E8")), /* @__PURE__ */ React.createElement(Tooltip, { title: "\u53F3\u4FA7\u63D0\u793A", placement: "right" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u53F3\u4FA7")), /* @__PURE__ */ React.createElement(Tooltip, { title: "\u5E95\u90E8\u63D0\u793A", placement: "bottom" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u5E95\u90E8")), /* @__PURE__ */ React.createElement(Tooltip, { title: "\u5DE6\u4FA7\u63D0\u793A", placement: "left" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u5DE6\u4FA7")));
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px", flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u9876\u90E8\u63D0\u793A", placement: "top", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u9876\u90E8" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u53F3\u4FA7\u63D0\u793A", placement: "right", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u53F3\u4FA7" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u5E95\u90E8\u63D0\u793A", placement: "bottom", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u5E95\u90E8" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u5DE6\u4FA7\u63D0\u793A", placement: "left", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u5DE6\u4FA7" }) })
+  ] });
 };
 const triggerTooltipDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "\u70B9\u51FB\u89E6\u53D1\u7684\u63D0\u793A", trigger: "click" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u70B9\u51FB\u89E6\u53D1")), /* @__PURE__ */ React.createElement(Tooltip, { title: "\u60AC\u505C\u89E6\u53D1\u7684\u63D0\u793A", trigger: "hover" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u60AC\u505C\u89E6\u53D1")));
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px" }, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u70B9\u51FB\u89E6\u53D1\u7684\u63D0\u793A", trigger: "click", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u70B9\u51FB\u89E6\u53D1" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u60AC\u505C\u89E6\u53D1\u7684\u63D0\u793A", trigger: "hover", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u60AC\u505C\u89E6\u53D1" }) })
+  ] });
 };
 const accessibilityTooltipDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", flexDirection: "column" } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "\u81EA\u5B9A\u4E49\u89D2\u8272\u7684\u63D0\u793A", role: "status", "aria-label": "\u72B6\u6001\u63D0\u793A" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u72B6\u6001\u63D0\u793A")), /* @__PURE__ */ React.createElement(Tooltip, { title: "\u652F\u6301Escape\u952E\u5173\u95ED", closeOnEscape: true, trigger: "click" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "Escape\u952E\u5173\u95ED")));
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u81EA\u5B9A\u4E49\u89D2\u8272\u7684\u63D0\u793A", role: "status", "aria-label": "\u72B6\u6001\u63D0\u793A", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u72B6\u6001\u63D0\u793A" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u652F\u6301Escape\u952E\u5173\u95ED", closeOnEscape: true, trigger: "click", children: /* @__PURE__ */ jsx("button", { type: "button", children: "Escape\u952E\u5173\u95ED" }) })
+  ] });
 };
 const complexInteractionTooltipDemo = () => {
   const ComplexInteractionTooltipDemo = () => {
     const [open, setOpen] = React.useState(false);
-    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, /* @__PURE__ */ React.createElement(
-      Tooltip,
-      {
-        title: "\u53D7\u63A7\u6A21\u5F0F\u7684\u63D0\u793A",
-        open,
-        onOpenChange: (_, data) => setOpen(data.open)
-      },
-      /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u53D7\u63A7Tooltip")
-    ), /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setOpen(!open) }, "\u5916\u90E8\u63A7\u5236: ", open ? "\u5173\u95ED" : "\u6253\u5F00"));
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: "\u53D7\u63A7\u6A21\u5F0F\u7684\u63D0\u793A",
+          open,
+          onOpenChange: (_, data) => setOpen(data.open),
+          children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u53D7\u63A7Tooltip" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setOpen(!open), children: [
+        "\u5916\u90E8\u63A7\u5236: ",
+        open ? "\u5173\u95ED" : "\u6253\u5F00"
+      ] })
+    ] });
   };
-  return /* @__PURE__ */ React.createElement(ComplexInteractionTooltipDemo, null);
+  return /* @__PURE__ */ jsx(ComplexInteractionTooltipDemo, {});
 };
 const complexContentTooltipDemo = () => {
-  const ComplexContent = () => /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "200px" } }, /* @__PURE__ */ React.createElement("h4", { style: { margin: "0 0 8px 0", fontSize: "14px" } }, "\u590D\u6742\u5185\u5BB9"), /* @__PURE__ */ React.createElement("p", { style: { margin: "0 0 8px 0", fontSize: "12px" } }, "\u8FD9\u662F\u4E00\u4E2A\u5305\u542B\u591A\u79CD\u5143\u7D20\u7684\u590D\u6742\u63D0\u793A\u5185\u5BB9\u3002"), /* @__PURE__ */ React.createElement("ul", { style: { margin: 0, fontSize: "12px", paddingLeft: "16px" } }, /* @__PURE__ */ React.createElement("li", null, "\u9879\u76EE\u4E00"), /* @__PURE__ */ React.createElement("li", null, "\u9879\u76EE\u4E8C")));
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tooltip, { title: /* @__PURE__ */ React.createElement(ComplexContent, null) }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u590D\u6742\u5185\u5BB9Tooltip")));
+  const ComplexContent = () => /* @__PURE__ */ jsxs("div", { style: { maxWidth: "200px" }, children: [
+    /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 8px 0", fontSize: "14px" }, children: "\u590D\u6742\u5185\u5BB9" }),
+    /* @__PURE__ */ jsx("p", { style: { margin: "0 0 8px 0", fontSize: "12px" }, children: "\u8FD9\u662F\u4E00\u4E2A\u5305\u542B\u591A\u79CD\u5143\u7D20\u7684\u590D\u6742\u63D0\u793A\u5185\u5BB9\u3002" }),
+    /* @__PURE__ */ jsxs("ul", { style: { margin: 0, fontSize: "12px", paddingLeft: "16px" }, children: [
+      /* @__PURE__ */ jsx("li", { children: "\u9879\u76EE\u4E00" }),
+      /* @__PURE__ */ jsx("li", { children: "\u9879\u76EE\u4E8C" })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(ComplexContent, {}), children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u590D\u6742\u5185\u5BB9Tooltip" }) }) });
 };
 const offsetTooltipDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "\u65E0\u504F\u79FB", offset: 0 }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u65E0\u504F\u79FB")), /* @__PURE__ */ React.createElement(Tooltip, { title: "\u504F\u79FB10px", offset: 10 }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u504F\u79FB10px")), /* @__PURE__ */ React.createElement(Tooltip, { title: "\u504F\u79FB20px", offset: 20 }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u504F\u79FB20px")));
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px" }, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u65E0\u504F\u79FB", offset: 0, children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u65E0\u504F\u79FB" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u504F\u79FB10px", offset: 10, children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u504F\u79FB10px" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u504F\u79FB20px", offset: 20, children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u504F\u79FB20px" }) })
+  ] });
 };
 const edgeCaseTooltipDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", flexDirection: "column" } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u7A7A\u5185\u5BB9")), /* @__PURE__ */ React.createElement(Tooltip, { title: "\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u7684\u63D0\u793A\u6587\u672C\u5185\u5BB9" }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u957F\u6587\u672C")), /* @__PURE__ */ React.createElement(Tooltip, { title: `\u7279\u6B8A\u5B57\u7B26 !@#$%^&*()_+-=[]{}|;':",./` }, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u7279\u6B8A\u5B57\u7B26")));
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "10px", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u7A7A\u5185\u5BB9" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u7684\u63D0\u793A\u6587\u672C\u5185\u5BB9", children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u957F\u6587\u672C" }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: `\u7279\u6B8A\u5B57\u7B26 !@#$%^&*()_+-=[]{}|;':",./`, children: /* @__PURE__ */ jsx("button", { type: "button", children: "\u7279\u6B8A\u5B57\u7B26" }) })
+  ] });
 };
 var A11yDemos_default = {
   basicTooltipDemo,

package/es/Tooltip/useTooltip.js

@@ -62,7 +62,7 @@ function useTooltip(parameters) {
   } = parameters;
   const controlByUser = typeof open !== "undefined";
   const { direction, location = "center" } = parsePlacement(placement);
-  const childrenRef = useRef();
+  const childrenRef = useRef(null);
   const [openStatus, setOpenStatus] = useState(defaultOpen);
   const [arrowDirection, setArrowDirection] = useState(direction);
   const [arrowLocation, setArrowLocation] = useState(location);