refactor: replace private Radix UI hook with public useControllableState

package.json

@@ -27,7 +27,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@radix-ui/react-use-controllable-state": "^1.0.1",
     "@t3-oss/env-nextjs": "^0.9.2",
     "@uploadthing/react": "^6.4.1",
     "class-variance-authority": "^0.7.0",

src/components/file-uploader-primitive.tsx

@@ -3,7 +3,6 @@
 import * as React from "react"
 import Image from "next/image"
 import { Cross2Icon, UploadIcon } from "@radix-ui/react-icons"
-import { useControllableState } from "@radix-ui/react-use-controllable-state"
 import { cva, type VariantProps } from "class-variance-authority"
 import {
   useDropzone,
@@ -14,6 +13,7 @@ import {
 import { toast } from "sonner"
 
 import { cn, formatBytes } from "@/lib/utils"
+import { useControllableState } from "@/hooks/use-controllable-state"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Progress } from "@/components/ui/progress"

src/components/file-uploader.tsx

@@ -3,14 +3,14 @@
 import * as React from "react"
 import Image from "next/image"
 import { Cross2Icon, UploadIcon } from "@radix-ui/react-icons"
-import { useControllableState } from "@radix-ui/react-use-controllable-state"
 import Dropzone, {
   type DropzoneProps,
   type FileRejection,
 } from "react-dropzone"
 import { toast } from "sonner"
 
 import { cn, formatBytes } from "@/lib/utils"
+import { useControllableState } from "@/hooks/use-controllable-state"
 import { Button } from "@/components/ui/button"
 import { Progress } from "@/components/ui/progress"
 import { ScrollArea } from "@/components/ui/scroll-area"

src/hooks/use-callback-ref.ts

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: never[]) => unknown>(
+  callback: T | undefined
+): T {
+  const callbackRef = React.useRef(callback)
+
+  React.useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)) as T,
+    []
+  )
+}
+
+export { useCallbackRef }

src/hooks/use-controllable-state.ts

@@ -0,0 +1,67 @@
+import * as React from "react"
+
+import { useCallbackRef } from "@/hooks/use-callback-ref"
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
+ */
+
+type UseControllableStateParams<T> = {
+  prop?: T | undefined
+  defaultProp?: T | undefined
+  onChange?: (state: T) => void
+}
+
+type SetStateFn<T> = (prevState?: T) => T
+
+function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange = () => {},
+}: UseControllableStateParams<T>) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+    defaultProp,
+    onChange,
+  })
+  const isControlled = prop !== undefined
+  const value = isControlled ? prop : uncontrolledProp
+  const handleChange = useCallbackRef(onChange)
+
+  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> =
+    React.useCallback(
+      (nextValue) => {
+        if (isControlled) {
+          const setter = nextValue as SetStateFn<T>
+          const value =
+            typeof nextValue === "function" ? setter(prop) : nextValue
+          if (value !== prop) handleChange(value as T)
+        } else {
+          setUncontrolledProp(nextValue)
+        }
+      },
+      [isControlled, prop, setUncontrolledProp, handleChange]
+    )
+
+  return [value, setValue] as const
+}
+
+function useUncontrolledState<T>({
+  defaultProp,
+  onChange,
+}: Omit<UseControllableStateParams<T>, "prop">) {
+  const uncontrolledState = React.useState<T | undefined>(defaultProp)
+  const [value] = uncontrolledState
+  const prevValueRef = React.useRef(value)
+  const handleChange = useCallbackRef(onChange)
+
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value as T)
+      prevValueRef.current = value
+    }
+  }, [value, prevValueRef, handleChange])
+
+  return uncontrolledState
+}
+
+export { useControllableState }