@sanity/ui 0.37.20 → 0.37.21

package/src/theme/studioTheme/color.ts

@@ -17,19 +17,18 @@ const NEUTRAL_TONES = ['default', 'transparent']
 export const color = createColorTheme({
   base: ({dark, name}) => {
     if (name === 'default') {
-      const tints = hues.gray
-      const skeletonFrom = dark ? tints[900].hex : tints[100].hex
+      const skeletonFrom = dark ? hues.gray[900].hex : hues.gray[100].hex
 
       return {
         fg: dark ? white.hex : black.hex,
         bg: dark ? black.hex : white.hex,
-        border: tints[dark ? 800 : 200].hex,
+        border: hues.gray[dark ? 800 : 200].hex,
         focusRing: hues.blue[dark ? 500 : 500].hex,
         shadow: {
-          outline: rgba(tints[500].hex, 0.4),
-          umbra: dark ? rgba(tints[950].hex, 0.4) : rgba(tints[500].hex, 0.2),
-          penumbra: dark ? rgba(tints[950].hex, 0.28) : rgba(tints[500].hex, 0.14),
-          ambient: dark ? rgba(tints[950].hex, 0.24) : rgba(tints[500].hex, 0.12),
+          outline: rgba(hues.gray[500].hex, 0.4),
+          umbra: rgba(dark ? black.hex : hues.gray[500].hex, 0.2),
+          penumbra: rgba(dark ? black.hex : hues.gray[500].hex, 0.14),
+          ambient: rgba(dark ? black.hex : hues.gray[500].hex, 0.12),
         },
         skeleton: {
           from: skeletonFrom,
@@ -48,10 +47,10 @@ export const color = createColorTheme({
         border: tints[dark ? 800 : 300].hex,
         focusRing: hues.blue[500].hex,
         shadow: {
-          outline: rgba(tints[500].hex, 0.4),
-          umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
-          penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
-          ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12),
+          outline: rgba(tints[500].hex, dark ? 0.2 : 0.4),
+          umbra: rgba(dark ? black.hex : tints[500].hex, 0.2),
+          penumbra: rgba(dark ? black.hex : tints[500].hex, 0.14),
+          ambient: rgba(dark ? black.hex : tints[500].hex, 0.12),
         },
         skeleton: {
           from: skeletonFrom,
@@ -69,10 +68,10 @@ export const color = createColorTheme({
       border: tints[dark ? 800 : 200].hex,
       focusRing: tints[500].hex,
       shadow: {
-        outline: rgba(tints[500].hex, 0.4),
-        umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
-        penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
-        ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12),
+        outline: rgba(tints[500].hex, dark ? 0.2 : 0.4),
+        umbra: rgba(dark ? black.hex : tints[500].hex, 0.2),
+        penumbra: rgba(dark ? black.hex : tints[500].hex, 0.14),
+        ambient: rgba(dark ? black.hex : tints[500].hex, 0.12),
       },
       skeleton: {
         from: skeletonFrom,

package/src/theme/studioTheme/fonts.ts

@@ -95,16 +95,16 @@ export const fonts: ThemeFonts = {
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 8,
-        descenderHeight: 8,
+        ascenderHeight: 9,
+        descenderHeight: 7,
         fontSize: 33,
         iconSize: 49,
         lineHeight: 39,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 9,
-        descenderHeight: 9,
+        ascenderHeight: 10,
+        descenderHeight: 8,
         fontSize: 38,
         iconSize: 53,
         lineHeight: 45,

package/src/utils/elementQuery/elementQuery.tsx

@@ -1,6 +1,7 @@
-import React, {forwardRef, useCallback, useMemo, useState} from 'react'
-import {useElementSize, useForwardedRef} from '../../hooks'
+import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
+import {useForwardedRef} from '../../hooks'
 import {useTheme} from '../../theme'
+import {ResizeObserver} from '../resizeObserver'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /**
@@ -22,11 +23,23 @@ 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)
-  const elementSize = useElementSize(element)
-  const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
+
+  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 max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
   const min = useMemo(() => findMinBreakpoints(media, width), [media, width])

package/src/utils/index.ts

@@ -3,5 +3,6 @@ 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/layerProvider.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex, useArrayProp} from '../../hooks'
+import {useMediaIndex, useResponsiveProp} 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 = useArrayProp(zOffsetProp)
+  const zOffset = useResponsiveProp(zOffsetProp)
   const maxMediaIndex = zOffset.length - 1
   const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
   const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex]

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

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

package/src/utils/virtualList/virtualList.tsx

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"useArrayProp.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useArrayProp.ts"],"names":[],"mappings":"AAGA,oBAAY,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAA;AAEpE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAC1D,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,EACxB,UAAU,CAAC,EAAE,CAAC,EAAE,GACf,CAAC,EAAE,CAUL"}

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

@@ -1,7 +0,0 @@
-import { ElementSize } from '../observers/elementSizeObserver';
-/**
- * Subscribe to the size of a DOM element.
- * @beta
- */
-export declare function useElementSize(element: HTMLElement | null): ElementSize | null;
-//# sourceMappingURL=useElementSize.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useElementSize.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useElementSize.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAuB,MAAM,kCAAkC,CAAA;AAElF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAU9E"}

package/lib/dts/src/observers/elementSizeObserver.d.ts

@@ -1,37 +0,0 @@
-/**
- * @beta
- */
-export interface ElementRectValue {
-    width: number;
-    height: number;
-}
-/**
- * @beta
- */
-export interface ElementSize {
-    content: ElementRectValue;
-    border: ElementRectValue;
-    /** @deprecated INTERNAL ONLY */
-    _contentRect: DOMRectReadOnly;
-}
-/**
- * @internal
- */
-export declare 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;
-}
-/**
- * @internal
- */
-export declare const _elementSizeObserver: _ElementSizeObserver;
-//# sourceMappingURL=elementSizeObserver.d.ts.map

package/lib/dts/src/observers/elementSizeObserver.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"elementSizeObserver.d.ts","sourceRoot":"","sources":["../../../../src/observers/elementSizeObserver.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,gBAAgB,CAAA;IACzB,MAAM,EAAE,gBAAgB,CAAA;IAExB,gCAAgC;IAChC,YAAY,EAAE,eAAe,CAAA;CAC9B;AAED;;GAEG;AACH,oBAAY,sBAAsB,GAAG,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;AAEvE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,sBAAsB,KAAK,MAAM,IAAI,CAAA;CACpF;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,sBAAsB,KAAK,MAAM,IAAI,CAAA;CACpF;AAID;;GAEG;AACH,eAAO,MAAM,oBAAoB,sBAA+B,CAAA"}

package/lib/dts/src/observers/index.d.ts

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

package/lib/dts/src/observers/index.d.ts.map

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

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

@@ -1,5 +0,0 @@
-/**
- * @internal
- */
-export declare const _ResizeObserver: typeof ResizeObserver;
-//# sourceMappingURL=resizeObserver.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"resizeObserver.d.ts","sourceRoot":"","sources":["../../../../src/observers/resizeObserver.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,OAAO,cAGT,CAAA"}

package/src/hooks/useArrayProp.ts

@@ -1,23 +0,0 @@
-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/useElementSize.ts

@@ -1,18 +0,0 @@
-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/observers/elementSizeObserver.ts

@@ -1,116 +0,0 @@
-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

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

package/src/primitives/popover/__workshop__/RightAlignedStory.tsx

@@ -1,60 +0,0 @@
-import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
-
-export default function RightAlignedStory() {
-  const constrainSize = useBoolean('Constrain size', false)
-
-  const [open, setOpen] = useState(false)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
-  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
-
-  const content = (
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
-      hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
-      quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus
-      felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a, tempus vel
-      neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
-      Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer fermentum tortor at
-      pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo tortor libero, vel
-      pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia. Vestibulum non
-      pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi a, molestie elit.
-      Nulla sed eleifend mi.
-    </Text>
-  )
-
-  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  useClickOutside(handleClose, [buttonElement, popoverElement])
-
-  return (
-    <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
-      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1}>
-        <Flex justify="flex-end" padding={0}>
-          <Popover
-            boundaryElement={boundaryElement}
-            constrainSize={constrainSize}
-            content={content}
-            open={open}
-            padding={3}
-            portal
-            placement="bottom"
-            ref={setPopoverElement}
-          >
-            <Button
-              icon={EllipsisVerticalIcon}
-              mode="bleed"
-              onClick={handleToggleOpen}
-              ref={setButtonElement}
-              selected={open}
-            />
-          </Popover>
-        </Flex>
-      </Card>
-    </Card>
-  )
-}

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -1,79 +0,0 @@
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React, {ReactElement, useState} from 'react'
-import {
-  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
-  WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-} from '../../../__workshop__/constants'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Button} from '../../button'
-import {Card} from '../../card'
-import {Text} from '../../text'
-import {Popover} from '../popover'
-
-export default function TestStory(): ReactElement {
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const arrow = useBoolean('Arrow', true)
-  const matchReferenceWidth = useBoolean('Match reference width', false)
-  const open = useBoolean('Open', true)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
-  const preventOverflow = useBoolean('Prevent overflow', true)
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const referenceWide = useBoolean('Reference wide?', false)
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
-
-  const text = useText('Text', 'Test')
-
-  return (
-    <Card
-      ref={setBoundaryElement}
-      shadow={2}
-      style={{
-        position: 'absolute',
-        top: 50,
-        right: 50,
-        bottom: 50,
-        left: 50,
-      }}
-    >
-      <div
-        data-portal=""
-        ref={setPortalElement}
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          overflow: 'hidden',
-          pointerEvents: 'none',
-        }}
-      />
-
-      <div style={{width: '100%', height: '100%', overflow: 'auto'}}>
-        <div style={{padding: '150vh'}}>
-          <PortalProvider element={portalElement}>
-            <BoundaryElementProvider element={boundaryElement}>
-              <Popover
-                arrow={arrow}
-                content={<Text size={1}>{text}</Text>}
-                fallbackPlacements={['left', 'bottom', 'right', 'top']}
-                matchReferenceWidth={matchReferenceWidth}
-                open={open}
-                padding={3}
-                placement={placement}
-                portal
-                preventOverflow={preventOverflow}
-                radius={radius}
-                width={width}
-              >
-                <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
-              </Popover>
-            </BoundaryElementProvider>
-          </PortalProvider>
-        </div>
-      </div>
-    </Card>
-  )
-}