[pull] main from adobe:main

packages/@react-aria/overlays/src/ariaHideOutside.ts

@@ -143,13 +143,6 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
       // If the parent element of the added nodes is not within one of the targets,
       // and not already inside a hidden node, hide all of the new children.
       if (![...visibleNodes, ...hiddenNodes].some(node => node.contains(change.target))) {
-        for (let node of change.removedNodes) {
-          if (node instanceof Element) {
-            visibleNodes.delete(node);
-            hiddenNodes.delete(node);
-          }
-        }
-
         for (let node of change.addedNodes) {
           if (
             (node instanceof HTMLElement || node instanceof SVGElement) &&

packages/@react-aria/overlays/test/ariaHideOutside.test.js

@@ -406,7 +406,9 @@ describe('ariaHideOutside', function () {
       let [count, setCount] = useState(0);
       let items = ['row1', 'row2', 'row3', 'row4', 'row5'];
       if (count === 1) {
-        items = ['row2', 'row3', 'row4', 'row5', 'row1'];
+        items = ['row2', 'row1', 'row3', 'row4', 'row5'];
+      } else if (count === 2) {
+        items = ['row2', 'row3', 'row1', 'row4', 'row5'];
       }
 
       return (
@@ -426,9 +428,11 @@ describe('ariaHideOutside', function () {
     let row = getByTestId('row1');
     let revert = ariaHideOutside([button]);
 
+    act(() => button.click());
+    await Promise.resolve();
     act(() => button.click());
     await Promise.resolve();
     revert();
-    expect(row).not.toHaveAttribute('aria-hidden', 'true');
+    expect(row.parentElement).not.toHaveAttribute('aria-hidden', 'true');
   });
 });

packages/@react-spectrum/dialog/docs/AlertDialog.mdx

@@ -250,3 +250,8 @@ Please see the following sections in the testing docs for more information on ho
 
 Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/contextualhelp/test/ContextualHelp.test.js) if you find that the above
 isn't sufficient when resolving issues in your own test cases.
+
+To identify a particular instance of the cancel, secondary, or confirm button, you can use the following data-testid's respectively:
+- `"rsp-AlertDialog-cancelButton"`
+- `"rsp-AlertDialog-secondaryButton"`
+- `"rsp-AlertDialog-confirmButton"`

packages/@react-spectrum/dialog/src/AlertDialog.tsx

@@ -87,7 +87,7 @@ export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertD
             variant="secondary"
             onPress={() => chain(onClose(), onCancel())}
             autoFocus={autoFocusButton === 'cancel'}
-            data-testid="rsp-alertDialog-cancelButton">
+            data-testid="rsp-AlertDialog-cancelButton">
             {cancelLabel}
           </Button>
         }
@@ -97,7 +97,7 @@ export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertD
             onPress={() => chain(onClose(), onSecondaryAction())}
             isDisabled={isSecondaryActionDisabled}
             autoFocus={autoFocusButton === 'secondary'}
-            data-testid="rsp-alertDialog-secondaryButton">
+            data-testid="rsp-AlertDialog-secondaryButton">
             {secondaryActionLabel}
           </Button>
         }
@@ -106,7 +106,7 @@ export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertD
           onPress={() => chain(onClose(), onPrimaryAction())}
           isDisabled={isPrimaryActionDisabled}
           autoFocus={autoFocusButton === 'primary'}
-          data-testid="rsp-alertDialog-confirmButton">
+          data-testid="rsp-AlertDialog-confirmButton">
           {primaryActionLabel}
         </Button>
       </ButtonGroup>

packages/@react-spectrum/dialog/test/AlertDialog.test.js

@@ -196,11 +196,11 @@ describe('AlertDialog', function () {
 
     let dialog = getByTestId('alert-dialog');
     expect(dialog).toBeDefined();
-    let cancelBtn = getByTestId('rsp-alertDialog-cancelButton');
+    let cancelBtn = getByTestId('rsp-AlertDialog-cancelButton');
     expect(cancelBtn).toBeDefined();
-    let secondaryBtn = getByTestId('rsp-alertDialog-secondaryButton');
+    let secondaryBtn = getByTestId('rsp-AlertDialog-secondaryButton');
     expect(secondaryBtn).toBeDefined();
-    let primaryBtn = getByTestId('rsp-alertDialog-confirmButton');
+    let primaryBtn = getByTestId('rsp-AlertDialog-confirmButton');
     expect(primaryBtn).toBeDefined();
   });
 });

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

@@ -129,7 +129,8 @@ export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogPro
                 onPress={() => chain(close(), onCancel())}
                 variant="secondary"
                 fillStyle="outline"
-                autoFocus={autoFocusButton === 'cancel'}>
+                autoFocus={autoFocusButton === 'cancel'}
+                data-testid="rsp-AlertDialog-cancelButton">
                 {cancelLabel}
               </Button>
             }
@@ -139,15 +140,17 @@ export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogPro
                 variant="secondary"
                 isDisabled={isSecondaryActionDisabled}
                 fillStyle="outline"
-                autoFocus={autoFocusButton === 'secondary'}>
+                autoFocus={autoFocusButton === 'secondary'}
+                data-testid="rsp-AlertDialog-secondaryButton">
                 {secondaryActionLabel}
               </Button>
             }
             <Button
               variant={buttonVariant as 'primary' | 'accent' | 'negative'}
               isDisabled={isPrimaryActionDisabled}
               autoFocus={autoFocusButton === 'primary'}
-              onPress={() => chain(close(), onPrimaryAction())}>
+              onPress={() => chain(close(), onPrimaryAction())}
+              data-testid="rsp-AlertDialog-confirmButton">
               {primaryActionLabel}
             </Button>
           </ButtonGroup>

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

@@ -28,7 +28,7 @@ interface ContentProps extends UnsafeStyles, SlotProps {
 }
 
 interface HeadingProps extends Omit<ContentProps, 'children'> {
-  children?: ReactNode,
+  children: ReactNode,
   level?: number
 }
 

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

@@ -44,8 +44,7 @@ const modalOverlayStyles = style({
   transitionDuration: {
     default: 250,
     isExiting: 130
-  },
-  zIndex: 9999
+  }
 });
 
 /**

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

@@ -86,6 +86,7 @@ export interface PickerStyleProps {
   size?: 'S' | 'M' | 'L' | 'XL',
   /**
    * Whether the picker should be displayed with a quiet style.
+   * @private
    */
   isQuiet?: boolean
 }

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

@@ -116,7 +116,6 @@ let popover = style({
     isExiting: 'in'
   },
   isolation: 'isolate',
-  zIndex: 9999,
   pointerEvents: {
     isExiting: 'none'
   },

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

@@ -91,7 +91,8 @@ let providerStyles = style({
       'layer-1': '--s2-container-bg',
       'layer-2': '--s2-container-bg'
     }
-  }
+  },
+  isolation: 'isolate'
 });
 
 function ProviderInner(props: ProviderProps) {

packages/@react-spectrum/s2/style/properties.json

@@ -166,7 +166,7 @@
     "touchAction": "__X",
     "translate": "__Y",
     "wordBreak": "__Z",
-    "--fs": "__Q"
+    "--fs": "__0"
   },
   "values": {
     "--iconPrimary": {

packages/@react-spectrum/toast/docs/Toast.mdx

@@ -196,3 +196,9 @@ By default, toasts are displayed at the bottom center of the screen. This can be
 <TypeContext.Provider value={docs.links}>
   <InterfaceType properties={docs.exports.ToastContainer.props.properties} showRequired showDefault isComponent />
 </TypeContext.Provider>
+
+## Testing
+
+To identify a particular instance of the secondary or close button, you can use the following data-testid's respectively:
+- `"rsp-Toast-secondaryButton"`
+- `"rsp-Toast-closeButton"`

packages/@react-spectrum/toast/src/Toast.tsx

@@ -119,14 +119,14 @@ export const Toast = React.forwardRef(function Toast(props: SpectrumToastProps,
               UNSAFE_className={classNames(styles, 'spectrum-Button')}
               variant="secondary"
               staticColor="white"
-              data-testid="rsp-toast-secondaryButton">
+              data-testid="rsp-Toast-secondaryButton">
               {actionLabel}
             </Button>
           }
         </div>
       </div>
       <div className={classNames(styles, 'spectrum-Toast-buttons')}>
-        <ClearButton {...closeButtonProps} variant="overBackground" data-testid="rsp-toast-closeButton">
+        <ClearButton {...closeButtonProps} variant="overBackground" data-testid="rsp-Toast-closeButton">
           <CrossMedium />
         </ClearButton>
       </div>

packages/@react-spectrum/toast/test/ToastContainer.test.js

@@ -85,13 +85,18 @@ describe('Toast Provider and Container', function () {
     const domProps = {
       'data-testid': testid
     };
-    let {getByRole, queryByTestId, getByTestId, queryByText} = renderComponent(<RenderToastButton {...domProps} />);
+    let {getByRole, queryByTestId, getByTestId, queryByText} = renderComponent(<RenderToastButton {...domProps} actionLabel="Update" />);
     let button = getByRole('button');
 
     expect(queryByTestId(testid)).toBeNull();
     await user.click(button);
     expect(getByTestId(testid)).not.toBeNull();
     expect(queryByText(/Show Default Toast/)).not.toBeNull();
+    let secondaryButton = getByTestId('rsp-Toast-secondaryButton');
+    expect(secondaryButton).toBeDefined();
+    let closeButton = getByTestId('rsp-Toast-closeButton');
+    expect(closeButton).toBeDefined();
+
   });
 
   it('should label icon by variant', async () => {

packages/@react-types/button/src/index.d.ts

@@ -95,7 +95,7 @@ interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps {
 }
 
 export interface AriaButtonProps<T extends ElementType = 'button'> extends ButtonProps, LinkButtonProps<T>, AriaBaseButtonProps {}
-export interface AriaToggleButtonProps<T extends ElementType = 'button'> extends ToggleButtonProps, Omit<AriaBaseButtonProps, 'aria-current'>, AriaButtonElementTypeProps<T> {}
+export interface AriaToggleButtonProps<T extends ElementType = 'button'> extends ToggleButtonProps, Omit<AriaBaseButtonProps, 'aria-current' | 'form' | 'formAction' | 'formEncType' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'name' | 'value' | 'type'>, AriaButtonElementTypeProps<T> {}
 export interface AriaToggleButtonGroupItemProps<E extends ElementType = 'button'> extends Omit<AriaToggleButtonProps<E>, 'id' | 'isSelected' | 'defaultSelected' | 'onChange'> {
   /** An identifier for the item in the `selectedKeys` of a ToggleButtonGroup. */
   id: Key
@@ -133,7 +133,7 @@ export interface SpectrumLogicButtonProps extends AriaBaseButtonProps, Omit<Butt
   variant: 'and' | 'or'
 }
 
-export interface SpectrumToggleButtonProps extends Omit<ToggleButtonProps, 'onClick'>, Omit<SpectrumActionButtonProps, 'aria-current'> {
+export interface SpectrumToggleButtonProps extends Omit<ToggleButtonProps, 'onClick'>, Omit<SpectrumActionButtonProps, 'aria-current' | 'type' | 'form' | 'formAction' | 'formEncType' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'name' | 'value'> {
   /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
   isEmphasized?: boolean
 }

packages/@react-types/datepicker/src/index.d.ts

@@ -59,17 +59,18 @@ interface DateFieldBase<T extends DateValue> extends InputBase, Validation<Mappe
    * Whether to always show leading zeros in the month, day, and hour fields.
    * By default, this is determined by the user's locale.
    */
-  shouldForceLeadingZeros?: boolean,
+  shouldForceLeadingZeros?: boolean
+}
+
+interface AriaDateFieldBaseProps<T extends DateValue> extends DateFieldBase<T>, AriaLabelingProps, DOMProps {}
+export interface DateFieldProps<T extends DateValue> extends DateFieldBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
+export interface AriaDateFieldProps<T extends DateValue> extends DateFieldProps<T>, AriaDateFieldBaseProps<T>, InputDOMProps {
   /**
    * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    */
   autoComplete?: string
 }
 
-interface AriaDateFieldBaseProps<T extends DateValue> extends DateFieldBase<T>, AriaLabelingProps, DOMProps {}
-export interface DateFieldProps<T extends DateValue> extends DateFieldBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
-export interface AriaDateFieldProps<T extends DateValue> extends DateFieldProps<T>, AriaDateFieldBaseProps<T>, InputDOMProps {}
-
 interface DatePickerBase<T extends DateValue> extends DateFieldBase<T>, OverlayTriggerProps {
   /**
    * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
@@ -84,10 +85,15 @@ interface DatePickerBase<T extends DateValue> extends DateFieldBase<T>, OverlayT
 export interface AriaDatePickerBaseProps<T extends DateValue> extends DatePickerBase<T>, AriaLabelingProps, InputDOMProps, DOMProps {}
 
 export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
-export interface AriaDatePickerProps<T extends DateValue> extends DatePickerProps<T>, AriaDatePickerBaseProps<T> {}
+export interface AriaDatePickerProps<T extends DateValue> extends DatePickerProps<T>, AriaDatePickerBaseProps<T>, InputDOMProps {
+  /**
+   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+   */
+  autoComplete?: string
+}
 
 export type DateRange = RangeValue<DateValue>;
-export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePickerBase<T>, 'validate' | 'autoComplete'>, Validation<RangeValue<MappedDateValue<T>>>, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>> | null> {
+export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePickerBase<T>, 'validate'>, Validation<RangeValue<MappedDateValue<T>>>, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>> | null> {
   /**
    * When combined with `isDateUnavailable`, determines whether non-contiguous ranges,
    * i.e. ranges containing unavailable dates, may be selected.
@@ -103,7 +109,7 @@ export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePick
   endName?: string
 }
 
-export interface AriaDateRangePickerProps<T extends DateValue> extends Omit<AriaDatePickerBaseProps<T>, 'validate' | 'autoComplete'>, DateRangePickerProps<T> {}
+export interface AriaDateRangePickerProps<T extends DateValue> extends Omit<AriaDatePickerBaseProps<T>, 'validate'>, DateRangePickerProps<T> {}
 
 interface SpectrumDateFieldBase<T extends DateValue> extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation<MappedDateValue<T>>, StyleProps {
   /**