@yamada-ui/popover 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/popover
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/popover
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/popover
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/popover
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-DQEXAU5O.mjs

@@ -0,0 +1,229 @@
+// src/popover.tsx
+import { useMultiComponentStyle, omitThemeProps } from "@yamada-ui/core";
+import { useAnimationObserver } from "@yamada-ui/use-animation";
+import { useDisclosure, useLazyDisclosure } from "@yamada-ui/use-disclosure";
+import { useFocusOnHide, useFocusOnShow, useFocusOnPointerDown } from "@yamada-ui/use-focus";
+import { usePopper } from "@yamada-ui/use-popper";
+import {
+  createContext,
+  getEventRelatedTarget,
+  handlerAll,
+  isContains,
+  mergeRefs,
+  runIfFunc
+} from "@yamada-ui/utils";
+import { useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var [PopoverProvider, usePopover] = createContext({
+  strict: false,
+  name: "PopoverContext"
+});
+var Popover = (props) => {
+  const [styles, mergedProps] = 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
+  } = omitThemeProps(mergedProps);
+  const [isOpen, onOpen, onClose, onToggle] = useDisclosure(mergedProps);
+  const anchorRef = useRef(null);
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const { present, onAnimationComplete } = useAnimationObserver({ isOpen, ref: popoverRef });
+  const openTimeout = useRef(void 0);
+  const closeTimeout = useRef(void 0);
+  const isHoveringRef = useRef(false);
+  const hasBeenOpened = useRef(false);
+  if (isOpen)
+    hasBeenOpened.current = true;
+  const { referenceRef, getPopperProps, forceUpdate, transformOrigin } = usePopper({
+    ...rest,
+    enabled: isOpen
+  });
+  useEffect(() => {
+    return () => {
+      if (openTimeout.current)
+        clearTimeout(openTimeout.current);
+      if (closeTimeout.current)
+        clearTimeout(closeTimeout.current);
+    };
+  }, []);
+  useFocusOnPointerDown({
+    enabled: isOpen,
+    ref: triggerRef
+  });
+  useFocusOnHide(popoverRef, {
+    focusRef: triggerRef,
+    visible: isOpen,
+    shouldFocus: restoreFocus && trigger === "click"
+  });
+  useFocusOnShow(popoverRef, {
+    focusRef: initialFocusRef,
+    visible: isOpen,
+    shouldFocus: autoFocus && trigger === "click"
+  });
+  const shouldRenderChildren = useLazyDisclosure({
+    wasSelected: hasBeenOpened.current,
+    enabled: isLazy,
+    mode: lazyBehavior,
+    isSelected: present
+  });
+  const getPopoverProps = useCallback(
+    (props2 = {}, ref = null) => {
+      const popoverProps = {
+        ...props2,
+        style: {
+          ...props2.style,
+          transformOrigin
+        },
+        ref: mergeRefs(popoverRef, ref),
+        children: shouldRenderChildren ? props2.children : null,
+        tabIndex: -1,
+        onKeyDown: handlerAll(props2.onKeyDown, (event) => {
+          if (closeOnEsc && event.key === "Escape")
+            onClose();
+        }),
+        onBlur: handlerAll(props2.onBlur, (event) => {
+          const relatedTarget = getEventRelatedTarget(event);
+          const targetIsPopover = isContains(popoverRef.current, relatedTarget);
+          const targetIsTrigger = isContains(triggerRef.current, relatedTarget);
+          const isValidBlur = !targetIsPopover && !targetIsTrigger;
+          if (isOpen && closeOnBlur && isValidBlur)
+            onClose();
+        })
+      };
+      if (trigger === "hover") {
+        popoverProps.onMouseEnter = handlerAll(props2.onMouseEnter, () => {
+          isHoveringRef.current = true;
+        });
+        popoverProps.onMouseLeave = 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 = useCallback(
+    (node) => {
+      if (anchorRef.current == null)
+        referenceRef(node);
+    },
+    [referenceRef]
+  );
+  const getTriggerProps = useCallback(
+    (props2 = {}, ref = null) => {
+      const triggerProps = {
+        ...props2,
+        ref: mergeRefs(triggerRef, ref, maybeReferenceRef)
+      };
+      if (trigger === "click")
+        triggerProps.onClick = handlerAll(props2.onClick, onToggle);
+      if (trigger === "hover") {
+        triggerProps.onFocus = handlerAll(props2.onFocus, () => {
+          if (openTimeout.current === void 0)
+            onOpen();
+        });
+        triggerProps.onBlur = handlerAll(props2.onBlur, (event) => {
+          const relatedTarget = getEventRelatedTarget(event);
+          const isValidBlur = !isContains(popoverRef.current, relatedTarget);
+          if (isOpen && closeOnBlur && isValidBlur)
+            onClose();
+        });
+        triggerProps.onKeyDown = handlerAll(props2.onKeyDown, (event) => {
+          if (event.key === "Escape")
+            onClose();
+        });
+        triggerProps.onMouseEnter = handlerAll(props2.onMouseEnter, () => {
+          isHoveringRef.current = true;
+          openTimeout.current = window.setTimeout(onOpen, openDelay);
+        });
+        triggerProps.onMouseLeave = 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 = useCallback(
+    (props2 = {}, ref = null) => {
+      return {
+        ...props2,
+        ref: mergeRefs(ref, anchorRef, referenceRef)
+      };
+    },
+    [anchorRef, referenceRef]
+  );
+  return /* @__PURE__ */ jsx(
+    PopoverProvider,
+    {
+      value: {
+        isOpen,
+        onClose,
+        closeOnButton,
+        onAnimationComplete,
+        forceUpdate,
+        getTriggerProps,
+        getAnchorProps,
+        getPopperProps,
+        getPopoverProps,
+        animation,
+        duration,
+        styles
+      },
+      children: runIfFunc(children, {
+        isOpen,
+        onClose,
+        forceUpdate
+      })
+    }
+  );
+};
+
+export {
+  usePopover,
+  Popover
+};

package/dist/chunk-O75PU3DP.mjs

@@ -0,0 +1,216 @@
+import {
+  usePopover
+} from "./chunk-DQEXAU5O.mjs";
+
+// src/popover-trigger.tsx
+import { Children as Children2, cloneElement as cloneElement2 } from "react";
+
+// src/popover-anchor.tsx
+import { Children, cloneElement } from "react";
+var PopoverAnchor = ({ children }) => {
+  const child = Children.only(children);
+  const { getAnchorProps } = usePopover();
+  return cloneElement(child, getAnchorProps(child.props, child.ref));
+};
+
+// src/popover-close-button.tsx
+import { CloseButton } from "@yamada-ui/close-button";
+import { forwardRef } from "@yamada-ui/core";
+import { cx, handlerAll } from "@yamada-ui/utils";
+import { jsx } from "react/jsx-runtime";
+var PopoverCloseButton = forwardRef(
+  ({ onClick, ...rest }, ref) => {
+    const { styles, onClose } = usePopover();
+    const css = {
+      position: "absolute",
+      ...styles.closeButton
+    };
+    return /* @__PURE__ */ jsx(
+      CloseButton,
+      {
+        ref,
+        className: cx("ui-popover-close-button"),
+        __css: css,
+        onClick: handlerAll(onClick, (event) => {
+          event.stopPropagation();
+          onClose == null ? void 0 : onClose();
+        }),
+        size: "sm",
+        ...rest
+      }
+    );
+  }
+);
+
+// src/popover-content.tsx
+import { ui, forwardRef as forwardRef2 } from "@yamada-ui/core";
+import { motion } from "@yamada-ui/motion";
+import { scaleFadeProps, slideFadeProps } from "@yamada-ui/transitions";
+import {
+  cx as cx2,
+  findChildren,
+  funcAll,
+  getValidChildren,
+  omitObject
+} from "@yamada-ui/utils";
+import { jsx as jsx2, jsxs } from "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 {
+        ...scaleFadeProps,
+        custom: { ...custom, scale: 0.95 }
+      };
+    case "top":
+      return {
+        ...slideFadeProps,
+        custom: { ...custom, offsetX: 0, offsetY: -16 }
+      };
+    case "right":
+      return {
+        ...slideFadeProps,
+        custom: { ...custom, offsetX: 16, offsetY: 0 }
+      };
+    case "left":
+      return {
+        ...slideFadeProps,
+        custom: { ...custom, offsetX: -16, offsetY: 0 }
+      };
+    case "bottom":
+      return {
+        ...slideFadeProps,
+        custom: { ...custom, offsetX: 0, offsetY: 16 }
+      };
+  }
+};
+var PopoverContent = forwardRef2(
+  ({ 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 = getValidChildren(children);
+    const [customPopoverCloseButton, ...cloneChildren] = findChildren(
+      validChildren,
+      PopoverCloseButton
+    );
+    const css = {
+      position: "relative",
+      w: "100%",
+      display: "flex",
+      flexDirection: "column",
+      outline: 0,
+      ...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__ */ jsx2(
+      ui.div,
+      {
+        ...getPopperProps({ style: { visibility: isOpen ? "visible" : "hidden" } }),
+        className: "ui-popover",
+        w,
+        minW,
+        zIndex,
+        children: /* @__PURE__ */ jsxs(
+          ui.section,
+          {
+            as: motion[as],
+            className: cx2("ui-popover-content", className),
+            ...animation !== "none" ? getPopoverContentProps(animation, duration) : {},
+            ...getPopoverProps(rest, ref),
+            initial: "exit",
+            animate: isOpen ? "enter" : "exit",
+            exit: "exit",
+            onAnimationComplete: funcAll(onAnimationComplete, rest.onAnimationComplete),
+            __css: css,
+            children: [
+              customPopoverCloseButton != null ? customPopoverCloseButton : closeOnButton ? /* @__PURE__ */ jsx2(PopoverCloseButton, {}) : null,
+              cloneChildren
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+// src/popover-header.tsx
+import { ui as ui2, forwardRef as forwardRef3 } from "@yamada-ui/core";
+import { cx as cx3 } from "@yamada-ui/utils";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PopoverHeader = forwardRef3(
+  ({ className, ...rest }, ref) => {
+    const { styles } = usePopover();
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      ...styles.header
+    };
+    return /* @__PURE__ */ jsx3(ui2.header, { ref, className: cx3("ui-popover-header", className), __css: css, ...rest });
+  }
+);
+
+// src/popover-body.tsx
+import { ui as ui3, forwardRef as forwardRef4 } from "@yamada-ui/core";
+import { cx as cx4 } from "@yamada-ui/utils";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PopoverBody = forwardRef4(({ className, ...rest }, ref) => {
+  const { styles } = usePopover();
+  const css = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    ...styles.body
+  };
+  return /* @__PURE__ */ jsx4(ui3.main, { ref, className: cx4("ui-popover-body", className), __css: css, ...rest });
+});
+
+// src/popover-footer.tsx
+import { ui as ui4, forwardRef as forwardRef5 } from "@yamada-ui/core";
+import { cx as cx5 } from "@yamada-ui/utils";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var PopoverFooter = forwardRef5(
+  ({ className, ...rest }, ref) => {
+    const { styles } = usePopover();
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      ...styles.footer
+    };
+    return /* @__PURE__ */ jsx5(ui4.footer, { ref, className: cx5("ui-popover-footer", className), __css: css, ...rest });
+  }
+);
+
+// src/popover-trigger.tsx
+var PopoverTrigger = ({ children }) => {
+  const child = Children2.only(children);
+  const { getTriggerProps } = usePopover();
+  return cloneElement2(child, getTriggerProps(child.props, child.ref));
+};
+
+export {
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter
+};

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { Popover, PopoverProps, usePopover } from './popover.js';
+export { PopoverTrigger } from './popover-trigger.js';
+export { PopoverAnchor } from './popover-anchor.js';
+export { PopoverCloseButton, PopoverCloseButtonProps } from './popover-close-button.js';
+export { PopoverContent, PopoverContentProps } from './popover-content.js';
+export { PopoverHeader, PopoverHeaderProps } from './popover-header.js';
+export { PopoverBody, PopoverBodyProps } from './popover-body.js';
+export { PopoverFooter, PopoverFooterProps } from './popover-footer.js';
+import '@yamada-ui/core';
+import '@yamada-ui/motion';
+import '@yamada-ui/use-disclosure';
+import '@yamada-ui/use-popper';
+import '@yamada-ui/utils';
+import 'react';
+import '@yamada-ui/close-button';