@sanity/ui 0.37.12 → 0.37.14-next.6

package/src/utils/elementQuery/elementQuery.tsx

@@ -1,7 +1,6 @@
-import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
-import {useForwardedRef} from '../../hooks'
+import React, {forwardRef, useCallback, useMemo, useState} from 'react'
+import {useElementSize, useForwardedRef} from '../../hooks'
 import {useTheme} from '../../theme'
-import {ResizeObserver} from '../resizeObserver'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /**
@@ -23,23 +22,11 @@ export const ElementQuery = forwardRef(function ElementQuery(
 ) {
   const theme = useTheme()
   const {children, media = theme.sanity.media, ...restProps} = props
-  const [width, setWidth] = useState(() => window.innerWidth)
+
   const forwardedRef = useForwardedRef(ref)
   const [element, setElement] = useState<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    if (!element) return
-
-    const handleResizeEntries: ResizeObserverCallback = (entries) => {
-      setWidth(entries[0].contentRect.width)
-    }
-
-    const ro = new ResizeObserver(handleResizeEntries)
-
-    ro.observe(element)
-
-    return () => ro.disconnect()
-  }, [element])
+  const elementSize = useElementSize(element)
+  const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
 
   const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
   const min = useMemo(() => findMinBreakpoints(media, width), [media, width])

package/src/utils/index.ts

@@ -3,6 +3,5 @@ export * from './elementQuery'
 export * from './errorBoundary'
 export * from './layer'
 export * from './portal'
-export * from './resizeObserver'
 export * from './srOnly'
 export * from './virtualList'

package/src/utils/layer/layer.tsx

@@ -28,7 +28,7 @@ const LayerChildren = forwardRef(function LayerChildren(
   const {zIndex} = useLayer()
 
   return (
-    <Root {...restProps} ref={ref} style={{...style, zIndex}}>
+    <Root {...restProps} data-ui="Layer" ref={ref} style={{...style, zIndex}}>
       {children}
     </Root>
   )

package/src/utils/layer/layerProvider.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex, useResponsiveProp} from '../../hooks'
+import {useMediaIndex, useArrayProp} from '../../hooks'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 
@@ -17,7 +17,7 @@ export interface LayerProviderProps {
 export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   const {children, zOffset: zOffsetProp = 0} = props
   const parent = useContext(LayerContext)
-  const zOffset = useResponsiveProp(zOffsetProp)
+  const zOffset = useArrayProp(zOffsetProp)
   const maxMediaIndex = zOffset.length - 1
   const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
   const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex]

package/src/utils/virtualList/virtualList.tsx

@@ -2,6 +2,7 @@ import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {_isScrollable} from '../../helpers'
 import {useForwardedRef} from '../../hooks'
+import {_elementSizeObserver} from '../../observers'
 import {StackProps} from '../../primitives'
 import {useTheme} from '../../theme'
 
@@ -86,18 +87,18 @@ export const VirtualList = forwardRef(function VirtualList(
 
       scrollEl.addEventListener('scroll', handleScroll, {passive: true})
 
-      const ro = new ResizeObserver((entries) => {
-        setScrollHeight(entries[0].contentRect.height)
-      })
-
-      ro.observe(scrollEl)
+      const disposeElementSizeListener = _elementSizeObserver.subscribe(
+        scrollEl,
+        (scrollElementSize) => {
+          setScrollHeight(scrollElementSize.content.height)
+        }
+      )
 
       handleScroll()
 
       return () => {
         scrollEl.removeEventListener('scroll', handleScroll)
-        ro.unobserve(scrollEl)
-        ro.disconnect()
+        disposeElementSizeListener()
       }
     }
 

package/lib/dts/src/hooks/useResponsiveProp.d.ts

@@ -1,6 +0,0 @@
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function useResponsiveProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[];
-//# sourceMappingURL=useResponsiveProp.d.ts.map

package/lib/dts/src/hooks/useResponsiveProp.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResponsiveProp.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useResponsiveProp.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,EAAE,UAAU,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAE7F"}

package/lib/dts/src/primitives/popover/arrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/popover/arrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAwDvC,eAAO,MAAM,YAAY,i1LAkBvB,CAAA"}

package/lib/dts/src/primitives/popover/modifiers/getPopoverModifiers.d.ts

@@ -1,4 +0,0 @@
-import { Modifier } from 'react-popper';
-import { PopoverModifiersProps } from './types';
-export declare function getPopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[];
-//# sourceMappingURL=getPopoverModifiers.d.ts.map

package/lib/dts/src/primitives/popover/modifiers/getPopoverModifiers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getPopoverModifiers.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/popover/modifiers/getPopoverModifiers.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAA;AACrC,OAAO,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAA;AAkB7C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,qBAAqB,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAoHtF"}

package/lib/dts/src/primitives/popover/modifiers/index.d.ts

@@ -1,2 +0,0 @@
-export * from './usePopoverModifiers';
-//# sourceMappingURL=index.d.ts.map

package/lib/dts/src/primitives/popover/modifiers/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/popover/modifiers/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/lib/dts/src/primitives/popover/modifiers/types.d.ts

@@ -1,18 +0,0 @@
-import { Placement } from '../../../types';
-export interface PopoverModifiersProps {
-    allowedAutoPlacements?: Placement[];
-    arrow?: boolean;
-    arrowElement?: HTMLElement | null;
-    boundaryElement?: HTMLElement | null;
-    constrainSize?: boolean;
-    distance: number;
-    fallbackPlacements?: Placement[];
-    margins?: [number, number, number, number];
-    matchReferenceWidth?: boolean;
-    open: boolean;
-    preventOverflow?: boolean;
-    skidding: number;
-    tether?: boolean;
-    tetherOffset?: number | ((...args: any[]) => number);
-}
-//# sourceMappingURL=types.d.ts.map

package/lib/dts/src/primitives/popover/modifiers/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/popover/modifiers/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAExC,MAAM,WAAW,qBAAqB;IACpC,qBAAqB,CAAC,EAAE,SAAS,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAC1C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,IAAI,EAAE,OAAO,CAAA;IACb,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,CAAA;CACrD"}

package/lib/dts/src/primitives/popover/modifiers/usePopoverModifiers.d.ts

@@ -1,4 +0,0 @@
-import { Modifier } from 'react-popper';
-import { PopoverModifiersProps } from './types';
-export declare function usePopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[];
-//# sourceMappingURL=usePopoverModifiers.d.ts.map

package/lib/dts/src/primitives/popover/modifiers/usePopoverModifiers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePopoverModifiers.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/popover/modifiers/usePopoverModifiers.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAA;AAGrC,OAAO,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAA;AAE7C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,qBAAqB,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAmDtF"}

package/lib/dts/src/types/common.d.ts

@@ -1,11 +0,0 @@
-import { Placement as PopperPlacement } from '@popperjs/core';
-/**
- * @public
- */
-export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial';
-/**
- * A re-export of Popper’s `Placement` type
- * @public
- */
-export declare type Placement = PopperPlacement;
-//# sourceMappingURL=common.d.ts.map

package/lib/dts/src/types/common.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/types/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,IAAI,eAAe,EAAC,MAAM,gBAAgB,CAAA;AAE3D;;GAEG;AACH,oBAAY,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;AAE3E;;;GAGG;AACH,oBAAY,SAAS,GAAG,eAAe,CAAA"}

package/lib/dts/src/utils/resizeObserver.d.ts

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-declare const RO: typeof ResizeObserver;
-export { RO as ResizeObserver };
-//# sourceMappingURL=resizeObserver.d.ts.map

package/lib/dts/src/utils/resizeObserver.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resizeObserver.d.ts","sourceRoot":"","sources":["../../../../src/utils/resizeObserver.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,QAAA,MAAM,EAAE,EAAE,OAAO,cAIT,CAAA;AAER,OAAO,EAAC,EAAE,IAAI,cAAc,EAAC,CAAA"}