fix: picker: ensure keyboard navigation selected styles are implement…

…ed in year mode (#523)

src/components/DateTimePicker/Internal/Partials/YearPartial/YearBody.tsx

@@ -6,6 +6,8 @@ import RangeContext from '../../RangeContext';
 import PartialBody from '../PartialBody';
 import { DatePickerSize } from '../../OcPicker.types';
 
+import styles from '../../ocpicker.module.scss';
+
 const YEAR_ROW_COUNT: number = 4;
 
 function YearBody<DateType>(props: YearBodyProps<DateType>) {
@@ -19,18 +21,18 @@ function YearBody<DateType>(props: YearBodyProps<DateType>) {
   const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
 
   const yearNumber: number = generateConfig.getYear(viewDate);
-  const startYear: number =
+  const startYearNumber: number =
     Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT;
-  const endYear: number = startYear + YEAR_DECADE_COUNT - 1;
+  const endYear: number = startYearNumber + YEAR_DECADE_COUNT - 1;
   const baseYear: DateType = generateConfig.setYear(
     viewDate,
-    startYear -
+    startYearNumber -
       Math.ceil((YEAR_COL_COUNT * YEAR_ROW_COUNT - YEAR_DECADE_COUNT) / 2)
   );
 
   const isInView = (date: DateType): boolean => {
     const currentYearNumber: number = generateConfig.getYear(date);
-    return startYear <= currentYearNumber && currentYearNumber <= endYear;
+    return startYearNumber <= currentYearNumber && currentYearNumber <= endYear;
   };
 
   const getCellClassNames = useCellClassNames<DateType>({
@@ -43,6 +45,8 @@ function YearBody<DateType>(props: YearBodyProps<DateType>) {
     isInView,
     offsetCell: (date: DateType, offset: number) =>
       generateConfig.addYear(date, offset),
+    [styles.pickerCellInView]: isInView,
+    [styles.pickerCellSelected]: startYearNumber === yearNumber,
   });
 
   return (