react-day-picker 8.0.1 → 8.0.4

package/src/contexts/DayPicker/utils/parseFromToProps.test.ts

@@ -0,0 +1,47 @@
+import { parseFromToProps } from 'contexts/DayPicker/utils';
+
+describe('when "fromMonth" is passed in', () => {
+  const fromMonth = new Date(2021, 4, 3);
+  const expectedFromDate = new Date(2021, 4, 1);
+  const { fromDate } = parseFromToProps({ fromMonth });
+  test('"fromDate" should be the start of that month', () => {
+    expect(fromDate).toEqual(expectedFromDate);
+  });
+  describe('when "fromYear" is passed in', () => {
+    test('"fromDate" should be the start of that month', () => {
+      expect(fromDate).toEqual(expectedFromDate);
+    });
+  });
+});
+
+describe('when "fromYear" is passed in', () => {
+  const fromYear = 2021;
+  const expectedFromDate = new Date(2021, 0, 1);
+  const { fromDate } = parseFromToProps({ fromYear });
+  test('"fromDate" should be the start of that year', () => {
+    expect(fromDate).toEqual(expectedFromDate);
+  });
+});
+
+describe('when "toMonth" is passed in', () => {
+  const toMonth = new Date(2021, 4, 3);
+  const expectedToDate = new Date(2021, 4, 31);
+  const { toDate } = parseFromToProps({ toMonth });
+  test('"toDate" should be the end of that month', () => {
+    expect(toDate).toEqual(expectedToDate);
+  });
+  describe('when "fromYear" is passed in', () => {
+    test('"toDate" should be the end of that month', () => {
+      expect(toDate).toEqual(expectedToDate);
+    });
+  });
+});
+
+describe('when "toYear" is passed in', () => {
+  const toYear = 2021;
+  const expectedToDate = new Date(2021, 11, 31);
+  const { toDate } = parseFromToProps({ toYear });
+  test('"toDate" should be the end of that year', () => {
+    expect(toDate).toEqual(expectedToDate);
+  });
+});

package/src/contexts/DayPicker/utils/parseFromToProps.ts

@@ -0,0 +1,32 @@
+import endOfMonth from 'date-fns/endOfMonth';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+
+import { DayPickerBase } from 'types/DayPickerBase';
+
+/** Return the `fromDate` and `toDate` prop values values parsing the DayPicker props. */
+export function parseFromToProps(
+  props: Pick<
+    DayPickerBase,
+    'fromYear' | 'toYear' | 'fromDate' | 'toDate' | 'fromMonth' | 'toMonth'
+  >
+): { fromDate: Date | undefined; toDate: Date | undefined } {
+  const { fromYear, toYear, fromMonth, toMonth } = props;
+  let { fromDate, toDate } = props;
+
+  if (fromMonth) {
+    fromDate = startOfMonth(fromMonth);
+  } else if (fromYear) {
+    fromDate = new Date(fromYear, 0, 1);
+  }
+  if (toMonth) {
+    toDate = endOfMonth(toMonth);
+  } else if (toYear) {
+    toDate = new Date(toYear, 11, 31);
+  }
+
+  return {
+    fromDate: fromDate ? startOfDay(fromDate) : undefined,
+    toDate: toDate ? startOfDay(toDate) : undefined
+  };
+}

package/src/contexts/Focus/FocusContext.tsx

@@ -0,0 +1,174 @@
+import React, { createContext, ReactNode, useState } from 'react';
+
+import addDays from 'date-fns/addDays';
+import addMonths from 'date-fns/addMonths';
+import addWeeks from 'date-fns/addWeeks';
+import addYears from 'date-fns/addYears';
+import endOfWeek from 'date-fns/endOfWeek';
+import startOfWeek from 'date-fns/startOfWeek';
+
+import { useModifiers } from '../Modifiers';
+import { useNavigation } from '../Navigation';
+import { getInitialFocusTarget } from './utils/getInitialFocusTarget';
+
+/** Represents the value of the [[NavigationContext]]. */
+export type FocusContextValue = {
+  /** The day currently focused. */
+  focusedDay: Date | undefined;
+  /** Day that will be focused.  */
+  focusTarget: Date | undefined;
+  /** Focus a day. */
+  focus: (day: Date) => void;
+  /** Blur the focused day. */
+  blur: () => void;
+  /** Focus the day after the focused day. */
+  focusDayAfter: () => void;
+  /** Focus the day before the focused day. */
+  focusDayBefore: () => void;
+  /** Focus the day in the week before the focused day. */
+  focusWeekBefore: () => void;
+  /** Focus the day in the week after the focused day. */
+  focusWeekAfter: () => void;
+  /* Focus the day in the month before the focused day. */
+  focusMonthBefore: () => void;
+  /* Focus the day in the month after the focused day. */
+  focusMonthAfter: () => void;
+  /* Focus the day in the year before the focused day. */
+  focusYearBefore: () => void;
+  /* Focus the day in the year after the focused day. */
+  focusYearAfter: () => void;
+  /* Focus the day at the start of the week of the focused day. */
+  focusStartOfWeek: () => void;
+  /* Focus the day at the end of the week of focused day. */
+  focusEndOfWeek: () => void;
+};
+
+/**
+ * The Focus context shares details about the focused day for the keyboard
+ *
+ * Access this context from the [[useFocus]] hook.
+ */
+export const FocusContext = createContext<FocusContextValue | undefined>(
+  undefined
+);
+
+/** The provider for the [[FocusContext]]. */
+export function FocusProvider(props: { children: ReactNode }): JSX.Element {
+  const navigation = useNavigation();
+  const modifiers = useModifiers();
+
+  const [focusedDay, setFocusedDay] = useState<Date | undefined>();
+  const [lastFocused, setLastFocused] = useState<Date | undefined>();
+
+  const initialFocusTarget = getInitialFocusTarget(
+    navigation.displayMonths,
+    modifiers
+  );
+
+  // TODO: cleanup and test obscure code below
+  const focusTarget =
+    focusedDay ?? (lastFocused && navigation.isDateDisplayed(lastFocused))
+      ? lastFocused
+      : initialFocusTarget;
+
+  const blur = () => {
+    setLastFocused(focusedDay);
+    setFocusedDay(undefined);
+  };
+  const focus = (date: Date) => {
+    setFocusedDay(date);
+  };
+
+  const focusDayBefore = () => {
+    if (!focusedDay) return;
+    const before = addDays(focusedDay, -1);
+    focus(before);
+    navigation.goToDate(before, focusedDay);
+  };
+  const focusDayAfter = () => {
+    if (!focusedDay) return;
+    const after = addDays(focusedDay, 1);
+    focus(after);
+    navigation.goToDate(after, focusedDay);
+  };
+  const focusWeekBefore = () => {
+    if (!focusedDay) return;
+    const up = addWeeks(focusedDay, -1);
+    focus(up);
+    navigation.goToDate(up, focusedDay);
+  };
+  const focusWeekAfter = () => {
+    if (!focusedDay) return;
+    const down = addWeeks(focusedDay, 1);
+    focus(down);
+    navigation.goToDate(down, focusedDay);
+  };
+
+  const focusStartOfWeek = (): void => {
+    if (!focusedDay) return;
+    const dayToFocus = startOfWeek(focusedDay);
+    navigation.goToDate(dayToFocus, focusedDay);
+    focus(dayToFocus);
+  };
+
+  const focusEndOfWeek = (): void => {
+    if (!focusedDay) return;
+    const dayToFocus = endOfWeek(focusedDay);
+    navigation.goToDate(dayToFocus, focusedDay);
+    focus(dayToFocus);
+  };
+
+  const focusMonthBefore = (): void => {
+    if (!focusedDay) return;
+
+    const monthBefore = addMonths(focusedDay, -1);
+    navigation.goToDate(monthBefore, focusedDay);
+    focus(monthBefore);
+  };
+
+  const focusMonthAfter = () => {
+    if (!focusedDay) return;
+    const monthAfter = addMonths(focusedDay, 1);
+    navigation.goToDate(monthAfter, focusedDay);
+    focus(monthAfter);
+  };
+
+  const focusYearBefore = () => {
+    if (!focusedDay) return;
+
+    const yearBefore = addYears(focusedDay, -1);
+    navigation.goToDate(yearBefore, focusedDay);
+    focus(yearBefore);
+  };
+
+  const focusYearAfter = () => {
+    if (!focusedDay) return;
+
+    const yearAfter = addYears(focusedDay, 1);
+    navigation.goToDate(yearAfter, focusedDay);
+    focus(yearAfter);
+  };
+
+  const value: FocusContextValue = {
+    focusedDay,
+    focusTarget,
+    blur,
+    focus,
+    focusDayAfter,
+    focusDayBefore,
+    focusWeekAfter,
+    focusWeekBefore,
+    focusMonthBefore,
+    focusMonthAfter,
+    focusYearBefore,
+    focusYearAfter,
+    focusStartOfWeek,
+    focusEndOfWeek
+  };
+
+  return (
+    <FocusContext.Provider value={value}>
+      {props.children}
+    </FocusContext.Provider>
+  );
+}

package/src/contexts/Focus/index.ts

@@ -0,0 +1,2 @@
+export * from './FocusContext';
+export * from './useFocusContext';

package/src/contexts/Focus/useFocusContext.test.ts

@@ -0,0 +1,183 @@
+import { act, RenderResult } from '@testing-library/react-hooks';
+import {
+  addDays,
+  addMonths,
+  addWeeks,
+  addYears,
+  endOfWeek,
+  startOfWeek
+} from 'date-fns';
+
+import { customRenderHook } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { FocusContextValue, useFocusContext } from 'contexts/Focus';
+
+let renderResult: RenderResult<FocusContextValue>;
+
+const today = new Date(2021, 11, 8); // make sure is in the middle of the week for the complete test
+freezeBeforeAll(today);
+
+function setup() {
+  const { result } = customRenderHook(() => useFocusContext());
+  renderResult = result;
+}
+
+type HookFunction =
+  | 'focusDayAfter'
+  | 'focusDayBefore'
+  | 'focusWeekAfter'
+  | 'focusWeekBefore'
+  | 'focusMonthBefore'
+  | 'focusMonthAfter'
+  | 'focusYearBefore'
+  | 'focusYearAfter'
+  | 'focusStartOfWeek'
+  | 'focusEndOfWeek';
+
+beforeEach(() => {
+  setup();
+});
+
+test('`focusedDay` should be undefined', () => {
+  expect(renderResult.current.focusedDay).toBeUndefined();
+});
+
+const tests: Array<HookFunction> = [
+  'focusDayAfter',
+  'focusDayBefore',
+  'focusWeekAfter',
+  'focusWeekBefore',
+  'focusMonthBefore',
+  'focusMonthAfter',
+  'focusYearBefore',
+  'focusYearAfter',
+  'focusStartOfWeek',
+  'focusEndOfWeek'
+];
+describe.each(tests)('when calling %s', (fn: HookFunction) => {
+  beforeEach(() => {
+    renderResult.current[fn];
+  });
+  test('`focusedDay` should be undefined', () => {
+    expect(renderResult.current.focusedDay).toBeUndefined();
+  });
+});
+
+describe('when a day is focused', () => {
+  const day = today;
+  beforeEach(() => {
+    act(() => renderResult.current.focus(day));
+  });
+  test('should set the focused day', () => {
+    expect(renderResult.current.focusedDay).toEqual(day);
+  });
+  describe('when "focusDayBefore" is called', () => {
+    const dayBefore = addDays(day, -1);
+    beforeEach(() => {
+      act(() => renderResult.current.focusDayBefore());
+    });
+    test('should focus the day before', () => {
+      expect(renderResult.current.focusedDay).toEqual(dayBefore);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when "focusDayAfter" is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.focusDayAfter());
+    });
+    test('should focus the day after', () => {
+      const dayAfter = addDays(day, 1);
+      expect(renderResult.current.focusedDay).toEqual(dayAfter);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when "focusWeekBefore" is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.focusWeekBefore());
+    });
+    test('should focus the day in the previous week', () => {
+      const prevWeek = addWeeks(day, -1);
+      expect(renderResult.current.focusedDay).toEqual(prevWeek);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when "focusWeekAfter" is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.focusWeekAfter());
+    });
+    test('should focus the day in the next week', () => {
+      const nextWeek = addWeeks(day, 1);
+      expect(renderResult.current.focusedDay).toEqual(nextWeek);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when "focusStartOfWeek" is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.focusStartOfWeek());
+    });
+    test('should focus the first day of the week', () => {
+      const firstDayOfWeek = startOfWeek(day);
+      expect(renderResult.current.focusedDay).toEqual(firstDayOfWeek);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when "focusEndOfWeek" is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.focusEndOfWeek());
+    });
+    test('should focus the last day of the week', () => {
+      const lastDayOfWeek = endOfWeek(day);
+      expect(renderResult.current.focusedDay).toEqual(lastDayOfWeek);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when "focusMonthBefore" is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.focusMonthBefore());
+    });
+    test('should focus the day in the month before', () => {
+      const monthBefore = addMonths(day, -1);
+      expect(renderResult.current.focusedDay).toEqual(monthBefore);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when "focusMonthAfter" is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.focusMonthAfter());
+    });
+    test('should focus the day in the month after', () => {
+      const monthAfter = addMonths(day, 1);
+      expect(renderResult.current.focusedDay).toEqual(monthAfter);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when "focusYearBefore" is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.focusYearBefore());
+    });
+    test('should focus the day in the year before', () => {
+      const prevYear = addYears(day, -1);
+      expect(renderResult.current.focusedDay).toEqual(prevYear);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when "focusYearAfter" is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.focusYearAfter());
+    });
+    test('should focus the day in the year after', () => {
+      const nextYear = addYears(day, 1);
+      expect(renderResult.current.focusedDay).toEqual(nextYear);
+    });
+    test.todo('should call the navigation goToDate');
+  });
+  describe('when blur is called', () => {
+    beforeEach(() => {
+      act(() => renderResult.current.blur());
+    });
+    test('`focusedDay` should be undefined', () => {
+      expect(renderResult.current.focusedDay).toBeUndefined();
+    });
+  });
+});

package/src/contexts/Focus/useFocusContext.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+
+import { FocusContext, FocusContextValue } from './FocusContext';
+
+/** Hook to access the [[FocusContext]]. */
+export function useFocusContext(): FocusContextValue {
+  const context = useContext(FocusContext);
+  if (!context) {
+    throw new Error('useFocusContext must be used within a FocusProvider');
+  }
+  return context;
+}

package/src/contexts/Focus/utils/getInitialFocusTarget.test.tsx

@@ -0,0 +1,12 @@
+describe('when a day is selected', () => {
+  test.todo('should return the selected day');
+});
+
+describe('when a day is not selected', () => {
+  describe('when today is in the calendar', () => {
+    test.todo('should return the today date');
+  });
+  describe('when today is not in the calendar', () => {
+    test.todo('should return the first focusable day');
+  });
+});

package/src/contexts/Focus/utils/getInitialFocusTarget.tsx

@@ -0,0 +1,44 @@
+import addDays from 'date-fns/addDays';
+import endOfMonth from 'date-fns/endOfMonth';
+import startOfMonth from 'date-fns/startOfMonth';
+
+import { getActiveModifiers } from 'contexts/Modifiers';
+import { Modifiers } from 'types/Modifiers';
+
+/** Returns the day that should be the target of the focus when DayPicker is rendered the first time. */
+export function getInitialFocusTarget(
+  displayMonths: Date[],
+  modifiers: Modifiers
+) {
+  const firstDayInMonth = startOfMonth(displayMonths[0]);
+  const lastDayInMonth = endOfMonth(displayMonths[displayMonths.length - 1]);
+
+  // TODO: cleanup code
+  let firstFocusableDay;
+  let today;
+  let date = firstDayInMonth;
+
+  while (date <= lastDayInMonth) {
+    const activeModifiers = getActiveModifiers(date, modifiers);
+    const isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
+    if (!isFocusable) {
+      date = addDays(date, 1);
+      continue;
+    }
+    if (activeModifiers.selected) {
+      return date;
+    }
+    if (activeModifiers.today && !today) {
+      today = date;
+    }
+    if (!firstFocusableDay) {
+      firstFocusableDay = date;
+    }
+    date = addDays(date, 1);
+  }
+  if (today) {
+    return today;
+  } else {
+    return firstFocusableDay;
+  }
+}

package/src/contexts/Modifiers/ModifiersContext.tsx

@@ -0,0 +1,44 @@
+import React, { createContext, ReactNode } from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+import { useSelectMultiple } from 'contexts/SelectMultiple';
+import { useSelectRange } from 'contexts/SelectRange';
+import { CustomModifiers, InternalModifiers, Modifiers } from 'types/Modifiers';
+
+import { getCustomModifiers } from './utils/getCustomModifiers';
+import { getInternalModifiers } from './utils/getInternalModifiers';
+
+/** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use [[useModifiers]]. */
+export const ModifiersContext = createContext<Modifiers | undefined>(undefined);
+
+export type ModifiersProviderProps = {
+  children: ReactNode;
+};
+
+/** Provide the value for the [[ModifiersContext]]. */
+export function ModifiersProvider(props: ModifiersProviderProps): JSX.Element {
+  const dayPicker = useDayPicker();
+  const selectMultiple = useSelectMultiple();
+  const selectRange = useSelectRange();
+
+  const internalModifiers: InternalModifiers = getInternalModifiers(
+    dayPicker,
+    selectMultiple,
+    selectRange
+  );
+
+  const customModifiers: CustomModifiers = getCustomModifiers(
+    dayPicker.modifiers
+  );
+
+  const modifiers: Modifiers = {
+    ...internalModifiers,
+    ...customModifiers
+  };
+
+  return (
+    <ModifiersContext.Provider value={modifiers}>
+      {props.children}
+    </ModifiersContext.Provider>
+  );
+}

package/src/contexts/Modifiers/index.ts

@@ -0,0 +1,2 @@
+export * from './useModifiers';
+export * from './utils/getActiveModifiers';

package/src/contexts/Modifiers/useModifiers.test.ts

@@ -0,0 +1,46 @@
+import { RenderResult } from '@testing-library/react-hooks';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRenderHook } from 'test/render';
+
+import { useModifiers } from 'contexts/Modifiers';
+import { DayModifiers, InternalModifier, Modifiers } from 'types/Modifiers';
+
+let renderResult: RenderResult<Modifiers>;
+
+function setup(dayPickerProps: DayPickerProps) {
+  const { result } = customRenderHook(() => useModifiers(), dayPickerProps);
+  renderResult = result;
+}
+
+const internalModifiers = Object.values(InternalModifier);
+
+describe('when rendered with custom modifiers', () => {
+  const modifier = new Date(2018, 11, 12);
+  const dayModifiers: DayModifiers = {
+    foo: modifier,
+    today: modifier,
+    outside: modifier,
+    disabled: modifier,
+    selected: modifier,
+    hidden: modifier,
+    range_start: modifier,
+    range_end: modifier,
+    range_middle: modifier
+  };
+  beforeEach(() => {
+    setup({ modifiers: dayModifiers });
+  });
+
+  test('should return the custom modifiers', () => {
+    expect(renderResult.current.foo).toEqual([dayModifiers.foo]);
+  });
+  test.each(internalModifiers)(
+    'should override the %s internal modifier',
+    (internalModifier) => {
+      expect(renderResult.current[internalModifier]).toEqual([
+        dayModifiers[internalModifier]
+      ]);
+    }
+  );
+});

package/src/contexts/Modifiers/useModifiers.ts

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+
+import { Modifiers } from 'types/Modifiers';
+
+import { ModifiersContext } from './ModifiersContext';
+
+/**
+ * Return the modifiers used by DayPicker.
+ *
+ * Requires to be wrapped into [[ModifiersProvider]]. */
+export function useModifiers(): Modifiers {
+  const context = useContext(ModifiersContext);
+  if (!context) {
+    throw new Error('useModifiers must be used within a ModifiersProvider');
+  }
+  return context;
+}

package/src/contexts/Modifiers/utils/getActiveModifiers.test.ts

@@ -0,0 +1,53 @@
+import { addMonths } from 'date-fns';
+
+import {
+  InternalModifier,
+  InternalModifiers,
+  Modifiers
+} from 'types/Modifiers';
+
+import { getActiveModifiers } from './getActiveModifiers';
+
+const day = new Date();
+
+const internalModifiers: InternalModifiers = {
+  [InternalModifier.Outside]: [],
+  [InternalModifier.Disabled]: [],
+  [InternalModifier.Selected]: [],
+  [InternalModifier.Hidden]: [],
+  [InternalModifier.Today]: [],
+  [InternalModifier.RangeStart]: [],
+  [InternalModifier.RangeEnd]: [],
+  [InternalModifier.RangeMiddle]: []
+};
+describe('when the day matches a modifier', () => {
+  const modifiers: Modifiers = {
+    ...internalModifiers,
+    foo: [day]
+  };
+  const result = getActiveModifiers(day, modifiers);
+  test('should return the modifier as active', () => {
+    expect(result.foo).toBe(true);
+  });
+});
+describe('when the day does not match a modifier', () => {
+  const modifiers: Modifiers = {
+    ...internalModifiers,
+    foo: []
+  };
+  const result = getActiveModifiers(day, modifiers);
+  test('should not return the modifier as active', () => {
+    expect(result.foo).toBeUndefined();
+  });
+});
+
+describe('when the day is not in the same display month', () => {
+  const modifiers: Modifiers = {
+    ...internalModifiers
+  };
+  const displayMonth = addMonths(day, 1);
+  const result = getActiveModifiers(day, modifiers, displayMonth);
+  test('should not return the modifier as active', () => {
+    expect(result.outside).toBe(true);
+  });
+});