@tamagui/animations-motion 2.6.0 → 2.6.2

package/dist/cjs/createAnimations.cjs

@@ -58,6 +58,23 @@ function settlePendingMotionOnFinish(mv, controls) {
   PendingMotionOnFinish.delete(mv);
   controls.then(() => onFinish()).catch(() => onFinish());
 }
+const PopperPositionAnims = /* @__PURE__ */new WeakMap();
+function parseTranslate(transform) {
+  if (!transform || transform === "none") return {
+    x: 0,
+    y: 0
+  };
+  try {
+    const m = new DOMMatrixReadOnly(transform);
+    if (!m.is2D || m.a !== 1 || m.b !== 0 || m.c !== 0 || m.d !== 1) return null;
+    return {
+      x: m.e,
+      y: m.f
+    };
+  } catch {
+    return null;
+  }
+}
 function createAnimations(animations) {
   let isHydratingGlobal;
   const hydratingComponents = /* @__PURE__ */new Set();
@@ -236,6 +253,65 @@ function createAnimations(animations) {
                 };
               }
               const isPopperPosition = node.hasAttribute("data-popper-animate-position");
+              let popperHandledTransform = false;
+              if (isPopperPosition && !isCurrentlyExiting && typeof diff.transform === "string") {
+                const target = parseTranslate(diff.transform);
+                if (target) {
+                  let entry = PopperPositionAnims.get(node);
+                  if (!entry) {
+                    let seed = target;
+                    try {
+                      seed = parseTranslate(getComputedStyle(node).transform) ?? target;
+                    } catch {}
+                    const x = (0, import_react.motionValue)(seed.x);
+                    const y = (0, import_react.motionValue)(seed.y);
+                    const write = () => {
+                      node.style.transform = `translate3d(${x.get()}px, ${y.get()}px, 0)`;
+                    };
+                    x.on("change", write);
+                    y.on("change", write);
+                    entry = {
+                      x,
+                      y,
+                      stop: null
+                    };
+                    PopperPositionAnims.set(node, entry);
+                  }
+                  if (!entry.stop) {
+                    try {
+                      const live = parseTranslate(getComputedStyle(node).transform);
+                      if (live) {
+                        entry.x.jump(live.x);
+                        entry.y.jump(live.y);
+                      }
+                    } catch {}
+                  }
+                  for (const anim of node.getAnimations()) {
+                    try {
+                      const kf = anim.effect?.getKeyframes?.();
+                      if (kf?.some(k => "transform" in k)) {
+                        anim.cancel();
+                      }
+                    } catch {}
+                  }
+                  const opts = animationOptions2;
+                  const positionTransition = opts.transform ?? opts.default ?? animationOptions2;
+                  const cx = (0, import_react.animate)(entry.x, target.x, positionTransition);
+                  const cy = (0, import_react.animate)(entry.y, target.y, positionTransition);
+                  entry.stop = () => {
+                    cx.stop();
+                    cy.stop();
+                  };
+                  popperHandledTransform = true;
+                }
+              }
+              if (isCurrentlyExiting) {
+                const entry = PopperPositionAnims.get(node);
+                if (entry?.stop) {
+                  entry.stop();
+                  entry.stop = null;
+                }
+              }
               let midFlightValues = null;
               if (refs.current.controls) {
                 try {
@@ -253,11 +329,11 @@ function createAnimations(animations) {
                 }
                 if (midFlightValues) {
                   for (const key in midFlightValues) {
-                    ;
+                    if (key === "transform" && popperHandledTransform) continue;
                     node.style[key] = midFlightValues[key];
                   }
                 }
-                if (isPopperPosition) {
+                if (isPopperPosition && !popperHandledTransform) {
                   const anims = node.getAnimations();
                   for (const anim of anims) {
                     anim.cancel();
@@ -265,11 +341,20 @@ function createAnimations(animations) {
                 }
               }
               const fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
-              if ((isPopperPosition || isCurrentlyExiting) && midFlightValues?.transform && fixedDiff.transform) {
-                fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform];
+              let waapiDiff = fixedDiff;
+              if (popperHandledTransform && "transform" in waapiDiff) {
+                waapiDiff = {
+                  ...waapiDiff
+                };
+                delete waapiDiff.transform;
+              }
+              if ((isPopperPosition || isCurrentlyExiting) && midFlightValues?.transform && waapiDiff.transform) {
+                waapiDiff.transform = [midFlightValues.transform, waapiDiff.transform];
+              }
+              if (Object.keys(waapiDiff).length > 0) {
+                startedControls = animate(scope.current, waapiDiff, animationOptions2);
+                refs.current.controls = startedControls;
               }
-              startedControls = animate(scope.current, fixedDiff, animationOptions2);
-              refs.current.controls = startedControls;
               refs.current.lastAnimateAt = Date.now();
             }
           }
@@ -339,6 +424,16 @@ function createAnimations(animations) {
           if (node instanceof HTMLElement) {
             if (dontAnimate) Object.assign(node.style, dontAnimate);
             if (doAnimate) Object.assign(node.style, doAnimate);
+            const entry = PopperPositionAnims.get(node);
+            if (entry) {
+              const target = parseTranslate(doAnimate?.transform ?? dontAnimate?.transform);
+              if (target) {
+                entry.stop?.();
+                entry.stop = null;
+                entry.x.jump(target.x);
+                entry.y.jump(target.y);
+              }
+            }
           }
           refs.current.lastDontAnimate = dontAnimate ? {
             ...dontAnimate
@@ -377,40 +472,40 @@ function createAnimations(animations) {
       };
     },
     useAnimatedNumber(initial) {
-      const motionValue = (0, import_react.useMotionValue)(initial);
+      const motionValue2 = (0, import_react.useMotionValue)(initial);
       return import_react2.default.useMemo(() => ({
         getInstance() {
-          return motionValue;
+          return motionValue2;
         },
         getValue() {
-          return motionValue.get();
+          return motionValue2.get();
         },
         setValue(next, config = {
           type: "spring"
         }, onFinish) {
           if (config.type === "direct") {
-            MotionValueStrategy.set(motionValue, {
+            MotionValueStrategy.set(motionValue2, {
               type: "direct"
             });
-            motionValue.set(next);
+            motionValue2.set(next);
             onFinish?.();
             return;
           }
-          MotionValueStrategy.set(motionValue, config);
+          MotionValueStrategy.set(motionValue2, config);
           if (onFinish) {
-            const prior = PendingMotionOnFinish.get(motionValue);
+            const prior = PendingMotionOnFinish.get(motionValue2);
             if (prior) {
-              PendingMotionOnFinish.delete(motionValue);
+              PendingMotionOnFinish.delete(motionValue2);
               prior();
             }
-            PendingMotionOnFinish.set(motionValue, onFinish);
+            PendingMotionOnFinish.set(motionValue2, onFinish);
           }
-          motionValue.set(next);
+          motionValue2.set(next);
         },
         stop() {
-          motionValue.stop();
+          motionValue2.stop();
         }
-      }), [motionValue]);
+      }), [motionValue2]);
     },
     useAnimatedNumberReaction({
       value
@@ -419,7 +514,7 @@ function createAnimations(animations) {
       (0, import_react.useMotionValueEvent)(instance, "change", onValue);
     },
     useAnimatedNumberStyle(val, getStyleProp) {
-      const motionValue = val.getInstance();
+      const motionValue2 = val.getInstance();
       const getStyleRef = (0, import_react2.useRef)(getStyleProp);
       getStyleRef.current = getStyleProp;
       return (0, import_react2.useMemo)(() => {
@@ -427,7 +522,7 @@ function createAnimations(animations) {
           getStyle: cur => {
             return getStyleRef.current(cur);
           },
-          motionValue
+          motionValue: motionValue2
         };
       }, []);
     },

package/dist/cjs/createAnimations.native.js

@@ -76,6 +76,23 @@ function settlePendingMotionOnFinish(mv, controls) {
     return onFinish();
   });
 }
+var PopperPositionAnims = /* @__PURE__ */new WeakMap();
+function parseTranslate(transform) {
+  if (!transform || transform === "none") return {
+    x: 0,
+    y: 0
+  };
+  try {
+    var m = new DOMMatrixReadOnly(transform);
+    if (!m.is2D || m.a !== 1 || m.b !== 0 || m.c !== 0 || m.d !== 1) return null;
+    return {
+      x: m.e,
+      y: m.f
+    };
+  } catch (e) {
+    return null;
+  }
+}
 function createAnimations(animations) {
   var isHydratingGlobal;
   var hydratingComponents = /* @__PURE__ */new Set();
@@ -258,6 +275,89 @@ function createAnimations(animations) {
                 };
               }
               var isPopperPosition = node.hasAttribute("data-popper-animate-position");
+              var popperHandledTransform = false;
+              if (isPopperPosition && !isCurrentlyExiting && typeof diff.transform === "string") {
+                var target = parseTranslate(diff.transform);
+                if (target) {
+                  var entry = PopperPositionAnims.get(node);
+                  if (!entry) {
+                    var seed = target;
+                    try {
+                      var _parseTranslate;
+                      seed = (_parseTranslate = parseTranslate(getComputedStyle(node).transform)) !== null && _parseTranslate !== void 0 ? _parseTranslate : target;
+                    } catch (e) {}
+                    var x = (0, import_react.motionValue)(seed.x);
+                    var y = (0, import_react.motionValue)(seed.y);
+                    var write = function () {
+                      node.style.transform = `translate3d(${x.get()}px, ${y.get()}px, 0)`;
+                    };
+                    x.on("change", write);
+                    y.on("change", write);
+                    entry = {
+                      x,
+                      y,
+                      stop: null
+                    };
+                    PopperPositionAnims.set(node, entry);
+                  }
+                  if (!entry.stop) {
+                    try {
+                      var live = parseTranslate(getComputedStyle(node).transform);
+                      if (live) {
+                        entry.x.jump(live.x);
+                        entry.y.jump(live.y);
+                      }
+                    } catch (e) {}
+                  }
+                  var _iteratorNormalCompletion = true,
+                    _didIteratorError = false,
+                    _iteratorError = void 0;
+                  try {
+                    for (var _iterator = node.getAnimations()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                      var anim = _step.value;
+                      try {
+                        var _anim_effect_getKeyframes, _anim_effect;
+                        var kf = (_anim_effect = anim.effect) === null || _anim_effect === void 0 ? void 0 : (_anim_effect_getKeyframes = _anim_effect.getKeyframes) === null || _anim_effect_getKeyframes === void 0 ? void 0 : _anim_effect_getKeyframes.call(_anim_effect);
+                        if (kf === null || kf === void 0 ? void 0 : kf.some(function (k) {
+                          return "transform" in k;
+                        })) {
+                          anim.cancel();
+                        }
+                      } catch (e) {}
+                    }
+                  } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                  } finally {
+                    try {
+                      if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                      }
+                    } finally {
+                      if (_didIteratorError) {
+                        throw _iteratorError;
+                      }
+                    }
+                  }
+                  var opts = animationOptions2;
+                  var _opts_transform, _ref;
+                  var positionTransition = (_ref = (_opts_transform = opts.transform) !== null && _opts_transform !== void 0 ? _opts_transform : opts.default) !== null && _ref !== void 0 ? _ref : animationOptions2;
+                  var cx = (0, import_react.animate)(entry.x, target.x, positionTransition);
+                  var cy = (0, import_react.animate)(entry.y, target.y, positionTransition);
+                  entry.stop = function () {
+                    cx.stop();
+                    cy.stop();
+                  };
+                  popperHandledTransform = true;
+                }
+              }
+              if (isCurrentlyExiting) {
+                var entry1 = PopperPositionAnims.get(node);
+                if (entry1 === null || entry1 === void 0 ? void 0 : entry1.stop) {
+                  entry1.stop();
+                  entry1.stop = null;
+                }
+              }
               var midFlightValues = null;
               if (refs.current.controls) {
                 try {
@@ -275,42 +375,51 @@ function createAnimations(animations) {
                 }
                 if (midFlightValues) {
                   for (var key2 in midFlightValues) {
-                    ;
+                    if (key2 === "transform" && popperHandledTransform) continue;
                     node.style[key2] = midFlightValues[key2];
                   }
                 }
-                if (isPopperPosition) {
+                if (isPopperPosition && !popperHandledTransform) {
                   var anims = node.getAnimations();
-                  var _iteratorNormalCompletion = true,
-                    _didIteratorError = false,
-                    _iteratorError = void 0;
+                  var _iteratorNormalCompletion1 = true,
+                    _didIteratorError1 = false,
+                    _iteratorError1 = void 0;
                   try {
-                    for (var _iterator = anims[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                      var anim = _step.value;
-                      anim.cancel();
+                    for (var _iterator1 = anims[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+                      var anim1 = _step1.value;
+                      anim1.cancel();
                     }
                   } catch (err) {
-                    _didIteratorError = true;
-                    _iteratorError = err;
+                    _didIteratorError1 = true;
+                    _iteratorError1 = err;
                   } finally {
                     try {
-                      if (!_iteratorNormalCompletion && _iterator.return != null) {
-                        _iterator.return();
+                      if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                        _iterator1.return();
                       }
                     } finally {
-                      if (_didIteratorError) {
-                        throw _iteratorError;
+                      if (_didIteratorError1) {
+                        throw _iteratorError1;
                       }
                     }
                   }
                 }
               }
               var fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
-              if ((isPopperPosition || isCurrentlyExiting) && (midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && fixedDiff.transform) {
-                fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform];
+              var waapiDiff = fixedDiff;
+              if (popperHandledTransform && "transform" in waapiDiff) {
+                waapiDiff = {
+                  ...waapiDiff
+                };
+                delete waapiDiff.transform;
+              }
+              if ((isPopperPosition || isCurrentlyExiting) && (midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && waapiDiff.transform) {
+                waapiDiff.transform = [midFlightValues.transform, waapiDiff.transform];
+              }
+              if (Object.keys(waapiDiff).length > 0) {
+                startedControls = animate(scope.current, waapiDiff, animationOptions2);
+                refs.current.controls = startedControls;
               }
-              startedControls = animate(scope.current, fixedDiff, animationOptions2);
-              refs.current.controls = startedControls;
               refs.current.lastAnimateAt = Date.now();
             }
           }
@@ -380,6 +489,18 @@ function createAnimations(animations) {
           if (_instanceof(node, HTMLElement)) {
             if (dontAnimate) Object.assign(node.style, dontAnimate);
             if (doAnimate) Object.assign(node.style, doAnimate);
+            var entry = PopperPositionAnims.get(node);
+            if (entry) {
+              var _doAnimate_transform;
+              var target = parseTranslate((_doAnimate_transform = doAnimate === null || doAnimate === void 0 ? void 0 : doAnimate.transform) !== null && _doAnimate_transform !== void 0 ? _doAnimate_transform : dontAnimate === null || dontAnimate === void 0 ? void 0 : dontAnimate.transform);
+              if (target) {
+                var _entry_stop;
+                (_entry_stop = entry.stop) === null || _entry_stop === void 0 ? void 0 : _entry_stop.call(entry);
+                entry.stop = null;
+                entry.x.jump(target.x);
+                entry.y.jump(target.y);
+              }
+            }
           }
           refs.current.lastDontAnimate = dontAnimate ? {
             ...dontAnimate
@@ -418,14 +539,14 @@ function createAnimations(animations) {
       };
     },
     useAnimatedNumber(initial) {
-      var motionValue = (0, import_react.useMotionValue)(initial);
+      var motionValue2 = (0, import_react.useMotionValue)(initial);
       return import_react2.default.useMemo(function () {
         return {
           getInstance() {
-            return motionValue;
+            return motionValue2;
           },
           getValue() {
-            return motionValue.get();
+            return motionValue2.get();
           },
           setValue(next) {
             var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
@@ -433,29 +554,29 @@ function createAnimations(animations) {
               },
               onFinish = arguments.length > 2 ? arguments[2] : void 0;
             if (config.type === "direct") {
-              MotionValueStrategy.set(motionValue, {
+              MotionValueStrategy.set(motionValue2, {
                 type: "direct"
               });
-              motionValue.set(next);
+              motionValue2.set(next);
               onFinish === null || onFinish === void 0 ? void 0 : onFinish();
               return;
             }
-            MotionValueStrategy.set(motionValue, config);
+            MotionValueStrategy.set(motionValue2, config);
             if (onFinish) {
-              var prior = PendingMotionOnFinish.get(motionValue);
+              var prior = PendingMotionOnFinish.get(motionValue2);
               if (prior) {
-                PendingMotionOnFinish.delete(motionValue);
+                PendingMotionOnFinish.delete(motionValue2);
                 prior();
               }
-              PendingMotionOnFinish.set(motionValue, onFinish);
+              PendingMotionOnFinish.set(motionValue2, onFinish);
             }
-            motionValue.set(next);
+            motionValue2.set(next);
           },
           stop() {
-            motionValue.stop();
+            motionValue2.stop();
           }
         };
-      }, [motionValue]);
+      }, [motionValue2]);
     },
     useAnimatedNumberReaction(param, onValue) {
       var {
@@ -465,7 +586,7 @@ function createAnimations(animations) {
       (0, import_react.useMotionValueEvent)(instance, "change", onValue);
     },
     useAnimatedNumberStyle(val, getStyleProp) {
-      var motionValue = val.getInstance();
+      var motionValue2 = val.getInstance();
       var getStyleRef = (0, import_react2.useRef)(getStyleProp);
       getStyleRef.current = getStyleProp;
       return (0, import_react2.useMemo)(function () {
@@ -473,7 +594,7 @@ function createAnimations(animations) {
           getStyle: function (cur) {
             return getStyleRef.current(cur);
           },
-          motionValue
+          motionValue: motionValue2
         };
       }, []);
     },