@hrnec06/react_utils 1.7.1 → 1.7.2

package/package.json

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

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

@@ -10,6 +10,10 @@ import useFlags from "./hooks/useFlags";
 import useNamespacedId from "./hooks/useNamespacedId";
 import useTransition 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,6 +42,7 @@ export {
 	useLocalStorage,
 	useNamespacedId,
 	useSyncRef,
+	useSyncRefAuto,
 	useTransition,
 	useUpdateEffect,
 	useUUID,