@sanity/ui 2.0.0-beta.2 → 2.0.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.21",
   "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",
     "@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__/fontsPlugin.tsx

@@ -3,20 +3,60 @@ import {createGlobalStyle} from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
   @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: normal;
-    font-weight: 100 900;
+    font-weight: 400;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
-    font-named-instance: 'Regular';
+    src: url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2');
   }
   @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: italic;
-    font-weight: 100 900;
+    font-weight: 400;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
-    font-named-instance: 'Italic';
+    src: url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2');
   }
 `
 

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/dialog/dialog.tsx

@@ -394,6 +394,7 @@ export const Dialog = forwardRef(function Dialog(
     <Portal __unstable_name={portalProp}>
       <Root
         {...restProps}
+        $animate={animate}
         $padding={padding}
         $position={position}
         aria-labelledby={labelId}
@@ -406,7 +407,6 @@ export const Dialog = forwardRef(function Dialog(
         ref={ref}
         role="dialog"
         zOffset={zOffset}
-        animate={animate}
       >
         <div ref={preDivRef} tabIndex={0} />
         <DialogCard

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

@@ -41,11 +41,11 @@ export function responsiveDialogPositionStyle(
  * @internal
  */
 export interface AnimationDialogStyleProps {
-  animate: boolean
+  $animate: boolean
 }
 
 export function animationDialogStyle(props: AnimationDialogStyleProps): ReturnType<typeof css> {
-  if (!props.animate) return css``
+  if (!props.$animate) return css``
 
   return css`
     @keyframes zoomIn {

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/components/toast/toast.tsx

@@ -1,7 +1,9 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorToneKey} from '@sanity/ui/theme'
 import styled from 'styled-components'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
+import type {ButtonTone} from '../../types'
 
 /**
  * @public
@@ -20,17 +22,28 @@ const STATUS_CARD_TONE: {[key: string]: ThemeColorToneKey} = {
   warning: 'caution',
   success: 'positive',
   info: 'primary',
-}
+} as const
+
+const BUTTON_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'primary',
+} satisfies {[key: string]: ButtonTone}
 
 const ROLES = {
   error: 'alert',
   warning: 'alert',
   success: 'alert',
   info: 'alert',
-}
+} as const
 
 const Root = styled(Card)`
   pointer-events: all;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
 `
 
 const TextBox = styled(Flex)`
@@ -49,6 +62,7 @@ export function Toast(
 ): React.ReactElement {
   const {closable, description, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
+  const buttonTone = status ? BUTTON_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
   return (
@@ -84,6 +98,7 @@ export function Toast(
               icon={CloseIcon}
               mode="bleed"
               padding={2}
+              tone={buttonTone}
               onClick={onClose}
               style={{verticalAlign: 'top'}}
             />

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

@@ -1,6 +1,7 @@
 import {AnimatePresence, motion} from 'framer-motion'
 import {useCallback, useEffect, useMemo, useRef, useState, startTransition} from 'react'
 import styled from 'styled-components'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'
@@ -132,9 +133,25 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
               <AnimatePresence initial={false}>
                 {state.map(({dismiss, id, params}) => (
                   <motion.div
-                    animate={{opacity: 1, y: 0, scale: 1}}
-                    exit={{opacity: 0, scale: 0.5, transition: {duration: 0.2}}}
-                    initial={{opacity: 0, y: 32, scale: 0.25}}
+                    animate={{
+                      opacity: [0, 1, 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 as string]: [1, 0, 0],
+                      scale: 0.5,
+                      transition: {duration: 0.2},
+                    }}
+                    initial={{
+                      opacity: 0,
+                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+                      y: 32,
+                      scale: 0.25,
+                      willChange: 'transform',
+                    }}
                     key={id}
                     layout="position"
                     transition={{type: 'spring', damping: 30, stiffness: 400}}

package/src/core/constants.ts

@@ -1,3 +1,5 @@
+import {Transition, Variant} from 'framer-motion'
+
 /**
  * @internal
  */
@@ -8,6 +10,41 @@ export const EMPTY_ARRAY: never[] = []
  */
 export const EMPTY_RECORD: Record<string, never> = {}
 
+/**
+ * @internal
+ */
+export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity'
+
+/**
+ * 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,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+    scale: 0.97,
+    willChange: 'transform',
+  },
+  animate: {
+    opacity: [null, 1, 1],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [null, null, 1],
+    scale: 1,
+  },
+  exit: {
+    // @ts-expect-error -- passing null a second time is valid: https://github.com/framer/motion/blob/b9ce4c42914c3916ea523609c5b032dfc72718bb/packages/framer-motion/src/animation/utils/keyframes.ts#L34C22-L34C22
+    opacity: [null, null, 0],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [null, 0, 0],
+    scale: 0.97,
+  },
+  transition: {duration: 0.4, type: 'spring'},
+}
+
 /**
  * @internal
  * @deprecated No longer used.