sanity-plugin-recurring-dates 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-recurring-dates",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Add a custom input component to your Sanity Studio to manage recurring dates (e.g. for events)",
   "keywords": [
     "sanity",
@@ -53,39 +53,40 @@
     "sanity-plugin-utils": "^1.6.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.4",
-    "@commitlint/config-conventional": "^18.4.4",
-    "@sanity/pkg-utils": "^3.3.7",
-    "@sanity/plugin-kit": "^3.1.10",
-    "@sanity/semantic-release-preset": "^4.1.6",
-    "@types/react": "^18.2.47",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "eslint": "^8.56.0",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.3",
+    "@sanity/pkg-utils": "^3.3.8",
+    "@sanity/plugin-kit": "^3.1.12",
+    "@sanity/semantic-release-preset": "^4.1.8",
+    "@types/react": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-sanity": "^7.0.1",
-    "eslint-plugin-prettier": "^5.1.2",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-config-sanity": "^7.1.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.1",
-    "prettier-plugin-packagejson": "^2.4.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
+    "npm-run-all2": "^5.0.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-packagejson": "^2.5.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "rimraf": "^5.0.1",
-    "sanity": "^3.23.4",
-    "styled-components": "^6.1.8",
-    "typescript": "^5.3.3"
+    "sanity": "^3.57.0",
+    "styled-components": "^6.1.13",
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
-    "react": "^18",
-    "sanity": "^3",
+    "@sanity/icons": ">= 2",
     "@sanity/ui": "^1 || ^2.0.0-beta",
-    "@sanity/icons": ">= 2"
+    "@sanity/util": "^3.57.0",
+    "react": "^18",
+    "sanity": "^3"
   },
   "engines": {
     "node": ">=14"

package/src/components/CustomRule/CustomRule.tsx

@@ -23,7 +23,7 @@ export function CustomRule({
   initialValue: string
   startDate: string | undefined
   dateTimeOptions: PluginConfig['dateTimeOptions']
-}) {
+}): React.JSX.Element {
   const initialRule = useMemo(() => {
     return initialValue ? rrulestr(initialValue) : new RRule()
   }, [initialValue])
@@ -48,8 +48,6 @@ export function CustomRule({
         setFrequency(Number(value))
       } else if (name === 'interval') {
         setInterval(Number(value))
-      } else if (name === 'interval') {
-        setCount(Number(value))
       } else if (name === 'count') {
         setCount(Number(value))
       }
@@ -113,118 +111,113 @@ export function CustomRule({
     onChange(set(newRule.toString(), ['rrule']))
   }, [byweekday, count, frequency, interval, onChange, onClose, until])
 
-  return (
-    open && (
-      <Dialog
-        header="Custom recurrence"
-        id="dialog-example"
-        onClose={onClose}
-        zOffset={1000}
-        width={1}
-      >
-        <Flex direction="column">
-          <Box flex={1} overflow="auto" padding={4}>
-            <Stack space={4}>
+  return open ? (
+    <Dialog
+      header="Custom recurrence"
+      id="dialog-example"
+      onClose={onClose}
+      zOffset={1000}
+      width={1}
+    >
+      <Flex direction="column">
+        <Box flex={1} overflow="auto" padding={4}>
+          <Stack space={4}>
+            <Flex gap={2} align="center">
+              <Text style={{whiteSpace: 'nowrap'}}>Repeat every</Text>
+              <Box style={{width: '75px'}}>
+                <TextInput name="interval" type="number" value={interval} onChange={handleChange} />
+              </Box>
+              <Box>
+                <Select name="freq" value={frequency} onChange={handleChange}>
+                  <option value={RRule.YEARLY}>years</option>
+                  <option value={RRule.MONTHLY}>months</option>
+                  <option value={RRule.WEEKLY}>weeks</option>
+                  <option value={RRule.DAILY}>days</option>
+                </Select>
+              </Box>
+            </Flex>
+
+            {frequency === RRule.MONTHLY && (
+              <Monthly byweekday={byweekday as Weekday} setByweekday={setByweekday} />
+            )}
+
+            {frequency === RRule.WEEKLY && (
+              <Weekly byweekday={byweekday as Weekday} setByweekday={setByweekday} />
+            )}
+
+            <Stack space={2}>
+              <Text>Ends</Text>
+              <Flex gap={2} paddingY={2} align="center">
+                <Radio
+                  checked={!count && !until}
+                  name="ends"
+                  onChange={handleEndChange}
+                  value=""
+                  id="ends-never"
+                />
+                <Text htmlFor="ends-never" as="label">
+                  Never
+                </Text>
+              </Flex>
               <Flex gap={2} align="center">
-                <Text style={{whiteSpace: 'nowrap'}}>Repeat every</Text>
+                <Radio
+                  checked={!!until}
+                  name="ends"
+                  onChange={handleEndChange}
+                  value="until"
+                  id="ends-until"
+                />
+                <Text htmlFor="ends-until" as="label" style={{width: '75px'}}>
+                  On
+                </Text>
+                <Box style={{width: '200px'}}>
+                  <DateInput
+                    id="until"
+                    onChange={handleUntilChange}
+                    type={{
+                      name: 'until',
+                      title: 'Date',
+                      options: dateTimeOptions,
+                    }}
+                    value={until ? new Date(until) : getUntilDate()}
+                    disabled={!until}
+                  />
+                </Box>
+              </Flex>
+              <Flex gap={2} align="center">
+                <Radio
+                  checked={!!count}
+                  name="ends"
+                  onChange={handleEndChange}
+                  value="count"
+                  id="ends-count"
+                />
+                <Text htmlFor="ends-count" as="label" style={{width: '75px'}}>
+                  After
+                </Text>
                 <Box style={{width: '75px'}}>
                   <TextInput
-                    name="interval"
+                    name="count"
                     type="number"
-                    value={interval}
+                    value={count || DEFAULT_COUNTS[frequency]}
                     onChange={handleChange}
+                    disabled={!count}
                   />
                 </Box>
-                <Box>
-                  <Select name="freq" value={frequency} onChange={handleChange}>
-                    <option value={RRule.YEARLY}>years</option>
-                    <option value={RRule.MONTHLY}>months</option>
-                    <option value={RRule.WEEKLY}>weeks</option>
-                    <option value={RRule.DAILY}>days</option>
-                  </Select>
-                </Box>
+                <Text style={{whiteSpace: 'nowrap'}}>occurrences</Text>
               </Flex>
-
-              {frequency === RRule.MONTHLY && (
-                <Monthly byweekday={byweekday as Weekday} setByweekday={setByweekday} />
-              )}
-
-              {frequency === RRule.WEEKLY && (
-                <Weekly byweekday={byweekday as Weekday} setByweekday={setByweekday} />
-              )}
-
-              <Stack space={2}>
-                <Text>Ends</Text>
-                <Flex gap={2} paddingY={2} align="center">
-                  <Radio
-                    checked={!count && !until}
-                    name="ends"
-                    onChange={handleEndChange}
-                    value=""
-                    id="ends-never"
-                  />
-                  <Text htmlFor="ends-never" as="label">
-                    Never
-                  </Text>
-                </Flex>
-                <Flex gap={2} align="center">
-                  <Radio
-                    checked={!!until}
-                    name="ends"
-                    onChange={handleEndChange}
-                    value="until"
-                    id="ends-until"
-                  />
-                  <Text htmlFor="ends-until" as="label" style={{width: '75px'}}>
-                    On
-                  </Text>
-                  <Box style={{width: '200px'}}>
-                    <DateInput
-                      id="until"
-                      onChange={handleUntilChange}
-                      type={{
-                        name: 'until',
-                        title: 'Date',
-                        options: dateTimeOptions,
-                      }}
-                      value={until ? new Date(until) : getUntilDate()}
-                      disabled={!until}
-                    />
-                  </Box>
-                </Flex>
-                <Flex gap={2} align="center">
-                  <Radio
-                    checked={!!count}
-                    name="ends"
-                    onChange={handleEndChange}
-                    value="count"
-                    id="ends-count"
-                  />
-                  <Text htmlFor="ends-count" as="label" style={{width: '75px'}}>
-                    After
-                  </Text>
-                  <Box style={{width: '75px'}}>
-                    <TextInput
-                      name="count"
-                      type="number"
-                      value={count || DEFAULT_COUNTS[frequency]}
-                      onChange={handleChange}
-                      disabled={!count}
-                    />
-                  </Box>
-                  <Text style={{whiteSpace: 'nowrap'}}>occurrences</Text>
-                </Flex>
-              </Stack>
             </Stack>
-          </Box>
-          <Box paddingX={4} paddingY={3} style={{borderTop: '1px solid var(--card-border-color)'}}>
-            <Flex gap={2} justify="flex-end">
-              <Button text="Cancel" mode="ghost" onClick={onClose} />
-              <Button text="Done" tone="positive" onClick={handleConfirm} />
-            </Flex>
-          </Box>
-        </Flex>
-      </Dialog>
-    )
+          </Stack>
+        </Box>
+        <Box paddingX={4} paddingY={3} style={{borderTop: '1px solid var(--card-border-color)'}}>
+          <Flex gap={2} justify="flex-end">
+            <Button text="Cancel" mode="ghost" onClick={onClose} />
+            <Button text="Done" tone="positive" onClick={handleConfirm} />
+          </Flex>
+        </Box>
+      </Flex>
+    </Dialog>
+  ) : (
+    <></>
   )
 }

package/src/components/CustomRule/Monthly.tsx

@@ -9,7 +9,7 @@ interface MonthlyProps {
   setByweekday: (value: Options['byweekday']) => void
 }
 
-export function Monthly(props: MonthlyProps) {
+export function Monthly(props: MonthlyProps): React.JSX.Element {
   const {byweekday, setByweekday} = props
 
   const {weekday: dayNo, n: weekNo} =

package/src/components/CustomRule/Weekly.tsx

@@ -9,7 +9,7 @@ interface WeeklyProps {
   setByweekday: (value: Options['byweekday']) => void
 }
 
-export function Weekly(props: WeeklyProps) {
+export function Weekly(props: WeeklyProps): React.JSX.Element {
   const {byweekday, setByweekday} = props
 
   const currentWeekdays: number[] = useMemo(() => {

package/src/components/DateInputs/CommonDateTimeInput.tsx

@@ -48,6 +48,7 @@ export const CommonDateTimeInput = React.forwardRef(function CommonDateTimeInput
   }, [value])
 
   const handleDatePickerInputChange = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (event: any) => {
       const nextInputValue = event.currentTarget.value
       const result = nextInputValue === '' ? null : parseInputValue(nextInputValue)
@@ -81,14 +82,14 @@ export const CommonDateTimeInput = React.forwardRef(function CommonDateTimeInput
   const parseResult = localValue
     ? parseInputValue(localValue)
     : value
-    ? deserialize(value as string)
-    : null
+      ? deserialize(value as string)
+      : null
 
   const inputValue = localValue
     ? localValue
     : parseResult?.isValid
-    ? formatInputValue(parseResult.date)
-    : (value as string)
+      ? formatInputValue(parseResult.date)
+      : (value as string)
 
   return readOnly ? (
     <TextInput value={inputValue} readOnly disabled={readOnly} />

package/src/components/DateInputs/DateInput.tsx

@@ -45,7 +45,7 @@ const serialize = (date: Date) => format(date, VALUE_FORMAT)
 /**
  * @hidden
  * @beta */
-export function DateInput(props: DateInputProps) {
+export function DateInput(props: DateInputProps): React.JSX.Element {
   const {id, onChange, type, value, disabled, ...rest} = props
 
   const {dateFormat} = parseOptions(type.options)

package/src/components/DateInputs/DateTimeInput.tsx

@@ -77,7 +77,7 @@ function enforceTimeStep(dateString: string, timeStep: number) {
 /**
  * @hidden
  * @beta */
-export function DateTimeInput(props: DateTimeInputProps) {
+export function DateTimeInput(props: DateTimeInputProps): React.JSX.Element {
   const {id, onChange, type, value, disabled, ...rest} = props
 
   const {dateFormat, timeFormat, timeStep} = parseOptions(type.options)

package/src/components/DateInputs/base/DatePicker.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import {Calendar} from './calendar/Calendar'
 
 export const DatePicker = React.forwardRef(function DatePicker(
@@ -8,17 +9,18 @@ export const DatePicker = React.forwardRef(function DatePicker(
     selectTime?: boolean
     timeStep?: number
   },
-  ref: React.ForwardedRef<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {value = new Date(), onChange, ...rest} = props
   const [focusedDate, setFocusedDay] = React.useState<Date>()
 
   const handleSelect = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (nextDate: any) => {
       onChange(nextDate)
       setFocusedDay(undefined)
     },
-    [onChange]
+    [onChange],
   )
 
   return (

package/src/components/DateInputs/base/DateTimeInput.tsx

@@ -1,7 +1,8 @@
+import {CalendarIcon} from '@sanity/icons'
+import {Box, Button, LayerProvider, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
 import React, {forwardRef, useCallback, useRef, useState} from 'react'
 import FocusLock from 'react-focus-lock'
-import {Box, Button, LayerProvider, Popover, useClickOutside, useForwardedRef} from '@sanity/ui'
-import {CalendarIcon} from '@sanity/icons'
+
 import {DatePicker} from './DatePicker'
 import {LazyTextInput} from './LazyTextInput'
 
@@ -10,7 +11,9 @@ export interface DateTimeInputProps {
   id?: string
   inputValue?: string
   onChange: (date: Date | null) => void
-  onInputChange?: (event: React.FocusEvent<HTMLInputElement>) => void
+  onInputChange?: (
+    event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>,
+  ) => void
   placeholder?: string
   readOnly?: boolean
   selectTime?: boolean
@@ -20,7 +23,7 @@ export interface DateTimeInputProps {
 
 export const DateTimeInput = forwardRef(function DateTimeInput(
   props: DateTimeInputProps,
-  ref: React.ForwardedRef<HTMLInputElement>
+  ref: React.ForwardedRef<HTMLInputElement>,
 ) {
   const {value, inputValue, onInputChange, onChange, selectTime, timeStep, ...rest} = props
   const [popoverRef, setPopoverRef] = useState<HTMLElement | null>(null)
@@ -36,6 +39,7 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
     forwardedRef.current?.select()
   }, [forwardedRef])
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleKeyUp = useCallback((e: any) => {
     if (e.key === 'Escape') {
       setPickerOpen(false)

package/src/components/DateInputs/base/LazyTextInput.tsx

@@ -1,17 +1,13 @@
-import React from 'react'
 import {TextInput} from '@sanity/ui'
+import React from 'react'
 
 type TextInputProps = React.ComponentProps<typeof TextInput>
 
-// todo: delete this when v0.34 of @sanity/ui is out
-type Workaround = any
-
-type Props = Workaround &
-  Omit<TextInputProps, 'onChange'> & {
-    onChange?: (
-      event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>
-    ) => void
-  }
+type Props = Omit<TextInputProps, 'onChange'> & {
+  onChange?: (
+    event: React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>,
+  ) => void
+}
 
 /**
  * A TextInput that only emit onChange when it has to
@@ -20,15 +16,17 @@ type Props = Workaround &
  */
 export const LazyTextInput = React.forwardRef(function LazyTextInput(
   {onChange, onBlur, onKeyPress, value, ...rest}: Props,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>
+  forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const [inputValue, setInputValue] = React.useState<string>()
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleChange = React.useCallback((event: any) => {
     setInputValue(event.currentTarget.value)
   }, [])
 
   const checkEvent = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (event: any) => {
       const currentValue = event.currentTarget.value
       if (currentValue !== `${value}`) {
@@ -38,17 +36,18 @@ export const LazyTextInput = React.forwardRef(function LazyTextInput(
       }
       setInputValue(undefined)
     },
-    [onChange, value]
+    [onChange, value],
   )
 
   const handleBlur = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (e: any) => {
       checkEvent(e)
       if (onBlur) {
         onBlur(e)
       }
     },
-    [checkEvent, onBlur]
+    [checkEvent, onBlur],
   )
 
   const handleKeyPress = React.useCallback(
@@ -60,7 +59,7 @@ export const LazyTextInput = React.forwardRef(function LazyTextInput(
         onKeyPress(e)
       }
     },
-    [checkEvent, onKeyPress]
+    [checkEvent, onKeyPress],
   )
 
   return (

package/src/components/DateInputs/base/calendar/Calendar.tsx

@@ -1,10 +1,11 @@
-import {Box, Button, Flex, Grid, Select, Text, useForwardedRef} from '@sanity/ui'
 import {ChevronLeftIcon, ChevronRightIcon} from '@sanity/icons'
+import {Box, Button, Flex, Grid, Select, Text, useForwardedRef} from '@sanity/ui'
 import {addDays, addMonths, setDate, setHours, setMinutes, setMonth, setYear} from 'date-fns'
 import {range} from 'lodash'
 import React, {forwardRef, useCallback, useEffect} from 'react'
+
 import {CalendarMonth} from './CalendarMonth'
-import {ARROW_KEYS, HOURS_24, MONTH_NAMES, DEFAULT_TIME_PRESETS} from './constants'
+import {ARROW_KEYS, DEFAULT_TIME_PRESETS, HOURS_24, MONTH_NAMES} from './constants'
 import {features} from './features'
 import {formatTime} from './utils'
 import {YearInput} from './YearInput'
@@ -35,7 +36,7 @@ const PRESERVE_FOCUS_ELEMENT = (
 
 export const Calendar = forwardRef(function Calendar(
   props: CalendarProps,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     selectTime,
@@ -49,34 +50,34 @@ export const Calendar = forwardRef(function Calendar(
 
   const setFocusedDate = useCallback(
     (date: Date) => onFocusedDateChange(date),
-    [onFocusedDateChange]
+    [onFocusedDateChange],
   )
 
   const setFocusedDateMonth = useCallback(
     (month: number) => setFocusedDate(setDate(setMonth(focusedDate, month), 1)),
-    [focusedDate, setFocusedDate]
+    [focusedDate, setFocusedDate],
   )
 
   const handleFocusedMonthChange = useCallback(
     (e: React.FormEvent<HTMLSelectElement>) => setFocusedDateMonth(Number(e.currentTarget.value)),
-    [setFocusedDateMonth]
+    [setFocusedDateMonth],
   )
 
   const moveFocusedDate = useCallback(
     (by: number) => setFocusedDate(addMonths(focusedDate, by)),
-    [focusedDate, setFocusedDate]
+    [focusedDate, setFocusedDate],
   )
 
   const setFocusedDateYear = useCallback(
     (year: number) => setFocusedDate(setYear(focusedDate, year)),
-    [focusedDate, setFocusedDate]
+    [focusedDate, setFocusedDate],
   )
 
   const handleDateChange = useCallback(
     (date: Date) => {
       onSelect(setMinutes(setHours(date, selectedDate.getHours()), selectedDate.getMinutes()))
     },
-    [onSelect, selectedDate]
+    [onSelect, selectedDate],
   )
 
   const handleMinutesChange = useCallback(
@@ -84,7 +85,7 @@ export const Calendar = forwardRef(function Calendar(
       const m = Number(event.currentTarget.value)
       onSelect(setMinutes(selectedDate, m))
     },
-    [onSelect, selectedDate]
+    [onSelect, selectedDate],
   )
 
   const handleHoursChange = useCallback(
@@ -92,14 +93,14 @@ export const Calendar = forwardRef(function Calendar(
       const m = Number(event.currentTarget.value)
       onSelect(setHours(selectedDate, m))
     },
-    [onSelect, selectedDate]
+    [onSelect, selectedDate],
   )
 
   const handleTimeChange = useCallback(
     (hours: number, mins: number) => {
       onSelect(setHours(setMinutes(selectedDate, mins), hours))
     },
-    [onSelect, selectedDate]
+    [onSelect, selectedDate],
   )
 
   const ref = useForwardedRef(forwardedRef)
@@ -109,6 +110,7 @@ export const Calendar = forwardRef(function Calendar(
   }, [ref])
 
   const handleKeyDown = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (event: any) => {
       if (!ARROW_KEYS.includes(event.key)) {
         return
@@ -133,7 +135,7 @@ export const Calendar = forwardRef(function Calendar(
       // set focus temporarily on this element to make sure focus is still inside the calendar-grid after re-render
       ref.current?.querySelector<HTMLElement>('[data-preserve-focus]')?.focus()
     },
-    [ref, focusCurrentWeekDay, onFocusedDateChange, focusedDate]
+    [ref, focusCurrentWeekDay, onFocusedDateChange, focusedDate],
   )
 
   useEffect(() => {
@@ -142,7 +144,7 @@ export const Calendar = forwardRef(function Calendar(
 
   useEffect(() => {
     const currentFocusInCalendarGrid = document.activeElement?.matches(
-      '[data-calendar-grid], [data-calendar-grid] [data-preserve-focus]'
+      '[data-calendar-grid], [data-calendar-grid] [data-preserve-focus]',
     )
     if (
       // Only move focus if it's currently in the calendar grid
@@ -154,14 +156,14 @@ export const Calendar = forwardRef(function Calendar(
 
   const handleYesterdayClick = useCallback(
     () => handleDateChange(addDays(new Date(), -1)),
-    [handleDateChange]
+    [handleDateChange],
   )
 
   const handleTodayClick = useCallback(() => handleDateChange(new Date()), [handleDateChange])
 
   const handleTomorrowClick = useCallback(
     () => handleDateChange(addDays(new Date(), 1)),
-    [handleDateChange]
+    [handleDateChange],
   )
 
   const handleNowClick = useCallback(() => onSelect(new Date()), [onSelect])

package/src/components/DateInputs/base/calendar/CalendarDay.tsx

@@ -10,7 +10,7 @@ interface CalendarDayProps {
   selected?: boolean
 }
 
-export function CalendarDay(props: CalendarDayProps) {
+export function CalendarDay(props: CalendarDayProps): React.JSX.Element {
   const {date, focused, isCurrentMonth, isToday, onSelect, selected} = props
 
   const handleClick = useCallback(() => {