@sanity/ui 3.0.0-static.28 → 3.0.0-static.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.28",
+  "version": "3.0.0-static.29",
   "keywords": [
     "react",
     "ui",
@@ -37,11 +37,11 @@
     },
     "./css": {
       "source": "./exports/css.ts",
-      "import": "./dist/css.js",
-      "require": "./dist/css.cjs",
-      "default": "./dist/css.js"
+      "import": "./dist/css/index.js",
+      "require": "./dist/css/index.cjs",
+      "default": "./dist/css/index.js"
     },
-    "./index.css": "./dist/index.css",
+    "./css/index.css": "./dist/css/index.css",
     "./package.json": "./package.json",
     "./theme": {
       "source": "./exports/theme.ts",
@@ -210,15 +210,15 @@
     "figma:build": "pnpm run --filter 'figma-plugin-sanity-ui' build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
-    "pkg:build": "mkdirp dist && touch dist/index.css && NODE_ENV=production pkg build --strict",
+    "pkg:build": "mkdirp dist/css && touch dist/css/index.css && NODE_ENV=production pkg build --strict",
     "pkg:check": "pkg --strict",
-    "pkg:watch": "mkdirp dist && touch dist/index.css && pkg watch --strict",
+    "pkg:watch": "mkdirp dist/css && touch dist/css/index.css && NODE_ENV=production pkg watch --strict",
     "release": "semantic-release",
     "storybook:build": "pnpm run --filter 'sanity-ui-storybook' build",
     "storybook:dev": "pnpm run --filter 'sanity-ui-storybook' dev",
     "test": "vitest run",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:preview' http://localhost:1337 'run-s cypress:run'",
-    "typecheck": "tsc",
+    "typecheck": "tsc --build",
     "watch": "pkg watch --strict",
     "workshop:build": "workshop build",
     "workshop:clean": "rimraf .workshop",

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

@@ -22,9 +22,9 @@ import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_raf} from '../../helpers/animation'
 import {_hasFocus, focusFirstDescendant} from '../../helpers/focus'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import {Selectable} from '../../primitives/_selectable'
 import {Box, type BoxOwnProps} from '../../primitives/box'
 import {Button} from '../../primitives/button'
-import {Card} from '../../primitives/card'
 import {Popover, type PopoverProps} from '../../primitives/popover'
 import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
 import {Stack} from '../../primitives/stack'
@@ -157,11 +157,11 @@ export function Autocomplete<
 
   const defaultRenderOption = useCallback(
     ({value}: BaseAutocompleteOption) => (
-      <Card as="button" padding={paddingProp} radius={2} tone="inherit">
+      <Selectable as="button" padding={paddingProp} radius={2}>
         <Text size={fontSize} textOverflow="ellipsis">
           {value}
         </Text>
-      </Card>
+      </Selectable>
     ),
     [fontSize, paddingProp],
   )

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

@@ -1,7 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
 import {type RadiusStyleProps, toast} from '@sanity/ui/css'
 import {motion, type Variant, type Variants} from 'framer-motion'
-import type {ReactNode} from 'react'
+import {type ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {Box} from '../../primitives/box'
@@ -12,28 +12,29 @@ import {Stack} from '../../primitives/stack'
 import {Text} from '../../primitives/text'
 import type {ComponentType, Props} from '../../types/props'
 
-/** @public */
+/** @internal */
 export const DEFAULT_TOAST_ELEMENT = 'li'
 
-/** @public */
+/** @internal */
 export type ToastOwnProps = RadiusStyleProps & {
   closable?: boolean
   description?: ReactNode
   onClose?: () => void
   title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
-  /** @deprecated */
   duration?: number
-  /** @deprecated */
-  updatedAt?: number
 }
 
-/** @public */
+/** @internal */
 export type ToastElementType = 'li' | ComponentType
 
-/** @public */
+/** @internal */
 export type ToastProps<E extends ToastElementType = ToastElementType> = Props<ToastOwnProps, E>
 
+// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions
+// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
+const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
+
 const ROLES = {
   error: 'alert',
   warning: 'alert',
@@ -58,9 +59,9 @@ const BUTTON_TONE = {
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
  *
- * @public
+ * @internal
  */
 export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
   props: ToastProps<E>,
@@ -69,14 +70,11 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
     as = DEFAULT_TOAST_ELEMENT,
     closable,
     description,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     duration,
     onClose,
     radius = 3,
     title,
     status,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    updatedAt,
     ...rest
   } = props as ToastProps<typeof DEFAULT_TOAST_ELEMENT>
 
@@ -89,7 +87,7 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
   const visualDuration: number = prefersReducedMotion ? 0 : 0.26
   const transition = visualDuration ? {type: 'spring', visualDuration, bounce: 0.25} : {duration: 0}
 
-  // const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
+  const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
   const initial: ContainerVariants[] = ['hidden', 'initial']
   const animate: ContainerVariants[] = ['visible', 'slideIn']
   const exit: ContainerVariants[] = ['hidden', 'slideOut']
@@ -102,6 +100,7 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
       role={role}
       {...rest}
       custom={visualDuration}
+      data-has-duration={hasDuration ? '' : undefined}
       radius={radius}
       shadow={2}
       tone={cardTone}

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

@@ -13,7 +13,6 @@ import type {ToastContextValue, ToastParams} from './types'
 type ToastState = {
   dismiss: () => void
   id: string
-  updatedAt: number
   params: ToastParams
 }[]
 
@@ -31,8 +30,8 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
 
   const value: ToastContextValue = useMemo(() => {
     const push = (params: ToastParams) => {
-      const id = params.id || generateToastId()
-      const duration = params.duration || 5000
+      const id = params.id ?? generateToastId()
+      const duration = params.duration ?? 5000
 
       startTransition(() => {
         setState((prevState): ToastState => {
@@ -51,10 +50,17 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
            * This function will be passed to the Toast component
            * and called either on close button click or after duration.
            */
-          const dismiss = () =>
-            startTransition(() =>
-              setState((currentState) => currentState.filter((toast) => toast.id !== id)),
-            )
+          const dismiss = () => {
+            startTransition(() => {
+              if (timeoutId) {
+                clearTimeout(timeoutId)
+              }
+
+              setState((currentState) => currentState.filter((toast) => toast.id !== id))
+            })
+          }
+
+          const timeoutId = setTimeout(dismiss, duration)
 
           /**
            * Create updated state by:
@@ -67,7 +73,6 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
             {
               dismiss,
               id,
-              updatedAt: Date.now(),
               params: {...params, duration},
             },
           ]
@@ -87,7 +92,7 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
         <LayerProvider zOffset={zOffset}>
           <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>
             <AnimatePresence initial={false} mode="popLayout">
-              {state.map(({dismiss, id, params, updatedAt}) => (
+              {state.map(({dismiss, id, params}) => (
                 <Toast
                   key={id}
                   closable={params.closable}
@@ -96,7 +101,6 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
                   status={params.status}
                   title={params.title}
                   duration={params.duration}
-                  updatedAt={updatedAt}
                 />
               ))}
             </AnimatePresence>

package/src/core/index.ts

@@ -58,6 +58,7 @@ export * from './primitives/label'
 export * from './primitives/layer'
 export * from './primitives/popover'
 export * from './primitives/radio'
+export * from './primitives/root'
 export * from './primitives/select'
 export * from './primitives/skeleton'
 export * from './primitives/spinner'

package/src/core/primitives/root/Root.tsx

@@ -0,0 +1,89 @@
+import {box, root, type RootStyleProps} from '@sanity/ui/css'
+import {useCallback, useImperativeHandle, useRef, useState} from 'react'
+
+import {ToastProvider} from '../../components/toast'
+import type {Props} from '../../types/props'
+import {BoundaryElementProvider} from '../../utils/boundaryElement'
+import {PortalProvider} from '../../utils/portal'
+import {Box, type BoxOwnProps} from '../box'
+import {CardProvider} from '../card'
+import {LayerProvider} from '../layer'
+
+/** @public */
+export const DEFAULT_ROOT_ELEMENT = 'html'
+
+/** @public */
+export interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
+
+/** @public */
+export type RootElementType = 'html' | 'body' | 'div'
+
+/** @public */
+export type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
+
+/**
+ * The `Root` component.
+ *
+ * @public
+ */
+export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(props: RootProps<E>) {
+  const {
+    as: as = DEFAULT_ROOT_ELEMENT,
+    children,
+    className,
+    height = 'fill',
+    ref: forwardedRef,
+    scheme = 'light',
+    tone = 'transparent',
+    ...rest
+  } = props as RootProps<typeof DEFAULT_ROOT_ELEMENT>
+
+  const ref = useRef<HTMLHtmlElement | null>(null)
+
+  useImperativeHandle<HTMLHtmlElement | null, HTMLHtmlElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLElement | null>(null)
+
+  const handleRef = useCallback((el: HTMLHtmlElement | null) => {
+    setBoundaryElement(el)
+    ref.current = el
+  }, [])
+
+  let node = (
+    <LayerProvider>
+      <CardProvider scheme={scheme} tone={tone}>
+        <ToastProvider>
+          <BoundaryElementProvider element={boundaryElement}>
+            <PortalProvider element={portalElement}>{children}</PortalProvider>
+          </BoundaryElementProvider>
+          <div data-portal="" ref={setPortalElement} />
+        </ToastProvider>
+      </CardProvider>
+    </LayerProvider>
+  )
+
+  if (as === 'html') {
+    node = <body className={box({height, margin: 0})}>{node}</body>
+  }
+
+  return (
+    <Box
+      as={as}
+      data-ui="Root"
+      {...rest}
+      className={root({
+        className,
+        height,
+        scheme,
+        tone,
+      })}
+      ref={handleRef}
+    >
+      {node}
+    </Box>
+  )
+}

package/src/core/primitives/root/__workshop__/boundary.tsx

@@ -0,0 +1,5 @@
+import {Root} from '@sanity/ui'
+
+export default function BoundaryStory() {
+  return <Root>Hello!</Root>
+}

package/src/core/primitives/root/__workshop__/index.ts

@@ -0,0 +1,8 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/radio',
+  title: 'Radio',
+  stories: [{name: 'boundary', title: 'Boundary', component: lazy(() => import('./boundary'))}],
+})

package/src/core/primitives/root/index.ts

@@ -0,0 +1 @@
+export * from './Root'

package/src/css/components/toast/toast.css.ts

@@ -6,6 +6,7 @@ export const layer = _style(layers.components, {
   right: 0,
   bottom: 0,
   pointerEvents: 'none',
+  minWidth: `${320 / 16}rem`, // 320px
   maxWidth: `${420 / 16}rem`, // 420px
   width: '100%',
 })

package/src/css/defaultTheme.css.ts

@@ -25,7 +25,7 @@ import {
   type ThemeColorVariantKey,
   TINTS,
 } from '@sanity/ui/theme'
-import {createTheme} from '@vanilla-extract/css'
+import {createTheme, globalFontFace} from '@vanilla-extract/css'
 
 import {_fromEntries} from './_fromEntries'
 import {layers} from './layers.css'
@@ -33,6 +33,59 @@ import type {CSSTheme, CSSThemeColorCard} from './types'
 import {px, toBoxShadow} from './util'
 import {paletteVars, themeVars} from './vars.css'
 
+const fontDisplay: FontDisplay = 'auto'
+
+globalFontFace('Inter', [
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '400',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '400',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '500',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '500',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '600',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '600',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '700',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '700',
+  },
+])
+
 const theme = buildTheme_v3()
 
 const themeValue: CSSTheme = {
@@ -253,7 +306,7 @@ const themeValue: CSSTheme = {
 } as const
 
 /** @public */
-export const defaultTheme = createTheme(themeVars, themeValue)
+export const themeClassName = createTheme(themeVars, themeValue)
 
 function renderColorScheme(options: {scheme: ThemeColorSchemeKey}) {
   const {scheme} = options

package/src/css/index.ts

@@ -3,6 +3,7 @@
 export * from './layers.css'
 export * from './vars.css'
 
+// theme
 export * from './defaultTheme.css'
 
 // props
@@ -61,6 +62,7 @@ export * from './primitives/kbd'
 export * from './primitives/label'
 export * from './primitives/popover'
 export * from './primitives/radio'
+export * from './primitives/root'
 export * from './primitives/select'
 export * from './primitives/spinner'
 export * from './primitives/srOnly'

package/src/css/primitives/root/index.ts

@@ -0,0 +1,2 @@
+export * from './root'
+export * from './types'

package/src/css/primitives/root/root.css.ts

@@ -0,0 +1,15 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+
+export const _root = _style(layers.primitives, {
+  minWidth: `${320 / 16}rem`, // 320px
+
+  selectors: {
+    'html.&': {
+      MozTextSizeAdjust: 'none',
+      WebkitTextSizeAdjust: 'none',
+      textSizeAdjust: 'none',
+      WebkitFontSmoothing: 'antialiased',
+    },
+  },
+})

package/src/css/primitives/root/root.ts

@@ -0,0 +1,17 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {themeClassName} from '../../defaultTheme.css'
+import {height} from '../../props/height'
+import {card} from '../card'
+import {_root} from './root.css'
+import type {RootStyleProps} from './types'
+
+/** @public */
+export function root(props: RootStyleProps) {
+  return _composeClassNames(
+    props.className,
+    themeClassName,
+    _root,
+    card({scheme: props.scheme ?? 'light', tone: props.tone ?? 'transparent'}),
+    height({height: props.height ?? 'fill'}),
+  )
+}

package/src/css/primitives/root/types.ts

@@ -0,0 +1,10 @@
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+
+import type {HeightStyleProps} from '../../props/height'
+
+/** @public */
+export interface RootStyleProps extends HeightStyleProps {
+  className?: string
+  scheme?: ThemeColorSchemeKey
+  tone?: ThemeColorCardToneKey
+}