@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.10",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",
@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.4",
-    "@sanity/color": "3.0.0-beta.8",
+    "@sanity/color": "3.0.0-beta.9",
     "@sanity/icons": "^2.7.0",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.5",
@@ -171,7 +171,10 @@
   "keywords": [
     "sanity",
     "ui",
-    "components"
+    "primitives",
+    "react",
+    "components",
+    "design-system"
   ],
   "author": "Sanity.io <hello@sanity.io>",
   "homepage": "https://www.sanity.io/",

package/src/core/__workshop__/constants.ts

@@ -17,9 +17,10 @@ import {
 import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
-  '0 (default)': 0,
-  '1': 1,
+  '0': 0,
+  '1 (default)': 1,
   '2': 2,
+  '3': 3,
 }
 
 export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {

package/src/core/_compat.ts

@@ -1,73 +1,23 @@
-// re-export for backwards compatibility
-export {
-  COLOR_CONFIG_CARD_KEYS,
-  COLOR_CONFIG_CARD_TONES,
-  COLOR_CONFIG_BLEND_KEYS,
-  COLOR_CONFIG_STATE_KEYS,
-  COLOR_CONFIG_STATE_TONES,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_BLEND_MODES,
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_STATES,
-  THEME_COLOR_STATE_TONES,
-  buildTheme,
-  createColorTheme,
-  hexToRgb,
-  hslToRgb,
-  isColorBlendModeValue,
-  isColorButtonMode,
-  isColorConfigBaseKey,
-  isColorConfigBaseTone,
-  isColorConfigBlendKey,
-  isColorConfigStateKey,
-  isColorConfigStateTone,
-  isColorHueKey,
-  isColorOpacityValue,
-  isColorTintKey,
-  isColorTokenValue,
-  isColorValue,
-  multiply,
-  parseColor,
-  parseTokenKey,
-  parseTokenValue,
-  rgbToHex,
-  rgbToHsl,
-  rgba,
-  rgbaToRGBA,
-  screen,
-  defaultTheme as studioTheme,
-  type BaseTheme,
-  type BoxShadow,
-  type CSSObject,
-  type ColorBlendModeTokenValue,
-  type ColorConfigCardKey,
-  type ColorConfigCardTone,
-  type ColorConfigBlendKey,
-  type ColorConfigOpacityValue,
-  type ColorConfigStateKey,
-  type ColorConfigStateTone,
-  type ColorConfigValue,
-  type HSL,
+// This file re-exports API members which existed in the `@sanity/ui` export in v1.
+
+import {
+  type BaseTheme as _BaseTheme,
+  type ThemeBoxShadow,
+  type HSL as _HSL,
   type PartialThemeColorBuilderOpts,
-  type RGB,
-  type RGBA,
-  type RootTheme,
-  type Theme,
+  type RGB as _RGB,
+  type RootTheme as _RootTheme,
+  type ThemeStyles,
+  type Theme as _Theme,
   type ThemeAvatar,
   type ThemeColor,
   type ThemeColorBase,
-  type ThemeColorBaseTokens,
-  type ThemeColorCardToneKey,
-  type ThemeColorBlendModeKey,
   type ThemeColorBuilderOpts,
   type ThemeColorButton,
-  type ThemeColorButtonModeKey,
-  type ThemeColorButtonState,
+  type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
   type ThemeColorButtonStates,
-  type ThemeColorButtonTokens,
   type ThemeColorButtonTones,
   type ThemeColorCard,
-  type ThemeColorCardState,
   type ThemeColorGenericState,
   type ThemeColorInput,
   type ThemeColorInputState,
@@ -76,40 +26,239 @@ export {
   type ThemeColorMutedTone,
   type ThemeColorName,
   type ThemeColorScheme,
-  type ThemeColorSchemeKey,
+  type ThemeColorSchemeKey as _ThemeColorSchemeKey,
   type ThemeColorSchemes,
   type ThemeColorSelectable,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorSyntax as _ThemeColorSyntax,
+  type ThemeColorToneKey,
+  type ThemeFont as _ThemeFont,
+  type ThemeFontKey as _ThemeFontKey,
+  type ThemeFontSize as _ThemeFontSize,
+  type ThemeFontWeight as _ThemeFontWeight,
+  type ThemeFontWeightKey as _ThemeFontWeightKey,
+  type ThemeFonts as _ThemeFonts,
+  type ThemeInput,
+  type ThemeLayer as _ThemeLayer,
+  type ThemeShadow as _ThemeShadow,
+  type ThemeColorButtonState,
+  type ThemeColorCardState,
   type ThemeColorSelectableState,
+  buildTheme,
+} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
+ */
+export type BaseTheme = _BaseTheme
+
+/**
+ * @public
+ * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
+ */
+export type BoxShadow = ThemeBoxShadow
+
+/**
+ * @public
+ * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
+ */
+export type HSL = _HSL
+
+/**
+ * @public
+ * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
+ */
+export type RGB = _RGB
+
+/**
+ * @public
+ * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
+ */
+export type RootTheme = _RootTheme
+
+/**
+ * @public
+ * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
+ */
+export type Styles = ThemeStyles
+
+/**
+ * @public
+ * @deprecated Use `Theme` from `@sanity/ui/theme` instead.
+ */
+export type Theme = _Theme
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeColorButtonModeKey = _ThemeColorButtonModeKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeColorSchemeKey = _ThemeColorSchemeKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
+ */
+export type ThemeColorSyntax = _ThemeColorSyntax
+
+/**
+ * @public
+ * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFont = _ThemeFont
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontKey = _ThemeFontKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontSize = _ThemeFontSize
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontWeight = _ThemeFontWeight
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFontWeightKey = _ThemeFontWeightKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
+ */
+export type ThemeFonts = _ThemeFonts
+
+/**
+ * @public
+ * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
+ */
+export type ThemeLayer = _ThemeLayer
+
+/**
+ * @public
+ * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
+ */
+export type ThemeShadow = _ThemeShadow
+
+export {
+  type PartialThemeColorBuilderOpts,
+  type ThemeAvatar,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
   type ThemeColorSelectableStates,
   type ThemeColorSolid,
   type ThemeColorSolidTone,
   type ThemeColorSpot,
   type ThemeColorSpotKey,
-  type ThemeColorStateKey,
-  type ThemeColorStateTokens,
-  type ThemeColorStateToneKey,
-  type ThemeColorStatesTokens,
-  type ThemeColorSyntax,
-  type ThemeColorTokenValue,
-  type ThemeColorTokens,
   type ThemeColorToneKey,
-  type ThemeConfig,
-  type ThemeFocusRing,
-  type ThemeFont,
-  type ThemeFontKey,
-  type ThemeFontSize,
-  type ThemeFontWeight,
-  type ThemeFontWeightKey,
-  type ThemeFonts,
   type ThemeInput,
-  type ThemeLayer,
-  type ThemeShadow,
-  type ThemeStyles,
-  type TokenBaseKeyNode,
-  type TokenBlendModeValueNode,
-  type TokenButtonKeyNode,
-  type TokenColorValueNode,
-  type TokenHueValueNode,
-  type TokenKeyNode,
-  type TokenValueNode,
+  type ThemeColorButtonState,
+  type ThemeColorCardState,
+  type ThemeColorSelectableState,
+}
+
+import {
+  createColorTheme as _createColorTheme,
+  hexToRgb as _hexToRgb,
+  hslToRgb as _hslToRgb,
+  multiply as _multiply,
+  parseColor as _parseColor,
+  rgbToHex as _rgbToHex,
+  rgbToHsl as _rgbToHsl,
+  rgba as _rgba,
+  screen as _screen,
 } from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
+ */
+export const createColorTheme = _createColorTheme
+
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hexToRgb = _hexToRgb
+
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hslToRgb = _hslToRgb
+
+/**
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
+ */
+export const multiply = _multiply
+
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
+ */
+export const parseColor = _parseColor
+
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHex = _rgbToHex
+
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHsl = _rgbToHsl
+
+/**
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
+ */
+export const rgba = _rgba
+
+/**
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
+ */
+export const screen = _screen
+
+/**
+ * @public
+ * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
+ */
+export const studioTheme = buildTheme()

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

@@ -16,8 +16,10 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   matchReferenceWidth: true,
 }
 
+const INITIAL_INDEX = 1
+
 export default function SelectedItemStory() {
-  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [selectedIndex, setSelectedIndex] = useState(INITIAL_INDEX)
 
   return (
     <Box padding={[4, 5, 6]}>
@@ -26,12 +28,13 @@ export default function SelectedItemStory() {
 
         <MenuButton
           button={<Button text="Open menu" />}
-          id="selected-item-example"
+          id="menu-button"
           menu={
             <Menu>
               <MenuItem
                 icon={SearchIcon}
                 iconRight={selectedIndex === 0 ? CheckmarkIcon : undefined}
+                id="menu-item-1"
                 onClick={() => setSelectedIndex(0)}
                 pressed={selectedIndex === 0}
                 selected={selectedIndex === 0}
@@ -40,6 +43,7 @@ export default function SelectedItemStory() {
               <MenuItem
                 icon={ClockIcon}
                 iconRight={selectedIndex === 1 ? CheckmarkIcon : undefined}
+                id="menu-item-2"
                 onClick={() => setSelectedIndex(1)}
                 pressed={selectedIndex === 1}
                 selected={selectedIndex === 1}
@@ -49,6 +53,7 @@ export default function SelectedItemStory() {
               <MenuItem
                 icon={ExpandIcon}
                 iconRight={selectedIndex === 2 ? CheckmarkIcon : undefined}
+                id="menu-item-3"
                 onClick={() => setSelectedIndex(2)}
                 pressed={selectedIndex === 2}
                 selected={selectedIndex === 2}

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

@@ -99,6 +99,16 @@ export const MenuButton = forwardRef(function MenuButton(
     setShouldFocus(null)
   }, [])
 
+  // Prevent mouse event propagation when the menu is open.
+  // This is to ensure that `handleBlur` isn't triggered when clicking the menu button whilst open,
+  // which can lead to `setOpen` being triggered multiple times (once by `handleBlur`, and again by `handleButtonClick`).
+  const handleMouseDown = useCallback(
+    (event: PointerEvent) => {
+      if (open) event.preventDefault()
+    },
+    [open],
+  )
+
   const handleButtonKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {
     // On `ArrowDown`, `Enter` and `Space`
     // - Opens menu and moves focus to first menuitem
@@ -231,13 +241,14 @@ export const MenuButton = forwardRef(function MenuButton(
             id,
             onClick: handleButtonClick,
             onKeyDown: handleButtonKeyDown,
+            onMouseDown: handleMouseDown,
             'aria-haspopup': true,
             'aria-expanded': open,
             ref: setButtonRef,
             selected: open,
           })
         : null,
-    [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef],
+    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef],
   )
 
   const popoverProps: MenuButtonProps['popover'] = useMemo(

package/src/core/constants.ts

@@ -1,3 +1,5 @@
+import {Transition, Variant} from 'framer-motion'
+
 /**
  * @internal
  */
@@ -8,6 +10,22 @@ export const EMPTY_ARRAY: never[] = []
  */
 export const EMPTY_RECORD: Record<string, never> = {}
 
+/**
+ * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
+ * @internal
+ */
+export const POPOVER_MOTION_PROPS: {
+  animate: Variant
+  initial: Variant
+  exit: Variant
+  transition: Transition
+} = {
+  initial: {opacity: 0.5, scale: 0.97},
+  animate: {opacity: 1, scale: 1},
+  exit: {opacity: 0, scale: 0.97},
+  transition: {duration: 0.4, type: 'spring'},
+}
+
 /**
  * @internal
  * @deprecated No longer used.

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,9 +1,12 @@
 /** @jest-environment node */
-import {defaultTheme} from '@sanity/ui/theme'
+
+import {buildTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
 import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
 
+const theme = buildTheme()
+
 function Log() {
   const mediaIndex = useMediaIndex()
 
@@ -14,7 +17,7 @@ describe('useMediaIndex', () => {
   it(`SSR to static markup returns 0`, () => {
     expect(
       renderToStaticMarkup(
-        <ThemeProvider theme={defaultTheme}>
+        <ThemeProvider theme={theme}>
           <Log />
         </ThemeProvider>,
       ),
@@ -23,7 +26,7 @@ describe('useMediaIndex', () => {
   it(`SSR to markup for hydration doesn't throw`, () => {
     expect(
       renderToString(
-        <ThemeProvider theme={defaultTheme}>
+        <ThemeProvider theme={theme}>
           <Log />
         </ThemeProvider>,
       ),

package/src/core/middleware/origin.ts

@@ -0,0 +1,47 @@
+import {Middleware} from '@floating-ui/react-dom'
+
+/**
+ * Custom floating-ui middleware which calculates transform-origin X + Y offsets
+ * based on the current floating rect's dimensions and shift offset.
+ *
+ * Scaling popovers with these transform-origin offsets will give the effect of
+ * popvers slightly 'growing' from the origin/reference element.
+ *
+ * This middleware must be applied after both `@sanity/ui/size` and `shift` middlewares.
+ */
+export const origin: Middleware = {
+  name: '@sanity/ui/origin',
+  fn({middlewareData, placement, rects}) {
+    const [side] = placement.split('-')
+
+    const floatingWidth = rects.floating.width
+    const floatingHeight = rects.floating.height
+
+    const shiftX = middlewareData.shift?.x || 0
+    const shiftY = middlewareData.shift?.y || 0
+
+    if (floatingWidth <= 0 || floatingHeight <= 0) {
+      return {}
+    }
+
+    const isVerticalPlacement = ['bottom', 'top'].includes(side)
+
+    const {originX, originY}: {originX: number; originY: number} = isVerticalPlacement
+      ? {
+          originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
+          originY: side === 'bottom' ? 0 : 1,
+        }
+      : {
+          originX: side === 'left' ? 1 : 0,
+          originY: clamp(0.5 - shiftY / floatingHeight, 0, 1),
+        }
+
+    return {
+      data: {originX, originY},
+    }
+  },
+}
+
+function clamp(num: number, min: number, max: number) {
+  return Math.min(Math.max(num, min), max)
+}

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

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 0, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center">

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

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 0, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center">

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

@@ -69,12 +69,12 @@ export const Avatar = forwardRef(function Avatar(
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
     status = 'online',
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props
+  const {avatar} = useTheme_v2()
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
-  const {avatar} = useTheme_v2()
 
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
@@ -111,7 +111,17 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s * 2)), [size])
+  const initialsSize = useMemo(
+    () =>
+      size.map((s) => {
+        if (s === 1) return 1
+        if (s === 2) return 3
+        if (s === 3) return 5
+
+        return 0
+      }),
+    [size],
+  )
 
   return (
     <Root
@@ -175,7 +185,7 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <InitialsLabel forwardedAs="span" size={initialsSize}>
+            <InitialsLabel forwardedAs="span" size={initialsSize} weight="medium">
               {initials}
             </InitialsLabel>
           </Initials>

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

@@ -5,7 +5,7 @@ import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
-import {Text} from '../text'
+import {Label} from '../label'
 
 function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
   const {avatar, media} = getTheme_v2(props.theme)
@@ -67,15 +67,26 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   props: AvatarCounterProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {count, size: sizeProp = 0} = props
+  const {count, size: sizeProp = 1} = props
   const size = useArrayProp(sizeProp)
-  const counterSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+
+  const fontSize = useMemo(
+    () =>
+      size.map((s) => {
+        if (s === 1) return 1
+        if (s === 2) return 3
+        if (s === 3) return 5
+
+        return 0
+      }),
+    [size],
+  )
 
   return (
     <Root $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Text as="span" size={counterSize} weight="medium">
+      <Label as="span" size={fontSize} weight="medium">
         {count}
-      </Text>
+      </Label>
     </Root>
   )
 })

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

@@ -63,7 +63,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props
   const children = childrenToElementArray(childrenProp).filter(
@@ -81,7 +81,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     <Root data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
       {len === 0 && (
         <div>
-          <AvatarCounter count={len} />
+          <AvatarCounter count={len} size={size} />
         </div>
       )}