@sanity/ui 2.8.12 → 2.8.13-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.12",
+  "version": "2.8.13-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -51,32 +51,6 @@
     "src",
     "theme.js"
   ],
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "prepack": "pnpm build",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -110,6 +84,7 @@
     "@sanity/icons": "^3.4.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
+    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -152,6 +127,8 @@
     "@types/refractor": "^3.4.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "babel-plugin-react-compiler": "beta",
     "commitizen": "^4.3.0",
     "cypress": "^13.13.2",
     "cypress-real-events": "^1.13.0",
@@ -176,6 +153,7 @@
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
+    "react-compiler-runtime": "beta",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "refractor": "^4.8.1",
@@ -195,19 +173,37 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.12.3",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "pnpm": {
-    "overrides": {
-      "conventional-changelog-conventionalcommits": ">= 8.0.0"
-    }
-  },
   "esm.sh": {
     "bundle": false
+  },
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

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

@@ -28,13 +28,7 @@ import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} fr
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
-import {
-  ConditionalWrapper,
-  LayerProps,
-  LayerProvider,
-  Portal,
-  useBoundaryElement,
-} from '../../utils'
+import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
 import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {
   DEFAULT_POPOVER_DISTANCE,
@@ -427,26 +421,18 @@ export const Popover = memo(
       </LayerProvider>
     )
 
+    const children =
+      open &&
+      (portal ? (
+        <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>{popover}</Portal>
+      ) : (
+        popover
+      ))
+
     return (
       <>
         {/* the popover */}
-        <ConditionalWrapper
-          condition={animate}
-          wrapper={(children) => <AnimatePresence>{children}</AnimatePresence>}
-        >
-          {open && (
-            <ConditionalWrapper
-              condition={!!portal}
-              wrapper={(children) => (
-                <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-                  {children}
-                </Portal>
-              )}
-            >
-              {popover}
-            </ConditionalWrapper>
-          )}
-        </ConditionalWrapper>
+        {animate ? <AnimatePresence>{children}</AnimatePresence> : children}
 
         {/* the referred element */}
         {child}

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

@@ -30,14 +30,7 @@ import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import type {Placement} from '../../types'
-import {
-  ConditionalWrapper,
-  Layer,
-  type LayerProps,
-  Portal,
-  useBoundaryElement,
-  usePortal,
-} from '../../utils'
+import {Layer, type LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
@@ -403,26 +396,20 @@ export const Tooltip = forwardRef(function Tooltip(
     </Root>
   )
 
+  const children =
+    showTooltip &&
+    (portalProp ? (
+      <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
+        {tooltip}
+      </Portal>
+    ) : (
+      tooltip
+    ))
+
   return (
     <>
       {/* the tooltip */}
-      <ConditionalWrapper
-        condition={animate}
-        wrapper={(children) => <AnimatePresence>{children}</AnimatePresence>}
-      >
-        {showTooltip && (
-          <ConditionalWrapper
-            condition={!!portalProp}
-            wrapper={(children) => (
-              <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-                {children}
-              </Portal>
-            )}
-          >
-            {tooltip}
-          </ConditionalWrapper>
-        )}
-      </ConditionalWrapper>
+      {animate ? <AnimatePresence>{children}</AnimatePresence> : children}
 
       {/* the referred element */}
       {child}

package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx

@@ -1,5 +1,6 @@
 /**
  * @internal
+ * @deprecated this component will be removed in the next major release
  */
 export function ConditionalWrapper({
   children,