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

Jump to bottom

Popper: Add positioning props #3186

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Popper: Add positioning props #3186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab97c65
Popover: Allow to disable autoUpdate and set positionStrategy
Oct 21, 2024
4e50764
Popover: Allow to disable autoUpdate and set positionStrategy (added …
vshushkov Oct 21, 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
11 changes: 11 additions & 0 deletions .yarn/versions/4d3ad0f6.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
releases:
"@radix-ui/react-context-menu": patch
"@radix-ui/react-dropdown-menu": patch
"@radix-ui/react-hover-card": patch
"@radix-ui/react-menu": patch
"@radix-ui/react-menubar": patch
"@radix-ui/react-popover": patch
"@radix-ui/react-popper": patch
"@radix-ui/react-select": patch
"@radix-ui/react-tooltip": patch
primitives: patch
27 changes: 27 additions & 0 deletions packages/react/popper/src/Popper.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,33 @@ export const Chromatic = () => {
};
Chromatic.parameters = { chromatic: { disable: false } };

export const WithAbsolutePositionStrategy = () => {
return (
<div
style={{
padding: '300px',
height: '200vh',
width: '200vw',
}}
>
<Popper.Root>
<Popper.Anchor className={anchorClass({ size: 'small' })}>#1</Popper.Anchor>
<Portal asChild>
<Popper.Content
positionStrategy="absolute"
disablePositionUpdate
className={contentClass({ size: 'small' })}
sideOffset={5}
>
<Popper.Arrow className={arrowClass()} width={10} height={5} />
Some content
</Popper.Content>
</Portal>
</Popper.Root>
</div>
);
};

const Scrollable = (props: any) => (
<div
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '200vh' }}
Expand Down
22 changes: 14 additions & 8 deletions packages/react/popper/src/Popper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,9 @@ interface PopperContentProps extends PrimitiveDivProps {
collisionPadding?: number | Partial<Record<Side, number>>;
sticky?: 'partial' | 'always';
hideWhenDetached?: boolean;
disablePositionUpdate?: boolean;
updatePositionStrategy?: 'optimized' | 'always';
positionStrategy?: 'fixed' | 'absolute';
onPlaced?: () => void;
}

Expand All @@ -139,6 +141,9 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
collisionPadding: collisionPaddingProp = 0,
sticky = 'partial',
hideWhenDetached = false,
// default to `fixed` strategy to avoid focus scroll issues
positionStrategy = 'fixed',
disablePositionUpdate = false,
updatePositionStrategy = 'optimized',
onPlaced,
...contentProps
Expand Down Expand Up @@ -172,15 +177,16 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
};

const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
strategy: 'fixed',
strategy: positionStrategy,
placement: desiredPlacement,
whileElementsMounted: (...args) => {
const cleanup = autoUpdate(...args, {
animationFrame: updatePositionStrategy === 'always',
});
return cleanup;
},
whileElementsMounted: disablePositionUpdate
? undefined
: (...args) => {
const cleanup = autoUpdate(...args, {
animationFrame: updatePositionStrategy === 'always',
});
return cleanup;
},
elements: {
reference: context.anchor,
},
Expand Down