@tamagui/web 2.0.0-rc.3 → 2.0.0-rc.31

package/dist/cjs/createComponent.cjs

@@ -37,6 +37,7 @@ __export(createComponent_exports, {
 module.exports = __toCommonJS(createComponent_exports);
 var import_compose_refs = require("@tamagui/compose-refs"),
   import_constants = require("@tamagui/constants"),
+  import_native = require("@tamagui/native"),
   import_helpers = require("@tamagui/helpers"),
   import_is_equal_shallow = require("@tamagui/is-equal-shallow"),
   import_react = __toESM(require("react"), 1),
@@ -48,12 +49,14 @@ var import_compose_refs = require("@tamagui/compose-refs"),
   import_defaultComponentState = require("./defaultComponentState.cjs"),
   import_eventHandling = require("./eventHandling.cjs"),
   import_getDefaultProps = require("./helpers/getDefaultProps.cjs"),
+  import_resolveAnimationDriver = require("./helpers/resolveAnimationDriver.cjs"),
   import_getSplitStyles = require("./helpers/getSplitStyles.cjs"),
   import_log = require("./helpers/log.cjs"),
-  import_pointerEvents = require("./helpers/pointerEvents.cjs"),
   import_mergeProps = require("./helpers/mergeProps.cjs"),
   import_mergeRenderElementProps = require("./helpers/mergeRenderElementProps.cjs"),
   import_objectIdentityKey = require("./helpers/objectIdentityKey.cjs"),
+  import_pointerEvents = require("./helpers/pointerEvents.cjs"),
+  import_pseudoTransitions = require("./helpers/pseudoTransitions.cjs"),
   import_setElementProps = require("./helpers/setElementProps.cjs"),
   import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup.cjs"),
   import_themeable = require("./helpers/themeable.cjs"),
@@ -144,9 +147,11 @@ function createComponent(staticConfig) {
       isHOC
     } = staticConfig,
     component = import_react.default.forwardRef((propsIn, forwardedRef) => {
-      config ||= (0, import_config.getConfig)();
+      "use no memo";
+
+      config = config || (0, import_config.getConfig)();
       const internalID = process.env.NODE_ENV === "development" ? import_react.default.useId() : "";
-      process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && (propsIn["data-test-renders"].current ??= 0, propsIn["data-test-renders"].current += 1);
+      process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && (propsIn["data-test-renders"].current = propsIn["data-test-renders"].current ?? 0, propsIn["data-test-renders"].current += 1);
       const {
           context,
           isReactNative
@@ -155,11 +160,12 @@ function createComponent(staticConfig) {
         styledContextValue = context ? import_react.default.useContext(context) : void 0;
       let overriddenContextProps = null;
       const componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext),
-        hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText);
-      !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time && (time = require("@tamagui/timer").timer().start(), globalThis.time = time), process.env.NODE_ENV === "development" && time && time`non-tamagui time (ignore)`;
+        hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText),
+        isInsideNativeMenu = !1;
+      !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time && (time = require("@tamagui/timer").timer().start(), globalThis.time = time), process.env.NODE_ENV === "development" && !time && globalThis.time && (time = globalThis.time), process.env.NODE_ENV === "development" && time && time`non-tamagui time (ignore)`;
       let props = propsIn;
       const componentName = props.componentName || staticConfig.componentName,
-        defaultProps = (0, import_getDefaultProps.getDefaultProps)(staticConfig, props.componentName, isText && hasTextAncestor),
+        defaultProps = (0, import_getDefaultProps.getDefaultProps)(staticConfig, props.componentName),
         [nextProps, overrides] = (0, import_mergeProps.mergeComponentProps)(defaultProps, styledContextValue, propsIn);
       props = nextProps, overriddenContextProps = overrides, process.env.NODE_ENV === "development" && import_constants.isClient && import_react.default.useEffect(() => {
         let node,
@@ -178,18 +184,12 @@ function createComponent(staticConfig) {
               tooltip.style.position = "absolute", tooltip.style.top = "0px", tooltip.style.left = "0px", tooltip.style.padding = "3px", tooltip.style.background = "rgba(0,0,0,0.75)", tooltip.style.color = "rgba(255,255,255,1)", tooltip.style.fontSize = "12px", tooltip.style.lineHeight = "12px", tooltip.style.fontFamily = "monospace", tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
             } else remove();
           };
-        return debugKeyListeners ||= /* @__PURE__ */new Set(), debugKeyListeners.add(debugVisualizerHandler), () => {
+        return debugKeyListeners = debugKeyListeners || /* @__PURE__ */new Set(), debugKeyListeners.add(debugVisualizerHandler), () => {
           remove(), debugKeyListeners?.delete(debugVisualizerHandler);
         };
       }, [componentName]);
       const groupContextParent = import_react.default.useContext(import_GroupContext.GroupContext),
-        animationDriver = (() => {
-          if (props.animatedBy && config?.animations) {
-            const animations = config.animations;
-            return "default" in animations ? animations[props.animatedBy] ?? animations.default : props.animatedBy === "default" ? animations : null;
-          }
-          return componentContext.animationDriver;
-        })(),
+        animationDriver = props.animatedBy && config ? config.animationDrivers ? config.animationDrivers[props.animatedBy] ?? config.animations : props.animatedBy === "default" ? config.animations : null : (0, import_resolveAnimationDriver.resolveAnimationDriver)(componentContext.animationDriver) ?? (0, import_resolveAnimationDriver.resolveAnimationDriver)(config?.animations) ?? null,
         useAnimations = animationDriver?.useAnimations,
         componentState = (0, import_useComponentState.useComponentState)(props, animationDriver?.isStub ? null : animationDriver, staticConfig, config),
         {
@@ -206,7 +206,8 @@ function createComponent(staticConfig) {
           noClass,
           state,
           stateRef,
-          supportsCSS,
+          inputStyle,
+          outputStyle,
           willBeAnimated,
           willBeAnimatedClient,
           startedUnhydrated
@@ -249,18 +250,11 @@ function createComponent(staticConfig) {
       }, [stateRef, groupName, groupContextParent]);
       let setStateShallow = componentState.setStateShallow;
       process.env.NODE_ENV === "development" && time && time`use-state`;
-      const isTaggable = !Component || typeof Component == "string",
-        renderProp = props.render,
-        element = import_constants.isWeb && isTaggable && renderProp || Component,
-        BaseTextComponent = BaseText || element || "span",
-        BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
-      let elementType = isText ? BaseTextComponent : BaseViewComponent;
-      animationDriver && isAnimated &&
-      // this should really be behind another prop as it's not really related to
-      // "needsWebStyles" basically with motion we just animate a plain div, but
-      // we still have animated.View/Text for Sheet which wants to control
-      // things declaratively
-      !animationDriver.needsWebStyles && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
+      const renderProp = props.render,
+        element = import_constants.isWeb && (!Component || typeof Component == "string") && renderProp || Component,
+        BaseComponent = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
+      let elementType = BaseComponent;
+      animationDriver && isAnimated && animationDriver.needsCustomComponent && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
       const disableTheme = props["data-disable-theme"] || isHOC;
       process.env.NODE_ENV === "development" && time && time`theme-props`;
       const themeStateProps = {
@@ -281,7 +275,7 @@ function createComponent(staticConfig) {
           noClass,
           isAnimated,
           isWeb: import_constants.isWeb,
-          supportsCSS
+          inputStyle
         }) : (console.groupEnd(), console.groupCollapsed(`${childLog} [inspect props, state, context \u{1F447}]`), (0, import_log.log)("props in:", propsIn), (0, import_log.log)("final props:", props, Object.keys(props)), (0, import_log.log)({
           state,
           staticConfig,
@@ -309,7 +303,7 @@ ${banner}
           noClass,
           isAnimated,
           isWeb: import_constants.isWeb,
-          supportsCSS
+          inputStyle
         }));
       }
       process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
@@ -320,7 +314,7 @@ ${banner}
       (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time && time`media`;
       const resolveValues =
         // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
-        isAnimated && !supportsCSS || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto",
+        isAnimated && inputStyle !== "css" || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto",
         styleProps = {
           mediaState,
           noClass,
@@ -332,13 +326,13 @@ ${banner}
         },
         themeName = themeState?.name || "";
       process.env.NODE_ENV === "development" && time && time`split-styles-prepare`;
-      const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp),
+      const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver),
         isPassthrough = !splitStyles;
       let contextForOverride = staticConfig.context;
       if (splitStyles?.overriddenContextProps) {
         const contextForProps = staticConfig.context || staticConfig.parentStaticConfig?.context;
         if (contextForProps) {
-          for (const key in splitStyles.overriddenContextProps) overriddenContextProps ||= {}, overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
+          for (const key in splitStyles.overriddenContextProps) overriddenContextProps = overriddenContextProps || {}, overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
           staticConfig.context || (contextForOverride = contextForProps);
         }
       }
@@ -352,7 +346,8 @@ ${banner}
           height: fromPx(splitStyles.style.height)
         });
       }
-      if (!isPassthrough && (hasAnimationProp || groupName) && animationDriver?.avoidReRenders) {
+      const hasEnterExitTransition = props.transition && typeof props.transition == "object" && !Array.isArray(props.transition) && ("enter" in props.transition || "exit" in props.transition);
+      if (!isPassthrough && (hasAnimationProp || groupName) && animationDriver?.avoidReRenders && !hasEnterExitTransition) {
         let updateGroupListeners = function () {
           const updatedState = stateRef.current.nextState;
           if (groupContext) {
@@ -379,9 +374,10 @@ ${banner}
             nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, mediaState2 ? {
               ...styleProps,
               mediaState: mediaState2
-            } : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp);
-          useStyleListener(nextStyles?.style || {});
-        }, componentContext.mediaEmitListeners ||= /* @__PURE__ */new Set(), !stateRef.current.mediaEmitCleanup) {
+            } : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver),
+            effectiveTransition = (0, import_pseudoTransitions.resolveEffectivePseudoTransition)(stateRef.current.prevPseudoState, updatedState, nextStyles?.pseudoTransitions, props.transition);
+          stateRef.current.prevPseudoState = (0, import_pseudoTransitions.extractPseudoState)(updatedState), useStyleListener(nextStyles?.style || {}, effectiveTransition);
+        }, componentContext.mediaEmitListeners = componentContext.mediaEmitListeners || /* @__PURE__ */new Set(), !stateRef.current.mediaEmitCleanup) {
           const updateListener = next => {
             stateRef.current.nextMedia = next, stateRef.current.updateStyleListener?.();
           };
@@ -389,9 +385,9 @@ ${banner}
             componentContext.mediaEmitListeners?.delete(updateListener);
           };
         }
-        componentContext.mediaEmit ||= next => {
+        componentContext.mediaEmit = componentContext.mediaEmit || (next => {
           for (const listener of componentContext.mediaEmitListeners) listener(next);
-        }, stateRef.current.setStateShallow = nextOrGetNext => {
+        }), stateRef.current.setStateShallow = nextOrGetNext => {
           const prev = stateRef.current.nextState || state,
             next = typeof nextOrGetNext == "function" ? nextOrGetNext(prev) : nextOrGetNext;
           if (next === prev || (0, import_is_equal_shallow.isEqualShallow)(prev, next)) return;
@@ -411,7 +407,7 @@ ${banner}
           stateRef.current.setStateShallow?.(state2);
         };
       }
-      process.env.NODE_ENV === "development" && time && time`split-styles`, splitStyles && (props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style ||= {}, splitStyles.style.opacity = 0), splitStyles.dynamicThemeAccess != null && (stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess));
+      process.env.NODE_ENV === "development" && time && time`split-styles`, splitStyles && (props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style = splitStyles.style || {}, splitStyles.style.opacity = 0), splitStyles.dynamicThemeAccess != null && (stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess));
       const hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== !0,
         shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClass && splitStyles?.hasMedia === !0,
         mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
@@ -452,32 +448,37 @@ ${banner}
           ...nonTamaguiProps
         } = viewPropsIn || {};
       let viewProps = nonTamaguiProps;
-      !isTaggable && props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && (typeof _themeProp < "u" && (viewProps.theme = _themeProp), typeof passThrough < "u" && (viewProps.passThrough = passThrough)), renderProp && elementType.acceptTagProp && (viewProps.render = renderProp);
+      props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && (typeof _themeProp < "u" && (viewProps.theme = _themeProp), typeof passThrough < "u" && (viewProps.passThrough = passThrough));
       let animationStyles;
       const shouldUseAnimation =
       // if it supports css vars we run it on server too to get matching initial style
-      (supportsCSS ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
+      (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
       let animatedRef;
       if (shouldUseAnimation) {
         const useStyleEmitter = animationDriver?.avoidReRenders ? listener => {
             stateRef.current.useStyleListener = listener;
           } : void 0,
-          animations = useAnimations({
-            props: propsWithAnimation,
-            // if hydrating, send empty style
-            style: splitStylesStyle || {},
-            // @ts-ignore
-            styleState: splitStyles,
-            useStyleEmitter,
-            presence,
-            componentState: state,
-            styleProps,
-            theme,
-            themeName,
-            pseudos: pseudos || null,
-            staticConfig,
-            stateRef
-          });
+          effectiveTransition = (0, import_pseudoTransitions.resolveEffectivePseudoTransition)(stateRef.current.prevPseudoState, state, splitStyles?.pseudoTransitions, props.transition);
+        splitStyles && (splitStyles.effectiveTransition = effectiveTransition), stateRef.current.prevPseudoState = (0, import_pseudoTransitions.extractPseudoState)(state);
+        const animations = useAnimations({
+          props: propsWithAnimation,
+          // clone style to prevent animation driver mutations from leaking to viewProps
+          // during SSR/pre-hydration (CSS driver mutates style.transition in place)
+          style: isHydrated ? splitStylesStyle || {} : {
+            ...splitStylesStyle
+          },
+          // @ts-ignore
+          styleState: splitStyles,
+          useStyleEmitter,
+          presence,
+          componentState: state,
+          styleProps,
+          theme,
+          themeName,
+          pseudos: pseudos || null,
+          staticConfig,
+          stateRef
+        });
         animations && (animations.ref && (animatedRef = animations.ref), isHydrated && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`))), process.env.NODE_ENV === "development" && time && time`animations`;
       }
       process.env.NODE_ENV === "development" && props.untilMeasured && !props.group && console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
@@ -522,7 +523,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           return;
         }
         if (state.unmounted) {
-          if (supportsCSS) {
+          if (inputStyle === "css") {
             let cancelled = !1;
             return requestAnimationFrame(() => {
               cancelled || requestAnimationFrame(() => {
@@ -541,7 +542,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         return () => {
           componentSetStates.delete(setState), stateRef.current.mediaEmitCleanup?.();
         };
-      }, [state.unmounted, supportsCSS]), (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      }, [state.unmounted, inputStyle]), (0, import_constants.useIsomorphicLayoutEffect)(() => {
         if (!disabled && !(!pseudoGroups && !mediaGroups) && allGroupContexts) return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
           groupContext: allGroupContexts,
           setStateShallow,
@@ -602,7 +603,9 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         ...(attachFocus && {
           onFocus: e => {
             const next = {};
-            componentContext.setParentFocusState && (next.focusWithin = !0), pseudos?.focusVisibleStyle && lastInteractionWasKeyboard.value ? next.focusVisible = !0 : next.focus = !0, setStateShallow(next), onFocus?.(e);
+            componentContext.setParentFocusState && (componentContext.setParentFocusState({
+              focusWithin: !0
+            }), next.focusWithin = !0), pseudos?.focusVisibleStyle && lastInteractionWasKeyboard.value ? next.focusVisible = !0 : next.focus = !0, setStateShallow(next), onFocus?.(e);
           },
           onBlur: e => {
             componentContext.setParentFocusState && componentContext.setParentFocusState({
@@ -621,9 +624,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         attachPress
       });
       const pressGesture = null;
-      process.env.NODE_ENV === "development" && time && time`hooks`;
-      let content = children;
-      if (asChild) {
+      if (process.env.NODE_ENV === "development" && time && time`hooks`, asChild) {
         elementType = import_Slot.Slot;
         {
           const passEvents = (0, import_eventHandling.getWebEvents)({
@@ -639,23 +640,21 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           Object.assign(viewProps, passEvents);
         }
       }
-      process.env.NODE_ENV === "development" && time && time`spaced-as-child`, isPassthrough && (content = propsIn.children, elementType = BaseViewComponent, viewProps = {
+      process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
+      let content;
+      if (isPassthrough) content = import_react.default.createElement(BaseComponent, {
         style: {
           display: "contents"
         }
-      });
-      let useChildrenResult;
-      if (import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(elementType, content, viewProps)), process.env.NODE_ENV === "development" && time && time`use-children`, useChildrenResult) content = useChildrenResult;else if (typeof renderProp == "function") {
-        const renderProps = {
-          ...viewProps,
-          children: content
-        };
-        content = renderProp(renderProps, state);
-      } else if (renderProp && typeof renderProp == "object" && import_react.default.isValidElement(renderProp)) {
-        const elementProps = renderProp.props || {},
-          mergedProps = (0, import_mergeRenderElementProps.mergeRenderElementProps)(elementProps, viewProps, content);
-        content = import_react.default.cloneElement(renderProp, mergedProps);
-      } else content = import_react.default.createElement(elementType, viewProps, content);
+      }, propsIn.children);else {
+        import_setupHooks.hooks.useChildren && (content = import_setupHooks.hooks.useChildren(elementType, content || children, viewProps));
+        const isRenderPropString = typeof renderProp == "string";
+        if (renderProp && !isRenderPropString) {
+          const out = getCustomRender(renderProp, content || children, viewProps, componentState);
+          out && (viewProps = out.viewProps, elementType = out.elementType);
+        }
+        content || (isRenderPropString && viewProps.render, content = import_react.default.createElement(elementType, viewProps, content || children)), process.env.NODE_ENV === "development" && time && time`use-children`;
+      }
       const ResetPresence = animationDriver?.ResetPresence,
         needsReset = !!(
         // not when passing down to child
@@ -668,7 +667,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       if (needsReset && !hasEverReset && (stateRef.current.hasEverResetPresence = !0), (needsReset || hasEverReset) && ResetPresence && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResetPresence, {
         disabled: !needsReset,
         children: content
-      })), process.env.NODE_ENV === "development" && time && time`create-element`, "focusWithinStyle" in propsIn && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+      })), process.env.NODE_ENV === "development" && time && time`create-element`, ("focusWithinStyle" in propsIn || pseudos?.focusWithinStyle) && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
         ...componentContext,
         setParentFocusState: setStateShallow,
         children: content
@@ -766,4 +765,18 @@ If you meant to do this, you can disable this warning - either change untilMeasu
   }
   return res.styleable = styleable, res;
 }
-const fromPx = val => typeof val == "number" ? val : typeof val == "string" ? +val.replace("px", "") : 0;
+const fromPx = val => typeof val == "number" ? val : typeof val == "string" ? +val.replace("px", "") : 0,
+  getCustomRender = (renderProp, content, viewProps, state) => {
+    if (typeof renderProp == "function") {
+      const out = renderProp(viewProps, state);
+      renderProp = out;
+    }
+    if (renderProp && typeof renderProp == "object" && import_react.default.isValidElement(renderProp) && renderProp) {
+      const elementProps = renderProp.props,
+        mergedProps = elementProps ? (0, import_mergeRenderElementProps.mergeRenderElementProps)(elementProps, viewProps, content) : viewProps;
+      return {
+        elementType: renderProp.type,
+        viewProps: mergedProps
+      };
+    }
+  };