@sanity/ui 1.7.6 → 1.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -12,8 +12,7 @@
       "source": "./src/index.ts",
       "require": "./dist/index.js",
       "node": {
-        "import": "./dist/index.cjs.mjs",
-        "require": "./dist/index.js"
+        "import": "./dist/index.cjs.mjs"
       },
       "import": "./dist/index.esm.js",
       "default": "./dist/index.esm.js"
@@ -53,56 +52,56 @@
     "@sanity/color": "^2.2.5",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
-    "framer-motion": "^10.13.1",
+    "framer-motion": "^10.15.2",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
+    "@babel/core": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-conventional": "^17.6.7",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^2.3.6",
-    "@sanity/semantic-release-preset": "^4.1.2",
-    "@sanity/ui-workshop": "^1.2.7",
+    "@sanity/pkg-utils": "^2.4.5",
+    "@sanity/semantic-release-preset": "^4.1.3",
+    "@sanity/ui-workshop": "^1.2.9",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.3",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^20.4.4",
-    "@types/react": "^18.2.16",
+    "@types/node": "^20.5.0",
+    "@types/react": "^18.2.20",
     "@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.2.0",
-    "@typescript-eslint/parser": "^6.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
     "commitizen": "^4.3.0",
-    "cypress": "^12.17.2",
-    "cypress-real-events": "^1.9.1",
+    "cypress": "^12.17.3",
+    "cypress-real-events": "^1.10.0",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.18.16",
+    "esbuild": "^0.19.2",
     "esbuild-register": "^3.4.2",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.6.1",
+    "jest": "^29.6.2",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.6.1",
-    "lint-staged": "^13.2.3",
+    "jest-environment-jsdom": "^29.6.2",
+    "lint-staged": "^13.3.0",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.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}