@hrnec06/react_utils 1.9.1 → 1.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "description": "React utilities",
   "exports": {
     ".": "./src/index.ts"

package/src/components/ContextMenu/ContextMenu.tsx

@@ -10,6 +10,7 @@ import clsx from "clsx";
 import ContextMenuSection from "./ContextMenuSection";
 import ContextMenuRoot from "./ContextMenuRoot";
 import useSignal, { Signal } from "../../hooks/useSignal";
+import { useReactUtilsConfig } from "../../context/ReactUtilsConfig";
 
 type InheritCallback = (parent: TContextMenuContext) => (CTXM.ContextMenuRoot | { parent: string, children: CTXM.ContextMenuRoot });
 
@@ -24,6 +25,8 @@ function ContextMenuWrapper({
 	menu
 }: ContextMenuWrapperProps)
 {
+	const { portalElement } = useReactUtilsConfig();
+
 	if (!open)
 		return undefined;
 
@@ -46,7 +49,7 @@ function ContextMenuWrapper({
 		>
 			<ContextMenuRoot menu={menu} />
 		</div>
-	), document.body);
+	), portalElement);
 }
 
 

package/src/components/Debugger/Debugger.tsx

@@ -12,6 +12,7 @@ import useNamespacedId from "../../hooks/useNamespacedId";
 import useLocalStorage from "../../hooks/useLocalStorage";
 import z from "zod";
 import useDefaultValue from "../../hooks/useDefaultValue";
+import { useReactUtilsConfig } from "../../context/ReactUtilsConfig";
 
 const DEBUG_NAMESPACE = "debugger";
 
@@ -67,6 +68,8 @@ function Debug({
 	autoHeight = false,
 	openRoot = true
 }: DebugProps) {
+	const { portalElement } = useReactUtilsConfig();
+
 	// Config
 
 	const id = useDebuggerID(customID);
@@ -312,7 +315,7 @@ function Debug({
 				</div>
 			</DebuggerContext.Provider>
 		),
-		document.body
+		portalElement
 	);
 }
 

package/src/components/Dialog/Dialog.tsx

@@ -7,6 +7,7 @@ import { DialogContext } from "./DialogContext";
 import DialogPanel from "./DialogPanel";
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
+import { useReactUtilsConfig } from "../../context/ReactUtilsConfig";
 
 interface DialogProps extends React.PropsWithChildren {
 	open?: boolean,
@@ -20,6 +21,8 @@ function Dialog({
 	children,
 }: DialogProps)
 {
+	const { portalElement } = useReactUtilsConfig();
+
 	const pressingEsc = useKeyListener(KeyboardButton.Escape);
 
 	useEffect(() => {
@@ -43,7 +46,7 @@ function Dialog({
 				{children}
 			</DialogContext.Provider>
 		),
-		document.body
+		portalElement
 	);
 }
 

package/src/components/ShadowRoot/ShadowRoot.tsx

@@ -1,6 +1,5 @@
-import { Nullable, Optional, ReactUtils, RecordValues } from "@hrnec06/util";
+import { Optional, ReactUtils } from "@hrnec06/util";
 import React, { useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import useDefaultValue from "../../hooks/useDefaultValue";
 import { createPortal } from "react-dom";
 
 type ShadowRootProps = ReactUtils.Props<{

package/src/context/ReactUtilsConfig.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+
+interface ReactUtilsConfig {
+	/**
+	 * @default document.body
+	 */
+	portalElement: Element | DocumentFragment,
+}
+const ReactUtilsConfig = createContext<ReactUtilsConfig>({
+	portalElement: document.body
+});
+
+function useReactUtilsConfig()
+{
+	return useContext(ReactUtilsConfig);
+}
+
+export { useReactUtilsConfig, ReactUtilsConfig };
+

package/src/index.ts

@@ -19,6 +19,8 @@ import useSyncRef, { useSyncRefAuto } from "./hooks/useSyncRef";
 import useSignal, { Signal } from "./hooks/useSignal";
 import useLazySignal, { LazySignal } from "./hooks/useLazySignal";
 
+import { ReactUtilsConfig } from "./context/ReactUtilsConfig";
+
 import * as Debugger from './components/Debugger/Debugger';
 
 import ResizeableBox from "./components/ResizeableBox/ResizeableBox";
@@ -53,6 +55,9 @@ export {
 	useUUID,
 	useWindowSize,
 
+	// Context
+	ReactUtilsConfig,
+
 	// Signals
 	useSignal,
 	Signal,