Skip to content

Commit 391973d

Browse files
jacobparisjacobparis
committed
fix: remove forwardRef
1 parent 2d797a9 commit 391973d

File tree

9 files changed

+173
-133
lines changed

9 files changed

+173
-133
lines changed

‎app/components/ui/button.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,25 @@ export interface ButtonProps
3939
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
4040
VariantProps<typeof buttonVariants> {
4141
asChild?: boolean
42+
ref?: React.RefObject<HTMLButtonElement>
4243
}
4344

44-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
45-
({ className, variant, size, asChild = false, ...props }, ref) => {
46-
const Comp = asChild ? Slot : 'button'
47-
return (
48-
<Comp
49-
className={cn(buttonVariants({ variant, size, className }))}
50-
ref={ref}
51-
{...props}
52-
/>
53-
)
54-
},
55-
)
45+
const Button = ({
46+
ref,
47+
className,
48+
variant,
49+
size,
50+
asChild = false,
51+
...props
52+
}: ButtonProps) => {
53+
const Comp = asChild ? Slot : 'button'
54+
return (
55+
<Comp
56+
className={cn(buttonVariants({ variant, size, className }))}
57+
{...props}
58+
/>
59+
)
60+
}
5661
Button.displayName = 'Button'
5762

5863
export { Button, buttonVariants }

‎app/components/ui/checkbox.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ export type CheckboxProps = Omit<
1010
type?: string
1111
}
1212

13-
const Checkbox = React.forwardRef<
14-
React.ElementRef<typeof CheckboxPrimitive.Root>,
15-
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
16-
>(({ className, ...props }, ref) => (
13+
const Checkbox = ({
14+
ref,
15+
className,
16+
...props
17+
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) => (
1718
<CheckboxPrimitive.Root
1819
ref={ref}
1920
className={cn(
@@ -35,7 +36,7 @@ const Checkbox = React.forwardRef<
3536
</svg>
3637
</CheckboxPrimitive.Indicator>
3738
</CheckboxPrimitive.Root>
38-
))
39+
)
3940
Checkbox.displayName = CheckboxPrimitive.Root.displayName
4041

4142
export { Checkbox }

‎app/components/ui/dropdown-menu.tsx‎

Lines changed: 64 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,15 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
1515

1616
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
1717

18-
const DropdownMenuSubTrigger = React.forwardRef<
19-
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
20-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
21-
inset?: boolean
22-
}
23-
>(({ className, inset, children, ...props }, ref) => (
18+
const DropdownMenuSubTrigger = ({
19+
ref,
20+
className,
21+
inset,
22+
children,
23+
...props
24+
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
25+
inset?: boolean
26+
}) => (
2427
<DropdownMenuPrimitive.SubTrigger
2528
ref={ref}
2629
className={cn(
@@ -33,14 +36,15 @@ const DropdownMenuSubTrigger = React.forwardRef<
3336
{children}
3437
<span className="ml-auto h-4 w-4">▶️</span>
3538
</DropdownMenuPrimitive.SubTrigger>
36-
))
39+
)
3740
DropdownMenuSubTrigger.displayName =
3841
DropdownMenuPrimitive.SubTrigger.displayName
3942

40-
const DropdownMenuSubContent = React.forwardRef<
41-
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
42-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
43-
>(({ className, ...props }, ref) => (
43+
const DropdownMenuSubContent = ({
44+
ref,
45+
className,
46+
...props
47+
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => (
4448
<DropdownMenuPrimitive.SubContent
4549
ref={ref}
4650
className={cn(
@@ -49,14 +53,16 @@ const DropdownMenuSubContent = React.forwardRef<
4953
)}
5054
{...props}
5155
/>
52-
))
56+
)
5357
DropdownMenuSubContent.displayName =
5458
DropdownMenuPrimitive.SubContent.displayName
5559

56-
const DropdownMenuContent = React.forwardRef<
57-
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
58-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
59-
>(({ className, sideOffset = 4, ...props }, ref) => (
60+
const DropdownMenuContent = ({
61+
ref,
62+
className,
63+
sideOffset = 4,
64+
...props
65+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) => (
6066
<DropdownMenuPrimitive.Portal>
6167
<DropdownMenuPrimitive.Content
6268
ref={ref}
@@ -68,15 +74,17 @@ const DropdownMenuContent = React.forwardRef<
6874
{...props}
6975
/>
7076
</DropdownMenuPrimitive.Portal>
71-
))
77+
)
7278
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
7379

74-
const DropdownMenuItem = React.forwardRef<
75-
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
76-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
77-
inset?: boolean
78-
}
79-
>(({ className, inset, ...props }, ref) => (
80+
const DropdownMenuItem = ({
81+
ref,
82+
className,
83+
inset,
84+
...props
85+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
86+
inset?: boolean
87+
}) => (
8088
<DropdownMenuPrimitive.Item
8189
ref={ref}
8290
className={cn(
@@ -86,13 +94,16 @@ const DropdownMenuItem = React.forwardRef<
8694
)}
8795
{...props}
8896
/>
89-
))
97+
)
9098
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
9199

92-
const DropdownMenuCheckboxItem = React.forwardRef<
93-
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
94-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
95-
>(({ className, children, checked, ...props }, ref) => (
100+
const DropdownMenuCheckboxItem = ({
101+
ref,
102+
className,
103+
children,
104+
checked,
105+
...props
106+
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => (
96107
<DropdownMenuPrimitive.CheckboxItem
97108
ref={ref}
98109
className={cn(
@@ -118,14 +129,18 @@ const DropdownMenuCheckboxItem = React.forwardRef<
118129
</span>
119130
{children}
120131
</DropdownMenuPrimitive.CheckboxItem>
121-
))
132+
)
122133
DropdownMenuCheckboxItem.displayName =
123134
DropdownMenuPrimitive.CheckboxItem.displayName
124135

125-
const DropdownMenuRadioItem = React.forwardRef<
126-
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
127-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
128-
>(({ className, children, ...props }, ref) => (
136+
const DropdownMenuRadioItem = ({
137+
ref,
138+
className,
139+
children,
140+
...props
141+
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
142+
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>
143+
}) => (
129144
<DropdownMenuPrimitive.RadioItem
130145
ref={ref}
131146
className={cn(
@@ -141,15 +156,17 @@ const DropdownMenuRadioItem = React.forwardRef<
141156
</span>
142157
{children}
143158
</DropdownMenuPrimitive.RadioItem>
144-
))
159+
)
145160
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
146161

147-
const DropdownMenuLabel = React.forwardRef<
148-
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
149-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
150-
inset?: boolean
151-
}
152-
>(({ className, inset, ...props }, ref) => (
162+
const DropdownMenuLabel = ({
163+
ref,
164+
className,
165+
inset,
166+
...props
167+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
168+
inset?: boolean
169+
}) => (
153170
<DropdownMenuPrimitive.Label
154171
ref={ref}
155172
className={cn(
@@ -159,19 +176,20 @@ const DropdownMenuLabel = React.forwardRef<
159176
)}
160177
{...props}
161178
/>
162-
))
179+
)
163180
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
164181

165-
const DropdownMenuSeparator = React.forwardRef<
166-
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
167-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
168-
>(({ className, ...props }, ref) => (
182+
const DropdownMenuSeparator = ({
183+
ref,
184+
className,
185+
...props
186+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) => (
169187
<DropdownMenuPrimitive.Separator
170188
ref={ref}
171189
className={cn('-mx-1 my-1 h-px bg-muted', className)}
172190
{...props}
173191
/>
174-
))
192+
)
175193
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
176194

177195
const DropdownMenuShortcut = ({

‎app/components/ui/input-otp.tsx‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import * as React from 'react'
33

44
import { cn } from '#app/utils/misc.tsx'
55

6-
const InputOTP = React.forwardRef<
7-
React.ElementRef<typeof OTPInput>,
8-
React.ComponentPropsWithoutRef<typeof OTPInput>
9-
>(({ className, containerClassName, ...props }, ref) => (
6+
const InputOTP = ({
7+
ref,
8+
className,
9+
containerClassName,
10+
...props
11+
}: React.ComponentProps<typeof OTPInput>) => (
1012
<OTPInput
1113
ref={ref}
1214
containerClassName={cn(
@@ -16,21 +18,26 @@ const InputOTP = React.forwardRef<
1618
className={cn('disabled:cursor-not-allowed', className)}
1719
{...props}
1820
/>
19-
))
21+
)
2022
InputOTP.displayName = 'InputOTP'
2123

22-
const InputOTPGroup = React.forwardRef<
23-
React.ElementRef<'div'>,
24-
React.ComponentPropsWithoutRef<'div'>
25-
>(({ className, ...props }, ref) => (
24+
const InputOTPGroup = ({
25+
ref,
26+
className,
27+
...props
28+
}: React.ComponentProps<'div'>) => (
2629
<div ref={ref} className={cn('flex items-center', className)} {...props} />
27-
))
30+
)
2831
InputOTPGroup.displayName = 'InputOTPGroup'
2932

30-
const InputOTPSlot = React.forwardRef<
31-
React.ElementRef<'div'>,
32-
React.ComponentPropsWithoutRef<'div'> & { index: number }
33-
>(({ index, className, ...props }, ref) => {
33+
const InputOTPSlot = ({
34+
ref,
35+
index,
36+
className,
37+
...props
38+
}: React.ComponentProps<'div'> & {
39+
index: number
40+
}) => {
3441
const inputOTPContext = React.useContext(OTPInputContext)
3542
const slot = inputOTPContext.slots[index]
3643
if (!slot) throw new Error('Invalid slot index')
@@ -54,17 +61,14 @@ const InputOTPSlot = React.forwardRef<
5461
)}
5562
</div>
5663
)
57-
})
64+
}
5865
InputOTPSlot.displayName = 'InputOTPSlot'
5966

60-
const InputOTPSeparator = React.forwardRef<
61-
React.ElementRef<'div'>,
62-
React.ComponentPropsWithoutRef<'div'>
63-
>(({ ...props }, ref) => (
67+
const InputOTPSeparator = ({ ref, ...props }: React.ComponentProps<'div'>) => (
6468
<div ref={ref} role="separator" {...props}>
6569
-
6670
</div>
67-
))
71+
)
6872
InputOTPSeparator.displayName = 'InputOTPSeparator'
6973

7074
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

‎app/components/ui/input.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,26 @@ import { cn } from '#app/utils/misc.tsx'
55
export interface InputProps
66
extends React.InputHTMLAttributes<HTMLInputElement> {}
77

8-
const Input = React.forwardRef<HTMLInputElement, InputProps>(
9-
({ className, type, ...props }, ref) => {
10-
return (
11-
<input
12-
type={type}
13-
className={cn(
14-
'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',
15-
className,
16-
)}
17-
ref={ref}
18-
{...props}
19-
/>
20-
)
21-
},
22-
)
8+
const Input = ({
9+
ref,
10+
className,
11+
type,
12+
...props
13+
}: InputProps & {
14+
ref: React.RefObject<HTMLInputElement>
15+
}) => {
16+
return (
17+
<input
18+
type={type}
19+
className={cn(
20+
'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',
21+
className,
22+
)}
23+
ref={ref}
24+
{...props}
25+
/>
26+
)
27+
}
2328
Input.displayName = 'Input'
2429

2530
export { Input }

‎app/components/ui/label.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ const labelVariants = cva(
88
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
99
)
1010

11-
const Label = React.forwardRef<
12-
React.ElementRef<typeof LabelPrimitive.Root>,
13-
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
14-
VariantProps<typeof labelVariants>
15-
>(({ className, ...props }, ref) => (
11+
const Label = ({
12+
ref,
13+
className,
14+
...props
15+
}: React.ComponentProps<typeof LabelPrimitive.Root>) => (
1616
<LabelPrimitive.Root
1717
ref={ref}
1818
className={cn(labelVariants(), className)}
1919
{...props}
2020
/>
21-
))
21+
)
2222
Label.displayName = LabelPrimitive.Root.displayName
2323

2424
export { Label }

0 commit comments

Comments
 (0)