@tamagui/core 1.0.1-beta.108 → 1.0.1-beta.111

package/dist/esm/createComponent.js

@@ -1,34 +1,3 @@
-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 {
   useElementLayout,
@@ -63,7 +32,6 @@ import { mergeProps } from "./helpers/mergeProps";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
 import { useFeatures } from "./hooks/useFeatures";
-import { useIsTouchDevice } from "./hooks/useIsTouchDevice";
 import { mediaState } from "./hooks/useMedia";
 import { usePressable } from "./hooks/usePressable";
 import { getThemeManager, useTheme } from "./hooks/useTheme";
@@ -119,7 +87,7 @@ function createComponent(configIn, ParentComponent) {
   let tamaguiDefaultProps;
   let initialSplitStyles;
   const component = forwardRef((propsIn, forwardedRef) => {
-    var _a, _d, _e, _f;
+    var _a, _b, _c, _d;
     let props;
     if (tamaguiDefaultProps && !propsIn.asChild) {
       props = mergeProps(tamaguiDefaultProps, propsIn)[0];
@@ -152,21 +120,23 @@ function createComponent(configIn, ParentComponent) {
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
     const shouldForcePseudo = !!propsIn.forceStyle;
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false);
-    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? __spreadProps(__spreadValues({}, state), {
+    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? {
+      ...state,
       hasTextAncestor,
       dynamicStylesInline: true
-    }) : __spreadProps(__spreadValues({}, state), {
+    } : {
+      ...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 animationFeatureStylesIn = props.animation ? __spreadValues(__spreadValues({}, defaultNativeStyle), style) : null;
+    const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null;
     const features = useFeatures(props, {
       forceUpdate,
       setStateShallow,
@@ -179,7 +149,7 @@ function createComponent(configIn, ParentComponent) {
       hostRef,
       onDidAnimate: props.onDidAnimate
     });
-    const _b = viewPropsIn, {
+    const {
       tag,
       hitSlop,
       asChild,
@@ -202,32 +172,9 @@ function createComponent(configIn, ParentComponent) {
       forceStyle: _forceStyle,
       onClick,
       theme: _themeProp,
-      defaultVariants
-    } = _b, nonTamaguiProps = __objRest(_b, [
-      "tag",
-      "hitSlop",
-      "asChild",
-      "children",
-      "onPress",
-      "onPressIn",
-      "onPressOut",
-      "onHoverIn",
-      "onHoverOut",
-      "themeShallow",
-      "space",
-      "spaceDirection",
-      "disabled",
-      "onMouseUp",
-      "onMouseDown",
-      "onMouseEnter",
-      "onMouseLeave",
-      "hrefAttrs",
-      "separator",
-      "forceStyle",
-      "onClick",
-      "theme",
-      "defaultVariants"
-    ]);
+      defaultVariants,
+      ...nonTamaguiProps
+    } = viewPropsIn;
     const isTaggable = !Component || typeof Component === "string";
     const element = isWeb ? isTaggable ? tag || Component : Component : Component;
     const BaseTextComponent = !isWeb ? Text : element || "span";
@@ -238,7 +185,7 @@ function createComponent(configIn, ParentComponent) {
     const disabled = props.accessibilityState != null && props.accessibilityState.disabled === true || props.accessibilityDisabled;
     let viewProps;
     if (process.env.TAMAGUI_TARGET === "web" && !staticConfig.isReactNativeWeb) {
-      const _c = nonTamaguiProps, {
+      const {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
         onResponderEnd,
@@ -307,78 +254,9 @@ function createComponent(configIn, ParentComponent) {
         accessibilityValue,
         collapsable,
         focusable,
-        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"
-      ]);
+        onLayout,
+        ...webProps
+      } = nonTamaguiProps;
       viewProps = webProps;
       assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
       useElementLayout(hostRef, onLayout);
@@ -468,7 +346,11 @@ function createComponent(configIn, ParentComponent) {
     let styles;
     const animationStyles = state.animation ? state.animation.style : null;
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
-      styles = __spreadValues(__spreadValues(__spreadValues({}, defaultNativeStyle), animationStyles ?? style), medias);
+      styles = {
+        ...defaultNativeStyle,
+        ...animationStyles ?? style,
+        ...medias
+      };
     } else {
       styles = [
         isWeb ? null : defaultNativeStyleSheet ? defaultNativeStyleSheet.base : null,
@@ -506,10 +388,11 @@ function createComponent(configIn, ParentComponent) {
       const style2 = animationStyles ?? splitStyles.style;
       const isAnimatedReactNativeWeb = props.animation && avoidClasses;
       if (staticConfig.isReactNativeWeb || isAnimatedReactNativeWeb) {
-        viewProps.dataSet = __spreadProps(__spreadValues({}, viewProps.dataSet), {
+        viewProps.dataSet = {
+          ...viewProps.dataSet,
           className,
           id: props.id
-        });
+        };
         if (props["data-is"]) {
           viewProps.dataSet.is = props["data-is"];
         }
@@ -522,8 +405,7 @@ function createComponent(configIn, ParentComponent) {
     }
     const initialPseudos = initialSplitStyles.pseudos;
     const attachPress = !!((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle) || onPress || onPressOut || onPressIn || onClick);
-    const isTouch = useIsTouchDevice();
-    const isHoverable = isWeb && !isTouch;
+    const isHoverable = isWeb;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     const handlesPressEvents = !isStringElement && !asChild;
     const pressKey = handlesPressEvents ? "onPress" : "onClick";
@@ -538,44 +420,44 @@ function createComponent(configIn, ParentComponent) {
         pressIn: false
       });
     }, []);
-    const events = shouldAttach ? __spreadValues(__spreadProps(__spreadValues({
+    const events = shouldAttach ? {
       [pressOutKey]: attachPress ? (e) => {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
         onMouseUp == null ? void 0 : onMouseUp(e);
-      } : void 0
-    }, isHoverable && {
-      onMouseEnter: attachHover ? (e) => {
-        const 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) => {
-        const 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
-    }), {
+      ...isHoverable && {
+        onMouseEnter: attachHover ? (e) => {
+          const 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) => {
+          const 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,
@@ -592,17 +474,18 @@ 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 : (_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;
+      } : 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: viewProps.focusable ?? true,
+        minPressDuration: 0
+      }
+    } : null;
     let space = spaceProp;
     if (features.enabled.mediaQuery) {
       for (const key in mediaState) {
@@ -626,22 +509,23 @@ function createComponent(configIn, ParentComponent) {
     let content;
     if (asChild) {
       elementType = Slot;
-      viewProps = __spreadProps(__spreadValues({}, viewProps), {
+      viewProps = {
+        ...viewProps,
         onPress,
         onPressIn,
         onPressOut
-      });
+      };
     }
     if (isWeb) {
-      const [pressableProps] = usePressable(events ? __spreadProps(__spreadValues({
-        disabled
-      }, hitSlop && {
-        hitSlop
-      }), {
+      const [pressableProps] = usePressable(events ? {
+        disabled,
+        ...hitSlop && {
+          hitSlop
+        },
         onPressOut: events[pressOutKey],
         onPressIn: events[pressInKey],
         onPress: events[pressKey]
-      }) : {
+      } : {
         disabled: true
       });
       if (events) {
@@ -696,26 +580,27 @@ function createComponent(configIn, ParentComponent) {
       if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
         const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
         const hoverClassName = shouldWrapWithHover ? "t_Hoverable" : "";
-        content = /* @__PURE__ */ React.createElement("span", __spreadValues({
+        content = /* @__PURE__ */ React.createElement("span", {
           className: `${hoverClassName} ${themeClassName}`,
           style: {
             display: "contents"
+          },
+          ...shouldWrapWithHover && {
+            onMouseEnter: events.onMouseEnter,
+            onMouseLeave: events.onMouseLeave
           }
-        }, shouldWrapWithHover && {
-          onMouseEnter: events.onMouseEnter,
-          onMouseLeave: events.onMouseLeave
-        }), content);
+        }, content);
       }
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.groupCollapsed("props out", viewProps);
+        console.groupCollapsed("props out", viewProps, typeof elementType === "string" ? elementType : "Component");
         for (const key in viewProps) {
           console.log(key, viewProps[key]);
         }
         console.groupEnd();
         if (typeof window !== "undefined") {
-          console.log(__spreadValues({ state, shouldProvideThemeManager, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, isStringElement, classNamesIn: (_e = props.className) == null ? void 0 : _e.split(" "), classNamesOut: (_f = viewProps.className) == null ? void 0 : _f.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles }, typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null));
+          console.log({ state, shouldProvideThemeManager, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null });
         }
         console.groupEnd();
       }
@@ -758,7 +643,11 @@ function createComponent(configIn, ParentComponent) {
       keepVariantsAsProps: true
     }, void 0, debug);
     const [defaults, defaultsClassnames] = mergeProps(component.defaultProps, initialSplitStyles.viewProps, true);
-    initialSplitStyles.classNames = __spreadValues(__spreadValues(__spreadValues({}, parentClassNames), defaultsClassnames), initialSplitStyles.classNames);
+    initialSplitStyles.classNames = {
+      ...parentClassNames,
+      ...defaultsClassnames,
+      ...initialSplitStyles.classNames
+    };
     defaultNativeStyle = {};
     const validStyles2 = staticConfig.validStyles || stylePropsView;
     if (!isWeb) {
@@ -794,17 +683,21 @@ function createComponent(configIn, ParentComponent) {
   if (configIn.memo) {
     res = memo(res);
   }
-  res.staticConfig = __spreadValues({
-    validStyles: staticConfig.validStyles || stylePropsView
-  }, staticConfig);
+  res.staticConfig = {
+    validStyles: staticConfig.validStyles || stylePropsView,
+    ...staticConfig
+  };
   res.extractable = (Component, conf) => {
-    Component.staticConfig = extendStaticConfig(__spreadProps(__spreadValues({
-      Component
-    }, conf), {
+    Component.staticConfig = extendStaticConfig({
+      Component,
+      ...conf,
       neverFlatten: true,
       isExtractable: true,
-      defaultProps: __spreadValues(__spreadValues({}, Component.defaultProps), conf == null ? void 0 : conf.defaultProps)
-    }), res);
+      defaultProps: {
+        ...Component.defaultProps,
+        ...conf == null ? void 0 : conf.defaultProps
+      }
+    }, res);
     return Component;
   };
   return res;
@@ -817,9 +710,10 @@ const Spacer = createComponent({
   memo: true,
   componentName: "Spacer",
   validStyles,
-  defaultProps: __spreadProps(__spreadValues({}, stackDefaultStyles), {
+  defaultProps: {
+    ...stackDefaultStyles,
     size: true
-  }),
+  },
   variants: {
     size: {
       "...size": (size, { tokens }) => {
@@ -920,13 +814,14 @@ function spacedChildren({
   return final;
 }
 function createSpacer({ key, direction, space, spaceFlex }) {
-  return /* @__PURE__ */ React.createElement(Spacer, __spreadValues({
+  return /* @__PURE__ */ React.createElement(Spacer, {
     key,
     size: space,
-    direction
-  }, spaceFlex && {
-    flex: spaceFlex
-  }));
+    direction,
+    ...spaceFlex && {
+      flex: spaceFlex
+    }
+  });
 }
 function isUnspaced(child) {
   var _a, _b;
@@ -959,7 +854,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 ? __spreadValues(__spreadValues({}, defaultPseudoStyle), pseudoStyle) : pseudoStyle;
+  const style = defaultPseudoStyle ? { ...defaultPseudoStyle, ...pseudoStyle } : pseudoStyle;
   if (style) {
     styles.push(shouldNestObject && !force ? { [name]: style } : style);
   }