Skip to content

Commit c851166

Browse files
ShchepotinShchepotin
committed
feat(app): remove deprecated forwardRef
1 parent cb1e453 commit c851166

File tree

15 files changed

+135
-251
lines changed

15 files changed

+135
-251
lines changed

‎src/components/form/autocomplete/form-autocomplete.tsx

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { ForwardedRef, forwardRef } from "react";
3+
import { Ref } from "react";
44
import {
55
Controller,
66
ControllerProps,
@@ -26,19 +26,19 @@ export type AutocompleteInputProps<T> = {
2626
getOptionLabel: (option: T) => string;
2727
};
2828

29-
function AutocompleteInputRaw<T>(
29+
function AutocompleteInput<T>(
3030
props: AutocompleteInputProps<T> & {
3131
name: string;
3232
value: T | undefined | null;
3333
onChange: (value: T) => void;
3434
onBlur: () => void;
35-
},
36-
ref?: ForwardedRef<HTMLDivElement | null>
35+
ref?: Ref<HTMLDivElement | null>;
36+
}
3737
) {
3838
return (
3939
<FormControl error={!!props.error} disabled={props.disabled} fullWidth>
4040
<Autocomplete
41-
ref={ref}
41+
ref={props.ref}
4242
id={`autocomplete-${props.name}`}
4343
options={props.options}
4444
value={props.value}
@@ -66,15 +66,6 @@ function AutocompleteInputRaw<T>(
6666
);
6767
}
6868

69-
const AutocompleteInput = forwardRef(AutocompleteInputRaw) as never as <T>(
70-
props: AutocompleteInputProps<T> & {
71-
name: string;
72-
value: T | undefined | null;
73-
onChange: (value: T) => void;
74-
onBlur: () => void;
75-
} & { ref?: ForwardedRef<HTMLDivElement | null> }
76-
) => ReturnType<typeof AutocompleteInputRaw>;
77-
7869
function FormAutocompleteInput<
7970
TFieldValues extends FieldValues = FieldValues,
8071
T = unknown,

‎src/components/form/checkbox-boolean/form-checkbox-boolean.tsx

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { ChangeEvent, ForwardedRef, forwardRef } from "react";
3+
import { ChangeEvent, Ref } from "react";
44
import {
55
Controller,
66
ControllerProps,
@@ -23,14 +23,14 @@ export type CheckboxBooleanInputProps = {
2323
testId?: string;
2424
};
2525

26-
function CheckboxBooleanInputRaw(
26+
function CheckboxBooleanInput(
2727
props: CheckboxBooleanInputProps & {
2828
name: string;
2929
value: boolean | null;
3030
onChange: (value: boolean) => void;
3131
onBlur: () => void;
32-
},
33-
ref?: ForwardedRef<HTMLDivElement | null>
32+
ref?: Ref<HTMLDivElement | null>;
33+
}
3434
) {
3535
const value = props.value ?? false;
3636
const onChange = (
@@ -46,7 +46,7 @@ function CheckboxBooleanInputRaw(
4646
variant="standard"
4747
error={!!props.error}
4848
>
49-
<FormGroup ref={ref}>
49+
<FormGroup ref={props.ref}>
5050
<FormControlLabel
5151
control={
5252
<Checkbox
@@ -68,15 +68,6 @@ function CheckboxBooleanInputRaw(
6868
);
6969
}
7070

71-
const CheckboxBooleanInput = forwardRef(CheckboxBooleanInputRaw) as never as (
72-
props: CheckboxBooleanInputProps & {
73-
name: string;
74-
value: boolean | null;
75-
onChange: (value: boolean) => void;
76-
onBlur: () => void;
77-
} & { ref?: ForwardedRef<HTMLDivElement | null> }
78-
) => ReturnType<typeof CheckboxBooleanInputRaw>;
79-
8071
function FormCheckboxBooleanInput<
8172
TFieldValues extends FieldValues = FieldValues,
8273
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

‎src/components/form/checkbox/form-checkbox.tsx

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { ForwardedRef, forwardRef } from "react";
3+
import { Ref } from "react";
44
import {
55
Controller,
66
ControllerProps,
@@ -28,14 +28,14 @@ export type CheckboxInputProps<T> = {
2828
renderOption: (option: T) => React.ReactNode;
2929
};
3030

31-
function CheckboxInputRaw<T>(
31+
function CheckboxInput<T>(
3232
props: CheckboxInputProps<T> & {
3333
name: string;
3434
value: T[] | undefined | null;
3535
onChange: (value: T[]) => void;
3636
onBlur: () => void;
37-
},
38-
ref?: ForwardedRef<HTMLDivElement | null>
37+
ref?: Ref<HTMLDivElement | null>;
38+
}
3939
) {
4040
const value = props.value ?? [];
4141
const onChange = (checkboxValue: T) => () => {
@@ -61,7 +61,7 @@ function CheckboxInputRaw<T>(
6161
<FormLabel component="legend" data-testid={`${props.testId}-label`}>
6262
{props.label}
6363
</FormLabel>
64-
<FormGroup ref={ref}>
64+
<FormGroup ref={props.ref}>
6565
{props.options.map((option) => (
6666
<FormControlLabel
6767
key={props.keyExtractor(option)}
@@ -88,15 +88,6 @@ function CheckboxInputRaw<T>(
8888
);
8989
}
9090

91-
const CheckboxInput = forwardRef(CheckboxInputRaw) as never as <T>(
92-
props: CheckboxInputProps<T> & {
93-
name: string;
94-
value: T[] | undefined | null;
95-
onChange: (value: T[]) => void;
96-
onBlur: () => void;
97-
} & { ref?: ForwardedRef<HTMLDivElement | null> }
98-
) => ReturnType<typeof CheckboxInputRaw>;
99-
10091
function FormCheckboxInput<
10192
TFieldValues extends FieldValues = FieldValues,
10293
T = unknown,

‎src/components/form/date-pickers/date-picker.tsx

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
FieldPath,
1111
FieldValues,
1212
} from "react-hook-form";
13-
import { ForwardedRef, forwardRef } from "react";
13+
import { Ref } from "react";
1414
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
1515
import useLanguage from "@/services/i18n/use-language";
1616
import { getValueByKey } from "@/components/form/date-pickers/helper";
@@ -29,23 +29,15 @@ type DatePickerFieldProps = {
2929
error?: string;
3030
defaultValue?: ValueDateType;
3131
};
32-
const DatePickerInput = forwardRef(DatePickerInputRaw) as never as (
33-
props: DatePickerFieldProps & {
34-
name: string;
35-
value: ValueDateType;
36-
onChange: (value: ValueDateType) => void;
37-
onBlur: () => void;
38-
} & { ref?: ForwardedRef<HTMLDivElement | null> }
39-
) => ReturnType<typeof DatePickerInputRaw>;
4032

41-
function DatePickerInputRaw(
33+
function DatePickerInput(
4234
props: DatePickerFieldProps & {
4335
name: string;
4436
value: ValueDateType;
4537
onChange: (value: ValueDateType) => void;
4638
onBlur: () => void;
47-
},
48-
ref?: ForwardedRef<HTMLDivElement | null>
39+
ref?: Ref<HTMLDivElement | null>;
40+
}
4941
) {
5042
const language = useLanguage();
5143

@@ -55,7 +47,7 @@ function DatePickerInputRaw(
5547
adapterLocale={getValueByKey(language)}
5648
>
5749
<DatePicker
58-
ref={ref}
50+
ref={props.ref}
5951
name={props.name}
6052
label={props.label}
6153
value={props.value}
@@ -79,6 +71,7 @@ function DatePickerInputRaw(
7971
</LocalizationProvider>
8072
);
8173
}
74+
8275
function FormDatePickerInput<
8376
TFieldValues extends FieldValues = FieldValues,
8477
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

‎src/components/form/date-pickers/date-time-picker.tsx

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
FieldPath,
1111
FieldValues,
1212
} from "react-hook-form";
13-
import { ForwardedRef, forwardRef } from "react";
13+
import { Ref } from "react";
1414
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
1515
import useLanguage from "@/services/i18n/use-language";
1616
import { getValueByKey } from "@/components/form/date-pickers/helper";
@@ -29,23 +29,15 @@ type DateTimePickerFieldProps = {
2929
error?: string;
3030
defaultValue?: ValueDateType;
3131
};
32-
const DateTimePickerInput = forwardRef(DateTimePickerInputRaw) as never as (
33-
props: DateTimePickerFieldProps & {
34-
name: string;
35-
value: ValueDateType;
36-
onChange: (value: ValueDateType) => void;
37-
onBlur: () => void;
38-
} & { ref?: ForwardedRef<HTMLDivElement | null> }
39-
) => ReturnType<typeof DateTimePickerInputRaw>;
4032

41-
function DateTimePickerInputRaw(
33+
function DateTimePickerInput(
4234
props: DateTimePickerFieldProps & {
4335
name: string;
4436
value: ValueDateType;
4537
onChange: (value: ValueDateType) => void;
4638
onBlur: () => void;
47-
},
48-
ref?: ForwardedRef<HTMLDivElement | null>
39+
ref?: Ref<HTMLDivElement | null>;
40+
}
4941
) {
5042
const language = useLanguage();
5143

@@ -55,7 +47,7 @@ function DateTimePickerInputRaw(
5547
adapterLocale={getValueByKey(language)}
5648
>
5749
<DateTimePicker
58-
ref={ref}
50+
ref={props.ref}
5951
name={props.name}
6052
label={props.label}
6153
value={props.value}
@@ -81,6 +73,7 @@ function DateTimePickerInputRaw(
8173
</LocalizationProvider>
8274
);
8375
}
76+
8477
function FormDateTimePickerInput<
8578
TFieldValues extends FieldValues = FieldValues,
8679
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

‎src/components/form/date-pickers/time-picker.tsx

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
FieldPath,
1212
FieldValues,
1313
} from "react-hook-form";
14-
import { ForwardedRef, forwardRef } from "react";
14+
import { Ref } from "react";
1515
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
1616
import useLanguage from "@/services/i18n/use-language";
1717
import { getValueByKey } from "@/components/form/date-pickers/helper";
@@ -33,23 +33,14 @@ type TimePickerFieldProps = {
3333
timeSteps?: TimeStepOptions | undefined;
3434
};
3535

36-
const TimePickerInput = forwardRef(TimePickerInputRaw) as never as (
36+
function TimePickerInput(
3737
props: TimePickerFieldProps & {
3838
name: string;
3939
value: ValueDateType;
4040
onChange: (value: ValueDateType) => void;
4141
onBlur: () => void;
42-
} & { ref?: ForwardedRef<HTMLDivElement | null> }
43-
) => ReturnType<typeof TimePickerInputRaw>;
44-
45-
function TimePickerInputRaw(
46-
props: TimePickerFieldProps & {
47-
name: string;
48-
value: ValueDateType;
49-
onChange: (value: ValueDateType) => void;
50-
onBlur: () => void;
51-
},
52-
ref?: ForwardedRef<HTMLDivElement | null>
42+
ref?: Ref<HTMLDivElement | null>;
43+
}
5344
) {
5445
const language = useLanguage();
5546

@@ -59,7 +50,7 @@ function TimePickerInputRaw(
5950
adapterLocale={getValueByKey(language)}
6051
>
6152
<TimePicker
62-
ref={ref}
53+
ref={props.ref}
6354
name={props.name}
6455
label={props.label}
6556
value={props.value}
@@ -87,6 +78,7 @@ function TimePickerInputRaw(
8778
</LocalizationProvider>
8879
);
8980
}
81+
9082
function FormTimePickerInput<
9183
TFieldValues extends FieldValues = FieldValues,
9284
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

‎src/components/form/multiple-select-extended/form-multiple-select-extended.tsx

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,7 @@ import Card from "@mui/material/Card";
66
import CardContent from "@mui/material/CardContent";
77
import TextField from "@mui/material/TextField";
88
import ClickAwayListener from "@mui/material/ClickAwayListener";
9-
import React, {
10-
ForwardedRef,
11-
forwardRef,
12-
useState,
13-
useRef,
14-
useEffect,
15-
} from "react";
9+
import React, { Ref, useState, useRef, useEffect } from "react";
1610
import {
1711
Controller,
1812
ControllerProps,
@@ -47,20 +41,21 @@ type MultipleSelectExtendedInputProps<T extends object> = {
4741
);
4842

4943
const MUIComponents = {
50-
List: forwardRef<HTMLDivElement, ListProps>(function MuiList(
51-
{ style, children },
52-
listRef
53-
) {
44+
List: function MuiList({
45+
style,
46+
children,
47+
ref,
48+
}: ListProps & { ref?: Ref<HTMLDivElement> }) {
5449
return (
5550
<List
5651
style={{ padding: 0, ...style, margin: 0 }}
5752
component="div"
58-
ref={listRef}
53+
ref={ref}
5954
>
6055
{children}
6156
</List>
6257
);
63-
}),
58+
},
6459

6560
Item: ({ children, ...props }: ItemProps<unknown>) => {
6661
return (
@@ -71,14 +66,14 @@ const MUIComponents = {
7166
},
7267
};
7368

74-
function MultipleSelectExtendedInputRaw<T extends object>(
69+
function MultipleSelectExtendedInput<T extends object>(
7570
props: MultipleSelectExtendedInputProps<T> & {
7671
name: string;
7772
value: T[] | null;
7873
onChange: (value: T[]) => void;
7974
onBlur: () => void;
80-
},
81-
ref?: ForwardedRef<HTMLDivElement | null>
75+
ref?: Ref<HTMLDivElement | null>;
76+
}
8277
) {
8378
const [isOpen, setIsOpen] = useState(false);
8479
const boxRef = useRef<HTMLInputElement | null>(null);
@@ -96,7 +91,7 @@ function MultipleSelectExtendedInputRaw<T extends object>(
9691
<div>
9792
<Box mb={0.5} ref={boxRef}>
9893
<TextField
99-
ref={ref}
94+
ref={props.ref}
10095
name={props.name}
10196
value={props.value ? props.renderSelected(props.value) : ""}
10297
onBlur={props.onBlur}
@@ -188,17 +183,6 @@ function MultipleSelectExtendedInputRaw<T extends object>(
188183
);
189184
}
190185

191-
const MultipleSelectExtendedInput = forwardRef(
192-
MultipleSelectExtendedInputRaw
193-
) as never as <T extends object>(
194-
props: MultipleSelectExtendedInputProps<T> & {
195-
name: string;
196-
value: T[] | null;
197-
onChange: (value: T[]) => void;
198-
onBlur: () => void;
199-
} & { ref?: ForwardedRef<HTMLDivElement | null> }
200-
) => ReturnType<typeof MultipleSelectExtendedInputRaw>;
201-
202186
function FormMultipleSelectExtendedInput<
203187
TFieldValues extends FieldValues = FieldValues,
204188
T extends object = object,

0 commit comments

Comments
 (0)