@sanity/ui 0.37.21 → 0.38.0

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,9 +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
-
-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
 )
 
 /**
@@ -66,11 +66,12 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {count, size: sizeProp = 0} = props
-  const size: AvatarSize[] = useResponsiveProp(sizeProp, [0])
+  const size = useArrayProp(sizeProp)
+  const counterSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
 
   return (
-    <Root $size={size} 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
@@ -62,18 +60,25 @@ 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} />

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,
@@ -90,31 +91,31 @@ export const Box = forwardRef(function Box(
       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}
     >

package/src/primitives/button/button.tsx

@@ -1,6 +1,7 @@
 import React, {createElement, forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
@@ -66,19 +67,19 @@ export const Button = forwardRef(function Button(
     fontSize,
     icon,
     iconRight,
-    justify = 'center',
+    justify: justifyProp = 'center',
     loading,
     mode = 'default',
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    radius = 2,
+    padding: paddingProp = 3,
+    paddingX: paddingXProp,
+    paddingY: paddingYProp,
+    paddingTop: paddingTopProp,
+    paddingBottom: paddingBottomProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    radius: radiusProp = 2,
     selected,
-    space = 3,
+    space: spaceProp = 3,
     text,
     textAlign,
     tone = 'default',
@@ -86,6 +87,17 @@ export const Button = forwardRef(function Button(
     ...restProps
   } = props
 
+  const justify = useArrayProp(justifyProp)
+  const padding = useArrayProp(paddingProp)
+  const paddingX = useArrayProp(paddingXProp)
+  const paddingY = useArrayProp(paddingYProp)
+  const paddingTop = useArrayProp(paddingTopProp)
+  const paddingBottom = useArrayProp(paddingBottomProp)
+  const paddingLeft = useArrayProp(paddingLeftProp)
+  const paddingRight = useArrayProp(paddingRightProp)
+  const radius = useArrayProp(radiusProp)
+  const space = useArrayProp(spaceProp)
+
   const theme = useTheme()
 
   const boxProps = useMemo(

package/src/primitives/card/card.tsx

@@ -1,6 +1,7 @@
 import React, {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
@@ -83,15 +84,15 @@ export const Card = forwardRef(function Card(
         data-ui="Card"
         data-tone={tone}
         {...restProps}
-        $border={border}
-        $borderTop={borderTop}
-        $borderRight={borderRight}
-        $borderBottom={borderBottom}
-        $borderLeft={borderLeft}
+        $border={useArrayProp(border)}
+        $borderTop={useArrayProp(borderTop)}
+        $borderRight={useArrayProp(borderRight)}
+        $borderBottom={useArrayProp(borderBottom)}
+        $borderLeft={useArrayProp(borderLeft)}
         $checkered={checkered}
         $focusRing={focusRing}
-        $radius={radius}
-        $shadow={shadow}
+        $radius={useArrayProp(radius)}
+        $shadow={useArrayProp(shadow)}
         $tone={tone}
         data-checkered={checkered ? '' : undefined}
         data-pressed={pressed ? '' : undefined}

package/src/primitives/checkbox/__workshop__/example.tsx

@@ -14,8 +14,10 @@ export default function ExampleStory() {
           indeterminate={indeterminate}
           onChange={handleChange}
         />
-        <Box marginLeft={3}>
-          <Text>Label</Text>
+        <Box marginLeft={2}>
+          <Text size={1} weight="semibold">
+            Toggle
+          </Text>
         </Box>
       </Flex>
     </Flex>

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

@@ -23,8 +23,10 @@ export default function PropsStory() {
           onBlur={onBlur}
           readOnly={readOnly}
         />
-        <Box marginLeft={3}>
-          <Text>Label</Text>
+        <Box marginLeft={2}>
+          <Text size={1} weight="semibold">
+            Toggle
+          </Text>
         </Box>
       </Flex>
     </Flex>

package/src/primitives/checkbox/__workshop__/readOnly.tsx

@@ -6,8 +6,10 @@ export default function ReadOnlyStory() {
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Flex align="center" as="label">
         <Checkbox id="checkbox-example" readOnly />
-        <Box marginLeft={3}>
-          <Text>Label</Text>
+        <Box marginLeft={2}>
+          <Text size={1} weight="semibold">
+            Toggle
+          </Text>
         </Box>
       </Flex>
     </Flex>

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

@@ -9,7 +9,7 @@ import {
 export default function PropsStory() {
   const code = useText('Code', `console.log('Hello, world')`, 'Props')
   const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, undefined, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/primitives/code/code.tsx

@@ -1,6 +1,7 @@
 import React, {forwardRef} from 'react'
 import Refractor from 'react-refractor'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 
@@ -28,7 +29,7 @@ export const Code = forwardRef(function Code(
   const registered = language ? Refractor.hasLanguage(language as any) : false
 
   return (
-    <Root data-ui="Code" {...restProps} $size={size} $weight={weight} ref={ref}>
+    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
       {!(language && registered) && <code>{children}</code>}
       {language && registered && <Refractor inline language={language} value={String(children)} />}
     </Root>

package/src/primitives/container/container.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
@@ -24,5 +25,13 @@ export const Container = forwardRef(function Container(
 ) {
   const {as, width = 2, ...restProps} = props
 
-  return <Root data-ui="Container" {...restProps} $width={width} forwardedAs={as} ref={ref} />
+  return (
+    <Root
+      data-ui="Container"
+      {...restProps}
+      $width={useArrayProp(width)}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
 })

package/src/primitives/container/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {
@@ -17,7 +17,7 @@ export function responsiveContainerWidthStyle(
   const {theme} = props
   const {container, media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$width), (val) => ({
+  return _responsive(media, props.$width, (val) => ({
     maxWidth: val === 'auto' ? 'none' : rem(container[val]),
   }))
 }

package/src/primitives/container/types.ts

@@ -2,5 +2,5 @@
  * @internal
  */
 export interface ResponsiveWidthStyleProps {
-  $width?: number | number[] | 'auto'
+  $width: (number | 'auto')[]
 }

package/src/primitives/flex/flex.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {
   flexItemStyle,
   FlexItemStyleProps,
@@ -37,11 +38,11 @@ export const Flex = forwardRef(function Flex(
     <Root
       data-ui="Flex"
       {...restProps}
-      $align={align}
-      $direction={direction}
-      $gap={gap}
-      $justify={justify}
-      $wrap={wrap}
+      $align={useArrayProp(align)}
+      $direction={useArrayProp(direction)}
+      $gap={useArrayProp(gap)}
+      $justify={useArrayProp(justify)}
+      $wrap={useArrayProp(wrap)}
       forwardedAs={as}
       ref={ref}
     />