react-day-picker 8.0.2 → 8.0.5

package/src/components/Table/index.ts

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

package/src/components/Table/utils/daysToMonthWeeks.ts

@@ -0,0 +1,47 @@
+import type { Locale } from 'date-fns';
+
+import addDays from 'date-fns/addDays';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import endOfWeek from 'date-fns/endOfWeek';
+import getWeek from 'date-fns/getWeek';
+import startOfWeek from 'date-fns/startOfWeek';
+
+import { MonthWeek } from './getMonthWeeks';
+
+/** Return the weeks between two dates.  */
+export function daysToMonthWeeks(
+  fromDate: Date,
+  toDate: Date,
+  options?: {
+    locale?: Locale;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+  }
+): MonthWeek[] {
+  const toWeek = endOfWeek(toDate, options);
+  const fromWeek = startOfWeek(fromDate, options);
+  const nOfDays = differenceInCalendarDays(toWeek, fromWeek);
+  const days: Date[] = [];
+
+  for (let i = 0; i <= nOfDays; i++) {
+    days.push(addDays(fromWeek, i));
+  }
+
+  const weeksInMonth = days.reduce((result: MonthWeek[], date) => {
+    const weekNumber = getWeek(date, options);
+    const existingWeek = result.find(
+      (value) => value.weekNumber === weekNumber
+    );
+    if (existingWeek) {
+      existingWeek.dates.push(date);
+      return result;
+    }
+    result.push({
+      weekNumber,
+      dates: [date]
+    });
+    return result;
+  }, []);
+
+  return weeksInMonth;
+}

package/src/components/Table/utils/getMonthWeeks.test.ts

@@ -0,0 +1,68 @@
+import { enGB, enUS } from 'date-fns/locale';
+
+import { getMonthWeeks } from './getMonthWeeks';
+
+describe('when using the "enUS" locale', () => {
+  const locale = enUS;
+  describe('when using fixed weeks', () => {
+    const useFixedWeeks = true;
+    describe('when getting the weeks for December 2022', () => {
+      const date = new Date(2022, 11);
+      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      test('should return 49 - 1 week numbers', () => {
+        const weekNumbers = weeks.map((week) => week.weekNumber);
+        const expectedResult = [49, 50, 51, 52, 53, 1];
+        expect(weekNumbers).toEqual(expectedResult);
+      });
+      test('the last week should be the one in the next year', () => {
+        const lastWeek = weeks[weeks.length - 1];
+        const lastWeekDates = lastWeek.dates.map((date) => date.getDate());
+        const expectedResult = [1, 2, 3, 4, 5, 6, 7];
+        expect(lastWeekDates).toEqual(expectedResult);
+      });
+    });
+    describe('when getting the weeks for December 2021', () => {
+      const weeks = getMonthWeeks(new Date(2021, 11), {
+        useFixedWeeks: false,
+        locale: enUS
+      });
+      test('should return 49 - 1 week numbers', () => {
+        const weekNumbers = weeks.map((week) => week.weekNumber);
+        const expectedResult = [49, 50, 51, 52, 1];
+        expect(weekNumbers).toEqual(expectedResult);
+      });
+      test('the last week should be the last in the year', () => {
+        const lastWeek = weeks[weeks.length - 1];
+        const lastWeekDates = lastWeek.dates.map((date) => date.getDate());
+        const expectedResult = [26, 27, 28, 29, 30, 31, 1];
+        expect(lastWeekDates).toEqual(expectedResult);
+      });
+      test('week 1 contains the first day of the new year', () => {
+        expect(weeks[4].dates.map((date) => date.getDate())).toEqual([
+          26, 27, 28, 29, 30, 31, 1
+        ]);
+      });
+    });
+  });
+});
+
+describe('when using the "enGB" locale', () => {
+  const locale = enGB;
+  describe('when getting the weeks for January 2022', () => {
+    const date = new Date(2022, 0);
+    const weeks = getMonthWeeks(date, { locale });
+    test('the first week should be the last of the previous year', () => {
+      const weekNumbers = weeks.map((week) => week.weekNumber);
+      expect(weekNumbers[0]).toEqual(52);
+    });
+    test('the first week should contain days from previous year', () => {
+      expect(weeks[0].dates.map((date) => date.getDate())).toEqual([
+        27, 28, 29, 30, 31, 1, 2
+      ]);
+    });
+    test('the first week should be the last of January', () => {
+      const weekNumbers = weeks.map((week) => week.weekNumber);
+      expect(weekNumbers[weekNumbers.length - 1]).toEqual(5);
+    });
+  });
+});

package/src/components/Table/utils/getMonthWeeks.ts

@@ -0,0 +1,55 @@
+import type { Locale } from 'date-fns';
+
+import addWeeks from 'date-fns/addWeeks';
+import endOfMonth from 'date-fns/endOfMonth';
+import getWeeksInMonth from 'date-fns/getWeeksInMonth';
+import startOfMonth from 'date-fns/startOfMonth';
+
+import { daysToMonthWeeks } from './daysToMonthWeeks';
+
+/** Represents a week in the month.*/
+export type MonthWeek = {
+  /** The week number from the start of the year. */
+  weekNumber: number;
+  /** The dates in the week. */
+  dates: Date[];
+};
+
+/**
+ * Return the weeks belonging to the given month, adding the "outside days" to
+ * the first and last week.
+ */
+export function getMonthWeeks(
+  /** The month to get the weeks from */
+  month: Date,
+  options: {
+    locale: Locale;
+    /** Add extra weeks up to 6 weeks */
+    useFixedWeeks?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+  }
+): MonthWeek[] {
+  const weeksInMonth: MonthWeek[] = daysToMonthWeeks(
+    startOfMonth(month),
+    endOfMonth(month),
+    options
+  );
+
+  // Add extra weeks to the month, up to 6 weeks
+  if (options?.useFixedWeeks) {
+    const nrOfMonthWeeks = getWeeksInMonth(month, options);
+    if (nrOfMonthWeeks < 6) {
+      const lastWeek = weeksInMonth[weeksInMonth.length - 1];
+      const lastDate = lastWeek.dates[lastWeek.dates.length - 1];
+      const toDate = addWeeks(lastDate, 6 - nrOfMonthWeeks);
+      const extraWeeks = daysToMonthWeeks(
+        addWeeks(lastDate, 1),
+        toDate,
+        options
+      );
+      weeksInMonth.push(...extraWeeks);
+    }
+  }
+  return weeksInMonth;
+}

package/src/components/WeekNumber/WeekNumber.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render/customRender';
+
+import { DayPickerBase } from 'types/DayPickerBase';
+
+import { WeekNumber, WeekNumberProps } from './WeekNumber';
+
+function setup(props: WeekNumberProps, dayPickerProps?: DayPickerProps) {
+  return customRender(<WeekNumber {...props} />, dayPickerProps);
+}
+
+const props: WeekNumberProps = {
+  number: 10,
+  dates: [new Date(), new Date()]
+};
+
+describe('without "onWeekNumberClick" prop', () => {
+  const dayPickerProps: DayPickerBase = { onWeekNumberClick: undefined };
+  test('it should return a span element', () => {
+    const { container } = setup(props, dayPickerProps);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+describe('with "onWeekNumberClick" prop', () => {
+  const dayPickerProps: DayPickerBase = { onWeekNumberClick: jest.fn() };
+  const { container } = setup(props, dayPickerProps);
+  test('it should return a button element', () => {
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  describe('when the button element is clicked', () => {
+    userEvent.click(screen.getByRole('button'));
+    test('should call onWeekNumberClick', () => {
+      expect(dayPickerProps.onWeekNumberClick).toHaveBeenCalledWith(
+        props.number,
+        props.dates,
+        expect.anything()
+      );
+    });
+  });
+});

package/src/components/WeekNumber/WeekNumber.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+import { Button } from '../Button';
+
+/**
+ * The props for the [[WeekNumber]] component.
+ */
+export interface WeekNumberProps {
+  /** The number of the week. */
+  number: number;
+  /** The dates in the week. */
+  dates: Date[];
+}
+
+/**
+ * Render the week number element. If `onWeekNumberClick` is passed to DayPicker, it
+ * renders a button, otherwise a span element.
+ */
+export function WeekNumber(props: WeekNumberProps): JSX.Element {
+  const { number: weekNumber, dates } = props;
+  const {
+    onWeekNumberClick,
+    styles,
+    classNames,
+    locale,
+    labels: { labelWeekNumber },
+    formatters: { formatWeekNumber }
+  } = useDayPicker();
+
+  const content = formatWeekNumber(Number(weekNumber), { locale });
+
+  if (!onWeekNumberClick) {
+    return (
+      <span className={classNames.weeknumber} style={styles.weeknumber}>
+        {content}
+      </span>
+    );
+  }
+
+  const label = labelWeekNumber(Number(weekNumber), { locale });
+
+  const handleClick: React.MouseEventHandler = function (e) {
+    onWeekNumberClick(weekNumber, dates, e);
+  };
+
+  return (
+    <Button
+      aria-label={label}
+      className={classNames.weeknumber}
+      style={styles.weeknumber}
+      onClick={handleClick}
+    >
+      {content}
+    </Button>
+  );
+}

package/src/components/WeekNumber/__snapshots__/WeekNumber.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`with "onWeekNumberClick" prop it should return a button element 1`] = `null`;
+
+exports[`without "onWeekNumberClick" prop it should return a span element 1`] = `
+<span
+  class="rdp-weeknumber"
+>
+  10
+</span>
+`;

package/src/components/WeekNumber/index.ts

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

package/src/components/YearsDropdown/YearsDropdown.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { differenceInYears } from 'date-fns';
+import { DayPickerProps } from 'DayPicker';
+
+import { customRender } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
+
+import { YearsDropdown, YearsDropdownProps } from './YearsDropdown';
+
+const today = new Date(2020, 12, 22);
+
+freezeBeforeAll(today);
+
+let root: HTMLDivElement;
+let options: HTMLCollectionOf<HTMLOptionElement> | undefined;
+let select: HTMLSelectElement | null;
+
+function setup(props: YearsDropdownProps, dayPickerProps?: DayPickerProps) {
+  const view = customRender(<YearsDropdown {...props} />, dayPickerProps);
+  root = view.container.firstChild as HTMLDivElement;
+  select = screen.queryByRole('combobox', { name: 'Year:' });
+  options = select?.getElementsByTagName('option');
+}
+
+const props: YearsDropdownProps = {
+  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(select).toBeInTheDocument();
+    expect(options).toHaveLength(differenceInYears(toDate, fromDate) + 1);
+  });
+  test('the month should be the same month', () => {
+    expect(options?.[0]).toHaveValue(`${fromDate.getFullYear()}`);
+  });
+});
+
+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(2013, 7, 0);
+  beforeEach(() => {
+    setup({ ...props, displayMonth }, { fromDate, toDate });
+  });
+  test('should display the full years', () => {
+    expect(options).toHaveLength(differenceInYears(toDate, fromDate) + 1);
+  });
+  test('the first option should be fromDates year', () => {
+    expect(options?.[0]).toHaveValue(`${fromDate.getFullYear()}`);
+  });
+  test('the last option should be "toDate"s year', () => {
+    expect(options?.[options.length - 1]).toHaveValue(
+      `${toDate.getFullYear()}`
+    );
+  });
+  test('should select the displayed year', () => {
+    expect(select).toHaveValue(`${displayMonth.getFullYear()}`);
+  });
+
+  describe('when the dropdown changes', () => {
+    const newYear = fromDate.getFullYear();
+    beforeEach(() => {
+      if (select) userEvent.selectOptions(select, `${newYear}`);
+    });
+    test('should fire the "onChange" event handler', () => {
+      const expectedYear = new Date(newYear, displayMonth.getMonth(), 1);
+      expect(props.onChange).toHaveBeenCalledWith(expectedYear);
+    });
+  });
+});

package/src/components/YearsDropdown/YearsDropdown.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import setYear from 'date-fns/setYear';
+import startOfMonth from 'date-fns/startOfMonth';
+import startOfYear from 'date-fns/startOfYear';
+
+import { Dropdown } from 'components/Dropdown';
+import { useDayPicker } from 'contexts/DayPicker';
+import { MonthChangeEventHandler } from 'types/EventHandlers';
+
+/**
+ * The props for the [[YearsDropdown]] component.
+ */
+export interface YearsDropdownProps {
+  /** The month where the drop-down is displayed. */
+  displayMonth: Date;
+  /** Callback to handle the `change` event. */
+  onChange: MonthChangeEventHandler;
+}
+
+/**
+ * Render a dropdown to change the year. Take in account the `nav.fromDate` and
+ * `toDate` from context.
+ */
+export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
+  const { displayMonth } = props;
+  const {
+    fromDate,
+    toDate,
+    locale,
+    styles,
+    classNames,
+    components,
+    formatters: { formatYearCaption },
+    labels: { labelYearDropdown }
+  } = useDayPicker();
+
+  const years: Date[] = [];
+
+  // Dropdown should appear only when both from/toDate is set
+  if (!fromDate) return <></>;
+  if (!toDate) return <></>;
+
+  const fromYear = fromDate.getFullYear();
+  const toYear = toDate.getFullYear();
+  for (let year = fromYear; year <= toYear; year++) {
+    years.push(setYear(startOfYear(new Date()), year));
+  }
+
+  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+    const newMonth = setYear(
+      startOfMonth(displayMonth),
+      Number(e.target.value)
+    );
+    props.onChange(newMonth);
+  };
+
+  const DropdownComponent = components?.Dropdown ?? Dropdown;
+
+  return (
+    <DropdownComponent
+      aria-label={labelYearDropdown()}
+      className={classNames.dropdown_month}
+      style={styles.dropdown_month}
+      onChange={handleChange}
+      value={displayMonth.getFullYear()}
+      caption={formatYearCaption(displayMonth, { locale })}
+    >
+      {years.map((year) => (
+        <option key={year.getFullYear()} value={year.getFullYear()}>
+          {formatYearCaption(year, { locale })}
+        </option>
+      ))}
+    </DropdownComponent>
+  );
+}

package/src/components/YearsDropdown/index.ts

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

package/src/contexts/DayPicker/DayPickerContext.tsx

@@ -0,0 +1,156 @@
+import React, { createContext, ReactNode } from 'react';
+
+import { DayPickerProps } from 'DayPicker';
+
+import { CaptionLayout } from 'components/Caption';
+import { DayPickerBase, DaySelectionMode } from 'types/DayPickerBase';
+import { DayPickerMultipleProps } from 'types/DayPickerMultiple';
+import { DayPickerRangeProps } from 'types/DayPickerRange';
+import { DayPickerSingleProps } from 'types/DayPickerSingle';
+import { Formatters } from 'types/Formatters';
+import { Labels } from 'types/Labels';
+import { Matcher } from 'types/Matchers';
+import { DayModifiers, ModifiersClassNames } from 'types/Modifiers';
+import { ClassNames, Styles } from 'types/Styles';
+
+import { getDefaultContextValue } from './defaultContextValue';
+import { parseFromToProps } from './utils';
+
+/** The value of the [[DayPickerContext]]. */
+export interface DayPickerContextValue extends DayPickerBase {
+  mode: DaySelectionMode;
+  onSelect?:
+    | DayPickerSingleProps['onSelect']
+    | DayPickerMultipleProps['onSelect']
+    | DayPickerRangeProps['onSelect'];
+  required?: boolean;
+  min?: number;
+  max?: number;
+  selected?: Matcher | Matcher[];
+
+  captionLayout: CaptionLayout;
+  classNames: Required<ClassNames>;
+  formatters: Formatters;
+  labels: Labels;
+  locale: Locale;
+  modifiersClassNames: ModifiersClassNames;
+  modifiers: DayModifiers;
+  numberOfMonths: number;
+  styles: Styles;
+  today: Date;
+}
+
+/**
+ * The DayPicker Context shares the props passed to DayPicker within internal
+ * and custom components. It is used to set the default values and perform
+ * one-time calculations required to render the days.
+ *
+ * Developers may access this context from the [[useDayPicker]] hook when
+ * using custom components.
+ */
+export const DayPickerContext = createContext<
+  DayPickerContextValue | undefined
+>(undefined);
+
+/** The props for the [[DayPickerProvider]]. */
+export interface DayPickerProviderProps {
+  /** The initial props from the DayPicker component. */
+  initialProps: DayPickerProps;
+  children?: ReactNode;
+}
+/**
+ * The provider for the [[DayPickerContext]], assigning the defaults from the
+ * initial DayPicker props.
+ */
+export function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {
+  const { initialProps } = props;
+
+  const defaults = getDefaultContextValue();
+
+  const { fromDate, toDate } = parseFromToProps(initialProps);
+
+  let captionLayout = initialProps.captionLayout ?? defaults.captionLayout;
+
+  if (captionLayout !== 'buttons' && (!fromDate || !toDate)) {
+    captionLayout = 'buttons';
+  }
+
+  const value: DayPickerContextValue = {
+    captionLayout,
+    className: initialProps.className,
+    classNames: {
+      ...defaults.classNames,
+      ...initialProps.classNames
+    },
+    components: {
+      ...defaults.components,
+      ...initialProps.components
+    },
+    defaultMonth: initialProps.defaultMonth,
+    dir: initialProps.dir,
+    disabled: initialProps.disabled,
+    disableNavigation: initialProps.disableNavigation,
+    fixedWeeks: initialProps.fixedWeeks,
+    footer: initialProps.footer,
+    formatters: {
+      ...defaults.formatters,
+      ...initialProps.formatters
+    },
+    fromDate,
+    hidden: initialProps.hidden,
+    hideHead: initialProps.hideHead,
+    initialFocus: initialProps.initialFocus,
+    labels: {
+      ...defaults.labels,
+      ...initialProps.labels
+    },
+    locale: initialProps.locale ?? defaults.locale,
+    mode: initialProps.mode || 'default',
+    modifiers: {
+      ...defaults.modifiers,
+      ...initialProps.modifiers
+    },
+    modifiersClassNames: {
+      ...defaults.modifiersClassNames,
+      ...initialProps.modifiersClassNames
+    },
+    modifiersStyles: initialProps.modifiersStyles,
+    month: initialProps.month,
+    numberOfMonths: initialProps.numberOfMonths ?? defaults.numberOfMonths,
+    onDayBlur: initialProps.onDayBlur,
+    onDayClick: initialProps.onDayClick,
+    onDayFocus: initialProps.onDayFocus,
+    onDayKeyDown: initialProps.onDayKeyDown,
+    onDayKeyPress: initialProps.onDayKeyPress,
+    onDayKeyUp: initialProps.onDayKeyUp,
+    onDayMouseEnter: initialProps.onDayMouseEnter,
+    onDayMouseLeave: initialProps.onDayMouseLeave,
+    onDayTouchCancel: initialProps.onDayTouchCancel,
+    onDayTouchEnd: initialProps.onDayTouchEnd,
+    onDayTouchMove: initialProps.onDayTouchMove,
+    onDayTouchStart: initialProps.onDayTouchStart,
+    onMonthChange: initialProps.onMonthChange,
+    onNextClick: initialProps.onNextClick,
+    onPrevClick: initialProps.onPrevClick,
+    onWeekNumberClick: initialProps.onWeekNumberClick,
+    pagedNavigation: initialProps.pagedNavigation,
+    reverseMonths: initialProps.reverseMonths,
+    selected: initialProps.selected,
+    showOutsideDays: initialProps.showOutsideDays,
+    showWeekNumber: initialProps.showWeekNumber,
+    style: initialProps.style,
+    styles: {
+      ...defaults.styles,
+      ...initialProps.styles
+    },
+    toDate,
+    today: initialProps.today ?? defaults.today,
+    weekStartsOn: initialProps.weekStartsOn
+  };
+
+  return (
+    <DayPickerContext.Provider value={value}>
+      {props.children}
+    </DayPickerContext.Provider>
+  );
+}

package/src/contexts/DayPicker/defaultClassNames.ts

@@ -0,0 +1,58 @@
+import { ClassNames } from 'types/Styles';
+
+/**
+ * The name of the default CSS classes.
+ */
+export const defaultClassNames: Required<ClassNames> = {
+  root: 'rdp',
+  multiple_months: 'rdp-multiple_months',
+  with_weeknumber: 'rdp-with_weeknumber',
+  vhidden: 'rdp-vhidden',
+  button_reset: 'rdp-button_reset',
+  button: 'rdp-button',
+
+  caption: 'rdp-caption',
+
+  caption_start: 'rdp-caption_start',
+  caption_end: 'rdp-caption_end',
+  caption_between: 'rdp-caption_between',
+  caption_label: 'rdp-caption_label',
+
+  caption_dropdowns: 'rdp-caption_dropdowns',
+
+  dropdown: 'rdp-dropdown',
+  dropdown_month: 'rdp-dropdown_month',
+  dropdown_year: 'rdp-dropdown_year',
+  dropdown_icon: 'rdp-dropdown_icon',
+
+  months: 'rdp-months',
+  month: 'rdp-month',
+  table: 'rdp-table',
+  tbody: 'rdp-tbody',
+  tfoot: 'rdp-tfoot',
+
+  head: 'rdp-head',
+  head_row: 'rdp-head_row',
+  head_cell: 'rdp-head_cell',
+
+  nav: 'rdp-nav',
+  nav_button: 'rdp-nav_button',
+  nav_button_previous: 'rdp-nav_button_previous',
+  nav_button_next: 'rdp-nav_button_next',
+
+  nav_icon: 'rdp-nav_icon',
+
+  row: 'rdp-row',
+  weeknumber: 'rdp-weeknumber',
+  cell: 'rdp-cell',
+
+  day: 'rdp-day',
+  day_today: 'rdp-day_today',
+  day_outside: 'rdp-day_outside',
+  day_selected: 'rdp-day_selected',
+  day_disabled: 'rdp-day_disabled',
+  day_hidden: 'rdp-day_hidden',
+  day_range_start: 'rdp-day_range_start',
+  day_range_end: 'rdp-day_range_end',
+  day_range_middle: 'rdp-day_range_middle'
+};