diff --git a/packages/@react-aria/overlays/src/ariaHideOutside.ts b/packages/@react-aria/overlays/src/ariaHideOutside.ts index 07d350ef47e..abcbd747b80 100644 --- a/packages/@react-aria/overlays/src/ariaHideOutside.ts +++ b/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) && diff --git a/packages/@react-aria/overlays/test/ariaHideOutside.test.js b/packages/@react-aria/overlays/test/ariaHideOutside.test.js index be0196cb5e3..0eddc67e0ac 100644 --- a/packages/@react-aria/overlays/test/ariaHideOutside.test.js +++ b/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'); }); }); diff --git a/packages/@react-spectrum/dialog/docs/AlertDialog.mdx b/packages/@react-spectrum/dialog/docs/AlertDialog.mdx index 5498c3c88dc..e7008a09092 100644 --- a/packages/@react-spectrum/dialog/docs/AlertDialog.mdx +++ b/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"` \ No newline at end of file diff --git a/packages/@react-spectrum/dialog/src/AlertDialog.tsx b/packages/@react-spectrum/dialog/src/AlertDialog.tsx index 00f6cb9a2a7..307657593fd 100644 --- a/packages/@react-spectrum/dialog/src/AlertDialog.tsx +++ b/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} } @@ -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} } @@ -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} diff --git a/packages/@react-spectrum/dialog/test/AlertDialog.test.js b/packages/@react-spectrum/dialog/test/AlertDialog.test.js index cc0ea0aff41..bbcba41e118 100644 --- a/packages/@react-spectrum/dialog/test/AlertDialog.test.js +++ b/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(); }); }); diff --git a/packages/@react-spectrum/s2/src/AlertDialog.tsx b/packages/@react-spectrum/s2/src/AlertDialog.tsx index c8ed9643e34..dfa156cf042 100644 --- a/packages/@react-spectrum/s2/src/AlertDialog.tsx +++ b/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} } @@ -139,7 +140,8 @@ 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} } @@ -147,7 +149,8 @@ export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogPro 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} diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx index bc7395724de..e7086d4a568 100644 --- a/packages/@react-spectrum/s2/src/Content.tsx +++ b/packages/@react-spectrum/s2/src/Content.tsx @@ -28,7 +28,7 @@ interface ContentProps extends UnsafeStyles, SlotProps { } interface HeadingProps extends Omit { - children?: ReactNode, + children: ReactNode, level?: number } diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx index 8bbf7d266d7..67913f99699 100644 --- a/packages/@react-spectrum/s2/src/Modal.tsx +++ b/packages/@react-spectrum/s2/src/Modal.tsx @@ -44,8 +44,7 @@ const modalOverlayStyles = style({ transitionDuration: { default: 250, isExiting: 130 - }, - zIndex: 9999 + } }); /** diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx index 9a16552c16c..cc450d41578 100644 --- a/packages/@react-spectrum/s2/src/Picker.tsx +++ b/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 } diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx index 5efb10411f1..2a2164d1527 100644 --- a/packages/@react-spectrum/s2/src/Popover.tsx +++ b/packages/@react-spectrum/s2/src/Popover.tsx @@ -116,7 +116,6 @@ let popover = style({ isExiting: 'in' }, isolation: 'isolate', - zIndex: 9999, pointerEvents: { isExiting: 'none' }, diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx index a69579deb40..19f76b05b69 100644 --- a/packages/@react-spectrum/s2/src/Provider.tsx +++ b/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) { diff --git a/packages/@react-spectrum/s2/style/properties.json b/packages/@react-spectrum/s2/style/properties.json index 73280da13f9..b026a1fc374 100644 --- a/packages/@react-spectrum/s2/style/properties.json +++ b/packages/@react-spectrum/s2/style/properties.json @@ -166,7 +166,7 @@ "touchAction": "__X", "translate": "__Y", "wordBreak": "__Z", - "--fs": "__Q" + "--fs": "__0" }, "values": { "--iconPrimary": { diff --git a/packages/@react-spectrum/toast/docs/Toast.mdx b/packages/@react-spectrum/toast/docs/Toast.mdx index 917a7556d46..1363e38d506 100644 --- a/packages/@react-spectrum/toast/docs/Toast.mdx +++ b/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 + +## 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"` diff --git a/packages/@react-spectrum/toast/src/Toast.tsx b/packages/@react-spectrum/toast/src/Toast.tsx index 0981418c735..30966ca6f6d 100644 --- a/packages/@react-spectrum/toast/src/Toast.tsx +++ b/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} }
- +
diff --git a/packages/@react-spectrum/toast/test/ToastContainer.test.js b/packages/@react-spectrum/toast/test/ToastContainer.test.js index e9b833c16cf..1a637b18690 100644 --- a/packages/@react-spectrum/toast/test/ToastContainer.test.js +++ b/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(); + let {getByRole, queryByTestId, getByTestId, queryByText} = renderComponent(); 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 () => { diff --git a/packages/@react-types/button/src/index.d.ts b/packages/@react-types/button/src/index.d.ts index 49a0b65fb08..db5ff9fe37d 100644 --- a/packages/@react-types/button/src/index.d.ts +++ b/packages/@react-types/button/src/index.d.ts @@ -95,7 +95,7 @@ interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps { } export interface AriaButtonProps extends ButtonProps, LinkButtonProps, AriaBaseButtonProps {} -export interface AriaToggleButtonProps extends ToggleButtonProps, Omit, AriaButtonElementTypeProps {} +export interface AriaToggleButtonProps extends ToggleButtonProps, Omit, AriaButtonElementTypeProps {} export interface AriaToggleButtonGroupItemProps extends Omit, '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, Omit { +export interface SpectrumToggleButtonProps extends Omit, Omit { /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */ isEmphasized?: boolean } diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts index 6877d61e49c..652ca80f50b 100644 --- a/packages/@react-types/datepicker/src/index.d.ts +++ b/packages/@react-types/datepicker/src/index.d.ts @@ -59,17 +59,18 @@ interface DateFieldBase extends InputBase, Validation extends DateFieldBase, AriaLabelingProps, DOMProps {} +export interface DateFieldProps extends DateFieldBase, ValueBase | null> {} +export interface AriaDateFieldProps extends DateFieldProps, AriaDateFieldBaseProps, 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 extends DateFieldBase, AriaLabelingProps, DOMProps {} -export interface DateFieldProps extends DateFieldBase, ValueBase | null> {} -export interface AriaDateFieldProps extends DateFieldProps, AriaDateFieldBaseProps, InputDOMProps {} - interface DatePickerBase extends DateFieldBase, 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 extends DateFieldBase, OverlayT export interface AriaDatePickerBaseProps extends DatePickerBase, AriaLabelingProps, InputDOMProps, DOMProps {} export interface DatePickerProps extends DatePickerBase, ValueBase | null> {} -export interface AriaDatePickerProps extends DatePickerProps, AriaDatePickerBaseProps {} +export interface AriaDatePickerProps extends DatePickerProps, AriaDatePickerBaseProps, 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; -export interface DateRangePickerProps extends Omit, 'validate' | 'autoComplete'>, Validation>>, ValueBase | null, RangeValue> | null> { +export interface DateRangePickerProps extends Omit, 'validate'>, Validation>>, ValueBase | null, RangeValue> | 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 extends Omit extends Omit, 'validate' | 'autoComplete'>, DateRangePickerProps {} +export interface AriaDateRangePickerProps extends Omit, 'validate'>, DateRangePickerProps {} interface SpectrumDateFieldBase extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation>, StyleProps { /**