@sanity/ui 2.9.0-canary.6 → 2.9.0

package/src/core/primitives/text/__workshop__/example.tsx

@@ -1,4 +1,4 @@
-import {Card, Container, Text} from '@sanity/ui'
+import {Container, Flex, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {
   WORKSHOP_TEXT_ALIGN_OPTIONS,
@@ -11,7 +11,7 @@ export default function TextStory() {
   const accent = useBoolean('Accent', false, 'Props')
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
   const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
   const text = useText('Text', 'Hello, world', 'Props')
 
   const textOverflow =
@@ -20,8 +20,8 @@ export default function TextStory() {
   const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
 
   return (
-    <Container width={0}>
-      <Card padding={4}>
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
         <Text
           accent={accent}
           align={align}
@@ -32,7 +32,7 @@ export default function TextStory() {
         >
           {text}
         </Text>
-      </Card>
-    </Container>
+      </Container>
+    </Flex>
   )
 }

package/src/core/primitives/text/__workshop__/opticalAlignment.tsx

@@ -6,47 +6,37 @@ export default function OpticalAlignment() {
     <Box padding={[4, 5, 6]}>
       <Stack space={1}>
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={4}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={4}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={3}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={3}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={2}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={2}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={1}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={1}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Text accent size={0}>
-              Hamburgefonstiv M
-            </Text>
+          <Card padding={0} tone="neutral">
+            <Text size={0}>Hamburgefonstiv M</Text>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} scheme="dark">
+          <Card padding={2} tone="neutral">
             <Text>
               <AddCircleIcon />
             </Text>

package/src/core/primitives/textArea/__workshop__/plain.tsx

@@ -17,7 +17,7 @@ export default function PlainStory() {
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
 

package/src/core/primitives/textInput/__workshop__/index.ts

@@ -35,11 +35,6 @@ export default defineScope({
       title: 'Read only',
       component: lazy(() => import('./readOnly')),
     },
-    {
-      name: 'multiple-tones',
-      title: 'Multiple tones',
-      component: lazy(() => import('./multipleTones')),
-    },
     {
       name: 'states',
       title: 'States',

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

@@ -57,7 +57,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   const iconRight = useSelect(
     'Icon (right)',
     WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'close',
+    'cube',
     'Props',
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
@@ -83,7 +83,6 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       icon={icon && icons[icon]}
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
-      name="email"
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}

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

@@ -1,5 +1,9 @@
-import {TextInput} from '@sanity/ui'
+import {Flex, TextInput} from '@sanity/ui'
 
 export default function ReadOnlyStory() {
-  return <TextInput id="text-input-example" readOnly />
+  return (
+    <Flex padding={4}>
+      <TextInput id="text-input-example" readOnly />
+    </Flex>
+  )
 }

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

@@ -3,7 +3,9 @@ import {useBoolean} from '@sanity/ui-workshop'
 
 export default function TonesStory() {
   const transparentTone = useBoolean('Transparent', true)
+  const neutralTone = useBoolean('Neutral', true)
   const primaryTone = useBoolean('Primary', true)
+  const suggestTone = useBoolean('Suggest', true)
   const positiveTone = useBoolean('Positive', true)
   const cautionTone = useBoolean('Caution', true)
   const criticalTone = useBoolean('Critical', true)
@@ -49,6 +51,24 @@ export default function TonesStory() {
                   </Card>
                 )}
 
+                {neutralTone && (
+                  <Card padding={3} tone="neutral">
+                    <TextInput
+                      placeholder="neutral"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
                 {primaryTone && (
                   <Card padding={3} tone="primary">
                     <TextInput
@@ -67,6 +87,24 @@ export default function TonesStory() {
                   </Card>
                 )}
 
+                {suggestTone && (
+                  <Card padding={3} tone="suggest">
+                    <TextInput
+                      placeholder="suggest"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
                 {positiveTone && (
                   <Card padding={3} tone="positive">
                     <TextInput

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

@@ -97,31 +97,28 @@ export const Tooltip = forwardRef(function Tooltip(
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
-    boundaryElement: _boundaryElement,
+    boundaryElement = boundaryElementContext?.element,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: _fallbackPlacementsProp,
+    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
+      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset: _zOffset,
+    zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
   } = props
-  const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
-  const fallbackPlacementsProp =
-    _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
-  const zOffset = _zOffset ?? layer.tooltip.zOffset
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
+  const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
   const [tooltipMaxWidth, setTooltipMaxWidth] = useState(0)
 
@@ -158,7 +155,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
     // Place arrow
     if (arrowProp) {
-      ret.push(arrow({element: arrowElement, padding: DEFAULT_TOOLTIP_PADDING}))
+      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
     }
 
     // Determine the origin to scale from.
@@ -168,7 +165,7 @@ export const Tooltip = forwardRef(function Tooltip(
     }
 
     return ret
-  }, [animate, arrowElement, arrowProp, boundaryElement, fallbackPlacements])
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -226,42 +223,42 @@ export const Tooltip = forwardRef(function Tooltip(
       handleIsOpenChange(false)
       childProp?.props?.onBlur?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleClick = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(false, true)
       childProp?.props.onClick?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleContextMenu = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(false, true)
       childProp?.props.onContextMenu?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleFocus = useCallback(
     (e: FocusEvent) => {
       handleIsOpenChange(true)
       childProp?.props?.onFocus?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleMouseEnter = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(true)
       childProp?.props?.onMouseEnter?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleMouseLeave = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(false)
       childProp?.props?.onMouseLeave?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
 
   // Handle closing the tooltip when the mouse leaves the referenceElement
@@ -312,7 +309,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
-      setArrowElement(arrowEl)
+      arrowRef.current = arrowEl
       update()
     },
     [update],
@@ -327,9 +324,9 @@ export const Tooltip = forwardRef(function Tooltip(
   )
 
   const childRef = useRef<HTMLElement | null>(null)
-  const [childElement, setChildElement] = useState<HTMLElement | null>(null)
 
-  useImperativeHandle(getElementRef(childProp as any), () => childElement, [childElement])
+  // Merge refs so that any ref we are overriding is called as well
+  useImperativeHandle((childProp as any)?.ref, () => childRef.current)
 
   const child = useMemo(() => {
     if (!childProp) return null
@@ -341,7 +338,7 @@ export const Tooltip = forwardRef(function Tooltip(
       onMouseLeave: handleMouseLeave,
       onClick: handleClick,
       onContextMenu: handleContextMenu,
-      ref: setChildElement,
+      ref: childRef,
     })
   }, [
     childProp,
@@ -465,30 +462,3 @@ function useCloseOnMouseLeave({
     return () => window.removeEventListener('mousemove', handleMouseMove)
   }, [onMouseMove, showTooltip])
 }
-
-// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
-// After React 19 accessing `element.ref` does the opposite.
-// https://github.com/facebook/react/pull/28348
-//
-// Access the ref using the method that doesn't yield a warning.
-function getElementRef(element?: React.ReactElement) {
-  if (!element) return null
-  // React <=18 in DEV
-  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
-  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return (element as any).ref
-  }
-
-  // React 19 in DEV
-  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
-  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return element.props.ref
-  }
-
-  // Not DEV
-  return element.props.ref || (element as any).ref
-}

package/src/core/styles/card/_cardColorStyle.ts

@@ -55,10 +55,18 @@ export function _cardColorStyle(
     '--card-badge-default-dot-color': color.badge.default.dot,
     '--card-badge-default-fg-color': color.badge.default.fg,
     '--card-badge-default-icon-color': color.badge.default.icon,
+    '--card-badge-neutral-bg-color': color.badge.neutral.bg,
+    '--card-badge-neutral-dot-color': color.badge.neutral.dot,
+    '--card-badge-neutral-fg-color': color.badge.neutral.fg,
+    '--card-badge-neutral-icon-color': color.badge.neutral.icon,
     '--card-badge-primary-bg-color': color.badge.primary.bg,
     '--card-badge-primary-dot-color': color.badge.primary.dot,
     '--card-badge-primary-fg-color': color.badge.primary.fg,
     '--card-badge-primary-icon-color': color.badge.primary.icon,
+    '--card-badge-suggest-bg-color': color.badge.suggest.bg,
+    '--card-badge-suggest-dot-color': color.badge.suggest.dot,
+    '--card-badge-suggest-fg-color': color.badge.suggest.fg,
+    '--card-badge-suggest-icon-color': color.badge.suggest.icon,
     '--card-badge-positive-bg-color': color.badge.positive.bg,
     '--card-badge-positive-dot-color': color.badge.positive.dot,
     '--card-badge-positive-fg-color': color.badge.positive.fg,

package/src/core/theme/__workshop__/debug/story.tsx

@@ -12,7 +12,7 @@ import {
   ThemeColorState_v2,
 } from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {CSSProperties, useMemo} from 'react'
+import {CSSProperties} from 'react'
 import {Badge, Box, Flex, KBD, Stack, Text} from '../../../primitives'
 import {useRootTheme} from '../../useRootTheme'
 
@@ -50,16 +50,13 @@ export default function DebugStory() {
   const button = useBoolean('Button', false, 'Props') || false
   const selectable = useBoolean('Selectable', false, 'Props') || false
 
-  const features: Features = useMemo(
-    () => ({
-      base,
-      button,
-      schemes: scheme == 'all' ? ['light', 'dark'] : [scheme],
-      selectable,
-      tones: tone == 'all' ? ['transparent', 'default'] : [tone],
-    }),
-    [base, button, scheme, selectable, tone],
-  )
+  const features: Features = {
+    base,
+    button,
+    schemes: scheme == 'all' ? ['light', 'dark'] : [scheme],
+    selectable,
+    tones: tone == 'all' ? ['transparent', 'default'] : [tone],
+  }
 
   return (
     <Flex>
@@ -352,11 +349,21 @@ function getStateVars(state: ThemeColorState_v2) {
     '--card-badge-default-fg-color': state.badge.default.fg,
     '--card-badge-default-icon-color': state.badge.default.icon,
 
+    '--card-badge-neutral-bg-color': state.badge.neutral.bg,
+    '--card-badge-neutral-dot-color': state.badge.neutral.dot,
+    '--card-badge-neutral-fg-color': state.badge.neutral.fg,
+    '--card-badge-neutral-icon-color': state.badge.neutral.icon,
+
     '--card-badge-primary-bg-color': state.badge.primary.bg,
     '--card-badge-primary-dot-color': state.badge.primary.dot,
     '--card-badge-primary-fg-color': state.badge.primary.fg,
     '--card-badge-primary-icon-color': state.badge.primary.icon,
 
+    '--card-badge-suggest-bg-color': state.badge.suggest.bg,
+    '--card-badge-suggest-dot-color': state.badge.suggest.dot,
+    '--card-badge-suggest-fg-color': state.badge.suggest.fg,
+    '--card-badge-suggest-icon-color': state.badge.suggest.icon,
+
     '--card-badge-positive-bg-color': state.badge.positive.bg,
     '--card-badge-positive-dot-color': state.badge.positive.dot,
     '--card-badge-positive-fg-color': state.badge.positive.fg,

package/src/core/utils/portal/portalProvider.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useState, useSyncExternalStore} from 'react'
+import {useMemo, useRef, useSyncExternalStore} from 'react'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -51,13 +51,13 @@ const emptySubscribe = () => () => {}
  * equality comparison (eg by identity), and only goes one level deep.
  */
 function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const [cachedValue, setCachedValue] = useState(value)
+  const valueRef = useRef<ValueType>(value)
 
-  if (!_isEqual(cachedValue, value)) {
-    setCachedValue(value)
+  if (!_isEqual(valueRef.current, value)) {
+    valueRef.current = value
   }
 
-  return cachedValue
+  return valueRef.current
 }
 
 function _isEqual(objA: Comparable, objB: Comparable): boolean {

package/src/theme/build/_deprecated/color/factory.ts

@@ -34,7 +34,7 @@ export interface ThemeColorBuilderOpts {
   solid: (opts: {
     base: ThemeColorBase
     dark: boolean
-    tone: ThemeColorToneKey
+    tone: ThemeColorName
     name: ThemeColorName
     state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
   }) => ThemeColorGenericState

package/src/theme/build/_deprecated/color/muted/createMuted.ts

@@ -1,11 +1,11 @@
-import {ThemeColorBase, ThemeColorCardToneKey, ThemeColorMuted} from '../../../../system'
+import {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createMutedTones(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
   dark: boolean,
-  name: ThemeColorCardToneKey,
+  name: ThemeColorName,
 ): ThemeColorMuted {
   return {
     default: {