@multiplatform.one/theme 7.49.1 → 7.49.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.49.1",
+  "version": "7.49.3",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.49.1",
-    "@multiplatform.one/store": "^7.49.1",
+    "@multiplatform.one/platform": "^7.49.3",
+    "@multiplatform.one/store": "^7.49.3",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.49.1",
-    "@multiplatform.one/test-utils": "7.49.1",
+    "@multiplatform.one/config": "7.49.3",
+    "@multiplatform.one/test-utils": "7.49.3",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/transitionProps.native.ts

@@ -20,13 +20,32 @@ export function transitionProps(
   const transition = isRole ? role.transition : role;
   if (transition === undefined) return {};
   if (!isRole) return { transition };
-  const properties = [...role.animateOnly, ...extra];
+  const properties = [...role.animateOnly, ...extra].flatMap(
+    (property) => nativeLonghands[property] ?? [property],
+  );
   return {
     transition,
     animateOnly: properties,
   };
 }
 
+/**
+ * FZ-7919: tamagui expands `borderColor` into its four sides before the React
+ * Native driver sees the style, and the driver matches `animateOnly` by exact
+ * key. A render therefore painted the sides as static, while a pseudo state
+ * (the bubbled focus of a field's text input) animated them. The animated
+ * copy outranked the static one and held the previous focus or theme colour.
+ */
+const nativeLonghands: Record<string, readonly string[]> = {
+  borderColor: [
+    "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
+  ],
+};
+
 function isMotionRole(value: MotionRole | TransitionProp | undefined): value is MotionRole {
   return (
     typeof value === "object" &&

package/src/theme/transitionProps.spec.ts

@@ -42,7 +42,18 @@ describe("role property scopes", () => {
     expect(nativeTransitionProps("quick")).toEqual({ transition: "quick" });
     expect(nativeTransitionProps(motionFor("quick").control, ["maxHeight"])).toEqual({
       transition: "quick",
-      animateOnly: ["backgroundColor", "borderColor", "color", "opacity", "transform", "maxHeight"],
+      animateOnly: [
+        "backgroundColor",
+        "borderColor",
+        "borderTopColor",
+        "borderRightColor",
+        "borderBottomColor",
+        "borderLeftColor",
+        "color",
+        "opacity",
+        "transform",
+        "maxHeight",
+      ],
     });
   });
 });

package/types/theme/transitionProps.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transitionProps.native.d.ts","sourceRoot":"","sources":["../../src/theme/transitionProps.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,SAAS,EAC7C,KAAK,GAAE,SAAS,MAAM,EAAO,GAC5B;IACD,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,CAUA"}
+{"version":3,"file":"transitionProps.native.d.ts","sourceRoot":"","sources":["../../src/theme/transitionProps.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,SAAS,EAC7C,KAAK,GAAE,SAAS,MAAM,EAAO,GAC5B;IACD,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,CAYA"}