@sanity/ui 2.0.0-alpha.22 → 2.0.0-alpha.24

package/package.json

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

package/src/primitives/avatar/avatar.tsx

@@ -42,6 +42,8 @@ const Stroke = styled.ellipse(avatarStyle.stroke)
 
 const Initials = styled.div(avatarStyle.initials)
 
+const Image = styled.svg(avatarStyle.image)
+
 /**
  * Avatars are used to represent people and other agents (e.g. bots).
  *
@@ -131,7 +133,7 @@ export const Avatar = forwardRef(function Avatar(
       </Arrow>
 
       {!imageFailed && src && (
-        <svg viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
+        <Image viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
           <defs>
             <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
               <image
@@ -162,7 +164,7 @@ export const Avatar = forwardRef(function Avatar(
             stroke={color}
             vectorEffect="non-scaling-stroke"
           />
-        </svg>
+        </Image>
       )}
 
       {(imageFailed || !src) && initials && (

package/src/primitives/avatar/styles.ts

@@ -9,6 +9,7 @@ export const avatarStyle = {
   bgStroke: avatarBgStrokeStyle,
   stroke: avatarStrokeStyle,
   initials: avatarInitialsStyle,
+  image: avatarImageStyle,
 }
 
 function avatarArrowStyle(): CSSObject {
@@ -123,6 +124,12 @@ export function responsiveAvatarSizeStyle(
   })
 }
 
+export function avatarImageStyle(): CSSObject {
+  return {
+    position: 'relative',
+  }
+}
+
 export function avatarInitialsStyle(props: ThemeProps): CSSObject {
   const {theme} = props
   const {base} = theme.sanity.color

package/src/primitives/tooltip/tooltip.test.tsx

@@ -265,26 +265,6 @@ describe('Tooltip', () => {
       act(() => jest.advanceTimersByTime(openDelay / 2))
       screen.getByText('Tooltip 2')
     })
-    it("should throw an error if it's nested inside another <TooltipDelayGroupProvider />", () => {
-      // eslint-disable-next-line no-console
-      console.error = jest.fn() // Silence console.error as we are actually expecting an error in this test.
-      expect(() => {
-        render(
-          <TooltipDelayGroupProvider delay={100}>
-            <TooltipDelayGroupProvider delay={100}>
-              <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
-                <Button mode="bleed" text="Button 1" />
-              </Tooltip>
-            </TooltipDelayGroupProvider>
-          </TooltipDelayGroupProvider>,
-        )
-      }).toThrow(
-        'TooltipDelayGroupProvider cannot be nested inside another TooltipDelayGroupProvider',
-      )
-
-      // Clean up the console.error mock
-      jest.clearAllMocks()
-    })
   })
 
   describe('Closing the <Tooltip /> with the Escape key', () => {

package/src/primitives/tooltip/tooltip.tsx

@@ -264,7 +264,7 @@ export const Tooltip = forwardRef(function Tooltip(
   // necessary, because the tooltip might not always close as it should (e.g. when clicking
   // the reference element triggers a CPU-heavy operation.)
   useEffect(() => {
-    if (!isOpen) return
+    if (!showTooltip) return
 
     function handleWindowMouseMove(event: MouseEvent) {
       if (!referenceElement) return
@@ -284,17 +284,17 @@ export const Tooltip = forwardRef(function Tooltip(
     return () => {
       window.removeEventListener('mousemove', handleWindowMouseMove)
     }
-  }, [isOpen, referenceElement, handleIsOpenChange])
+  }, [showTooltip, referenceElement, handleIsOpenChange])
 
   // Close when `disabled` changes to `true`
   useEffect(() => {
-    if (disabled) handleIsOpenChange(false)
-  }, [disabled, handleIsOpenChange])
+    if (disabled && showTooltip) handleIsOpenChange(false)
+  }, [disabled, handleIsOpenChange, showTooltip])
 
   // Close when `content` changes to falsy
   useEffect(() => {
-    if (!content) handleIsOpenChange(false)
-  }, [content, handleIsOpenChange])
+    if (!content && showTooltip) handleIsOpenChange(false)
+  }, [content, handleIsOpenChange, showTooltip])
 
   // Update reference
   useEffect(() => refs.setReference(referenceElement), [referenceElement, refs])

package/src/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -3,7 +3,7 @@ import {useDelayedState} from '../../../hooks/useDelayedState'
 import {Delay} from '../../types'
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
 import {TooltipDelayGroupContextValue} from './types'
-import {useTooltipDelayGroup} from './useTooltipDelayGroup'
+
 /**
  * @public
  * */
@@ -31,14 +31,6 @@ export function TooltipDelayGroupProvider(
   const [isGroupActive, setIsGroupActive] = useDelayedState(false)
   const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)
 
-  const isInsideContext = useTooltipDelayGroup()
-
-  if (isInsideContext) {
-    throw new Error(
-      'TooltipDelayGroupProvider cannot be nested inside another TooltipDelayGroupProvider',
-    )
-  }
-
   const openDelay = typeof delay === 'number' ? delay : delay?.open || 0
   const closeDelay = typeof delay === 'number' ? delay : delay?.close || 0
 

package/src/theme/studioTheme/theme.ts

@@ -8,9 +8,9 @@ import {fonts} from './fonts'
 export const studioTheme: RootTheme = {
   avatar: {
     sizes: [
-      {distance: -3, size: 23},
-      {distance: -6, size: 33},
-      {distance: -9, size: 53},
+      {distance: -3, size: 19},
+      {distance: -6, size: 31},
+      {distance: -9, size: 51},
     ],
     focusRing: {offset: 0, width: 1},
   },