@re-flex/ui/Popper/index.js

Re-Flex ui library

import { css, useTheme } from "@re-flex/styles";
import clsx from "clsx";
import React from "react";
import usePopper from "../hooks/usePopper";
import Portal from "../Portal";
const PopperContent = ({ anchor, children, modifiers = [], placement, open, onClickAway, contentProps = {}, }) => {
    const theme = useTheme();
    const { x, y, floating, strategy } = usePopper({
        placement,
        modifiers: modifiers,
        anchor,
        onClickAway,
        open,
    });
    return (React.createElement("div", { ...contentProps, ref: floating, "data-show": open === true, className: clsx(css({
            zIndex: theme.zIndex.tooltip + "",
            position: strategy,
        })), style: {
            top: y ?? 0,
            left: x ?? 0,
        } }, children));
};
const Popper = ({ children, disablePortal, portalContainer, keepMounted = false, modifiers = [], open, placement = "bottom", attachTo, onClickAway, ...contentProps }) => {
    return (React.createElement(Portal, { disable: disablePortal, open: keepMounted ? true : open !== null, container: portalContainer },
        React.createElement(PopperContent, { placement: placement, modifiers: modifiers, open: open, anchor: attachTo, onClickAway: (arg) => {
                if (typeof onClickAway === "function")
                    onClickAway(arg);
            }, contentProps: contentProps }, children)));
};
export default Popper;