@sanity/ui 1.1.0-beta.2 → 1.2.0

package/src/components/dialog/dialog.tsx

@@ -1,14 +1,19 @@
 import {CloseIcon} from '@sanity/icons'
 import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
-import {focusFirstDescendant, focusLastDescendant} from '../../helpers'
+import {
+  containsOrEqualsElement,
+  focusFirstDescendant,
+  focusLastDescendant,
+  isHTMLElement,
+} from '../../helpers'
 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'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {DialogPosition} from '../../types'
-import {Layer, Portal, useLayer} from '../../utils'
+import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {
   dialogStyle,
   responsiveDialogPositionStyle,
@@ -34,6 +39,8 @@ export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProp
   footer?: React.ReactNode
   header?: React.ReactNode
   id: string
+  /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
+  onActivate?: LayerProps['onActivate']
   onClickOutside?: () => void
   onClose?: () => void
   portal?: string
@@ -58,11 +65,25 @@ interface DialogCardProps extends ResponsiveWidthProps {
   id: string
   onClickOutside?: () => void
   onClose?: () => void
+  portal?: string
   radius: number | number[]
   scheme?: ThemeColorSchemeKey
   shadow: number | number[]
 }
 
+function isTargetWithinScope(
+  boundaryElement: HTMLElement | null,
+  portalElement: HTMLElement | null,
+  target: Node
+): boolean {
+  if (!boundaryElement || !portalElement) return true
+
+  return (
+    containsOrEqualsElement(boundaryElement, target) ||
+    containsOrEqualsElement(portalElement, target)
+  )
+}
+
 const Root = styled(Layer)<ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps>(
   responsivePaddingStyle,
   dialogStyle,
@@ -138,11 +159,15 @@ const DialogCard = forwardRef(function DialogCard(
     id,
     onClickOutside,
     onClose,
+    portal: portalProp,
     radius: radiusProp,
     scheme,
     shadow: shadowProp,
     width: widthProp,
   } = props
+  const portal = usePortal()
+  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
+  const boundaryElement = useBoundaryElement().element
   const radius = useArrayProp(radiusProp)
   const shadow = useArrayProp(shadowProp)
   const width = useArrayProp(widthProp)
@@ -158,7 +183,7 @@ const DialogCard = forwardRef(function DialogCard(
   useEffect(() => {
     if (!autoFocus) return
 
-    // On mount: focus the first interactive element in the contents
+    // On mount: focus the first focusable element
     if (forwardedRef.current) {
       focusFirstDescendant(forwardedRef.current)
     }
@@ -169,22 +194,39 @@ const DialogCard = forwardRef(function DialogCard(
       (event: KeyboardEvent) => {
         if (!isTopLayer || !onClose) return
 
+        const target = document.activeElement
+
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore key presses when the focused element is outside of scope
+          return
+        }
+
         if (event.key === 'Escape') {
           event.preventDefault()
           event.stopPropagation()
           onClose()
         }
       },
-      [isTopLayer, onClose]
+      [boundaryElement, isTopLayer, onClose, portalElement]
     )
   )
 
   useClickOutside(
-    useCallback(() => {
-      if (!isTopLayer || !onClickOutside) return
+    useCallback(
+      (event: MouseEvent) => {
+        if (!isTopLayer || !onClickOutside) return
+
+        const target = event.target as Node | null
 
-      onClickOutside()
-    }, [isTopLayer, onClickOutside]),
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore clicks outside of the scope
+          return
+        }
+
+        onClickOutside()
+      },
+      [boundaryElement, isTopLayer, onClickOutside, portalElement]
+    ),
     [rootElement]
   )
 
@@ -265,16 +307,21 @@ export const Dialog = forwardRef(function Dialog(
     footer,
     header,
     id,
+    onActivate,
     onClickOutside,
     onClose,
+    onFocus,
     padding: paddingProp = 4,
-    portal,
+    portal: portalProp,
     position: positionProp = dialog.position || 'fixed',
     scheme,
     width: widthProp = 0,
     zOffset: zOffsetProp = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
     ...restProps
   } = props
+  const portal = usePortal()
+  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
+  const boundaryElement = useBoundaryElement().element
   const cardRadius = useArrayProp(cardRadiusProp)
   const padding = useArrayProp(paddingProp)
   const position = useArrayProp(positionProp)
@@ -283,32 +330,67 @@ export const Dialog = forwardRef(function Dialog(
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)
+  const focusedElementRef = useRef<HTMLElement | null>(null)
 
-  const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
-    const target = event.target
-    const cardElement = cardRef.current
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLDivElement>) => {
+      onFocus?.(event)
 
-    if (!cardElement) {
-      return
-    }
+      const target = event.target
+      const cardElement = cardRef.current
 
-    if (target === preDivRef.current) {
-      focusLastDescendant(cardElement)
+      if (cardElement && target === preDivRef.current) {
+        focusLastDescendant(cardElement)
 
-      return
-    }
+        return
+      }
 
-    if (target === postDivRef.current) {
-      focusFirstDescendant(cardElement)
+      if (cardElement && target === postDivRef.current) {
+        focusFirstDescendant(cardElement)
 
-      return
-    }
-  }, [])
+        return
+      }
+
+      if (isHTMLElement(event.target)) {
+        focusedElementRef.current = event.target
+      }
+    },
+    [onFocus]
+  )
 
   const labelId = `${id}_label`
 
+  const rootClickTimeoutRef = useRef<NodeJS.Timeout>()
+
+  // If the resulting active element (a.k.a. focused element) is not withing scope when clicking
+  // within the dialog, then we want to focus the previously interactive element in the dialog instead.
+  // This is to allow the user to tab or close the dialog by pressing escape.
+  const handleRootClick = useCallback(() => {
+    if (rootClickTimeoutRef.current) {
+      clearTimeout(rootClickTimeoutRef.current)
+    }
+
+    rootClickTimeoutRef.current = setTimeout(() => {
+      const activeElement = document.activeElement
+
+      if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
+        const target = focusedElementRef.current
+
+        if (!target || !document.body.contains(target)) {
+          // No previously focused element, or it's not in the document anymore
+          const cardElement = cardRef.current
+          if (cardElement) focusFirstDescendant(cardElement)
+
+          return
+        }
+
+        target.focus()
+      }
+    }, 0)
+  }, [boundaryElement, portalElement])
+
   return (
-    <Portal __unstable_name={portal}>
+    <Portal __unstable_name={portalProp}>
       <Root
         {...restProps}
         $padding={padding}
@@ -317,6 +399,8 @@ export const Dialog = forwardRef(function Dialog(
         aria-modal
         data-ui="Dialog"
         id={id}
+        onActivate={onActivate}
+        onClick={handleRootClick}
         onFocus={handleFocus}
         ref={ref}
         role="dialog"
@@ -332,6 +416,7 @@ export const Dialog = forwardRef(function Dialog(
           id={id}
           onClickOutside={onClickOutside}
           onClose={onClose}
+          portal={portalProp}
           radius={cardRadius}
           ref={cardRef}
           scheme={scheme}

package/src/components/toast/toastProvider.tsx

@@ -1,19 +1,18 @@
 import {AnimatePresence, motion} from 'framer-motion'
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState, startTransition} from 'react'
 import styled from 'styled-components'
+import {useMounted} from '../../hooks/useMounted'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
 import {ToastContextValue, ToastParams} from './types'
 
-interface ToastState {
-  toasts: {
-    dismiss: () => void
-    id: string
-    params: ToastParams
-  }[]
-}
+type ToastState = {
+  dismiss: () => void
+  id: string
+  params: ToastParams
+}[]
 
 /**
  * @public
@@ -51,25 +50,29 @@ let toastId = 0
  */
 export function ToastProvider(props: ToastProviderProps): React.ReactElement {
   const {children, padding = 4, paddingX, paddingY, zOffset} = props
-  const [state, setState] = useState<ToastState>({toasts: []})
+  const [state, _setState] = useState<ToastState>([])
+
   const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
 
   const push = useCallback((params: ToastParams) => {
+    // Wrap setState in startTransition to allow React to give input state updates higher priority
+    const setState: typeof _setState = (state) => startTransition(() => _setState(state))
+
     const id = params.id || String(toastId++)
     const duration = params.duration || 5000
 
     const dismiss = () => {
       const timeoutId = toastsRef.current[id]?.timeoutId
 
-      setState((prevState) => {
-        const idx = prevState.toasts.findIndex((t) => t.id === id)
+      setState((prevState): ToastState => {
+        const idx = prevState.findIndex((t) => t.id === id)
 
         if (idx > -1) {
-          const toasts = prevState.toasts.slice(0)
+          const toasts = prevState.slice(0)
 
           toasts.splice(idx, 1)
 
-          return {...prevState, toasts}
+          return toasts
         }
 
         return prevState
@@ -81,19 +84,16 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
       }
     }
 
-    setState((prevState) => {
-      return {
-        ...prevState,
-        toasts: prevState.toasts
-          .filter((t) => t.id !== id)
-          .concat([
-            {
-              dismiss,
-              id,
-              params: {...params, duration},
-            },
-          ]),
-      }
+    setState((prevState): ToastState => {
+      return prevState
+        .filter((t) => t.id !== id)
+        .concat([
+          {
+            dismiss,
+            id,
+            params: {...params, duration},
+          },
+        ])
     })
 
     if (toastsRef.current[id]) {
@@ -119,37 +119,40 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
   )
 
   const value: ToastContextValue = useMemo(() => ({version: 0.0, push}), [push])
+  const mounted = useMounted()
 
   return (
     <ToastContext.Provider value={value}>
       {children}
 
-      <Root data-ui="ToastProvider" zOffset={zOffset}>
-        <ToastContainer>
-          <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
-            <AnimatePresence initial={false}>
-              {state.toasts.map(({dismiss, id, params}) => (
-                <motion.div
-                  animate={{opacity: 1, y: 0, scale: 1}}
-                  exit={{opacity: 0, scale: 0.5, transition: {duration: 0.2}}}
-                  initial={{opacity: 0, y: 32, scale: 0.25}}
-                  key={id}
-                  layout="position"
-                  transition={{type: 'spring', damping: 30, stiffness: 400}}
-                >
-                  <Toast
-                    closable={params.closable}
-                    description={params.description}
-                    onClose={dismiss}
-                    status={params.status}
-                    title={params.title}
-                  />
-                </motion.div>
-              ))}
-            </AnimatePresence>
-          </Box>
-        </ToastContainer>
-      </Root>
+      {mounted && (
+        <Root data-ui="ToastProvider" zOffset={zOffset}>
+          <ToastContainer>
+            <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
+              <AnimatePresence initial={false}>
+                {state.map(({dismiss, id, params}) => (
+                  <motion.div
+                    animate={{opacity: 1, y: 0, scale: 1}}
+                    exit={{opacity: 0, scale: 0.5, transition: {duration: 0.2}}}
+                    initial={{opacity: 0, y: 32, scale: 0.25}}
+                    key={id}
+                    layout="position"
+                    transition={{type: 'spring', damping: 30, stiffness: 400}}
+                  >
+                    <Toast
+                      closable={params.closable}
+                      description={params.description}
+                      onClose={dismiss}
+                      status={params.status}
+                      title={params.title}
+                    />
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            </Box>
+          </ToastContainer>
+        </Root>
+      )}
     </ToastContext.Provider>
   )
 }

package/src/constants.ts

@@ -1,12 +1,12 @@
 /**
  * @internal
  */
-export const EMPTY_ARRAY: any[] = []
+export const EMPTY_ARRAY: never[] = []
 
 /**
  * @internal
  */
-export const EMPTY_RECORD: Record<string, any> = {}
+export const EMPTY_RECORD: Record<string, never> = {}
 
 /**
  * @internal

package/src/helpers/element.ts

@@ -46,3 +46,10 @@ export function isHTMLSelectElement(element: unknown): element is HTMLSelectElem
 export function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement {
   return isHTMLElement(element) && element.nodeName === 'TEXTAREA'
 }
+
+/**
+ * @internal
+ */
+export function containsOrEqualsElement(element: HTMLElement, node: Node): boolean {
+  return element.contains(node) || element === node
+}

package/src/hooks/index.ts

@@ -5,5 +5,6 @@ export * from './useElementSize'
 export * from './useGlobalKeyDown'
 export * from './useMediaIndex'
 export * from './usePrefersDark'
+export * from './usePrefersReducedMotion'
 export * from './useForwardedRef'
 export * from './useCustomValidity'

package/src/hooks/useArrayProp.ts

@@ -12,7 +12,8 @@ export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[]
 ): T[] {
-  const __perf_hash__ = JSON.stringify(val ?? defaultVal)
+  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
+  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
 
   return useMemo(
     () => _getArrayProp(val, defaultVal),

package/src/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -0,0 +1,31 @@
+/** @jest-environment node */
+import {renderToString, renderToStaticMarkup} from 'react-dom/server'
+import {studioTheme, ThemeProvider} from '../../theme'
+import {useMediaIndex} from './useMediaIndex'
+
+function Log() {
+  const mediaIndex = useMediaIndex()
+
+  return <>mediaIndex: {JSON.stringify(mediaIndex)}</>
+}
+
+describe('useMediaIndex', () => {
+  it(`SSR to static markup returns 0`, () => {
+    expect(
+      renderToStaticMarkup(
+        <ThemeProvider theme={studioTheme}>
+          <Log />
+        </ThemeProvider>
+      )
+    ).toBe('mediaIndex: 0')
+  })
+  it(`SSR to markup for hydration doesn't throw`, () => {
+    expect(
+      renderToString(
+        <ThemeProvider theme={studioTheme}>
+          <Log />
+        </ThemeProvider>
+      )
+    ).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
+  })
+})

package/src/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,6 +1,95 @@
-import {useEffect, useMemo, useState} from 'react'
+import {useSyncExternalStore} from 'react'
 import {useTheme} from '../../theme'
-import {_getMediaManager} from './lib/media'
+
+/**
+ * @internal
+ */
+export interface _MediaStore {
+  subscribe: (onStoreChange: () => void) => () => void
+  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}`
+type MediaQuery = `screen and ${MediaQueryMinWidth | MediaQueryMaxWidth | MediaQueryMinMaxWidth}`
+
+function _getMediaQuery(media: number[], index: number): MediaQuery {
+  if (index === 0) {
+    return `screen and (max-width: ${media[index] - 1}px)`
+  }
+
+  if (index === media.length) {
+    return `screen and (min-width: ${media[index - 1]}px)`
+  }
+
+  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
+}
+
+function _createMediaStore(media: number[]): _MediaStore {
+  const mediaLen = media.length
+  let sizes: {mq: MediaQueryList; index: number}[]
+
+  // The _createMediaStore function is called in both server and client environments.
+  // However since subscribe and getSnapshot are only called on the client we lazy init what we need for them
+  // so that we don't need to run checks for wether it's safe to call `window.matchMedia`
+  const getSizes = () => {
+    if (!sizes) {
+      sizes = []
+
+      for (let index = mediaLen; index > -1; index -= 1) {
+        const mediaQuery = _getMediaQuery(media, index)
+
+        sizes.push({index, mq: window.matchMedia(mediaQuery)})
+      }
+    }
+
+    return sizes
+  }
+
+  const getSnapshot = () => {
+    for (const {index, mq} of getSizes()) {
+      if (mq.matches) return index
+    }
+
+    return 0
+  }
+
+  const subscribe = (onStoreChange: () => void) => {
+    const disposeFns: (() => void)[] = []
+
+    for (const {mq} of getSizes()) {
+      const handleChange = () => {
+        if (mq.matches) onStoreChange()
+      }
+
+      mq.addEventListener('change', handleChange)
+
+      disposeFns.push(() => mq.removeEventListener('change', handleChange))
+    }
+
+    return () => {
+      for (const disposeFn of disposeFns) {
+        disposeFn()
+      }
+    }
+  }
+
+  return {getSnapshot, subscribe}
+}
+
+/**
+ * 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 0
+}
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -9,10 +98,13 @@ import {_getMediaManager} from './lib/media'
 export function useMediaIndex(): number {
   const theme = useTheme()
   const {media} = theme.sanity
-  const manager = useMemo(() => _getMediaManager(media), [media])
-  const [index, setIndex] = useState(manager.getCurrentIndex)
 
-  useEffect(() => manager.subscribe(setIndex), [manager])
+  let store = MEDIA_STORE_CACHE.get(media)
+
+  if (!store) {
+    store = _createMediaStore(media)
+    MEDIA_STORE_CACHE.set(media, store)
+  }
 
-  return index
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

package/src/hooks/useMounted.ts

@@ -0,0 +1,14 @@
+import {useEffect, useReducer} from 'react'
+
+/**
+ * Some components should only render after mounting to the DOM, and not be rendered at all during SSR renderToString or equivalent.
+ * @public
+ */
+export function useMounted(): boolean {
+  // Use useReducer instead of useState as it's more low-level and creates the least amount of functions for the garbage collector to clean up
+  const [mounted, mount] = useReducer(() => true, false)
+
+  useEffect(mount, [mount])
+
+  return mounted
+}

package/src/hooks/usePrefersDark.hydration.test.tsx

@@ -0,0 +1,56 @@
+/** @jest-environment jsdom */
+/**
+ * As this hook is used for top-level theming it's likely to be called while server-rendering
+ * and that's why it's worth it to have a testing suite for hydration
+ */
+import {waitFor} from '@testing-library/dom'
+import {hydrateRoot} from 'react-dom/client'
+
+import {usePrefersDark} from './usePrefersDark'
+
+function Log() {
+  const dark = usePrefersDark()
+
+  return <>dark: {JSON.stringify(dark)}</>
+}
+
+const originalMatchMedia = window.matchMedia
+
+describe('usePrefersDark SSR hydration', () => {
+  beforeAll(() => {
+    window.matchMedia = () =>
+      ({
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        matches: true,
+      } as any)
+  })
+
+  afterAll(() => {
+    window.matchMedia = originalMatchMedia
+  })
+
+  it(`hydrates without any warnings`, async () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation()
+
+    const node = document.createElement('div')
+
+    document.body.appendChild(node)
+
+    node.innerHTML = `dark: <!-- -->false`
+
+    hydrateRoot(node, <Log />)
+
+    // It's false initially
+    await waitFor(() => expect(node.innerHTML).toBe('dark: <!-- -->false'))
+
+    // After hydration it should switch to true
+    await waitFor(() => expect(node.innerHTML).toBe('dark: <!-- -->true'))
+
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalled()
+
+    spy.mockReset()
+    spy.mockRestore()
+  })
+})