@sanity/ui 2.8.1 → 2.8.3

package/dist/index.esm.js

@@ -4982,8 +4982,8 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   appearance: none;
   margin: -4px;
 `, Breadcrumbs = forwardRef(function(props, ref) {
-  const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props, space = useArrayProp(spaceRaw), [open, setOpen] = useState(!1), [expandElement, setExpandElement] = useState(null), [popoverElement, setPopoverElement] = useState(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
-  useClickOutside(collapse, [expandElement, popoverElement]);
+  const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props, space = useArrayProp(spaceRaw), [open, setOpen] = useState(!1), expandElementRef = useRef(null), popoverElementRef = useRef(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
+  useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
   const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children]), items = useMemo(() => {
     const len = rawItems.length;
     if (maxLength && len > maxLength) {
@@ -4998,7 +4998,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
             open,
             placement: "top",
             portal: !0,
-            ref: setPopoverElement,
+            ref: popoverElementRef,
             children: /* @__PURE__ */ jsx(
               ExpandButton,
               {
@@ -5006,7 +5006,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
                 mode: "bleed",
                 onClick: open ? collapse : expand,
                 padding: 1,
-                ref: setExpandElement,
+                ref: expandElementRef,
                 selected: open,
                 text: "\u2026"
               }
@@ -5148,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) => {
@@ -5489,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());