Skip to content

Commit cdb2fe2

Browse files
snowystingersnowystinger
authored
Revert "Expose UNSTABLE container for RSP overlays (#5723)" (#5806)
This reverts commit Expose UNSTABLE container for RSP overlays (#5723).
1 parent 560f050 commit cdb2fe2

File tree

12 files changed

+13
-253
lines changed

12 files changed

+13
-253
lines changed

‎packages/@react-spectrum/dialog/src/DialogContainer.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ export function DialogContainer(props: SpectrumDialogContainerProps) {
2727
type = 'modal',
2828
onDismiss,
2929
isDismissable,
30-
isKeyboardDismissDisabled,
31-
UNSTABLE_portalContainer
30+
isKeyboardDismissDisabled
3231
} = props;
3332

3433
let childArray = React.Children.toArray(children);
@@ -68,7 +67,6 @@ export function DialogContainer(props: SpectrumDialogContainerProps) {
6867

6968
return (
7069
<Modal
71-
container={UNSTABLE_portalContainer}
7270
state={state}
7371
type={type}
7472
isDismissable={isDismissable}

‎packages/@react-spectrum/dialog/src/DialogTrigger.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) {
2828
targetRef,
2929
isDismissable,
3030
isKeyboardDismissDisabled,
31-
UNSTABLE_portalContainer,
3231
...positionProps
3332
} = props;
3433
if (!Array.isArray(children) || children.length > 2) {
@@ -72,7 +71,6 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) {
7271
return (
7372
<PopoverTrigger
7473
{...positionProps}
75-
UNSTABLE_portalContainer={UNSTABLE_portalContainer}
7674
state={state}
7775
targetRef={targetRef}
7876
trigger={trigger}
@@ -91,7 +89,6 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) {
9189
<Modal
9290
state={state}
9391
isDismissable={type === 'modal' ? isDismissable : false}
94-
container={UNSTABLE_portalContainer}
9592
type={type}
9693
isKeyboardDismissDisabled={isKeyboardDismissDisabled}
9794
onExiting={onExiting}
@@ -103,7 +100,6 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) {
103100
return (
104101
<Tray
105102
state={state}
106-
container={UNSTABLE_portalContainer}
107103
isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
108104
{typeof content === 'function' ? content(state.close) : content}
109105
</Tray>
@@ -147,7 +143,7 @@ DialogTrigger.getCollectionNode = function* (props: SpectrumDialogTriggerProps)
147143
let _DialogTrigger = DialogTrigger as (props: SpectrumDialogTriggerProps) => JSX.Element;
148144
export {_DialogTrigger as DialogTrigger};
149145

150-
function PopoverTrigger({state, targetRef, trigger, content, hideArrow, UNSTABLE_portalContainer, ...props}) {
146+
function PopoverTrigger({state, targetRef, trigger, content, hideArrow, ...props}) {
151147
let triggerRef = useRef<HTMLElement>(null);
152148
let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, triggerRef);
153149

@@ -159,7 +155,6 @@ function PopoverTrigger({state, targetRef, trigger, content, hideArrow, UNSTABLE
159155
let overlay = (
160156
<Popover
161157
{...props}
162-
container={UNSTABLE_portalContainer}
163158
hideArrow={hideArrow}
164159
triggerRef={targetRef || triggerRef}
165160
state={state}>

‎packages/@react-spectrum/dialog/test/DialogContainer.test.js‎

Lines changed: 2 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,11 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {act, fireEvent, pointerMap, render, triggerPress, within} from '@react-spectrum/test-utils';
14-
import {ActionButton, Button} from '@react-spectrum/button';
15-
import {ButtonGroup} from '@react-spectrum/buttongroup';
16-
import {Content, Header} from '@react-spectrum/view';
17-
import {Dialog, DialogContainer, useDialogContainer} from '../src';
13+
import {act, fireEvent, render, triggerPress, within} from '@react-spectrum/test-utils';
1814
import {DialogContainerExample, MenuExample, NestedDialogContainerExample} from '../stories/DialogContainerExamples';
19-
import {Divider} from '@react-spectrum/divider';
20-
import {Heading, Text} from '@react-spectrum/text';
2115
import {Provider} from '@react-spectrum/provider';
22-
import React, {useState} from 'react';
16+
import React from 'react';
2317
import {theme} from '@react-spectrum/theme-default';
24-
import userEvent from '@testing-library/user-event';
2518

2619
describe('DialogContainer', function () {
2720
beforeAll(() => {
@@ -214,57 +207,4 @@ describe('DialogContainer', function () {
214207

215208
expect(document.activeElement).toBe(button);
216209
});
217-
218-
describe('portalContainer', () => {
219-
let user;
220-
beforeAll(() => {
221-
user = userEvent.setup({delay: null, pointerMap});
222-
jest.useFakeTimers();
223-
});
224-
function ExampleDialog(props) {
225-
let container = useDialogContainer();
226-
227-
return (
228-
<Dialog>
229-
<Heading>The Heading</Heading>
230-
<Header>The Header</Header>
231-
<Divider />
232-
<Content><Text>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.</Text></Content>
233-
{!props.isDismissable &&
234-
<ButtonGroup>
235-
<Button variant="secondary" onPress={container.dismiss}>Cancel</Button>
236-
<Button variant="cta" onPress={container.dismiss}>Confirm</Button>
237-
</ButtonGroup>
238-
}
239-
</Dialog>
240-
);
241-
}
242-
function App(props) {
243-
let [container, setContainer] = useState();
244-
let [isOpen, setOpen] = useState(false);
245-
246-
return (
247-
<Provider theme={theme}>
248-
<ActionButton onPress={() => setOpen(true)}>Open dialog</ActionButton>
249-
<DialogContainer onDismiss={() => setOpen(false)} UNSTABLE_portalContainer={container} {...props}>
250-
{isOpen &&
251-
<ExampleDialog {...props} />
252-
}
253-
</DialogContainer>
254-
<div ref={setContainer} data-testid="custom-container" />
255-
</Provider>
256-
);
257-
}
258-
259-
it('should render the dialog in the portal container', async () => {
260-
let {getByRole, getByTestId} = render(
261-
<App />
262-
);
263-
264-
let button = getByRole('button');
265-
await user.click(button);
266-
267-
expect(getByRole('dialog').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container'));
268-
});
269-
});
270210
});

‎packages/@react-spectrum/dialog/test/DialogTrigger.test.js‎

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1026,55 +1026,4 @@ describe('DialogTrigger', function () {
10261026
expect(document.activeElement).toBe(innerButton);
10271027
});
10281028

1029-
describe('portalContainer', () => {
1030-
function InfoDialog(props) {
1031-
return (
1032-
<Provider theme={theme}>
1033-
<DialogTrigger type={props.type} UNSTABLE_portalContainer={props.container}>
1034-
<ActionButton>Trigger</ActionButton>
1035-
<Dialog>contents</Dialog>
1036-
</DialogTrigger>
1037-
</Provider>
1038-
);
1039-
}
1040-
function App(props) {
1041-
let [container, setContainer] = React.useState();
1042-
return (
1043-
<>
1044-
<InfoDialog type={props.type} container={container} />
1045-
<div ref={setContainer} data-testid="custom-container" />
1046-
</>
1047-
);
1048-
}
1049-
it('should render the dialog in the portal container', async () => {
1050-
let {getByRole, getByTestId} = render(
1051-
<App />
1052-
);
1053-
1054-
let button = getByRole('button');
1055-
await user.click(button);
1056-
1057-
expect(getByRole('dialog').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container'));
1058-
});
1059-
it('should render the tray in the portal container', async () => {
1060-
let {getByRole, getByTestId} = render(
1061-
<App type="tray" />
1062-
);
1063-
1064-
let button = getByRole('button');
1065-
await user.click(button);
1066-
1067-
expect(getByRole('dialog').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container'));
1068-
});
1069-
it('should render the popover in the portal container', async () => {
1070-
let {getByRole, getByTestId} = render(
1071-
<App type="popover" />
1072-
);
1073-
1074-
let button = getByRole('button');
1075-
await user.click(button);
1076-
1077-
expect(getByRole('dialog').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container'));
1078-
});
1079-
});
10801029
});

‎packages/@react-spectrum/menu/src/MenuTrigger.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
3333
shouldFlip = true,
3434
direction = 'bottom',
3535
closeOnSelect,
36-
trigger = 'press',
37-
UNSTABLE_portalContainer
36+
trigger = 'press'
3837
} = props;
3938

4039
let [menuTrigger, menu] = React.Children.toArray(children);
@@ -75,7 +74,7 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
7574
let overlay;
7675
if (isMobile) {
7776
overlay = (
78-
<Tray state={state} isFixedHeight container={UNSTABLE_portalContainer}>
77+
<Tray state={state} isFixedHeight>
7978
{menu}
8079
</Tray>
8180
);
@@ -84,7 +83,6 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
8483
<Popover
8584
UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}
8685
state={state}
87-
container={UNSTABLE_portalContainer}
8886
triggerRef={menuTriggerRef}
8987
scrollRef={menuRef}
9088
placement={initialPlacement}

‎packages/@react-spectrum/menu/test/MenuTrigger.test.js‎

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ describe('MenuTrigger', function () {
7070
let onSelect = jest.fn();
7171
let onSelectionChange = jest.fn();
7272
let user;
73-
let windowSpy;
7473

7574
beforeAll(function () {
7675
user = userEvent.setup({delay: null, pointerMap});
@@ -81,10 +80,6 @@ describe('MenuTrigger', function () {
8180
jest.useFakeTimers();
8281
});
8382

84-
beforeEach(() => {
85-
windowSpy = jest.spyOn(window.screen, 'width', 'get').mockImplementation(() => 1024);
86-
});
87-
8883
afterEach(() => {
8984
onOpenChange.mockClear();
9085
onOpen.mockClear();
@@ -1230,51 +1225,4 @@ describe('MenuTrigger', function () {
12301225
});
12311226
});
12321227
});
1233-
1234-
describe('portalContainer', () => {
1235-
function InfoMenu(props) {
1236-
return (
1237-
<Provider theme={theme}>
1238-
<MenuTrigger UNSTABLE_portalContainer={props.container}>
1239-
<ActionButton aria-label="trigger" />
1240-
<Menu>
1241-
<Item key="1">One</Item>
1242-
<Item key="">Two</Item>
1243-
<Item key="3">Three</Item>
1244-
</Menu>
1245-
</MenuTrigger>
1246-
</Provider>
1247-
);
1248-
}
1249-
function App() {
1250-
let [container, setContainer] = React.useState();
1251-
return (
1252-
<>
1253-
<InfoMenu container={container} />
1254-
<div ref={setContainer} data-testid="custom-container" />
1255-
</>
1256-
);
1257-
}
1258-
it('should render the menu in the portal container', async () => {
1259-
let {getByRole, getByTestId} = render(
1260-
<App />
1261-
);
1262-
1263-
let button = getByRole('button');
1264-
await user.click(button);
1265-
1266-
expect(getByRole('menu').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container'));
1267-
});
1268-
it('should render the menu tray in the portal container', async () => {
1269-
windowSpy.mockImplementation(() => 700);
1270-
let {getByRole, getByTestId} = render(
1271-
<App />
1272-
);
1273-
1274-
let button = getByRole('button');
1275-
await user.click(button);
1276-
1277-
expect(getByRole('menu').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container'));
1278-
});
1279-
});
12801228
});

‎packages/@react-spectrum/overlays/src/Tray.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@ import {useViewportSize} from '@react-aria/utils';
2525
interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
2626
children: ReactNode,
2727
state: OverlayTriggerState,
28-
isFixedHeight?: boolean,
29-
container?: Element
28+
isFixedHeight?: boolean
3029
}
3130

3231
interface TrayWrapperProps extends TrayProps {

‎packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
2929
crossOffset = DEFAULT_CROSS_OFFSET,
3030
isDisabled,
3131
offset = DEFAULT_OFFSET,
32-
trigger: triggerAction,
33-
UNSTABLE_portalContainer
32+
trigger: triggerAction
3433
} = props;
3534

3635
let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];
@@ -89,7 +88,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
8988
arrowRef: arrowRef,
9089
...tooltipProps
9190
}}>
92-
<Overlay isOpen={state.isOpen} nodeRef={overlayRef} container={UNSTABLE_portalContainer}>
91+
<Overlay isOpen={state.isOpen} nodeRef={overlayRef}>
9392
{tooltip}
9493
</Overlay>
9594
</TooltipContext.Provider>

‎packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -961,46 +961,4 @@ describe('TooltipTrigger', function () {
961961
expect(queryByRole('tooltip')).toBeNull();
962962
});
963963
});
964-
965-
describe('portalContainer', () => {
966-
function InfoTooltip(props) {
967-
return (
968-
<TooltipTrigger UNSTABLE_portalContainer={props.container}>
969-
<ActionButton aria-label="trigger" />
970-
<Tooltip>
971-
<div data-testid="content">hello</div>
972-
</Tooltip>
973-
</TooltipTrigger>
974-
);
975-
}
976-
function App() {
977-
let [container, setContainer] = React.useState();
978-
return (
979-
<>
980-
<InfoTooltip container={container} />
981-
<div ref={setContainer} data-testid="custom-container" />
982-
</>
983-
);
984-
}
985-
it('should render the tooltip in the portal container', async () => {
986-
let {getByRole, getByTestId} = render(
987-
<Provider theme={theme}>
988-
<App />
989-
</Provider>
990-
);
991-
992-
let button = getByRole('button');
993-
act(() => {
994-
button.focus();
995-
});
996-
997-
expect(getByTestId('content').closest('[data-testid="custom-container"]')).toBe(getByTestId('custom-container'));
998-
act(() => {
999-
button.blur();
1000-
});
1001-
act(() => {
1002-
jest.advanceTimersByTime(CLOSE_TIME);
1003-
});
1004-
});
1005-
});
1006964
});

0 commit comments

Comments
 (0)