Better default focus management

lib/src/constants/prop-types.ts

@@ -26,7 +26,6 @@ export const datePickerDefaultProps = {
   invalidDateMessage: 'Invalid Date Format',
   minDateMessage: 'Date should not be before minimal date',
   maxDateMessage: 'Date should not be after maximal date',
-  allowKeyboardControl: true,
 } as BaseDatePickerProps;
 
 export const dateTimePickerDefaultProps = {

lib/src/views/Calendar/Calendar.tsx

@@ -8,7 +8,6 @@ import { useUtils, useNow } from '../../_shared/hooks/useUtils';
 import { PickerOnChangeFn } from '../../_shared/hooks/useViews';
 import { findClosestEnabledDate } from '../../_helpers/date-utils';
 import { makeStyles, useTheme, Typography } from '@material-ui/core';
-import { FORCE_FINISH_PICKER } from '../../_shared/hooks/usePickerState';
 import { useGlobalKeyDown, keycode } from '../../_shared/hooks/useKeyDown';
 
 export interface ExportedCalendarProps {
@@ -35,7 +34,7 @@ export interface ExportedCalendarProps {
   ) => JSX.Element;
   /**
    * Enables keyboard listener for moving between days in calendar
-   * @default true
+   * @default currentWrapper !== 'static'
    */
   allowKeyboardControl?: boolean;
   /** Custom loading indicator  */
@@ -143,14 +142,17 @@ export const Calendar: React.FC<CalendarProps> = ({
   }, []); // eslint-disable-line
 
   const nowFocusedDay = focusedDay || date;
-  useGlobalKeyDown(Boolean(allowKeyboardControl && wrapperVariant !== 'static'), {
-    [keycode.Enter]: () => handleDaySelect(nowFocusedDay, FORCE_FINISH_PICKER),
+  useGlobalKeyDown(Boolean(allowKeyboardControl ?? wrapperVariant !== 'static'), {
     [keycode.ArrowUp]: () => changeFocusedDay(utils.addDays(nowFocusedDay, -7)),
     [keycode.ArrowDown]: () => changeFocusedDay(utils.addDays(nowFocusedDay, 7)),
     [keycode.ArrowLeft]: () =>
       changeFocusedDay(utils.addDays(nowFocusedDay, theme.direction === 'ltr' ? -1 : 1)),
     [keycode.ArrowRight]: () =>
       changeFocusedDay(utils.addDays(nowFocusedDay, theme.direction === 'ltr' ? 1 : -1)),
+    [keycode.Home]: () =>
+      changeFocusedDay(utils.addDays(nowFocusedDay, -utils.toJsDate(nowFocusedDay).getDay())),
+    [keycode.End]: () =>
+      changeFocusedDay(utils.addDays(nowFocusedDay, 6 - utils.toJsDate(nowFocusedDay).getDay())),
   });
 
   const selectedDate = utils.startOfDay(date);

lib/src/views/Calendar/YearSelection.tsx

@@ -46,7 +46,8 @@ export const YearSelection: React.FC<YearSelectionProps> = ({
   const theme = useTheme();
   const utils = useUtils();
   const classes = useStyles();
-  const [focusedYear, setFocused] = React.useState<number | null>(null);
+  const currentYear = utils.getYear(date);
+  const [focusedYear, setFocused] = React.useState<number | null>(currentYear);
   const wrapperVariant = React.useContext(WrapperVariantContext);
   const selectedYearRef = React.useRef<HTMLDivElement>(null);
 
@@ -63,7 +64,6 @@ export const YearSelection: React.FC<YearSelectionProps> = ({
     }
   }, []); // eslint-disable-line
 
-  const currentYear = utils.getYear(date);
   const handleYearSelection = React.useCallback(
     (year: number, isFinish = true) => {
       const newDate = utils.setYear(date, year);
@@ -82,7 +82,7 @@ export const YearSelection: React.FC<YearSelectionProps> = ({
 
   const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3;
   const nowFocusedYear = focusedYear || currentYear;
-  useGlobalKeyDown(wrapperVariant !== 'static' && Boolean(allowKeyboardControl), {
+  useGlobalKeyDown(Boolean(allowKeyboardControl ?? wrapperVariant !== 'static'), {
     [keys.ArrowUp]: () => setFocused(nowFocusedYear - yearsInRow),
     [keys.ArrowDown]: () => setFocused(nowFocusedYear + yearsInRow),
     [keys.ArrowLeft]: () => setFocused(nowFocusedYear + (theme.direction === 'ltr' ? -1 : 1)),

lib/src/views/Clock/Clock.tsx

@@ -10,7 +10,6 @@ import { PickerOnChangeFn } from '../../_shared/hooks/useViews';
 import { getHours, getMinutes } from '../../_helpers/time-utils';
 import { useMeridiemMode } from '../../TimePicker/TimePickerToolbar';
 import { IconButton, Typography, makeStyles } from '@material-ui/core';
-import { FORCE_FINISH_PICKER } from '../../_shared/hooks/usePickerState';
 import { useGlobalKeyDown, keycode } from '../../_shared/hooks/useKeyDown';
 import { WrapperVariantContext } from '../../wrappers/WrapperVariantContext';
 
@@ -24,6 +23,7 @@ export interface ClockProps {
   ampm?: boolean;
   minutesStep?: number;
   ampmInClock?: boolean;
+  allowKeyboardControl?: boolean;
 }
 
 export const useStyles = makeStyles(
@@ -99,6 +99,7 @@ export const Clock: React.FC<ClockProps> = ({
   type,
   ampm,
   minutesStep = 1,
+  allowKeyboardControl,
   onChange,
 }) => {
   const utils = useUtils();
@@ -168,11 +169,13 @@ export const Clock: React.FC<ClockProps> = ({
   }, [type, value]);
 
   const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
-  useGlobalKeyDown(!isMoving.current, {
-    [keycode.ArrowUp]: () => onChange(value + keyboardControlStep, false),
-    [keycode.ArrowDown]: () => onChange(value - keyboardControlStep, false),
-    [keycode.Enter]: () => onChange(value, FORCE_FINISH_PICKER),
-  });
+  useGlobalKeyDown(
+    Boolean(allowKeyboardControl ?? wrapperVariant !== 'static') && !isMoving.current,
+    {
+      [keycode.ArrowUp]: () => onChange(value + keyboardControlStep, false),
+      [keycode.ArrowDown]: () => onChange(value - keyboardControlStep, false),
+    }
+  );
 
   return (
     <div className={classes.container}>

lib/src/views/Clock/ClockView.tsx

@@ -40,6 +40,11 @@ export interface ClockViewProps extends BaseClockViewProps {
   getMinutesClockNumberText?: (minutesText: string) => string;
   /** Get clock number aria-text for seconds */
   getSecondsClockNumberText?: (secondsText: string) => string;
+  /**
+   * Enables keyboard listener for moving between days in calendar
+   * @default currentWrapper !== 'static'
+   */
+  allowKeyboardControl?: boolean;
 }
 
 const getHoursAriaText = (hour: string) => `${hour} hours`;
@@ -53,6 +58,7 @@ export const ClockView: React.FC<ClockViewProps> = ({
   date,
   minutesStep,
   ampmInClock,
+  allowKeyboardControl,
   getHoursClockNumberText = getHoursAriaText,
   getMinutesClockNumberText = getMinutesAriaText,
   getSecondsClockNumberText = getSecondsAriaText,
@@ -145,6 +151,7 @@ export const ClockView: React.FC<ClockViewProps> = ({
       type={type}
       ampm={ampm}
       minutesStep={minutesStep}
+      allowKeyboardControl={allowKeyboardControl}
       {...viewProps}
     />
   );