@sanity/ui 2.7.1-canary.0 → 2.7.1-canary.2

package/src/core/hooks/useClickOutside.ts

@@ -1,4 +1,5 @@
-import {useEffect, useRef, useState} from 'react'
+import {useEffect, useState} from 'react'
+import {useEffectEvent} from 'use-effect-event'
 import {EMPTY_ARRAY} from '../constants'
 
 /**
@@ -6,94 +7,142 @@ import {EMPTY_ARRAY} from '../constants'
  */
 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)
-    }
-  }
+/**
+ * @public
+ */
+export type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
-  return ret.filter(Boolean) as HTMLElement[]
-}
+/**
+ * @public
+ * @deprecated - use your own `const [element, setElement] = useState(null)` logic instead
+ */
+export type UseClickOutsideSetElement = (el: HTMLElement | null) => void
 
 /**
  * @public
  */
 export function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg: Array<HTMLElement | HTMLElement[] | null> = EMPTY_ARRAY,
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: () => ClickOutsideElements,
+  boundaryElement?: () => HTMLElement | null,
+): void
+/**
+ * @public
+ * @deprecated - change `useClickOutside(handler, () => [...], boundary)` to `useClickOutside(handler, () => [...], () => boundary)`
+ */
+export function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: () => ClickOutsideElements,
+  boundaryElement: HTMLElement | null,
+): void
+/**
+ * @public
+ * @deprecated - change `useClickOutside(handler, [...], () => boundary)` to `useClickOutside(handler, () => [...], () => boundary)`
+ */
+export function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
+  boundaryElement: () => HTMLElement | null,
+): UseClickOutsideSetElement
+/**
+ * @public
+ * @deprecated
+ * Instead of:
+ * ```tsx
+ * const buttonRef = useRef(null)
+ * const setElement = useClickOutside(() => {}, [buttonRef.current])
+ * return (
+ *   <>
+ *     <button ref={buttonRef} />
+ *     {open && <div ref={setElement} />}
+ *   </>
+ * )
+ * ```
+ * Use:
+ * ```tsx
+ * const buttonRef = useRef()
+ * const [element, setElement] = useState(null)
+ * useClickOutside(() => {}, () => [buttonRef.current, element])
+ * return (
+ *   <>
+ *     <button ref={buttonRef} />
+ *     {open && <div ref={setElement} />}
+ *   </>
+ * )
+ * ```
+ */
+export function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
   boundaryElement?: HTMLElement | null,
-): (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
+): UseClickOutsideSetElement
 
+/**
+ * @public
+ */
+export function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements | (() => ClickOutsideElements) = EMPTY_ARRAY,
+  boundaryElement?: HTMLElement | null | (() => HTMLElement | null),
+): UseClickOutsideSetElement | void {
+  /** @deprecated */
+  const [legacyElement, setLegacyElement] = useState<HTMLElement | null>(null)
+
+  /**
+   * 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 onEvent = useEffectEvent((evt: MouseEvent) => {
+    if (!listener) {
       return
     }
 
-    for (const el of prevElements) {
-      if (!nextElements.includes(el)) {
-        setElements(nextElements)
-        elementsRef.current = nextElements
+    const target = evt.target
 
-        return
-      }
+    if (!(target instanceof Node)) {
+      return
     }
 
-    for (const el of nextElements) {
-      if (!prevElements.includes(el)) {
-        setElements(nextElements)
-        elementsRef.current = nextElements
-
-        return
-      }
+    const resolvedBoundaryElement =
+      typeof boundaryElement === 'function' ? boundaryElement() : boundaryElement
+    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) {
+      return
     }
-  }, [element, elementsArg])
 
-  useEffect(() => {
-    if (!listener) return undefined
+    const resolvedElements = Array.isArray(elementsArg)
+      ? [legacyElement, ...elementsArg]
+      : elementsArg()
+    const elements = resolvedElements.flat()
 
-    const handleWindowMouseDown = (evt: MouseEvent) => {
-      const target = evt.target
+    for (const el of elements) {
+      if (!el) continue
 
-      if (!(target instanceof Node)) {
+      if (target === el || el.contains(target)) {
         return
       }
+    }
 
-      if (boundaryElement && !boundaryElement.contains(target)) {
-        return
-      }
+    listener(evt)
+  })
 
-      for (const el of elements) {
-        if (target === el || el.contains(target)) {
-          return
-        }
-      }
+  const hasListener = Boolean(listener)
 
-      listener(evt)
-    }
+  useEffect(() => {
+    if (!hasListener) return undefined
 
-    window.addEventListener('mousedown', handleWindowMouseDown)
+    const handleEvent = (evt: MouseEvent) => onEvent(evt)
+
+    document.addEventListener('mousedown', handleEvent)
 
     return () => {
-      window.removeEventListener('mousedown', handleWindowMouseDown)
+      document.removeEventListener('mousedown', handleEvent)
     }
-  }, [boundaryElement, listener, elements])
+  }, [hasListener, onEvent])
 
-  return setElement
+  /**
+   * Only return the legacy setElement function if the elementsArg is an array
+   */
+  if (Array.isArray(elementsArg)) {
+    return setLegacyElement as UseClickOutsideSetElement
+  }
 }

package/src/core/hooks/useMatchMedia.ts

@@ -18,8 +18,8 @@ export function useMatchMedia(
      */
     let MEDIA_QUERY_CACHE: MediaQueryList | undefined
 
-    function getMatchMedia(): MediaQueryList {
-      if (MEDIA_QUERY_CACHE === undefined) {
+    const 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(mediaQueryString)
@@ -36,13 +36,7 @@ export function useMatchMedia(
 
         return () => matchMedia.removeEventListener('change', onStoreChange)
       },
-      getSnapshot: () => {
-        try {
-          return getMatchMedia().matches
-        } catch (err) {
-          throw new Error(`Failed to match media query: ${mediaQueryString}`, {cause: err})
-        }
-      },
+      getSnapshot: () => getMatchMedia().matches,
     }
   }, [mediaQueryString])
 

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>