@sanity/ui 2.7.1-canary.1 → 2.8.0

package/src/core/hooks/useClickOutside.ts

@@ -5,11 +5,16 @@ import {EMPTY_ARRAY} from '../constants'
 /**
  * @public
  */
-export type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
+export type ClickOutsideListener = (event: MouseEvent) => void
 
 /**
  * @public
- * @deprecated -- do not use
+ */
+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
 
@@ -17,11 +22,28 @@ export type UseClickOutsideSetElement = (el: HTMLElement | null) => void
  * @public
  */
 export function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg: () => (HTMLElement | HTMLElement[] | null)[],
-  boundaryElement?: HTMLElement | null,
+  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
@@ -50,8 +72,8 @@ export function useClickOutside(
  * ```
  */
 export function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg: (HTMLElement | HTMLElement[] | null)[],
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
   boundaryElement?: HTMLElement | null,
 ): UseClickOutsideSetElement
 
@@ -59,11 +81,9 @@ export function useClickOutside(
  * @public
  */
 export function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg:
-    | (HTMLElement | HTMLElement[] | null)[]
-    | (() => (HTMLElement | HTMLElement[] | null)[]) = EMPTY_ARRAY,
-  boundaryElement?: HTMLElement | null,
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements | (() => ClickOutsideElements) = EMPTY_ARRAY,
+  boundaryElement?: HTMLElement | null | (() => HTMLElement | null),
 ): UseClickOutsideSetElement | void {
   /** @deprecated */
   const [legacyElement, setLegacyElement] = useState<HTMLElement | null>(null)
@@ -72,14 +92,21 @@ export function useClickOutside(
    * 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 onEvent = useEffectEvent((evt: MouseEvent) => {
+    if (!listener) {
+      return
+    }
+
     const target = evt.target
 
     if (!(target instanceof Node)) {
       return
     }
 
-    if (boundaryElement && !boundaryElement.contains(target)) {
+    const resolvedBoundaryElement =
+      typeof boundaryElement === 'function' ? boundaryElement() : boundaryElement
+
+    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) {
       return
     }
 
@@ -104,14 +131,12 @@ export function useClickOutside(
   useEffect(() => {
     if (!hasListener) return undefined
 
-    const handleEvent = (evt: MouseEvent | TouchEvent) => onEvent(evt)
+    const handleEvent = (evt: MouseEvent) => onEvent(evt)
 
     document.addEventListener('mousedown', handleEvent)
-    document.addEventListener('touchstart', handleEvent)
 
     return () => {
       document.removeEventListener('mousedown', handleEvent)
-      document.removeEventListener('touchstart', handleEvent)
     }
   }, [hasListener, onEvent])
 

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>