fixup! fixup! Feat(web): Introduce new TooltipModern component with F…

…loatingUI
lmc-eu · Jan 17, 2024 · 2d1ec73 · 2d1ec73
1 parent c48887b
commit 2d1ec73
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"