diff --git a/package.json b/package.json index 793b96968b..ab5d234350 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,6 @@ "@testing-library/user-event": "14.5.2", "@types/node": "20.16.2", "@types/react": "18.3.5", - "@types/react-datepicker": "6.2.0", "@types/react-dom": "18.3.0", "@types/zxcvbn": "4.4.5", "@ultraviolet/themes": "workspace:*", diff --git a/packages/ui/package.json b/packages/ui/package.json index 812eb09ab8..a281aabdf9 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -76,7 +76,6 @@ "@emotion/react": "11.13.3", "@emotion/styled": "11.13.0", "@types/react": "18.3.5", - "@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", diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx index 1bca938b82..11f87d5d00 100644 --- a/packages/ui/src/components/DateInput/index.tsx +++ b/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,16 +187,25 @@ const StyledText = styled(Text)` ` type DateInputProps = Pick< - ReactDatePickerProps, - '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) => void - onFocus?: (event: FocusEvent) => void error?: string required?: boolean format?: (value?: Date | string) => string | undefined @@ -204,13 +213,9 @@ type DateInputProps = Pick< * 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 @@ -218,9 +223,13 @@ type DateInputProps = Pick< size?: 'small' | 'medium' | 'large' readOnly?: boolean tooltip?: string - showMonthYearPicker?: boolean } +type DatePicker = Pick< + DatePickerProps, + 'selectsRange' | 'onChange' | 'selectsMultiple' +> + const DEFAULT_FORMAT: DateInputProps['format'] = value => value instanceof Date ? value.toISOString() : value @@ -256,20 +265,16 @@ export const DateInput = ({ readOnly = false, tooltip, showMonthYearPicker, + selectsMultiple, 'data-testid': dataTestId, -}: DateInputProps) => { +}: DateInputProps & DatePicker) => { 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') { + // TODO: ask why locale type is pick and remove localCode of date-fns registerLocale(localeCode, locale) } @@ -282,15 +287,20 @@ 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 ( <> - } @@ -340,9 +346,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, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8053d4bb80..2013003293 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -152,9 +152,6 @@ importers: '@types/react': specifier: 18.3.5 version: 18.3.5 - '@types/react-datepicker': - specifier: 6.2.0 - version: 6.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@types/react-dom': specifier: 18.3.0 version: 18.3.0 @@ -640,8 +637,8 @@ importers: specifier: 4.3.1 version: 4.3.1 react-datepicker: - specifier: 7.1.0 - version: 7.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 7.3.0 + version: 7.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-select: specifier: 5.8.0 version: 5.8.0(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -667,9 +664,6 @@ importers: '@types/react': specifier: 18.3.5 version: 18.3.5 - '@types/react-datepicker': - specifier: 6.2.0 - version: 6.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@types/react-dom': specifier: 18.3.0 version: 18.3.0 @@ -3156,9 +3150,6 @@ packages: '@types/range-parser@1.2.7': resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==} - '@types/react-datepicker@6.2.0': - resolution: {integrity: sha512-+JtO4Fm97WLkJTH8j8/v3Ldh7JCNRwjMYjRaKh4KHH0M3jJoXtwiD3JBCsdlg3tsFIw9eQSqyAPeVDN2H2oM9Q==} - '@types/react-dom@18.3.0': resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} @@ -7158,8 +7149,8 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' - react-datepicker@7.1.0: - resolution: {integrity: sha512-Z91n5ybhmzI+YChj1ZG7ntPPOmHR2Dh4jbIl+mNgKXKoxyzUQBh7M3eQaFOwrBCVdKy5vsj370/ocQlGu1qsGA==} + react-datepicker@7.3.0: + resolution: {integrity: sha512-EqRKLAtLZUTztiq6a+tjSjQX9ES0Xd229JPckAtyZZ4GoY3rtvNWAzkYZnQUf6zTWT50Ki0+t+W9VRQIkSJLfg==} peerDependencies: react: ^16.9.0 || ^17 || ^18 react-dom: ^16.9.0 || ^17 || ^18 @@ -11930,15 +11921,6 @@ snapshots: '@types/range-parser@1.2.7': {} - '@types/react-datepicker@6.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@floating-ui/react': 0.26.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@types/react': 18.3.5 - date-fns: 3.6.0 - transitivePeerDependencies: - - react - - react-dom - '@types/react-dom@18.3.0': dependencies: '@types/react': 18.3.5 @@ -16841,7 +16823,7 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-datepicker@7.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + react-datepicker@7.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@floating-ui/react': 0.26.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1) clsx: 2.1.1