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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.3.6-canary.3",
+  "version": "2.3.6-canary.5",
   "keywords": [
     "sanity",
     "ui",

package/src/core/components/menu/menu.tsx

@@ -11,6 +11,7 @@ import {useMenuController} from './useMenuController'
  * @public
  */
 export interface MenuProps extends ResponsivePaddingProps {
+  'aria-labelledby'?: string
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -20,6 +21,7 @@ export 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/src/core/components/menu/menuButton.tsx

@@ -203,8 +203,9 @@ export const MenuButton = forwardRef(function MenuButton(
     }
   }, [])
 
-  const menuProps: MenuProps = useMemo(
-    () => ({
+  const menu =
+    menuProp &&
+    cloneElement<MenuProps>(menuProp, {
       'aria-labelledby': id,
       onBlurCapture: handleBlur,
       onClickOutside: handleMenuClickOutside,
@@ -213,22 +214,8 @@ export const MenuButton = forwardRef(function MenuButton(
       originElement: buttonElement,
       registerElement,
       shouldFocus,
-    }),
-    [
-      buttonElement,
-      handleMenuClickOutside,
-      handleMenuEscape,
-      handleItemClick,
-      id,
-      handleBlur,
-      registerElement,
-      shouldFocus,
-    ],
-  )
-
-  const menu = menuProp && cloneElement(menuProp, menuProps)
+    })
 
-  const ref = useRef<HTMLButtonElement | null>(null)
   const button = useMemo(
     () =>
       buttonProp &&
@@ -240,7 +227,7 @@ export const MenuButton = forwardRef(function MenuButton(
         onMouseDown: handleMouseDown,
         'aria-haspopup': true,
         'aria-expanded': open,
-        ref: ref,
+        ref: setButtonElement,
         selected: buttonProp.props.selected ?? open,
       }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
@@ -249,19 +236,10 @@ export const MenuButton = forwardRef(function MenuButton(
   // Forward button ref to parent
   useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
     forwardedRef,
-    () => ref.current,
+    () => buttonElement,
+    [buttonElement],
   )
 
-  // If there's a button then we need to set the reference element to the cloned button ref
-  // and if button changes we make sure to update or remove the reference element.
-  useEffect(() => {
-    if (!button) return undefined
-
-    setButtonElement(ref.current)
-
-    return () => setButtonElement(null)
-  }, [button])
-
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
@@ -285,8 +263,15 @@ export const MenuButton = forwardRef(function MenuButton(
   )
 
   return (
-    <Popover data-ui="MenuButton__popover" {...popoverProps} content={menu} open={open}>
-      {button || <></>}
-    </Popover>
+    <>
+      <Popover
+        data-ui="MenuButton__popover"
+        referenceElement={buttonElement}
+        {...popoverProps}
+        content={menu}
+        open={open}
+      />
+      {button}
+    </>
   )
 })

package/src/core/theme/themeProvider.tsx

@@ -27,8 +27,8 @@ export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
   const {children} = props
   const parentTheme = useContext(ThemeContext)
   const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
-  const rootTheme = parentTheme?.theme || null
-  const tone = parentTheme?.tone || 'default'
+  const rootTheme = props.theme ?? (parentTheme?.theme || null)
+  const tone = props.tone ?? (parentTheme?.tone || 'default')
 
   const themeContext: ThemeContextValue | null = useMemo(() => {
     if (!rootTheme) return null