Adapt Calendar component for Node v22.12+ (#2832)

* Adapt Calendar component for Node v22.12+

* Revert Node version pin

Author: connor-baer

.changeset/shaggy-coins-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Deprecated the Calendar component's `calendar` prop since support for the `gregory` calendar system wasn't fully tested and is partially broken. Use the default `iso8601` calendar system instead. The prop will be removed in the next major version.

.changeset/sour-llamas-check.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Fixed the display order of the Calendar component's month headline on Node 22.12 and above.

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [20, 22.11]
+        node: [20, 22]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

.github/workflows/templates.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       # https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs
       matrix:
-        node: [20, 22.11]
+        node: [20, 22]
         template: [astro, nextjs, remix]
         include:
           - template: astro

packages/circuit-ui/components/Calendar/Calendar.mdx

@@ -28,7 +28,7 @@ Dates are formatted using the [`Intl.DateTimeFormat` API](https://developer.mozi
 
 Use the `firstDayOfWeek` prop to set the first day of the week for the locale, either `1` (Monday) or `7` (Sunday). This information can be obtained using the [`Intl.Locale.prototype.getWeekInfo()` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo#firstday) in supported browsers.
 
-Only `iso8601` and `gregory` [calendars](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getCalendars#supported_calendar_types) and the left-to-right [writing direction](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) are currently supported.
+Only the `iso8601` [calendar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getCalendars#supported_calendar_types) and the left-to-right [writing direction](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) are currently supported.
 
 <Story of={Stories.Localized} />
 

packages/circuit-ui/components/Calendar/Calendar.tsx

@@ -92,6 +92,10 @@ interface SharedProps {
    */
   locale?: Locale;
   /**
+   * @deprecated Support for the `gregory` calendar has been removed since it
+   * never fully worked. The `calendar` prop will be removed in the next major
+   * version.
+   *
    * The identifier for the used [calendar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar). Default: `iso8601`.
    */
   calendar?: 'iso8601' | 'gregory';
@@ -150,7 +154,6 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
       nextMonthButtonLabel,
       modifiers,
       numberOfMonths = 1,
-      calendar = 'iso8601',
       ...rest
     } = useI18n(props, translations);
     const [{ months, focusedDate, hoveredDate, today }, dispatch] = useReducer(
@@ -311,7 +314,6 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
               firstDayOfWeek={firstDayOfWeek}
               daysInWeek={daysInWeek}
               locale={locale}
-              calendar={calendar}
               modifiers={modifiers}
               onFocus={handleFocusDate}
               onSelect={onSelect}
@@ -358,17 +360,16 @@ function Month({
   firstDayOfWeek = 1,
   daysInWeek,
   locale,
-  calendar,
 }: MonthProps) {
   const descriptionIds = useId();
   const headlineId = useId();
   const headline = useMemo(
-    () => getMonthHeadline(yearMonth, locale, calendar),
-    [yearMonth, locale, calendar],
+    () => getMonthHeadline(yearMonth, locale),
+    [yearMonth, locale],
   );
   const weekdays = useMemo(
-    () => getWeekdays(firstDayOfWeek, daysInWeek, locale, calendar),
-    [firstDayOfWeek, daysInWeek, locale, calendar],
+    () => getWeekdays(firstDayOfWeek, daysInWeek, locale),
+    [firstDayOfWeek, daysInWeek, locale],
   );
   const weeks = useMemo(
     () => getViewOfMonth(yearMonth, firstDayOfWeek, daysInWeek),

packages/circuit-ui/components/Calendar/CalendarService.ts

@@ -143,19 +143,18 @@ export function getWeekdays(
   firstDayOfWeek: FirstDayOfWeek = 1,
   daysInWeek: DaysInWeek = 7,
   locale?: Locale,
-  calendar?: string,
 ) {
   return Array.from(Array(daysInWeek)).map((_, index) => {
     // 1973 started with a Monday
     const date = new Temporal.PlainDate(1973, 1, index + firstDayOfWeek);
     return {
       narrow: formatDateTime(date, locale, {
         weekday: 'narrow',
-        calendar,
+        calendar: date.calendarId,
       }),
       long: formatDateTime(date, locale, {
         weekday: 'long',
-        calendar,
+        calendar: date.calendarId,
       }),
     };
   }) as Weekdays;
@@ -164,12 +163,17 @@ export function getWeekdays(
 export function getMonthHeadline(
   yearMonth: Temporal.PlainYearMonth,
   locale?: Locale,
-  calendar = 'iso8601',
 ) {
-  return formatDateTime(yearMonth, locale, {
+  // Temporal objects use the `iso8601` calendar system by default, which
+  // (incorrectly?) renders the year before the month since Node 22.12
+  // (e.g. "2020 March" instead of "March 2020").
+  // A `PlainYearMonth` has to be converted to a `PlainDate` to be able to
+  // change its calendar system.
+  const date = yearMonth.toPlainDate({ day: 1 }).withCalendar('gregory');
+  return formatDateTime(date, locale, {
     year: 'numeric',
     month: 'long',
-    calendar,
+    calendar: date.calendarId,
   });
 }