@tamagui/web 1.53.2 → 1.54.0

package/src/createComponent.tsx

@@ -1,5 +1,5 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
-import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { isClient, isServer, isWeb } from '@tamagui/constants'
 import { validStyles } from '@tamagui/helpers'
 import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
 import React, {
@@ -12,35 +12,38 @@ import React, {
   useContext,
   useEffect,
   useId,
+  useMemo,
   useRef,
   useState,
 } from 'react'
 
 import { getConfig, onConfiguredOnce } from './config'
 import { stackDefaultStyles } from './constants/constants'
-import { FontLanguageContext } from './contexts/FontLanguageContext'
-import { TextAncestorContext } from './contexts/TextAncestorContext'
+import { ComponentContext } from './contexts/ComponentContext'
 import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
+import { createShallowSetState } from './helpers/createShallowSetState'
 import { useSplitStyles } from './helpers/getSplitStyles'
 import { mergeProps } from './helpers/mergeProps'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { themeable } from './helpers/themeable'
-import { useShallowSetState } from './helpers/useShallowSetState'
-import { useAnimationDriver } from './hooks/useAnimationDriver'
 import { setMediaShouldUpdate, useMedia } from './hooks/useMedia'
 import { useThemeWithState } from './hooks/useTheme'
 import { hooks } from './setupHooks'
 import {
   DebugProp,
+  DisposeFn,
+  GroupContextType,
   SpaceDirection,
   SpaceValue,
   SpacerProps,
+  StackProps,
   StaticConfig,
   TamaguiComponent,
   TamaguiComponentEvents,
   TamaguiComponentState,
   TamaguiElement,
   TamaguiInternalConfig,
+  TextProps,
   UseAnimationHook,
   UseAnimationProps,
 } from './types'
@@ -97,7 +100,7 @@ let BaseView: any
 let hasSetupBaseViews = false
 
 export function createComponent<
-  ComponentPropTypes extends Object = {},
+  ComponentPropTypes extends StackProps | TextProps = {},
   Ref = TamaguiElement,
   BaseProps = never
 >(staticConfig: StaticConfig) {
@@ -142,7 +145,7 @@ export function createComponent<
     }
   }
 
-  const component = forwardRef<Ref, ComponentPropTypes>((propsIn: any, forwardedRef) => {
+  const component = forwardRef<Ref, ComponentPropTypes>((propsIn, forwardedRef) => {
     if (process.env.TAMAGUI_TARGET === 'native') {
       // todo this could be moved to a cleaner location
       if (!hasSetupBaseViews) {
@@ -163,6 +166,8 @@ export function createComponent<
       }
     }
 
+    const componentContext = useContext(ComponentContext)
+
     // set variants through context
     // order is after default props but before props
     let styledContextProps: Object | undefined
@@ -204,7 +209,7 @@ export function createComponent<
 
     // React inserts default props after your props for some reason...
     // order important so we do loops, you can't just spread because JS does weird things
-    let props: any
+    let props: StackProps | TextProps
     if (curDefaultProps) {
       props = mergeProps(curDefaultProps, propsIn)
     } else {
@@ -244,7 +249,7 @@ export function createComponent<
     /**
      * Component state for tracking animations, pseudos
      */
-    const animationsConfig = useAnimationDriver()
+    const animationsConfig = componentContext.animationDriver
     const useAnimations = animationsConfig?.useAnimations as UseAnimationHook | undefined
 
     // after we get states mount we need to turn off isAnimated for server side
@@ -283,8 +288,24 @@ export function createComponent<
       : states[0]
     const setState = states[1]
 
-    // TODO performance optimization could avoid useCallback and just have this be setStateShallow(setState, state) at call-sites
-    const setStateShallow = useShallowSetState(setState)
+    let setStateShallow = createShallowSetState(setState)
+
+    const groupName = props.group as any as string
+    if (groupName) {
+      // when we set state we also set our group state and emit an event for children listening:
+      const groupContextState = componentContext.groups.state
+      const og = setStateShallow
+      setStateShallow = (state) => {
+        og(state)
+        componentContext.groups.emit(groupName, state)
+        // and mutate the current since its concurrent safe (children throw it in useState on mount)
+        const next = {
+          ...groupContextState[groupName],
+          ...state,
+        }
+        groupContextState[groupName] = next
+      }
+    }
 
     if (process.env.NODE_ENV === 'development' && time) time`use-state`
 
@@ -308,8 +329,8 @@ export function createComponent<
       : props.componentName
       ? `is_${props.componentName}`
       : defaultComponentClassName
-    const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
-    const languageContext = useContext(FontLanguageContext)
+
+    const hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false)
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
 
     if (process.env.NODE_ENV === 'development' && time) time`use-context`
@@ -372,8 +393,6 @@ export function createComponent<
     const themeStateProps = {
       name: props.theme,
       componentName,
-      reset: props.reset,
-      inverse: props.themeInverse,
       // @ts-ignore this is internal use only
       disable: disableTheme,
       shallow: stateRef.current.themeShallow,
@@ -464,7 +483,6 @@ export function createComponent<
     const styleProps = {
       mediaState,
       noClassNames,
-      hasTextAncestor,
       resolveVariablesAs,
       isExiting,
       isAnimated,
@@ -479,7 +497,7 @@ export function createComponent<
       state,
       styleProps,
       null,
-      languageContext || undefined,
+      componentContext,
       elementType,
       debugProp
     )
@@ -559,7 +577,6 @@ export function createComponent<
         styleProps,
         theme: themeState.state.theme!,
         pseudos: pseudos || null,
-        onDidAnimate: props.onDidAnimate,
         hostRef,
         staticConfig,
       })
@@ -601,7 +618,10 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`destructure`
 
-    const disabled = props.accessibilityState?.disabled || props.accessibilityDisabled
+    const disabled =
+      props.accessibilityState?.disabled ||
+      // @ts-expect-error (comes from core)
+      props.accessibilityDisabled
 
     // these can ultimately be for DOM, react-native-web views, or animated views
     // so the type is pretty loose
@@ -647,12 +667,12 @@ export function createComponent<
       })
     }, [])
 
-    const shouldSetMounted = needsMount && state.unmounted
-
     // combined multiple effects into one for performance so be careful with logic
     // should not be a layout effect because otherwise it wont render the initial state
     // for example css driver needs to render once with the first styles, then again with the next
     // if its a layout effect it will just skip that first render output
+    const shouldSetMounted = needsMount && state.unmounted
+    const { pseudoGroups } = splitStyles
     useEffect(() => {
       if (shouldSetMounted) {
         const unmounted =
@@ -664,10 +684,35 @@ export function createComponent<
         // no need for mouseUp removal effect if its not even mounted yet
       }
 
+      // parent group pseudo listening
+      let disposeGroupsListener: DisposeFn | undefined
+      if (pseudoGroups) {
+        const current = {}
+        disposeGroupsListener = componentContext.groups.subscribe((name, next) => {
+          if (pseudoGroups.has(name)) {
+            // merge because we emit a partial of the state each time
+            Object.assign(current, next)
+            const group = {
+              ...state.group,
+              [name]: current,
+            }
+            setStateShallow({
+              // force it to be referentially different so it always updates
+              group,
+            })
+          }
+        })
+      }
+
       return () => {
+        disposeGroupsListener?.()
         mouseUps.delete(unPress)
       }
-    }, [shouldSetMounted, state.unmounted])
+    }, [
+      shouldSetMounted,
+      state.unmounted,
+      pseudoGroups ? Object.keys([...pseudoGroups]).join('') : 0,
+    ])
 
     const avoidAnimationStyle = keepStyleSSR && state.unmounted === true
 
@@ -690,6 +735,7 @@ export function createComponent<
         componentName ? componentClassName : '',
         fontFamilyClassName,
         classNames ? Object.values(classNames).join(' ') : '',
+        props.group ? `t_group_${props.group}` : '',
       ]
       className = classList.join(' ')
 
@@ -724,14 +770,29 @@ export function createComponent<
       viewProps.style = style
     }
 
+    // if its a group its gotta listen for pseudos to emit them to children
+
     const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle
     const attachPress = Boolean(
-      runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick
+      groupName ||
+        runtimePressStyle ||
+        onPress ||
+        onPressOut ||
+        onPressIn ||
+        onLongPress ||
+        onClick
     )
     const runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle
     const isHoverable =
       isWeb &&
-      !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
+      !!(
+        groupName ||
+        runtimeHoverStyle ||
+        onHoverIn ||
+        onHoverOut ||
+        onMouseEnter ||
+        onMouseLeave
+      )
 
     const handlesPressEvents = !(isWeb || asChild)
 
@@ -785,7 +846,6 @@ export function createComponent<
                   setStateShallow({
                     press: true,
                     pressIn: true,
-                    hover: false,
                   })
                   onPressIn?.(e)
                   onMouseDown?.(e)
@@ -872,6 +932,28 @@ export function createComponent<
 
     content = createElement(elementType, viewProps, content)
 
+    // must override context so siblings don't clobber initial state
+    const subGroupContext = useMemo(() => {
+      if (!groupName) return null
+      // change reference so context value updates
+      return {
+        ...componentContext.groups,
+        // change reference so as we mutate it doesn't affect siblings etc
+        state: {
+          ...componentContext.groups.state,
+          [groupName]: initialState,
+        },
+      }
+    }, [groupName])
+
+    if (groupName && subGroupContext) {
+      content = (
+        <ComponentContext.Provider groups={subGroupContext}>
+          {content}
+        </ComponentContext.Provider>
+      )
+    }
+
     // disable theme prop is deterministic so conditional hook ok here
     content = disableThemeProp
       ? content
@@ -1038,7 +1120,7 @@ Unspaced['isUnspaced'] = true
 
 // dont used styled() here to avoid circular deps
 // keep inline to avoid circular deps
-
+// @ts-expect-error we override
 export const Spacer = createComponent<SpacerProps>({
   acceptsClassName: true,
   memo: true,

package/src/createTamagui.ts

@@ -252,6 +252,7 @@ ${runtimeStyles}`
   const defaultFont = `$${defaultFontName}`
 
   const config: TamaguiInternalConfig = {
+    groupNames: [],
     settings: {},
     onlyAllowShorthands: false,
     fontLanguages: [],

package/src/helpers/createMediaStyle.ts

@@ -9,6 +9,12 @@ export const MEDIA_SEP = '_'
 let prefixes: Record<string, string> | null = null
 let selectors: Record<string, string> | null = null
 
+const parentPseudoToSelector = {
+  hovered: ':hover',
+  focused: ':focus',
+  pressed: ':active',
+}
+
 export const createMediaStyle = (
   { property, identifier, rules }: StyleObject,
   mediaKey: string,
@@ -20,7 +26,8 @@ export const createMediaStyle = (
   const enableMediaPropOrder = conf.settings.mediaPropOrder
   const isThemeMedia = mediaKey.startsWith('theme-')
   const isPlatformMedia = !isThemeMedia && mediaKey.startsWith('platform-')
-  const isThemeOrPlatform = isThemeMedia || isPlatformMedia
+  const isGroupMedia = !isThemeMedia && !isPlatformMedia && mediaKey.startsWith('group-')
+  const isNonWindowMedia = isThemeMedia || isPlatformMedia || isGroupMedia
   const negKey = negate ? '0' : ''
   const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)
 
@@ -29,19 +36,21 @@ export const createMediaStyle = (
   const id = `${ogPrefix}${MEDIA_SEP}${mediaKey.replace('-', '')}${negKey}${MEDIA_SEP}`
   const nextIdentifier = identifier.replace(ogPrefix, id)
 
-  if (isThemeOrPlatform) {
+  if (isNonWindowMedia) {
     const precedencePrefix = new Array(priority).fill(':root').join('')
     const styleInner = rules
       .map((rule) => rule.replace(identifier, nextIdentifier))
       .join(';')
 
-    if (isThemeMedia) {
-      const key = mediaKey.split('-')[1]
+    if (isThemeMedia || isGroupMedia) {
+      const keyParts = mediaKey.split('-')
+      const name = (isGroupMedia ? 'group_' : '') + keyParts[1]
       const selectorStart = styleInner.indexOf(':root')
       const selectorEnd = styleInner.lastIndexOf('{')
       const selector = styleInner.slice(selectorStart, selectorEnd)
       const precedenceSpace = conf.themeClassNameOnRoot ? '' : ' '
-      const nextSelector = `:root${precedencePrefix}${precedenceSpace}.t_${key} ${selector.replace(
+      const pseudoSelector = parentPseudoToSelector[keyParts[2]] || ''
+      const nextSelector = `:root${precedencePrefix}${precedenceSpace}.t_${name}${pseudoSelector} ${selector.replace(
         ':root',
         ''
       )}`

package/src/helpers/{useShallowSetState.tsx → createShallowSetState.tsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { TamaguiComponentState } from '../types'
 
-export function useShallowSetState<State extends TamaguiComponentState>(
+export function createShallowSetState<State extends TamaguiComponentState>(
   setter: React.Dispatch<React.SetStateAction<State>>
 ) {
   return (next: Partial<State>) => setter((prev) => shallow(prev, next))

package/src/helpers/createStyledContext.tsx

@@ -18,7 +18,7 @@ export type StyledContext<Props extends Object = any> = Omit<
 export function createStyledContext<VariantProps extends Record<string, any>>(
   props: VariantProps
 ): StyledContext<VariantProps> {
-  const OGContext = createContext<any>(null)
+  const OGContext = createContext<VariantProps>(props)
   const OGProvider = OGContext.Provider
   const Context = OGContext as any as StyledContext<VariantProps>
 
@@ -26,7 +26,12 @@ export function createStyledContext<VariantProps extends Record<string, any>>(
     children,
     ...values
   }: VariantProps & { children?: React.ReactNode }) => {
-    const value = useMemo(() => values, [objectIdentityKey(values)])
+    const value = useMemo(() => {
+      return {
+        ...props,
+        ...values,
+      }
+    }, [objectIdentityKey(values)])
     return <OGProvider value={value}>{children}</OGProvider>
   }
 

package/src/helpers/getSplitStyles.tsx

@@ -33,6 +33,7 @@ import {
 } from '../hooks/useMedia'
 import type {
   ClassNamesObject,
+  ComponentContextI,
   DebugProp,
   GetStyleResult,
   GetStyleState,
@@ -66,7 +67,7 @@ import {
   reverseMapClassNameToValue,
 } from './normalizeValueWithProperty'
 import { getPropMappedFontFamily, propMapper } from './propMapper'
-import { pseudoDescriptors } from './pseudoDescriptors'
+import { pseudoDescriptors, pseudoPriorities } from './pseudoDescriptors'
 
 const fontFamilyKey = 'fontFamily'
 
@@ -89,7 +90,7 @@ type StyleSplitter = (
   componentState: TamaguiComponentState,
   styleProps: SplitStyleProps,
   parentSplitStyles?: GetStyleResult | null,
-  languageContext?: LanguageContextType,
+  context?: ComponentContextI,
   // web-only
   elementType?: string,
   debug?: DebugProp
@@ -126,7 +127,7 @@ export const getSplitStyles: StyleSplitter = (
   componentState,
   styleProps,
   parentSplitStyles,
-  languageContext,
+  context,
   elementType,
   debug
 ) => {
@@ -150,6 +151,7 @@ export const getSplitStyles: StyleSplitter = (
   let space: SpaceTokens | null = props.space
   let hasMedia: boolean | string[] = false
   let dynamicThemeAccess: boolean | undefined
+  let pseudoGroups: Set<string> | undefined
   const shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClassNames
 
   let style: ViewStyleWithPseudos = {}
@@ -166,7 +168,7 @@ export const getSplitStyles: StyleSplitter = (
    * Not the biggest fan of creating this object but it is a nice API
    */
   const styleState: GetStyleState = {
-    curProps: { ...props },
+    curProps: Object.assign({}, props),
     classNames,
     conf,
     props,
@@ -177,7 +179,7 @@ export const getSplitStyles: StyleSplitter = (
     theme,
     usedKeys,
     viewProps,
-    languageContext,
+    context,
     debug,
   }
 
@@ -594,7 +596,7 @@ export const getSplitStyles: StyleSplitter = (
           (typeof valInit === 'string' && valInit[0] !== '$')))
 
     const expanded = avoidPropMap
-      ? [[keyInit, valInit]]
+      ? ([[keyInit, valInit]] as const)
       : propMapper(keyInit, valInit, styleState)
 
     const next = getPropMappedFontFamily(expanded)
@@ -847,7 +849,7 @@ export const getSplitStyles: StyleSplitter = (
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           // prettier-ignore
           // rome-ignore lint/nursery/noConsoleLog: ok
-          console.log(`  📺 ${key}`, { key, val, mediaStyle, props, shouldDoClasses });
+          console.log(`  📺 ${key}`, { key, val, mediaStyle, props, shouldDoClasses, componentState });
         }
 
         // for some reason 'space' in val upsetting next ssr during prod build
@@ -901,33 +903,56 @@ export const getSplitStyles: StyleSplitter = (
             mergeClassName(transforms, classNames, fullKey, out.identifier, true, true)
           }
         } else {
-          const isThemeMedia = mediaKeyShort.startsWith('theme-')
-          const isPlatformMedia = mediaKeyShort.startsWith('platform-')
+          const isThemeMedia = !isPlatformMedia && mediaKeyShort.startsWith('theme-')
+          const isGroupMedia =
+            !isPlatformMedia && !isThemeMedia && mediaKeyShort.startsWith('group-')
 
-          if (!isThemeMedia && !isPlatformMedia) {
+          if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
             if (!mediaState[mediaKeyShort]) {
               continue
             }
           }
 
+          let importanceBump = 0
+
           if (isThemeMedia) {
             // needed to get updates when theme changes
             dynamicThemeAccess = true
-
             const mediaThemeName = mediaKeyShort.slice(6)
             if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName))) {
               continue
             }
+          } else if (isGroupMedia) {
+            const [_, groupName, groupPseudoKey] = mediaKeyShort.split('-')
+
+            // $group-x
+            if (!context?.groups.state[groupName]) {
+              if (process.env.NODE_ENV === 'development' && debug) {
+                console.warn(`No parent with group prop, skipping styles: ${groupName}`)
+              }
+              continue
+            }
+
+            // $group-x-hovered
+            pseudoGroups ||= new Set()
+            pseudoGroups.add(groupName)
+            if (groupPseudoKey) {
+              const groupPseudoKeyShort = groupPseudoKey.replace('ed', '')
+              const groupState =
+                componentState.group?.[groupName] ||
+                // fallback to context initially
+                context.groups.state[groupName]
+
+              const isActive = groupState?.[groupPseudoKeyShort]
+              if (!isActive) {
+                continue
+              }
+              const priority = pseudoPriorities[groupPseudoKeyShort]
+              importanceBump = priority
+            }
           }
 
           for (const subKey in mediaStyle) {
-            const importance = getMediaImportanceIfMoreImportant(
-              mediaKeyShort,
-              subKey,
-              usedKeys,
-              mediaState[mediaKeyShort]
-            )
-            if (importance === null) continue
             if (subKey === 'space') {
               space = valInit.space
               continue
@@ -938,7 +963,8 @@ export const getSplitStyles: StyleSplitter = (
               subKey,
               mediaStyle[subKey],
               usedKeys,
-              mediaState[mediaKeyShort]
+              mediaState[mediaKeyShort],
+              importanceBump
             )
             if (key === fontFamilyKey) {
               styleState.fontFamily = mediaStyle.fontFamily as string
@@ -1171,6 +1197,7 @@ export const getSplitStyles: StyleSplitter = (
     classNames,
     rulesToInsert,
     dynamicThemeAccess,
+    pseudoGroups,
   }
 
   // native: swap out the right family based on weight/style
@@ -1399,6 +1426,7 @@ const skipProps = {
   disableOptimization: 1,
   tag: 1,
   style: 1, // handled after loop so pseudos set usedKeys and override it if necessary
+  group: 1,
 }
 
 if (process.env.NODE_ENV === 'test') {

package/src/helpers/getStylesAtomic.ts

@@ -58,7 +58,7 @@ export const generateAtomicStyles = (
 
     // transform
     if (key === 'transform' && Array.isArray(style.transform)) {
-      val = val
+      val = (val as any[])
         .map(
           // { scale: 2 } => 'scale(2)'
           // { translateX: 20 } => 'translateX(20px)'

package/src/helpers/getVariantExtras.tsx

@@ -4,10 +4,10 @@ import { LanguageContextType } from '../views/FontLanguage.types'
 import { createProxy } from './createProxy'
 
 export function getVariantExtras(styleState: GetStyleState) {
-  const { curProps, conf, languageContext, theme } = styleState
+  const { curProps, conf, context, theme } = styleState
   let fonts = conf.fontsParsed
-  if (languageContext) {
-    fonts = getFontsForLanguage(conf.fontsParsed, languageContext)
+  if (context?.language) {
+    fonts = getFontsForLanguage(conf.fontsParsed, context.language)
   }
 
   // should be able to just use styleState.fontFamily but no time to test for now

package/src/helpers/propMapper.ts

@@ -341,7 +341,7 @@ const getToken = (
   styleProps: SplitStyleProps,
   styleState: GetStyleState
 ) => {
-  const { theme, conf, languageContext, fontFamily } = styleState
+  const { theme, conf, context, fontFamily } = styleState
 
   const tokensParsed = conf.tokensParsed
   let valOrVar: any
@@ -360,8 +360,8 @@ const getToken = (
     } else {
       switch (key) {
         case 'fontFamily': {
-          const fontsParsed = languageContext
-            ? getFontsForLanguage(conf.fontsParsed, languageContext)
+          const fontsParsed = context?.language
+            ? getFontsForLanguage(conf.fontsParsed, context.language)
             : conf.fontsParsed
           valOrVar = fontsParsed[value]?.family || value
           hasSet = true
@@ -373,8 +373,8 @@ const getToken = (
         case 'fontWeight': {
           const fam = fontFamily || styleState.conf.defaultFont
           if (fam) {
-            const fontsParsed = languageContext
-              ? getFontsForLanguage(conf.fontsParsed, languageContext)
+            const fontsParsed = context?.language
+              ? getFontsForLanguage(conf.fontsParsed, context.language)
               : conf.fontsParsed
             const font = fontsParsed[fam]
             valOrVar = font?.[fontShorthand[key] || key]?.[value] || value

package/src/helpers/pseudoDescriptors.ts

@@ -17,6 +17,13 @@ export const pseudoDescriptorsBase = {
   },
 } as const
 
+// MATCH TO ABOVE but note that press = press not active
+export const pseudoPriorities = {
+  hover: 1,
+  press: 2,
+  focus: 3,
+}
+
 export const pseudoDescriptors: Record<
   'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle',
   PseudoDescriptor

package/src/hooks/useAnimationDriver.tsx

@@ -1,8 +1,8 @@
 import { useContext } from 'react'
 
-import { AnimationDriverContext } from '../contexts/AnimationDriverContext'
+import { ComponentContext } from '../contexts/ComponentContext'
 import { getAnimationDriver } from '../helpers/getAnimationDriver'
 
 export const useAnimationDriver = () => {
-  return useContext(AnimationDriverContext) ?? getAnimationDriver()
+  return useContext(ComponentContext).animationDriver ?? getAnimationDriver()
 }