Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[popups] Require Portal part #1222

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[popups] Require Portal part #1222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a73a79
[popups] Require Portal part
atomiks Dec 24, 2024
7b415f1
Fix experiment
atomiks Dec 24, 2024
2d41b5e
Remove conditional returns in backdrops
atomiks Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions docs/reference/generated/alert-dialog-backdrop.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the element in the DOM while the alert dialog is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
5 changes: 0 additions & 5 deletions docs/reference/generated/alert-dialog-popup.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the element in the DOM while the alert dialog is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
17 changes: 17 additions & 0 deletions docs/reference/generated/alert-dialog-portal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"name": "AlertDialogPortal",
"description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
"props": {
"container": {
"type": "React.Ref | HTMLElement | null",
"description": "A parent element to render the portal element into."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
}
},
"dataAttributes": {},
"cssVariables": {}
}
5 changes: 0 additions & 5 deletions docs/reference/generated/dialog-backdrop.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the dialog is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
5 changes: 0 additions & 5 deletions docs/reference/generated/dialog-popup.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the dialog is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
17 changes: 17 additions & 0 deletions docs/reference/generated/dialog-portal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"name": "DialogPortal",
"description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
"props": {
"container": {
"type": "React.Ref | HTMLElement | null",
"description": "A parent element to render the portal element into."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
}
},
"dataAttributes": {},
"cssVariables": {}
}
5 changes: 0 additions & 5 deletions docs/reference/generated/menu-backdrop.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the menu is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
4 changes: 2 additions & 2 deletions docs/reference/generated/portal.json → docs/reference/generated/menu-portal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "Portal",
"name": "MenuPortal",
"description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
"props": {
"container": {
"type": "React.Ref | HTMLElement | null",
"description": "A parent element to render the portal into."
"description": "A parent element to render the portal element into."
},
"keepMounted": {
"type": "boolean",
Expand Down
5 changes: 0 additions & 5 deletions docs/reference/generated/menu-positioner.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the menu is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
5 changes: 0 additions & 5 deletions docs/reference/generated/popover-backdrop.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the popover is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
17 changes: 17 additions & 0 deletions docs/reference/generated/popover-portal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"name": "PopoverPortal",
"description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
"props": {
"container": {
"type": "React.Ref | HTMLElement | null",
"description": "A parent element to render the portal element into."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
}
},
"dataAttributes": {},
"cssVariables": {}
}
5 changes: 0 additions & 5 deletions docs/reference/generated/popover-positioner.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the popover is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
5 changes: 0 additions & 5 deletions docs/reference/generated/preview-card-backdrop.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the preview card is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
17 changes: 17 additions & 0 deletions docs/reference/generated/preview-card-portal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"name": "PreviewCardPortal",
"description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
"props": {
"container": {
"type": "React.Ref | HTMLElement | null",
"description": "A parent element to render the portal element into."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
}
},
"dataAttributes": {},
"cssVariables": {}
}
5 changes: 0 additions & 5 deletions docs/reference/generated/preview-card-positioner.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the preview card is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
5 changes: 0 additions & 5 deletions docs/reference/generated/select-backdrop.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the select menu is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
2 changes: 1 addition & 1 deletion docs/reference/generated/select-portal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"props": {
"container": {
"type": "React.Ref | HTMLElement | null",
"description": "A parent element to render the portal into."
"description": "A parent element to render the portal element into."
}
},
"dataAttributes": {},
Expand Down
17 changes: 17 additions & 0 deletions docs/reference/generated/tooltip-portal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"name": "TooltipPortal",
"description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
"props": {
"container": {
"type": "React.Ref | HTMLElement | null",
"description": "A parent element to render the portal element into."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
}
},
"dataAttributes": {},
"cssVariables": {}
}
5 changes: 0 additions & 5 deletions docs/reference/generated/tooltip-positioner.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,6 @@
"type": "string | (state) => string",
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
},
"keepMounted": {
"type": "boolean",
"default": "false",
"description": "Whether to keep the HTML element in the DOM while the tooltip is hidden."
},
"render": {
"type": "React.ReactElement | (props, state) => React.ReactElement",
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
Expand Down
1 change: 1 addition & 0 deletions docs/src/app/(private)/experiments/anchor-positioning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export default function AnchorPositioning() {
arrowPadding,
trackAnchor,
mounted: true,
keepMounted: true,
});

const handleInitialScroll = React.useCallback((node: HTMLDivElement | null) => {
Expand Down
16 changes: 10 additions & 6 deletions docs/src/app/(private)/experiments/anchor-side-animations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,20 @@ export default function AnchorSideAnimations() {
</p>
<Popover.Root>
<Popover.Trigger>transition</Popover.Trigger>
<Popover.Positioner side="top">
<Popover.Popup className={classes.Popup} data-type="transition" />
</Popover.Positioner>
<Popover.Portal>
<Popover.Positioner side="top">
<Popover.Popup className={classes.Popup} data-type="transition" />
</Popover.Positioner>
</Popover.Portal>
</Popover.Root>

<Popover.Root>
<Popover.Trigger>animation</Popover.Trigger>
<Popover.Positioner side="top">
<Popover.Popup className={classes.Popup} data-type="animation" />
</Popover.Positioner>
<Popover.Portal>
<Popover.Positioner side="top">
<Popover.Popup className={classes.Popup} data-type="animation" />
</Popover.Positioner>
</Popover.Portal>
</Popover.Root>
</div>
);
Expand Down
Loading
Loading