fix(deps): update dependency react-datepicker to v6 (#3463)

* fix(deps): update dependency react-datepicker to v6 * chore: add changeset renovate-7ac55b2 * fix: update date input * fix: typecheck errors * fix: update unit testing * fix: update date input * fix: update next config --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Scaleway Bot <github@scaleway.com> Co-authored-by: Matthias <mprost@scaleway.com>
scaleway · Jun 12, 2024 · a7c9266 · a7c9266
1 parent 2bf0717
commit a7c9266
Show file tree

Hide file tree

Showing 17 changed files with 141 additions and 117 deletions.
diff --git a/.changeset/renovate-7ac55b2.md b/.changeset/renovate-7ac55b2.md
@@ -0,0 +1,6 @@
+---
+'@ultraviolet/ui': patch
+---
+
+Updated dependency `@types/react-datepicker` to `6.2.0`.
+Updated dependency `react-datepicker` to `6.9.0`.
diff --git a/examples/next-advanced/next.config.js b/examples/next-advanced/next.config.js
@@ -16,6 +16,9 @@ const nextConfig = () => {
     eslint: {
       ignoreDuringBuilds: true,
     },
+    experimental: {
+      esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834
+    },
     transpilePackages: [
       '@ultraviolet/ui',
       '@ultraviolet/form',

diff --git a/examples/next-login/next.config.js b/examples/next-login/next.config.js
@@ -16,6 +16,9 @@ const nextConfig = () => {
     eslint: {
       ignoreDuringBuilds: true,
     },
+    experimental: {
+      esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834
+    },
     transpilePackages: [
       '@ultraviolet/ui',
       '@ultraviolet/form',

diff --git a/examples/next-simple/next.config.js b/examples/next-simple/next.config.js
@@ -16,6 +16,9 @@ const nextConfig = () => {
     eslint: {
       ignoreDuringBuilds: true,
     },
+    experimental: {
+      esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834
+    },
     transpilePackages: [
       '@ultraviolet/ui',
       '@ultraviolet/form',

diff --git a/package.json b/package.json
@@ -129,7 +129,7 @@
     "@testing-library/user-event": "14.5.2",
     "@types/node": "18.19.34",
     "@types/react": "18.3.1",
-    "@types/react-datepicker": "4.19.6",
+    "@types/react-datepicker": "6.2.0",
     "@types/react-dom": "18.3.0",
     "@types/seedrandom": "3.0.8",
     "@types/zxcvbn": "4.4.4",

diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap
@@ -340,7 +340,7 @@ exports[`DateField > should render correctly 1`] = `
                     aria-invalid="false"
                     class="emotion-6 emotion-7"
                     data-size="large"
-                    id=":r1:"
+                    id=":r2:"
                     name="test"
                     type="text"
                     value=""
@@ -715,7 +715,7 @@ exports[`DateField > should render correctly disabled 1`] = `
                     class="emotion-6 emotion-7"
                     data-size="large"
                     disabled=""
-                    id=":r4:"
+                    id=":r6:"
                     name="test"
                     type="text"
                     value=""
@@ -1091,7 +1091,7 @@ exports[`DateField > should trigger events 1`] = `
                     aria-invalid="false"
                     class="emotion-6 emotion-7"
                     data-size="large"
-                    id=":r7:"
+                    id=":ra:"
                     name="test"
                     type="text"
                     value="08/28/2022"

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -76,7 +76,7 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@types/react": "18.3.1",
-    "@types/react-datepicker": "4.19.6",
+    "@types/react-datepicker": "6.2.0",
     "@types/react-dom": "18.3.0",
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/themes": "workspace:*",
@@ -96,7 +96,7 @@
     "@ultraviolet/icons": "workspace:*",
     "@scaleway/use-media": "3.0.1",
     "deepmerge": "4.3.1",
-    "react-datepicker": "4.25.0",
+    "react-datepicker": "6.9.0",
     "react-select": "5.8.0",
     "react-toastify": "10.0.5",
     "react-use-clipboard": "1.0.9",

diff --git a/packages/ui/src/components/BarChart/__stories__/FormattedValuesAndTooltip.stories.tsx b/packages/ui/src/components/BarChart/__stories__/FormattedValuesAndTooltip.stories.tsx
@@ -1,5 +1,5 @@
 import type { StoryFn } from '@storybook/react'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 import { BarChart } from '..'
 import { barChartSimpleData } from './mockData'
 

diff --git a/packages/ui/src/components/BarChart/__stories__/MultiSeries.stories.tsx b/packages/ui/src/components/BarChart/__stories__/MultiSeries.stories.tsx
@@ -1,5 +1,5 @@
 import type { StoryFn } from '@storybook/react'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 import { BarChart } from '..'
 import { barChartMultiData } from './mockData'
 

diff --git a/packages/ui/src/components/BarChart/__stories__/PositiveNegative.stories.tsx b/packages/ui/src/components/BarChart/__stories__/PositiveNegative.stories.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react'
 import type { StoryFn } from '@storybook/react'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 import { BarChart } from '..'
 import { barChartPositiveNegativeData } from './mockData'
 

diff --git a/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx b/packages/ui/src/components/DateInput/__stories__/Controlled.stories.tsx
@@ -4,9 +4,9 @@ import { useState } from 'react'
 import { DateInput } from '..'
 
 export const Controlled: StoryFn<ComponentProps<typeof DateInput>> = args => {
-  const [value, setValue] = useState<Date | [Date | null, Date | null] | null>(
-    new Date('December 17, 1995 03:24:00'),
-  )
+  const [value, setValue] = useState<
+    Date | Date[] | [Date | null, Date | null] | null
+  >(new Date('December 17, 1995 03:24:00'))
 
   return (
     <DateInput