@sanity/ui 1.7.10 → 1.7.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.7.10",
+  "version": "1.7.11",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/primitives/tooltip/tooltip.tsx

@@ -8,7 +8,6 @@ import {
   useFloating,
   Middleware,
   RootBoundary,
-  size,
 } from '@floating-ui/react-dom'
 import {
   cloneElement,
@@ -91,25 +90,12 @@ export const Tooltip = forwardRef(function Tooltip(
         fallbackPlacements,
         padding: 4,
         rootBoundary,
-        mainAxis: false,
       }),
     )
 
     // Define distance between reference and floating element
     ret.push(offset({mainAxis: 3}))
 
-    // Set width and height on the floating element
-    ret.push(
-      size({
-        apply({availableWidth, availableHeight, elements}) {
-          Object.assign(elements.floating.style, {
-            maxWidth: `${availableWidth - 4 * 2}px`, // the padding is `4px`
-            maxHeight: `${availableHeight - 4 * 2}px`, // the padding is `4px`
-          })
-        },
-      }),
-    )
-
     // Shift the tooltip so its sits with the boundary eleement
     ret.push(
       shift({
@@ -125,12 +111,21 @@ export const Tooltip = forwardRef(function Tooltip(
     return ret
   }, [boundaryElement, fallbackPlacements])
 
-  const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
+  const {x, y, placement, middlewareData, refs, update, strategy} = useFloating({
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate,
   })
 
+  const rootStyle: CSSProperties = useMemo(
+    () => ({
+      position: strategy,
+      top: y ?? 0,
+      left: x ?? 0,
+    }),
+    [strategy, x, y],
+  )
+
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
 
   const arrowX = middlewareData.arrow?.x
@@ -243,13 +238,7 @@ export const Tooltip = forwardRef(function Tooltip(
   if (disabled) return child
 
   const root = (
-    <Root
-      data-ui="Tooltip"
-      {...restProps}
-      ref={setFloating}
-      style={floatingStyles}
-      zOffset={zOffset}
-    >
+    <Root data-ui="Tooltip" {...restProps} ref={setFloating} style={rootStyle} zOffset={zOffset}>
       <Card
         data-ui="Tooltip__card"
         data-placement={placement}