@tamagui/core 1.0.1-beta.74 → 1.0.1-beta.77

package/dist/esm/createComponent.js

@@ -1,3 +1,34 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { composeEventHandlers, stylePropsView, validStyles } from "@tamagui/helpers";
 import { useForceUpdate } from "@tamagui/use-force-update";
 import React, {
@@ -82,7 +113,7 @@ function createComponent(configIn, ParentComponent) {
   let tamaguiDefaultProps;
   let initialSplitStyles;
   const component = forwardRef((propsIn, forwardedRef) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _d, _e, _f;
     let props;
     if (tamaguiDefaultProps && !propsIn.asChild) {
       props = mergeProps(tamaguiDefaultProps, propsIn);
@@ -110,32 +141,29 @@ function createComponent(configIn, ParentComponent) {
     const setStateShallow = createShallowUpdate(statesUsed[1]);
     let state = statesUsed[0];
     if (propsIn.forceStyle) {
-      state = {
-        ...state,
+      state = __spreadProps(__spreadValues({}, state), {
         [propsIn.forceStyle]: true
-      };
+      });
     }
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
     const shouldForcePseudo = !!propsIn.forceStyle;
     const hasTextAncestor = !!(isWeb ? useContext(TextAncestorContext) : false);
-    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? {
-      ...state,
+    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? __spreadProps(__spreadValues({}, state), {
       hasTextAncestor,
       dynamicStylesInline: true
-    } : {
-      ...state,
+    }) : __spreadProps(__spreadValues({}, state), {
       noClassNames: true,
       dynamicStylesInline: true,
       hasTextAncestor,
       resolveVariablesAs: "value"
-    };
+    });
     const splitStyles = useSplitStyles(props, staticConfig, theme, splitStyleState, props.asChild ? null : initialSplitStyles.classNames, props["debug"]);
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
     const hostRef = useRef(null);
-    const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null;
+    const animationFeatureStylesIn = props.animation ? __spreadValues(__spreadValues({}, defaultNativeStyle), style) : null;
     const features = useFeatures(props, {
       forceUpdate,
       setStateShallow,
@@ -148,7 +176,7 @@ function createComponent(configIn, ParentComponent) {
       hostRef,
       onDidAnimate: props.onDidAnimate
     });
-    const {
+    const _b = viewPropsIn, {
       tag,
       hitSlop,
       asChild,
@@ -170,9 +198,31 @@ function createComponent(configIn, ParentComponent) {
       forceStyle: _forceStyle,
       onClick,
       theme: _themeProp,
-      defaultVariants,
-      ...nonTamaguiProps
-    } = viewPropsIn;
+      defaultVariants
+    } = _b, nonTamaguiProps = __objRest(_b, [
+      "tag",
+      "hitSlop",
+      "asChild",
+      "children",
+      "onPress",
+      "onPressIn",
+      "onPressOut",
+      "onHoverIn",
+      "onHoverOut",
+      "space",
+      "spaceDirection",
+      "disabled",
+      "onMouseUp",
+      "onMouseDown",
+      "onMouseEnter",
+      "onMouseLeave",
+      "hrefAttrs",
+      "separator",
+      "forceStyle",
+      "onClick",
+      "theme",
+      "defaultVariants"
+    ]);
     const isTaggable = !Component || typeof Component === "string";
     const element = isWeb ? isTaggable ? tag || Component : Component : Component;
     const BaseTextComponent = !isWeb ? Text : element || "span";
@@ -183,7 +233,7 @@ function createComponent(configIn, ParentComponent) {
     const disabled = props.accessibilityState != null && props.accessibilityState.disabled === true || props.accessibilityDisabled;
     let viewProps;
     if (isWeb && !staticConfig.isReactNativeWeb) {
-      const {
+      const _c = nonTamaguiProps, {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
         onResponderEnd,
@@ -252,9 +302,78 @@ function createComponent(configIn, ParentComponent) {
         accessibilityValue,
         collapsable,
         focusable,
-        onLayout,
-        ...webProps
-      } = nonTamaguiProps;
+        onLayout
+      } = _c, webProps = __objRest(_c, [
+        "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"
+      ]);
       viewProps = webProps;
       assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
       if (!asChild) {
@@ -358,15 +477,11 @@ function createComponent(configIn, ParentComponent) {
     let styles;
     const animationStyles = state.animation ? state.animation.style : null;
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
-      styles = {
-        ...defaultNativeStyle,
-        ...animationStyles != null ? animationStyles : style,
-        ...medias
-      };
+      styles = __spreadValues(__spreadValues(__spreadValues({}, defaultNativeStyle), animationStyles ?? style), medias);
     } else {
       styles = [
         isWeb ? null : defaultNativeStyleSheet ? defaultNativeStyleSheet.base : null,
-        animationStyles != null ? animationStyles : style,
+        animationStyles ?? style,
         medias
       ];
       if (!animationStyles) {
@@ -397,17 +512,16 @@ function createComponent(configIn, ParentComponent) {
         classNames ? Object.values(classNames).join(" ") : ""
       ];
       const className = classList.join(" ");
-      const style2 = animationStyles != null ? animationStyles : splitStyles.style;
+      const style2 = animationStyles ?? splitStyles.style;
       if (process.env.NODE_ENV === "development" && props["debug"]) {
         console.log("  \xBB className", { splitStyles, style: style2, isStringElement, pseudos, state, classNames, propsClassName: props.className, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
       }
       const isAnimatedReactNativeWeb = props.animation && avoidClasses;
       if (staticConfig.isReactNativeWeb || isAnimatedReactNativeWeb) {
-        viewProps.dataSet = {
-          ...viewProps.dataSet,
+        viewProps.dataSet = __spreadProps(__spreadValues({}, viewProps.dataSet), {
           className,
           id: props.id
-        };
+        });
         if (props["data-is"]) {
           viewProps.dataSet.is = props["data-is"];
         }
@@ -436,44 +550,44 @@ function createComponent(configIn, ParentComponent) {
         pressIn: false
       });
     }, []);
-    const events = shouldAttach ? {
+    const events = shouldAttach ? __spreadValues(__spreadProps(__spreadValues({
       [pressOutKey]: attachPress ? (e) => {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
         onMouseUp == null ? void 0 : onMouseUp(e);
+      } : void 0
+    }, isHoverable && {
+      onMouseEnter: attachHover ? (e) => {
+        let next = {};
+        if (attachHover) {
+          next.hover = true;
+        }
+        if (state.pressIn) {
+          next.press = true;
+        }
+        if (Object.keys(next).length) {
+          setStateShallow(next);
+        }
+        onHoverIn == null ? void 0 : onHoverIn(e);
+        onMouseEnter == null ? void 0 : onMouseEnter(e);
       } : void 0,
-      ...isHoverable && {
-        onMouseEnter: attachHover ? (e) => {
-          let next = {};
-          if (attachHover) {
-            next.hover = true;
-          }
-          if (state.pressIn) {
-            next.press = true;
-          }
-          if (Object.keys(next).length) {
-            setStateShallow(next);
-          }
-          onHoverIn == null ? void 0 : onHoverIn(e);
-          onMouseEnter == null ? void 0 : onMouseEnter(e);
-        } : void 0,
-        onMouseLeave: attachHover ? (e) => {
-          let next = {};
-          mouseUps.add(unPress);
-          if (attachHover) {
-            next.hover = false;
-          }
-          if (state.pressIn) {
-            next.press = false;
-            next.pressIn = false;
-          }
-          if (Object.keys(next).length) {
-            setStateShallow(next);
-          }
-          onHoverOut == null ? void 0 : onHoverOut(e);
-          onMouseLeave == null ? void 0 : onMouseLeave(e);
-        } : void 0
-      },
+      onMouseLeave: attachHover ? (e) => {
+        let next = {};
+        mouseUps.add(unPress);
+        if (attachHover) {
+          next.hover = false;
+        }
+        if (state.pressIn) {
+          next.press = false;
+          next.pressIn = false;
+        }
+        if (Object.keys(next).length) {
+          setStateShallow(next);
+        }
+        onHoverOut == null ? void 0 : onHoverOut(e);
+        onMouseLeave == null ? void 0 : onMouseLeave(e);
+      } : void 0
+    }), {
       [pressInKey]: attachPress ? (e) => {
         setStateShallow({
           press: true,
@@ -489,18 +603,17 @@ function createComponent(configIn, ParentComponent) {
         unPress();
         onClick == null ? void 0 : onClick(e);
         onPress == null ? void 0 : onPress(e);
-      } : null,
-      ...!isWeb && {
-        cancelable: !props.rejectResponderTermination,
-        disabled: props.disabled !== null ? props.disabled : (_b = props.accessibilityState) == null ? void 0 : _b.disabled,
-        hitSlop: props.hitSlop,
-        delayLongPress: props.delayLongPress,
-        delayPressIn: props.delayPressIn,
-        delayPressOut: props.delayPressOut,
-        focusable: (_c = viewProps.focusable) != null ? _c : true,
-        minPressDuration: 0
-      }
-    } : null;
+      } : null
+    }), !isWeb && {
+      cancelable: !props.rejectResponderTermination,
+      disabled: props.disabled !== null ? props.disabled : (_d = props.accessibilityState) == null ? void 0 : _d.disabled,
+      hitSlop: props.hitSlop,
+      delayLongPress: props.delayLongPress,
+      delayPressIn: props.delayPressIn,
+      delayPressOut: props.delayPressOut,
+      focusable: viewProps.focusable ?? true,
+      minPressDuration: 0
+    }) : null;
     let space = spaceProp;
     if (features.enabled.mediaQuery) {
       for (const key in mediaState) {
@@ -521,23 +634,22 @@ function createComponent(configIn, ParentComponent) {
     let content;
     if (asChild) {
       elementType = Slot;
-      viewProps = {
-        ...viewProps,
+      viewProps = __spreadProps(__spreadValues({}, viewProps), {
         onPress,
         onPressIn,
         onPressOut
-      };
+      });
     }
     if (isWeb) {
-      const [pressableProps] = usePressable(events ? {
-        disabled,
-        ...hitSlop && {
-          hitSlop
-        },
+      const [pressableProps] = usePressable(events ? __spreadProps(__spreadValues({
+        disabled
+      }, hitSlop && {
+        hitSlop
+      }), {
         onPressOut: events[pressOutKey],
         onPressIn: events[pressInKey],
         onPress: events[pressKey]
-      } : {
+      }) : {
         disabled: true
       });
       if (events) {
@@ -592,21 +704,20 @@ function createComponent(configIn, ParentComponent) {
       if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
         const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
         const hoverClassName = shouldWrapWithHover ? "t_Hoverable" : "";
-        content = /* @__PURE__ */ React.createElement("span", {
+        content = /* @__PURE__ */ React.createElement("span", __spreadValues({
           className: `${hoverClassName} ${themeClassName}`,
           style: {
             display: "contents"
-          },
-          ...shouldWrapWithHover && {
-            onMouseEnter: events.onMouseEnter,
-            onMouseLeave: events.onMouseLeave
           }
-        }, content);
+        }, shouldWrapWithHover && {
+          onMouseEnter: events.onMouseEnter,
+          onMouseLeave: events.onMouseLeave
+        }), content);
       }
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.log("\u2B50\uFE0F", { propsIn: { ...props }, propsOut: { ...viewProps }, elementType, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_d = props.className) == null ? void 0 : _d.split(" "), classNamesOut: (_e = viewProps.className) == null ? void 0 : _e.split(" "), events, shouldAttach, ViewComponent: elementType, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo } : null });
+        console.log("\u2B50\uFE0F", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), elementType, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_e = props.className) == null ? void 0 : _e.split(" "), classNamesOut: (_f = viewProps.className) == null ? void 0 : _f.split(" "), events, shouldAttach, ViewComponent: elementType, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles }, typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo } : null));
       }
     }
     if (features.elements.length) {
@@ -670,12 +781,14 @@ function createComponent(configIn, ParentComponent) {
     const defaults = mergeProps(component.defaultProps, initialSplitStyles.viewProps);
     defaultNativeStyle = {};
     const validStyles2 = staticConfig.validStyles || stylePropsView;
-    for (const key in staticConfig.defaultProps) {
-      const val = staticConfig.defaultProps[key];
-      if (typeof val === "string" && val[0] === "$" || !validStyles2[key] || val[0] === "_") {
-        defaults[key] = val;
-      } else {
-        defaultNativeStyle[key] = val;
+    if (!isWeb) {
+      for (const key in defaults) {
+        const val = defaults[key];
+        if (typeof val === "string" && val[0] === "$" || !validStyles2[key] || val[0] === "_") {
+          defaults[key] = val;
+        } else {
+          defaultNativeStyle[key] = val;
+        }
       }
     }
     defaultNativeStyleSheet = StyleSheet.create({
@@ -700,21 +813,17 @@ function createComponent(configIn, ParentComponent) {
   if (configIn.memo) {
     res = memo(res);
   }
-  res.staticConfig = {
-    validStyles: staticConfig.validStyles || stylePropsView,
-    ...staticConfig
-  };
+  res.staticConfig = __spreadValues({
+    validStyles: staticConfig.validStyles || stylePropsView
+  }, staticConfig);
   res.extractable = (Component, conf) => {
-    Component.staticConfig = extendStaticConfig({
-      Component,
-      ...conf,
+    Component.staticConfig = extendStaticConfig(__spreadProps(__spreadValues({
+      Component
+    }, conf), {
       neverFlatten: true,
       isExtractable: true,
-      defaultProps: {
-        ...Component.defaultProps,
-        ...conf == null ? void 0 : conf.defaultProps
-      }
-    }, res);
+      defaultProps: __spreadValues(__spreadValues({}, Component.defaultProps), conf == null ? void 0 : conf.defaultProps)
+    }), res);
     return Component;
   };
   return res;
@@ -728,16 +837,14 @@ const Spacer = createComponent({
   memo: true,
   componentName: "Spacer",
   validStyles,
-  defaultProps: {
-    ...stackDefaultStyles,
+  defaultProps: __spreadProps(__spreadValues({}, stackDefaultStyles), {
     size: true
-  },
+  }),
   variants: {
     size: {
       "...size": (size, { tokens }) => {
-        var _a;
         size = size == true ? "$true" : size;
-        const sizePx = (_a = tokens.space[size]) != null ? _a : size;
+        const sizePx = tokens.space[size] ?? size;
         return {
           width: sizePx,
           height: sizePx,
@@ -763,7 +870,7 @@ const Spacer = createComponent({
     }
   },
   defaultVariants: {
-    direction: "horizontal"
+    direction: "both"
   }
 });
 function spacedChildren({
@@ -832,14 +939,13 @@ function spacedChildren({
   return final;
 }
 function createSpacer({ key, direction, space, spaceFlex }) {
-  return /* @__PURE__ */ React.createElement(Spacer, {
+  return /* @__PURE__ */ React.createElement(Spacer, __spreadValues({
     key,
-    direction: direction === "both" ? void 0 : direction === "row" || direction === "row-reverse" ? "horizontal" : "vertical",
     size: space,
-    ...spaceFlex && {
-      flex: spaceFlex
-    }
-  });
+    direction
+  }, spaceFlex && {
+    flex: spaceFlex
+  }));
 }
 function isUnspaced(child) {
   var _a, _b;
@@ -1031,7 +1137,7 @@ 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;
+  const style = defaultPseudoStyle ? __spreadValues(__spreadValues({}, defaultPseudoStyle), pseudoStyle) : pseudoStyle;
   if (style) {
     styles.push(shouldNestObject && !force ? { [name]: style } : style);
   }