@sanity/ui 2.8.2 → 2.8.4

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"
               }
@@ -5132,8 +5132,8 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
     scheme,
     shadow: shadowProp,
     width: widthProp
-  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = useRef(null), [rootElement, setRootElement] = useState(null), contentRef = useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
-  useImperativeHandle(forwardedRef, () => ref.current), useImperativeHandle(
+  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = useRef(null), contentRef = useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
+  return useImperativeHandle(forwardedRef, () => ref.current), useImperativeHandle(
     forwardedContentRef,
     () => contentRef.current
   ), useEffect(() => {
@@ -5147,21 +5147,13 @@ 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]
-    ),
-    [rootElement]
-  );
-  const setRef = useCallback((el) => {
-    setRootElement(el), ref.current = el;
-  }, []);
-  return /* @__PURE__ */ jsx(DialogContainer, { "data-ui": "DialogCard", width, children: /* @__PURE__ */ jsx(DialogCardRoot, { radius, ref: setRef, scheme, shadow, children: /* @__PURE__ */ jsxs(DialogLayout, { direction: "column", children: [
+  ), useClickOutsideEvent(
+    isTopLayer && onClickOutside && ((event) => {
+      const target = event.target;
+      target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
+    }),
+    () => [ref.current]
+  ), /* @__PURE__ */ jsx(DialogContainer, { "data-ui": "DialogCard", width, children: /* @__PURE__ */ jsx(DialogCardRoot, { radius, ref, scheme, shadow, children: /* @__PURE__ */ jsxs(DialogLayout, { direction: "column", children: [
     showHeader && /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(Flex, { align: "center", padding: 3, children: [
       /* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
       showCloseButton && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(