Update next-intl (and other packages), internationalize URLs

components/form/DateField/components/DatePickerCustomHeader.tsx

@@ -19,7 +19,6 @@ export const DatePickerCustomHeader = ({
   prevMonthButtonDisabled,
   nextMonthButtonDisabled,
 }: ReactDatePickerCustomHeaderProps) => {
-  // Bit of a hack. inputRef doesn't work because DatePicker doesn't correctly propagate props
   const locale = useLocale();
 
   return (

components/form/DateField/components/InputDatePicker.tsx

@@ -11,9 +11,12 @@ interface InputProps {
   mask?: string | (string | RegExp)[];
 }
 
-type AllProps = React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
+type AllProps = Omit<
+  React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  >,
+  "ref"
 > &
   InputProps;
 
@@ -26,6 +29,7 @@ export const InputDatePicker = forwardRef<HTMLInputElement, AllProps>(
       inputContainerClass,
       inputClass,
       mask,
+
       ...props
     },
     inputRef,
@@ -43,7 +47,7 @@ export const InputDatePicker = forwardRef<HTMLInputElement, AllProps>(
         )}
       >
         <InputMask
-          ref={inputRef as any}
+          inputRef={inputRef}
           mask={mask ?? ""}
           className={twMerge(
             "w-full border-none bg-transparent text-sm outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0",

components/form/DateField/index.tsx

@@ -2,10 +2,9 @@ import React, { useRef } from "react";
 
 import { getYear, isValid, parse } from "date-fns";
 import fr from "date-fns/locale/fr";
-import { get, range } from "lodash";
+import { get } from "lodash";
 import { useLocale, useTranslations } from "next-intl";
-import DatePicker from "react-datepicker";
-import { registerLocale } from "react-datepicker";
+import DatePicker, { registerLocale } from "react-datepicker";
 import {
   Controller,
   FieldPath,