[pull] main from adobe:main

.storybook-s2/docs/Migrating.jsx

@@ -114,6 +114,9 @@ export function Migrating() {
         <H3>ButtonGroup</H3>
         <P>No updates needed.</P>
 
+        <H3>Calendar</H3>
+        <P>No updates needed.</P>
+
         <H3>Checkbox</H3>
         <P>No updates needed.</P>
 
@@ -158,6 +161,27 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>ComboBoxItem</Code></li>
         </ul>
 
+        <H3>DateField</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
+          <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
+        </ul>
+
+        <H3>DatePicker</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
+          <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
+        </ul>
+
+        <H3>DateRangePicker</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
+          <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
+        </ul>
+
         <H3>Dialog</H3>
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Update children to move render props from being the second child of <Code>DialogTrigger</Code> to being a child of <Code>Dialog</Code></li>
@@ -302,6 +326,9 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>showErrorIcon</Code> (it has been removed due to accessibility issues)</li>
         </ul>
 
+        <H3>RangeCalendar</H3>
+        <P>No updates needed.</P>
+
         <H3>RangeSlider</H3>
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>showValueLabel</Code> (it has been removed due to accessibility issues)</li>
@@ -392,6 +419,13 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
         </ul>
 
+        <H3>TimeField</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
+          <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
+        </ul>
+
         <H3>ToggleButton</H3>
         <P>No updates needed.</P>
 

packages/@react-aria/dnd/src/DragManager.ts

@@ -410,7 +410,7 @@ class DragSession {
       ...visibleDropTargets.flatMap(target => target.activateButtonRef?.current ? [target.element, target.activateButtonRef?.current] : [target.element])
     ], {shouldUseInert: true});
 
-    this.mutationObserver.observe(document.body, {subtree: true, attributes: true, attributeFilter: ['aria-hidden']});
+    this.mutationObserver.observe(document.body, {subtree: true, attributes: true, attributeFilter: ['aria-hidden', 'inert']});
   }
 
   next(): void {
@@ -437,7 +437,7 @@ class DragSession {
     // If we've reached the end of the valid drop targets, cycle back to the original drag target.
     // This lets the user cancel the drag in case they don't have an Escape key (e.g. iPad keyboard case).
     if (index === this.validDropTargets.length - 1) {
-      if (!this.dragTarget.element.closest('[aria-hidden="true"]')) {
+      if (!this.dragTarget.element.closest('[aria-hidden="true"], [inert]')) {
         this.setCurrentDropTarget(null);
         this.dragTarget.element.focus();
       } else {
@@ -472,7 +472,7 @@ class DragSession {
     // If we've reached the start of the valid drop targets, cycle back to the original drag target.
     // This lets the user cancel the drag in case they don't have an Escape key (e.g. iPad keyboard case).
     if (index === 0) {
-      if (!this.dragTarget.element.closest('[aria-hidden="true"]')) {
+      if (!this.dragTarget.element.closest('[aria-hidden="true"], [inert]')) {
         this.setCurrentDropTarget(null);
         this.dragTarget.element.focus();
       } else {
@@ -579,7 +579,7 @@ class DragSession {
   cancel(): void {
     this.setCurrentDropTarget(null);
     this.end();
-    if (!this.dragTarget.element.closest('[aria-hidden="true"]')) {
+    if (!this.dragTarget.element.closest('[aria-hidden="true"], [inert]')) {
       this.dragTarget.element.focus();
     }
 
@@ -640,7 +640,7 @@ class DragSession {
 function findValidDropTargets(options: DragTarget) {
   let types = getTypes(options.items);
   return [...dropTargets.values()].filter(target => {
-    if (target.element.closest('[aria-hidden="true"]')) {
+    if (target.element.closest('[aria-hidden="true"], [inert]')) {
       return false;
     }
 

packages/@react-spectrum/s2/src/DateRangePicker.tsx

@@ -150,7 +150,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
                 isDateUnavailable={isDateUnavailable}
                 pageBehavior={pageBehavior} />
               {showTimeField && (
-                <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>
+                <div className={style({display: 'flex', gap: 16, contain: 'inline-size', marginTop: 24})}>
                   <TimeField
                     styles={timeField}
                     label={stringFormatter.format('datepicker.startTime')}

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/datefield.test.ts.snap

@@ -1,9 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Does nothing 1`] = `
+exports[`Removes isQuiet 1`] = `
 "import { DateField } from "@react-spectrum/s2";
-
+let isQuiet = true;
+let props = {isQuiet: true};
 <div>
-  <DateField label="Event date" />
+  <DateField />
+  <DateField />
+  <DateField />
+  <DateField />
+  <DateField />
+  <DateField // TODO(S2-upgrade): check this spread for style props
+  {...props} />
 </div>"
 `;
+
+exports[`changes validationState to isInvalid or nothing 1`] = `
+"import { DateField } from "@react-spectrum/s2";
+  let validationState = 'invalid';
+  let props = {validationState: 'invalid'};
+  <div>
+    <DateField isInvalid />
+    <DateField />
+    <DateField // TODO(S2-upgrade): Prop validationState could not be automatically updated because validationState could not be followed.
+    validationState={validationState} />
+    <DateField // TODO(S2-upgrade): check this spread for style props
+    {...props} />
+  </div>"
+`;

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/datepicker.test.ts.snap

@@ -1,9 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Does nothing 1`] = `
+exports[`Removes isQuiet 1`] = `
 "import { DatePicker } from "@react-spectrum/s2";
-
+let isQuiet = true;
+let props = {isQuiet: true};
 <div>
-  <DatePicker label="Event date" />
+  <DatePicker />
+  <DatePicker />
+  <DatePicker />
+  <DatePicker />
+  <DatePicker />
+  <DatePicker // TODO(S2-upgrade): check this spread for style props
+  {...props} />
 </div>"
 `;
+
+exports[`changes validationState to isInvalid or nothing 1`] = `
+"import { DatePicker } from "@react-spectrum/s2";
+  let validationState = 'invalid';
+  let props = {validationState: 'invalid'};
+  <div>
+    <DatePicker isInvalid />
+    <DatePicker />
+    <DatePicker // TODO(S2-upgrade): Prop validationState could not be automatically updated because validationState could not be followed.
+    validationState={validationState} />
+    <DatePicker // TODO(S2-upgrade): check this spread for style props
+    {...props} />
+  </div>"
+`;

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/daterangepicker.test.ts.snap

@@ -1,9 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Does nothing 1`] = `
+exports[`Removes isQuiet 1`] = `
 "import { DateRangePicker } from "@react-spectrum/s2";
-
+let isQuiet = true;
+let props = {isQuiet: true};
 <div>
-  <DateRangePicker label="Event date range" />
+  <DateRangePicker />
+  <DateRangePicker />
+  <DateRangePicker />
+  <DateRangePicker />
+  <DateRangePicker />
+  <DateRangePicker // TODO(S2-upgrade): check this spread for style props
+  {...props} />
 </div>"
 `;
+
+exports[`changes validationState to isInvalid or nothing 1`] = `
+"import { DateRangePicker } from "@react-spectrum/s2";
+  let validationState = 'invalid';
+  let props = {validationState: 'invalid'};
+  <div>
+    <DateRangePicker isInvalid />
+    <DateRangePicker />
+    <DateRangePicker // TODO(S2-upgrade): Prop validationState could not be automatically updated because validationState could not be followed.
+    validationState={validationState} />
+    <DateRangePicker // TODO(S2-upgrade): check this spread for style props
+    {...props} />
+  </div>"
+`;

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/timefield.test.ts.snap

@@ -1,8 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Renames variants 1`] = `
-"// import {Button} from '@adobe/react-spectrum';
-
+exports[`Removes isQuiet 1`] = `
+"import { TimeField } from "@react-spectrum/s2";
+let isQuiet = true;
+let props = {isQuiet: true};
 <div>
+  <TimeField />
+  <TimeField />
+  <TimeField />
+  <TimeField />
+  <TimeField />
+  <TimeField // TODO(S2-upgrade): check this spread for style props
+  {...props} />
 </div>"
 `;
+
+exports[`changes validationState to isInvalid or nothing 1`] = `
+"import { TimeField } from "@react-spectrum/s2";
+  let validationState = 'invalid';
+  let props = {validationState: 'invalid'};
+  <div>
+    <TimeField isInvalid />
+    <TimeField />
+    <TimeField // TODO(S2-upgrade): Prop validationState could not be automatically updated because validationState could not be followed.
+    validationState={validationState} />
+    <TimeField // TODO(S2-upgrade): check this spread for style props
+    {...props} />
+  </div>"
+`;

packages/dev/codemods/src/s1-to-s2/__tests__/datefield.test.ts

@@ -6,10 +6,30 @@ const test = (name: string, input: string) => {
   defineSnapshotTest(transform, {}, input, name);
 };
 
-test('Does nothing', `
-import {DateField} from '@adobe/react-spectrum';
+test('Removes isQuiet', `
 
+import {DateField} from '@adobe/react-spectrum';
+let isQuiet = true;
+let props = {isQuiet: true};
 <div>
-  <DateField label="Event date" />
+  <DateField isQuiet />
+  <DateField isQuiet={true} />
+  <DateField isQuiet={false} />
+  <DateField isQuiet={isQuiet} />
+  <DateField isQuiet={'foo' === 'foo'} />
+  <DateField {...props} />
 </div>
 `);
+
+
+test('changes validationState to isInvalid or nothing', `
+  import {DateField} from '@adobe/react-spectrum';
+  let validationState = 'invalid';
+  let props = {validationState: 'invalid'};
+  <div>
+    <DateField validationState="invalid" />
+    <DateField validationState="valid" />
+    <DateField validationState={validationState} />
+    <DateField {...props} />
+  </div>
+`);

packages/dev/codemods/src/s1-to-s2/__tests__/datepicker.test.ts

@@ -6,10 +6,30 @@ const test = (name: string, input: string) => {
   defineSnapshotTest(transform, {}, input, name);
 };
 
-test('Does nothing', `
-import {DatePicker} from '@adobe/react-spectrum';
+test('Removes isQuiet', `
 
+import {DatePicker} from '@adobe/react-spectrum';
+let isQuiet = true;
+let props = {isQuiet: true};
 <div>
-  <DatePicker label="Event date" />
+  <DatePicker isQuiet />
+  <DatePicker isQuiet={true} />
+  <DatePicker isQuiet={false} />
+  <DatePicker isQuiet={isQuiet} />
+  <DatePicker isQuiet={'foo' === 'foo'} />
+  <DatePicker {...props} />
 </div>
 `);
+
+
+test('changes validationState to isInvalid or nothing', `
+  import {DatePicker} from '@adobe/react-spectrum';
+  let validationState = 'invalid';
+  let props = {validationState: 'invalid'};
+  <div>
+    <DatePicker validationState="invalid" />
+    <DatePicker validationState="valid" />
+    <DatePicker validationState={validationState} />
+    <DatePicker {...props} />
+  </div>
+`);

packages/dev/codemods/src/s1-to-s2/__tests__/daterangepicker.test.ts

@@ -6,10 +6,30 @@ const test = (name: string, input: string) => {
   defineSnapshotTest(transform, {}, input, name);
 };
 
-test('Does nothing', `
-import {DateRangePicker} from '@adobe/react-spectrum';
+test('Removes isQuiet', `
 
+import {DateRangePicker} from '@adobe/react-spectrum';
+let isQuiet = true;
+let props = {isQuiet: true};
 <div>
-  <DateRangePicker label="Event date range" />
+  <DateRangePicker isQuiet />
+  <DateRangePicker isQuiet={true} />
+  <DateRangePicker isQuiet={false} />
+  <DateRangePicker isQuiet={isQuiet} />
+  <DateRangePicker isQuiet={'foo' === 'foo'} />
+  <DateRangePicker {...props} />
 </div>
 `);
+
+
+test('changes validationState to isInvalid or nothing', `
+  import {DateRangePicker} from '@adobe/react-spectrum';
+  let validationState = 'invalid';
+  let props = {validationState: 'invalid'};
+  <div>
+    <DateRangePicker validationState="invalid" />
+    <DateRangePicker validationState="valid" />
+    <DateRangePicker validationState={validationState} />
+    <DateRangePicker {...props} />
+  </div>
+`);

packages/dev/codemods/src/s1-to-s2/__tests__/timefield.test.ts

@@ -6,9 +6,30 @@ const test = (name: string, input: string) => {
   defineSnapshotTest(transform, {}, input, name);
 };
 
-test('Renames variants', `
-// import {Button} from '@adobe/react-spectrum';
+test('Removes isQuiet', `
 
+import {TimeField} from '@adobe/react-spectrum';
+let isQuiet = true;
+let props = {isQuiet: true};
 <div>
+  <TimeField isQuiet />
+  <TimeField isQuiet={true} />
+  <TimeField isQuiet={false} />
+  <TimeField isQuiet={isQuiet} />
+  <TimeField isQuiet={'foo' === 'foo'} />
+  <TimeField {...props} />
 </div>
 `);
+
+
+test('changes validationState to isInvalid or nothing', `
+  import {TimeField} from '@adobe/react-spectrum';
+  let validationState = 'invalid';
+  let props = {validationState: 'invalid'};
+  <div>
+    <TimeField validationState="invalid" />
+    <TimeField validationState="valid" />
+    <TimeField validationState={validationState} />
+    <TimeField {...props} />
+  </div>
+`);