@tamagui/web 1.68.5 → 1.69.0

package/dist/esm/index.js

@@ -49,13 +49,11 @@ import {
   mediaState,
   useMedia,
   getMedia,
-  useMediaPropsActive,
   mediaObjectToString,
   mediaQueryConfig
 } from "./hooks/useMedia";
 export * from "./hooks/useTheme";
 export * from "./hooks/useThemeName";
-export * from "./hooks/useStyle";
 export * from "./hooks/useAnimationDriver";
 export * from "./hooks/useIsTouchDevice";
 export * from "./hooks/useProps";
@@ -87,7 +85,6 @@ export {
   mediaState,
   setupDev,
   updateConfig,
-  useMedia,
-  useMediaPropsActive
+  useMedia
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;",
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.68.5",
+  "version": "1.69.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.68.5",
-    "@tamagui/constants": "1.68.5",
-    "@tamagui/helpers": "1.68.5",
-    "@tamagui/normalize-css-color": "1.68.5",
-    "@tamagui/timer": "1.68.5",
-    "@tamagui/use-did-finish-ssr": "1.68.5",
-    "@tamagui/use-force-update": "1.68.5"
+    "@tamagui/compose-refs": "1.69.0",
+    "@tamagui/constants": "1.69.0",
+    "@tamagui/helpers": "1.69.0",
+    "@tamagui/normalize-css-color": "1.69.0",
+    "@tamagui/timer": "1.69.0",
+    "@tamagui/use-did-finish-ssr": "1.69.0",
+    "@tamagui/use-force-update": "1.69.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.68.5",
+    "@tamagui/build": "1.69.0",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -580,7 +580,7 @@ export function createComponent<
 
     setDidGetVariableValue(false)
 
-    const resolveVariablesAs =
+    const resolveValues =
       // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
       (isAnimated && !supportsCSSVars) ||
       (isHOC && state.unmounted == false && hasAnimationProp)
@@ -593,7 +593,7 @@ export function createComponent<
     const styleProps = {
       mediaState,
       noClassNames,
-      resolveVariablesAs,
+      resolveValues,
       isExiting,
       isAnimated,
       keepStyleSSR,
@@ -713,15 +713,15 @@ export function createComponent<
     const {
       asChild,
       children,
+      themeShallow,
+      spaceDirection: _spaceDirection,
+      disabled: disabledProp,
       onPress,
       onLongPress,
       onPressIn,
       onPressOut,
       onHoverIn,
       onHoverOut,
-      themeShallow,
-      spaceDirection: _spaceDirection,
-      disabled: disabledProp,
       onMouseUp,
       onMouseDown,
       onMouseEnter,
@@ -950,16 +950,9 @@ export function createComponent<
         onClick
     )
     const runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle
+    const needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut
     const isHoverable =
-      isWeb &&
-      !!(
-        groupName ||
-        runtimeHoverStyle ||
-        onHoverIn ||
-        onHoverOut ||
-        onMouseEnter ||
-        onMouseLeave
-      )
+      isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave)
 
     const handlesPressEvents = !(isWeb || asChild)
 
@@ -975,7 +968,7 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && time) time`events-setup`
 
     const events: TamaguiComponentEvents | null =
-      shouldAttach && !isDisabled && !asChild
+      shouldAttach && !isDisabled && !props.asChild
         ? {
             onPressOut: attachPress
               ? (e) => {
@@ -987,9 +980,13 @@ export function createComponent<
             ...((isHoverable || attachPress) && {
               onMouseEnter: (e) => {
                 const next: Partial<typeof state> = {}
-                next.hover = true
-                if (state.pressIn) {
-                  next.press = true
+                if (needsHoverState) {
+                  next.hover = true
+                }
+                if (runtimePressStyle) {
+                  if (state.pressIn) {
+                    next.press = true
+                  }
                 }
                 setStateShallow(next)
                 onHoverIn?.(e)
@@ -998,10 +995,14 @@ export function createComponent<
               onMouseLeave: (e) => {
                 const next: Partial<typeof state> = {}
                 mouseUps.add(unPress)
-                next.hover = false
-                if (state.pressIn) {
-                  next.press = false
-                  next.pressIn = false
+                if (needsHoverState) {
+                  next.hover = false
+                }
+                if (runtimePressStyle) {
+                  if (state.pressIn) {
+                    next.press = false
+                    next.pressIn = false
+                  }
                 }
                 setStateShallow(next)
                 onHoverOut?.(e)
@@ -1010,10 +1011,12 @@ export function createComponent<
             }),
             onPressIn: attachPress
               ? (e) => {
-                  setStateShallow({
-                    press: true,
-                    pressIn: true,
-                  })
+                  if (runtimePressStyle) {
+                    setStateShallow({
+                      press: true,
+                      pressIn: true,
+                    })
+                  }
                   onPressIn?.(e)
                   onMouseDown?.(e)
                   if (isWeb) {
@@ -1044,7 +1047,7 @@ export function createComponent<
           }
         : null
 
-    if (process.env.TAMAGUI_TARGET === 'native' && events) {
+    if (process.env.TAMAGUI_TARGET === 'native' && events && !asChild) {
       // replicating TouchableWithoutFeedback
       Object.assign(events, {
         cancelable: !viewProps.rejectResponderTermination,
@@ -1072,9 +1075,6 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`hooks`
 
-    // since we re-render without changing children often for animations or on mount
-    // we memo children here. tested this on the site homepage which has hundreds of components
-    // and i see no difference in startup performance, but i do see it memoing often
     let content =
       !children || asChild
         ? children
@@ -1089,12 +1089,27 @@ export function createComponent<
 
     if (asChild) {
       elementType = Slot
-      Object.assign(viewProps, {
-        onPress,
-        onLongPress,
-        onPressIn,
-        onPressOut,
-      })
+      // on native this is already merged into viewProps in hooks.useEvents
+      if (process.env.TAMAGUI_TARGET === 'web') {
+        const passEvents = {
+          onPress,
+          onLongPress,
+          onPressIn,
+          onPressOut,
+          onHoverIn,
+          onHoverOut,
+          onMouseUp,
+          onMouseDown,
+          onMouseEnter,
+          onMouseLeave,
+        }
+        Object.assign(
+          viewProps,
+          asChild === 'web' || asChild === 'except-style-web'
+            ? getWebEvents(passEvents as any)
+            : passEvents
+        )
+      }
     }
 
     if (process.env.NODE_ENV === 'development' && time) time`spaced-as-child`
@@ -1168,15 +1183,7 @@ export function createComponent<
         content = (
           <span
             className={`${isAnimatedReactNativeWeb ? className : ''} _dsp_contents`}
-            {...(events && {
-              onMouseEnter: events.onMouseEnter,
-              onMouseLeave: events.onMouseLeave,
-              onClick: events.onPress,
-              onMouseDown: events.onPressIn,
-              onMouseUp: events.onPressOut,
-              onTouchStart: events.onPressIn,
-              onTouchEnd: events.onPressOut,
-            })}
+            {...(events && getWebEvents(events))}
           >
             {content}
           </span>
@@ -1315,6 +1322,18 @@ export function createComponent<
   return res
 }
 
+function getWebEvents<E extends TamaguiComponentEvents>(events: E) {
+  return {
+    onMouseEnter: events.onMouseEnter,
+    onMouseLeave: events.onMouseLeave,
+    onClick: events.onPress,
+    onMouseDown: events.onPressIn,
+    onMouseUp: events.onPressOut,
+    onTouchStart: events.onPressIn,
+    onTouchEnd: events.onPressOut,
+  }
+}
+
 // for elements to avoid spacing
 export function Unspaced(props: { children?: any }) {
   return props.children

package/src/helpers/createStyledContext.tsx

@@ -7,38 +7,61 @@ export type StyledContext<Props extends Object = any> = Omit<
   'Provider'
 > & {
   context: React.Context<Props>
-  props: Object
+  props: Object | undefined
   Provider: React.ProviderExoticComponent<
-    Partial<Props> & {
+    Partial<Props | undefined> & {
       children?: React.ReactNode
+      scope?: string
     }
   >
+  useStyledContext: (scope?: string) => Props
 }
 
 export function createStyledContext<VariantProps extends Record<string, any>>(
-  props: VariantProps
+  defaultValues?: VariantProps
 ): StyledContext<VariantProps> {
-  const OGContext = createContext<VariantProps>(props)
+  const OGContext = createContext<VariantProps | undefined>(defaultValues)
   const OGProvider = OGContext.Provider
   const Context = OGContext as any as StyledContext<VariantProps>
+  const scopedContexts = new Map<string, React.Context<VariantProps | undefined>>()
 
   const Provider = ({
     children,
+    scope,
     ...values
-  }: VariantProps & { children?: React.ReactNode }) => {
+  }: VariantProps & { children?: React.ReactNode; scope: string }) => {
     const value = useMemo(() => {
       return {
-        ...props,
+        // this ! is a workaround for ts error
+        ...defaultValues!,
         ...values,
       }
     }, [objectIdentityKey(values)])
-    return <OGProvider value={value}>{children}</OGProvider>
+    let Provider = OGProvider
+    if (scope) {
+      let ScopedContext = scopedContexts.get(scope)
+      if (!ScopedContext) {
+        ScopedContext = createContext<VariantProps | undefined>(defaultValues)
+        scopedContexts.set(scope, ScopedContext)
+      }
+      Provider = ScopedContext.Provider
+    }
+    return <Provider value={value}>{children}</Provider>
+  }
+
+  // use consumerComponent just to give a better error message
+  const useStyledContext = (scope?: string) => {
+    const context = scope ? scopedContexts.get(scope) : OGContext
+    return useContext(context!) as VariantProps
   }
 
   // @ts-ignore
   Context.Provider = Provider
-  Context.props = props
-  Context.context = OGContext
+  Context.props = defaultValues
+  Context.context = OGContext as React.Context<VariantProps>
+  Context.useStyledContext = useStyledContext
 
   return Context
 }
+
+export type ScopedProps<P, K extends string> = P & { [Key in `__scope${K}`]?: string }