tldraw
Version:
A tiny little drawing editor.
55 lines (54 loc) • 1.87 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useContainer } from "@tldraw/editor";
import { Popover as _Popover } from "radix-ui";
import React from "react";
import { useMenuIsOpen } from "../../hooks/useMenuIsOpen.mjs";
function TldrawUiPopover({ id, children, onOpenChange, open }) {
const [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange);
return /* @__PURE__ */ jsx(_Popover.Root, { onOpenChange: handleOpenChange, open: open || isOpen, children: /* @__PURE__ */ jsx("div", { className: "tlui-popover", children }) });
}
function TldrawUiPopoverTrigger({ children }) {
return /* @__PURE__ */ jsx(_Popover.Trigger, { asChild: true, dir: "ltr", children });
}
function TldrawUiPopoverContent({
side,
children,
align = "center",
sideOffset = 8,
alignOffset = 0,
disableEscapeKeyDown = false,
autoFocusFirstButton = true
}) {
const container = useContainer();
const ref = React.useRef(null);
const handleOpenAutoFocus = React.useCallback(() => {
if (!autoFocusFirstButton) return;
const buttons = ref.current?.querySelectorAll("button:not([disabled])") ?? [];
const visibleButtons = [...buttons].filter(
(button) => button.offsetWidth || button.offsetHeight
);
const firstButton = visibleButtons[0];
if (firstButton) firstButton.focus();
}, [autoFocusFirstButton]);
return /* @__PURE__ */ jsx(_Popover.Portal, { container, children: /* @__PURE__ */ jsx(
_Popover.Content,
{
className: "tlui-popover__content",
side,
sideOffset,
align,
alignOffset,
dir: "ltr",
ref,
onOpenAutoFocus: handleOpenAutoFocus,
onEscapeKeyDown: (e) => disableEscapeKeyDown && e.preventDefault(),
children
}
) });
}
export {
TldrawUiPopover,
TldrawUiPopoverContent,
TldrawUiPopoverTrigger
};
//# sourceMappingURL=TldrawUiPopover.mjs.map