From 7ff538a608d3ec1c33d9e3be4c6eaffe3044d7bd Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Mon, 2 Feb 2026 17:09:07 -0800 Subject: [PATCH] Revert "feat: allow customizing behavior of pressed state (#8971)" This reverts commit 92aa6f497f46b401d2bbc9db0abf7af7784ae7ab. --- packages/@react-spectrum/s2/src/ComboBox.tsx | 6 +- .../@react-spectrum/s2/src/DatePicker.tsx | 6 +- .../s2/src/DateRangePicker.tsx | 3 +- .../@react-spectrum/s2/src/DialogTrigger.tsx | 11 +- packages/@react-spectrum/s2/src/Menu.tsx | 4 +- packages/@react-spectrum/s2/src/Picker.tsx | 6 +- .../@react-spectrum/s2/src/TabsPicker.tsx | 129 ++++++++---------- .../react-aria-components/src/ComboBox.tsx | 6 +- .../react-aria-components/src/DatePicker.tsx | 12 +- packages/react-aria-components/src/Dialog.tsx | 4 +- packages/react-aria-components/src/Menu.tsx | 4 +- packages/react-aria-components/src/Select.tsx | 6 +- .../stories/DatePicker.stories.tsx | 3 - .../stories/Select.stories.tsx | 3 - .../test/ComboBox.test.js | 9 -- .../test/DatePicker.test.js | 9 -- .../test/DateRangePicker.test.js | 9 -- .../react-aria-components/test/Dialog.test.js | 17 --- .../react-aria-components/test/Menu.test.tsx | 19 --- .../react-aria-components/test/Select.test.js | 9 -- 20 files changed, 91 insertions(+), 184 deletions(-) diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx index d3cd25f882f..e6178185891 100644 --- a/packages/@react-spectrum/s2/src/ComboBox.tsx +++ b/packages/@react-spectrum/s2/src/ComboBox.tsx @@ -79,7 +79,7 @@ export interface ComboboxStyleProps { size?: 'S' | 'M' | 'L' | 'XL' } export interface ComboBoxProps extends - Omit, 'children' | 'style' | 'className' | 'render' | 'defaultFilter' | 'allowsEmptyCollection' | 'isTriggerUpWhenOpen' | keyof GlobalDOMAttributes>, + Omit, '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 ( pressScale(buttonRef)(renderProps)} className={renderProps => inputButton({ ...renderProps, diff --git a/packages/@react-spectrum/s2/src/DatePicker.tsx b/packages/@react-spectrum/s2/src/DatePicker.tsx index ab44172d92c..c5e1ee8ca40 100644 --- a/packages/@react-spectrum/s2/src/DatePicker.tsx +++ b/packages/@react-spectrum/s2/src/DatePicker.tsx @@ -41,7 +41,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface DatePickerProps extends - Omit, 'children' | 'className' | 'style' | 'render' | 'isTriggerUpWhenOpen' | keyof GlobalDOMAttributes>, + Omit, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, Pick, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>, Pick, 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 ( - + } + }], + [InsideSelectValueContext, true] + ]}> + {defaultChildren} + + ); + }} + + + extends Omit, HTMLDivElement>>(null); @@ -210,7 +208,7 @@ function ComboBoxInner({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, { diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx index c1b8821612d..61a50dc6ae0 100644 --- a/packages/react-aria-components/src/DatePicker.tsx +++ b/packages/react-aria-components/src/DatePicker.tsx @@ -88,18 +88,14 @@ export interface DatePickerProps extends Omit, - /** Whether the trigger is up when the overlay is open. */ - isTriggerUpWhenOpen?: boolean + className?: ClassNameOrFunction } export interface DateRangePickerProps extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick, 'shouldCloseOnSelect'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { /** * 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, - /** Whether the trigger is up when the overlay is open. */ - isTriggerUpWhenOpen?: boolean + className?: ClassNameOrFunction } export const DatePickerContext = createContext, 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], diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx index c95dce96e32..2091109092a 100644 --- a/packages/react-aria-components/src/Dialog.tsx +++ b/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 }] ]}> - + {props.children} diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx index 994df7d3932..91cb0727e4a 100644 --- a/packages/react-aria-components/src/Menu.tsx +++ b/packages/react-aria-components/src/Menu.tsx @@ -64,8 +64,6 @@ export const RootMenuTriggerStateContext = createContext(null); export interface MenuTriggerProps extends BaseMenuTriggerProps { - /** Whether the trigger is up when the overlay is open. */ - isTriggerUpWhenOpen?: boolean, children: ReactNode } @@ -105,7 +103,7 @@ export function MenuTrigger(props: MenuTriggerProps): JSX.Element { 'aria-labelledby': menuProps['aria-labelledby'] }] ]}> - + {props.children} diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx index ded3a340eee..3d4e3e311bb 100644 --- a/packages/react-aria-components/src/Select.tsx +++ b/packages/react-aria-components/src/Select.tsx @@ -87,9 +87,7 @@ export interface SelectProps, HTMLDivElement>>(null); @@ -204,7 +202,7 @@ function SelectInner({props, selectRef: ref, collection}: Sele [SelectStateContext, state], [SelectValueContext, valueProps], [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}], - [ButtonContext, {...triggerProps, ref: buttonRef, isPressed: !props.isTriggerUpWhenOpen && state.isOpen, autoFocus: props.autoFocus}], + [ButtonContext, {...triggerProps, ref: buttonRef, isPressed: state.isOpen, autoFocus: props.autoFocus}], [OverlayTriggerStateContext, state], [PopoverContext, { trigger: 'Select', diff --git a/packages/react-aria-components/stories/DatePicker.stories.tsx b/packages/react-aria-components/stories/DatePicker.stories.tsx index bc9cde5a648..ae079959edf 100644 --- a/packages/react-aria-components/stories/DatePicker.stories.tsx +++ b/packages/react-aria-components/stories/DatePicker.stories.tsx @@ -47,9 +47,6 @@ export default { validationBehavior: { control: 'select', options: ['native', 'aria'] - }, - isTriggerUpWhenOpen: { - control: 'boolean' } } } as Meta; diff --git a/packages/react-aria-components/stories/Select.stories.tsx b/packages/react-aria-components/stories/Select.stories.tsx index b7bf2204137..c71374de62e 100644 --- a/packages/react-aria-components/stories/Select.stories.tsx +++ b/packages/react-aria-components/stories/Select.stories.tsx @@ -31,9 +31,6 @@ export default { selectionMode: { control: 'radio', options: ['single', 'multiple'] - }, - isTriggerUpWhenOpen: { - control: 'boolean' } } } as Meta; diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js index a9cf870563c..bb17da5e894 100644 --- a/packages/react-aria-components/test/ComboBox.test.js +++ b/packages/react-aria-components/test/ComboBox.test.js @@ -115,15 +115,6 @@ describe('ComboBox', () => { expect(button).toHaveAttribute('data-pressed'); }); - it('should not apply isPressed state to button when expanded and isTriggerUpWhenOpen is true', async () => { - let {getByRole} = render(); - let button = getByRole('button'); - - expect(button).not.toHaveAttribute('data-pressed'); - await user.click(button); - expect(button).not.toHaveAttribute('data-pressed'); - }); - it('should support filtering sections', async () => { let tree = render( diff --git a/packages/react-aria-components/test/DatePicker.test.js b/packages/react-aria-components/test/DatePicker.test.js index e68afdb3be3..62d0ce8c462 100644 --- a/packages/react-aria-components/test/DatePicker.test.js +++ b/packages/react-aria-components/test/DatePicker.test.js @@ -113,15 +113,6 @@ describe('DatePicker', () => { expect(button).toHaveAttribute('data-pressed'); }); - it('should not apply isPressed state to button when expanded and isTriggerUpWhenOpen is true', async () => { - let {getByRole} = render(); - let button = getByRole('button'); - - expect(button).not.toHaveAttribute('data-pressed'); - await user.click(button); - expect(button).not.toHaveAttribute('data-pressed'); - }); - it('should support data-open state', async () => { let {getByRole} = render(); let datePicker = document.querySelector('.react-aria-DatePicker'); diff --git a/packages/react-aria-components/test/DateRangePicker.test.js b/packages/react-aria-components/test/DateRangePicker.test.js index f89cc8fee01..2dda3884105 100644 --- a/packages/react-aria-components/test/DateRangePicker.test.js +++ b/packages/react-aria-components/test/DateRangePicker.test.js @@ -134,15 +134,6 @@ describe('DateRangePicker', () => { await user.click(button); expect(button).toHaveAttribute('data-pressed'); }); - - it('should not apply isPressed state to button when expanded and isTriggerUpWhenOpen is true', async () => { - let {getByRole} = render(); - let button = getByRole('button'); - - expect(button).not.toHaveAttribute('data-pressed'); - await user.click(button); - expect(button).not.toHaveAttribute('data-pressed'); - }); it('should support data-open state', async () => { let {getByRole} = render(); diff --git a/packages/react-aria-components/test/Dialog.test.js b/packages/react-aria-components/test/Dialog.test.js index fa5a043b8d8..b9c57dc9940 100644 --- a/packages/react-aria-components/test/Dialog.test.js +++ b/packages/react-aria-components/test/Dialog.test.js @@ -56,23 +56,6 @@ describe('Dialog', () => { expect(dialog).toHaveAttribute('data-rac'); }); - it('should not apply isPressed state on trigger when expanded and isTriggerUpWhenOpen is true', async () => { - let {getByRole} = render( - - - - Title - - - ); - - let button = getByRole('button'); - expect(button).not.toHaveAttribute('data-pressed'); - - await user.click(button); - expect(button).not.toHaveAttribute('data-pressed'); - }); - it('works with modal', async () => { let {getByRole} = render( diff --git a/packages/react-aria-components/test/Menu.test.tsx b/packages/react-aria-components/test/Menu.test.tsx index aa3f48f1dbe..b46ac184faf 100644 --- a/packages/react-aria-components/test/Menu.test.tsx +++ b/packages/react-aria-components/test/Menu.test.tsx @@ -536,25 +536,6 @@ describe('Menu', () => { expect(onAction).toHaveBeenLastCalledWith('rename'); }); - it('should not apply isPressed state on trigger when expanded and isTriggerUpWhenOpen is true', async () => { - let {getByRole} = render( - - - - - Open - - - - ); - - let button = getByRole('button'); - expect(button).not.toHaveAttribute('data-pressed'); - - await user.click(button); - expect(button).not.toHaveAttribute('data-pressed'); - }); - it('should support onScroll', () => { let onScroll = jest.fn(); let {getByRole} = renderMenu({onScroll}); diff --git a/packages/react-aria-components/test/Select.test.js b/packages/react-aria-components/test/Select.test.js index 97d7cba1038..78dea4fccc1 100644 --- a/packages/react-aria-components/test/Select.test.js +++ b/packages/react-aria-components/test/Select.test.js @@ -399,15 +399,6 @@ describe('Select', () => { expect(trigger).toHaveTextContent('Kangaroo'); }); - it('should not apply isPressed state to button when expanded and isTriggerUpWhenOpen is true', async () => { - let {getByRole} = render(); - let button = getByRole('button'); - - expect(button).not.toHaveAttribute('data-pressed'); - await user.click(button); - expect(button).not.toHaveAttribute('data-pressed'); - }); - describe('typeahead', () => { beforeEach(() => { jest.useFakeTimers();