@tamagui/web 2.0.0-rc.3 → 2.0.0-rc.30

package/src/eventHandling.native.ts

@@ -5,10 +5,8 @@
 import { composeEventHandlers } from '@tamagui/helpers'
 import { getGestureHandler } from '@tamagui/native'
 import React, { useRef } from 'react'
-import type { StaticConfig, TamaguiComponentStateRef } from './types'
-
-// TODO conditional improt - the way we bundle core test.native.js breaks if inline require need to fix
 import { useMainThreadPressEvents } from './helpers/mainThreadPressEvents'
+import type { StaticConfig, TamaguiComponentStateRef } from './types'
 
 // web events not used on native
 export function getWebEvents() {
@@ -20,7 +18,8 @@ export function useEvents(
   viewProps: any,
   stateRef: { current: TamaguiComponentStateRef },
   staticConfig: StaticConfig,
-  isHOC?: boolean
+  isHOC?: boolean,
+  isInsideNativeMenu?: boolean
 ) {
   // focus/blur events always attached directly
   if (events) {
@@ -32,39 +31,6 @@ export function useEvents(
     }
   }
 
-  // input special case - TextInput needs press events attached directly (not via RNGH)
-  if (staticConfig.isInput && events) {
-    const { onPressIn, onPressOut, onPress } = events
-    const inputEvents: any = {
-      onPressIn,
-      onPressOut: onPressOut || onPress,
-    }
-    if (onPressOut && onPress) {
-      // only supports onPressIn and onPressOut so combine them
-      inputEvents.onPressOut = composeEventHandlers(onPress, onPressOut)
-    }
-    Object.assign(viewProps, inputEvents)
-    // inputs don't use gesture handler
-    return null
-  }
-
-  // HOC special case - pass press events to the inner component instead of wrapping
-  // HOC components may return null which crashes GestureDetector (it tries to access
-  // _internalInstanceHandle on a null native view). By passing events down, the inner
-  // component handles gesture detection at its own level.
-  if (isHOC && events) {
-    const { onPressIn, onPressOut, onPress, onLongPress, delayLongPress } = events
-    Object.assign(viewProps, {
-      onPressIn,
-      onPressOut,
-      onPress,
-      onLongPress,
-      delayLongPress,
-    })
-    // HOCs don't use gesture handler at this level
-    return null
-  }
-
   const hasPressEvents =
     // its stable and always on if you have in/out/regular
     events?.onPress
@@ -78,11 +44,53 @@ export function useEvents(
 
   // avoid hooks/reparenting
   const everEnabled = Boolean(hasPressEvents || stateRef.current.hasHadEvents)
+  const isUsingRNGH = gh.isEnabled
+
+  // NOW handle early returns (after all hooks are called)
+  // THESE BRANCHES ARE NEVER CHANGING RENDER-TO-RENDER
+
+  // input special case - TextInput needs press events attached directly (not via RNGH)
+  if (staticConfig.isInput) {
+    if (events) {
+      const { onPressIn, onPressOut, onPress } = events
+      const inputEvents: any = {
+        onPressIn,
+        onPressOut: onPressOut || onPress,
+      }
+      if (onPressOut && onPress) {
+        // only supports onPressIn and onPressOut so combine them
+        inputEvents.onPressOut = composeEventHandlers(onPress, onPressOut)
+      }
+      Object.assign(viewProps, inputEvents)
+    }
+
+    // inputs don't use gesture handler
+    return null
+  }
+
+  // HOC special case - pass press events to the inner component instead of wrapping
+  // HOC components may return null which crashes GestureDetector (it tries to access
+  // _internalInstanceHandle on a null native view). By passing events down, the inner
+  // component handles gesture detection at its own level.
+  if (isHOC) {
+    if (events) {
+      const { onPressIn, onPressOut, onPress, onLongPress, delayLongPress } = events
+      Object.assign(viewProps, {
+        onPressIn,
+        onPressOut,
+        onPress,
+        onLongPress,
+        delayLongPress,
+      })
+    }
+    // HOCs don't use gesture handler at this level
+    return null
+  }
 
-  // rngh
-  // gh.isEnabled - set once before app load - never changes
-  if (gh.isEnabled) {
-    const callbacksRef = useRef<any>({})
+  // rngh path - logic (hooks already called above)
+  if (isUsingRNGH) {
+    // rngh path - hooks
+    const callbacksRef = useRef<any>(isUsingRNGH ? {} : null)
     const gestureRef = useRef<any>(null)
 
     if (everEnabled) {
@@ -98,21 +106,41 @@ export function useEvents(
 
       // only create gesture once, callbacks are read from ref
       if (!gestureRef.current) {
-        gestureRef.current = gh.createPressGesture({
-          onPressIn: (e: any) => callbacksRef.current.onPressIn?.(e),
-          onPressOut: (e: any) => callbacksRef.current.onPressOut?.(e),
-          onPress: (e: any) => callbacksRef.current.onPress?.(e),
-          onLongPress: (e: any) => callbacksRef.current.onLongPress?.(e),
-          delayLongPress: events.delayLongPress,
-          hitSlop: viewProps.hitSlop,
-        })
+        if (isInsideNativeMenu) {
+          // Inside native menus on Android: use Manual gesture with manualActivation
+          // so it never goes ACTIVE (which would send ACTION_CANCEL to MenuView).
+          // Press callbacks fire via onTouchesDown/Up instead.
+          const { Gesture } = gh.state
+          const manual = Gesture.Manual()
+            .runOnJS(true)
+            .manualActivation(true)
+            .onTouchesDown(() => {
+              callbacksRef.current.onPressIn?.({})
+            })
+            .onTouchesUp(() => {
+              callbacksRef.current.onPress?.({})
+              callbacksRef.current.onPressOut?.({})
+            })
+            .onTouchesCancelled(() => {
+              callbacksRef.current.onPressOut?.({})
+            })
+          gestureRef.current = manual
+        } else {
+          gestureRef.current = gh.createPressGesture({
+            onPressIn: (e: any) => callbacksRef.current.onPressIn?.(e),
+            onPressOut: (e: any) => callbacksRef.current.onPressOut?.(e),
+            onPress: (e: any) => callbacksRef.current.onPress?.(e),
+            onLongPress: (e: any) => callbacksRef.current.onLongPress?.(e),
+            delayLongPress: events?.delayLongPress,
+            hitSlop: viewProps.hitSlop,
+          })
+        }
       }
       // TODO update viewProps.hitSlop / events.delayLongPress!
 
       return gestureRef.current
     }
 
-    // don't fall through to useMainThreadPressEvents
     return null
   }
 

package/src/eventHandling.ts

@@ -37,7 +37,8 @@ export function useEvents(
   _viewProps: any,
   _stateRef: { current: any },
   _staticConfig: any,
-  _isHOC?: boolean
+  _isHOC?: boolean,
+  _isInsideNativeMenu?: boolean
 ) {
   return null
 }

package/src/helpers/createDesignSystem.ts

@@ -1,5 +1,6 @@
 import { isWeb } from '@tamagui/constants'
 import type { CreateTamaguiProps, Variable } from '../types'
+import { getVariableVariable, isVariable } from '../createVariable'
 import { autoVariables, registerCSSVariable, variableToCSS } from './registerCSSVariable'
 import { getThemeCSSRules } from './getThemeCSSRules'
 import { getAllRules } from './insertStyleRule'
@@ -9,6 +10,38 @@ type ThemeConfig = {
   getThemeRulesSets: () => string[]
 }
 
+// helper to get font property CSS declarations
+function getFontPropertyDeclarations(
+  fontParsed: any,
+  tokenKey: string = '$true'
+): string[] {
+  const props: string[] = ['font-family: var(--f-family)']
+
+  const getVarRef = (obj: any) => {
+    const val = obj?.[tokenKey]
+    if (isVariable(val)) {
+      return getVariableVariable(val)
+    }
+    return undefined
+  }
+
+  const letterSpacing = getVarRef(fontParsed.letterSpacing)
+  if (letterSpacing) props.push(`letter-spacing: ${letterSpacing}`)
+
+  const lineHeight = getVarRef(fontParsed.lineHeight)
+  if (lineHeight) props.push(`line-height: ${lineHeight}`)
+
+  const fontStyle = getVarRef(fontParsed.style)
+  if (fontStyle) props.push(`font-style: ${fontStyle}`)
+
+  const fontWeight = getVarRef(fontParsed.weight)
+  if (fontWeight) props.push(`font-weight: ${fontWeight}`)
+
+  return props
+}
+
+export { getFontPropertyDeclarations }
+
 /**
  * Generates CSS for tokens - registers CSS variables and builds declaration strings
  */
@@ -46,11 +79,14 @@ export function createTokenCSS(
 export function createFontCSS(
   fontsParsed: Record<string, any> | undefined,
   registerFontVariables: (fontParsed: any) => string[]
-): Record<string, { name: string; declarations: string[]; language?: string }> {
+): Record<
+  string,
+  { name: string; declarations: string[]; language?: string; fontParsed: any }
+> {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const fontDeclarations: Record<
       string,
-      { name: string; declarations: string[]; language?: string }
+      { name: string; declarations: string[]; language?: string; fontParsed: any }
     > = {}
 
     if (!fontsParsed) return fontDeclarations
@@ -64,6 +100,7 @@ export function createFontCSS(
         name: name.slice(1),
         declarations: fontVars,
         language,
+        fontParsed,
       }
     }
 
@@ -79,8 +116,9 @@ export function buildCSSRuleSets(
   declarations: string[],
   fontDeclarations: Record<
     string,
-    { name: string; declarations: string[]; language?: string }
-  >
+    { name: string; declarations: string[]; language?: string; fontParsed: any }
+  >,
+  defaultFontToken: string = '$true'
 ): string[] {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const cssRuleSets: string[] = []
@@ -95,11 +133,13 @@ export function buildCSSRuleSets(
       cssRuleSets.push(declarationsToRuleSet(declarations))
     }
 
-    // fonts
+    // fonts - each font_* sets CSS variables
+    const fontSelectors: string[] = []
     const sortedFontDeclarationKeys = Object.keys(fontDeclarations).sort()
     for (const key of sortedFontDeclarationKeys) {
       const { name, declarations, language = 'default' } = fontDeclarations[key]
       const fontSelector = `.font_${name}`
+      fontSelectors.push(fontSelector)
       const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`
       const selectors =
         language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector
@@ -107,6 +147,20 @@ export function buildCSSRuleSets(
       cssRuleSets.push(specificRuleSet)
     }
 
+    // shared rule: all font_* classes + is_View apply font properties
+    // this resets fonts on Views like React Native does
+    if (fontSelectors.length) {
+      const firstFont = fontDeclarations[sortedFontDeclarationKeys[0]]
+      if (firstFont?.fontParsed) {
+        const fontProps = getFontPropertyDeclarations(
+          firstFont.fontParsed,
+          defaultFontToken
+        )
+        const sharedSelectors = [...fontSelectors, '.is_View'].join(', ')
+        cssRuleSets.push(`${sharedSelectors} {${fontProps.join('; ')}}`)
+      }
+    }
+
     return cssRuleSets
   }
   return []
@@ -176,12 +230,29 @@ export function getCSS(
       ? `:root{${autoVariables.map((v) => `--${v.name}:${v.val}`).join(';')}}`
       : ''
 
+    // notes:
+    // @scope (.is_Text) to (.is_View) - inherit text styles in nested Text without View boundary
+    // display: inline breaks css transform styles
+
+    // !important or else random css easily overrides, the prop is absolute (local-first styling)
+    const hideScrollBarsCSS = `._hsb-x::-webkit-scrollbar:horizontal { display: none !important; }
+._hsb-y::-webkit-scrollbar:vertical { display: none !important; }
+._hsb-x { scrollbar-width: none !important; }
+._hsb-y { scrollbar-width: none !important; }`
+    const pointerEventsCSS = `:root ._pe-boxonly>* {pointer-events:none;}
+:root ._pe-boxnone>* {pointer-events:auto;}`
+
     const designSystem = `._ovs-contain {overscroll-behavior:contain;}
-.is_Text .is_Text {display:inline-flex;font-family:inherit;}
+.t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
+.is_View { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }
+.is_Text { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
+@scope (.is_Text) to (.is_View) { .is_Text { white-space: inherit; word-wrap: inherit; } }
 ._dsp_contents {display:contents;}
 ._no_backdrop::backdrop {display: none;}
 .is_Input::selection, .is_TextArea::selection {background-color: var(--selectionColor);}
 .is_Input::placeholder, .is_TextArea::placeholder {color: var(--placeholderColor);}
+${pointerEventsCSS}
+${hideScrollBarsCSS}
 ${autoVarCSS}
 ${themeConfig.cssRuleSets.join(separator)}`
 

package/src/helpers/createMediaStyle.ts

@@ -1,5 +1,5 @@
 import { getSetting } from '../config'
-import { mediaObjectToString } from '../hooks/useMedia'
+import { mediaObjectToString } from './mediaObjectToString'
 import type { IsMediaType, MediaQueries, MediaStyleObject, StyleObject } from '../types'
 import { getGroupPropParts, type GroupParts } from './getGroupPropParts'
 
@@ -22,7 +22,7 @@ const groupPseudoToPseudoCSSMap = {
   focusWithin: 'focus-within',
 }
 
-const specificities = new Array(5)
+const specificities = new Array(12)
   .fill(0)
   .map((_, i) => new Array(i).fill(':root').join(''))
 
@@ -73,7 +73,9 @@ export const createMediaStyle = (
   let groupMediaKey: string | undefined
   let containerName: string | undefined
   let nextIdentifier = identifier.replace(ogPrefix, id)
-  let styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')
+  let styleInner = rules
+    .map((rule) => rule.replaceAll(identifier, nextIdentifier))
+    .join(';')
   let isHover = false
 
   if (isNonWindowMedia) {
@@ -104,7 +106,13 @@ export const createMediaStyle = (
       // add back in the { we used to split
       styleRule = styleInner.replace(selector, nextSelector)
     } else {
-      styleRule = `${specificities[specificity]}${styleInner}`
+      const prefix = specificities[specificity]
+      // when styleInner is wrapped in @media (eg hover), inject specificity
+      // inside the block — `:root@media ...` is invalid CSS
+      styleRule =
+        prefix && styleInner[0] === '@'
+          ? styleInner.replace('{', `{${prefix}`)
+          : `${prefix}${styleInner}`
     }
   }
 

package/src/helpers/createStyledContext.tsx

@@ -1,25 +1,34 @@
 import type { Context, ReactNode } from 'react'
-import React, { useContext } from 'react'
+import React from 'react'
 import type { StyledContext } from '../types'
 import { mergeProps } from './mergeProps'
 import { objectIdentityKey } from './objectIdentityKey'
 
-// test types:
-// const x = createContext({})
-// const y = x.Provider
-// export const ButtonContext = createStyledContext({
-//   size: '$4',
-// })
-// const z = useContext(ButtonContext.context)
-
-// avoid react compiler - we aren't breaking its rules but it shouldn't compile this file because
-// it will mis-interpret how we change the context value. in
-const createReactContext = React[Math.random() ? 'createContext' : 'createContext']
-
-export function createStyledContext<VariantProps extends Record<string, any>>(
+// use const (not function declaration) to prevent esbuild from hoisting
+// above __esm lazy init - function declarations get hoisted before
+// import_react is initialized, causing undefined.default errors in SSR
+export const createStyledContext = <VariantProps extends Record<string, any>>(
   defaultValues?: VariantProps,
   namespace = ''
-): StyledContext<VariantProps> {
+): StyledContext<VariantProps> => {
+  // avoid react compiler - we aren't breaking its rules but it mis-interprets
+  // how we change the context value
+  'use no memo'
+
+  // lazy initialization fixes vite ssr hmr - module-level assignments can fail
+  // when React is undefined during __esm re-initialization order issues.
+  // also React.createContext is optimized oddly by React compiler and our
+  // uncommon usage confuses it, so we use dynamic access
+  const createReactContext = React[
+    Math.random() ? 'createContext' : 'createContext'
+  ] as typeof React.createContext
+  const useReactMemo = React[
+    Math.random() ? 'useMemo' : 'useMemo'
+  ] as typeof React.useMemo
+  const useReactContext = React[
+    Math.random() ? 'useContext' : 'useContext'
+  ] as typeof React.useContext
+
   const OGContext = createReactContext<VariantProps | undefined>(defaultValues)
   const OGProvider = OGContext.Provider
   const Context = OGContext as any as StyledContext<VariantProps>
@@ -47,7 +56,7 @@ export function createStyledContext<VariantProps extends Record<string, any>>(
   }: VariantProps & { children?: ReactNode; scope: string }) => {
     const scope = getNamespacedScope(scopeIn)
 
-    const next = React.useMemo(() => {
+    const next = useReactMemo(() => {
       if (__disableMergeDefaultValues) {
         // we already merged and want to keep ordering
         return values
@@ -68,14 +77,14 @@ export function createStyledContext<VariantProps extends Record<string, any>>(
 
   // use consumerComponent just to give a better error message
   const useStyledContext = (scopeIn = '') => {
-    const lastScopeInNamespace = useContext(LastScopeInNamespace)
+    const lastScopeInNamespace = useReactContext(LastScopeInNamespace)
     const scope = namespace
       ? scopeIn
         ? getNamespacedScope(scopeIn)
         : lastScopeInNamespace
       : scopeIn
     const context = scope ? getOrCreateScopedContext(scope) : OGContext
-    const value = React.useContext(context!) as VariantProps
+    const value = useReactContext(context!) as VariantProps
     return value
   }
 

package/src/helpers/defaultAnimationDriver.tsx

@@ -8,10 +8,8 @@ const noAnimationDriver = (method: string): any => {
 
 const createEmptyAnimationDriver = (): AnimationDriver => ({
   isReactNative: false,
-  supportsCSS: true,
   inputStyle: 'css',
   outputStyle: 'css',
-  classNameAnimation: true,
   isStub: true,
   animations: {},
   useAnimations: () => noAnimationDriver('animations'),

package/src/helpers/expandStyle.ts

@@ -8,6 +8,7 @@ import { isAndroid, isWeb } from '@tamagui/constants'
 import { getSetting } from '../config'
 import type { PropMappedValue } from '../types'
 import { parseBorderShorthand } from './parseBorderShorthand'
+import { parseOutlineShorthand } from './parseOutlineShorthand'
 
 const neg1Flex = [
   ['flexGrow', 0],
@@ -65,6 +66,7 @@ export function expandStyle(key: string, value: any): PropMappedValue {
       }
       case 'backgroundImage': {
         // RN 0.76+ uses experimental_backgroundImage
+        // value may be a parsed array (from parseNativeStyle) or a plain string
         return [['experimental_backgroundImage', value]]
       }
       case 'border': {
@@ -78,6 +80,15 @@ export function expandStyle(key: string, value: any): PropMappedValue {
         }
         return
       }
+      case 'outline': {
+        if (typeof value === 'string') {
+          const parsed = parseOutlineShorthand(value)
+          if (parsed) {
+            return parsed
+          }
+        }
+        return
+      }
     }
 
     // native-only key expansions (logical properties)

package/src/helpers/getCSSStylesAtomic.ts

@@ -4,7 +4,7 @@
  */
 
 import type { StyleObject } from '@tamagui/helpers'
-import { simpleHash } from '@tamagui/helpers'
+import { cssShorthandLonghands, simpleHash } from '@tamagui/helpers'
 import { getConfigMaybe } from '../config'
 import { isMediaKey } from '../hooks/useMedia'
 import type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
@@ -79,7 +79,11 @@ const getStyleObject = (
   const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''
   conf ||= getConfigMaybe()
   const shortProp = conf?.inverseShorthands[key] || key
-  const identifier = `_${shortProp}-${pseudoPrefix}${hash}`
+  let identifier = `_${shortProp}-${pseudoPrefix}${hash}`
+  if (key === 'pointerEvents' && !pseudo) {
+    if (value === 'box-none') identifier = '_pe-boxnone'
+    else if (value === 'box-only') identifier = '_pe-boxonly'
+  }
   const rules = createAtomicRules(identifier, key, value, pseudo)
   return [
     // array for performance
@@ -173,11 +177,15 @@ function createAtomicRules(
     : ''
   const pseudoSelector = pseudo?.selector
 
+  // longhands get .cls.cls for higher specificity over shorthands
+  const cls =
+    property in cssShorthandLonghands ? `.${identifier}.${identifier}` : `.${identifier}`
+
   let selector = pseudo
     ? pseudoSelector
-      ? `${pseudoSelector} .${identifier}`
-      : `${selectorPriority[pseudo.name]} .${identifier}${pseudoIdPostfix}`
-    : `:root .${identifier}`
+      ? `${pseudoSelector} ${cls}`
+      : `${selectorPriority[pseudo.name]} ${cls}${pseudoIdPostfix}`
+    : `:root ${cls}`
 
   // enter style on css driver needs both:
   //   .t_unmounted .selector
@@ -227,14 +235,8 @@ function createAtomicRules(
       let finalValue = value
       if (value === 'auto' || value === 'box-only') {
         finalValue = 'auto'
-        if (value === 'box-only') {
-          rules.push(`${selector}>*${boxOnly}`)
-        }
       } else if (value === 'none' || value === 'box-none') {
         finalValue = 'none'
-        if (value === 'box-none') {
-          rules.push(`${selector}>*${boxNone}`)
-        }
       }
       const block = createDeclarationBlock([['pointerEvents', finalValue]], true)
       rules.push(`${selector}${block}`)
@@ -259,6 +261,3 @@ function createAtomicRules(
 
   return rules
 }
-
-const boxNone = createDeclarationBlock([['pointerEvents', 'auto']], true)
-const boxOnly = createDeclarationBlock([['pointerEvents', 'none']], true)

package/src/helpers/getDefaultProps.ts

@@ -4,8 +4,7 @@ import type { StaticConfig } from '../types'
 // merge both default props, styled context props, and default text props
 export const getDefaultProps = (
   staticConfig: StaticConfig,
-  propsComponentName?: string,
-  isSubText?: boolean
+  propsComponentName?: string
 ) => {
   let defaultProps = staticConfig?.defaultProps
 
@@ -20,19 +19,9 @@ export const getDefaultProps = (
 
   if (userDefaultProps) {
     // component's staticConfig.defaultProps wins over global config defaults
-    defaultProps = { ...userDefaultProps, ...defaultProps }
-  }
-
-  if (process.env.TAMAGUI_TARGET === 'web' && isSubText) {
-    // for nested text, inherit from parent unless component explicitly set a fontFamily
-    // staticConfig.defaultProps contains explicit component defaults (e.g., SizableText sets $body)
-    // userDefaultProps contains global config defaults - these should be overridden for nested text
-    const hasExplicitFontFamily = staticConfig?.defaultProps?.fontFamily
-    defaultProps = { ...defaultProps }
-    if (!hasExplicitFontFamily) defaultProps.fontFamily = 'inherit'
-    if (!defaultProps.color) defaultProps.color = 'inherit'
-    if (defaultProps.whiteSpace === 'pre-wrap') defaultProps.whiteSpace = 'inherit'
-    if (defaultProps.wordWrap === 'break-word') defaultProps.wordWrap = 'inherit'
+    defaultProps = defaultProps
+      ? { ...userDefaultProps, ...defaultProps }
+      : userDefaultProps
   }
 
   return defaultProps

package/src/helpers/getGroupPropParts.ts

@@ -1,4 +1,4 @@
-import { getMedia } from '../hooks/useMedia'
+import { getMedia } from './mediaState'
 import { pseudoPriorities } from './pseudoDescriptors'
 
 export type GroupParts = { name: string; pseudo?: string; media?: string }