fix: upgrade daypicker

packages/client/components/Action/Action.tsx

@@ -1,5 +1,6 @@
 import {css, Global} from '@emotion/core'
 import React, {lazy, memo, Suspense} from 'react'
+import 'react-day-picker/dist/style.css'
 import {Route, Switch} from 'react-router'
 import useServiceWorkerUpdater from '../../hooks/useServiceWorkerUpdater'
 import useTrebuchetEvents from '../../hooks/useTrebuchetEvents'

packages/client/components/AddTeamMemberAvatarButton.tsx

@@ -52,7 +52,9 @@ const AddButton = styled(OutlinedButton)<{isMeeting: boolean | undefined}>(
     }
 )
 
-const StyledIcon = styled(PersonAdd)<{isMeeting: boolean}>(
+const StyledIcon = styled(PersonAdd, {
+  shouldForwardProp: (prop) => !['isMeeting'].includes(prop)
+})<{isMeeting: boolean}>(
   {
     height: 18,
     width: 18,

packages/client/components/DueDatePicker.tsx

@@ -1,14 +1,13 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
-import DayPicker, {DayModifiers} from 'react-day-picker'
+import {DayModifiers, DayPicker} from 'react-day-picker'
 import {createFragmentContainer} from 'react-relay'
 import useAtmosphere from '../hooks/useAtmosphere'
 import {MenuProps} from '../hooks/useMenu'
 import useMutationProps from '../hooks/useMutationProps'
 import {UseTaskChild} from '../hooks/useTaskChildFocus'
 import UpdateTaskDueDateMutation from '../mutations/UpdateTaskDueDateMutation'
-import '../styles/daypicker.css'
 import {PALETTE} from '../styles/paletteV3'
 import {DueDatePicker_task} from '../__generated__/DueDatePicker_task.graphql'
 import Menu from './Menu'
@@ -20,11 +19,12 @@ interface Props {
 }
 
 const TallMenu = styled(Menu)({
-  maxHeight: 340
+  maxHeight: 360
 })
 
 const PickerTitle = styled('div')({
   fontSize: 14,
+  paddingTop: 8,
   textAlign: 'center',
   userSelect: 'none',
   width: '100%'
@@ -57,16 +57,18 @@ const DueDatePicker = (props: Props) => {
   const nextYear = new Date(new Date().setFullYear(now.getFullYear() + 1))
   return (
     <TallMenu ariaLabel='Pick a due date' {...menuProps}>
-      <PickerTitle>{'Change Due Date'}</PickerTitle>
-      {showHint && <Hint>{'To remove, tap selected date'}</Hint>}
-      <DayPicker
-        disabledDays={{before: now}}
-        fromMonth={now}
-        initialMonth={selectedDate || now}
-        onDayClick={handleDayClick}
-        selectedDays={selectedDate}
-        toMonth={nextYear}
-      />
+      <>
+        <PickerTitle>{'Change Due Date'}</PickerTitle>
+        {showHint && <Hint>{'To remove, tap selected date'}</Hint>}
+        <DayPicker
+          disabled={{before: now}}
+          fromMonth={now}
+          defaultMonth={selectedDate || now}
+          onDayClick={handleDayClick}
+          selected={selectedDate}
+          toMonth={nextYear}
+        />
+      </>
     </TallMenu>
   )
 }

packages/client/components/SendCommentButton.tsx

@@ -9,37 +9,37 @@ import PlainButton from './PlainButton/PlainButton'
 
 export type CommentSubmitState = 'idle' | 'typing'
 
-const StyledPlainButton = styled(PlainButton)<{commentSubmitState: CommentSubmitState}>(
-  ({commentSubmitState}) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: commentSubmitState === 'idle' ? PALETTE.SLATE_200 : PALETTE.SKY_500,
-    transition: 'background-color 0.1s ease',
-    borderRadius: '100%',
-    height: 32,
-    width: 32,
-    margin: 8,
-    ':hover, :focus, :active': {
-      backgroundColor: commentSubmitState === 'idle' ? PALETTE.SLATE_200 : PALETTE.SKY_600
-    },
-    opacity: 1,
-    ':hover,:focus': {
-      opacity: 1
-    }
-  })
-)
+const StyledPlainButton = styled(PlainButton, {
+  shouldForwardProp: (prop) => !['commentSubmitState'].includes(prop)
+})<{commentSubmitState: CommentSubmitState}>(({commentSubmitState}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: commentSubmitState === 'idle' ? PALETTE.SLATE_200 : PALETTE.SKY_500,
+  transition: 'background-color 0.1s ease',
+  borderRadius: '100%',
+  height: 32,
+  width: 32,
+  margin: 8,
+  ':hover, :focus, :active': {
+    backgroundColor: commentSubmitState === 'idle' ? PALETTE.SLATE_200 : PALETTE.SKY_600
+  },
+  opacity: 1,
+  ':hover,:focus': {
+    opacity: 1
+  }
+}))
 
-const SendIcon = styled(ArrowUpward)<{commentSubmitState: CommentSubmitState}>(
-  ({commentSubmitState}) => ({
-    opacity: 1,
-    transition: 'color 0.1s ease',
-    color: commentSubmitState === 'idle' ? PALETTE.SLATE_500 : PALETTE.WHITE,
-    height: 20,
-    width: 20,
-    margin: 4
-  })
-)
+const SendIcon = styled(ArrowUpward, {
+  shouldForwardProp: (prop) => !['commentSubmitState'].includes(prop)
+})<{commentSubmitState: CommentSubmitState}>(({commentSubmitState}) => ({
+  opacity: 1,
+  transition: 'color 0.1s ease',
+  color: commentSubmitState === 'idle' ? PALETTE.SLATE_500 : PALETTE.WHITE,
+  height: 20,
+  width: 20,
+  margin: 4
+}))
 
 interface Props {
   commentSubmitState: CommentSubmitState

packages/client/components/StageTimerModalEndTime.tsx

@@ -7,7 +7,6 @@ import useAtmosphere from '../hooks/useAtmosphere'
 import useMutationProps from '../hooks/useMutationProps'
 import NotificationErrorMessage from '../modules/notifications/components/NotificationErrorMessage'
 import SetStageTimerMutation from '../mutations/SetStageTimerMutation'
-import '../styles/daypicker.css'
 import {MeetingLabels} from '../types/constEnums'
 import roundDateToNearestHalfHour from '../utils/roundDateToNearestHalfHour'
 import {StageTimerModalEndTime_facilitator} from '../__generated__/StageTimerModalEndTime_facilitator.graphql'

packages/client/components/StageTimerModalEndTimeDate.tsx

@@ -2,10 +2,9 @@ import styled from '@emotion/styled'
 import {Event} from '@mui/icons-material'
 import ms from 'ms'
 import React from 'react'
-import DayPicker, {DayModifiers} from 'react-day-picker'
+import {DayModifiers, DayPicker} from 'react-day-picker'
 import {MenuPosition} from '../hooks/useCoords'
 import useMenu from '../hooks/useMenu'
-import '../styles/daypicker.css'
 import {PALETTE} from '../styles/paletteV3'
 import {shortDays, shortMonths} from '../utils/makeDateString'
 import roundDateToNearestHalfHour from '../utils/roundDateToNearestHalfHour'
@@ -70,11 +69,11 @@ const StageTimerModalEndTimeDate = (props: Props) => {
       <Toggle defaultText={dayStr} onClick={togglePortal} ref={originRef} flat size='small' />
       {menuPortal(
         <DayPicker
-          disabledDays={{before: now}}
+          disabled={{before: now}}
           fromMonth={now}
-          initialMonth={endTime}
+          defaultMonth={endTime}
           onDayClick={handleDayClick}
-          selectedDays={endTime}
+          selected={endTime}
           toMonth={NEXT_YEAR}
         />
       )}

packages/client/components/StageTimerModalEndTimeHour.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled'
 import React from 'react'
 import {MenuPosition} from '../hooks/useCoords'
 import useMenu from '../hooks/useMenu'
-import '../styles/daypicker.css'
 import formatTime from '../utils/date/formatTime'
 import DropdownMenuToggle from './DropdownMenuToggle'
 import StageTimerHourPicker from './StageTimerHourPicker'

packages/client/components/StageTimerModalEndTimeSlackToggle.tsx

@@ -6,7 +6,6 @@ import useAtmosphere from '../hooks/useAtmosphere'
 import useMutationProps from '../hooks/useMutationProps'
 import NotificationErrorMessage from '../modules/notifications/components/NotificationErrorMessage'
 import SetSlackNotificationMutation from '../mutations/SetSlackNotificationMutation'
-import '../styles/daypicker.css'
 import {ICON_SIZE} from '../styles/typographyV2'
 import SlackClientManager from '../utils/SlackClientManager'
 import {SetSlackNotificationMutationVariables} from '../__generated__/SetSlackNotificationMutation.graphql'

packages/client/package.json

@@ -83,6 +83,7 @@
     "chartjs-adapter-dayjs-3": "^1.2.3",
     "cleave.js": "^1.6.0",
     "core-js": "3.8.1",
+    "date-fns": "^2.29.3",
     "dayjs": "^1.11.3",
     "dompurify": "^2.4.1",
     "draft-js": "https://github.com/mattkrick/draft-js/tarball/559a21968370c4944511657817d601a6c4ade0f6",
@@ -105,7 +106,7 @@
     "react-beautiful-dnd": "13.0.0",
     "react-chartjs-2": "^4.2.0",
     "react-copy-to-clipboard": "^5.0.0",
-    "react-day-picker": "^7.1.6",
+    "react-day-picker": "^8.3.7",
     "react-dom": "^17.0.2",
     "react-dom-confetti": "^0.0.10",
     "react-ga4": "^1.4.1",