@tamagui/web 3.0.0-beta.922.1 → 3.0.0

package/src/dom/styleTypes.ts

@@ -1,21 +1,31 @@
 import type { Properties } from 'csstype'
 
+export type UnprefixedCSSProperties<Length = string | number> = Omit<
+  Properties<Length>,
+  `${'Webkit' | 'Moz' | 'ms'}${string}`
+>
+
 /**
- * The style grammar `style()` accepts, owned by Tamagui rather than borrowed
+ * The web style contract: the style grammar `style()` accepts and the surface
+ * every `html.*` tag is typed against, owned by Tamagui rather than borrowed
  * from react-native.
  *
  * `@tamagui/core/dom` is the one entry that must typecheck in a project with no
  * react-native installed, so nothing here may reference it. The regular
- * `View`/`Text` props still come from react-native's `ViewStyle`/`TextStyle`;
- * this is a parallel definition of the same property set, not a replacement for
- * those.
+ * `View`/`Text` props combine react-native's style types with the canonical CSS
+ * properties (see `StackStyleBase` / `TextStylePropsBase` in `../types`). This
+ * entry uses the same CSS properties with its own native-free overrides.
  *
- * `styleTypes.test-d.ts` holds it to that: it runs where react-native *is*
- * available and asserts, at the type level, that this key set is exactly the key
- * set of `StackStyleBase & TextStylePropsBase`, that every react-native
- * `ViewStyle`/`TextStyle` key appears here, and that every value the regular
- * props accept is accepted here too. Add a property to `types.tsx` without
- * adding it here and that test goes red.
+ * The react-native-only keys (`elevation`, `marginHorizontal`,
+ * `marginVertical`, `paddingHorizontal`, `paddingVertical`, the `shadow*`
+ * longhands, `textAlignVertical`, `includeFontPadding`, `writingDirection`)
+ * are absent here rather than deprecated: on web their replacements
+ * (`boxShadow`, the logical box props, `direction`, `verticalAlign`) are the
+ * contract. `styleTypes.test-d.ts` holds this to that: it runs where
+ * react-native *is* available and asserts, at the type level, that this key
+ * set is exactly the key set of `StackStyleBase & TextStylePropsBase` minus
+ * those keys, and that every value the regular props accept is accepted here
+ * too.
  *
  * Three value forms are deliberately absent, because they only exist at runtime
  * and `style()` is resolved by the compiler:
@@ -32,16 +42,16 @@ import type { Properties } from 'csstype'
  */
 
 /** a length, a percentage, or `auto` — react-native's `DimensionValue` */
-type DimensionValue = number | 'auto' | `${number}%` | null
+type DimensionValue = number | string | null
 
 /** a color: a theme or token name, a CSS color, or a clause like `'a hover:b'` */
-type ColorValue = string
+type ColorValue = string | number | null
 
 /**
  * `color` and `outlineColor` also take the theme-value fallbacks, which include
  * a bare number.
  */
-type ThemeColorValue = string | number
+type ThemeColorValue = ColorValue
 
 /** a size token name, a CSS length, or `true` for the token named `true` */
 type SizeValue = number | string | true
@@ -51,7 +61,7 @@ type SpaceValue = number | string | true
 
 type FlexAlignType = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
 
-type BorderStyleValue = 'solid' | 'dotted' | 'dashed'
+type BorderStyleValue = 'solid' | 'dotted' | 'dashed' | 'none' | 'hidden'
 
 type FontVariantValue =
   | 'small-caps'
@@ -141,15 +151,16 @@ interface TransformFunctions {
   scale: number
   scaleX: number
   scaleY: number
-  translateX: number | `${number}%`
-  translateY: number | `${number}%`
+  translate: readonly [number | string, number | string]
+  translateX: number | string
+  translateY: number | string
   skewX: string
   skewY: string
-  matrix: number[]
+  matrix: readonly number[]
 }
 
 type TransformFunction = {
-  [K in keyof TransformFunctions]: Pick<TransformFunctions, K> &
+  [K in keyof TransformFunctions]: Partial<Pick<TransformFunctions, K>> &
     Partial<Record<Exclude<keyof TransformFunctions, K>, undefined>>
 }[keyof TransformFunctions]
 
@@ -184,7 +195,17 @@ interface LayoutStyle {
   columnGap?: number | string
   direction?: 'inherit' | 'ltr' | 'rtl'
   /** extends react-native's `display` with the web values */
-  display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'
+  display?:
+    | 'inherit'
+    | 'none'
+    | 'inline'
+    | 'block'
+    | 'inline-block'
+    | 'contents'
+    | 'flex'
+    | 'inline-flex'
+    | 'grid'
+    | 'inline-grid'
   end?: DimensionValue
   flex?: number
   flexBasis?: DimensionValue
@@ -205,26 +226,22 @@ interface LayoutStyle {
   margin?: DimensionValue
   marginBottom?: DimensionValue
   marginEnd?: DimensionValue
-  marginHorizontal?: DimensionValue
   marginLeft?: DimensionValue
   marginRight?: DimensionValue
   marginStart?: DimensionValue
   marginTop?: DimensionValue
-  marginVertical?: DimensionValue
   maxHeight?: DimensionValue
   maxWidth?: DimensionValue
   minHeight?: DimensionValue
   minWidth?: DimensionValue
-  overflow?: 'visible' | 'hidden' | 'scroll'
+  overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip'
   padding?: DimensionValue
   paddingBottom?: DimensionValue
   paddingEnd?: DimensionValue
-  paddingHorizontal?: DimensionValue
   paddingLeft?: DimensionValue
   paddingRight?: DimensionValue
   paddingStart?: DimensionValue
   paddingTop?: DimensionValue
-  paddingVertical?: DimensionValue
   /** extends react-native's `position` with the web values */
   position?: 'absolute' | 'relative' | 'fixed' | 'static' | 'sticky'
   right?: DimensionValue
@@ -349,7 +366,6 @@ interface PaintStyle {
   boxShadow?: ShorthandString
   caretColor?: Properties['caretColor']
   clipPath?: Properties['clipPath']
-  elevation?: number
   experimental_backgroundImage?: string | readonly BackgroundImageValue[]
   experimental_backgroundSize?: string | readonly BackgroundSizeValue[]
   experimental_backgroundPosition?: string | readonly RadialGradientPosition[]
@@ -375,10 +391,6 @@ interface PaintStyle {
     | 'luminosity'
     | 'plus-lighter'
   opacity?: number
-  shadowColor?: ColorValue
-  shadowOffset?: Readonly<{ width: number; height: number }>
-  shadowOpacity?: number
-  shadowRadius?: number
   visibility?: Properties['visibility']
 }
 
@@ -432,7 +444,8 @@ interface TextStyle {
   fontFamily?: string
   fontSize?: number
   fontStyle?: 'normal' | 'italic'
-  fontVariant?: FontVariantValue[]
+  // readonly so an `as const` style literal still assigns (#2787)
+  fontVariant?: readonly FontVariantValue[]
   fontWeight?:
     | 'normal'
     | 'bold'
@@ -464,17 +477,15 @@ interface TextStyle {
     | 'condensed'
     | 'heavy'
     | 'black'
-  includeFontPadding?: boolean
   letterSpacing?: number
-  lineHeight?: number
+  lineHeight?: number | Px | `${number}`
   numberOfLines?: number
-  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify'
-  textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center'
+  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | 'start' | 'end'
   textDecoration?: ShorthandString
   textDecorationColor?: ColorValue
   textDecorationDistance?: number
   textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through'
-  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed'
+  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy'
   textEmphasis?: Properties['textEmphasis']
   textOverflow?: Properties['textOverflow']
   textShadow?: ShorthandString
@@ -486,7 +497,6 @@ interface TextStyle {
   verticalAlign?: Properties['verticalAlign']
   whiteSpace?: Properties['whiteSpace']
   wordWrap?: Properties['wordWrap']
-  writingDirection?: 'auto' | 'ltr' | 'rtl'
 }
 
 /**
@@ -505,7 +515,7 @@ interface TransformStyle {
   scaleY?: number
   skewX?: string
   skewY?: string
-  transform?: string | readonly TransformFunction[]
+  transform?: string | readonly (TransformFunction | undefined)[]
   transformOrigin?:
     | PxOrPct
     | 'left'
@@ -516,18 +526,10 @@ interface TransformStyle {
     | TwoValueTransformOrigin
     | `${TwoValueTransformOrigin} ${Px}`
   transformStyle?: Properties['transformStyle']
-  /** maps to `translateX` */
-  x?: number
-  /** maps to `translateY` */
-  y?: number
-  /** @deprecated use `matrix` in `transform` */
-  transformMatrix?: number[]
-  /** @deprecated use `rotate` */
-  rotation?: number
-  /** @deprecated use `x` */
-  translateX?: number
-  /** @deprecated use `y` */
-  translateY?: number
+  /** maps to `translateX`; a percent string is relative to the element's own width */
+  x?: number | `${number}%`
+  /** maps to `translateY`; a percent string is relative to the element's own height */
+  y?: number | `${number}%`
 }
 
 /**
@@ -551,58 +553,41 @@ interface WebStyle {
   userSelect?: Properties['userSelect']
 }
 
+/** low-level spring physics, for porting an already-tuned config */
 type TransitionSpringConfig = {
   stiffness?: number
   damping?: number
   mass?: number
-  tension?: number
-  friction?: number
   velocity?: number
   overshootClamping?: boolean
-  duration?: number
-  bounciness?: number
-  speed?: number
+  restDisplacementThreshold?: number
+  restSpeedThreshold?: number
 }
 
-/** a configured driver animation name, or a CSS transition string like `'200ms'` */
+/**
+ * A configured driver animation name, or a CSS transition string like `'200ms'`,
+ * `'200ms ease-out'`, or `'opacity 150ms, transform spring(300ms, 0.4)'`.
+ */
 type TransitionValue = string
 
+type TransitionConfig = {
+  preset?: string
+  duration?: number | string
+  bounce?: number
+  easing?: string
+  delay?: number | string
+  behavior?: 'normal' | 'allow-discrete'
+  properties?: string
+  spring?: TransitionSpringConfig
+  enter?: TransitionProp
+  exit?: TransitionProp
+}
+
 type TransitionProp =
   | TransitionValue
-  | ({
-      default?: TransitionValue
-      enter?: TransitionValue
-      exit?: TransitionValue
-      delay?: number
-    } & TransitionSpringConfig & {
-        [key: string]:
-          | TransitionValue
-          | {
-              type: TransitionValue
-              [key: string]: any
-            }
-          | number
-          | boolean
-          | undefined
-      })
-  | [
-      TransitionValue,
-      {
-        delay?: number
-        enter?: TransitionValue
-        exit?: TransitionValue
-      } & TransitionSpringConfig & {
-          [key: string]:
-            | TransitionValue
-            | {
-                type?: TransitionValue
-                [key: string]: any
-              }
-            | number
-            | boolean
-            | undefined
-        },
-    ]
+  | (TransitionConfig & {
+      [property: string]: TransitionValue | TransitionConfig | unknown
+    })
 
 /**
  * The animation props, which ride along with the style grammar because a
@@ -610,7 +595,6 @@ type TransitionProp =
  */
 interface AnimationStyle {
   transition?: TransitionProp | null
-  animateOnly?: string[]
   animatePresence?: boolean
   onTransition?: (event: {
     phase: 'start' | 'end'
@@ -621,9 +605,9 @@ interface AnimationStyle {
 }
 
 /**
- * The whole style grammar `style()` accepts.
+ * the owned overrides in the web style grammar.
  */
-export interface TamaguiStyleProps
+interface TamaguiStylePropsBase
   extends
     LayoutStyle,
     LogicalStyle,
@@ -635,3 +619,9 @@ export interface TamaguiStyleProps
     TransformStyle,
     WebStyle,
     AnimationStyle {}
+
+/** the whole style grammar; container remains a component query prop. */
+export interface TamaguiStyleProps
+  extends
+    TamaguiStylePropsBase,
+    Omit<UnprefixedCSSProperties, keyof TamaguiStylePropsBase | 'container'> {}

package/src/eventHandling.native.ts

@@ -152,7 +152,46 @@ export function useEvents(
     // rngh path - hooks
     const callbacksRef = useRef<any>(isUsingRNGH ? {} : null)
     const gestureRef = useRef<any>(null)
+    // pairs pressIn with exactly one pressOut across the Manual observer's
+    // touchesDown/touchesUp/touchesCancelled/finalize channels. RNGH can drop a
+    // trailing touch event (the handler is re-attached to a new view mid-touch,
+    // or cancelled without a touch-cancel), and because the press state lives in
+    // the component's own state a dropped release latches the press look with no
+    // event left to clear it. Guarding here means a stray duplicate release is a
+    // no-op while a missing one is caught by onFinalize / the detach clear below.
+    const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const longPressedRef = useRef(false)
+    const clearLongPress = () => {
+      if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current)
+      longPressTimerRef.current = null
+    }
+    React.useEffect(() => clearLongPress, [])
+    const pressActiveRef = useRef(false)
+    const beginPress = (e?: any) => {
+      if (pressActiveRef.current) return
+      pressActiveRef.current = true
+      if (isInsideNativeMenu) {
+        clearLongPress()
+        longPressedRef.current = false
+        if (callbacksRef.current.onLongPress) {
+          longPressTimerRef.current = setTimeout(() => {
+            longPressTimerRef.current = null
+            longPressedRef.current = true
+            callbacksRef.current.onLongPress?.(e ?? {})
+          }, callbacksRef.current.delayLongPress ?? 500)
+        }
+      }
+      callbacksRef.current.onPressIn?.(e ?? {})
+    }
+    const endPress = (e?: any, firePress = false) => {
+      clearLongPress()
+      if (!pressActiveRef.current) return
+      pressActiveRef.current = false
+      if (firePress && !longPressedRef.current) callbacksRef.current.onPress?.(e ?? {})
+      callbacksRef.current.onPressOut?.(e ?? {})
+    }
 
+    // native menu triggers leave responder ownership to the adapter.
     // Real press handlers use the responder system for delivery even when RNGH
     // is configured. RNGH Tap begin/end ordering is not stable enough for
     // nested Tamagui press arbitration, and Fabric can mount a stale Tap that
@@ -164,9 +203,9 @@ export function useEvents(
     // freezes Android — see top-of-file isAndroid comment). Hook is called
     // unconditionally here for stable hooks order; useMainThreadPressEvents
     // no-ops when enabled is false.
-    const useResponderFallback =
-      !isInsideNativeMenu &&
-      Boolean(hasRealPressEvents || (getIsAndroid() && hasPressEvents))
+    const useResponderFallback = Boolean(
+      !isInsideNativeMenu && (hasRealPressEvents || (getIsAndroid() && hasPressEvents))
+    )
     useMainThreadPressEvents(events, viewProps, useResponderFallback, debugName)
 
     if (everEnabled) {
@@ -177,6 +216,7 @@ export function useEvents(
             onPressOut: events.onPressOut,
             onPress: events.onPress,
             onLongPress: events.onLongPress,
+            delayLongPress: events.delayLongPress,
           }
         : {}
 
@@ -184,6 +224,10 @@ export function useEvents(
         // Real handlers are delivered by useMainThreadPressEvents above. Clear
         // any cached press-clause observer from an earlier render so it cannot
         // double-fire after onPress appears dynamically.
+        // No observer will run for this component after the swap, so an
+        // in-flight press from that observer is definitionally orphaned —
+        // release it before dropping the gesture.
+        endPress()
         gestureRef.current = null
         return null
       }
@@ -200,14 +244,16 @@ export function useEvents(
             .runOnJS(true)
             .manualActivation(true)
             .onTouchesDown(() => {
-              callbacksRef.current.onPressIn?.({})
+              beginPress()
             })
             .onTouchesUp(() => {
-              callbacksRef.current.onPress?.({})
-              callbacksRef.current.onPressOut?.({})
+              endPress(undefined, true)
             })
             .onTouchesCancelled(() => {
-              callbacksRef.current.onPressOut?.({})
+              endPress()
+            })
+            .onFinalize(() => {
+              endPress()
             })
           gestureRef.current = manual
         } else if (!getIsAndroid()) {
@@ -222,15 +268,19 @@ export function useEvents(
           //
           // Android: skipped — see isAndroid comment at top. Synthesized
           // press-clause handlers fall through to viewProps responder events.
+          //
+          // onFinalize is the safety net for a release RNGH never delivers as a
+          // touch event (handler cancelled/failed without a touch-cancel): it
+          // fires on the gesture's own end/cancel and clears the latch.
           gestureRef.current = Gesture.Manual()
             .runOnJS(true)
             .manualActivation(true)
-            .onTouchesDown((e: any) => callbacksRef.current.onPressIn?.(e))
+            .onTouchesDown((e: any) => beginPress(e))
             .onTouchesUp((e: any) => {
-              callbacksRef.current.onPress?.(e)
-              callbacksRef.current.onPressOut?.(e)
+              endPress(e, true)
             })
-            .onTouchesCancelled((e: any) => callbacksRef.current.onPressOut?.(e))
+            .onTouchesCancelled((e: any) => endPress(e))
+            .onFinalize(() => endPress())
         }
       }
       // TODO update viewProps.hitSlop / events.delayLongPress!

package/src/eventHandling.ts

@@ -7,15 +7,30 @@ import type { TamaguiComponentEvents } from './interfaces/TamaguiComponentEvents
 type EventKeys = keyof TamaguiComponentEvents
 type EventLikeObject = { [key in EventKeys]?: any }
 
+// a tap on a touch screen fires touchstart and touchend, then the browser's
+// compatibility mousedown and mouseup for the same tap. press in and press out
+// listen to both so a mouse presses too, so without this every press-in and
+// press-out handler ran twice per tap (a toggle opened and closed again).
+let lastTouch = -1e9
+
+// a mouse event within a second of a touch is that compatibility echo
+const pressFrom = (touch: boolean, handler?: (e: { timeStamp: number }) => void) =>
+  handler &&
+  ((e: { timeStamp: number }) => {
+    if (touch) lastTouch = e.timeStamp
+    else if (e.timeStamp - lastTouch < 1000) return
+    handler(e)
+  })
+
 export function getWebEvents<E extends EventLikeObject>(events: E, webStyle = true) {
   return {
     onMouseEnter: events.onMouseEnter,
     onMouseLeave: events.onMouseLeave,
     [webStyle ? 'onClick' : 'onPress']: events.onPress,
-    onMouseDown: events.onPressIn,
-    onMouseUp: events.onPressOut,
-    onTouchStart: events.onPressIn,
-    onTouchEnd: events.onPressOut,
+    onMouseDown: pressFrom(false, events.onPressIn),
+    onMouseUp: pressFrom(false, events.onPressOut),
+    onTouchStart: pressFrom(true, events.onPressIn),
+    onTouchEnd: pressFrom(true, events.onPressOut),
     onFocus: events.onFocus,
     onBlur: events.onBlur,
   }

package/src/helpers/NativeTextBinding.tsx

@@ -0,0 +1,26 @@
+import { createElement, type ReactElement } from 'react'
+import type { AnimationDriverLike } from '../types'
+import type { AnimatedTextChannel, NativeTextMetrics } from './nativeTextMetrics'
+
+// only inherited animated text mounts this hook boundary; ordinary text keeps its host.
+export function NativeTextBinding({
+  element,
+  useTextMetrics,
+  inheritedText,
+  lineHeight,
+  isInput,
+}: {
+  element: ReactElement<any>
+  useTextMetrics: NonNullable<AnimationDriverLike['useTextMetrics']>
+  inheritedText: AnimatedTextChannel
+  lineHeight: NativeTextMetrics['lineHeight']
+  isInput?: boolean
+}) {
+  const binding = useTextMetrics({ inheritedText, lineHeight })
+  if (!binding.style) return element
+  const Host = isInput ? binding.TextInput : binding.Text
+  return createElement(Host, {
+    ...element.props,
+    style: [element.props.style, binding.style],
+  })
+}

package/src/helpers/createDesignSystem.ts

@@ -7,6 +7,7 @@ import {
   variableToCSS,
 } from './registerCSSVariable'
 import { getConfigMaybe } from '../config'
+import { htmlResetCSS } from '../dom/htmlReset'
 import { getThemeCSSRules } from './getThemeCSSRules'
 import { getAllRules, wrapStyleRules } from './insertStyleRule'
 
@@ -95,10 +96,13 @@ export function buildCSSRuleSets(
 ): string[] {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const cssRuleSets: string[] = []
-    const sep = ' '
+    const developmentWhitespace = process.env.NODE_ENV === 'development'
+    const sep = developmentWhitespace ? ' ' : ''
 
     function declarationsToRuleSet(decs: string[], selector = '') {
-      return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}\n}`
+      return `:root${selector}${sep}{${sep}${[...decs].join(`;${sep}`)}${
+        developmentWhitespace ? '\n' : ''
+      }}`
     }
 
     // non-font tokens
@@ -129,7 +133,7 @@ export function buildCSSRuleSets(
         // These are defaults, so an atomic style prop must be able to override
         // them regardless of stylesheet insertion order.
         const sharedSelectors = `:where(${[...fontSelectors, '.is_View'].join(', ')})`
-        cssRuleSets.push(`${sharedSelectors} {font-family: var(--f-family)}`)
+        cssRuleSets.push(`${sharedSelectors}${sep}{font-family:${sep}var(--f-family)}`)
       }
     }
 
@@ -233,18 +237,30 @@ const getStaticCSS = (
 ._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 pointerEventsCSS = `:where(._pe-boxonly)>* {pointer-events:none;}
+:where(._pe-boxnone)>* {pointer-events:auto;}`
 
-  const designSystem = `._ovs-contain {overscroll-behavior:contain;}
-.t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
+  const baseDesignSystem = `._ovs-contain {overscroll-behavior:contain;}
+.t_unmounted .is_View, .t_unmounted .is_Text, .t_unmounted .is_DOM { transition: none !important; }
 :where(.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; }
 :where(.is_Text) { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
+${htmlResetCSS}
 @scope (.is_Text) to (.is_View) { :where(.is_Text) { white-space: inherit; word-wrap: inherit; } }
 ._dsp_contents {display:contents;}
 ._no_backdrop::backdrop {display: none;}
 ${pointerEventsCSS}
-${hideScrollBarsCSS}
+${hideScrollBarsCSS}`
+  const designSystem = `${
+    process.env.NODE_ENV === 'production'
+      ? baseDesignSystem
+          .replaceAll(' {', '{')
+          .replaceAll('{ ', '{')
+          .replaceAll(': ', ':')
+          .replaceAll('; ', ';')
+          .replaceAll(';}', '}')
+          .replaceAll('\n', '')
+      : baseDesignSystem
+  }
 ${autoVarCSS}
 ${themeConfig.cssRuleSets.join(separator)}`