@hrnec06/react_utils 1.9.0 → 1.9.1

package/package.json

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

package/src/components/ShadowRoot/ShadowRoot.tsx

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