@sanity/ui 1.1.0-beta.2 → 1.2.0

package/src/hooks/usePrefersDark.test.tsx

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

package/src/hooks/usePrefersDark.ts

@@ -1,28 +1,61 @@
-import {useEffect, useMemo, useState} from 'react'
+import {useSyncExternalStore} from 'react'
+
+let MEDIA_QUERY_CACHE: MediaQueryList | undefined
 
 /**
- * @public
+ * Lazy init the matchMedia instance
  */
-export function usePrefersDark(): boolean {
-  const mq = useMemo(() => {
-    if (typeof window === 'undefined') return undefined
-
-    return window.matchMedia('(prefers-color-scheme: dark)')
-  }, [])
-
-  const [dark, setDark] = useState(mq?.matches || false)
+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
+}
 
-  useEffect(() => {
-    if (!mq) return undefined
+/**
+ * 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()
 
-    setDark(mq.matches)
+  matchMedia.addEventListener('change', onStoreChange)
 
-    const handleChange = () => setDark(mq.matches)
+  return () => matchMedia.removeEventListener('change', onStoreChange)
+}
 
-    mq.addEventListener('change', handleChange)
+/**
+ * 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
+}
 
-    return () => mq.removeEventListener('change', handleChange)
-  }, [mq])
+/**
+ * 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
+}
 
-  return dark
+/**
+ * @public
+ */
+export function usePrefersDark(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }

package/src/hooks/usePrefersReducedMotion.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 {usePrefersReducedMotion} from './usePrefersReducedMotion'
+
+function Log() {
+  const reduceMotion = usePrefersReducedMotion()
+
+  return <>prefers-motion: {JSON.stringify(reduceMotion)}</>
+}
+
+const originalMatchMedia = window.matchMedia
+
+describe('usePrefersReducedMotion 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 = `prefers-motion: <!-- -->false`
+
+    hydrateRoot(node, <Log />)
+
+    // It's false initially
+    await waitFor(() => expect(node.innerHTML).toBe('prefers-motion: <!-- -->false'))
+
+    // After hydration it should switch to true
+    await waitFor(() => expect(node.innerHTML).toBe('prefers-motion: <!-- -->true'))
+
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalled()
+
+    spy.mockReset()
+    spy.mockRestore()
+  })
+})

package/src/hooks/usePrefersReducedMotion.test.tsx

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

package/src/hooks/usePrefersReducedMotion.ts

@@ -0,0 +1,62 @@
+import {useSyncExternalStore} from 'react'
+
+let MEDIA_QUERY_CACHE: MediaQueryList | undefined
+
+/**
+ * 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(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/observers/resizeObserver.ts

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

package/src/primitives/code/styles.ts

@@ -63,6 +63,12 @@ export function codeBaseStyle(): FlattenInterpolation<StyledThemeProps<Theme>> {
       border-radius: 1px;
     }
 
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
     & [data-sanity-icon] {
       vertical-align: baseline;
     }

package/src/primitives/heading/styles.ts

@@ -44,6 +44,12 @@ export function headingBaseStyle(
       }
     }
 
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
     & [data-sanity-icon] {
       vertical-align: baseline;
     }

package/src/primitives/label/styles.ts

@@ -30,6 +30,12 @@ export function labelBaseStyle(
       border-radius: 1px;
     }
 
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
     & [data-sanity-icon] {
       vertical-align: baseline;
     }

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

@@ -0,0 +1,11 @@
+import {Button, Card, Popover, Text} from '@sanity/ui'
+
+export default function OpenOnMountStory() {
+  return (
+    <Card height="fill" padding={3} sizing="border">
+      <Popover content={<Text>popover content</Text>} open padding={3}>
+        <Button text="This button is the popover reference" />
+      </Popover>
+    </Card>
+  )
+}

package/src/primitives/popover/__workshop__/index.ts

@@ -35,5 +35,10 @@ export default defineScope({
       title: 'Aligned',
       component: lazy(() => import('./AlignedStory')),
     },
+    {
+      name: 'openOnMountStory',
+      title: 'Open on mount',
+      component: lazy(() => import('./OpenOnMountStory')),
+    },
   ],
 })

package/src/primitives/text/styles.ts

@@ -52,6 +52,12 @@ export function textBaseStyle(
       font-weight: ${weights.bold};
     }
 
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
     & [data-sanity-icon] {
       vertical-align: baseline;
     }

package/src/utils/layer/__workshop__/_debug.tsx

@@ -1,11 +1,17 @@
 import {Code, useLayer} from '@sanity/ui'
 
-export function LayerDebugInfo() {
+export function LayerDebugInfo(props: {id?: string}) {
+  const {id} = props
   const layer = useLayer()
 
   return (
-    <Code>
-      zIndex={layer.zIndex}, size={layer.size}
+    <Code id={id}>
+      {[
+        //
+        `isTopLayer=${layer.isTopLayer}`,
+        `size=${layer.size}`,
+        `zIndex=${layer.zIndex}`,
+      ].join('\n')}
     </Code>
   )
 }

package/src/utils/layer/__workshop__/index.ts

@@ -6,9 +6,9 @@ export default defineScope({
   title: 'Layer',
   stories: [
     {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./plain')),
+      name: 'nested',
+      title: 'Nested',
+      component: lazy(() => import('./nested')),
     },
     {
       name: 'multiple-roots',

package/src/utils/layer/__workshop__/multipleRoots.tsx

@@ -23,8 +23,9 @@ export default function MultipleRootsStory() {
           </Stack>
         </Card>
       </LayerProvider>
+
       <LayerProvider zOffset={200}>
-        <Card as={Layer as any} padding={3} shadow={5} style={{top: -50, left: 30}}>
+        <Card as={Layer} padding={3} shadow={5} style={{top: -50, left: 30}}>
           <Stack space={3}>
             <LayerDebugInfo />
             <Layer>

package/src/utils/layer/__workshop__/{plain.tsx → nested.tsx}

@@ -4,13 +4,23 @@ import {useCallback, useState} from 'react'
 import {LayerDebugInfo} from './_debug'
 
 export default function PlainStory() {
+  return (
+    <Box padding={3}>
+      <Root />
+      <Root />
+      <Root />
+    </Box>
+  )
+}
+
+function Root() {
   const [open, setOpen] = useState(false)
   const handleOpen = useCallback(() => setOpen(true), [])
   const handleClose = useCallback(() => setOpen(false), [])
 
   return (
     <LayerProvider>
-      <Card radius={2}>
+      <Card radius={2} shadow={1}>
         <Box padding={3}>
           <Text>
             <strong>Root layer</strong>
@@ -18,8 +28,8 @@ export default function PlainStory() {
         </Box>
         <Box padding={3}>
           <Stack space={3}>
-            <LayerDebugInfo />
-            <Button mode="ghost" onClick={handleOpen} text="Open layer 1" />
+            <LayerDebugInfo id="layer-debug-info-1" />
+            <Button id="open-layer-1" mode="ghost" onClick={handleOpen} text="Open layer 1" />
             {open && (
               <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                 <Layer1 onClose={handleClose} />
@@ -52,7 +62,7 @@ function Layer1({onClose}: {onClose: () => void}) {
       <Box padding={3}>
         <Stack space={3}>
           <LayerDebugInfo />
-          <Button mode="ghost" onClick={handleOpen} text="Open layer 2" />
+          <Button id="open-layer-2" mode="ghost" onClick={handleOpen} text="Open layer 2" />
           {open && (
             <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
               <Layer2 onClose={handleClose} />

package/src/utils/layer/getLayerContext.test.ts

@@ -0,0 +1,30 @@
+import {getLayerContext} from './getLayerContext'
+import {LayerContextValue} from './types'
+
+describe('getLayerContext', () => {
+  describe('0.0', () => {
+    it('should convert 0.0 to 0.0', () => {
+      const contextValue: LayerContextValue = {
+        version: 0.0,
+        isTopLayer: true,
+        level: 0,
+        registerChild: () => () => {
+          //
+        },
+        size: 0,
+        zIndex: 0,
+      }
+
+      const result = getLayerContext(contextValue)
+
+      expect(result).toEqual({
+        version: 0.0,
+        isTopLayer: true,
+        level: 0,
+        registerChild: expect.any(Function),
+        size: 0,
+        zIndex: 0,
+      })
+    })
+  })
+})

package/src/utils/layer/getLayerContext.ts

@@ -0,0 +1,21 @@
+import {isRecord} from '../../lib/isRecord'
+import {LayerContextValue} from './types'
+
+export function getLayerContext(contextValue: LayerContextValue): LayerContextValue {
+  // 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
+  if (!isRecord(contextValue) || contextValue.version !== 0.0) {
+    throw new Error('the context value is not compatible')
+  }
+
+  if (!contextValue) {
+    throw new Error('components using `useLayer()` should be wrapped in a <LayerProvider>.')
+  }
+
+  if (contextValue.version === 0.0) {
+    return contextValue
+  }
+
+  throw new Error('could not get layer context')
+}

package/src/utils/layer/layer.test.tsx

@@ -22,6 +22,7 @@ describe('utils/layer', () => {
         const value: LayerContextValue = {
           version: 0.0,
           isTopLayer: true,
+          level: 0,
           registerChild: () => () => undefined,
           size: 0,
           zIndex: 0,

package/src/utils/layer/layer.tsx

@@ -1,6 +1,8 @@
-import {forwardRef} from 'react'
+import {FocusEvent, forwardRef, useCallback, useEffect, useRef} from 'react'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
+import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
+import {useForwardedRef} from '../../hooks'
 import {LayerProvider} from './layerProvider'
 import {useLayer} from './useLayer'
 
@@ -9,26 +11,66 @@ import {useLayer} from './useLayer'
  */
 export interface LayerProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
+  onActivate?: (props: {activeElement: HTMLElement | null}) => void
   zOffset?: number | number[]
 }
 
 interface LayerChildrenProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  onActivate?: LayerProps['onActivate']
 }
 
-const Root = styled.div`
-  position: relative;
-`
+const Root = styled.div({position: 'relative'})
 
 const LayerChildren = forwardRef(function LayerChildren(
   props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
   ref: React.Ref<HTMLDivElement>
 ) {
-  const {children, style = EMPTY_RECORD, ...restProps} = props
-  const {zIndex} = useLayer()
+  const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
+  const {zIndex, isTopLayer} = useLayer()
+  const lastFocusedRef = useRef<HTMLElement | null>(null)
+  const forwardedRef = useForwardedRef(ref)
+  const isTopLayerRef = useRef<boolean>(isTopLayer)
+
+  // When the layer very first mounts, it will be the top layer, but we don't want to fire
+  // the callback in that case. We use a ref to track the previous value of isTopLayer to
+  // determine if the layer has become the top layer since the last render.
+  useEffect(() => {
+    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer
+
+    if (becameTopLayer) {
+      onActivate?.({activeElement: lastFocusedRef.current})
+    }
+
+    isTopLayerRef.current = isTopLayer
+  }, [isTopLayer, onActivate])
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement, Element>) => {
+      // Call the user-provided onFocus handler if any
+      onFocus?.(event)
+
+      const rootElement = forwardedRef.current
+      const target = document.activeElement
+
+      if (!isTopLayer || !rootElement || !target) return
+
+      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {
+        lastFocusedRef.current = target
+      }
+    },
+    [forwardedRef, isTopLayer, onFocus]
+  )
 
   return (
-    <Root {...restProps} data-ui="Layer" ref={ref} style={{...style, zIndex}}>
+    <Root
+      {...restProps}
+      data-ui="Layer"
+      onFocus={handleFocus}
+      ref={forwardedRef}
+      style={{...style, zIndex}}
+    >
       {children}
     </Root>
   )

package/src/utils/layer/layerContext.ts

@@ -1,4 +1,4 @@
-import {createContext} from 'react'
+import {Context, createContext} from 'react'
 import {globalScope} from '../../lib/globalScope'
 import {LayerContextValue} from './types'
 
@@ -6,4 +6,4 @@ const key = Symbol.for('@sanity/ui/context/layer')
 
 globalScope[key] = globalScope[key] || createContext<LayerContextValue | null>(null)
 
-export const LayerContext: React.Context<LayerContextValue | null> = globalScope[key]
+export const LayerContext: Context<LayerContextValue | null> = globalScope[key]