@sanity/ui 2.0.13 → 2.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "keywords": [
     "sanity",
     "ui",
@@ -106,8 +106,8 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.8",
-    "@sanity/color": "^3.0.2",
-    "@sanity/icons": "^2.11.4",
+    "@sanity/color": "^3.0.4",
+    "@sanity/icons": "^2.11.6",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
     "react-refractor": "^2.1.7"
@@ -120,9 +120,9 @@
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^5.1.6",
+    "@sanity/pkg-utils": "^5.1.8",
     "@sanity/semantic-release-preset": "^4.1.7",
-    "@sanity/ui-workshop": "^2.0.7",
+    "@sanity/ui-workshop": "^2.0.10",
     "@storybook/addon-a11y": "^8.0.5",
     "@storybook/addon-docs": "^8.0.5",
     "@storybook/addon-essentials": "^8.0.5",
@@ -143,7 +143,7 @@
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.5.9",
-    "@types/react": "^18.2.73",
+    "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.23",
     "@types/react-is": "^18.2.4",
     "@types/refractor": "^3.4.1",
@@ -151,7 +151,7 @@
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
     "commitizen": "^4.3.0",
-    "cypress": "^13.7.1",
+    "cypress": "^13.7.2",
     "cypress-real-events": "^1.12.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",

package/src/core/primitives/tooltip/tooltip.tsx

@@ -6,10 +6,10 @@ import {
   offset,
   shift,
   useFloating,
-  Middleware,
-  RootBoundary,
+  type Middleware,
+  type RootBoundary,
 } from '@floating-ui/react-dom'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
@@ -19,24 +19,25 @@ import {
   useMemo,
   useRef,
   useState,
-  ForwardedRef,
+  type ForwardedRef,
   useId,
+  useSyncExternalStore,
 } from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp, useForwardedRef, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
-import {Placement} from '../../types'
+import type {Placement} from '../../types'
 import {
   ConditionalWrapper,
   Layer,
-  LayerProps,
+  type LayerProps,
   Portal,
   useBoundaryElement,
   usePortal,
 } from '../../utils'
-import {Delay} from '../types'
+import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
@@ -131,17 +132,23 @@ export const Tooltip = forwardRef(function Tooltip(
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
 
+  const documentBodyOffsetWidth = useSyncExternalStore(
+    emptySubscribe,
+    () => document.body.offsetWidth,
+    // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
+    () => 800,
+  )
   // Get the maximum tooltip width (sans tooltip padding)
   // Tooltip width should never exceed the width of either any supplied boundary or portal element.
   // If both portal and boundary elements are provided, use the smaller width of the two.
   const tooltipWidth = useMemo(() => {
     const availableWidths = [
       ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
-      portalElement?.offsetWidth || document.body.offsetWidth,
+      portalElement?.offsetWidth || documentBodyOffsetWidth,
     ]
 
     return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
-  }, [boundaryElement, portalElement?.offsetWidth])
+  }, [boundaryElement, documentBodyOffsetWidth, portalElement?.offsetWidth])
 
   const middleware = useMemo(() => {
     const ret: Middleware[] = []
@@ -242,14 +249,14 @@ export const Tooltip = forwardRef(function Tooltip(
   )
   const handleClick = useCallback(
     (e: MouseEvent) => {
-      handleIsOpenChange(false, true), [handleIsOpenChange]
+      handleIsOpenChange(false, true)
       childProp?.props.onClick?.(e)
     },
     [childProp?.props, handleIsOpenChange],
   )
   const handleContextMenu = useCallback(
     (e: MouseEvent) => {
-      handleIsOpenChange(false, true), [handleIsOpenChange]
+      handleIsOpenChange(false, true)
       childProp?.props.onContextMenu?.(e)
     },
     [childProp?.props, handleIsOpenChange],
@@ -446,3 +453,5 @@ export const Tooltip = forwardRef(function Tooltip(
     </>
   )
 })
+
+const emptySubscribe = () => () => {}