react-day-picker 8.0.3 → 8.0.4

package/src/contexts/SelectRange/useSelectRange.test.ts

@@ -0,0 +1,282 @@
+import { RenderResult } from '@testing-library/react-hooks';
+import {
+  addDays,
+  addMonths,
+  differenceInCalendarDays,
+  subDays
+} from 'date-fns';
+
+import { customRenderHook } from 'test/render/customRenderHook';
+import { freezeBeforeAll } from 'test/utils';
+
+import { isMatch } from 'contexts/Modifiers/utils/isMatch';
+import { DayPickerBase } from 'types/DayPickerBase';
+import { DayPickerRangeProps } from 'types/DayPickerRange';
+import { ActiveModifiers } from 'types/Modifiers';
+
+import { SelectRangeContextValue } from './SelectRangeContext';
+import { useSelectRange } from './useSelectRange';
+
+const today = new Date(2021, 11, 8);
+freezeBeforeAll(today);
+
+let result: RenderResult<SelectRangeContextValue>;
+function setup(dayPickerProps?: DayPickerBase) {
+  const view = customRenderHook(useSelectRange, dayPickerProps);
+  result = view.result;
+}
+
+describe('when is not a multiple select DayPicker', () => {
+  beforeAll(() => {
+    setup();
+  });
+  test('the selected day should be undefined', () => {
+    expect(result.current.selected).toBeUndefined();
+  });
+});
+
+const initialProps: DayPickerRangeProps = {
+  mode: 'range',
+  onDayClick: jest.fn(),
+  onSelect: jest.fn()
+};
+
+const from = today;
+const to = addDays(today, 6);
+const stubEvent = {} as React.MouseEvent;
+
+describe('when no days are selected', () => {
+  beforeAll(() => {
+    setup(initialProps);
+  });
+  test('the selected days should be undefined', () => {
+    expect(result.current.selected).toBeUndefined();
+  });
+  describe('when "onDayClick" is called', () => {
+    const day = from;
+    const activeModifiers = {};
+    beforeAll(() => {
+      result.current.onDayClick?.(day, activeModifiers, stubEvent);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+    test('should call the "onDayClick" from the DayPicker props', () => {
+      expect(initialProps.onDayClick).toHaveBeenCalledWith(
+        day,
+        activeModifiers,
+        stubEvent
+      );
+    });
+    test('should call "onSelect" with the clicked day as the "from" propx', () => {
+      expect(initialProps.onSelect).toHaveBeenCalledWith(
+        { from: day, to: undefined },
+        day,
+        activeModifiers,
+        stubEvent
+      );
+    });
+  });
+});
+
+describe('when only the "from" day is selected', () => {
+  const selected = { from, to: undefined };
+  const dayPickerProps: DayPickerRangeProps = {
+    ...initialProps,
+    selected
+  };
+  beforeAll(() => {
+    setup(dayPickerProps);
+  });
+  test('should return the "range_start" modifiers with the "from" day', () => {
+    expect(result.current.modifiers.range_start).toEqual([from]);
+  });
+  test('should return the "range_end" modifiers with the "from" day', () => {
+    expect(result.current.modifiers.range_end).toEqual([from]);
+  });
+  test('should not return any "range_middle" modifiers', () => {
+    expect(result.current.modifiers.range_middle).toEqual([]);
+  });
+});
+
+describe('when a complete range of days is selected', () => {
+  const selected = { from, to };
+  const dayPickerProps: DayPickerRangeProps = {
+    ...initialProps,
+    selected
+  };
+  beforeAll(() => {
+    setup(dayPickerProps);
+  });
+  test('should return the "range_start" modifiers with the "from" day', () => {
+    expect(result.current.modifiers.range_start).toEqual([from]);
+  });
+  test('should return the "range_end" modifiers with the "to" day', () => {
+    expect(result.current.modifiers.range_end).toEqual([to]);
+  });
+  test('should return the "range_middle" range modifiers', () => {
+    expect(result.current.modifiers.range_middle).toEqual([
+      { after: from, before: to }
+    ]);
+  });
+  describe('when "onDayClick" is called with the day before the from day', () => {
+    const day = addDays(from, -1);
+    const activeModifiers = {};
+
+    beforeAll(() => {
+      result.current.onDayClick?.(day, activeModifiers, stubEvent);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+    test('should call the "onDayClick" from the DayPicker props', () => {
+      expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
+        day,
+        activeModifiers,
+        stubEvent
+      );
+    });
+    test('should call "onSelect" with the day selected', () => {
+      expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
+        { from: day, to },
+        day,
+        activeModifiers,
+        stubEvent
+      );
+    });
+  });
+});
+
+describe('when the max number of the selected days is reached', () => {
+  const selected = { from, to };
+  const dayPickerProps: DayPickerRangeProps = {
+    ...initialProps,
+    selected,
+    max: Math.abs(differenceInCalendarDays(to, from))
+  };
+  beforeAll(() => {
+    setup(dayPickerProps);
+  });
+  test('the days in the range should not be disabled', () => {
+    const { disabled } = result.current.modifiers;
+    expect(isMatch(from, disabled)).toBe(false);
+    expect(isMatch(to, disabled)).toBe(false);
+  });
+  test('the other days should be disabled', () => {
+    const { disabled } = result.current.modifiers;
+    expect(isMatch(addMonths(from, 1), disabled)).toBe(true);
+  });
+  describe('when "onDayClick" is called with a new day', () => {
+    const day = addMonths(from, 1);
+    const activeModifiers: ActiveModifiers = {};
+
+    beforeAll(() => {
+      result.current.onDayClick?.(day, activeModifiers, stubEvent);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+    test('should call the "onDayClick" from the DayPicker props', () => {
+      expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
+        day,
+        activeModifiers,
+        stubEvent
+      );
+    });
+    test('should not call onSelect', () => {
+      expect(dayPickerProps.onSelect).not.toHaveBeenCalled();
+    });
+  });
+});
+
+describe('when the minimum number of days are selected', () => {
+  const selected = { from, to };
+  const dayPickerProps: DayPickerRangeProps = {
+    ...initialProps,
+    selected,
+    min: Math.abs(differenceInCalendarDays(to, from))
+  };
+  beforeAll(() => {
+    setup(dayPickerProps);
+  });
+  describe('when "onDayClick" is called with a day before "from"', () => {
+    const day = subDays(from, 1);
+    const activeModifiers: ActiveModifiers = { selected: true };
+
+    beforeAll(() => {
+      result.current.onDayClick?.(day, activeModifiers, stubEvent);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+    test('should call "onSelect" with the day included in the range', () => {
+      expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
+        { from: day, to },
+        day,
+        activeModifiers,
+        stubEvent
+      );
+    });
+  });
+  describe('when "onDayClick" is called with the "from" day', () => {
+    const day = from;
+    const activeModifiers: ActiveModifiers = { selected: true };
+    beforeAll(() => {
+      result.current.onDayClick?.(day, activeModifiers, stubEvent);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+
+    test('should call the "onDayClick" from the DayPicker props', () => {
+      expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
+        day,
+        activeModifiers,
+        stubEvent
+      );
+    });
+    test('should call "onSelect" with an undefined range', () => {
+      expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
+        undefined,
+        day,
+        activeModifiers,
+        stubEvent
+      );
+    });
+  });
+
+  describe('when "onDayClick" is called with the "to" day', () => {
+    const day = to;
+    const activeModifiers: ActiveModifiers = { selected: true };
+    beforeAll(() => {
+      result.current.onDayClick?.(day, activeModifiers, stubEvent);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+
+    test('should call "onSelect" without the "to" in the range', () => {
+      expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
+        { from: day, to: undefined },
+        day,
+        activeModifiers,
+        stubEvent
+      );
+    });
+  });
+
+  describe('when "onDayClick" is called with a day before "to"', () => {
+    const day = subDays(to, 1);
+    const activeModifiers: ActiveModifiers = { selected: true };
+
+    beforeAll(() => {
+      result.current.onDayClick?.(day, activeModifiers, stubEvent);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+    test('should not call "onSelect"', () => {
+      expect(dayPickerProps.onSelect).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/contexts/SelectRange/useSelectRange.ts

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

package/src/contexts/SelectRange/utils/addToRange.test.ts

@@ -0,0 +1,119 @@
+import { addDays, subDays } from 'date-fns';
+
+import { DateRange } from 'types/Matchers';
+
+import { addToRange } from './addToRange';
+
+describe('when no "from" is the range', () => {
+  const range = { from: undefined };
+  const day = new Date();
+  let result: DateRange | undefined;
+  beforeAll(() => {
+    result = addToRange(day, range);
+  });
+  test('should set "from" as the given day', () => {
+    expect(result).toEqual({ from: day, to: undefined });
+  });
+});
+
+describe('when no "to" is the range', () => {
+  const day = new Date();
+  const range = { from: day, to: undefined };
+  describe('and the day is the same as the "from" day', () => {
+    let result: DateRange | undefined;
+    beforeAll(() => {
+      result = addToRange(day, range);
+    });
+    test('should return it in the range', () => {
+      expect(result).toEqual({ from: day, to: day });
+    });
+  });
+  describe('and the day is before "from" day', () => {
+    const day = subDays(range.from, 1);
+    let result: DateRange | undefined;
+    beforeAll(() => {
+      result = addToRange(day, range);
+    });
+    test('should set the day as the "from" range', () => {
+      expect(result).toEqual({ from: day, to: range.from });
+    });
+  });
+  describe('and the day is after the "from" day', () => {
+    const day = addDays(range.from, 1);
+    let result: DateRange | undefined;
+    beforeAll(() => {
+      result = addToRange(day, range);
+    });
+    test('should set the day as the "to" date', () => {
+      expect(result).toEqual({ from: range.from, to: day });
+    });
+  });
+});
+
+describe('when "from", "to" and "day" are the same', () => {
+  const day = new Date();
+  const range = { from: day, to: day };
+  let result: DateRange | undefined;
+  beforeAll(() => {
+    result = addToRange(day, range);
+  });
+  test('should return an undefined range (reset)', () => {
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('when "to" and "day" are the same', () => {
+  const from = new Date();
+  const to = addDays(from, 4);
+  const day = to;
+  const range = { from, to };
+  let result: DateRange | undefined;
+  beforeAll(() => {
+    result = addToRange(day, range);
+  });
+  test('should set "to" to undefined', () => {
+    expect(result).toEqual({ from: to, to: undefined });
+  });
+});
+
+describe('when "from" and "day" are the same', () => {
+  const from = new Date();
+  const to = addDays(from, 4);
+  const day = from;
+  const range = { from, to };
+  let result: DateRange | undefined;
+  beforeAll(() => {
+    result = addToRange(day, range);
+  });
+  test('should return an undefined range (reset)', () => {
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('when "from" is after "day"', () => {
+  const day = new Date();
+  const from = addDays(day, 1);
+  const to = addDays(from, 4);
+  const range = { from, to };
+  let result: DateRange | undefined;
+  beforeAll(() => {
+    result = addToRange(day, range);
+  });
+  test('should set the day as "from"', () => {
+    expect(result).toEqual({ from: day, to: range.to });
+  });
+});
+
+describe('when "from" is before "day"', () => {
+  const day = new Date();
+  const from = subDays(day, 1);
+  const to = addDays(from, 4);
+  const range = { from, to };
+  let result: DateRange | undefined;
+  beforeAll(() => {
+    result = addToRange(day, range);
+  });
+  test('should set the day as "to"', () => {
+    expect(result).toEqual({ from: range.from, to: day });
+  });
+});

package/src/contexts/SelectRange/utils/addToRange.ts

@@ -0,0 +1,43 @@
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isSameDay from 'date-fns/isSameDay';
+
+import { DateRange } from 'types/Matchers';
+
+/**
+ * Add a day to an existing range.
+ *
+ * The returned range takes in account the `undefined` values and if the added
+ * day is already present in the range.
+ */
+export function addToRange(
+  day: Date,
+  range?: DateRange
+): DateRange | undefined {
+  const { from, to } = range || {};
+  if (!from) {
+    return { from: day, to: undefined };
+  }
+  if (!to && isSameDay(from, day)) {
+    return { from: from, to: day };
+  }
+  if (!to && isBefore(day, from)) {
+    return { from: day, to: from };
+  }
+  if (!to) {
+    return { from, to: day };
+  }
+  if (isSameDay(to, day) && isSameDay(from, day)) {
+    return undefined;
+  }
+  if (isSameDay(to, day)) {
+    return { from: to, to: undefined };
+  }
+  if (isSameDay(from, day)) {
+    return undefined;
+  }
+  if (isAfter(from, day)) {
+    return { from: day, to };
+  }
+  return { from, to: day };
+}

package/src/contexts/SelectSingle/SelectSingleContext.tsx

@@ -0,0 +1,80 @@
+import React, { createContext } from 'react';
+
+import { DayPickerBase } from 'types/DayPickerBase';
+import { DayPickerSingleProps, isDayPickerSingle } from 'types/DayPickerSingle';
+import { DayClickEventHandler } from 'types/EventHandlers';
+
+/** Represents the value of a [[SelectSingleContext]]. */
+export interface SelectSingleContextValue {
+  /** The day that has been selected. */
+  selected: Date | undefined;
+  /** Event handler to attach to the day button to enable the single select. */
+  onDayClick?: DayClickEventHandler;
+}
+
+/**
+ * The SelectSingle context shares details about the selected days when in
+ * single selection mode.
+ *
+ * Access this context from the [[useSelectSingle]] hook.
+ */
+export const SelectSingleContext = createContext<
+  SelectSingleContextValue | undefined
+>(undefined);
+
+type SelectSingleProviderProps = {
+  initialProps: DayPickerBase;
+  children: React.ReactNode;
+};
+
+/** Provides the values for the [[SelectSingleProvider]]. */
+export function SelectSingleProvider(
+  props: SelectSingleProviderProps
+): JSX.Element {
+  if (!isDayPickerSingle(props.initialProps)) {
+    const emptyContextValue: SelectSingleContextValue = {
+      selected: undefined
+    };
+    return (
+      <SelectSingleContext.Provider value={emptyContextValue}>
+        {props.children}
+      </SelectSingleContext.Provider>
+    );
+  }
+  return (
+    <SelectSingleProviderInternal
+      initialProps={props.initialProps}
+      children={props.children}
+    />
+  );
+}
+
+type SelectSingleProviderInternal = {
+  initialProps: DayPickerSingleProps;
+  children: React.ReactNode;
+};
+
+export function SelectSingleProviderInternal({
+  initialProps,
+  children
+}: SelectSingleProviderInternal): JSX.Element {
+  const onDayClick: DayClickEventHandler = (day, activeModifiers, e) => {
+    initialProps.onDayClick?.(day, activeModifiers, e);
+
+    if (activeModifiers.selected && !initialProps.required) {
+      initialProps.onSelect?.(undefined, day, activeModifiers, e);
+      return;
+    }
+    initialProps.onSelect?.(day, day, activeModifiers, e);
+  };
+
+  const contextValue: SelectSingleContextValue = {
+    selected: initialProps.selected,
+    onDayClick
+  };
+  return (
+    <SelectSingleContext.Provider value={contextValue}>
+      {children}
+    </SelectSingleContext.Provider>
+  );
+}

package/src/contexts/SelectSingle/index.ts

@@ -0,0 +1,2 @@
+export * from './SelectSingleContext';
+export * from './useSelectSingle';

package/src/contexts/SelectSingle/useSelectSingle.test.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { customRenderHook } from 'test/render/customRenderHook';
+import { freezeBeforeAll } from 'test/utils';
+
+import { DayPickerBase } from 'types/DayPickerBase';
+import { DayPickerSingleProps } from 'types/DayPickerSingle';
+import { ActiveModifiers } from 'types/Modifiers';
+
+import { useSelectSingle } from './useSelectSingle';
+
+const today = new Date(2021, 11, 8);
+freezeBeforeAll(today);
+
+function setup(dayPickerProps?: DayPickerBase) {
+  const { result } = customRenderHook(() => useSelectSingle(), dayPickerProps);
+  return result;
+}
+
+describe('when is not a single select DayPicker', () => {
+  const result = setup();
+  test('the selected day should be undefined', () => {
+    expect(result.current.selected).toBeUndefined();
+  });
+});
+
+describe('when a day is selected from DayPicker props', () => {
+  test('the selected day should be today', () => {
+    const dayPickerProps: DayPickerSingleProps = {
+      mode: 'single',
+      selected: today
+    };
+    const result = setup(dayPickerProps);
+    expect(result.current.selected).toBe(today);
+  });
+});
+describe('when onDayClick is called', () => {
+  const dayPickerProps: DayPickerSingleProps = {
+    mode: 'single',
+    onSelect: jest.fn(),
+    onDayClick: jest.fn()
+  };
+  const result = setup(dayPickerProps);
+  const activeModifiers = {};
+  const event = {} as React.MouseEvent;
+  result.current.onDayClick?.(today, activeModifiers, event);
+  test('should call the `onSelect` event handler', () => {
+    expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
+      today,
+      today,
+      activeModifiers,
+      event
+    );
+  });
+  test('should call the `onDayClick` event handler', () => {
+    expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
+      today,
+      activeModifiers,
+      event
+    );
+  });
+});
+describe('if a selected day is not required', () => {
+  const dayPickerProps: DayPickerSingleProps = {
+    mode: 'single',
+    onSelect: jest.fn(),
+    required: false
+  };
+  const result = setup(dayPickerProps);
+  const activeModifiers: ActiveModifiers = { selected: true };
+  const event = {} as React.MouseEvent;
+  result.current.onDayClick?.(today, activeModifiers, event);
+  test('should call the `onSelect` event handler with an undefined day', () => {
+    expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
+      undefined,
+      today,
+      activeModifiers,
+      event
+    );
+  });
+});

package/src/contexts/SelectSingle/useSelectSingle.ts

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

package/src/hooks/useActiveModifiers/index.ts

@@ -0,0 +1 @@
+export * from './useActiveModifiers';

package/src/hooks/useActiveModifiers/useActiveModifiers.test.tsx

@@ -0,0 +1,36 @@
+import { RenderResult } from '@testing-library/react-hooks';
+import { addMonths } from 'date-fns';
+
+import { customRenderHook } from 'test/render';
+
+import { ActiveModifiers } from 'types/Modifiers';
+
+import { useActiveModifiers } from './useActiveModifiers';
+
+const date = new Date(2010, 5, 23);
+
+let renderResult: RenderResult<ActiveModifiers>;
+function setup(day: Date, displayMonth?: Date) {
+  const view = customRenderHook(() => useActiveModifiers(day, displayMonth));
+  renderResult = view.result;
+}
+
+describe('when in the same month', () => {
+  const displayMonth = date;
+  beforeEach(() => {
+    setup(date, displayMonth);
+  });
+  test('should return the active modifiers', () => {
+    expect(renderResult.current).toBeDefined();
+  });
+});
+
+describe('when not in the same display month', () => {
+  const displayMonth = addMonths(date, 1);
+  beforeEach(() => {
+    setup(date, displayMonth);
+  });
+  test('should return the outside modifier', () => {
+    expect(renderResult.current.outside).toBe(true);
+  });
+});

package/src/hooks/useActiveModifiers/useActiveModifiers.tsx

@@ -0,0 +1,18 @@
+import { getActiveModifiers, useModifiers } from 'contexts/Modifiers';
+import { ActiveModifiers } from 'types/Modifiers';
+
+/**
+ * Return the active modifiers for the specified day.
+ *
+ * @param day
+ * @param displayMonth The month where the date is displayed. If not the same as
+ * `date`, the day is an "outside day".
+ */
+export function useActiveModifiers(
+  day: Date,
+  displayMonth?: Date
+): ActiveModifiers {
+  const modifiers = useModifiers();
+  const activeModifiers = getActiveModifiers(day, modifiers, displayMonth);
+  return activeModifiers;
+}