@sanity/ui 2.7.1-canary.0 → 2.7.1-canary.2

package/dist/index.d.mts

@@ -625,6 +625,11 @@ export declare interface CheckboxProps {
   customValidity?: string
 }
 
+/**
+ * @public
+ */
+export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
 /**
  * @public
  */
@@ -2652,10 +2657,69 @@ export declare function useBoundaryElement(): BoundaryElementContextValue
  * @public
  */
 export declare function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg?: Array<HTMLElement | 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
+ * 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 declare function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
   boundaryElement?: HTMLElement | null,
-): (el: HTMLElement | null) => void
+): UseClickOutsideSetElement
+
+/**
+ * @public
+ * @deprecated - use your own `const [element, setElement] = useState(null)` logic instead
+ */
+export declare type UseClickOutsideSetElement = (el: HTMLElement | null) => void
 
 /**
  * @beta

package/dist/index.d.ts

@@ -625,6 +625,11 @@ export declare interface CheckboxProps {
   customValidity?: string
 }
 
+/**
+ * @public
+ */
+export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
 /**
  * @public
  */
@@ -2652,10 +2657,69 @@ export declare function useBoundaryElement(): BoundaryElementContextValue
  * @public
  */
 export declare function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg?: Array<HTMLElement | 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
+ * 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 declare function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
   boundaryElement?: HTMLElement | null,
-): (el: HTMLElement | null) => void
+): UseClickOutsideSetElement
+
+/**
+ * @public
+ * @deprecated - use your own `const [element, setElement] = useState(null)` logic instead
+ */
+export declare type UseClickOutsideSetElement = (el: 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, 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 { 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 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,45 +131,30 @@ 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 [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;
+  const [legacyElement, setLegacyElement] = useState(null), onEvent = useEffectEvent((evt) => {
+    if (!listener)
       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;
+    const target = evt.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)
+      if (el && (target === el || el.contains(target)))
         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);
+    listener(evt);
+  }), hasListener = !!listener;
+  if (useEffect(() => {
+    if (!hasListener) return;
+    const handleEvent = (evt) => onEvent(evt);
+    return document.addEventListener("mousedown", handleEvent), () => {
+      document.removeEventListener("mousedown", handleEvent);
     };
-  }, [boundaryElement, listener, elements]), setElement;
+  }, [hasListener, onEvent]), Array.isArray(elementsArg))
+    return setLegacyElement;
 }
 function useCustomValidity(ref, customValidity) {
   useEffect(() => {
@@ -520,21 +505,13 @@ function useGlobalKeyDown(onKeyDown) {
 function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   const { subscribe: subscribe2, getSnapshot } = useMemo(() => {
     let MEDIA_QUERY_CACHE;
-    function getMatchMedia() {
-      return MEDIA_QUERY_CACHE === void 0 && (MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)), MEDIA_QUERY_CACHE;
-    }
+    const getMatchMedia = () => (MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)), MEDIA_QUERY_CACHE);
     return {
       subscribe: (onStoreChange) => {
         const matchMedia = getMatchMedia();
         return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
       },
-      getSnapshot: () => {
-        try {
-          return getMatchMedia().matches;
-        } catch (err) {
-          throw new Error(`Failed to match media query: ${mediaQueryString}`, { cause: err });
-        }
-      }
+      getSnapshot: () => getMatchMedia().matches
     };
   }, [mediaQueryString]);
   return useDebugValue(mediaQueryString), useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
@@ -5132,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) => {
@@ -5476,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());