@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/helpers/warnOnce.ts

@@ -0,0 +1,47 @@
+// One development warning per key, for the whole runtime.
+//
+// The set is BOUNDED rather than trusted to stay small, and that bound is what
+// lets a warning quote the offending value. `getCSSStylesAtomic` takes a
+// flattened style object from react-native-web, so a page rendering a
+// CMS-supplied colour can vary a refused value without limit, and keying on the
+// value alone would grow this set forever.
+//
+// Keying on the PROPERTY alone was the first answer to that and it was too
+// quiet: a second, different typo in the same prop said nothing, and once a
+// property had warned it stayed silent for the rest of the session, so a typo
+// reintroduced through HMR never reported at all. The cap buys the per-value
+// signal back at a fixed cost. Past it the console already holds hundreds of
+// distinct warnings and one more is not what is missing.
+const warnLimit = 500
+const warned = process.env.NODE_ENV !== 'production' ? new Set<string>() : null
+
+export function warnOnce(key: string, message = key) {
+  if (process.env.NODE_ENV !== 'development') return
+  if (warned!.has(key) || warned!.size >= warnLimit) return
+  warned!.add(key)
+  console.warn(`[tamagui] ${message}`)
+}
+
+/**
+ * A value the flat-value scanner refused, reported where the author can act on
+ * it. Item 5b left refusal silent, matching the clause scanner, so an author
+ * who typed a `;` got nothing back and a style simply never appeared.
+ *
+ * It warns rather than throws, and the throw it replaced is the reason to say
+ * why. A style value is an ordinary place to put a string an app did not write
+ * (an image URL, a colour from a CMS, anything a user typed), so every refusal
+ * here is reachable from hostile input, and an exception on hostile input hands
+ * an attacker the page in exactly the builds a developer is watching.
+ *
+ * What the throw had that a warning must earn back is being hard to miss, so
+ * this names the property, quotes the whole value, and says which modifier or
+ * character caused it; the throw only said "unknown modifier" without naming
+ * one. Keying on the value means every distinct mistake reports, while the same
+ * mistake across a hundred renders still reports once.
+ */
+export function warnRefusedValue(property: string, value: string, reason: string) {
+  warnOnce(
+    `refused:${property}=${value}`,
+    `${property}="${value}" was dropped: ${reason}`
+  )
+}

package/src/helpers/webPropsToSkip.native.ts

@@ -1,18 +1,17 @@
 import { webOnlyStylePropsText, webOnlyStylePropsView } from '@tamagui/helpers'
 
-// pointerEvents is in webOnlyStylePropsView for web CSS, but it's a valid
-// React Native View prop, so we exclude it from the skip list on native.
-// It's handled specially in getSplitStyles.tsx
-const { pointerEvents: _, ...webOnlyStylePropsViewWithoutPointerEvents } =
-  webOnlyStylePropsView
+// textOverflow is in webOnlyStylePropsText for web CSS, but on native we map
+// textOverflow="ellipsis" to numberOfLines={1} + ellipsizeMode="tail" on Text.
+// Handled specially in getSplitStyles.tsx so we exclude it from the skip list.
+const { textOverflow: __, ...webOnlyStylePropsTextWithoutTextOverflow } =
+  webOnlyStylePropsText
 
 /**
  * Web-only props and event handlers that should be skipped on native
  */
 export const webPropsToSkip = {
-  // Reuse web-only style props from webOnlyStyleProps (excluding pointerEvents)
-  ...webOnlyStylePropsViewWithoutPointerEvents,
-  ...webOnlyStylePropsText,
+  ...webOnlyStylePropsView,
+  ...webOnlyStylePropsTextWithoutTextOverflow,
 
   // Web-only event handlers
   onClick: 1,

package/src/helpers/wrapStyleTags.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import { StyleObjectIdentifier, StyleObjectRules } from '@tamagui/helpers'
 import type { StyleObject } from '../types'
+import { wrapStyleRules } from './insertStyleRule'
 
 // turns out this is pretty slow, creating a bunch of extra tags...
 
@@ -40,6 +41,7 @@ function getCachedStyleTag(styleObject: StyleObject) {
     return cached.element
   }
 
+  const css = wrapStyleRules(rules.join('\n'))
   const element = (
     <style
       key={identifier}
@@ -50,7 +52,7 @@ function getCachedStyleTag(styleObject: StyleObject) {
       // we remove after first render in favor of inserting to a global stylesheet (faster)
       suppressHydrationWarning
     >
-      {rules.join('\n')}
+      {css}
     </style>
   )
 

package/src/hooks/getThemeProxied.ts

@@ -3,6 +3,7 @@ import type { MutableRefObject } from 'react'
 import { getConfig, getSetting } from '../config'
 import { getVariable } from '../createVariable'
 import { getDynamicVal } from '../helpers/getDynamicVal'
+import { inlineLayerKey, type InlineLayerInfo } from '../helpers/variables'
 import type {
   ThemeParsed,
   ThemeState,
@@ -48,8 +49,11 @@ type ThemeGettable<Val> = Val & {
 }
 
 // only proxy each theme one time, after that we know that renders are sync,
-// so we can just change the focus of the proxied theme and it can be re-used
-const cache: Map<ThemeParsed, ThemeProxied> = new Map()
+// so we can just change the focus of the proxied theme and it can be re-used.
+// WeakMap so dynamically created theme objects (inline <Theme> layers)
+// don't retain their proxies after the layer is gone
+const trackingCache: WeakMap<ThemeParsed, ThemeProxied> = new WeakMap()
+const untrackedCache: WeakMap<ThemeParsed, ThemeProxied> = new WeakMap()
 
 let curKeys: MutableRefObject<Set<string> | null>
 let curSchemeKeys: MutableRefObject<Set<string> | null>
@@ -58,22 +62,47 @@ let curState: ThemeState | null
 
 const emptyObject = {}
 
+function track(key: string, schemeOptimized = false) {
+  if (!curKeys) return
+  if (!curKeys.current) {
+    curKeys.current = new Set()
+  }
+  curKeys.current.add(key)
+
+  // track scheme-optimized keys separately so we know if a scheme-only
+  // change can skip re-render (when all accessed keys use DynamicColorIOS)
+  if (schemeOptimized && curSchemeKeys) {
+    if (!curSchemeKeys.current) {
+      curSchemeKeys.current = new Set()
+    }
+    curSchemeKeys.current.add(key)
+  }
+
+  if (process.env.NODE_ENV === 'development' && curProps.debug) {
+    console.info(` 🎨 useTheme() tracking key: ${key} schemeOptimized=${schemeOptimized}`)
+  }
+}
+
 export function getThemeProxied(
   // underscore to prevent accidental usage below
   _props: UseThemeWithStateProps,
   _state: ThemeState | null,
   _keys: MutableRefObject<Set<string> | null>,
-  _schemeKeys?: MutableRefObject<Set<string> | null>
+  _schemeKeys?: MutableRefObject<Set<string> | null>,
+  optimizeForFirstRender = false
 ): ThemeProxied {
   if (!_state?.theme) {
     return emptyObject
   }
 
-  curKeys = _keys
-  curSchemeKeys = _schemeKeys!
+  if (!optimizeForFirstRender) {
+    curKeys = _keys
+    curSchemeKeys = _schemeKeys!
+  }
   curProps = _props
   curState = _state
 
+  const cache = optimizeForFirstRender ? untrackedCache : trackingCache
   if (cache.has(curState.theme)) {
     const proxied = cache.get(curState.theme)!
     return proxied
@@ -84,121 +113,127 @@ export function getThemeProxied(
 
   const config = getConfig()
 
-  function track(key: string, schemeOptimized = false) {
-    if (!curKeys) return
-    if (!curKeys.current) {
-      curKeys.current = new Set()
-    }
-    curKeys.current.add(key)
-
-    // track scheme-optimized keys separately so we know if a scheme-only
-    // change can skip re-render (when all accessed keys use DynamicColorIOS)
-    if (schemeOptimized && curSchemeKeys) {
-      if (!curSchemeKeys.current) {
-        curSchemeKeys.current = new Set()
-      }
-      curSchemeKeys.current.add(key)
-    }
-
-    if (process.env.NODE_ENV === 'development' && curProps.debug) {
-      console.info(
-        ` 🎨 useTheme() tracking key: ${key} schemeOptimized=${schemeOptimized}`
-      )
-    }
-  }
-
   const proxied = Object.fromEntries(
     Object.entries(_state.theme).flatMap(([key, value]) => {
-      const proxied = {
-        ...value,
-        get val() {
-          // when they touch the actual value we only track it if its a variable (web), its ignored!
-          if (!globalThis.tamaguiAvoidTracking) {
-            // always track .val - not scheme optimized since they're getting raw value
-            track(key, false)
+      const get = (platform?: 'web') => {
+        if (!curState) return
+
+        const outVal = getVariable(value)
+        const { name, scheme } = curState
+
+        if (process.env.TAMAGUI_TARGET === 'native') {
+          // ios can avoid re-rendering for scheme changes (light↔dark) when using DynamicColorIOS.
+          // DynamicColorIOS always resolves by the OS appearance, so this is only correct for a
+          // subtree that follows the OS scheme. it does NOT work when a <Theme> forces a scheme
+          // away from the OS/root — at any depth. `inverses` counts scheme flips from the root, so
+          // `inverses === 0` is exactly "this subtree still follows the OS". isInverse alone was
+          // wrong: a sub-theme keeping its parent's forced scheme (dark_blue under a forced dark,
+          // light root) has isInverse=false yet must NOT optimize, or iOS would pick the OS-scheme
+          // value (light) instead of the forced dark value.
+          const fastSchemeChange = getSetting('fastSchemeChange')
+          const rootMatchesSystem = doesRootSchemeMatchSystem()
+          const shouldOptimize =
+            scheme &&
+            platform !== 'web' &&
+            supportsDynamicColorIOS &&
+            !curProps.deopt &&
+            !curState.inverses &&
+            fastSchemeChange &&
+            rootMatchesSystem
+
+          if (process.env.NODE_ENV === 'development' && curProps.debug === 'verbose') {
+            console.info(
+              ` 🎨 useTheme().get(${key}) theme=${name} scheme=${scheme}`,
+              `\n   shouldOptimize=${shouldOptimize} (dynamicColorIOS=${supportsDynamicColorIOS} deopt=${curProps.deopt} inverses=${curState.inverses} fastScheme=${fastSchemeChange} rootMatch=${rootMatchesSystem})`
+            )
+          }
+
+          // an inline <Theme> layer overrides this key: the config.themes
+          // pair below would bypass it. use the layer's literal light/dark
+          // pair when it has one, otherwise deopt to normal tracking
+          const inlineLayer = (curState.theme as any)?.[inlineLayerKey] as
+            | InlineLayerInfo
+            | undefined
+          const inlineOverridden = !!inlineLayer?.overridden.has(key)
+
+          if (shouldOptimize && inlineOverridden) {
+            const pair = inlineLayer!.pairs[key]
+            if (pair) {
+              if (!optimizeForFirstRender) {
+                track(key, true)
+              }
+              return getDynamicVal({
+                scheme,
+                val: String(pair[scheme]),
+                oppositeVal: String(pair[scheme === 'dark' ? 'light' : 'dark']),
+              })
+            }
+            // referenced values have no precomputed pair: fall through to
+            // the tracked path below
           }
-          return value.val
-        },
-        get(platform?: 'web') {
-          if (!curState) return
-
-          const outVal = getVariable(value)
-          const { name, scheme } = curState
-
-          if (process.env.TAMAGUI_TARGET === 'native') {
-            // ios can avoid re-rendering for scheme changes (light↔dark) when using DynamicColorIOS.
-            // DynamicColorIOS always resolves by the OS appearance, so this is only correct for a
-            // subtree that follows the OS scheme. it does NOT work when a <Theme> forces a scheme
-            // away from the OS/root — at any depth. `inverses` counts scheme flips from the root, so
-            // `inverses === 0` is exactly "this subtree still follows the OS". isInverse alone was
-            // wrong: a sub-theme keeping its parent's forced scheme (dark_blue under a forced dark,
-            // light root) has isInverse=false yet must NOT optimize, or iOS would pick the OS-scheme
-            // value (light) instead of the forced dark value.
-            const fastSchemeChange = getSetting('fastSchemeChange')
-            const rootMatchesSystem = doesRootSchemeMatchSystem()
-            const shouldOptimize =
-              scheme &&
-              platform !== 'web' &&
-              supportsDynamicColorIOS &&
-              !curProps.deopt &&
-              !curState.inverses &&
-              fastSchemeChange &&
-              rootMatchesSystem
+
+          if (shouldOptimize && !inlineOverridden) {
+            const oppositeScheme = scheme === 'dark' ? 'light' : 'dark'
+            const oppositeName = name.replace(scheme, oppositeScheme)
+            const color = getVariable(config.themes[name]?.[key])
+            const oppositeColor = getVariable(config.themes[oppositeName]?.[key])
 
             if (process.env.NODE_ENV === 'development' && curProps.debug === 'verbose') {
               console.info(
-                ` 🎨 useTheme().get(${key}) theme=${name} scheme=${scheme}`,
-                `\n   shouldOptimize=${shouldOptimize} (dynamicColorIOS=${supportsDynamicColorIOS} deopt=${curProps.deopt} inverses=${curState.inverses} fastScheme=${fastSchemeChange} rootMatch=${rootMatchesSystem})`
+                ` 🎨 useTheme().get(${key}) using DynamicColorIOS`,
+                `\n   color=${color} oppositeColor=${oppositeColor}`
               )
             }
 
-            if (shouldOptimize) {
-              const oppositeScheme = scheme === 'dark' ? 'light' : 'dark'
-              const oppositeName = name.replace(scheme, oppositeScheme)
-              const color = getVariable(config.themes[name]?.[key])
-              const oppositeColor = getVariable(config.themes[oppositeName]?.[key])
-
-              if (
-                process.env.NODE_ENV === 'development' &&
-                curProps.debug === 'verbose'
-              ) {
-                console.info(
-                  ` 🎨 useTheme().get(${key}) using DynamicColorIOS`,
-                  `\n   color=${color} oppositeColor=${oppositeColor}`
-                )
-              }
+            const dynamicVal = getDynamicVal({
+              scheme,
+              val: color,
+              oppositeVal: oppositeColor,
+            })
 
-              const dynamicVal = getDynamicVal({
-                scheme,
-                val: color,
-                oppositeVal: oppositeColor,
-              })
-
-              // track as scheme-optimized - can skip re-render for scheme-only changes
+            if (!optimizeForFirstRender) {
+              // track as scheme-optimized - can skip re-render for scheme changes
               track(key, true)
-
-              return dynamicVal
             }
 
-            if (process.env.NODE_ENV === 'development' && curProps.debug) {
-              console.info(
-                ` 🎨 useTheme().get(${key}) tracking key (not optimizing)`,
-                `\n   platform=${platform} dynamicColorIOS=${supportsDynamicColorIOS} deopt=${curProps.deopt} fastScheme=${fastSchemeChange}`
-              )
-            }
+            return dynamicVal
+          }
+
+          if (process.env.NODE_ENV === 'development' && curProps.debug) {
+            console.info(
+              ` 🎨 useTheme().get(${key}) tracking key (not optimizing)`,
+              `\n   platform=${platform} dynamicColorIOS=${supportsDynamicColorIOS} deopt=${curProps.deopt} fastScheme=${fastSchemeChange}`
+            )
+          }
 
-            // not scheme-optimized
+          if (!optimizeForFirstRender) {
             track(key, false)
           }
+        }
 
-          return outVal
-        },
+        return outVal
       }
 
-      return [
-        [key, proxied],
-        [`$${key}`, proxied],
-      ]
+      const proxied = optimizeForFirstRender
+        ? {
+            ...value,
+            val: value.val,
+            get,
+          }
+        : {
+            ...value,
+            get val() {
+              // when they touch the actual value we only track it if its a variable (web), its ignored!
+              if (!globalThis.tamaguiAvoidTracking) {
+                // always track .val - not scheme optimized since they're getting raw value
+                track(key, false)
+              }
+              return value.val
+            },
+            get,
+          }
+
+      return [[key, proxied]]
     })
   ) as ThemeProxied
 

package/src/hooks/isOptimizedForFirstRender.native.ts

@@ -0,0 +1,7 @@
+import { getSetting } from '../config'
+
+// native defaults to 'first-render': skip per-key theme/media tracking for
+// the fastest initial render, theme/media changes re-render coarsely
+export function isOptimizedForFirstRender(): boolean {
+  return getSetting('optimizeFor') !== 'updates'
+}

package/src/hooks/isOptimizedForFirstRender.ts

@@ -0,0 +1,7 @@
+import { getSetting } from '../config'
+
+// web defaults to 'updates': granular theme/media tracking so changes
+// re-render only consumers. see isOptimizedForFirstRender.native.ts
+export function isOptimizedForFirstRender(): boolean {
+  return getSetting('optimizeFor') === 'first-render'
+}

package/src/hooks/useAnimationDriver.ts

@@ -0,0 +1,37 @@
+import { useConfiguration } from '../contexts/ComponentContext'
+import type {
+  AnimationDriver,
+  UniversalAnimatedNumber,
+  UseAnimatedNumberReaction,
+  UseAnimatedNumberStyle,
+  UseAnimatedNumbersStyle,
+} from '../types'
+
+// resolves the configured animation driver from context/config. the wrappers below
+// delegate to it directly so first-party code and user code exercise the same surface.
+// the resolved driver must not change identity mid-lifecycle (only relevant with
+// `animatedBy` multi-driver setups).
+export function useAnimationDriver(): AnimationDriver {
+  const { animationDriver } = useConfiguration()
+  if (process.env.NODE_ENV === 'development') {
+    if (!animationDriver || animationDriver.isStub) {
+      throw new Error(
+        `No animation driver configured. To use the animation hooks (useAnimatedNumber, useAnimatedNumberStyle, ...), pass \`animations\` to createTamagui. See: https://tamagui.dev/docs/core/animations`
+      )
+    }
+  }
+  return animationDriver!
+}
+
+export function useAnimatedNumber(initial: number): UniversalAnimatedNumber<any> {
+  return useAnimationDriver().useAnimatedNumber(initial)
+}
+
+export const useAnimatedNumberStyle: UseAnimatedNumberStyle = (value, getStyle) =>
+  useAnimationDriver().useAnimatedNumberStyle(value, getStyle)
+
+export const useAnimatedNumbersStyle: UseAnimatedNumbersStyle = (values, getStyle) =>
+  useAnimationDriver().useAnimatedNumbersStyle(values, getStyle)
+
+export const useAnimatedNumberReaction: UseAnimatedNumberReaction = (opts, onValue) =>
+  useAnimationDriver().useAnimatedNumberReaction(opts, onValue)

package/src/hooks/useComponentState.ts

@@ -1,8 +1,12 @@
 import { getPlatformDriver, isServer, isWeb } from '@tamagui/constants'
+import { stylePropsAll } from '@tamagui/helpers'
+import { canonicalClauseModifier, scanFlatValue } from '@tamagui/style-grammar/runtime'
 import { mergeIfNotShallowEqual } from '@tamagui/is-equal-shallow'
 import { useDidFinishSSR, useIsClientOnly } from '@tamagui/use-did-finish-ssr'
 import { useRef, useState } from 'react'
 import { getSetting } from '../config'
+import { formatDiagnostic } from '../helpers/formatDiagnostic'
+import { isOptimizedForFirstRender } from './isOptimizedForFirstRender'
 import {
   defaultComponentState,
   defaultComponentStateMounted,
@@ -21,6 +25,70 @@ import type {
 } from '../types'
 import type { ViewProps } from '../views/View'
 
+// canonical spellings only: `canonicalClauseModifier` folds `active` and
+// `pressed` into `press` and `starting` into `enter` before the lookup, so the
+// alias table in @tamagui/style-grammar stays the only place they are listed
+const platformPseudoModifiers = new Set(['hover', 'press', 'focus'])
+const enterModifier = new Set(['enter'])
+
+// One live scan at a time, so the visitor and its state are hoisted rather than
+// rebuilt per prop: this runs on every render of every component, and the whole
+// point of an index-based scanner is that asking the question costs nothing.
+let scanSource = ''
+let scanWanted: ReadonlySet<string> = enterModifier
+let scanFound = false
+let scanRefused = false
+
+const lifecycleVisitor = {
+  segment(start: number, end: number, isBase: boolean) {
+    // a clause with no payload is a value parseValue refuses, so nothing in it
+    // reaches the style object and nothing in it can start an animation
+    if (start === end && !isBase) scanRefused = true
+  },
+  chain(start: number, end: number) {
+    if (scanRefused) return false
+    for (let index = start; index <= end; index++) {
+      if (index !== end && scanSource.charCodeAt(index) !== 58) continue
+      if (scanWanted.has(canonicalClauseModifier(scanSource.slice(start, index)))) {
+        scanFound = true
+      }
+      start = index + 1
+    }
+    return true
+  },
+  error() {
+    scanRefused = true
+  },
+}
+
+/**
+ * Does any flat style value on this component carry one of `modifiers`?
+ *
+ * It runs the same `scanFlatValue` lexer the style scanner runs, which is the
+ * whole reason it exists in this shape: a value the style scanner throws away
+ * used to still put the component on the should-enter path here, so it rendered
+ * an enter frame for a style that never arrived.
+ */
+function hasFlatModifier(
+  props: Record<string, any>,
+  config: TamaguiInternalConfig,
+  modifiers: ReadonlySet<string>
+): boolean {
+  for (const key in props) {
+    const value = props[key]
+    if (typeof value !== 'string' || value.indexOf(':') === -1) continue
+    const property = config.shorthands[key] || key
+    if (!(property in stylePropsAll) && property !== 'transition') continue
+    scanSource = value
+    scanWanted = modifiers
+    scanFound = false
+    scanRefused = false
+    scanFlatValue(value, lifecycleVisitor)
+    if (scanFound && !scanRefused) return true
+  }
+  return false
+}
+
 export const useComponentState = (
   props: ViewProps | TextProps | Record<string, any>,
   animationDriver: ComponentContextI['animationDriver'],
@@ -46,6 +114,7 @@ export const useComponentState = (
   if (!stateRef.current) {
     stateRef.current = {
       startedUnhydrated: needsHydration && !isHydrated,
+      optimizeForFirstRender: isOptimizedForFirstRender(),
     }
   }
 
@@ -63,8 +132,8 @@ export const useComponentState = (
     curStateRef.hasAnimated = true
   }
 
-  // a renderer platform driver with native pseudo states (react-native-gpui)
-  // makes ANY component with runtime pseudo styles ride the animation-driver
+  // A renderer platform driver with native pseudo states (react-native-gpui)
+  // makes any component with interaction clauses ride the animation-driver
   // emitter path — no per-site transition/animation prop required. the flip is
   // driver-sourced (hover) or event-sourced (press/focus) but either way applies
   // through the emitter with zero React commits; with no transition declared it
@@ -74,7 +143,7 @@ export const useComponentState = (
     useAnimations &&
     animationDriver?.avoidReRenders &&
     getPlatformDriver()?.pseudo &&
-    ('hoverStyle' in props || 'pressStyle' in props || 'focusStyle' in props)
+    hasFlatModifier(props, config, platformPseudoModifiers)
   )
 
   const willBeAnimatedClient = (() => {
@@ -103,7 +172,7 @@ export const useComponentState = (
   const isExiting = presenceState?.isPresent === false
   const isEntering = presenceState?.isPresent === true && presenceState.initial !== false
 
-  const hasEnterStyle = !!props.enterStyle
+  const hasEnterStyle = hasFlatModifier(props, config, enterModifier)
 
   const hasAnimationThatNeedsHydrate =
     hasAnimationProp &&
@@ -215,27 +284,29 @@ export const useComponentState = (
   if (process.env.NODE_ENV === 'development' && globalThis.time)
     globalThis.time`state-useCreateShallowSetState`
 
-  // set enter/exit variants onto our new props object
+  // merge AnimatePresence's `custom` onto a FRESH props object — never mutate the
+  // caller's incoming props. with the ref-strip clone removed in createComponent, on
+  // the no-defaults path that input IS React's own props object and must stay
+  // immutable. the augmented copy is returned as `props` below.
+  let outProps: typeof props = props
   if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
     if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
-      console.warn(`has presenceState ${JSON.stringify(presenceState)}`)
+      console.warn(
+        formatDiagnostic(
+          'TAMAGUI_PRESENCE_STATE',
+          staticConfig.Component?.displayName ||
+            staticConfig.Component?.name ||
+            'TamaguiComponent',
+          'AnimatePresence supplied lifecycle state to an animated component',
+          'Remove debug="verbose" after inspecting the animation state',
+          'presenceState',
+          presenceState
+        )
+      )
     }
-    const { enterVariant, exitVariant, enterExitVariant, custom } = presenceState
+    const { custom } = presenceState
     if (isObj(custom)) {
-      Object.assign(props, custom)
-    }
-    const exv = exitVariant ?? enterExitVariant
-    const env = enterVariant ?? enterExitVariant
-    if (state.unmounted && env && staticConfig.variants[env]) {
-      if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
-        console.warn(`Animating presence ENTER "${env}"`)
-      }
-      props[env] = true
-    } else if (isExiting && exv) {
-      if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
-        console.warn(`Animating presence EXIT "${exv}"`)
-      }
-      props[exv] = exitVariant !== enterExitVariant
+      outProps = { ...props, ...custom }
     }
   }
 
@@ -278,6 +349,7 @@ export const useComponentState = (
   }
 
   return {
+    props: outProps,
     startedUnhydrated: curStateRef.startedUnhydrated,
     curStateRef,
     disabled,
@@ -303,10 +375,13 @@ export const useComponentState = (
 }
 
 function hasAnimatedStyleValue(style: object) {
-  return Object.keys(style).some((k) => {
+  for (const k in style) {
     const val = style[k]
-    return val && typeof val === 'object' && '_animation' in val
-  })
+    if (val && typeof val === 'object' && '_animation' in val) {
+      return true
+    }
+  }
+  return false
 }
 
 const isDisabled = (props: any) => {