@sanity/ui 2.6.4-canary.1 → 2.6.4-canary.2

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -1,62 +1,16 @@
-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
-}
+import {useMatchMedia} from './useMatchMedia'
 
 /**
  * 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
+ *
  * @public
  */
-export function usePrefersReducedMotion(): boolean {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
+  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
 }

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -1,7 +1,7 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
 import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
+import {useCallback, useRef, useState} from 'react'
 import {
   WORKSHOP_FLEX_ALIGN_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
@@ -20,8 +20,8 @@ export default function AlignedStory() {
 
   const [open, setOpen] = useState(false)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
-  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+  const buttonElementRef = useRef<HTMLButtonElement | null>(null)
+  const popoverElementRef = useRef<HTMLDivElement | null>(null)
 
   const content = (
     <Text>
@@ -39,9 +39,11 @@ export default function AlignedStory() {
   )
 
   const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
-  const handleClose = useCallback(() => setOpen(false), [])
 
-  useClickOutside(handleClose, [buttonElement, popoverElement])
+  useClickOutside(
+    () => setOpen(false),
+    () => [buttonElementRef.current, popoverElementRef.current],
+  )
 
   return (
     <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
@@ -56,14 +58,14 @@ export default function AlignedStory() {
             padding={3}
             portal={portal}
             placement={placement}
-            ref={setPopoverElement}
+            ref={popoverElementRef}
             width={width}
           >
             <Button
               icon={EllipsisVerticalIcon}
               mode="bleed"
               onClick={handleToggleOpen}
-              ref={setButtonElement}
+              ref={buttonElementRef}
               selected={open}
             />
           </Popover>

package/src/core/primitives/tooltip/__workshop__/customPortal.tsx

@@ -10,7 +10,7 @@ import {
   Tooltip,
 } from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useState} from 'react'
+import {useMemo, useState} from 'react'
 import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 const PORTAL_OPTIONS = {
@@ -30,13 +30,15 @@ export default function CustomPortalStory() {
 
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const __unstable_elements = useMemo(
+    () => ({
+      portal1: portal1Element,
+    }),
+    [portal1Element],
+  )
 
   return (
-    <PortalProvider
-      __unstable_elements={{
-        portal1: portal1Element,
-      }}
-    >
+    <PortalProvider __unstable_elements={__unstable_elements}>
       <Flex align="center" height="fill" justify="center">
         <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
           <Card

package/src/core/primitives/tooltip/tooltip.tsx

@@ -5,6 +5,7 @@ import {
   flip,
   offset,
   shift,
+  size,
   useFloating,
   type Middleware,
   type RootBoundary,
@@ -26,7 +27,6 @@ import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
-import {useMounted} from '../../hooks/useMounted'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import type {Placement} from '../../types'
@@ -86,9 +86,8 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   animate?: boolean
 }
 
-const Root = styled(Layer)<{$maxWidth: number}>`
+const Root = styled(Layer)`
   pointer-events: none;
-  max-width: ${({$maxWidth}) => $maxWidth}px;
 `
 
 /**
@@ -135,25 +134,31 @@ export const Tooltip = forwardRef(function Tooltip(
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
 
-  const mounted = useMounted()
-  // Get the maximum tooltip width (sans tooltip padding)
-  // Tooltip width should never exceed the width of either any supplied boundary or portal element.
-  // If both portal and boundary elements are provided, use the smaller width of the two.
-  const tooltipWidth = useMemo(() => {
-    const availableWidths = [
-      ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
-      portalElement?.offsetWidth || mounted
-        ? document.body.offsetWidth
-        : // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
-          800,
-    ]
-
-    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
-  }, [boundaryElement, mounted, portalElement])
-
   const middleware = useMemo(() => {
     const ret: Middleware[] = []
 
+    // Set the max width of the tooltip based on boundaries and portals
+    ret.push(
+      size({
+        apply({elements}) {
+          // Get the maximum tooltip width (sans tooltip padding)
+          // Tooltip width should never exceed the width of either any supplied boundary or portal element.
+          // If both portal and boundary elements are provided, use the smaller width of the two.
+          const availableWidths = [
+            ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
+            portalElement?.offsetWidth || document.body.offsetWidth,
+          ]
+
+          const tooltipWidth = Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
+
+          // Set the max width directly, efficiently, without another react effect + render loop
+          Object.assign(elements.floating.style, {
+            maxWidth: tooltipWidth > 0 ? `${tooltipWidth}px` : undefined,
+          })
+        },
+      }),
+    )
+
     // Flip the floating element when leaving the boundary box
     ret.push(
       flip({
@@ -188,7 +193,7 @@ export const Tooltip = forwardRef(function Tooltip(
     }
 
     return ret
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements, portalElement])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -381,7 +386,6 @@ export const Tooltip = forwardRef(function Tooltip(
       ref={setFloating}
       style={floatingStyles}
       zOffset={zOffset}
-      $maxWidth={tooltipWidth}
     >
       <TooltipCard
         {...restProps}

package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -36,6 +36,7 @@ export function TooltipDelayGroupProvider(
   const openDelay = typeof delay === 'number' ? delay : delay?.open || 0
   const closeDelay = typeof delay === 'number' ? delay : delay?.close || 0
 
+  // @TODO split out into separate contexts
   const value: TooltipDelayGroupContextValue = useMemo(
     () => ({
       isGroupActive: isGroupActive,

package/src/core/utils/layer/layerProvider.tsx

@@ -91,6 +91,7 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   // Register this layer on mount
   useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
 
+  // @TODO split out into separate contexts
   const value: LayerContextValue = useMemo(
     () => ({
       version: 0.0,

package/src/core/utils/portal/__workshop__/named.tsx

@@ -1,19 +1,21 @@
 import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import {useState} from 'react'
+import {useMemo, useState} from 'react'
 
 export default function NamedStory() {
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
   const [portal2Element, setPortal2Element] = useState<HTMLDivElement | null>(null)
   const [portal3Element, setPortal3Element] = useState<HTMLDivElement | null>(null)
+  const __unstable_elements = useMemo(
+    () => ({
+      portal1: portal1Element,
+      portal2: portal2Element,
+      portal3: portal3Element,
+    }),
+    [portal1Element, portal2Element, portal3Element],
+  )
 
   return (
-    <PortalProvider
-      __unstable_elements={{
-        portal1: portal1Element,
-        portal2: portal2Element,
-        portal3: portal3Element,
-      }}
-    >
+    <PortalProvider __unstable_elements={__unstable_elements}>
       <Container width={1}>
         <Card height="fill" padding={4}>
           <Stack space={2}>

package/src/core/utils/portal/portalProvider.tsx

@@ -1,5 +1,4 @@
 import {useMemo} from 'react'
-import {useUnique} from '../../hooks/_internal'
 import {useMounted} from '../../hooks/useMounted'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
@@ -24,10 +23,10 @@ export interface PortalProviderProps {
  * @public
  */
 export function PortalProvider(props: PortalProviderProps): React.ReactElement {
-  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
-  const elements = useUnique(elementsProp)
+  const {boundaryElement, children, element, __unstable_elements: elements} = props
   const mounted = useMounted()
 
+  // @TODO split out into separate contexts
   const value: PortalContextValue = useMemo(() => {
     return {
       version: 0.0,

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

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

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

@@ -1,34 +0,0 @@
-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])
-}