@sanity/ui 2.3.6-canary.3 → 2.3.6-canary.5

package/dist/index.d.mts

@@ -1423,6 +1423,7 @@ export declare interface MenuItemProps extends ResponsivePaddingProps, Responsiv
  * @public
  */
 export declare interface MenuProps extends ResponsivePaddingProps {
+  'aria-labelledby'?: string
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -1432,6 +1433,7 @@ export declare interface MenuProps extends ResponsivePaddingProps {
    */
   focusLast?: boolean
   onClickOutside?: (event: MouseEvent) => void
+  onBlurCapture?: (event: React.FocusEvent<HTMLButtonElement>) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void

package/dist/index.d.ts

@@ -1423,6 +1423,7 @@ export declare interface MenuItemProps extends ResponsivePaddingProps, Responsiv
  * @public
  */
 export declare interface MenuProps extends ResponsivePaddingProps {
+  'aria-labelledby'?: string
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -1432,6 +1433,7 @@ export declare interface MenuProps extends ResponsivePaddingProps {
    */
   focusLast?: boolean
   onClickOutside?: (event: MouseEvent) => void
+  onBlurCapture?: (event: React.FocusEvent<HTMLButtonElement>) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void

package/dist/index.esm.js

@@ -133,8 +133,8 @@ function createGlobalScopedContext(key2, defaultValue) {
 }
 const key$8 = Symbol.for("@sanity/ui/context/theme"), ThemeContext = createGlobalScopedContext(key$8, null);
 function ThemeProvider(props) {
-  var _a;
-  const { children } = props, parentTheme = useContext(ThemeContext), scheme = (_a = props.scheme) != null ? _a : (parentTheme == null ? void 0 : parentTheme.scheme) || "light", rootTheme = (parentTheme == null ? void 0 : parentTheme.theme) || null, tone = (parentTheme == null ? void 0 : parentTheme.tone) || "default", themeContext = useMemo(() => rootTheme ? {
+  var _a, _b, _c;
+  const { children } = props, parentTheme = useContext(ThemeContext), scheme = (_a = props.scheme) != null ? _a : (parentTheme == null ? void 0 : parentTheme.scheme) || "light", rootTheme = (_b = props.theme) != null ? _b : (parentTheme == null ? void 0 : parentTheme.theme) || null, tone = (_c = props.tone) != null ? _c : (parentTheme == null ? void 0 : parentTheme.tone) || "default", themeContext = useMemo(() => rootTheme ? {
     version: 0,
     theme: rootTheme,
     scheme,
@@ -5560,28 +5560,16 @@ const Root$5 = styled(Box)`
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
   }, [buttonElement, disableRestoreFocusOnClose]), registerElement = useCallback((el) => (setChildMenuElements((els) => els.concat([el])), () => {
     setChildMenuElements((els) => els.filter((_el) => _el !== el));
-  }), []), menuProps = 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 && cloneElement(menuProp, menuProps), ref = useRef(null), button = useMemo(
+  }), []), menu = menuProp && cloneElement(menuProp, {
+    "aria-labelledby": id,
+    onBlurCapture: handleBlur,
+    onClickOutside: handleMenuClickOutside,
+    onEscape: handleMenuEscape,
+    onItemClick: handleItemClick,
+    originElement: buttonElement,
+    registerElement,
+    shouldFocus
+  }), button = useMemo(
     () => {
       var _a;
       return buttonProp && cloneElement(buttonProp, {
@@ -5592,7 +5580,7 @@ const Root$5 = styled(Box)`
         onMouseDown: handleMouseDown,
         "aria-haspopup": !0,
         "aria-expanded": open,
-        ref,
+        ref: setButtonElement,
         selected: (_a = buttonProp.props.selected) != null ? _a : open
       });
     },
@@ -5600,11 +5588,9 @@ const Root$5 = styled(Box)`
   );
   useImperativeHandle(
     forwardedRef,
-    () => ref.current
-  ), useEffect(() => {
-    if (button)
-      return setButtonElement(ref.current), () => setButtonElement(null);
-  }, [button]);
+    () => buttonElement,
+    [buttonElement]
+  );
   const popoverProps = useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
@@ -5626,7 +5612,19 @@ const Root$5 = styled(Box)`
       popover
     ]
   );
-  return /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsx(Fragment, {}) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        "data-ui": "MenuButton__popover",
+        referenceElement: buttonElement,
+        ...popoverProps,
+        content: menu,
+        open
+      }
+    ),
+    button
+  ] });
 }), MenuDivider = styled.hr`
   height: 1px;
   border: 0;