npm - react-day-picker - Versions diffs - 8.0.3 → 8.0.6 - Mend

react-day-picker 8.0.3 → 8.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (207) hide show

package/README.md +1 -1
package/dist/hooks/useDayRender/useDayRender.d.ts +1 -1
package/dist/hooks/useInput/useInput.d.ts +2 -2
package/dist/index.esm.js +3 -3
package/dist/index.esm.js.map +1 -1
package/dist/index.js +3 -3
package/dist/index.js.map +1 -1
package/dist/react-day-picker.min.js +1 -0
package/dist/style.css +11 -10
package/dist/style.module.css +11 -10
package/dist/types/Styles.d.ts +8 -2
package/package.json +15 -13
package/src/DayPicker.tsx +113 -0
package/src/components/Button/Button.test.tsx +47 -0
package/src/components/Button/Button.tsx +36 -0
package/src/components/Button/index.ts +1 -0
package/src/components/Caption/Caption.test.tsx +86 -0
package/src/components/Caption/Caption.tsx +54 -0
package/src/components/Caption/index.ts +1 -0
package/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx +123 -0
package/src/components/CaptionDropdowns/CaptionDropdowns.tsx +43 -0
package/src/components/CaptionDropdowns/index.ts +1 -0
package/src/components/CaptionLabel/CaptionLabel.test.tsx +29 -0
package/src/components/CaptionLabel/CaptionLabel.tsx +32 -0
package/src/components/CaptionLabel/index.ts +1 -0
package/src/components/CaptionNavigation/CaptionNavigation.test.tsx +172 -0
package/src/components/CaptionNavigation/CaptionNavigation.tsx +63 -0
package/src/components/CaptionNavigation/index.ts +1 -0
package/src/components/Day/Day.test.tsx +84 -0
package/src/components/Day/Day.tsx +30 -0
package/src/components/Day/index.ts +1 -0
package/src/components/DayContent/DayContent.test.tsx +51 -0
package/src/components/DayContent/DayContent.tsx +36 -0
package/src/components/DayContent/index.ts +1 -0
package/src/components/Dropdown/Dropdown.test.tsx +73 -0
package/src/components/Dropdown/Dropdown.tsx +56 -0
package/src/components/Dropdown/index.ts +1 -0
package/src/components/Footer/Footer.test.tsx +29 -0
package/src/components/Footer/Footer.tsx +20 -0
package/src/components/Footer/index.ts +1 -0
package/src/components/Head/Head.test.tsx +117 -0
package/src/components/Head/Head.tsx +51 -0
package/src/components/Head/index.ts +1 -0
package/src/components/Head/utils/getWeekdays.test.ts +36 -0
package/src/components/Head/utils/getWeekdays.ts +22 -0
package/src/components/Head/utils/index.ts +1 -0
package/src/components/IconDropdown/IconDropdown.test.tsx +20 -0
package/src/components/IconDropdown/IconDropdown.tsx +24 -0
package/src/components/IconDropdown/index.ts +1 -0
package/src/components/IconLeft/IconLeft.test.tsx +20 -0
package/src/components/IconLeft/IconLeft.tsx +18 -0
package/src/components/IconLeft/index.ts +1 -0
package/src/components/IconRight/IconRight.test.tsx +20 -0
package/src/components/IconRight/IconRight.tsx +17 -0
package/src/components/IconRight/index.ts +1 -0
package/src/components/Month/Month.test.tsx +216 -0
package/src/components/Month/Month.tsx +53 -0
package/src/components/Month/index.ts +1 -0
package/src/components/MonthsDropdown/MonthsDropdown.test.tsx +99 -0
package/src/components/MonthsDropdown/MonthsDropdown.tsx +75 -0
package/src/components/MonthsDropdown/index.ts +1 -0
package/src/components/Navigation/Navigation.test.tsx +129 -0
package/src/components/Navigation/Navigation.tsx +102 -0
package/src/components/Navigation/index.ts +1 -0
package/src/components/Root/Root.test.tsx +123 -0
package/src/components/Root/Root.tsx +58 -0
package/src/components/Root/index.ts +1 -0
package/src/components/Row/Row.test.tsx +69 -0
package/src/components/Row/Row.tsx +51 -0
package/src/components/Row/index.ts +1 -0
package/src/components/Table/Table.test.tsx +42 -0
package/src/components/Table/Table.tsx +60 -0
package/src/components/Table/__snapshots__/Table.test.tsx.snap +1453 -0
package/src/components/Table/index.ts +1 -0
package/src/components/Table/utils/daysToMonthWeeks.ts +47 -0
package/src/components/Table/utils/getMonthWeeks.test.ts +68 -0
package/src/components/Table/utils/getMonthWeeks.ts +55 -0
package/src/components/WeekNumber/WeekNumber.test.tsx +46 -0
package/src/components/WeekNumber/WeekNumber.tsx +58 -0
package/src/components/WeekNumber/__snapshots__/WeekNumber.test.tsx.snap +11 -0
package/src/components/WeekNumber/index.ts +1 -0
package/src/components/YearsDropdown/YearsDropdown.test.tsx +98 -0
package/src/components/YearsDropdown/YearsDropdown.tsx +76 -0
package/src/components/YearsDropdown/index.ts +1 -0
package/src/contexts/DayPicker/DayPickerContext.tsx +156 -0
package/src/contexts/DayPicker/defaultClassNames.ts +58 -0
package/src/contexts/DayPicker/defaultContextValue.ts +37 -0
package/src/contexts/DayPicker/formatters/formatCaption.test.ts +15 -0
package/src/contexts/DayPicker/formatters/formatCaption.ts +12 -0
package/src/contexts/DayPicker/formatters/formatDay.test.ts +7 -0
package/src/contexts/DayPicker/formatters/formatDay.ts +9 -0
package/src/contexts/DayPicker/formatters/formatMonthCaption.test.ts +15 -0
package/src/contexts/DayPicker/formatters/formatMonthCaption.ts +12 -0
package/src/contexts/DayPicker/formatters/formatWeekNumber.test.ts +5 -0
package/src/contexts/DayPicker/formatters/formatWeekNumber.ts +6 -0
package/src/contexts/DayPicker/formatters/formatWeekdayName.test.ts +15 -0
package/src/contexts/DayPicker/formatters/formatWeekdayName.ts +12 -0
package/src/contexts/DayPicker/formatters/formatYearCaption.test.ts +7 -0
package/src/contexts/DayPicker/formatters/formatYearCaption.ts +11 -0
package/src/contexts/DayPicker/formatters/index.ts +6 -0
package/src/contexts/DayPicker/index.ts +2 -0
package/src/contexts/DayPicker/labels/index.ts +7 -0
package/src/contexts/DayPicker/labels/labelDay.test.ts +7 -0
package/src/contexts/DayPicker/labels/labelDay.ts +10 -0
package/src/contexts/DayPicker/labels/labelMonthDropdown.test.ts +5 -0
package/src/contexts/DayPicker/labels/labelMonthDropdown.ts +6 -0
package/src/contexts/DayPicker/labels/labelNext.test.ts +5 -0
package/src/contexts/DayPicker/labels/labelNext.ts +8 -0
package/src/contexts/DayPicker/labels/labelPrevious.test.ts +5 -0
package/src/contexts/DayPicker/labels/labelPrevious.ts +8 -0
package/src/contexts/DayPicker/labels/labelWeekNumber.test.ts +5 -0
package/src/contexts/DayPicker/labels/labelWeekNumber.ts +8 -0
package/src/contexts/DayPicker/labels/labelWeekday.test.ts +15 -0
package/src/contexts/DayPicker/labels/labelWeekday.ts +10 -0
package/src/contexts/DayPicker/labels/labelYearDropdown.test.ts +5 -0
package/src/contexts/DayPicker/labels/labelYearDropdown.ts +6 -0
package/src/contexts/DayPicker/useDayPicker.test.ts +297 -0
package/src/contexts/DayPicker/useDayPicker.ts +17 -0
package/src/contexts/DayPicker/utils/index.ts +1 -0
package/src/contexts/DayPicker/utils/parseFromToProps.test.ts +47 -0
package/src/contexts/DayPicker/utils/parseFromToProps.ts +32 -0
package/src/contexts/Focus/FocusContext.tsx +174 -0
package/src/contexts/Focus/index.ts +2 -0
package/src/contexts/Focus/useFocusContext.test.ts +183 -0
package/src/contexts/Focus/useFocusContext.ts +12 -0
package/src/contexts/Focus/utils/getInitialFocusTarget.test.tsx +12 -0
package/src/contexts/Focus/utils/getInitialFocusTarget.tsx +44 -0
package/src/contexts/Modifiers/ModifiersContext.tsx +44 -0
package/src/contexts/Modifiers/index.ts +2 -0
package/src/contexts/Modifiers/useModifiers.test.ts +46 -0
package/src/contexts/Modifiers/useModifiers.ts +17 -0
package/src/contexts/Modifiers/utils/getActiveModifiers.test.ts +53 -0
package/src/contexts/Modifiers/utils/getActiveModifiers.ts +33 -0
package/src/contexts/Modifiers/utils/getCustomModifiers.test.ts +14 -0
package/src/contexts/Modifiers/utils/getCustomModifiers.ts +14 -0
package/src/contexts/Modifiers/utils/getInternalModifiers.test.ts +146 -0
package/src/contexts/Modifiers/utils/getInternalModifiers.ts +58 -0
package/src/contexts/Modifiers/utils/isDateInRange.test.ts +28 -0
package/src/contexts/Modifiers/utils/isDateInRange.ts +27 -0
package/src/contexts/Modifiers/utils/isMatch.test.ts +92 -0
package/src/contexts/Modifiers/utils/isMatch.ts +76 -0
package/src/contexts/Modifiers/utils/matcherToArray.test.ts +22 -0
package/src/contexts/Modifiers/utils/matcherToArray.ts +14 -0
package/src/contexts/Navigation/NavigationContext.tsx +84 -0
package/src/contexts/Navigation/index.ts +2 -0
package/src/contexts/Navigation/useNavigation.test.ts +126 -0
package/src/contexts/Navigation/useNavigation.ts +12 -0
package/src/contexts/Navigation/useNavigationState.test.ts +36 -0
package/src/contexts/Navigation/useNavigationState.ts +25 -0
package/src/contexts/Navigation/utils/getDisplayMonths.ts +31 -0
package/src/contexts/Navigation/utils/getInitialMonth.test.ts +56 -0
package/src/contexts/Navigation/utils/getInitialMonth.ts +24 -0
package/src/contexts/Navigation/utils/getNextMonth.test.ts +75 -0
package/src/contexts/Navigation/utils/getNextMonth.ts +45 -0
package/src/contexts/Navigation/utils/getPreviousMonth.test.ts +55 -0
package/src/contexts/Navigation/utils/getPreviousMonth.ts +44 -0
package/src/contexts/RootProvider.tsx +37 -0
package/src/contexts/SelectMultiple/SelectMultipleContext.tsx +135 -0
package/src/contexts/SelectMultiple/index.ts +2 -0
package/src/contexts/SelectMultiple/useSelectMultiple.test.ts +191 -0
package/src/contexts/SelectMultiple/useSelectMultiple.ts +17 -0
package/src/contexts/SelectRange/SelectRangeContext.tsx +158 -0
package/src/contexts/SelectRange/index.ts +2 -0
package/src/contexts/SelectRange/useSelectRange.test.ts +282 -0
package/src/contexts/SelectRange/useSelectRange.ts +15 -0
package/src/contexts/SelectRange/utils/addToRange.test.ts +119 -0
package/src/contexts/SelectRange/utils/addToRange.ts +43 -0
package/src/contexts/SelectSingle/SelectSingleContext.tsx +80 -0
package/src/contexts/SelectSingle/index.ts +2 -0
package/src/contexts/SelectSingle/useSelectSingle.test.ts +81 -0
package/src/contexts/SelectSingle/useSelectSingle.ts +17 -0
package/src/hooks/useActiveModifiers/index.ts +1 -0
package/src/hooks/useActiveModifiers/useActiveModifiers.test.tsx +36 -0
package/src/hooks/useActiveModifiers/useActiveModifiers.tsx +18 -0
package/src/hooks/useControlledValue/index.ts +1 -0
package/src/hooks/useControlledValue/useControlledValue.test.ts +68 -0
package/src/hooks/useControlledValue/useControlledValue.ts +24 -0
package/src/hooks/useDayEventHandlers/index.ts +1 -0
package/src/hooks/useDayEventHandlers/useDayEventHandlers.test.tsx +213 -0
package/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx +195 -0
package/src/hooks/useDayRender/index.ts +1 -0
package/src/hooks/useDayRender/useDayRender.test.tsx +304 -0
package/src/hooks/useDayRender/useDayRender.tsx +123 -0
package/src/hooks/useDayRender/utils/getDayClassNames.test.ts +63 -0
package/src/hooks/useDayRender/utils/getDayClassNames.ts +32 -0
package/src/hooks/useDayRender/utils/getDayStyle.ts +19 -0
package/src/hooks/useInput/index.ts +1 -0
package/src/hooks/useInput/useInput.ts +175 -0
package/src/hooks/useInput/utils/isValidDate.tsx +4 -0
package/src/hooks/useSelectedDays/index.ts +1 -0
package/src/hooks/useSelectedDays/useSelectedDays.test.ts +72 -0
package/src/hooks/useSelectedDays/useSelectedDays.ts +32 -0
package/src/index.ts +43 -0
package/src/style.css +311 -0
package/src/style.css.d.ts +38 -0
package/src/types/DayPickerBase.ts +267 -0
package/src/types/DayPickerDefault.ts +15 -0
package/src/types/DayPickerMultiple.ts +26 -0
package/src/types/DayPickerRange.ts +27 -0
package/src/types/DayPickerSingle.ts +24 -0
package/src/types/EventHandlers.ts +87 -0
package/src/types/Formatters.ts +29 -0
package/src/types/Labels.ts +36 -0
package/src/types/Matchers.ts +106 -0
package/src/types/Modifiers.ts +62 -0
package/src/types/Styles.ts +125 -0
package/tsconfig.json +24 -0

package/src/components/Dropdown/index.ts ADDED Viewed

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

package/src/components/Footer/Footer.test.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react';
+import { getTableFooter, queryTableFooter } from 'test/po';
+import { customRender } from 'test/render';
+import { Footer } from './Footer';
+customRender(
+  <table role="grid">
+    <Footer />
+  </table>
+);
+test('should not render anything as default', () => {
+  expect(queryTableFooter()).toBeNull();
+});
+describe('when using the `footer` prop', () => {
+  beforeEach(() => {
+    customRender(
+      <table role="grid">
+        <Footer />
+      </table>,
+      { footer: 'footer_foo' }
+    );
+  });
+  test('should render the table footer', () => {
+    expect(getTableFooter()).toHaveTextContent('footer_foo');
+  });
+});

package/src/components/Footer/Footer.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useDayPicker } from 'contexts/DayPicker';
+/** Render the Footer component (empty as default).*/
+export function Footer(): JSX.Element {
+  const {
+    footer,
+    styles,
+    classNames: { tfoot }
+  } = useDayPicker();
+  if (!footer) return <></>;
+  return (
+    <tfoot className={tfoot} style={styles.tfoot}>
+      <tr>
+        <td colSpan={8}>{footer}</td>
+      </tr>
+    </tfoot>
+  );
+}

package/src/components/Footer/index.ts ADDED Viewed

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

package/src/components/Head/Head.test.tsx ADDED Viewed

@@ -0,0 +1,117 @@
+import React from 'react';
+import { RenderResult, screen } from '@testing-library/react';
+import { DayPickerProps } from 'DayPicker';
+import { customRender } from 'test/render';
+import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
+import { formatWeekdayName } from 'contexts/DayPicker/formatters';
+import { labelWeekday } from 'contexts/DayPicker/labels';
+import { Head } from './Head';
+import { getWeekdays } from './utils/getWeekdays';
+let container: HTMLElement;
+let view: RenderResult;
+let thElements: HTMLTableCellElement[];
+function setup(dayPickerProps: DayPickerProps = {}) {
+  view = customRender(
+    <table>
+      <Head />
+    </table>,
+    dayPickerProps
+  );
+  container = view.container.firstChild as HTMLTableCellElement;
+  thElements = Array.from(container.getElementsByTagName('th'));
+}
+const dayPickerProps = {
+  styles: {
+    head: { color: 'red' },
+    head_row: { color: 'blue' },
+    head_cell: { color: 'green' }
+  },
+  classNames: {
+    head: 'foo',
+    head_row: 'foo_row',
+    head_cell: 'foo_head-cell'
+  }
+};
+describe('when rendered', () => {
+  beforeEach(() => {
+    setup(dayPickerProps);
+  });
+  test('thead should have the `head` style', () => {
+    expect(container.firstChild).toHaveStyle(dayPickerProps.styles.head);
+  });
+  test('thead should have the `head` class', () => {
+    expect(container.firstChild).toHaveClass(dayPickerProps.classNames.head);
+  });
+  test('tr element should have the `head_row` style', () => {
+    expect(container.firstChild?.firstChild).toHaveStyle(
+      dayPickerProps.styles.head_row
+    );
+  });
+  test('tr element should have the `head_row` class', () => {
+    expect(container.firstChild?.firstChild).toHaveClass(
+      dayPickerProps.classNames.head_row
+    );
+  });
+  test('should render 7 head elements', () => {
+    expect(thElements).toHaveLength(7);
+  });
+  test('should render the head elements with the "head_cell" class name', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveClass(dayPickerProps.classNames.head_cell);
+    });
+  });
+  test('the formatted weekday name should be ARIA-hidden', () => {
+    const weekdays = getWeekdays();
+    weekdays.forEach((weekday) => {
+      const text = formatWeekdayName(weekday);
+      expect(screen.getByText(text)).toHaveAttribute('aria-hidden', 'true');
+    });
+  });
+  test('the label should not be visible', () => {
+    const weekdays = getWeekdays();
+    weekdays.forEach((weekday) => {
+      const text = labelWeekday(weekday);
+      expect(screen.getByText(text)).toHaveClass(defaultClassNames.vhidden);
+    });
+  });
+});
+describe('when showing the week numbers', () => {
+  beforeEach(() => {
+    setup({ ...dayPickerProps, showWeekNumber: true });
+  });
+  test('should render 8 head elements', () => {
+    expect(thElements).toHaveLength(8);
+  });
+  test('the first head element should be empty', () => {
+    expect(thElements[0]).toHaveTextContent('');
+  });
+  test('should render the head elements with the "head_cell" class name', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveClass(dayPickerProps.classNames.head_cell);
+    });
+  });
+  test('should render the head elements with the "head_cell" style', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveStyle(dayPickerProps.styles.head_cell);
+    });
+  });
+  test('should render the head elements with the "col" scope', () => {
+    thElements.forEach((el) => {
+      expect(el).toHaveAttribute('scope', 'col');
+    });
+  });
+});

package/src/components/Head/Head.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useDayPicker } from 'contexts/DayPicker';
+import { getWeekdays } from './utils';
+/**
+ * Render the Head component - i.e. the table head with the weekday names.
+ */
+export function Head(): JSX.Element {
+  const {
+    classNames,
+    styles,
+    showWeekNumber,
+    locale,
+    weekStartsOn,
+    formatters: { formatWeekdayName },
+    labels: { labelWeekday }
+  } = useDayPicker();
+  const weekdays = getWeekdays(locale, weekStartsOn);
+  return (
+    <thead style={styles.head} className={classNames.head}>
+      <tr style={styles.head_row} className={classNames.head_row}>
+        {showWeekNumber && (
+          <th
+            scope="col"
+            style={styles.head_cell}
+            className={classNames.head_cell}
+          ></th>
+        )}
+        {weekdays.map((weekday, i) => (
+          <th
+            key={i}
+            scope="col"
+            className={classNames.head_cell}
+            style={styles.head_cell}
+          >
+            <span aria-hidden={true}>
+              {formatWeekdayName(weekday, { locale })}
+            </span>
+            <span className={classNames.vhidden}>
+              {labelWeekday(weekday, { locale })}
+            </span>
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+}

package/src/components/Head/index.ts ADDED Viewed

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

package/src/components/Head/utils/getWeekdays.test.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import es from 'date-fns/locale/es';
+import { freezeBeforeAll } from 'test/utils';
+import { getWeekdays } from './getWeekdays';
+const today = new Date(2022, 1, 12);
+const prevSunday = new Date(2022, 1, 6);
+freezeBeforeAll(today);
+let result: Date[];
+describe('when rendered without a locale', () => {
+  beforeEach(() => {
+    result = getWeekdays();
+  });
+  test('should return 7 days', () => {
+    expect(result).toHaveLength(7);
+  });
+  test('should return Sunday as first day', () => {
+    expect(result[0]).toEqual(prevSunday);
+  });
+});
+describe.each<0 | 1 | 2 | 3 | 4 | 5 | 6>([0, 1, 2, 3, 4, 5, 6])(
+  'when week start on %s',
+  (weekStartsOn) => {
+    beforeEach(() => {
+      result = getWeekdays(es, weekStartsOn);
+    });
+    test('the first date should be weekStartsOn', () => {
+      expect(result[0].getDay()).toBe(weekStartsOn);
+    });
+  }
+);

package/src/components/Head/utils/getWeekdays.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import addDays from 'date-fns/addDays';
+import startOfWeek from 'date-fns/startOfWeek';
+import type { Locale } from 'date-fns';
+/**
+ * Generate a series of 7 days, starting from the week, to use for formatting
+ * the weekday names (Monday, Tuesday, etc.).
+ */
+export function getWeekdays(
+  locale?: Locale,
+  /** The index of the first day of the week (0 - Sunday) */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+): Date[] {
+  const start = startOfWeek(new Date(), { locale, weekStartsOn });
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const day = addDays(start, i);
+    days.push(day);
+  }
+  return days;
+}

package/src/components/Head/utils/index.ts ADDED Viewed

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

package/src/components/IconDropdown/IconDropdown.test.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react';
+import { customRender } from 'test/render';
+import { IconDropdown } from './IconDropdown';
+let root: HTMLElement;
+beforeEach(() => {
+  const view = customRender(
+    <IconDropdown className="foo" style={{ color: 'red' }} />
+  );
+  root = view.container.firstChild as HTMLElement;
+});
+test('should add the class name', () => {
+  expect(root).toHaveClass('foo');
+});
+test('should apply the style', () => {
+  expect(root).toHaveStyle({ color: 'red' });
+});

package/src/components/IconDropdown/IconDropdown.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyledComponent } from 'types/Styles';
+/**
+ * Render the icon in the styled drop-down.
+ */
+export function IconDropdown(props: StyledComponent): JSX.Element {
+  return (
+    <svg
+      width="8px"
+      height="8px"
+      viewBox="0 0 120 120"
+      data-testid="iconDropdown"
+      {...props}
+    >
+      <path
+        d="M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z"
+        fill="currentColor"
+        fillRule="nonzero"
+      ></path>
+    </svg>
+  );
+}

package/src/components/IconDropdown/index.ts ADDED Viewed

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

package/src/components/IconLeft/IconLeft.test.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react';
+import { customRender } from 'test/render';
+import { IconLeft } from './IconLeft';
+let root: HTMLElement;
+beforeEach(() => {
+  const view = customRender(
+    <IconLeft className="foo" style={{ color: 'red' }} />
+  );
+  root = view.container.firstChild as HTMLElement;
+});
+test('should add the class name', () => {
+  expect(root).toHaveClass('foo');
+});
+test('should apply the style', () => {
+  expect(root).toHaveStyle({ color: 'red' });
+});

package/src/components/IconLeft/IconLeft.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyledComponent } from 'types/Styles';
+/**
+ * Render the "previous month" button in the navigation.
+ */
+export function IconLeft(props: StyledComponent): JSX.Element {
+  return (
+    <svg width="16px" height="16px" viewBox="0 0 120 120" {...props}>
+      <path
+        d="M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z"
+        fill="currentColor"
+        fillRule="nonzero"
+      ></path>
+    </svg>
+  );
+}

package/src/components/IconLeft/index.ts ADDED Viewed

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

package/src/components/IconRight/IconRight.test.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react';
+import { customRender } from 'test/render';
+import { IconRight } from './IconRight';
+let root: HTMLElement;
+beforeEach(() => {
+  const view = customRender(
+    <IconRight className="foo" style={{ color: 'red' }} />
+  );
+  root = view.container.firstChild as HTMLElement;
+});
+test('should add the class name', () => {
+  expect(root).toHaveClass('foo');
+});
+test('should apply the style', () => {
+  expect(root).toHaveStyle({ color: 'red' });
+});

package/src/components/IconRight/IconRight.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StyledComponent } from 'types/Styles';
+/**
+ * Render the "next month" button in the navigation.
+ */
+export function IconRight(props: StyledComponent): JSX.Element {
+  return (
+    <svg width="16px" height="16px" viewBox="0 0 120 120" {...props}>
+      <path
+        d="M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}

package/src/components/IconRight/index.ts ADDED Viewed

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

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

@@ -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])
+      );
+    }
+  );
+});