@tamagui/core 1.2.2 → 1.2.4

package/src/createComponent.tsx

@@ -497,7 +497,9 @@ export function createComponent<
         } as any)
       }
 
-      if (props.href !== undefined && hrefAttrs !== undefined) {
+      // TODO move into getSplitStyles inital `if (process.env.TAMAGUI_TARGET === 'web')` block
+
+      if (viewProps.href !== undefined && hrefAttrs !== undefined) {
         const { download, rel, target } = hrefAttrs
         if (download != null) {
           viewProps.download = download
@@ -512,39 +514,42 @@ export function createComponent<
 
       // FOCUS
       // "focusable" indicates that an element may be a keyboard tab-stop.
-      const _focusable = focusable !== undefined ? focusable : accessible
-      const role = viewProps.role
-      if (_focusable === false) {
-        viewProps.tabIndex = '-1'
-      }
-      if (
-        // These native elements are focusable by default
-        elementType === 'a' ||
-        elementType === 'button' ||
-        elementType === 'input' ||
-        elementType === 'select' ||
-        elementType === 'textarea'
-      ) {
-        if (_focusable === false || accessibilityDisabled === true) {
+      // ported from RNW: TODO move into getSplitStyles
+      if (!viewProps.tabIndex) {
+        const _focusable = focusable !== undefined ? focusable : accessible
+        const role = viewProps.role
+        if (_focusable === false) {
           viewProps.tabIndex = '-1'
         }
-      } else if (
-        // These roles are made focusable by default
-        role === 'button' ||
-        role === 'checkbox' ||
-        role === 'link' ||
-        role === 'radio' ||
-        role === 'textbox' ||
-        role === 'switch'
-      ) {
-        if (_focusable !== false) {
+        if (
+          // These native elements are focusable by default
+          elementType === 'a' ||
+          elementType === 'button' ||
+          elementType === 'input' ||
+          elementType === 'select' ||
+          elementType === 'textarea'
+        ) {
+          if (_focusable === false || accessibilityDisabled === true) {
+            viewProps.tabIndex = '-1'
+          }
+        } else if (
+          // These roles are made focusable by default
+          role === 'button' ||
+          role === 'checkbox' ||
+          role === 'link' ||
+          role === 'radio' ||
+          role === 'textbox' ||
+          role === 'switch'
+        ) {
+          if (_focusable !== false) {
+            viewProps.tabIndex = '0'
+          }
+        }
+        // Everything else must explicitly set the prop
+        if (_focusable === true) {
           viewProps.tabIndex = '0'
         }
       }
-      // Everything else must explicitly set the prop
-      if (_focusable === true) {
-        viewProps.tabIndex = '0'
-      }
     } else {
       viewProps = nonTamaguiProps
     }

package/src/helpers/createPropMapper.ts

@@ -286,37 +286,49 @@ const resolveTokensAndVariants: StyleResolver = (
     const fKey = conf.shorthands[rKey] || rKey
     const val = value[rKey]
 
-    if (isVariable(val)) {
-      res[fKey] = !isWeb || returnVariablesAs === 'value' ? val.val : val.variable
-    } else if (variants[fKey]) {
+    if (fKey in variants) {
       // avoids infinite loop if variant is matching a style prop
       // eg: { variants: { flex: { true: { flex: 2 } } } }
-      if (parentVariantKey === key) {
+      if (parentVariantKey && parentVariantKey === key) {
         res[fKey] = val
       } else {
-        Object.assign(
-          res,
-          Object.fromEntries(
-            resolveVariants(
-              fKey,
-              val,
-              props,
-              defaultProps,
-              theme,
-              variants,
-              fontFamily,
-              conf,
-              returnVariablesAs,
-              staticConfig,
-              key,
-              languageContext,
-              avoidDefaultProps,
-              debug
-            )
-          )
+        const variantOut = resolveVariants(
+          fKey,
+          val,
+          props,
+          defaultProps,
+          theme,
+          variants,
+          fontFamily,
+          conf,
+          returnVariablesAs,
+          staticConfig,
+          key,
+          languageContext,
+          avoidDefaultProps,
+          debug
         )
+
+        const { pressStyle, hoverStyle, focusStyle, enterStyle, exitStyle, ...rest } =
+          Object.fromEntries(variantOut)
+        const subs = { pressStyle, hoverStyle, focusStyle, enterStyle, exitStyle }
+        Object.assign(res, rest)
+        for (const key in subs) {
+          if (subs[key]) {
+            res[key] ??= {}
+            Object.assign(res[key], subs[key])
+          }
+        }
       }
-    } else if (typeof val === 'string') {
+      continue
+    }
+
+    if (isVariable(val)) {
+      res[fKey] = !isWeb || returnVariablesAs === 'value' ? val.val : val.variable
+      continue
+    }
+
+    if (typeof val === 'string') {
       const fVal =
         val[0] === '$'
           ? getToken(
@@ -331,10 +343,15 @@ const resolveTokensAndVariants: StyleResolver = (
             )
           : val
       res[fKey] = fVal
-    } else {
-      if (isObj(val)) {
-        // sub-objects: media queries, pseudos, shadowOffset
-        res[fKey] = resolveTokensAndVariants(
+      continue
+    }
+
+    if (isObj(val)) {
+      // sub-objects: media queries, pseudos, shadowOffset
+      res[fKey] ??= {}
+      Object.assign(
+        res[fKey],
+        resolveTokensAndVariants(
           fKey,
           val,
           props,
@@ -350,11 +367,12 @@ const resolveTokensAndVariants: StyleResolver = (
           avoidDefaultProps,
           debug
         )
-      } else {
-        // nullish values cant be tokens, need no extra parsing
-        res[fKey] = val
-      }
+      )
+    } else {
+      // nullish values cant be tokens, need no extra parsing
+      res[fKey] = val
     }
+
     if (process.env.NODE_ENV === 'development') {
       if (debug) {
         if (res[fKey]?.[0] === '$') {

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAeA,OAAO,KAWN,MAAM,OAAO,CAAA;AAkBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAoBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAkC3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,4DAm3BpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAEjD,CAAA;AAMD,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAeA,OAAO,KAWN,MAAM,OAAO,CAAA;AAkBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAoBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAkC3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,4DAw3BpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAEjD,CAAA;AAMD,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}