@sanity/ui 2.7.0 → 2.7.1-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.7.0",
+  "version": "2.7.1-canary.1",
   "keywords": [
     "sanity",
     "ui",
@@ -51,32 +51,6 @@
     "src",
     "theme.js"
   ],
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "prepack": "pnpm build",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -194,19 +168,37 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.5.0",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "pnpm": {
-    "overrides": {
-      "conventional-changelog-conventionalcommits": ">= 8.0.0"
-    }
-  },
   "esm.sh": {
     "bundle": false
+  },
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

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

@@ -217,7 +217,7 @@ const DialogCard = forwardRef(function DialogCard(
 
   useClickOutside(
     useCallback(
-      (event: MouseEvent) => {
+      (event: MouseEvent | TouchEvent) => {
         if (!isTopLayer || !onClickOutside) return
 
         const target = event.target as Node | null

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

@@ -19,7 +19,7 @@ export interface MenuProps extends ResponsivePaddingProps {
    * @deprecated Use `shouldFocus="last"` instead.
    */
   focusLast?: boolean
-  onClickOutside?: (event: MouseEvent) => void
+  onClickOutside?: (event: MouseEvent | TouchEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void

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

@@ -140,7 +140,7 @@ export const MenuButton = forwardRef(function MenuButton(
   }, [])
 
   const handleMenuClickOutside = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent | TouchEvent) => {
       const target = event.target
 
       if (!(target instanceof Node)) {

package/src/core/components/menu/menuContext.ts

@@ -5,7 +5,7 @@ export interface MenuContextValue {
   activeElement: HTMLElement | null
   activeIndex: number
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
-  onClickOutside?: (event: MouseEvent) => void
+  onClickOutside?: (event: MouseEvent | TouchEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void

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

@@ -0,0 +1,70 @@
+/** @jest-environment jsdom */
+
+import {renderHook, act} from '@testing-library/react'
+import {useClickOutside} from './useClickOutside'
+
+describe('useClickOutside', () => {
+  it('should update state immediately if delay is not provided', () => {
+    const {result} = renderHook(() => {
+      const setElement = useClickOutside(false)
+      setElement()
+    })
+    const [, setState] = result.current
+
+    act(() => {
+      setState(true)
+    })
+    expect(result.current[0]).toBe(true)
+  })
+
+  it('should update state after delay if delay is provided', async () => {
+    jest.useFakeTimers()
+    const {result} = renderHook(() => useDelayedState(false))
+    const [, setState] = result.current
+
+    act(() => {
+      setState(true, 1000)
+    })
+    expect(result.current[0]).toBe(false)
+    act(() => {
+      jest.advanceTimersByTime(500)
+    })
+    expect(result.current[0]).toBe(false)
+
+    act(() => {
+      jest.advanceTimersByTime(500)
+    })
+
+    expect(result.current[0]).toBe(true)
+  })
+
+  it('should update state with callback function', () => {
+    const {result} = renderHook(() => useDelayedState(false))
+    const [, setState] = result.current
+
+    act(() => {
+      setState((prev: boolean) => !prev)
+    })
+
+    expect(result.current[0]).toBe(true)
+  })
+
+  it('should cancel update if the set state was called with a new state', () => {
+    const {result} = renderHook(() => useDelayedState(false))
+    const [, setState] = result.current
+
+    act(() => {
+      setState(true, 1000)
+    })
+    expect(result.current[0]).toBe(false)
+
+    jest.advanceTimersByTime(500)
+
+    act(() => {
+      setState(false)
+    })
+    jest.advanceTimersByTime(600)
+    // Even after 1.1 seconds, the state should continue being false, because it was cancelled by a next setState call
+    expect(result.current[0]).toBe(false)
+  })
+})

package/src/core/hooks/useClickOutside.ts

@@ -1,99 +1,124 @@
-import {useEffect, useRef, useState} from 'react'
+import {useEffect, useState} from 'react'
+import {useEffectEvent} from 'use-effect-event'
 import {EMPTY_ARRAY} from '../constants'
 
 /**
  * @public
  */
-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)
-    }
-  }
+export type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
 
-  return ret.filter(Boolean) as HTMLElement[]
-}
+/**
+ * @public
+ * @deprecated -- do not use
+ */
+export type UseClickOutsideSetElement = (el: HTMLElement | null) => void
 
 /**
  * @public
  */
 export function useClickOutside(
   listener: ClickOutsideListener,
-  elementsArg: Array<HTMLElement | HTMLElement[] | null> = EMPTY_ARRAY,
+  elementsArg: () => (HTMLElement | HTMLElement[] | null)[],
   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)
+): void
 
-    if (prevElements.length !== nextElements.length) {
-      setElements(nextElements)
-      elementsRef.current = nextElements
+/**
+ * @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,
+  elementsArg: (HTMLElement | HTMLElement[] | null)[],
+  boundaryElement?: HTMLElement | null,
+): UseClickOutsideSetElement
 
+/**
+ * @public
+ */
+export function useClickOutside(
+  listener: ClickOutsideListener,
+  elementsArg:
+    | (HTMLElement | HTMLElement[] | null)[]
+    | (() => (HTMLElement | HTMLElement[] | null)[]) = EMPTY_ARRAY,
+  boundaryElement?: 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 | TouchEvent) => {
+    const target = evt.target
+
+    if (!(target instanceof Node)) {
       return
     }
 
-    for (const el of prevElements) {
-      if (!nextElements.includes(el)) {
-        setElements(nextElements)
-        elementsRef.current = nextElements
-
-        return
-      }
+    if (boundaryElement && !boundaryElement.contains(target)) {
+      return
     }
 
-    for (const el of nextElements) {
-      if (!prevElements.includes(el)) {
-        setElements(nextElements)
-        elementsRef.current = nextElements
+    const resolvedElements = Array.isArray(elementsArg)
+      ? [legacyElement, ...elementsArg]
+      : elementsArg()
+    const elements = resolvedElements.flat()
+
+    for (const el of elements) {
+      if (!el) continue
 
+      if (target === el || el.contains(target)) {
         return
       }
     }
-  }, [element, elementsArg])
-
-  useEffect(() => {
-    if (!listener) return undefined
 
-    const handleWindowMouseDown = (evt: MouseEvent) => {
-      const target = evt.target
+    listener(evt)
+  })
 
-      if (!(target instanceof Node)) {
-        return
-      }
-
-      if (boundaryElement && !boundaryElement.contains(target)) {
-        return
-      }
+  const hasListener = Boolean(listener)
 
-      for (const el of elements) {
-        if (target === el || el.contains(target)) {
-          return
-        }
-      }
+  useEffect(() => {
+    if (!hasListener) return undefined
 
-      listener(evt)
-    }
+    const handleEvent = (evt: MouseEvent | TouchEvent) => onEvent(evt)
 
-    window.addEventListener('mousedown', handleWindowMouseDown)
+    document.addEventListener('mousedown', handleEvent)
+    document.addEventListener('touchstart', handleEvent)
 
     return () => {
-      window.removeEventListener('mousedown', handleWindowMouseDown)
+      document.removeEventListener('mousedown', handleEvent)
+      document.removeEventListener('touchstart', 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
+  }
 }