@sanity/ui 2.9.0-canary.6 → 2.10.0-corel.0

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

@@ -169,7 +169,7 @@ export const MenuButton = forwardRef(function MenuButton(
   }, [buttonElement, disableRestoreFocusOnClose])
 
   const handleBlur = useCallback(
-    (event: FocusEvent) => {
+    (event: React.FocusEvent<HTMLButtonElement>) => {
       const target = event.relatedTarget
 
       if (!(target instanceof Node)) {
@@ -199,19 +199,32 @@ export const MenuButton = forwardRef(function MenuButton(
     return () => setChildMenuElements((els) => els.filter((_el) => _el !== el))
   }, [])
 
-  const menuProps: MenuProps = {
-    'aria-labelledby': id,
-    'onBlurCapture': handleBlur,
-    'onClickOutside': handleMenuClickOutside,
-    'onEscape': handleMenuEscape,
-    'onItemClick': handleItemClick,
-    'originElement': buttonElement,
-    registerElement,
-    shouldFocus,
-  }
+  const menuProps: 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,
+    ],
+  )
 
   const menu = menuProp && cloneElement(menuProp, menuProps)
 
+  const ref = useRef<HTMLButtonElement | null>(null)
   const button = useMemo(
     () =>
       buttonProp &&
@@ -223,7 +236,7 @@ export const MenuButton = forwardRef(function MenuButton(
         'onMouseDown': handleMouseDown,
         'aria-haspopup': true,
         'aria-expanded': open,
-        'ref': setButtonElement,
+        'ref': ref,
         'selected': buttonProp.props.selected ?? open,
       }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
@@ -232,10 +245,19 @@ export const MenuButton = forwardRef(function MenuButton(
   // Forward button ref to parent
   useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
     forwardedRef,
-    () => buttonElement,
-    [buttonElement],
+    () => ref.current,
   )
 
+  // 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,

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

@@ -53,10 +53,9 @@ export function MenuGroup(
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseEnter = menu.onMouseEnter,
     registerElement,
   } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)

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

@@ -72,11 +72,9 @@ export const MenuItem = forwardRef(function MenuItem(
     activeElement,
     mount,
     onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
-    onItemMouseLeave: _onItemMouseLeave,
+    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseLeave = menu.onMouseLeave,
   } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
-  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const ref = useRef<HTMLDivElement | null>(null)

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

@@ -36,28 +36,31 @@ export function useMenuController(props: {
     activeIndexRef.current = nextActiveIndex
   }, [])
 
-  const mount = (element: HTMLElement | null, selected?: boolean): (() => void) => {
-    if (!element) return () => undefined
+  const mount = useCallback(
+    (element: HTMLElement | null, selected?: boolean): (() => void) => {
+      if (!element) return () => undefined
 
-    if (elementsRef.current.indexOf(element) === -1) {
-      elementsRef.current.push(element)
-      _sortElements(rootElementRef.current, elementsRef.current)
-    }
+      if (elementsRef.current.indexOf(element) === -1) {
+        elementsRef.current.push(element)
+        _sortElements(rootElementRef.current, elementsRef.current)
+      }
 
-    if (selected) {
-      const selectedIndex = elementsRef.current.indexOf(element)
+      if (selected) {
+        const selectedIndex = elementsRef.current.indexOf(element)
 
-      setActiveIndex(selectedIndex)
-    }
+        setActiveIndex(selectedIndex)
+      }
 
-    return () => {
-      const idx = elementsRef.current.indexOf(element)
+      return () => {
+        const idx = elementsRef.current.indexOf(element)
 
-      if (idx > -1) {
-        elementsRef.current.splice(idx, 1)
+        if (idx > -1) {
+          elementsRef.current.splice(idx, 1)
+        }
       }
-    }
-  }
+    },
+    [rootElementRef, setActiveIndex],
+  )
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -167,7 +170,7 @@ export function useMenuController(props: {
     [setActiveIndex],
   )
 
-  const handleItemMouseLeave = () => {
+  const handleItemMouseLeave = useCallback(() => {
     // Set the active index to -2 to deactivate all menu items
     // when the user moves the mouse away from the menu item.
     // We avoid using -1 because it would focus the first menu item,
@@ -175,7 +178,7 @@ export function useMenuController(props: {
     // between two menu items or a menu divider.
     setActiveIndex(-2)
     rootElementRef.current?.focus()
-  }
+  }, [rootElementRef, setActiveIndex])
 
   // Set focus on the currently active element
   useEffect(() => {

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

@@ -1,4 +1,4 @@
-import {cloneElement, forwardRef, useCallback, useState, Children, isValidElement} from 'react'
+import {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
 import {styled} from 'styled-components'
 import {Inline, InlineProps} from '../../primitives'
 
@@ -9,6 +9,10 @@ export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
   children: Array<React.ReactElement | null | undefined | false>
 }
 
+function _isReactElement(node: unknown): node is React.ReactElement {
+  return Boolean(node)
+}
+
 //Limits the width of tabs in tablist
 const CustomInline = styled(Inline)`
   & > div {
@@ -29,18 +33,22 @@ export const TabList = forwardRef(function TabList(
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
-  const children: React.ReactElement[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children = useMemo(() => childrenProp.filter(_isReactElement), [childrenProp])
 
   const tabs = children.map((child, childIndex) =>
     cloneElement(child, {
       focused: focusedIndex === childIndex,
       key: childIndex,
-      onFocus: () => setFocusedIndex(childIndex),
+      onFocus: () => handleTabFocus(childIndex),
     }),
   )
 
   const numTabs = tabs.length
 
+  const handleTabFocus = useCallback((tabIdx: number) => {
+    setFocusedIndex(tabIdx)
+  }, [])
+
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === 'ArrowLeft') {

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

@@ -8,7 +8,6 @@ import {Box} from '../../primitives'
 import {Layer} from '../../utils'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
-import {generateToastId} from './toastState'
 import {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
@@ -46,6 +45,8 @@ const ToastContainer = styled.div`
   width: 100%;
 `
 
+let toastId = 0
+
 /**
  * @public
  */
@@ -59,20 +60,20 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
     () => ({
       initial: {
         opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
         y: 32,
         scale: 0.25,
         willChange: 'transform',
       },
       animate: {
         opacity: [0, 1, 1],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
         y: 0,
         scale: 1,
       },
       exit: {
         opacity: [1, 1, 0],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
         scale: 0.5,
         transition: prefersReducedMotion ? {duration: 0} : {duration: 0.2},
       },
@@ -85,7 +86,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
       // Wrap setState in startTransition to allow React to give input state updates higher priority
       const setState: typeof _setState = (state) => startTransition(() => _setState(state))
 
-      const id = params.id || generateToastId()
+      const id = params.id || String(toastId++)
       const duration = params.duration || 5000
 
       const dismiss = () => {

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

@@ -1,6 +1,6 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {memo, useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
+import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
 import {
@@ -64,21 +64,18 @@ export const TreeItem = memo(function TreeItem(
     weight,
     ...restProps
   } = props
-  const [rootElement, setRootElement] = useState<HTMLLIElement | null>(null)
+  const rootRef = useRef<HTMLLIElement | null>(null)
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
   const _id = useId()
   const id = idProp || _id
-  const [itemPath, itemKey] = useMemo(() => {
-    const result = path.concat([id || ''])
-
-    return [result, result.join('/')]
-  }, [id, path])
+  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
+  const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]
-  const focused = tree.focusedElement === rootElement
+  const focused = tree.focusedElement === rootRef.current
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1
+  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
     [itemPath, tree],
@@ -97,28 +94,28 @@ export const TreeItem = memo(function TreeItem(
       ) {
         event.stopPropagation()
         setExpanded(itemKey, !expanded)
-        setFocusedElement(rootElement)
+        setFocusedElement(rootRef.current)
       }
     },
-    [expanded, itemKey, onClick, rootElement, setExpanded, setFocusedElement],
+    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
   )
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (focused && event.key === 'Enter') {
-        const el = treeitemRef.current || rootElement
+        const el = treeitemRef.current || rootRef.current
 
         el?.click()
       }
     },
-    [focused, rootElement],
+    [focused],
   )
 
   useEffect(() => {
-    if (!rootElement) return
+    if (!rootRef.current) return
 
-    return registerItem(rootElement, itemPath.join('/'), expanded, selected)
-  }, [expanded, itemPath, registerItem, rootElement, selected])
+    return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
+  }, [expanded, itemPath, registerItem, selected])
 
   const content = (
     <Flex padding={padding}>
@@ -157,7 +154,7 @@ export const TreeItem = memo(function TreeItem(
         data-ui="TreeItem"
         {...restProps}
         onClick={handleClick}
-        ref={setRootElement}
+        ref={rootRef}
         role="none"
       >
         <TreeItemBox
@@ -190,7 +187,7 @@ export const TreeItem = memo(function TreeItem(
       aria-expanded={expanded}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      ref={setRootElement}
+      ref={rootRef}
       role="treeitem"
       tabIndex={tabIndex}
     >

package/src/core/constants.ts

@@ -13,7 +13,7 @@ export const EMPTY_RECORD: Record<string, never> = {}
 /**
  * @internal
  */
-export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity' as string
+export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity'
 
 /**
  * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.

package/src/core/hooks/useArrayProp.ts

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useMemo} from 'react'
 import {_getArrayProp} from '../styles'
 
 /** @beta */
@@ -12,19 +12,14 @@ export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[],
 ): T[] {
-  const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
-    _getArrayProp(val, defaultVal),
-    JSON.stringify(val ?? defaultVal),
-  ])
+  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
+  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
 
-  const hash = JSON.stringify(val ?? defaultVal)
+  return useMemo(
+    () => _getArrayProp(val, defaultVal),
 
-  if (hash !== cachedHash) {
-    // If the cached hash has changed, update the cache right away.
-    // Calling setState during render is fine in this case, and preferred over a useEffect loop
-    // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-    setCache([_getArrayProp(val, defaultVal), hash])
-  }
-
-  return cachedVal
+    // Improve performance: Keep object identify for a given hash of the value
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [__perf_hash__],
+  )
 }

package/src/core/hooks/useMatchMedia.ts

@@ -11,24 +11,34 @@ export function useMatchMedia(
   mediaQueryString: `(${string})`,
   getServerSnapshot?: () => boolean,
 ): boolean {
-  /**
-   * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
-   * we don't want to eagerly instantiate it to ensure it's only created when actually used
-   */
-  const cachedMatchMedia = useMemo(
-    () => (typeof window === 'undefined' ? null : window.matchMedia(mediaQueryString)),
-    [mediaQueryString],
-  )
   const {subscribe, getSnapshot} = useMemo(() => {
+    /**
+     * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
+     * we don't want to eagerly instantiate it to ensure it's only created when actually used
+     */
+    let MEDIA_QUERY_CACHE: MediaQueryList | undefined
+
+    const getMatchMedia = (): MediaQueryList => {
+      if (!MEDIA_QUERY_CACHE) {
+        // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
+        // the `window` global is available and we're in a browser environment
+        MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)
+      }
+
+      return MEDIA_QUERY_CACHE
+    }
+
     return {
       subscribe: (onStoreChange: () => void): (() => void) => {
-        cachedMatchMedia!.addEventListener('change', onStoreChange)
+        const matchMedia = getMatchMedia()
+
+        matchMedia.addEventListener('change', onStoreChange)
 
-        return () => cachedMatchMedia!.removeEventListener('change', onStoreChange)
+        return () => matchMedia.removeEventListener('change', onStoreChange)
       },
-      getSnapshot: () => cachedMatchMedia!.matches,
+      getSnapshot: () => getMatchMedia().matches,
     }
-  }, [cachedMatchMedia])
+  }, [mediaQueryString])
 
   useDebugValue(mediaQueryString)
 

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

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {Children, cloneElement, forwardRef, isValidElement} from 'react'
+import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
@@ -65,7 +65,10 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children: React.ReactElement[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children = useMemo<React.ReactElement[]>(
+    () => Children.toArray(childrenProp).filter(isValidElement),
+    [childrenProp],
+  )
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 

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

@@ -13,7 +13,7 @@ import {
 
 export default function ButtonStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')

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

@@ -9,7 +9,7 @@ import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
-import {Text} from '../text'
+import {Text, TextProps} from '../text'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
 import {buttonBaseStyles, buttonColorStyles} from './styles'
 
@@ -32,6 +32,8 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   textAlign?: ButtonTextAlign
   muted?: boolean
   text?: React.ReactNode
+  textOverflow?: TextProps['textOverflow']
+  textWeight?: TextProps['weight']
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
   width?: ButtonWidth
@@ -85,6 +87,8 @@ export const Button = forwardRef(function Button(
     space: spaceProp = 3,
     text,
     textAlign,
+    textOverflow = 'ellipsis',
+    textWeight,
     tone = 'default',
     type = 'button',
     muted = false,
@@ -142,20 +146,21 @@ export const Button = forwardRef(function Button(
         <Box as="span" {...boxProps}>
           <Flex as="span" justify={justify} gap={space}>
             {IconComponent && (
-              <Text size={fontSize}>
+              <Text as="span" size={fontSize} style={{flex: 'none'}}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
               </Text>
             )}
 
             {text && (
-              <Box>
+              <Box as="span">
                 <Text
+                  as="span"
                   muted={muted}
                   align={textAlign}
                   size={fontSize}
-                  textOverflow="ellipsis"
-                  weight={button.textWeight}
+                  textOverflow={textOverflow}
+                  weight={textWeight ?? button.textWeight}
                 >
                   {text}
                 </Text>
@@ -163,7 +168,7 @@ export const Button = forwardRef(function Button(
             )}
 
             {IconRightComponent && (
-              <Text size={fontSize}>
+              <Text as="span" size={fontSize} style={{flex: 'none'}}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
               </Text>

package/src/core/primitives/button/styles.ts

@@ -29,8 +29,8 @@ export function buttonBaseStyles(
     border: 0;
     box-sizing: border-box;
     padding: 0;
+    overflow: hidden;
     margin: 0;
-    white-space: nowrap;
     text-align: left;
     position: relative;
     vertical-align: top;

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

@@ -18,6 +18,8 @@ export interface FlexProps
     ResponsiveFlexProps,
     ResponsiveFlexItemProps {
   gap?: number | number[]
+  gapX?: number | number[]
+  gapY?: number | number[]
 }
 
 const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
@@ -34,7 +36,7 @@ export const Flex = forwardRef(function Flex(
   props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
+  const {align, as, direction = 'row', gap, gapX, gapY, justify, wrap, ...restProps} = props
 
   return (
     <Root
@@ -43,6 +45,8 @@ export const Flex = forwardRef(function Flex(
       $align={useArrayProp(align)}
       $direction={useArrayProp(direction)}
       $gap={useArrayProp(gap)}
+      $gapX={useArrayProp(gapX)}
+      $gapY={useArrayProp(gapY)}
       $justify={useArrayProp(justify)}
       $wrap={useArrayProp(wrap)}
       forwardedAs={as}

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

@@ -26,7 +26,7 @@ export interface HeadingProps {
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
-  textOverflow?: 'ellipsis'
+  textOverflow?: 'ellipsis' | 'none'
   weight?: ThemeFontWeightKey
 }