@tamagui/core 1.0.1-beta.86 → 1.0.1-beta.89

package/dist/esm/createComponent.js

@@ -49,6 +49,7 @@ import { getConfig, onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
 import { isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
+import { assignNativePropsToWeb } from "./helpers/assignNativePropsToWeb";
 import { getReturnVariablesAs } from "./helpers/createPropMapper";
 import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
@@ -117,14 +118,14 @@ function createComponent(configIn, ParentComponent) {
     var _a, _d, _e, _f;
     let props;
     if (tamaguiDefaultProps && !propsIn.asChild) {
-      props = mergeProps(tamaguiDefaultProps, propsIn);
+      props = mergeProps(tamaguiDefaultProps, propsIn)[0];
     } else {
       props = propsIn;
     }
     const { Component, isText, isZStack } = staticConfig;
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
-    if (true) {
+    if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         console.log("\u26A0\uFE0F", componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
         console.log("props in:", {
@@ -132,8 +133,9 @@ function createComponent(configIn, ParentComponent) {
           props,
           ordered: Object.keys(props)
         });
-        if (props["debug"] === "break")
+        if (props["debug"] === "break") {
           debugger;
+        }
       }
     }
     const forceUpdate = useForceUpdate();
@@ -421,9 +423,6 @@ function createComponent(configIn, ParentComponent) {
       }
       const _focusable = focusable != void 0 ? focusable : accessible;
       const role = viewProps.role;
-      if (props["debug"]) {
-        console.log("_focusable", focusable);
-      }
       if (_focusable === false) {
         viewProps.tabIndex = "-1";
       }
@@ -445,7 +444,7 @@ function createComponent(configIn, ParentComponent) {
         viewProps.ref = forwardedRef;
       }
     }
-    if (props["debug"]) {
+    if (process.env.NODE_ENV === "development" && props["debug"]) {
       console.log("viewProps", elementType, viewProps.role, viewProps.tabIndex);
     }
     if (!isText && isWeb) {
@@ -728,9 +727,11 @@ function createComponent(configIn, ParentComponent) {
     }
     return content;
   });
-  component.displayName = staticConfig.componentName;
+  if (staticConfig.componentName) {
+    component.displayName = staticConfig.componentName;
+  }
   onConfiguredOnce((conf) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (process.env.IS_STATIC === "is_static") {
       return;
     }
@@ -741,38 +742,17 @@ function createComponent(configIn, ParentComponent) {
     AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
     initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
     const config = getConfig();
-    let defaultPropsIn = staticConfig.defaultProps;
+    let defaultPropsIn = staticConfig.defaultProps || {};
     const parentNames = [...staticConfig.parentNames || [], staticConfig.componentName];
-    if (config.defaultProps && parentNames) {
-      const len = parentNames.length;
-      let prev;
-      for (let i = 0; i < len; i++) {
-        const n = parentNames[i];
-        if (!n)
-          continue;
-        if (DefaultProps.has(n)) {
-          prev = DefaultProps.get(n);
-          continue;
-        }
-        const props = config.defaultProps[n];
-        if (!props) {
-          if (prev) {
-            DefaultProps.set(n, prev);
-          }
-          continue;
-        }
-        prev = mergeProps(prev || {}, props);
-        DefaultProps.set(n, prev);
-      }
-      const ourDefaultsMerged = DefaultProps.get(staticConfig.componentName);
-      if (ourDefaultsMerged) {
-        defaultPropsIn = mergeProps(defaultPropsIn, ourDefaultsMerged);
-      }
+    if (config.defaultProps && parentNames && staticConfig.componentName) {
+      defaultPropsIn = mergeConfigDefaultProps(staticConfig.componentName, defaultPropsIn, config.defaultProps, parentNames);
     }
-    if (process.env.NODE_ENV === "development" && defaultPropsIn["debug"] === "break") {
+    const debug = process.env.NODE_ENV === "development" ? defaultPropsIn["debug"] : false;
+    if (process.env.NODE_ENV === "development" && debug === "break") {
       debugger;
     }
-    initialSplitStyles = insertSplitStyles(defaultPropsIn, staticConfig, initialTheme, {
+    const [parentProps, parentClassNames] = mergeProps(defaultPropsIn, {}, true);
+    initialSplitStyles = insertSplitStyles(parentProps, staticConfig, initialTheme, {
       mounted: true,
       hover: false,
       press: false,
@@ -780,14 +760,18 @@ function createComponent(configIn, ParentComponent) {
       focus: false,
       resolveVariablesAs: "both",
       keepVariantsAsProps: true
-    }, void 0, staticConfig.defaultProps["debug"]);
-    const defaults = mergeProps(component.defaultProps, initialSplitStyles.viewProps);
+    }, void 0, debug);
+    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps, initialSplitStyles.viewProps, true);
+    if (debug) {
+      console.warn(defaults, component.defaultProps, initialSplitStyles);
+    }
+    initialSplitStyles.classNames = __spreadValues(__spreadValues(__spreadValues({}, parentClassNames), defaultsClassnames), initialSplitStyles.classNames);
     defaultNativeStyle = {};
     const validStyles2 = staticConfig.validStyles || stylePropsView;
     if (!isWeb) {
       for (const key in staticConfig.defaultProps) {
         const val = staticConfig.defaultProps[key];
-        if (typeof val === "string" && val[0] === "$" || !validStyles2[key] || val[0] === "_") {
+        if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
           defaults[key] = val;
         } else {
           defaultNativeStyle[key] = val;
@@ -800,14 +784,15 @@ function createComponent(configIn, ParentComponent) {
     if (Object.keys(defaults).length) {
       tamaguiDefaultProps = defaults;
     }
-    if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
+    if (process.env.NODE_ENV === "development" && debug) {
       if (process.env.IS_STATIC !== "is_static") {
         console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
           staticConfig,
           initialSplitStyles,
           tamaguiDefaultProps,
           defaultNativeStyle,
-          defaults
+          defaults,
+          defaultPropsIn
         });
       }
     }
@@ -831,7 +816,6 @@ function createComponent(configIn, ParentComponent) {
   };
   return res;
 }
-const DefaultProps = /* @__PURE__ */ new Map();
 const Unspaced = (props) => {
   return props.children;
 };
@@ -978,165 +962,6 @@ const accessibilityRoleToWebRole = {
   summary: "region",
   text: null
 };
-function assignNativePropsToWeb(elementType, viewProps, nativeProps) {
-  if (!viewProps.role && nativeProps.accessibilityRole) {
-    if (nativeProps.accessibilityRole === "none") {
-      viewProps.role = "presentation";
-    } else {
-      const webRole = accessibilityRoleToWebRole[nativeProps.accessibilityRole];
-      if (webRole != null) {
-        viewProps.role = webRole || nativeProps.accessibilityRole;
-      }
-    }
-  }
-  if (nativeProps.accessibilityActiveDescendant != null) {
-    viewProps["aria-activedescendant"] = nativeProps.accessibilityActiveDescendant;
-  }
-  if (nativeProps.accessibilityAtomic != null) {
-    viewProps["aria-atomic"] = nativeProps.accessibilityAtomic;
-  }
-  if (nativeProps.accessibilityAutoComplete != null) {
-    viewProps["aria-autocomplete"] = nativeProps.accessibilityAutoComplete;
-  }
-  if (nativeProps.accessibilityBusy != null) {
-    viewProps["aria-busy"] = nativeProps.accessibilityBusy;
-  }
-  if (nativeProps.accessibilityChecked != null) {
-    viewProps["aria-checked"] = nativeProps.accessibilityChecked;
-  }
-  if (nativeProps.accessibilityColumnCount != null) {
-    viewProps["aria-colcount"] = nativeProps.accessibilityColumnCount;
-  }
-  if (nativeProps.accessibilityColumnIndex != null) {
-    viewProps["aria-colindex"] = nativeProps.accessibilityColumnIndex;
-  }
-  if (nativeProps.accessibilityColumnSpan != null) {
-    viewProps["aria-colspan"] = nativeProps.accessibilityColumnSpan;
-  }
-  if (nativeProps.accessibilityControls != null) {
-    viewProps["aria-controls"] = processIDRefList(nativeProps.accessibilityControls);
-  }
-  if (nativeProps.accessibilityCurrent != null) {
-    viewProps["aria-current"] = nativeProps.accessibilityCurrent;
-  }
-  if (nativeProps.accessibilityDescribedBy != null) {
-    viewProps["aria-describedby"] = processIDRefList(nativeProps.accessibilityDescribedBy);
-  }
-  if (nativeProps.accessibilityDetails != null) {
-    viewProps["aria-details"] = nativeProps.accessibilityDetails;
-  }
-  if (nativeProps.disabled === true) {
-    viewProps["aria-disabled"] = true;
-    if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
-      viewProps.disabled = true;
-    }
-  }
-  if (nativeProps.accessibilityErrorMessage != null) {
-    viewProps["aria-errormessage"] = nativeProps.accessibilityErrorMessage;
-  }
-  if (nativeProps.accessibilityExpanded != null) {
-    viewProps["aria-expanded"] = nativeProps.accessibilityExpanded;
-  }
-  if (nativeProps.accessibilityFlowTo != null) {
-    viewProps["aria-flowto"] = processIDRefList(nativeProps.accessibilityFlowTo);
-  }
-  if (nativeProps.accessibilityHasPopup != null) {
-    viewProps["aria-haspopup"] = nativeProps.accessibilityHasPopup;
-  }
-  if (nativeProps.accessibilityHidden === true) {
-    viewProps["aria-hidden"] = nativeProps.accessibilityHidden;
-  }
-  if (nativeProps.accessibilityInvalid != null) {
-    viewProps["aria-invalid"] = nativeProps.accessibilityInvalid;
-  }
-  if (nativeProps.accessibilityKeyShortcuts != null && Array.isArray(nativeProps.accessibilityKeyShortcuts)) {
-    viewProps["aria-keyshortcuts"] = nativeProps.accessibilityKeyShortcuts.join(" ");
-  }
-  if (nativeProps.accessibilityLabel != null) {
-    viewProps["aria-label"] = nativeProps.accessibilityLabel;
-  }
-  if (nativeProps.accessibilityLabelledBy != null) {
-    viewProps["aria-labelledby"] = processIDRefList(nativeProps.accessibilityLabelledBy);
-  }
-  if (nativeProps.accessibilityLevel != null) {
-    viewProps["aria-level"] = nativeProps.accessibilityLevel;
-  }
-  if (nativeProps.accessibilityLiveRegion != null) {
-    viewProps["aria-live"] = nativeProps.accessibilityLiveRegion === "none" ? "off" : nativeProps.accessibilityLiveRegion;
-  }
-  if (nativeProps.accessibilityModal != null) {
-    viewProps["aria-modal"] = nativeProps.accessibilityModal;
-  }
-  if (nativeProps.accessibilityMultiline != null) {
-    viewProps["aria-multiline"] = nativeProps.accessibilityMultiline;
-  }
-  if (nativeProps.accessibilityMultiSelectable != null) {
-    viewProps["aria-multiselectable"] = nativeProps.accessibilityMultiSelectable;
-  }
-  if (nativeProps.accessibilityOrientation != null) {
-    viewProps["aria-orientation"] = nativeProps.accessibilityOrientation;
-  }
-  if (nativeProps.accessibilityOwns != null) {
-    viewProps["aria-owns"] = processIDRefList(nativeProps.accessibilityOwns);
-  }
-  if (nativeProps.accessibilityPlaceholder != null) {
-    viewProps["aria-placeholder"] = nativeProps.accessibilityPlaceholder;
-  }
-  if (nativeProps.accessibilityPosInSet != null) {
-    viewProps["aria-posinset"] = nativeProps.accessibilityPosInSet;
-  }
-  if (nativeProps.accessibilityPressed != null) {
-    viewProps["aria-pressed"] = nativeProps.accessibilityPressed;
-  }
-  if (nativeProps.accessibilityReadOnly != null) {
-    viewProps["aria-readonly"] = nativeProps.accessibilityReadOnly;
-    if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-      viewProps.readOnly = true;
-    }
-  }
-  if (nativeProps.accessibilityRequired != null) {
-    viewProps["aria-required"] = nativeProps.accessibilityRequired;
-    if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-      viewProps.required = true;
-    }
-  }
-  if (nativeProps.accessibilityRoleDescription != null) {
-    viewProps["aria-roledescription"] = nativeProps.accessibilityRoleDescription;
-  }
-  if (nativeProps.accessibilityRowCount != null) {
-    viewProps["aria-rowcount"] = nativeProps.accessibilityRowCount;
-  }
-  if (nativeProps.accessibilityRowIndex != null) {
-    viewProps["aria-rowindex"] = nativeProps.accessibilityRowIndex;
-  }
-  if (nativeProps.accessibilityRowSpan != null) {
-    viewProps["aria-rowspan"] = nativeProps.accessibilityRowSpan;
-  }
-  if (nativeProps.accessibilitySelected != null) {
-    viewProps["aria-selected"] = nativeProps.accessibilitySelected;
-  }
-  if (nativeProps.accessibilitySetSize != null) {
-    viewProps["aria-setsize"] = nativeProps.accessibilitySetSize;
-  }
-  if (nativeProps.accessibilitySort != null) {
-    viewProps["aria-sort"] = nativeProps.accessibilitySort;
-  }
-  if (nativeProps.accessibilityValueMax != null) {
-    viewProps["aria-valuemax"] = nativeProps.accessibilityValueMax;
-  }
-  if (nativeProps.accessibilityValueMin != null) {
-    viewProps["aria-valuemin"] = nativeProps.accessibilityValueMin;
-  }
-  if (nativeProps.accessibilityValueNow != null) {
-    viewProps["aria-valuenow"] = nativeProps.accessibilityValueNow;
-  }
-  if (nativeProps.accessibilityValueText != null) {
-    viewProps["aria-valuetext"] = nativeProps.accessibilityValueText;
-  }
-  if (nativeProps.nativeID) {
-    viewProps.id = nativeProps.nativeID;
-  }
-}
 function addPseudoToStyles(styles, initialPseudos, pseudos, name, force = false) {
   const pseudoStyle = pseudos[name];
   const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
@@ -1146,13 +971,43 @@ function addPseudoToStyles(styles, initialPseudos, pseudos, name, force = false)
     styles.push(shouldNestObject && !force ? { [name]: style } : style);
   }
 }
+const DefaultProps = /* @__PURE__ */ new Map();
+function mergeConfigDefaultProps(name, props, configDefaults, parentNames) {
+  const len = parentNames.length;
+  let prev;
+  for (let i = 0; i < len; i++) {
+    const n = parentNames[i];
+    if (!n)
+      continue;
+    if (DefaultProps.has(n)) {
+      prev = DefaultProps.get(n);
+      continue;
+    }
+    const props2 = configDefaults[n];
+    if (!props2) {
+      if (prev) {
+        DefaultProps.set(n, prev);
+      }
+      continue;
+    }
+    prev = mergeProps(prev || {}, props2)[0];
+    console.log("set prev", prev);
+    DefaultProps.set(n, prev);
+  }
+  const ourDefaultsMerged = DefaultProps.get(name);
+  if (ourDefaultsMerged) {
+    return mergeProps(props, ourDefaultsMerged)[0];
+  }
+  return props;
+}
 export {
   AbsoluteFill,
   Spacer,
   Unspaced,
-  assignNativePropsToWeb,
+  accessibilityRoleToWebRole,
   createComponent,
   mouseUps,
+  processIDRefList,
   spacedChildren
 };
 //# sourceMappingURL=createComponent.js.map