feat: remove calendar date from use date picker

Author: flaminic

src/hooks/useDatePicker.spec.tsx

@@ -1,8 +1,9 @@
-import { Intl } from '@js-temporal/polyfill'
+import { Intl, Temporal } from '@js-temporal/polyfill'
 import { render } from '@testing-library/react'
 import { renderHook } from '@testing-library/react-hooks'
 import React from 'react'
 import { SupportedCalendar } from '../types'
+import { formatDate } from '../utils'
 import localisationHelpers from '../utils/localisationHelpers'
 import { useDatePicker, UseDatePickerReturn } from './useDatePicker'
 
@@ -271,13 +272,21 @@ describe('useDatePicker hook', () => {
     })
     describe('highlighting today', () => {
         const getDayByDate: (
-            calendarWeekDays: { calendarDate: string; isToday: boolean }[][],
+            calendarWeekDays: {
+                isToday: boolean
+                zdt: Temporal.ZonedDateTime
+            }[][],
             dayToFind: string
         ) => { calendarDate: string; isToday: boolean }[] = (
             calendarWeekDays,
             dayToFind
         ) => {
-            const days = calendarWeekDays.flatMap((week) => week)
+            const days = calendarWeekDays
+                .flatMap((week) => week)
+                .map((day) => ({
+                    ...day,
+                    calendarDate: formatDate(day.zdt, undefined, 'YYYY-MM-DD'),
+                }))
 
             return days.filter((day) => day.calendarDate === dayToFind)
         }
@@ -485,7 +494,12 @@ describe('clicking a day', () => {
 
         // find and click the day passed to the calendar
         for (let i = 0; i < days.length; i++) {
-            if (days[i].calendarDate === date) {
+            const formattedDate = formatDate(
+                days[i].zdt,
+                undefined,
+                'YYYY-MM-DD'
+            )
+            if (formattedDate === date) {
                 days[i].onClick()
                 break
             }

src/hooks/useDatePicker.ts

@@ -38,14 +38,12 @@ export type UseDatePickerReturn = UseNavigationReturnType & {
     calendarWeekDays: {
         zdt: Temporal.ZonedDateTime
         label: string | number
-        calendarDate: string
         onClick: () => void
         isSelected: boolean | undefined
         isToday: boolean
         isInCurrentMonth: boolean
     }[][]
 }
-
 type UseDatePickerHookType = (options: DatePickerOptions) => UseDatePickerReturn
 type ValidatedDate = Temporal.YearOrEraAndEraYear &
     Temporal.MonthOrMonthCode & {
@@ -194,7 +192,6 @@ export const useDatePicker: UseDatePickerHookType = ({
         calendarWeekDays: calendarWeekDaysZdts.map((week) =>
             week.map((weekDayZdt) => ({
                 zdt: weekDayZdt,
-                calendarDate: formatDate(weekDayZdt, undefined, date.format),
                 label: localisationHelpers.localiseWeekLabel(
                     weekDayZdt.withCalendar(localeOptions.calendar),
                     localeOptions