Remove disallowFocusOnDisabledDates and disallowFocusOnDisabledNaviga…

…tion props
gpbl · Jun 22, 2022 · 6d78c9f · 6d78c9f
1 parent e39cad2
commit 6d78c9f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 56 deletions.
diff --git a/packages/react-day-picker/src/components/Navigation/Navigation.tsx b/packages/react-day-picker/src/components/Navigation/Navigation.tsx
@@ -32,8 +32,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
     classNames,
     styles,
     labels: { labelPrevious, labelNext },
-    components,
-    disallowFocusOnDisabledNavigation
+    components
   } = useDayPicker();
 
   if (!props.nextMonth && !props.previousMonth) {
@@ -63,11 +62,6 @@ export function Navigation(props: NavigationProps): JSX.Element {
           style={styles.nav_button_previous}
           disabled={!props.previousMonth}
           onClick={props.onPreviousClick}
-          tabIndex={
-            disallowFocusOnDisabledNavigation && !props.previousMonth
-              ? -1
-              : undefined
-          }
         >
           {dir === 'rtl' ? (
             <IconRightComponent
@@ -89,11 +83,6 @@ export function Navigation(props: NavigationProps): JSX.Element {
           style={styles.nav_button_next}
           disabled={!props.nextMonth}
           onClick={props.onNextClick}
-          tabIndex={
-            disallowFocusOnDisabledNavigation && !props.nextMonth
-              ? -1
-              : undefined
-          }
         >
           {dir === 'rtl' ? (
             <IconLeftComponent

diff --git a/packages/react-day-picker/src/contexts/DayPicker/DayPickerContext.tsx b/packages/react-day-picker/src/contexts/DayPicker/DayPickerContext.tsx
@@ -38,8 +38,6 @@ export interface DayPickerContextValue extends DayPickerBase {
   numberOfMonths: number;
   styles: Styles;
   today: Date;
-  disallowFocusOnDisabledDates?: boolean;
-  disallowFocusOnDisabledNavigation?: boolean;
 }
 
 /**
@@ -147,10 +145,7 @@ export function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {
     },
     toDate,
     today: initialProps.today ?? defaults.today,
-    weekStartsOn: initialProps.weekStartsOn,
-    disallowFocusOnDisabledDates: initialProps.disallowFocusOnDisabledDates,
-    disallowFocusOnDisabledNavigation:
-      initialProps.disallowFocusOnDisabledNavigation
+    weekStartsOn: initialProps.weekStartsOn
   };
 
   return (

diff --git a/packages/react-day-picker/src/contexts/Focus/FocusContext.tsx b/packages/react-day-picker/src/contexts/Focus/FocusContext.tsx
@@ -60,7 +60,7 @@ export const FocusContext = createContext<FocusContextValue | undefined>(
 export function FocusProvider(props: { children: ReactNode }): JSX.Element {
   const navigation = useNavigation();
   const modifiers = useModifiers();
-  const { fromDate, toDate, disallowFocusOnDisabledDates } = useDayPicker();
+  const { fromDate, toDate } = useDayPicker();
 
   const [focusedDay, setFocusedDay] = useState<Date | undefined>();
   const [lastFocused, setLastFocused] = useState<Date | undefined>();
@@ -87,13 +87,11 @@ export function FocusProvider(props: { children: ReactNode }): JSX.Element {
   const moveFocus = (addFn: typeof addDays, after: boolean) => {
     if (!focusedDay) return;
     let newFocusedDay = addFn(focusedDay, after ? 1 : -1);
-    if (disallowFocusOnDisabledDates) {
-      if (!after && fromDate) {
-        newFocusedDay = max([fromDate, newFocusedDay]);
-      }
-      if (after && toDate) {
-        newFocusedDay = min([toDate, newFocusedDay]);
-      }
+    if (!after && fromDate) {
+      newFocusedDay = max([fromDate, newFocusedDay]);
+    }
+    if (after && toDate) {
+      newFocusedDay = min([toDate, newFocusedDay]);
     }
     if (isSameDay(focusedDay, newFocusedDay)) return;
     navigation.goToDate(newFocusedDay, focusedDay);

diff --git a/packages/react-day-picker/src/contexts/Focus/useFocusContext.test.ts b/packages/react-day-picker/src/contexts/Focus/useFocusContext.test.ts
@@ -81,9 +81,8 @@ describe('when a day is focused', () => {
     test('should focus the day before', () => {
       expect(renderResult.current.focusedDay).toEqual(dayBefore);
     });
-    test('should not focus the day before if the day is unfocusable', async () => {
+    test('should not focus the day before if the day is disabled', async () => {
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         fromDate: day
       });
       await act(async () => {
@@ -102,9 +101,8 @@ describe('when a day is focused', () => {
       const dayAfter = addDays(day, 1);
       expect(renderResult.current.focusedDay).toEqual(dayAfter);
     });
-    test('should not focus the day after if the day is unfocusable', async () => {
+    test('should not focus the day after if the day is disabled', async () => {
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         toDate: day
       });
       await act(async () => {
@@ -123,10 +121,9 @@ describe('when a day is focused', () => {
       const prevWeek = addWeeks(day, -1);
       expect(renderResult.current.focusedDay).toEqual(prevWeek);
     });
-    test('should not focus the day in the previous week if the day is unfocusable', async () => {
+    test('should not focus the day in the previous week if the day is disabled', async () => {
       const fromDate = addDays(day, -3);
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         fromDate
       });
       await act(async () => {
@@ -145,10 +142,9 @@ describe('when a day is focused', () => {
       const nextWeek = addWeeks(day, 1);
       expect(renderResult.current.focusedDay).toEqual(nextWeek);
     });
-    test('should not focus the day in the next week if the day is unfocusable', async () => {
+    test('should not focus the day in the next week if the day is disabled', async () => {
       const toDate = addDays(day, 4);
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         toDate
       });
       await act(async () => {
@@ -167,10 +163,9 @@ describe('when a day is focused', () => {
       const firstDayOfWeek = startOfWeek(day);
       expect(renderResult.current.focusedDay).toEqual(firstDayOfWeek);
     });
-    test('should not focus the first day of the week if the day is unfocusable', async () => {
+    test('should not focus the first day of the week if the day is disabled', async () => {
       const fromDate = addDays(startOfWeek(day), 1);
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         fromDate
       });
       await act(async () => {
@@ -189,10 +184,9 @@ describe('when a day is focused', () => {
       const lastDayOfWeek = endOfWeek(day);
       expect(renderResult.current.focusedDay).toEqual(lastDayOfWeek);
     });
-    test('should not focus the last day of the week if the day is unfocusable', async () => {
+    test('should not focus the last day of the week if the day is disabled', async () => {
       const toDate = addDays(endOfWeek(day), -1);
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         toDate
       });
       await act(async () => {
@@ -214,10 +208,9 @@ describe('when a day is focused', () => {
       const monthBefore = addMonths(day, -1);
       expect(renderResult.current.focusedDay).toEqual(monthBefore);
     });
-    test('should not focus the day in the month before if the day is unfocusable', async () => {
+    test('should not focus the day in the month before if the day is disabled', async () => {
       const fromDate = addDays(day, -10);
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         fromDate
       });
       await act(async () => {
@@ -236,10 +229,9 @@ describe('when a day is focused', () => {
       const monthAfter = addMonths(day, 1);
       expect(renderResult.current.focusedDay).toEqual(monthAfter);
     });
-    test('should not focus the day in the month after if the day is unfocusable', async () => {
+    test('should not focus the day in the month after if the day is disabled', async () => {
       const toDate = addDays(day, 10);
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         toDate
       });
       await act(async () => {
@@ -258,10 +250,9 @@ describe('when a day is focused', () => {
       const prevYear = addYears(day, -1);
       expect(renderResult.current.focusedDay).toEqual(prevYear);
     });
-    test('should not focus the day in the year before if the day is unfocusable', async () => {
+    test('should not focus the day in the year before if the day is disabled', async () => {
       const fromDate = addMonths(day, -10);
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         fromDate
       });
       await act(async () => {
@@ -280,10 +271,9 @@ describe('when a day is focused', () => {
       const nextYear = addYears(day, 1);
       expect(renderResult.current.focusedDay).toEqual(nextYear);
     });
-    test('should not focus the day in the year after if the day is unfocusable', async () => {
+    test('should not focus the day in the year after if the day is disabled', async () => {
       const toDate = addMonths(day, 10);
       const { result } = customRenderHook(() => useFocusContext(), {
-        disallowFocusOnDisabledDates: true,
         toDate
       });
       await act(async () => {

diff --git a/packages/react-day-picker/src/types/DayPickerBase.ts b/packages/react-day-picker/src/types/DayPickerBase.ts
@@ -221,16 +221,6 @@ export interface DayPickerBase {
    */
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
-  /**
-   * Disallow focus on disabled dates.
-   */
-  disallowFocusOnDisabledDates?: boolean;
-
-  /**
-   * Disallow focus on disabled navigation.
-   */
-  disallowFocusOnDisabledNavigation?: boolean;
-
   onDayClick?: DayClickEventHandler;
   onDayFocus?: DayFocusEventHandler;
   onDayBlur?: DayFocusEventHandler;