@tamagui/core 1.0.1-beta.37 → 1.0.1-beta.40

package/dist/esm/createComponent.js

@@ -16,7 +16,7 @@ import React, {
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
-import { isAndroid, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
+import { isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
 import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
@@ -138,46 +138,329 @@ function createComponent(configIn, ParentComponent) {
       hitSlop,
       asChild,
       children,
-      pointerEvents,
       onPress,
       onPressIn,
       onPressOut,
       onHoverIn,
       onHoverOut,
       space,
-      disabled,
+      disabled: disabledProp,
+      onMouseDown,
       onMouseEnter,
       onMouseLeave,
       hrefAttrs,
-      onMoveShouldSetResponder,
-      onMoveShouldSetResponderCapture,
-      onResponderEnd,
-      onResponderGrant,
-      onResponderMove,
-      onResponderReject,
-      onResponderRelease,
-      onResponderStart,
-      onResponderTerminate,
-      onResponderTerminationRequest,
-      onScrollShouldSetResponder,
-      onScrollShouldSetResponderCapture,
-      onSelectionChangeShouldSetResponder,
-      onSelectionChangeShouldSetResponderCapture,
-      onStartShouldSetResponder,
-      onStartShouldSetResponderCapture,
-      onMouseDown,
-      nativeID,
-      accessible,
-      accessibilityRole,
-      collapsable,
-      focusable,
       onClick,
       theme: _themeProp,
       defaultVariants,
-      onLayout,
-      ...viewPropsRest
+      ...nonTamaguiProps
     } = viewPropsIn;
-    let viewProps = viewPropsRest;
+    const isTaggable = !Component || typeof Component === "string";
+    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
+    const element = isWeb ? isTaggable ? tag || Component : Component : Component;
+    const BaseTextComponent = !isWeb ? Text : element || "span";
+    const BaseViewComponent = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");
+    let elementType = isText ? (isAnimated ? AnimatedText || Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || View : null) || BaseViewComponent;
+    elementType = Component || elementType;
+    const isStringElement = typeof elementType === "string";
+    const disabled = props.accessibilityState != null && props.accessibilityState.disabled === true || props.accessibilityDisabled;
+    let viewProps;
+    if (isWeb && !staticConfig.isReactNativeWeb) {
+      const {
+        onMoveShouldSetResponder,
+        onMoveShouldSetResponderCapture,
+        onResponderEnd,
+        onResponderGrant,
+        onResponderMove,
+        onResponderReject,
+        onResponderRelease,
+        onResponderStart,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onScrollShouldSetResponder,
+        onScrollShouldSetResponderCapture,
+        onSelectionChangeShouldSetResponder,
+        onSelectionChangeShouldSetResponderCapture,
+        onStartShouldSetResponder,
+        onStartShouldSetResponderCapture,
+        nativeID,
+        accessibilityActiveDescendant,
+        accessibilityAtomic,
+        accessibilityAutoComplete,
+        accessibilityBusy,
+        accessibilityChecked,
+        accessibilityColumnCount,
+        accessibilityColumnIndex,
+        accessibilityColumnSpan,
+        accessibilityControls,
+        accessibilityCurrent,
+        accessibilityDescribedBy,
+        accessibilityDetails,
+        accessibilityDisabled,
+        accessibilityErrorMessage,
+        accessibilityExpanded,
+        accessibilityFlowTo,
+        accessibilityHasPopup,
+        accessibilityHidden,
+        accessibilityInvalid,
+        accessibilityKeyShortcuts,
+        accessibilityLabel,
+        accessibilityLabelledBy,
+        accessibilityLevel,
+        accessibilityLiveRegion,
+        accessibilityModal,
+        accessibilityMultiline,
+        accessibilityMultiSelectable,
+        accessibilityOrientation,
+        accessibilityOwns,
+        accessibilityPlaceholder,
+        accessibilityPosInSet,
+        accessibilityPressed,
+        accessibilityReadOnly,
+        accessibilityRequired,
+        accessibilityRole,
+        accessibilityRoleDescription,
+        accessibilityRowCount,
+        accessibilityRowIndex,
+        accessibilityRowSpan,
+        accessibilitySelected,
+        accessibilitySetSize,
+        accessibilitySort,
+        accessibilityValueMax,
+        accessibilityValueMin,
+        accessibilityValueNow,
+        accessibilityValueText,
+        accessible,
+        accessibilityState,
+        accessibilityValue,
+        collapsable,
+        focusable,
+        onLayout,
+        ...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;
+      }
+      if (!asChild) {
+        rnw.useElementLayout(hostRef, onLayout);
+        rnw.useResponderEvents(hostRef, {
+          onMoveShouldSetResponder,
+          onMoveShouldSetResponderCapture,
+          onResponderEnd,
+          onResponderGrant,
+          onResponderMove,
+          onResponderReject,
+          onResponderRelease,
+          onResponderStart,
+          onResponderTerminate,
+          onResponderTerminationRequest,
+          onScrollShouldSetResponder,
+          onScrollShouldSetResponderCapture,
+          onSelectionChangeShouldSetResponder,
+          onSelectionChangeShouldSetResponderCapture,
+          onStartShouldSetResponder,
+          onStartShouldSetResponderCapture
+        });
+      }
+      const platformMethodsRef = rnw.usePlatformMethods(viewProps);
+      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+      if (!isAnimated) {
+        viewProps.ref = setRef;
+      } else {
+        if (forwardedRef) {
+          viewProps.ref = forwardedRef;
+        }
+      }
+      if (props.href != null && hrefAttrs != null) {
+        const { download, rel, target } = hrefAttrs;
+        if (download != null) {
+          viewProps.download = download;
+        }
+        if (rel != null) {
+          viewProps.rel = rel;
+        }
+        if (typeof target === "string") {
+          viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
+        }
+      }
+      const _focusable = focusable != null ? focusable : accessible;
+      if (_focusable === false) {
+        viewProps.tabIndex = "-1";
+      }
+      if (elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea") {
+        if (_focusable === false || accessibilityDisabled === true) {
+          viewProps.tabIndex = "-1";
+        }
+      } else if (role === "button" || role === "checkbox" || role === "link" || role === "radio" || role === "textbox" || role === "switch") {
+        if (_focusable !== false) {
+          viewProps.tabIndex = "0";
+        }
+      } else {
+        if (_focusable === true) {
+          viewProps.tabIndex = "0";
+        }
+      }
+    } else {
+      viewProps = nonTamaguiProps;
+      if (forwardedRef) {
+        viewProps.ref = forwardedRef;
+      }
+    }
     if (process.env.NODE_ENV === "development" && !isText && isWeb) {
       Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
@@ -185,7 +468,6 @@ function createComponent(configIn, ParentComponent) {
         }
       });
     }
-    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
     const internal = useRef();
     if (!internal.current) {
       internal.current = {
@@ -204,50 +486,7 @@ function createComponent(configIn, ParentComponent) {
         internal.current.isMounted = false;
       };
     }, [hasEnterStyle, props.animation]);
-    if (nativeID) {
-      viewProps.id = nativeID;
-    }
-    if (isAndroid) {
-      if (collapsable)
-        viewProps.collapsable = collapsable;
-      if (focusable)
-        viewProps.focusable = focusable;
-    }
-    if (!isWeb) {
-      if (accessible)
-        viewProps.accessible = accessible;
-      if (accessibilityRole)
-        viewProps.accessibilityRole = accessibilityRole;
-    }
-    if (isWeb && !asChild) {
-      rnw.useElementLayout(hostRef, onLayout);
-      rnw.useResponderEvents(hostRef, {
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onResponderEnd,
-        onResponderGrant,
-        onResponderMove,
-        onResponderReject,
-        onResponderRelease,
-        onResponderStart,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        onSelectionChangeShouldSetResponder,
-        onSelectionChangeShouldSetResponderCapture,
-        onStartShouldSetResponder,
-        onStartShouldSetResponderCapture
-      });
-    }
-    const isTaggable = !Component || typeof Component === "string";
-    const element = isWeb ? isTaggable ? tag || Component : Component : Component;
-    const BaseTextComponent = !isWeb ? Text : element || "span";
-    const BaseViewComponent = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");
-    let ViewComponent = isText ? (isAnimated ? AnimatedText || Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || View : null) || BaseViewComponent;
-    ViewComponent = Component || ViewComponent;
     let styles;
-    const isStringElement = typeof ViewComponent === "string";
     const animationStyles = state.animation ? state.animation.style : null;
     if (isStringElement && shouldAvoidClasses) {
       styles = {
@@ -292,36 +531,6 @@ function createComponent(configIn, ParentComponent) {
     } else {
       viewProps.style = styles;
     }
-    if (pointerEvents) {
-      viewProps.pointerEvents = pointerEvents;
-    }
-    if (isWeb) {
-      const platformMethodsRef = rnw.usePlatformMethods(viewProps);
-      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      if (!isAnimated) {
-        viewProps.ref = setRef;
-      } else {
-        if (forwardedRef) {
-          viewProps.ref = forwardedRef;
-        }
-      }
-      if (props.href != null && hrefAttrs != null) {
-        const { download, rel, target } = hrefAttrs;
-        if (download != null) {
-          viewProps.download = download;
-        }
-        if (rel != null) {
-          viewProps.rel = rel;
-        }
-        if (typeof target === "string") {
-          viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
-        }
-      }
-    } else {
-      if (forwardedRef) {
-        viewProps.ref = forwardedRef;
-      }
-    }
     const initialPseudos = initialSplitStyles.pseudos;
     const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
     const isTouch = useIsTouchDevice();
@@ -407,17 +616,10 @@ function createComponent(configIn, ParentComponent) {
           ...viewProps.dataSet,
           className: viewProps.className
         };
-      } else {
-        const rnProps = rnw.createDOMProps(viewProps);
-        const className = rnProps.className && rnProps.className !== viewProps.className ? `${rnProps.className} ${viewProps.className}` : viewProps.className;
-        Object.assign(viewProps, rnProps);
-        if (className) {
-          viewProps.className = className;
-        }
       }
     }
     if (asChild) {
-      ViewComponent = Slot;
+      elementType = Slot;
       const onlyChild = React.Children.only(children);
       Object.assign(viewProps, onlyChild.props);
     }
@@ -441,8 +643,8 @@ function createComponent(configIn, ParentComponent) {
         }
       }
     }
-    content = createElement(ViewComponent, viewProps, childEls);
-    if (!isWeb) {
+    content = createElement(elementType, viewProps, childEls);
+    if (process.env.TAMAGUI_TARGET === "native") {
       if (attachPress && events) {
         content = /* @__PURE__ */ React.createElement(Pressable, {
           onPressIn: events[pressInKey],
@@ -468,7 +670,7 @@ function createComponent(configIn, ParentComponent) {
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_b = props.className) == null ? void 0 : _b.split(" "), classNamesOut: (_c = viewProps.className) == null ? void 0 : _c.split(" "), 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 });
+        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_b = props.className) == null ? void 0 : _b.split(" "), classNamesOut: (_c = viewProps.className) == null ? void 0 : _c.split(" "), events, shouldAttach, ViewComponent: elementType, 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) {
@@ -655,6 +857,24 @@ function AbsoluteFill(props) {
   }, props.child);
 }
 __name(AbsoluteFill, "AbsoluteFill");
+function processIDRefList(idRefList) {
+  return Array.isArray(idRefList) ? idRefList.join(" ") : idRefList;
+}
+__name(processIDRefList, "processIDRefList");
+const accessibilityRoleToWebRole = {
+  adjustable: "slider",
+  button: "button",
+  header: "heading",
+  image: "img",
+  imagebutton: null,
+  keyboardkey: null,
+  label: null,
+  link: "link",
+  none: "presentation",
+  search: "search",
+  summary: "region",
+  text: null
+};
 export {
   AbsoluteFill,
   Spacer,