react-day-picker 8.0.3 → 8.0.6

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

package/src/components/DayContent/DayContent.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import es from 'date-fns/locale/es';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { DayContent, DayContentProps } from 'components/DayContent';
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+
+const today = new Date(2021, 8);
+
+freezeBeforeAll(today);
+let container: HTMLElement;
+function setup(props: DayContentProps, dayPickerProps?: DayPickerProps) {
+  const view = customRender(<DayContent {...props} />, dayPickerProps);
+  container = view.container;
+}
+
+const date = today;
+const displayMonth = today;
+const props: DayContentProps = {
+  date: date,
+  displayMonth,
+  activeModifiers: {}
+};
+
+const dayPickerProps: DayPickerProps = {
+  locale: es
+};
+
+describe('when rendered', () => {
+  beforeEach(() => {
+    setup(props, dayPickerProps);
+  });
+  test('the first element is an aria-hidden element with the formatted day', () => {
+    expect(container.firstChild).toHaveAttribute('aria-hidden', 'true');
+  });
+  test('the first element contains the formatted day', () => {
+    expect(container.firstChild).toHaveTextContent('1');
+  });
+  test('the second element is visually hidden', () => {
+    expect(container.childNodes[1]).toHaveClass(defaultClassNames.vhidden);
+  });
+  test('the second element contains the formatted day', () => {
+    expect(container.childNodes[1]).toHaveTextContent(
+      '1º septiembre (miércoles)'
+    );
+  });
+});

package/src/components/DayContent/DayContent.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+import { ActiveModifiers } from 'types/Modifiers';
+
+/** Represent the props for the [[DayContent]] component. */
+export interface DayContentProps {
+  /** The date representing the day. */
+  date: Date;
+  /** The month where the day is displayed. */
+  displayMonth: Date;
+  /** The active modifiers for the given date. */
+  activeModifiers: ActiveModifiers;
+}
+
+/**
+ * Render the content of the day cell.
+ */
+export function DayContent(props: DayContentProps): JSX.Element {
+  const {
+    locale,
+    classNames,
+    styles,
+    labels: { labelDay },
+    formatters: { formatDay }
+  } = useDayPicker();
+
+  return (
+    <>
+      <span aria-hidden="true">{formatDay(props.date, { locale })}</span>
+      <span className={classNames.vhidden} style={styles.vhidden}>
+        {labelDay(props.date, props.activeModifiers, { locale })}
+      </span>
+    </>
+  );
+}

package/src/components/DayContent/index.ts

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

package/src/components/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { fireEvent, screen } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { Dropdown, DropdownProps } from 'components/Dropdown';
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+import { CustomComponents } from 'types/DayPickerBase';
+
+const today = new Date(2021, 8);
+
+freezeBeforeAll(today);
+
+function setup(props: DropdownProps, dayPickerProps?: DayPickerProps) {
+  customRender(<Dropdown {...props} />, dayPickerProps);
+}
+
+const props: Required<DropdownProps> = {
+  'aria-label': 'foo',
+  onChange: jest.fn(),
+  caption: 'Some caption',
+  className: 'test',
+  value: 'bar',
+  children: <option value={'bar'} />,
+  style: {}
+};
+
+describe('when rendered', () => {
+  let combobox: HTMLElement;
+  let label: HTMLElement;
+
+  beforeEach(() => {
+    setup(props);
+    combobox = screen.getByRole('combobox');
+    label = screen.getByText(props['aria-label']);
+  });
+
+  test('should render the vhidden aria label', () => {
+    expect(label).toHaveClass(defaultClassNames.vhidden);
+  });
+
+  test('should render the combobox', () => {
+    expect(combobox).toBeInTheDocument();
+  });
+
+  describe('when the combobox changes', () => {
+    beforeEach(() => {
+      fireEvent.change(combobox);
+    });
+    test('should call the "onChange" eve, nt handler', () => {
+      expect(props.onChange).toHaveBeenCalled();
+    });
+  });
+
+  test('should render the combobox with the given value', () => {
+    expect(combobox).toHaveValue(props.value);
+  });
+});
+
+describe('when using a custom IconDropdown component', () => {
+  const components: CustomComponents = {
+    IconDropdown: () => <div>Custom IconDropdown</div>
+  };
+  beforeEach(() => {
+    setup(props, { components });
+  });
+  test('it should render the custom component instead', () => {
+    expect(screen.getByText('Custom IconDropdown')).toBeInTheDocument();
+  });
+});

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { IconDropdown } from 'components/IconDropdown';
+import { useDayPicker } from 'contexts/DayPicker';
+
+/** The props for the [[Dropdown]] component. */
+export interface DropdownProps {
+  caption?: React.ReactNode;
+  children?: React.SelectHTMLAttributes<HTMLSelectElement>['children'];
+  className?: string;
+  ['aria-label']?: string;
+  style?: React.CSSProperties;
+  value?: string | number;
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+/**
+ * Render a styled select component – displaying a caption and a custom
+ * drop-down icon.
+ */
+export function Dropdown(props: DropdownProps): JSX.Element {
+  const { onChange, value, children, caption, className, style } = props;
+  const dayPicker = useDayPicker();
+
+  const IconDropdownComponent =
+    dayPicker.components?.IconDropdown ?? IconDropdown;
+  return (
+    <div className={className} style={style}>
+      <span className={dayPicker.classNames.vhidden}>
+        {props['aria-label']}
+      </span>
+      <select
+        aria-label={props['aria-label']}
+        className={dayPicker.classNames.dropdown}
+        style={dayPicker.styles.dropdown}
+        value={value}
+        onChange={onChange}
+      >
+        {children}
+      </select>
+      <div
+        className={dayPicker.classNames.caption_label}
+        style={dayPicker.styles.caption_label}
+        aria-hidden="true"
+      >
+        {caption}
+        {
+          <IconDropdownComponent
+            className={dayPicker.classNames.dropdown_icon}
+            style={dayPicker.styles.dropdown_icon}
+          />
+        }
+      </div>
+    </div>
+  );
+}