framer-motion 9.0.2 → 9.0.3

package/dist/es/projection/node/create-projection-node.mjs

@@ -153,7 +153,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         notifyListeners(name, ...args) {
             const subscriptionManager = this.eventHandlers.get(name);
-            subscriptionManager === null || subscriptionManager === void 0 ? void 0 : subscriptionManager.notify(...args);
+            subscriptionManager && subscriptionManager.notify(...args);
         }
         hasListeners(name) {
             return this.eventHandlers.has(name);
@@ -165,7 +165,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          * Lifecycles
          */
         mount(instance, isLayoutDirty = false) {
-            var _a;
             if (this.instance)
                 return;
             this.isSVG =
@@ -176,7 +175,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 visualElement.mount(instance);
             }
             this.root.nodes.add(this);
-            (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children.add(this);
+            this.parent && this.parent.children.add(this);
             this.elementId && this.root.potentialNodes.delete(this.elementId);
             if (isLayoutDirty && (layout || layoutId)) {
                 this.isLayoutDirty = true;
@@ -202,14 +201,15 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 visualElement &&
                 (layoutId || layout)) {
                 this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {
-                    var _a, _b, _c, _d, _e;
                     if (this.isTreeAnimationBlocked()) {
                         this.target = undefined;
                         this.relativeTarget = undefined;
                         return;
                     }
                     // TODO: Check here if an animation exists
-                    const layoutTransition = (_b = (_a = this.options.transition) !== null && _a !== void 0 ? _a : visualElement.getDefaultTransition()) !== null && _b !== void 0 ? _b : defaultLayoutTransition;
+                    const layoutTransition = this.options.transition ||
+                        visualElement.getDefaultTransition() ||
+                        defaultLayoutTransition;
                     const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
                     /**
                      * The target layout of the element might stay the same,
@@ -225,7 +225,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                      */
                     const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
                     if (this.options.layoutRoot ||
-                        ((_c = this.resumeFrom) === null || _c === void 0 ? void 0 : _c.instance) ||
+                        (this.resumeFrom && this.resumeFrom.instance) ||
                         hasOnlyRelativeTargetChanged ||
                         (hasLayoutChanged &&
                             (targetChanged || !this.currentAnimation))) {
@@ -256,18 +256,20 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             this.animationProgress === 0) {
                             finishAnimation(this);
                         }
-                        this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
+                        if (this.isLead() && this.options.onExitComplete) {
+                            this.options.onExitComplete();
+                        }
                     }
                     this.targetLayout = newLayout;
                 });
             }
         }
         unmount() {
-            var _a, _b;
             this.options.layoutId && this.willUpdate();
             this.root.nodes.remove(this);
-            (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.remove(this);
-            (_b = this.parent) === null || _b === void 0 ? void 0 : _b.children.delete(this);
+            const stack = this.getStack();
+            stack && stack.remove(this);
+            this.parent && this.parent.children.delete(this);
             this.instance = undefined;
             cancelSync.preRender(this.updateProjection);
         }
@@ -282,28 +284,25 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             return this.updateManuallyBlocked || this.updateBlockedByResize;
         }
         isTreeAnimationBlocked() {
-            var _a;
             return (this.isAnimationBlocked ||
-                ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimationBlocked()) ||
+                (this.parent && this.parent.isTreeAnimationBlocked()) ||
                 false);
         }
         // Note: currently only running on root node
         startUpdate() {
-            var _a;
             if (this.isUpdateBlocked())
                 return;
             this.isUpdating = true;
-            (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
+            this.nodes && this.nodes.forEach(resetRotation);
             this.animationId++;
         }
         getTransformTemplate() {
-            var _a;
-            return (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            const { visualElement } = this.options;
+            return visualElement && visualElement.getProps().transformTemplate;
         }
         willUpdate(shouldNotifyListeners = true) {
-            var _a, _b, _c;
             if (this.root.isUpdateBlocked()) {
-                (_b = (_a = this.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.options.onExitComplete && this.options.onExitComplete();
                 return;
             }
             !this.root.isUpdating && this.root.startUpdate();
@@ -321,7 +320,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             const { layoutId, layout } = this.options;
             if (layoutId === undefined && !layout)
                 return;
-            this.prevTransformTemplateValue = (_c = this.getTransformTemplate()) === null || _c === void 0 ? void 0 : _c(this.latestValues, "");
+            const transformTemplate = this.getTransformTemplate();
+            this.prevTransformTemplateValue = transformTemplate
+                ? transformTemplate(this.latestValues, "")
+                : undefined;
             this.updateSnapshot();
             shouldNotifyListeners && this.notifyListeners("willUpdate");
         }
@@ -401,7 +403,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.snapshot = this.measure();
         }
         updateLayout() {
-            var _a;
             if (!this.instance)
                 return;
             // TODO: Incorporate into a forwarded scroll offset
@@ -429,7 +430,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
             this.notifyListeners("measure", this.layout.layoutBox);
-            (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notify("LayoutMeasure", this.layout.layoutBox, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.layoutBox);
+            const { visualElement } = this.options;
+            visualElement &&
+                visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);
         }
         updateScroll(phase = "measure") {
             let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);
@@ -448,12 +451,14 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         resetTransform() {
-            var _a;
             if (!resetTransform)
                 return;
             const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
             const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
-            const transformTemplateValue = (_a = this.getTransformTemplate()) === null || _a === void 0 ? void 0 : _a(this.latestValues, "");
+            const transformTemplate = this.getTransformTemplate();
+            const transformTemplateValue = transformTemplate
+                ? transformTemplate(this.latestValues, "")
+                : undefined;
             const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
             if (isResetRequested &&
                 (hasProjection ||
@@ -554,7 +559,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             return withTransforms;
         }
         removeTransform(box) {
-            var _a;
             const boxWithoutTransform = createBox();
             copyBoxInto(boxWithoutTransform, box);
             for (let i = 0; i < this.path.length; i++) {
@@ -567,7 +571,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 const sourceBox = createBox();
                 const nodeBox = node.measurePageBox();
                 copyBoxInto(sourceBox, nodeBox);
-                removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layoutBox, sourceBox);
+                removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);
             }
             if (hasTransform(this.latestValues)) {
                 removeBoxTransforms(boxWithoutTransform, this.latestValues);
@@ -602,7 +606,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          * Frame calculations
          */
         resolveTargetDelta() {
-            var _a;
             /**
              * Once the dirty status of nodes has been spread through the tree, we also
              * need to check if we have a shared node of a different depth that has itself
@@ -661,7 +664,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             if (this.relativeTarget &&
                 this.relativeTargetOrigin &&
-                ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.target)) {
+                this.relativeParent &&
+                this.relativeParent.target) {
                 calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
                 /**
                  * If we've only got a targetDelta, resolve it into a target
@@ -722,7 +726,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
         }
         calcProjection() {
-            var _a;
             const { isProjectionDirty, isTransformDirty } = this;
             this.isProjectionDirty = this.isTransformDirty = false;
             const lead = this.getLead();
@@ -739,7 +742,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * If this section of the tree isn't animating we can
              * delete our target sources for the following frame.
              */
-            this.isTreeAnimating = Boolean(((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimating) ||
+            this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||
                 this.currentAnimation ||
                 this.pendingAnimation);
             if (!this.isTreeAnimating) {
@@ -795,17 +798,20 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             // TODO: Schedule render
         }
         scheduleRender(notifyAll = true) {
-            var _a, _b, _c;
-            (_b = (_a = this.options).scheduleRender) === null || _b === void 0 ? void 0 : _b.call(_a);
-            notifyAll && ((_c = this.getStack()) === null || _c === void 0 ? void 0 : _c.scheduleRender());
+            this.options.scheduleRender && this.options.scheduleRender();
+            if (notifyAll) {
+                const stack = this.getStack();
+                stack && stack.scheduleRender();
+            }
             if (this.resumingFrom && !this.resumingFrom.instance) {
                 this.resumingFrom = undefined;
             }
         }
         setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
-            var _a, _b;
             const snapshot = this.snapshot;
-            const snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
+            const snapshotLatestValues = snapshot
+                ? snapshot.latestValues
+                : {};
             const mixedValues = { ...this.latestValues };
             const targetDelta = createDelta();
             if (!this.relativeParent ||
@@ -814,15 +820,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
             const relativeLayout = createBox();
-            const isSharedLayoutAnimation = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.source) !== ((_a = this.layout) === null || _a === void 0 ? void 0 : _a.source);
-            const isOnlyMember = (((_b = this.getStack()) === null || _b === void 0 ? void 0 : _b.members.length) || 0) <= 1;
+            const snapshotSource = snapshot ? snapshot.source : undefined;
+            const layoutSource = this.layout ? this.layout.source : undefined;
+            const isSharedLayoutAnimation = snapshotSource !== layoutSource;
+            const stack = this.getStack();
+            const isOnlyMember = !stack || stack.members.length <= 1;
             const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
                 !isOnlyMember &&
                 this.options.crossfade === true &&
                 !this.path.some(hasOpacityCrossfade));
             this.animationProgress = 0;
             this.mixTargetDelta = (latest) => {
-                var _a;
                 const progress = latest / 1000;
                 mixAxisDelta(targetDelta.x, delta.x, progress);
                 mixAxisDelta(targetDelta.y, delta.y, progress);
@@ -830,7 +838,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 if (this.relativeTarget &&
                     this.relativeTargetOrigin &&
                     this.layout &&
-                    ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) {
+                    this.relativeParent &&
+                    this.relativeParent.layout) {
                     calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
                     mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
                 }
@@ -845,11 +854,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);
         }
         startAnimation(options) {
-            var _a, _b;
             this.notifyListeners("animationStart");
-            (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
-            if (this.resumingFrom) {
-                (_b = this.resumingFrom.currentAnimation) === null || _b === void 0 ? void 0 : _b.stop();
+            this.currentAnimation && this.currentAnimation.stop();
+            if (this.resumingFrom && this.resumingFrom.currentAnimation) {
+                this.resumingFrom.currentAnimation.stop();
             }
             if (this.pendingAnimation) {
                 cancelSync.update(this.pendingAnimation);
@@ -865,13 +873,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.currentAnimation = animate(0, animationTarget, {
                     ...options,
                     onUpdate: (latest) => {
-                        var _a;
                         this.mixTargetDelta(latest);
-                        (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, latest);
+                        options.onUpdate && options.onUpdate(latest);
                     },
                     onComplete: () => {
-                        var _a;
-                        (_a = options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
+                        options.onComplete && options.onComplete();
                         this.completeAnimation();
                     },
                 });
@@ -882,12 +888,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             });
         }
         completeAnimation() {
-            var _a;
             if (this.resumingFrom) {
                 this.resumingFrom.currentAnimation = undefined;
                 this.resumingFrom.preserveOpacity = undefined;
             }
-            (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.exitAnimationComplete();
+            const stack = this.getStack();
+            stack && stack.exitAnimationComplete();
             this.resumingFrom =
                 this.currentAnimation =
                     this.animationValues =
@@ -895,9 +901,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.notifyListeners("animationComplete");
         }
         finishAnimation() {
-            var _a;
             if (this.currentAnimation) {
-                (_a = this.mixTargetDelta) === null || _a === void 0 ? void 0 : _a.call(this, animationTarget);
+                this.mixTargetDelta && this.mixTargetDelta(animationTarget);
                 this.currentAnimation.stop();
             }
             this.completeAnimation();
@@ -940,15 +945,17 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
         }
         registerSharedNode(layoutId, node) {
-            var _a, _b, _c;
             if (!this.sharedNodes.has(layoutId)) {
                 this.sharedNodes.set(layoutId, new NodeStack());
             }
             const stack = this.sharedNodes.get(layoutId);
             stack.add(node);
+            const config = node.options.initialPromotionConfig;
             node.promote({
-                transition: (_a = node.options.initialPromotionConfig) === null || _a === void 0 ? void 0 : _a.transition,
-                preserveFollowOpacity: (_c = (_b = node.options.initialPromotionConfig) === null || _b === void 0 ? void 0 : _b.shouldPreserveFollowOpacity) === null || _c === void 0 ? void 0 : _c.call(_b, node),
+                transition: config ? config.transition : undefined,
+                preserveFollowOpacity: config && config.shouldPreserveFollowOpacity
+                    ? config.shouldPreserveFollowOpacity(node)
+                    : undefined,
             });
         }
         isLead() {
@@ -1022,7 +1029,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             // Force a render of this element to apply the transform with all rotations
             // set to 0.
-            visualElement === null || visualElement === void 0 ? void 0 : visualElement.render();
+            visualElement.render();
             // Put back all the values we reset
             for (const key in resetValues) {
                 visualElement.setStaticValue(key, resetValues[key]);
@@ -1161,7 +1168,7 @@ function updateLayout(node) {
     node.updateLayout();
 }
 function notifyLayoutUpdate(node) {
-    var _a, _b, _c;
+    var _a;
     const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
     if (node.isLead() &&
         node.layout &&
@@ -1236,7 +1243,8 @@ function notifyLayoutUpdate(node) {
         });
     }
     else if (node.isLead()) {
-        (_c = (_b = node.options).onExitComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
+        const { onExitComplete } = node.options;
+        onExitComplete && onExitComplete();
     }
     /**
      * Clearing transition
@@ -1264,7 +1272,7 @@ function clearMeasurements(node) {
 }
 function resetTransformStyle(node) {
     const { visualElement } = node.options;
-    if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) {
+    if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
         visualElement.notify("BeforeLayoutMeasure");
     }
     node.resetTransform();

package/dist/es/projection/node/group.mjs

@@ -9,10 +9,12 @@ function nodeGroup() {
             subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
         },
         remove: (node) => {
-            var _a;
             nodes.delete(node);
-            (_a = subscriptions.get(node)) === null || _a === void 0 ? void 0 : _a();
-            subscriptions.delete(node);
+            const unsubscribe = subscriptions.get(node);
+            if (unsubscribe) {
+                unsubscribe();
+                subscriptions.delete(node);
+            }
             dirtyAll();
         },
         dirty: dirtyAll,

package/dist/es/projection/shared/stack.mjs

@@ -44,7 +44,6 @@ class NodeStack {
         }
     }
     promote(node, preserveFollowOpacity) {
-        var _a;
         const prevLead = this.lead;
         if (node === prevLead)
             return;
@@ -63,7 +62,7 @@ class NodeStack {
                 node.snapshot.latestValues =
                     prevLead.animationValues || prevLead.latestValues;
             }
-            if ((_a = node.root) === null || _a === void 0 ? void 0 : _a.isUpdating) {
+            if (node.root && node.root.isUpdating) {
                 node.isLayoutDirty = true;
             }
             const { crossfade } = node.options;
@@ -86,9 +85,12 @@ class NodeStack {
     }
     exitAnimationComplete() {
         this.members.forEach((node) => {
-            var _a, _b, _c, _d, _e;
-            (_b = (_a = node.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
-            (_e = (_c = node.resumingFrom) === null || _c === void 0 ? void 0 : (_d = _c.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d);
+            const { options, resumingFrom } = node;
+            options.onExitComplete && options.onExitComplete();
+            if (resumingFrom) {
+                resumingFrom.options.onExitComplete &&
+                    resumingFrom.options.onExitComplete();
+            }
         });
     }
     scheduleRender() {