@sanity/ui 0.37.14 → 0.37.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.14",
+  "version": "0.37.15",
   "sideEffects": false,
   "source": "./src/index.ts",
   "exports": {
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7e3169ea708addc044669028bc627c00318a1236"
+  "gitHead": "73cdaa54f6eca0236e1386751edf038d41181dd5"
 }

package/src/primitives/popover/popover.tsx

@@ -1,4 +1,12 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
+import React, {
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {usePopper} from 'react-popper'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
@@ -137,7 +145,7 @@ export const Popover = forwardRef(function Popover(
   const [popperElement, setPopperElement] = useState<HTMLElement | null>(null)
   const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null)
   const popperReferenceElement = referenceElementProp || referenceElement
-  const width = useArrayProp(widthProp)
+  const width = useArrayProp(matchReferenceWidth ? 'auto' : widthProp)
 
   const modifiers = usePopoverModifiers({
     allowedAutoPlacements,
@@ -188,14 +196,23 @@ export const Popover = forwardRef(function Popover(
 
   const popoverStyle = useMemo(() => ({...style, ...styles.popper}), [style, styles])
 
+  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
   useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate()
-      } catch (_) {
-        // ignore caught error
-      }
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current)
+      updateTimeoutRef.current = null
     }
+
+    updateTimeoutRef.current = setTimeout(() => {
+      if (forceUpdate) {
+        try {
+          forceUpdate()
+        } catch (_) {
+          // ignore caught error
+        }
+      }
+    }, 0)
   }, [content, forceUpdate, open, popperReferenceElement])
 
   if (disabled) {

package/src/primitives/tooltip/__workshop__/props.tsx

@@ -1,9 +1,10 @@
 import {Box, Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
+import {useSelect, useText} from '@sanity/ui-workshop'
 import React from 'react'
 import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {
+  const content = useText('Content', 'Tooltip content')
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
 
   return (
@@ -12,7 +13,7 @@ export default function PropsStory() {
         <Tooltip
           content={
             <Box padding={2}>
-              <Text size={1}>Tooltip content</Text>
+              <Text size={1}>{content}</Text>
             </Box>
           }
           placement={placement}

package/src/primitives/tooltip/tooltip.tsx

@@ -1,4 +1,4 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useState} from 'react'
+import React, {cloneElement, forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import {usePopper} from 'react-popper'
 import styled from 'styled-components'
 import {useArrayProp, useForwardedRef} from '../../hooks'
@@ -118,14 +118,23 @@ export const Tooltip = forwardRef(function Tooltip(
     }
   }, [isOpen, referenceElement])
 
+  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
   useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate()
-      } catch (_) {
-        // ignore caught error
-      }
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current)
+      updateTimeoutRef.current = null
     }
+
+    updateTimeoutRef.current = setTimeout(() => {
+      if (forceUpdate) {
+        try {
+          forceUpdate()
+        } catch (_) {
+          // ignore caught error
+        }
+      }
+    }, 0)
   }, [forceUpdate, content])
 
   // Close when `disabled` changes to `true`