@tamagui/web 2.0.0-rc.4 → 2.0.0-rc.40

package/src/createComponent.tsx

@@ -1,8 +1,9 @@
 import { composeRefs } from '@tamagui/compose-refs'
 import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { NativeMenuContext } from '@tamagui/native'
 import { composeEventHandlers } from '@tamagui/helpers'
 import { isEqualShallow } from '@tamagui/is-equal-shallow'
-import React, { useMemo } from 'react'
+import React, { ReactElement, ReactNode, useMemo } from 'react'
 import { devConfig, getConfig } from './config'
 import { isDevTools } from './constants/isDevTools'
 import { ComponentContext } from './contexts/ComponentContext'
@@ -11,12 +12,17 @@ import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
 import { defaultComponentStateMounted } from './defaultComponentState'
 import { getWebEvents, useEvents, wrapWithGestureDetector } from './eventHandling'
 import { getDefaultProps } from './helpers/getDefaultProps'
+import { resolveAnimationDriver } from './helpers/resolveAnimationDriver'
 import { getSplitStyles, useSplitStyles } from './helpers/getSplitStyles'
 import { log } from './helpers/log'
-import { usePointerEvents } from './helpers/pointerEvents'
 import { type GenericProps, mergeComponentProps } from './helpers/mergeProps'
 import { mergeRenderElementProps } from './helpers/mergeRenderElementProps'
 import { objectIdentityKey } from './helpers/objectIdentityKey'
+import { usePointerEvents } from './helpers/pointerEvents'
+import {
+  extractPseudoState,
+  resolveEffectivePseudoTransition,
+} from './helpers/pseudoTransitions'
 import { setElementProps } from './helpers/setElementProps'
 import { subscribeToContextGroup } from './helpers/subscribeToContextGroup'
 import { themeable } from './helpers/themeable'
@@ -46,9 +52,9 @@ import type {
   UseStyleEmitter,
   UseThemeWithStateProps,
 } from './types'
-import type { ViewProps } from './views/View'
 import { Slot } from './views/Slot'
 import { getThemedChildren } from './views/Theme'
+import type { ViewProps } from './views/View'
 
 /**
  * All things that need one-time setup after createTamagui is called
@@ -229,7 +235,9 @@ export function createComponent<
   const { Component, isText, isHOC } = staticConfig
 
   const component = React.forwardRef<Ref, ComponentPropTypes>((propsIn, forwardedRef) => {
-    config ||= getConfig()
+    'use no memo'
+
+    config = config || getConfig()
 
     const internalID = process.env.NODE_ENV === 'development' ? React.useId() : ''
 
@@ -255,7 +263,8 @@ export function createComponent<
     // test only
     if (process.env.NODE_ENV === 'test') {
       if (propsIn['data-test-renders']) {
-        propsIn['data-test-renders']['current'] ??= 0
+        propsIn['data-test-renders']['current'] =
+          propsIn['data-test-renders']['current'] ?? 0
         propsIn['data-test-renders']['current'] += 1
       }
     }
@@ -273,6 +282,14 @@ export function createComponent<
     const componentContext = React.useContext(ComponentContext)
     const hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false)
 
+    // On Android, skip RNGH GestureDetector inside native menus (zeego) and use
+    // direct press events instead — GestureDetector consumes touches before they
+    // reach MenuView's native handler, preventing the menu from opening
+    const isInsideNativeMenu =
+      process.env.TAMAGUI_TARGET === 'native'
+        ? React.useContext(NativeMenuContext)
+        : false
+
     if (
       !process.env.TAMAGUI_IS_CORE_NODE &&
       process.env.NODE_ENV === 'development' &&
@@ -283,6 +300,10 @@ export function createComponent<
       time = timer.start()
       globalThis['time'] = time
     }
+    // pick up globalThis.time if set externally (e.g. by a profiling harness)
+    if (process.env.NODE_ENV === 'development' && !time && (globalThis as any).time) {
+      time = (globalThis as any).time
+    }
     if (process.env.NODE_ENV === 'development' && time) time`non-tamagui time (ignore)`
 
     // React inserts default props after your props for some reason...
@@ -292,11 +313,7 @@ export function createComponent<
     const componentName = props.componentName || staticConfig.componentName
 
     // merge both default props and styled context props - ensure order is preserved
-    const defaultProps = getDefaultProps(
-      staticConfig,
-      props.componentName,
-      isText && hasTextAncestor
-    )
+    const defaultProps = getDefaultProps(staticConfig, props.componentName)
 
     // merge styled context props over defaults, ensure order is preserved
     const [nextProps, overrides] = mergeComponentProps(
@@ -361,7 +378,7 @@ export function createComponent<
           }
         }
 
-        debugKeyListeners ||= new Set()
+        debugKeyListeners = debugKeyListeners || new Set()
         debugKeyListeners.add(debugVisualizerHandler)
 
         return () => {
@@ -373,20 +390,26 @@ export function createComponent<
 
     const groupContextParent = React.useContext(GroupContext)
 
-    // Get animation driver - either from animatedBy prop lookup or context
+    // Get animation driver - either from animatedBy prop lookup or context/config fallback
     const animationDriver = (() => {
-      if (props.animatedBy && config?.animations) {
-        const animations = config.animations
-        // If animations is an object with named drivers (has 'default' key)
-        if ('default' in animations) {
+      if (props.animatedBy && config) {
+        // check animationDrivers for multi-driver config
+        if (config.animationDrivers) {
           return (
-            (animations as Record<string, any>)[props.animatedBy] ?? animations.default
+            (config.animationDrivers as Record<string, any>)[props.animatedBy] ??
+            config.animations
           )
         }
-        // Single driver config - only 'default' makes sense
-        return props.animatedBy === 'default' ? animations : null
+        // single driver config - only 'default' makes sense
+        return props.animatedBy === 'default' ? config.animations : null
       }
-      return componentContext.animationDriver
+      // fall back to context driver, then config.animations
+      // resolveAnimationDriver validates it's a real driver (not a raw multi-driver object)
+      return (
+        resolveAnimationDriver(componentContext.animationDriver) ??
+        resolveAnimationDriver(config?.animations) ??
+        null
+      )
     })()
 
     const useAnimations = animationDriver?.useAnimations as UseAnimationHook | undefined
@@ -412,7 +435,8 @@ export function createComponent<
       noClass,
       state,
       stateRef,
-      supportsCSS,
+      inputStyle,
+      outputStyle,
       willBeAnimated,
       willBeAnimatedClient,
       startedUnhydrated,
@@ -478,25 +502,27 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`use-state`
 
-    const isTaggable = !Component || typeof Component === 'string'
+    // web-only - string-style not valid for native
     const renderProp = props.render
+    const isRenderString = !Component || typeof Component === 'string'
+
     // default to render prop, fallback to component (when both strings)
-    const element = isWeb ? (isTaggable ? renderProp || Component : Component) : Component
+    const element = isWeb
+      ? isRenderString
+        ? renderProp || Component
+        : Component
+      : Component
 
     const BaseTextComponent = BaseText || element || 'span'
     const BaseViewComponent = BaseView || element || (hasTextAncestor ? 'span' : 'div')
+    const BaseComponent = isText ? BaseTextComponent : BaseViewComponent
 
-    let elementType = isText ? BaseTextComponent : BaseViewComponent
+    let elementType = BaseComponent
 
-    if (
-      animationDriver &&
-      isAnimated &&
-      // this should really be behind another prop as it's not really related to
-      // "needsWebStyles" basically with motion we just animate a plain div, but
-      // we still have animated.View/Text for Sheet which wants to control
-      // things declaratively
-      !animationDriver.needsWebStyles
-    ) {
+    const isAnimatedCustomComponent =
+      animationDriver && isAnimated && animationDriver.needsCustomComponent
+
+    if (isAnimatedCustomComponent) {
       elementType = animationDriver[isText ? 'Text' : 'View'] || elementType
     }
 
@@ -563,7 +589,7 @@ export function createComponent<
         if (isWeb) {
           console.info(`%c ${banner}`, 'background: green; color: white;')
           if (isServer) {
-            log({ noClass, isAnimated, isWeb, supportsCSS })
+            log({ noClass, isAnimated, isWeb, inputStyle })
           } else {
             // if strict mode or something messes with our nesting this fixes:
             console.groupEnd()
@@ -586,7 +612,7 @@ export function createComponent<
           )
           log(`children:`, props.children)
           log({ overriddenContextProps, styledContextValue })
-          log({ noClass, isAnimated, isWeb, supportsCSS })
+          log({ noClass, isAnimated, isWeb, inputStyle })
         }
       }
     }
@@ -608,7 +634,7 @@ export function createComponent<
 
     const resolveValues =
       // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
-      (isAnimated && !supportsCSS) ||
+      (isAnimated && inputStyle !== 'css') ||
       (isHOC && state.unmounted == false && hasAnimationProp)
         ? 'value'
         : 'auto'
@@ -639,7 +665,8 @@ export function createComponent<
       allGroupContexts,
       elementType,
       startedUnhydrated,
-      debugProp
+      debugProp,
+      animationDriver
     )
 
     const isPassthrough = !splitStyles
@@ -656,7 +683,7 @@ export function createComponent<
         staticConfig.context || staticConfig.parentStaticConfig?.context
       if (contextForProps) {
         for (const key in splitStyles.overriddenContextProps) {
-          overriddenContextProps ||= {}
+          overriddenContextProps = overriddenContextProps || {}
           overriddenContextProps[key] = splitStyles.overriddenContextProps[key]
         }
         // Use parent's context if this component doesn't have its own
@@ -689,10 +716,21 @@ export function createComponent<
 
     // avoids re-rendering if animation driver supports it
     // TODO believe we need to set some sort of "pendingState" in case it re-renders
+    // CRITICAL: Skip avoidReRenders for components with enter/exit transitions
+    // The exit state comes from AnimatePresence context, not local state, so
+    // updateStyleListener can fire before the component re-renders with the new
+    // presence value, causing wrong animation timing (e.g., using enter timing for exit)
+    const hasEnterExitTransition =
+      props.transition &&
+      typeof props.transition === 'object' &&
+      !Array.isArray(props.transition) &&
+      ('enter' in props.transition || 'exit' in props.transition)
+
     if (
       !isPassthrough &&
       (hasAnimationProp || groupName) &&
-      animationDriver?.avoidReRenders
+      animationDriver?.avoidReRenders &&
+      !hasEnterExitTransition
     ) {
       const ogSetStateShallow = setStateShallow
 
@@ -725,10 +763,22 @@ export function createComponent<
           allGroupContexts,
           elementType,
           startedUnhydrated,
-          debugProp
+          debugProp,
+          animationDriver
+        )
+
+        // compute effective transition based on entering/exiting pseudo states
+        const effectiveTransition = resolveEffectivePseudoTransition(
+          stateRef.current.prevPseudoState,
+          updatedState,
+          nextStyles?.pseudoTransitions,
+          props.transition
         )
 
-        useStyleListener((nextStyles?.style || {}) as any)
+        // update prev state for next comparison (includes group states)
+        stateRef.current.prevPseudoState = extractPseudoState(updatedState)
+
+        useStyleListener((nextStyles?.style || {}) as any, effectiveTransition)
       }
 
       function updateGroupListeners() {
@@ -751,7 +801,8 @@ export function createComponent<
 
       // don't change this ever or else you break ComponentContext and cause re-rendering
       // use a Set of listeners so multiple components can register
-      componentContext.mediaEmitListeners ||= new Set()
+      componentContext.mediaEmitListeners =
+        componentContext.mediaEmitListeners || new Set()
 
       // only register once per component instance
       if (!stateRef.current.mediaEmitCleanup) {
@@ -765,12 +816,14 @@ export function createComponent<
         }
       }
 
-      componentContext.mediaEmit ||= (next) => {
-        // notify all registered components
-        for (const listener of componentContext.mediaEmitListeners!) {
-          listener(next)
-        }
-      }
+      componentContext.mediaEmit =
+        componentContext.mediaEmit ||
+        ((next) => {
+          // notify all registered components
+          for (const listener of componentContext.mediaEmitListeners!) {
+            listener(next)
+          }
+        })
 
       stateRef.current.setStateShallow = (nextOrGetNext) => {
         const prev = stateRef.current.nextState || state
@@ -835,7 +888,7 @@ export function createComponent<
         props.untilMeasured === 'hide' &&
         !stateRef.current.hasMeasured
       ) {
-        splitStyles.style ||= {}
+        splitStyles.style = splitStyles.style || {}
         splitStyles.style.opacity = 0
       }
 
@@ -903,7 +956,7 @@ export function createComponent<
     // so the type is pretty loose
     let viewProps = nonTamaguiProps
 
-    if (!isTaggable && props.forceStyle) {
+    if (props.forceStyle) {
       viewProps.forceStyle = props.forceStyle
     }
 
@@ -916,16 +969,14 @@ export function createComponent<
       }
     }
 
-    if (renderProp && elementType['acceptTagProp']) {
-      viewProps.render = renderProp
-    }
-
     // once you set animation prop don't remove it, you can set to undefined/false
     // reason is animations are heavy - no way around it, and must be run inline here (🙅 loading as a sub-component)
     let animationStyles: any
     const shouldUseAnimation =
       // if it supports css vars we run it on server too to get matching initial style
-      (supportsCSS ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
+      (inputStyle === 'css' ? willBeAnimatedClient : willBeAnimated) &&
+      useAnimations &&
+      !isHOC
 
     let animatedRef
 
@@ -936,10 +987,29 @@ export function createComponent<
           }
         : undefined
 
+      // compute effective transition once here (single source of truth)
+      // avoidReRenders path also computes this in updateStyleListener
+      const effectiveTransition = resolveEffectivePseudoTransition(
+        stateRef.current.prevPseudoState,
+        state,
+        splitStyles?.pseudoTransitions,
+        props.transition
+      )
+
+      // add effectiveTransition to splitStyles for drivers to consume
+      if (splitStyles) {
+        splitStyles.effectiveTransition = effectiveTransition
+      }
+
+      // update prev state for next comparison (needed for non-avoidReRenders drivers like CSS)
+      // avoidReRenders path also updates this in updateStyleListener
+      stateRef.current.prevPseudoState = extractPseudoState(state)
+
       const animations = useAnimations({
         props: propsWithAnimation,
-        // if hydrating, send empty style
-        style: splitStylesStyle || {},
+        // clone style to prevent animation driver mutations from leaking to viewProps
+        // during SSR/pre-hydration (CSS driver mutates style.transition in place)
+        style: isHydrated ? splitStylesStyle || {} : { ...splitStylesStyle },
         // @ts-ignore
         styleState: splitStyles,
         useStyleEmitter,
@@ -1087,7 +1157,7 @@ export function createComponent<
         // For CSS transitions, we need browser to paint enterStyle before removing it.
         // Double RAF guarantees paint: first RAF schedules after current frame,
         // second RAF schedules after that frame completes (including paint).
-        if (supportsCSS) {
+        if (inputStyle === 'css') {
           let cancelled = false
           requestAnimationFrame(() => {
             if (cancelled) return
@@ -1108,7 +1178,7 @@ export function createComponent<
         componentSetStates.delete(setState)
         stateRef.current.mediaEmitCleanup?.()
       }
-    }, [state.unmounted, supportsCSS])
+    }, [state.unmounted, inputStyle])
 
     useIsomorphicLayoutEffect(() => {
       if (disabled) return
@@ -1140,6 +1210,7 @@ export function createComponent<
     const runtimePressStyle = !disabled && noClass && pseudos?.pressStyle
     const runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle
     const runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle
+
     const attachFocus = Boolean(
       runtimePressStyle ||
       runtimeFocusStyle ||
@@ -1258,11 +1329,19 @@ export function createComponent<
                 }
               }
             : undefined,
+
           onPress: attachPress
             ? (e) => {
                 unPress()
-                // @ts-ignore
-                isWeb && onClick?.(e)
+                if (process.env.TAMAGUI_TARGET === 'web') {
+                  // @ts-ignore
+                  onClick?.(e)
+                  // matches RN pressable behavior - only when an explicit press
+                  // handler is set, so pressStyle alone doesn't swallow clicks
+                  if (onPress || onClick) {
+                    e.stopPropagation()
+                  }
+                }
                 onPress?.(e)
                 if (process.env.TAMAGUI_TARGET === 'web') {
                   onLongPress?.(e)
@@ -1281,6 +1360,7 @@ export function createComponent<
             onFocus: (e) => {
               const next: Partial<typeof state> = {}
               if (componentContext.setParentFocusState) {
+                componentContext.setParentFocusState({ focusWithin: true })
                 next.focusWithin = true
               }
               if (pseudos?.focusVisibleStyle) {
@@ -1334,17 +1414,37 @@ export function createComponent<
       log(`events`, { events, attachHover, attachPress })
     }
 
+    const propsWithHref = props as typeof props & { href?: unknown }
+    const propsInWithHref = propsIn as typeof propsIn & { href?: unknown }
+
+    const pressDebugDetail =
+      props.testID ??
+      propsIn.testID ??
+      props.accessibilityLabel ??
+      propsIn.accessibilityLabel ??
+      (typeof propsWithHref.href === 'string' ? propsWithHref.href : null) ??
+      (typeof propsInWithHref.href === 'string' ? propsInWithHref.href : null)
+
+    const pressDebugName =
+      [componentName, pressDebugDetail].filter(Boolean).join(':') || null
+
     // EVENTS native - handles focus/blur, input special cases, and RNGH press handling
     // Skip gesture setup for HOC components - they may return null which crashes GestureDetector
     const pressGesture =
       process.env.TAMAGUI_TARGET === 'native'
-        ? useEvents(events, viewProps, stateRef, staticConfig, isHOC)
+        ? useEvents(
+            events,
+            viewProps,
+            stateRef,
+            staticConfig,
+            isHOC,
+            isInsideNativeMenu,
+            pressDebugName
+          )
         : null
 
     if (process.env.NODE_ENV === 'development' && time) time`hooks`
 
-    let content = children
-
     if (asChild) {
       elementType = Slot
       // on native this is already merged into viewProps in useEvents
@@ -1371,49 +1471,66 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`spaced-as-child`
 
+    let content: ReactNode | undefined
+
     if (isPassthrough) {
-      content = propsIn.children
-      elementType = BaseViewComponent
-      viewProps = {
-        style: {
-          display: 'contents',
+      // avoid re-parenting but avoid layout changes
+      content = React.createElement(
+        BaseComponent,
+        {
+          style: {
+            display: 'contents',
+          },
         },
+        propsIn.children
+      )
+    } else {
+      // here elementType is either the custom animated driver view, or base view
+      if (hooks.useChildren) {
+        // ONLY native:
+        content = hooks.useChildren(elementType, content || children, viewProps)
       }
-    }
 
-    let useChildrenResult: any
-    if (hooks.useChildren) {
-      useChildrenResult = hooks.useChildren(elementType, content, viewProps)
-    }
+      const isRenderPropString = typeof renderProp === 'string'
 
-    if (process.env.NODE_ENV === 'development' && time) time`use-children`
+      // this ONLY handles the case where render is NOT a string
+      // either direct JSX, or a function that returns JSX, we always clone
+      if (renderProp && !isRenderPropString) {
+        const out = getCustomRender(
+          renderProp,
+          content || children,
+          viewProps,
+          componentState
+        )
+        if (out) {
+          viewProps = out.viewProps
+          elementType = out.elementType
+        }
+      }
 
-    if (useChildrenResult) {
-      content = useChildrenResult
-    } else {
-      // Handle render prop variants: function, JSX element, or string
-      if (typeof renderProp === 'function') {
-        // Render function: full control with props and state
-        const renderProps = { ...viewProps, children: content }
-        content = renderProp(renderProps, state)
-      } else if (
-        renderProp &&
-        typeof renderProp === 'object' &&
-        React.isValidElement(renderProp)
-      ) {
-        // JSX element: clone with merged props
-        const elementProps = (renderProp as React.ReactElement).props || {}
-        const mergedProps = mergeRenderElementProps(elementProps, viewProps, content)
-        content = React.cloneElement(renderProp as React.ReactElement, mergedProps)
-      } else {
-        content = React.createElement(elementType, viewProps, content)
+      if (!content) {
+        // web-only, handle render === string passing to custom animated component
+        if (isRenderPropString) {
+          viewProps.render === renderProp
+        }
+
+        content = React.createElement(elementType, viewProps, content || children)
       }
+
+      if (process.env.NODE_ENV === 'development' && time) time`use-children`
     }
 
     // wrap with GestureDetector for RNGH press handling (native only, no-op on web)
-    // Skip for HOC components - they pass press events to inner component instead
+    // Skip for HOC and composite components - they pass press events to inner component instead
     if (process.env.TAMAGUI_TARGET === 'native') {
-      content = wrapWithGestureDetector(content, pressGesture, stateRef, isHOC)
+      const isCompositeComponent = !isHOC && Component && typeof Component !== 'string'
+      content = wrapWithGestureDetector(
+        content,
+        pressGesture,
+        stateRef,
+        isHOC,
+        isCompositeComponent
+      )
     }
 
     // needs to reset the presence state for nested children
@@ -1442,7 +1559,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`create-element`
 
-    if ('focusWithinStyle' in propsIn) {
+    if ('focusWithinStyle' in propsIn || pseudos?.focusWithinStyle) {
       content = (
         <ComponentContext.Provider
           {...componentContext}
@@ -1673,3 +1790,55 @@ const fromPx = (val?: any): number => {
   if (typeof val === 'string') return +val.replace('px', '')
   return 0
 }
+
+// handles all render logic - returns a new component
+const getCustomRender = (
+  renderProp: ViewProps['render'],
+  content: ReactNode,
+  viewProps: Record<string, unknown>,
+  state: any
+):
+  | undefined
+  | {
+      viewProps: Record<string, any>
+      elementType: any
+    } => {
+  // Handle render prop variants: function, JSX element, or string
+  if (typeof renderProp === 'function') {
+    // Render function: full control with props and state
+    const out = renderProp(viewProps, state)
+    renderProp = getRenderElementForPlatform(out)
+  }
+
+  if (renderProp) {
+    if (typeof renderProp === 'object' && React.isValidElement(renderProp)) {
+      // JSX element: clone with merged props
+      const renderElement = getRenderElementForPlatform(renderProp)
+      if (renderElement) {
+        const elementProps = renderProp.props as Record<string, any> | undefined
+        const mergedProps = elementProps
+          ? mergeRenderElementProps(elementProps, viewProps, content)
+          : viewProps
+
+        return {
+          elementType: renderProp.type,
+          viewProps: mergedProps,
+        }
+      }
+    }
+  }
+}
+
+// avoid passing web-only elements to native
+function getRenderElementForPlatform(potential: ReactElement) {
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    if (isHTMLElement(potential)) {
+      return
+    }
+  }
+  return potential
+}
+
+function isHTMLElement(el: ReactElement) {
+  return typeof el['type'] === 'string' && el['type'][0] === el['type'][0].toLowerCase()
+}