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

package/es/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/es/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/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.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/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.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/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.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { PopoverProps } from '../Popover.types';
+type TriggerType = PopoverProps['trigger'];
+export interface UsePopoverEventsProps {
+    isOpen: boolean;
+    controlByUser: boolean;
+    trigger: TriggerType;
+    onShow: (event: React.SyntheticEvent | Event) => void;
+    onHide: (event: React.SyntheticEvent | Event) => void;
+    onTriggerClick: (event: React.SyntheticEvent | Event) => void;
+    onMounted: () => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    tipRef: React.RefObject<HTMLDivElement>;
+    childrenRef: React.RefObject<Element>;
+}
+export interface UsePopoverEventsReturn {
+    triggerEventOption?: Record<string, unknown>;
+    backdropProps?: Record<string, unknown>;
+}
+export declare const usePopoverEvents: ({ isOpen, controlByUser, trigger, onShow, onHide, onTriggerClick, onMounted, handleKeyDown, tipRef, childrenRef, }: UsePopoverEventsProps) => UsePopoverEventsReturn;
+export {};

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

package/es/Popover/hooks/usePopoverPosition.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AnchorOrigin } from '../Popover.types';
+export interface UsePopoverPositionProps {
+    anchorOrigin: AnchorOrigin;
+    offsetSpacing: number;
+    isOpen: boolean;
+}
+export interface UsePopoverPositionReturn {
+    arrowDirection: string;
+    arrowLocation: string;
+    toolStyles: React.CSSProperties;
+    tipRef: React.RefObject<HTMLDivElement>;
+    childrenRef: React.RefObject<Element>;
+    onMounted: () => void;
+    clearRef: (status: boolean) => void;
+}
+export declare const usePopoverPosition: ({ anchorOrigin, offsetSpacing, isOpen, }: UsePopoverPositionProps) => UsePopoverPositionReturn;

package/es/Popover/hooks/usePopoverPosition.js

@@ -0,0 +1,105 @@
+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 { useState, useEffect, useRef } from "react";
+import {
+  getStylesAndLocation,
+  parsePlacement,
+  throttle
+} from "@bifrostui/utils";
+const anchorOriginToPlacement = (anchorOrigin) => {
+  const { vertical, horizontal } = anchorOrigin;
+  if (vertical === "center" && horizontal === "center") {
+    return "top";
+  }
+  if (horizontal === "center") {
+    return vertical;
+  }
+  const horizontalMap = {
+    left: "Left",
+    right: "Right"
+  };
+  if (vertical === "center") {
+    return horizontal;
+  }
+  return `${vertical}${horizontalMap[horizontal]}`;
+};
+const usePopoverPosition = ({
+  anchorOrigin,
+  offsetSpacing,
+  isOpen
+}) => {
+  const placement = anchorOriginToPlacement(anchorOrigin);
+  const { direction, location = "center" } = parsePlacement(placement);
+  const childrenRef = useRef();
+  const [arrowDirection, setArrowDirection] = useState(direction);
+  const [arrowLocation, setArrowLocation] = useState(location);
+  const [toolStyles, setToolStyles] = useState({});
+  const tipRef = useRef(null);
+  const clearRef = (status) => {
+    if (status === false) {
+      tipRef.current = null;
+    }
+  };
+  const onMounted = 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);
+  }), 16);
+  useEffect(() => {
+    if (!isOpen) {
+      setToolStyles({
+        visibility: "hidden"
+      });
+    }
+  }, [isOpen]);
+  return {
+    arrowDirection,
+    arrowLocation,
+    toolStyles,
+    tipRef,
+    childrenRef,
+    onMounted,
+    clearRef
+  };
+};
+export {
+  usePopoverPosition
+};

package/es/Popover/hooks/usePopoverState.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface UsePopoverStateProps {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (event: React.SyntheticEvent | Event, data: {
+        open: boolean;
+    }) => void;
+}
+export interface UsePopoverStateReturn {
+    isOpen: boolean;
+    openStatus: boolean;
+    controlByUser: boolean;
+    changeOpenStatus: (event: React.SyntheticEvent | Event, status: boolean) => void;
+    setOpenStatus: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const usePopoverState: ({ defaultOpen, open, onOpenChange, }: UsePopoverStateProps) => UsePopoverStateReturn;

package/es/Popover/hooks/usePopoverState.js

@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+const usePopoverState = ({
+  defaultOpen = false,
+  open,
+  onOpenChange
+}) => {
+  const controlByUser = typeof open !== "undefined";
+  const [openStatus, setOpenStatus] = useState(defaultOpen);
+  const isOpen = controlByUser ? open : openStatus;
+  const changeOpenStatus = (event, status) => {
+    if (controlByUser)
+      return;
+    setOpenStatus(status);
+    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
+  };
+  useEffect(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open);
+  }, [open, controlByUser]);
+  return {
+    isOpen,
+    openStatus,
+    controlByUser,
+    changeOpenStatus,
+    setOpenStatus
+  };
+};
+export {
+  usePopoverState
+};