@tamagui/core 1.0.1-beta.225 → 1.0.1-beta.227

package/src/createComponent.tsx

@@ -200,8 +200,12 @@ export function createComponent<
     if (isAnimated && presence) {
       const presenceState = presence[2]
       if (presenceState) {
-        if (presenceState.enterVariant) props[presenceState.enterVariant] = true
-        if (presenceState.exitVariant) props[presenceState.exitVariant] = true
+        if (state.unmounted && presenceState.enterVariant) {
+          props[presenceState.enterVariant] = true
+        }
+        if (!presenceState.isPresent && presenceState.exitVariant) {
+          props[presenceState.exitVariant] = true
+        }
       }
     }
 
@@ -550,7 +554,7 @@ export function createComponent<
 
     viewProps.ref = useComposedRefs(hostRef as any, forwardedRef, setMounted)
 
-    if (process.env.NODE_ENV === 'development' && !isText && isWeb && !staticConfig.isHOC) {
+    if (process.env.NODE_ENV === 'development' && !isText && isWeb) {
       Children.toArray(props.children).forEach((item) => {
         if (typeof item === 'string') {
           // eslint-disable-next-line no-console
@@ -1037,7 +1041,6 @@ export function createComponent<
         Component,
         ...conf,
         neverFlatten: true,
-        isHOC: true,
         defaultProps: {
           ...Component.defaultProps,
           ...conf?.defaultProps,
@@ -1295,45 +1298,3 @@ const dontComposePressabilityKeys = {
 function getMediaStateObject(obj: Object) {
   return Object.fromEntries(Object.entries(obj).flatMap(([k, v]) => (v ? [[`$${k}`, v]] : [])))
 }
-
-// function ensureBaseHasDefaults(
-//   base: ViewStyle,
-//   pseudos: Record<string, ViewStyle | null | undefined>
-// ) {
-//   const mergeIfNotExists = (key: string) => {
-//     if (!base.transform?.some((x) => key in x)) {
-//       mergeTransform(base, key, transformDefaults[key] || 0)
-//     }
-//   }
-
-//   for (const name in pseudos) {
-//     const pseudo = pseudos[name]
-//     for (const key in pseudo) {
-//       const val = pseudo[key]
-//       if (key in stylePropsTransform) {
-//         mergeIfNotExists(key)
-//       } else if (key === 'transform') {
-//         if (typeof val === 'string') continue
-//         for (const t of val) {
-//           mergeIfNotExists(Object.keys(t)[0])
-//         }
-//       } else {
-//         if (key in baseDefaults && !(key in base)) {
-//           base[key] = baseDefaults[key]
-//         }
-//       }
-//     }
-//   }
-// }
-
-const baseDefaults = {
-  opacity: 1,
-}
-
-const transformDefaults = {
-  opacity: 1,
-  scale: 1,
-  rotate: '0deg',
-  rotateY: '0deg',
-  rotateX: '0deg',
-}

package/src/helpers/ThemeManager.tsx

@@ -1,5 +1,3 @@
-import { isWeb } from '@tamagui/constants'
-
 import { getThemes } from '../config'
 import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
 import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'
@@ -80,18 +78,32 @@ export class ThemeManager {
     }
   }
 
-  getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {
-    const _ =
-      getState(props, parentManager) ||
-      (process.env.TAMAGUI_TARGET === 'native' ? parentManager?.state : undefined)
-    if (!_ || !_.theme || _.theme === state.theme) {
+  getStateIfChanged(
+    props = this.props,
+    state: ThemeManagerState | null = this.state,
+    parentManager = this.parentManager
+  ) {
+    const _ = this.getState(props, parentManager)
+
+    // is removing
+    if (state && state !== emptyState && !_) {
+      return parentManager?.state
+    }
+
+    if (!_ || !_.theme || _.theme === state?.theme) {
+      // prettier-ignore
+      // eslint-disable-next-line no-console
+      if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log(`getStateIfChanged not changed`, _?.theme === state?.theme, _, state)
       return null
     }
     return _
   }
 
-  getState(props = this.props) {
-    return getState(props, this.parentManager)
+  getState(props = this.props, parentManager = this.parentManager) {
+    return (
+      getState(props, parentManager) ||
+      (process.env.TAMAGUI_TARGET === 'native' ? parentManager?.state : undefined)
+    )
   }
 
   #allKeys: Set<string> | null = null
@@ -170,7 +182,7 @@ function getState(
 
   // prettier-ignore
   // eslint-disable-next-line no-console
-  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('getState', props, { parentName, parentBaseTheme, base, min, max, isParentAComponentTheme, parentManager })
+  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') [console.groupCollapsed('getState', props, { parentName, parentBaseTheme, base, min, max, isParentAComponentTheme }), console.trace(), console.groupEnd()]
 
   for (let i = max; i >= min; i--) {
     let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR)
@@ -193,7 +205,9 @@ function getState(
     if (componentName) {
       // components only look for component themes
       if (nextName) {
-        potentials.push(`${prefix.replace(/_.*$/, '')}_${nextName}_${componentName}`)
+        potentials.push(
+          `${prefix.slice(0, prefix.indexOf(THEME_NAME_SEPARATOR))}_${nextName}_${componentName}`
+        )
       }
       potentials.push(`${prefix}_${componentName}`)
       if (nextName) {

package/src/helpers/getSplitStyles.tsx

@@ -48,6 +48,33 @@ import {
 } from './normalizeValueWithProperty.js'
 import { pseudoDescriptors } from './pseudoDescriptors'
 
+type GetStyleResult = {
+  pseudos: PseudoStyles
+  medias: Record<MediaQueryKey, ViewStyle>
+  style: ViewStyle
+  classNames: ClassNamesObject
+  rulesToInsert: RulesToInsert
+  viewProps: StackProps & Record<string, any>
+  fontFamily: string | undefined
+  mediaKeys: string[]
+}
+
+type GetStyleState = {
+  style: ViewStyle
+  usedKeys: Record<string, number>
+  classNames: ClassNamesObject
+  flatTransforms: FlatTransforms
+  staticConfig: StaticConfigParsed
+  theme: ThemeParsed
+  props: Record<string, any>
+  viewProps: Record<string, any>
+  state: SplitStyleState
+  conf: TamaguiInternalConfig
+  languageContext?: FontLanguageProps
+  avoidDefaultProps?: boolean
+  avoidMergeTransform?: boolean
+}
+
 export type SplitStyles = ReturnType<typeof getSplitStyles>
 export type ClassNamesObject = Record<string, string>
 export type SplitStyleResult = ReturnType<typeof getSplitStyles>
@@ -134,28 +161,17 @@ type TransformNamespaceKey = 'transform' | PseudoPropKeys | MediaQueryKey
 
 let conf: TamaguiInternalConfig
 
-type SplitStylesAndProps = {
-  pseudos: PseudoStyles
-  medias: Record<MediaQueryKey, ViewStyle>
-  style: ViewStyle
-  classNames: ClassNamesObject
-  rulesToInsert: RulesToInsert
-  viewProps: StackProps & Record<string, any>
-  fontFamily: string | undefined
-  mediaKeys: string[]
-}
-
 type StyleSplitter = (
   props: { [key: string]: any },
   staticConfig: StaticConfigParsed,
   theme: ThemeParsed,
   state: SplitStyleState,
-  parentSplitStyles?: SplitStylesAndProps | null,
+  parentSplitStyles?: GetStyleResult | null,
   languageContext?: LanguageContextType,
   // web-only
   elementType?: string,
   debug?: DebugProp
-) => SplitStylesAndProps
+) => GetStyleResult
 
 export const PROP_SPLIT = '-'
 
@@ -190,7 +206,7 @@ export const getSplitStyles: StyleSplitter = (
   conf = conf || getConfig()
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
   const mediaKeys: string[] = []
-  const viewProps: SplitStylesAndProps['viewProps'] = {}
+  const viewProps: GetStyleResult['viewProps'] = {}
   const pseudos: PseudoStyles = {}
   let psuedosUsed: Record<string, number> | null = null
   const medias: Record<MediaQueryKey, ViewStyle> = {}
@@ -202,7 +218,7 @@ export const getSplitStyles: StyleSplitter = (
     staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
 
   let style: ViewStyle = {}
-  let flatTransforms: FlatTransforms | undefined
+  const flatTransforms: FlatTransforms = {}
 
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
@@ -214,6 +230,20 @@ export const getSplitStyles: StyleSplitter = (
   // fontFamily is our special baby, ensure we grab the latest set one always
   let fontFamily: string | undefined
 
+  const styleState: GetStyleState = {
+    classNames,
+    conf,
+    flatTransforms,
+    props,
+    state,
+    staticConfig,
+    style,
+    theme,
+    usedKeys,
+    viewProps,
+    languageContext,
+  }
+
   if (props.className) {
     for (const cn of props.className.split(' ')) {
       if (cn[0] === '_') {
@@ -293,23 +323,6 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
-    function mergeStyle(key: string, val: any) {
-      usedKeys[key] = usedKeys[key] || 1
-      if (val && val[0] === '_') {
-        classNames[key] = val
-      } else if (key in stylePropsTransform) {
-        flatTransforms ||= {}
-        flatTransforms[key] = val
-      } else {
-        const out = normalizeValueWithProperty(val, key)
-        if (key in validStylesOnBaseProps) {
-          viewProps[key] = out
-        } else {
-          style[key] = out
-        }
-      }
-    }
-
     if (process.env.TAMAGUI_TARGET === 'web') {
       /**
        * Copying in the accessibility/prop handling from react-native-web here
@@ -548,18 +561,7 @@ export const getSplitStyles: StyleSplitter = (
         if (!val) continue
 
         // TODO can avoid processing this if !shouldDoClasses + state is off
-        const pseudoStyleObject = getSubStyle(
-          key,
-          val,
-          staticConfig,
-          theme,
-          props,
-          state,
-          conf,
-          languageContext,
-          true,
-          true
-        )
+        const pseudoStyleObject = getSubStyle(styleState, key, val, true, state.noClassNames)
 
         const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
         const isEnter = descriptor.name === 'enter'
@@ -590,20 +592,32 @@ export const getSplitStyles: StyleSplitter = (
             }
           }
         } else {
-          if (!state[descriptor.stateKey || descriptor.name]) {
-            continue
+          const isDisabled = !state[descriptor.stateKey || descriptor.name]
+          if (!isDisabled) {
+            usedKeys[key] ||= 1
           }
           psuedosUsed ||= {}
-          usedKeys[key] ||= 1
+
           const importance = descriptor.priority
           for (const pkey in pseudoStyleObject) {
-            const curImportance = psuedosUsed[importance] || 0
             const val = pseudoStyleObject[pkey]
+            // when disabled ensure the default value is set for future animations to align
+            if (isDisabled) {
+              if (!(pkey in usedKeys) && pkey in animatableDefaults) {
+                const defaultVal = animatableDefaults[pkey]
+                mergeStyle(styleState, pkey, defaultVal, true)
+              }
+              continue
+            }
+            const curImportance = psuedosUsed[importance] || 0
             if (importance >= curImportance) {
               psuedosUsed[pkey] = importance
               pseudos[key] ||= {}
               pseudos[key][pkey] = val
-              mergeStyle(pkey, val)
+              // prettier-ignore
+              // eslint-disable-next-line no-console
+              if (process.env.NODE_ENV === 'development' && debug === 'verbose') console.log('merging', pkey, val)
+              mergeStyle(styleState, pkey, val)
             }
           }
         }
@@ -622,14 +636,9 @@ export const getSplitStyles: StyleSplitter = (
         // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
 
         const mediaStyle = getSubStyle(
+          styleState,
           key,
           val,
-          staticConfig,
-          theme,
-          props,
-          state,
-          conf,
-          languageContext,
           // TODO try true like pseudo
           false
         )
@@ -675,7 +684,7 @@ export const getSplitStyles: StyleSplitter = (
       }
 
       if (validStyleProps[key]) {
-        mergeStyle(key, val)
+        mergeStyle(styleState, key, val)
         continue
       }
 
@@ -697,6 +706,11 @@ export const getSplitStyles: StyleSplitter = (
   // always do this at the very end to preserve the order strictly (animations, origin)
   // and allow proper merging of all pseudos before applying
   if (flatTransforms) {
+    if (process.env.NODE_ENV === 'development' && debug) {
+      // prettier-ignore
+      // eslint-disable-next-line no-console
+      console.log(`Merging flat transforms, transform before`, [...style.transform || []], flatTransforms)
+    }
     mergeTransforms(style, flatTransforms, true)
   }
 
@@ -864,18 +878,38 @@ function getSubStyleProps(defaultProps: Object, baseProps: Object, specificProps
   return cache.get(key)!
 }
 
+function mergeStyle(
+  { usedKeys, classNames, flatTransforms, viewProps, style }: GetStyleState,
+  key: string,
+  val: any,
+  dontSetUsed = false
+) {
+  if (!dontSetUsed) {
+    usedKeys[key] = usedKeys[key] || 1
+  }
+  if (val && val[0] === '_') {
+    classNames[key] = val
+  } else if (key in stylePropsTransform) {
+    flatTransforms ||= {}
+    flatTransforms[key] = val
+  } else {
+    const out = normalizeValueWithProperty(val, key)
+    if (key in validStylesOnBaseProps) {
+      viewProps[key] = out
+    } else {
+      style[key] = out
+    }
+  }
+}
+
 export const getSubStyle = (
+  styleState: GetStyleState,
   subKey: string,
   styleIn: Object,
-  staticConfig: StaticConfigParsed,
-  theme: ThemeParsed,
-  props: any,
-  state: SplitStyleState,
-  conf: TamaguiInternalConfig,
-  languageContext?: FontLanguageProps,
   avoidDefaultProps?: boolean,
   avoidMergeTransform?: boolean
 ): ViewStyle => {
+  const { staticConfig, theme, props, state, conf, languageContext } = styleState
   const styleOut: ViewStyle = {}
 
   for (let key in styleIn) {
@@ -939,3 +973,11 @@ function addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: Partia
 function processIDRefList(idRefList: string | Array<string>): string {
   return Array.isArray(idRefList) ? idRefList.join(' ') : idRefList
 }
+
+const animatableDefaults = {
+  opacity: 1,
+  scale: 1,
+  rotate: '0deg',
+  rotateY: '0deg',
+  rotateX: '0deg',
+}

package/src/helpers/normalizeColor.ts

@@ -1,4 +1,4 @@
-import normalizeCSSColor from '@tamagui/normalize-css-color-lite'
+import normalizeCSSColor from 'normalize-css-color'
 
 export const normalizeColor = (color?: number | string | null, opacity?: number) => {
   if (color == null || color == undefined) {

package/src/hooks/useTheme.tsx

@@ -11,7 +11,6 @@ import { ThemeParsed, ThemeProps } from '../types'
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
 
 export type ChangedThemeResponse = {
-  themes: Record<string, ThemeParsed>
   themeManager: ThemeManager | null
   name: string
   isNewTheme?: boolean
@@ -20,17 +19,22 @@ export type ChangedThemeResponse = {
 }
 
 const emptyProps = { name: null }
+
+function getDefaultThemeProxied() {
+  const config = getConfig()
+  const name = Object.keys(config.themes)[0]
+  return getThemeProxied({
+    theme: config.themes[name],
+    name,
+  })
+}
+
 export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
   if (isRSC) {
-    const config = getConfig()
-    const name = Object.keys(config.themes)[0]
-    return getThemeProxied({
-      theme: config.themes[name],
-      name,
-    })
+    return getDefaultThemeProxied()
   }
 
-  const { name, theme, themes, themeManager, className, isNewTheme } = useChangeThemeEffect(props)
+  const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(props)
 
   if (process.env.NODE_ENV === 'development') {
     // ensure we aren't creating too many ThemeManagers
@@ -53,7 +57,7 @@ export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
     if (process.env.NODE_ENV === 'development') {
       console.warn('No theme found', name, props, themeManager)
     }
-    return themes[Object.keys(themes)[0]]
+    return getDefaultThemeProxied()
   }
 
   return useMemo(() => {
@@ -121,26 +125,26 @@ export const getThemeIsNewTheme = (theme: any): ThemeManager | undefined => them
 export const activeThemeManagers = new Set<ThemeManager>()
 
 export const useChangeThemeEffect = (props: ThemeProps, root = false): ChangedThemeResponse => {
-  const parentManager = useContext(ThemeManagerContext)
-  const config = getConfig()
-  const { debug } = props
-  // @ts-expect-error internal use only
-  const disable = props.disable
-  const { themes } = config
   if (isRSC) {
     // we need context working for this to work well
     return {
       ...createState().state,
-      themes,
       themeManager: null,
     }
   }
+  const parentManager = useContext(ThemeManagerContext)
+
+  const {
+    debug,
+    // @ts-expect-error internal use only
+    disable,
+  } = props
+
   if (disable) {
     if (!parentManager) throw new Error(`Disable topmost`)
     return {
       ...parentManager.state,
       isNewTheme: false,
-      themes,
       themeManager: parentManager,
     }
   }
@@ -189,10 +193,11 @@ export const useChangeThemeEffect = (props: ThemeProps, root = false): ChangedTh
 
   // this seems unnecessary
   if (hasNoThemeUpdatingProps(props)) {
-    if (!parentManager) throw new Error(`Nada`)
+    if (!parentManager) throw `impossible`
+    // prettier-ignore
+    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('useTheme no updating props', parentManager.state)
     return {
       ...parentManager.state,
-      themes,
       themeManager: parentManager,
       isNewTheme: false,
     }
@@ -202,13 +207,12 @@ export const useChangeThemeEffect = (props: ThemeProps, root = false): ChangedTh
   updateState()
 
   if (!mounted && !parentManager) {
-    throw new Error(`Impossible`)
+    throw `impossible`
   }
 
   return {
     ...state,
     isNewTheme,
-    themes,
     themeManager,
     ...(!mounted &&
       parentManager && {
@@ -235,8 +239,11 @@ export const useChangeThemeEffect = (props: ThemeProps, root = false): ChangedTh
   }
 
   function updateState() {
-    if (themeManager.getStateIfChanged(props, state, parentManager)) {
+    if (themeManager.getStateIfChanged(props, isNewTheme ? state : null, parentManager)) {
       setThemeState(createState)
+    } else {
+      // prettier-ignore
+      if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log(`useTheme updateState didn't change`)
     }
   }
 }

package/src/styled.tsx

@@ -63,18 +63,6 @@ export function styled<
     const parentStaticConfig =
       'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
 
-    if (process.env.NODE_ENV === 'development') {
-      if (parentStaticConfig?.isHOC) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`,
-          `Given options:`,
-          options,
-          new Error().stack
-        )
-      }
-    }
-
     if (options) {
       const {
         variants,

package/src/types.tsx

@@ -13,7 +13,7 @@ import type {
 } from '@tamagui/types-react-native'
 import type { Properties } from 'csstype'
 import type {
-  Component,
+  ComponentType,
   ForwardRefExoticComponent,
   FunctionComponent,
   HTMLAttributes,
@@ -538,6 +538,8 @@ export type ThemeValueGet<K extends string | number | symbol> = K extends 'theme
   ? FontTokens
   : K extends FontSizeKeys
   ? FontSizeTokens
+  : K extends `${`border${string | ''}Radius`}`
+  ? RadiusTokens
   : K extends SpaceKeys
   ? K extends 'shadowOffset'
     ? { width: SpaceTokens; height: SpaceTokens }
@@ -810,11 +812,6 @@ export type StaticConfig = StaticConfigPublic & {
    */
   memo?: boolean
 
-  /**
-   * Used internally to handle extractable HoC separate
-   */
-  isHOC?: boolean
-
   /**
    * Used insternally to attach default props to names
    */
@@ -843,7 +840,7 @@ export type StylableComponent =
   | TamaguiComponent
   // * excessively deep type instantiation
   // | TamaguiReactElement
-  | Component
+  | ComponentType<any>
   | ForwardRefExoticComponent<any>
   | ReactComponentWithRef<any, any>
   | (new (props: any) => any)
@@ -873,7 +870,7 @@ export type GetProps<A extends StylableComponent> = A extends TamaguiComponent<i
   ? Props
   : A extends TamaguiReactElement<infer Props>
   ? Props
-  : A extends Component<infer Props>
+  : A extends ComponentType<infer Props>
   ? GetGenericComponentTamaguiProps<Props>
   : A extends new (props: infer Props) => any
   ? GetGenericComponentTamaguiProps<Props>

package/src/views/Theme.tsx

@@ -14,14 +14,10 @@ export function Theme(props: ThemeProps) {
   }
 
   const isRoot = !!props['_isRoot']
-  const { name, theme, themeManager, themes, isNewTheme, className } = useChangeThemeEffect(
-    props,
-    isRoot
-  )
+  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(props, isRoot)
 
   const disableThemeClass = props.disableThemeClass
-  const missingTheme = !themes || !name || !theme
-  const disablePassingTheme = missingTheme || !isNewTheme
+  const missingTheme = !name || !theme
 
   // memo here, changing theme without re-rendering all children is a critical optimization
   // may require some effort of end user to memoize but without this memo they'd have no option
@@ -30,8 +26,8 @@ export function Theme(props: ThemeProps) {
       ? React.cloneElement(props.children, { ['data-themeable']: true })
       : props.children
 
-    return disablePassingTheme ? next : wrapThemeManagerContext(next, themeManager)
-  }, [disablePassingTheme, props.children, themeManager])
+    return missingTheme ? next : wrapThemeManagerContext(next, themeManager)
+  }, [missingTheme, props.children, themeManager])
 
   if (process.env.NODE_ENV === 'development' && missingTheme) {
     // eslint-disable-next-line no-console
@@ -39,7 +35,7 @@ export function Theme(props: ThemeProps) {
     return props.children
   }
 
-  if (disableThemeClass || disablePassingTheme) {
+  if (disableThemeClass || missingTheme) {
     return contents
   }
 

package/types/helpers/ThemeManager.d.ts

@@ -24,8 +24,8 @@ export declare class ThemeManager {
     updateState(props?: ThemeProps & {
         forceTheme?: ThemeParsed;
     }, notify?: boolean): ThemeManagerState | undefined;
-    getStateIfChanged(props?: ThemeProps, state?: ThemeManagerState, parentManager?: ThemeManager | null): ThemeManagerState | null;
-    getState(props?: ThemeProps): ThemeManagerState | null;
+    getStateIfChanged(props?: ThemeProps, state?: ThemeManagerState | null, parentManager?: ThemeManager | null): ThemeManagerState | null | undefined;
+    getState(props?: ThemeProps, parentManager?: ThemeManager | null): ThemeManagerState | undefined;
     get allKeys(): Set<string>;
     getValue(key: string, state?: ThemeManagerState): import("..").Variable<any> | undefined;
     notify(): void;