Better Debug for Storybook + Popper API Improvements (#155)

src/components/tools/Popper/Popper.js

@@ -1,7 +1,7 @@
 import {useState, useRef} from 'react';
 import {customClassSwitcher} from '~/core';
 
-import {useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoUpdate, autoPlacement, useRole, useDismiss} from '@floating-ui/react';
+import {useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoPlacement, hide, shift, autoUpdate, useRole, useDismiss} from '@floating-ui/react';
 
 // TODO : Use Floating Portal?
 // TODO : Collisions dont seem to be working as expected, need to investigate
@@ -36,7 +36,7 @@ const Popper = ({
 
     const {refs, floatingStyles, context} = useFloating({
         placement: placement,
-        whileElementsMounted: autoUpdate,
+        whileElementsMounted: autoUpdate, // this makes sure the popup is attached to the reference on scrolling etc
         open: isOpen,
         // strategy: 'fixed',
         middleware: [
@@ -45,10 +45,18 @@ const Popper = ({
             }),
             offset(ARROW_HEIGHT + GAP),
             flip({
-                mainAxis: false,
-                fallbackPlacements: ['right', 'bottom'],
+                mainAxis: true,
+                fallbackStrategy: 'initialPlacement',
             },
             ),
+            shift({
+                crossAxis: false,
+            }),
+            hide({
+                strategy: 'referenceHidden', // 'referenceHidden' by default
+            }),
+
+
         ],
         onOpenChange: setIsOpen,
     });
@@ -66,9 +74,9 @@ const Popper = ({
         dismiss,
     ]);
 
-    return <>
+    return <span>
         <span
-            className={`${rootClass}-reference-element ${className}`} ref={refs.setReference} {...getReferenceProps(
+            className={`rad-ui-popper ${rootClass}-reference-element ${className}`} ref={refs.setReference} {...getReferenceProps(
                 {
                     onClick: () => {
                         console.log('click');
@@ -78,7 +86,7 @@ const Popper = ({
         {isOpen && <div className={`${rootClass}-floating-element`} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()} >
             {showArrow && <FloatingArrow className={`rad-ui-arrow ${rootClass}-arrow`} ref={arrowRef} context={context} />}
             {pop}</div>}
-    </>;
+    </span>;
 };
 
 export default Popper;

src/components/tools/ScrollPlayground/ScrollPlayground.js

@@ -0,0 +1,34 @@
+import React, {useState} from 'react';
+
+
+import Button from '~/components/ui/Button/Button';
+
+const ScrollPlayground = ({children}) => {
+    const [scrollable, setScrollable] = useState(false);
+
+    const handleScrollableChange = (e) => {
+        setScrollable((scrollable) => !scrollable);
+
+        setTimeout(() => {
+            const elem = document.getElementById('middle');
+            if (elem) {
+                elem.scrollIntoView();
+            }
+        }, 100);
+    };
+
+    const SCROLL_BOUNDING_BOX = 200;
+
+    return <div className='block bg-plum-200 relative p-2 overflow-auto' style={{height: '300px', width: '300px'}}>
+        <Button onClick={handleScrollableChange}>{scrollable?'Disable':'Enable Scrollable'}</Button>
+        <div className='mt-10' style={scrollable?{height: SCROLL_BOUNDING_BOX*4, width: SCROLL_BOUNDING_BOX*4}:{}}>
+            <div style={scrollable?{marginTop: SCROLL_BOUNDING_BOX*2, paddingLeft: SCROLL_BOUNDING_BOX*2}:{}}>
+                <span id="middle">
+                    {children}
+                </span>
+            </div>
+        </div>
+    </div>;
+};
+
+export default ScrollPlayground;

src/components/ui/Dropdown/Dropdown.js

@@ -9,8 +9,8 @@ const Dropdown = ({list=[], selected}) => {
             })}
         </ul>;
     };
-    return <div>
-        <Popper open={true} placement="bottom-start" popperName="dropdown" pop={<PopElem/>}>
+    return <div className='relative'>
+        <Popper open={false} placement="bottom-start" popperName="dropdown" pop={<PopElem/>}>
             <span>Dropdown</span>
         </Popper>
     </div>;

src/components/ui/Dropdown/Dropdown.stories.js

@@ -15,8 +15,16 @@ export default {
 
                 <Dropdown
                     onSelect={() => {}} label={'Bello'} list={[
-                        {value: 'hello', label: 'hello'},
-                    ]}>Hello</Dropdown>
+                        {value: `hello Hello this is a dropdown. Hello this is a dropdown. 
+                        Hello this is a dropdown. Hello`, label: 'hello'},
+                    ]}>
+                    <div>
+                        Hello this is a dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello this is a
+                        dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello
+                        this is a dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello this is a
+                        dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello this is a dropdown. Hello
+                    </div>
+                </Dropdown>
 
                 <div style={{marginTop: '200px'}}>
                     <Heading className="text-gray-1000"> Dropdown End</Heading>

src/components/ui/Tooltip/Tooltip.stories.js

@@ -1,20 +1,18 @@
 
 import {Tooltip, Heading} from '~/';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import ScrollPlayground from '~/components/tools/ScrollPlayground/ScrollPlayground';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
     title: 'UI/Input/Tooltip',
     component: Tooltip,
     render: (args) => <SandboxEditor>
-        <div className=' bg-gray-400 p-4' >
-            <div className='block'>
-                <Heading className="text-gray-1000 mb-4">Tooltip</Heading>
-                <Tooltip className="text-gray-1000" label="This is a tooltip">
+        <ScrollPlayground>
+            <Tooltip className="text-gray-1000" label="This is a tooltip">
                     Hello, hover me!
-                </Tooltip>
-            </div>
-        </div>
+            </Tooltip>
+        </ScrollPlayground>
     </SandboxEditor>,
 };
 

styles/themes/default.scss

@@ -252,4 +252,8 @@ button:active, button:focus, input:active, input:focus, textarea:active, textare
     padding: 4px 8px;
 
 
+}
+
+.rad-ui-popper{
+    // max-width: calc(100vw - 10px);
 }