diff --git a/.yarn/versions/1acbd181.yml b/.yarn/versions/1acbd181.yml new file mode 100644 index 0000000000..74e58ca25c --- /dev/null +++ b/.yarn/versions/1acbd181.yml @@ -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 diff --git a/packages/react/popper/src/Popper.stories.tsx b/packages/react/popper/src/Popper.stories.tsx index 607e1fc12b..ba30616e8d 100644 --- a/packages/react/popper/src/Popper.stories.tsx +++ b/packages/react/popper/src/Popper.stories.tsx @@ -132,6 +132,37 @@ export const WithUpdatePositionStrategyAlways = () => { ); }; +export const WithoutLayoutShift = () => { + const [open, setOpen] = React.useState(false); + const [showElement, setShowElement] = React.useState(false); + + return ( + + + {showElement &&
element
} +   + setOpen(true)}> + open + + {open && ( + + + +   + + + + + )} +
+
+ ); +}; + export const Chromatic = () => { const [scrollContainer1, setScrollContainer1] = React.useState(null); const [scrollContainer2, setScrollContainer2] = React.useState(null); diff --git a/packages/react/popper/src/Popper.tsx b/packages/react/popper/src/Popper.tsx index 16ab3da7fa..d713f43e77 100644 --- a/packages/react/popper/src/Popper.tsx +++ b/packages/react/popper/src/Popper.tsx @@ -122,6 +122,7 @@ interface PopperContentProps extends PrimitiveDivProps { sticky?: 'partial' | 'always'; hideWhenDetached?: boolean; updatePositionStrategy?: 'optimized' | 'always'; + updatePositionOnLayoutShift?: boolean; onPlaced?: () => void; } @@ -140,6 +141,7 @@ const PopperContent = React.forwardRef sticky = 'partial', hideWhenDetached = false, updatePositionStrategy = 'optimized', + updatePositionOnLayoutShift = true, onPlaced, ...contentProps } = props; @@ -178,6 +180,7 @@ const PopperContent = React.forwardRef whileElementsMounted: (...args) => { const cleanup = autoUpdate(...args, { animationFrame: updatePositionStrategy === 'always', + layoutShift: updatePositionOnLayoutShift, }); return cleanup; },