[pull] main from adobe:main

.circleci/config.yml

@@ -77,11 +77,25 @@ commands:
               --cache-control "public,max-age=31536000,immutable" \
               --exclude "*.html" --exclude "*.rsc" --exclude "*.txt" --exclude "*.json" --exclude "*.md" --exclude "*.xml"
       - run:
-          name: Copy HTML and text files to S3
+          name: Copy HTML and data files to S3
           command: |
             aws s3 cp /tmp/dist/s2-docs/<< parameters.dir >> << parameters.bucket >> --recursive \
               --cache-control "public,max-age=300,stale-while-revalidate=300" \
-              --exclude "*" --include "*.html" --include "*.txt" --include "*.json" --include "*.md" --include "*.xml"
+              --exclude "*" --include "*.html" --include "*.json" --include "*.xml"
+      - run:
+          name: Copy Markdown files to S3
+          command: |
+            aws s3 cp /tmp/dist/s2-docs/<< parameters.dir >> << parameters.bucket >> --recursive \
+              --cache-control "public,max-age=300,stale-while-revalidate=300" \
+              --content-type "text/markdown;charset=utf-8" \
+              --exclude "*" --include "*.md"
+      - run:
+          name: Copy text files to S3
+          command: |
+            aws s3 cp /tmp/dist/s2-docs/<< parameters.dir >> << parameters.bucket >> --recursive \
+              --cache-control "public,max-age=300,stale-while-revalidate=300" \
+              --content-type "text/plain;charset=utf-8" \
+              --exclude "*" --include "*.txt"
       - run:
           name: Copy RSC files to S3
           command: |

packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx

@@ -138,7 +138,7 @@ export const WithActionButton: Story = {
               <AccordionItemTitle>
                 Files
               </AccordionItemTitle>
-              <ActionButton><NewIcon aria-label="new icon" /></ActionButton>
+              <ActionButton aria-label="Add new file"><NewIcon /></ActionButton>
             </AccordionItemHeader>
             <AccordionItemPanel>
               Files content
@@ -149,7 +149,7 @@ export const WithActionButton: Story = {
               <AccordionItemTitle>
                 People
               </AccordionItemTitle>
-              <ActionButton><NewIcon aria-label="new icon" /></ActionButton>
+              <ActionButton aria-label="Add new person"><NewIcon /></ActionButton>
             </AccordionItemHeader>
             <AccordionItemPanel>
               <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />

packages/@react-spectrum/s2/chromatic/DropZone.stories.tsx

@@ -43,7 +43,7 @@ const ExampleRender = (args: DropZoneProps): ReactElement => {
         <IllustratedMessage>
           <DropToUpload />
           <Heading>
-            Drag and drop your file
+            Drag or paste your file
           </Heading>
           <Content>
             Or, select a file from your computer
@@ -72,7 +72,7 @@ const ExampleWithFileTriggerRender = (args: DropZoneProps): ReactElement => {
         <IllustratedMessage>
           <Cloud />
           <Heading>
-            Drag and drop your file
+            Drag or paste your file
           </Heading>
           <Content>
             Or, select a file from your computer
@@ -108,7 +108,7 @@ const LongBannerRender = (args: DropZoneProps): ReactElement => {
         <IllustratedMessage>
           <DropToUpload />
           <Heading>
-            Drag and drop your file
+            Drag or paste your file
           </Heading>
           <Content>
             Or, select a file from your computer
@@ -172,7 +172,7 @@ const GradientExample = (args: DropZoneProps): ReactElement => {
         <IllustratedMessage>
           <CloudUpload />
           <Heading>
-            Drag and drop your file
+            Drag or paste your file
           </Heading>
           <Content>
             Or, select a file from your computer

packages/@react-spectrum/s2/stories/Accordion.stories.tsx

@@ -217,7 +217,7 @@ export const WithActionButton: Story = {
               <AccordionItemTitle>
                 Files
               </AccordionItemTitle>
-              <ActionButton><NewIcon aria-label="new icon" /></ActionButton>
+              <ActionButton aria-label="Add new file"><NewIcon /></ActionButton>
             </AccordionItemHeader>
             <AccordionItemPanel>
               Files content
@@ -228,7 +228,7 @@ export const WithActionButton: Story = {
               <AccordionItemTitle>
                 People
               </AccordionItemTitle>
-              <ActionButton><NewIcon aria-label="new icon" /></ActionButton>
+              <ActionButton aria-label="Add new person"><NewIcon /></ActionButton>
             </AccordionItemHeader>
             <AccordionItemPanel>
               <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />

packages/@react-spectrum/s2/stories/DropZone.stories.tsx

@@ -52,7 +52,7 @@ const ExampleRender = (args: DropZoneProps): ReactElement => {
         <IllustratedMessage>
           <DropToUpload />
           <Heading>
-            Drag and drop your file
+            Drag or paste your file
           </Heading>
           <Content>
             Or, select a file from your computer
@@ -81,7 +81,7 @@ const ExampleWithFileTriggerRender = (args: DropZoneProps): ReactElement => {
         <IllustratedMessage>
           <Cloud />
           <Heading>
-            Drag and drop your file
+            Drag or paste your file
           </Heading>
           <Content>
             Or, select a file from your computer
@@ -117,7 +117,7 @@ const LongBannerRender = (args: DropZoneProps): ReactElement => {
         <IllustratedMessage>
           <DropToUpload />
           <Heading>
-            Drag and drop your file
+            Drag or paste your file
           </Heading>
           <Content>
             Or, select a file from your computer
@@ -146,7 +146,7 @@ const GradientRender = (args: DropZoneProps): ReactElement => {
         <IllustratedMessage>
           <CloudUpload />
           <Heading>
-            Drag and drop your file
+            Drag or paste your file
           </Heading>
           <Content>
             Or, select a file from your computer

packages/dev/s2-docs/pages/react-aria/Calendar.mdx

@@ -83,8 +83,8 @@ import {Calendar} from 'vanilla-starter/Calendar';
 
 ```tsx render
 "use client";
-import type {AnyCalendarDate} from '@internationalized/date';
-import {CalendarDate, startOfWeek, toCalendar, GregorianCalendar} from '@internationalized/date';
+import type {AnyCalendarDate, Calendar as ICalendar} from '@internationalized/date';
+import {CalendarDate, startOfWeek, GregorianCalendar} from '@internationalized/date';
 import {Calendar} from 'vanilla-starter/Calendar';
 
 export default function Example() {
@@ -100,45 +100,66 @@ export default function Example() {
 // See @internationalized/date docs linked above.
 ///- begin collapse -///
 class Custom454 extends GregorianCalendar {
-  weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, 4];
-  getDaysInMonth(date) {
-    return this.weekPattern[date.month - 1] * 7;
+  // The anchor date, in Gregorian calendar.
+  // The anchor date is a date that occurs in the first week of the first month of every fiscal year.
+  anchorDate = new CalendarDate(2001, 2, 4);
+
+  private getYear(year: number): [CalendarDate, number[]] {
+    let anchor = this.anchorDate.set({year});
+    let startOfYear = startOfWeek(anchor, 'en', 'sun');
+    let isBigYear = !startOfYear.add({weeks: 53}).compare(anchor.add({years: 1}));
+    let weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, isBigYear ? 5 : 4];
+    return [startOfYear, weekPattern];
+  }
+
+  getDaysInMonth(date: AnyCalendarDate): number {
+    let [, weekPattern] = this.getYear(date.year);
+    return weekPattern[date.month - 1] * 7;
   }
 
   fromJulianDay(jd: number): CalendarDate {
     let gregorian = super.fromJulianDay(jd);
+    let year = gregorian.year;
+
+    let [monthStart, weekPattern] = this.getYear(year);
+    if (gregorian.compare(monthStart) < 0) {
+      year--;
+      [monthStart, weekPattern] = this.getYear(year);
+    }
 
-    let monthStart = startOfWeek(new CalendarDate(gregorian.year, 1, 1), 'en');
-    for (let months = 0; months < this.weekPattern.length; months++) {
-      let weeksInMonth = this.weekPattern[months];
-      let monthEnd = monthStart.add({weeks: weeksInMonth});
-      if (monthEnd.compare(gregorian) > 0) {
+    for (let month = 1; month <= 12; month++) {
+      let weeks = weekPattern[month - 1];
+      let nextMonth = monthStart.add({weeks});
+      if (nextMonth.compare(gregorian) > 0) {
         let days = gregorian.compare(monthStart);
-        return new CalendarDate(this, monthStart.year, months + 1, days + 1);
+        return new CalendarDate(this, year, month, days + 1);
       }
-      monthStart = monthEnd;
+      monthStart = nextMonth;
     }
 
-    throw Error('Date is not in any month somehow!');
+    throw new Error('date not found');
   }
 
   toJulianDay(date: AnyCalendarDate): number {
-    let monthStart = startOfWeek(new CalendarDate(date.year, 1, 1), 'en');
+    let [monthStart, weekPattern] = this.getYear(date.year);
     for (let month = 1; month < date.month; month++) {
-      monthStart = monthStart.add({weeks: this.weekPattern[month - 1]});
+      monthStart = monthStart.add({weeks: weekPattern[month - 1]});
     }
 
     let gregorian = monthStart.add({days: date.day - 1});
     return super.toJulianDay(gregorian);
   }
 
-  getFormattableMonth(date) {
-    let gregorian = toCalendar(date, new GregorianCalendar());
-    return gregorian.set({month: date.month, day: 1});
+  getFormattableMonth(date: AnyCalendarDate): CalendarDate {
+    let anchorMonth = this.anchorDate.month - 1;
+    let dateMonth = date.month - 1;
+    let month = ((anchorMonth + dateMonth) % 12) + 1;
+    let year = anchorMonth + dateMonth >= 12 ? date.year + 1 : date.year;
+    return new CalendarDate(year, month, 1);
   }
 
-  isEqual(other) {
-    return other instanceof Custom454;
+  isEqual(other: ICalendar): boolean {
+    return other instanceof Custom454 && other.anchorDate.compare(this.anchorDate) === 0;
   }
 }
 ///- end collapse -///

packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx

@@ -93,8 +93,8 @@ import {RangeCalendar} from 'vanilla-starter/RangeCalendar';
 
 ```tsx render
 "use client";
-import type {AnyCalendarDate} from '@internationalized/date';
-import {CalendarDate, startOfWeek, toCalendar, GregorianCalendar} from '@internationalized/date';
+import type {AnyCalendarDate, Calendar} from '@internationalized/date';
+import {CalendarDate, startOfWeek, GregorianCalendar} from '@internationalized/date';
 import {RangeCalendar} from 'vanilla-starter/RangeCalendar';
 
 export default function Example() {
@@ -110,45 +110,66 @@ export default function Example() {
 // See @internationalized/date docs linked above.
 ///- begin collapse -///
 class Custom454 extends GregorianCalendar {
-  weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, 4];
-  getDaysInMonth(date) {
-    return this.weekPattern[date.month - 1] * 7;
+  // The anchor date, in Gregorian calendar.
+  // The anchor date is a date that occurs in the first week of the first month of every fiscal year.
+  anchorDate = new CalendarDate(2001, 2, 4);
+
+  private getYear(year: number): [CalendarDate, number[]] {
+    let anchor = this.anchorDate.set({year});
+    let startOfYear = startOfWeek(anchor, 'en', 'sun');
+    let isBigYear = !startOfYear.add({weeks: 53}).compare(anchor.add({years: 1}));
+    let weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, isBigYear ? 5 : 4];
+    return [startOfYear, weekPattern];
+  }
+
+  getDaysInMonth(date: AnyCalendarDate): number {
+    let [, weekPattern] = this.getYear(date.year);
+    return weekPattern[date.month - 1] * 7;
   }
 
   fromJulianDay(jd: number): CalendarDate {
     let gregorian = super.fromJulianDay(jd);
+    let year = gregorian.year;
+
+    let [monthStart, weekPattern] = this.getYear(year);
+    if (gregorian.compare(monthStart) < 0) {
+      year--;
+      [monthStart, weekPattern] = this.getYear(year);
+    }
 
-    let monthStart = startOfWeek(new CalendarDate(gregorian.year, 1, 1), 'en');
-    for (let months = 0; months < this.weekPattern.length; months++) {
-      let weeksInMonth = this.weekPattern[months];
-      let monthEnd = monthStart.add({weeks: weeksInMonth});
-      if (monthEnd.compare(gregorian) > 0) {
+    for (let month = 1; month <= 12; month++) {
+      let weeks = weekPattern[month - 1];
+      let nextMonth = monthStart.add({weeks});
+      if (nextMonth.compare(gregorian) > 0) {
         let days = gregorian.compare(monthStart);
-        return new CalendarDate(this, monthStart.year, months + 1, days + 1);
+        return new CalendarDate(this, year, month, days + 1);
       }
-      monthStart = monthEnd;
+      monthStart = nextMonth;
     }
 
-    throw Error('Date is not in any month somehow!');
+    throw new Error('date not found');
   }
 
   toJulianDay(date: AnyCalendarDate): number {
-    let monthStart = startOfWeek(new CalendarDate(date.year, 1, 1), 'en');
+    let [monthStart, weekPattern] = this.getYear(date.year);
     for (let month = 1; month < date.month; month++) {
-      monthStart = monthStart.add({weeks: this.weekPattern[month - 1]});
+      monthStart = monthStart.add({weeks: weekPattern[month - 1]});
     }
 
     let gregorian = monthStart.add({days: date.day - 1});
     return super.toJulianDay(gregorian);
   }
 
-  getFormattableMonth(date) {
-    let gregorian = toCalendar(date, new GregorianCalendar());
-    return gregorian.set({month: date.month, day: 1});
+  getFormattableMonth(date: AnyCalendarDate): CalendarDate {
+    let anchorMonth = this.anchorDate.month - 1;
+    let dateMonth = date.month - 1;
+    let month = ((anchorMonth + dateMonth) % 12) + 1;
+    let year = anchorMonth + dateMonth >= 12 ? date.year + 1 : date.year;
+    return new CalendarDate(year, month, 1);
   }
 
-  isEqual(other) {
-    return other instanceof Custom454;
+  isEqual(other: Calendar): boolean {
+    return other instanceof Custom454 && other.anchorDate.compare(this.anchorDate) === 0;
   }
 }
 ///- end collapse -///