import { jsxs, jsx } from "react/jsx-runtime";
import { DialogProvider, Portal, HoveringToolbar } from "@contember/ui";
import { memo } from "react";
import { HoveringToolbarContents } from "./HoveringToolbarContents.js";
import { useToolbarState } from "../editorSelection/useToolbarsState.js";
const HoveringToolbars = memo((props) => {
  const { inlineToolbarRef, blockToolbarActive, inlineToolbarActive } = useToolbarState();
  const shouldDisplayInlineToolbar = inlineToolbarActive && (props.shouldDisplayInlineToolbar === void 0 || props.shouldDisplayInlineToolbar());
  return /* @__PURE__ */ jsxs(DialogProvider, { children: [
    /* @__PURE__ */ jsx(Portal, { children: props.inlineButtons && /* @__PURE__ */ jsx(HoveringToolbar, { scheme: props.toolbarScheme, isActive: shouldDisplayInlineToolbar, ref: inlineToolbarRef, scope: "contextual", children: /* @__PURE__ */ jsx(HoveringToolbarContents, { buttons: props.inlineButtons }) }) }),
    props.blockButtons && /* @__PURE__ */ jsxs(HoveringToolbar, { scheme: props.toolbarScheme, isActive: blockToolbarActive, children: [
      Array.isArray(props.blockButtons) && /* @__PURE__ */ jsx(HoveringToolbarContents, { buttons: props.blockButtons }),
      Array.isArray(props.blockButtons) || props.blockButtons
    ] })
  ] });
});
export {
  HoveringToolbars
};
//# sourceMappingURL=HoveringToolbars.js.map
