react-day-picker 9.3.2 → 9.4.0

package/src/style.module.css

@@ -4,13 +4,13 @@
   --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
   --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
 
-  --rdp-day-height: 2.75rem; /* The height of the day cells. */
-  --rdp-day-width: 2.75rem; /* The width of the day cells. */
+  --rdp-day-height: 44px; /* The height of the day cells. */
+  --rdp-day-width: 44px; /* The width of the day cells. */
   
   --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
   --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
-  --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
-  --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
+  --rdp-day_button-height: 42px; /* The height of the day cells. */
+  --rdp-day_button-width: 42px; /* The width of the day cells. */
   
   --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
   --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
@@ -57,6 +57,10 @@
   --rdp-gradient-direction: -90deg;
 }
 
+.root[data-broadcast-calendar="true"] {
+  --rdp-outside-opacity: unset;
+}
+
 /* Root of the component. */
 .root {
   position: relative; /* Required to position the navigation toolbar. */
@@ -105,6 +109,11 @@
   border: 0;
 }
 
+.dropdown:focus-visible ~ .caption_label {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .button_next,
 .button_previous {
   border: none;

package/src/types/props.ts

@@ -230,6 +230,8 @@ export interface PropsBase {
   /**
    * Show the outside days (days falling in the next or the previous month).
    *
+   * **Note:** when {@link broadcastCalendar} is set, this prop defaults to true.
+   *
    * @see https://daypicker.dev/docs/customization#outside-days
    */
   showOutsideDays?: boolean;
@@ -243,6 +245,16 @@ export interface PropsBase {
    * @see https://daypicker.dev/docs/customization#showweeknumber
    */
   showWeekNumber?: boolean;
+  /**
+   * Display the weeks in the month following the broadcast calendar. Setting
+   * this prop will ignore {@link weekStartsOn} (always Monday) and
+   * {@link showOutsideDays} will default to true.
+   *
+   * @since 9.4.0
+   * @see https://daypicker.dev/docs/localization#broadcast-calendar
+   * @see https://en.wikipedia.org/wiki/Broadcast_calendar
+   */
+  broadcastCalendar?: boolean;
   /**
    * Use ISO week dates instead of the locale setting. Setting this prop will
    * ignore `weekStartsOn` and `firstWeekContainsDate`.

package/src/useCalendar.ts

@@ -81,6 +81,7 @@ export function useCalendar(
     | "month"
     | "defaultMonth"
     | "timeZone"
+    | "broadcastCalendar"
     // Deprecated:
     | "fromMonth"
     | "fromYear"

package/src/useGetModifiers.tsx

@@ -17,7 +17,14 @@ export function useGetModifiers(
   props: DayPickerProps,
   dateLib: DateLib
 ) {
-  const { disabled, hidden, modifiers, showOutsideDays, today } = props;
+  const {
+    disabled,
+    hidden,
+    modifiers,
+    showOutsideDays,
+    broadcastCalendar,
+    today
+  } = props;
 
   const {
     isSameDay,
@@ -60,7 +67,9 @@ export function useGetModifiers(
       Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) ||
       isBeforeStartMonth ||
       isAfterEndMonth ||
-      (!showOutsideDays && isOutside);
+      // Broadcast calendar will show outside days as default
+      (!broadcastCalendar && !showOutsideDays && isOutside) ||
+      (broadcastCalendar && showOutsideDays === false && isOutside);
 
     const isToday = isSameDay(
       date,

package/website/docs/docs/localization.mdx

@@ -6,13 +6,15 @@ sidebar_position: 6
 
 DayPicker provides various options to customize the calendar for different languages and regions.
 
-| 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`.                                                      |
+| `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.                                  |
+| `timeZone`              | `string`                                      | The time zone (IANA or UTC offset) to use in the calendar.                               |
+| `ISOWeek`               | `boolean`                                     | Switch to [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date).                 |
+| `broadcastCalendar`     | `boolean`                                     | Switch to the [US Broadcast Calendar](https://en.wikipedia.org/wiki/Broadcast_calendar). |
+| `jalali`                | `boolean`                                     | Switch to the Jalali calendar.                                                           |
 
 ## Setting the Locale
 
@@ -94,6 +96,20 @@ Use the `ISOWeek` prop to switch to [ISO Week Dates](https://en.wikipedia.org/wi
   <Examples.WeeknumberIso />
 </BrowserWindow>
 
+## Broadcast Calendar
+
+Switch to the [US Broadcast Calendar](https://en.wikipedia.org/wiki/Broadcast_calendar) by setting the `broadcastCalendar` prop.
+
+In the broadcast calendar, weeks start on Monday and end on Sunday. Each month has either 28 or 35 days.
+
+```tsx
+<DayPicker broadcastCalendar />
+```
+
+<BrowserWindow>
+  <Examples.BroadcastCalendar />
+</BrowserWindow>
+
 ## Jalali Calendar
 
 DayPicker supports the Jalali calendar through the [date-fns-jalali](https://www.npmjs.com/package/date-fns-jalali) package. To switch to the Jalali calendar, add `date-fns-jalali` to your dependencies and import `DayPicker` from `react-day-picker/jalali`.

package/website/docs/docs/styling.mdx

@@ -56,13 +56,13 @@ The following table lists the CSS variables used by DayPicker within the `.rdp-r
 | ----------------------------------------- | -------------------------------------------------------------------- |
 | `--rdp-accent-color`                      | The accent color used for selected days and UI elements.             |
 | `--rdp-accent-background-color`           | The accent background color used for selected days and UI elements.  |
-| `--rdp-day-height`                        | The height of the day cells.                                         |
-| `--rdp-day-width`                         | The width of the day cells.                                          |
+| `--rdp-day-height`                        | The height of the day cells (default: `44px`).                       |
+| `--rdp-day-width`                         | The width of the day cells (default: `44px`).                        |
 | `--rdp-chevron-disabled-opacity`          | The opacity of the chevron when its container is disabled.           |
 | `--rdp-day_button-border-radius`          | The border radius of the day cells.                                  |
 | `--rdp-day_button-border`                 | The border of the day cells.                                         |
-| `--rdp-day_button-height`                 | The height of the day cells.                                         |
-| `--rdp-day_button-width`                  | The width of the day cells.                                          |
+| `--rdp-day_button-height`                 | The height of the day cells (default: `42px`).                       |
+| `--rdp-day_button-width`                  | The width of the day cells (default: `42px`).                        |
 | `--rdp-selected-border`                   | The border of the selected days.                                     |
 | `--rdp-disabled-opacity`                  | The opacity of the disabled days.                                    |
 | `--rdp-outside-opacity`                   | The opacity of the days outside the current month.                   |

package/website/docs/intro.mdx

@@ -14,7 +14,8 @@ DayPicker is a [React](https://react.dev) component for creating date pickers, c
 - 🛠 Extensive set of props for [customizing](./docs/customization.mdx) the calendar.
 - 🎨 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).
+- 🌍 Can be [localized](https://daypicker.dev/docs/localization) into any language and [time zones](https://daypicker.dev/docs/localization#time-zone).
+- 🌐 Support for [ISO 8601 dates](https://daypicker.dev/docs/localization#iso-week-dates), [Jalali](https://daypicker.dev/docs/localization#jalali-calendar), and [broadcast](https://daypicker.dev/docs/localization#broadcast-calendar) calendar.
 - 🦮 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).