fix: fix isPressed state to be separate from overlay state

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

@@ -79,7 +79,7 @@ export interface ComboboxStyleProps {
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 export interface ComboBoxProps<T extends object> extends
-  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'render' | 'defaultFilter' | 'allowsEmptyCollection' | 'isTriggerUpWhenOpen' | keyof GlobalDOMAttributes>,
+  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'render' | 'defaultFilter' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,
   ComboboxStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -354,7 +354,6 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
   return (
     <AriaComboBox
       {...comboBoxProps}
-      isTriggerUpWhenOpen
       allowsEmptyCollection
       style={UNSAFE_style}
       className={UNSAFE_className + style(field(), getAllowedOverrides())({

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

@@ -41,7 +41,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface DatePickerProps<T extends DateValue> extends
-  Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | 'render' | 'isTriggerUpWhenOpen' | keyof GlobalDOMAttributes>,
+  Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
   Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
   Pick<PopoverProps, 'shouldFlip'>,
   StyleProps,
@@ -155,7 +155,6 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       ref={ref}
       isRequired={isRequired}
       {...dateFieldProps}
-      isTriggerUpWhenOpen
       style={UNSAFE_style}
       className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({
         isInForm: !!formContext,

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

@@ -33,7 +33,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface DateRangePickerProps<T extends DateValue> extends
-  Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | 'render' | 'isTriggerUpWhenOpen' | keyof GlobalDOMAttributes>,
+  Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
   Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
   Pick<PopoverProps, 'shouldFlip'>,
   StyleProps,
@@ -89,7 +89,6 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
       ref={ref}
       isRequired={isRequired}
       {...dateFieldProps}
-      isTriggerUpWhenOpen
       style={UNSAFE_style}
       className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({
         isInForm: !!formContext,

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

@@ -13,7 +13,7 @@
 import {DialogTrigger as AriaDialogTrigger, DialogTriggerProps as AriaDialogTriggerProps} from 'react-aria-components';
 import {ReactNode} from 'react';
 
-export type DialogTriggerProps = Omit<AriaDialogTriggerProps, 'isTriggerUpWhenOpen'>;
+export interface DialogTriggerProps extends AriaDialogTriggerProps {}
 
 /**
  * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
@@ -22,6 +22,6 @@ export type DialogTriggerProps = Omit<AriaDialogTriggerProps, 'isTriggerUpWhenOp
  */
 export function DialogTrigger(props: DialogTriggerProps): ReactNode {
   return (
-    <AriaDialogTrigger {...props} isTriggerUpWhenOpen />
+    <AriaDialogTrigger {...props} />
   );
 }

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

@@ -53,7 +53,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 // viewbox on LinkOut is super weird just because i copied the icon from designs...
 // need to strip id's from icons
 
-export interface MenuTriggerProps extends Omit<AriaMenuTriggerProps, 'isTriggerUpWhenOpen'> {
+export interface MenuTriggerProps extends AriaMenuTriggerProps {
   /**
    * Alignment of the menu relative to the trigger.
    *

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

@@ -32,7 +32,7 @@ import {
   SelectValue,
   Virtualizer
 } from 'react-aria-components';
-import {AsyncLoadable, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';
+import {AsyncLoadable, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps, LoadingState, RefObject, SpectrumLabelableProps} from '@react-types/shared';
 import {AvatarContext} from './Avatar';
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {box, iconStyles as checkboxIconStyles} from './Checkbox';
@@ -72,15 +72,14 @@ import intlMessages from '../intl/*.json';
 import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria';
 import {Popover} from './Popover';
-import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef, useState} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
-import {useGlobalListeners, useSlotId} from '@react-aria/utils';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useScale} from './utils';
+import {useSlotId} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface PickerStyleProps {
@@ -98,7 +97,7 @@ export interface PickerStyleProps {
 
 type SelectionMode = 'single' | 'multiple';
 export interface PickerProps<T extends object, M extends SelectionMode = 'single'> extends
-  Omit<AriaSelectProps<T, M>, 'children' | 'style' | 'className' | 'render' | 'allowsEmptyCollection' | 'isTriggerUpWhenOpen' | keyof GlobalDOMAttributes>,
+  Omit<AriaSelectProps<T, M>, 'children' | 'style' | 'className' | 'render' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,
   PickerStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -351,7 +350,6 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
   return (
     <AriaSelect
       {...pickerProps}
-      isTriggerUpWhenOpen
       aria-describedby={spinnerId}
       placeholder={placeholder}
       style={UNSAFE_style}
@@ -488,7 +486,6 @@ interface PickerButtonInnerProps<T extends object> extends PickerStyleProps, Omi
   buttonRef: RefObject<HTMLButtonElement | null>
 }
 
-// Needs to be hidable component or otherwise the PressResponder throws a warning when rendered in the fake DOM and tries to register
 const PickerButton = createHideableComponent(function PickerButton<T extends object>(props: PickerButtonInnerProps<T>) {
   let {
     isOpen,
@@ -503,102 +500,85 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
   } = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
 
-  // For mouse interactions, pickers open on press start. When the popover underlay appears
-  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
-  // to occur. We override this by listening for pointerup on the document ourselves.
-  let [isPressed, setPressed] = useState(false);
-  let {addGlobalListener} = useGlobalListeners();
-  let onPressStart = (e: PressEvent) => {
-    if (e.pointerType !== 'mouse') {
-      return;
-    }
-    setPressed(true);
-    addGlobalListener(document, 'pointerup', () => {
-      setPressed(false);
-    }, {once: true, capture: true});
-  };
-
   return (
-    <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
-      <Button
-        ref={buttonRef}
-        style={renderProps => pressScale(buttonRef)(renderProps)}
-        className={renderProps => inputButton({
-          ...renderProps,
-          size: size,
-          isOpen,
-          isQuiet
-        })}>
-        {(renderProps) => (
-          <>
-            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}>
-              {({selectedItems, defaultChildren}) => {
-                return (
-                  <Provider
-                    values={[
-                      [IconContext, {
-                        slots: {
-                          icon: {
-                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
-                            styles: icon
-                          }
+    <Button
+      ref={buttonRef}
+      style={renderProps => pressScale(buttonRef)(renderProps)}
+      className={renderProps => inputButton({
+        ...renderProps,
+        size: size,
+        isOpen,
+        isQuiet
+      })}>
+      {(renderProps) => (
+        <>
+          <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}>
+            {({selectedItems, defaultChildren}) => {
+              return (
+                <Provider
+                  values={[
+                    [IconContext, {
+                      slots: {
+                        icon: {
+                          render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
+                          styles: icon
                         }
-                      }],
-                      [AvatarContext, {
-                        slots: {
-                          avatar: {
-                            size: avatarSize[size ?? 'M'],
-                            styles: avatar
-                          }
+                      }
+                    }],
+                    [AvatarContext, {
+                      slots: {
+                        avatar: {
+                          size: avatarSize[size ?? 'M'],
+                          styles: avatar
                         }
-                      }],
-                      [TextContext, {
-                        slots: {
-                          description: {},
-                          [DEFAULT_SLOT]: {
-                            styles: style({
-                              display: 'block',
-                              flexGrow: 1,
-                              truncate: true
-                            }),
-                            // @ts-ignore
-                            'data-slot': 'label'
-                          },
-                          label: {
-                            styles: style({
-                              display: 'block',
-                              flexGrow: 1,
-                              truncate: true
-                            }),
-                            // @ts-ignore not technically necessary, but good for consistency
-                            'data-slot': 'label'
-                          }
+                      }
+                    }],
+                    [TextContext, {
+                      slots: {
+                        description: {},
+                        [DEFAULT_SLOT]: {
+                          styles: style({
+                            display: 'block',
+                            flexGrow: 1,
+                            truncate: true
+                          }),
+                          // @ts-ignore
+                          'data-slot': 'label'
+                        },
+                        label: {
+                          styles: style({
+                            display: 'block',
+                            flexGrow: 1,
+                            truncate: true
+                          }),
+                          // @ts-ignore not technically necessary, but good for consistency
+                          'data-slot': 'label'
                         }
-                      }],
-                      [InsideSelectValueContext, true]
-                    ]}>
-                    {selectedItems.length <= 1
-                      ? defaultChildren
-                      : <Text slot="label">{stringFormatter.format('picker.selectedCount', {count: selectedItems.length})}</Text>
-                    }
-                  </Provider>
-                );
-              }}
-            </SelectValue>
-            {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
-            {loadingState === 'loading' && !isOpen && loadingCircle}
-            <ChevronIcon
-              size={size}
-              className={iconStyles({isLoading: loadingState === 'loading'})} />
-            {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }
-            {isInvalid && !isDisabled && !isQuiet &&
-              // @ts-ignore known limitation detecting functions from the theme
-              <div className={invalidBorder({...renderProps, size})} />
-            }
-          </>
-        )}
-      </Button>
-    </PressResponder>
+                      }
+                    }],
+                    [InsideSelectValueContext, true]
+                  ]}>
+                  {selectedItems.length <= 1
+                    ? defaultChildren
+                    : <Text slot="label">{stringFormatter.format('picker.selectedCount', {count: selectedItems.length})}</Text>
+                  }
+                </Provider>
+              );
+            }}
+          </SelectValue>
+          {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
+          {loadingState === 'loading' && !isOpen && loadingCircle}
+          <ChevronIcon
+            size={size}
+            className={iconStyles({isLoading: loadingState === 'loading'})} />
+          {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }
+          {isInvalid && !isDisabled && !isQuiet &&
+            // @ts-ignore known limitation detecting functions from the theme
+            <div className={invalidBorder({...renderProps, size})} />
+          }
+        </>
+      )}
+    </Button>
   );
 });