@sanity/ui 1.7.7 → 1.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -76,7 +76,6 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-is": "^18.2.1",
     "@types/refractor": "^3.0.2",
-    "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
@@ -108,7 +107,7 @@
     "rimraf": "^5.0.1",
     "semantic-release": "^21.0.7",
     "start-server-and-test": "^2.0.0",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.1.6"
   },
@@ -116,7 +115,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-is": "^18",
-    "styled-components": "^5.2"
+    "styled-components": "^5.2 || ^6"
   },
   "engines": {
     "node": ">=14.0.0"

package/src/primitives/tooltip/tooltip.tsx

@@ -8,6 +8,7 @@ import {
   useFloating,
   Middleware,
   RootBoundary,
+  size,
 } from '@floating-ui/react-dom'
 import {
   cloneElement,
@@ -90,12 +91,25 @@ 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({
@@ -111,21 +125,12 @@ export const Tooltip = forwardRef(function Tooltip(
     return ret
   }, [boundaryElement, fallbackPlacements])
 
-  const {x, y, placement, middlewareData, refs, update, strategy} = useFloating({
+  const {floatingStyles, placement, middlewareData, refs, update} = 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
@@ -238,7 +243,13 @@ export const Tooltip = forwardRef(function Tooltip(
   if (disabled) return child
 
   const root = (
-    <Root data-ui="Tooltip" {...restProps} ref={setFloating} style={rootStyle} zOffset={zOffset}>
+    <Root
+      data-ui="Tooltip"
+      {...restProps}
+      ref={setFloating}
+      style={floatingStyles}
+      zOffset={zOffset}
+    >
       <Card
         data-ui="Tooltip__card"
         data-placement={placement}