react-day-picker 8.0.3 → 8.0.6

package/src/hooks/useControlledValue/index.ts

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

package/src/hooks/useControlledValue/useControlledValue.test.ts

@@ -0,0 +1,68 @@
+import { act } from 'react-dom/test-utils';
+
+import { renderHook, RenderHookResult } from '@testing-library/react-hooks';
+
+import { DispatchStateAction, useControlledValue } from './useControlledValue';
+
+type RenderHookProps = {
+  defaultValue: string;
+  controlledValue: string | undefined;
+};
+
+function setup(defaultValue: string, controlledValue: string | undefined) {
+  return renderHook<RenderHookProps, [string, DispatchStateAction<string>]>(
+    (props) =>
+      useControlledValue<string>(props.defaultValue, props.controlledValue),
+    {
+      initialProps: { defaultValue, controlledValue }
+    }
+  );
+}
+
+describe('when the value is controlled', () => {
+  const defaultValue = 'foo'; // not controlled
+  const controlledValue = 'bar'; // now controlled
+  let hook: RenderHookResult<
+    RenderHookProps,
+    [string, DispatchStateAction<string>]
+  >;
+  beforeEach(() => {
+    hook = setup(defaultValue, controlledValue);
+  });
+  test('should return the controlled value', () => {
+    expect(hook.result.current[0]).toBe(controlledValue);
+  });
+  describe('when setting a new value', () => {
+    const newValue = 'taz';
+    beforeEach(() => {
+      act(() => hook.result.current[1](newValue));
+    });
+    test('should return the controlled value instead', () => {
+      expect(hook.result.current[0]).toBe(controlledValue);
+    });
+  });
+});
+
+describe('when the value is not controlled', () => {
+  const defaultValue = 'foo';
+  const controlledValue = undefined;
+  let hook: RenderHookResult<
+    RenderHookProps,
+    [string, DispatchStateAction<string>]
+  >;
+  beforeEach(() => {
+    hook = setup(defaultValue, controlledValue);
+  });
+  test('should return the value', () => {
+    expect(hook.result.current[0]).toBe(defaultValue);
+  });
+  describe('when setting a new value', () => {
+    const newValue = 'bar';
+    beforeEach(() => {
+      act(() => hook.result.current[1](newValue));
+    });
+    test('should return the new value', () => {
+      expect(hook.result.current[0]).toBe(newValue);
+    });
+  });
+});

package/src/hooks/useControlledValue/useControlledValue.ts

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
+
+/**
+ * Helper hook for using controlled/uncontrolled values from a component props.
+ *
+ * When the value is not controlled, pass `undefined` as `controlledValue` and
+ * use the returned setter to update it.
+ *
+ * When the value is controlled, pass the controlled value as second
+ * argument, which will be always returned as `value`.
+ */
+export function useControlledValue<T>(
+  defaultValue: T,
+  controlledValue: T | undefined
+): [T, DispatchStateAction<T>] {
+  const [uncontrolledValue, setValue] = useState(defaultValue);
+
+  const value =
+    controlledValue === undefined ? uncontrolledValue : controlledValue;
+
+  return [value, setValue] as [T, DispatchStateAction<T>];
+}

package/src/hooks/useDayEventHandlers/index.ts

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

package/src/hooks/useDayEventHandlers/useDayEventHandlers.test.tsx

@@ -0,0 +1,213 @@
+import { RenderResult } from '@testing-library/react-hooks';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRenderHook } from 'test/render';
+
+import { FocusContextValue } from 'contexts/Focus';
+import { SelectMultipleContextValue } from 'contexts/SelectMultiple';
+import { SelectRangeContextValue } from 'contexts/SelectRange';
+import { SelectSingleContextValue } from 'contexts/SelectSingle';
+import {
+  DayEventHandlers,
+  DayEventName,
+  EventName,
+  useDayEventHandlers
+} from 'hooks/useDayEventHandlers';
+import { ActiveModifiers } from 'types/Modifiers';
+
+const today = new Date(2010, 5, 23);
+
+const singleContext: SelectSingleContextValue = {
+  selected: today,
+  onDayClick: jest.fn()
+};
+
+const multipleContext: SelectMultipleContextValue = {
+  selected: [today],
+  modifiers: { disabled: [] },
+  onDayClick: jest.fn()
+};
+
+const rangeContext: SelectRangeContextValue = {
+  selected: undefined,
+  modifiers: {
+    disabled: [],
+    range_start: [],
+    range_end: [],
+    range_middle: []
+  },
+  onDayClick: jest.fn()
+};
+
+const focusContext: FocusContextValue = {
+  focus: jest.fn(),
+  focusedDay: undefined,
+  focusTarget: undefined,
+  blur: jest.fn(),
+  focusDayAfter: jest.fn(),
+  focusDayBefore: jest.fn(),
+  focusWeekBefore: jest.fn(),
+  focusWeekAfter: jest.fn(),
+  focusMonthBefore: jest.fn(),
+  focusMonthAfter: jest.fn(),
+  focusYearBefore: jest.fn(),
+  focusYearAfter: jest.fn(),
+  focusStartOfWeek: jest.fn(),
+  focusEndOfWeek: jest.fn()
+};
+
+const mockedContexts = {
+  single: singleContext,
+  multiple: multipleContext,
+  range: rangeContext,
+  focus: focusContext
+};
+
+let renderResult: RenderResult<DayEventHandlers>;
+function setup(
+  date: Date,
+  activeModifiers: ActiveModifiers,
+  dayPickerProps?: DayPickerProps
+) {
+  const view = customRenderHook(
+    () => useDayEventHandlers(date, activeModifiers),
+    dayPickerProps,
+    mockedContexts
+  );
+  renderResult = view.result;
+}
+
+const tests: [EventName, DayEventName][] = [
+  ['onClick', 'onDayClick'],
+  ['onFocus', 'onDayFocus'],
+  ['onBlur', 'onDayBlur'],
+  ['onMouseEnter', 'onDayMouseEnter'],
+  ['onMouseLeave', 'onDayMouseLeave'],
+  ['onTouchEnd', 'onDayTouchEnd'],
+  ['onTouchCancel', 'onDayTouchCancel'],
+  ['onTouchMove', 'onDayTouchMove'],
+  ['onTouchStart', 'onDayTouchStart'],
+  ['onKeyUp', 'onDayKeyUp']
+];
+
+describe.each(tests)('when calling "%s"', (eventName, dayEventName) => {
+  const activeModifiers: ActiveModifiers = {};
+  const dayPickerProps = {
+    [dayEventName]: jest.fn()
+  };
+  const mouseEvent = {} as React.MouseEvent<HTMLButtonElement, MouseEvent>;
+  const date = today;
+  beforeEach(() => {
+    setup(date, activeModifiers, dayPickerProps);
+    //@ts-expect-error TOFIX: How to mock mouse event here?
+    renderResult.current[eventName]?.(mouseEvent);
+  });
+  test(`${dayEventName} should have been called`, () => {
+    expect(dayPickerProps[dayEventName]).toHaveBeenCalledWith(
+      date,
+      activeModifiers,
+      mouseEvent
+    );
+  });
+});
+
+describe.each<'single' | 'multiple' | 'range'>(['single', 'multiple', 'range'])(
+  'when calling "onClick" in "%s" selection mode',
+  (mode) => {
+    const activeModifiers: ActiveModifiers = {};
+    const dayPickerProps = { mode, onDayClick: jest.fn() };
+    const mouseEvent = {} as React.MouseEvent<HTMLButtonElement, MouseEvent>;
+    const date = today;
+    beforeEach(() => {
+      setup(date, activeModifiers, dayPickerProps);
+      renderResult.current.onClick?.(mouseEvent);
+    });
+    test(`should have called "onDayClick" from the day picker props`, () => {
+      expect(dayPickerProps.onDayClick).toHaveBeenCalled();
+    });
+  }
+);
+
+describe('when calling "onFocus"', () => {
+  const date = today;
+  const activeModifiers: ActiveModifiers = {};
+  const mouseEvent = {} as React.FocusEvent<HTMLButtonElement, Element>;
+  beforeEach(() => {
+    setup(date, activeModifiers);
+    renderResult.current.onFocus?.(mouseEvent);
+  });
+  test('should focus the date in the context', () => {
+    expect(focusContext.focus).toHaveBeenCalledWith(date);
+  });
+});
+
+describe('when calling "onBlur"', () => {
+  const date = today;
+  const activeModifiers: ActiveModifiers = {};
+  const mouseEvent = {} as React.FocusEvent<HTMLButtonElement, Element>;
+  beforeEach(() => {
+    setup(date, activeModifiers);
+    renderResult.current.onBlur?.(mouseEvent);
+  });
+  test('should blur the date in the context', () => {
+    expect(focusContext.blur).toHaveBeenCalled();
+  });
+});
+
+describe('when calling "onKeyDown"', () => {
+  const date = today;
+  const activeModifiers: ActiveModifiers = {};
+
+  const tests: [
+    key: string,
+    dir: string,
+    shiftKey: boolean,
+    expectedMethod: keyof FocusContextValue
+  ][] = [
+    ['ArrowLeft', 'ltr', false, 'focusDayBefore'],
+    ['ArrowLeft', 'rtl', false, 'focusDayAfter'],
+    ['ArrowRight', 'ltr', false, 'focusDayAfter'],
+    ['ArrowRight', 'ltr', false, 'focusDayBefore'],
+    ['ArrowRight', 'ltr', false, 'focusDayAfter'],
+    ['ArrowDown', 'ltr', false, 'focusWeekAfter'],
+    ['ArrowUp', 'ltr', false, 'focusWeekBefore'],
+    ['PageUp', 'ltr', true, 'focusYearBefore'],
+    ['PageUp', 'ltr', false, 'focusMonthBefore'],
+    ['PageDown', 'ltr', true, 'focusYearAfter'],
+    ['PageDown', 'ltr', false, 'focusMonthAfter'],
+    ['Home', 'ltr', false, 'focusStartOfWeek'],
+    ['End', 'ltr', false, 'focusEndOfWeek']
+  ];
+
+  describe.each(tests)(
+    'when key is %s',
+    (key, dir, shiftKey, expectedMethod) => {
+      describe(`when text direction is "${dir.toUpperCase()}"`, () => {
+        describe(`when the shiftKey is ${
+          shiftKey ? '' : 'not'
+        } pressed`, () => {
+          const keyboardEvent = {
+            key,
+            shiftKey
+          } as React.KeyboardEvent<HTMLButtonElement>;
+          keyboardEvent.preventDefault = jest.fn();
+          keyboardEvent.stopPropagation = jest.fn();
+
+          beforeEach(() => {
+            setup(date, activeModifiers, { dir });
+            renderResult.current.onKeyDown?.(keyboardEvent);
+          });
+          test(`should call ${expectedMethod}`, () => {
+            expect(focusContext[expectedMethod]).toHaveBeenCalledWith();
+          });
+          test(`should prevent the default event`, () => {
+            expect(keyboardEvent.preventDefault).toHaveBeenCalledWith();
+          });
+          test(`should stop the event propagation`, () => {
+            expect(keyboardEvent.preventDefault).toHaveBeenCalledWith();
+          });
+        });
+      });
+    }
+  );
+});

package/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx

@@ -0,0 +1,195 @@
+import {
+  FocusEventHandler,
+  HTMLProps,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  TouchEventHandler
+} from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+import { useFocusContext } from 'contexts/Focus';
+import { useSelectMultiple } from 'contexts/SelectMultiple';
+import { useSelectRange } from 'contexts/SelectRange';
+import { useSelectSingle } from 'contexts/SelectSingle';
+import { isDayPickerMultiple } from 'types/DayPickerMultiple';
+import { isDayPickerRange } from 'types/DayPickerRange';
+import { isDayPickerSingle } from 'types/DayPickerSingle';
+import { ActiveModifiers } from 'types/Modifiers';
+
+export type EventName =
+  | 'onClick'
+  | 'onFocus'
+  | 'onBlur'
+  | 'onKeyDown'
+  | 'onKeyUp'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onTouchCancel'
+  | 'onTouchEnd'
+  | 'onTouchMove'
+  | 'onTouchStart';
+
+export type DayEventName =
+  | 'onDayClick'
+  | 'onDayFocus'
+  | 'onDayBlur'
+  | 'onDayKeyDown'
+  | 'onDayKeyUp'
+  | 'onDayMouseEnter'
+  | 'onDayMouseLeave'
+  | 'onDayTouchCancel'
+  | 'onDayTouchEnd'
+  | 'onDayTouchMove'
+  | 'onDayTouchStart';
+
+export type DayEventHandlers = Pick<HTMLProps<HTMLButtonElement>, EventName>;
+
+/**
+ * This hook returns details about the content to render in the day cell.
+ *
+ *
+ * When a day cell is rendered in the table, DayPicker can either:
+ *
+ * - render nothing: when the day is outside the month or has matched the
+ *   "hidden" modifier.
+ * - render a button when `onDayClick` or a selection mode is set.
+ * - render a non-interactive element: when no selection mode is set, the day
+ *   cell shouldn’t respond to any interaction. DayPicker should render a `div`
+ *   or a `span`.
+ *
+ * ### Usage
+ *
+ * Use this hook to customize the behavior of the [[Day]] component. Create a
+ * new `Day` component using this hook and pass it to the `components` prop.
+ * The source of [[Day]] can be a good starting point.
+ *
+ */
+export function useDayEventHandlers(
+  date: Date,
+  activeModifiers: ActiveModifiers
+): DayEventHandlers {
+  const dayPicker = useDayPicker();
+  const single = useSelectSingle();
+  const multiple = useSelectMultiple();
+  const range = useSelectRange();
+  const {
+    focusDayAfter,
+    focusDayBefore,
+    focusWeekAfter,
+    focusWeekBefore,
+    blur,
+    focus,
+    focusMonthBefore,
+    focusMonthAfter,
+    focusYearBefore,
+    focusYearAfter,
+    focusStartOfWeek,
+    focusEndOfWeek
+  } = useFocusContext();
+
+  const onClick: MouseEventHandler = (e) => {
+    if (isDayPickerSingle(dayPicker)) {
+      single.onDayClick?.(date, activeModifiers, e);
+    } else if (isDayPickerMultiple(dayPicker)) {
+      multiple.onDayClick?.(date, activeModifiers, e);
+    } else if (isDayPickerRange(dayPicker)) {
+      range.onDayClick?.(date, activeModifiers, e);
+    }
+    dayPicker.onDayClick?.(date, activeModifiers, e);
+  };
+
+  const onFocus: FocusEventHandler = (e) => {
+    focus(date);
+    dayPicker.onDayFocus?.(date, activeModifiers, e);
+  };
+
+  const onBlur: FocusEventHandler = (e) => {
+    blur();
+    dayPicker.onDayBlur?.(date, activeModifiers, e);
+  };
+
+  const onMouseEnter: MouseEventHandler = (e) => {
+    dayPicker.onDayMouseEnter?.(date, activeModifiers, e);
+  };
+  const onMouseLeave: MouseEventHandler = (e) => {
+    dayPicker.onDayMouseLeave?.(date, activeModifiers, e);
+  };
+  const onTouchCancel: TouchEventHandler = (e) => {
+    dayPicker.onDayTouchCancel?.(date, activeModifiers, e);
+  };
+  const onTouchEnd: TouchEventHandler = (e) => {
+    dayPicker.onDayTouchEnd?.(date, activeModifiers, e);
+  };
+  const onTouchMove: TouchEventHandler = (e) => {
+    dayPicker.onDayTouchMove?.(date, activeModifiers, e);
+  };
+  const onTouchStart: TouchEventHandler = (e) => {
+    dayPicker.onDayTouchStart?.(date, activeModifiers, e);
+  };
+
+  const onKeyUp: KeyboardEventHandler = (e) => {
+    dayPicker.onDayKeyUp?.(date, activeModifiers, e);
+  };
+
+  const onKeyDown: KeyboardEventHandler = (e) => {
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        e.stopPropagation();
+        dayPicker.dir === 'rtl' ? focusDayAfter() : focusDayBefore();
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        e.stopPropagation();
+        dayPicker.dir === 'rtl' ? focusDayBefore() : focusDayAfter();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        e.stopPropagation();
+        focusWeekAfter();
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        e.stopPropagation();
+        focusWeekBefore();
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        e.stopPropagation();
+        e.shiftKey ? focusYearBefore() : focusMonthBefore();
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        e.stopPropagation();
+        e.shiftKey ? focusYearAfter() : focusMonthAfter();
+        break;
+      case 'Home':
+        e.preventDefault();
+        e.stopPropagation();
+        focusStartOfWeek();
+        break;
+      case 'End':
+        e.preventDefault();
+        e.stopPropagation();
+        focusEndOfWeek();
+        break;
+    }
+    dayPicker.onDayKeyDown?.(date, activeModifiers, e);
+  };
+
+  const eventHandlers: DayEventHandlers = {
+    onClick,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onKeyUp,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchCancel,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart
+  };
+
+  return eventHandlers;
+}

package/src/hooks/useDayRender/index.ts

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