Skip to content

Commit 8379544

Browse files
benoitgrelardbenoitgrelard
authored
[Portal] Kill old portal and replace with new one (#1460)
* Use new UnstablePortal everywhere * Delete old portal
1 parent b221a6a commit 8379544

File tree

13 files changed

+59
-180
lines changed

13 files changed

+59
-180
lines changed

‎packages/react/dialog/src/Dialog.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useId } from '@radix-ui/react-id';
66
import { useControllableState } from '@radix-ui/react-use-controllable-state';
77
import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
88
import { FocusScope } from '@radix-ui/react-focus-scope';
9-
import { UnstablePortal } from '@radix-ui/react-portal';
9+
import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
1010
import { Presence } from '@radix-ui/react-presence';
1111
import { Primitive } from '@radix-ui/react-primitive';
1212
import { useFocusGuards } from '@radix-ui/react-focus-guards';
@@ -136,7 +136,7 @@ const [PortalProvider, usePortalContext] = createDialogContext<PortalContextValu
136136
forceMount: undefined,
137137
});
138138

139-
type PortalProps = React.ComponentPropsWithoutRef<typeof UnstablePortal>;
139+
type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
140140
interface DialogPortalProps extends Omit<PortalProps, 'asChild'> {
141141
children?: React.ReactNode;
142142
/**
@@ -153,9 +153,9 @@ const DialogPortal: React.FC<DialogPortalProps> = (props: ScopedProps<DialogPort
153153
<PortalProvider scope={__scopeDialog} forceMount={forceMount}>
154154
{React.Children.map(children, (child) => (
155155
<Presence present={forceMount || context.open}>
156-
<UnstablePortal asChild container={container}>
156+
<PortalPrimitive asChild container={container}>
157157
{child}
158-
</UnstablePortal>
158+
</PortalPrimitive>
159159
</Presence>
160160
))}
161161
</PortalProvider>

‎packages/react/dismissable-layer/src/DismissableLayer.stories.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -488,7 +488,7 @@ function DummyDialog({ children, openLabel = 'Open', closeLabel = 'Close' }: Dum
488488
</button>
489489
{open ? (
490490
<FocusGuards>
491-
<Portal>
491+
<Portal asChild>
492492
<div
493493
style={{
494494
position: 'fixed',
@@ -502,7 +502,7 @@ function DummyDialog({ children, openLabel = 'Open', closeLabel = 'Close' }: Dum
502502
}}
503503
/>
504504
</Portal>
505-
<Portal>
505+
<Portal asChild>
506506
<RemoveScroll as={Slot}>
507507
<DismissableLayer
508508
asChild
@@ -572,6 +572,8 @@ function DummyPopover({
572572
const [open, setOpen] = React.useState(false);
573573
const openButtonRef = React.useRef(null);
574574
const ScrollContainer = preventScroll ? RemoveScroll : React.Fragment;
575+
const scrollLockWrapperProps = preventScroll ? { as: Slot } : undefined;
576+
575577
return (
576578
<Popper.Root>
577579
<Popper.Anchor asChild>
@@ -581,8 +583,8 @@ function DummyPopover({
581583
</Popper.Anchor>
582584
{open ? (
583585
<FocusGuards>
584-
<Portal>
585-
<ScrollContainer>
586+
<ScrollContainer {...scrollLockWrapperProps}>
587+
<Portal asChild>
586588
<DismissableLayer
587589
asChild
588590
disableOutsidePointerEvents={disableOutsidePointerEvents}
@@ -634,8 +636,8 @@ function DummyPopover({
634636
</Popper.Content>
635637
</FocusScope>
636638
</DismissableLayer>
637-
</ScrollContainer>
638-
</Portal>
639+
</Portal>
640+
</ScrollContainer>
639641
</FocusGuards>
640642
) : null}
641643
</Popper.Root>

‎packages/react/hover-card/src/HoverCard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
55
import { useComposedRefs } from '@radix-ui/react-compose-refs';
66
import * as PopperPrimitive from '@radix-ui/react-popper';
77
import { createPopperScope } from '@radix-ui/react-popper';
8-
import { UnstablePortal } from '@radix-ui/react-portal';
8+
import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
99
import { Presence } from '@radix-ui/react-presence';
1010
import { Primitive } from '@radix-ui/react-primitive';
1111
import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
@@ -147,7 +147,7 @@ const [PortalProvider, usePortalContext] = createHoverCardContext<PortalContextV
147147
forceMount: undefined,
148148
});
149149

150-
type PortalProps = React.ComponentPropsWithoutRef<typeof UnstablePortal>;
150+
type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
151151
interface HoverCardPortalProps extends Omit<PortalProps, 'asChild'> {
152152
children?: React.ReactNode;
153153
/**
@@ -165,9 +165,9 @@ const HoverCardPortal: React.FC<HoverCardPortalProps> = (
165165
return (
166166
<PortalProvider scope={__scopeHoverCard} forceMount={forceMount}>
167167
<Presence present={forceMount || context.open}>
168-
<UnstablePortal asChild container={container}>
168+
<PortalPrimitive asChild container={container}>
169169
{children}
170-
</UnstablePortal>
170+
</PortalPrimitive>
171171
</Presence>
172172
</PortalProvider>
173173
);

‎packages/react/menu/src/Menu.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { FocusScope } from '@radix-ui/react-focus-scope';
1010
import { useId } from '@radix-ui/react-id';
1111
import * as PopperPrimitive from '@radix-ui/react-popper';
1212
import { createPopperScope } from '@radix-ui/react-popper';
13-
import { UnstablePortal } from '@radix-ui/react-portal';
13+
import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
1414
import { Presence } from '@radix-ui/react-presence';
1515
import { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';
1616
import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
@@ -181,7 +181,7 @@ const [PortalProvider, usePortalContext] = createMenuContext<PortalContextValue>
181181
forceMount: undefined,
182182
});
183183

184-
type PortalProps = React.ComponentPropsWithoutRef<typeof UnstablePortal>;
184+
type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
185185
interface MenuPortalProps extends Omit<PortalProps, 'asChild'> {
186186
children?: React.ReactNode;
187187
/**
@@ -197,9 +197,9 @@ const MenuPortal: React.FC<MenuPortalProps> = (props: ScopedProps<MenuPortalProp
197197
return (
198198
<PortalProvider scope={__scopeMenu} forceMount={forceMount}>
199199
<Presence present={forceMount || context.open}>
200-
<UnstablePortal asChild container={container}>
200+
<PortalPrimitive asChild container={container}>
201201
{children}
202-
</UnstablePortal>
202+
</PortalPrimitive>
203203
</Presence>
204204
</PortalProvider>
205205
);

‎packages/react/popover/src/Popover.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { FocusScope } from '@radix-ui/react-focus-scope';
88
import { useId } from '@radix-ui/react-id';
99
import * as PopperPrimitive from '@radix-ui/react-popper';
1010
import { createPopperScope } from '@radix-ui/react-popper';
11-
import { UnstablePortal } from '@radix-ui/react-portal';
11+
import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
1212
import { Presence } from '@radix-ui/react-presence';
1313
import { Primitive } from '@radix-ui/react-primitive';
1414
import { Slot } from '@radix-ui/react-slot';
@@ -183,7 +183,7 @@ const [PortalProvider, usePortalContext] = createPopoverContext<PortalContextVal
183183
forceMount: undefined,
184184
});
185185

186-
type PortalProps = React.ComponentPropsWithoutRef<typeof UnstablePortal>;
186+
type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
187187
interface PopoverPortalProps extends Omit<PortalProps, 'asChild'> {
188188
children?: React.ReactNode;
189189
/**
@@ -199,9 +199,9 @@ const PopoverPortal: React.FC<PopoverPortalProps> = (props: ScopedProps<PopoverP
199199
return (
200200
<PortalProvider scope={__scopePopover} forceMount={forceMount}>
201201
<Presence present={forceMount || context.open}>
202-
<UnstablePortal asChild container={container}>
202+
<PortalPrimitive asChild container={container}>
203203
{children}
204-
</UnstablePortal>
204+
</PortalPrimitive>
205205
</Presence>
206206
</PortalProvider>
207207
);

‎packages/react/popper/src/Popper.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const Animated = () => {
5858
</Popper.Anchor>
5959

6060
{open && (
61-
<Portal>
61+
<Portal asChild>
6262
<Popper.Content className={animatedContentClass()} sideOffset={5}>
6363
<button onClick={() => setOpen(false)}>close</button>
6464
<Popper.Arrow className={arrowClass()} width={20} height={10} offset={25} />
@@ -80,7 +80,7 @@ export const WithPortal = () => {
8080
</Popper.Anchor>
8181

8282
{open && (
83-
<Portal>
83+
<Portal asChild>
8484
<Popper.Content className={contentClass()} sideOffset={5}>
8585
<button onClick={() => setOpen(false)}>close</button>
8686
<Popper.Arrow className={arrowClass()} width={20} height={10} />

‎packages/react/portal/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@
1717
},
1818
"dependencies": {
1919
"@babel/runtime": "^7.13.10",
20-
"@radix-ui/react-primitive": "workspace:*",
21-
"@radix-ui/react-use-layout-effect": "workspace:*"
20+
"@radix-ui/react-primitive": "workspace:*"
2221
},
2322
"peerDependencies": {
2423
"react": "^16.8 || ^17.0 || ^18.0",

‎packages/react/portal/src/Portal.stories.tsx‎

Lines changed: 16 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Portal, UnstablePortal } from '@radix-ui/react-portal';
2+
import { Portal } from '@radix-ui/react-portal';
33

44
export default { title: 'Components/Portal' };
55

@@ -19,7 +19,7 @@ export const Base = () => (
1919
necessitatibus eius pariatur.
2020
</p>
2121

22-
<Portal style={{ position: 'relative' }}>
22+
<Portal>
2323
<h1>This content is rendered in a portal (another DOM tree)</h1>
2424
<p>
2525
Because of the portal, it can appear in a different DOM tree from the main one (by default a
@@ -30,13 +30,13 @@ export const Base = () => (
3030
);
3131

3232
export const CustomContainer = () => {
33-
const portalContainerRef = React.useRef<HTMLDivElement>(null);
33+
const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);
3434

3535
return (
3636
<>
3737
<div style={{ maxWidth: 300, padding: 10, margin: 10, border: '1px solid' }}>
3838
<h1>Container A</h1>
39-
<Portal containerRef={portalContainerRef}>
39+
<Portal asChild container={portalContainer}>
4040
<p>
4141
This content is rendered in a portal inside Container A but appears inside Container B
4242
because we have used Container B as a container element for the Portal.
@@ -45,7 +45,7 @@ export const CustomContainer = () => {
4545
</div>
4646

4747
<div
48-
ref={portalContainerRef}
48+
ref={setPortalContainer}
4949
style={{ maxWidth: 300, padding: 10, margin: 10, border: '1px solid' }}
5050
>
5151
<h1>Container B</h1>
@@ -55,63 +55,6 @@ export const CustomContainer = () => {
5555
};
5656

5757
export const Chromatic = () => {
58-
const portalContainerRef = React.useRef<HTMLDivElement>(null);
59-
60-
return (
61-
<div style={{ padding: 150 }}>
62-
<h1>Default (append to body)</h1>
63-
<div style={{ padding: 10, margin: 10, border: '1px solid blue' }}>
64-
<p>Container A</p>
65-
66-
<Portal>
67-
<div style={{ padding: 10, margin: 10, border: '1px solid blue' }}>
68-
<p>This content is rendered in a portal (another DOM tree)</p>
69-
<p>
70-
Because of the portal, it can appear in a different DOM tree from the main one (by
71-
default a new element inside the body), even though it is part of the same React tree.
72-
</p>
73-
</div>
74-
</Portal>
75-
</div>
76-
77-
<h1>Custom container</h1>
78-
<div style={{ padding: 10, margin: 10, border: '1px solid green' }}>
79-
<p>Container B</p>
80-
<Portal containerRef={portalContainerRef}>
81-
<div style={{ padding: 10, margin: 10, border: '1px solid green' }}>
82-
<p>
83-
This content is rendered in a portal inside Container B but appears inside Container C
84-
because we have used Container C as a container element for the Portal.
85-
</p>
86-
</div>
87-
</Portal>
88-
</div>
89-
90-
<div ref={portalContainerRef} style={{ padding: 10, margin: 10, border: '1px solid' }}>
91-
<p>Container C</p>
92-
</div>
93-
94-
<h1>zIndex and order</h1>
95-
<p>See squares in the top-left</p>
96-
<Portal>
97-
<div style={{ width: 20, height: 20, backgroundColor: 'red' }} />
98-
</Portal>
99-
<Portal>
100-
<div
101-
style={{ width: 20, height: 20, backgroundColor: 'green', marginLeft: 10, marginTop: 10 }}
102-
/>
103-
</Portal>
104-
<Portal>
105-
<div
106-
style={{ width: 20, height: 20, backgroundColor: 'blue', marginLeft: 20, marginTop: 20 }}
107-
/>
108-
</Portal>
109-
</div>
110-
);
111-
};
112-
Chromatic.parameters = { chromatic: { disable: false } };
113-
114-
export const ChromaticUnstablePortal = () => {
11558
const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);
11659

11760
return (
@@ -120,7 +63,7 @@ export const ChromaticUnstablePortal = () => {
12063
<div style={{ padding: 10, margin: 10, border: '1px solid blue' }}>
12164
<p>Container A</p>
12265

123-
<UnstablePortal>
66+
<Portal asChild>
12467
<div
12568
style={{
12669
padding: 10,
@@ -138,20 +81,20 @@ export const ChromaticUnstablePortal = () => {
13881
default a new element inside the body), even though it is part of the same React tree.
13982
</p>
14083
</div>
141-
</UnstablePortal>
84+
</Portal>
14285
</div>
14386

14487
<h1>Custom container</h1>
14588
<div style={{ padding: 10, margin: 10, border: '1px solid green' }}>
14689
<p>Container B</p>
147-
<UnstablePortal container={portalContainer}>
90+
<Portal asChild container={portalContainer}>
14891
<div style={{ padding: 10, margin: 10, border: '1px solid green' }}>
14992
<p>
15093
This content is rendered in a portal inside Container B but appears inside Container C
15194
because we have used Container C as a container element for the Portal.
15295
</p>
15396
</div>
154-
</UnstablePortal>
97+
</Portal>
15598
</div>
15699

157100
<div ref={setPortalContainer} style={{ padding: 10, margin: 10, border: '1px solid' }}>
@@ -160,7 +103,7 @@ export const ChromaticUnstablePortal = () => {
160103

161104
<h1>zIndex and order</h1>
162105
<p>See squares in the top-left</p>
163-
<UnstablePortal>
106+
<Portal asChild>
164107
<div
165108
style={{
166109
width: 20,
@@ -172,8 +115,8 @@ export const ChromaticUnstablePortal = () => {
172115
zIndex: 9999999,
173116
}}
174117
/>
175-
</UnstablePortal>
176-
<UnstablePortal>
118+
</Portal>
119+
<Portal asChild>
177120
<div
178121
style={{
179122
width: 20,
@@ -187,8 +130,8 @@ export const ChromaticUnstablePortal = () => {
187130
zIndex: 9999999,
188131
}}
189132
/>
190-
</UnstablePortal>
191-
<UnstablePortal>
133+
</Portal>
134+
<Portal asChild>
192135
<div
193136
style={{
194137
width: 20,
@@ -202,8 +145,8 @@ export const ChromaticUnstablePortal = () => {
202145
zIndex: 9999999,
203146
}}
204147
/>
205-
</UnstablePortal>
148+
</Portal>
206149
</div>
207150
);
208151
};
209-
ChromaticUnstablePortal.parameters = { chromatic: { disable: false } };
152+
Chromatic.parameters = { chromatic: { disable: false } };

0 commit comments

Comments
 (0)