@sanity/ui 2.8.0 → 2.8.2

package/dist/index.d.mts

@@ -630,6 +630,16 @@ export declare interface CheckboxProps {
  */
 export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
+/**
+ * @public
+ */
+export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
+/**
+ * @public
+ */
+export declare type ClickOutsideEventListener = (event: MouseEvent) => void
+
 /**
  * @public
  */
@@ -2655,71 +2665,33 @@ export declare function useBoundaryElement(): BoundaryElementContextValue
 
 /**
  * @public
- */
-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,
-): 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
- * 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 declare function useClickOutside(
-  listener: ClickOutsideListener | false | undefined,
-  elementsArg: ClickOutsideElements,
+  listener: ClickOutsideListener,
+  elementsArg?: ClickOutsideElements,
   boundaryElement?: HTMLElement | null,
-): UseClickOutsideSetElement
+): (el: HTMLElement | null) => void
 
 /**
  * @public
- * @deprecated - use your own `const [element, setElement] = useState(null)` logic instead
  */
-export declare type UseClickOutsideSetElement = (el: HTMLElement | null) => void
+export declare function useClickOutsideEvent(
+  listener: ClickOutsideEventListener | false | undefined,
+  elementsArg?: () => ClickOutsideEventElements,
+  boundaryElement?: () => HTMLElement | null,
+): void
 
 /**
  * @beta

package/dist/index.d.ts

@@ -630,6 +630,16 @@ export declare interface CheckboxProps {
  */
 export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
+/**
+ * @public
+ */
+export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
+/**
+ * @public
+ */
+export declare type ClickOutsideEventListener = (event: MouseEvent) => void
+
 /**
  * @public
  */
@@ -2655,71 +2665,33 @@ export declare function useBoundaryElement(): BoundaryElementContextValue
 
 /**
  * @public
- */
-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,
-): 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
- * 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 declare function useClickOutside(
-  listener: ClickOutsideListener | false | undefined,
-  elementsArg: ClickOutsideElements,
+  listener: ClickOutsideListener,
+  elementsArg?: ClickOutsideElements,
   boundaryElement?: HTMLElement | null,
-): UseClickOutsideSetElement
+): (el: HTMLElement | null) => void
 
 /**
  * @public
- * @deprecated - use your own `const [element, setElement] = useState(null)` logic instead
  */
-export declare type UseClickOutsideSetElement = (el: HTMLElement | null) => void
+export declare function useClickOutsideEvent(
+  listener: ClickOutsideEventListener | false | undefined,
+  elementsArg?: () => ClickOutsideEventElements,
+  boundaryElement?: () => HTMLElement | null,
+): void
 
 /**
  * @beta

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useEffect, useRef, useImperativeHandle, useDebugValue, useSyncExternalStore, createContext, useContext, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { useMemo, useState, useRef, useEffect, useImperativeHandle, useDebugValue, useSyncExternalStore, createContext, useContext, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
@@ -131,8 +131,48 @@ function useArrayProp(val, defaultVal) {
     [__perf_hash__]
   );
 }
+function _getElements(element, elementsArg) {
+  const ret = [element];
+  for (const el of elementsArg)
+    Array.isArray(el) ? ret.push(...el) : ret.push(el);
+  return ret.filter(Boolean);
+}
 function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
-  const [legacyElement, setLegacyElement] = useState(null), onEvent = useEffectEvent((evt) => {
+  const [element, setElement] = useState(null), [elements, setElements] = useState(() => _getElements(element, elementsArg)), elementsRef = useRef(elements);
+  return useEffect(() => {
+    const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
+    if (prevElements.length !== nextElements.length) {
+      setElements(nextElements), elementsRef.current = nextElements;
+      return;
+    }
+    for (const el of prevElements)
+      if (!nextElements.includes(el)) {
+        setElements(nextElements), elementsRef.current = nextElements;
+        return;
+      }
+    for (const el of nextElements)
+      if (!prevElements.includes(el)) {
+        setElements(nextElements), elementsRef.current = nextElements;
+        return;
+      }
+  }, [element, elementsArg]), useEffect(() => {
+    if (!listener) return;
+    const handleWindowMouseDown = (evt) => {
+      const target = evt.target;
+      if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
+        for (const el of elements)
+          if (target === el || el.contains(target))
+            return;
+        listener(evt);
+      }
+    };
+    return window.addEventListener("mousedown", handleWindowMouseDown), () => {
+      window.removeEventListener("mousedown", handleWindowMouseDown);
+    };
+  }, [boundaryElement, listener, elements]), setElement;
+}
+function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundaryElement) {
+  const onEvent = useEffectEvent((evt) => {
     if (!listener)
       return;
     const target = evt.target;
@@ -141,20 +181,19 @@ function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
     const resolvedBoundaryElement = typeof boundaryElement == "function" ? boundaryElement() : boundaryElement;
     if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
       return;
-    const elements = (Array.isArray(elementsArg) ? [legacyElement, ...elementsArg] : elementsArg()).flat();
+    const elements = (Array.isArray(elementsArg) ? elementsArg : elementsArg()).flat();
     for (const el of elements)
       if (el && (target === el || el.contains(target)))
         return;
     listener(evt);
   }), hasListener = !!listener;
-  if (useEffect(() => {
+  useEffect(() => {
     if (!hasListener) return;
     const handleEvent = (evt) => onEvent(evt);
     return document.addEventListener("mousedown", handleEvent), () => {
       document.removeEventListener("mousedown", handleEvent);
     };
-  }, [hasListener, onEvent]), Array.isArray(elementsArg))
-    return setLegacyElement;
+  }, [hasListener, onEvent]);
 }
 function useCustomValidity(ref, customValidity) {
   useEffect(() => {
@@ -5109,11 +5148,14 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
       [boundaryElement, isTopLayer, onClose, portalElement]
     )
   ), useClickOutside(
-    (event) => {
-      if (!isTopLayer || !onClickOutside) return;
-      const target = event.target;
-      target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
-    },
+    useCallback(
+      (event) => {
+        if (!isTopLayer || !onClickOutside) return;
+        const target = event.target;
+        target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
+      },
+      [boundaryElement, isTopLayer, onClickOutside, portalElement]
+    ),
     [rootElement]
   );
   const setRef = useCallback((el) => {
@@ -5450,7 +5492,13 @@ const Root$5 = styled(Box)`
   );
   useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]), useClickOutside((event) => isTopLayer && onClickOutside && onClickOutside(event), [rootElement]), useGlobalKeyDown(
+  }, [activeIndex, onItemSelect]), useClickOutside(
+    useCallback(
+      (event) => isTopLayer && onClickOutside && onClickOutside(event),
+      [isTopLayer, onClickOutside]
+    ),
+    [rootElement]
+  ), useGlobalKeyDown(
     useCallback(
       (event) => {
         isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
@@ -6841,6 +6889,7 @@ export {
   useArrayProp,
   useBoundaryElement,
   useClickOutside,
+  useClickOutsideEvent,
   useCustomValidity,
   useDialog,
   useElementRect,