@yamada-ui/popover 0.1.0

package/dist/index.js

@@ -0,0 +1,458 @@
+"use strict";
+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);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Popover: () => Popover,
+  PopoverAnchor: () => PopoverAnchor,
+  PopoverBody: () => PopoverBody,
+  PopoverCloseButton: () => PopoverCloseButton,
+  PopoverContent: () => PopoverContent,
+  PopoverFooter: () => PopoverFooter,
+  PopoverHeader: () => PopoverHeader,
+  PopoverTrigger: () => PopoverTrigger,
+  usePopover: () => usePopover
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/popover.tsx
+var import_core = require("@yamada-ui/core");
+var import_use_animation = require("@yamada-ui/use-animation");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_use_focus = require("@yamada-ui/use-focus");
+var import_use_popper = require("@yamada-ui/use-popper");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [PopoverProvider, usePopover] = (0, import_utils.createContext)({
+  strict: false,
+  name: "PopoverContext"
+});
+var Popover = (props) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Popover", props);
+  const {
+    children,
+    initialFocusRef,
+    restoreFocus = true,
+    autoFocus = true,
+    closeOnBlur = true,
+    closeOnEsc = true,
+    closeOnButton = true,
+    trigger = "click",
+    openDelay = 200,
+    closeDelay = 200,
+    isLazy,
+    lazyBehavior = "unmount",
+    animation = "scale",
+    duration,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  const [isOpen, onOpen, onClose, onToggle] = (0, import_use_disclosure.useDisclosure)(mergedProps);
+  const anchorRef = (0, import_react.useRef)(null);
+  const triggerRef = (0, import_react.useRef)(null);
+  const popoverRef = (0, import_react.useRef)(null);
+  const { present, onAnimationComplete } = (0, import_use_animation.useAnimationObserver)({ isOpen, ref: popoverRef });
+  const openTimeout = (0, import_react.useRef)(void 0);
+  const closeTimeout = (0, import_react.useRef)(void 0);
+  const isHoveringRef = (0, import_react.useRef)(false);
+  const hasBeenOpened = (0, import_react.useRef)(false);
+  if (isOpen)
+    hasBeenOpened.current = true;
+  const { referenceRef, getPopperProps, forceUpdate, transformOrigin } = (0, import_use_popper.usePopper)({
+    ...rest,
+    enabled: isOpen
+  });
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (openTimeout.current)
+        clearTimeout(openTimeout.current);
+      if (closeTimeout.current)
+        clearTimeout(closeTimeout.current);
+    };
+  }, []);
+  (0, import_use_focus.useFocusOnPointerDown)({
+    enabled: isOpen,
+    ref: triggerRef
+  });
+  (0, import_use_focus.useFocusOnHide)(popoverRef, {
+    focusRef: triggerRef,
+    visible: isOpen,
+    shouldFocus: restoreFocus && trigger === "click"
+  });
+  (0, import_use_focus.useFocusOnShow)(popoverRef, {
+    focusRef: initialFocusRef,
+    visible: isOpen,
+    shouldFocus: autoFocus && trigger === "click"
+  });
+  const shouldRenderChildren = (0, import_use_disclosure.useLazyDisclosure)({
+    wasSelected: hasBeenOpened.current,
+    enabled: isLazy,
+    mode: lazyBehavior,
+    isSelected: present
+  });
+  const getPopoverProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => {
+      const popoverProps = {
+        ...props2,
+        style: {
+          ...props2.style,
+          transformOrigin
+        },
+        ref: (0, import_utils.mergeRefs)(popoverRef, ref),
+        children: shouldRenderChildren ? props2.children : null,
+        tabIndex: -1,
+        onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, (event) => {
+          if (closeOnEsc && event.key === "Escape")
+            onClose();
+        }),
+        onBlur: (0, import_utils.handlerAll)(props2.onBlur, (event) => {
+          const relatedTarget = (0, import_utils.getEventRelatedTarget)(event);
+          const targetIsPopover = (0, import_utils.isContains)(popoverRef.current, relatedTarget);
+          const targetIsTrigger = (0, import_utils.isContains)(triggerRef.current, relatedTarget);
+          const isValidBlur = !targetIsPopover && !targetIsTrigger;
+          if (isOpen && closeOnBlur && isValidBlur)
+            onClose();
+        })
+      };
+      if (trigger === "hover") {
+        popoverProps.onMouseEnter = (0, import_utils.handlerAll)(props2.onMouseEnter, () => {
+          isHoveringRef.current = true;
+        });
+        popoverProps.onMouseLeave = (0, import_utils.handlerAll)(props2.onMouseLeave, (event) => {
+          if (event.nativeEvent.relatedTarget === null)
+            return;
+          isHoveringRef.current = false;
+          setTimeout(onClose, closeDelay);
+        });
+      }
+      return popoverProps;
+    },
+    [
+      closeDelay,
+      closeOnBlur,
+      closeOnEsc,
+      isOpen,
+      onClose,
+      shouldRenderChildren,
+      transformOrigin,
+      trigger
+    ]
+  );
+  const maybeReferenceRef = (0, import_react.useCallback)(
+    (node) => {
+      if (anchorRef.current == null)
+        referenceRef(node);
+    },
+    [referenceRef]
+  );
+  const getTriggerProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => {
+      const triggerProps = {
+        ...props2,
+        ref: (0, import_utils.mergeRefs)(triggerRef, ref, maybeReferenceRef)
+      };
+      if (trigger === "click")
+        triggerProps.onClick = (0, import_utils.handlerAll)(props2.onClick, onToggle);
+      if (trigger === "hover") {
+        triggerProps.onFocus = (0, import_utils.handlerAll)(props2.onFocus, () => {
+          if (openTimeout.current === void 0)
+            onOpen();
+        });
+        triggerProps.onBlur = (0, import_utils.handlerAll)(props2.onBlur, (event) => {
+          const relatedTarget = (0, import_utils.getEventRelatedTarget)(event);
+          const isValidBlur = !(0, import_utils.isContains)(popoverRef.current, relatedTarget);
+          if (isOpen && closeOnBlur && isValidBlur)
+            onClose();
+        });
+        triggerProps.onKeyDown = (0, import_utils.handlerAll)(props2.onKeyDown, (event) => {
+          if (event.key === "Escape")
+            onClose();
+        });
+        triggerProps.onMouseEnter = (0, import_utils.handlerAll)(props2.onMouseEnter, () => {
+          isHoveringRef.current = true;
+          openTimeout.current = window.setTimeout(onOpen, openDelay);
+        });
+        triggerProps.onMouseLeave = (0, import_utils.handlerAll)(props2.onMouseLeave, () => {
+          isHoveringRef.current = false;
+          if (openTimeout.current) {
+            clearTimeout(openTimeout.current);
+            openTimeout.current = void 0;
+          }
+          closeTimeout.current = window.setTimeout(() => {
+            if (isHoveringRef.current === false)
+              onClose();
+          }, closeDelay);
+        });
+      }
+      return triggerProps;
+    },
+    [
+      closeDelay,
+      closeOnBlur,
+      isOpen,
+      maybeReferenceRef,
+      onClose,
+      onOpen,
+      onToggle,
+      openDelay,
+      trigger
+    ]
+  );
+  const getAnchorProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => {
+      return {
+        ...props2,
+        ref: (0, import_utils.mergeRefs)(ref, anchorRef, referenceRef)
+      };
+    },
+    [anchorRef, referenceRef]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PopoverProvider,
+    {
+      value: {
+        isOpen,
+        onClose,
+        closeOnButton,
+        onAnimationComplete,
+        forceUpdate,
+        getTriggerProps,
+        getAnchorProps,
+        getPopperProps,
+        getPopoverProps,
+        animation,
+        duration,
+        styles
+      },
+      children: (0, import_utils.runIfFunc)(children, {
+        isOpen,
+        onClose,
+        forceUpdate
+      })
+    }
+  );
+};
+
+// src/popover-trigger.tsx
+var import_react2 = require("react");
+var PopoverTrigger = ({ children }) => {
+  const child = import_react2.Children.only(children);
+  const { getTriggerProps } = usePopover();
+  return (0, import_react2.cloneElement)(child, getTriggerProps(child.props, child.ref));
+};
+
+// src/popover-anchor.tsx
+var import_react3 = require("react");
+var PopoverAnchor = ({ children }) => {
+  const child = import_react3.Children.only(children);
+  const { getAnchorProps } = usePopover();
+  return (0, import_react3.cloneElement)(child, getAnchorProps(child.props, child.ref));
+};
+
+// src/popover-close-button.tsx
+var import_close_button = require("@yamada-ui/close-button");
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PopoverCloseButton = (0, import_core2.forwardRef)(
+  ({ onClick, ...rest }, ref) => {
+    const { styles, onClose } = usePopover();
+    const css = {
+      position: "absolute",
+      ...styles.closeButton
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_close_button.CloseButton,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-popover-close-button"),
+        __css: css,
+        onClick: (0, import_utils2.handlerAll)(onClick, (event) => {
+          event.stopPropagation();
+          onClose == null ? void 0 : onClose();
+        }),
+        size: "sm",
+        ...rest
+      }
+    );
+  }
+);
+
+// src/popover-content.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
+var import_transitions = require("@yamada-ui/transitions");
+var import_utils3 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var getPopoverContentProps = (animation = "scale", duration) => {
+  const custom = {
+    reverse: true,
+    duration,
+    enter: { visibility: "visible" },
+    transitionEnd: { exit: { visibility: "hidden" } }
+  };
+  switch (animation) {
+    case "scale":
+      return {
+        ...import_transitions.scaleFadeProps,
+        custom: { ...custom, scale: 0.95 }
+      };
+    case "top":
+      return {
+        ...import_transitions.slideFadeProps,
+        custom: { ...custom, offsetX: 0, offsetY: -16 }
+      };
+    case "right":
+      return {
+        ...import_transitions.slideFadeProps,
+        custom: { ...custom, offsetX: 16, offsetY: 0 }
+      };
+    case "left":
+      return {
+        ...import_transitions.slideFadeProps,
+        custom: { ...custom, offsetX: -16, offsetY: 0 }
+      };
+    case "bottom":
+      return {
+        ...import_transitions.slideFadeProps,
+        custom: { ...custom, offsetX: 0, offsetY: 16 }
+      };
+  }
+};
+var PopoverContent = (0, import_core3.forwardRef)(
+  ({ as = "section", className, children, w, width, minW, minWidth, zIndex, __css, ...rest }, ref) => {
+    var _a, _b, _c, _d;
+    const {
+      isOpen,
+      closeOnButton,
+      getPopperProps,
+      getPopoverProps,
+      onAnimationComplete,
+      animation,
+      duration,
+      styles
+    } = usePopover();
+    const validChildren = (0, import_utils3.getValidChildren)(children);
+    const [customPopoverCloseButton, ...cloneChildren] = (0, import_utils3.findChildren)(
+      validChildren,
+      PopoverCloseButton
+    );
+    const css = {
+      position: "relative",
+      w: "100%",
+      display: "flex",
+      flexDirection: "column",
+      outline: 0,
+      ...(0, import_utils3.omitObject)(__css != null ? __css : styles.container, ["zIndex"])
+    };
+    w = (_b = w != null ? w : width) != null ? _b : (_a = styles.container.w) != null ? _a : styles.container.width;
+    minW = (_d = minW != null ? minW : minWidth) != null ? _d : (_c = styles.container.minW) != null ? _c : styles.container.minWidth;
+    zIndex = zIndex != null ? zIndex : styles.container.zIndex;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.div,
+      {
+        ...getPopperProps({ style: { visibility: isOpen ? "visible" : "hidden" } }),
+        className: "ui-popover",
+        w,
+        minW,
+        zIndex,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_core3.ui.section,
+          {
+            as: import_motion.motion[as],
+            className: (0, import_utils3.cx)("ui-popover-content", className),
+            ...animation !== "none" ? getPopoverContentProps(animation, duration) : {},
+            ...getPopoverProps(rest, ref),
+            initial: "exit",
+            animate: isOpen ? "enter" : "exit",
+            exit: "exit",
+            onAnimationComplete: (0, import_utils3.funcAll)(onAnimationComplete, rest.onAnimationComplete),
+            __css: css,
+            children: [
+              customPopoverCloseButton != null ? customPopoverCloseButton : closeOnButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopoverCloseButton, {}) : null,
+              cloneChildren
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+// src/popover-header.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PopoverHeader = (0, import_core4.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = usePopover();
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      ...styles.header
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.header, { ref, className: (0, import_utils4.cx)("ui-popover-header", className), __css: css, ...rest });
+  }
+);
+
+// src/popover-body.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PopoverBody = (0, import_core5.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = usePopover();
+  const css = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    ...styles.body
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.main, { ref, className: (0, import_utils5.cx)("ui-popover-body", className), __css: css, ...rest });
+});
+
+// src/popover-footer.tsx
+var import_core6 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PopoverFooter = (0, import_core6.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = usePopover();
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      ...styles.footer
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ui.footer, { ref, className: (0, import_utils6.cx)("ui-popover-footer", className), __css: css, ...rest });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popover,
+  PopoverAnchor,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTrigger,
+  usePopover
+});

package/dist/index.mjs

@@ -0,0 +1,24 @@
+import {
+  PopoverAnchor,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTrigger
+} from "./chunk-O75PU3DP.mjs";
+import {
+  Popover,
+  usePopover
+} from "./chunk-DQEXAU5O.mjs";
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTrigger,
+  usePopover
+};

package/dist/popover-anchor.d.ts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from 'react';
+
+declare const PopoverAnchor: FC<PropsWithChildren<{}>>;
+
+export { PopoverAnchor };

package/dist/popover-anchor.js

@@ -0,0 +1,51 @@
+"use strict";
+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);
+
+// src/popover-anchor.tsx
+var popover_anchor_exports = {};
+__export(popover_anchor_exports, {
+  PopoverAnchor: () => PopoverAnchor
+});
+module.exports = __toCommonJS(popover_anchor_exports);
+var import_react2 = require("react");
+
+// src/popover.tsx
+var import_core = require("@yamada-ui/core");
+var import_use_animation = require("@yamada-ui/use-animation");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_use_focus = require("@yamada-ui/use-focus");
+var import_use_popper = require("@yamada-ui/use-popper");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [PopoverProvider, usePopover] = (0, import_utils.createContext)({
+  strict: false,
+  name: "PopoverContext"
+});
+
+// src/popover-anchor.tsx
+var PopoverAnchor = ({ children }) => {
+  const child = import_react2.Children.only(children);
+  const { getAnchorProps } = usePopover();
+  return (0, import_react2.cloneElement)(child, getAnchorProps(child.props, child.ref));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PopoverAnchor
+});

package/dist/popover-anchor.mjs

@@ -0,0 +1,7 @@
+import {
+  PopoverAnchor
+} from "./chunk-O75PU3DP.mjs";
+import "./chunk-DQEXAU5O.mjs";
+export {
+  PopoverAnchor
+};

package/dist/popover-body.d.ts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type PopoverBodyProps = HTMLUIProps<'main'>;
+declare const PopoverBody: _yamada_ui_core.Component<"main", PopoverBodyProps>;
+
+export { PopoverBody, PopoverBodyProps };

package/dist/popover-body.js

@@ -0,0 +1,58 @@
+"use strict";
+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);
+
+// src/popover-body.tsx
+var popover_body_exports = {};
+__export(popover_body_exports, {
+  PopoverBody: () => PopoverBody
+});
+module.exports = __toCommonJS(popover_body_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/popover.tsx
+var import_core = require("@yamada-ui/core");
+var import_use_animation = require("@yamada-ui/use-animation");
+var import_use_disclosure = require("@yamada-ui/use-disclosure");
+var import_use_focus = require("@yamada-ui/use-focus");
+var import_use_popper = require("@yamada-ui/use-popper");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [PopoverProvider, usePopover] = (0, import_utils.createContext)({
+  strict: false,
+  name: "PopoverContext"
+});
+
+// src/popover-body.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PopoverBody = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = usePopover();
+  const css = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    ...styles.body
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.main, { ref, className: (0, import_utils2.cx)("ui-popover-body", className), __css: css, ...rest });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PopoverBody
+});

package/dist/popover-body.mjs

@@ -0,0 +1,7 @@
+import {
+  PopoverBody
+} from "./chunk-O75PU3DP.mjs";
+import "./chunk-DQEXAU5O.mjs";
+export {
+  PopoverBody
+};

package/dist/popover-close-button.d.ts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { CloseButtonProps } from '@yamada-ui/close-button';
+
+type PopoverCloseButtonProps = CloseButtonProps;
+declare const PopoverCloseButton: _yamada_ui_core.Component<"button", CloseButtonProps>;
+
+export { PopoverCloseButton, PopoverCloseButtonProps };