refactor: observer hooks to take obj param

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@renderui/core",
-	"version": "1.7.5",
+	"version": "1.7.6",
 	"private": false,
 	"sideEffects": false,
 	"description": "React UI library with highly modular and ready-out-of-the-box components",

src/components/_shared/hooks/use-intersection-observer.ts

@@ -3,19 +3,25 @@
 import { useFreshRef } from '@/components/_shared/hooks/use-fresh-ref'
 import React from 'react'
 
-function useIntersectionObserver<T extends HTMLElement>(
-	node: T | null,
-	callback: IntersectionObserverCallback,
-	options: IntersectionObserverInit,
-) {
-	const freshCallback = useFreshRef(callback)
-	const freshOptions = useFreshRef(options)
+type UseIntersectionObserverProps<T extends HTMLElement> = {
+	node: T | null
+	callback: IntersectionObserverCallback
+	options: IntersectionObserverInit
+}
+
+function useIntersectionObserver<T extends HTMLElement>(props: UseIntersectionObserverProps<T>) {
+	const freshProps = useFreshRef(props)
+
+	const node = freshProps.current.node
 
 	/* biome-ignore lint/correctness/useExhaustiveDependencies: using fresh ref pattern, ref dep not needed */
 	React.useEffect(() => {
 		if (!node) return undefined
 
-		const observer = new IntersectionObserver(freshCallback.current, freshOptions.current)
+		const observer = new IntersectionObserver(
+			freshProps.current.callback,
+			freshProps.current.options,
+		)
 
 		observer.observe(node)
 

src/components/_shared/hooks/use-mutation-observer.ts

@@ -3,21 +3,24 @@
 import { useFreshRef } from '@/components/_shared/hooks/use-fresh-ref'
 import React from 'react'
 
-function useMutationObserver<T extends HTMLElement>(
-	node: T | null,
-	callback: MutationCallback,
-	options: MutationObserverInit,
-) {
-	const freshCallback = useFreshRef(callback)
-	const freshOptions = useFreshRef(options)
+type UseMutationObserverProps<T extends HTMLElement> = {
+	node: T | null
+	callback: MutationCallback
+	options: MutationObserverInit
+}
+
+function useMutationObserver<T extends HTMLElement>(props: UseMutationObserverProps<T>) {
+	const freshProps = useFreshRef(props)
+
+	const node = freshProps.current.node
 
 	/* biome-ignore lint/correctness/useExhaustiveDependencies: using fresh ref pattern, ref dep not needed */
 	React.useEffect(() => {
 		if (!node) return undefined
 
-		const observer = new MutationObserver(freshCallback.current)
+		const observer = new MutationObserver(freshProps.current.callback)
 
-		observer.observe(node, freshOptions.current)
+		observer.observe(node, freshProps.current.options)
 
 		return () => {
 			observer.disconnect()

src/components/command/hooks/use-search.ts

@@ -55,11 +55,11 @@ function useSearch(value: string, setValue: React.Dispatch<React.SetStateAction<
 		)
 	}, [htmlDocument?.querySelector])
 
-	useMutationObserver(
-		htmlDocument?.documentElement ?? null,
-		storeCommandItems,
-		SEARCH_OBSERVER_OPTIONS,
-	)
+	useMutationObserver({
+		node: htmlDocument?.documentElement ?? null,
+		callback: storeCommandItems,
+		options: SEARCH_OBSERVER_OPTIONS,
+	})
 
 	React.useEffect(() => {
 		setTimeout(storeCommandItems, 0)

src/components/ripple/hooks/use-keyboard-ripple.ts

@@ -57,7 +57,11 @@ function useKeyboardRipple<T extends HTMLElement>(
 
 	const parentRef = ref.current?.parentElement ?? null
 
-	useMutationObserver(parentRef, mutationHandler, KEYBOARD_RIPPLE_MUTATION_OBSERVER_OPTIONS)
+	useMutationObserver({
+		node: parentRef,
+		callback: mutationHandler,
+		options: KEYBOARD_RIPPLE_MUTATION_OBSERVER_OPTIONS,
+	})
 }
 
 export { useKeyboardRipple }

src/index.ts

@@ -379,6 +379,7 @@ export { useFreshRef } from '@/components/_shared/hooks/use-fresh-ref'
 export { useKeyboardHotkey } from '@/components/_shared/hooks/use-keyboard-hotkey'
 export { useMergedRef } from '@/components/_shared/hooks/use-merged-ref'
 export { useMutationObserver } from '@/components/_shared/hooks/use-mutation-observer'
+export { useIntersectionObserver } from '@/components/_shared/hooks/use-intersection-observer'
 export { useOnClickOutside } from '@/components/_shared/hooks/use-on-click-outside'
 export {
 	useUncontrolledState,