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 }) => {