react-day-picker 8.6.0 → 8.7.0

package/dist/style.module.css

@@ -1,5 +1,6 @@
 .root {
   --rdp-cell-size: 40px;
+  --rdp-caption-font-size: 18px;
   --rdp-accent-color: #0000ff;
   --rdp-background-color: #e7edff;
   --rdp-accent-color-dark: #3003e1;
@@ -130,7 +131,7 @@
   border: 0;
   border: 2px solid transparent;
   font-family: inherit;
-  font-size: 140%;
+  font-size: var(--rdp-caption-font-size);
   font-weight: bold;
 }
 
@@ -224,6 +225,7 @@
   height: 100%;
   height: var(--rdp-cell-size);
   padding: 0;
+  text-transform: uppercase;
 }
 
 .tbody {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.6.0",
+  "version": "8.7.0",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "http://react-day-picker.js.org",
@@ -39,24 +39,24 @@
     "@rollup/plugin-typescript": "^11.0.0",
     "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.4.0",
-    "@types/node": "^18.11.19",
-    "@types/react": "^18.0.27",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.50.0",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.28",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "date-fns": "^2.29.3",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-config-rdp": "workspace:^",
     "eslint-import-resolver-typescript": "^3.5.3",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.4.1",
-    "jest-environment-jsdom": "^29.4.1",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.21",
     "postcss-d-ts": "^1.2.0",
     "postcss-typescript-d-ts": "^1.0.0",
@@ -64,10 +64,10 @@
     "react": "^18.2.0",
     "react-classnaming": "^0.16.4",
     "react-dom": "^18.2.0",
-    "rimraf": "^4.1.2",
-    "rollup": "^3.15.0",
+    "rimraf": "^4.4.1",
+    "rollup": "^3.19.1",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-dts": "^5.1.1",
+    "rollup-plugin-dts": "^5.2.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "timekeeper": "^2.2.0",

package/src/.eslintignore

@@ -0,0 +1 @@
+style.css.d.ts

package/src/components/CaptionNavigation/CaptionNavigation.tsx

@@ -11,7 +11,7 @@ import { useNavigation } from 'contexts/Navigation';
  * Render a caption with a button-based navigation.
  */
 export function CaptionNavigation(props: CaptionProps): JSX.Element {
-  const { numberOfMonths, dir } = useDayPicker();
+  const { numberOfMonths } = useDayPicker();
   const { previousMonth, nextMonth, goToMonth, displayMonths } =
     useNavigation();
 
@@ -19,11 +19,8 @@ export function CaptionNavigation(props: CaptionProps): JSX.Element {
     isSameMonth(props.displayMonth, month)
   );
 
-  let isFirst = displayIndex === 0;
-  let isLast = displayIndex === displayMonths.length - 1;
-  if (dir === 'rtl') {
-    [isLast, isFirst] = [isFirst, isLast];
-  }
+  const isFirst = displayIndex === 0;
+  const isLast = displayIndex === displayMonths.length - 1;
 
   const hideNext = numberOfMonths > 1 && (isFirst || !isLast);
   const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);

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

@@ -67,10 +67,7 @@ describe('when showing the week numbers', () => {
     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('');
+    expect(thElements).toHaveLength(7);
   });
   test('should render the head elements with the "head_cell" class name', () => {
     thElements.forEach((el) => {

package/src/components/HeadRow/HeadRow.tsx

@@ -24,11 +24,7 @@ export function HeadRow(): JSX.Element {
   return (
     <tr style={styles.head_row} className={classNames.head_row}>
       {showWeekNumber && (
-        <th
-          scope="col"
-          style={styles.head_cell}
-          className={classNames.head_cell}
-        ></th>
+        <td style={styles.head_cell} className={classNames.head_cell}></td>
       )}
       {weekdays.map((weekday, i) => (
         <th

package/src/components/Root/Root.test.tsx

@@ -56,6 +56,30 @@ describe('when using the "classNames" prop', () => {
   });
 });
 
+describe('when using the "id" prop', () => {
+  const testId = 'foo';
+  beforeEach(() => setup({ id: testId }));
+  test('should display the specified number of month grids', () => {
+    expect(container.firstChild).toHaveAttribute('id', testId);
+  });
+});
+
+describe('when using a "data-" attribute', () => {
+  const testId = 'foo';
+  beforeEach(() => setup({ 'data-test': testId }));
+  test('should have the "data-" attribute', () => {
+    expect(container.firstChild).toHaveAttribute('data-test', testId);
+  });
+});
+
+describe('when using a "aria-" attribute', () => {
+  const testValue = 'foo';
+  beforeEach(() => setup({ 'aria-label': testValue }));
+  test('should have the "aria-" attribute', () => {
+    expect(container.firstChild).toHaveAttribute('aria-label', testValue);
+  });
+});
+
 describe('when using the "className" prop', () => {
   const props: DayPickerProps = { className: 'foo' };
   beforeEach(() => {

package/src/components/Root/Root.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { AriaAttributes, useEffect, useState } from 'react';
 
 import { Month } from 'components/Month';
 import { useDayPicker } from 'contexts/DayPicker';
 import { useFocusContext } from 'contexts/Focus';
 import { useNavigation } from 'contexts/Navigation';
+import { DataAttributes } from 'types/DayPickerBase';
 
 /** Render the container with the months according to the number of months to display. */
 export function Root(): JSX.Element {
@@ -43,8 +44,29 @@ export function Root(): JSX.Element {
     ...dayPicker.style
   };
 
+  const dataAttributes = (Object.keys(dayPicker) as Array<keyof DataAttributes>)
+    .filter((key) => key.startsWith('data-'))
+    .reduce(
+      (attrs, key) => ({ ...attrs, [key]: dayPicker[key] }),
+      {} as DataAttributes
+    );
+
+  const ariaAttributes = (Object.keys(dayPicker) as Array<keyof AriaAttributes>)
+    .filter((key) => key.startsWith('aria-'))
+    .reduce(
+      (attrs, key) => ({ ...attrs, [key]: dayPicker[key] }),
+      {} as AriaAttributes
+    );
+
   return (
-    <div className={classNames.join(' ')} style={style} dir={dayPicker.dir}>
+    <div
+      className={classNames.join(' ')}
+      style={style}
+      dir={dayPicker.dir}
+      id={dayPicker.id}
+      {...dataAttributes}
+      {...ariaAttributes}
+    >
       <div
         className={dayPicker.classNames.months}
         style={dayPicker.styles.months}

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

@@ -16,49 +16,49 @@ exports[`should render correctly 1`] = `
         class="rdp-head_cell"
         scope="col"
       >
-        SU
+        Su
       </th>
       <th
         aria-label="Monday"
         class="rdp-head_cell"
         scope="col"
       >
-        MO
+        Mo
       </th>
       <th
         aria-label="Tuesday"
         class="rdp-head_cell"
         scope="col"
       >
-        TU
+        Tu
       </th>
       <th
         aria-label="Wednesday"
         class="rdp-head_cell"
         scope="col"
       >
-        WE
+        We
       </th>
       <th
         aria-label="Thursday"
         class="rdp-head_cell"
         scope="col"
       >
-        TH
+        Th
       </th>
       <th
         aria-label="Friday"
         class="rdp-head_cell"
         scope="col"
       >
-        FR
+        Fr
       </th>
       <th
         aria-label="Saturday"
         class="rdp-head_cell"
         scope="col"
       >
-        SA
+        Sa
       </th>
     </tr>
   </thead>
@@ -468,58 +468,57 @@ exports[`when showing the week numbers should render correctly 1`] = `
     <tr
       class="rdp-head_row"
     >
-      <th
+      <td
         class="rdp-head_cell"
-        scope="col"
       />
       <th
         aria-label="Sunday"
         class="rdp-head_cell"
         scope="col"
       >
-        SU
+        Su
       </th>
       <th
         aria-label="Monday"
         class="rdp-head_cell"
         scope="col"
       >
-        MO
+        Mo
       </th>
       <th
         aria-label="Tuesday"
         class="rdp-head_cell"
         scope="col"
       >
-        TU
+        Tu
       </th>
       <th
         aria-label="Wednesday"
         class="rdp-head_cell"
         scope="col"
       >
-        WE
+        We
       </th>
       <th
         aria-label="Thursday"
         class="rdp-head_cell"
         scope="col"
       >
-        TH
+        Th
       </th>
       <th
         aria-label="Friday"
         class="rdp-head_cell"
         scope="col"
       >
-        FR
+        Fr
       </th>
       <th
         aria-label="Saturday"
         class="rdp-head_cell"
         scope="col"
       >
-        SA
+        Sa
       </th>
     </tr>
   </thead>

package/src/contexts/DayPicker/formatters/formatWeekdayName.test.ts

@@ -5,11 +5,11 @@ import { formatWeekdayName } from './formatWeekdayName';
 const date = new Date(2022, 10, 21);
 
 test('should return the formatted weekday name', () => {
-  expect(formatWeekdayName(date)).toEqual('MO');
+  expect(formatWeekdayName(date)).toEqual('Mo');
 });
 
 describe('when a locale is passed in', () => {
   test('should format using the locale', () => {
-    expect(formatWeekdayName(date, { locale: es })).toEqual('LU');
+    expect(formatWeekdayName(date, { locale: es })).toEqual('lu');
   });
 });

package/src/contexts/DayPicker/formatters/formatWeekdayName.ts

@@ -8,5 +8,5 @@ export function formatWeekdayName(
   weekday: Date,
   options?: { locale?: Locale }
 ): string {
-  return format(weekday, 'cccccc', options).toUpperCase();
+  return format(weekday, 'cccccc', options);
 }

package/src/hooks/useDayEventHandlers/useDayEventHandlers.test.tsx

@@ -43,7 +43,19 @@ const tests: [EventName, DayEventName][] = [
 describe.each(tests)('when calling "%s"', (eventName, dayEventName) => {
   const activeModifiers: ActiveModifiers = {};
   const dayPickerProps = {
-    [dayEventName]: jest.fn()
+    onDayClick: jest.fn(),
+    onDayFocus: jest.fn(),
+    onDayBlur: jest.fn(),
+    onDayMouseEnter: jest.fn(),
+    onDayMouseLeave: jest.fn(),
+    onDayPointerEnter: jest.fn(),
+    onDayPointerLeave: jest.fn(),
+    onDayTouchEnd: jest.fn(),
+    onDayTouchCancel: jest.fn(),
+    onDayTouchMove: jest.fn(),
+    onDayTouchStart: jest.fn(),
+    onDayKeyUp: jest.fn(),
+    onDayKeyDown: jest.fn()
   };
   const mouseEvent = {} as React.MouseEvent<HTMLButtonElement, MouseEvent>;
   const date = today;

package/src/style.css

@@ -1,5 +1,6 @@
 .rdp {
   --rdp-cell-size: 40px;
+  --rdp-caption-font-size: 18px;
   --rdp-accent-color: #0000ff;
   --rdp-background-color: #e7edff;
   --rdp-accent-color-dark: #3003e1;
@@ -130,7 +131,7 @@
   border: 0;
   border: 2px solid transparent;
   font-family: inherit;
-  font-size: 140%;
+  font-size: var(--rdp-caption-font-size);
   font-weight: bold;
 }
 
@@ -224,6 +225,7 @@
   height: 100%;
   height: var(--rdp-cell-size);
   padding: 0;
+  text-transform: uppercase;
 }
 
 .rdp-tbody {

package/src/style.css.d.ts

@@ -1,39 +1,39 @@
 declare const styles: {
-  rdp: string;
-  'rdp-vhidden': string;
-  'rdp-button_reset': string;
-  'rdp-button': string;
-  'rdp-day_selected': string;
-  'rdp-months': string;
-  'rdp-month': string;
-  'rdp-table': string;
-  'rdp-with_weeknumber': string;
-  'rdp-caption': string;
-  'rdp-multiple_months': string;
-  'rdp-caption_dropdowns': string;
-  'rdp-caption_label': string;
-  'rdp-nav': string;
-  'rdp-caption_start': string;
-  'rdp-caption_end': string;
-  'rdp-nav_button': string;
-  'rdp-dropdown_year': string;
-  'rdp-dropdown_month': string;
-  'rdp-dropdown': string;
-  'rdp-dropdown_icon': string;
-  'rdp-head': string;
-  'rdp-head_row': string;
-  'rdp-row': string;
-  'rdp-head_cell': string;
-  'rdp-tbody': string;
-  'rdp-tfoot': string;
-  'rdp-cell': string;
-  'rdp-weeknumber': string;
-  'rdp-day': string;
-  'rdp-day_today': string;
-  'rdp-day_outside': string;
-  'rdp-day_range_start': string;
-  'rdp-day_range_end': string;
-  'rdp-day_range_middle': string;
-};
+  'rdp': string
+  'rdp-vhidden': string
+  'rdp-button_reset': string
+  'rdp-button': string
+  'rdp-day_selected': string
+  'rdp-months': string
+  'rdp-month': string
+  'rdp-table': string
+  'rdp-with_weeknumber': string
+  'rdp-caption': string
+  'rdp-multiple_months': string
+  'rdp-caption_dropdowns': string
+  'rdp-caption_label': string
+  'rdp-nav': string
+  'rdp-caption_start': string
+  'rdp-caption_end': string
+  'rdp-nav_button': string
+  'rdp-dropdown_year': string
+  'rdp-dropdown_month': string
+  'rdp-dropdown': string
+  'rdp-dropdown_icon': string
+  'rdp-head': string
+  'rdp-head_row': string
+  'rdp-row': string
+  'rdp-head_cell': string
+  'rdp-tbody': string
+  'rdp-tfoot': string
+  'rdp-cell': string
+  'rdp-weeknumber': string
+  'rdp-day': string
+  'rdp-day_today': string
+  'rdp-day_outside': string
+  'rdp-day_range_start': string
+  'rdp-day_range_end': string
+  'rdp-day_range_middle': string
+}
 
-export default styles;
+export default styles

package/src/types/DayPickerBase.ts

@@ -1,5 +1,7 @@
 import type { Locale } from 'date-fns';
 
+import { AriaAttributes } from 'react';
+
 import { CaptionLayout, CaptionProps } from 'components/Caption';
 import { CaptionLabelProps } from 'components/CaptionLabel';
 import { DayProps } from 'components/Day';
@@ -29,6 +31,11 @@ import {
 } from './Modifiers';
 import { ClassNames, StyledComponent, Styles } from './Styles';
 
+/** A type with all the attributes starting with data- */
+export type DataAttributes = {
+  [key: `data-${string}`]: string | boolean | number | undefined;
+};
+
 /**
  * Selection modes supported by DayPicker.
  *
@@ -43,7 +50,7 @@ export type DaySelectionMode = 'single' | 'multiple' | 'range' | 'default';
 /**
  * The base props for the {@link DayPicker} component and the {@link DayPickerContext}.
  */
-export interface DayPickerBase {
+export interface DayPickerBase extends DataAttributes, AriaAttributes {
   /**
    * The CSS class to add to the container element. To change the name of the
    * class instead, use `classNames.root`.