@tamagui/core 1.0.1-beta.46 → 1.0.1-beta.49

package/dist/esm/createComponent.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { stylePropsView } from "@tamagui/helpers";
+import { stylePropsView, validStyles } from "@tamagui/helpers";
 import { useForceUpdate } from "@tamagui/use-force-update";
 import React, {
   Children,
@@ -244,164 +244,7 @@ function createComponent(configIn, ParentComponent) {
         ...webProps
       } = nonTamaguiProps;
       viewProps = webProps;
-      if (!viewProps.role && accessibilityRole) {
-        if (accessibilityRole === "none") {
-          viewProps.role = "presentation";
-        } else {
-          const webRole = accessibilityRoleToWebRole[accessibilityRole];
-          if (webRole != null) {
-            viewProps.role = webRole || accessibilityRole;
-          }
-        }
-      }
-      const role = viewProps.role;
-      if (accessibilityActiveDescendant != null) {
-        viewProps["aria-activedescendant"] = accessibilityActiveDescendant;
-      }
-      if (accessibilityAtomic != null) {
-        viewProps["aria-atomic"] = accessibilityAtomic;
-      }
-      if (accessibilityAutoComplete != null) {
-        viewProps["aria-autocomplete"] = accessibilityAutoComplete;
-      }
-      if (accessibilityBusy != null) {
-        viewProps["aria-busy"] = accessibilityBusy;
-      }
-      if (accessibilityChecked != null) {
-        viewProps["aria-checked"] = accessibilityChecked;
-      }
-      if (accessibilityColumnCount != null) {
-        viewProps["aria-colcount"] = accessibilityColumnCount;
-      }
-      if (accessibilityColumnIndex != null) {
-        viewProps["aria-colindex"] = accessibilityColumnIndex;
-      }
-      if (accessibilityColumnSpan != null) {
-        viewProps["aria-colspan"] = accessibilityColumnSpan;
-      }
-      if (accessibilityControls != null) {
-        viewProps["aria-controls"] = processIDRefList(accessibilityControls);
-      }
-      if (accessibilityCurrent != null) {
-        viewProps["aria-current"] = accessibilityCurrent;
-      }
-      if (accessibilityDescribedBy != null) {
-        viewProps["aria-describedby"] = processIDRefList(accessibilityDescribedBy);
-      }
-      if (accessibilityDetails != null) {
-        viewProps["aria-details"] = accessibilityDetails;
-      }
-      if (disabled === true) {
-        viewProps["aria-disabled"] = true;
-        if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.disabled = true;
-        }
-      }
-      if (accessibilityErrorMessage != null) {
-        viewProps["aria-errormessage"] = accessibilityErrorMessage;
-      }
-      if (accessibilityExpanded != null) {
-        viewProps["aria-expanded"] = accessibilityExpanded;
-      }
-      if (accessibilityFlowTo != null) {
-        viewProps["aria-flowto"] = processIDRefList(accessibilityFlowTo);
-      }
-      if (accessibilityHasPopup != null) {
-        viewProps["aria-haspopup"] = accessibilityHasPopup;
-      }
-      if (accessibilityHidden === true) {
-        viewProps["aria-hidden"] = accessibilityHidden;
-      }
-      if (accessibilityInvalid != null) {
-        viewProps["aria-invalid"] = accessibilityInvalid;
-      }
-      if (accessibilityKeyShortcuts != null && Array.isArray(accessibilityKeyShortcuts)) {
-        viewProps["aria-keyshortcuts"] = accessibilityKeyShortcuts.join(" ");
-      }
-      if (accessibilityLabel != null) {
-        viewProps["aria-label"] = accessibilityLabel;
-      }
-      if (accessibilityLabelledBy != null) {
-        viewProps["aria-labelledby"] = processIDRefList(accessibilityLabelledBy);
-      }
-      if (accessibilityLevel != null) {
-        viewProps["aria-level"] = accessibilityLevel;
-      }
-      if (accessibilityLiveRegion != null) {
-        viewProps["aria-live"] = accessibilityLiveRegion === "none" ? "off" : accessibilityLiveRegion;
-      }
-      if (accessibilityModal != null) {
-        viewProps["aria-modal"] = accessibilityModal;
-      }
-      if (accessibilityMultiline != null) {
-        viewProps["aria-multiline"] = accessibilityMultiline;
-      }
-      if (accessibilityMultiSelectable != null) {
-        viewProps["aria-multiselectable"] = accessibilityMultiSelectable;
-      }
-      if (accessibilityOrientation != null) {
-        viewProps["aria-orientation"] = accessibilityOrientation;
-      }
-      if (accessibilityOwns != null) {
-        viewProps["aria-owns"] = processIDRefList(accessibilityOwns);
-      }
-      if (accessibilityPlaceholder != null) {
-        viewProps["aria-placeholder"] = accessibilityPlaceholder;
-      }
-      if (accessibilityPosInSet != null) {
-        viewProps["aria-posinset"] = accessibilityPosInSet;
-      }
-      if (accessibilityPressed != null) {
-        viewProps["aria-pressed"] = accessibilityPressed;
-      }
-      if (accessibilityReadOnly != null) {
-        viewProps["aria-readonly"] = accessibilityReadOnly;
-        if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.readOnly = true;
-        }
-      }
-      if (accessibilityRequired != null) {
-        viewProps["aria-required"] = accessibilityRequired;
-        if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.required = true;
-        }
-      }
-      if (accessibilityRoleDescription != null) {
-        viewProps["aria-roledescription"] = accessibilityRoleDescription;
-      }
-      if (accessibilityRowCount != null) {
-        viewProps["aria-rowcount"] = accessibilityRowCount;
-      }
-      if (accessibilityRowIndex != null) {
-        viewProps["aria-rowindex"] = accessibilityRowIndex;
-      }
-      if (accessibilityRowSpan != null) {
-        viewProps["aria-rowspan"] = accessibilityRowSpan;
-      }
-      if (accessibilitySelected != null) {
-        viewProps["aria-selected"] = accessibilitySelected;
-      }
-      if (accessibilitySetSize != null) {
-        viewProps["aria-setsize"] = accessibilitySetSize;
-      }
-      if (accessibilitySort != null) {
-        viewProps["aria-sort"] = accessibilitySort;
-      }
-      if (accessibilityValueMax != null) {
-        viewProps["aria-valuemax"] = accessibilityValueMax;
-      }
-      if (accessibilityValueMin != null) {
-        viewProps["aria-valuemin"] = accessibilityValueMin;
-      }
-      if (accessibilityValueNow != null) {
-        viewProps["aria-valuenow"] = accessibilityValueNow;
-      }
-      if (accessibilityValueText != null) {
-        viewProps["aria-valuetext"] = accessibilityValueText;
-      }
-      if (nativeID) {
-        viewProps.id = nativeID;
-      }
+      assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
       if (!asChild) {
         rnw.useElementLayout(hostRef, onLayout);
         rnw.useResponderEvents(hostRef, {
@@ -444,6 +287,7 @@ function createComponent(configIn, ParentComponent) {
           viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
         }
       }
+      const role = viewProps.role;
       const _focusable = focusable != null ? focusable : accessible;
       if (_focusable === false) {
         viewProps.tabIndex = "-1";
@@ -724,10 +568,10 @@ function createComponent(configIn, ParentComponent) {
       ...initialSplitStyles.viewProps
     };
     defaultNativeStyle = {};
-    const validStyles = staticConfig.validStyles || stylePropsView;
+    const validStyles2 = staticConfig.validStyles || stylePropsView;
     for (const key in staticConfig.defaultProps) {
       const val = staticConfig.defaultProps[key];
-      if (typeof val === "string" && val[0] === "$" || !validStyles[key]) {
+      if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
         defaults[key] = val;
       } else {
         defaultNativeStyle[key] = val;
@@ -755,18 +599,16 @@ function createComponent(configIn, ParentComponent) {
   if (configIn.memo) {
     res = memo(res);
   }
-  res["staticConfig"] = {
+  res.staticConfig = {
     validStyles: staticConfig.validStyles || stylePropsView,
     ...staticConfig
   };
-  if (process.env.NODE_ENV === "development") {
-    res["whyDidYouRender"] = true;
-  }
-  res["extractable"] = (Component, conf) => {
-    Component["staticConfig"] = extendStaticConfig({
+  res.extractable = (Component, conf) => {
+    Component.staticConfig = extendStaticConfig({
       Component,
       ...conf,
       neverFlatten: true,
+      isExtractable: true,
       defaultProps: {
         ...Component.defaultProps,
         ...conf == null ? void 0 : conf.defaultProps
@@ -784,6 +626,7 @@ Unspaced["isUnspaced"] = true;
 const Spacer = createComponent({
   memo: true,
   componentName: "Spacer",
+  validStyles,
   defaultProps: {
     ...stackDefaultStyles,
     size: true
@@ -804,7 +647,7 @@ const Spacer = createComponent({
     },
     flex: {
       true: {
-        flex: 1
+        flexGrow: 1
       }
     },
     direction: {
@@ -930,10 +773,171 @@ 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;
+  }
+}
+__name(assignNativePropsToWeb, "assignNativePropsToWeb");
 export {
   AbsoluteFill,
   Spacer,
   Unspaced,
+  assignNativePropsToWeb,
   createComponent,
   mouseUps,
   spacedChildren