feat(app): remove deprecated forwardRef

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import {
   Controller,
   ControllerProps,
@@ -26,19 +26,19 @@ export type AutocompleteInputProps<T> = {
   getOptionLabel: (option: T) => string;
 };
 
-function AutocompleteInputRaw<T>(
+function AutocompleteInput<T>(
   props: AutocompleteInputProps<T> & {
     name: string;
     value: T | undefined | null;
     onChange: (value: T) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   return (
     <FormControl error={!!props.error} disabled={props.disabled} fullWidth>
       <Autocomplete
-        ref={ref}
+        ref={props.ref}
         id={`autocomplete-${props.name}`}
         options={props.options}
         value={props.value}
@@ -66,15 +66,6 @@ function AutocompleteInputRaw<T>(
   );
 }
 
-const AutocompleteInput = forwardRef(AutocompleteInputRaw) as never as <T>(
-  props: AutocompleteInputProps<T> & {
-    name: string;
-    value: T | undefined | null;
-    onChange: (value: T) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof AutocompleteInputRaw>;
-
 function FormAutocompleteInput<
   TFieldValues extends FieldValues = FieldValues,
   T = unknown,

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChangeEvent, ForwardedRef, forwardRef } from "react";
+import { ChangeEvent, Ref } from "react";
 import {
   Controller,
   ControllerProps,
@@ -23,14 +23,14 @@ export type CheckboxBooleanInputProps = {
   testId?: string;
 };
 
-function CheckboxBooleanInputRaw(
+function CheckboxBooleanInput(
   props: CheckboxBooleanInputProps & {
     name: string;
     value: boolean | null;
     onChange: (value: boolean) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const value = props.value ?? false;
   const onChange = (
@@ -46,7 +46,7 @@ function CheckboxBooleanInputRaw(
       variant="standard"
       error={!!props.error}
     >
-      <FormGroup ref={ref}>
+      <FormGroup ref={props.ref}>
         <FormControlLabel
           control={
             <Checkbox
@@ -68,15 +68,6 @@ function CheckboxBooleanInputRaw(
   );
 }
 
-const CheckboxBooleanInput = forwardRef(CheckboxBooleanInputRaw) as never as (
-  props: CheckboxBooleanInputProps & {
-    name: string;
-    value: boolean | null;
-    onChange: (value: boolean) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof CheckboxBooleanInputRaw>;
-
 function FormCheckboxBooleanInput<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import {
   Controller,
   ControllerProps,
@@ -28,14 +28,14 @@ export type CheckboxInputProps<T> = {
   renderOption: (option: T) => React.ReactNode;
 };
 
-function CheckboxInputRaw<T>(
+function CheckboxInput<T>(
   props: CheckboxInputProps<T> & {
     name: string;
     value: T[] | undefined | null;
     onChange: (value: T[]) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const value = props.value ?? [];
   const onChange = (checkboxValue: T) => () => {
@@ -61,7 +61,7 @@ function CheckboxInputRaw<T>(
       <FormLabel component="legend" data-testid={`${props.testId}-label`}>
         {props.label}
       </FormLabel>
-      <FormGroup ref={ref}>
+      <FormGroup ref={props.ref}>
         {props.options.map((option) => (
           <FormControlLabel
             key={props.keyExtractor(option)}
@@ -88,15 +88,6 @@ function CheckboxInputRaw<T>(
   );
 }
 
-const CheckboxInput = forwardRef(CheckboxInputRaw) as never as <T>(
-  props: CheckboxInputProps<T> & {
-    name: string;
-    value: T[] | undefined | null;
-    onChange: (value: T[]) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof CheckboxInputRaw>;
-
 function FormCheckboxInput<
   TFieldValues extends FieldValues = FieldValues,
   T = unknown,

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

@@ -10,7 +10,7 @@ import {
   FieldPath,
   FieldValues,
 } from "react-hook-form";
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import useLanguage from "@/services/i18n/use-language";
 import { getValueByKey } from "@/components/form/date-pickers/helper";
@@ -29,23 +29,15 @@ type DatePickerFieldProps = {
   error?: string;
   defaultValue?: ValueDateType;
 };
-const DatePickerInput = forwardRef(DatePickerInputRaw) as never as (
-  props: DatePickerFieldProps & {
-    name: string;
-    value: ValueDateType;
-    onChange: (value: ValueDateType) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof DatePickerInputRaw>;
 
-function DatePickerInputRaw(
+function DatePickerInput(
   props: DatePickerFieldProps & {
     name: string;
     value: ValueDateType;
     onChange: (value: ValueDateType) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const language = useLanguage();
 
@@ -55,7 +47,7 @@ function DatePickerInputRaw(
       adapterLocale={getValueByKey(language)}
     >
       <DatePicker
-        ref={ref}
+        ref={props.ref}
         name={props.name}
         label={props.label}
         value={props.value}
@@ -79,6 +71,7 @@ function DatePickerInputRaw(
     </LocalizationProvider>
   );
 }
+
 function FormDatePickerInput<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

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

@@ -10,7 +10,7 @@ import {
   FieldPath,
   FieldValues,
 } from "react-hook-form";
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import useLanguage from "@/services/i18n/use-language";
 import { getValueByKey } from "@/components/form/date-pickers/helper";
@@ -29,23 +29,15 @@ type DateTimePickerFieldProps = {
   error?: string;
   defaultValue?: ValueDateType;
 };
-const DateTimePickerInput = forwardRef(DateTimePickerInputRaw) as never as (
-  props: DateTimePickerFieldProps & {
-    name: string;
-    value: ValueDateType;
-    onChange: (value: ValueDateType) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof DateTimePickerInputRaw>;
 
-function DateTimePickerInputRaw(
+function DateTimePickerInput(
   props: DateTimePickerFieldProps & {
     name: string;
     value: ValueDateType;
     onChange: (value: ValueDateType) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const language = useLanguage();
 
@@ -55,7 +47,7 @@ function DateTimePickerInputRaw(
       adapterLocale={getValueByKey(language)}
     >
       <DateTimePicker
-        ref={ref}
+        ref={props.ref}
         name={props.name}
         label={props.label}
         value={props.value}
@@ -81,6 +73,7 @@ function DateTimePickerInputRaw(
     </LocalizationProvider>
   );
 }
+
 function FormDateTimePickerInput<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

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

@@ -11,7 +11,7 @@ import {
   FieldPath,
   FieldValues,
 } from "react-hook-form";
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import useLanguage from "@/services/i18n/use-language";
 import { getValueByKey } from "@/components/form/date-pickers/helper";
@@ -33,23 +33,14 @@ type TimePickerFieldProps = {
   timeSteps?: TimeStepOptions | undefined;
 };
 
-const TimePickerInput = forwardRef(TimePickerInputRaw) as never as (
+function TimePickerInput(
   props: TimePickerFieldProps & {
     name: string;
     value: ValueDateType;
     onChange: (value: ValueDateType) => void;
     onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof TimePickerInputRaw>;
-
-function TimePickerInputRaw(
-  props: TimePickerFieldProps & {
-    name: string;
-    value: ValueDateType;
-    onChange: (value: ValueDateType) => void;
-    onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const language = useLanguage();
 
@@ -59,7 +50,7 @@ function TimePickerInputRaw(
       adapterLocale={getValueByKey(language)}
     >
       <TimePicker
-        ref={ref}
+        ref={props.ref}
         name={props.name}
         label={props.label}
         value={props.value}
@@ -87,6 +78,7 @@ function TimePickerInputRaw(
     </LocalizationProvider>
   );
 }
+
 function FormTimePickerInput<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

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

@@ -6,13 +6,7 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import TextField from "@mui/material/TextField";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
-import React, {
-  ForwardedRef,
-  forwardRef,
-  useState,
-  useRef,
-  useEffect,
-} from "react";
+import React, { Ref, useState, useRef, useEffect } from "react";
 import {
   Controller,
   ControllerProps,
@@ -47,20 +41,21 @@ type MultipleSelectExtendedInputProps<T extends object> = {
 );
 
 const MUIComponents = {
-  List: forwardRef<HTMLDivElement, ListProps>(function MuiList(
-    { style, children },
-    listRef
-  ) {
+  List: function MuiList({
+    style,
+    children,
+    ref,
+  }: ListProps & { ref?: Ref<HTMLDivElement> }) {
     return (
       <List
         style={{ padding: 0, ...style, margin: 0 }}
         component="div"
-        ref={listRef}
+        ref={ref}
       >
         {children}
       </List>
     );
-  }),
+  },
 
   Item: ({ children, ...props }: ItemProps<unknown>) => {
     return (
@@ -71,14 +66,14 @@ const MUIComponents = {
   },
 };
 
-function MultipleSelectExtendedInputRaw<T extends object>(
+function MultipleSelectExtendedInput<T extends object>(
   props: MultipleSelectExtendedInputProps<T> & {
     name: string;
     value: T[] | null;
     onChange: (value: T[]) => void;
     onBlur: () => void;
-  },
-  ref?: ForwardedRef<HTMLDivElement | null>
+    ref?: Ref<HTMLDivElement | null>;
+  }
 ) {
   const [isOpen, setIsOpen] = useState(false);
   const boxRef = useRef<HTMLInputElement | null>(null);
@@ -96,7 +91,7 @@ function MultipleSelectExtendedInputRaw<T extends object>(
       <div>
         <Box mb={0.5} ref={boxRef}>
           <TextField
-            ref={ref}
+            ref={props.ref}
             name={props.name}
             value={props.value ? props.renderSelected(props.value) : ""}
             onBlur={props.onBlur}
@@ -188,17 +183,6 @@ function MultipleSelectExtendedInputRaw<T extends object>(
   );
 }
 
-const MultipleSelectExtendedInput = forwardRef(
-  MultipleSelectExtendedInputRaw
-) as never as <T extends object>(
-  props: MultipleSelectExtendedInputProps<T> & {
-    name: string;
-    value: T[] | null;
-    onChange: (value: T[]) => void;
-    onBlur: () => void;
-  } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof MultipleSelectExtendedInputRaw>;
-
 function FormMultipleSelectExtendedInput<
   TFieldValues extends FieldValues = FieldValues,
   T extends object = object,