@sanity/ui 2.6.7-canary.0 → 2.6.8-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.6.7-canary.0",
+  "version": "2.6.8-canary.0",
   "keywords": [
     "sanity",
     "ui",

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -1,13 +1,4 @@
-import {
-  Children,
-  forwardRef,
-  Fragment,
-  isValidElement,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import {Children, forwardRef, Fragment, isValidElement, useCallback, useMemo, useState} from 'react'
 import {useArrayProp, useClickOutside} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'
@@ -31,13 +22,13 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
   const space = useArrayProp(spaceRaw)
   const [open, setOpen] = useState(false)
-  const expandElementRef = useRef<HTMLButtonElement | null>(null)
-  const popoverElementRef = useRef<HTMLDivElement | null>(null)
+  const [expandElement, setExpandElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
 
   const collapse = useCallback(() => setOpen(false), [])
   const expand = useCallback(() => setOpen(true), [])
 
-  useClickOutside(collapse, () => [expandElementRef.current, popoverElementRef.current])
+  useClickOutside(collapse, [expandElement, popoverElement])
 
   const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
 
@@ -61,14 +52,14 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
           open={open}
           placement="top"
           portal
-          ref={popoverElementRef}
+          ref={setPopoverElement}
         >
           <ExpandButton
             fontSize={1}
             mode="bleed"
             onClick={open ? collapse : expand}
             padding={1}
-            ref={expandElementRef}
+            ref={setExpandElement}
             selected={open}
             text="…"
           />

package/src/core/components/dialog/dialog.tsx

@@ -1,6 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 import {
   containsOrEqualsElement,
@@ -170,6 +170,7 @@ const DialogCard = forwardRef(function DialogCard(
   const shadow = useArrayProp(shadowProp)
   const width = useArrayProp(widthProp)
   const ref = useRef<HTMLDivElement | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
   const layer = useLayer()
   const {isTopLayer} = layer
@@ -215,24 +216,32 @@ const DialogCard = forwardRef(function DialogCard(
   )
 
   useClickOutside(
-    (event: MouseEvent | TouchEvent) => {
-      if (!isTopLayer || !onClickOutside) return
+    useCallback(
+      (event: MouseEvent) => {
+        if (!isTopLayer || !onClickOutside) return
 
-      const target = event.target as Node | null
+        const target = event.target as Node | null
 
-      if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
-        // Ignore clicks outside of the scope
-        return
-      }
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore clicks outside of the scope
+          return
+        }
 
-      onClickOutside()
-    },
-    () => [ref.current],
+        onClickOutside()
+      },
+      [boundaryElement, isTopLayer, onClickOutside, portalElement],
+    ),
+    [rootElement],
   )
 
+  const setRef = useCallback((el: HTMLDivElement | null) => {
+    setRootElement(el)
+    ref.current = el
+  }, [])
+
   return (
     <DialogContainer data-ui="DialogCard" width={width}>
-      <DialogCardRoot radius={radius} ref={ref} scheme={scheme} shadow={shadow}>
+      <DialogCardRoot radius={radius} ref={setRef} scheme={scheme} shadow={shadow}>
         <DialogLayout direction="column">
           {showHeader && (
             <DialogHeader>

package/src/core/components/menu/menu.tsx

@@ -19,7 +19,7 @@ export interface MenuProps extends ResponsivePaddingProps {
    * @deprecated Use `shouldFocus="last"` instead.
    */
   focusLast?: boolean
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -75,18 +75,16 @@ export const Menu = forwardRef(function Menu(
     handleItemMouseLeave,
     handleKeyDown,
     mount,
-  } = useMenuController({onKeyDown, originElement, shouldFocus, rootElementRef: ref})
+    rootElement,
+    setRootElement,
+  } = useMenuController({onKeyDown, originElement, shouldFocus})
 
   const handleRefChange = useCallback(
     (el: HTMLDivElement | null) => {
+      setRootElement(el)
       ref.current = el
-
-      // Register root element (for nested menus)
-      if (ref.current && registerElement) {
-        registerElement(ref.current)
-      }
     },
-    [registerElement],
+    [setRootElement],
   )
 
   // Trigger `onItemSelect` when active index changes
@@ -96,8 +94,11 @@ export const Menu = forwardRef(function Menu(
 
   // Close menu when clicking outside
   useClickOutside(
-    (event) => isTopLayer && onClickOutside && onClickOutside(event),
-    () => [ref.current],
+    useCallback(
+      (event) => isTopLayer && onClickOutside && onClickOutside(event),
+      [isTopLayer, onClickOutside],
+    ),
+    [rootElement],
   )
 
   // Close menu when pressing Escape
@@ -115,7 +116,13 @@ export const Menu = forwardRef(function Menu(
     ),
   )
 
-  // @TODO split out into separate contexts
+  // Register root element (for nested menus)
+  useEffect(() => {
+    if (!rootElement || !registerElement) return
+
+    return registerElement(rootElement)
+  }, [registerElement, rootElement])
+
   const value: MenuContextValue = useMemo(
     () => ({
       version: 0.0,

package/src/core/components/menu/menuButton.tsx

@@ -140,7 +140,7 @@ export const MenuButton = forwardRef(function MenuButton(
   }, [])
 
   const handleMenuClickOutside = useCallback(
-    (event: MouseEvent | TouchEvent) => {
+    (event: MouseEvent) => {
       const target = event.target
 
       if (!(target instanceof Node)) {

package/src/core/components/menu/menuContext.ts

@@ -5,7 +5,7 @@ export interface MenuContextValue {
   activeElement: HTMLElement | null
   activeIndex: number
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void

package/src/core/components/menu/useMenuController.ts

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {_getFocusableElements, _sortElements} from './helpers'
 
 /**
@@ -11,6 +11,8 @@ export interface MenuController {
   handleItemMouseLeave: () => void
   handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
+  rootElement: HTMLDivElement | null
+  setRootElement: (el: HTMLDivElement | null) => void
 }
 
 /**
@@ -22,14 +24,14 @@ export function useMenuController(props: {
   onKeyDown?: React.KeyboardEventHandler
   originElement?: HTMLElement | null
   shouldFocus: 'first' | 'last' | null
-  rootElementRef: React.MutableRefObject<HTMLDivElement | null>
 }): MenuController {
-  const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
+  const {onKeyDown, originElement, shouldFocus} = props
   const elementsRef = useRef<HTMLElement[]>([])
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
-  const mounted = Boolean(rootElementRef.current)
+  const activeElement = elementsRef.current[activeIndex] || null
+  const mounted = Boolean(rootElement)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
@@ -42,7 +44,7 @@ export function useMenuController(props: {
 
       if (elementsRef.current.indexOf(element) === -1) {
         elementsRef.current.push(element)
-        _sortElements(rootElementRef.current, elementsRef.current)
+        _sortElements(rootElement, elementsRef.current)
       }
 
       if (selected) {
@@ -59,7 +61,7 @@ export function useMenuController(props: {
         }
       }
     },
-    [rootElementRef, setActiveIndex],
+    [rootElement, setActiveIndex],
   )
 
   const handleKeyDown = useCallback(
@@ -177,15 +179,17 @@ export function useMenuController(props: {
     // which would be incorrect when the user hovers over a gap
     // between two menu items or a menu divider.
     setActiveIndex(-2)
-    rootElementRef.current?.focus()
-  }, [rootElementRef, setActiveIndex])
+    rootElement?.focus()
+  }, [setActiveIndex, rootElement])
 
   // Set focus on the currently active element
   useEffect(() => {
     if (!mounted) return
 
     const rafId = window.requestAnimationFrame(() => {
-      if (activeIndex === -1) {
+      const _activeIndex = activeIndexRef.current
+
+      if (_activeIndex === -1) {
         if (shouldFocus === 'first') {
           const focusableElements = _getFocusableElements(elementsRef.current)
           const el = focusableElements[0]
@@ -213,7 +217,7 @@ export function useMenuController(props: {
         return
       }
 
-      const element = elementsRef.current[activeIndex] || null
+      const element = elementsRef.current[_activeIndex] || null
 
       element?.focus()
     })
@@ -230,5 +234,7 @@ export function useMenuController(props: {
     handleItemMouseLeave,
     handleKeyDown,
     mount,
+    rootElement,
+    setRootElement,
   }
 }

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)
 }