@sanity/ui 2.8.0 → 2.8.1

package/dist/index.js

@@ -126,8 +126,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] = react.useState(null), onEvent = useEffectEvent.useEffectEvent((evt) => {
+  const [element, setElement] = react.useState(null), [elements, setElements] = react.useState(() => _getElements(element, elementsArg)), elementsRef = react.useRef(elements);
+  return react.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]), react.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.useEffectEvent((evt) => {
     if (!listener)
       return;
     const target = evt.target;
@@ -136,20 +176,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 (react.useEffect(() => {
+  react.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) {
   react.useEffect(() => {
@@ -6835,6 +6874,7 @@ exports.studioTheme = studioTheme;
 exports.useArrayProp = useArrayProp;
 exports.useBoundaryElement = useBoundaryElement;
 exports.useClickOutside = useClickOutside;
+exports.useClickOutsideEvent = useClickOutsideEvent;
 exports.useCustomValidity = useCustomValidity;
 exports.useDialog = useDialog;
 exports.useElementRect = useElementRect;