@tamagui/core 1.0.0-beta.187 → 1.0.0-beta.2

package/dist/cjs/createComponent.js

@@ -66,91 +66,110 @@ var import_constants = require("./constants/constants");
 var import_platform = require("./constants/platform");
 var import_rnw = require("./constants/rnw");
 var import_createVariable = require("./createVariable");
-var import_defaultComponentState = require("./defaultComponentState");
+var import_createShallowUpdate = require("./helpers/createShallowUpdate");
 var import_extendStaticConfig = require("./helpers/extendStaticConfig");
 var import_getSplitStyles = require("./helpers/getSplitStyles");
+var import_insertStyleRule = require("./helpers/insertStyleRule");
+var import_proxyThemeVariables = require("./helpers/proxyThemeVariables");
 var import_wrapThemeManagerContext = require("./helpers/wrapThemeManagerContext");
 var import_useFeatures = require("./hooks/useFeatures");
+var import_useIsTouchDevice = require("./hooks/useIsTouchDevice");
 var import_usePressable = require("./hooks/usePressable");
 var import_useTheme = require("./hooks/useTheme");
 var import_TextAncestorContext = require("./views/TextAncestorContext");
+import_react.default["keep"];
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false,
+  focus: false,
+  mounted: false,
+  animation: null
+};
 const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
   });
+  document.addEventListener("touchend", () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  });
+  document.addEventListener("touchcancel", () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  });
 }
-function createShallowUpdate(setter) {
-  return (next) => {
-    setter((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return __spreadValues(__spreadValues({}, prev), next);
-        }
-      }
-      return prev;
-    });
-  };
-}
-__name(createShallowUpdate, "createShallowUpdate");
-function createComponent(configIn) {
-  let staticConfig;
-  if ("parsed" in configIn) {
-    staticConfig = configIn;
-  } else {
-    staticConfig = (0, import_extendStaticConfig.parseStaticConfig)(configIn);
+function mergeShorthands({ defaultProps }, { shorthands }) {
+  for (const key in defaultProps) {
+    defaultProps[shorthands[key] || key] = defaultProps[key];
   }
-  const { Component, validStyles, isText, isZStack, componentName } = staticConfig;
-  const componentClassName = `is_${componentName}`;
-  const validStyleProps = validStyles || import_helpers.stylePropsView;
+}
+__name(mergeShorthands, "mergeShorthands");
+let initialTheme;
+function createComponent(configIn, ParentComponent) {
+  const staticConfig = (() => {
+    const config = (0, import_extendStaticConfig.extendStaticConfig)(configIn, ParentComponent);
+    if ("parsed" in config) {
+      return config;
+    } else {
+      return (0, import_extendStaticConfig.parseStaticConfig)(config);
+    }
+  })();
+  const componentClassName = `is_${staticConfig.componentName}`;
   let tamaguiConfig;
   let AnimatedText;
   let AnimatedView;
-  let avoidClasses = false;
-  let defaultPseudos = {};
+  let avoidClasses = true;
   let defaultNativeStyle;
-  let defaultNativeStyleSheet = null;
-  let defaultsClassName = null;
-  let initialTheme;
-  let splitStyleResult = null;
+  let defaultNativeStyleSheet;
+  let tamaguiDefaultProps;
+  let initialSplitStyles;
   function addPseudoToStyles(styles, name, pseudos) {
     const pseudoStyle = pseudos[name];
+    const shouldNestObject = import_platform.isWeb && name !== "enterStyle" && name !== "exitStyle";
     if (pseudoStyle) {
-      styles.push(import_platform.isWeb ? { [name]: pseudoStyle } : pseudoStyle);
+      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
     }
-    const defaultPseudoStyle = defaultPseudos[name];
+    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
     if (defaultPseudoStyle) {
-      styles.push(import_platform.isWeb ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
+      styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
     }
   }
   __name(addPseudoToStyles, "addPseudoToStyles");
   const component = (0, import_react.forwardRef)((props, forwardedRef) => {
     var _a, _c, _d, _e;
+    props = tamaguiDefaultProps ? __spreadValues(__spreadValues({}, tamaguiDefaultProps), props) : props;
+    const { Component, componentName, isText, isZStack } = staticConfig;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", " debug prop on:", { props: Object.entries(props) });
+        console.warn(staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props, Object.keys(props));
         if (props["debug"] === "break")
           debugger;
       }
     }
     const forceUpdate = (0, import_use_force_update.useForceUpdate)();
-    const theme = (0, import_useTheme.useTheme)(props.theme, componentName, props, forceUpdate);
-    const [state, set_] = (0, import_react.useState)(import_defaultComponentState.defaultComponentState);
-    const setStateShallow = createShallowUpdate(set_);
-    const shouldAvoidClasses = !!(state.animation && avoidClasses);
-    const splitInfo = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, shouldAvoidClasses ? __spreadProps(__spreadValues({}, state), { noClassNames: true, resolveVariablesAs: "value" }) : state, defaultsClassName);
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitInfo;
+    const theme = (0, import_useTheme.useTheme)(props.theme, staticConfig.componentName, props, forceUpdate);
+    const [state, set_] = (0, import_react.useState)(defaultComponentState);
+    const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(set_);
+    const shouldAvoidClasses = !!(props.animation && avoidClasses);
+    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, shouldAvoidClasses ? __spreadProps(__spreadValues({}, state), { noClassNames: true, resolveVariablesAs: "value" }) : state, shouldAvoidClasses ? null : initialSplitStyles.classNames);
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
-    const styleWithPseudos = props.animation ? merge(__spreadValues(__spreadValues({}, defaultNativeStyle), style), state.hover && pseudos.hoverStyle, state.press && pseudos.pressStyle, state.focus && pseudos.focusStyle, ...Object.values(medias)) : null;
+    const hasEnterStyle = !!props.enterStyle;
     const features = (0, import_useFeatures.useFeatures)(props, {
       forceUpdate,
       setStateShallow,
       useAnimations,
       state,
-      style: styleWithPseudos,
-      pseudos
+      style: props.animation ? __spreadValues(__spreadValues({}, defaultNativeStyle), style) : null,
+      pseudos,
+      staticConfig,
+      theme,
+      onDidAnimate: props.onDidAnimate
     });
     const _b = viewPropsIn, {
       tag,
@@ -189,6 +208,7 @@ function createComponent(configIn) {
       accessibilityRole,
       collapsable,
       focusable,
+      onClick,
       theme: _themeProp,
       defaultVariants,
       onLayout
@@ -229,6 +249,7 @@ function createComponent(configIn) {
       "accessibilityRole",
       "collapsable",
       "focusable",
+      "onClick",
       "theme",
       "defaultVariants",
       "onLayout"
@@ -243,15 +264,14 @@ function createComponent(configIn) {
     }
     const hasTextAncestor = import_platform.isWeb ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false;
     const hostRef = (0, import_react.useRef)(null);
-    const hasEnterStyle = !!props.enterStyle;
     const internal = (0, import_react.useRef)();
     if (!internal.current) {
       internal.current = {
         isMounted: true
       };
     }
-    (0, import_react.useEffect)(() => {
-      if (hasEnterStyle) {
+    (0, import_platform.useIsomorphicLayoutEffect)(() => {
+      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
         setStateShallow({
           mounted: true
         });
@@ -261,7 +281,7 @@ function createComponent(configIn) {
         mouseUps.delete(unPress);
         internal.current.isMounted = false;
       };
-    }, []);
+    }, [hasEnterStyle, props.animation]);
     if (nativeID) {
       viewProps.id = nativeID;
     }
@@ -315,6 +335,7 @@ function createComponent(configIn) {
         medias
       ];
       if (!animationStyles) {
+        !state.mounted && addPseudoToStyles(styles, "enterStyle", pseudos);
         state.hover && addPseudoToStyles(styles, "hoverStyle", pseudos);
         state.focus && addPseudoToStyles(styles, "focusStyle", pseudos);
         state.press && addPseudoToStyles(styles, "pressStyle", pseudos);
@@ -333,10 +354,11 @@ function createComponent(configIn) {
         const className = classList.join(" ");
         if (process.env.NODE_ENV === "development") {
           if (props["debug"]) {
-            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className });
+            console.log("  \xBB className", { isStringElement, pseudos, state, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, (0, import_insertStyleRule.getAllSelectors)()[v]])) });
           }
         }
         viewProps.className = className;
+        viewProps.style = animationStyles;
       } else {
         viewProps.style = styles;
       }
@@ -373,8 +395,10 @@ function createComponent(configIn) {
         viewProps.ref = forwardedRef;
       }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || onPress || onPressOut || onPressIn);
-    const isHoverable = import_platform.isWeb && !import_platform.isTouchDevice;
+    const initialPseudos = initialSplitStyles.pseudos;
+    const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
+    const isTouch = (0, import_useIsTouchDevice.useIsTouchDevice)();
+    const isHoverable = import_platform.isWeb && !isTouch;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     const pressEventKey = isStringElement ? "onClick" : "onPress";
     const shouldAttach = attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || import_platform.isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
@@ -430,8 +454,12 @@ function createComponent(configIn) {
         });
         onPressIn == null ? void 0 : onPressIn(e);
         onMouseDown == null ? void 0 : onMouseDown(e);
+        if (import_platform.isWeb) {
+          mouseUps.add(unPress);
+        }
       } : null,
       [pressEventKey]: attachPress ? (e) => {
+        onClick == null ? void 0 : onClick(e);
         onPress == null ? void 0 : onPress(e);
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
@@ -454,22 +482,6 @@ function createComponent(configIn) {
     }) : {
       disabled: true
     });
-    if (events) {
-      if (!isStringElement) {
-        Object.assign(viewProps, pressProps);
-      } else {
-        Object.assign(viewProps, events);
-      }
-      if (import_platform.isWeb && isHoverable) {
-        childEls = /* @__PURE__ */ import_react.default.createElement("span", {
-          style: {
-            display: "contents"
-          },
-          onMouseEnter: events.onMouseEnter,
-          onMouseLeave: events.onMouseLeave
-        }, children);
-      }
-    }
     let content;
     if (import_platform.isWeb) {
       if (staticConfig.isReactNativeWeb) {
@@ -485,11 +497,28 @@ function createComponent(configIn) {
         }
       }
     }
+    if (events) {
+      if (!isStringElement) {
+        Object.assign(viewProps, pressProps);
+      } else {
+        Object.assign(viewProps, events);
+      }
+    }
     content = (0, import_react.createElement)(ViewComponent, viewProps, childEls);
+    if (import_platform.isWeb && events && attachHover) {
+      content = /* @__PURE__ */ import_react.default.createElement("span", {
+        className: "tui_Hoverable",
+        style: {
+          display: "contents"
+        },
+        onMouseEnter: events.onMouseEnter,
+        onMouseLeave: events.onMouseLeave
+      }, content);
+    }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         viewProps["debug"] = true;
-        console.log("  \xBB ", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), animationStyles, isStringElement, classNamesIn: (_d = props.className) == null ? void 0 : _d.split(" "), classNamesOut: (_e = viewProps.className) == null ? void 0 : _e.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, state, styles, pseudos, content, childEls, shouldAvoidClasses, animation: props.animation, style, defaultNativeStyle, splitStyleResult }, typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null));
+        console.log("  \xBB ", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), state, splitStyles, animationStyles, isStringElement, classNamesIn: (_d = props.className) == null ? void 0 : _d.split(" "), classNamesOut: (_e = viewProps.className) == null ? void 0 : _e.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles }, typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null));
       }
     }
     if (features.length) {
@@ -497,23 +526,28 @@ function createComponent(configIn) {
     }
     return content;
   });
+  component.displayName = staticConfig.componentName;
   (0, import_conf.onConfiguredOnce)((conf) => {
     var _a, _b, _c, _d;
-    const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
+    if (process.env.IS_STATIC === "is_static") {
+      return;
+    }
     tamaguiConfig = conf;
-    avoidClasses = !!((_b = tamaguiConfig.animations) == null ? void 0 : _b.avoidClasses);
-    AnimatedText = (_c = tamaguiConfig.animations) == null ? void 0 : _c.Text;
-    AnimatedView = (_d = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _d.View;
-    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    splitStyleResult = (0, import_getSplitStyles.getSplitStyles)(staticConfig.defaultProps, staticConfig, initialTheme, {
+    mergeShorthands(staticConfig, tamaguiConfig);
+    avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
+    AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
+    AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
+    initialTheme = initialTheme || (0, import_proxyThemeVariables.proxyThemeVariables)(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
+    initialSplitStyles = (0, import_getSplitStyles.insertSplitStyles)(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
-      resolveVariablesAs: "variable"
+      hover: false,
+      press: false,
+      pressIn: false,
+      focus: false,
+      resolveVariablesAs: "both",
+      keepVariantsAsProps: true
     });
-    const { classNames, pseudos, style, viewProps } = splitStyleResult;
-    if (import_platform.isWeb) {
-      defaultsClassName = classNames;
-    }
-    defaultPseudos = pseudos;
+    const { style, viewProps } = initialSplitStyles;
     defaultNativeStyle = {};
     for (const key in style) {
       const v = style[key];
@@ -522,10 +556,17 @@ function createComponent(configIn) {
     defaultNativeStyleSheet = import_react_native.StyleSheet.create({
       base: defaultNativeStyle
     });
-    component.displayName = staticConfig.componentName;
-    component.defaultProps = __spreadValues(__spreadValues({}, viewProps), component.defaultProps);
-    if (process.env.NODE_ENV === "development" && shouldDebug && process.env.IS_STATIC !== "is_static") {
-      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, __spreadValues({ staticConfig }, splitStyleResult));
+    const defaults = __spreadValues(__spreadValues({}, viewProps), component.defaultProps);
+    if (Object.keys(defaults).length) {
+      tamaguiDefaultProps = defaults;
+    }
+    if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
+      if (process.env.IS_STATIC !== "is_static") {
+        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+          staticConfig,
+          initialSplitStyles
+        });
+      }
     }
   });
   let res = component;
@@ -533,20 +574,26 @@ function createComponent(configIn) {
     res = (0, import_react.memo)(res);
   }
   res["staticConfig"] = __spreadValues({
-    validStyles: validStyleProps
+    validStyles: staticConfig.validStyles || import_helpers.stylePropsView
   }, staticConfig);
-  res["extractable"] = (Component2, conf) => {
-    Component2["staticConfig"] = (0, import_extendStaticConfig.extendStaticConfig)(res, __spreadProps(__spreadValues({}, conf), {
+  if (process.env.NODE_ENV === "development") {
+    res["whyDidYouRender"] = true;
+  }
+  res["extractable"] = (Component, conf) => {
+    Component["staticConfig"] = (0, import_extendStaticConfig.extendStaticConfig)(__spreadProps(__spreadValues({
+      Component
+    }, conf), {
       neverFlatten: true,
-      defaultProps: __spreadValues(__spreadValues({}, Component2.defaultProps), conf == null ? void 0 : conf.defaultProps)
-    }));
-    return Component2;
+      defaultProps: __spreadValues(__spreadValues({}, Component.defaultProps), conf == null ? void 0 : conf.defaultProps)
+    }), res);
+    return Component;
   };
   return res;
 }
 __name(createComponent, "createComponent");
 const Spacer = createComponent({
   memo: true,
+  componentName: "Spacer",
   defaultProps: __spreadProps(__spreadValues({}, import_constants.stackDefaultStyles), {
     size: true
   }),
@@ -623,47 +670,26 @@ function spacedChildren({
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-const merge = /* @__PURE__ */ __name((...styles) => {
-  if (!styles[0])
-    return;
-  const res = {};
-  const len = styles.length;
-  for (let i = len - 1; i >= 0; i--) {
-    const cur = styles[i];
-    if (!cur)
-      continue;
-    for (const key in cur) {
-      const val = cur[key];
-      if (key !== "transform") {
-        if (!(key in res)) {
-          res[key] = val;
-        }
-        continue;
-      }
-      if (!res.transform) {
-        res.transform = val;
-        continue;
-      }
-      for (const t of val) {
-        const tkey = Object.keys(t)[0];
-        if (res.transform.find((existing) => tkey in existing)) {
-          continue;
-        }
-        res.transform.push(t);
-      }
+function AbsoluteFill(props) {
+  return import_platform.isWeb ? /* @__PURE__ */ import_react.default.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
     }
-  }
-  return res;
-}, "merge");
-const AbsoluteFill = /* @__PURE__ */ __name((props) => import_platform.isWeb ? /* @__PURE__ */ import_react.default.createElement("div", {
-  style: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
-}, props.children) : /* @__PURE__ */ import_react.default.createElement(import_react_native.View, {
-  style: import_react_native.StyleSheet.absoluteFill
-}, props.child), "AbsoluteFill");
+  }, props.children) : /* @__PURE__ */ import_react.default.createElement(import_react_native.View, {
+    style: import_react_native.StyleSheet.absoluteFill
+  }, props.child);
+}
+__name(AbsoluteFill, "AbsoluteFill");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AbsoluteFill,
+  Spacer,
+  createComponent,
+  mouseUps,
+  spacedChildren
+});
 //# sourceMappingURL=createComponent.js.map