@tamagui/web 1.92.0 → 1.93.0

package/dist/esm/createComponent.mjs

@@ -57,6 +57,115 @@ if (typeof document < "u") {
     }
   });
 }
+const useComponentState = (props, {
+  animationDriver,
+  groups
+}, staticConfig, config) => {
+  const useAnimations = animationDriver?.useAnimations,
+    stateRef = useRef({}),
+    hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)),
+    supportsCSSVars = animationDriver?.supportsCSSVars,
+    curStateRef = stateRef.current,
+    willBeAnimatedClient = !!(!!(hasAnimationProp && !staticConfig.isHOC && useAnimations) || curStateRef.hasAnimated),
+    willBeAnimated = !isServer && willBeAnimatedClient;
+  willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
+  const isHydrated = config?.disableSSR ? !0 : useDidFinishSSR(),
+    presence = willBeAnimated && props.animatePresence !== !1 && animationDriver?.usePresence?.() || null,
+    presenceState = presence?.[2],
+    isExiting = presenceState?.isPresent === !1,
+    isEntering = presenceState?.isPresent === !0 && presenceState.initial !== !1,
+    hasEnterStyle = !!props.enterStyle,
+    hasRNAnimation = hasAnimationProp && animationDriver?.isReactNative,
+    isReactNative = staticConfig.isReactNative;
+  let isAnimated = willBeAnimated;
+  !isReactNative && hasRNAnimation && !staticConfig.isHOC && !isHydrated && (isAnimated = !1, curStateRef.willHydrate = !0), process.env.NODE_ENV === "development" && time && time`pre-use-state`;
+  const hasEnterState = hasEnterStyle || isEntering,
+    needsToMount = !isHydrated || !curStateRef.host,
+    initialState = hasEnterState ? needsToMount ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted,
+    disabled = isDisabled(props);
+  disabled != null && (initialState.disabled = disabled);
+  const states = useState(initialState),
+    state = props.forceStyle ? {
+      ...states[0],
+      [props.forceStyle]: !0
+    } : states[0],
+    setState = states[1];
+  disabled !== state.disabled && setState({
+    ...state,
+    ...defaultComponentState,
+    // removes any stale press state etc
+    disabled
+  });
+  let setStateShallow = createShallowSetState(setState, disabled, props.debug);
+  if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
+    process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
+    const {
+      enterVariant,
+      exitVariant,
+      enterExitVariant,
+      custom
+    } = presenceState;
+    isObj(custom) && Object.assign(props, custom);
+    const exv = exitVariant ?? enterExitVariant,
+      env = enterVariant ?? enterExitVariant;
+    state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence ENTER "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
+  }
+  const shouldAvoidClasses = !!(!isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName ||
+    // on server for SSR and animation compat added the && isHydrated but perhaps we want
+    // disableClassName="until-hydrated" to be more straightforward
+    // see issue if not, Button sets disableClassName to true <Button animation="" /> with
+    // the react-native driver errors because it tries to animate var(--color) to rbga(..)
+    props.disableClassName && isHydrated),
+    groupName = props.group;
+  if (groupName && !curStateRef.group) {
+    const listeners = /* @__PURE__ */new Set();
+    curStateRef.group = {
+      listeners,
+      emit(name, state2) {
+        listeners.forEach(l => l(name, state2));
+      },
+      subscribe(cb) {
+        return listeners.add(cb), () => {
+          listeners.delete(cb);
+        };
+      }
+    };
+  }
+  if (groupName) {
+    const groupContextState = groups.state,
+      og = setStateShallow;
+    setStateShallow = state2 => {
+      og(state2), curStateRef.group.emit(groupName, {
+        pseudo: state2
+      });
+      const next = {
+        ...groupContextState[groupName],
+        ...state2
+      };
+      groupContextState[groupName] = next;
+    };
+  }
+  return {
+    curStateRef,
+    disabled,
+    groupName,
+    hasAnimationProp,
+    hasEnterStyle,
+    isAnimated,
+    isExiting,
+    isHydrated,
+    presence,
+    presenceState,
+    setState,
+    setStateShallow,
+    shouldAvoidClasses,
+    state,
+    stateRef,
+    supportsCSSVars,
+    willBeAnimated,
+    willBeAnimatedClient
+  };
+};
 let BaseText, BaseView;
 const lastInteractionWasKeyboard = {
   value: !1
@@ -86,7 +195,6 @@ function createComponent(staticConfig) {
   const {
     Component,
     isText,
-    isInput,
     isZStack,
     isHOC,
     validStyles: validStyles2 = {},
@@ -103,7 +211,8 @@ function createComponent(staticConfig) {
     const componentContext = useContext(ComponentContext);
     let styledContextProps, overriddenContextProps, contextValue;
     const {
-      context
+      context,
+      isReactNative
     } = staticConfig;
     if (context) {
       contextValue = useContext(context);
@@ -128,7 +237,7 @@ function createComponent(staticConfig) {
     process.env.NODE_ENV === "development" && isClient && useEffect(() => {
       let overlay = null;
       const debugVisualizerHandler = (show = !1) => {
-        const node = curState.host;
+        const node = curStateRef.host;
         if (node) if (show) {
           overlay = document.createElement("span"), overlay.style.inset = "0px", overlay.style.zIndex = "1000000", overlay.style.position = "absolute", overlay.style.borderColor = "red", overlay.style.borderWidth = "1px", overlay.style.borderStyle = "dotted";
           const dataAt = node.getAttribute("data-at") || "",
@@ -140,97 +249,31 @@ function createComponent(staticConfig) {
       return debugKeyListeners ||= /* @__PURE__ */new Set(), debugKeyListeners.add(debugVisualizerHandler), () => {
         debugKeyListeners?.delete(debugVisualizerHandler);
       };
-    }, [componentName2]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time && (time = require("@tamagui/timer").timer().start()), process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
-    const stateRef = useRef({});
-    process.env.NODE_ENV === "development" && time && time`stateref`;
-    const animationsConfig = componentContext.animationDriver,
-      useAnimations = animationsConfig?.useAnimations,
-      hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)),
-      supportsCSSVars = animationsConfig?.supportsCSSVars,
-      curState = stateRef.current,
-      willBeAnimatedClient = !!(!!(hasAnimationProp && !isHOC && useAnimations) || curState.hasAnimated),
-      willBeAnimated = !isServer && willBeAnimatedClient;
-    willBeAnimated && !curState.hasAnimated && (curState.hasAnimated = !0);
-    const isHydrated = config?.disableSSR ? !0 : useDidFinishSSR(),
-      presence = willBeAnimated && props.animatePresence !== !1 && animationsConfig?.usePresence?.() || null,
-      presenceState = presence?.[2],
-      isExiting = presenceState?.isPresent === !1,
-      isEntering = presenceState?.isPresent === !0 && presenceState.initial !== !1,
-      hasEnterStyle = !!props.enterStyle,
-      hasRNAnimation = hasAnimationProp && animationsConfig?.isReactNative,
-      isReactNative = staticConfig.isReactNative;
-    let isAnimated = willBeAnimated;
-    !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0), process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-    const hasEnterState = hasEnterStyle || isEntering,
-      needsToMount = !isHydrated || !curState.host,
-      initialState = hasEnterState ? needsToMount ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted,
-      disabled = props.disabled || props.accessibilityState?.disabled || props["aria-disabled"] ||
-      // @ts-expect-error (comes from core)
-      props.accessibilityDisabled || !1;
-    disabled != null && (initialState.disabled = disabled);
-    const states = useState(initialState),
-      state = props.forceStyle ? {
-        ...states[0],
-        [props.forceStyle]: !0
-      } : states[0],
-      setState = states[1];
-    disabled !== state.disabled && setState({
-      ...state,
-      ...defaultComponentState,
-      // removes any stale press state etc
-      disabled
-    });
-    let setStateShallow = createShallowSetState(setState, disabled, debugProp);
-    if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
-      process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
-      const {
-        enterVariant,
-        exitVariant,
-        enterExitVariant,
-        custom
-      } = presenceState;
-      isObj(custom) && Object.assign(props, custom);
-      const exv = exitVariant ?? enterExitVariant,
-        env = enterVariant ?? enterExitVariant;
-      state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
-    }
-    const shouldAvoidClasses = !!(!isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName ||
-      // on server for SSR and animation compat added the && isHydrated but perhaps we want
-      // disableClassName="until-hydrated" to be more straightforward
-      // see issue if not, Button sets disableClassName to true <Button animation="" /> with
-      // the react-native driver errors because it tries to animate var(--color) to rbga(..)
-      propsIn.disableClassName && isHydrated),
+    }, [componentName2]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time && (time = require("@tamagui/timer").timer().start()), process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`, process.env.NODE_ENV === "development" && time && time`stateref`;
+    const animationDriver = componentContext.animationDriver,
+      useAnimations = animationDriver?.useAnimations,
+      {
+        curStateRef,
+        disabled,
+        groupName,
+        hasAnimationProp,
+        hasEnterStyle,
+        isAnimated,
+        isExiting,
+        isHydrated,
+        presence,
+        presenceState,
+        setState,
+        setStateShallow,
+        shouldAvoidClasses,
+        state,
+        stateRef,
+        supportsCSSVars,
+        willBeAnimated,
+        willBeAnimatedClient
+      } = useComponentState(props, componentContext, staticConfig, config),
       shouldForcePseudo = !!propsIn.forceStyle,
-      noClassNames = shouldAvoidClasses || shouldForcePseudo,
-      groupName = props.group;
-    if (groupName && !curState.group) {
-      const listeners = /* @__PURE__ */new Set();
-      curState.group = {
-        listeners,
-        emit(name, state2) {
-          listeners.forEach(l => l(name, state2));
-        },
-        subscribe(cb) {
-          return listeners.add(cb), () => {
-            listeners.delete(cb);
-          };
-        }
-      };
-    }
-    if (groupName) {
-      const groupContextState = componentContext.groups.state,
-        og = setStateShallow;
-      setStateShallow = state2 => {
-        og(state2), curState.group.emit(groupName, {
-          pseudo: state2
-        });
-        const next = {
-          ...groupContextState[groupName],
-          ...state2
-        };
-        groupContextState[groupName] = next;
-      };
-    }
+      noClassNames = shouldAvoidClasses || shouldForcePseudo;
     process.env.NODE_ENV === "development" && time && time`use-state`;
     const hasTextAncestor = !!(isWeb && isText && componentContext.inText);
     process.env.NODE_ENV === "development" && time && time`use-context`;
@@ -238,18 +281,18 @@ function createComponent(staticConfig) {
       tagProp = props.tag,
       element = isWeb && isTaggable && tagProp || Component;
     let elementType = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
-    animationsConfig && isAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType);
+    animationDriver && isAnimated && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
     const disableTheme = props["data-disable-theme"] || isHOC;
-    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curState.themeShallow = !0);
+    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curStateRef.themeShallow = !0);
     const themeStateProps = {
       name: props.theme,
       componentName: componentName2,
       disable: disableTheme,
-      shallow: curState.themeShallow,
+      shallow: curStateRef.themeShallow,
       inverse: props.themeInverse,
       debug: debugProp
     };
-    if (typeof curState.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+    if (typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
       const name = `${componentName2 || Component?.displayName || Component?.name || "[Unnamed Component]"}`,
         type = (hasEnterStyle ? "(hasEnter)" : "") + (isAnimated ? "(animated)" : "") + (isReactNative ? "(rnw)" : "") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""),
         dataIs = propsIn["data-is"] || "",
@@ -300,7 +343,7 @@ function createComponent(staticConfig) {
         isAnimated
       },
       splitStyles = useSplitStyles(props, staticConfig, theme, themeState?.state?.name || "", state, styleProps, null, componentContext, elementType, debugProp);
-    props.group && props.untilMeasured === "hide" && !curState.hasMeasured && (splitStyles.style ||= {}, splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, curState.isListeningToTheme = splitStyles.dynamicThemeAccess;
+    props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured && (splitStyles.style ||= {}, splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
     const isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia),
       shouldListenForMedia = didGetVariableValue() || isMediaArray || noClassNames && splitStyles.hasMedia === !0,
       mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
@@ -371,7 +414,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(prev => ({
         ...prev
       })), stateRef.current.hasMeasured = !0;
-    })), viewProps = hooks.usePropsTransform?.(elementType, nonTamaguiProps, stateRef, curState.willHydrate) || nonTamaguiProps, curState.composedRef || (curState.composedRef = composeRefs(x => stateRef.current.host = x, forwardedRef)), viewProps.ref = curState.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && isWeb && !isHOC && Children.toArray(props.children).forEach(item => {
+    })), viewProps = hooks.usePropsTransform?.(elementType, nonTamaguiProps, stateRef, curStateRef.willHydrate) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = composeRefs(x => stateRef.current.host = x, forwardedRef)), viewProps.ref = curStateRef.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && isWeb && !isHOC && Children.toArray(props.children).forEach(item => {
       typeof item == "string" && item !== `
 ` && console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
     }), process.env.NODE_ENV === "development" && time && time`events-hooks`;
@@ -379,50 +422,31 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       pseudoGroups,
       mediaGroups
     } = splitStyles;
-    curState.unPress || (curState.unPress = () => setStateShallow({
+    curStateRef.unPress || (curStateRef.unPress = () => setStateShallow({
       press: !1,
       pressIn: !1
     }));
-    const unPress = curState.unPress,
-      shouldEnter = state.unmounted;
+    const unPress = curStateRef.unPress;
     useEffect(() => {
       if (disabled) return;
-      if (shouldEnter) {
+      if (state.unmounted) {
         setStateShallow({
           unmounted: !1
         });
         return;
       }
-      let disposeGroupsListener;
-      if (pseudoGroups || mediaGroups) {
-        const current = {
-          pseudo: {},
-          media: {}
-        };
-        process.env.NODE_ENV === "development" && !componentContext.groups && console.debug("No context group found"), disposeGroupsListener = componentContext.groups?.subscribe((name, {
-          layout,
-          pseudo
-        }) => {
-          if (pseudo && pseudoGroups?.has(name)) Object.assign(current.pseudo, pseudo), persist();else if (layout && mediaGroups) {
-            const mediaState2 = getMediaState(mediaGroups, layout),
-              next = mergeIfNotShallowEqual(current.media, mediaState2);
-            next !== current.media && (Object.assign(current.media, next), persist());
-          }
-          function persist() {
-            const group = {
-              ...state.group,
-              [name]: current
-            };
-            setStateShallow({
-              group
-            });
-          }
-        });
-      }
+      const dispose = subscribeToContextGroup({
+        disabled,
+        componentContext,
+        setStateShallow,
+        state,
+        mediaGroups,
+        pseudoGroups
+      });
       return () => {
-        disposeGroupsListener?.(), mouseUps.delete(unPress);
+        dispose?.(), mouseUps.delete(unPress);
       };
-    }, [disabled, shouldEnter, pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0, mediaGroups ? Object.keys([...mediaGroups]).join("") : 0]);
+    }, [disabled, pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0, mediaGroups ? Object.keys([...mediaGroups]).join("") : 0]);
     const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle,
       runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle,
       runtimeFocusVisibleStyle = !disabled && noClassNames && pseudos?.focusVisibleStyle,
@@ -515,7 +539,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */jsx(ResetPresence, {
       children: content
     })), process.env.NODE_ENV === "development" && time && time`create-element`;
-    const groupState = curState.group,
+    const groupState = curStateRef.group,
       subGroupContext = useMemo(() => {
         if (!(!groupState || !groupName)) return groupState.listeners.clear(), {
           ...componentContext.groups,
@@ -572,7 +596,6 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             defaultProps,
             elementType,
             events,
-            initialState,
             isAnimated,
             isMediaArray,
             isStringElement,
@@ -779,5 +802,40 @@ function hasAnimatedStyleValue(style) {
 function getMediaState(mediaGroups, layout) {
   return Object.fromEntries([...mediaGroups].map(mediaKey => [mediaKey, mediaKeyMatch(mediaKey, layout)]));
 }
-const fromPx = val => typeof val != "string" ? val : +val.replace("px", "");
-export { Spacer, Unspaced, createComponent, mouseUps, spacedChildren };
+const fromPx = val => typeof val != "string" ? val : +val.replace("px", ""),
+  isDisabled = props => props.disabled || props.accessibilityState?.disabled || props["aria-disabled"] || props.accessibilityDisabled || !1,
+  subscribeToContextGroup = ({
+    disabled = !1,
+    setStateShallow,
+    pseudoGroups,
+    mediaGroups,
+    componentContext,
+    state
+  }) => {
+    if (pseudoGroups || mediaGroups) {
+      const current = {
+        pseudo: {},
+        media: {}
+      };
+      return process.env.NODE_ENV === "development" && !componentContext.groups && console.debug("No context group found"), componentContext.groups?.subscribe((name, {
+        layout,
+        pseudo
+      }) => {
+        if (pseudo && pseudoGroups?.has(name)) Object.assign(current.pseudo, pseudo), persist();else if (layout && mediaGroups) {
+          const mediaState = getMediaState(mediaGroups, layout),
+            next = mergeIfNotShallowEqual(current.media, mediaState);
+          next !== current.media && (Object.assign(current.media, next), persist());
+        }
+        function persist() {
+          const group = {
+            ...state.group,
+            [name]: current
+          };
+          setStateShallow({
+            group
+          });
+        }
+      });
+    }
+  };
+export { Spacer, Unspaced, createComponent, isDisabled, mouseUps, spacedChildren, subscribeToContextGroup, useComponentState };