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

package/es/Popover/Popover.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,31 +30,38 @@ 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 { useForkRef } from "@bifrostui/utils";
 import Portal from "../Portal";
+import Backdrop from "../Backdrop";
+import {
+  usePopoverState,
+  usePopoverPosition,
+  usePopoverA11y,
+  usePopoverEvents
+} from "./hooks";
 import "./index.css";
 const prefixCls = "bui-popover";
 const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  var _b;
   const _a = props, {
     className,
     style,
     children,
     title,
     content,
-    defaultOpen,
+    defaultOpen = false,
     offsetSpacing = 0,
-    placement = "top",
+    anchorOrigin = { vertical: "top", horizontal: "center" },
     trigger = "click",
-    onOpenChange,
     open,
-    hideArrow
+    hideArrow,
+    onOpenChange,
+    role = "tooltip",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    autoFocus = false,
+    closeOnEscape = false
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -60,110 +70,131 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "content",
     "defaultOpen",
     "offsetSpacing",
-    "placement",
+    "anchorOrigin",
     "trigger",
-    "onOpenChange",
     "open",
-    "hideArrow"
+    "hideArrow",
+    "onOpenChange",
+    "role",
+    "aria-label",
+    "aria-labelledby",
+    "autoFocus",
+    "closeOnEscape"
   ]);
-  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 hidePopover = (event) => {
+  const { isOpen, openStatus, controlByUser, changeOpenStatus } = usePopoverState({
+    defaultOpen,
+    open,
+    onOpenChange
+  });
+  const {
+    arrowDirection,
+    arrowLocation,
+    toolStyles,
+    tipRef,
+    childrenRef,
+    onMounted,
+    clearRef
+  } = usePopoverPosition({
+    anchorOrigin,
+    offsetSpacing,
+    isOpen
+  });
+  const nodeRef = useForkRef(ref, tipRef);
+  const handleHide = (event) => {
+    clearRef(false);
     changeOpenStatus(event, false);
   };
-  const showPopover = (event) => {
+  const handleShow = (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;
-    hidePopover(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);
+  const handleTriggerClick = (event) => {
+    event.stopPropagation();
+    const targetStatus = !openStatus;
+    if (targetStatus) {
+      changeOpenStatus(event, true);
+    } else {
+      clearRef(false);
+      changeOpenStatus(event, false);
     }
-    window.removeEventListener("resize", onRootElementMouted);
   };
-  useEffect(() => {
-    bindEvent();
-    return () => {
-      unbindEvent();
-    };
-  }, []);
+  const { popoverId, handleKeyDown } = usePopoverA11y({
+    isOpen,
+    autoFocus,
+    closeOnEscape,
+    onClose: handleHide,
+    tipRef,
+    childrenRef
+  });
+  const { triggerEventOption, backdropProps } = usePopoverEvents({
+    isOpen,
+    controlByUser,
+    trigger,
+    onShow: handleShow,
+    onHide: handleHide,
+    onTriggerClick: handleTriggerClick,
+    onMounted,
+    handleKeyDown,
+    tipRef,
+    childrenRef
+  });
   if (!title && !content)
     return null;
-  let triggerEventOption;
-  if (!controlByUser) {
-    triggerEventOption = triggerEventTransform({
-      trigger,
-      click: triggerClick,
-      show: showPopover,
-      hide: hidePopover
-    });
-  }
-  const childrenOptions = __spreadValues({
+  const getAriaHasPopup = () => {
+    if (role === "menu")
+      return "menu";
+    if (role === "listbox")
+      return "listbox";
+    return "dialog";
+  };
+  const childrenOptions = __spreadValues(__spreadProps(__spreadValues({
     ref: childrenRef
-  }, triggerEventOption);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
+  }, triggerEventOption), {
+    "aria-describedby": isOpen ? popoverId : void 0,
+    "aria-haspopup": getAriaHasPopup()
+  }), React.isValidElement(children) && (children.type === "button" || children.type === "a" || ((_b = children.props) == null ? void 0 : _b.role) === "button") && {
+    "aria-expanded": isOpen
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(Portal, { onMounted }, backdropProps && /* @__PURE__ */ React.createElement(
+    Backdrop,
+    __spreadValues({
+      className: "bui-popover-backdrop",
+      style: {
+        zIndex: 999
+      },
+      open: isOpen,
+      invisible: true,
+      role: "button",
+      tabIndex: -1,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if ((backdropProps == null ? void 0 : backdropProps.onClick) && typeof backdropProps.onClick === "function") {
+            backdropProps.onClick(
+              e
+            );
+          }
+        }
+      }
+    }, backdropProps)
+  ), /* @__PURE__ */ React.createElement(
     "div",
     __spreadValues({
       className: clsx(prefixCls, className, `popover-${arrowDirection}`, {
         "bui-popover-arrow-hide": hideArrow
       }),
-      "data-id": `tt_${ttId}`,
-      style: __spreadValues(__spreadValues({}, style), tooltyles)
+      style: __spreadValues(__spreadValues({}, style), toolStyles),
+      ref: nodeRef,
+      id: popoverId,
+      role,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      tabIndex: autoFocus ? 0 : void 0,
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.stopPropagation();
+        }
+      }
     }, others),
     !hideArrow ? /* @__PURE__ */ React.createElement(
       "div",

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

@@ -0,0 +1,135 @@
+import React from "react";
+import Popover from "../../Popover";
+const basicPopoverDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      title: "\u57FA\u7840\u6C14\u6CE1",
+      content: "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Popover \u7EC4\u4EF6\u793A\u4F8B",
+      defaultOpen: true,
+      role: "tooltip",
+      "aria-label": "\u5E2E\u52A9\u4FE1\u606F"
+    },
+    /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u57FA\u7840\u6C14\u6CE1")
+  ));
+};
+const placementPopoverDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      title: "\u4F4D\u7F6E\u6D4B\u8BD5",
+      content: "\u6D4B\u8BD5\u4E0D\u540C\u4F4D\u7F6E\u7684\u6C14\u6CE1",
+      defaultOpen: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      role: "tooltip"
+    },
+    /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u4F4D\u7F6E\u6C14\u6CE1")
+  ));
+};
+const triggerPopoverDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      title: "\u89E6\u53D1\u65B9\u5F0F",
+      content: "\u6D4B\u8BD5\u4E0D\u540C\u89E6\u53D1\u65B9\u5F0F",
+      trigger: ["click", "hover"],
+      role: "tooltip"
+    },
+    /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u89E6\u53D1\u65B9\u5F0F")
+  ));
+};
+const accessibilityPopoverDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      title: "\u65E0\u969C\u788D\u6D4B\u8BD5",
+      content: "\u652F\u6301\u952E\u76D8\u5BFC\u822A\u548C\u5C4F\u5E55\u9605\u8BFB\u5668",
+      defaultOpen: true,
+      role: "dialog",
+      "aria-label": "\u64CD\u4F5C\u786E\u8BA4\u5BF9\u8BDD\u6846",
+      autoFocus: true
+    },
+    /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u65E0\u969C\u788D\u6C14\u6CE1")
+  ));
+};
+const complexInteractionPopoverDemo = () => {
+  const ComplexInteractionPopoverDemo = () => {
+    const [open, setOpen] = React.useState(false);
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setOpen(!open) }, open ? "\u5173\u95ED\u6C14\u6CE1" : "\u6253\u5F00\u6C14\u6CE1"), /* @__PURE__ */ React.createElement(
+      Popover,
+      {
+        title: "\u590D\u6742\u4EA4\u4E92",
+        content: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", null, "\u8FD9\u662F\u4E00\u4E2A\u590D\u6742\u4EA4\u4E92\u7684\u6C14\u6CE1"), /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setOpen(false) }, "\u5173\u95ED")),
+        open,
+        trigger: "none",
+        role: "dialog",
+        onOpenChange: (e, data) => {
+          setOpen(data.open);
+        }
+      },
+      /* @__PURE__ */ React.createElement("span", null, "\u590D\u6742\u4EA4\u4E92\u76EE\u6807")
+    ));
+  };
+  return /* @__PURE__ */ React.createElement(ComplexInteractionPopoverDemo, null);
+};
+const complexContentPopoverDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      title: "\u590D\u6742\u5185\u5BB9",
+      content: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", null, "\u5305\u542B\u591A\u79CD\u5143\u7D20\u7684\u590D\u6742\u5185\u5BB9\uFF1A"), /* @__PURE__ */ React.createElement("input", { placeholder: "\u8F93\u5165\u6846" }), /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u6309\u94AE"), /* @__PURE__ */ React.createElement("a", { href: "#test" }, "\u94FE\u63A5")),
+      defaultOpen: true,
+      role: "dialog",
+      "aria-label": "\u590D\u6742\u5185\u5BB9\u5BF9\u8BDD\u6846"
+    },
+    /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u590D\u6742\u5185\u5BB9")
+  ));
+};
+const offsetPopoverDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      title: "\u504F\u79FB\u8BBE\u7F6E",
+      content: "\u6D4B\u8BD5\u504F\u79FB\u8DDD\u79BB\u8BBE\u7F6E",
+      defaultOpen: true,
+      offsetSpacing: 20,
+      role: "tooltip"
+    },
+    /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u504F\u79FB\u6C14\u6CE1")
+  ));
+};
+const edgeCasePopoverDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      title: "",
+      content: "",
+      hideArrow: true,
+      defaultOpen: true,
+      role: "tooltip",
+      closeOnEscape: false
+    },
+    /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u8FB9\u754C\u60C5\u51B5")
+  ));
+};
+var A11yDemos_default = {
+  basicPopoverDemo,
+  placementPopoverDemo,
+  triggerPopoverDemo,
+  accessibilityPopoverDemo,
+  complexInteractionPopoverDemo,
+  complexContentPopoverDemo,
+  offsetPopoverDemo,
+  edgeCasePopoverDemo
+};
+export {
+  accessibilityPopoverDemo,
+  basicPopoverDemo,
+  complexContentPopoverDemo,
+  complexInteractionPopoverDemo,
+  A11yDemos_default as default,
+  edgeCasePopoverDemo,
+  offsetPopoverDemo,
+  placementPopoverDemo,
+  triggerPopoverDemo
+};

package/es/Popover/hooks/index.js

@@ -0,0 +1,10 @@
+import { usePopoverState } from "./usePopoverState";
+import { usePopoverPosition } from "./usePopoverPosition";
+import { usePopoverA11y } from "./usePopoverA11y";
+import { usePopoverEvents } from "./usePopoverEvents";
+export {
+  usePopoverA11y,
+  usePopoverEvents,
+  usePopoverPosition,
+  usePopoverState
+};

package/es/Popover/hooks/usePopoverA11y.js

@@ -0,0 +1,43 @@
+import { useCallback, useEffect } from "react";
+import { useUniqueId } from "@bifrostui/utils";
+const usePopoverA11y = ({
+  isOpen,
+  autoFocus,
+  closeOnEscape,
+  onClose,
+  tipRef,
+  childrenRef
+}) => {
+  const popoverId = useUniqueId();
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (closeOnEscape && event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose(event);
+        if (childrenRef.current && "focus" in childrenRef.current) {
+          childrenRef.current.focus();
+        }
+      }
+    },
+    [closeOnEscape, isOpen, onClose, childrenRef]
+  );
+  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, tipRef]);
+  return {
+    popoverId,
+    handleKeyDown
+  };
+};
+export {
+  usePopoverA11y
+};

package/es/Popover/hooks/usePopoverEvents.js

@@ -0,0 +1,127 @@
+import { useEffect } from "react";
+import { isMini, triggerEventTransform } from "@bifrostui/utils";
+const getScrollParents = (element) => {
+  const scrollParents = [];
+  let parent = element.parentElement;
+  while (parent && parent !== document.body) {
+    const { overflow, overflowX, overflowY } = getComputedStyle(parent);
+    if (/auto|scroll|overlay|hidden/.test(overflow + overflowX + overflowY)) {
+      scrollParents.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+  return scrollParents;
+};
+const usePopoverEvents = ({
+  isOpen,
+  controlByUser,
+  trigger,
+  onShow,
+  onHide,
+  onTriggerClick,
+  onMounted,
+  handleKeyDown,
+  tipRef,
+  childrenRef
+}) => {
+  const clickEventHandler = (event) => {
+    if (trigger === "hover" || trigger === "none" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
+      return;
+    onHide(event);
+  };
+  useEffect(() => {
+    let scrollParents = [];
+    let resizeObserver = null;
+    const bindEvent = () => {
+      if (isOpen && !isMini) {
+        document.addEventListener("keydown", handleKeyDown);
+      }
+      if (!tipRef.current)
+        return;
+      if (!controlByUser && trigger !== "none" && trigger !== "hover" && !((trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover") && !isMini) {
+        document.addEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.addEventListener("resize", onMounted);
+        window.addEventListener("scroll", onMounted, true);
+        if (childrenRef.current) {
+          scrollParents = getScrollParents(childrenRef.current);
+          scrollParents.forEach((parent) => {
+            parent.addEventListener("scroll", onMounted);
+          });
+          if (isOpen && typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(() => {
+              setTimeout(() => {
+                onMounted();
+              }, 0);
+            });
+            resizeObserver.observe(childrenRef.current);
+            scrollParents.forEach((parent) => {
+              if (resizeObserver) {
+                resizeObserver.observe(parent);
+              }
+            });
+            resizeObserver.observe(document.body);
+          }
+        }
+      }
+    };
+    const unbindEvent = () => {
+      if (!isMini) {
+        document.removeEventListener("keydown", handleKeyDown);
+      }
+      if (!controlByUser && trigger !== "none" && trigger !== "hover" && !((trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover") && !isMini) {
+        document.removeEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.removeEventListener("resize", onMounted);
+        window.removeEventListener("scroll", onMounted, true);
+        scrollParents.forEach((parent) => {
+          parent.removeEventListener("scroll", onMounted);
+        });
+        if (resizeObserver) {
+          resizeObserver.disconnect();
+          resizeObserver = null;
+        }
+      }
+    };
+    bindEvent();
+    return () => {
+      unbindEvent();
+    };
+  }, [
+    isOpen,
+    handleKeyDown,
+    controlByUser,
+    trigger,
+    onHide,
+    onMounted,
+    tipRef,
+    childrenRef
+  ]);
+  let triggerEventOption;
+  if (!controlByUser && trigger !== "none") {
+    triggerEventOption = triggerEventTransform({
+      trigger,
+      click: onTriggerClick,
+      show: onShow,
+      hide: onHide
+    });
+  }
+  let backdropProps;
+  if (isMini && isOpen && !controlByUser && trigger !== "none" && trigger !== "hover" && !((trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")) {
+    backdropProps = {
+      onClick: (event) => {
+        event.stopPropagation();
+        onHide(event);
+      }
+    };
+  }
+  return {
+    triggerEventOption,
+    backdropProps
+  };
+};
+export {
+  usePopoverEvents
+};