@sanity/ui 2.7.1-canary.1 → 2.8.0

package/dist/index.d.mts

@@ -628,7 +628,12 @@ export declare interface CheckboxProps {
 /**
  * @public
  */
-export declare type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
+export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
+/**
+ * @public
+ */
+export declare type ClickOutsideListener = (event: MouseEvent) => void
 
 /**
  * @public
@@ -1432,7 +1437,7 @@ export declare interface MenuProps extends ResponsivePaddingProps {
    * @deprecated Use `shouldFocus="last"` instead.
    */
   focusLast?: boolean
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -2652,11 +2657,31 @@ export declare function useBoundaryElement(): BoundaryElementContextValue
  * @public
  */
 export declare 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 declare function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: () => ClickOutsideElements,
+  boundaryElement: HTMLElement | null,
+): void
+
+/**
+ * @public
+ * @deprecated - change `useClickOutside(handler, [...], () => boundary)` to `useClickOutside(handler, () => [...], () => boundary)`
+ */
+export declare function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
+  boundaryElement: () => HTMLElement | null,
+): UseClickOutsideSetElement
+
 /**
  * @public
  * @deprecated
@@ -2685,14 +2710,14 @@ export declare function useClickOutside(
  * ```
  */
 export declare function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg: (HTMLElement | HTMLElement[] | null)[],
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
   boundaryElement?: HTMLElement | null,
 ): UseClickOutsideSetElement
 
 /**
  * @public
- * @deprecated -- do not use
+ * @deprecated - use your own `const [element, setElement] = useState(null)` logic instead
  */
 export declare type UseClickOutsideSetElement = (el: HTMLElement | null) => void
 

package/dist/index.d.ts

@@ -628,7 +628,12 @@ export declare interface CheckboxProps {
 /**
  * @public
  */
-export declare type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
+export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
+/**
+ * @public
+ */
+export declare type ClickOutsideListener = (event: MouseEvent) => void
 
 /**
  * @public
@@ -1432,7 +1437,7 @@ export declare interface MenuProps extends ResponsivePaddingProps {
    * @deprecated Use `shouldFocus="last"` instead.
    */
   focusLast?: boolean
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -2652,11 +2657,31 @@ export declare function useBoundaryElement(): BoundaryElementContextValue
  * @public
  */
 export declare 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 declare function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: () => ClickOutsideElements,
+  boundaryElement: HTMLElement | null,
+): void
+
+/**
+ * @public
+ * @deprecated - change `useClickOutside(handler, [...], () => boundary)` to `useClickOutside(handler, () => [...], () => boundary)`
+ */
+export declare function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
+  boundaryElement: () => HTMLElement | null,
+): UseClickOutsideSetElement
+
 /**
  * @public
  * @deprecated
@@ -2685,14 +2710,14 @@ export declare function useClickOutside(
  * ```
  */
 export declare function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg: (HTMLElement | HTMLElement[] | null)[],
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
   boundaryElement?: HTMLElement | null,
 ): UseClickOutsideSetElement
 
 /**
  * @public
- * @deprecated -- do not use
+ * @deprecated - use your own `const [element, setElement] = useState(null)` logic instead
  */
 export declare type UseClickOutsideSetElement = (el: HTMLElement | null) => void
 

package/dist/index.esm.js

@@ -133,8 +133,13 @@ function useArrayProp(val, defaultVal) {
 }
 function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
   const [legacyElement, setLegacyElement] = useState(null), onEvent = useEffectEvent((evt) => {
+    if (!listener)
+      return;
     const target = evt.target;
-    if (!(target instanceof Node) || boundaryElement && !boundaryElement.contains(target))
+    if (!(target instanceof Node))
+      return;
+    const resolvedBoundaryElement = typeof boundaryElement == "function" ? boundaryElement() : boundaryElement;
+    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
       return;
     const elements = (Array.isArray(elementsArg) ? [legacyElement, ...elementsArg] : elementsArg()).flat();
     for (const el of elements)
@@ -145,8 +150,8 @@ function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
   if (useEffect(() => {
     if (!hasListener) return;
     const handleEvent = (evt) => onEvent(evt);
-    return document.addEventListener("mousedown", handleEvent), document.addEventListener("touchstart", handleEvent), () => {
-      document.removeEventListener("mousedown", handleEvent), document.removeEventListener("touchstart", handleEvent);
+    return document.addEventListener("mousedown", handleEvent), () => {
+      document.removeEventListener("mousedown", handleEvent);
     };
   }, [hasListener, onEvent]), Array.isArray(elementsArg))
     return setLegacyElement;
@@ -5104,14 +5109,11 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
       [boundaryElement, isTopLayer, onClose, portalElement]
     )
   ), useClickOutside(
-    useCallback(
-      (event) => {
-        if (!isTopLayer || !onClickOutside) return;
-        const target = event.target;
-        target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
-      },
-      [boundaryElement, isTopLayer, onClickOutside, portalElement]
-    ),
+    (event) => {
+      if (!isTopLayer || !onClickOutside) return;
+      const target = event.target;
+      target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
+    },
     [rootElement]
   );
   const setRef = useCallback((el) => {
@@ -5448,13 +5450,7 @@ const Root$5 = styled(Box)`
   );
   useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]), useClickOutside(
-    useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside]
-    ),
-    [rootElement]
-  ), useGlobalKeyDown(
+  }, [activeIndex, onItemSelect]), useClickOutside((event) => isTopLayer && onClickOutside && onClickOutside(event), [rootElement]), useGlobalKeyDown(
     useCallback(
       (event) => {
         isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());