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

package/dist/esm/createComponent.js

@@ -3,6 +3,7 @@ import { useComposedRefs } from "@tamagui/compose-refs";
 import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import {
   composeEventHandlers,
+  stylePropsTransform,
   stylePropsView,
   validPseudoKeys,
   validStyles
@@ -32,7 +33,9 @@ import {
 } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
 import { mergeProps } from "./helpers/mergeProps";
+import { mergeTransform } from "./helpers/mergeTransform";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
+import { pseudoDescriptors } from "./helpers/pseudoDescriptors";
 import { useShallowSetState } from "./helpers/useShallowSetState";
 import { getRect, measureLayout, useElementLayout } from "./hooks/useElementLayout";
 import { addMediaQueryListener, getInitialMediaState } from "./hooks/useMedia";
@@ -98,11 +101,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 = useForceUpdate();
-    const theme = useTheme(props.theme, componentName, props, forceUpdate);
     const hasEnterStyle = !!props.enterStyle;
     const needsMount = Boolean((isWeb ? isClient : true) && (hasEnterStyle || props.animation));
     const states = useServerState(
@@ -111,42 +109,47 @@ function createComponent(configIn, ParentComponent) {
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
     const setState = states[1];
     const setStateShallow = useShallowSetState(setState, debugProp, componentName);
-    const shouldSetMounted = needsMount && !state.mounted;
+    const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
+    const hasEverAnimated = 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 = useForceUpdate();
+    const theme = useTheme(props.theme, componentName, props, forceUpdate);
+    const shouldSetMounted = needsMount && state.unmounted;
     const setMounted = shouldSetMounted ? () => {
       setTimeout(
         () => {
           setStateShallow({
-            mounted: true
+            unmounted: false
           });
         },
         isWeb ? 10 : 0
       );
     } : void 0;
-    const shouldAvoidClasses = !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
+    const shouldAvoidClasses = !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
     const shouldForcePseudo = !!propsIn.forceStyle;
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false);
-    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? {
-      ...state,
-      hasTextAncestor,
-      dynamicStylesInline: true
-    } : {
-      ...state,
-      noClassNames: true,
-      dynamicStylesInline: true,
-      hasTextAncestor,
-      resolveVariablesAs: "value"
-    };
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo;
     const languageContext = isRSC ? null : useContext(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 = 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 = isWeb ? isTaggable ? props.tag || defaultTag || Component : Component : Component;
     const BaseTextComponent = BaseText || element || "span";
@@ -154,6 +157,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 = useSplitStyles(
       props,
       staticConfig,
@@ -165,24 +175,17 @@ function createComponent(configIn, ParentComponent) {
       debugProp
     );
     const hostRef = 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 (isClient) {
           console.log("ref", hostRef, "(click to view)");
         }
         console.groupEnd();
@@ -199,7 +202,6 @@ function createComponent(configIn, ParentComponent) {
       classNames,
       mediaKeys
     } = splitStyles;
-    const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...splitStylesStyle } : null;
     const propsWithAnimation = props;
     let animationStyles;
     if (!isRSC && isAnimated && useAnimations) {
@@ -211,7 +213,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"]) ? getSubStyle(
             "",
             (_b2 = staticConfig.variants) == null ? void 0 : _b2[enterVariant]["true"],
@@ -220,7 +222,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"]) ? getSubStyle(
             "",
             (_d2 = staticConfig.variants) == null ? void 0 : _d2[exitVariant]["true"],
@@ -229,24 +231,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) {
@@ -418,13 +410,6 @@ function createComponent(configIn, ParentComponent) {
       };
     } else {
       styles = [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) {
@@ -498,9 +483,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 = 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 = !isWeb && !asChild;
     const shouldAttach = asChild ? false : Boolean(
       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)
@@ -511,7 +498,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) {
@@ -606,7 +593,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 = mergeEvent(viewProps.onFocus, () => {
           setStateShallow({ focus: true });
@@ -615,11 +602,8 @@ function createComponent(configIn, ParentComponent) {
           setStateShallow({ focus: false });
         });
       }
-      const pressability = usePressability(events);
+      const 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];
@@ -674,12 +658,12 @@ function createComponent(configIn, ParentComponent) {
           press: false,
           pressIn: false,
           focus: false,
-          mounted: false,
+          unmounted: true,
           mediaState: getMediaStateObject(getInitialMediaState())
         };
         defaultComponentStateMounted = {
           ...defaultComponentState,
-          mounted: true
+          unmounted: false
         };
       }
       if (tamaguiConfig.animations) {
@@ -719,22 +703,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] = mergeProps(
+    const [defaults, defaultsClassnames] = mergeProps(
       component.defaultProps,
-      initialSplitStyles.viewProps,
+      isWeb ? { ...initialSplitStyles.pseudos, ...initialSplitStyles.viewProps } : initialSplitStyles.viewProps,
       true
     );
     initialSplitStyles.classNames = {
@@ -750,14 +733,22 @@ function createComponent(configIn, ParentComponent) {
         if (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 (!isWeb) {
+        Object.keys(pseudoDescriptors).forEach((k) => {
+          if (ourProps[k]) {
+            initialSplitStyles.pseudos[k] = null;
+            tamaguiDefaultProps[k] = ourProps[k];
+          }
+        });
+      }
     }
     if (process.env.NODE_ENV === "development" && debug) {
       if (process.env.IS_STATIC !== "is_static") {
@@ -766,7 +757,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]]),
@@ -880,12 +871,10 @@ function spacedChildren({
         }, index)
       );
     }
-    if (isUnspaced(child) && index === 0) {
+    if (isUnspaced(child) && index === 0)
       continue;
-    }
-    if (isZStack) {
+    if (isZStack)
       continue;
-    }
     const next = childrenList[index + 1];
     if (next && !isUnspaced(next)) {
       if (separator) {
@@ -939,15 +928,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 = 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;
@@ -976,66 +956,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 stylePropsTransform) {
+      mergeTransform(base, key, val, true);
     } else {
-      base.transform.push(t);
+      base[key] = val;
     }
   }
 }