@yamada-ui/react/dist/cjs/components/popover/popover.cjs

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_factory = require('../motion/factory.cjs');
const require_portal = require('../portal/portal.cjs');
const require_popover_style = require('./popover.style.cjs');
const require_fade_scale = require('../fade-scale/fade-scale.cjs');
const require_slide_fade = require('../slide-fade/slide-fade.cjs');
const require_use_popover = require('./use-popover.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(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: require_fade_scale.fadeScaleVariants
		};
		case "block-start": return {
			...sharedProps,
			custom: {
				duration,
				offsetY: -16,
				reverse: true
			},
			variants: require_slide_fade.slideFadeVariants
		};
		case "inline-end": return {
			...sharedProps,
			custom: {
				duration,
				offsetX: 16,
				reverse: true
			},
			variants: require_slide_fade.slideFadeVariants
		};
		case "inline-start": return {
			...sharedProps,
			custom: {
				duration,
				offsetX: -16,
				reverse: true
			},
			variants: require_slide_fade.slideFadeVariants
		};
		case "block-end": return {
			...sharedProps,
			custom: {
				duration,
				offsetY: 16,
				reverse: true
			},
			variants: require_slide_fade.slideFadeVariants
		};
		default: return {};
	}
};
const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useComponentContext, usePropsContext: usePopoverPropsContext, withContext, useRootComponentProps } = require_create_component.createSlotComponent("popover", require_popover_style.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 } = require_use_popover.usePopover(rest);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyleContext, {
		value: styleContext,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
			value: (0, react.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, require_utils_index.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__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
		...portalProps,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.div, {
			...getPopupAnimationProps(animationScheme, duration),
			...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.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
exports.PopoverAnchor = PopoverAnchor;
exports.PopoverBody = PopoverBody;
exports.PopoverContent = PopoverContent;
exports.PopoverFooter = PopoverFooter;
exports.PopoverHeader = PopoverHeader;
exports.PopoverPropsContext = PopoverPropsContext;
exports.PopoverRoot = PopoverRoot;
exports.PopoverTrigger = PopoverTrigger;
exports.getPopupAnimationProps = getPopupAnimationProps;
exports.usePopoverPropsContext = usePopoverPropsContext;
//# sourceMappingURL=popover.cjs.map