@sanity/ui 2.8.5 → 2.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.5",
+  "version": "2.8.7",
   "keywords": [
     "sanity",
     "ui",
@@ -121,7 +121,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.10.4",
+    "@sanity/pkg-utils": "^6.10.6",
     "@sanity/prettier-config": "^1.0.2",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.15",

package/src/core/components/autocomplete/autocomplete.tsx

@@ -691,6 +691,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   )
 })
 
+InnerAutocomplete.displayName = 'ForwardRef(Autocomplete)'
+
 /**
  * The Autocomplete component is typically used for search components.
  * It consists of a text input for writing a query, and properties for rendering suggestions.

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -95,3 +95,4 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
     </Root>
   )
 })
+Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'

package/src/core/components/dialog/dialog.tsx

@@ -276,6 +276,8 @@ const DialogCard = forwardRef(function DialogCard(
   )
 })
 
+DialogCard.displayName = 'ForwardRef(DialogCard)'
+
 /**
  * The Dialog component.
  *
@@ -424,3 +426,4 @@ export const Dialog = forwardRef(function Dialog(
     </Portal>
   )
 })
+Dialog.displayName = 'ForwardRef(Dialog)'

package/src/core/components/dialog/dialogProvider.tsx

@@ -30,3 +30,5 @@ export function DialogProvider(props: DialogProviderProps): React.ReactElement {
 
   return <DialogContext.Provider value={contextValue}>{children}</DialogContext.Provider>
 }
+
+DialogProvider.displayName = 'DialogProvider'

package/src/core/components/hotkeys/hotkeys.tsx

@@ -58,3 +58,4 @@ export const Hotkeys = forwardRef(function Hotkeys(
     </Root>
   )
 })
+Hotkeys.displayName = 'ForwardRef(Hotkeys)'

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

@@ -1,6 +1,6 @@
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useClickOutside, useGlobalKeyDown} from '../../hooks'
+import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
 import {ResponsivePaddingProps} from '../../primitives/types'
 import {useLayer} from '../../utils'
@@ -75,16 +75,29 @@ export const Menu = forwardRef(function Menu(
     handleItemMouseLeave,
     handleKeyDown,
     mount,
-    rootElement,
-    setRootElement,
-  } = useMenuController({onKeyDown, originElement, shouldFocus})
+  } = useMenuController({onKeyDown, originElement, shouldFocus, rootElementRef: ref})
 
+  const unregisterElementRef = useRef<(() => void) | null>(null)
   const handleRefChange = useCallback(
     (el: HTMLDivElement | null) => {
-      setRootElement(el)
+      // Run cleanup of previously registered elements
+      if (unregisterElementRef.current) {
+        // The `registerElement` callback were originally used in a `useEffect`, so it returns a cleanup function that is a bit gnarly to handle in a ref callback.
+        // Since we can't change the `registerElement` implementation itself without making breaking change,
+        // that is explained in the code comments for createGlobalScopedContext.tsx,
+        // we need to handle with a ref that holds on to the cleanup function last returned when the ref callback is called.
+        unregisterElementRef.current()
+        unregisterElementRef.current = null
+      }
+
       ref.current = el
+
+      // Register root element (for nested menus)
+      if (ref.current && registerElement) {
+        unregisterElementRef.current = registerElement(ref.current)
+      }
     },
-    [setRootElement],
+    [registerElement],
   )
 
   // Trigger `onItemSelect` when active index changes
@@ -93,13 +106,7 @@ export const Menu = forwardRef(function Menu(
   }, [activeIndex, onItemSelect])
 
   // Close menu when clicking outside
-  useClickOutside(
-    useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside],
-    ),
-    [rootElement],
-  )
+  useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current])
 
   // Close menu when pressing Escape
   useGlobalKeyDown(
@@ -116,13 +123,6 @@ export const Menu = forwardRef(function Menu(
     ),
   )
 
-  // Register root element (for nested menus)
-  useEffect(() => {
-    if (!rootElement || !registerElement) return
-
-    return registerElement(rootElement)
-  }, [registerElement, rootElement])
-
   const value: MenuContextValue = useMemo(
     () => ({
       version: 0.0,
@@ -169,3 +169,4 @@ export const Menu = forwardRef(function Menu(
     </MenuContext.Provider>
   )
 })
+Menu.displayName = 'ForwardRef(Menu)'

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

@@ -196,11 +196,7 @@ export const MenuButton = forwardRef(function MenuButton(
   const registerElement = useCallback((el: HTMLElement) => {
     setChildMenuElements((els) => els.concat([el]))
 
-    return () => {
-      setChildMenuElements((els) => {
-        return els.filter((_el) => _el !== el)
-      })
-    }
+    return () => setChildMenuElements((els) => els.filter((_el) => _el !== el))
   }, [])
 
   const menuProps: MenuProps = useMemo(
@@ -290,3 +286,4 @@ export const MenuButton = forwardRef(function MenuButton(
     </Popover>
   )
 })
+MenuButton.displayName = 'ForwardRef(MenuButton)'

package/src/core/components/menu/menuDivider.ts

@@ -9,3 +9,4 @@ export const MenuDivider = styled.hr`
   background: var(--card-hairline-soft-color);
   margin: 0;
 `
+MenuDivider.displayName = 'MenuDivider'

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

@@ -1,5 +1,5 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {isValidElement, useCallback, useEffect, useRef, useState} from 'react'
+import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
@@ -58,7 +58,7 @@ export function MenuGroup(
   } = menu
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
-  const shouldFocusRef = useRef<'first' | 'last' | null>(null)
+  const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const [withinMenu, setWithinMenu] = useState(false)
 
@@ -88,22 +88,17 @@ export function MenuGroup(
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      if (onClick) onClick(event)
-
-      shouldFocusRef.current = 'first'
+      onClick?.(event)
 
+      setShouldFocus('first')
       setOpen(true)
-
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
     },
     [onClick],
   )
 
   const handleChildItemClick = useCallback(() => {
     setOpen(false)
-    if (onItemClick) onItemClick()
+    onItemClick?.()
   }, [onItemClick])
 
   const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), [])
@@ -121,6 +116,16 @@ export function MenuGroup(
     if (!open) setWithinMenu(false)
   }, [open])
 
+  // Reset the shouldFocus state after it has been used
+  useEffect(() => {
+    if (!shouldFocus) return
+    // The useMenuController effect that handles `shouldFocus` schedules a request animation frame where it's processed.
+    // By doing the same here, we ensure that the reset is processed after the focus change.
+    const rafId = requestAnimationFrame(() => setShouldFocus(null))
+
+    return () => cancelAnimationFrame(rafId)
+  }, [shouldFocus])
+
   const childMenu = (
     <Menu
       onClickOutside={onClickOutside}
@@ -129,7 +134,7 @@ export function MenuGroup(
       onKeyDown={handleMenuKeyDown}
       onMouseEnter={handleMenuMouseEnter}
       registerElement={registerElement}
-      shouldFocus={shouldFocusRef.current}
+      shouldFocus={shouldFocus}
     >
       {children}
     </Menu>
@@ -143,15 +148,10 @@ export function MenuGroup(
     }
 
     if (event.key === 'ArrowRight') {
-      shouldFocusRef.current = 'first'
-
+      setShouldFocus('first')
       setOpen(true)
       setWithinMenu(true)
 
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
-
       return
     }
   }, [])
@@ -198,3 +198,5 @@ export function MenuGroup(
     </Popover>
   )
 }
+
+MenuGroup.displayName = 'MenuGroup'

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

@@ -175,3 +175,4 @@ export const MenuItem = forwardRef(function MenuItem(
     </Selectable>
   )
 })
+MenuItem.displayName = 'ForwardRef(MenuItem)'

package/src/core/components/menu/useMenuController.ts

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {_getFocusableElements, _sortElements} from './helpers'
 
 /**
@@ -11,8 +11,6 @@ export interface MenuController {
   handleItemMouseLeave: () => void
   handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
-  rootElement: HTMLDivElement | null
-  setRootElement: (el: HTMLDivElement | null) => void
 }
 
 /**
@@ -24,14 +22,14 @@ export function useMenuController(props: {
   onKeyDown?: React.KeyboardEventHandler
   originElement?: HTMLElement | null
   shouldFocus: 'first' | 'last' | null
+  rootElementRef: React.MutableRefObject<HTMLDivElement | null>
 }): MenuController {
-  const {onKeyDown, originElement, shouldFocus} = props
+  const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
   const elementsRef = useRef<HTMLElement[]>([])
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  const activeElement = elementsRef.current[activeIndex] || null
-  const mounted = Boolean(rootElement)
+  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
+  const mounted = Boolean(rootElementRef.current)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
@@ -44,7 +42,7 @@ export function useMenuController(props: {
 
       if (elementsRef.current.indexOf(element) === -1) {
         elementsRef.current.push(element)
-        _sortElements(rootElement, elementsRef.current)
+        _sortElements(rootElementRef.current, elementsRef.current)
       }
 
       if (selected) {
@@ -61,7 +59,7 @@ export function useMenuController(props: {
         }
       }
     },
-    [rootElement, setActiveIndex],
+    [rootElementRef, setActiveIndex],
   )
 
   const handleKeyDown = useCallback(
@@ -179,17 +177,15 @@ export function useMenuController(props: {
     // which would be incorrect when the user hovers over a gap
     // between two menu items or a menu divider.
     setActiveIndex(-2)
-    rootElement?.focus()
-  }, [setActiveIndex, rootElement])
+    rootElementRef.current?.focus()
+  }, [rootElementRef, setActiveIndex])
 
   // Set focus on the currently active element
   useEffect(() => {
     if (!mounted) return
 
-    const rafId = window.requestAnimationFrame(() => {
-      const _activeIndex = activeIndexRef.current
-
-      if (_activeIndex === -1) {
+    const rafId = requestAnimationFrame(() => {
+      if (activeIndex === -1) {
         if (shouldFocus === 'first') {
           const focusableElements = _getFocusableElements(elementsRef.current)
           const el = focusableElements[0]
@@ -198,7 +194,6 @@ export function useMenuController(props: {
             const currentIndex = elementsRef.current.indexOf(el)
 
             setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
           }
         }
 
@@ -210,21 +205,18 @@ export function useMenuController(props: {
             const currentIndex = elementsRef.current.indexOf(el)
 
             setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
           }
         }
 
         return
       }
 
-      const element = elementsRef.current[_activeIndex] || null
+      const element = elementsRef.current[activeIndex] || null
 
       element?.focus()
     })
 
-    return () => {
-      window.cancelAnimationFrame(rafId)
-    }
+    return () => cancelAnimationFrame(rafId)
   }, [activeIndex, mounted, setActiveIndex, shouldFocus])
 
   return {
@@ -234,7 +226,5 @@ export function useMenuController(props: {
     handleItemMouseLeave,
     handleKeyDown,
     mount,
-    rootElement,
-    setRootElement,
   }
 }

package/src/core/components/skeleton/skeleton.tsx

@@ -55,3 +55,4 @@ export const Skeleton = forwardRef(function Skeleton(
     />
   )
 })
+Skeleton.displayName = 'ForwardRef(Skeleton)'

package/src/core/components/skeleton/textSkeleton.tsx

@@ -71,6 +71,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
 
   return <Root {...restProps} $size={$size} ref={ref} $style="text" />
 })
+TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -86,6 +87,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
 
   return <Root {...restProps} $size={$size} ref={ref} $style="label" />
 })
+LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -101,6 +103,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
 
   return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
 })
+HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -116,3 +119,4 @@ export const CodeSkeleton = forwardRef(function TextSkeleton(
 
   return <Root {...restProps} $size={$size} ref={ref} $style="code" />
 })
+CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

package/src/core/components/tab/tab.tsx

@@ -97,3 +97,4 @@ export const Tab = forwardRef(function Tab(
     />
   )
 })
+Tab.displayName = 'ForwardRef(Tab)'

package/src/core/components/tab/tabList.tsx

@@ -74,3 +74,4 @@ export const TabList = forwardRef(function TabList(
     </CustomInline>
   )
 })
+TabList.displayName = 'ForwardRef(TabList)'

package/src/core/components/tab/tabPanel.tsx

@@ -35,3 +35,4 @@ export const TabPanel = forwardRef(function TabPanel(
     </Box>
   )
 })
+TabPanel.displayName = 'ForwardRef(TabPanel)'

package/src/core/components/toast/styles.ts

@@ -14,7 +14,7 @@ const loadingAnimation = keyframes`
   }
   100% {
     width: 100%;
-  } 
+  }
 `
 
 const LOADING_BAR_HEIGHT = 2

package/src/core/components/toast/toast.tsx

@@ -103,3 +103,5 @@ export function Toast(
     </Root>
   )
 }
+
+Toast.displayName = 'Toast'

package/src/core/components/toast/toastProvider.tsx

@@ -189,3 +189,5 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
     </ToastContext.Provider>
   )
 }
+
+ToastProvider.displayName = 'ToastProvider'

package/src/core/components/tree/tree.tsx

@@ -233,5 +233,4 @@ export const Tree = memo(
     )
   }),
 )
-
-Tree.displayName = 'Tree'
+Tree.displayName = 'Memo(ForwardRef(Tree))'

package/src/core/components/tree/treeItem.tsx

@@ -201,3 +201,4 @@ export const TreeItem = memo(function TreeItem(
     </Root>
   )
 })
+TreeItem.displayName = 'Memo(TreeItem)'

package/src/core/hooks/useClickOutsideEvent.ts

@@ -35,15 +35,13 @@ export function useClickOutsideEvent(
       return
     }
 
-    const resolvedBoundaryElement =
-      typeof boundaryElement === 'function' ? boundaryElement() : boundaryElement
+    const resolvedBoundaryElement = boundaryElement?.()
 
     if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) {
       return
     }
 
-    const resolvedElements = Array.isArray(elementsArg) ? elementsArg : elementsArg()
-    const elements = resolvedElements.flat()
+    const elements = elementsArg().flat()
 
     for (const el of elements) {
       if (!el) continue

package/src/core/primitives/_selectable/selectable.tsx

@@ -11,3 +11,4 @@ export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusSty
   selectableBaseStyle,
   selectableColorStyle,
 )
+Selectable.displayName = 'Selectable'

package/src/core/primitives/avatar/avatar.tsx

@@ -194,3 +194,4 @@ export const Avatar = forwardRef(function Avatar(
     </Root>
   )
 })
+Avatar.displayName = 'ForwardRef(Avatar)'

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -90,3 +90,4 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
     </Root>
   )
 })
+AvatarCounter.displayName = 'ForwardRef(AvatarCounter)'

package/src/core/primitives/avatar/avatarStack.tsx

@@ -97,3 +97,4 @@ export const AvatarStack = forwardRef(function AvatarStack(
     </Root>
   )
 })
+AvatarStack.displayName = 'ForwardRef(AvatarStack)'

package/src/core/primitives/badge/badge.tsx

@@ -58,3 +58,4 @@ export const Badge = forwardRef(function Badge(
     </Root>
   )
 })
+Badge.displayName = 'ForwardRef(Badge)'

package/src/core/primitives/box/box.tsx

@@ -127,3 +127,4 @@ export const Box = forwardRef(function Box(
     </Root>
   )
 })
+Box.displayName = 'ForwardRef(Box)'

package/src/core/primitives/button/button.tsx

@@ -178,3 +178,4 @@ export const Button = forwardRef(function Button(
     </Root>
   )
 })
+Button.displayName = 'ForwardRef(Button)'

package/src/core/primitives/card/card.tsx

@@ -112,3 +112,4 @@ export const Card = forwardRef(function Card(
     </ThemeColorProvider>
   )
 })
+Card.displayName = 'ForwardRef(Card)'

package/src/core/primitives/checkbox/checkbox.tsx

@@ -69,3 +69,4 @@ export const Checkbox = forwardRef(function Checkbox(
     </Root>
   )
 })
+Checkbox.displayName = 'ForwardRef(Checkbox)'

package/src/core/primitives/code/code.tsx

@@ -37,3 +37,4 @@ export const Code = forwardRef(function Code(
     </Root>
   )
 })
+Code.displayName = 'ForwardRef(Code)'

package/src/core/primitives/container/container.tsx

@@ -37,3 +37,4 @@ export const Container = forwardRef(function Container(
     />
   )
 })
+Container.displayName = 'ForwardRef(Container)'

package/src/core/primitives/flex/flex.tsx

@@ -50,3 +50,4 @@ export const Flex = forwardRef(function Flex(
     />
   )
 })
+Flex.displayName = 'ForwardRef(Flex)'

package/src/core/primitives/grid/grid.tsx

@@ -44,3 +44,4 @@ export const Grid = forwardRef(function Grid(
     </Root>
   )
 })
+Grid.displayName = 'ForwardRef(Grid)'

package/src/core/primitives/heading/heading.tsx

@@ -83,3 +83,4 @@ export const Heading = forwardRef(function Heading(
     </Root>
   )
 })
+Heading.displayName = 'ForwardRef(Heading)'

package/src/core/primitives/inline/inline.tsx

@@ -44,3 +44,4 @@ export const Inline = forwardRef(function Inline(
     </Root>
   )
 })
+Inline.displayName = 'ForwardRef(Inline)'

package/src/core/primitives/kbd/kbd.tsx

@@ -57,3 +57,4 @@ export const KBD = forwardRef(function KBD(
     </Root>
   )
 })
+KBD.displayName = 'ForwardRef(KBD)'

package/src/core/primitives/label/label.tsx

@@ -82,3 +82,4 @@ export const Label = forwardRef(function Label(
     </Root>
   )
 })
+Label.displayName = 'ForwardRef(Label)'

package/src/core/primitives/popover/popover.tsx

@@ -454,5 +454,4 @@ export const Popover = memo(
     )
   }),
 )
-
-Popover.displayName = 'Popover'
+Popover.displayName = 'Memo(ForwardRef(Popover))'

package/src/core/primitives/popover/popoverCard.tsx

@@ -152,5 +152,4 @@ export const PopoverCard = memo(
     )
   }),
 )
-
-PopoverCard.displayName = 'PopoverCard'
+PopoverCard.displayName = 'Memo(ForwardRef(PopoverCard))'

package/src/core/primitives/radio/radio.tsx

@@ -47,3 +47,4 @@ export const Radio = forwardRef(function Radio(
     </Root>
   )
 })
+Radio.displayName = 'ForwardRef(Radio)'

package/src/core/primitives/select/select.tsx

@@ -83,3 +83,4 @@ export const Select = forwardRef(function Select(
     </Root>
   )
 })
+Select.displayName = 'ForwardRef(Select)'

package/src/core/primitives/spinner/spinner.tsx

@@ -42,3 +42,4 @@ export const Spinner = forwardRef(function Spinner(
     </Root>
   )
 })
+Spinner.displayName = 'ForwardRef(Spinner)'

package/src/core/primitives/stack/stack.tsx

@@ -36,3 +36,4 @@ export const Stack = forwardRef(function Stack(
     />
   )
 })
+Stack.displayName = 'ForwardRef(Stack)'

package/src/core/primitives/switch/switch.tsx

@@ -64,3 +64,4 @@ export const Switch = forwardRef(function Switch(
     </Root>
   )
 })
+Switch.displayName = 'ForwardRef(Switch)'

package/src/core/primitives/text/text.tsx

@@ -84,3 +84,4 @@ export const Text = forwardRef(function Text(
     </Root>
   )
 })
+Text.displayName = 'ForwardRef(Text)'

package/src/core/primitives/textArea/textArea.tsx

@@ -115,3 +115,4 @@ export const TextArea = forwardRef(function TextArea(
     </Root>
   )
 })
+TextArea.displayName = 'ForwardRef(TextArea)'

package/src/core/primitives/textInput/textInput.tsx

@@ -384,3 +384,4 @@ export const TextInput = forwardRef(function TextInput(
     </Root>
   )
 })
+TextInput.displayName = 'ForwardRef(TextInput)'