@sanity/ui 1.1.0-beta.2 → 1.1.0

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/portal/portalContext.ts

@@ -11,7 +11,7 @@ export const defaultContextValue: PortalContextValue = {
   version: 0.0,
   boundaryElement: null,
   get element() {
-    if (typeof window === 'undefined') {
+    if (typeof document === 'undefined') {
       return null
     }
 

package/src/utils/portal/portalProvider.tsx

@@ -19,7 +19,7 @@ export interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-const __BROWSER__ = typeof window !== 'undefined'
+const __BROWSER__ = typeof document !== 'undefined'
 
 /**
  * @public