react-day-picker 8.2.0 → 8.2.1

package/README.md

@@ -1,11 +1,35 @@
-# React DayPicker v8
+# React DayPicker
 
-DayPicker is a date picker component for [React](https://reactjs.org).
+[React DayPicker](http://react-day-picker.js.org) is a date picker component for [React](https://reactjs.org). Renders a calendar where the user can browse months to select days. DayPicker is customizable, works great with input fields and can be styled to match any design.
 
-```bash
-$ npm install react-day-picker date-fns  # using npm
-$ pnpm install react-day-picker date-fns # using pnpm
-$ yarn add react-day-picker date-fns     # using yarn
+➡️ **[react-day-picker.js.org](http://react-day-picker.js.org)** for guides, examples and API reference.
+
+<a href="http://react-day-picker.js.org">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/120693/188241991-19d0e8a1-230a-48c8-8477-3c90d4e36197.png"/>
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/120693/188238076-311ec6d1-503d-4c21-8ffe-d89faa60e40f.png"/>
+    <img alt="Shows a screenshot of the React DayPicker component in a browser’s window." width="900" />
+  </picture>
+</a>
+
+## Main features
+
+- ☀️ Select days, ranges or whatever
+- 🧘‍♀️ using [date-fns](http://date-fns.org) as date library
+- 🌎 Localizable into any language
+- ➡️ Keyboard navigation
+- ♿️ [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) support
+- 🤖 Written in TypeScript
+- 🎨 Easy to style and customize
+- 🗓 Support multiple calendars
+- 📄 Easy to integrate input fields
+
+## Installation
+
+```shell
+npm install react-day-picker date-fns  # using npm
+pnpm install react-day-picker date-fns # using pnpm
+yarn add react-day-picker date-fns     # using yarn
 ```
 
 <a href="https://www.npmjs.com/package/react-day-picker">
@@ -18,20 +42,34 @@ $ yarn add react-day-picker date-fns     # using yarn
   <img src="https://img.shields.io/github/sponsors/gpbl?style=flat-square" alt="sponsors"/>
 </a>
 
-## Main features
+## Example
 
-- ☀️ Select days, ranges or whatever
-- 🌎 Localizable into any language
-- ➡️ Keyboard navigation
-- ♿️ [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) support
-- 🤖 Native TypeScript support
-- 🧘‍♀️ using [date-fns](http://date-fns.org) as date library
-- 🗓 Create multiple calendars
-- 🎨 Easy to style and customize
-- 📄 Native integration with input elements
+```tsx
+import React from 'react';
 
-## Documentation
+import { format } from 'date-fns';
+import { DayPicker } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+
+export default function Example() {
+  const [selected, setSelected] = React.useState<Date>();
 
-- See ➡️ **[react-day-picker.js.org](http://react-day-picker.js.org)** for guides, examples and API reference.
+  let footer = <p>Please pick a day.</p>;
+  if (selected) {
+    footer = <p>You picked {format(selected, 'PP')}.</p>;
+  }
+  return (
+    <DayPicker
+      mode="single"
+      selected={selected}
+      onSelect={setSelected}
+      footer={footer}
+    />
+  );
+}
+```
+
+## Documentation
 
-<small>Looking for v7 docs? Go to <a href="https://react-day-picker-v7.netlify.app" target="_blank">react-day-picker-v7.netlify.app</a>.</small>
+See **[react-day-picker.js.org](http://react-day-picker.js.org)** for guides, examples and API reference of the latest version.
+<small>Docs for version 7 are at <a href="https://react-day-picker-v7.netlify.app" target="_blank">react-day-picker-v7.netlify.app</a>.</small>

package/dist/style.module.css

@@ -1,4 +1,4 @@
-.rdp {
+.root {
   --rdp-cell-size: 40px;
   --rdp-accent-color: #0000ff;
   --rdp-background-color: #e7edff;
@@ -283,22 +283,22 @@
   z-index: 1;
 }
 
-.rdp:not([dir='rtl']) .day_range_start:not(.day_range_end) {
+.root:not([dir='rtl']) .day_range_start:not(.day_range_end) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.rdp:not([dir='rtl']) .day_range_end:not(.day_range_start) {
+.root:not([dir='rtl']) .day_range_end:not(.day_range_start) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.rdp[dir='rtl'] .day_range_start:not(.day_range_end) {
+.root[dir='rtl'] .day_range_start:not(.day_range_end) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.rdp[dir='rtl'] .day_range_end:not(.day_range_start) {
+.root[dir='rtl'] .day_range_end:not(.day_range_start) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }

package/dist/style.module.css.d.ts

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

package/dist/types/Matchers.d.ts

@@ -42,7 +42,7 @@
  *
  * // will match when the function return true
  * const functionMatcher: Matcher = (day: Date) => {
- *  return (new Date()).getMonth() === 2 // match when month is March
+ *  return day.getMonth() === 2 // match when month is March
  * };
  * ```
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "http://react-day-picker.js.org",

package/src/types/Matchers.ts

@@ -42,7 +42,7 @@
  *
  * // will match when the function return true
  * const functionMatcher: Matcher = (day: Date) => {
- *  return (new Date()).getMonth() === 2 // match when month is March
+ *  return day.getMonth() === 2 // match when month is March
  * };
  * ```
  *

package/dist/components/Head/utils/getWeekdays.d.ts

@@ -1,8 +0,0 @@
-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 declare function getWeekdays(locale?: Locale, 
-/** The index of the first day of the week (0 - Sunday) */
-weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): Date[];

package/dist/components/Head/utils/index.d.ts

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