@hrnec06/react_utils 1.7.1 → 1.7.3

package/package.json

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

package/src/components/Dialog/Dialog.tsx

@@ -6,6 +6,7 @@ import DialogCloseButton from "./DialogCloseButton";
 import { DialogContext } from "./DialogContext";
 import DialogPanel from "./DialogPanel";
 import { useEffect } from "react";
+import { createPortal } from "react-dom";
 
 interface DialogProps extends React.PropsWithChildren {
 	open?: boolean,
@@ -27,19 +28,22 @@ function Dialog({
 		onClose?.();
 	}, [pressingEsc]);
 
-	return (
-		<DialogContext.Provider
-			value={{
-				open: open,
-				onClose: onClose,
+	return createPortal(
+		(
+			<DialogContext.Provider
+				value={{
+					open: open,
+					onClose: onClose,
 
-				options: {
-					animationDuration: duration
-				},
-			}}
-		>
-			{children}
-		</DialogContext.Provider>
+					options: {
+						animationDuration: duration
+					},
+				}}
+			>
+				{children}
+			</DialogContext.Provider>
+		),
+		document.body
 	);
 }
 

package/src/components/Dialog/DialogBackdrop.tsx

@@ -2,6 +2,8 @@ import clsx from "clsx";
 import useDialog from "./DialogContext";
 import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
 import { useRef } from "react";
+import { useSyncRefAuto } from "../../hooks/useSyncRef";
+import { Nullable } from "@hrnec06/util";
 
 interface DialogBackdropProps extends Omit<React.HTMLProps<HTMLDivElement>, 'children'>
 {
@@ -15,9 +17,9 @@ export default function DialogBackdrop({
 {
 	const dialog = useDialog();
 
-	const divRef = useRef<HTMLDivElement>(null);
+	const { ref, value } = useSyncRefAuto<Nullable<HTMLDivElement>>(null);
 
-	const [visible, transitionData] = useTransition($transition, divRef.current, dialog.open);
+	const [visible, transitionData] = useTransition($transition, value, dialog.open);
 	
 	if (!visible)
 		return undefined;
@@ -33,7 +35,7 @@ export default function DialogBackdrop({
 			{...props}
 			{...transitionDataAttributes(transitionData)}
 
-			ref={divRef}
+			ref={ref}
 			
 			onClick={handleClick}
 

package/src/components/Dialog/DialogPanel.tsx

@@ -1,7 +1,9 @@
 import clsx from "clsx";
 import useDialog from "./DialogContext";
 import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
-import { useRef } from "react";
+import { useRef, useState } from "react";
+import { Nullable } from "@hrnec06/util";
+import useSyncRef, { useSyncRefAuto } from "../../hooks/useSyncRef";
 
 interface DialogPanelProps extends React.HTMLProps<HTMLDivElement> {
 	$transition?: boolean
@@ -13,9 +15,9 @@ export default function DialogPanel({
 {
 	const dialog = useDialog();
 
-	const divRef = useRef<HTMLDivElement>(null);
+	const { value, ref } = useSyncRefAuto<Nullable<HTMLDivElement>>(null);
 
-	const [visible, transitionData] = useTransition($transition, divRef.current, dialog.open);
+	const [visible, transitionData] = useTransition($transition, value, dialog.open);
 
 	if (!visible)
 		return undefined;
@@ -25,7 +27,7 @@ export default function DialogPanel({
 			{...props}
 			{...transitionDataAttributes(transitionData)}
 			
-			ref={divRef}
+			ref={ref}
 
 			className={props.className}
 		>

package/src/hooks/useSyncRef.ts

@@ -14,4 +14,13 @@ export default function useSyncRef<T>(
 	});
 
 	return syncRefs;
+}
+
+export function useSyncRefAuto<T>(value: T)
+{
+	const ref = useRef(value);
+	const [localValue, setLocalValue] = useState(value);
+	const syncRef = useSyncRef(ref, setLocalValue);
+
+	return { value: localValue, ref: syncRef };
 }

package/src/index.ts

@@ -8,8 +8,12 @@ import useEfficientRef from "./hooks/useEfficientRef";
 import useUUID from "./hooks/useUUID";
 import useFlags from "./hooks/useFlags";
 import useNamespacedId from "./hooks/useNamespacedId";
-import useTransition from "./hooks/useTransition";
+import useTransition, { transitionDataAttributes } from "./hooks/useTransition";
 import useLocalStorage from "./hooks/useLocalStorage";
+import useDebounce from "./hooks/useDebounce";
+import useEvent from "./hooks/useEvent";
+import useLatestRef from "./hooks/useLatestRef";
+import useSyncRef, { useSyncRefAuto } from "./hooks/useSyncRef";
 
 import useSignal, { Signal } from "./hooks/useSignal";
 import useLazySignal, { LazySignal } from "./hooks/useLazySignal";
@@ -22,10 +26,6 @@ import Dialog from "./components/Dialog/Dialog";
 import ContextMenu from "./components/ContextMenu/ContextMenu";
 
 import * as util from './lib/utils';
-import useDebounce from "./hooks/useDebounce";
-import useEvent from "./hooks/useEvent";
-import useLatestRef from "./hooks/useLatestRef";
-import useSyncRef from "./hooks/useSyncRef";
 
 
 export {
@@ -42,7 +42,9 @@ export {
 	useLocalStorage,
 	useNamespacedId,
 	useSyncRef,
+	useSyncRefAuto,
 	useTransition,
+	transitionDataAttributes,
 	useUpdateEffect,
 	useUUID,
 	useWindowSize,