Merge branch 'main' of github.com:adobe/react-spectrum into loadmore_rac

Author: LFDanLu

examples/rsp-cra-18/package.json

@@ -24,7 +24,7 @@
     "react-aria-components": "latest",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
-    "typescript": "5.0.4",
+    "typescript": "5.8.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

lib/jestResolver.js

@@ -32,7 +32,7 @@ module.exports = (request, options) => {
     let files = glob.sync(request, {cwd: options.basedir});
     let source = '';
     for (let file of files) {
-      source += `exports['${path.basename(file, '.json')}'] = require('${path.join(options.basedir, file)}');\n`;
+      source += `exports['${path.basename(file, '.json')}'] = require('${path.join(options.basedir, file).replace(/\\/g, '\\\\')}');\n`;
     }
     let hash = crypto.createHash('md5');
     hash.update(source);
@@ -51,7 +51,7 @@ module.exports = (request, options) => {
       return pkg;
     }
   });
-  if (/packages\/.*\/.*\/intl\/.*\.json$/.test(resolved)) {
+  if (/packages[\/\\].*[\/\\].*[\/\\]intl[\/\\].*\.json$/.test(resolved)) {
     let sourceText = fs.readFileSync(resolved, 'utf8');
     let json = JSON.parse(sourceText);
     let res = compileStrings(json);

package.json

@@ -36,7 +36,7 @@
     "test:ssr": "cross-env STRICT_MODE=1 yarn jest --config jest.ssr.config.js",
     "ci-test": "cross-env STRICT_MODE=1 yarn jest --maxWorkers=2 && cross-env STRICT_MODE=1 yarn test:ssr --runInBand",
     "lint": "concurrently \"yarn check-types\" \"eslint packages\" \"node scripts/lint-packages.js\" \"yarn constraints\"",
-    "jest": "node scripts/jest.js",
+    "jest": "jest",
     "copyrights": "babel-node --presets @babel/env ./scripts/addHeaders.js",
     "build:icons": "babel-node --presets @babel/env ./scripts/buildIcons.js",
     "clean:icons": "babel-node --presets @babel/env ./scripts/cleanIcons.js",
@@ -87,19 +87,19 @@
     "@faker-js/faker": "^8.4.1",
     "@jdb8/eslint-plugin-monorepo": "^1.0.1",
     "@octokit/rest": "*",
-    "@parcel/bundler-library": "^2.12.1",
-    "@parcel/config-default": "^2.13.1",
-    "@parcel/config-storybook": "^0.0.2",
-    "@parcel/core": "^2.13.1",
-    "@parcel/optimizer-data-url": "^2.13.1",
-    "@parcel/optimizer-terser": "^2.13.1",
-    "@parcel/packager-ts": "^2.13.1",
-    "@parcel/reporter-cli": "^2.13.1",
-    "@parcel/resolver-glob": "^2.13.1",
-    "@parcel/transformer-inline": "^2.13.1",
-    "@parcel/transformer-inline-string": "^2.13.1",
-    "@parcel/transformer-svg-react": "^2.13.1",
-    "@parcel/transformer-typescript-types": "^2.13.1",
+    "@parcel/bundler-library": "^2.14.0",
+    "@parcel/config-default": "^2.14.0",
+    "@parcel/config-storybook": "0.0.2",
+    "@parcel/core": "^2.14.0",
+    "@parcel/optimizer-data-url": "^2.14.0",
+    "@parcel/optimizer-terser": "^2.14.0",
+    "@parcel/packager-ts": "^2.14.0",
+    "@parcel/reporter-cli": "^2.14.0",
+    "@parcel/resolver-glob": "^2.14.0",
+    "@parcel/transformer-inline": "^2.14.0",
+    "@parcel/transformer-inline-string": "^2.14.0",
+    "@parcel/transformer-svg-react": "^2.14.0",
+    "@parcel/transformer-typescript-types": "^2.14.0",
     "@react-spectrum/s2-icon-builder": "^0.2.0",
     "@spectrum-css/component-builder": "1.0.1",
     "@spectrum-css/vars": "^2.3.0",
@@ -125,7 +125,7 @@
     "@tailwindcss/postcss": "^4.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
     "@types/react": "npm:types-react@19.0.0-rc.0",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
@@ -161,7 +161,6 @@
     "fast-glob": "^3.1.0",
     "framer-motion": "^11.3.0-alpha.0",
     "fs-extra": "^10.0.0",
-    "full-icu": "^1.3.0",
     "glob": "^8.0.3",
     "glob-promise": "^6.0.5",
     "globals": "^15.11.0",
@@ -179,7 +178,7 @@
     "npm-cli-login": "^1.0.0",
     "nyc": "^10.2.0",
     "p-queue": "^6.2.1",
-    "parcel": "^2.13.1",
+    "parcel": "^2.14.0",
     "parcel-optimizer-strict-mode": "workspace:^",
     "patch-package": "^6.2.0",
     "playwright": "^1.45.3",

packages/@internationalized/date/docs/Calendar.mdx

@@ -226,3 +226,69 @@ function createCalendar(identifier) {
 ## Interface
 
 <ClassAPI links={docs.links} class={docs.exports.Calendar} />
+
+## Custom calendars
+
+You can create your own custom calendar system by implementing the `Calendar` interface shown above. This enables calendars that follow custom business rules. An example would be a fiscal year calendar that follows a [4-5-4 format](https://nrf.com/resources/4-5-4-calendar), where month ranges don't follow the usual Gregorian calendar.
+
+To implement a calendar, either extend an existing implementation (e.g. `GregorianCalendar`) or implement the `Calendar` interface from scratch. The most important methods are `fromJulianDay` and `toJulianDay`, which convert between the calendar's year/month/day numbering system and a [Julian Day Number](https://en.wikipedia.org/wiki/Julian_day). This allows converting dates between calendar systems. Other methods such as `getDaysInMonth` and `getMonthsInYear` can be implemented to define how dates are organized in your calendar system.
+
+The following code is an example of how you might implement a custom 4-5-4 calendar (though implementing a true 4-5-4 calendar would be more nuanced than this).
+
+```tsx
+import type {AnyCalendarDate, Calendar} from '@internationalized/date';
+import {CalendarDate, GregorianCalendar, startOfWeek} from '@internationalized/date';
+
+const weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, 4];
+
+class Custom454 extends GregorianCalendar {
+  // Months always have either 4 or 5 full weeks.
+  getDaysInMonth(date) {
+    return weekPattern[date.month - 1] * 7;
+  }
+
+  // Enable conversion between calendar systems.
+  fromJulianDay(jd: number): CalendarDate {
+    let gregorian = super.fromJulianDay(jd);
+
+    // Start from the beginning of the first week of the gregorian year
+    // and add weeks until we find the month.
+    let monthStart = startOfWeek(new CalendarDate(gregorian.year, 1, 1), 'en');
+    for (let months = 0; months < weekPattern.length; months++) {
+      let weeksInMonth = weekPattern[months];
+      let monthEnd = monthStart.add({weeks: weeksInMonth});
+      if (monthEnd.compare(gregorian) > 0) {
+        let days = gregorian.compare(monthStart);
+        return new CalendarDate(this, monthStart.year, months + 1, days + 1);
+      }
+      monthStart = monthEnd;
+    }
+
+    throw Error('Date is not in any month somehow!');
+  }
+
+  toJulianDay(date: AnyCalendarDate): number {
+    let monthStart = startOfWeek(new CalendarDate(date.year, 1, 1), 'en');
+    for (let month = 1; month < date.month; month++) {
+      monthStart = monthStart.add({weeks: weekPattern[month - 1]});
+    }
+
+    let gregorian = monthStart.add({days: date.day - 1});
+    return super.toJulianDay(gregorian);
+  }
+
+  isEqual(other: Calendar) {
+    return other instanceof Custom454;
+  }
+}
+```
+
+This enables dates to be converted between calendar systems.
+
+```tsx
+import {GregorianCalendar, toCalendar} from '@internationalized/date';
+
+let date = new CalendarDate(new Custom454(), 2024, 2, 1);
+let gregorianDate = toCalendar(date, new GregorianCalendar());
+// => new CalendarDate(new GregorianCalendar(), 2024, 1, 29);
+```

packages/@internationalized/date/docs/CalendarDate.mdx

@@ -72,7 +72,7 @@ date.toString(); // '2022-02-03'
 
 By default, `CalendarDate` uses the Gregorian calendar system, but many other calendar systems that are used around the world are supported, such as Hebrew, Indian, Islamic, Buddhist, Ethiopic, and more. A <TypeLink links={docs.links} type={docs.exports.Calendar} /> instance can be passed to the `CalendarDate` constructor to represent dates in that calendar system.
 
-This example creates a date in the Buddhist calendar system, which is equivalent to April 4th, 2020 in the Gregorian calendar.
+This example creates a date in the Buddhist calendar system, which is equivalent to April 30th, 2020 in the Gregorian calendar.
 
 ```tsx
 import {BuddhistCalendar} from '@internationalized/date';
@@ -86,7 +86,7 @@ See the [Calendar](Calendar.html#implementations) docs for details about the sup
 
 Many calendar systems have only one era, or a modern era and a pre-modern era (e.g. AD and BC in the Gregorian calendar). However, other calendar systems may have many eras. For example, the Japanese calendar has eras for the reign of each Emperor. `CalendarDate` represents eras using string identifiers, which can be passed as an additional parameter to the constructor before the year. When eras are present, years are numbered starting from 1 within the era.
 
-This example creates a date in the Japanese calendar system, which is equivalent to April 4th, 2020 in the Gregorian calendar.
+This example creates a date in the Japanese calendar system, which is equivalent to April 30th, 2019 in the Gregorian calendar.
 
 ```tsx
 import {JapaneseCalendar} from '@internationalized/date';

packages/@internationalized/date/src/calendars/BuddhistCalendar.ts

@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {AnyCalendarDate} from '../types';
+import {AnyCalendarDate, CalendarIdentifier} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {fromExtendedYear, getExtendedYear, GregorianCalendar} from './GregorianCalendar';
 
@@ -25,7 +25,7 @@ const BUDDHIST_ERA_START = -543;
  * era, identified as 'BE'.
  */
 export class BuddhistCalendar extends GregorianCalendar {
-  identifier = 'buddhist';
+  identifier: CalendarIdentifier = 'buddhist';
 
   fromJulianDay(jd: number): CalendarDate {
     let gregorianDate = super.fromJulianDay(jd);

packages/@internationalized/date/src/calendars/EthiopicCalendar.ts

@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {AnyCalendarDate, Calendar} from '../types';
+import {AnyCalendarDate, Calendar, CalendarIdentifier} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {Mutable} from '../utils';
 
@@ -66,7 +66,7 @@ function getDaysInMonth(year: number, month: number) {
  * on whether it is a leap year. Two eras are supported: 'AA' and 'AM'.
  */
 export class EthiopicCalendar implements Calendar {
-  identifier = 'ethiopic';
+  identifier: CalendarIdentifier = 'ethiopic';
 
   fromJulianDay(jd: number): CalendarDate {
     let [year, month, day] = julianDayToCE(ETHIOPIC_EPOCH, jd);
@@ -117,7 +117,7 @@ export class EthiopicCalendar implements Calendar {
  * except years were measured from a different epoch. Only one era is supported: 'AA'.
  */
 export class EthiopicAmeteAlemCalendar extends EthiopicCalendar {
-  identifier = 'ethioaa'; // also known as 'ethiopic-amete-alem' in ICU
+  identifier: CalendarIdentifier = 'ethioaa'; // also known as 'ethiopic-amete-alem' in ICU
 
   fromJulianDay(jd: number): CalendarDate {
     let [year, month, day] = julianDayToCE(ETHIOPIC_EPOCH, jd);
@@ -141,7 +141,7 @@ export class EthiopicAmeteAlemCalendar extends EthiopicCalendar {
  * on whether it is a leap year. Two eras are supported: 'BCE' and 'CE'.
  */
 export class CopticCalendar extends EthiopicCalendar {
-  identifier = 'coptic';
+  identifier: CalendarIdentifier = 'coptic';
 
   fromJulianDay(jd: number): CalendarDate {
     let [year, month, day] = julianDayToCE(COPTIC_EPOCH, jd);

packages/@internationalized/date/src/calendars/GregorianCalendar.ts

@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {AnyCalendarDate, Calendar} from '../types';
+import {AnyCalendarDate, Calendar, CalendarIdentifier} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {mod, Mutable} from '../utils';
 
@@ -68,7 +68,7 @@ const daysInMonth = {
  * Years always contain 12 months, and 365 or 366 days depending on whether it is a leap year.
  */
 export class GregorianCalendar implements Calendar {
-  identifier = 'gregory';
+  identifier: CalendarIdentifier = 'gregory';
 
   fromJulianDay(jd: number): CalendarDate {
     let jd0 = jd;

packages/@internationalized/date/src/calendars/HebrewCalendar.ts

@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {AnyCalendarDate, Calendar} from '../types';
+import {AnyCalendarDate, Calendar, CalendarIdentifier} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {mod, Mutable} from '../utils';
 
@@ -128,7 +128,7 @@ function getDaysInMonth(year: number, month: number): number {
  * In leap years, an extra month is inserted at month 6.
  */
 export class HebrewCalendar implements Calendar {
-  identifier = 'hebrew';
+  identifier: CalendarIdentifier = 'hebrew';
 
   fromJulianDay(jd: number): CalendarDate {
     let d = jd - HEBREW_EPOCH;

packages/@internationalized/date/src/calendars/IndianCalendar.ts

@@ -13,7 +13,7 @@
 // Portions of the code in this file are based on code from ICU.
 // Original licensing can be found in the NOTICE file in the root directory of this source tree.
 
-import {AnyCalendarDate} from '../types';
+import {AnyCalendarDate, CalendarIdentifier} from '../types';
 import {CalendarDate} from '../CalendarDate';
 import {fromExtendedYear, GregorianCalendar, gregorianToJulianDay, isLeapYear} from './GregorianCalendar';
 
@@ -29,7 +29,7 @@ const INDIAN_YEAR_START = 80;
  * in each year, with either 30 or 31 days. Only one era identifier is supported: 'saka'.
  */
 export class IndianCalendar extends GregorianCalendar {
-  identifier = 'indian';
+  identifier: CalendarIdentifier = 'indian';
 
   fromJulianDay(jd: number): CalendarDate {
     // Gregorian date for Julian day