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

[Popper] Add option to disable update position on layout shift #3359

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

[Popper] Add option to disable update position on layout shift #3359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c6af03f
feat(Popper): Add optional layout shift position update control
martinsvinicius Feb 3, 2025
c0d9c27
docs(Popper): Add story demonstrating updatePositionOnLayoutShift prop
martinsvinicius Feb 3, 2025
0c3f5fd
chore: Add file to bump component versions
martinsvinicius Feb 3, 2025
ff680dc
chore: Bump radix-ui version
martinsvinicius Feb 3, 2025
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
14 changes: 14 additions & 0 deletions .yarn/versions/1acbd181.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
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
radix-ui: patch

declined:
- primitives
31 changes: 31 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 @@ -132,6 +132,37 @@ export const WithUpdatePositionStrategyAlways = () => {
);
};

export const WithoutLayoutShift = () => {
const [open, setOpen] = React.useState(false);
const [showElement, setShowElement] = React.useState(false);

return (
<Scrollable>
<Popper.Root>
{showElement && <div>element</div>}
&nbsp;
<Popper.Anchor className={styles.anchor} onClick={() => setOpen(true)}>
open
</Popper.Anchor>
{open && (
<Portal asChild>
<Popper.Content
className={styles.content}
sideOffset={5}
updatePositionOnLayoutShift={false}
>
<button onClick={() => setShowElement(!showElement)}>Toggle element</button>
&nbsp;
<button onClick={() => setOpen(false)}>close</button>
<Popper.Arrow className={styles.arrow} width={20} height={10} />
</Popper.Content>
</Portal>
)}
</Popper.Root>
</Scrollable>
);
};

export const Chromatic = () => {
const [scrollContainer1, setScrollContainer1] = React.useState<HTMLDivElement | null>(null);
const [scrollContainer2, setScrollContainer2] = React.useState<HTMLDivElement | null>(null);
Expand Down
3 changes: 3 additions & 0 deletions packages/react/popper/src/Popper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ interface PopperContentProps extends PrimitiveDivProps {
sticky?: 'partial' | 'always';
hideWhenDetached?: boolean;
updatePositionStrategy?: 'optimized' | 'always';
updatePositionOnLayoutShift?: boolean;
onPlaced?: () => void;
}

Expand All @@ -140,6 +141,7 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
sticky = 'partial',
hideWhenDetached = false,
updatePositionStrategy = 'optimized',
updatePositionOnLayoutShift = true,
onPlaced,
...contentProps
} = props;
Expand Down Expand Up @@ -178,6 +180,7 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
whileElementsMounted: (...args) => {
const cleanup = autoUpdate(...args, {
animationFrame: updatePositionStrategy === 'always',
layoutShift: updatePositionOnLayoutShift,
});
return cleanup;
},
Expand Down