Revert "feat: allow customizing behavior of pressed state (#8971)" (#9578)

This reverts commit 92aa6f4.

Author: LFDanLu

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())({
@@ -644,6 +643,9 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
           )}
           <Button
             ref={buttonRef}
+            // Prevent press scale from sticking while ComboBox is open.
+            // @ts-ignore
+            isPressed={false}
             style={renderProps => pressScale(buttonRef)(renderProps)}
             className={renderProps => inputButton({
               ...renderProps,

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,
@@ -278,6 +277,9 @@ export function CalendarButton(props: {isOpen: boolean, size: 'S' | 'M' | 'L' |
   return (
     <Button
       ref={buttonRef}
+      // Prevent press scale from sticking while DatePicker is open.
+      // @ts-ignore
+      isPressed={false}
       onFocusChange={setButtonHasFocus}
       style={pressScale(buttonRef)}
       className={renderProps => inputButton({

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

@@ -11,9 +11,10 @@
  */
 
 import {DialogTrigger as AriaDialogTrigger, DialogTriggerProps as AriaDialogTriggerProps} from 'react-aria-components';
+import {PressResponder} from '@react-aria/interactions';
 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 +23,12 @@ export type DialogTriggerProps = Omit<AriaDialogTriggerProps, 'isTriggerUpWhenOp
  */
 export function DialogTrigger(props: DialogTriggerProps): ReactNode {
   return (
-    <AriaDialogTrigger {...props} isTriggerUpWhenOpen />
+    <AriaDialogTrigger {...props}>
+      {/* RAC sets isPressed via PressResponder when the dialog is open.
+          We don't want press scaling to appear to get "stuck", so override this. */}
+      <PressResponder isPressed={false}>
+        {props.children}
+      </PressResponder>
+    </AriaDialogTrigger>
   );
 }

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.
    *
@@ -543,6 +543,8 @@ export function MenuItem(props: MenuItemProps): ReactNode {
  * linking the Menu's open state with the trigger's press state.
  */
 function MenuTrigger(props: MenuTriggerProps): ReactNode {
+  // RAC sets isPressed via PressResponder when the menu is open.
+  // We don't want press scaling to appear to get "stuck", so override this.
   // For mouse interactions, menus 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.

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

@@ -98,7 +98,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 +351,6 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
   return (
     <AriaSelect
       {...pickerProps}
-      isTriggerUpWhenOpen
       aria-describedby={spinnerId}
       placeholder={placeholder}
       style={UNSAFE_style}
@@ -523,6 +522,9 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
       <Button
         ref={buttonRef}
         style={renderProps => pressScale(buttonRef)(renderProps)}
+        // Prevent press scale from sticking while Picker is open.
+        // @ts-ignore
+        isPressed={false}
         className={renderProps => inputButton({
           ...renderProps,
           size: size,

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

@@ -41,24 +41,22 @@ import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
 import {
   FieldLabel
 } from './Field';
-import {FocusableRef, FocusableRefValue, PressEvent, SpectrumLabelableProps} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
 import {Placement, useLocale} from 'react-aria';
 import {Popover} from './Popover';
-import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useContext, useRef, useState} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useFormProps} from './Form';
-import {useGlobalListeners} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 export interface PickerStyleProps {
 }
 export interface PickerProps<T extends object> extends
-  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'render' | 'placeholder' | 'isTriggerUpWhenOpen'>,
+  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'render' | 'placeholder'>,
   PickerStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -184,85 +182,70 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
   let {direction: dir} = useLocale();
   let RTLFlipOffset = dir === 'rtl' ? -1 : 1;
 
-  // 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 (
     <div>
       <AriaSelect
         {...pickerProps}
-        isTriggerUpWhenOpen
         className=""
         aria-labelledby={`${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`}>
         {({isOpen}) => (
           <>
             <FieldLabel isQuiet={isQuiet} />
-            <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
-              <Button
-                ref={domRef}
-                style={renderProps => pressScale(domRef)(renderProps)}
-                className={renderProps => inputButton({
-                  ...renderProps,
-                  size: 'M',
-                  isOpen,
-                  isQuiet,
-                  density
-                })}>
-                <SelectValue className={valueStyles + ' ' + raw('&> * {display: none;}')}>
-                  {({defaultChildren}) => {
-                    return (
-                      <Provider
-                        values={[
-                          [IconContext, {
-                            slots: {
-                              icon: {
-                                render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
-                                styles: icon
-                              }
+            <Button
+              ref={domRef}
+              style={renderProps => pressScale(domRef)(renderProps)}
+              // Prevent press scale from sticking while Picker is open.
+              // @ts-ignore
+              isPressed={false}
+              className={renderProps => inputButton({
+                ...renderProps,
+                size: 'M',
+                isOpen,
+                isQuiet,
+                density
+              })}>
+              <SelectValue className={valueStyles + ' ' + raw('&> * {display: none;}')}>
+                {({defaultChildren}) => {
+                  return (
+                    <Provider
+                      values={[
+                        [IconContext, {
+                          slots: {
+                            icon: {
+                              render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
+                              styles: icon
                             }
-                          }],
-                          [TextContext, {
-                            slots: {
-                              // Default slot is useful when converting other collections to PickerItems.
-                              [DEFAULT_SLOT]: {
-                                id: valueId,
-                                styles: style({
-                                  display: {
-                                    default: 'block',
-                                    labelBehavior: {
-                                      hide: 'none'
-                                    }
-                                  },
-                                  flexGrow: 1,
-                                  truncate: true
-                                })({labelBehavior})
-                              }
+                          }
+                        }],
+                        [TextContext, {
+                          slots: {
+                            // Default slot is useful when converting other collections to PickerItems.
+                            [DEFAULT_SLOT]: {
+                              id: valueId,
+                              styles: style({
+                                display: {
+                                  default: 'block',
+                                  labelBehavior: {
+                                    hide: 'none'
+                                  }
+                                },
+                                flexGrow: 1,
+                                truncate: true
+                              })({labelBehavior})
                             }
-                          }],
-                          [InsideSelectValueContext, true]
-                        ]}>
-                        {defaultChildren}
-                      </Provider>
-                    );
-                  }}
-                </SelectValue>
-                <ChevronIcon
-                  size={size}
-                  className={iconStyles} />
-              </Button>
-            </PressResponder>
+                          }
+                        }],
+                        [InsideSelectValueContext, true]
+                      ]}>
+                      {defaultChildren}
+                    </Provider>
+                  );
+                }}
+              </SelectValue>
+              <ChevronIcon
+                size={size}
+                className={iconStyles} />
+            </Button>
             <Popover
               hideArrow
               offset={menuOffset}

packages/react-aria-components/src/ComboBox.tsx

@@ -78,9 +78,7 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
    */
   formValue?: 'text' | 'key',
   /** Whether the combo box allows the menu to be open when the collection is empty. */
-  allowsEmptyCollection?: boolean,
-  /** Whether the trigger is up when the overlay is open. */
-  isTriggerUpWhenOpen?: boolean
+  allowsEmptyCollection?: boolean
 }
 
 export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);
@@ -210,7 +208,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
       values={[
         [ComboBoxStateContext, state],
         [LabelContext, {...labelProps, ref: labelRef}],
-        [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: !props.isTriggerUpWhenOpen && state.isOpen}],
+        [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],
         [InputContext, {...inputProps, ref: inputRef}],
         [OverlayTriggerStateContext, state],
         [PopoverContext, {

packages/react-aria-components/src/DatePicker.tsx

@@ -88,18 +88,14 @@ export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePicke
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-DatePicker'
    */
-  className?: ClassNameOrFunction<DatePickerRenderProps>,
-  /** Whether the trigger is up when the overlay is open. */
-  isTriggerUpWhenOpen?: boolean
+  className?: ClassNameOrFunction<DatePickerRenderProps>
 }
 export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
    * @default 'react-aria-DateRangePicker'
    */
-  className?: ClassNameOrFunction<DateRangePickerRenderProps>,
-  /** Whether the trigger is up when the overlay is open. */
-  isTriggerUpWhenOpen?: boolean
+  className?: ClassNameOrFunction<DateRangePickerRenderProps>
 }
 
 export const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
@@ -179,7 +175,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         [DatePickerStateContext, state],
         [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],
         [DateFieldContext, fieldProps],
-        [ButtonContext, {...buttonProps, isPressed: !props.isTriggerUpWhenOpen && state.isOpen}],
+        [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [CalendarContext, calendarProps],
         [OverlayTriggerStateContext, state],
@@ -288,7 +284,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
       values={[
         [DateRangePickerStateContext, state],
         [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],
-        [ButtonContext, {...buttonProps, isPressed: !props.isTriggerUpWhenOpen && state.isOpen}],
+        [ButtonContext, {...buttonProps, isPressed: state.isOpen}],
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [RangeCalendarContext, calendarProps],
         [OverlayTriggerStateContext, state],

packages/react-aria-components/src/Dialog.tsx

@@ -22,8 +22,6 @@ import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallb
 import {RootMenuTriggerStateContext} from './Menu';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
-  /** Whether the trigger is up when the overlay is open. */
-  isTriggerUpWhenOpen?: boolean,
   children: ReactNode
 }
 
@@ -88,7 +86,7 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
           style: {'--trigger-width': buttonWidth} as React.CSSProperties
         }]
       ]}>
-      <PressResponder {...triggerProps} ref={buttonRef} isPressed={!props.isTriggerUpWhenOpen && state.isOpen}>
+      <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>
         {props.children}
       </PressResponder>
     </Provider>