react-day-picker 8.0.2 → 8.0.5

package/src/components/Caption/Caption.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { CaptionDropdowns } from 'components/CaptionDropdowns';
+import { CaptionLabel } from 'components/CaptionLabel';
+import { CaptionNavigation } from 'components/CaptionNavigation';
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** Represent the props of the [[Caption]] component. */
+export interface CaptionProps {
+  /** The ID for the heading element. Must be the same as the labelled-by in Table. */
+  id?: string;
+  /** The month where the caption is displayed. */
+  displayMonth: Date;
+}
+
+/**
+ * The layout of the caption:
+ *
+ * - `dropdown`: display dropdowns for choosing the month and the year.
+ * - `buttons`: display previous month / next month buttons.
+ */
+export type CaptionLayout = 'dropdown' | 'buttons';
+
+/**
+ * Render the caption of a month. The caption has a different layout when
+ * setting the [[DayPickerProps.captionLayout]] prop.
+ */
+export function Caption(props: CaptionProps): JSX.Element {
+  const { classNames, disableNavigation, styles, captionLayout, components } =
+    useDayPicker();
+
+  const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
+
+  let caption: JSX.Element;
+  if (disableNavigation) {
+    caption = (
+      <CaptionLabelComponent id={props.id} displayMonth={props.displayMonth} />
+    );
+  } else if (captionLayout === 'dropdown') {
+    caption = (
+      <CaptionDropdowns displayMonth={props.displayMonth} id={props.id} />
+    );
+  } else {
+    caption = (
+      <CaptionNavigation displayMonth={props.displayMonth} id={props.id} />
+    );
+  }
+
+  return (
+    <div className={classNames.caption} style={styles.caption}>
+      {caption}
+    </div>
+  );
+}

package/src/components/Caption/index.ts

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

package/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { setMonth, setYear } from 'date-fns';
+import { DayPickerProps } from 'DayPicker';
+
+import {
+  getMonthDropdown,
+  getYearDropdown,
+  queryMonthDropdown,
+  queryYearDropdown
+} from 'test/po';
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { CaptionProps } from 'components/Caption';
+import { CustomComponents } from 'types/DayPickerBase';
+
+import { CaptionDropdowns } from './CaptionDropdowns';
+
+const today = new Date(2021, 8);
+const fromYear = 2020;
+const toYear = 2025;
+
+freezeBeforeAll(today);
+
+function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
+  customRender(<CaptionDropdowns {...props} />, dayPickerProps);
+}
+
+describe('when using a custom CaptionLabel component', () => {
+  const components: CustomComponents = {
+    CaptionLabel: () => <>custom label foo</>
+  };
+  const props = { displayMonth: today };
+  beforeEach(() => {
+    setup(props, { components });
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('custom label foo')).toBeInTheDocument();
+  });
+});
+
+describe('when rendered with custom styles or classnames', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    const dayPickerProps: DayPickerProps = {
+      captionLayout: 'dropdown',
+      fromYear,
+      toYear,
+      classNames: { caption_dropdowns: 'foo_dropdowns' },
+      styles: { caption_dropdowns: { color: 'red' } }
+    };
+    const view = customRender(
+      <CaptionDropdowns displayMonth={today} />,
+      dayPickerProps
+    );
+    container = view.container;
+  });
+  test('should use the `caption_dropdowns` class name', () => {
+    expect(container.firstChild).toHaveClass('foo_dropdowns');
+  });
+  test('should use the `caption_dropdowns` style', () => {
+    expect(container.firstChild).toHaveStyle({ color: 'red' });
+  });
+  test('should render the month drop-down', () => {
+    expect(getMonthDropdown()).toBeInTheDocument();
+  });
+  test('should render the year drop-down', () => {
+    expect(getYearDropdown()).toBeInTheDocument();
+  });
+});
+
+describe('when a month is selected', () => {
+  const dayPickerProps: DayPickerProps = {
+    captionLayout: 'dropdown',
+    fromYear,
+    toYear,
+    onMonthChange: jest.fn()
+  };
+  beforeEach(() => {
+    customRender(<CaptionDropdowns displayMonth={today} />, dayPickerProps);
+  });
+  describe('from the months drop-down', () => {
+    const newMonth = setMonth(today, 0);
+    beforeEach(() => {
+      userEvent.selectOptions(
+        getMonthDropdown(),
+        newMonth.getMonth().toString()
+      );
+    });
+    test('should call the `onMonthChange` callback', () => {
+      expect(dayPickerProps.onMonthChange).toHaveBeenCalledWith(newMonth);
+    });
+  });
+  describe('from the years drop-down', () => {
+    const newYear = setYear(today, 2022);
+    beforeEach(() => {
+      userEvent.selectOptions(
+        getYearDropdown(),
+        newYear.getFullYear().toString()
+      );
+    });
+    test('should call the `onMonthChange` callback', () => {
+      expect(dayPickerProps.onMonthChange).toHaveBeenCalledWith(newYear);
+    });
+  });
+});
+
+describe('when no date limits are set', () => {
+  const dayPickerProps: DayPickerProps = {
+    captionLayout: 'dropdown'
+  };
+  beforeEach(() => {
+    customRender(<CaptionDropdowns displayMonth={today} />, dayPickerProps);
+  });
+  test('should not render the drop-downs', () => {
+    expect(queryMonthDropdown()).toBeNull();
+    expect(queryYearDropdown()).toBeNull();
+  });
+});

package/src/components/CaptionDropdowns/CaptionDropdowns.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { CaptionProps } from 'components/Caption/Caption';
+import { CaptionLabel } from 'components/CaptionLabel';
+import { MonthsDropdown } from 'components/MonthsDropdown';
+import { YearsDropdown } from 'components/YearsDropdown';
+import { useDayPicker } from 'contexts/DayPicker';
+import { useNavigation } from 'contexts/Navigation';
+import { MonthChangeEventHandler } from 'types/EventHandlers';
+
+/**
+ * Render a caption with the dropdowns to navigate between months and years.
+ */
+export function CaptionDropdowns(props: CaptionProps): JSX.Element {
+  const { classNames, styles, onMonthChange, components } = useDayPicker();
+  const { goToMonth } = useNavigation();
+
+  const handleMonthChange: MonthChangeEventHandler = (newMonth) => {
+    goToMonth(newMonth);
+    onMonthChange?.(newMonth);
+  };
+  const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
+  const captionLabel = (
+    <CaptionLabelComponent id={props.id} displayMonth={props.displayMonth} />
+  );
+  return (
+    <div
+      className={classNames.caption_dropdowns}
+      style={styles.caption_dropdowns}
+    >
+      {/* Caption label is visually hidden but for a11y. */}
+      <div className={classNames.vhidden}>{captionLabel}</div>
+      <MonthsDropdown
+        onChange={handleMonthChange}
+        displayMonth={props.displayMonth}
+      />
+      <YearsDropdown
+        onChange={handleMonthChange}
+        displayMonth={props.displayMonth}
+      />
+    </div>
+  );
+}

package/src/components/CaptionDropdowns/index.ts

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

package/src/components/CaptionLabel/CaptionLabel.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { getMonthCaption } from 'test/po';
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { CaptionLabel } from './CaptionLabel';
+
+const today = new Date(1979, 8);
+freezeBeforeAll(today);
+
+test('should render the formatted display month', () => {
+  customRender(<CaptionLabel displayMonth={today} />);
+  expect(getMonthCaption()).toHaveTextContent('September 1979');
+});
+
+test('should apply the `caption_label` class name', () => {
+  customRender(<CaptionLabel displayMonth={today} />, {
+    classNames: { caption_label: 'foo' }
+  });
+  expect(getMonthCaption()).toHaveClass('foo');
+});
+
+test('should apply the `caption_label` style', () => {
+  customRender(<CaptionLabel displayMonth={today} />, {
+    styles: { caption_label: { color: 'red' } }
+  });
+  expect(getMonthCaption()).toHaveStyle({ color: 'red' });
+});

package/src/components/CaptionLabel/CaptionLabel.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** The props for the [[CaptionLabel]] component. */
+export interface CaptionLabelProps {
+  /** The ID for the heading element. Must be the same as the labelled-by in Table. */
+  id?: string;
+  /** The month where the caption is displayed. */
+  displayMonth: Date;
+}
+
+/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
+export function CaptionLabel(props: CaptionLabelProps): JSX.Element {
+  const {
+    locale,
+    classNames,
+    styles,
+    formatters: { formatCaption }
+  } = useDayPicker();
+  return (
+    <h2
+      className={classNames.caption_label}
+      style={styles.caption_label}
+      aria-live="polite"
+      aria-atomic="true"
+      id={props.id}
+    >
+      {formatCaption(props.displayMonth, { locale })}
+    </h2>
+  );
+}

package/src/components/CaptionLabel/index.ts

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

package/src/components/CaptionNavigation/CaptionNavigation.test.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { addMonths } from 'date-fns';
+import { DayPickerProps } from 'DayPicker';
+
+import {
+  getMonthCaption,
+  getNextButton,
+  getPrevButton,
+  queryNextButton,
+  queryPrevButton
+} from 'test/po';
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { CaptionProps } from 'components/Caption';
+import { CustomComponents } from 'types/DayPickerBase';
+
+import { CaptionNavigation } from './CaptionNavigation';
+
+const today = new Date(2021, 8);
+
+freezeBeforeAll(today);
+
+function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
+  customRender(<CaptionNavigation {...props} />, dayPickerProps);
+}
+
+describe('when using a custom CaptionLabel component', () => {
+  const components: CustomComponents = {
+    CaptionLabel: () => <>custom label foo</>
+  };
+  const props = { displayMonth: today };
+  beforeEach(() => {
+    setup(props, { components });
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('custom label foo')).toBeInTheDocument();
+  });
+});
+
+describe('when rendered', () => {
+  const dayPickerProps: DayPickerProps = {
+    captionLayout: 'buttons'
+  };
+  test('should render the caption label', () => {
+    customRender(<CaptionNavigation displayMonth={today} />, dayPickerProps);
+    expect(getMonthCaption()).toHaveTextContent('September 2021');
+  });
+  test('should render the next month button', () => {
+    customRender(<CaptionNavigation displayMonth={today} />, dayPickerProps);
+    expect(getNextButton()).toBeInTheDocument();
+  });
+  test('should render the previous month button', () => {
+    customRender(<CaptionNavigation displayMonth={today} />, dayPickerProps);
+    expect(getPrevButton()).toBeInTheDocument();
+  });
+
+  describe('when displaying the first of multiple months', () => {
+    const numberOfMonths = 3;
+    beforeEach(() => {
+      customRender(<CaptionNavigation displayMonth={today} />, {
+        ...dayPickerProps,
+        numberOfMonths
+      });
+    });
+    test('should not display the next month button', () => {
+      expect(queryNextButton()).toBeNull();
+    });
+    test('should show the previous month button', () => {
+      expect(getPrevButton()).toBeInTheDocument();
+    });
+  });
+
+  describe('when displaying the last of multiple months', () => {
+    const numberOfMonths = 3;
+    beforeEach(() => {
+      const lastMonth = addMonths(today, numberOfMonths - 1);
+      customRender(<CaptionNavigation displayMonth={lastMonth} />, {
+        ...dayPickerProps,
+        numberOfMonths
+      });
+    });
+    test('should hide the previous month button', () => {
+      expect(queryPrevButton()).toBeNull();
+    });
+    test('should show the next month button', () => {
+      expect(getNextButton()).toBeInTheDocument();
+    });
+  });
+
+  describe('when displaying a month in the middle of multiple months', () => {
+    const numberOfMonths = 3;
+    beforeEach(() => {
+      const lastMonth = addMonths(today, numberOfMonths - 2);
+      customRender(<CaptionNavigation displayMonth={lastMonth} />, {
+        ...dayPickerProps,
+        numberOfMonths
+      });
+    });
+    test('should not render the previous month button', () => {
+      expect(queryPrevButton()).toBeNull();
+    });
+    test('should not render the next month button', () => {
+      expect(queryNextButton()).toBeNull();
+    });
+  });
+
+  describe('when clicking the previous button', () => {
+    describe('and a previous month is defined', () => {
+      const testContext = {
+        ...dayPickerProps,
+        onMonthChange: jest.fn()
+      };
+      const previousMonth = addMonths(today, -1);
+      beforeEach(() => {
+        customRender(<CaptionNavigation displayMonth={today} />, testContext);
+        userEvent.click(getPrevButton());
+      });
+      test('should call the `onMonthChange` callback', () => {
+        expect(testContext.onMonthChange).toHaveBeenCalledWith(previousMonth);
+      });
+    });
+    describe('and the previous month is not defined', () => {
+      const testContext = {
+        ...dayPickerProps,
+        fromDate: today,
+        onMonthChange: jest.fn()
+      };
+      beforeEach(() => {
+        customRender(<CaptionNavigation displayMonth={today} />, testContext);
+        userEvent.click(getPrevButton());
+      });
+      test('should call the `onMonthChange` callback', () => {
+        expect(testContext.onMonthChange).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when clicking the next month button', () => {
+    describe('and the next month is defined', () => {
+      const testContext = {
+        ...dayPickerProps,
+        onMonthChange: jest.fn()
+      };
+      const nextMonth = addMonths(today, 1);
+      beforeEach(() => {
+        customRender(<CaptionNavigation displayMonth={today} />, testContext);
+        userEvent.click(getNextButton());
+      });
+      test('should call the `onMonthChange` callback', () => {
+        expect(testContext.onMonthChange).toHaveBeenCalledWith(nextMonth);
+      });
+    });
+    describe('and the next month is not defined', () => {
+      const testContext = {
+        ...dayPickerProps,
+        toDate: today,
+        onMonthChange: jest.fn()
+      };
+      beforeEach(() => {
+        customRender(<CaptionNavigation displayMonth={today} />, testContext);
+        userEvent.click(getNextButton());
+      });
+      test('should call the `onMonthChange` callback', () => {
+        expect(testContext.onMonthChange).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/components/CaptionNavigation/CaptionNavigation.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import isSameMonth from 'date-fns/isSameMonth';
+
+import { CaptionProps } from 'components/Caption/Caption';
+import { CaptionLabel } from 'components/CaptionLabel';
+import { Navigation } from 'components/Navigation';
+import { useDayPicker } from 'contexts/DayPicker';
+import { useNavigation } from 'contexts/Navigation';
+
+/**
+ * Render a caption with a button-based navigation.
+ */
+export function CaptionNavigation(props: CaptionProps): JSX.Element {
+  const { numberOfMonths, onMonthChange, dir, components } = useDayPicker();
+  const { previousMonth, nextMonth, goToMonth, displayMonths } =
+    useNavigation();
+
+  const displayIndex = displayMonths.findIndex((month) =>
+    isSameMonth(props.displayMonth, month)
+  );
+
+  let isFirst = displayIndex === 0;
+  let isLast = displayIndex === displayMonths.length - 1;
+  if (dir === 'rtl') {
+    [isLast, isFirst] = [isFirst, isLast];
+  }
+
+  const hideNext = numberOfMonths > 1 && (isFirst || !isLast);
+  const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
+
+  const handlePreviousClick: React.MouseEventHandler = () => {
+    if (!previousMonth) return;
+    goToMonth(previousMonth);
+    onMonthChange?.(previousMonth);
+  };
+
+  const handleNextClick: React.MouseEventHandler = () => {
+    if (!nextMonth) return;
+    goToMonth(nextMonth);
+    onMonthChange?.(nextMonth);
+  };
+
+  const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
+  const captionLabel = (
+    <CaptionLabelComponent id={props.id} displayMonth={props.displayMonth} />
+  );
+
+  return (
+    <>
+      {captionLabel}
+      <Navigation
+        displayMonth={props.displayMonth}
+        hideNext={hideNext}
+        hidePrevious={hidePrevious}
+        nextMonth={nextMonth}
+        previousMonth={previousMonth}
+        onPreviousClick={handlePreviousClick}
+        onNextClick={handleNextClick}
+      />
+    </>
+  );
+}

package/src/components/CaptionNavigation/index.ts

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

package/src/components/Day/Day.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { CustomComponents } from 'types/DayPickerBase';
+
+import { Day, DayProps } from './Day';
+
+const today = new Date(2021, 8);
+
+freezeBeforeAll(today);
+let container: HTMLElement;
+function setup(props: DayProps, dayPickerProps?: DayPickerProps) {
+  const view = customRender(<Day {...props} />, dayPickerProps);
+  container = view.container;
+}
+
+const date = today;
+const displayMonth = today;
+const props: DayProps = {
+  date: date,
+  displayMonth
+};
+
+describe('when the day to render has an hidden modifier', () => {
+  const dayPickerProps: DayPickerProps = {
+    modifiers: { hidden: date }
+  };
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('should render an empty element', () => {
+    expect(container).toBeEmptyDOMElement();
+  });
+});
+describe('when a no selection mode and no "onDayClick"', () => {
+  const dayPickerProps: DayPickerProps = { mode: 'default' };
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('should render a div', () => {
+    expect(container.firstChild?.nodeName).toBe('DIV');
+  });
+});
+
+describe('when a selection mode is set', () => {
+  const dayPickerProps: DayPickerProps = {
+    mode: 'single'
+  };
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('should render a button', () => {
+    expect(container.firstChild?.nodeName).toBe('BUTTON');
+  });
+});
+
+describe('when "onDayClick" is present', () => {
+  const dayPickerProps: DayPickerProps = {
+    onDayClick: jest.fn()
+  };
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('should render a button', () => {
+    expect(container.firstChild?.nodeName).toBe('BUTTON');
+  });
+});
+
+describe('when using a custom DayContent component', () => {
+  const components: CustomComponents = {
+    DayContent: () => <>Custom DayContent</>
+  };
+  beforeEach(() => {
+    setup(props, { components });
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('Custom DayContent')).toBeInTheDocument();
+  });
+});

package/src/components/Day/Day.tsx

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react';
+
+import { useDayRender } from 'hooks/useDayRender';
+
+import { Button } from '../Button';
+
+/** Represent the props used by the [[Day]] component. */
+export interface DayProps {
+  /** The month where the date is displayed. */
+  displayMonth: Date;
+  /** The date to render. */
+  date: Date;
+}
+
+/**
+ * The content of a day cell – as a button or span element according to its
+ * modifiers.
+ */
+export function Day(props: DayProps): JSX.Element {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
+
+  if (dayRender.isHidden) {
+    return <></>;
+  }
+  if (!dayRender.isButton) {
+    return <div {...dayRender.divProps} />;
+  }
+  return <Button ref={buttonRef} {...dayRender.buttonProps} />;
+}

package/src/components/Day/index.ts

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