diff --git a/packages/@react-spectrum/dialog/src/DialogContainer.tsx b/packages/@react-spectrum/dialog/src/DialogContainer.tsx index f09003fe78e..6db65ef8644 100644 --- a/packages/@react-spectrum/dialog/src/DialogContainer.tsx +++ b/packages/@react-spectrum/dialog/src/DialogContainer.tsx @@ -27,8 +27,7 @@ export function DialogContainer(props: SpectrumDialogContainerProps) { type = 'modal', onDismiss, isDismissable, - isKeyboardDismissDisabled, - UNSTABLE_portalContainer + isKeyboardDismissDisabled } = props; let childArray = React.Children.toArray(children); @@ -68,7 +67,6 @@ export function DialogContainer(props: SpectrumDialogContainerProps) { return ( 2) { @@ -72,7 +71,6 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) { return ( {typeof content === 'function' ? content(state.close) : content} @@ -147,7 +143,7 @@ DialogTrigger.getCollectionNode = function* (props: SpectrumDialogTriggerProps) let _DialogTrigger = DialogTrigger as (props: SpectrumDialogTriggerProps) => JSX.Element; export {_DialogTrigger as DialogTrigger}; -function PopoverTrigger({state, targetRef, trigger, content, hideArrow, UNSTABLE_portalContainer, ...props}) { +function PopoverTrigger({state, targetRef, trigger, content, hideArrow, ...props}) { let triggerRef = useRef(null); let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, triggerRef); @@ -159,7 +155,6 @@ function PopoverTrigger({state, targetRef, trigger, content, hideArrow, UNSTABLE let overlay = ( diff --git a/packages/@react-spectrum/dialog/test/DialogContainer.test.js b/packages/@react-spectrum/dialog/test/DialogContainer.test.js index 3670a4a7fc6..44e0ddad0db 100644 --- a/packages/@react-spectrum/dialog/test/DialogContainer.test.js +++ b/packages/@react-spectrum/dialog/test/DialogContainer.test.js @@ -10,18 +10,11 @@ * governing permissions and limitations under the License. */ -import {act, fireEvent, pointerMap, render, triggerPress, within} from '@react-spectrum/test-utils'; -import {ActionButton, Button} from '@react-spectrum/button'; -import {ButtonGroup} from '@react-spectrum/buttongroup'; -import {Content, Header} from '@react-spectrum/view'; -import {Dialog, DialogContainer, useDialogContainer} from '../src'; +import {act, fireEvent, render, triggerPress, within} from '@react-spectrum/test-utils'; import {DialogContainerExample, MenuExample, NestedDialogContainerExample} from '../stories/DialogContainerExamples'; -import {Divider} from '@react-spectrum/divider'; -import {Heading, Text} from '@react-spectrum/text'; import {Provider} from '@react-spectrum/provider'; -import React, {useState} from 'react'; +import React from 'react'; import {theme} from '@react-spectrum/theme-default'; -import userEvent from '@testing-library/user-event'; describe('DialogContainer', function () { beforeAll(() => { @@ -214,57 +207,4 @@ describe('DialogContainer', function () { expect(document.activeElement).toBe(button); }); - - describe('portalContainer', () => { - let user; - beforeAll(() => { - user = userEvent.setup({delay: null, pointerMap}); - jest.useFakeTimers(); - }); - function ExampleDialog(props) { - let container = useDialogContainer(); - - return ( - - The Heading -
The Header
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare. - {!props.isDismissable && - - - - - } - - ); - } - function App(props) { - let [container, setContainer] = useState(); - let [isOpen, setOpen] = useState(false); - - return ( - - setOpen(true)}>Open dialog - setOpen(false)} UNSTABLE_portalContainer={container} {...props}> - {isOpen && - - } - -
- - ); - } - - it('should render the dialog in the portal container', async () => { - let {getByRole, getByTestId} = render( - - ); - - let button = getByRole('button'); - await user.click(button); - - expect(getByRole('dialog').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container')); - }); - }); }); diff --git a/packages/@react-spectrum/dialog/test/DialogTrigger.test.js b/packages/@react-spectrum/dialog/test/DialogTrigger.test.js index 2ffcd74629e..bf227249eb3 100644 --- a/packages/@react-spectrum/dialog/test/DialogTrigger.test.js +++ b/packages/@react-spectrum/dialog/test/DialogTrigger.test.js @@ -1026,55 +1026,4 @@ describe('DialogTrigger', function () { expect(document.activeElement).toBe(innerButton); }); - describe('portalContainer', () => { - function InfoDialog(props) { - return ( - - - Trigger - contents - - - ); - } - function App(props) { - let [container, setContainer] = React.useState(); - return ( - <> - -
- - ); - } - it('should render the dialog in the portal container', async () => { - let {getByRole, getByTestId} = render( - - ); - - let button = getByRole('button'); - await user.click(button); - - expect(getByRole('dialog').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container')); - }); - it('should render the tray in the portal container', async () => { - let {getByRole, getByTestId} = render( - - ); - - let button = getByRole('button'); - await user.click(button); - - expect(getByRole('dialog').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container')); - }); - it('should render the popover in the portal container', async () => { - let {getByRole, getByTestId} = render( - - ); - - let button = getByRole('button'); - await user.click(button); - - expect(getByRole('dialog').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container')); - }); - }); }); diff --git a/packages/@react-spectrum/menu/src/MenuTrigger.tsx b/packages/@react-spectrum/menu/src/MenuTrigger.tsx index 19582e99c3f..1c29fecfd18 100644 --- a/packages/@react-spectrum/menu/src/MenuTrigger.tsx +++ b/packages/@react-spectrum/menu/src/MenuTrigger.tsx @@ -33,8 +33,7 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef) shouldFlip = true, direction = 'bottom', closeOnSelect, - trigger = 'press', - UNSTABLE_portalContainer + trigger = 'press' } = props; let [menuTrigger, menu] = React.Children.toArray(children); @@ -75,7 +74,7 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef) let overlay; if (isMobile) { overlay = ( - + {menu} ); @@ -84,7 +83,6 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef) { - windowSpy = jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024); - }); - afterEach(() => { onOpenChange.mockClear(); onOpen.mockClear(); @@ -1230,51 +1225,4 @@ describe('MenuTrigger', function () { }); }); }); - - describe('portalContainer', () => { - function InfoMenu(props) { - return ( - - - - - One - Two - Three - - - - ); - } - function App() { - let [container, setContainer] = React.useState(); - return ( - <> - -
- - ); - } - it('should render the menu in the portal container', async () => { - let {getByRole, getByTestId} = render( - - ); - - let button = getByRole('button'); - await user.click(button); - - expect(getByRole('menu').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container')); - }); - it('should render the menu tray in the portal container', async () => { - windowSpy.mockImplementation(() => 700); - let {getByRole, getByTestId} = render( - - ); - - let button = getByRole('button'); - await user.click(button); - - expect(getByRole('menu').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container')); - }); - }); }); diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx index 85128c9d887..b8f44a77b1e 100644 --- a/packages/@react-spectrum/overlays/src/Tray.tsx +++ b/packages/@react-spectrum/overlays/src/Tray.tsx @@ -25,8 +25,7 @@ import {useViewportSize} from '@react-aria/utils'; interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit { children: ReactNode, state: OverlayTriggerState, - isFixedHeight?: boolean, - container?: Element + isFixedHeight?: boolean } interface TrayWrapperProps extends TrayProps { diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx index e5856bfc414..a84e6e765d6 100644 --- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx +++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx @@ -29,8 +29,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) { crossOffset = DEFAULT_CROSS_OFFSET, isDisabled, offset = DEFAULT_OFFSET, - trigger: triggerAction, - UNSTABLE_portalContainer + trigger: triggerAction } = props; let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement]; @@ -89,7 +88,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) { arrowRef: arrowRef, ...tooltipProps }}> - + {tooltip} diff --git a/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js b/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js index 8fb1b861575..b7672194896 100644 --- a/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js +++ b/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js @@ -961,46 +961,4 @@ describe('TooltipTrigger', function () { expect(queryByRole('tooltip')).toBeNull(); }); }); - - describe('portalContainer', () => { - function InfoTooltip(props) { - return ( - - - -
hello
- - - ); - } - function App() { - let [container, setContainer] = React.useState(); - return ( - <> - -
- - ); - } - it('should render the tooltip in the portal container', async () => { - let {getByRole, getByTestId} = render( - - - - ); - - let button = getByRole('button'); - act(() => { - button.focus(); - }); - - expect(getByTestId('content').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container')); - act(() => { - button.blur(); - }); - act(() => { - jest.advanceTimersByTime(CLOSE_TIME); - }); - }); - }); }); diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index a45f16b9724..c1ac792969a 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -35,13 +35,7 @@ export interface SpectrumDialogTriggerProps extends OverlayTriggerProps, Positio /** Whether a modal type Dialog should be dismissable. */ isDismissable?: boolean, /** Whether pressing the escape key to close the dialog should be disabled. */ - isKeyboardDismissDisabled?: boolean, - /** - * The container element in which the dialogs' overlay portal will be placed. This may have unknown behavior depending on where it is portal-ed to. - * Make sure to test in mobile and desktop environments. - * @default document.body - */ - UNSTABLE_portalContainer?: Element + isKeyboardDismissDisabled?: boolean } export interface SpectrumDialogContainerProps { @@ -57,13 +51,7 @@ export interface SpectrumDialogContainerProps { /** Whether the Dialog is dismissable. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */ isDismissable?: boolean, /** Whether pressing the escape key to close the dialog should be disabled. */ - isKeyboardDismissDisabled?: boolean, - /** - * The container element in which the dialogs' overlay portal will be placed. This may have unknown behavior depending on where it is portal-ed to. - * Make sure to test in mobile and desktop environments. - * @default document.body - */ - UNSTABLE_portalContainer?: Element + isKeyboardDismissDisabled?: boolean } export interface AriaDialogProps extends DOMProps, AriaLabelingProps { diff --git a/packages/@react-types/menu/src/index.d.ts b/packages/@react-types/menu/src/index.d.ts index eb126af7a3b..d2564749978 100644 --- a/packages/@react-types/menu/src/index.d.ts +++ b/packages/@react-types/menu/src/index.d.ts @@ -48,13 +48,7 @@ export interface SpectrumMenuTriggerProps extends MenuTriggerProps { * Whether the Menu closes when a selection is made. * @default true */ - closeOnSelect?: boolean, - /** - * The container element in which the menu's overlay or tray portal will be placed. This may have unknown behavior depending on where it is portal-ed to. - * Make sure to test in mobile and desktop environments. - * @default document.body - */ - UNSTABLE_portalContainer?: HTMLElement + closeOnSelect?: boolean } export interface MenuProps extends CollectionBase, MultipleSelection { diff --git a/packages/@react-types/tooltip/src/index.d.ts b/packages/@react-types/tooltip/src/index.d.ts index cfcd71d8bdb..5b4ef9fdb53 100644 --- a/packages/@react-types/tooltip/src/index.d.ts +++ b/packages/@react-types/tooltip/src/index.d.ts @@ -46,13 +46,7 @@ export interface SpectrumTooltipTriggerProps extends Omit