@tamagui/core 1.0.1-beta.220 → 1.0.1-beta.221

package/src/types.tsx

@@ -264,6 +264,17 @@ export type AnimationKeys = TamaguiConfig['animations'] extends AnimationDriver<
   : string
 export type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>
 
+export interface ThemeProps {
+  className?: string
+  disableThemeClass?: boolean
+  name?: Exclude<ThemeName, number> | null
+  componentName?: string
+  children?: any
+  reset?: boolean
+  debug?: boolean | 'verbose'
+  inverse?: boolean
+}
+
 type ArrayIntersection<A extends any[]> = A[keyof A]
 
 type GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S
@@ -1242,8 +1253,33 @@ export type SplitStyleState = TamaguiComponentState & {
   fallbackProps?: Record<string, any>
   keepVariantsAsProps?: boolean
   hasTextAncestor?: boolean
+
+  // for animations
+  isExiting?: boolean
+  exitVariant?: string
+  enterVariant?: string
 }
 
+// Presence
+
+export interface PresenceContextProps {
+  id: string
+  isPresent: boolean
+  register: (id: string) => () => void
+  onExitComplete?: (id: string) => void
+  initial?: false | string | string[]
+  custom?: any
+  exitVariant?: string | null
+  enterVariant?: string | null
+}
+
+type SafeToRemoveCallback = () => void
+type AlwaysPresent = [true, null, null]
+type Present = [true, undefined, PresenceContextProps]
+type NotPresent = [false, SafeToRemoveCallback, PresenceContextProps]
+
+export type UsePresenceResult = AlwaysPresent | Present | NotPresent
+
 // Animations:
 
 type AnimationConfig = {
@@ -1277,6 +1313,7 @@ export type UniversalAnimatedNumber<A> = {
 export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
   isReactNative?: boolean
   useAnimations: UseAnimationHook
+  usePresence: () => UsePresenceResult
   useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>
   useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(
     val: V,
@@ -1293,29 +1330,17 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
 
 export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>
 
-export type UseAnimationHelpers = {
+export type UseAnimationHook = (props: {
+  style: Record<string, any>
+  props: Record<string, any>
+  presence?: UsePresenceResult | null
   hostRef: RefObject<HTMLElement | View>
   staticConfig: StaticConfigParsed
-  getStyle: (props?: {
-    isEntering?: boolean
-    isExiting?: boolean
-    exitVariant?: string | null
-    enterVariant?: string | null
-  }) => ViewStyle
   state: SplitStyleState
   pseudos: PseudoProps<ViewStyle>
-  // style: ViewStyle | null | undefined
-  // isMounted: boolean
-  // exitStyle?: ViewStyle | null
   onDidAnimate?: any
   delay?: number
-  // mergedStyles(props?: { isExiting?: boolean }): ViewStyle
-}
-
-export type UseAnimationHook = (
-  props: UseAnimationProps,
-  helpers: UseAnimationHelpers
-) => null | {
+}) => null | {
   style?: StackStylePropsBase | StackStylePropsBase[]
 }
 

package/src/updateTheme.ts

@@ -2,19 +2,22 @@ import { addTheme } from './addTheme'
 import { activeThemeManagers } from './hooks/useTheme'
 import { ThemeDefinition } from './types'
 
-export function updateTheme({ name, theme }: { name: string; theme: ThemeDefinition }) {
+export function updateTheme({
+  name,
+  theme,
+}: {
+  name: string
+  theme: Partial<Record<keyof ThemeDefinition, any>>
+}) {
   const next = addTheme({ name, theme, insertCSS: true, update: true })
 
   if (process.env.TAMAGUI_TARGET === 'native') {
     activeThemeManagers.forEach((manager) => {
-      if (manager.name === name) {
-        manager.update(
-          {
-            name,
-            theme: next.theme,
-          },
-          true
-        )
+      if (manager.state.name === name) {
+        manager.updateState({
+          name,
+          forceTheme: next.theme,
+        })
       }
     })
   }

package/src/views/TamaguiProvider.tsx

@@ -1,7 +1,7 @@
-import { isClient, isRSC, isServer } from '@tamagui/constants'
+import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'
 import * as React from 'react'
 
-import { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'
+import { ButtonNestingContext } from '../contexts/ButtonNestingContext'
 import { TextAncestorContext } from '../contexts/TextAncestorContext'
 import { useMediaListeners } from '../hooks/useMedia'
 import type { TamaguiProviderProps } from '../types'
@@ -24,7 +24,7 @@ export function TamaguiProvider({
     )
   }
 
-  if (!isServer) {
+  if (!isWeb || !isServer) {
     useMediaListeners(config)
   }
 
@@ -43,7 +43,7 @@ export function TamaguiProvider({
   }
 
   return (
-    <ButtonInsideButtonContext.Provider value={false}>
+    <ButtonNestingContext.Provider value={false}>
       <TextAncestorContext.Provider value={false}>
         <ThemeProvider
           themeClassNameOnRoot={config.themeClassNameOnRoot}
@@ -54,6 +54,6 @@ export function TamaguiProvider({
           {children}
         </ThemeProvider>
       </TextAncestorContext.Provider>
-    </ButtonInsideButtonContext.Provider>
+    </ButtonNestingContext.Provider>
   )
 }

package/src/views/Theme.tsx

@@ -1,48 +1,56 @@
 import { isWeb } from '@tamagui/constants'
-import React, { memo, useMemo } from 'react'
+import React, { useMemo } from 'react'
 
 import { variableToString } from '../createVariable'
-import { ThemeManager, ThemeManagerContext } from '../helpers/ThemeManager'
-import { ThemeProps, useChangeThemeEffect } from '../hooks/useTheme'
+import { ThemeManager } from '../helpers/ThemeManager'
+import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import { useChangeThemeEffect } from '../hooks/useTheme'
+import { ThemeProps } from '../types'
 
-// bugfix esbuild strips react jsx: 'preserve'
-React['createElement']
+export function Theme(props: ThemeProps) {
+  // @ts-expect-error its a permanent prop meant for internal views
+  if (props.disable) {
+    return props.children
+  }
 
-export const Theme = memo(function Theme(props: ThemeProps) {
-  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(
-    props.name,
-    props.componentName,
-    props
+  const isRoot = !!props['_isRoot']
+  const { name, theme, themeManager, themes, isNewTheme, className } = useChangeThemeEffect(
+    props,
+    isRoot
   )
 
+  const disableThemeClass = props.disableThemeClass
   const missingTheme = !themes || !name || !theme
+  const disablePassingTheme = missingTheme || !isNewTheme
 
   // 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
-  const contents = useMemo(
-    () => (missingTheme ? null : wrapThemeManagerContext(props.children, themeManager)),
-    [missingTheme, props.children, themeManager]
-  )
+  let contents = useMemo(() => {
+    const next = props['data-themeable']
+      ? React.cloneElement(props.children, { ['data-themeable']: true })
+      : props.children
 
-  if (missingTheme) {
-    if (name && !theme && process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
-      console.warn(`No theme found by name ${name}`)
-    }
+    return disablePassingTheme ? next : wrapThemeManagerContext(next, themeManager)
+  }, [disablePassingTheme, props.children, themeManager])
+
+  if (process.env.NODE_ENV === 'development' && missingTheme) {
+    // eslint-disable-next-line no-console
+    name && !theme && console.warn(`No theme found by name ${name}`)
     return props.children
   }
 
+  if (disableThemeClass || disablePassingTheme) {
+    return contents
+  }
+
   if (isWeb) {
-    return (
+    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')
+    contents = (
       <span
-        className={(!props.disableThemeClass
-          ? [props.className, className].filter(Boolean)
-          : []
-        ).join(' ')}
+        className={cn}
         style={{
-          display: 'contents',
           // in order to provide currentColor, set color by default
-          color: variableToString(themes[name]?.color),
+          color: variableToString(theme?.color),
         }}
       >
         {contents}
@@ -51,22 +59,23 @@ export const Theme = memo(function Theme(props: ThemeProps) {
   }
 
   return contents
-})
+}
 
 export function wrapThemeManagerContext(
   children: any,
   themeManager?: ThemeManager | null,
-  shouldSetChildrenThemeToParent?: boolean
+  shouldReset?: boolean
 ) {
-  return themeManager ? (
-    <ThemeManagerContext.Provider value={themeManager}>
-      {shouldSetChildrenThemeToParent ? (
-        <Theme name={themeManager.parentName}>{children}</Theme>
-      ) : (
-        children
-      )}
-    </ThemeManagerContext.Provider>
-  ) : (
-    children
-  )
+  // be sure to memoize themeManager to avoid reparenting
+  if (!themeManager) {
+    return children
+  }
+  // be sure to memoize shouldReset to avoid reparenting
+  let next = children
+  // TODO likely not necessary if we do reset logic now in useTheme?
+  // reset to parent theme
+  if (shouldReset && themeManager) {
+    next = <Theme name={themeManager.state.parentName}>{next}</Theme>
+  }
+  return <ThemeManagerContext.Provider value={themeManager}>{next}</ThemeManagerContext.Provider>
 }

package/src/views/ThemeProvider.tsx

@@ -1,14 +1,9 @@
 import { isClient } from '@tamagui/constants'
-import React, { useLayoutEffect, useMemo } from 'react'
+import { useLayoutEffect } from 'react'
 
-import { getConfig, getHasConfigured } from '../config'
 import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
-import { ThemeContext } from '../contexts/ThemeContext'
 import { Theme } from './Theme'
 
-// bugfix esbuild strips react jsx: 'preserve'
-React['createElement']
-
 export type ThemeProviderProps = {
   className?: string
   defaultTheme: string
@@ -19,18 +14,10 @@ export type ThemeProviderProps = {
 }
 
 export const ThemeProvider = (props: ThemeProviderProps) => {
-  if (process.env.NODE_ENV === 'development') {
-    if (!getHasConfigured()) {
-      throw new Error(`Missing configureThemes() call, add to your root file`)
-    }
-  }
-
   // ensure theme is attached to root body node as well to work with modals by default
   if (isClient) {
     useLayoutEffect(() => {
-      if (props.disableRootThemeClass) {
-        return
-      }
+      if (props.disableRootThemeClass) return
       const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`
       const target = props.themeClassNameOnRoot ? document.documentElement : document.body
       target.classList.add(cn)
@@ -40,24 +27,15 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
     }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])
   }
 
-  const themeContext = useMemo(() => {
-    return {
-      get themes() {
-        return getConfig().themes
-      },
-      defaultTheme: props.defaultTheme,
-    }
-  }, [props.defaultTheme])
-
   return (
-    <ThemeContext.Provider value={themeContext}>
-      <Theme
-        className={props.className}
-        name={props.defaultTheme}
-        disableThemeClass={props.disableRootThemeClass}
-      >
-        {props.children}
-      </Theme>
-    </ThemeContext.Provider>
+    <Theme
+      className={props.className}
+      name={props.defaultTheme}
+      disableThemeClass={props.disableRootThemeClass}
+      // @ts-expect-error
+      _isRoot
+    >
+      {props.children}
+    </Theme>
   )
 }

package/types/Tamagui.d.ts

@@ -18,7 +18,7 @@ declare class TamaguiManager {
             [key: string]: any;
         };
     }, import("./types").GenericFonts>;
-    get insertedRules(): (boolean | string[])[];
+    get insertedRules(): string[];
     get allSelectors(): Record<string, string>;
     get allTransforms(): {};
     get identifierToValue(): Map<string, any>;

package/types/addTheme.d.ts

@@ -1,10 +1,31 @@
 import { ThemeDefinition } from './types';
-export declare function addTheme({ name: themeName, theme: themeIn, insertCSS, update, }: {
+export declare function addTheme(props: {
     name: string;
-    theme: ThemeDefinition;
+    theme: Partial<Record<keyof ThemeDefinition, any>>;
     insertCSS?: boolean;
     update?: boolean;
 }): {
+    theme: {
+        [x: string]: import("./createVariable").Variable<any>;
+        background?: import("./createVariable").Variable<any> | undefined;
+        backgroundHover?: import("./createVariable").Variable<any> | undefined;
+        backgroundPress?: import("./createVariable").Variable<any> | undefined;
+        backgroundFocus?: import("./createVariable").Variable<any> | undefined;
+        color?: import("./createVariable").Variable<any> | undefined;
+        colorHover?: import("./createVariable").Variable<any> | undefined;
+        colorPress?: import("./createVariable").Variable<any> | undefined;
+        colorFocus?: import("./createVariable").Variable<any> | undefined;
+        borderColor?: import("./createVariable").Variable<any> | undefined;
+        borderColorHover?: import("./createVariable").Variable<any> | undefined;
+        borderColorPress?: import("./createVariable").Variable<any> | undefined;
+        borderColorFocus?: import("./createVariable").Variable<any> | undefined;
+        shadowColor?: import("./createVariable").Variable<any> | undefined;
+        shadowColorHover?: import("./createVariable").Variable<any> | undefined;
+        shadowColorPress?: import("./createVariable").Variable<any> | undefined;
+        shadowColorFocus?: import("./createVariable").Variable<any> | undefined;
+    };
+    cssRules?: undefined;
+} | {
     theme: any;
     cssRules: string[];
 };

package/types/config.d.ts

@@ -1,7 +1,6 @@
 import { ConfigListener, TamaguiInternalConfig, Tokens } from './types';
 export declare const setConfig: (next: TamaguiInternalConfig) => void;
 export declare const setConfigFont: (name: string, font: any, fontParsed: any) => void;
-export declare const getHasConfigured: () => boolean;
 export declare const getConfig: () => TamaguiInternalConfig<import("./types").CreateTokens<import("./types").VariableVal>, {
     [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
         [key: string]: import("./types").VariableVal;

package/types/contexts/ButtonNestingContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ButtonNestingContext: import("react").Context<boolean>;
+//# sourceMappingURL=ButtonNestingContext.d.ts.map

package/types/createTokens.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=createTokens.test.d.ts.map

package/types/createVariable.d.ts

@@ -2,7 +2,7 @@
  * Should rename this to Token
  * Moving to objects for React Server Components support
  */
-declare const IS_VAR = "__isVar__";
+declare const IS_VAR = "isVar";
 declare type VariableIn<A = any> = {
     val: A;
     name: string;
@@ -19,7 +19,7 @@ export declare const createVariable: <A extends string | number = any>(props: Va
     name: string;
     key: string;
     isFloating?: boolean | undefined;
-    __isVar__: boolean;
+    isVar: boolean;
 };
 export declare function variableToString(vrble?: any, getValue?: boolean): string;
 export declare function isVariable(v: Variable | any): v is Variable;

package/types/createVariable.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=createVariable.test.d.ts.map

package/types/helpers/ThemeManager.d.ts

@@ -1,45 +1,35 @@
-/// <reference types="react" />
-import { ThemeParsed, Themes } from '../types';
+import { ThemeParsed, ThemeProps } from '../types';
 declare type ThemeListener = (name: string | null, themeManager: ThemeManager) => void;
 export declare type SetActiveThemeProps = {
     className?: string;
     parentManager?: ThemeManager | null;
     name?: string | null;
     theme?: any;
-};
-export declare type GetNextThemeProps = {
-    themes?: Themes;
-    name?: string | null;
-    componentName?: string | null;
     reset?: boolean;
 };
-export declare class ThemeManager {
+export declare type ThemeManagerState = {
     name: string;
-    className: string;
-    theme: ThemeParsed | null;
-    parentManager: ThemeManager | null;
-    reset: boolean;
-    keys: Map<any, Set<string>>;
-    listeners: Map<any, Function>;
+    theme?: ThemeParsed | null;
+    className?: string;
+    parentName?: string;
+};
+export declare function hasNoThemeUpdatingProps(props: ThemeProps): boolean;
+export declare class ThemeManager {
+    #private;
+    props: ThemeProps;
     themeListeners: Set<ThemeListener>;
-    constructor(name?: string, className?: string, theme?: ThemeParsed | null, parentManager?: ThemeManager | null, reset?: boolean);
-    get didChangeTheme(): boolean | null;
-    get parentName(): string | null;
-    get fullName(): string;
-    getValue(key: string): import("..").Variable<any> | undefined;
-    isTracking(uuid: Object): boolean;
-    update({ name, theme, className }?: SetActiveThemeProps, force?: boolean, notify?: boolean): boolean;
-    getNextTheme(props?: GetNextThemeProps, debug?: any): {
-        name: string;
-        theme: ThemeParsed | null;
-        className: string | undefined;
-    };
-    getCN(name: string): string;
-    track(uuid: any, keys: Set<string>): void;
+    parentManager: ThemeManager | null;
+    state: ThemeManagerState;
+    constructor(props?: ThemeProps, parentManager?: ThemeManager | 'root' | null | undefined);
+    updateState(props?: ThemeProps & {
+        forceTheme?: ThemeParsed;
+    }, notify?: boolean): ThemeManagerState | undefined;
+    getStateIfChanged(props?: ThemeProps, state?: ThemeManagerState, parentManager?: ThemeManager | null): ThemeManagerState | null;
+    getState(props?: ThemeProps): ThemeManagerState | null;
+    get allKeys(): Set<string>;
+    getValue(key: string, state?: ThemeManagerState): import("..").Variable<any> | undefined;
     notify(): void;
     onChangeTheme(cb: ThemeListener): () => void;
 }
-export declare const ThemeManagerContext: import("react").Context<ThemeManager | null>;
-export declare const emptyManager: ThemeManager;
 export {};
 //# sourceMappingURL=ThemeManager.d.ts.map

package/types/helpers/ThemeManager.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ThemeManager.test.d.ts.map

package/types/helpers/ThemeManagerContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ThemeManager } from './ThemeManager';
+export declare const ThemeManagerContext: import("react").Context<ThemeManager | null>;
+//# sourceMappingURL=ThemeManagerContext.d.ts.map

package/types/helpers/getBoundingClientRect.d.ts

@@ -0,0 +1,2 @@
+export declare const getBoundingClientRect: (node: HTMLElement | null) => void | DOMRect;
+//# sourceMappingURL=getBoundingClientRect.d.ts.map

package/types/helpers/getRect.d.ts

@@ -0,0 +1,9 @@
+export declare const getRect: (node: HTMLElement) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+} | undefined;
+//# sourceMappingURL=getRect.d.ts.map

package/types/helpers/insertStyleRule.d.ts

@@ -1,7 +1,7 @@
 import type { StyleObject } from '@tamagui/helpers';
 export declare const insertedTransforms: {};
 export declare const getAllSelectors: () => Record<string, string>;
-export declare const getAllRules: () => (boolean | string[])[];
+export declare const getAllRules: () => string[];
 export declare const getAllTransforms: () => {};
 export declare function updateInserted(): void;
 export declare function updateRules(identifier: string, rules: string[]): boolean;

package/types/helpers/mergeTransform.d.ts

@@ -1,7 +1,9 @@
 import type { ViewStyle } from '@tamagui/types-react-native';
+export declare type FlatTransforms = Record<string, any>;
 export declare const mergeTransform: (obj: ViewStyle, key: string, val: any, backwards?: boolean) => void;
-export declare const invertMapTransformKeys: {
-    translateX: string;
-    translateY: string;
+export declare const mergeTransforms: (obj: ViewStyle, flatTransforms: FlatTransforms, backwards?: boolean) => void;
+export declare const mapTransformKeys: {
+    x: string;
+    y: string;
 };
 //# sourceMappingURL=mergeTransform.d.ts.map

package/types/helpers/themeable.d.ts

@@ -2,6 +2,9 @@ import { ThemeName } from '../types';
 export interface ThemeableProps {
     theme?: ThemeName | null;
     themeInverse?: boolean;
+    componentName?: string;
+    debug?: boolean | 'verbose';
+    reset?: boolean;
 }
 export declare function themeable<Component extends (props: any) => any>(component: Component, opts?: {
     componentName?: string;

package/types/hooks/useElementLayout.d.ts

@@ -14,14 +14,6 @@ export declare type LayoutEvent = {
     };
     timeStamp: number;
 };
-export declare const getRect: (node: HTMLElement) => {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    top: number;
-    left: number;
-} | undefined;
 export declare const measureLayout: (node: HTMLElement, relativeTo: HTMLElement | null, callback: Function) => void;
 export declare function useElementLayout(ref: RefObject<Element>, onLayout?: ((e: LayoutEvent) => void) | null): void;
 //# sourceMappingURL=useElementLayout.d.ts.map

package/types/hooks/useTheme.d.ts

@@ -1,26 +1,16 @@
 import { ThemeManager } from '../helpers/ThemeManager';
-import { ThemeName, ThemeParsed } from '../types';
-export interface ThemeProps {
-    className?: string;
-    disableThemeClass?: boolean;
-    name: Exclude<ThemeName, number> | null;
-    componentName?: string;
-    children?: any;
-    reset?: boolean;
-    debug?: boolean | 'verbose';
-}
-export declare const useTheme: (themeName?: string | null, componentName?: string, props?: ThemeProps, forceUpdate?: any, disableTracking?: boolean) => ThemeParsed;
-export declare const getThemeManager: (theme: any) => ThemeManager | undefined;
-export declare function useThemeName(opts?: {
-    parent?: true;
-}): ThemeName;
-export declare const useDefaultThemeName: () => string | undefined;
-export declare const activeThemeManagers: Set<ThemeManager>;
-export declare const useChangeThemeEffect: (name?: string | null, componentName?: string, props?: ThemeProps, forceUpdateProp?: any, uuid?: Object) => {
+import { ThemeParsed, ThemeProps } from '../types';
+export declare type ChangedThemeResponse = {
     themes: Record<string, ThemeParsed>;
     themeManager: ThemeManager | null;
     name: string;
-    theme: ThemeParsed | null;
-    className?: string | undefined;
+    isNewTheme?: boolean;
+    theme?: ThemeParsed | null;
+    className?: string;
 };
+export declare const useTheme: (props?: ThemeProps) => ThemeParsed;
+export declare const getThemeManager: (theme: any) => ThemeManager | undefined;
+export declare const getThemeIsNewTheme: (theme: any) => ThemeManager | undefined;
+export declare const activeThemeManagers: Set<ThemeManager>;
+export declare const useChangeThemeEffect: (props: ThemeProps, root?: boolean) => ChangedThemeResponse;
 //# sourceMappingURL=useTheme.d.ts.map

package/types/hooks/useThemeName.d.ts

@@ -0,0 +1,5 @@
+import { ThemeName } from '../types';
+export declare function useThemeName(opts?: {
+    parent?: true;
+}): ThemeName;
+//# sourceMappingURL=useThemeName.d.ts.map