Fix(web-react): Make Tooltip positionStrategy actually work

lmc-eu · Jul 24, 2024 · 6598cce · 6598cce
1 parent f9a6be5
commit 6598cce
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 22 deletions.
diff --git a/packages/web-react/src/components/Tooltip/Tooltip.tsx b/packages/web-react/src/components/Tooltip/Tooltip.tsx
@@ -57,26 +57,27 @@ const Tooltip = (props: SpiritTooltipProps) => {
   }
 
   // Get props for the FloatingUI hook
-  const { getFloatingProps, getReferenceProps, maxWidth, middlewareData, placement, refs, x, y } = useFloating({
-    arrowRef,
-    cornerOffset: tooltipCornerOffset,
-    flipCrossAxis,
-    flipFallbackAxisSideDirection,
-    flipFallbackPlacements,
-    flipProp,
-    isDismissible,
-    isFocusableOnHover,
-    isOpen,
-    offset: tooltipOffset,
-    onToggle,
-    shiftProp,
-    sizeProp,
-    positionStrategy,
-    tooltipArrowWidth,
-    tooltipMaxWidth,
-    tooltipPlacement,
-    trigger,
-  });
+  const { getFloatingProps, getReferenceProps, maxWidth, middlewareData, placement, refs, x, y, position } =
+    useFloating({
+      arrowRef,
+      cornerOffset: tooltipCornerOffset,
+      flipCrossAxis,
+      flipFallbackAxisSideDirection,
+      flipFallbackPlacements,
+      flipProp,
+      isDismissible,
+      isFocusableOnHover,
+      isOpen,
+      offset: tooltipOffset,
+      onToggle,
+      shiftProp,
+      sizeProp,
+      positionStrategy,
+      tooltipArrowWidth,
+      tooltipMaxWidth,
+      tooltipPlacement,
+      trigger,
+    });
 
   return (
     <TooltipProvider
@@ -97,6 +98,7 @@ const Tooltip = (props: SpiritTooltipProps) => {
         triggerRef: refs.setReference,
         x,
         y,
+        position,
       }}
     >
       <div

diff --git a/packages/web-react/src/components/Tooltip/TooltipContext.ts b/packages/web-react/src/components/Tooltip/TooltipContext.ts
@@ -1,4 +1,4 @@
-import { MiddlewareData, Placement } from '@floating-ui/react';
+import { MiddlewareData, Placement, Strategy } from '@floating-ui/react';
 import { HTMLProps, MutableRefObject, createContext, useContext } from 'react';
 
 type refType = ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
@@ -20,6 +20,7 @@ type TooltipContextType = {
   triggerRef: refType;
   x: number;
   y: number;
+  position?: Strategy;
 };
 
 const defaultContext: TooltipContextType = {
@@ -45,6 +46,7 @@ const defaultContext: TooltipContextType = {
   triggerRef: () => {},
   x: 0,
   y: 0,
+  position: 'absolute',
 };
 
 const TooltipContext = createContext<TooltipContextType>(defaultContext);

diff --git a/packages/web-react/src/components/Tooltip/TooltipPopover.tsx b/packages/web-react/src/components/Tooltip/TooltipPopover.tsx
@@ -21,6 +21,7 @@ const TooltipPopover = (props: TooltipPopoverProps) => {
     tooltipRef,
     x,
     y,
+    position,
     sizeMaxWidth,
     tooltipMaxWidth,
   } = useTooltipContext();
@@ -83,6 +84,7 @@ const TooltipPopover = (props: TooltipPopoverProps) => {
       {...contentOtherProps}
       {...getFloatingProps()}
       style={{
+        position,
         top: y ?? 0,
         left: x ?? 0,
         ...getMaxHeightAndWidth(),

diff --git a/packages/web-react/src/components/Tooltip/__tests__/useFloatingUI.test.ts b/packages/web-react/src/components/Tooltip/__tests__/useFloatingUI.test.ts
@@ -27,6 +27,7 @@ describe('useFloatingUI', () => {
     expect(result.current.getReferenceProps).toBeDefined();
     expect(result.current.middlewareData).toBeDefined();
     expect(result.current.placement).toBeDefined();
+    expect(result.current.position).toBe('absolute');
     expect(result.current.refs).toBeDefined();
     expect(result.current.x).toBeDefined();
     expect(result.current.y).toBeDefined();

diff --git a/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx b/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx
@@ -33,6 +33,11 @@ const meta: Meta<typeof Tooltip> = {
       options: Object.values(Placements),
       table: { defaultValue: { summary: 'bottom' } },
     },
+    positionStrategy: {
+      control: 'select',
+      options: ['absolute', 'fixed'],
+      table: { defaultValue: { summary: 'absolute' } },
+    },
     trigger: {
       control: 'select',
       options: ['click, hover', 'hover', 'click'],
@@ -55,6 +60,7 @@ const meta: Meta<typeof Tooltip> = {
     isFocusableOnHover: false,
     isOpen: false,
     placement: 'bottom',
+    positionStrategy: 'absolute',
     trigger: ['click', 'hover'],
   },
 };

diff --git a/packages/web-react/src/components/Tooltip/useFloating.ts b/packages/web-react/src/components/Tooltip/useFloating.ts
@@ -81,7 +81,7 @@ export const useFloating = (props: UseTooltipUIProps) => {
       : undefined;
 
   // Floating UI library settings
-  const { x, y, refs, context, placement, middlewareData } = useFloatingUI({
+  const { x, y, floatingStyles, refs, context, placement, middlewareData } = useFloatingUI({
     open: isOpen,
     onOpenChange: (open, event, reason) => {
       if (isHoverEnabled) {
@@ -159,5 +159,6 @@ export const useFloating = (props: UseTooltipUIProps) => {
     refs,
     x,
     y,
+    position: floatingStyles.position as Strategy,
   };
 };