diff --git a/.yarn/versions/60e659f9.yml b/.yarn/versions/60e659f9.yml
new file mode 100644
index 000000000..b094e0a87
--- /dev/null
+++ b/.yarn/versions/60e659f9.yml
@@ -0,0 +1,13 @@
+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
+
+declined:
+ - primitives
diff --git a/packages/react/popper/src/Popper.stories.tsx b/packages/react/popper/src/Popper.stories.tsx
index 8cb6de7c3..9b82e061d 100644
--- a/packages/react/popper/src/Popper.stories.tsx
+++ b/packages/react/popper/src/Popper.stories.tsx
@@ -445,6 +445,52 @@ export const Chromatic = () => {
};
Chromatic.parameters = { chromatic: { disable: false } };
+export const CollisionStrategy = () => {
+ const [flipOpen, setFlipOpen] = React.useState(false);
+ const [shiftOpen, setShiftOpen] = React.useState(false);
+
+ return (
+
+
+ setFlipOpen(true)}>
+ open (flip)
+
+
+ {flipOpen && (
+
+
+
+
+
+
+ )}
+
+
+ setShiftOpen(true)}>
+ open (shift)
+
+
+ {shiftOpen && (
+
+
+
+
+
+
+ )}
+
+
+ );
+};
+
const Scrollable = (props: any) => (
>;
+ collisionStrategy?: 'shift' | 'flip';
sticky?: 'partial' | 'always';
hideWhenDetached?: boolean;
updatePositionStrategy?: 'optimized' | 'always';
@@ -138,6 +139,7 @@ const PopperContent = React.forwardRef
avoidCollisions = true,
collisionBoundary = [],
collisionPadding: collisionPaddingProp = 0,
+ collisionStrategy = 'flip',
sticky = 'partial',
hideWhenDetached = false,
updatePositionStrategy = 'optimized',
@@ -190,11 +192,11 @@ const PopperContent = React.forwardRef
avoidCollisions &&
shift({
mainAxis: true,
- crossAxis: false,
+ crossAxis: collisionStrategy === 'shift',
limiter: sticky === 'partial' ? limitShift() : undefined,
...detectOverflowOptions,
}),
- avoidCollisions && flip({ ...detectOverflowOptions }),
+ avoidCollisions && collisionStrategy === 'flip' && flip({ ...detectOverflowOptions }),
size({
...detectOverflowOptions,
apply: ({ elements, rects, availableWidth, availableHeight }) => {