@tamagui/core 1.0.1-beta.214 → 1.0.1-beta.215

package/dist/cjs/constants/isDevTools.js

@@ -21,7 +21,15 @@ __export(isDevTools_exports, {
   isDevTools: () => isDevTools
 });
 module.exports = __toCommonJS(isDevTools_exports);
-const isDevTools = process.env.NODE_ENV === "development" ? new Function("try {return this===window;}catch(e){ return false;}")() : false;
+const isDevTools = (() => {
+  if (process.env.NODE_ENV === "development") {
+    try {
+      return new Function("try {return this===window;}catch(e){ return false;}")();
+    } catch {
+    }
+  }
+  return false;
+})();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   isDevTools

package/dist/cjs/constants/isDevTools.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/isDevTools.ts"],
-  "sourcesContent": ["// for verbose logging outside node/cli\n\nexport const isDevTools =\n  process.env.NODE_ENV === 'development'\n    ? new Function('try {return this===window;}catch(e){ return false;}')()\n    : false\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,aACX,QAAQ,IAAI,aAAa,gBACrB,IAAI,SAAS,qDAAqD,EAAE,IACpE;",
+  "sourcesContent": ["// for verbose logging outside node/cli\n\nexport const isDevTools = (() => {\n  if (process.env.NODE_ENV === 'development') {\n    try {\n      return new Function('try {return this===window;}catch(e){ return false;}')()\n    } catch {\n      //\n    }\n  }\n  return false\n})()\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,cAAc,MAAM;AAC/B,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI;AACF,aAAO,IAAI,SAAS,qDAAqD,EAAE;AAAA,IAC7E,QAAE;AAAA,IAEF;AAAA,EACF;AACA,SAAO;AACT,GAAG;",
   "names": []
 }

package/dist/cjs/createComponent.js

@@ -46,6 +46,7 @@ var import_extendStaticConfig = require("./helpers/extendStaticConfig");
 var import_getSplitStyles = require("./helpers/getSplitStyles");
 var import_insertStyleRule = require("./helpers/insertStyleRule");
 var import_mergeProps = require("./helpers/mergeProps");
+var import_mergeTransform = require("./helpers/mergeTransform");
 var import_proxyThemeVariables = require("./helpers/proxyThemeVariables");
 var import_useShallowSetState = require("./helpers/useShallowSetState");
 var import_useElementLayout = require("./hooks/useElementLayout");
@@ -112,11 +113,6 @@ function createComponent(configIn, ParentComponent) {
     const { Component, isText, isZStack } = staticConfig;
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
-    if (debugProp) {
-      console.log(`render ${componentName}`);
-    }
-    const forceUpdate = (0, import_use_force_update.useForceUpdate)();
-    const theme = (0, import_useTheme.useTheme)(props.theme, componentName, props, forceUpdate);
     const hasEnterStyle = !!props.enterStyle;
     const needsMount = Boolean((import_constants.isWeb ? import_constants.isClient : true) && (hasEnterStyle || props.animation));
     const states = (0, import_useServerHooks.useServerState)(
@@ -125,42 +121,47 @@ function createComponent(configIn, ParentComponent) {
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
     const setState = states[1];
     const setStateShallow = (0, import_useShallowSetState.useShallowSetState)(setState, debugProp, componentName);
-    const shouldSetMounted = needsMount && !state.mounted;
+    const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
+    const hasEverAnimated = (0, import_react.useRef)(false);
+    const isAnimated = (() => {
+      const next = !!(useAnimations && props.animation);
+      if (next && !hasEverAnimated.current) {
+        hasEverAnimated.current = true;
+      }
+      return next || hasEverAnimated.current;
+    })();
+    const isReactNative = Boolean(
+      staticConfig.isReactNative || isAnimated && tamaguiConfig.animations.isReactNative
+    );
+    if (process.env.NODE_ENV === "development") {
+      if (props["debug"]) {
+        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
+        const type = isReactNative ? "(rnw)" : "";
+        const dataIs = propsIn["data-is"] || "";
+        const banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
+        console.group(`%c ${banner}`, "background: yellow;");
+        console.log(`state`, state);
+      }
+    }
+    const forceUpdate = (0, import_use_force_update.useForceUpdate)();
+    const theme = (0, import_useTheme.useTheme)(props.theme, componentName, props, forceUpdate);
+    const shouldSetMounted = needsMount && state.unmounted;
     const setMounted = shouldSetMounted ? () => {
       setTimeout(
         () => {
           setStateShallow({
-            mounted: true
+            unmounted: false
           });
         },
         import_constants.isWeb ? 10 : 0
       );
     } : void 0;
-    const shouldAvoidClasses = !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
+    const shouldAvoidClasses = !import_constants.isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
     const shouldForcePseudo = !!propsIn.forceStyle;
     const hasTextAncestor = !!(import_constants.isWeb && isText ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false);
-    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? {
-      ...state,
-      hasTextAncestor,
-      dynamicStylesInline: true
-    } : {
-      ...state,
-      noClassNames: true,
-      dynamicStylesInline: true,
-      hasTextAncestor,
-      resolveVariablesAs: "value"
-    };
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo;
     const languageContext = import_constants.isRSC ? null : (0, import_react.useContext)(import_FontLanguageContext.FontLanguageContext);
-    const isDisabled = props.disabled ?? ((_a = props.accessibilityState) == null ? void 0 : _a.disabled);
-    const useAnimations = (_b = tamaguiConfig.animations) == null ? void 0 : _b.useAnimations;
-    const hasEverAnimated = (0, import_react.useRef)(false);
-    const isAnimated = (() => {
-      const next = !!(useAnimations && props.animation);
-      if (next && !hasEverAnimated.current) {
-        hasEverAnimated.current = true;
-      }
-      return next || hasEverAnimated.current;
-    })();
+    const isDisabled = props.disabled ?? ((_b = props.accessibilityState) == null ? void 0 : _b.disabled);
     const isTaggable = !Component || typeof Component === "string";
     const element = import_constants.isWeb ? isTaggable ? props.tag || defaultTag || Component : Component : Component;
     const BaseTextComponent = BaseText || element || "span";
@@ -168,6 +169,13 @@ function createComponent(configIn, ParentComponent) {
     let elementType = isText ? (isAnimated ? AnimatedText : null) || BaseTextComponent : (isAnimated ? AnimatedView : null) || BaseViewComponent;
     elementType = Component || elementType;
     const isStringElement = typeof elementType === "string";
+    const splitStyleState = {
+      ...state,
+      noClassNames,
+      dynamicStylesInline: noClassNames,
+      hasTextAncestor,
+      resolveVariablesAs: "value"
+    };
     const splitStyles = (0, import_getSplitStyles.useSplitStyles)(
       props,
       staticConfig,
@@ -179,24 +187,17 @@ function createComponent(configIn, ParentComponent) {
       debugProp
     );
     const hostRef = (0, import_useServerHooks.useServerRef)(null);
-    const isReactNative = Boolean(
-      staticConfig.isReactNative || isAnimated && tamaguiConfig.animations.isReactNative
-    );
     const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating;
     if (process.env.NODE_ENV === "development") {
       if (!process.env.TAMAGUI_TARGET) {
         console.error(`No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`);
       }
       if (debugProp) {
-        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
-        const type = isReactNative ? "rnw" : "tamagui";
-        const banner = `${name} ${propsIn["data-is"] || ""} ${type}`;
-        console.group(`%c \u{1F41B} ${banner}`, "background: yellow;");
-        console.groupCollapsed("initial props/state");
-        console.log("propsIn", propsIn, "turned into", props, "order", Object.keys(props));
+        console.groupCollapsed("props");
+        console.log("props in", propsIn, "mapped to", props, "in order", Object.keys(props));
         console.log("splitStyles", splitStyles);
         console.log("className", Object.values(splitStyles.classNames));
-        if (typeof window !== "undefined") {
+        if (import_constants.isClient) {
           console.log("ref", hostRef, "(click to view)");
         }
         console.groupEnd();
@@ -213,7 +214,6 @@ function createComponent(configIn, ParentComponent) {
       classNames,
       mediaKeys
     } = splitStyles;
-    const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...splitStylesStyle } : null;
     const propsWithAnimation = props;
     let animationStyles;
     if (!import_constants.isRSC && isAnimated && useAnimations) {
@@ -225,7 +225,7 @@ function createComponent(configIn, ParentComponent) {
         staticConfig,
         getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
           var _a2, _b2, _c2, _d2;
-          const style = animationFeatureStylesIn;
+          const animationStyle = { ...defaultNativeStyle, ...splitStylesStyle };
           const enterStyle = isEntering ? enterVariant && ((_a2 = staticConfig.variants) == null ? void 0 : _a2[enterVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)(
             "",
             (_b2 = staticConfig.variants) == null ? void 0 : _b2[enterVariant]["true"],
@@ -234,7 +234,7 @@ function createComponent(configIn, ParentComponent) {
             props,
             state,
             tamaguiConfig
-          ) || pseudos.enterStyle : pseudos.enterStyle : null;
+          ) : null : null;
           const exitStyle = isExiting ? exitVariant && ((_c2 = staticConfig.variants) == null ? void 0 : _c2[exitVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)(
             "",
             (_d2 = staticConfig.variants) == null ? void 0 : _d2[exitVariant]["true"],
@@ -243,24 +243,14 @@ function createComponent(configIn, ParentComponent) {
             props,
             state,
             tamaguiConfig
-          ) || pseudos.exitStyle : pseudos.exitStyle : null;
-          ensureBaseHasDefaults(
-            style,
-            pseudos.hoverStyle,
-            pseudos.focusStyle,
-            pseudos.pressStyle
-          );
-          enterStyle && isEntering && merge(style, enterStyle);
-          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
-          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
-          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
-          exitStyle && isExiting && merge(style, exitStyle);
-          if (process.env.NODE_ENV === "development") {
-            if (debugProp === "verbose") {
-              console.log("animation style", style);
-            }
+          ) : pseudos.exitStyle : null;
+          if (isEntering && enterStyle) {
+            merge(animationStyle, enterStyle);
+          }
+          if (isExiting && exitStyle) {
+            merge(animationStyle, exitStyle);
           }
-          return style;
+          return animationStyle;
         }
       });
       if (animations) {
@@ -432,13 +422,6 @@ function createComponent(configIn, ParentComponent) {
       };
     } else {
       styles = [import_constants.isWeb ? null : defaultNativeStyle, animationStyles ?? splitStylesStyle, medias];
-      if (!animationStyles && initialSplitStyles) {
-        const initPseudos = initialSplitStyles.pseudos;
-        !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, "enterStyle");
-        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 = {};
         for (const style of styles) {
@@ -512,9 +495,11 @@ function createComponent(configIn, ParentComponent) {
       viewProps.style = styles;
     }
     const initialPseudos = initialSplitStyles == null ? void 0 : initialSplitStyles.pseudos;
-    const attachPress = !!((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle) || onPress || onPressOut || onPressIn || onClick);
+    const runtimePressStyle = noClassNames && ((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle));
+    const attachPress = !!(runtimePressStyle || onPress || onPressOut || onPressIn || onClick);
     const isHoverable = import_constants.isWeb;
-    const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
+    const runtimeHoverStyle = noClassNames && ((pseudos == null ? void 0 : pseudos.hoverStyle) || initialPseudos.hoverStyle);
+    const attachHover = isHoverable && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     const handlesPressEvents = !import_constants.isWeb && !asChild;
     const shouldAttach = asChild ? false : Boolean(
       attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || import_constants.isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props)
@@ -525,7 +510,7 @@ function createComponent(configIn, ParentComponent) {
         onPressOut == null ? void 0 : onPressOut(e);
         onMouseUp == null ? void 0 : onMouseUp(e);
       } : void 0,
-      ...isHoverable && {
+      ...attachHover && {
         onMouseEnter: attachHover ? (e) => {
           const next = {};
           if (attachHover) {
@@ -620,7 +605,7 @@ function createComponent(configIn, ParentComponent) {
       };
     }
     if (process.env.TAMAGUI_TARGET === "native") {
-      const attachFocus = !!(pseudos && pseudos.focusStyle || initialPseudos && initialPseudos.focusStyle);
+      const attachFocus = !!(pseudos.focusStyle || initialPseudos && initialPseudos.focusStyle);
       if (attachFocus) {
         viewProps.onFocus = (0, import_Slot.mergeEvent)(viewProps.onFocus, () => {
           setStateShallow({ focus: true });
@@ -629,11 +614,8 @@ function createComponent(configIn, ParentComponent) {
           setStateShallow({ focus: false });
         });
       }
-      const pressability = (0, import_Pressability.usePressability)(events);
+      const pressability = (0, import_Pressability.usePressability)(events ? { ...events, hitSlop } : {});
       if (attachPress && events) {
-        if (hitSlop) {
-          viewProps.hitSlop = hitSlop;
-        }
         for (const key in pressability) {
           const og = props[key];
           const val = pressability[key];
@@ -688,12 +670,12 @@ function createComponent(configIn, ParentComponent) {
           press: false,
           pressIn: false,
           focus: false,
-          mounted: false,
+          unmounted: true,
           mediaState: getMediaStateObject((0, import_useMedia.getInitialMediaState)())
         };
         defaultComponentStateMounted = {
           ...defaultComponentState,
-          mounted: true
+          unmounted: false
         };
       }
       if (tamaguiConfig.animations) {
@@ -733,22 +715,21 @@ function createComponent(configIn, ParentComponent) {
       staticConfig,
       initialTheme,
       {
-        mounted: true,
+        unmounted: false,
         hover: false,
         press: false,
         pressIn: false,
         focus: false,
         resolveVariablesAs: "both",
-        noClassNames,
-        keepVariantsAsProps: true
+        noClassNames
       },
       void 0,
       void 0,
       debug
     );
-    const [defaults2, defaultsClassnames] = (0, import_mergeProps.mergeProps)(
+    const [defaults, defaultsClassnames] = (0, import_mergeProps.mergeProps)(
       component.defaultProps,
-      initialSplitStyles.viewProps,
+      { ...initialSplitStyles.pseudos, ...initialSplitStyles.viewProps },
       true
     );
     initialSplitStyles.classNames = {
@@ -764,14 +745,14 @@ function createComponent(configIn, ParentComponent) {
         if (import_helpers.validPseudoKeys[key])
           continue;
         if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
-          defaults2[key] = val;
+          defaults[key] = val;
         } else {
           defaultNativeStyle[key] = val;
         }
       }
     }
-    if (Object.keys(defaults2).length) {
-      tamaguiDefaultProps = defaults2;
+    if (Object.keys(defaults).length) {
+      tamaguiDefaultProps = defaults;
     }
     if (process.env.NODE_ENV === "development" && debug) {
       if (process.env.IS_STATIC !== "is_static") {
@@ -780,7 +761,7 @@ function createComponent(configIn, ParentComponent) {
           initialSplitStyles,
           tamaguiDefaultProps,
           defaultNativeStyle,
-          defaults: defaults2,
+          defaults,
           defaultPropsIn,
           defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
           defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]),
@@ -953,15 +934,6 @@ function isUnspaced(child) {
   var _a, _b;
   return ((_a = child == null ? void 0 : child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) || ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isUnspaced"]);
 }
-function addPseudoToStyles(styles, initialPseudos, pseudos, name, force = false) {
-  const pseudoStyle = pseudos[name];
-  const shouldNestObject = import_constants.isWeb && name !== "enterStyle" && name !== "exitStyle";
-  const defaultPseudoStyle = initialPseudos[name];
-  const style = defaultPseudoStyle ? { ...defaultPseudoStyle, ...pseudoStyle } : pseudoStyle;
-  if (style) {
-    styles.push(shouldNestObject && !force ? { [name]: style } : style);
-  }
-}
 const DefaultProps = /* @__PURE__ */ new Map();
 function mergeConfigDefaultProps(name, props, configDefaults, parentNames, conf) {
   const len = parentNames.length;
@@ -990,66 +962,13 @@ 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];
+  for (const key in next) {
+    const val = next[key];
+    if (key in import_helpers.stylePropsTransform) {
+      (0, import_mergeTransform.mergeTransform)(base, key, val, true);
     } else {
-      base.transform.push(t);
+      base[key] = val;
     }
   }
 }