@sanity/ui 3.0.0-static.31 → 3.0.0-static.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.31",
+  "version": "3.0.0-static.33",
   "keywords": [
     "react",
     "ui",
@@ -117,8 +117,8 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@commitlint/cli": "19.5.0",
-    "@commitlint/config-conventional": "19.5.0",
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
     "@eslint/js": "^9.29.0",
     "@sanity/browserslist-config": "^1.0.5",
     "@sanity/pkg-utils": "^7.2.6",
@@ -154,7 +154,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-4448b187-20250515",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-12bc60f5-20250613",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^9.0.11",
@@ -206,7 +206,7 @@
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "dev": "run-p workshop:clean workshop:dev",
+    "dev": "run-p workshop:dev storybook:dev",
     "figma:build": "pnpm run --filter 'figma-plugin-sanity-ui' build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
@@ -222,7 +222,7 @@
     "watch": "pkg watch --strict",
     "workshop:build": "workshop build",
     "workshop:clean": "rimraf .workshop",
-    "workshop:dev": "workshop dev",
+    "workshop:dev": "run-s workshop:clean && workshop dev",
     "workshop:preview": "workshop preview"
   }
 }

package/src/core/{primitives/root/Root.tsx → Root.tsx}

@@ -1,9 +1,9 @@
 import {box, root, type RootStyleProps} from '@sanity/ui/css'
 import {useCallback, useImperativeHandle, useRef, useState} from 'react'
 
-import type {Props} from '../../types/props'
-import {Box, type BoxOwnProps} from '../box/box'
+import {Box, type BoxOwnProps} from './primitives/box/box'
 import {RootProvider} from './RootProvider'
+import type {Props} from './types/props'
 
 /** @public */
 export const DEFAULT_ROOT_ELEMENT = 'html'
@@ -27,10 +27,11 @@ export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(pr
     as: as = DEFAULT_ROOT_ELEMENT,
     children,
     className,
-    height = 'fill',
+    height,
+    overflow = 'hidden',
     ref: forwardedRef,
     scheme = 'light',
-    tone = 'transparent',
+    tone = 'default',
     ...rest
   } = props as RootProps<typeof DEFAULT_ROOT_ELEMENT>
 
@@ -76,6 +77,7 @@ export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(pr
         scheme,
         tone,
       })}
+      overflow={overflow}
       ref={handleRef}
     >
       {node}

package/src/core/{primitives/root/RootProvider.tsx → RootProvider.tsx}

@@ -1,11 +1,11 @@
 import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import type {ReactNode} from 'react'
 
-import {ToastProvider} from '../../components/toast/toastProvider'
-import {BoundaryElementProvider} from '../../utils/boundaryElement/boundaryElementProvider'
-import {PortalProvider} from '../../utils/portal/portalProvider'
-import {CardProvider} from '../card/cardProvider'
-import {LayerProvider} from '../layer/layerProvider'
+import {ToastProvider} from './components/toast/toastProvider'
+import {CardProvider} from './primitives/card/cardProvider'
+import {LayerProvider} from './primitives/layer/layerProvider'
+import {BoundaryElementProvider} from './utils/boundaryElement/boundaryElementProvider'
+import {PortalProvider} from './utils/portal/portalProvider'
 
 /** @public */
 export interface RootProviderProps {

package/src/core/__workshop__/boundary.tsx

@@ -0,0 +1,28 @@
+import {Box, Button, Root, Stack, Text, useCard, useToast} from '@sanity/ui'
+
+export default function BoundaryStory() {
+  const {scheme} = useCard()
+
+  return (
+    <Box padding={5}>
+      <Root as="div" padding={5} radius={4} scheme={scheme}>
+        <Layout />
+      </Root>
+    </Box>
+  )
+}
+
+function Layout() {
+  const toast = useToast()
+
+  return (
+    <Stack gap={4}>
+      <Text size={1}>
+        Testing the root component. Toast messages will be rendered here, and should be contained
+        within the root element.
+      </Text>
+
+      <Button onClick={() => toast.push({title: 'Hello!'})} text="Push toast message" width="min" />
+    </Stack>
+  )
+}

package/src/core/__workshop__/index.ts

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

package/src/core/index.ts

@@ -96,8 +96,6 @@ export * from './primitives/layer/useLayer'
 export * from './primitives/popover/popover'
 export * from './primitives/popover/types'
 export * from './primitives/radio/radio'
-export * from './primitives/root/Root'
-export * from './primitives/root/RootProvider'
 export * from './primitives/select/select'
 export * from './primitives/selectable/selectable'
 export * from './primitives/selectable/types'
@@ -128,6 +126,10 @@ export * from './utils/portal/portalProvider'
 export * from './utils/portal/types'
 export * from './utils/portal/usePortal'
 
+// root
+export * from './Root'
+export * from './RootProvider'
+
 // types
 export * from './types/gridItem'
 export * from './types/placement'

package/src/core/primitives/card/card.tsx

@@ -1,9 +1,10 @@
 import {card, type CardStyleProps} from '@sanity/ui/css'
+import {useContext} from 'react'
 
 import type {Props} from '../../types/props'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
+import {CardContext} from './cardContext'
 import {CardProvider} from './cardProvider'
-import {useCard} from './useCard'
 
 /** @public */
 export const DEFAULT_CARD_ELEMENT = 'div'
@@ -54,7 +55,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
     ...rest
   } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
-  const parent = useCard()
+  const parent = useContext(CardContext)
   const tone = toneProp === 'inherit' ? parent?.tone : toneProp
   const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
 
@@ -96,7 +97,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
     const CompatProvider = parent.unstable_CompatProvider
 
     return (
-      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent?.tone ?? 'default'}>
+      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent.tone}>
         {node}
       </CompatProvider>
     )

package/src/core/primitives/card/useCard.ts

@@ -4,6 +4,12 @@ import {CardContext} from './cardContext'
 import type {CardContextValue} from './types'
 
 /** @public */
-export function useCard(): CardContextValue | null {
-  return useContext(CardContext)
+export function useCard(): CardContextValue {
+  const card = useContext(CardContext)
+
+  if (!card) {
+    throw new Error('useCard(): missing context value')
+  }
+
+  return card
 }

package/src/core/primitives/grid/types.ts

@@ -1,7 +1,7 @@
 export {
   /**
    * @public
-   * @deprecated Use `GridAutoCols` from `@sanity/ui/css` instead.
+   * @deprecated Use `GridAutoColumns` from `@sanity/ui/css` instead.
    */
   type GridAutoCols,
   /**

package/src/core/primitives/popover/popover.tsx

@@ -1,5 +1,6 @@
 import {
   arrow,
+  autoPlacement,
   autoUpdate,
   flip,
   hide,
@@ -99,6 +100,16 @@ export type PopoverOwnProps = Omit<LayerOwnProps, 'maxWidth'> & {
   modal?: boolean
   open?: boolean
   placement?: Placement
+  /**
+   * When 'flip' (default), the placement is determined from the initial placement and the
+   * fallback placements in order. Whichever fits in the viewport first.
+   *
+   * When 'autoPlacement', the initial placement and all fallback placements are evaluated
+   * and the placement with the most viewport space available.
+   *
+   * Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
+   */
+  placementStrategy?: 'flip' | 'autoPlacement'
   /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
@@ -171,6 +182,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     overflow = 'hidden',
     padding,
     placement: placementProp = 'bottom',
+    placementStrategy = 'flip',
     portal,
     preventOverflow = true,
     radius = 3,
@@ -205,14 +217,22 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
 
     // Flip the floating element when leaving the boundary box
     if (constrainSize || preventOverflow) {
-      ret.push(
-        flip({
-          boundary: floatingBoundary || undefined,
-          fallbackPlacements,
-          padding: DEFAULT_POPOVER_PADDING,
-          rootBoundary,
-        }),
-      )
+      if (placementStrategy === 'autoPlacement') {
+        ret.push(
+          autoPlacement({
+            allowedPlacements: [placementProp].concat(fallbackPlacements),
+          }),
+        )
+      } else {
+        ret.push(
+          flip({
+            boundary: floatingBoundary || undefined,
+            fallbackPlacements,
+            padding: DEFAULT_POPOVER_PADDING,
+            rootBoundary,
+          }),
+        )
+      }
     }
 
     // Define distance between reference and floating element
@@ -287,6 +307,8 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     constrainSize,
     fallbackPlacements,
     floatingBoundary,
+    placementProp,
+    placementStrategy,
     margins,
     matchReferenceWidth,
     preventOverflow,
@@ -405,10 +427,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     open &&
     (portal ? (
       <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-        <CardProvider
-          tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
-          scheme={scheme ?? 'light'}
-        >
+        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>

package/src/core/primitives/tooltip/tooltip.tsx

@@ -419,10 +419,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     showTooltip &&
     (portalProp ? (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        <CardProvider
-          tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
-          scheme={scheme ?? 'light'}
-        >
+        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>

package/src/core/utils/portal/portal.tsx

@@ -28,11 +28,7 @@ export function Portal(props: PortalProps): ReactPortal | null {
   }
 
   return createPortal(
-    <CardProvider
-      // rendered={true}
-      tone="transparent" // card?.tone || 'default',
-      scheme={card?.scheme || 'light'}
-    >
+    <CardProvider tone="transparent" scheme={card.scheme}>
       {children}
     </CardProvider>,
     portalElement,

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

@@ -2,11 +2,11 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
 export const layer = _style(layers.components, {
-  position: 'fixed',
+  position: 'absolute',
   right: 0,
   bottom: 0,
   pointerEvents: 'none',
-  minWidth: `${320 / 16}rem`, // 320px
+  // minWidth: `${320 / 16}rem`, // 320px
   maxWidth: `${420 / 16}rem`, // 420px
   width: '100%',
 })

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

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

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

@@ -11,7 +11,7 @@ export function root(props: RootStyleProps) {
     props.className,
     themeClassName,
     _root,
-    card({scheme: props.scheme ?? 'light', tone: props.tone ?? 'transparent'}),
-    height({height: props.height ?? 'fill'}),
+    card({scheme: props.scheme ?? 'light', tone: props.tone ?? 'default'}),
+    height(props),
   )
 }

package/src/css/props/gridColumnStart/types.ts

@@ -12,7 +12,7 @@ export type GridItemColumnStart = 'auto' | number
 /** @public */
 export interface GridColumnStartStyleProps {
   /**
-   * @deprecated Use `gridColumn` instead
+   * @deprecated Use `gridColumnStart` instead
    */
   columnStart?: ResponsiveProp<GridItemColumnStart>
   gridColumnStart?: ResponsiveProp<GridColumnStart>

package/dist/css/layers.css

@@ -1,4 +0,0 @@
-@layer ui-theme;
-@layer ui-props;
-@layer ui-primitives;
-@layer ui-components;

package/dist/css/primitives/popover/popover.css

@@ -1,4 +0,0 @@
-@layer ui-primitives;
-@layer ui-primitives {
-
-}

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

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

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

@@ -1,8 +0,0 @@
-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'))}],
-})