npm - react-day-picker - Versions diffs - 8.0.1 → 8.0.4 - Mend

react-day-picker 8.0.1 → 8.0.4

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 (218) hide show

package/README.md +3 -2
package/dist/components/Caption/Caption.d.ts +2 -2
package/dist/components/CaptionDropdowns/CaptionDropdowns.d.ts +5 -0
package/dist/components/CaptionDropdowns/index.d.ts +1 -0
package/dist/components/CaptionNavigation/CaptionNavigation.d.ts +5 -0
package/dist/components/CaptionNavigation/index.d.ts +1 -0
package/dist/components/Head/utils/getWeekdays.d.ts +4 -2
package/dist/components/Table/utils/daysToMonthWeeks.d.ts +1 -1
package/dist/components/Table/utils/getMonthWeeks.d.ts +1 -1
package/dist/contexts/DayPicker/formatters/formatCaption.d.ts +1 -1
package/dist/contexts/DayPicker/formatters/formatDay.d.ts +1 -1
package/dist/contexts/DayPicker/formatters/formatMonthCaption.d.ts +1 -1
package/dist/contexts/DayPicker/formatters/formatWeekdayName.d.ts +1 -1
package/dist/index.d.ts +2 -0
package/dist/index.esm.js +145 -96
package/dist/index.esm.js.map +1 -1
package/dist/index.js +272 -196
package/dist/index.js.map +1 -1
package/dist/types/DayPickerBase.d.ts +5 -1
package/dist/types/Labels.d.ts +1 -1
package/package.json +15 -14
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 +310 -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 +108 -0
package/tsconfig.json +24 -0
package/CHANGELOG.md +0 -26
package/dist/react-day-picker.min.js +0 -1

package/src/components/Table/__snapshots__/Table.test.tsx.snap ADDED Viewed

@@ -0,0 +1,1453 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`should render correctly 1`] = `
+<table
+  class="rdp-table"
+  role="grid"
+>
+  <thead
+    class="rdp-head"
+  >
+    <tr
+      class="rdp-head_row"
+    >
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Su
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Sunday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Mo
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Monday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Tu
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Tuesday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          We
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Wednesday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Th
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Thursday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Fr
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Friday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Sa
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Saturday
+        </span>
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="rdp-tbody"
+  >
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            1
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            1st February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            2
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            2nd February (Sunday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            3
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            3rd February (Monday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            4
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            4th February (Tuesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            5
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            5th February (Wednesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            6
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            6th February (Thursday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            7
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            7th February (Friday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            8
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            8th February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            9
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            9th February (Sunday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            10
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            10th February (Monday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            11
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            11th February (Tuesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            12
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            12th February (Wednesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            13
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            13th February (Thursday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            14
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            14th February (Friday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            15
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            15th February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            16
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            16th February (Sunday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            17
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            17th February (Monday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            18
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            18th February (Tuesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            19
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            19th February (Wednesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            20
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            20th February (Thursday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            21
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            21st February (Friday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            22
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            22nd February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            23
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            23rd February (Sunday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            24
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            24th February (Monday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            25
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            25th February (Tuesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            26
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            26th February (Wednesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            27
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            27th February (Thursday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            28
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            28th February (Friday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            29
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            29th February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+exports[`when showing the week numbers should render correctly 1`] = `
+<table
+  class="rdp-table"
+  role="grid"
+>
+  <thead
+    class="rdp-head"
+  >
+    <tr
+      class="rdp-head_row"
+    >
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      />
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Su
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Sunday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Mo
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Monday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Tu
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Tuesday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          We
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Wednesday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Th
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Thursday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Fr
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Friday
+        </span>
+      </th>
+      <th
+        class="rdp-head_cell"
+        scope="col"
+      >
+        <span
+          aria-hidden="true"
+        >
+          Sa
+        </span>
+        <span
+          class="rdp-vhidden"
+        >
+          Saturday
+        </span>
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    class="rdp-tbody"
+  >
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      >
+        <span
+          class="rdp-weeknumber"
+        >
+          5
+        </span>
+      </td>
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      />
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            1
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            1st February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      >
+        <span
+          class="rdp-weeknumber"
+        >
+          6
+        </span>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            2
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            2nd February (Sunday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            3
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            3rd February (Monday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            4
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            4th February (Tuesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            5
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            5th February (Wednesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            6
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            6th February (Thursday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            7
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            7th February (Friday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            8
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            8th February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      >
+        <span
+          class="rdp-weeknumber"
+        >
+          7
+        </span>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            9
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            9th February (Sunday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            10
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            10th February (Monday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            11
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            11th February (Tuesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            12
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            12th February (Wednesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            13
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            13th February (Thursday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            14
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            14th February (Friday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            15
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            15th February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      >
+        <span
+          class="rdp-weeknumber"
+        >
+          8
+        </span>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            16
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            16th February (Sunday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            17
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            17th February (Monday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            18
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            18th February (Tuesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            19
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            19th February (Wednesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            20
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            20th February (Thursday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            21
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            21st February (Friday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            22
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            22nd February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+    <tr
+      class="rdp-row"
+    >
+      <td
+        class="rdp-cell"
+      >
+        <span
+          class="rdp-weeknumber"
+        >
+          9
+        </span>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            23
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            23rd February (Sunday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            24
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            24th February (Monday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            25
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            25th February (Tuesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            26
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            26th February (Wednesday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            27
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            27th February (Thursday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            28
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            28th February (Friday)
+          </span>
+        </div>
+      </td>
+      <td
+        class="rdp-cell"
+      >
+        <div
+          class="rdp-day"
+        >
+          <span
+            aria-hidden="true"
+          >
+            29
+          </span>
+          <span
+            class="rdp-vhidden"
+          >
+            29th February (Saturday)
+          </span>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+exports[`when using custom components should render correctly 1`] = `
+<table
+  class="rdp-table"
+  role="grid"
+>
+  <div>
+    CustomHead
+  </div>
+  <tbody
+    class="rdp-tbody"
+  >
+    <div>
+      CustomRow
+    </div>
+    <div>
+      CustomRow
+    </div>
+    <div>
+      CustomRow
+    </div>
+    <div>
+      CustomRow
+    </div>
+    <div>
+      CustomRow
+    </div>
+  </tbody>
+  <div>
+    CustomFooter
+  </div>
+</table>
+`;