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

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)
@@ -60,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_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",
-    onOpenChange,
     open,
-    hideArrow
+    hideArrow,
+    onOpenChange,
+    role = "tooltip",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    autoFocus = false,
+    closeOnEscape = false
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -84,110 +95,131 @@ const Popover = /* @__PURE__ */ import_react.default.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" } = (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 [tooltyles, setTooltyles] = (0, import_react.useState)({});
-  const ttId = (0, import_utils.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 } = (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 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);
-  }, [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 = (0, import_utils.throttle)(() => {
-    const {
-      direction: newParsedDirection,
-      location: newParsedLocation = "center"
-    } = (0, import_utils.parsePlacement)(placement);
-    const result = (0, import_utils.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);
   };
-  (0, import_react.useEffect)(() => {
-    bindEvent();
-    return () => {
-      unbindEvent();
-    };
-  }, []);
+  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, ref }, /* @__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
       }),
-      "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__ */ import_react.default.createElement(
       "div",

package/dist/Popover/Popover.types.d.ts

@@ -1,6 +1,18 @@
 import React from 'react';
 import { OverrideProps } from '@bifrostui/types';
-type triggerType = 'click' | 'hover';
+type triggerType = 'click' | 'hover' | 'none';
+export interface AnchorOrigin {
+    /**
+     * 垂直方向位置
+     * @default 'top'
+     */
+    vertical: 'top' | 'center' | 'bottom';
+    /**
+     * 水平方向位置
+     * @default 'center'
+     */
+    horizontal: 'left' | 'center' | 'right';
+}
 export type PopoverProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {
         /**
@@ -30,27 +42,52 @@ export type PopoverProps<D extends React.ElementType = 'div', P = {}> = Override
          */
         offsetSpacing?: number;
         /**
-         * 气泡框位置
-         * @default 'top'
+         * 气泡框相对于锚点的位置
+         * @default { vertical: 'top', horizontal: 'center' }
          */
-        placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+        anchorOrigin?: AnchorOrigin;
         /**
          * 触发行为
          * - click: 点击触发
          * - hover: hover触发
-         * - 或者是他们的数组
+         * - none: 不自动触发，完全通过 open 属性控制
+         * - 或者是 click 和 hover 的数组组合
          * @default 'click'
          */
-        trigger?: triggerType | triggerType[];
+        trigger?: triggerType | Exclude<triggerType, 'none'>[];
         /**
          * 点击事件回调方法
          * - event 触发事件
          * - data.open 浮层显隐状态
          * @returns
          */
-        onOpenChange?: (event: React.SyntheticEvent, data: {
+        onOpenChange?: (event: React.SyntheticEvent | Event, data: {
             open: boolean;
         }) => void;
+        /**
+         * 无障碍功能：Popover的角色
+         * @default 'tooltip'
+         */
+        role?: 'tooltip' | 'dialog' | 'menu' | 'listbox';
+        /**
+         * 无障碍功能：为Popover提供可访问的标签
+         */
+        'aria-label'?: string;
+        /**
+         * 无障碍功能：引用描述此Popover的元素ID
+         */
+        'aria-labelledby'?: string;
+        /**
+         * 无障碍功能：是否自动管理焦点
+         * 当为true时，Popover打开时会自动获取焦点，关闭时焦点返回到触发元素
+         * @default false
+         */
+        autoFocus?: boolean;
+        /**
+         * 无障碍功能：是否支持Escape键关闭
+         * @default false
+         */
+        closeOnEscape?: boolean;
     };
     defaultComponent: D;
 }, D>;

package/dist/Popover/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * 自定义 Popover 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicPopoverDemo: () => React.JSX.Element;
+export declare const placementPopoverDemo: () => React.JSX.Element;
+export declare const triggerPopoverDemo: () => React.JSX.Element;
+export declare const accessibilityPopoverDemo: () => React.JSX.Element;
+export declare const complexInteractionPopoverDemo: () => React.JSX.Element;
+export declare const complexContentPopoverDemo: () => React.JSX.Element;
+export declare const offsetPopoverDemo: () => React.JSX.Element;
+export declare const edgeCasePopoverDemo: () => React.JSX.Element;
+declare const _default: {
+    basicPopoverDemo: () => React.JSX.Element;
+    placementPopoverDemo: () => React.JSX.Element;
+    triggerPopoverDemo: () => React.JSX.Element;
+    accessibilityPopoverDemo: () => React.JSX.Element;
+    complexInteractionPopoverDemo: () => React.JSX.Element;
+    complexContentPopoverDemo: () => React.JSX.Element;
+    offsetPopoverDemo: () => React.JSX.Element;
+    edgeCasePopoverDemo: () => React.JSX.Element;
+};
+export default _default;

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.d.ts

@@ -0,0 +1,8 @@
+export { usePopoverState } from './usePopoverState';
+export { usePopoverPosition } from './usePopoverPosition';
+export { usePopoverA11y } from './usePopoverA11y';
+export { usePopoverEvents } from './usePopoverEvents';
+export type { UsePopoverStateProps, UsePopoverStateReturn, } from './usePopoverState';
+export type { UsePopoverPositionProps, UsePopoverPositionReturn, } from './usePopoverPosition';
+export type { UsePopoverA11yProps, UsePopoverA11yReturn, } from './usePopoverA11y';
+export type { UsePopoverEventsProps, UsePopoverEventsReturn, } from './usePopoverEvents';

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.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface UsePopoverA11yProps {
+    isOpen: boolean;
+    autoFocus: boolean;
+    closeOnEscape: boolean;
+    onClose: (event: React.SyntheticEvent | Event) => void;
+    tipRef: React.RefObject<HTMLDivElement>;
+    childrenRef: React.RefObject<Element>;
+}
+export interface UsePopoverA11yReturn {
+    popoverId: string;
+    handleKeyDown: (event: KeyboardEvent) => void;
+}
+export declare const usePopoverA11y: ({ isOpen, autoFocus, closeOnEscape, onClose, tipRef, childrenRef, }: UsePopoverA11yProps) => UsePopoverA11yReturn;

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
+});