feat(DatePicker): Migrate to react-day-picker v8

packages/react-component-library/cypress/e2e/DatePicker/index.cy.ts

@@ -2,10 +2,10 @@ import { describe, cy, it, before } from 'local-cypress'
 import { addDays, startOfMonth, format } from 'date-fns'
 import { ColorNeutral200 } from '@defencedigital/design-tokens'
 
+import { formatDatesForInput } from '../../../src/components/DatePicker/utils'
 import { DATE_FORMAT } from '../../../src/constants'
 import { hexToRgb } from '../../helpers'
 import selectors from '../../selectors'
-import { formatDatesForInput } from '../../../src/components/DatePicker/utils/formatDatesForInput'
 
 describe('DatePicker', () => {
   describe('when a day is selected', () => {
@@ -23,9 +23,7 @@ describe('DatePicker', () => {
 
     describe('and the first day is clicked', () => {
       before(() => {
-        cy.get(selectors.datePicker.day.inside)
-          .contains('1')
-          .click({ force: true })
+        cy.get(selectors.datePicker.day).contains('1').click({ force: true })
       })
 
       it('should set the value of the input to the date', () => {
@@ -47,7 +45,7 @@ describe('DatePicker', () => {
 
   describe('when a range is selected', () => {
     before(() => {
-      cy.visit('/iframe.html?id=date-picker--range&viewMode=story')
+      cy.visit('/iframe.html?id=date-picker-experimental--range&viewMode=story')
 
       cy.get(selectors.datePicker.input).click()
     })
@@ -58,7 +56,7 @@ describe('DatePicker', () => {
 
     describe('and the `from` day is clicked', () => {
       before(() => {
-        cy.get(selectors.datePicker.day.inside).contains('1').click()
+        cy.get(selectors.datePicker.day).contains('1').click()
       })
 
       it('should set the value of the input to the date', () => {
@@ -72,7 +70,7 @@ describe('DatePicker', () => {
 
       describe('and the `to` day is clicked', () => {
         before(() => {
-          cy.get(selectors.datePicker.day.inside).contains('10').click()
+          cy.get(selectors.datePicker.day).contains('10').click()
         })
 
         it('should set the value of the input to the range', () => {

packages/react-component-library/cypress/selectors/DatePicker.ts

@@ -1,8 +1,6 @@
 export default {
   button: '[data-testid="datepicker-input-button"]',
-  day: {
-    inside: '.DayPicker-Day:not(.DayPicker-Day--outside)',
-  },
+  day: '.rdp_day',
   floatingBox: '[data-testid="floating-box"]',
   input: '[data-testid="datepicker-input"]',
   outerWrapper: '[data-testid="datepicker-outer-wrapper"]',

packages/react-component-library/package.json

@@ -157,7 +157,7 @@
     "lodash": "^4.17.21",
     "polished": "^4.0.3",
     "react-compound-slider": "^3.3.1",
-    "react-day-picker": "^7.4.8",
+    "react-day-picker": "^8.0.4",
     "react-merge-refs": "^1.1.0",
     "react-popper": "^2.2.5",
     "react-select": "^4.1.0",

packages/react-component-library/src/components/DatePicker/DatePicker.test.tsx

@@ -21,6 +21,8 @@ const NOW = '2019-12-05T11:00:00.000Z'
 const ERROR_BOX_SHADOW = `0 0 0 ${
   BORDER_WIDTH[COMPONENT_SIZE.FORMS]
 } ${ColorDanger800.toUpperCase()}`
+const PREVIOUS_MONTH_BUTTON_LABEL = 'Go to previous month'
+const NEXT_MONTH_BUTTON_LABEL = 'Go to next month'
 
 function formatDate(date: Date | null) {
   return date && isValid(date) ? format(date, 'dd/MM/yyyy') : ''
@@ -32,7 +34,6 @@ describe('DatePicker', () => {
   let initialStartDate: Date
   let label: string
   let onBlur: (e: React.FormEvent) => void
-  let onCalendarFocus: jest.Mock<void, [React.SyntheticEvent]>
   let days: string[]
   let onSubmitSpy: (e: React.FormEvent) => void
   const onChange = jest.fn<void, [DatePickerOnChangeData]>()
@@ -75,15 +76,13 @@ describe('DatePicker', () => {
     beforeEach(() => {
       initialStartDate = new Date(2019, 11, 1)
       onBlur = jest.fn()
-      onCalendarFocus = jest.fn<void, [React.SyntheticEvent]>()
 
       wrapper = render(
         <>
           <DatePicker
             initialStartDate={initialStartDate}
             onChange={onChange}
             onBlur={onBlur}
-            onCalendarFocus={onCalendarFocus}
           />
           <div data-testid="datepicker-outside" />
         </>
@@ -166,7 +165,9 @@ describe('DatePicker', () => {
 
       it('colours the current date', () => {
         return waitFor(() => {
-          expect(wrapper.getByText(/^5$/)).toHaveStyle({
+          expect(
+            wrapper.getByRole('button', { name: '5th December (Thursday)' })
+          ).toHaveStyle({
             color: ColorWarning800,
           })
         })
@@ -296,13 +297,13 @@ describe('DatePicker', () => {
 
               describe('and the tab key is pressed again', () => {
                 beforeEach(() => {
-                  onCalendarFocus.mockClear()
                   return user.tab()
                 })
 
-                it('focuses the picker container', () => {
-                  expect(onCalendarFocus).toHaveBeenCalledTimes(1)
-                  // NOTE: `react-day-picker` internals from here on down
+                it('focuses the previous month button', () => {
+                  expect(
+                    wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL)
+                  ).toHaveFocus()
                 })
               })
 
@@ -611,6 +612,22 @@ describe('DatePicker', () => {
     })
   })
 
+  describe('when a single date picker with a value is rendered and the picker is opened', () => {
+    beforeEach(() => {
+      wrapper = render(
+        <DatePicker startDate={new Date('2022-01-18T00:00:00Z')} />
+      )
+
+      return user.click(wrapper.getByTestId('datepicker-input-button'))
+    })
+
+    it('focuses the current date', () => {
+      expect(
+        wrapper.getByRole('button', { name: '18th January (Tuesday)' })
+      ).toHaveFocus()
+    })
+  })
+
   describe('when a single date picker is rendered and the picker is opened', () => {
     beforeEach(() => {
       wrapper = render(<DatePicker />)
@@ -622,20 +639,21 @@ describe('DatePicker', () => {
       expect(wrapper.getByText('December 2019')).toBeInTheDocument()
     })
 
-    it('focuses the previous month button', () => {
-      return waitFor(() =>
-        expect(wrapper.getByLabelText('Previous Month')).toHaveFocus()
-      )
+    it('focuses the current date', () => {
+      expect(
+        wrapper.getByRole('button', { name: '5th December (Thursday)' })
+      ).toHaveFocus()
     })
 
-    describe('when Shift-Tab is pressed twice', () => {
+    describe('when Shift-Tab is pressed once', () => {
       beforeEach(async () => {
         await user.tab({ shift: true })
-        await user.tab({ shift: true })
       })
 
       it('traps the focus within the picker', () => {
-        expect(wrapper.getByText('1')).toHaveFocus()
+        expect(
+          wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL)
+        ).toHaveFocus()
       })
 
       describe('and Tab is then pressed once', () => {
@@ -644,26 +662,22 @@ describe('DatePicker', () => {
         })
 
         it('still traps the focus within the picker', () => {
-          const dayPicker =
-            wrapper.container.querySelectorAll('.DayPicker-wrapper')[0]
-          expect(dayPicker).toHaveFocus()
+          expect(
+            wrapper.getByRole('button', { name: '5th December (Thursday)' })
+          ).toHaveFocus()
         })
       })
     })
 
     describe.each([
-      {
-        name: 'day picker container',
-        selector: () =>
-          wrapper.container.querySelectorAll('.DayPicker-wrapper')[0],
-      },
       {
         name: 'previous month button',
-        selector: () => wrapper.getByLabelText('Previous Month'),
+        selector: () => wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL),
       },
       {
         name: 'day picker day',
-        selector: () => wrapper.getByText(10),
+        selector: () =>
+          wrapper.getByRole('button', { name: '10th December (Tuesday)' }),
       },
     ])('when the escape key is pressed in $name', ({ selector }) => {
       beforeEach(() => {
@@ -685,7 +699,7 @@ describe('DatePicker', () => {
 
     describe('when the next month button is clicked', () => {
       beforeEach(() => {
-        return user.click(wrapper.getByLabelText('Next Month'))
+        return user.click(wrapper.getByLabelText(NEXT_MONTH_BUTTON_LABEL))
       })
 
       it('displays the next month', () => {
@@ -782,15 +796,16 @@ describe('DatePicker', () => {
         it('shades the date range', () => {
           expect(
             wrapper.getAllByText(/^10|11|12|13$/, {
-              selector: '.DayPicker-Day--selected',
+              selector: '.rdp-day_selected span',
+              ignore: '[class=rdp-vhidden]',
             })
           ).toHaveLength(4)
         })
 
         it("doesn't shade dates outside the range", () => {
           expect(
             wrapper.queryAllByText(/^(?!(10|11|12|13))\d\d$/, {
-              selector: '.DayPicker-Day--selected',
+              selector: '.rdp-day_selected span',
             })
           ).toHaveLength(0)
         })
@@ -816,18 +831,32 @@ describe('DatePicker', () => {
         it('shades the date range', () => {
           expect(
             wrapper.getAllByText(/^10|11|12|13$/, {
-              selector: '.DayPicker-Day--selected',
+              selector: '.rdp-day_selected span',
+              ignore: '[class=rdp-vhidden]',
             })
           ).toHaveLength(4)
         })
 
         it("doesn't shade dates outside the range", () => {
           expect(
             wrapper.queryAllByText(/^(?!(10|11|12|13))\d\d$/, {
-              selector: '.DayPicker-Day--selected',
+              selector: '.rdp-day_selected span',
             })
           ).toHaveLength(0)
         })
+
+        describe('and then presses the tab key', () => {
+          beforeEach(() => {
+            userEvent.tab()
+          })
+
+          it('clears the range and removes the shading', () => {
+            // The start date still has the modifier
+            expect(
+              wrapper.container.querySelectorAll('.rdp-day_selected')
+            ).toHaveLength(1)
+          })
+        })
       })
 
       describe('and clicks on a second date', () => {
@@ -977,13 +1006,17 @@ describe('DatePicker', () => {
     })
 
     it('colours the override date', () => {
-      expect(wrapper.getByText(/^15$/)).toHaveStyle({
+      expect(
+        wrapper.getByRole('button', { name: '15th December (Sunday)' })
+      ).toHaveStyle({
         color: ColorWarning800,
       })
     })
 
     it('does not colour the actual current date', () => {
-      expect(wrapper.getByText(/^5$/)).not.toHaveStyle({
+      expect(
+        wrapper.getByRole('button', { name: '5th December (Thursday)' })
+      ).not.toHaveStyle({
         color: ColorWarning800,
       })
     })
@@ -1035,12 +1068,17 @@ describe('DatePicker', () => {
     })
 
     it('applies the disabled modifier class to the correct days', () => {
-      expect(wrapper.getByText('12')).toHaveClass('DayPicker-Day--disabled')
+      expect(
+        wrapper.getByRole('button', { name: '12th April (Sunday)' })
+      ).toHaveClass('rdp-day_disabled')
     })
 
     describe('and a disabled day is clicked', () => {
       beforeEach(() => {
-        return userEvent.click(wrapper.getByText('12'), {
+        const button = wrapper.getByRole('button', {
+          name: '12th April (Sunday)',
+        })
+        return userEvent.click(button, {
           pointerEventsCheck: PointerEventsCheckLevel.Never,
           advanceTimers: jest.advanceTimersByTime,
         })