draft: upgrade to react 19

.vscode/remix.code-snippets

@@ -56,17 +56,6 @@
 			"}",
 		],
 	},
-	"meta": {
-		"prefix": "/meta",
-		"scope": "typescriptreact,javascriptreact,typescript,javascript",
-		"body": [
-			"import type { MetaFunction } from '@remix-run/node'",
-			"",
-			"export const meta: MetaFunction<typeof loader> = ({ data }) => [{",
-			"  title: 'Title',",
-			"}]",
-		],
-	},
 	"shouldRevalidate": {
 		"prefix": "/shouldRevalidate",
 		"scope": "typescriptreact,javascriptreact,typescript,javascript",

app/components/ui/button.tsx

@@ -39,20 +39,25 @@ export interface ButtonProps
 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 		VariantProps<typeof buttonVariants> {
 	asChild?: boolean
+	ref?: React.RefObject<HTMLButtonElement>
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : 'button'
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
-				{...props}
-			/>
-		)
-	},
-)
+const Button = ({
+	ref,
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: ButtonProps) => {
+	const Comp = asChild ? Slot : 'button'
+	return (
+		<Comp
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	)
+}
 Button.displayName = 'Button'
 
 export { Button, buttonVariants }

app/components/ui/checkbox.tsx

@@ -10,10 +10,11 @@ export type CheckboxProps = Omit<
 	type?: string
 }
 
-const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Checkbox = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) => (
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
@@ -35,7 +36,7 @@ const Checkbox = React.forwardRef<
 			</svg>
 		</CheckboxPrimitive.Indicator>
 	</CheckboxPrimitive.Root>
-))
+)
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
 export { Checkbox }

app/components/ui/dropdown-menu.tsx

@@ -15,12 +15,15 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
-const DropdownMenuSubTrigger = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-		inset?: boolean
-	}
->(({ className, inset, children, ...props }, ref) => (
+const DropdownMenuSubTrigger = ({
+	ref,
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean
+}) => (
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
@@ -33,14 +36,15 @@ const DropdownMenuSubTrigger = React.forwardRef<
 		{children}
 		<span className="ml-auto h-4 w-4">▶️</span>
 	</DropdownMenuPrimitive.SubTrigger>
-))
+)
 DropdownMenuSubTrigger.displayName =
 	DropdownMenuPrimitive.SubTrigger.displayName
 
-const DropdownMenuSubContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+const DropdownMenuSubContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => (
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
@@ -49,14 +53,16 @@ const DropdownMenuSubContent = React.forwardRef<
 		)}
 		{...props}
 	/>
-))
+)
 DropdownMenuSubContent.displayName =
 	DropdownMenuPrimitive.SubContent.displayName
 
-const DropdownMenuContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const DropdownMenuContent = ({
+	ref,
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) => (
 	<DropdownMenuPrimitive.Portal>
 		<DropdownMenuPrimitive.Content
 			ref={ref}
@@ -68,15 +74,17 @@ const DropdownMenuContent = React.forwardRef<
 			{...props}
 		/>
 	</DropdownMenuPrimitive.Portal>
-))
+)
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
-const DropdownMenuItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-		inset?: boolean
-	}
->(({ className, inset, ...props }, ref) => (
+const DropdownMenuItem = ({
+	ref,
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean
+}) => (
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
@@ -86,13 +94,16 @@ const DropdownMenuItem = React.forwardRef<
 		)}
 		{...props}
 	/>
-))
+)
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+const DropdownMenuCheckboxItem = ({
+	ref,
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => (
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
@@ -118,14 +129,18 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 		</span>
 		{children}
 	</DropdownMenuPrimitive.CheckboxItem>
-))
+)
 DropdownMenuCheckboxItem.displayName =
 	DropdownMenuPrimitive.CheckboxItem.displayName
 
-const DropdownMenuRadioItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
+const DropdownMenuRadioItem = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+	ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>
+}) => (
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
@@ -141,15 +156,17 @@ const DropdownMenuRadioItem = React.forwardRef<
 		</span>
 		{children}
 	</DropdownMenuPrimitive.RadioItem>
-))
+)
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
-const DropdownMenuLabel = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-		inset?: boolean
-	}
->(({ className, inset, ...props }, ref) => (
+const DropdownMenuLabel = ({
+	ref,
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean
+}) => (
 	<DropdownMenuPrimitive.Label
 		ref={ref}
 		className={cn(
@@ -159,19 +176,20 @@ const DropdownMenuLabel = React.forwardRef<
 		)}
 		{...props}
 	/>
-))
+)
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
-const DropdownMenuSeparator = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const DropdownMenuSeparator = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) => (
 	<DropdownMenuPrimitive.Separator
 		ref={ref}
 		className={cn('-mx-1 my-1 h-px bg-muted', className)}
 		{...props}
 	/>
-))
+)
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
 const DropdownMenuShortcut = ({

app/components/ui/input-otp.tsx

@@ -3,10 +3,12 @@ import * as React from 'react'
 
 import { cn } from '#app/utils/misc.tsx'
 
-const InputOTP = React.forwardRef<
-	React.ElementRef<typeof OTPInput>,
-	React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
+const InputOTP = ({
+	ref,
+	className,
+	containerClassName,
+	...props
+}: React.ComponentProps<typeof OTPInput>) => (
 	<OTPInput
 		ref={ref}
 		containerClassName={cn(
@@ -16,21 +18,26 @@ const InputOTP = React.forwardRef<
 		className={cn('disabled:cursor-not-allowed', className)}
 		{...props}
 	/>
-))
+)
 InputOTP.displayName = 'InputOTP'
 
-const InputOTPGroup = React.forwardRef<
-	React.ElementRef<'div'>,
-	React.ComponentPropsWithoutRef<'div'>
->(({ className, ...props }, ref) => (
+const InputOTPGroup = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<'div'>) => (
 	<div ref={ref} className={cn('flex items-center', className)} {...props} />
-))
+)
 InputOTPGroup.displayName = 'InputOTPGroup'
 
-const InputOTPSlot = React.forwardRef<
-	React.ElementRef<'div'>,
-	React.ComponentPropsWithoutRef<'div'> & { index: number }
->(({ index, className, ...props }, ref) => {
+const InputOTPSlot = ({
+	ref,
+	index,
+	className,
+	...props
+}: React.ComponentProps<'div'> & {
+	index: number
+}) => {
 	const inputOTPContext = React.useContext(OTPInputContext)
 	const slot = inputOTPContext.slots[index]
 	if (!slot) throw new Error('Invalid slot index')
@@ -54,17 +61,14 @@ const InputOTPSlot = React.forwardRef<
 			)}
 		</div>
 	)
-})
+}
 InputOTPSlot.displayName = 'InputOTPSlot'
 
-const InputOTPSeparator = React.forwardRef<
-	React.ElementRef<'div'>,
-	React.ComponentPropsWithoutRef<'div'>
->(({ ...props }, ref) => (
+const InputOTPSeparator = ({ ref, ...props }: React.ComponentProps<'div'>) => (
 	<div ref={ref} role="separator" {...props}>
 		-
 	</div>
-))
+)
 InputOTPSeparator.displayName = 'InputOTPSeparator'
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

app/components/ui/input.tsx

@@ -3,23 +3,23 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 export interface InputProps
-	extends React.InputHTMLAttributes<HTMLInputElement> {}
+	extends React.InputHTMLAttributes<HTMLInputElement> {
+	ref?: React.RefObject<HTMLInputElement>
+}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({ className, type, ...props }, ref) => {
-		return (
-			<input
-				type={type}
-				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
-					className,
-				)}
-				ref={ref}
-				{...props}
-			/>
-		)
-	},
-)
+const Input = ({ ref, className, type, ...props }: InputProps) => {
+	return (
+		<input
+			type={type}
+			className={cn(
+				'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	)
+}
 Input.displayName = 'Input'
 
 export { Input }