@tamagui/core 1.0.1-beta.148 → 1.0.1-beta.151

package/dist/esm/constants/platform.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/platform.ts"],
-  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web'\nexport const isWindowDefined = typeof window !== 'undefined'\nexport const isSSR = isWeb && !isWindowDefined\nexport const isClient = isWeb && isWindowDefined\n\nexport const isRSC = process.env.ENABLE_RSC\n  ? // note this is statically analyzed so no funny business, just access it without optional chaining\n    // @ts-ignore\n    import.meta.env\n    ? // @ts-ignore\n      import.meta.env.SSR\n    : false\n  : false\n\nconst idFn = () => {}\nexport const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const isWebTouchable = isClient && 'ontouchstart' in window\nexport const isTouchable = !isWeb || isWebTouchable\n"],
-  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,YAAY,uCAAU,QAAO;AACnC,MAAM,QAAQ,uCAAU,QAAO;AAC/B,MAAM,QAAQ,QAAQ,IAAI,mBAAmB;AAC7C,MAAM,kBAAkB,OAAO,WAAW;AAC1C,MAAM,QAAQ,SAAS,CAAC;AACxB,MAAM,WAAW,SAAS;AAE1B,MAAM,QAAQ,QAAQ,IAAI,aAG7B,YAAY,MAEV,YAAY,IAAI,MAChB,QACF;AAEJ,MAAM,OAAO,MAAM;AAAC;AACb,MAAM,4BAA4B,QAAQ,OAAO,QAAQ,YAAY;AACrE,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,iBAAiB,YAAY,kBAAkB;AACrD,MAAM,cAAc,CAAC,SAAS;",
+  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web'\nexport const isWindowDefined = typeof window !== 'undefined'\nexport const isSSR = isWeb && !isWindowDefined\nexport const isClient = isWeb && isWindowDefined\n\n// may want to move to VITE_RSC_BUILD\nexport const isRSC = process.env.ENABLE_RSC\n  ? // note this is statically analyzed so no funny business, just access it without optional chaining\n    // @ts-ignore\n    import.meta.env\n    ? // @ts-ignore\n      import.meta.env.SSR\n    : false\n  : false\n\nconst idFn = () => {}\nexport const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const isWebTouchable = isClient && 'ontouchstart' in window\nexport const isTouchable = !isWeb || isWebTouchable\n"],
+  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,YAAY,uCAAU,QAAO;AACnC,MAAM,QAAQ,uCAAU,QAAO;AAC/B,MAAM,QAAQ,QAAQ,IAAI,mBAAmB;AAC7C,MAAM,kBAAkB,OAAO,WAAW;AAC1C,MAAM,QAAQ,SAAS,CAAC;AACxB,MAAM,WAAW,SAAS;AAG1B,MAAM,QAAQ,QAAQ,IAAI,aAG7B,YAAY,MAEV,YAAY,IAAI,MAChB,QACF;AAEJ,MAAM,OAAO,MAAM;AAAC;AACb,MAAM,4BAA4B,QAAQ,OAAO,QAAQ,YAAY;AACrE,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,iBAAiB,YAAY,kBAAkB;AACrD,MAAM,cAAc,CAAC,SAAS;",
   "names": []
 }

package/dist/esm/createComponent.js

@@ -18,7 +18,8 @@ import React, {
   forwardRef,
   memo,
   useCallback,
-  useContext
+  useContext,
+  useEffect
 } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { getConfig, onConfiguredOnce } from "./config";
@@ -30,12 +31,15 @@ import { assignNativePropsToWeb } from "./helpers/assignNativePropsToWeb";
 import { getReturnVariablesAs } from "./helpers/createPropMapper";
 import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
+import {
+  getSubStyle,
+  insertSplitStyles,
+  useSplitStyles
+} from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
 import { mergeProps } from "./helpers/mergeProps";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
-import { useFeatures } from "./hooks/useFeatures";
-import { mediaState } from "./hooks/useMedia";
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./hooks/useMedia";
 import { usePressable } from "./hooks/usePressable";
 import { useServerRef, useServerState } from "./hooks/useServerHooks";
 import { getThemeManager, useTheme } from "./hooks/useTheme";
@@ -68,6 +72,7 @@ function mergeShorthands({ defaultProps }, { shorthands }) {
 }
 let initialTheme;
 let config;
+let mediaPropNames = [];
 function createComponent(configIn, ParentComponent) {
   const staticConfig = (() => {
     const next = extendStaticConfig(configIn, ParentComponent);
@@ -87,7 +92,7 @@ function createComponent(configIn, ParentComponent) {
   let tamaguiDefaultProps;
   let initialSplitStyles;
   const component = forwardRef((propsIn, forwardedRef) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     let props;
     if (tamaguiDefaultProps && !propsIn.asChild) {
       props = mergeProps(tamaguiDefaultProps, propsIn)[0];
@@ -136,23 +141,54 @@ function createComponent(configIn, ParentComponent) {
         }
       }
     }
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames, mediaKeys } = splitStyles;
+    useIsomorphicLayoutEffect(() => {
+      for (const key of mediaKeys) {
+        addMediaQueryListener(key, forceUpdate);
+      }
+      return () => {
+        for (const key of mediaKeys) {
+          removeMediaQueryListener(key, forceUpdate);
+        }
+      };
+    }, [mediaKeys.join(",")]);
     const useAnimations = (_a = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
     const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null;
-    const features = useFeatures(props, {
-      forceUpdate,
-      setStateShallow,
-      useAnimations,
-      state,
-      style: animationFeatureStylesIn,
-      pseudos,
-      staticConfig,
-      theme,
-      hostRef,
-      onDidAnimate: props.onDidAnimate
-    });
+    const propsWithAnimation = props;
+    if (!isRSC && isAnimated) {
+      const animationState = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate: props.onDidAnimate,
+        hostRef,
+        staticConfig,
+        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
+          var _a2, _b2, _c2, _d2;
+          const style2 = animationFeatureStylesIn;
+          const enterStyle = isEntering ? enterVariant && ((_a2 = staticConfig.variants) == null ? void 0 : _a2[enterVariant]["true"]) ? getSubStyle("", (_b2 = staticConfig.variants) == null ? void 0 : _b2[enterVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isExiting ? exitVariant && ((_c2 = staticConfig.variants) == null ? void 0 : _c2[exitVariant]["true"]) ? getSubStyle("", (_d2 = staticConfig.variants) == null ? void 0 : _d2[exitVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.exitStyle : pseudos.exitStyle : null;
+          ensureBaseHasDefaults(style2, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
+          enterStyle && isEntering && merge(style2, enterStyle);
+          state.hover && pseudos.hoverStyle && merge(style2, pseudos.hoverStyle);
+          state.focus && pseudos.focusStyle && merge(style2, pseudos.focusStyle);
+          state.press && pseudos.pressStyle && merge(style2, pseudos.pressStyle);
+          exitStyle && isExiting && merge(style2, exitStyle);
+          if (process.env.NODE_ENV === "development") {
+            if (props["debug"]) {
+              console.log("animation style", style2);
+            }
+          }
+          return style2;
+        }
+      });
+      if (animationState !== state.animation) {
+        setStateShallow({
+          animation: animationState
+        });
+      }
+    }
     const {
       tag,
       hitSlop,
@@ -284,7 +320,14 @@ function createComponent(configIn, ParentComponent) {
           onStartShouldSetResponderCapture
         });
         const platformMethodsRef = usePlatformMethods(viewProps);
-        const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+        const shouldSetMounted = Boolean(isClient && (hasEnterStyle || props.animation) && !state.mounted);
+        const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef, shouldSetMounted ? () => {
+          setTimeout(() => {
+            setStateShallow({
+              mounted: true
+            });
+          }, 10);
+        } : void 0);
         viewProps.ref = setRef;
       }
       if (props.href != void 0 && hrefAttrs != void 0) {
@@ -329,26 +372,13 @@ function createComponent(configIn, ParentComponent) {
         }
       });
     }
-    const internal = useServerRef();
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true
-      };
+    if (!isRSC) {
+      useEffect(() => {
+        return () => {
+          mouseUps.delete(unPress);
+        };
+      }, []);
     }
-    useIsomorphicLayoutEffect(() => {
-      if (isClient && (hasEnterStyle || props.animation) && !state.mounted) {
-        setStateShallow({
-          mounted: true
-        });
-      }
-      internal.current.isMounted = true;
-      return () => {
-        var _a2;
-        mouseUps.delete(unPress);
-        internal.current.isMounted = false;
-        (_a2 = internal.current.unmountEffects) == null ? void 0 : _a2.forEach((cb) => cb());
-      };
-    }, [hasEnterStyle, props.animation]);
     let styles;
     const animationStyles = state.animation ? state.animation.style : null;
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
@@ -365,11 +395,10 @@ function createComponent(configIn, ParentComponent) {
       ];
       if (!animationStyles && initialSplitStyles) {
         const initPseudos = initialSplitStyles.pseudos;
-        const force = shouldForcePseudo;
         !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, "enterStyle");
-        state.hover && addPseudoToStyles(styles, initPseudos, pseudos, "hoverStyle", force);
-        state.focus && addPseudoToStyles(styles, initPseudos, pseudos, "focusStyle", force);
-        state.press && addPseudoToStyles(styles, initPseudos, pseudos, "pressStyle", force);
+        state.hover && addPseudoToStyles(styles, initPseudos, pseudos, "hoverStyle", shouldForcePseudo);
+        state.focus && addPseudoToStyles(styles, initPseudos, pseudos, "focusStyle", shouldForcePseudo);
+        state.press && addPseudoToStyles(styles, initPseudos, pseudos, "pressStyle", shouldForcePseudo);
       }
       if (shouldForcePseudo) {
         const next = {};
@@ -413,7 +442,31 @@ function createComponent(configIn, ParentComponent) {
         viewProps.className = className;
       }
       viewProps.style = style2;
-    } else {
+    }
+    if (process.env.TAMAGUI_TARGET === "native") {
+      if (splitStyles.fontFamily) {
+        const faceInfo = (_b = config.fontsParsed[splitStyles.fontFamily]) == null ? void 0 : _b.face;
+        if (faceInfo) {
+          const [weight, style2] = (() => {
+            var _a2, _b2;
+            let weight2;
+            let style3;
+            for (let i = styles.length; i >= 0; i--) {
+              weight2 ??= (_a2 = styles[i]) == null ? void 0 : _a2.fontWeight;
+              style3 ??= (_b2 = styles[i]) == null ? void 0 : _b2.fontStyle;
+            }
+            return [weight2 || "400", style3 || "normal"];
+          })();
+          const overrideFace = (_d = (_c = faceInfo[weight]) == null ? void 0 : _c[style2]) == null ? void 0 : _d.val;
+          if (overrideFace) {
+            for (const style3 of styles) {
+              if (style3 == null ? void 0 : style3.fontFamily) {
+                style3.fontFamily = overrideFace;
+              }
+            }
+          }
+        }
+      }
       viewProps.style = styles;
     }
     const initialPseudos = initialSplitStyles == null ? void 0 : initialSplitStyles.pseudos;
@@ -426,8 +479,6 @@ function createComponent(configIn, ParentComponent) {
     const pressOutKey = handlesPressEvents ? "onPressOut" : "onMouseUp";
     const shouldAttach = !asChild && (attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props));
     const unPress = useCallback(() => {
-      if (!internal.current.isMounted)
-        return;
       setStateShallow({
         press: false,
         pressIn: false
@@ -490,7 +541,7 @@ function createComponent(configIn, ParentComponent) {
       } : null,
       ...!isWeb && {
         cancelable: !props.rejectResponderTermination,
-        disabled: props.disabled !== null ? props.disabled : (_b = props.accessibilityState) == null ? void 0 : _b.disabled,
+        disabled: props.disabled !== null ? props.disabled : (_e = props.accessibilityState) == null ? void 0 : _e.disabled,
         hitSlop: props.hitSlop,
         delayLongPress: props.delayLongPress,
         delayPressIn: props.delayPressIn,
@@ -500,7 +551,7 @@ function createComponent(configIn, ParentComponent) {
       }
     } : null;
     let space = spaceProp;
-    if (features.enabled.mediaQuery) {
+    if (mediaKeys.length) {
       for (const key in mediaState) {
         if (!mediaState[key])
           continue;
@@ -577,7 +628,7 @@ function createComponent(configIn, ParentComponent) {
     content = createElement(elementType, viewProps, childEls);
     if (process.env.TAMAGUI_TARGET === "web") {
       const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
-      const shouldWrapWithComponentTheme = isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
+      const shouldWrapWithComponentTheme = !!theme.className && isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
       const shouldWrapWithHover = Boolean(events || isRSC) && attachHover;
       if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
         const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
@@ -604,12 +655,12 @@ function createComponent(configIn, ParentComponent) {
         console.log("children", content);
         console.groupEnd();
         if (typeof window !== "undefined") {
-          console.log({ state, shouldProvideThemeManager, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null });
+          console.log({ state, shouldProvideThemeManager, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: (_f = props.className) == null ? void 0 : _f.split(" "), classNamesOut: (_g = viewProps.className) == null ? void 0 : _g.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null });
         }
         console.groupEnd();
       }
     }
-    return !isRSC && features.elements.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, features.elements, content) : content;
+    return content;
   });
   if (staticConfig.componentName) {
     component.displayName = staticConfig.componentName;
@@ -645,7 +696,7 @@ function createComponent(configIn, ParentComponent) {
       resolveVariablesAs: "both",
       keepVariantsAsProps: true
     }, void 0, void 0, debug);
-    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps, initialSplitStyles.viewProps, true);
+    const [defaults2, defaultsClassnames] = mergeProps(component.defaultProps, initialSplitStyles.viewProps, true);
     initialSplitStyles.classNames = {
       ...parentClassNames,
       ...defaultsClassnames,
@@ -659,7 +710,7 @@ function createComponent(configIn, ParentComponent) {
         if (validPseudoKeys[key])
           continue;
         if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
-          defaults[key] = val;
+          defaults2[key] = val;
         } else {
           defaultNativeStyle[key] = val;
         }
@@ -668,8 +719,8 @@ function createComponent(configIn, ParentComponent) {
     defaultNativeStyleSheet = StyleSheet.create({
       base: defaultNativeStyle
     });
-    if (Object.keys(defaults).length) {
-      tamaguiDefaultProps = defaults;
+    if (Object.keys(defaults2).length) {
+      tamaguiDefaultProps = defaults2;
     }
     if (process.env.NODE_ENV === "development" && debug) {
       if (process.env.IS_STATIC !== "is_static") {
@@ -678,7 +729,7 @@ function createComponent(configIn, ParentComponent) {
           initialSplitStyles,
           tamaguiDefaultProps,
           defaultNativeStyle,
-          defaults,
+          defaults: defaults2,
           defaultPropsIn
         });
       }
@@ -893,6 +944,69 @@ function mergeConfigDefaultProps(name, props, configDefaults, parentNames, conf)
   }
   return props;
 }
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
+function ensureBaseHasDefaults(base, ...pseudos) {
+  for (const pseudo of pseudos) {
+    if (!pseudo)
+      continue;
+    for (const key in pseudo) {
+      const val = pseudo[key];
+      if (key === "transform") {
+        if (typeof val === "string") {
+          continue;
+        }
+        for (const t of val) {
+          const tkey = Object.keys(t)[0];
+          const defaultVal = defaults[tkey];
+          const tDefaultVal = { [tkey]: defaultVal };
+          if (!base.transform) {
+            base.transform = [tDefaultVal];
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal);
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key];
+        }
+      }
+    }
+  }
+}
+function merge(base, next) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next);
+    return;
+  }
+  const { transform, ...rest } = next;
+  Object.assign(base, rest);
+  for (const t of transform) {
+    const key = Object.keys(t)[0];
+    const existing = base.transform.find((x) => key in x);
+    if (existing) {
+      existing[key] = t[key];
+    } else {
+      base.transform.push(t);
+    }
+  }
+}
 export {
   Spacer,
   Unspaced,