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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.32",
+  "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/Root.tsx

@@ -27,11 +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>
 

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,

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

@@ -2,6 +2,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
 export const _root = _style(layers.primitives, {
+  WebkitFontSmoothing: 'antialiased',
   // minWidth: `${320 / 16}rem`, // 320px
 
   selectors: {
@@ -9,7 +10,6 @@ export const _root = _style(layers.primitives, {
       MozTextSizeAdjust: 'none',
       WebkitTextSizeAdjust: 'none',
       textSizeAdjust: 'none',
-      WebkitFontSmoothing: 'antialiased',
     },
 
     'div.&': {

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'}),
+    card({scheme: props.scheme ?? 'light', tone: props.tone ?? 'default'}),
     height(props),
   )
 }

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 {
-
-}