@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Popover/Popover.js

@@ -1,6 +1,8 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -18,6 +20,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)
@@ -51,26 +54,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-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());
-  });
-};
 var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
@@ -80,22 +63,30 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_Portal = __toESM(require("../Portal"));
-var import_Popover = require("./Popover.css");
+var import_Backdrop = __toESM(require("../Backdrop"));
+var import_hooks = require("./hooks");
+var import_index = require("./index.css");
 const prefixCls = "bui-popover";
 const Popover = /* @__PURE__ */ import_react.default.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",
     open,
     hideArrow,
-    onOpenChange
+    onOpenChange,
+    role = "tooltip",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    autoFocus = false,
+    closeOnEscape = false
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -104,133 +95,131 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "content",
     "defaultOpen",
     "offsetSpacing",
-    "placement",
+    "anchorOrigin",
     "trigger",
     "open",
     "hideArrow",
-    "onOpenChange"
+    "onOpenChange",
+    "role",
+    "aria-label",
+    "aria-labelledby",
+    "autoFocus",
+    "closeOnEscape"
   ]);
-  const controlByUser = typeof open !== "undefined";
-  const { direction, location = "center" } = (0, import_utils.parsePlacement)(placement);
-  const childrenRef = (0, import_react.useRef)();
-  const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
-  const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
-  const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
-  const [toolStyles, setToolStyles] = (0, import_react.useState)({});
-  const tipRef = (0, import_react.useRef)(null);
+  const { isOpen, openStatus, controlByUser, changeOpenStatus } = (0, import_hooks.usePopoverState)({
+    defaultOpen,
+    open,
+    onOpenChange
+  });
+  const {
+    arrowDirection,
+    arrowLocation,
+    toolStyles,
+    tipRef,
+    childrenRef,
+    onMounted,
+    clearRef
+  } = (0, import_hooks.usePopoverPosition)({
+    anchorOrigin,
+    offsetSpacing,
+    isOpen
+  });
   const nodeRef = (0, import_utils.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 hidePopover = (event) => {
+  const handleHide = (event) => {
+    clearRef(false);
     changeOpenStatus(event, false);
   };
-  const showPopover = (event) => {
+  const handleShow = (event) => {
     changeOpenStatus(event, true);
   };
-  (0, import_react.useEffect)(() => {
-    if (!controlByUser)
-      return;
-    setOpenStatus(open);
-    clearRef(open);
-  }, [open]);
-  (0, import_react.useEffect)(() => {
-    if (!openStatus) {
-      setToolStyles({
-        visibility: "hidden"
-      });
+  const handleTriggerClick = (event) => {
+    event.stopPropagation();
+    const targetStatus = !openStatus;
+    if (targetStatus) {
+      changeOpenStatus(event, true);
+    } else {
+      clearRef(false);
+      changeOpenStatus(event, false);
     }
-  }, [openStatus]);
-  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 = (0, import_utils.throttle)(() => __async(void 0, null, function* () {
-    if (!tipRef.current)
-      return;
-    const {
-      direction: newParsedDirection,
-      location: newParsedLocation = "center"
-    } = (0, import_utils.parsePlacement)(placement);
-    const result = yield (0, import_utils.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);
-  (0, import_react.useEffect)(() => {
-    const bindEvent = () => {
-      if (!tipRef.current)
-        return;
-      if (!controlByUser) {
-        document.addEventListener("click", clickEventHandler);
-      }
-      if (!import_utils.isMini) {
-        window.addEventListener("resize", onRootElementMouted);
-      }
-    };
-    const unbindEvent = () => {
-      if (!controlByUser) {
-        document.removeEventListener("click", clickEventHandler);
-      }
-      if (!import_utils.isMini) {
-        window.removeEventListener("resize", onRootElementMouted);
-      }
-    };
-    bindEvent();
-    return () => {
-      unbindEvent();
-    };
-  }, [openStatus]);
+  const { popoverId, handleKeyDown } = (0, import_hooks.usePopoverA11y)({
+    isOpen,
+    autoFocus,
+    closeOnEscape,
+    onClose: handleHide,
+    tipRef,
+    childrenRef
+  });
+  const { triggerEventOption, backdropProps } = (0, import_hooks.usePopoverEvents)({
+    isOpen,
+    controlByUser,
+    trigger,
+    onShow: handleShow,
+    onHide: handleHide,
+    onTriggerClick: handleTriggerClick,
+    onMounted,
+    handleKeyDown,
+    tipRef,
+    childrenRef
+  });
   if (!title && !content)
     return null;
-  let triggerEventOption;
-  if (!controlByUser) {
-    triggerEventOption = (0, import_utils.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__ */ import_react.default.createElement(import_react.default.Fragment, null, open || openStatus ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted }, /* @__PURE__ */ import_react.default.createElement(
+  }, triggerEventOption), {
+    "aria-describedby": isOpen ? popoverId : void 0,
+    "aria-haspopup": getAriaHasPopup()
+  }), import_react.default.isValidElement(children) && (children.type === "button" || children.type === "a" || ((_b = children.props) == null ? void 0 : _b.role) === "button") && {
+    "aria-expanded": isOpen
+  });
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, isOpen ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onMounted }, backdropProps && /* @__PURE__ */ import_react.default.createElement(
+    import_Backdrop.default,
+    __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__ */ import_react.default.createElement(
     "div",
     __spreadValues({
       className: (0, import_clsx.default)(prefixCls, className, `popover-${arrowDirection}`, {
         "bui-popover-arrow-hide": hideArrow
       }),
       style: __spreadValues(__spreadValues({}, style), toolStyles),
-      ref: nodeRef
+      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__ */ import_react.default.createElement(
       "div",

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

@@ -0,0 +1,175 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  accessibilityPopoverDemo: () => accessibilityPopoverDemo,
+  basicPopoverDemo: () => basicPopoverDemo,
+  complexContentPopoverDemo: () => complexContentPopoverDemo,
+  complexInteractionPopoverDemo: () => complexInteractionPopoverDemo,
+  default: () => A11yDemos_default,
+  edgeCasePopoverDemo: () => edgeCasePopoverDemo,
+  offsetPopoverDemo: () => offsetPopoverDemo,
+  placementPopoverDemo: () => placementPopoverDemo,
+  triggerPopoverDemo: () => triggerPopoverDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Popover = __toESM(require("../../Popover"));
+const basicPopoverDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Popover.default,
+    {
+      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__ */ import_react.default.createElement("button", { type: "button" }, "\u57FA\u7840\u6C14\u6CE1")
+  ));
+};
+const placementPopoverDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Popover.default,
+    {
+      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__ */ import_react.default.createElement("button", { type: "button" }, "\u4F4D\u7F6E\u6C14\u6CE1")
+  ));
+};
+const triggerPopoverDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Popover.default,
+    {
+      title: "\u89E6\u53D1\u65B9\u5F0F",
+      content: "\u6D4B\u8BD5\u4E0D\u540C\u89E6\u53D1\u65B9\u5F0F",
+      trigger: ["click", "hover"],
+      role: "tooltip"
+    },
+    /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u89E6\u53D1\u65B9\u5F0F")
+  ));
+};
+const accessibilityPopoverDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Popover.default,
+    {
+      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__ */ import_react.default.createElement("button", { type: "button" }, "\u65E0\u969C\u788D\u6C14\u6CE1")
+  ));
+};
+const complexInteractionPopoverDemo = () => {
+  const ComplexInteractionPopoverDemo = () => {
+    const [open, setOpen] = import_react.default.useState(false);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("button", { type: "button", onClick: () => setOpen(!open) }, open ? "\u5173\u95ED\u6C14\u6CE1" : "\u6253\u5F00\u6C14\u6CE1"), /* @__PURE__ */ import_react.default.createElement(
+      import_Popover.default,
+      {
+        title: "\u590D\u6742\u4EA4\u4E92",
+        content: /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("p", null, "\u8FD9\u662F\u4E00\u4E2A\u590D\u6742\u4EA4\u4E92\u7684\u6C14\u6CE1"), /* @__PURE__ */ import_react.default.createElement("button", { type: "button", onClick: () => setOpen(false) }, "\u5173\u95ED")),
+        open,
+        trigger: "none",
+        role: "dialog",
+        onOpenChange: (e, data) => {
+          setOpen(data.open);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", null, "\u590D\u6742\u4EA4\u4E92\u76EE\u6807")
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(ComplexInteractionPopoverDemo, null);
+};
+const complexContentPopoverDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Popover.default,
+    {
+      title: "\u590D\u6742\u5185\u5BB9",
+      content: /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("p", null, "\u5305\u542B\u591A\u79CD\u5143\u7D20\u7684\u590D\u6742\u5185\u5BB9\uFF1A"), /* @__PURE__ */ import_react.default.createElement("input", { placeholder: "\u8F93\u5165\u6846" }), /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement("a", { href: "#test" }, "\u94FE\u63A5")),
+      defaultOpen: true,
+      role: "dialog",
+      "aria-label": "\u590D\u6742\u5185\u5BB9\u5BF9\u8BDD\u6846"
+    },
+    /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u590D\u6742\u5185\u5BB9")
+  ));
+};
+const offsetPopoverDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Popover.default,
+    {
+      title: "\u504F\u79FB\u8BBE\u7F6E",
+      content: "\u6D4B\u8BD5\u504F\u79FB\u8DDD\u79BB\u8BBE\u7F6E",
+      defaultOpen: true,
+      offsetSpacing: 20,
+      role: "tooltip"
+    },
+    /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u504F\u79FB\u6C14\u6CE1")
+  ));
+};
+const edgeCasePopoverDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Popover.default,
+    {
+      title: "",
+      content: "",
+      hideArrow: true,
+      defaultOpen: true,
+      role: "tooltip",
+      closeOnEscape: false
+    },
+    /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u8FB9\u754C\u60C5\u51B5")
+  ));
+};
+var A11yDemos_default = {
+  basicPopoverDemo,
+  placementPopoverDemo,
+  triggerPopoverDemo,
+  accessibilityPopoverDemo,
+  complexInteractionPopoverDemo,
+  complexContentPopoverDemo,
+  offsetPopoverDemo,
+  edgeCasePopoverDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  accessibilityPopoverDemo,
+  basicPopoverDemo,
+  complexContentPopoverDemo,
+  complexInteractionPopoverDemo,
+  edgeCasePopoverDemo,
+  offsetPopoverDemo,
+  placementPopoverDemo,
+  triggerPopoverDemo
+});

package/dist/Popover/hooks/index.js

@@ -0,0 +1,36 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hooks_exports = {};
+__export(hooks_exports, {
+  usePopoverA11y: () => import_usePopoverA11y.usePopoverA11y,
+  usePopoverEvents: () => import_usePopoverEvents.usePopoverEvents,
+  usePopoverPosition: () => import_usePopoverPosition.usePopoverPosition,
+  usePopoverState: () => import_usePopoverState.usePopoverState
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_usePopoverState = require("./usePopoverState");
+var import_usePopoverPosition = require("./usePopoverPosition");
+var import_usePopoverA11y = require("./usePopoverA11y");
+var import_usePopoverEvents = require("./usePopoverEvents");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePopoverA11y,
+  usePopoverEvents,
+  usePopoverPosition,
+  usePopoverState
+});

package/dist/Popover/hooks/usePopoverA11y.js

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePopoverA11y_exports = {};
+__export(usePopoverA11y_exports, {
+  usePopoverA11y: () => usePopoverA11y
+});
+module.exports = __toCommonJS(usePopoverA11y_exports);
+var import_react = require("react");
+var import_utils = require("@bifrostui/utils");
+const usePopoverA11y = ({
+  isOpen,
+  autoFocus,
+  closeOnEscape,
+  onClose,
+  tipRef,
+  childrenRef
+}) => {
+  const popoverId = (0, import_utils.useUniqueId)();
+  const handleKeyDown = (0, import_react.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]
+  );
+  (0, import_react.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
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePopoverA11y
+});