@yamada-ui/react/dist/esm/components/popover/popover.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { motion as motion$1 } from "../motion/factory.js";
import { Portal } from "../portal/portal.js";
import { popoverStyle } from "./popover.style.js";
import { fadeScaleVariants } from "../fade-scale/fade-scale.js";
import { slideFadeVariants } from "../slide-fade/slide-fade.js";
import { usePopover } from "./use-popover.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { AnimatePresence } from "motion/react";

//#region src/components/popover/popover.tsx
const getPopupAnimationProps = (animationScheme = "scale", duration) => {
	const sharedProps = {
		animate: "enter",
		exit: "exit",
		initial: "exit"
	};
	switch (animationScheme) {
		case "scale": return {
			...sharedProps,
			custom: {
				duration,
				reverse: true,
				scale: .95
			},
			variants: fadeScaleVariants
		};
		case "block-start": return {
			...sharedProps,
			custom: {
				duration,
				offsetY: -16,
				reverse: true
			},
			variants: slideFadeVariants
		};
		case "inline-end": return {
			...sharedProps,
			custom: {
				duration,
				offsetX: 16,
				reverse: true
			},
			variants: slideFadeVariants
		};
		case "inline-start": return {
			...sharedProps,
			custom: {
				duration,
				offsetX: -16,
				reverse: true
			},
			variants: slideFadeVariants
		};
		case "block-end": return {
			...sharedProps,
			custom: {
				duration,
				offsetY: 16,
				reverse: true
			},
			variants: slideFadeVariants
		};
		default: return {};
	}
};
const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useComponentContext, usePropsContext: usePopoverPropsContext, withContext, useRootComponentProps } = createSlotComponent("popover", popoverStyle);
/**
* `Popover` is a component that floats around an element to display information.
*
* @see https://yamada-ui.com/docs/components/popover
*/
const PopoverRoot = (props) => {
	const [styleContext, { animationScheme = "scale", children, duration = .1, withCloseButton = true,...rest }] = useRootComponentProps(props);
	const { open, getAnchorProps, getBodyProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = usePopover(rest);
	return /* @__PURE__ */ jsx(StyleContext, {
		value: styleContext,
		children: /* @__PURE__ */ jsx(ComponentContext, {
			value: useMemo(() => ({
				animationScheme,
				duration,
				open,
				withCloseButton,
				getAnchorProps,
				getBodyProps,
				getContentProps,
				getFooterProps,
				getHeaderProps,
				getPositionerProps,
				getTriggerProps
			}), [
				withCloseButton,
				open,
				animationScheme,
				duration,
				getAnchorProps,
				getBodyProps,
				getContentProps,
				getFooterProps,
				getHeaderProps,
				getPositionerProps,
				getTriggerProps
			]),
			children: (0, utils_exports.runIfFn)(children, {
				open,
				onClose
			})
		})
	});
};
const PopoverTrigger = withContext("button", "trigger")({ asChild: true }, (props) => {
	const { getTriggerProps } = useComponentContext();
	return getTriggerProps(props);
});
const PopoverAnchor = withContext("div", "anchor")({ asChild: true }, (props) => {
	const { getAnchorProps } = useComponentContext();
	return getAnchorProps(props);
});
const PopoverPositioner = withContext("div", "positioner")(void 0, (props) => {
	const { getPositionerProps } = useComponentContext();
	return getPositionerProps(props);
});
const PopoverContent = withContext(({ portalProps,...rest }) => {
	const { animationScheme, duration, open, getContentProps } = useComponentContext();
	return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(Portal, {
		...portalProps,
		children: /* @__PURE__ */ jsx(PopoverPositioner, { children: /* @__PURE__ */ jsx(motion$1.div, {
			...getPopupAnimationProps(animationScheme, duration),
			...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(rest)))
		}) })
	}) : null });
}, "content")();
const PopoverHeader = withContext("div", "header")(void 0, (props) => {
	const { getHeaderProps } = useComponentContext();
	return getHeaderProps(props);
});
const PopoverBody = withContext("div", "body")(void 0, (props) => {
	const { getBodyProps } = useComponentContext();
	return getBodyProps(props);
});
const PopoverFooter = withContext("div", "footer")(void 0, (props) => {
	const { getFooterProps } = useComponentContext();
	return getFooterProps(props);
});

//#endregion
export { PopoverAnchor, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, usePopoverPropsContext };
//# sourceMappingURL=popover.js.map