@tamagui/web 2.7.7 → 3.0.0-beta.1097.1

package/src/helpers/createStyledContext.tsx

@@ -1,44 +1,95 @@
 import type { Context, ReactNode } from 'react'
 import React from 'react'
-import type { StyledContext } from '../types'
+import type { StyledContext, StyledContextOptions } from '../types'
+import { isPlainObject } from './isObj'
 import { mergeProps } from './mergeProps'
 import { objectIdentityKey } from './objectIdentityKey'
 
-// 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>>(
+type EmptyDefault = Record<PropertyKey, never>
+type EmptyDefaultOptions = string | { namespace?: string; keys?: never }
+type StyledContextKey<Props> = Extract<keyof Props, string>
+
+type OptionalStyledContextKeys<Props extends Record<string, any>> = {
+  [Key in keyof Props]-?: {} extends Pick<Props, Key> ? Key : never
+}[keyof Props]
+
+type RequiredStyledContextKeys<Props extends Record<string, any>> = Exclude<
+  keyof Props,
+  OptionalStyledContextKeys<Props>
+>
+
+type FullDefaultValues<Props extends Record<string, any>> = {
+  [Key in RequiredStyledContextKeys<Props>]: Props[Key]
+} & {
+  [Key in OptionalStyledContextKeys<Props>]: Props[Key] | undefined
+}
+
+type StyledContextFactory = {
+  <
+    VariantProps extends Record<string, any>,
+    ConsumedKeys extends StyledContextKey<VariantProps>,
+  >(
+    defaultValues: VariantProps,
+    namespaceOrOptions: StyledContextOptions<VariantProps, ConsumedKeys> & {
+      keys: readonly ConsumedKeys[]
+    }
+  ): StyledContext<VariantProps, ConsumedKeys>;
+  <VariantProps extends Record<string, any>>(
+    defaultValues: EmptyDefault,
+    namespaceOrOptions?: EmptyDefaultOptions
+  ): StyledContext<VariantProps, never>;
+  <VariantProps extends Record<string, any>>(
+    defaultValues: VariantProps & FullDefaultValues<VariantProps>,
+    namespaceOrOptions?: EmptyDefaultOptions
+  ): StyledContext<VariantProps, StyledContextKey<VariantProps>>;
+  <
+    VariantProps extends Record<string, any>,
+    ConsumedKeys extends StyledContextKey<VariantProps>,
+  >(
+    defaultValues: undefined,
+    namespaceOrOptions: StyledContextOptions<VariantProps, ConsumedKeys> & {
+      keys: readonly ConsumedKeys[]
+    }
+  ): StyledContext<VariantProps, ConsumedKeys>;
+  <VariantProps extends Record<string, any> = Record<string, any>>(
+    defaultValues?: undefined,
+    namespaceOrOptions?: string
+  ): StyledContext<VariantProps, never>
+}
+
+export const createStyledContext = (<VariantProps extends Record<string, any>>(
   defaultValues?: VariantProps,
-  namespace = ''
-): StyledContext<VariantProps> => {
-  // avoid react compiler - we aren't breaking its rules but it mis-interprets
-  // how we change the context value
+  namespaceOrOptions:
+    | string
+    | StyledContextOptions<VariantProps, StyledContextKey<VariantProps>> = ''
+): StyledContext<VariantProps, StyledContextKey<VariantProps>> => {
   '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 namespace =
+    typeof namespaceOrOptions === 'string'
+      ? namespaceOrOptions
+      : namespaceOrOptions.namespace || ''
+  const defaultKeys = isPlainObject(defaultValues)
+    ? (Object.keys(defaultValues) as StyledContextKey<VariantProps>[])
+    : undefined
+  const propKeys =
+    typeof namespaceOrOptions === 'object' && namespaceOrOptions.keys
+      ? namespaceOrOptions.keys
+      : defaultKeys
 
-  const OGContext = createReactContext<VariantProps | undefined>(defaultValues)
+  const OGContext = React.createContext<VariantProps | undefined>(defaultValues)
   const OGProvider = OGContext.Provider
-  const Context = OGContext as any as StyledContext<VariantProps>
+  const Context = OGContext as any as StyledContext<
+    VariantProps,
+    StyledContextKey<VariantProps>
+  >
   const scopedContexts = new Map<string, Context<VariantProps | undefined>>()
-  const LastScopeInNamespace = createReactContext<string>(namespace)
+  const LastScopeInNamespace = React.createContext<string>(namespace)
 
   function getOrCreateScopedContext(scope: string) {
     let ScopedContext = scopedContexts.get(scope)
     if (!ScopedContext) {
-      ScopedContext = createReactContext<VariantProps | undefined>(defaultValues)
+      ScopedContext = React.createContext<VariantProps | undefined>(defaultValues)
       scopedContexts.set(scope, ScopedContext)
     }
     return ScopedContext!
@@ -50,24 +101,16 @@ export const createStyledContext = <VariantProps extends Record<string, any>>(
   const Provider = ({
     children,
     scope: scopeIn,
-    // performance: avoid creating objects
     __disableMergeDefaultValues,
     ...values
   }: VariantProps & { children?: ReactNode; scope: string }) => {
     const scope = getNamespacedScope(scopeIn)
-
-    const next = useReactMemo(() => {
-      if (__disableMergeDefaultValues) {
-        // we already merged and want to keep ordering
-        return values
-      }
-      return mergeProps(defaultValues!, values)
+    const next = React.useMemo(() => {
+      if (__disableMergeDefaultValues) return values
+      return mergeProps(defaultValues || {}, values)
     }, [objectIdentityKey(values)])
 
-    let ScopedProvider = OGProvider
-    if (scope) {
-      ScopedProvider = getOrCreateScopedContext(scope).Provider
-    }
+    const ScopedProvider = scope ? getOrCreateScopedContext(scope).Provider : OGProvider
     return (
       <LastScopeInNamespace.Provider value={scope}>
         <ScopedProvider value={next as VariantProps}>{children}</ScopedProvider>
@@ -75,24 +118,23 @@ export const createStyledContext = <VariantProps extends Record<string, any>>(
     )
   }
 
-  // use consumerComponent just to give a better error message
   const useStyledContext = (scopeIn = '') => {
-    const lastScopeInNamespace = useReactContext(LastScopeInNamespace)
+    const lastScopeInNamespace = React.useContext(LastScopeInNamespace)
     const scope = namespace
       ? scopeIn
         ? getNamespacedScope(scopeIn)
         : lastScopeInNamespace
       : scopeIn
     const context = scope ? getOrCreateScopedContext(scope) : OGContext
-    const value = useReactContext(context!) as VariantProps
-    return value
+    return React.useContext(context!) as VariantProps
   }
 
   // @ts-expect-error we are overriding default provider
   Context.Provider = Provider
   Context.props = defaultValues
+  Context.propKeys = propKeys
   Context.context = OGContext as Context<VariantProps>
   Context.useStyledContext = useStyledContext
 
   return Context
-}
+}) as StyledContextFactory

package/src/helpers/defaultAnimationDriver.tsx

@@ -7,7 +7,6 @@ const noAnimationDriver = (method: string): any => {
 }
 
 const createEmptyAnimationDriver = (): AnimationDriver => ({
-  isReactNative: false,
   inputStyle: 'css',
   outputStyle: 'css',
   isStub: true,
@@ -15,10 +14,6 @@ const createEmptyAnimationDriver = (): AnimationDriver => ({
   useAnimations: () => noAnimationDriver('animations'),
   usePresence: () => noAnimationDriver('usePresence'),
   ResetPresence: () => noAnimationDriver('ResetPresence'),
-  useAnimatedNumber: () => noAnimationDriver('useAnimatedNumber'),
-  useAnimatedNumberStyle: () => noAnimationDriver('useAnimatedNumberStyle'),
-  useAnimatedNumbersStyle: () => noAnimationDriver('useAnimatedNumbersStyle'),
-  useAnimatedNumberReaction: () => noAnimationDriver('useAnimatedNumberReaction'),
 })
 
 export const defaultAnimationDriver = createEmptyAnimationDriver()

package/src/helpers/expandStyle.ts

@@ -90,6 +90,14 @@ export function expandStyle(
         ]
       }
     }
+
+    // react-native's RTL-aware names are not CSS. `padding-start`, `border-end-color`,
+    // `border-top-start-radius`, `start` and friends come from a dropped draft that no
+    // browser implements, so the rules generated for them were inert and the props did
+    // nothing on web. map them onto the CSS logical properties that do the same job.
+    if (key in webInlineRenames) {
+      return [[webInlineRenames[key], value]]
+    }
   }
 
   if (process.env.TAMAGUI_TARGET === 'native') {
@@ -113,9 +121,24 @@ export function expandStyle(
         }
         return
       }
+      case 'visibility': {
+        // native has no visibility; map hidden -> opacity:0 + pointerEvents:none
+        // visible/collapse are dropped (collapse is web-only via CSS)
+        if (value === 'hidden') {
+          return [
+            ['opacity', 0],
+            ['pointerEvents', 'none'],
+          ]
+        }
+        // strip the prop entirely on native (returning [] iterates 0 times in normalizeStyle)
+        return []
+      }
       case 'backgroundImage': {
-        // RN 0.76+ uses experimental_backgroundImage
-        // value may be a parsed array (from parseNativeStyle) or a plain string
+        // RN 0.76+ uses experimental_backgroundImage. a STRING stays on the
+        // `backgroundImage` key so it flows whole into the program engine —
+        // the evaluator parses the winning payload and writes the renamed key
+        // itself. only already-parsed arrays rename here
+        if (typeof value === 'string') return
         return [['experimental_backgroundImage', value]]
       }
       case 'border': {
@@ -247,6 +270,30 @@ const universalExpansions: Record<string, string[]> = {
   inlineSize: ['width'],
 }
 
+// react-native spells its RTL-aware props the way an old CSS draft did
+// (padding-start, border-end-color, border-top-start-radius, start/end). None of
+// those are real CSS, so on web they are renamed to the logical properties the
+// browser actually implements — which are RTL-aware in exactly the same way.
+const webInlineRenames: Record<string, string> = {
+  paddingStart: 'paddingInlineStart',
+  paddingEnd: 'paddingInlineEnd',
+  marginStart: 'marginInlineStart',
+  marginEnd: 'marginInlineEnd',
+  borderStartWidth: 'borderInlineStartWidth',
+  borderEndWidth: 'borderInlineEndWidth',
+  borderStartColor: 'borderInlineStartColor',
+  borderEndColor: 'borderInlineEndColor',
+  borderStartStyle: 'borderInlineStartStyle',
+  borderEndStyle: 'borderInlineEndStyle',
+  // css orders these block-then-inline, so top-start is start-start
+  borderTopStartRadius: 'borderStartStartRadius',
+  borderTopEndRadius: 'borderStartEndRadius',
+  borderBottomStartRadius: 'borderEndStartRadius',
+  borderBottomEndRadius: 'borderEndEndRadius',
+  start: 'insetInlineStart',
+  end: 'insetInlineEnd',
+}
+
 // Inline-axis logical expansions are native-only: their targets are RN-style
 // RTL-aware names (marginStart/borderEndColor/etc.) which web's CSS hyphenator
 // would emit as invalid CSS. On web these props pass through as native CSS

package/src/helpers/expandStyles.ts

@@ -11,7 +11,6 @@ export function fixStyles(style: Record<string, any>) {
     }
   }
 
-  // TODO deprecate for web-style shadows
   if (
     style.shadowRadius != null ||
     style.shadowColor ||
@@ -38,5 +37,10 @@ const borderDefaults = {
   borderTopWidth: nativeStyle || 'borderTopStyle',
   borderLeftWidth: nativeStyle || 'borderLeftStyle',
   borderRightWidth: nativeStyle || 'borderRightStyle',
-  // TODO: need to add borderBlock and borderInline here, but they are alot and might impact performance
+  borderBlockWidth: nativeStyle || 'borderBlockStyle',
+  borderBlockStartWidth: nativeStyle || 'borderBlockStartStyle',
+  borderBlockEndWidth: nativeStyle || 'borderBlockEndStyle',
+  borderInlineWidth: nativeStyle || 'borderInlineStyle',
+  borderInlineStartWidth: nativeStyle || 'borderInlineStartStyle',
+  borderInlineEndWidth: nativeStyle || 'borderInlineEndStyle',
 }

package/src/helpers/extractPseudoState.ts

@@ -0,0 +1,32 @@
+import type { TamaguiComponentState } from '../types'
+
+type PseudoState = {
+  hover?: boolean
+  press?: boolean
+  focus?: boolean
+  groups?: Record<string, { hover?: boolean; press?: boolean; focus?: boolean }>
+}
+
+export function extractPseudoState(state: TamaguiComponentState): PseudoState {
+  const groups: PseudoState['groups'] = {}
+
+  if (state.group) {
+    for (const groupName in state.group) {
+      const pseudo = state.group[groupName]?.pseudo
+      if (pseudo) {
+        groups[groupName] = {
+          hover: pseudo.hover,
+          press: pseudo.press,
+          focus: pseudo.focus,
+        }
+      }
+    }
+  }
+
+  return {
+    hover: state.hover,
+    press: state.press,
+    focus: state.focus,
+    groups,
+  }
+}

package/src/helpers/fluid.ts

@@ -0,0 +1,66 @@
+export interface FluidOptions {
+  min: number
+  max: number
+  from?: number
+  to?: number
+  unit?: 'cqi' | 'cqw' | 'vw'
+}
+
+/**
+ * Generates a CSS clamp() string implementing a linear fluid scale.
+ * Symmetrically consumed by Web (CSS engine) and Native (Tamagui unit resolver).
+ *
+ * @example
+ * fluid({ min: 18, max: 36, from: 375, to: 1200, unit: 'cqi' })
+ * // => "clamp(18px, 2.1818cqi + 9.82px, 36px)"
+ *
+ * fluid(18, 36, { from: 375, to: 1200 })
+ * // => "clamp(18px, 2.1818cqi + 9.82px, 36px)"
+ */
+export function fluid(options: FluidOptions): string
+export function fluid(
+  min: number,
+  max: number,
+  options?: Omit<FluidOptions, 'min' | 'max'>
+): string
+export function fluid(
+  arg1: number | FluidOptions,
+  arg2?: number,
+  arg3?: Omit<FluidOptions, 'min' | 'max'>
+): string {
+  let min: number
+  let max: number
+  let from = 375
+  let to = 1200
+  let unit: 'cqi' | 'cqw' | 'vw' = 'cqi'
+
+  if (typeof arg1 === 'number') {
+    min = arg1
+    max = arg2!
+    if (arg3) {
+      if (arg3.from !== undefined) from = arg3.from
+      if (arg3.to !== undefined) to = arg3.to
+      if (arg3.unit !== undefined) unit = arg3.unit
+    }
+  } else {
+    min = arg1.min
+    max = arg1.max
+    if (arg1.from !== undefined) from = arg1.from
+    if (arg1.to !== undefined) to = arg1.to
+    if (arg1.unit !== undefined) unit = arg1.unit
+  }
+
+  const slope = (max - min) / (to - from)
+  const intercept = min - slope * from
+  const slopePercent = +(slope * 100).toFixed(4)
+  const interceptRounded = +intercept.toFixed(2)
+
+  let expr = `${slopePercent}${unit}`
+  if (interceptRounded > 0) {
+    expr += ` + ${interceptRounded}px`
+  } else if (interceptRounded < 0) {
+    expr += ` - ${Math.abs(interceptRounded)}px`
+  }
+
+  return `clamp(${min}px, ${expr}, ${max}px)`
+}

package/src/helpers/formatDiagnostic.ts

@@ -0,0 +1,69 @@
+const maxDiagnosticValueLength = 160
+
+function formatDiagnosticValue(
+  value: unknown,
+  depth = 0,
+  seen = new WeakSet<object>()
+): string {
+  if (typeof value === 'string') {
+    const output =
+      value.length > maxDiagnosticValueLength
+        ? `${value.slice(0, maxDiagnosticValueLength - 1)}…`
+        : value
+    return JSON.stringify(output)
+  }
+  if (value == null || typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+  if (typeof value === 'bigint') return `${value}n`
+  if (typeof value === 'function') return `[Function ${value.name || 'anonymous'}]`
+  if (typeof value !== 'object') return String(value)
+  if (seen.has(value)) return '[Circular]'
+  if (depth === 2) return Array.isArray(value) ? '[Array]' : '[Object]'
+
+  seen.add(value)
+  if (Array.isArray(value)) {
+    const items = value
+      .slice(0, 5)
+      .map((item) => formatDiagnosticValue(item, depth + 1, seen))
+    if (value.length > 5) items.push(`… ${value.length - 5} more`)
+    return `[${items.join(', ')}]`
+  }
+
+  const keys: string[] = []
+  for (const key in value) {
+    keys.push(key)
+    if (keys.length === 6) break
+  }
+  const hasMore = keys.length === 6
+  if (hasMore) keys.pop()
+  const items = keys.map((key) => {
+    try {
+      return `${key}: ${formatDiagnosticValue((value as Record<string, unknown>)[key], depth + 1, seen)}`
+    } catch {
+      return `${key}: [Unavailable]`
+    }
+  })
+  if (hasMore) items.push('… more')
+  return `{ ${items.join(', ')} }`
+}
+
+export function formatDiagnostic(
+  code: string,
+  component: string,
+  message: string,
+  action: string,
+  prop?: string,
+  received?: unknown
+) {
+  if (process.env.NODE_ENV === 'development') {
+    const formattedValue = prop ? formatDiagnosticValue(received) : ''
+    const boundedValue =
+      formattedValue.length > maxDiagnosticValueLength
+        ? `${formattedValue.slice(0, maxDiagnosticValueLength - 1)}…`
+        : formattedValue
+    const value = prop ? ` Received ${prop}=${boundedValue}.` : ''
+    return `${code} ${component}: ${message}.${value} ${action}`
+  }
+  return `${code}: ${message}`
+}

package/src/helpers/getCSSStylesAtomic.native.ts

@@ -1,7 +1,11 @@
-const empty = () => {
-  console.warn('no-op native')
-}
+const empty = () => {}
 
+export const canGenerateCSS = false
+export const flushDirectStyles = empty
+export const addComposition = empty
+export const registerAtomicSlot = empty
+export const buildAtomicSlotCSS = empty
 export const getCSSStylesAtomic = empty
+export const getCSSStyleAtomic = empty
 export const getStyleAtomic = empty
 export const styleToCSS = empty