fix(fuselage-hooks): usePosition fallback (#588)

Author: ggazzo

packages/fuselage-hooks/src/usePosition.ts

@@ -57,6 +57,8 @@ type PositionStyle = {
   zIndex?: '9999';
   transition?: 'none !important';
   opacity?: 0 | 1;
+  bottom?: 0;
+  display?: 'flex';
 };
 
 type PositionResult = {
@@ -85,7 +87,7 @@ const fallbackOrder = {
   bottom: 'btrl',
   right: 'rltb',
   left: 'lrbt',
-};
+} as const;
 
 const getParents = function (element: Element): Array<Element | Window> {
   // Set up a parent array
@@ -136,12 +138,14 @@ export const getPositionStyle = ({
   targetBoundaries,
   variantStore,
   target,
+  margin = 0,
 }: {
   placement: Placements;
   target: DOMRect;
   container: DOMRect;
   targetBoundaries: Boundaries;
   variantStore?: VariantBoundaries;
+  margin?: number;
 }): PositionResult => {
   if (!targetBoundaries) {
     return {};
@@ -197,11 +201,11 @@ export const getPositionStyle = ({
           opacity: 1,
         },
         placement: `${PlacementMap[placementAttempt]}-${PlacementMap[v]}`,
-      } as PositionResult;
+      } as unknown as PositionResult;
     }
   }
 
-  const placementAttempt = targetBoundaries[placementAttempts[0]];
+  const placementAttempt = placementAttempts[0];
 
   const directionVertical = ['t', 'b'].includes(placementAttempt);
 
@@ -214,6 +218,10 @@ export const getPositionStyle = ({
       top: `${point}px`,
       left: `${variantPoint}px`,
       position: 'fixed',
+      ...(bottom < target.height + point && {
+        bottom: margin,
+        display: 'flex',
+      }),
       zIndex: '9999',
       opacity: 1,
     },
@@ -279,7 +287,7 @@ export const usePosition = (
   } = options;
   const container = useRef(containerElement);
 
-  const [style, setStyle] = useDebouncedState({} as PositionResult, 10);
+  const [style, setStyle] = useDebouncedState<PositionResult>({}, 10);
 
   const callback = useMutableCallback(() => {
     const boundaries = target.current.getBoundingClientRect();
@@ -299,6 +307,7 @@ export const usePosition = (
         targetBoundaries,
         variantStore,
         target: boundaries,
+        margin,
       })
     );
   });