react-day-picker 8.0.2 → 8.0.5

package/src/components/Month/Month.test.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+
+import { getMonthCaption, getMonthGrid } from 'test/po';
+import { customRender } from 'test/render';
+
+import { CustomComponents } from 'types/DayPickerBase';
+
+import { Month, MonthProps } from './Month';
+
+let root: HTMLDivElement;
+
+const displayMonth = new Date(2022, 10, 4);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const testStyles: Record<string, any> = {
+  caption_start: { color: 'red' },
+  caption_end: { background: 'blue' },
+  caption_between: { fontSize: 20 }
+};
+
+const testClassNames: Record<string, string> = {
+  caption_start: 'caption_start',
+  caption_end: 'caption_end',
+  caption_between: 'caption_between'
+};
+
+type Test = {
+  monthProps: MonthProps;
+  dayPickerProps: DayPickerProps;
+  expected: string[];
+  notExpected: string[];
+};
+
+function setup(props: MonthProps, dayPickerProps?: DayPickerProps) {
+  const view = customRender(<Month {...props} />, dayPickerProps);
+  root = view.container.firstChild as HTMLDivElement;
+}
+describe('when rendered', () => {
+  beforeEach(() => {
+    setup({ displayIndex: 0, displayMonth });
+  });
+  test('the caption id should be the aria-labelledby of the grid', () => {
+    const captionId = getMonthCaption().getAttribute('id');
+    const gridLabelledBy = getMonthGrid().getAttribute('aria-labelledby');
+    expect(captionId).toEqual(gridLabelledBy);
+  });
+});
+
+describe('when using a custom Caption component', () => {
+  const components: CustomComponents = {
+    Caption: () => <>custom caption foo</>
+  };
+  beforeEach(() => {
+    setup({ displayIndex: 0, displayMonth }, { components });
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('custom caption foo')).toBeInTheDocument();
+  });
+});
+
+describe('when dir is ltr', () => {
+  const testLtr: Test[] = [
+    {
+      monthProps: {
+        displayIndex: 0,
+        displayMonth
+      },
+      dayPickerProps: {
+        numberOfMonths: 1,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_start', 'caption_end'],
+      notExpected: ['caption_between']
+    },
+    {
+      monthProps: {
+        displayIndex: 0,
+        displayMonth
+      },
+      dayPickerProps: {
+        numberOfMonths: 2,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_start'],
+      notExpected: ['caption_between', 'caption_end']
+    },
+    {
+      monthProps: {
+        displayIndex: 1,
+        displayMonth
+      },
+      dayPickerProps: {
+        numberOfMonths: 2,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_end'],
+      notExpected: ['caption_start', 'caption_between']
+    },
+    {
+      monthProps: {
+        displayIndex: 1,
+        displayMonth
+      },
+      dayPickerProps: {
+        numberOfMonths: 3,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_between'],
+      notExpected: ['caption_start', 'caption_end']
+    }
+  ];
+
+  describe.each(testLtr)(
+    'when displayIndex is $monthProps.displayIndex and numberOfMonths is $dayPickerProps.numberOfMonths',
+    ({ monthProps, dayPickerProps, expected, notExpected }) => {
+      beforeEach(() => {
+        setup(monthProps, dayPickerProps);
+      });
+      test.each(expected)(`the root should have the %s class`, (name) =>
+        expect(root).toHaveClass(testClassNames[name])
+      );
+      test.each(expected)(`the root should have the %s style`, (name) =>
+        expect(root).toHaveStyle(testStyles[name])
+      );
+      test.each(notExpected)(`the root should not have the %s class`, (name) =>
+        expect(root).not.toHaveClass(testClassNames[name])
+      );
+    }
+  );
+});
+
+describe('when dir is rtl', () => {
+  const testRtl: Test[] = [
+    {
+      monthProps: {
+        displayIndex: 0,
+        displayMonth
+      },
+      dayPickerProps: {
+        dir: 'rtl',
+        numberOfMonths: 1,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_start', 'caption_end'],
+      notExpected: ['caption_between']
+    },
+    {
+      monthProps: {
+        displayIndex: 0,
+        displayMonth
+      },
+      dayPickerProps: {
+        dir: 'rtl',
+        numberOfMonths: 2,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_end'],
+      notExpected: ['caption_between', 'caption_start']
+    },
+    {
+      monthProps: {
+        displayIndex: 1,
+        displayMonth
+      },
+      dayPickerProps: {
+        dir: 'rtl',
+        numberOfMonths: 2,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_start'],
+      notExpected: ['caption_end', 'caption_between']
+    },
+    {
+      monthProps: {
+        displayIndex: 1,
+        displayMonth
+      },
+      dayPickerProps: {
+        dir: 'rtl',
+        numberOfMonths: 3,
+        styles: testStyles,
+        classNames: testClassNames
+      },
+      expected: ['caption_between'],
+      notExpected: ['caption_start', 'caption_end']
+    }
+  ];
+
+  describe.each(testRtl)(
+    'when displayIndex is $monthProps.displayIndex and numberOfMonths is $dayPickerProps.numberOfMonths',
+    ({ monthProps, dayPickerProps, expected, notExpected }) => {
+      beforeEach(() => {
+        setup(monthProps, dayPickerProps);
+      });
+      test.each(expected)(`the root should have the %s class`, (name) =>
+        expect(root).toHaveClass(testClassNames[name])
+      );
+      test.each(expected)(`the root should have the %s style`, (name) =>
+        expect(root).toHaveStyle(testStyles[name])
+      );
+      test.each(notExpected)(`the root should not have the %s class`, (name) =>
+        expect(root).not.toHaveClass(testClassNames[name])
+      );
+    }
+  );
+});

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';