react-day-picker 8.0.3 → 8.0.4

package/src/hooks/useDayRender/useDayRender.test.tsx

@@ -0,0 +1,304 @@
+import { createRef } from 'react';
+
+import { RenderResult } from '@testing-library/react-hooks';
+import { addDays, addMonths } from 'date-fns';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRenderHook, CustomRenderHookContexts } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+import { FocusContextValue } from 'contexts/Focus';
+import { EventName } from 'hooks/useDayEventHandlers';
+
+import { DayRender } from './';
+import { useDayRender } from './useDayRender';
+
+const today = new Date(2022, 5, 13);
+
+freezeBeforeAll(today);
+
+let result: RenderResult<DayRender>;
+
+const mockedFocusContext: 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()
+};
+
+function setup(
+  date: Date,
+  displayMonth: Date,
+  dayPickerProps?: DayPickerProps,
+  contexts?: CustomRenderHookContexts
+) {
+  const buttonRef = createRef<HTMLButtonElement>();
+  const view = customRenderHook(
+    () => useDayRender(date, displayMonth, buttonRef),
+    dayPickerProps,
+    contexts
+  );
+  result = view.result;
+}
+
+describe('when rendering the today’s date', () => {
+  const date = today;
+  const displayMonth = date;
+  beforeEach(() => {
+    setup(date, displayMonth);
+  });
+  test('the div should include the default class name', () => {
+    expect(result.current.divProps.className?.split(' ')).toContain(
+      defaultClassNames.day
+    );
+  });
+  test('the button should include the default class name', () => {
+    expect(result.current.buttonProps.className?.split(' ')).toContain(
+      defaultClassNames.day
+    );
+  });
+  test('the button should not have "aria-pressed"', () => {
+    expect(result.current.buttonProps['aria-pressed']).toBeUndefined();
+  });
+  test('the button should have 0 as "tabIndex"', () => {
+    expect(result.current.buttonProps.tabIndex).toBe(0);
+  });
+
+  const testEvents: EventName[] = [
+    'onClick',
+    'onFocus',
+    'onBlur',
+    'onKeyDown',
+    'onKeyUp',
+    'onMouseEnter',
+    'onMouseLeave',
+    'onTouchCancel',
+    'onTouchEnd',
+    'onTouchMove',
+    'onTouchStart'
+  ];
+  test.each(testEvents)(
+    'the button should have the "%s" event handler',
+    (eventName) => {
+      expect(result.current.buttonProps[eventName]).toBeDefined();
+    }
+  );
+  test('should return the day active modifiers', () => {
+    expect(result.current.activeModifiers).toEqual({ today: true });
+  });
+});
+
+describe('when not in selection mode', () => {
+  const dayPickerProps = { mode: undefined };
+  beforeEach(() => {
+    setup(today, today, dayPickerProps);
+  });
+  test('should not be a button', () => {
+    expect(result.current.isButton).toBe(false);
+  });
+});
+describe('when "onDayClick" is not passed in', () => {
+  const dayPickerProps = { onDayClick: undefined };
+  beforeEach(() => {
+    setup(today, today, dayPickerProps);
+  });
+  test('should not be a button', () => {
+    expect(result.current.isButton).toBe(false);
+  });
+});
+describe('when in selection mode', () => {
+  const dayPickerProps: DayPickerProps = { mode: 'single' };
+  beforeEach(() => {
+    setup(today, today, dayPickerProps);
+  });
+  test('should be a button', () => {
+    expect(result.current.isButton).toBe(true);
+  });
+});
+
+describe('when "onDayClick" is passed in', () => {
+  const dayPickerProps: DayPickerProps = { onDayClick: jest.fn() };
+  beforeEach(() => {
+    setup(today, today, dayPickerProps);
+  });
+  test('should be a button', () => {
+    expect(result.current.isButton).toBe(true);
+  });
+});
+
+describe('when showing the outside days', () => {
+  const dayPickerProps: DayPickerProps = { showOutsideDays: false };
+  describe('when the day is outside', () => {
+    const day = today;
+    const displayMonth = addMonths(today, 1);
+    beforeEach(() => {
+      setup(day, displayMonth, dayPickerProps);
+    });
+    test('should be hidden', () => {
+      expect(result.current.isHidden).toBe(true);
+    });
+  });
+});
+
+describe('when the day has the "hidden" modifier active', () => {
+  const date = today;
+  const dayPickerProps: DayPickerProps = {
+    modifiers: { hidden: date }
+  };
+  beforeEach(() => {
+    setup(date, date, dayPickerProps);
+  });
+  test('should have the hidden modifier active', () => {
+    expect(result.current.activeModifiers.hidden).toBe(true);
+  });
+  test('should be hidden', () => {
+    expect(result.current.isHidden).toBe(true);
+  });
+});
+
+describe('when "modifiersStyles" is passed in', () => {
+  const date = today;
+  const dayPickerProps = {
+    modifiers: { foo: date },
+    modifiersStyles: { foo: { color: 'red' } }
+  };
+  beforeEach(() => {
+    setup(date, date, dayPickerProps);
+  });
+  test('the div props should include the modifiers style', () => {
+    expect(result.current.divProps.style).toStrictEqual(
+      dayPickerProps.modifiersStyles.foo
+    );
+  });
+  test('the button props should include the modifiers style', () => {
+    expect(result.current.buttonProps.style).toStrictEqual(
+      dayPickerProps.modifiersStyles.foo
+    );
+  });
+});
+describe('when "styles.day" is passed in', () => {
+  const date = today;
+  const dayPickerProps = {
+    styles: { day: { color: 'red' } }
+  };
+  beforeEach(() => {
+    setup(date, date, dayPickerProps);
+  });
+  test('the div props should include the style', () => {
+    expect(result.current.divProps.style).toStrictEqual(
+      dayPickerProps.styles.day
+    );
+  });
+  test('the button props should include the style', () => {
+    expect(result.current.buttonProps.style).toStrictEqual(
+      dayPickerProps.styles.day
+    );
+  });
+});
+
+describe('when "modifiersClassNames" is passed in', () => {
+  const date = today;
+  const dayPickerProps = {
+    modifiers: { foo: date },
+    modifiersClassNames: { foo: 'bar' }
+  };
+  beforeEach(() => {
+    setup(date, date, dayPickerProps);
+  });
+  test('the div props should include the modifiers classNames', () => {
+    expect(result.current.divProps.className).toContain(
+      dayPickerProps.modifiersClassNames.foo
+    );
+  });
+  test('the button props should include the modifiers classNames', () => {
+    expect(result.current.buttonProps.className).toContain(
+      dayPickerProps.modifiersClassNames.foo
+    );
+  });
+});
+
+describe('when "classNames.day" is passed in', () => {
+  const date = today;
+  const dayPickerProps = {
+    classNames: { day: 'foo' }
+  };
+  beforeEach(() => {
+    setup(date, date, dayPickerProps);
+  });
+  test('the div props should include the class name', () => {
+    expect(result.current.divProps.className).toContain(
+      dayPickerProps.classNames.day
+    );
+  });
+  test('the button props should include the class name', () => {
+    expect(result.current.buttonProps.className).toContain(
+      dayPickerProps.classNames.day
+    );
+  });
+});
+
+describe('when the day is not target of focus', () => {
+  const yesterday = addDays(today, -1);
+  const tomorrow = addDays(today, 1);
+  const focusContext: FocusContextValue = {
+    ...mockedFocusContext,
+    focusTarget: yesterday
+  };
+  beforeEach(() => {
+    setup(tomorrow, tomorrow, {}, { focus: focusContext });
+  });
+  test('the button should have tabIndex -1', () => {
+    expect(result.current.buttonProps.tabIndex).toBe(-1);
+  });
+});
+
+describe('when the day is target of focus', () => {
+  const date = today;
+  const focusContext: FocusContextValue = {
+    ...mockedFocusContext,
+    focusTarget: date
+  };
+  beforeEach(() => {
+    setup(date, date, {}, { focus: focusContext });
+  });
+  test('the button should have tabIndex 0', () => {
+    expect(result.current.buttonProps.tabIndex).toBe(0);
+  });
+});
+
+describe('when the day is disabled', () => {
+  const date = today;
+  const dayPickerProps = {
+    disabled: date
+  };
+  beforeEach(() => {
+    setup(date, date, dayPickerProps);
+  });
+  test('the button should be disabled', () => {
+    expect(result.current.buttonProps.disabled).toBe(true);
+  });
+});
+
+describe('when the day is selected', () => {
+  const date = today;
+  const dayPickerProps = {
+    selected: date
+  };
+  beforeEach(() => {
+    setup(date, date, dayPickerProps);
+  });
+  test('the button should have "aria-pressed"', () => {
+    expect(result.current.buttonProps['aria-pressed']).toBe(true);
+  });
+});

package/src/hooks/useDayRender/useDayRender.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect } from 'react';
+
+import isSameDay from 'date-fns/isSameDay';
+
+import { ButtonProps } from 'components/Button';
+import { DayContent } from 'components/DayContent';
+import { useDayPicker } from 'contexts/DayPicker';
+import { useFocusContext } from 'contexts/Focus';
+import { useActiveModifiers } from 'hooks/useActiveModifiers';
+import {
+  DayEventHandlers,
+  useDayEventHandlers
+} from 'hooks/useDayEventHandlers';
+import { SelectedDays, useSelectedDays } from 'hooks/useSelectedDays';
+import { ActiveModifiers } from 'types/Modifiers';
+import { StyledComponent } from 'types/Styles';
+
+import { getDayClassNames } from './utils/getDayClassNames';
+import { getDayStyle } from './utils/getDayStyle';
+
+export type DayRender = {
+  /** Whether the day should be rendered a `button` instead of a `div` */
+  isButton: boolean;
+  /** Whether the day should be hidden. */
+  isHidden: boolean;
+  /** The modifiers active for the given day. */
+  activeModifiers: ActiveModifiers;
+  /** The props to apply to the button element (when `isButton` is true). */
+  buttonProps: StyledComponent &
+    Pick<ButtonProps, 'disabled' | 'aria-pressed' | 'tabIndex'> &
+    DayEventHandlers;
+  /** The props to apply to the div element (when `isButton` is false). */
+  divProps: StyledComponent;
+  selectedDays: SelectedDays;
+};
+
+/**
+ * Return props and data used to render the [[Day]] component.
+ *
+ * Use this hook when creating a component to replace the built-in `Day`
+ * component.
+ *
+ * Each Day in DayPicker should render one of the following, according to the return
+ * value:
+ *
+ * - an empty `React.Fragment`, to render if `isHidden` is true
+ * - a `button` element, when the day is interactive, e.g. is selectable
+ * - a `div` element, whe the day is not interactive
+ *
+ * @param day The date to render
+ * @param displayMonth The month where the date is displayed (if not the same as
+ * `date`, it means it is an "outside" day)
+ * @param buttonRef A ref to the button element that will be target of focus
+ * when rendered (if required).
+ */
+export function useDayRender(
+  day: Date,
+  displayMonth: Date,
+  buttonRef: React.RefObject<HTMLButtonElement>
+): DayRender {
+  const dayPicker = useDayPicker();
+  const focusContext = useFocusContext();
+  const activeModifiers = useActiveModifiers(day, displayMonth);
+  const eventHandlers = useDayEventHandlers(day, activeModifiers);
+  const selectedDays = useSelectedDays();
+  const isButton = Boolean(
+    dayPicker.onDayClick || dayPicker.mode !== 'default'
+  );
+
+  // Focus the button if the day is focused according to the focus context
+  useEffect(() => {
+    if (!focusContext.focusedDay) return;
+    if (!isButton) return;
+    if (isSameDay(focusContext.focusedDay, day)) {
+      buttonRef.current?.focus();
+    }
+  }, [focusContext.focusedDay, day, buttonRef, isButton]);
+
+  const className = getDayClassNames(dayPicker, activeModifiers).join(' ');
+  const style = getDayStyle(dayPicker, activeModifiers);
+
+  const isHidden = Boolean(
+    (activeModifiers.outside && !dayPicker.showOutsideDays) ||
+      activeModifiers.hidden
+  );
+
+  const DayContentComponent = dayPicker.components?.DayContent ?? DayContent;
+  const children = (
+    <DayContentComponent
+      date={day}
+      displayMonth={displayMonth}
+      activeModifiers={activeModifiers}
+    />
+  );
+
+  const divProps = {
+    style,
+    className,
+    children
+  };
+
+  const isFocusTarget = Boolean(
+    focusContext.focusTarget && isSameDay(focusContext.focusTarget, day)
+  );
+  const buttonProps = {
+    ...divProps,
+    disabled: activeModifiers.disabled,
+    ['aria-pressed']: activeModifiers.selected,
+    tabIndex: isFocusTarget ? 0 : -1,
+    ...eventHandlers
+  };
+
+  const dayRender: DayRender = {
+    isButton,
+    isHidden,
+    activeModifiers: activeModifiers,
+    selectedDays,
+    buttonProps,
+    divProps
+  };
+
+  return dayRender;
+}

package/src/hooks/useDayRender/utils/getDayClassNames.test.ts

@@ -0,0 +1,63 @@
+import { DayPickerContextValue } from 'contexts/DayPicker';
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+import { ActiveModifiers, InternalModifier } from 'types/Modifiers';
+
+import { getDayClassNames } from './getDayClassNames';
+
+type DayPickerOptions = Pick<
+  DayPickerContextValue,
+  'modifiersClassNames' | 'classNames'
+>;
+
+const internalModifiers = Object.values(InternalModifier);
+
+test('should include the day class name', () => {
+  const dayPicker: DayPickerOptions = {
+    modifiersClassNames: {},
+    classNames: defaultClassNames
+  };
+  const activeModifiers: ActiveModifiers = {};
+  expect(getDayClassNames(dayPicker, activeModifiers)).toContain(
+    defaultClassNames.day
+  );
+});
+
+describe('when using "modifiersClassNames" for a custom modifier', () => {
+  const modifierClassName = `foo-class`;
+  const dayPicker: DayPickerOptions = {
+    modifiersClassNames: {
+      foo: modifierClassName
+    },
+    classNames: defaultClassNames
+  };
+  const activeModifiers: ActiveModifiers = { foo: true };
+  test('should return the custom class name for the modifier', () => {
+    expect(getDayClassNames(dayPicker, activeModifiers)).toContain(
+      modifierClassName
+    );
+  });
+});
+
+describe.each(internalModifiers)(
+  'when using "modifiersClassNames" for the %s (internal) modifier',
+  (internalModifier) => {
+    const modifierClassName = `foo-${internalModifier}`;
+    const dayPicker: DayPickerOptions = {
+      modifiersClassNames: {
+        [internalModifier]: modifierClassName
+      },
+      classNames: defaultClassNames
+    };
+    const activeModifiers: ActiveModifiers = { [internalModifier]: true };
+    test('should return the custom class name for the modifier', () => {
+      expect(getDayClassNames(dayPicker, activeModifiers)).toContain(
+        modifierClassName
+      );
+    });
+    test('should not include the default class name for the modifier', () => {
+      expect(getDayClassNames(dayPicker, activeModifiers)).not.toContain(
+        defaultClassNames.day_selected
+      );
+    });
+  }
+);

package/src/hooks/useDayRender/utils/getDayClassNames.ts

@@ -0,0 +1,32 @@
+import { DayPickerContextValue } from 'contexts/DayPicker';
+import { ActiveModifiers, InternalModifier } from 'types/Modifiers';
+
+function isInternalModifier(modifier: string): modifier is InternalModifier {
+  return Object.values(InternalModifier).includes(modifier as InternalModifier);
+}
+
+/**
+ * Return the class names for the Day element, according to the given active
+ * modifiers.
+ *
+ * Custom class names are set via `modifiersClassNames` or `classNames`,
+ * where the first have the precedence.
+ */
+export function getDayClassNames(
+  dayPicker: Pick<DayPickerContextValue, 'modifiersClassNames' | 'classNames'>,
+  activeModifiers: ActiveModifiers
+) {
+  const classNames: string[] = [dayPicker.classNames.day];
+  Object.keys(activeModifiers).forEach((modifier) => {
+    const customClassName = dayPicker.modifiersClassNames[modifier];
+    if (customClassName) {
+      classNames.push(customClassName);
+    } else if (isInternalModifier(modifier)) {
+      const internalClassName = dayPicker.classNames[`day_${modifier}`];
+      if (internalClassName) {
+        classNames.push(internalClassName);
+      }
+    }
+  });
+  return classNames;
+}

package/src/hooks/useDayRender/utils/getDayStyle.ts

@@ -0,0 +1,19 @@
+import { DayPickerContextValue } from 'contexts/DayPicker';
+import { ActiveModifiers } from 'types/Modifiers';
+
+/** Return the style for the Day element, according to the given active modifiers. */
+export function getDayStyle(
+  dayPicker: Pick<DayPickerContextValue, 'modifiersStyles' | 'styles'>,
+  activeModifiers: ActiveModifiers
+): React.CSSProperties {
+  let style: React.CSSProperties = {
+    ...dayPicker.styles.day
+  };
+  Object.keys(activeModifiers).forEach((modifier) => {
+    style = {
+      ...style,
+      ...dayPicker.modifiersStyles?.[modifier]
+    };
+  });
+  return style;
+}

package/src/hooks/useInput/index.ts

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