@nex-ui/react/dist/esm/components/popover/PopoverRoot.mjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
import { jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { usePopover } from './PopoverContext.mjs';
import { useSlotClasses } from '../utils/useSlotClasses.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { popoverRecipe } from '../../theme/recipes/popover.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { PopperRoot } from '../popper/PopperRoot.mjs';

const slots = [
    'root'
];
const useAriaProps = (ownerState)=>{
    const { id, 'aria-modal': ariaModal, role = 'dialog' } = ownerState;
    return useMemo(()=>({
            id,
            role,
            'aria-modal': ariaModal
        }), [
        ariaModal,
        id,
        role
    ]);
};
const PopoverRoot = ({ children })=>{
    const { motionProps, ...props } = usePopover();
    const slotClasses = useSlotClasses({
        name: 'Popover',
        slots
    });
    const ariaProps = useAriaProps(props);
    const style = useStyles({
        ownerState: props,
        name: 'Popover',
        recipe: popoverRecipe
    });
    const [PopoverRootRoot, getPopoverRootRootProps] = useSlot({
        style,
        elementType: PopperRoot,
        shouldForwardComponent: false,
        externalForwardedProps: {
            ...props,
            ...motionProps
        },
        classNames: slotClasses.root,
        a11y: ariaProps
    });
    return /*#__PURE__*/ jsx(PopoverRootRoot, {
        ...getPopoverRootRootProps(),
        children: children
    });
};
PopoverRoot.displayName = 'PopoverRoot';

export { PopoverRoot };