@sanity/ui 0.37.21 → 0.38.1

package/package.json

@@ -1,49 +1,48 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.21",
+  "version": "0.38.1",
   "sideEffects": false,
   "source": "./src/index.ts",
+  "module": "./dist/sanity-ui.js",
+  "types": "./dist/types/src/index.d.ts",
+  "main": "./dist/sanity-ui.cjs",
   "exports": {
     ".": {
-      "require": "./lib/sanity-ui.js",
-      "default": "./lib/sanity-ui.modern.js"
+      "source": "./src/index.ts",
+      "default": "./dist/sanity-ui.js",
+      "types": "./dist/types/src/index.d.ts",
+      "require": "./dist/sanity-ui.cjs"
     }
   },
-  "main": "./lib/sanity-ui.js",
-  "module": "./lib/sanity-ui.module.js",
-  "types": "./lib/dts/src/index.d.ts",
   "files": [
-    "lib",
+    "dist",
     "src"
   ],
   "license": "MIT",
   "scripts": {
-    "build": "run-s build:microbundle",
-    "build:microbundle": "microbundle --format modern,esm,cjs --jsx React.createElement --jsxImportSource react --no-compress --tsconfig tsconfig.lib.json",
-    "clean": "rimraf lib",
+    "build": "pkg build --tsconfig tsconfig.dist.json",
+    "clean": "rimraf dist",
     "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --quiet",
     "prebuild": "yarn clean",
     "test": "jest",
     "type-check": "tsc --build",
-    "watch": "run-p watch:*",
-    "watch:cjs": "tsc --preserveWatchOutput -w --module CommonJS --outDir lib/cjs --project tsconfig.lib.json --rootDir src --target ES5",
-    "watch:es": "tsc --preserveWatchOutput -w --module ES6 --outDir lib/esm --project tsconfig.lib.json --rootDir src --target ES6"
+    "watch": "pkg watch --tsconfig tsconfig.dist.json"
   },
   "dependencies": {
-    "@juggle/resize-observer": "^3.3.1",
-    "@popperjs/core": "^2.11.5",
-    "@reach/auto-id": "^0.16.0",
-    "@sanity/color": "^2.1.11",
-    "@sanity/icons": "^1.3.1",
+    "@juggle/resize-observer": "^3.4.0",
+    "@popperjs/core": "^2.11.6",
+    "@reach/auto-id": "^0.17.0",
+    "@sanity/color": "^2.1.15",
+    "@sanity/icons": "^1.3.5",
     "framer-motion": "6.3.0",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
-    "react-popper": "^2.2.5",
+    "react-popper": "^2.3.0",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@types/refractor": "^3.0.2",
     "react": "^17.0.2",
@@ -72,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4f7ef1d42b0b536e746ac2670c113a24148c6fdc"
+  "gitHead": "18d4d339ca7de574829d021cafe5d04aca7eff7b"
 }

package/src/__workshop__/color/overview.tsx

@@ -19,7 +19,7 @@ const clipboard = {
 
 export default function ColorOverviewStory(): React.ReactElement {
   return (
-    <Grid columns={[1, 1, 2, 3]} gapX={[3, 4, 5]} gapY={[4, 5, 6]} padding={[3, 4, 5]}>
+    <Grid columns={[1, 1, 2, 3]} gapX={[4, 4, 5]} gapY={[5, 5, 6]} padding={[4, 5, 6]}>
       {COLOR_HUES.map((hueKey) => (
         <ColorHuePreview tints={hues[hueKey]} hueKey={hueKey} key={hueKey} />
       ))}
@@ -32,7 +32,7 @@ function ColorHuePreview(props: {hueKey: string; tints: ColorTints}) {
 
   return (
     <Box>
-      <Heading as="h2" size={[1, 1, 2]}>
+      <Heading as="h2" size={1}>
         {ucfirst(hueKey)}
       </Heading>
 
@@ -78,22 +78,20 @@ function ColorTintPreview(props: {tint: ColorValue}) {
       as="button"
       onClick={handleClick}
       radius={2}
-      style={
-        {
-          '--card-bg-color': tint.hex,
-          '--card-fg-color': hsl.l < 50 ? white.hex : black.hex,
-          cursor: 'pointer',
-        } as any
-      }
+      style={{
+        ['--card-bg-color' as any]: tint.hex,
+        ['--card-fg-color' as any]: hsl.l < 50 ? white.hex : black.hex,
+        cursor: 'pointer',
+      }}
     >
       <Flex padding={3}>
         <Box flex={1}>
-          <Code size={[1, 1, 2]} style={{color: 'inherit'}}>
+          <Code size={1} style={{color: 'inherit'}}>
             {tint.title}
           </Code>
         </Box>
         <Box>
-          <Code size={[1, 1, 2]} style={{color: 'inherit'}}>
+          <Code size={1} style={{color: 'inherit'}}>
             {tint.hex}
           </Code>
         </Box>

package/src/components/autocomplete/__workshop__/async.tsx

@@ -1,11 +1,11 @@
-import {LinkIcon} from '@sanity/icons'
+import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
 import {
   Autocomplete,
   BaseAutocompleteOption,
   Box,
-  Button,
   Card,
   Code,
+  Flex,
   LayerProvider,
   Stack,
   Text,
@@ -88,6 +88,7 @@ export default function AsyncStory() {
           <Autocomplete
             disabled={loadingCurrentRef}
             filterOption={filterOption}
+            icon={value ? EarthAmericasIcon : SearchIcon}
             id="async"
             loading={loading}
             onChange={setValue}
@@ -95,11 +96,6 @@ export default function AsyncStory() {
             openButton={{onClick: handleOpenButtonClick}}
             options={options}
             placeholder="Search"
-            prefix={
-              <Box padding={1}>
-                <Button disabled={!value} icon={LinkIcon} mode="bleed" padding={2} />
-              </Box>
-            }
             radius={1}
             renderOption={renderOption}
             renderValue={renderValue}
@@ -140,13 +136,19 @@ function AsyncOption(props: {
       selected={selected}
       tabIndex={tabIndex}
     >
-      {loading && (
-        <Text muted>
-          <>Loading…</>
+      <Flex gap={3}>
+        <Text>
+          <EarthAmericasIcon />
         </Text>
-      )}
 
-      {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
+        {loading && (
+          <Text muted>
+            <>Loading…</>
+          </Text>
+        )}
+
+        {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
+      </Flex>
     </Card>
   )
 }

package/src/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -8,7 +8,9 @@ import {
   Text,
 } from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
+import {Popover} from '../../../primitives'
 import countries from '../__fixtures__/countries'
+import {AutocompleteProps} from '../autocomplete'
 import {ExampleOption} from './types'
 
 export default function ConstrainedHeightStory() {
@@ -71,6 +73,38 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
 
   const options = countries.map((item) => ({value: item.code, title: item.name}))
 
+  const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
+    (
+      popoverProps: {
+        content: React.ReactElement | null
+        hidden: boolean
+        inputElement: HTMLInputElement | null
+        onMouseEnter: () => void
+        onMouseLeave: () => void
+      },
+      popoverRef: React.Ref<HTMLDivElement>
+    ) => {
+      const {hidden, inputElement, ...restProps} = popoverProps
+
+      if (hidden) return null
+
+      return (
+        <Popover
+          {...restProps}
+          arrow={false}
+          constrainSize
+          matchReferenceWidth
+          open
+          placement="bottom"
+          radius={1}
+          ref={popoverRef}
+          referenceElement={inputElement}
+        />
+      )
+    },
+    []
+  )
+
   return (
     <Stack space={3}>
       <Text size={1} weight="medium">
@@ -84,8 +118,10 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
           openButton
           options={options}
           placeholder="Search"
+          // popover={{allowedAutoPlacements: ['bottom-start', 'top-start']}}
           radius={1}
           renderOption={renderOption}
+          renderPopover={renderPopover}
           renderValue={renderValue}
           value={value}
         />

package/src/components/autocomplete/autocomplete.tsx

@@ -11,7 +11,7 @@ import React, {
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useForwardedRef, useResponsiveProp} from '../../hooks'
+import {useForwardedRef, useArrayProp} from '../../hooks'
 import {Box, BoxProps, Button, Card, PopoverProps, Stack, Text, TextInput} from '../../primitives'
 import {AnimatedSpinnerIcon, ListBox, ResultsPopover, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
@@ -175,7 +175,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const popoverMouseWithinRef = useRef(false)
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = useResponsiveProp(paddingProp)
+  const padding = useArrayProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value]

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -7,7 +7,7 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import {useClickOutside} from '../../hooks'
+import {useArrayProp, useClickOutside} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'
 
@@ -27,7 +27,8 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>
 ) {
-  const {children, maxLength, separator, space = 2, ...restProps} = props
+  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
+  const space = useArrayProp(spaceRaw)
   const [open, setOpen] = useState(false)
   const [expandElement, setExpandElement] = useState<HTMLButtonElement | null>(null)
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)

package/src/components/dialog/dialog.tsx

@@ -2,7 +2,7 @@ import {CloseIcon} from '@sanity/icons'
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers'
-import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
+import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
@@ -138,11 +138,14 @@ const DialogCard = forwardRef(function DialogCard(
     id,
     onClickOutside,
     onClose,
-    radius,
+    radius: radiusProp,
     scheme,
-    shadow,
-    width,
+    shadow: shadowProp,
+    width: widthProp,
   } = props
+  const radius = useArrayProp(radiusProp)
+  const shadow = useArrayProp(shadowProp)
+  const width = useArrayProp(widthProp)
   const forwardedRef = useForwardedRef(ref)
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const localContentRef = useRef<HTMLDivElement | null>(null)
@@ -255,7 +258,7 @@ export const Dialog = forwardRef(function Dialog(
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
-    cardRadius = 3,
+    cardRadius: cardRadiusProp = 3,
     cardShadow = 4,
     children,
     contentRef,
@@ -264,14 +267,19 @@ export const Dialog = forwardRef(function Dialog(
     id,
     onClickOutside,
     onClose,
-    padding = 4,
+    padding: paddingProp = 4,
     portal,
-    position = dialog.position || 'fixed',
+    position: positionProp = dialog.position || 'fixed',
     scheme,
-    width = 0,
-    zOffset = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
+    width: widthProp = 0,
+    zOffset: zOffsetProp = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
     ...restProps
   } = props
+  const cardRadius = useArrayProp(cardRadiusProp)
+  const padding = useArrayProp(paddingProp)
+  const position = useArrayProp(positionProp)
+  const width = useArrayProp(widthProp)
+  const zOffset = useArrayProp(zOffsetProp)
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)

package/src/components/dialog/styles.ts

@@ -1,12 +1,12 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive, ThemeProps} from '../../styles'
+import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
 
 /**
  * @internal
  */
 export interface ResponsiveDialogPositionStyleProps {
-  $position: DialogPosition | DialogPosition[]
+  $position: DialogPosition[]
 }
 
 export function dialogStyle({theme}: ThemeProps): CSSObject {
@@ -24,7 +24,7 @@ export function dialogStyle({theme}: ThemeProps): CSSObject {
     alignItems: 'center',
     justifyContent: 'center',
     outline: 'none',
-    background: color.shadow.penumbra,
+    background: color.shadow.umbra,
   }
 }
 
@@ -34,5 +34,5 @@ export function responsiveDialogPositionStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$position), (position) => ({'&&': {position}}))
+  return _responsive(media, props.$position, (position) => ({'&&': {position}}))
 }

package/src/components/hotkeys/hotkeys.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
 
 /**
@@ -33,7 +34,8 @@ export const Hotkeys = forwardRef(function Hotkeys(
   props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.Ref<HTMLElement>
 ) {
-  const {fontSize, keys, padding, radius, space = 1, ...restProps} = props
+  const {fontSize, keys, padding, radius, space: spaceProp = 1, ...restProps} = props
+  const space = useArrayProp(spaceProp)
 
   if (!keys || keys.length === 0) {
     return <></>

package/src/components/menu/__workshop__/constrainedInBoundary.tsx

@@ -8,11 +8,19 @@ import {
   Menu,
   MenuButton,
   MenuItem,
-  PopoverProps,
   SelectableTone,
   Text,
 } from '@sanity/ui'
-import React, {useMemo, useState} from 'react'
+import React, {useState} from 'react'
+import {MenuButtonProps} from '../menuButton'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+  placement: 'bottom',
+  portal: true,
+  // preventOverflow: true,
+  // width: 1,
+}
 
 const items: {tone: SelectableTone; message: string}[] = [
   {
@@ -88,17 +96,6 @@ const items: {tone: SelectableTone; message: string}[] = [
 export default function ConstrainedInBoundaryStory() {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
-  const popoverProps: PopoverProps = useMemo(
-    () => ({
-      constrainSize: true,
-      placement: 'bottom',
-      portal: true,
-      preventOverflow: true,
-      width: 1,
-    }),
-    []
-  )
-
   return (
     <Box height="fill" padding={[4, 5, 6]} sizing="border">
       <Card height="fill" shadow={1}>
@@ -129,7 +126,7 @@ export default function ConstrainedInBoundaryStory() {
                         })}
                       </Menu>
                     }
-                    popover={popoverProps}
+                    popover={POPOVER_PROPS}
                   />
                 </BoundaryElementProvider>
               </Box>

package/src/components/menu/__workshop__/groups.tsx

@@ -129,7 +129,7 @@ export default function GroupsStory() {
                   />
                 </Menu>
               }
-              popover={{constrainSize: true, portal: true, preventOverflow: true}}
+              // popover={{constrainSize: true, portal: true, preventOverflow: true}}
             />
           </LayerProvider>
 

package/src/components/menu/menuGroup.tsx

@@ -1,6 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import React, {createElement, isValidElement, useCallback, useEffect, useRef, useState} from 'react'
 import {isValidElementType} from 'react-is'
+import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {SelectableTone} from '../../types/selectable'
@@ -36,7 +37,7 @@ export function MenuGroup(
     icon,
     onClick,
     padding = 3,
-    popover = {},
+    popover,
     radius = 2,
     space = 3,
     text,
@@ -163,7 +164,7 @@ export function MenuGroup(
         aria-pressed={as === 'button' ? withinMenu : undefined}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
-        $radius={radius}
+        $radius={useArrayProp(radius)}
         $tone={tone}
         onClick={handleClick}
         onKeyDown={handleKeyDown}

package/src/components/menu/menuItem.tsx

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useForwardedRef} from '../../hooks'
+import {useArrayProp, useForwardedRef} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
@@ -118,13 +118,13 @@ export const MenuItem = forwardRef(function MenuItem(
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       forwardedAs={as}
-      $radius={radius}
+      $radius={useArrayProp(radius)}
+      $padding={useArrayProp(0)}
       $tone={tone}
       disabled={disabled}
       onClick={handleClick}
       onMouseEnter={onItemMouseEnter}
       onMouseLeave={onItemMouseLeave}
-      padding={0}
       ref={setRef}
       role="menuitem"
       tabIndex={-1}

package/src/components/skeleton/skeleton.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef, useEffect, useState} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'
 import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
@@ -44,5 +45,13 @@ export const Skeleton = forwardRef(function Skeleton(
     }
   }, [delay])
 
-  return <Root {...restProps} $animated={animated} $radius={radius} $visible={visible} ref={ref} />
+  return (
+    <Root
+      {...restProps}
+      $animated={animated}
+      $radius={useArrayProp(radius)}
+      $visible={visible}
+      ref={ref}
+    />
+  )
 })

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/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,24 @@
+import {useMemo} from 'react'
+import {_getArrayProp} from '../styles'
+
+/** @beta */
+export type ArrayPropPrimitive = string | number | boolean | undefined | null
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
+  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,13 @@
-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
+}