@hrnec06/react_utils 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "React utilities",
   "exports": {
     ".": "./src/index.ts"
@@ -26,7 +26,7 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
-    "@hrnec06/util": "^1.6.1",
+    "@hrnec06/util": "^1.6.2",
     "clsx": "^2.1.1",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",

package/src/components/ShadowRoot/ShadowRoot.tsx

@@ -0,0 +1,41 @@
+import { Nullable, ReactUtils, RecordValues } from "@hrnec06/util";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import useDefaultValue from "../../hooks/useDefaultValue";
+import { createPortal } from "react-dom";
+
+type ShadowRootProps = ReactUtils.Props<{
+	children?: React.ReactNode,
+	shadowConfig?: ShadowRootInit,
+}, HTMLDivElement>
+export default function ShadowRoot({
+	children,
+	shadowConfig,
+	...props
+}: ShadowRootProps)
+{
+	const ref = useRef<HTMLDivElement>(null);
+	const shadowAttached = useRef(false);
+
+	const [shadow, setShadow] = useState<Nullable<ShadowRoot>>(null);
+
+	useLayoutEffect(() => {
+		if (!ref.current || shadowAttached.current) return;
+
+		const shadow = ref.current.attachShadow(shadowConfig ?? { mode: 'open' });
+		setShadow(shadow);
+
+		shadowAttached.current = true;
+	}, []);
+
+	return (
+		<div
+			{...props}
+
+			ref={ref}
+		>
+			{
+				shadow ? createPortal(children, shadow) : null
+			}
+		</div>
+	)
+}

package/src/index.ts

@@ -26,6 +26,8 @@ import Dialog from "./components/Dialog/Dialog";
 
 import ContextMenu from "./components/ContextMenu/ContextMenu";
 
+import ShadowRoot from "./components/ShadowRoot/ShadowRoot";
+
 import * as util from './lib/utils';
 import ContextError from "./lib/errors/ContextError";
 
@@ -63,6 +65,9 @@ export {
 	Dialog,
 	ContextMenu,
 
+	// Shadow root
+	ShadowRoot,
+
 	// Utilities
 	util,
 	ContextError