From 2d1ec73e36661f585335f8846b9ab7db7c279130 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Wed, 17 Jan 2024 13:03:21 +0100
Subject: [PATCH] fixup! fixup! Feat(web): Introduce new TooltipModern
 component with FloatingUI

---
 .../src/components/Tooltip/TooltipContext.ts  |  4 +++
 .../src/components/Tooltip/TooltipModern.tsx  | 27 ++++++++++---------
 .../src/components/Tooltip/TooltipPopover.tsx | 18 +++++++++++--
 .../src/components/Tooltip/useFloatingUI.ts   | 14 ++++++++--
 .../demo/TooltipWithFloatingUI.tsx            |  2 +-
 5 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/packages/web-react/src/components/Tooltip/TooltipContext.ts b/packages/web-react/src/components/Tooltip/TooltipContext.ts
index 4f167c01c6..daf00b3170 100644
--- a/packages/web-react/src/components/Tooltip/TooltipContext.ts
+++ b/packages/web-react/src/components/Tooltip/TooltipContext.ts
@@ -8,6 +8,8 @@ type TooltipContextType = {
   getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => Record<string, unknown>;
   id: string;
   isOpen: boolean;
+  maxHeight?: number;
+  maxWidth?: number;
   middlewareData: MiddlewareData;
   onToggle: (isOpen: boolean) => void;
   placement?: Placement | undefined;
@@ -30,6 +32,8 @@ const defaultContext: TooltipContextType = {
   }),
   id: '',
   isOpen: false,
+  maxHeight: undefined,
+  maxWidth: undefined,
   onToggle: () => {},
   middlewareData: {},
   placement: 'bottom',
diff --git a/packages/web-react/src/components/Tooltip/TooltipModern.tsx b/packages/web-react/src/components/Tooltip/TooltipModern.tsx
index e193cf4de1..fc010c8c30 100644
--- a/packages/web-react/src/components/Tooltip/TooltipModern.tsx
+++ b/packages/web-react/src/components/Tooltip/TooltipModern.tsx
@@ -25,17 +25,18 @@ const TooltipModern = (props: TooltipModernProps) => {
 
   const arrowRef = useRef<HTMLSpanElement>(null);
 
-  const { x, y, refs, placement, middlewareData, getReferenceProps, getFloatingProps } = useFloatingUI({
-    arrowRef,
-    flipProp,
-    sizeProp,
-    shiftProp,
-    isOpen,
-    onToggle,
-    tooltipPlacement,
-    flipCrossAxis,
-    flipFallbackPlacements,
-  });
+  const { x, y, refs, placement, middlewareData, getReferenceProps, getFloatingProps, maxHeight, maxWidth } =
+    useFloatingUI({
+      arrowRef,
+      flipProp,
+      sizeProp,
+      shiftProp,
+      isOpen,
+      onToggle,
+      tooltipPlacement,
+      flipCrossAxis,
+      flipFallbackPlacements,
+    });
 
   useDeprecationMessage({
     method: 'component',
@@ -50,11 +51,13 @@ const TooltipModern = (props: TooltipModernProps) => {
     <TooltipProvider
       value={{
         arrowRef,
-        getReferenceProps,
         getFloatingProps,
+        getReferenceProps,
         id,
         isDismissible,
         isOpen,
+        maxHeight,
+        maxWidth,
         middlewareData,
         onToggle,
         placement,
diff --git a/packages/web-react/src/components/Tooltip/TooltipPopover.tsx b/packages/web-react/src/components/Tooltip/TooltipPopover.tsx
index 18b556ffe6..b71e934495 100644
--- a/packages/web-react/src/components/Tooltip/TooltipPopover.tsx
+++ b/packages/web-react/src/components/Tooltip/TooltipPopover.tsx
@@ -10,8 +10,20 @@ interface TooltipPopoverProps extends ChildrenProps, StyleProps {}
 
 const TooltipPopover = (props: TooltipPopoverProps) => {
   const { children, ...rest } = props;
-  const { arrowRef, getFloatingProps, isDismissible, isOpen, middlewareData, onToggle, placement, tooltipRef, x, y } =
-    useTooltipContext();
+  const {
+    arrowRef,
+    getFloatingProps,
+    isDismissible,
+    isOpen,
+    middlewareData,
+    onToggle,
+    placement,
+    tooltipRef,
+    x,
+    y,
+    maxHeight,
+    maxWidth,
+  } = useTooltipContext();
   console.log('middlewareData.arrow:', middlewareData.arrow);
   const { classProps, props: modifiedProps } = useTooltipStyleProps({
     open: isOpen,
@@ -35,6 +47,8 @@ const TooltipPopover = (props: TooltipPopoverProps) => {
       style={{
         top: y ?? 0,
         left: x ?? 0,
+        maxHeight,
+        maxWidth,
       }}
       data-spirit-placement={placement}
       data-spirit-placement-controlled
diff --git a/packages/web-react/src/components/Tooltip/useFloatingUI.ts b/packages/web-react/src/components/Tooltip/useFloatingUI.ts
index 493b3b92dc..4429036f8e 100644
--- a/packages/web-react/src/components/Tooltip/useFloatingUI.ts
+++ b/packages/web-react/src/components/Tooltip/useFloatingUI.ts
@@ -13,6 +13,7 @@ import {
   autoUpdate,
   limitShift,
 } from '@floating-ui/react';
+import { useState } from 'react';
 
 type UseTooltipUIProps = {
   arrowRef: React.MutableRefObject<HTMLElement | null>;
@@ -42,6 +43,9 @@ export const useFloatingUI = (props: UseTooltipUIProps) => {
     sizeProp,
   } = props;
 
+  const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined);
+  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);
+
   const { x, y, refs, context, placement, middlewareData } = useFloating({
     open: isOpen,
     onOpenChange: onToggle,
@@ -55,7 +59,13 @@ export const useFloatingUI = (props: UseTooltipUIProps) => {
           crossAxis: flipCrossAxis,
           fallbackPlacements: flipFallbackPlacements ? stringToArray(flipFallbackPlacements) : undefined,
         }),
-      sizeProp && size(),
+      sizeProp &&
+        size({
+          apply({ availableHeight, availableWidth }: { availableHeight: number; availableWidth: number }) {
+            setMaxHeight(availableHeight);
+            setMaxWidth(availableWidth);
+          },
+        }),
       shiftProp &&
         shift({
           limiter: limitShift(),
@@ -69,5 +79,5 @@ export const useFloatingUI = (props: UseTooltipUIProps) => {
 
   const { getReferenceProps, getFloatingProps } = useInteractions([click, role]);
 
-  return { x, y, refs, context, placement, middlewareData, getReferenceProps, getFloatingProps };
+  return { x, y, refs, context, placement, middlewareData, getReferenceProps, getFloatingProps, maxHeight, maxWidth };
 };
diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipWithFloatingUI.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipWithFloatingUI.tsx
index aafe9bf77d..06b992ac0d 100644
--- a/packages/web-react/src/components/TooltipModern/demo/TooltipWithFloatingUI.tsx
+++ b/packages/web-react/src/components/TooltipModern/demo/TooltipWithFloatingUI.tsx
@@ -50,7 +50,7 @@ const TooltipWithFloatingUI = () => {
         The following example is using external library <a href="https://floating-ui.com">Floating UI</a>.
       </p>
       <p>🖱 Try scrolling the example to see how Tooltip placement is updated.</p>
-      <Grid cols={{ mobile: 1, tablet: 3, desktop: 4 }}>
+      <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }}>
         <Checkbox id="flip" isChecked={flip} label="Flip" onChange={() => setFlip(!flip)} />
         <Checkbox
           id="flipCrossAxis"