@sanity/ui 2.3.6-canary.4 → 2.3.6-canary.6

package/dist/index.js

@@ -3261,7 +3261,7 @@ const Popover = react.memo(
       animate: _animate = !1,
       arrow: arrowProp = !1,
       boundaryElement: _boundaryElement,
-      children,
+      children: _children,
       constrainSize = !1,
       content,
       disabled,
@@ -3375,10 +3375,16 @@ const Popover = react.memo(
       },
       [refs]
     );
-    if (react.useImperativeHandle(updateRef, () => update, [update]), react.useEffect(() => {
-      children || refs.setReference(referenceElement || null);
-    }, [children, referenceElement, refs]), disabled)
-      return children || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    react.useImperativeHandle(updateRef, () => update, [update]), react.useEffect(() => {
+      _children || refs.setReference(referenceElement || null);
+    }, [_children, referenceElement, refs]);
+    const children = react.useMemo(() => !_children || referenceElement ? null : react.cloneElement(_children, {
+      ref: (node) => {
+        logDeprecatedWarning(), refs.setReference(node);
+      }
+    }), [_children, referenceElement, refs]);
+    if (disabled)
+      return _children || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     const popover = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(
       PopoverCard,
       {
@@ -3423,16 +3429,7 @@ const Popover = react.memo(
           )
         }
       ),
-      children && !referenceElement && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref: (node) => {
-            logDeprecatedWarning(), refs.setReference(node);
-          },
-          style: { display: "contents" },
-          children
-        }
-      )
+      children
     ] });
   })
 );
@@ -5557,28 +5554,16 @@ const Root$5 = styledComponents.styled(Box)`
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
   }, [buttonElement, disableRestoreFocusOnClose]), registerElement = react.useCallback((el) => (setChildMenuElements((els) => els.concat([el])), () => {
     setChildMenuElements((els) => els.filter((_el) => _el !== el));
-  }), []), menuProps = react.useMemo(
-    () => ({
-      "aria-labelledby": id,
-      onBlurCapture: handleBlur,
-      onClickOutside: handleMenuClickOutside,
-      onEscape: handleMenuEscape,
-      onItemClick: handleItemClick,
-      originElement: buttonElement,
-      registerElement,
-      shouldFocus
-    }),
-    [
-      buttonElement,
-      handleMenuClickOutside,
-      handleMenuEscape,
-      handleItemClick,
-      id,
-      handleBlur,
-      registerElement,
-      shouldFocus
-    ]
-  ), menu = menuProp && react.cloneElement(menuProp, menuProps), ref = react.useRef(null), button = react.useMemo(
+  }), []), menu = menuProp && react.cloneElement(menuProp, {
+    "aria-labelledby": id,
+    onBlurCapture: handleBlur,
+    onClickOutside: handleMenuClickOutside,
+    onEscape: handleMenuEscape,
+    onItemClick: handleItemClick,
+    originElement: buttonElement,
+    registerElement,
+    shouldFocus
+  }), button = react.useMemo(
     () => {
       var _a;
       return buttonProp && react.cloneElement(buttonProp, {
@@ -5589,7 +5574,7 @@ const Root$5 = styledComponents.styled(Box)`
         onMouseDown: handleMouseDown,
         "aria-haspopup": !0,
         "aria-expanded": open,
-        ref,
+        ref: setButtonElement,
         selected: (_a = buttonProp.props.selected) != null ? _a : open
       });
     },
@@ -5597,11 +5582,9 @@ const Root$5 = styledComponents.styled(Box)`
   );
   react.useImperativeHandle(
     forwardedRef,
-    () => ref.current
-  ), react.useEffect(() => {
-    if (button)
-      return setButtonElement(ref.current), () => setButtonElement(null);
-  }, [button]);
+    () => buttonElement,
+    [buttonElement]
+  );
   const popoverProps = react.useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
@@ -5623,7 +5606,19 @@ const Root$5 = styledComponents.styled(Box)`
       popover
     ]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        "data-ui": "MenuButton__popover",
+        referenceElement: buttonElement,
+        ...popoverProps,
+        content: menu,
+        open
+      }
+    ),
+    button
+  ] });
 }), MenuDivider = styledComponents.styled.hr`
   height: 1px;
   border: 0;