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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.9.0-canary.6",
+  "version": "2.9.0-corel.0",
   "keywords": [
     "sanity",
     "ui",
@@ -84,7 +84,6 @@
     "@sanity/icons": "^3.4.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
-    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },

package/src/core/__workshop__/constants.ts

@@ -18,7 +18,7 @@ import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
   '0': 0,
-  '1 (default)': 1,
+  '1': 1,
   '2': 2,
   '3': 3,
 }
@@ -60,12 +60,12 @@ export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
 export const WORKSHOP_CARD_AS_OPTIONS: {
   [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
 } = {
-  'DIV (default)': 'div',
-  'BUTTON': 'button',
-  'SPAN': 'span',
-  'OL': 'ol',
-  'PRE': 'pre',
-  'UL': 'ul',
+  DIV: 'div',
+  BUTTON: 'button',
+  SPAN: 'span',
+  OL: 'ol',
+  PRE: 'pre',
+  UL: 'ul',
 }
 
 export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
@@ -132,7 +132,7 @@ export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} =
 export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS = {
   '0': 0,
   '1': 1,
-  '2 (default)': 2,
+  '2': 2,
   '3': 3,
   '4': 4,
 }
@@ -254,16 +254,16 @@ export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} =
 export const WORKSHOP_TEXT_SIZE_OPTIONS = {
   '0': 0,
   '1': 1,
-  '2 (default)': 2,
+  '2': 2,
   '3': 3,
   '4': 4,
 }
 
 export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
-  'Regular (default)': '',
-  'Medium': 'medium',
-  'Semibold': 'semibold',
-  'Bold': 'bold',
+  Regular: 'regular',
+  Medium: 'medium',
+  Semibold: 'semibold',
+  Bold: 'bold',
 }
 
 export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {

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

@@ -17,7 +17,6 @@ import {
   useMemo,
   useReducer,
   useRef,
-  useState,
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
@@ -185,22 +184,21 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION
 
   // Element refs
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const [resultsPopoverElement, setResultsPopoverElement] = useState<HTMLDivElement | null>(null)
-  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
+  const rootElementRef = useRef<HTMLDivElement | null>(null)
+  const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
+  const inputElementRef = useRef<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLDivElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
   const valueRef = useRef(value)
   const valuePropRef = useRef(valueProp)
-  const [popoverMouseWithin, setPopoverMouseWithin] = useState(false)
+  const popoverMouseWithinRef = useRef(false)
 
   // Forward ref to parent
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
-    () => inputElement,
-    [inputElement],
+    () => inputElementRef.current,
   )
 
   const listBoxId = `${id}-listbox`
@@ -224,13 +222,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
         // closes the results in certain situations):
         // - Do not handle blur if the mouse is within the popover
-        if (popoverMouseWithin) {
+        if (popoverMouseWithinRef.current) {
           return
         }
 
         const elements: HTMLElement[] = (relatedElements || []).concat(
-          rootElement ? [rootElement] : [],
-          resultsPopoverElement ? [resultsPopoverElement] : [],
+          rootElementRef.current ? [rootElementRef.current] : [],
+          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
         )
 
         let focusInside = false
@@ -246,20 +244,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
         if (focusInside === false) {
           dispatch({type: 'root/blur'})
-          setPopoverMouseWithin(false)
+          popoverMouseWithinRef.current = false
           if (onQueryChange) onQueryChange(null)
           if (onBlur) onBlur(event)
         }
       }, 0)
     },
-    [
-      onBlur,
-      onQueryChange,
-      popoverMouseWithin,
-      relatedElements,
-      resultsPopoverElement,
-      rootElement,
-    ],
+    [onBlur, onQueryChange, relatedElements],
   )
 
   const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
@@ -278,7 +269,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     (v: string) => {
       dispatch({type: 'value/change', value: v})
 
-      setPopoverMouseWithin(false)
+      popoverMouseWithinRef.current = false
 
       if (onSelect) onSelect(v)
 
@@ -287,9 +278,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       if (onChange) onChange(v)
       if (onQueryChange) onQueryChange(null)
 
-      inputElement?.focus()
+      inputElementRef.current?.focus()
     },
-    [onSelect, onChange, onQueryChange, inputElement],
+    [onChange, onSelect, onQueryChange],
   )
 
   const handleRootKeyDown = useCallback(
@@ -333,9 +324,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       if (event.key === 'Escape') {
         dispatch({type: 'root/escape'})
-        setPopoverMouseWithin(false)
+        popoverMouseWithinRef.current = false
         if (onQueryChange) onQueryChange(null)
-        inputElement?.focus()
+        inputElementRef.current?.focus()
 
         return
       }
@@ -347,12 +338,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         (listEl === target || listEl?.contains(target)) &&
         !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)
       ) {
-        inputElement?.focus()
+        inputElementRef.current?.focus()
 
         return
       }
     },
-    [activeValue, filteredOptions, filteredOptionsLen, inputElement, onQueryChange],
+    [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],
   )
 
   const handleInputChange = useCallback(
@@ -386,11 +377,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   )
 
   const handlePopoverMouseEnter = useCallback(() => {
-    setPopoverMouseWithin(true)
+    popoverMouseWithinRef.current = true
   }, [])
 
   const handlePopoverMouseLeave = useCallback(() => {
-    setPopoverMouseWithin(false)
+    popoverMouseWithinRef.current = false
   }, [])
 
   const handleClearButtonClick = useCallback(() => {
@@ -398,8 +389,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     valueRef.current = ''
     if (onChange) onChange('')
     if (onQueryChange) onQueryChange(null)
-    inputElement?.focus()
-  }, [inputElement, onChange, onQueryChange])
+    inputElementRef.current?.focus()
+  }, [onChange, onQueryChange])
 
   const handleClearButtonFocus = useCallback(() => {
     dispatch({type: 'input/focus'})
@@ -491,9 +482,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       if (openButtonProps.onClick) openButtonProps.onClick(event)
 
-      _raf(() => inputElement?.focus())
+      _raf(() => inputElementRef.current?.focus())
     },
-    [dispatchOpen, openButtonProps, inputElement],
+    [openButtonProps, dispatchOpen],
   )
 
   const openButtonNode = useMemo(
@@ -563,7 +554,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       prefix={prefix}
       radius={radius}
       readOnly={readOnly}
-      ref={setInputElement}
+      ref={inputElementRef}
       role="combobox"
       spellCheck={false}
       suffix={suffix || openButtonNode}
@@ -575,10 +566,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     (event: KeyboardEvent<HTMLDivElement>) => {
       // If the focus is currently in the list, move focus to the input element
       if (event.key === 'Tab') {
-        if (listFocused) inputElement?.focus()
+        if (listFocused) inputElementRef.current?.focus()
       }
     },
-    [inputElement, listFocused],
+    [listFocused],
   )
 
   const content = useMemo(() => {
@@ -644,11 +635,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         {
           content,
           hidden: !expanded,
-          inputElement,
+          inputElement: inputElementRef.current,
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
-        {current: resultsPopoverElement},
+        resultsPopoverElementRef,
       )
     }
 
@@ -670,8 +661,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
         radius={radius}
-        ref={setResultsPopoverElement}
-        referenceElement={inputElement}
+        ref={resultsPopoverElementRef}
+        referenceElement={inputElementRef.current}
         {...popover}
       />
     )
@@ -681,11 +672,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     filteredOptionsLen,
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
-    inputElement,
     popover,
     radius,
     renderPopover,
-    resultsPopoverElement,
   ])
 
   return (
@@ -694,7 +683,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
       onKeyDown={handleRootKeyDown}
-      ref={setRootElement}
+      ref={rootElementRef}
     >
       {input}
       {results}

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

@@ -0,0 +1,58 @@
+import {ChevronRightIcon} from '@sanity/icons'
+import {Box, Breadcrumbs, Button, Card, Flex, Text} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+
+const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
+  '(none)': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+}
+
+export default function Example() {
+  const maxLength =
+    useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Card padding={1} radius={3} shadow={1}>
+        <Breadcrumbs
+          gapX={0}
+          expandButton={{padding: 2}}
+          maxLength={maxLength}
+          separator={
+            <Box paddingY={2} style={{opacity: 0.5}}>
+              <Text muted size={1}>
+                <ChevronRightIcon />
+              </Text>
+            </Box>
+          }
+          // space={0}
+        >
+          <Button href="#" mode="bleed" padding={2} text="Root" />
+          <Button href="#" mode="bleed" padding={2} text="Category A of some length" />
+          <Button href="#" mode="bleed" padding={2} text="Category B" />
+          <Button href="#" mode="bleed" padding={2} text="Category C" />
+          <Button
+            href="#"
+            mode="bleed"
+            padding={2}
+            text="Category D of an every larger and more extended length"
+            textOverflow="none"
+          />
+          <Button href="#" mode="bleed" padding={2} text="Category E" />
+          <Button href="#" mode="bleed" padding={2} text="Category F" />
+          <Box padding={2}>
+            <Text size={1} weight="semibold">
+              Item
+            </Text>
+          </Box>
+        </Breadcrumbs>
+      </Card>
+    </Flex>
+  )
+}

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

@@ -19,13 +19,15 @@ export default function Example() {
   return (
     <Flex align="center" height="fill" justify="center">
       <Breadcrumbs
+        gapX={1}
+        gapY={3}
         maxLength={maxLength}
         separator={
           <Text muted size={1}>
             /
           </Text>
         }
-        space={2}
+        // space={2}
       >
         <Text size={1}>
           <a href="#">Root</a>

package/src/core/components/breadcrumbs/__workshop__/index.ts

@@ -10,5 +10,10 @@ export default defineScope({
       title: 'Example',
       component: lazy(() => import('./example')),
     },
+    {
+      name: 'buttons',
+      title: 'Buttons',
+      component: lazy(() => import('./buttons')),
+    },
   ],
 })

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

@@ -1,17 +1,5 @@
 import {styled} from 'styled-components'
-import {Button} from '../../primitives'
 
-export const Root = styled.ol`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  list-style: none;
-  align-items: center;
-  white-space: nowrap;
+export const Root = styled.nav`
   line-height: 0;
 `
-
-export const ExpandButton = styled(Button)`
-  appearance: none;
-  margin: -4px;
-`

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

@@ -1,14 +1,19 @@
-import {Children, forwardRef, Fragment, isValidElement, useCallback, useRef, useState} from 'react'
-import {useArrayProp, useClickOutsideEvent} from '../../hooks'
-import {Box, Popover, Stack, Text} from '../../primitives'
-import {ExpandButton, Root} from './breadcrumbs.styles'
+import {Children, forwardRef, isValidElement, useCallback, useMemo, useRef, useState} from 'react'
+import {useClickOutsideEvent} from '../../hooks'
+import {Box, Button, ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
+import {Root} from './breadcrumbs.styles'
 
 /**
  * @beta
  */
 export interface BreadcrumbsProps {
+  expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
+  gap?: number | number[]
+  gapX?: number | number[]
+  gapY?: number | number[]
   maxLength?: number
   separator?: React.ReactNode
+  /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
   space?: number | number[]
 }
 
@@ -19,8 +24,19 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {
-  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
-  const space = useArrayProp(spaceRaw)
+  const {
+    children,
+    expandButton: expandButtonProps,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    gap: _gapProp,
+    gapX = props.gap ?? props.space ?? 2,
+    gapY = props.gap ?? props.space ?? 2,
+    maxLength,
+    separator,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    space: _spaceProp,
+    ...restProps
+  } = props
   const [open, setOpen] = useState(false)
   const expandElementRef = useRef<HTMLButtonElement | null>(null)
   const popoverElementRef = useRef<HTMLDivElement | null>(null)
@@ -30,56 +46,60 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 
   useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current])
 
-  const rawItems = Children.toArray(children).filter(isValidElement)
+  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
 
-  let items = rawItems
-  const len = rawItems.length
+  const items = useMemo(() => {
+    const len = rawItems.length
 
-  if (maxLength && rawItems.length > maxLength) {
-    const beforeLength = Math.ceil(maxLength / 2)
-    const afterLength = Math.floor(maxLength / 2)
+    if (maxLength && len > maxLength) {
+      const beforeLength = Math.ceil(maxLength / 2)
+      const afterLength = Math.floor(maxLength / 2)
 
-    items = [
-      ...rawItems.slice(0, beforeLength - 1),
-      <Popover
-        constrainSize
-        content={
-          <Stack as="ol" overflow="auto" padding={space} space={space}>
-            {rawItems.slice(beforeLength - 1, len - afterLength)}
-          </Stack>
-        }
-        key="button"
-        open={open}
-        placement="top"
-        portal
-        ref={popoverElementRef}
-      >
-        <ExpandButton
-          fontSize={1}
-          mode="bleed"
-          onClick={open ? collapse : expand}
-          padding={1}
-          ref={expandElementRef}
-          selected={open}
-          text="…"
-        />
-      </Popover>,
-      ...rawItems.slice(len - afterLength),
-    ]
-  }
+      return [
+        ...rawItems.slice(0, beforeLength - 1),
+        <Popover
+          constrainSize
+          content={
+            <Stack as="ol" overflow="auto" space={gapY}>
+              {rawItems.slice(beforeLength - 1, len - afterLength)}
+            </Stack>
+          }
+          key="button"
+          open={open}
+          padding={2}
+          placement="top"
+          portal
+          ref={popoverElementRef}
+        >
+          <Button
+            mode="bleed"
+            padding={0}
+            text="…"
+            {...expandButtonProps}
+            onClick={open ? collapse : expand}
+            ref={expandElementRef}
+            selected={open}
+          />
+        </Popover>,
+        ...rawItems.slice(len - afterLength),
+      ]
+    }
+
+    return rawItems
+  }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems])
+
+  const len = items.length
 
   return (
     <Root data-ui="Breadcrumbs" {...restProps} ref={ref}>
-      {items.map((item, itemIndex) => (
-        <Fragment key={itemIndex}>
-          {itemIndex > 0 && (
-            <Box aria-hidden as="li" paddingX={space}>
-              {separator || <Text muted>/</Text>}
-            </Box>
-          )}
-          <Box as="li">{item}</Box>
-        </Fragment>
-      ))}
+      <Flex align="flex-start" as="ol" gapX={gapX} gapY={gapY} wrap="wrap">
+        {items.map((item, itemIndex) => (
+          <Flex align="flex-start" as="li" gapX={gapX} gapY={gapY} key={itemIndex}>
+            <Box>{item}</Box>
+            {itemIndex < len - 1 && <Box aria-hidden>{separator || <Text muted>/</Text>}</Box>}
+          </Flex>
+        ))}
+      </Flex>
     </Root>
   )
 })

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

@@ -241,7 +241,7 @@ const DialogCard = forwardRef(function DialogCard(
         <DialogLayout direction="column">
           {showHeader && (
             <DialogHeader>
-              <Flex align="center" padding={3}>
+              <Flex align="flex-start" padding={3}>
                 <Box flex={1} padding={2}>
                   {header && (
                     <Text id={labelId} size={1} weight="semibold">
@@ -305,15 +305,13 @@ export const Dialog = forwardRef(function Dialog(
     onFocus,
     padding: paddingProp = 3,
     portal: portalProp,
-    position: _positionProp,
+    position: positionProp = dialog.position || 'fixed',
     scheme,
     width: widthProp = 0,
-    zOffset: _zOffsetProp,
+    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
     animate: _animate = false,
     ...restProps
   } = props
-  const positionProp = _positionProp ?? (dialog.position || 'fixed')
-  const zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset)
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()

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

@@ -14,21 +14,19 @@ export interface MenuProps extends ResponsivePaddingProps {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
-  'focusFirst'?: boolean
+  focusFirst?: boolean
   /**
    * @deprecated Use `shouldFocus="last"` instead.
    */
-  'focusLast'?: boolean
-  'onClickOutside'?: (event: MouseEvent) => void
-  'onEscape'?: () => void
-  'onItemClick'?: () => void
-  'onItemSelect'?: (index: number) => void
-  'originElement'?: HTMLElement | null
-  'registerElement'?: (el: HTMLElement) => () => void
-  'shouldFocus'?: 'first' | 'last' | null
-  'space'?: number | number[]
-  'aria-labelledby'?: string
-  'onBlurCapture'?: (event: FocusEvent) => void
+  focusLast?: boolean
+  onClickOutside?: (event: MouseEvent) => void
+  onEscape?: () => void
+  onItemClick?: () => void
+  onItemSelect?: (index: number) => void
+  originElement?: HTMLElement | null
+  registerElement?: (el: HTMLElement) => () => void
+  shouldFocus?: 'first' | 'last' | null
+  space?: number | number[]
 }
 
 const Root = styled(Box)`
@@ -59,12 +57,10 @@ export const Menu = forwardRef(function Menu(
     originElement,
     padding = 1,
     registerElement,
-    shouldFocus: _shouldFocus,
+    shouldFocus = (props.focusFirst && 'first') || (props.focusLast && 'last') || null,
     space = 1,
     ...restProps
   } = props
-  const shouldFocus =
-    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
   const ref = useRef<HTMLDivElement | null>(null)