shelving/ui/form/Popover.js

Toolkit for using data in JavaScript.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isTruthy } from "../../util/boolean.js";
import { eventPreventDefault } from "../util/event.js";
import { eventLoopFocus } from "../util/focus.js";
import styles from "./Popover.module.css";
/**
 * An input button that, when clicked, shows a popover next to it when clicked or focused.
 * - The first element passed to `children` is used as the content for the button, the rest is the content of the popover.
 *
 * @todo DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
 */
export function Popover({ children: [trigger, ...popover], //
onClose, open = popover.flat().some(isTruthy), }) {
    return (_jsxs("div", { className: styles.wrap, onBlur: e => {
            if (e.relatedTarget)
                eventLoopFocus(e);
            else
                onClose?.();
        }, onKeyDown: e => e.key === "Escape" && onClose?.(), children: [trigger, open ? (_jsx("section", { className: styles.panel, onMouseDown: eventPreventDefault, children: popover })) : null] }));
}