react-day-picker 8.0.3 → 8.0.6

package/src/components/Month/Month.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { useId } from '@reach/auto-id';
+
+import { Caption } from 'components/Caption';
+import { Table } from 'components/Table';
+import { useDayPicker } from 'contexts/DayPicker';
+import { useNavigation } from 'contexts/Navigation';
+
+/** The props for the [[Month]] component. */
+export interface MonthProps {
+  displayIndex: number;
+  displayMonth: Date;
+}
+
+/** Render a month. */
+export function Month(props: MonthProps) {
+  const dayPicker = useDayPicker();
+  const { dir, classNames, styles, components } = dayPicker;
+  const { displayMonths } = useNavigation();
+  const captionId = useId();
+  const className = [classNames.month];
+  let style = styles.month;
+
+  let isStart = props.displayIndex === 0;
+  let isEnd = props.displayIndex === displayMonths.length - 1;
+  const isCenter = !isStart && !isEnd;
+  if (dir === 'rtl') {
+    [isEnd, isStart] = [isStart, isEnd];
+  }
+
+  if (isStart) {
+    className.push(classNames.caption_start);
+    style = { ...style, ...styles.caption_start };
+  }
+  if (isEnd) {
+    className.push(classNames.caption_end);
+    style = { ...style, ...styles.caption_end };
+  }
+  if (isCenter) {
+    className.push(classNames.caption_between);
+    style = { ...style, ...styles.caption_between };
+  }
+
+  const CaptionComponent = components?.Caption ?? Caption;
+
+  return (
+    <div key={props.displayIndex} className={className.join(' ')} style={style}>
+      <CaptionComponent id={captionId} displayMonth={props.displayMonth} />
+      <Table aria-labelledby={captionId} displayMonth={props.displayMonth} />
+    </div>
+  );
+}

package/src/components/Month/index.ts

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

package/src/components/MonthsDropdown/MonthsDropdown.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { differenceInMonths } from 'date-fns';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { MonthsDropdown, MonthsDropdownProps } from './MonthsDropdown';
+
+const today = new Date(2020, 12, 22);
+
+freezeBeforeAll(today);
+
+let root: HTMLDivElement;
+let options: HTMLCollectionOf<HTMLOptionElement> | undefined;
+let select: HTMLSelectElement | null;
+
+function setup(props: MonthsDropdownProps, dayPickerProps?: DayPickerProps) {
+  const view = customRender(<MonthsDropdown {...props} />, dayPickerProps);
+  root = view.container.firstChild as HTMLDivElement;
+  select = screen.queryByRole('combobox', { name: 'Month:' });
+  options = select?.getElementsByTagName('option');
+}
+
+const props: MonthsDropdownProps = {
+  displayMonth: today,
+  onChange: jest.fn()
+};
+
+describe('when "fromDate" is not set', () => {
+  beforeEach(() => {
+    setup(props, { fromDate: undefined });
+  });
+  test('should return nothing', () => {
+    expect(root).toBeNull();
+  });
+});
+
+describe('when "toDate" is not set', () => {
+  beforeEach(() => {
+    setup(props, { toDate: undefined });
+  });
+  test('should return nothing', () => {
+    expect(root).toBeNull();
+  });
+});
+
+describe('when "fromDate" and "toDate" are in the same year', () => {
+  const fromDate = new Date(2012, 0, 22);
+  const toDate = new Date(2012, 10, 22);
+  beforeEach(() => {
+    setup(props, { fromDate, toDate });
+  });
+  test('should display the months included between the two dates', () => {
+    expect(options).toHaveLength(differenceInMonths(toDate, fromDate) + 1);
+  });
+  test('the first month should be the fromDate month', () => {
+    expect(options?.[0]).toHaveValue(String(fromDate.getMonth()));
+  });
+  test('the last month should be the toMonth month', () => {
+    expect(options?.[options.length - 1]).toHaveValue(
+      String(toDate.getMonth())
+    );
+  });
+});
+
+describe('when "fromDate" and "toDate" are not in the same year', () => {
+  const fromDate = new Date(2012, 0, 22);
+  const toDate = new Date(2015, 10, 22);
+  const displayMonth = new Date(2015, 7, 0);
+  beforeEach(() => {
+    setup({ ...props, displayMonth }, { fromDate, toDate });
+  });
+  test('should display the 12 months', () => {
+    expect(options).toHaveLength(12);
+  });
+  test('the first month should be January', () => {
+    expect(options?.[0]).toHaveValue('0');
+  });
+  test('the last month should be December', () => {
+    expect(options?.[options.length - 1]).toHaveValue('11');
+  });
+  test('should select the displayed month', () => {
+    expect(select).toHaveValue(`${displayMonth.getMonth()}`);
+  });
+
+  describe('when the dropdown changes', () => {
+    beforeEach(() => {
+      if (select) userEvent.selectOptions(select, 'February');
+    });
+    test('should fire the "onChange" event handler', () => {
+      const expectedMonth = new Date(2015, 1, 1);
+      expect(props.onChange).toHaveBeenCalledWith(expectedMonth);
+    });
+  });
+});

package/src/components/MonthsDropdown/MonthsDropdown.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import isSameYear from 'date-fns/isSameYear';
+import setMonth from 'date-fns/setMonth';
+import startOfMonth from 'date-fns/startOfMonth';
+
+import { Dropdown } from 'components/Dropdown';
+import { useDayPicker } from 'contexts/DayPicker';
+import { MonthChangeEventHandler } from 'types/EventHandlers';
+
+/** The props for the [[MonthsDropdown]] component. */
+export interface MonthsDropdownProps {
+  /** The month where the dropdown is displayed. */
+  displayMonth: Date;
+  onChange: MonthChangeEventHandler;
+}
+
+/** Render the dropdown to navigate between months. */
+export function MonthsDropdown(props: MonthsDropdownProps): JSX.Element {
+  const {
+    fromDate,
+    toDate,
+    styles,
+    locale,
+    formatters: { formatMonthCaption },
+    classNames,
+    components,
+    labels: { labelMonthDropdown }
+  } = useDayPicker();
+
+  // Dropdown should appear only when both from/toDate is set
+  if (!fromDate) return <></>;
+  if (!toDate) return <></>;
+
+  const dropdownMonths: Date[] = [];
+
+  if (isSameYear(fromDate, toDate)) {
+    // only display the months included in the range
+    const date = startOfMonth(fromDate);
+    for (let month = fromDate.getMonth(); month <= toDate.getMonth(); month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  } else {
+    // display all the 12 months
+    const date = startOfMonth(new Date()); // Any date should be OK, as we just need the year
+    for (let month = 0; month <= 11; month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  }
+
+  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+    const selectedMonth = Number(e.target.value);
+    const newMonth = setMonth(startOfMonth(props.displayMonth), selectedMonth);
+    props.onChange(newMonth);
+  };
+
+  const DropdownComponent = components?.Dropdown ?? Dropdown;
+
+  return (
+    <DropdownComponent
+      aria-label={labelMonthDropdown()}
+      className={classNames.dropdown_month}
+      style={styles.dropdown_month}
+      onChange={handleChange}
+      value={props.displayMonth.getMonth()}
+      caption={formatMonthCaption(props.displayMonth, { locale })}
+    >
+      {dropdownMonths.map((m) => (
+        <option key={m.getMonth()} value={m.getMonth()}>
+          {formatMonthCaption(m, { locale })}
+        </option>
+      ))}
+    </DropdownComponent>
+  );
+}

package/src/components/MonthsDropdown/index.ts

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

package/src/components/Navigation/Navigation.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import userEvent from '@testing-library/user-event';
+import { DayPickerProps } from 'DayPicker';
+
+import { getNextButton, getPrevButton } from 'test/po';
+import { customRender } from 'test/render';
+
+import { Navigation, NavigationProps } from './Navigation';
+
+let root: HTMLElement;
+
+function setup(props: NavigationProps, dayPickerProps?: DayPickerProps) {
+  const view = customRender(<Navigation {...props} />, dayPickerProps);
+  root = view.container.firstChild as HTMLElement;
+}
+
+const props: NavigationProps = {
+  previousMonth: new Date(2021, 3),
+  nextMonth: new Date(2021, 5),
+  displayMonth: new Date(2021, 4),
+  hidePrevious: false,
+  hideNext: false,
+  onNextClick: jest.fn(),
+  onPreviousClick: jest.fn()
+};
+
+const dayPickerProps = {
+  classNames: {
+    nav: 'foo'
+  },
+  styles: {
+    nav: { color: 'red' }
+  },
+  components: {
+    IconRight: () => <svg>IconRight</svg>,
+    IconLeft: () => <svg>IconLeft</svg>
+  }
+};
+
+describe('when rendered', () => {
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('should add the class name', () => {
+    expect(root).toHaveClass(dayPickerProps.classNames.nav);
+  });
+  test('should apply the style', () => {
+    expect(root).toHaveStyle(dayPickerProps.styles.nav);
+  });
+  test('the previous button should display the left icon', () => {
+    const icons = root.getElementsByTagName('svg');
+    expect(icons[0]).toHaveTextContent('IconLeft');
+  });
+  test('the next button should display the right icon', () => {
+    const icons = root.getElementsByTagName('svg');
+    expect(icons[1]).toHaveTextContent('IconRight');
+  });
+  beforeEach(() => {
+    userEvent.click(getPrevButton());
+  });
+  test('should call "onPreviousClick"', () => {
+    expect(props.onPreviousClick).toHaveBeenCalled();
+  });
+
+  describe('when clicking the next button', () => {
+    beforeEach(() => {
+      userEvent.click(getNextButton());
+    });
+    test('should call "onNextClick"', () => {
+      expect(props.onNextClick).toHaveBeenCalled();
+    });
+  });
+});
+
+describe('when in right-to-left direction', () => {
+  beforeEach(() => {
+    setup(props, { ...dayPickerProps, dir: 'rtl' });
+  });
+  test('the previous button should display the right icon', () => {
+    const icons = root.getElementsByTagName('svg');
+    expect(icons[0]).toHaveTextContent('IconRight');
+  });
+  test('the next button should display the left icon', () => {
+    const icons = root.getElementsByTagName('svg');
+    expect(icons[1]).toHaveTextContent('IconLeft');
+  });
+
+  describe('when clicking the previous button', () => {
+    beforeEach(() => {
+      userEvent.click(getPrevButton());
+    });
+    test('should call "onPreviousClick"', () => {
+      expect(props.onPreviousClick).toHaveBeenCalled();
+    });
+  });
+  describe('when clicking the next button', () => {
+    beforeEach(() => {
+      userEvent.click(getNextButton());
+    });
+    test('should call "onNextClick"', () => {
+      expect(props.onNextClick).toHaveBeenCalled();
+    });
+  });
+});
+
+describe('when the previous month is undefined', () => {
+  beforeEach(() => {
+    setup({ ...props, previousMonth: undefined }, dayPickerProps);
+  });
+  test('the previous button should be aria-disabled', () => {
+    expect(getPrevButton()).toHaveAttribute('aria-disabled', 'true');
+  });
+  test('the next button should not be aria-disabled', () => {
+    expect(getNextButton()).not.toHaveAttribute('aria-disabled', 'true');
+  });
+});
+
+describe('when the next month is undefined', () => {
+  beforeEach(() => {
+    setup({ ...props, nextMonth: undefined }, dayPickerProps);
+  });
+  test('the previous button should be enabled', () => {
+    expect(getPrevButton()).not.toHaveAttribute('aria-disabled', 'true');
+  });
+  test('the next button should be disabled', () => {
+    expect(getNextButton()).toHaveAttribute('aria-disabled', 'true');
+  });
+});

package/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+
+import { IconLeft } from 'components/IconLeft';
+import { IconRight } from 'components/IconRight';
+import { useDayPicker } from 'contexts/DayPicker';
+
+import { Button } from '../Button';
+
+/** The props for the [[Navigation]] component. */
+export interface NavigationProps {
+  /** The month where the caption is displayed. */
+  displayMonth: Date;
+  /** The previous month. */
+  previousMonth?: Date;
+  /** The next month. */
+  nextMonth?: Date;
+  /** Hide the previous button. */
+  hidePrevious: boolean;
+  /** Hide the next button. */
+  hideNext: boolean;
+  /** Event handler when the next button is clicked. */
+  onNextClick: React.MouseEventHandler<HTMLButtonElement>;
+  /** Event handler when the previous button is clicked. */
+  onPreviousClick: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+/** A component rendering the navigation buttons or the drop-downs. */
+export function Navigation(props: NavigationProps): JSX.Element {
+  const {
+    dir,
+    locale,
+    classNames,
+    styles,
+    labels: { labelPrevious, labelNext },
+    components
+  } = useDayPicker();
+
+  if (!props.nextMonth && !props.previousMonth) {
+    return <></>;
+  }
+
+  const previousLabel = labelPrevious(props.previousMonth, { locale });
+  const previousClassName = [
+    classNames.nav_button,
+    classNames.nav_button_previous
+  ].join(' ');
+
+  const nextLabel = labelNext(props.nextMonth, { locale });
+  const nextClassName = [
+    classNames.nav_button,
+    classNames.nav_button_next
+  ].join(' ');
+
+  const IconRightComponent = components?.IconRight ?? IconRight;
+  const IconLeftComponent = components?.IconLeft ?? IconLeft;
+  return (
+    <div className={classNames.nav} style={styles.nav}>
+      {!props.hidePrevious && (
+        <Button
+          aria-label={previousLabel}
+          className={previousClassName}
+          style={styles.nav_button_previous}
+          aria-disabled={!props.previousMonth}
+          onClick={props.onPreviousClick}
+        >
+          {dir === 'rtl' ? (
+            <IconRightComponent
+              className={classNames.nav_icon}
+              style={styles.nav_icon}
+            />
+          ) : (
+            <IconLeftComponent
+              className={classNames.nav_icon}
+              style={styles.nav_icon}
+            />
+          )}
+        </Button>
+      )}
+      {!props.hideNext && (
+        <Button
+          aria-label={nextLabel}
+          className={nextClassName}
+          style={styles.nav_button_next}
+          aria-disabled={!props.nextMonth}
+          onClick={props.onNextClick}
+        >
+          {dir === 'rtl' ? (
+            <IconLeftComponent
+              className={classNames.nav_icon}
+              style={styles.nav_icon}
+            />
+          ) : (
+            <IconRightComponent
+              className={classNames.nav_icon}
+              style={styles.nav_icon}
+            />
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/Navigation/index.ts

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

package/src/components/Root/Root.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { RenderResult } from '@testing-library/react';
+import { addDays } from 'date-fns';
+import { DayPickerProps } from 'DayPicker';
+
+import { focusDay } from 'test/actions';
+import { getDayButton, queryMonthGrids } from 'test/po';
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+import { ClassNames } from 'types/Styles';
+
+import { Root } from './Root';
+
+const today = new Date(2020, 10, 4);
+freezeBeforeAll(today);
+
+let container: HTMLElement;
+let view: RenderResult;
+
+function setup(dayPickerProps: DayPickerProps = {}) {
+  view = customRender(<Root />, dayPickerProps);
+  container = view.container;
+}
+
+describe('when the number of months is 1', () => {
+  const props: DayPickerProps = { numberOfMonths: 1 };
+  beforeEach(() => {
+    setup(props);
+  });
+  test('should display one month grid', () => {
+    expect(queryMonthGrids()).toHaveLength(1);
+  });
+});
+
+describe('when the number of months is greater than 1', () => {
+  const props: DayPickerProps = { numberOfMonths: 3 };
+  beforeEach(() => {
+    setup(props);
+  });
+  test('should display the specified number of month grids', () => {
+    expect(queryMonthGrids()).toHaveLength(3);
+  });
+});
+
+describe('when using the "classNames" prop', () => {
+  const classNames: ClassNames = {
+    root: 'foo'
+  };
+  beforeEach(() => {
+    setup({ classNames });
+  });
+  test('should display the specified number of month grids', () => {
+    expect(container.firstChild).toHaveClass('foo');
+  });
+});
+
+describe('when using the "className" prop', () => {
+  const props: DayPickerProps = { className: 'foo' };
+  beforeEach(() => {
+    setup(props);
+  });
+  test('should append the class name to the root element', () => {
+    expect(container.firstChild).toHaveClass('foo');
+  });
+});
+
+describe('when the "numberOfMonths" is greater than 1', () => {
+  const props: DayPickerProps = { numberOfMonths: 3 };
+  const expectedClassName = defaultClassNames.multiple_months;
+  beforeEach(() => {
+    setup(props);
+  });
+  test(`should have the ${expectedClassName} class name`, () => {
+    expect(container.firstChild).toHaveClass(expectedClassName);
+  });
+});
+
+describe('when showing the week numbers', () => {
+  const props: DayPickerProps = { showWeekNumber: true };
+  const expectedClassName = defaultClassNames.with_weeknumber;
+  beforeEach(() => {
+    setup(props);
+  });
+  test(`should have the ${expectedClassName} class name`, () => {
+    expect(container.firstChild).toHaveClass(expectedClassName);
+  });
+});
+
+describe('when "initialFocus" is set', () => {
+  const baseProps: DayPickerProps = {
+    initialFocus: true,
+    mode: 'single'
+  };
+  describe('when a day is not selected', () => {
+    beforeEach(() => {
+      setup(baseProps);
+    });
+    test('should focus today', () => {
+      expect(getDayButton(today)).toHaveFocus();
+    });
+    describe('when a new day is focused', () => {
+      beforeEach(() => {
+        focusDay(addDays(today, 1));
+      });
+      describe('and the calendar is rerendered', () => {
+        test.todo('should focus the new day');
+      });
+    });
+  });
+  describe('when a day is selected', () => {
+    const selected = addDays(today, 1);
+    const props: DayPickerProps = { ...baseProps, selected };
+    beforeEach(() => {
+      setup(props);
+    });
+    test('should focus the selected day', () => {
+      expect(getDayButton(selected)).toHaveFocus();
+    });
+  });
+});

package/src/components/Root/Root.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+
+import { Month } from 'components/Month';
+import { useDayPicker } from 'contexts/DayPicker';
+import { useFocusContext } from 'contexts/Focus';
+import { useNavigation } from 'contexts/Navigation';
+
+/** Render the container with the months according to the number of months to display. */
+export function Root(): JSX.Element {
+  const dayPicker = useDayPicker();
+  const focusContext = useFocusContext();
+  const navigation = useNavigation();
+
+  const [hasInitialFocus, setHasInitialFocus] = useState(false);
+
+  // Focus the focus target when initialFocus is passed in
+  useEffect(() => {
+    if (!dayPicker.initialFocus) return;
+    if (!focusContext.focusTarget) return;
+    if (hasInitialFocus) return;
+
+    focusContext.focus(focusContext.focusTarget);
+    setHasInitialFocus(true);
+  }, [
+    dayPicker.initialFocus,
+    hasInitialFocus,
+    focusContext.focus,
+    focusContext.focusTarget,
+    focusContext
+  ]);
+
+  // Apply classnames according to props
+  const classNames = [dayPicker.className ?? dayPicker.classNames.root];
+  if (dayPicker.numberOfMonths > 1) {
+    classNames.push(dayPicker.classNames.multiple_months);
+  }
+  if (dayPicker.showWeekNumber) {
+    classNames.push(dayPicker.classNames.with_weeknumber);
+  }
+
+  const style = {
+    ...dayPicker.styles.root,
+    ...dayPicker.style
+  };
+
+  return (
+    <div className={classNames.join(' ')} style={style} dir={dayPicker.dir}>
+      <div
+        className={dayPicker.classNames.months}
+        style={dayPicker.styles.months}
+      >
+        {navigation.displayMonths.map((month, i) => (
+          <Month key={i} displayIndex={i} displayMonth={month} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/Root/index.ts

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