@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/es/Tooltip/Tooltip.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -27,15 +30,9 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useState, useRef, useEffect } from "react";
-import {
-  getStylesAndLocation,
-  triggerEventTransform,
-  parsePlacement,
-  useUniqueId,
-  throttle
-} from "@bifrostui/utils";
+import React from "react";
 import Portal from "../Portal";
+import { useTooltip } from "./useTooltip";
 import "./index.css";
 const prefixCls = "bui-tooltip";
 const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
@@ -44,127 +41,80 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     style,
     children,
     title,
-    defaultOpen,
-    offsetSpacing = 0,
+    defaultOpen = false,
+    offset,
     placement = "top",
     trigger = "click",
+    open,
     onOpenChange,
-    open
+    role: role = "tooltip",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    autoFocus = false,
+    closeOnEscape = false,
+    "aria-hidden": ariaHidden = false
   } = _a, others = __objRest(_a, [
     "className",
     "style",
     "children",
     "title",
     "defaultOpen",
-    "offsetSpacing",
+    "offset",
     "placement",
     "trigger",
+    "open",
     "onOpenChange",
-    "open"
+    // 无障碍功能相关属性
+    "role",
+    "aria-label",
+    "aria-labelledby",
+    "autoFocus",
+    "closeOnEscape",
+    "aria-hidden"
   ]);
-  const controlByUser = typeof open !== "undefined";
-  const { direction, location = "center" } = parsePlacement(placement);
-  const childrenRef = useRef();
-  const [openStatus, setOpenStatus] = useState(defaultOpen);
-  const [arrowDirection, setArrowDirection] = useState(direction);
-  const [arrowLocation, setArrowLocation] = useState(location);
-  const [tooltyles, setTooltyles] = useState({});
-  const ttId = useUniqueId();
-  const changeOpenStatus = (event, status) => {
-    if (controlByUser)
-      return;
-    setOpenStatus(status);
-    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
-  };
-  const triggerClick = (event) => {
-    event.stopPropagation();
-    const targetStatus = !openStatus;
-    changeOpenStatus(event, targetStatus);
-  };
-  const hideTooltip = (event) => {
-    changeOpenStatus(event, false);
-  };
-  const showTooltip = (event) => {
-    changeOpenStatus(event, true);
-  };
-  useEffect(() => {
-    if (!controlByUser)
-      return;
-    setOpenStatus(open);
-  }, [open]);
-  const clickEventHandler = (event) => {
-    if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
-      return;
-    hideTooltip(event);
-  };
-  const onRootElementMouted = throttle(() => {
-    const {
-      direction: newParsedDirection,
-      location: newParsedLocation = "center"
-    } = parsePlacement(placement);
-    const result = getStylesAndLocation({
-      childrenRef,
-      arrowDirection: newParsedDirection,
-      arrowLocation: newParsedLocation,
-      offsetSpacing,
-      selector: `[data-id="tt_${ttId}"]`
-    });
-    if (!result)
-      return;
-    const { styles, newArrowDirection, newArrowLocation } = result;
-    if (newArrowDirection !== arrowDirection) {
-      setArrowDirection(newArrowDirection);
-    }
-    if (newArrowLocation !== arrowLocation) {
-      setArrowLocation(newArrowLocation);
-    }
-    setTooltyles(styles);
-  }, 100);
-  const bindEvent = () => {
-    if (!controlByUser) {
-      document.addEventListener("click", clickEventHandler);
-    }
-    window.addEventListener("resize", onRootElementMouted);
-  };
-  const unbindEvent = () => {
-    if (!controlByUser) {
-      document.removeEventListener("click", clickEventHandler);
-    }
-    window.removeEventListener("resize", onRootElementMouted);
-  };
-  useEffect(() => {
-    bindEvent();
-    return () => {
-      unbindEvent();
-    };
-  }, []);
-  let triggerEventOption;
-  if (!controlByUser) {
-    triggerEventOption = triggerEventTransform({
-      trigger,
-      click: triggerClick,
-      show: showTooltip,
-      hide: hideTooltip
-    });
+  const {
+    getTooltipProps,
+    getChildProps,
+    getPortalProps,
+    isOpen,
+    toolStyles,
+    arrowDirection,
+    arrowLocation
+  } = useTooltip({
+    title,
+    defaultOpen,
+    open,
+    offset,
+    placement,
+    trigger,
+    onOpenChange,
+    autoFocus,
+    closeOnEscape,
+    children,
+    rootRef: ref
+  });
+  if (!React.isValidElement(children)) {
+    console.warn(
+      "BUI Tooltip: children must be a valid React element that can accept a ref."
+    );
+    return children;
   }
-  const childrenOptions = __spreadValues({
-    ref: childrenRef
-  }, triggerEventOption);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
+  const tooltipProps = getTooltipProps(__spreadProps(__spreadValues({}, others), {
+    className: clsx(prefixCls, className, `tooltip-${arrowDirection}`),
+    style: __spreadValues(__spreadValues({}, style), toolStyles),
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-hidden": ariaHidden
+  }));
+  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",
-    __spreadValues({
-      className: clsx(prefixCls, className, `tooltip-${arrowDirection}`),
-      style: __spreadValues(__spreadValues({}, style), tooltyles),
-      "data-id": `tt_${ttId}`
-    }, others),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: clsx("bui-tooltip-arrow", `location-${arrowLocation}`)
-      }
-    ),
-    /* @__PURE__ */ React.createElement("div", { className: "bui-tooltip-content" }, title)
-  )) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
+    {
+      className: clsx("bui-tooltip-arrow", `location-${arrowLocation}`)
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "bui-tooltip-content" }, title))) : null, React.cloneElement(children, childProps));
 });
 Tooltip.displayName = "BuiTooltip";
 var Tooltip_default = Tooltip;

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

@@ -0,0 +1,60 @@
+import 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")));
+};
+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")));
+};
+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")));
+};
+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")));
+};
+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__ */ React.createElement(ComplexInteractionTooltipDemo, null);
+};
+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 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")));
+};
+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")));
+};
+var A11yDemos_default = {
+  basicTooltipDemo,
+  placementTooltipDemo,
+  triggerTooltipDemo,
+  accessibilityTooltipDemo,
+  complexInteractionTooltipDemo,
+  complexContentTooltipDemo,
+  offsetTooltipDemo,
+  edgeCaseTooltipDemo
+};
+export {
+  accessibilityTooltipDemo,
+  basicTooltipDemo,
+  complexContentTooltipDemo,
+  complexInteractionTooltipDemo,
+  A11yDemos_default as default,
+  edgeCaseTooltipDemo,
+  offsetTooltipDemo,
+  placementTooltipDemo,
+  triggerTooltipDemo
+};

package/es/Tooltip/useTooltip.js

@@ -0,0 +1,290 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import {
+  getStylesAndLocation,
+  triggerEventTransform,
+  parsePlacement,
+  throttle,
+  useForkRef,
+  useUniqueId,
+  isMini
+} from "@bifrostui/utils";
+function useTooltip(parameters) {
+  const {
+    defaultOpen = false,
+    open,
+    offset,
+    placement = "top",
+    trigger = "click",
+    onOpenChange,
+    autoFocus = false,
+    closeOnEscape = false,
+    children,
+    rootRef
+  } = parameters;
+  const controlByUser = typeof open !== "undefined";
+  const { direction, location = "center" } = parsePlacement(placement);
+  const childrenRef = useRef();
+  const [openStatus, setOpenStatus] = useState(defaultOpen);
+  const [arrowDirection, setArrowDirection] = useState(direction);
+  const [arrowLocation, setArrowLocation] = useState(location);
+  const [toolStyles, setToolStyles] = useState({});
+  const tipRef = useRef(null);
+  const tooltipId = useUniqueId();
+  useEffect(() => {
+    setArrowDirection(direction);
+    setArrowLocation(location);
+  }, [direction, location]);
+  const isOpen = open || openStatus;
+  const clearRef = (status) => {
+    if (status === false) {
+      tipRef.current = null;
+    }
+  };
+  const changeOpenStatus = (event, status) => {
+    if (controlByUser)
+      return;
+    clearRef(status);
+    setOpenStatus(status);
+    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
+  };
+  const triggerClick = (event) => {
+    event.stopPropagation();
+    const targetStatus = !openStatus;
+    changeOpenStatus(event, targetStatus);
+  };
+  const hideTooltip = (event) => {
+    changeOpenStatus(event, false);
+  };
+  const showTooltip = (event) => {
+    changeOpenStatus(event, true);
+  };
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (closeOnEscape && event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        hideTooltip(event);
+        if (childrenRef.current && "focus" in childrenRef.current) {
+          childrenRef.current.focus();
+        }
+      }
+    },
+    [closeOnEscape, isOpen, hideTooltip]
+  );
+  useEffect(() => {
+    if (isOpen && autoFocus && tipRef.current) {
+      const timer = setTimeout(() => {
+        if (tipRef.current && "focus" in tipRef.current) {
+          tipRef.current.focus();
+        }
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [isOpen, autoFocus]);
+  useEffect(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open != null ? open : false);
+    clearRef(open != null ? open : false);
+  }, [open, controlByUser]);
+  useEffect(() => {
+    if (!openStatus) {
+      setToolStyles({
+        visibility: "hidden"
+      });
+    }
+  }, [openStatus]);
+  const shouldListenGlobalClick = useCallback(() => {
+    if (typeof trigger === "string") {
+      return trigger === "click";
+    }
+    if (Array.isArray(trigger)) {
+      return trigger.includes("click");
+    }
+    return true;
+  }, [trigger]);
+  const clickEventHandler = useCallback(
+    (event) => {
+      if (!shouldListenGlobalClick()) {
+        return;
+      }
+      hideTooltip(event);
+    },
+    [shouldListenGlobalClick, hideTooltip]
+  );
+  const onMounted = throttle(() => __async(this, null, function* () {
+    if (!tipRef.current)
+      return;
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = "center"
+    } = parsePlacement(placement);
+    const result = yield getStylesAndLocation({
+      childrenRef,
+      arrowDirection: newParsedDirection,
+      arrowLocation: newParsedLocation,
+      offsetSpacing: offset || 0,
+      tipRef
+    });
+    if (!result)
+      return;
+    const { styles, newArrowDirection, newArrowLocation } = result;
+    if (newArrowDirection !== arrowDirection) {
+      setArrowDirection(newArrowDirection);
+    }
+    if (newArrowLocation !== arrowLocation) {
+      setArrowLocation(newArrowLocation);
+    }
+    setToolStyles(styles);
+  }), 100);
+  useEffect(() => {
+    const bindEvent = () => {
+      if (!openStatus)
+        return;
+      if (!controlByUser && shouldListenGlobalClick() && !isMini) {
+        document.addEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.addEventListener("resize", onMounted);
+      }
+      if (isOpen && !isMini) {
+        document.addEventListener("keydown", handleKeyDown);
+      }
+    };
+    const unbindEvent = () => {
+      if (!controlByUser && shouldListenGlobalClick() && !isMini) {
+        document.removeEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.removeEventListener("resize", onMounted);
+      }
+      if (!isMini) {
+        document.removeEventListener("keydown", handleKeyDown);
+      }
+    };
+    bindEvent();
+    return () => {
+      unbindEvent();
+    };
+  }, [
+    openStatus,
+    controlByUser,
+    shouldListenGlobalClick,
+    clickEventHandler,
+    onMounted,
+    isOpen,
+    handleKeyDown
+  ]);
+  const tooltipRef = useForkRef(tipRef, rootRef);
+  const getTooltipProps = useCallback(
+    (otherProps = {}) => {
+      return __spreadValues({
+        id: tooltipId,
+        ref: tooltipRef,
+        tabIndex: autoFocus ? -1 : void 0
+      }, otherProps);
+    },
+    [tooltipId, tooltipRef, autoFocus]
+  );
+  const getChildProps = useCallback(() => {
+    var _a;
+    let triggerEventOption = {};
+    if (!controlByUser) {
+      triggerEventOption = triggerEventTransform({
+        trigger,
+        click: triggerClick,
+        show: showTooltip,
+        hide: hideTooltip
+      });
+    }
+    const childProps = __spreadProps(__spreadValues({
+      ref: childrenRef
+    }, triggerEventOption), {
+      "aria-describedby": isOpen ? tooltipId : void 0
+    });
+    if (React.isValidElement(children)) {
+      const elementType = typeof children.type === "string" ? children.type : ((_a = children.type) == null ? void 0 : _a.displayName) || "";
+      const interactiveElements = [
+        "button",
+        "a",
+        "input",
+        "select",
+        "textarea"
+      ];
+      const childElementProps = children.props;
+      const isInteractive = interactiveElements.includes(elementType.toLowerCase()) || (childElementProps == null ? void 0 : childElementProps.role) === "button" || (childElementProps == null ? void 0 : childElementProps.role) === "menuitem" || (childElementProps == null ? void 0 : childElementProps.role) === "tab" || (childElementProps == null ? void 0 : childElementProps.tabIndex) !== void 0;
+      if (isInteractive) {
+        childProps["aria-expanded"] = isOpen;
+      }
+    }
+    return childProps;
+  }, [
+    controlByUser,
+    trigger,
+    triggerClick,
+    showTooltip,
+    hideTooltip,
+    isOpen,
+    tooltipId,
+    children
+  ]);
+  const getPortalProps = useCallback(() => {
+    return {
+      onMounted
+    };
+  }, [onMounted]);
+  return {
+    getTooltipProps,
+    getChildProps,
+    getPortalProps,
+    tooltipRef,
+    isOpen,
+    toolStyles,
+    arrowDirection,
+    arrowLocation,
+    tooltipId
+  };
+}
+export {
+  useTooltip
+};