@sanity/ui 2.8.0 → 2.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "keywords": [
     "sanity",
     "ui",
@@ -161,7 +161,7 @@
     "eslint-plugin-boundaries": "^4.2.2",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-a97cca1-20240529",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -183,7 +183,7 @@
     "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.4",
     "storybook": "^8.2.4",
-    "styled-components": "^6.1.11",
+    "styled-components": "^6.1.12",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.5.3",
     "vite": "^5.3.4",

package/src/core/components/dialog/dialog.tsx

@@ -216,18 +216,21 @@ const DialogCard = forwardRef(function DialogCard(
   )
 
   useClickOutside(
-    (event: MouseEvent) => {
-      if (!isTopLayer || !onClickOutside) return
+    useCallback(
+      (event) => {
+        if (!isTopLayer || !onClickOutside) return
 
-      const target = event.target as Node | null
+        const target = event.target as Node | null
 
-      if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
-        // Ignore clicks outside of the scope
-        return
-      }
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore clicks outside of the scope
+          return
+        }
 
-      onClickOutside()
-    },
+        onClickOutside()
+      },
+      [boundaryElement, isTopLayer, onClickOutside, portalElement],
+    ),
     [rootElement],
   )
 

package/src/core/components/menu/menu.tsx

@@ -93,7 +93,13 @@ export const Menu = forwardRef(function Menu(
   }, [activeIndex, onItemSelect])
 
   // Close menu when clicking outside
-  useClickOutside((event) => isTopLayer && onClickOutside && onClickOutside(event), [rootElement])
+  useClickOutside(
+    useCallback(
+      (event) => isTopLayer && onClickOutside && onClickOutside(event),
+      [isTopLayer, onClickOutside],
+    ),
+    [rootElement],
+  )
 
   // Close menu when pressing Escape
   useGlobalKeyDown(

package/src/core/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './useArrayProp'
 export * from './useClickOutside'
+export * from './useClickOutsideEvent'
 export * from './useCustomValidity'
 export * from './useElementRect'
 export * from './useElementSize'

package/src/core/hooks/useClickOutside.test.tsx

@@ -8,115 +8,6 @@ import {useEffect, useRef, useState} from 'react'
 import {useClickOutside} from './useClickOutside'
 
 describe('useClickOutside', () => {
-  describe('current API', () => {
-    /**
-     * This suite demonstrates the new API for `useClickOutside` that were introduced in v2.8.0
-     */
-
-    it('calls the handler when clicking outside of the array of elements', async () => {
-      const user = userEvent.setup()
-      const handler = jest.fn()
-
-      const TestComponent = () => {
-        const buttonRef = useRef<HTMLButtonElement | null>(null)
-        const popoverRef = useRef<HTMLDivElement | null>(null)
-
-        useClickOutside(handler, () => [buttonRef.current, popoverRef.current])
-
-        return (
-          <>
-            <button data-testid="button" ref={buttonRef} />
-            <div data-testid="popover" ref={popoverRef} />
-            <div data-testid="outside" />
-          </>
-        )
-      }
-
-      render(<TestComponent />)
-
-      await user.click(screen.getByTestId('button'))
-      await user.click(screen.getByTestId('popover'))
-      expect(handler).not.toHaveBeenCalled()
-
-      await user.click(screen.getByTestId('outside'))
-      expect(handler).toHaveBeenCalledTimes(1)
-    })
-
-    it('the elements array flattens nested arrays one level deep', async () => {
-      const user = userEvent.setup()
-      const handler = jest.fn()
-
-      const TestComponent = () => {
-        const buttonRef = useRef<HTMLButtonElement | null>(null)
-        const popoverRef = useRef<HTMLDivElement | null>(null)
-
-        useClickOutside(handler, () => [
-          null,
-          [null, buttonRef.current],
-          [popoverRef.current, null],
-          null,
-        ])
-
-        return (
-          <>
-            <button data-testid="button" ref={buttonRef} />
-            <div data-testid="popover" ref={popoverRef} />
-            <div data-testid="outside" />
-          </>
-        )
-      }
-
-      render(<TestComponent />)
-
-      await user.click(screen.getByTestId('button'))
-      await user.click(screen.getByTestId('popover'))
-      expect(handler).not.toHaveBeenCalled()
-
-      await user.click(screen.getByTestId('outside'))
-      expect(handler).toHaveBeenCalledTimes(1)
-    })
-
-    it('it can set a boundary to scope outside click events', async () => {
-      const user = userEvent.setup()
-      const handler = jest.fn()
-
-      const TestComponent = () => {
-        const buttonRef = useRef<HTMLButtonElement | null>(null)
-        const popoverRef = useRef<HTMLDivElement | null>(null)
-        const boundaryRef = useRef<HTMLDivElement | null>(null)
-
-        useClickOutside(
-          handler,
-          () => [buttonRef.current, popoverRef.current],
-          () => boundaryRef.current,
-        )
-
-        return (
-          <>
-            <div ref={boundaryRef}>
-              <button data-testid="button" ref={buttonRef} />
-              <div data-testid="popover" ref={popoverRef} />
-              <div data-testid="inside" />
-            </div>
-            <div data-testid="outside" />
-          </>
-        )
-      }
-
-      render(<TestComponent />)
-
-      await user.click(screen.getByTestId('button'))
-      await user.click(screen.getByTestId('popover'))
-      // Since it's outside the boundary it should be ignored
-      await user.click(screen.getByTestId('outside'))
-      expect(handler).not.toHaveBeenCalled()
-
-      await user.click(screen.getByTestId('inside'))
-      expect(handler).toHaveBeenCalledTimes(1)
-    })
-  })
-})
-describe('legacy API', () => {
   /**
    * Specifying the elements array directly:
    * useClickOutside(handler, [buttonElement, popoverElement])

package/src/core/hooks/useClickOutside.ts

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

package/src/core/hooks/useClickOutsideEvent.test.tsx

@@ -0,0 +1,116 @@
+/** @jest-environment jsdom */
+/* eslint-disable padding-line-between-statements, react/display-name */
+
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {useRef} from 'react'
+
+import {useClickOutsideEvent} from './useClickOutsideEvent'
+
+describe('useClickOutsideEvent', () => {
+  /**
+   * This suite demonstrates the new hook `useClickOutsideEvent` that replaces `useClickOutside`
+   */
+
+  it('calls the handler when clicking outside of the array of elements', async () => {
+    const user = userEvent.setup()
+    const handler = jest.fn()
+
+    const TestComponent = () => {
+      const buttonRef = useRef<HTMLButtonElement | null>(null)
+      const popoverRef = useRef<HTMLDivElement | null>(null)
+
+      useClickOutsideEvent(handler, () => [buttonRef.current, popoverRef.current])
+
+      return (
+        <>
+          <button data-testid="button" ref={buttonRef} />
+          <div data-testid="popover" ref={popoverRef} />
+          <div data-testid="outside" />
+        </>
+      )
+    }
+
+    render(<TestComponent />)
+
+    await user.click(screen.getByTestId('button'))
+    await user.click(screen.getByTestId('popover'))
+    expect(handler).not.toHaveBeenCalled()
+
+    await user.click(screen.getByTestId('outside'))
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it('the elements array flattens nested arrays one level deep', async () => {
+    const user = userEvent.setup()
+    const handler = jest.fn()
+
+    const TestComponent = () => {
+      const buttonRef = useRef<HTMLButtonElement | null>(null)
+      const popoverRef = useRef<HTMLDivElement | null>(null)
+
+      useClickOutsideEvent(handler, () => [
+        null,
+        [null, buttonRef.current],
+        [popoverRef.current, null],
+        null,
+      ])
+
+      return (
+        <>
+          <button data-testid="button" ref={buttonRef} />
+          <div data-testid="popover" ref={popoverRef} />
+          <div data-testid="outside" />
+        </>
+      )
+    }
+
+    render(<TestComponent />)
+
+    await user.click(screen.getByTestId('button'))
+    await user.click(screen.getByTestId('popover'))
+    expect(handler).not.toHaveBeenCalled()
+
+    await user.click(screen.getByTestId('outside'))
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it('it can set a boundary to scope outside click events', async () => {
+    const user = userEvent.setup()
+    const handler = jest.fn()
+
+    const TestComponent = () => {
+      const buttonRef = useRef<HTMLButtonElement | null>(null)
+      const popoverRef = useRef<HTMLDivElement | null>(null)
+      const boundaryRef = useRef<HTMLDivElement | null>(null)
+
+      useClickOutsideEvent(
+        handler,
+        () => [buttonRef.current, popoverRef.current],
+        () => boundaryRef.current,
+      )
+
+      return (
+        <>
+          <div ref={boundaryRef}>
+            <button data-testid="button" ref={buttonRef} />
+            <div data-testid="popover" ref={popoverRef} />
+            <div data-testid="inside" />
+          </div>
+          <div data-testid="outside" />
+        </>
+      )
+    }
+
+    render(<TestComponent />)
+
+    await user.click(screen.getByTestId('button'))
+    await user.click(screen.getByTestId('popover'))
+    // Since it's outside the boundary it should be ignored
+    await user.click(screen.getByTestId('outside'))
+    expect(handler).not.toHaveBeenCalled()
+
+    await user.click(screen.getByTestId('inside'))
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+})

package/src/core/hooks/useClickOutsideEvent.ts

@@ -0,0 +1,72 @@
+import {useEffect} from 'react'
+import {useEffectEvent} from 'use-effect-event'
+import {EMPTY_ARRAY} from '../constants'
+
+/**
+ * @public
+ */
+export type ClickOutsideEventListener = (event: MouseEvent) => void
+
+/**
+ * @public
+ */
+export type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
+/**
+ * @public
+ */
+export function useClickOutsideEvent(
+  listener: ClickOutsideEventListener | false | undefined,
+  elementsArg: () => ClickOutsideEventElements = () => EMPTY_ARRAY,
+  boundaryElement?: () => HTMLElement | null,
+): void {
+  /**
+   * 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
+    }
+
+    const target = evt.target
+
+    if (!(target instanceof Node)) {
+      return
+    }
+
+    const resolvedBoundaryElement =
+      typeof boundaryElement === 'function' ? boundaryElement() : boundaryElement
+
+    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) {
+      return
+    }
+
+    const resolvedElements = Array.isArray(elementsArg) ? elementsArg : elementsArg()
+    const elements = resolvedElements.flat()
+
+    for (const el of elements) {
+      if (!el) continue
+
+      if (target === el || el.contains(target)) {
+        return
+      }
+    }
+
+    listener(evt)
+  })
+
+  const hasListener = Boolean(listener)
+
+  useEffect(() => {
+    if (!hasListener) return undefined
+
+    const handleEvent = (evt: MouseEvent) => onEvent(evt)
+
+    document.addEventListener('mousedown', handleEvent)
+
+    return () => {
+      document.removeEventListener('mousedown', handleEvent)
+    }
+  }, [hasListener, onEvent])
+}

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

@@ -1,5 +1,5 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
+import {Button, Card, Flex, Popover, Text, useClickOutsideEvent} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 import {
@@ -40,7 +40,7 @@ export default function AlignedStory() {
 
   const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
 
-  useClickOutside(
+  useClickOutsideEvent(
     () => setOpen(false),
     () => [buttonElementRef.current, popoverElementRef.current],
   )