Fix Popper placement and add customRootClass in Popper.js

rad-ui · Dec 26, 2023 · a45fb3d · a45fb3d
1 parent 538c5fc
commit a45fb3d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/src/components/tools/Popper/Popper.js b/src/components/tools/Popper/Popper.js
@@ -1,19 +1,28 @@
 import {useState, useRef} from 'react';
 import {customClassSwitcher} from '~/core';
 
-import {useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoPlacement, useRole, useDismiss} from '@floating-ui/react';
+import {useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoUpdate, autoPlacement, useRole, useDismiss} from '@floating-ui/react';
 
 // TODO : Use Floating Portal?
 // TODO : Collisions dont seem to be working as expected, need to investigate
 
 const ARROW_HEIGHT = 7;
 const GAP = 2;
 
+/**
+ *
+ *
+ * For Placement https://floating-ui.com/docs/computePosition#placement
+
+
+ */
+
 const Popper = ({
     popperName='',
     customRootClass='',
     activationStrategy='hover',
-    className='', placement='top',
+    className='',
+    placement='top',
     children,
     open=false,
     hoverDelay=10,
@@ -27,21 +36,19 @@ const Popper = ({
 
     const {refs, floatingStyles, context} = useFloating({
         placement: placement,
+        whileElementsMounted: autoUpdate,
         open: isOpen,
+        // strategy: 'fixed',
         middleware: [
             arrow({
                 element: arrowRef,
             }),
             offset(ARROW_HEIGHT + GAP),
-            // autoPlacement({
-            //     crossAxis: 'center',
-            //     alignment: 'start',
-            //     autoAlignment: true,
-            //     allowedPlacements: ['top', 'bottom', 'left', 'right'],
-            //     padding: 5,
-            // }),
-            flip(),
-
+            flip({
+                mainAxis: false,
+                fallbackPlacements: ['right', 'bottom'],
+            },
+            ),
         ],
         onOpenChange: setIsOpen,
     });

diff --git a/src/components/ui/Dropdown/Dropdown.js b/src/components/ui/Dropdown/Dropdown.js
@@ -10,7 +10,7 @@ const Dropdown = ({list=[], selected}) => {
         </ul>;
     };
     return <div>
-        <Popper placement="bottom" pop={<PopElem/>}>
+        <Popper open={true} placement="bottom-start" popperName="dropdown" pop={<PopElem/>}>
             <span>Dropdown</span>
         </Popper>
     </div>;

diff --git a/src/components/ui/Dropdown/Dropdown.stories.js b/src/components/ui/Dropdown/Dropdown.stories.js
@@ -7,13 +7,20 @@ export default {
     title: 'UI/Input/Dropdown',
     component: Dropdown,
     render: (args) => <SandboxEditor>
-        <div className=' bg-gray-400 p-4' >
-            <div className='block'>
-                <Heading className="text-gray-1000"> Dropdown</Heading>
+        <div className=' bg-gray-400 p-4 overflow-auto' style={{height: '200px'}}>
+            <div className='block' style={{height: '400px'}}>
+                <div style={{marginBottom: '200px'}}>
+                    <Heading className="text-gray-1000"> Dropdown</Heading>
+                </div>
+
                 <Dropdown
                     onSelect={() => {}} label={'Bello'} list={[
                         {value: 'hello', label: 'hello'},
                     ]}>Hello</Dropdown>
+
+                <div style={{marginTop: '200px'}}>
+                    <Heading className="text-gray-1000"> Dropdown End</Heading>
+                </div>
             </div>
         </div>
     </SandboxEditor>,