react-day-picker 8.1.3 → 8.2.1

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

@@ -5,18 +5,11 @@ 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>
@@ -25,7 +18,6 @@ function setup(dayPickerProps: DayPickerProps = {}) {
     dayPickerProps
   );
   container = view.container.firstChild as HTMLTableCellElement;
-  thElements = Array.from(container.getElementsByTagName('th'));
 }
 
 const dayPickerProps = {
@@ -53,65 +45,23 @@ describe('when rendered', () => {
   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', () => {
+describe('when using a custom HeadRow component', () => {
   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);
+    setup({
+      ...dayPickerProps,
+      components: {
+        HeadRow: () => (
+          <tr>
+            <td>custom head</td>
+          </tr>
+        )
+      }
     });
   });
-  test('should render the head elements with the "col" scope', () => {
-    thElements.forEach((el) => {
-      expect(el).toHaveAttribute('scope', 'col');
-    });
+
+  test('should render the custom component', () => {
+    expect(screen.getByText('custom head')).toBeInTheDocument();
   });
 });

package/src/components/Head/Head.tsx

@@ -1,51 +1,15 @@
 import React from 'react';
 
+import { HeadRow } from 'components/HeadRow';
 import { useDayPicker } from 'contexts/DayPicker';
 
-import { getWeekdays } from './utils';
-
-/**
- * Render the Head component - i.e. the table head with the weekday names.
- */
+/** Render the table head. */
 export function Head(): JSX.Element {
-  const {
-    classNames,
-    styles,
-    showWeekNumber,
-    locale,
-    weekStartsOn,
-    formatters: { formatWeekdayName },
-    labels: { labelWeekday }
-  } = useDayPicker();
-
-  const weekdays = getWeekdays(locale, weekStartsOn);
-
+  const { classNames, styles, components } = useDayPicker();
+  const HeadRowComponent = components?.HeadRow ?? HeadRow;
   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>
+      <HeadRowComponent />
     </thead>
   );
 }

package/src/components/HeadRow/HeadRow.test.tsx

@@ -0,0 +1,109 @@
+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 { HeadRow } from './HeadRow';
+import { getWeekdays } from './utils/getWeekdays';
+
+let container: HTMLElement;
+let view: RenderResult;
+
+let thElements: HTMLTableCellElement[];
+
+function setup(dayPickerProps: DayPickerProps = {}) {
+  view = customRender(
+    <table>
+      <thead>
+        <HeadRow />
+      </thead>
+    </table>,
+    dayPickerProps
+  );
+  container = view.container.firstChild?.firstChild as HTMLTableRowElement;
+  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('tr element should have the `head_row` style', () => {
+    expect(container.firstChild).toHaveStyle(dayPickerProps.styles.head_row);
+  });
+
+  test('tr element should have the `head_row` class', () => {
+    expect(container.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/HeadRow/HeadRow.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { useDayPicker } from 'contexts/DayPicker';
+
+import { getWeekdays } from './utils';
+
+/**
+ * Render the HeadRow component - i.e. the table head row with the weekday names.
+ */
+export function HeadRow(): JSX.Element {
+  const {
+    classNames,
+    styles,
+    showWeekNumber,
+    locale,
+    weekStartsOn,
+    formatters: { formatWeekdayName },
+    labels: { labelWeekday }
+  } = useDayPicker();
+
+  const weekdays = getWeekdays(locale, weekStartsOn);
+
+  return (
+    <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>
+  );
+}

package/src/components/HeadRow/index.ts

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

package/src/components/MonthsDropdown/MonthsDropdown.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { differenceInMonths } from 'date-fns';
+import { addMonths, differenceInMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render';
@@ -30,6 +30,16 @@ const props: MonthsDropdownProps = {
   onChange: jest.fn()
 };
 
+describe('when fromDate and toDate are passed in', () => {
+  beforeEach(() => {
+    setup(props, { fromDate: new Date(), toDate: addMonths(new Date(), 1) });
+  });
+  test('should render the dropdown element', () => {
+    expect(root).toMatchSnapshot();
+    expect(select).toHaveAttribute('name', 'months');
+  });
+});
+
 describe('when "fromDate" is not set', () => {
   beforeEach(() => {
     setup(props, { fromDate: undefined });

package/src/components/MonthsDropdown/MonthsDropdown.tsx

@@ -58,6 +58,7 @@ export function MonthsDropdown(props: MonthsDropdownProps): JSX.Element {
 
   return (
     <DropdownComponent
+      name="months"
       aria-label={labelMonthDropdown()}
       className={classNames.dropdown_month}
       style={styles.dropdown_month}

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when fromDate and toDate are passed in should render the dropdown element 1`] = `
+<div
+  class="rdp-dropdown_month"
+>
+  <span
+    class="rdp-vhidden"
+  >
+    Month: 
+  </span>
+  <select
+    aria-label="Month: "
+    class="rdp-dropdown"
+    name="months"
+  >
+    <option
+      value="0"
+    >
+      January
+    </option>
+    <option
+      value="1"
+    >
+      February
+    </option>
+  </select>
+  <div
+    aria-hidden="true"
+    class="rdp-caption_label"
+  >
+    January
+    <svg
+      class="rdp-dropdown_icon"
+      data-testid="iconDropdown"
+      height="8px"
+      viewBox="0 0 120 120"
+      width="8px"
+    >
+      <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"
+        fill-rule="nonzero"
+      />
+    </svg>
+  </div>
+</div>
+`;

package/src/components/Navigation/Navigation.test.tsx

@@ -56,6 +56,12 @@ describe('when rendered', () => {
     const icons = root.getElementsByTagName('svg');
     expect(icons[1]).toHaveTextContent('IconRight');
   });
+  test('the previous button should be named "previous-month"', () => {
+    expect(getPrevButton()).toHaveAttribute('name', 'previous-month');
+  });
+  test('the next button should be named "next-month"', () => {
+    expect(getNextButton()).toHaveAttribute('name', 'next-month');
+  });
   beforeEach(() => {
     userEvent.click(getPrevButton());
   });

package/src/components/Navigation/Navigation.tsx

@@ -57,6 +57,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
     <div className={classNames.nav} style={styles.nav}>
       {!props.hidePrevious && (
         <Button
+          name="previous-month"
           aria-label={previousLabel}
           className={previousClassName}
           style={styles.nav_button_previous}
@@ -78,6 +79,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
       )}
       {!props.hideNext && (
         <Button
+          name="next-month"
           aria-label={nextLabel}
           className={nextClassName}
           style={styles.nav_button_next}

package/src/components/Table/Table.test.tsx

@@ -30,8 +30,8 @@ describe('when showing the week numbers', () => {
 describe('when using custom components', () => {
   const dayPickerProps: DayPickerProps = {
     components: {
-      Head: () => <div>CustomHead </div>,
-      Row: () => <div>CustomRow </div>,
+      Head: () => <div>CustomHead</div>,
+      Row: () => <div>CustomRow</div>,
       Footer: () => <div>CustomFooter</div>
     }
   };