Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adapt Calendar component for Node v22.12+ #2832

Merged
merged 2 commits into from
Dec 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/shaggy-coins-enjoy.md
Original file line number Diff line number Diff line change
@@ -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.
5 changes: 5 additions & 0 deletions .changeset/sour-llamas-check.md
Original file line number Diff line number Diff line change
@@ -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.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/templates.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/Calendar/Calendar.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />

Expand Down
15 changes: 8 additions & 7 deletions packages/circuit-ui/components/Calendar/Calendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -311,7 +314,6 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
firstDayOfWeek={firstDayOfWeek}
daysInWeek={daysInWeek}
locale={locale}
calendar={calendar}
modifiers={modifiers}
onFocus={handleFocusDate}
onSelect={onSelect}
Expand Down Expand Up @@ -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),
Expand Down
16 changes: 10 additions & 6 deletions packages/circuit-ui/components/Calendar/CalendarService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
});
}

Expand Down
Loading