@quadrats/react 0.5.6 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",

package/toolbar/components/Toolbar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ToolbarProps {
     /**
      * If there are any nodes which type match it, toolbar will hide.
@@ -8,6 +8,10 @@ export interface ToolbarProps {
      * A render props which provide a flag `expanded` which useful for rendering different things between collapsed and expanded.
      */
     children: (expanded: boolean) => JSX.Element | null | undefined;
+    /**
+     * Toolbar container
+     */
+    containerRef?: React.MutableRefObject<HTMLElement | undefined>;
 }
 declare function Toolbar(props: ToolbarProps): JSX.Element | null;
 export default Toolbar;

package/toolbar/components/Toolbar.js

@@ -80,6 +80,13 @@ function Toolbar(props) {
             }
         });
     });
+    const getPortalContainer = useCallback(() => {
+        var _a;
+        if ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) {
+            return props.containerRef.current;
+        }
+        return document.body;
+    }, [props.containerRef]);
     if (!shouldRender || (disabledElementTypes && isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
     }
@@ -88,7 +95,7 @@ function Toolbar(props) {
     if (!tools) {
         return null;
     }
-    return (React.createElement(Portal, null,
+    return (React.createElement(Portal, { getContainer: getPortalContainer },
         React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
             React.createElement("div", { className: "qdr-toolbar__arrow" }),
             React.createElement("div", { className: "qdr-toolbar" },

package/toolbar/index.cjs.js

@@ -120,6 +120,13 @@ function Toolbar(props) {
             }
         });
     });
+    const getPortalContainer = React.useCallback(() => {
+        var _a;
+        if ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) {
+            return props.containerRef.current;
+        }
+        return document.body;
+    }, [props.containerRef]);
     if (!shouldRender || (disabledElementTypes && core.isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
     }
@@ -128,7 +135,7 @@ function Toolbar(props) {
     if (!tools) {
         return null;
     }
-    return (React__default.createElement(components.Portal, null,
+    return (React__default.createElement(components.Portal, { getContainer: getPortalContainer },
         React__default.createElement("div", { ref: toolbarRef, className: clsx__default('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
             React__default.createElement("div", { className: "qdr-toolbar__arrow" }),
             React__default.createElement("div", { className: "qdr-toolbar" },