shelving/ui/form/ButtonPopover.js

Toolkit for using data in JavaScript.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
/** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
import { useState } from "react";
import { Button } from "./Button.js";
import { Popover } from "./Popover.js";
/**
 * 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.
 *
 * 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 ButtonPopover({ children: [buttonChildren, ...popoverChildren], //
...props }) {
    const [open, setOpen] = useState(false);
    return (_jsxs(Popover, { open: open, onClose: () => setOpen(false), children: [_jsx(Button, { onClick: () => setOpen(!open), ...props, children: buttonChildren }), popoverChildren] }));
}