@hrnec06/react_utils 1.7.4 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.7.4",
+  "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/hooks/useOutsideClick.ts

@@ -0,0 +1,17 @@
+import { Nullable } from "@hrnec06/util";
+import useEvent from "./useEvent";
+import useListener from "./useListener";
+
+export default function useOutsideClick(
+	element: Nullable<HTMLElement>,
+	callback: (element: MouseEvent) => void
+)
+{
+	const cb = useEvent(callback);
+
+	useListener(document, 'mousedown', (event) => {
+		if (!element || !(event.target instanceof Node) || element.contains(event.target)) return;
+
+		cb(event);
+	}, [cb, element]);
+}

package/src/index.ts

@@ -8,6 +8,7 @@ import useEfficientRef from "./hooks/useEfficientRef";
 import useUUID from "./hooks/useUUID";
 import useFlags from "./hooks/useFlags";
 import useNamespacedId from "./hooks/useNamespacedId";
+import useOutsideClick from "./hooks/useOutsideClick";
 import useTransition, { transitionDataAttributes } from "./hooks/useTransition";
 import useLocalStorage from "./hooks/useLocalStorage";
 import useDebounce from "./hooks/useDebounce";
@@ -25,10 +26,11 @@ 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";
 
-
 export {
 	// Hooks
 	useDebounce,
@@ -42,6 +44,7 @@ export {
 	useListener,
 	useLocalStorage,
 	useNamespacedId,
+	useOutsideClick,
 	useSyncRef,
 	useSyncRefAuto,
 	useTransition,
@@ -62,6 +65,9 @@ export {
 	Dialog,
 	ContextMenu,
 
+	// Shadow root
+	ShadowRoot,
+
 	// Utilities
 	util,
 	ContextError