[Popper] Added collision strategies option

Gives a way to control how popper placement collision is handled, either using flip or shift middlewares from Floating UI. By default, it is set to flip for backwards compatibility. Fixes issue radix-ui#2842 * [Popper] Updated storybook
mazei513 · May 31, 2024 · 06d8663 · 06d8663
1 parent b32a933
commit 06d8663
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git 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 (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+        gap: '16px',
+        height: '200vh',
+      }}
+    >
+      <Popper.Root>
+        <Popper.Anchor className={anchorClass()} onClick={() => setFlipOpen(true)}>
+          open (flip)
+        </Popper.Anchor>
+
+        {flipOpen && (
+          <Portal asChild>
+            <Popper.Content className={contentClass()} sideOffset={5}>
+              <button onClick={() => setFlipOpen(false)}>close</button>
+              <Popper.Arrow className={arrowClass()} width={20} height={10} offset={25} />
+            </Popper.Content>
+          </Portal>
+        )}
+      </Popper.Root>
+      <Popper.Root>
+        <Popper.Anchor className={anchorClass()} onClick={() => setShiftOpen(true)}>
+          open (shift)
+        </Popper.Anchor>
+
+        {shiftOpen && (
+          <Portal asChild>
+            <Popper.Content className={contentClass()} sideOffset={5} collisionStrategy="shift">
+              <button onClick={() => setShiftOpen(false)}>close</button>
+              <Popper.Arrow className={arrowClass()} width={20} height={10} offset={25} />
+            </Popper.Content>
+          </Portal>
+        )}
+      </Popper.Root>
+    </div>
+  );
+};
+
 const Scrollable = (props: any) => (
   <div
     style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '200vh' }}

diff --git a/packages/react/popper/src/Popper.tsx b/packages/react/popper/src/Popper.tsx
@@ -120,6 +120,7 @@ interface PopperContentProps extends PrimitiveDivProps {
   avoidCollisions?: boolean;
   collisionBoundary?: Boundary | Boundary[];
   collisionPadding?: number | Partial<Record<Side, number>>;
+  collisionStrategy?: 'shift' | 'flip';
   sticky?: 'partial' | 'always';
   hideWhenDetached?: boolean;
   updatePositionStrategy?: 'optimized' | 'always';
@@ -138,6 +139,7 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
       avoidCollisions = true,
       collisionBoundary = [],
       collisionPadding: collisionPaddingProp = 0,
+      collisionStrategy = 'flip',
       sticky = 'partial',
       hideWhenDetached = false,
       updatePositionStrategy = 'optimized',
@@ -190,11 +192,11 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
         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 }) => {