From 8b0f67417edea35b40408344e71b7647af0042b6 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 21 Jun 2024 07:42:27 +0000 Subject: [PATCH 1/3] fix(deps): update dependency react-datepicker to v7 --- packages/ui/package.json | 2 +- pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index 4b6d42821c..812eb09ab8 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -94,7 +94,7 @@ "@ultraviolet/icons": "workspace:*", "@ultraviolet/themes": "workspace:*", "deepmerge": "4.3.1", - "react-datepicker": "6.9.0", + "react-datepicker": "7.1.0", "react-select": "5.8.0", "react-toastify": "10.0.5", "react-use-clipboard": "1.0.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index afd6845727..8053d4bb80 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -640,8 +640,8 @@ importers: specifier: 4.3.1 version: 4.3.1 react-datepicker: - specifier: 6.9.0 - version: 6.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 7.1.0 + version: 7.1.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) @@ -7158,8 +7158,8 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' - react-datepicker@6.9.0: - resolution: {integrity: sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==} + react-datepicker@7.1.0: + resolution: {integrity: sha512-Z91n5ybhmzI+YChj1ZG7ntPPOmHR2Dh4jbIl+mNgKXKoxyzUQBh7M3eQaFOwrBCVdKy5vsj370/ocQlGu1qsGA==} peerDependencies: react: ^16.9.0 || ^17 || ^18 react-dom: ^16.9.0 || ^17 || ^18 @@ -16841,7 +16841,7 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-datepicker@6.9.0(react-dom@18.3.1(react@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): dependencies: '@floating-ui/react': 0.26.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1) clsx: 2.1.1 From fa1d7716e984c9cc152ab4b3bb41f28c6d502c68 Mon Sep 17 00:00:00 2001 From: Scaleway Bot Date: Fri, 21 Jun 2024 07:42:54 +0000 Subject: [PATCH 2/3] chore: add changeset renovate-d243585 --- .changeset/renovate-d243585.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/renovate-d243585.md diff --git a/.changeset/renovate-d243585.md b/.changeset/renovate-d243585.md new file mode 100644 index 0000000000..d20f276dc2 --- /dev/null +++ b/.changeset/renovate-d243585.md @@ -0,0 +1,5 @@ +--- +'@ultraviolet/ui': patch +--- + +Updated dependency `react-datepicker` to `7.1.0`. From 4d1b8426a0dd9c674e45824b27336764db783cdf Mon Sep 17 00:00:00 2001 From: Alexandre Philibeaux Date: Thu, 22 Aug 2024 18:33:59 +0200 Subject: [PATCH 3/3] fix(react-date-picker): update types Signed-off-by: Alexandre Philibeaux --- package.json | 1 - packages/ui/package.json | 3 +- .../ui/src/components/DateInput/index.tsx | 78 ++++++++++--------- pnpm-lock.yaml | 28 ++----- 4 files changed, 48 insertions(+), 62 deletions(-) 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