fix(react-date-picker): update types

package.json

@@ -127,7 +127,6 @@
     "@testing-library/user-event": "14.5.2",
     "@types/node": "20.15.0",
     "@types/react": "18.3.4",
-    "@types/react-datepicker": "6.2.0",
     "@types/react-dom": "18.3.0",
     "@types/zxcvbn": "4.4.4",
     "@ultraviolet/themes": "workspace:*",

packages/ui/package.json

@@ -76,7 +76,6 @@
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
     "@types/react": "18.3.4",
-    "@types/react-datepicker": "6.2.0",
     "@types/react-dom": "18.3.0",
     "@utils/test": "workspace:*",
     "react": "18.3.1",
@@ -94,7 +93,7 @@
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/themes": "workspace:*",
     "deepmerge": "4.3.1",
-    "react-datepicker": "7.1.0",
+    "react-datepicker": "7.3.0",
     "react-select": "5.8.0",
     "react-toastify": "10.0.5",
     "react-use-clipboard": "1.0.9",

packages/ui/src/components/DateInput/index.tsx

@@ -1,9 +1,9 @@
 import { Global } from '@emotion/react'
 import styled from '@emotion/styled'
 import { Icon } from '@ultraviolet/icons'
-import type { FocusEvent, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { useId } from 'react'
-import type { ReactDatePickerProps } from 'react-datepicker'
+import type { DatePickerProps } from 'react-datepicker'
 import DatePicker, { registerLocale } from 'react-datepicker'
 import { Button } from '../Button'
 import { Stack } from '../Stack'
@@ -187,38 +187,42 @@ const StyledText = styled(Text)`
 `
 
 type DateInputProps = Pick<
-  ReactDatePickerProps<boolean | undefined, boolean>,
-  'locale' | 'onChange'
+  DatePickerProps,
+  | 'locale'
+  | 'maxDate'
+  | 'minDate'
+  | 'excludeDates'
+  | 'startDate'
+  | 'endDate'
+  | 'value'
+  | 'showMonthYearPicker'
+  | 'onBlur'
+  | 'onFocus'
+  | 'disabled'
+  | 'autoFocus'
+  // XOR props
+  | 'selectsRange'
+  | 'onChange'
+  | 'selectsMultiple'
 > & {
-  autoFocus?: boolean
-  disabled?: boolean
-  maxDate?: Date | null
-  minDate?: Date | null
   name?: string
-  onBlur?: (event: FocusEvent<HTMLInputElement>) => void
-  onFocus?: (event: FocusEvent<HTMLInputElement>) => void
   error?: string
   required?: boolean
   format?: (value?: Date | string) => string | undefined
   /**
    * Label of the field
    */
   label?: string
-  value?: Date | string | [Date | null, Date | null]
+  // value?: Date | string | [Date | null, Date | null]
   className?: string
   'data-testid'?: string
-  selectsRange?: boolean
-  startDate?: Date | null
-  endDate?: Date | null
-  excludeDates?: Date[]
   id?: string
   labelDescription?: ReactNode
   success?: string | boolean
   helper?: string
   size?: 'small' | 'medium' | 'large'
   readOnly?: boolean
   tooltip?: string
-  showMonthYearPicker?: boolean
 }
 
 const DEFAULT_FORMAT: DateInputProps['format'] = value =>
@@ -256,18 +260,13 @@ export const DateInput = ({
   readOnly = false,
   tooltip,
   showMonthYearPicker,
+  selectsMultiple,
   'data-testid': dataTestId,
 }: DateInputProps) => {
   const uniqueId = useId()
   const localId = id ?? uniqueId
 
-  // Linked to: https://github.com/Hacker0x01/react-datepicker/issues/3834
-  const ReactDatePicker =
-    (DatePicker as unknown as { default: typeof DatePicker }).default ??
-    DatePicker
-
-  const localeCode =
-    (typeof locale === 'string' ? locale : locale?.code) ?? 'en-GB'
+  const localeCode = (typeof locale === 'string' ? locale : locale) ?? 'en-GB'
 
   if (typeof locale === 'object') {
     registerLocale(localeCode, locale)
@@ -282,15 +281,16 @@ export const DateInput = ({
     endDate !== undefined && endDate !== null ? format(endDate) : ''
   }`
 
-  const valueFormat = selectsRange
-    ? `${valueStart} ${valueEnd}`
-    : format(value as Date)
+  const valueFormat = selectsRange ? `${valueStart} ${valueEnd}` : format(value)
 
   return (
     <>
       <Global styles={style} />
       <StyledWrapper>
-        <ReactDatePicker
+        <DatePicker
+          selectsMultiple={selectsMultiple}
+          onChange={onChange}
+          selectsRange={selectsRange}
           required={required}
           data-testid={dataTestId}
           className={className}
@@ -299,12 +299,8 @@ export const DateInput = ({
           name={name}
           locale={localeCode}
           onBlur={onBlur}
-          onChange={onChange}
           onFocus={onFocus}
-          selected={
-            value && !selectsRange ? new Date(value as Date) : undefined
-          }
-          selectsRange={selectsRange}
+          selected={value && !selectsRange ? new Date(value) : undefined}
           excludeDates={excludeDates}
           showPopperArrow={false}
           popperPlacement="bottom-start"
@@ -322,7 +318,7 @@ export const DateInput = ({
               suffix={
                 <Icon
                   name="calendar-range"
-                  color="neutral"
+                  sentiment="neutral"
                   disabled={disabled}
                 />
               }
@@ -340,9 +336,9 @@ export const DateInput = ({
           dateFormat={showMonthYearPicker ? 'MM/yyyy' : undefined}
           renderCustomHeader={({
             date,
-            /* eslint-disable-next-line @typescript-eslint/unbound-method */
+             
             decreaseMonth,
-            /* eslint-disable-next-line @typescript-eslint/unbound-method */
+             
             increaseMonth,
             prevMonthButtonDisabled,
             nextMonthButtonDisabled,