From 06d866376206f7b744e6634548aa48b51e4d8f8b Mon Sep 17 00:00:00 2001
From: Azraei Yusof <mazei513@gmail.com>
Date: Fri, 31 May 2024 16:52:40 +0800
Subject: [PATCH] [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 #2842

* [Popper] Updated storybook
---
 packages/react/popper/src/Popper.stories.tsx | 46 ++++++++++++++++++++
 packages/react/popper/src/Popper.tsx         |  6 ++-
 2 files changed, 50 insertions(+), 2 deletions(-)

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 (
+    <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
index 6a2a1e40f..1f0111293 100644
--- 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 }) => {