@sanity/ui 2.6.7-canary.0 → 2.6.7

package/src/core/components/tab/tab.tsx

@@ -11,14 +11,14 @@ export interface TabProps {
    * The `id` of the correlating `TabPanel` component.
    */
   'aria-controls': string
-  'id': string
-  'icon'?: React.ElementType | React.ReactNode
-  'focused'?: boolean
-  'fontSize'?: number | number[]
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
-  'selected'?: boolean
-  'tone'?: ButtonTone
+  id: string
+  icon?: React.ElementType | React.ReactNode
+  focused?: boolean
+  fontSize?: number | number[]
+  label?: React.ReactNode
+  padding?: number | number[]
+  selected?: boolean
+  tone?: ButtonTone
 }
 
 const CustomButton = styled(Button)`

package/src/core/components/tab/tabPanel.tsx

@@ -9,7 +9,7 @@ export interface TabPanelProps extends BoxProps {
    * The `id` of the correlating `Tab` component.
    */
   'aria-labelledby': string
-  'id': string
+  id: string
 }
 
 /**

package/src/core/components/toast/styles.ts

@@ -14,12 +14,11 @@ const loadingAnimation = keyframes`
   }
   100% {
     width: 100%;
-  }
+  } 
 `
 
 const LOADING_BAR_HEIGHT = 2
 
-// @TODO get rid of $duration modifier, set data attribute instead and use stable selector
 export function rootStyles(
   props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,
 ): ReturnType<typeof css> {

package/src/core/components/toast/useToast.ts

@@ -13,7 +13,6 @@ export function useToast(): ToastContextValue {
     throw new Error('useToast(): missing context value')
   }
 
-  // @TODO context and hooks doesn't really work like this, there will never be a mismatch between the provider and the consumer, we can remove these version specifiers
   // NOTE: This check is for future-compatiblity
   // - If the value is not an object, it’s not compatible with the current version
   // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version

package/src/core/components/tree/tree.tsx

@@ -84,7 +84,6 @@ export const Tree = memo(
       })
     }, [])
 
-    // @TODO split out into separate contexts
     const contextValue: TreeContextValue = useMemo(
       () => ({
         version: 0.0,

package/src/core/components/tree/treeItem.tsx

@@ -76,7 +76,6 @@ export const TreeItem = memo(function TreeItem(
   const focused = tree.focusedElement === rootRef.current
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
   const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
-  // @TODO split out into separate contexts
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
     [itemPath, tree],

package/src/core/helpers/focus.ts

@@ -15,7 +15,6 @@ import {
  * @internal
  */
 export function _hasFocus(element: HTMLElement): boolean {
-  // @TODO verify this is not called during render
   return Boolean(document.activeElement) && element.contains(document.activeElement)
 }
 

package/src/core/helpers/scroll.ts

@@ -4,7 +4,6 @@
 export function _isScrollable(el: Node): boolean {
   if (!(el instanceof Element)) return false
 
-  // @TODO check if this is called during render
   const style = window.getComputedStyle(el)
 
   return (

package/src/core/hooks/_internal/index.ts

@@ -0,0 +1 @@
+export * from './useUnique'

package/src/core/hooks/_internal/useUnique.ts

@@ -0,0 +1,34 @@
+import {useRef} from 'react'
+
+/**
+ * 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
+ */
+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)) {
+    valueRef.current = value
+  }
+
+  return valueRef.current
+}
+
+function _isEqual(objA: Comparable, objB: Comparable): boolean {
+  if (!objA || !objB) {
+    return objA === objB
+  }
+
+  const keysA = Object.keys(objA)
+  const keysB = Object.keys(objB)
+
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+
+  return keysA.every((key) => objA[key] === objB[key])
+}

package/src/core/hooks/index.ts

@@ -1,11 +1,10 @@
 export * from './useArrayProp'
 export * from './useClickOutside'
-export * from './useCustomValidity'
 export * from './useElementRect'
 export * from './useElementSize'
-export * from './useForwardedRef'
 export * from './useGlobalKeyDown'
-export * from './useMatchMedia'
 export * from './useMediaIndex'
 export * from './usePrefersDark'
 export * from './usePrefersReducedMotion'
+export * from './useForwardedRef'
+export * from './useCustomValidity'

package/src/core/hooks/useClickOutside.ts

@@ -1,65 +1,99 @@
-import {useEffect} from 'react'
-import {useEffectEvent} from 'use-effect-event'
+import {useEffect, useRef, useState} from 'react'
 import {EMPTY_ARRAY} from '../constants'
 
 /**
  * @public
  */
-export type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
+export type ClickOutsideListener = (event: MouseEvent) => void
+
+function _getElements(
+  element: HTMLElement | null,
+  elementsArg: Array<HTMLElement | HTMLElement[] | null>,
+): HTMLElement[] {
+  const ret = [element]
+
+  for (const el of elementsArg) {
+    if (Array.isArray(el)) {
+      ret.push(...el)
+    } else {
+      ret.push(el)
+    }
+  }
+
+  return ret.filter(Boolean) as HTMLElement[]
+}
 
 /**
- * Use the callback version of `elementsArg` if you're using `useRef` to handle elements:
- * ```tsx
- * useClickOutside(
- *   () => {},
- *   () => [ref.current],
- * )
- *
  * @public
  */
 export function useClickOutside(
   listener: ClickOutsideListener,
-  elementsArg:
-    | Array<HTMLElement | HTMLElement[] | null>
-    | (() => Array<HTMLElement | HTMLElement[] | null>) = EMPTY_ARRAY,
+  elementsArg: Array<HTMLElement | HTMLElement[] | null> = EMPTY_ARRAY,
   boundaryElement?: HTMLElement | null,
-): void {
-  /**
-   * The `useEffectEvent` hook allow us to always see the latest value of `listener`, `elementsArg` and `boundaryElement` without needing to
-   * juggle `useState`, `useRef` and `useState` to make sure the `mousedown` event listener isn't constantly being added and removed.
-   */
-  const eventHandler = useEffectEvent((evt: MouseEvent | TouchEvent) => {
-    const target = evt.target
-
-    if (!(target instanceof Node)) {
-      return
-    }
+): (el: HTMLElement | null) => void {
+  const [element, setElement] = useState<HTMLElement | null>(null)
+  const [elements, setElements] = useState(() => _getElements(element, elementsArg))
+  const elementsRef = useRef(elements)
+
+  useEffect(() => {
+    const prevElements = elementsRef.current
+    const nextElements = _getElements(element, elementsArg)
+
+    if (prevElements.length !== nextElements.length) {
+      setElements(nextElements)
+      elementsRef.current = nextElements
 
-    if (boundaryElement && !boundaryElement.contains(target)) {
       return
     }
 
-    const resolvedElements = Array.isArray(elementsArg) ? elementsArg : elementsArg()
-    const elements = resolvedElements.flat()
-
-    for (const el of elements) {
-      if (!el) continue
+    for (const el of prevElements) {
+      if (!nextElements.includes(el)) {
+        setElements(nextElements)
+        elementsRef.current = nextElements
 
-      if (target === el || el.contains(target)) {
         return
       }
     }
 
-    listener(evt)
-  })
+    for (const el of nextElements) {
+      if (!prevElements.includes(el)) {
+        setElements(nextElements)
+        elementsRef.current = nextElements
+
+        return
+      }
+    }
+  }, [element, elementsArg])
 
   useEffect(() => {
-    document.addEventListener('mousedown', eventHandler)
-    document.addEventListener('touchstart', eventHandler)
+    if (!listener) return undefined
+
+    const handleWindowMouseDown = (evt: MouseEvent) => {
+      const target = evt.target
+
+      if (!(target instanceof Node)) {
+        return
+      }
+
+      if (boundaryElement && !boundaryElement.contains(target)) {
+        return
+      }
+
+      for (const el of elements) {
+        if (target === el || el.contains(target)) {
+          return
+        }
+      }
+
+      listener(evt)
+    }
+
+    window.addEventListener('mousedown', handleWindowMouseDown)
 
     return () => {
-      document.removeEventListener('mousedown', eventHandler)
-      document.removeEventListener('touchstart', eventHandler)
+      window.removeEventListener('mousedown', handleWindowMouseDown)
     }
-  }, [eventHandler])
+  }, [boundaryElement, listener, elements])
+
+  return setElement
 }

package/src/core/hooks/useElementSize.ts

@@ -6,7 +6,6 @@ import {ElementSize, _elementSizeObserver} from '../observers/elementSizeObserve
  * @beta
  */
 export function useElementSize(element: HTMLElement | null): ElementSize | null {
-  // @TODO we can probably use something in framer-motion or @floating-ui instead of rolling our own
   const [size, setSize] = useState<ElementSize | null>(null)
 
   useEffect(() => {

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,4 +1,4 @@
-import {useMemo, useSyncExternalStore} from 'react'
+import {useSyncExternalStore} from 'react'
 import {useTheme_v2} from '../../theme'
 
 /**
@@ -9,6 +9,8 @@ export interface _MediaStore {
   getSnapshot: () => number
 }
 
+const MEDIA_STORE_CACHE = new WeakMap<number[], _MediaStore>()
+
 type MediaQueryMinWidth = `(min-width: ${number}px)`
 type MediaQueryMaxWidth = `(max-width: ${number}px)`
 type MediaQueryMinMaxWidth = `${MediaQueryMinWidth} and ${MediaQueryMaxWidth}`
@@ -95,7 +97,13 @@ function getServerSnapshot() {
  */
 export function useMediaIndex(): number {
   const {media} = useTheme_v2()
-  const store = useMemo(() => _createMediaStore(media), [media])
+
+  let store = MEDIA_STORE_CACHE.get(media)
+
+  if (!store) {
+    store = _createMediaStore(media)
+    MEDIA_STORE_CACHE.set(media, store)
+  }
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

package/src/core/hooks/usePrefersDark.ts

@@ -1,16 +1,61 @@
-import {useMatchMedia} from './useMatchMedia'
+import {useSyncExternalStore} from 'react'
+
+let MEDIA_QUERY_CACHE: MediaQueryList | undefined
 
 /**
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
+ * Lazy init the matchMedia instance
+ */
+function getMatchMedia(): MediaQueryList {
+  if (!MEDIA_QUERY_CACHE) {
+    // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
+    // the `window` global is available and we're in a browser environment
+    MEDIA_QUERY_CACHE = window.matchMedia('(prefers-color-scheme: dark)')
+  }
+
+  return MEDIA_QUERY_CACHE
+}
+
+/**
+ * As the query is the same for all instances of this hook, we can cache the matchMedia instance
+ * and have cheap `change` event listeners, while getSnapshot always reads from the same
+ * matchMedia instance and we don't get any tearing.
+ * Tearing in this context means the bad edge case in React concurrent render mdoe
+ * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
+ * during the same render.
+ * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
+ * what React.memo boundaries there might be between the layers..
+ */
+function subscribe(onStoreChange: () => void): () => void {
+  const matchMedia = getMatchMedia()
+
+  matchMedia.addEventListener('change', onStoreChange)
+
+  return () => matchMedia.removeEventListener('change', onStoreChange)
+}
+
+/**
+ * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
+ * It's important that this function does not create new objects or arrays when called:
+ * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
+ */
+function getSnapshot() {
+  return getMatchMedia().matches
+}
+
+/**
+ * Only called during server-side rendering, and hydration if using hydrateRoot
+ * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
+ * and we assume `(prefers-color-scheme: light)` since it's the most common scheme
  *
+ * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
+ */
+function getServerSnapshot() {
+  return false
+}
+
+/**
  * @public
  */
-export function usePrefersDark(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
+export function usePrefersDark(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -1,16 +1,62 @@
-import {useMatchMedia} from './useMatchMedia'
+import {useSyncExternalStore} from 'react'
+
+let MEDIA_QUERY_CACHE: MediaQueryList | undefined
 
 /**
- * Returns true if motion should be reduced
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
+ * Lazy init the matchMedia instance
+ */
+function getMatchMedia(): MediaQueryList {
+  if (!MEDIA_QUERY_CACHE) {
+    // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
+    // the `window` global is available and we're in a browser environment
+    MEDIA_QUERY_CACHE = window.matchMedia('(prefers-reduced-motion: reduce)')
+  }
+
+  return MEDIA_QUERY_CACHE
+}
+
+/**
+ * As the query is the same for all instances of this hook, we can cache the matchMedia instance
+ * and have cheap `change` event listeners, while getSnapshot always reads from the same
+ * matchMedia instance and we don't get any tearing.
+ * Tearing in this context means the bad edge case in React concurrent render mdoe
+ * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
+ * during the same render.
+ * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
+ * what React.memo boundaries there might be between the layers..
+ */
+function subscribe(onStoreChange: () => void): () => void {
+  const matchMedia = getMatchMedia()
+
+  matchMedia.addEventListener('change', onStoreChange)
+
+  return () => matchMedia.removeEventListener('change', onStoreChange)
+}
+
+/**
+ * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
+ * It's important that this function does not create new objects or arrays when called:
+ * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
+ */
+function getSnapshot() {
+  return getMatchMedia().matches
+}
+
+/**
+ * Only called during server-side rendering, and hydration if using hydrateRoot
+ * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
+ * and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme
  *
+ * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
+ */
+function getServerSnapshot() {
+  return false
+}
+
+/**
+ * Returns true if motion should be reduced
  * @public
  */
-export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
+export function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }

package/src/core/primitives/avatar/styles.ts

@@ -14,24 +14,24 @@ export const avatarStyle = {
 
 function avatarArrowStyle(): CSSObject {
   return {
-    'position': 'absolute',
-    'boxSizing': 'border-box',
-    'zIndex': 0,
-    'opacity': 0,
-    'transition': 'all 0.2s linear',
-    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
-    'left': 0,
-    'right': 0,
-    'top': 0,
-    'bottom': 0,
+    position: 'absolute',
+    boxSizing: 'border-box',
+    zIndex: 0,
+    opacity: 0,
+    transition: 'all 0.2s linear',
+    transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
 
     '& > svg': {
-      'width': '11px',
-      'height': '7px',
-      'position': 'absolute',
-      'top': '-5px',
-      'left': '50%',
-      'transform': 'translateX(-6px)',
+      width: '11px',
+      height: '7px',
+      position: 'absolute',
+      top: '-5px',
+      left: '50%',
+      transform: 'translateX(-6px)',
 
       '&:not([hidden])': {
         display: 'block',
@@ -63,11 +63,11 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
     '--avatar-bg-color': `var(--card-avatar-${$color}-bg-color)`,
     '--avatar-fg-color': `var(--card-avatar-${$color}-fg-color)`,
 
-    'backgroundColor': 'var(--avatar-bg-color)',
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': '0 0 0 1px var(--card-bg-color)',
+    backgroundColor: 'var(--avatar-bg-color)',
+    position: 'relative',
+    boxSizing: 'border-box',
+    userSelect: 'none',
+    boxShadow: '0 0 0 1px var(--card-bg-color)',
 
     '&[data-status="inactive"]': {
       opacity: 0.5,
@@ -81,14 +81,14 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
 
     /* &:is(button) */
     '&[data-as="button"]': {
-      'WebkitFontSmoothing': 'inherit',
-      'appearance': 'none',
-      'margin': 0,
-      'padding': 0,
-      'border': 0,
-      'font': 'inherit',
-      'color': 'inherit',
-      'outline': 'none',
+      WebkitFontSmoothing: 'inherit',
+      appearance: 'none',
+      margin: 0,
+      padding: 0,
+      border: 0,
+      font: 'inherit',
+      color: 'inherit',
+      outline: 'none',
 
       '&:focus': {
         boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
@@ -110,9 +110,9 @@ export function responsiveAvatarSizeStyle(
     const avatarSize = avatar.sizes[size] || avatar.sizes[0]
 
     return {
-      'width': rem(avatarSize.size),
-      'height': rem(avatarSize.size),
-      'borderRadius': rem(avatarSize.size / 2),
+      width: rem(avatarSize.size),
+      height: rem(avatarSize.size),
+      borderRadius: rem(avatarSize.size / 2),
 
       '&>svg': {
         width: rem(avatarSize.size),
@@ -131,14 +131,14 @@ export function avatarImageStyle(): CSSObject {
 
 export function avatarInitialsStyle(): CSSObject {
   return {
-    'width': '100%',
-    'height': '100%',
-    'color': 'var(--avatar-fg-color)',
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'textTransform': 'uppercase',
-    'textAlign': 'center',
-    'borderRadius': '50%',
+    width: '100%',
+    height: '100%',
+    color: 'var(--avatar-fg-color)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textTransform: 'uppercase',
+    textAlign: 'center',
+    borderRadius: '50%',
 
     '&:not([hidden])': {
       display: 'flex',
@@ -155,8 +155,8 @@ function avatarBgStrokeStyle(): CSSObject {
 
 function avatarStrokeStyle(): CSSObject {
   return {
-    'strokeWidth': '2px',
-    'stroke': 'var(--avatar-bg-color)',
+    strokeWidth: '2px',
+    stroke: 'var(--avatar-bg-color)',
 
     '[data-status="editing"] &': {
       strokeDasharray: '2 4',

package/src/core/primitives/badge/styles.ts

@@ -8,8 +8,8 @@ export function badgeStyle(props: BadgeStyleProps): CSSObject {
     '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
     '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
 
-    'backgroundColor': 'var(--card-bg-color)',
-    'cursor': 'default',
+    backgroundColor: 'var(--card-bg-color)',
+    cursor: 'default',
 
     '&:not([hidden])': {
       display: 'inline-block',

package/src/core/primitives/button/styles.ts

@@ -81,12 +81,12 @@ export function buttonColorStyles(
   return [
     _cardColorStyle(baseColor, color.enabled),
     {
-      'backgroundColor': 'var(--card-bg-color)',
-      'color': 'var(--card-fg-color)',
-      'boxShadow': focusRingBorderStyle(border),
+      backgroundColor: 'var(--card-bg-color)',
+      color: 'var(--card-fg-color)',
+      boxShadow: focusRingBorderStyle(border),
       '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
       "&:not([data-disabled='true'])": {
-        'boxShadow': combineBoxShadow(
+        boxShadow: combineBoxShadow(
           focusRingBorderStyle(border),
           shadow ? defaultBoxShadow : undefined,
         ),

package/src/core/primitives/inline/styles.ts

@@ -4,7 +4,7 @@ import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {
   return {
-    'lineHeight': 0,
+    lineHeight: 0,
 
     '&&:not([hidden])': {
       display: 'block',
@@ -24,7 +24,7 @@ export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeP
     const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
 
     return {
-      'margin': `-${_space} 0 0 -${_space}`,
+      margin: `-${_space} 0 0 -${_space}`,
       '& > div': {padding: `${_space} 0 0 ${_space}`},
     }
   })