fix: remove <ConditionalWrapper> (#1439)

Author: stipsan

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type {StorybookConfig} from '@storybook/react-vite'
+import viteReact from '@vitejs/plugin-react'
 import {mergeConfig} from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
@@ -22,7 +23,12 @@ const config: StorybookConfig = {
   },
   viteFinal(config) {
     return mergeConfig(config, {
-      plugins: [tsconfigPaths()],
+      plugins: [
+        viteReact({
+          babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+        }),
+        tsconfigPaths(),
+      ],
     })
   },
 }

package.json

@@ -152,6 +152,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 +178,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",

pnpm-lock.yaml

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

src/core/primitives/popover/popover.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}

src/core/primitives/tooltip/tooltip.tsx

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

src/core/utils/conditionalWrapper/conditionalWrapper.tsx

@@ -1,11 +1,17 @@
 import path from 'path'
 import {defineRuntime} from '@sanity/ui-workshop'
+import viteReact from '@vitejs/plugin-react'
 
 const EXPORTS_PATH = path.resolve(__dirname, 'exports')
 
 export default defineRuntime({
   vite: (viteConfig) => ({
     ...viteConfig,
+    plugins: [
+      viteReact({
+        babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+      }),
+    ],
     resolve: {
       ...viteConfig.resolve,
       alias: {