@sanity/ui 0.37.10 → 0.37.13

package/src/components/skeleton/textSkeleton.tsx

@@ -1,7 +1,7 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useResponsiveProp} from '../../hooks'
-import {responsive} from '../../styles'
+import {useArrayProp} from '../../hooks'
+import {_responsive} from '../../styles'
 import {Theme, ThemeFontKey} from '../../theme'
 import {Skeleton, SkeletonProps} from './skeleton'
 
@@ -10,7 +10,7 @@ const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(
     const {media} = theme.sanity
     const font = theme.sanity.fonts[$style]
 
-    const styles = responsive(media, $size, (sizeIndex) => {
+    const styles = _responsive(media, $size, (sizeIndex) => {
       const fontSize = font.sizes[sizeIndex]
       const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
 
@@ -63,7 +63,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useResponsiveProp(size)
+  const $size = useArrayProp(size)
 
   return <Root {...restProps} $size={$size} ref={ref} $style="text" />
 })
@@ -78,7 +78,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useResponsiveProp(size)
+  const $size = useArrayProp(size)
 
   return <Root {...restProps} $size={$size} ref={ref} $style="label" />
 })
@@ -93,7 +93,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useResponsiveProp(size)
+  const $size = useArrayProp(size)
 
   return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
 })
@@ -108,7 +108,7 @@ export const CodeSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useResponsiveProp(size)
+  const $size = useArrayProp(size)
 
   return <Root {...restProps} $size={$size} ref={ref} $style="code" />
 })

package/src/hooks/_internal/useUnique.ts

@@ -1,9 +1,8 @@
 import {useRef} from 'react'
 
 /**
- * This is a React hook – and an escape hatch – to make sure that a record is
- * the same on every render. Uses strict equality comparison (eg by identity),
- * and only goes one level deep. SHOULD NOT BE USED IN MOST CASES.
+ * This is a React hook to make sure that a record identity is the same on every render. Uses strict
+ * equality comparison (eg by identity), and only goes one level deep.
  *
  * @internal
  */
@@ -12,14 +11,14 @@ type Comparable = Record<string | number | symbol, unknown> | undefined | null
 export function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
   const valueRef = useRef<ValueType>(value)
 
-  if (!isEqual(valueRef.current, value)) {
+  if (!_isEqual(valueRef.current, value)) {
     valueRef.current = value
   }
 
   return valueRef.current
 }
 
-function isEqual(objA: Comparable, objB: Comparable): boolean {
+function _isEqual(objA: Comparable, objB: Comparable): boolean {
   if (!objA || !objB) {
     return objA === objB
   }

package/src/hooks/index.ts

@@ -1,8 +1,9 @@
+export * from './useArrayProp'
 export * from './useClickOutside'
 export * from './useElementRect'
+export * from './useElementSize'
 export * from './useGlobalKeyDown'
 export * from './useMediaIndex'
 export * from './usePrefersDark'
 export * from './useForwardedRef'
 export * from './useCustomValidity'
-export * from './useResponsiveProp'

package/src/hooks/useArrayProp.ts

@@ -0,0 +1,23 @@
+import {useMemo} from 'react'
+import {_getArrayProp} from '../styles'
+
+export type Primitive = string | number | boolean | undefined | null
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useArrayProp<T extends Primitive = Primitive>(
+  val: T | T[] | undefined,
+  defaultVal?: T[]
+): T[] {
+  const __perf_hash__ = JSON.stringify(val ?? defaultVal)
+
+  return useMemo(
+    () => _getArrayProp(val, defaultVal),
+
+    // Improve performance: Keep object identify for a given hash of the value
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [__perf_hash__]
+  )
+}

package/src/hooks/useElementRect/useElementRect.ts

@@ -1,23 +1,11 @@
-import {useEffect, useState} from 'react'
+import {useElementSize} from '../useElementSize'
 
 /**
  * Subscribe to the rect of a DOM element.
- * @beta
+ * @deprecated Use `useElementSize` instead
  */
 export function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null {
-  const [rect, setRect] = useState<DOMRectReadOnly | null>(null)
+  const elementSize = useElementSize(element)
 
-  useEffect(() => {
-    if (!element) return undefined
-
-    const ro = new ResizeObserver((entries) => {
-      setRect(entries[0].contentRect)
-    })
-
-    ro.observe(element)
-
-    return () => ro.disconnect()
-  }, [element])
-
-  return rect
+  return elementSize?._contentRect || null
 }

package/src/hooks/useElementSize.ts

@@ -0,0 +1,18 @@
+import {useEffect, useState} from 'react'
+import {ElementSize, _elementSizeObserver} from '../observers/elementSizeObserver'
+
+/**
+ * Subscribe to the size of a DOM element.
+ * @beta
+ */
+export function useElementSize(element: HTMLElement | null): ElementSize | null {
+  const [size, setSize] = useState<ElementSize | null>(null)
+
+  useEffect(() => {
+    if (!element) return undefined
+
+    return _elementSizeObserver.subscribe(element, setSize)
+  }, [element])
+
+  return size
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './primitives'
 export * from './components'
 export * from './helpers'
 export * from './hooks'
+export * from './observers'
 export * from './styles'
 export * from './theme'
 export * from './types'

package/src/observers/elementSizeObserver.ts

@@ -0,0 +1,116 @@
+import {_ResizeObserver} from './resizeObserver'
+
+/**
+ * @beta
+ */
+export interface ElementRectValue {
+  width: number
+  height: number
+}
+
+/**
+ * @beta
+ */
+export interface ElementSize {
+  content: ElementRectValue
+  border: ElementRectValue
+
+  /** @deprecated INTERNAL ONLY */
+  _contentRect: DOMRectReadOnly
+}
+
+/**
+ * @internal
+ */
+export type _ElementSizeSubscriber = (elementRect: ElementSize) => void
+
+/**
+ * @internal
+ */
+export interface _ElementSizeObserver {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
+}
+
+/**
+ * @internal
+ */
+export interface _ElementSizeListener {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
+}
+
+// Initialize element size observer
+// NOTE: this should NOT have size effects
+/**
+ * @internal
+ */
+export const _elementSizeObserver = _createElementSizeObserver()
+
+function _createElementRectValueListener(): _ElementSizeListener {
+  return {
+    subscribe(element, subscriber) {
+      const resizeObserver = new _ResizeObserver(([entry]) => {
+        subscriber({
+          _contentRect: entry.contentRect,
+          border: {
+            width: entry.borderBoxSize[0].inlineSize,
+            height: entry.borderBoxSize[0].blockSize,
+          },
+          content: {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+          },
+        })
+      })
+
+      resizeObserver.observe(element)
+
+      return () => {
+        resizeObserver.unobserve(element)
+        resizeObserver.disconnect()
+      }
+    },
+  }
+}
+
+function _createElementSizeObserver(): _ElementSizeObserver {
+  const disposeCache = new WeakMap<HTMLElement, () => void>()
+  const subscribersCache = new WeakMap<HTMLElement, _ElementSizeSubscriber[]>()
+
+  return {
+    subscribe(element, subscriber) {
+      const subscribers = subscribersCache.get(element) || []
+
+      let dispose = disposeCache.get(element)
+
+      if (!subscribersCache.has(element)) {
+        subscribersCache.set(element, subscribers)
+
+        const listener = _createElementRectValueListener()
+
+        // listen
+        dispose = listener.subscribe(element, (elementRect) => {
+          for (const sub of subscribers) {
+            sub(elementRect)
+          }
+        })
+      }
+
+      subscribers.push(subscriber)
+
+      return () => {
+        // dispose
+
+        const idx = subscribers.indexOf(subscriber)
+
+        if (idx > -1) {
+          subscribers.splice(idx, 1)
+        }
+
+        if (subscribers.length === 0) {
+          // unlisten
+          if (dispose) dispose()
+        }
+      }
+    },
+  }
+}

package/src/observers/index.ts

@@ -0,0 +1,2 @@
+export * from './elementSizeObserver'
+export * from './resizeObserver'

package/src/{utils → observers}/resizeObserver.ts

@@ -3,10 +3,7 @@ import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer'
 /**
  * @internal
  */
-const RO: typeof ResizeObserver = (
+export const _ResizeObserver: typeof ResizeObserver =
   typeof window !== 'undefined' && window.ResizeObserver
     ? window.ResizeObserver
     : ResizeObserverPolyfill
-) as any
-
-export {RO as ResizeObserver}

package/src/primitives/_selectable/selectable.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import {responsiveBorderStyle, ResponsiveBorderStyleProps} from '../../styles/border'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
 import {Box} from '../box'
 import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'
@@ -7,6 +6,8 @@ import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from '.
 /**
  * @internal
  */
-export const Selectable = styled(Box)<
-  SelectableStyleProps & ResponsiveRadiusStyleProps & ResponsiveBorderStyleProps
->(responsiveBorderStyle, responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle)
+export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
+  responsiveRadiusStyle,
+  selectableBaseStyle,
+  selectableColorStyle
+)

package/src/primitives/avatar/avatar.tsx

@@ -1,8 +1,8 @@
 import {useId} from '@reach/auto-id'
-import React, {forwardRef, useCallback, useEffect, useState} from 'react'
+import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import styled from 'styled-components'
-import {useResponsiveProp} from '../../hooks'
+import {useArrayProp} from '../../hooks'
 import {ThemeColorSpotKey, useTheme} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Text} from '../text'
@@ -58,11 +58,11 @@ export const Avatar = forwardRef(function Avatar(
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
     status = 'online',
-    size: sizeProp,
+    size: sizeProp = 0,
     ...restProps
   } = props
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
-  const size: AvatarSize[] = useResponsiveProp(sizeProp, [0])
+  const size = useArrayProp(sizeProp)
   const theme = useTheme()
   const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray
 
@@ -101,6 +101,8 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
+  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+
   return (
     <Root
       as={as}
@@ -154,7 +156,7 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <Text as="span" size={size.map((s) => (s === 0 ? 0 : s + 1))}>
+            <Text as="span" size={initialsSize}>
               <strong>{initials}</strong>
             </Text>
           </Initials>

package/src/primitives/avatar/avatarCounter.tsx

@@ -1,16 +1,16 @@
-import React, {forwardRef} from 'react'
+import React, {forwardRef, useMemo} from 'react'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useResponsiveProp} from '../../hooks'
-import {rem, responsive, ThemeProps} from '../../styles'
+import {useArrayProp} from '../../hooks'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Text} from '../text'
 
-function responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
+function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
   const {theme} = props
   const {avatar, media} = theme.sanity
 
-  return responsive(media, props.$size, (size) => {
+  return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size]
 
     if (!avatarSize) return EMPTY_RECORD
@@ -23,7 +23,7 @@ function responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemePr
   })
 }
 
-function avatarCounterBaseStyle(props: ThemeProps) {
+function _avatarCounterBaseStyle(props: ThemeProps) {
   const {theme} = props
 
   return css`
@@ -44,8 +44,8 @@ function avatarCounterBaseStyle(props: ThemeProps) {
 }
 
 const Root = styled.div<{$size: AvatarSize[]}>(
-  responsiveAvatarCounterSizeStyle,
-  avatarCounterBaseStyle
+  _responsiveAvatarCounterSizeStyle,
+  _avatarCounterBaseStyle
 )
 
 /**
@@ -54,6 +54,7 @@ const Root = styled.div<{$size: AvatarSize[]}>(
 export interface AvatarCounterProps {
   count: number
   size?: AvatarSize | AvatarSize[]
+  /** @deprecated No longer supported. */
   tone?: 'navbar'
 }
 
@@ -64,12 +65,13 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   props: AvatarCounterProps,
   ref: React.Ref<HTMLDivElement>
 ) {
-  const {count, size: sizeProp = 0, tone} = props
-  const size: AvatarSize[] = useResponsiveProp(sizeProp, [0])
+  const {count, size: sizeProp = 0} = props
+  const size = useArrayProp(sizeProp)
+  const counterSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
 
   return (
-    <Root $size={size} data-tone={tone} ref={ref}>
-      <Text as="span" size={size.map((s) => (s === 0 ? 0 : s + 1))}>
+    <Root $size={size} data-ui="AvatarCounter" ref={ref}>
+      <Text as="span" size={counterSize}>
         <strong>{count}</strong>
       </Text>
     </Root>

package/src/primitives/avatar/avatarStack.tsx

@@ -1,7 +1,8 @@
 import React, {cloneElement, forwardRef} from 'react'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {useArrayProp} from '../../hooks'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {childrenToElementArray} from '../helpers'
 import {AvatarCounter} from './avatarCounter'
@@ -22,11 +23,11 @@ function avatarStackStyle() {
   return BASE_STYLES
 }
 
-function responsiveAvatarStackSizeStyle(props: {size: AvatarSize | AvatarSize[]} & ThemeProps) {
+function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
   const {theme} = props
   const {avatar, media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.size), (size) => {
+  return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size]
 
     if (!avatarSize) return EMPTY_RECORD
@@ -39,10 +40,7 @@ function responsiveAvatarStackSizeStyle(props: {size: AvatarSize | AvatarSize[]}
   })
 }
 
-const Root = styled.div<{size: AvatarSize | AvatarSize[]}>(
-  responsiveAvatarStackSizeStyle,
-  avatarStackStyle
-)
+const Root = styled.div<{$size: AvatarSize[]}>(responsiveAvatarStackSizeStyle, avatarStackStyle)
 
 /**
  * @public
@@ -51,6 +49,7 @@ export interface AvatarStackProps {
   children: React.ReactNode
   maxLength?: number
   size?: AvatarSize | AvatarSize[]
+  /** @deprecated No longer supported. */
   tone?: 'navbar'
 }
 
@@ -61,32 +60,39 @@ export const AvatarStack = forwardRef(function AvatarStack(
   props: AvatarStackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  const {children: childrenProp, maxLength: maxLengthProp = 4, size = 0, tone, ...restProps} = props
-  const maxLength = Math.max(maxLengthProp, 0)
+  const {
+    children: childrenProp,
+    maxLength: maxLengthProp = 4,
+    size: sizeProp = 0,
+    ...restProps
+  } = props
   const children = childrenToElementArray(childrenProp).filter(
     (child) => typeof child !== 'string'
   ) as React.ReactElement[]
+  const maxLength = Math.max(maxLengthProp, 0)
+  const size = useArrayProp(sizeProp)
+
   const len = children.length
   const visibleCount = maxLength - 1
   const extraCount = len - visibleCount
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
 
   return (
-    <Root data-ui="AvatarStack" {...restProps} ref={ref} size={size}>
+    <Root data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
       {len === 0 && (
         <div>
-          <AvatarCounter count={len} tone={tone} />
+          <AvatarCounter count={len} />
         </div>
       )}
 
       {len !== 0 && extraCount > 1 && (
         <div>
-          <AvatarCounter count={extraCount} size={size} tone={tone} />
+          <AvatarCounter count={extraCount} size={size} />
         </div>
       )}
 
       {visibleChildren.map((child, childIndex) => (
-        <div key={String(childIndex)}>{cloneElement(child, {size, tone})}</div>
+        <div key={String(childIndex)}>{cloneElement(child, {size})}</div>
       ))}
     </Root>
   )

package/src/primitives/avatar/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {rem, responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
@@ -103,7 +103,7 @@ export function responsiveAvatarSizeStyle(
   const {theme} = props
   const {avatar, media} = theme.sanity
 
-  return responsive(media, props.$size, (size) => {
+  return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size] || avatar.sizes[0]
 
     return {

package/src/primitives/badge/badge.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
@@ -46,8 +47,8 @@ export const Badge = forwardRef(function Badge(
       {...restProps}
       $mode={mode}
       $tone={tone}
-      $radius={radius}
-      padding={padding}
+      $radius={useArrayProp(radius)}
+      padding={useArrayProp(padding)}
       ref={ref}
     >
       <Label size={fontSize}>{children}</Label>

package/src/primitives/box/box.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {
   boxStyle,
   flexItemStyle,
@@ -87,34 +88,34 @@ export const Box = forwardRef(function Box(
 
   return (
     <Root
-      data-as={asProp}
+      data-as={typeof asProp === 'string' ? asProp : undefined}
       data-ui="Box"
       {...restProps}
-      $column={column}
-      $columnStart={columnStart}
-      $columnEnd={columnEnd}
-      $display={display}
-      $flex={flex}
-      $height={height}
-      $margin={margin}
-      $marginX={marginX}
-      $marginY={marginY}
-      $marginTop={marginTop}
-      $marginRight={marginRight}
-      $marginBottom={marginBottom}
-      $marginLeft={marginLeft}
-      $overflow={overflow}
-      $padding={padding}
-      $paddingX={paddingX}
-      $paddingY={paddingY}
-      $paddingTop={paddingTop}
-      $paddingRight={paddingRight}
-      $paddingBottom={paddingBottom}
-      $paddingLeft={paddingLeft}
-      $row={row}
-      $rowStart={rowStart}
-      $rowEnd={rowEnd}
-      $sizing={sizing}
+      $column={useArrayProp(column)}
+      $columnStart={useArrayProp(columnStart)}
+      $columnEnd={useArrayProp(columnEnd)}
+      $display={useArrayProp(display)}
+      $flex={useArrayProp(flex)}
+      $height={useArrayProp(height)}
+      $margin={useArrayProp(margin)}
+      $marginX={useArrayProp(marginX)}
+      $marginY={useArrayProp(marginY)}
+      $marginTop={useArrayProp(marginTop)}
+      $marginRight={useArrayProp(marginRight)}
+      $marginBottom={useArrayProp(marginBottom)}
+      $marginLeft={useArrayProp(marginLeft)}
+      $overflow={useArrayProp(overflow)}
+      $padding={useArrayProp(padding)}
+      $paddingX={useArrayProp(paddingX)}
+      $paddingY={useArrayProp(paddingY)}
+      $paddingTop={useArrayProp(paddingTop)}
+      $paddingRight={useArrayProp(paddingRight)}
+      $paddingBottom={useArrayProp(paddingBottom)}
+      $paddingLeft={useArrayProp(paddingLeft)}
+      $row={useArrayProp(row)}
+      $rowStart={useArrayProp(rowStart)}
+      $rowEnd={useArrayProp(rowEnd)}
+      $sizing={useArrayProp(sizing)}
       as={asProp}
       ref={ref}
     >