@tamagui/web 1.130.2 → 1.130.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.130.2",
+  "version": "1.130.4",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,16 +27,16 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.130.2",
-    "@tamagui/constants": "1.130.2",
-    "@tamagui/helpers": "1.130.2",
-    "@tamagui/is-equal-shallow": "1.130.2",
-    "@tamagui/normalize-css-color": "1.130.2",
-    "@tamagui/timer": "1.130.2",
-    "@tamagui/types": "1.130.2",
-    "@tamagui/use-did-finish-ssr": "1.130.2",
-    "@tamagui/use-event": "1.130.2",
-    "@tamagui/use-force-update": "1.130.2"
+    "@tamagui/compose-refs": "1.130.4",
+    "@tamagui/constants": "1.130.4",
+    "@tamagui/helpers": "1.130.4",
+    "@tamagui/is-equal-shallow": "1.130.4",
+    "@tamagui/normalize-css-color": "1.130.4",
+    "@tamagui/timer": "1.130.4",
+    "@tamagui/types": "1.130.4",
+    "@tamagui/use-did-finish-ssr": "1.130.4",
+    "@tamagui/use-event": "1.130.4",
+    "@tamagui/use-force-update": "1.130.4"
   },
   "peerDependencies": {
     "react": "*",
@@ -44,7 +44,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.130.2",
+    "@tamagui/build": "1.130.4",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "*",

package/src/createComponent.tsx

@@ -1268,17 +1268,10 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`spaced-as-child`
 
-    let useChildrenResult: any
-    if (hooks.useChildren) {
-      useChildrenResult = hooks.useChildren(elementType, content, viewProps)
-    }
-
-    if (process.env.NODE_ENV === 'development' && time) time`use-children`
-
     // passthrough mode - only pass style display contents, nothing else
     if (!splitStyles) {
-      elementType = 'span'
       content = propsIn.children
+      elementType = BaseViewComponent
       viewProps = {
         style: {
           display: 'contents',
@@ -1286,6 +1279,13 @@ export function createComponent<
       }
     }
 
+    let useChildrenResult: any
+    if (hooks.useChildren) {
+      useChildrenResult = hooks.useChildren(elementType, content, viewProps)
+    }
+
+    if (process.env.NODE_ENV === 'development' && time) time`use-children`
+
     if (useChildrenResult) {
       content = useChildrenResult
     } else {

package/src/views/Theme.tsx

@@ -13,12 +13,9 @@ import {
 import type { ThemeProps } from '../types'
 import { ThemeDebug } from './ThemeDebug'
 
-const empty = { className: '', style: {} }
+type ThemeComponentPropsOnly = ThemeProps & { passThrough?: boolean; contain?: boolean }
 
-export const Theme = forwardRef(function Theme(
-  props: ThemeProps & { passThrough?: boolean },
-  ref
-) {
+export const Theme = forwardRef(function Theme(props: ThemeComponentPropsOnly, ref) {
   // @ts-expect-error only for internal views
   if (props.disable) {
     return props.children
@@ -67,7 +64,7 @@ Theme['avoidForwardRef'] = true
 export function getThemedChildren(
   themeState: ThemeState,
   children: any,
-  props: ThemeProps,
+  props: ThemeComponentPropsOnly,
   isRoot = false,
   stateRef: MutableRefObject<{ hasEverThemed?: boolean | 'wrapped' }>,
   passThrough = false
@@ -147,7 +144,7 @@ export function getThemedChildren(
         forceClassName,
         themeState,
         state,
-        ...getThemeClassNameAndStyle(themeState, props, isRoot),
+        themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot),
       })
     }
   }
@@ -157,14 +154,15 @@ export function getThemedChildren(
   }
 
   if (isWeb) {
-    const { className = '', style } = passThrough
+    const baseStyle = props.contain ? inertContainedStyle : inertStyle
+    const { className = '', color } = passThrough
       ? {}
-      : getThemeClassNameAndStyle(themeState, props, isRoot)
+      : getThemeClassNameAndColor(themeState, props, isRoot)
 
     children = (
       <span
-        className={`${className} _dsp_contents is_Theme`}
-        style={passThrough ? undefined : style}
+        className={`${className} is_Theme`}
+        style={passThrough ? baseStyle : { color, ...baseStyle }}
       >
         {children}
       </span>
@@ -183,9 +181,13 @@ export function getThemedChildren(
                     ? 't_dark is_inversed'
                     : ''
                 : ''
-            } _dsp_contents`
-          : `_dsp_contents`
-      children = <span className={className}>{children}</span>
+            } `
+          : ``
+      children = (
+        <span style={baseStyle} className={className}>
+          {children}
+        </span>
+      )
     }
 
     return children
@@ -194,7 +196,18 @@ export function getThemedChildren(
   return children
 }
 
-function getThemeClassNameAndStyle(
+const inertStyle = {
+  display: 'contents',
+}
+
+const inertContainedStyle = {
+  display: 'contents',
+  contain: 'strict',
+}
+
+const empty = { className: '', color: undefined }
+
+function getThemeClassNameAndColor(
   themeState: ThemeState,
   props: ThemeProps,
   isRoot = false
@@ -207,12 +220,6 @@ function getThemeClassNameAndStyle(
   const themeColor =
     themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : ''
 
-  const style = themeColor
-    ? {
-        color: themeColor,
-      }
-    : undefined
-
   const maxInverses = getSetting('maxDarkLightNesting') || 3
   const themeClassName =
     themeState.inverses >= maxInverses
@@ -221,7 +228,7 @@ function getThemeClassNameAndStyle(
 
   const className = `${isRoot ? '' : 't_sub_theme'} t_${themeClassName}`
 
-  return { style, className }
+  return { color: themeColor, className }
 }
 
 const schemePrefix = /^(dark|light)_/

package/types/views/Theme.d.ts

@@ -2,10 +2,16 @@ import type { MutableRefObject } from 'react';
 import React from 'react';
 import { type ThemeState } from '../hooks/useThemeState';
 import type { ThemeProps } from '../types';
+type ThemeComponentPropsOnly = ThemeProps & {
+    passThrough?: boolean;
+    contain?: boolean;
+};
 export declare const Theme: React.ForwardRefExoticComponent<ThemeProps & {
     passThrough?: boolean;
+    contain?: boolean;
 } & React.RefAttributes<unknown>>;
-export declare function getThemedChildren(themeState: ThemeState, children: any, props: ThemeProps, isRoot: boolean | undefined, stateRef: MutableRefObject<{
+export declare function getThemedChildren(themeState: ThemeState, children: any, props: ThemeComponentPropsOnly, isRoot: boolean | undefined, stateRef: MutableRefObject<{
     hasEverThemed?: boolean | 'wrapped';
 }>, passThrough?: boolean): any;
+export {};
 //# sourceMappingURL=Theme.d.ts.map

package/types/views/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAqE,MAAM,OAAO,CAAA;AAIzF,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAK1C,eAAO,MAAM,KAAK;kBACoB,OAAO;iCA4C3C,CAAA;AAIF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,UAAU,EACjB,MAAM,qBAAQ,EACd,QAAQ,EAAE,gBAAgB,CAAC;IAAE,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,CAAC,EACnE,WAAW,UAAQ,OA0HpB"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAqE,MAAM,OAAO,CAAA;AAIzF,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAExF,eAAO,MAAM,KAAK;kBAF0C,OAAO;cAAY,OAAO;iCA4CpF,CAAA;AAIF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,uBAAuB,EAC9B,MAAM,qBAAQ,EACd,QAAQ,EAAE,gBAAgB,CAAC;IAAE,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,CAAC,EACnE,WAAW,UAAQ,OA+HpB"}