@sanity/ui 2.3.1 → 2.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "keywords": [
     "sanity",
     "ui",
@@ -119,7 +119,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.9.1",
+    "@sanity/pkg-utils": "^6.9.3",
     "@sanity/semantic-release-preset": "^4.1.8",
     "@sanity/ui-workshop": "^2.0.15",
     "@storybook/addon-a11y": "^8.0.8",

package/src/core/components/menu/menuButton.tsx

@@ -1,5 +1,14 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {cloneElement, forwardRef, useCallback, useMemo, useState, useEffect, useRef} from 'react'
+import {
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+} from 'react'
 import {Popover, PopoverProps} from '../../primitives'
 import {Placement, Radius} from '../../types'
 import {MenuProps} from './menu'
@@ -52,7 +61,7 @@ export interface MenuButtonProps {
  */
 export const MenuButton = forwardRef(function MenuButton(
   props: MenuButtonProps,
-  ref: React.ForwardedRef<HTMLButtonElement | null>,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
@@ -219,19 +228,7 @@ export const MenuButton = forwardRef(function MenuButton(
 
   const menu = menuProp && cloneElement(menuProp, menuProps)
 
-  const setButtonRef = useCallback(
-    (el: HTMLButtonElement | null) => {
-      if (typeof ref === 'function') {
-        ref(el)
-      } else if (ref) {
-        ref.current = el
-      }
-
-      setButtonElement(el)
-    },
-    [ref],
-  )
-
+  const ref = useRef<HTMLButtonElement | null>(null)
   const button = useMemo(
     () =>
       buttonProp &&
@@ -243,12 +240,28 @@ export const MenuButton = forwardRef(function MenuButton(
         onMouseDown: handleMouseDown,
         'aria-haspopup': true,
         'aria-expanded': open,
-        ref: setButtonRef,
+        ref: ref,
         selected: open,
       }),
-    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef],
+    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
   )
 
+  // Forward button ref to parent
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  // If there's a button then we need to set the reference element to the cloned button ref
+  // and if button changes we make sure to update or remove the reference element.
+  useEffect(() => {
+    if (!button) return undefined
+
+    setButtonElement(ref.current)
+
+    return () => setButtonElement(null)
+  }, [button])
+
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,

package/src/core/components/menu/menuGroup.tsx

@@ -1,5 +1,5 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {createElement, isValidElement, useCallback, useEffect, useRef, useState} from 'react'
+import {isValidElement, useCallback, useEffect, useRef, useState} from 'react'
 import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
@@ -35,7 +35,7 @@ export function MenuGroup(
     as = 'button',
     children,
     fontSize = 1,
-    icon,
+    icon: IconComponent,
     onClick,
     padding = 3,
     popover,
@@ -177,10 +177,10 @@ export function MenuGroup(
         type={as === 'button' ? 'button' : undefined}
       >
         <Flex gap={space} padding={padding}>
-          {icon && (
+          {IconComponent && (
             <Text size={fontSize}>
-              {isValidElement(icon) && icon}
-              {isValidElementType(icon) && createElement(icon)}
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
             </Text>
           )}
 

package/src/core/components/menu/menuItem.tsx

@@ -1,5 +1,4 @@
 import {
-  createElement,
   forwardRef,
   isValidElement,
   useCallback,
@@ -49,8 +48,8 @@ export const MenuItem = forwardRef(function MenuItem(
     disabled,
     fontSize = 1,
     hotkeys,
-    icon,
-    iconRight,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
     onClick,
     padding = 3,
     paddingX,
@@ -135,12 +134,12 @@ export const MenuItem = forwardRef(function MenuItem(
       tabIndex={-1}
       type={as === 'button' ? 'button' : undefined}
     >
-      {(icon || text || iconRight) && (
+      {(IconComponent || text || IconRightComponent) && (
         <Flex as="span" gap={space} align="center" {...paddingProps}>
-          {icon && (
+          {IconComponent && (
             <Text size={fontSize}>
-              {isValidElement(icon) && icon}
-              {isValidElementType(icon) && createElement(icon)}
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
             </Text>
           )}
 
@@ -160,10 +159,10 @@ export const MenuItem = forwardRef(function MenuItem(
             />
           )}
 
-          {iconRight && (
+          {IconRightComponent && (
             <Text size={fontSize}>
-              {isValidElement(iconRight) && iconRight}
-              {isValidElementType(iconRight) && createElement(iconRight)}
+              {isValidElement(IconRightComponent) && IconRightComponent}
+              {isValidElementType(IconRightComponent) && <IconRightComponent />}
             </Text>
           )}
         </Flex>

package/src/core/components/tree/treeItem.tsx

@@ -1,6 +1,6 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
+import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
 import {
@@ -52,7 +52,7 @@ export const TreeItem = memo(function TreeItem(
     expanded: expandedProp = false,
     fontSize = 1,
     href,
-    icon,
+    icon: IconComponent,
     id: idProp,
     linkAs,
     muted,
@@ -121,14 +121,17 @@ export const TreeItem = memo(function TreeItem(
     <Flex padding={padding}>
       <Box
         marginRight={space}
-        style={{visibility: icon || children ? 'visible' : 'hidden', pointerEvents: 'none'}}
+        style={{
+          visibility: IconComponent || children ? 'visible' : 'hidden',
+          pointerEvents: 'none',
+        }}
       >
-        {icon && (
+        {IconComponent && (
           <Text muted={muted} size={fontSize} weight={weight}>
-            {createElement(icon)}
+            <IconComponent />
           </Text>
         )}
-        {!icon && (
+        {!IconComponent && (
           <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
             <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
           </ToggleArrowText>

package/src/core/hooks/useCustomValidity.ts

@@ -8,8 +8,6 @@ export function useCustomValidity(
   customValidity: string | undefined,
 ): void {
   useEffect(() => {
-    if (ref.current) {
-      ref.current.setCustomValidity(customValidity || '')
-    }
+    ref.current?.setCustomValidity(customValidity || '')
   }, [customValidity, ref])
 }

package/src/core/hooks/useDelayed.test.ts

@@ -7,6 +7,7 @@ describe('useDelayedState', () => {
   it('should update state immediately if delay is not provided', () => {
     const {result} = renderHook(() => useDelayedState(false))
     const [, setState] = result.current
+
     act(() => {
       setState(true)
     })

package/src/core/primitives/button/button.tsx

@@ -1,4 +1,4 @@
-import {createElement, forwardRef, isValidElement, useMemo} from 'react'
+import {forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -68,8 +68,8 @@ export const Button = forwardRef(function Button(
     children,
     disabled,
     fontSize = 1,
-    icon,
-    iconRight,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
     justify: justifyProp = 'center',
     loading,
     mode = 'default',
@@ -138,13 +138,13 @@ export const Button = forwardRef(function Button(
         </LoadingBox>
       )}
 
-      {(icon || text || iconRight) && (
+      {(IconComponent || text || IconRightComponent) && (
         <Box as="span" {...boxProps}>
           <Flex as="span" justify={justify} gap={space}>
-            {icon && (
+            {IconComponent && (
               <Text size={fontSize}>
-                {isValidElement(icon) && icon}
-                {isValidElementType(icon) && createElement(icon)}
+                {isValidElement(IconComponent) && IconComponent}
+                {isValidElementType(IconComponent) && <IconComponent />}
               </Text>
             )}
 
@@ -160,10 +160,10 @@ export const Button = forwardRef(function Button(
               </Text>
             )}
 
-            {iconRight && (
+            {IconRightComponent && (
               <Text size={fontSize}>
-                {isValidElement(iconRight) && iconRight}
-                {isValidElementType(iconRight) && createElement(iconRight)}
+                {isValidElement(IconRightComponent) && IconRightComponent}
+                {isValidElementType(IconRightComponent) && <IconRightComponent />}
               </Text>
             )}
           </Flex>

package/src/core/primitives/textInput/textInput.tsx

@@ -1,14 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {
-  createElement,
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react'
+import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, useRef} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
@@ -167,8 +159,8 @@ export const TextInput = forwardRef(function TextInput(
     clearButton,
     disabled = false,
     fontSize: fontSizeProp = 2,
-    icon,
-    iconRight,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
     onClear,
     padding: paddingProp = 3,
     prefix,
@@ -192,8 +184,8 @@ export const TextInput = forwardRef(function TextInput(
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)
-  const $hasIcon = Boolean(icon)
-  const $hasIconRight = Boolean(iconRight)
+  const $hasIcon = Boolean(IconComponent)
+  const $hasIconRight = Boolean(IconRightComponent)
   const $hasSuffix = Boolean(suffix)
   const $hasPrefix = Boolean(prefix)
 
@@ -248,20 +240,20 @@ export const TextInput = forwardRef(function TextInput(
         data-scheme={rootTheme.scheme}
         data-tone={rootTheme.tone}
       >
-        {icon && (
+        {IconComponent && (
           <LeftBox padding={padding}>
             <Text size={fontSize}>
-              {isValidElement(icon) && icon}
-              {isValidElementType(icon) && createElement(icon)}
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
             </Text>
           </LeftBox>
         )}
 
-        {!$hasClearButton && iconRight && (
+        {!$hasClearButton && IconRightComponent && (
           <RightBox padding={padding}>
             <Text size={fontSize}>
-              {isValidElement(iconRight) && iconRight}
-              {isValidElementType(iconRight) && createElement(iconRight)}
+              {isValidElement(IconRightComponent) && IconRightComponent}
+              {isValidElementType(IconRightComponent) && <IconRightComponent />}
             </Text>
           </RightBox>
         )}
@@ -271,8 +263,8 @@ export const TextInput = forwardRef(function TextInput(
       __unstable_disableFocusRing,
       border,
       fontSize,
-      icon,
-      iconRight,
+      IconComponent,
+      IconRightComponent,
       padding,
       radius,
       rootTheme,

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

@@ -19,7 +19,6 @@ import {
   useMemo,
   useRef,
   useState,
-  type ForwardedRef,
   useId,
   useSyncExternalStore,
   useImperativeHandle,
@@ -357,22 +356,7 @@ export const Tooltip = forwardRef(function Tooltip(
     [refs],
   )
 
-  const childRef: ForwardedRef<HTMLElement | null> = (childProp as any)?.ref
-
-  const setReference = useCallback(
-    (node: HTMLElement | null) => {
-      if (typeof childRef === 'function') {
-        childRef(node)
-      } else if (childRef) {
-        childRef.current = node
-      }
-
-      // childRef.current = node
-      setReferenceElement(node)
-    },
-    [childRef],
-  )
-
+  const childRef = useRef<HTMLElement | null>(null)
   const child = useMemo(() => {
     if (!childProp) return null
 
@@ -383,7 +367,7 @@ export const Tooltip = forwardRef(function Tooltip(
       onMouseLeave: handleMouseLeave,
       onClick: handleClick,
       onContextMenu: handleContextMenu,
-      ref: setReference,
+      ref: childRef,
     })
   }, [
     childProp,
@@ -393,9 +377,18 @@ export const Tooltip = forwardRef(function Tooltip(
     handleFocus,
     handleMouseEnter,
     handleMouseLeave,
-    setReference,
   ])
 
+  // If there's a child then we need to set the reference element to the cloned child ref
+  // and if child changes we make sure to update or remove the reference element.
+  useEffect(() => {
+    if (!child) return undefined
+
+    setReferenceElement(childRef.current)
+
+    return () => setReferenceElement(null)
+  }, [child])
+
   if (!child) return <></>
 
   if (disabled) return child

package/src/theme/defaults/colorTokens.ts

@@ -432,7 +432,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         muted: {
           bg: ['50', '950'],
         },
-        placeholder: ['400', '600 50%'],
+        placeholder: ['400', '600'],
       },
       hovered: {
         border: ['300', '700'],