diff --git a/.changeset/shaggy-coins-enjoy.md b/.changeset/shaggy-coins-enjoy.md new file mode 100644 index 0000000000..a3977204e4 --- /dev/null +++ b/.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. diff --git a/.changeset/sour-llamas-check.md b/.changeset/sour-llamas-check.md new file mode 100644 index 0000000000..c0ee386662 --- /dev/null +++ b/.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. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 740f9f05c8..f3a10fd4a9 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.github/workflows/templates.yml b/.github/workflows/templates.yml index 36cd7ba753..7c94261b65 100644 --- a/.github/workflows/templates.yml +++ b/.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 diff --git a/packages/circuit-ui/components/Calendar/Calendar.mdx b/packages/circuit-ui/components/Calendar/Calendar.mdx index 5891326cba..fccf20c945 100644 --- a/packages/circuit-ui/components/Calendar/Calendar.mdx +++ b/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. diff --git a/packages/circuit-ui/components/Calendar/Calendar.tsx b/packages/circuit-ui/components/Calendar/Calendar.tsx index dc2e17fe73..7af750f28d 100644 --- a/packages/circuit-ui/components/Calendar/Calendar.tsx +++ b/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( 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( 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), diff --git a/packages/circuit-ui/components/Calendar/CalendarService.ts b/packages/circuit-ui/components/Calendar/CalendarService.ts index 37916a80b5..8b087135d2 100644 --- a/packages/circuit-ui/components/Calendar/CalendarService.ts +++ b/packages/circuit-ui/components/Calendar/CalendarService.ts @@ -143,7 +143,6 @@ 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 @@ -151,11 +150,11 @@ export function getWeekdays( 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, }); }