fix: better year select dropdown and other minor updates

packages/lsd-react/src/components/Calendar/Calendar.classes.ts

@@ -39,4 +39,5 @@ export const calendarClasses = {
   previousMonthButton: 'lsd-calendar__previous-month-button',
 
   yearDropdown: 'lsd-calendar__year-dropdown',
+  yearDropdownHidden: 'lsd-calendar__year-dropdown--hidden',
 }

packages/lsd-react/src/components/Calendar/Calendar.context.ts

@@ -1,21 +1,14 @@
 import React from 'react'
 
 export type CalendarContextType = {
-  focusedDate: Date | null
   size?: 'large' | 'medium' | 'small'
   mode?: 'date' | 'range'
   startDate: Date | null
   endDate: Date | null
-  isDateFocused: (date: Date) => boolean
-  isDateSelected: (date: Date) => boolean
-  isDateHovered: (date: Date) => boolean
-  isDateBlocked: (date: Date) => boolean
-  isFirstOrLastSelectedDate: (date: Date) => boolean
   onDateFocus: (date: Date) => void
-  onDateHover: (date: Date) => void
-  onDateSelect: (date: Date) => void
   goToPreviousMonths: () => void
   goToNextMonths: () => void
+  onDateSelect: (date: Date) => void
   changeYearMode: boolean
   setChangeYearMode: (value: boolean) => void
   goToDate: (date: Date) => void

packages/lsd-react/src/components/Calendar/Calendar.styles.ts

@@ -58,17 +58,9 @@ export const CalendarStyles = css`
   }
 
   .${calendarClasses.changeYearActive} {
-    .${calendarClasses.year} {
-      padding: 5px 0px 5px 10px;
-    }
-
     .${calendarClasses.yearAndIcon} {
       border: 1px solid rgb(var(--lsd-border-primary));
     }
-
-    .${calendarClasses.changeYearIconContainer} {
-      padding-right: 5px;
-    }
   }
 
   .${calendarClasses.changeYearIconContainer} {
@@ -78,7 +70,7 @@ export const CalendarStyles = css`
     cursor: pointer;
     border: none;
     width: 14px;
-    padding-left: 5px;
+    padding: 0 6px;
   }
 
   .${calendarClasses.month} {
@@ -209,13 +201,19 @@ export const CalendarStyles = css`
     width: 100%;
 
     border: 1px solid rgb(var(--lsd-border-primary));
+    border-top: none;
+
     z-index: 1;
 
     .${calendarClasses.year} {
       border-bottom: 1px solid rgb(var(--lsd-border-primary));
     }
   }
 
+  .${calendarClasses.yearDropdownHidden} {
+    visibility: hidden;
+  }
+
   .${calendarClasses.year} {
     display: flex;
     cursor: pointer;
@@ -224,17 +222,14 @@ export const CalendarStyles = css`
 
     background: rgb(var(--lsd-surface-primary));
 
+    padding: 5px 0px 5px 12px;
+
     :hover {
       text-decoration: underline;
-      padding: 5px 0px 5px 10px;
     }
   }
 
-  .${calendarClasses.yearAndIcon}:hover {
+  .${calendarClasses.yearAndIcon} {
     border: 1px solid rgb(var(--lsd-border-primary));
-
-    .${calendarClasses.changeYearIconContainer} {
-      padding-right: 5px;
-    }
   }
 `

packages/lsd-react/src/components/Calendar/Calendar.tsx

@@ -17,6 +17,9 @@ import {
 } from '../../utils/useCommonProps'
 import { TooltipBase } from '../TooltipBase'
 
+export const CALENDAR_MIN_YEAR = 1850
+export const CALENDAR_MAX_YEAR = 2100
+
 export type CalendarType = null | 'endDate' | 'startDate'
 
 export type CalendarProps = CommonProps &
@@ -54,8 +57,8 @@ export const Calendar: React.FC<CalendarProps> & {
   endDate: endDateProp,
   calendarType = 'startDate',
   // minDate and maxDate are necessary because onDateFocus freaks out with small/large date values.
-  minDate = new Date(1950, 0, 1),
-  maxDate = new Date(2100, 0, 1),
+  minDate = new Date(CALENDAR_MIN_YEAR, 0, 1),
+  maxDate = new Date(CALENDAR_MAX_YEAR, 0, 1),
   tooltipArrowOffset,
   ...props
 }) => {
@@ -98,15 +101,8 @@ export const Calendar: React.FC<CalendarProps> & {
 
   const {
     activeMonths,
-    isDateSelected,
-    isDateHovered,
-    isFirstOrLastSelectedDate,
-    isDateBlocked,
-    isDateFocused,
-    focusedDate,
-    onDateHover,
-    onDateSelect,
     onDateFocus,
+    onDateSelect,
     goToPreviousMonths,
     goToNextMonths,
     goToDate,
@@ -172,15 +168,8 @@ export const Calendar: React.FC<CalendarProps> & {
         mode,
         startDate,
         endDate,
-        focusedDate,
-        isDateFocused,
-        isDateSelected,
-        isDateHovered,
-        isDateBlocked,
-        isFirstOrLastSelectedDate,
-        onDateSelect,
         onDateFocus,
-        onDateHover,
+        onDateSelect,
         goToPreviousMonths,
         goToNextMonths,
         goToDate,

packages/lsd-react/src/components/Calendar/Day.tsx

@@ -1,5 +1,4 @@
-import { useRef } from 'react'
-import { useDay } from '@datepicker-react/hooks'
+import { useCallback, useRef } from 'react'
 import { useCalendarContext } from './Calendar.context'
 import clsx from 'clsx'
 import { Typography } from '../Typography'
@@ -25,13 +24,14 @@ export const Day = ({
   disabled = false,
 }: DayProps) => {
   const date = fullMonthDays[index]
-  const { mode, startDate, endDate, ...calendarContext } = useCalendarContext()
+  const { mode, startDate, endDate, onDateSelect } = useCalendarContext()
   const dayRef = useRef(null)
-  const dayHandlers = useDay({ date, dayRef, ...calendarContext })
   const isToday = resetHours(date) === resetHours(new Date())
   const isInDateRange =
     mode === 'range' && isDateWithinRange(date, startDate, endDate)
 
+  const onClick = useCallback(() => onDateSelect(date), [date, onDateSelect])
+
   const isStartDate = isSameDay(date, startDate)
   const isEndDate = mode === 'range' && isSameDay(date, endDate)
   const isSelected = isStartDate || isEndDate || isInDateRange
@@ -50,9 +50,7 @@ export const Day = ({
 
   return (
     <td
-      onClick={dayHandlers.onClick}
-      onMouseEnter={dayHandlers.onMouseEnter}
-      tabIndex={dayHandlers.tabIndex}
+      onClick={onClick}
       ref={dayRef}
       className={clsx(
         calendarClasses.dayContainer,

packages/lsd-react/src/components/Calendar/MonthHelpers.tsx

@@ -1,19 +1,13 @@
 import clsx from 'clsx'
 import { Day } from './Day'
-import { FC, useRef } from 'react'
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  NavigateBeforeIcon,
-  NavigateNextIcon,
-} from '../Icons'
+import { FC } from 'react'
+import { NavigateBeforeIcon, NavigateNextIcon } from '../Icons'
 import { calendarClasses } from './Calendar.classes'
 import { Typography } from '../Typography'
-import { IconButton } from '../IconButton'
 import { UseMonthResult } from '@datepicker-react/hooks'
-import { useClickAway } from 'react-use'
 import { generateFullMonthDays } from '../../utils/date.utils'
 import { useCalendarContext } from './Calendar.context'
+import { YearControl } from './YearControl'
 
 type CalendarNavigationButtonProps = {
   direction: 'previous' | 'next'
@@ -38,82 +32,6 @@ export const CalendarNavigationButton: FC<CalendarNavigationButtonProps> = ({
   )
 }
 
-type YearControlProps = {
-  year: string
-  monthNumber: number
-  size: 'large' | 'medium' | 'small'
-}
-
-export const YearControl: FC<YearControlProps> = ({
-  year,
-  monthNumber,
-  size,
-}) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const { goToDate, changeYearMode, setChangeYearMode } = useCalendarContext()
-
-  useClickAway(ref, () => {
-    setChangeYearMode(false)
-  })
-
-  const handleYearClick = (selectedYear: number) => {
-    const selectedDate = new Date(selectedYear, monthNumber, 1)
-    goToDate(selectedDate)
-    setChangeYearMode(false)
-  }
-
-  const yearsList = Array.from({ length: 101 }, (_, i) => 1950 + i)
-
-  return (
-    <div
-      ref={ref}
-      className={clsx(
-        calendarClasses.changeYear,
-        changeYearMode && calendarClasses.changeYearActive,
-      )}
-      onClick={() => {
-        setChangeYearMode(!changeYearMode)
-      }}
-    >
-      <div className={clsx(calendarClasses.year, calendarClasses.yearAndIcon)}>
-        <Typography
-          component="span"
-          variant={size === 'large' ? 'label1' : 'label2'}
-        >
-          {year}
-        </Typography>
-
-        <div className={calendarClasses.changeYearIconContainer}>
-          {changeYearMode ? (
-            <ArrowUpIcon color="primary" />
-          ) : (
-            <ArrowDownIcon color="primary" />
-          )}
-        </div>
-      </div>
-
-      {changeYearMode && (
-        <div className={calendarClasses.yearDropdown}>
-          {yearsList.map((year) => (
-            <div
-              key={year}
-              className={calendarClasses.year}
-              onClick={() => handleYearClick(year)}
-            >
-              <Typography
-                component="span"
-                variant={size === 'large' ? 'label1' : 'label2'}
-              >
-                {year}
-              </Typography>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
 type MonthHeaderProps = {
   monthLabel: string
   monthNumber: number