@bifrostui/react 1.5.3 → 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)
@@ -26,38 +29,11 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-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 clsx from "clsx";
-import React, { useState, useRef, useEffect } from "react";
-import {
-  getStylesAndLocation,
-  triggerEventTransform,
-  parsePlacement,
-  throttle,
-  useForkRef,
-  isMini
-} from "@bifrostui/utils";
+import React from "react";
 import Portal from "../Portal";
-import "./Tooltip.css";
+import { useTooltip } from "./useTooltip";
+import "./index.css";
 const prefixCls = "bui-tooltip";
 const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
@@ -65,150 +41,80 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     style,
     children,
     title,
-    defaultOpen,
-    offsetSpacing = 0,
+    defaultOpen = false,
+    offset,
     placement = "top",
     trigger = "click",
     open,
-    onOpenChange
+    onOpenChange,
+    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"
+    "onOpenChange",
+    // 无障碍功能相关属性
+    "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 [toolStyles, setToolStyles] = useState({});
-  const tipRef = useRef(null);
-  const nodeRef = useForkRef(ref, tipRef);
-  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);
-  };
-  useEffect(() => {
-    if (!controlByUser)
-      return;
-    setOpenStatus(open);
-    clearRef(open);
-  }, [open]);
-  useEffect(() => {
-    if (!openStatus) {
-      setToolStyles({
-        visibility: "hidden"
-      });
-    }
-  }, [openStatus]);
-  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(() => __async(void 0, null, function* () {
-    if (!tipRef.current)
-      return;
-    const {
-      direction: newParsedDirection,
-      location: newParsedLocation = "center"
-    } = parsePlacement(placement);
-    const result = yield getStylesAndLocation({
-      childrenRef,
-      arrowDirection: newParsedDirection,
-      arrowLocation: newParsedLocation,
-      offsetSpacing,
-      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) {
-        document.addEventListener("click", clickEventHandler);
-      }
-      if (!isMini) {
-        window.addEventListener("resize", onRootElementMouted);
-      }
-    };
-    const unbindEvent = () => {
-      if (!controlByUser) {
-        document.removeEventListener("click", clickEventHandler);
-      }
-      if (!isMini) {
-        window.removeEventListener("resize", onRootElementMouted);
-      }
-    };
-    bindEvent();
-    return () => {
-      unbindEvent();
-    };
-  }, [openStatus]);
-  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 }, /* @__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), toolStyles),
-      ref: nodeRef
-    }, 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/index.css

@@ -0,0 +1,95 @@
+:root,
+page,
+xhs-page {
+  --bui-tooltip-arrow-size: 8PX;
+  --bui-tooltip-location-position: 8PX;
+  --bui-tooltip-max-width: 350px;
+  --bui-tooltip-content-min-width: 30px;
+  --bui-tooltip-content-min-height: 32px;
+  --bui-tooltip-content-padding: 6px 8px;
+}
+.bui-tooltip {
+  max-width: var(--bui-tooltip-max-width);
+  font-size: var(--bui-text-size-1);
+  position: absolute;
+  visibility: hidden;
+  z-index: var(--bui-z-index-tooltip);
+}
+.bui-tooltip .bui-tooltip-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.bui-tooltip .bui-tooltip-arrow.location-left {
+  left: var(--bui-tooltip-location-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-right {
+  right: var(--bui-tooltip-location-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-top {
+  top: var(--bui-tooltip-location-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-bottom {
+  bottom: var(--bui-tooltip-location-position);
+}
+.bui-tooltip.tooltip-top .location-center,
+.bui-tooltip.tooltip-bottom .location-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bui-tooltip.tooltip-left .location-center,
+.bui-tooltip.tooltip-right .location-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-tooltip.tooltip-top {
+  padding-bottom: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-top .bui-tooltip-arrow {
+  border-left: var(--bui-tooltip-arrow-size) solid transparent;
+  border-right: var(--bui-tooltip-arrow-size) solid transparent;
+  border-top: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  bottom: 0;
+}
+.bui-tooltip.tooltip-bottom {
+  padding-top: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-bottom .bui-tooltip-arrow {
+  border-left: var(--bui-tooltip-arrow-size) solid transparent;
+  border-right: var(--bui-tooltip-arrow-size) solid transparent;
+  border-bottom: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  top: 0;
+}
+.bui-tooltip.tooltip-left {
+  padding-right: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-left .bui-tooltip-arrow {
+  border-top: var(--bui-tooltip-arrow-size) solid transparent;
+  border-bottom: var(--bui-tooltip-arrow-size) solid transparent;
+  border-left: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  right: 0;
+}
+.bui-tooltip.tooltip-right {
+  padding-left: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-right .bui-tooltip-arrow {
+  border-top: var(--bui-tooltip-arrow-size) solid transparent;
+  border-bottom: var(--bui-tooltip-arrow-size) solid transparent;
+  border-right: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  left: 0;
+}
+.bui-tooltip .bui-tooltip-content {
+  min-width: var(--bui-tooltip-content-min-width);
+  min-height: var(--bui-tooltip-content-min-height);
+  padding: var(--bui-tooltip-content-padding);
+  color: var(--bui-color-white);
+  text-align: left;
+  text-decoration: none;
+  word-wrap: break-word;
+  background-color: var(--bui-color-bg-alpha-dark-7);
+  border-radius: var(--bui-shape-radius-poster);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}