react-day-picker 9.1.2 → 9.1.3

package/README.md

@@ -10,7 +10,7 @@ DayPicker is a [React](https://react.dev) component for creating date pickers, c
 - 🎨 Minimal design that can be [easily styled](https://daypicker.dev/docs/styling) with CSS or any CSS framework.
 - 📅 Supports [selections](https://daypicker.dev/docs/selection-modes) of single days, multiple days, ranges of days, or [custom selections](https://daypicker.dev/guides/custom-selections).
 - 🌍 Can be [localized](https://daypicker.dev/docs/localization) into any language, supports [ISO 8601 dates](https://daypicker.dev/docs/localization#iso-week-dates), [time zones](https://daypicker.dev/docs/localization#time-zone), and the [Jalali calendar](https://daypicker.dev/docs/localization#jalali-calendar).
-- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](https://daypicker.dev/docs/accessibility).
+- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](https://daypicker.dev/guides/accessibility).
 - ⚙️ [Customizable components](https://daypicker.dev/guides/custom-components) to extend the rendered elements.
 - 🔤 Easy integration [with input fields](https://daypicker.dev/guides/input-fields).
 

package/dist/cjs/types/props.d.ts

@@ -240,7 +240,7 @@ export interface PropsBase {
      *
      * @since 9.1.1
      * @experimental
-     * @see https://daypicker.dev/docs/localization#time-zone
+     * @see https://daypicker.dev/docs/time-zone
      */
     timeZone?: string | undefined;
     /**
@@ -255,7 +255,7 @@ export interface PropsBase {
      * Use this prop to communicate the calendar's status to screen readers.
      * Prefer strings over complex UI elements.
      *
-     * @see https://daypicker.dev/docs/accessibility#footer
+     * @see https://daypicker.dev/guides/accessibility#footer
      */
     footer?: React.ReactNode | string;
     /**
@@ -265,7 +265,7 @@ export interface PropsBase {
      * Use this prop when you need to focus DayPicker after a user action, for
      * improved accessibility.
      *
-     * @see https://daypicker.dev/docs/accessibility#autofocus
+     * @see https://daypicker.dev/guides/accessibility#autofocus
      */
     autoFocus?: boolean;
     /**

package/dist/esm/types/props.d.ts

@@ -240,7 +240,7 @@ export interface PropsBase {
      *
      * @since 9.1.1
      * @experimental
-     * @see https://daypicker.dev/docs/localization#time-zone
+     * @see https://daypicker.dev/docs/time-zone
      */
     timeZone?: string | undefined;
     /**
@@ -255,7 +255,7 @@ export interface PropsBase {
      * Use this prop to communicate the calendar's status to screen readers.
      * Prefer strings over complex UI elements.
      *
-     * @see https://daypicker.dev/docs/accessibility#footer
+     * @see https://daypicker.dev/guides/accessibility#footer
      */
     footer?: React.ReactNode | string;
     /**
@@ -265,7 +265,7 @@ export interface PropsBase {
      * Use this prop when you need to focus DayPicker after a user action, for
      * improved accessibility.
      *
-     * @see https://daypicker.dev/docs/accessibility#autofocus
+     * @see https://daypicker.dev/guides/accessibility#autofocus
      */
     autoFocus?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "9.1.2",
+  "version": "9.1.3",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",
@@ -141,10 +141,11 @@
     "src",
     "examples",
     "website/docs",
-    "tsconfig.json"
+    "tsconfig.json",
+    "tsconfig-base.json"
   ],
   "dependencies": {
-    "@date-fns/tz": "^1.1.0",
+    "@date-fns/tz": "^1.1.2",
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
@@ -157,10 +158,10 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.5.4",
-    "@types/react": "^18.3.6",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
-    "@typescript-eslint/parser": "^8.5.0",
+    "@typescript-eslint/parser": "^8.6.0",
     "date-fns": "^3.6.0",
     "date-fns-jalali": "3.6.0-1",
     "eslint": "^8.57.0",
@@ -173,7 +174,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-require-extensions": "^0.1.3",
     "eslint-plugin-testing-library": "^6.3.0",
-    "html-validate": "^8.22.0",
+    "html-validate": "^8.23.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "mockdate": "^3.0.5",

package/src/types/props.ts

@@ -267,7 +267,7 @@ export interface PropsBase {
    *
    * @since 9.1.1
    * @experimental
-   * @see https://daypicker.dev/docs/localization#time-zone
+   * @see https://daypicker.dev/docs/time-zone
    */
   timeZone?: string | undefined;
   /**
@@ -282,7 +282,7 @@ export interface PropsBase {
    * Use this prop to communicate the calendar's status to screen readers.
    * Prefer strings over complex UI elements.
    *
-   * @see https://daypicker.dev/docs/accessibility#footer
+   * @see https://daypicker.dev/guides/accessibility#footer
    */
   footer?: React.ReactNode | string;
   /**
@@ -292,7 +292,7 @@ export interface PropsBase {
    * Use this prop when you need to focus DayPicker after a user action, for
    * improved accessibility.
    *
-   * @see https://daypicker.dev/docs/accessibility#autofocus
+   * @see https://daypicker.dev/guides/accessibility#autofocus
    */
   autoFocus?: boolean;
   /**

package/tsconfig-base.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020", "DOM.Iterable"],
+    "jsx": "react", // Keep this to allow overriding React with Preact
+    "module": "ES2020",
+    "moduleResolution": "Node",
+    "sourceMap": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "alwaysStrict": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true
+  }
+}

package/website/docs/docs/customization.mdx

@@ -145,7 +145,7 @@ In [selection mode](./selection-modes.mdx), you can create a [custom selection](
 
 ## Footer as Live Region
 
-Use the `footer` prop to display a footer below the calendar. The footer acts as a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) to announce changes to screen readers. For more information on making the calendar accessible, see the [Accessibility guide](./accessibility.mdx).
+Use the `footer` prop to display a footer below the calendar. The footer acts as a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) to announce changes to screen readers. For more information on making the calendar accessible, see the [Accessibility guide](../guides/accessibility.mdx).
 
 ```tsx
 export function Footer() {

package/website/docs/docs/localization.mdx

@@ -1,18 +1,22 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Localization
 
-Learn how to set the locale, changing the time zone, and adjust other calendar options.
+DayPicker provides various options to customize the calendar for different languages and regions.
 
-## Setting the Locale
+| Prop Name               | Type                                          | Description                                                              |
+| ----------------------- | --------------------------------------------- | ------------------------------------------------------------------------ |
+| `locale`                | [`Locale`](https://date-fns.org/docs/I18n)    | Set the locale. Default is `en-US`.                                      |
+| `weekStartsOn`          | `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7` | Change the first day of the week.                                        |
+| `firstWeekContainsDate` | `1` \| `4`                                    | Configure the first date in the first week of the year.                  |
+| `ISOWeek`               | `boolean`                                     | Switch to [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date). |
+| `timeZone`              | `string`                                      | The time zone (IANA or UTC offset) to use in the calendar.               |
 
-| Prop Name | Type                                       | Description                         |
-| --------- | ------------------------------------------ | ----------------------------------- |
-| `locale`  | [`Locale`](https://date-fns.org/docs/I18n) | Set the locale. Default is `en-US`. |
+## Setting the Locale
 
-To set a different locale, import the locale object from `react-day-picker/locale`and pass it to the`locale` prop.
+To change the default `en-US` to another locale, import a locale object from `react-day-picker/locale` and pass it to the`locale` prop.
 
 ```tsx
 // import the locale object
@@ -49,60 +53,9 @@ import { DayPicker, defaultLocale } from "react-day-picker";
 
 ## Changing the Time Zone {#time-zone}
 
-:::warning Experimental Feature (since v9.1.1)
-
-DayPicker supports time zones through the `date-fns` library. For more information, refer to the [date-fns time zones documentation](https://date-fns.org/v4.1.0/docs/Time-Zones). If you encounter any issues, please [report them on GitHub](https://github.com/gpbl/react-day-picker/issues). Thank you!
-
-:::
-
-| Prop Name  | Type     | Description                                    |
-| ---------- | -------- | ---------------------------------------------- |
-| `timeZone` | `string` | Set a time zone for the dates in the calendar. |
-
-Use the `timeZone` prop to set a different time zone for the calendar. See [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
-for a list of the possible values.
-
-```tsx
-<DayPicker timeZone="UTC" /> // Use Coordinated Universal Time
-<DayPicker timeZone="Pacific/Kiritimati" /> // Use Line Islands Time
-```
-
-<BrowserWindow bodyStyle={{ justifyContent: "start" }}>
-  <Examples.TimeZone />
-</BrowserWindow>
-
-### Working with Time-Zoned Dates
-
-When working with time zones, make sure to use the `TZDate` object instead of the native `Date` object. The `TZDate` object is exported from [@date-fns/tz](https://github.com/date-fns/date-fns-tz). Refer to their documentation for more information.
+See [Time Zone docs](./time-zone.mdx) for more information.
 
-- To initialize a date in a specific time zone, create a `new TZDate()` object or the `TZDate.tz`.
-
-```tsx
-import { DayPicker, TZDate } from "react-day-picker";
-
-export function TimeZone() {
-  const timeZone = "America/New_York";
-  const [selected, setSelected] = useState<Date | undefined>(
-    new TZDate(2024, 12, 10, timeZone) // Make sure you use `TZDate` instead of `Date`
-  );
-  return (
-    <DayPicker
-      mode="single"
-      timeZone={timeZone}
-      selected={selected}
-      onSelect={setSelected}
-    />
-  );
-}
-```
-
-## Calendar Options
-
-| Prop Name               | Type                                          | Description                                                              |
-| ----------------------- | --------------------------------------------- | ------------------------------------------------------------------------ |
-| `weekStartsOn`          | `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7` | Change the first day of the week.                                        |
-| `firstWeekContainsDate` | `1` \| `4`                                    | Configure the first date in the first week of the year.                  |
-| `ISOWeek`               | `boolean`                                     | Switch to [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date). |
+## Localization Options
 
 ### First Date of the Week
 

package/website/docs/docs/selection-modes.mdx

@@ -6,9 +6,9 @@ sidebar_position: 4
 
 DayPicker offers predefined rules for day selection:
 
-- **[Single mode](#single-mode)**: Allows the selection of a single day.
-- **[Multiple mode](#multiple-mode)**: Enables the selection of multiple individual days.
-- **[Range mode](#range-mode)**: Allows the selection of a continuous range of days.
+- [Single mode](#single-mode): allows the selection of a single day.
+- [Multiple mode](#multiple-mode): allows the selection of multiple individual days.
+- [Range mode](#range-mode): allows the selection of a continuous range of days.
 
 The `mode` prop determines the selection mode. Use the `disabled` prop to prevent the selection of specific days. The `selected` and `onSelect` props provide customization options for the selection process.
 

package/website/docs/docs/time-zone.mdx

@@ -0,0 +1,46 @@
+---
+sidebar_position: 5
+---
+
+# Time Zone
+
+Use the `timeZone` prop to set the time zone for the calendar.
+
+| Prop Name  | Type     | Description                           |
+| ---------- | -------- | ------------------------------------- |
+| `timeZone` | `string` | The time zone to use in the calendar. |
+
+The time zone can be specified as either an [IANA time zone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) identifier or a UTC offset.
+
+```tsx
+<DayPicker timeZone="UTC" /> // Use Coordinated Universal Time
+<DayPicker timeZone="Pacific/Kiritimati" /> // Use Line Islands Time
+<DayPicker timeZone="+02:00" /> // Use UTC+2
+```
+
+<BrowserWindow bodyStyle={{ justifyContent: "start" }}>
+  <Examples.TimeZone />
+</BrowserWindow>
+
+### Working with Time-Zoned Dates
+
+When working with time zones, make sure to use the `TZDate` object exported by `react-day-picker` instead of the native `Date` object. For more information, refer to the [date-fns doc](https://date-fns.org/v4.1.0/docs/Time-Zones).
+
+```tsx
+import { DayPicker, TZDate } from "react-day-picker";
+
+export function TimeZone() {
+  const timeZone = "America/New_York";
+  const [selected, setSelected] = useState<Date | undefined>(
+    new TZDate(2024, 12, 10, timeZone) // Make sure you use `TZDate` instead of `Date`
+  );
+  return (
+    <DayPicker
+      mode="single"
+      timeZone={timeZone}
+      selected={selected}
+      onSelect={setSelected}
+    />
+  );
+}
+```

package/website/docs/docs/translation.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Translating DayPicker
@@ -24,7 +24,7 @@ Get help and provide suggestions for translating DayPicker into your language. V
 
 ## ARIA Labels
 
-The `labels` prop allows you to customize the [ARIA labels](./accessibility.mdx).
+The `labels` prop allows you to customize the [ARIA labels](../guides/accessibility.mdx).
 
 ### Example: Italian labels
 

package/website/docs/{docs → guides}/accessibility.mdx

@@ -1,22 +1,22 @@
 ---
-sidebar_position: 7
+sidebar_position: 2
 ---
 
 # Accessible Date Pickers
 
-DayPicker is designed to adhere to the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) for date pickers. This includes features such as keyboard navigation, focus management, and labeling.
+DayPicker follows the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) for date pickers, including features like keyboard navigation, focus management, and labeling.
 
-Depending on your design, you may need to add additional accessibility features. For instance, when working with [Input Fields](../guides/input-fields), there could be some restrictions depending on the level of accessibility you aim to achieve. Stay updated with best practices by following the [ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/).
+Depending on your design, you might need to add more accessibility features. For example, when using [Input Fields](../guides/input-fields), there may be some limitations based on your accessibility goals. Keep up with best practices by following the [ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/).
 
 ## Accessibility Tips
 
-- Regularly test your date picker with a screen reader to ensure it's accessible to all users.
-- Use an `aria-live` region in your user interface to audibly announce when a date is selected. You can use the `footer` prop for this purpose.
-- Customize the ARIA labels with the [`labels`](../api/interfaces/PropsBase.md#labels) prop to improve user feedback.
-- Ensure that your date picker is fully navigable using only the keyboard.
-- Use clear indicators for focus states to assist users who rely on keyboard navigation.
-- Ensure sufficient color contrast between text and background colors.
-- Consider providing instructions on how to use the date picker for first-time users or those unfamiliar with the interface.
+- Test your date picker regularly with a screen reader to ensure accessibility.
+- Use an `aria-live` region to announce when a date is selected, utilizing the `footer` prop.
+- Customize ARIA labels with the [`labels`](../api/interfaces/PropsBase.md#labels) prop for better user feedback.
+- Ensure the date picker is fully navigable with just the keyboard.
+- Provide clear focus indicators for keyboard users.
+- Maintain sufficient color contrast between text and background.
+- Offer instructions for first-time users or those unfamiliar with the date picker.
 
 ## Announcing the Selected Date {#footer}
 
@@ -62,7 +62,7 @@ export function AccessibleDatePicker() {
 
 ## Autofocusing the Calendar {#autofocus}
 
-DayPicker manages focus automatically when the user interacts with the calendar. However, for better accessibility, you may need to autofocus the calendar when it opens. To do this, use the `autoFocus` prop:
+DayPicker manages focus automatically when users interact with the calendar. For better accessibility, you might want to autofocus the calendar when it opens. Use the `autoFocus` prop to achieve this:
 
 ```tsx
 <DayPicker mode="single" autoFocus />

package/website/docs/guides/custom-components.mdx

@@ -18,7 +18,7 @@ You may need to use custom components in advanced applications to:
 - Implement buttons or dropdowns using your own design system components
 - Wrap an element with another element, like adding a tooltip to a day cell
 
-When customizing components, familiarize yourself with the [API Reference](../api#components) and the [DayPicker Anatomy](../docs/anatomy.mdx). Ensure you maintain [accessibility](../docs/accessibility.mdx).
+When customizing components, familiarize yourself with the [API Reference](../api#components) and the [DayPicker Anatomy](../docs/anatomy.mdx). Ensure you maintain [accessibility](../guides/accessibility.mdx).
 
 :::note Custom Components vs Formatters
 

package/website/docs/intro.mdx

@@ -15,7 +15,7 @@ DayPicker is a [React](https://react.dev) component for creating date pickers, c
 - 🎨 Minimal design that can be [easily styled](./docs/styling.mdx) with CSS or any CSS framework.
 - 📅 Supports [selections](./docs/selection-modes.mdx) of single days, multiple days, ranges of days, or [custom selections](./guides/custom-selections.mdx).
 - 🌍 Can be [localized](./docs/localization.mdx) into any language, supports [ISO 8601 dates](./docs/localization.mdx#iso-week-dates), [time zones](./docs/localization.mdx#time-zone), and the [Jalali calendar](./docs/localization.mdx#jalali-calendar).
-- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](./docs/accessibility.mdx).
+- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](./guides/accessibility.mdx).
 - ⚙️ [Customizable components](./guides/custom-components.mdx) to extend the rendered elements.
 - 🔤 Easy integration [with input fields](./guides/input-fields.mdx).
 

package/website/docs/start.mdx

@@ -59,7 +59,7 @@ export function MyDatePicker() {
 - 📅 [Selection Modes](./docs/selection-modes.mdx) - Enable users to select days with single, multiple, or range selections.
 - 🌍 [Localization](./docs/localization.mdx) - Configure DayPicker to display the calendar in different languages and date formats.
 - 🈳 [Translating DayPicker](./docs/translation.mdx) - Translate the labels and messages of the calendar.
-- 🦮 [Accessible Date Pickers](./docs/accessibility.mdx) - Make your date picker accessible to all users.
+- 🦮 [Accessible Date Pickers](./guides/accessibility.mdx) - Make your date picker accessible to all users.
 
 ### Guides