motion 12.6.3-alpha.0 → 12.6.4-alpha.0

package/dist/es/framer-motion/dist/es/animation/animate/index.mjs

@@ -1,5 +1,5 @@
-import { GroupPlaybackControls } from '../../../../../motion-dom/dist/es/animation/controls/Group.mjs';
 import '../../../../../motion-utils/dist/es/errors.mjs';
+import { GroupAnimationWithThen } from '../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
 import { animateSequence } from './sequence.mjs';
 import { animateSubject } from './subject.mjs';
 
@@ -22,7 +22,7 @@ function createScopedAnimate(scope) {
         else {
             animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
         }
-        const animation = new GroupPlaybackControls(animations);
+        const animation = new GroupAnimationWithThen(animations);
         if (scope) {
             scope.animations.push(animation);
         }

package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs

@@ -1,10 +1,11 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { startWaapiAnimation } from '../../../../../motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs';
 import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
-import { attachTimeline } from '../../../../../motion-dom/dist/es/animation/waapi/utils/attach-timeline.mjs';
-import { isWaapiSupportedEasing } from '../../../../../motion-dom/dist/es/animation/waapi/utils/easing.mjs';
+import { isWaapiSupportedEasing } from '../../../../../motion-dom/dist/es/animation/waapi/easing/is-supported.mjs';
 import { supportsLinearEasing } from '../../../../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
+import { attachTimeline } from '../../../../../motion-dom/dist/es/animation/waapi/utils/attach-timeline.mjs';
 import { anticipate } from '../../easing/anticipate.mjs';
 import { backInOut } from '../../easing/back.mjs';
 import { circInOut } from '../../easing/circ.mjs';
@@ -12,7 +13,6 @@ import { DOMKeyframesResolver } from '../../render/dom/DOMKeyframesResolver.mjs'
 import { BaseAnimation } from './BaseAnimation.mjs';
 import { MainThreadAnimation } from './MainThreadAnimation.mjs';
 import { acceleratedValues } from './utils/accelerated-values.mjs';
-import { startWaapiAnimation } from './waapi/index.mjs';
 import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
 import { supportsWaapi } from './waapi/utils/supports-waapi.mjs';
 
@@ -124,7 +124,7 @@ class AcceleratedAnimation extends BaseAnimation {
         const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
         // Override the browser calculated startTime with one synchronised to other JS
         // and WAAPI animations starting this event loop.
-        animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+        animation.startTime = startTime ?? this.calcStartTime();
         if (this.pendingTimeline) {
             attachTimeline(animation, this.pendingTimeline);
             this.pendingTimeline = undefined;
@@ -183,6 +183,9 @@ class AcceleratedAnimation extends BaseAnimation {
         const { animation } = resolved;
         return animation.playbackRate;
     }
+    get finished() {
+        return this.resolved.animation.finished;
+    }
     set speed(newSpeed) {
         const { resolved } = this;
         if (!resolved)

package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs

@@ -1,8 +1,8 @@
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
-import { calcGeneratorDuration } from '../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
-import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
+import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
+import { calcGeneratorDuration } from '../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
 import { KeyframeResolver } from '../../render/utils/KeyframesResolver.mjs';
 import { clamp } from '../../utils/clamp.mjs';
 import { mix } from '../../utils/mix/index.mjs';
@@ -71,7 +71,7 @@ class MainThreadAnimation extends BaseAnimation {
             onStop && onStop();
         };
         const { name, motionValue, element, keyframes } = this.options;
-        const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
+        const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
         const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
         this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);
         this.resolver.scheduleResolve();
@@ -321,7 +321,7 @@ class MainThreadAnimation extends BaseAnimation {
             this.startTime = now - this.holdTime;
         }
         else if (!this.startTime) {
-            this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+            this.startTime = startTime ?? this.calcStartTime();
         }
         else if (this.state === "finished") {
             this.startTime = now;
@@ -339,13 +339,12 @@ class MainThreadAnimation extends BaseAnimation {
         this.driver.start();
     }
     pause() {
-        var _a;
         if (!this._resolved) {
             this.pendingPlayState = "paused";
             return;
         }
         this.state = "paused";
-        this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;
+        this.holdTime = this.currentTime ?? 0;
     }
     complete() {
         if (this.state !== "running") {
@@ -386,6 +385,9 @@ class MainThreadAnimation extends BaseAnimation {
         this.startTime = 0;
         return this.tick(time, true);
     }
+    get finished() {
+        return this.currentFinishedPromise;
+    }
 }
 // Legacy interface
 function animateValue(options) {

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -1,8 +1,8 @@
 import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
 import { secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { NativeAnimation } from '../../../../../../motion-dom/dist/es/animation/NativeAnimation.mjs';
 import { getValueTransition } from '../../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
-import { NativeAnimation } from './NativeAnimation.mjs';
 
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);
@@ -23,13 +23,15 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             const valueOptions = {
                 ...getValueTransition(elementTransition, valueName),
             };
-            valueOptions.duration = valueOptions.duration
-                ? secondsToMilliseconds(valueOptions.duration)
-                : valueOptions.duration;
-            valueOptions.delay = secondsToMilliseconds(valueOptions.delay || 0);
-            valueOptions.allowFlatten =
-                !elementTransition.type && !elementTransition.ease;
-            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+            valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
+            valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
+            animations.push(new NativeAnimation({
+                element,
+                name: valueName,
+                keyframes: valueKeyframes,
+                transition: valueOptions,
+                allowFlatten: !elementTransition.type && !elementTransition.ease,
+            }));
         }
     }
     return animations;

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-sequence.mjs

@@ -1,5 +1,5 @@
-import { GroupPlaybackControls } from '../../../../../../motion-dom/dist/es/animation/controls/Group.mjs';
 import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { GroupAnimationWithThen } from '../../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
 import { createAnimationsFromSequence } from '../../sequence/create.mjs';
 import { animateElements } from './animate-elements.mjs';
 
@@ -8,7 +8,7 @@ function animateSequence(definition, options) {
     createAnimationsFromSequence(definition, options).forEach(({ keyframes, transition }, element) => {
         animations.push(...animateElements(element, keyframes, transition));
     });
-    return new GroupPlaybackControls(animations);
+    return new GroupAnimationWithThen(animations);
 }
 
 export { animateSequence };

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs

@@ -1,10 +1,10 @@
-import { GroupPlaybackControls } from '../../../../../../motion-dom/dist/es/animation/controls/Group.mjs';
 import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { GroupAnimationWithThen } from '../../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
 import { animateElements } from './animate-elements.mjs';
 
 const createScopedWaapiAnimate = (scope) => {
     function scopedAnimate(elementOrSelector, keyframes, options) {
-        return new GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
+        return new GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
     }
     return scopedAnimate;
 };

package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs

@@ -1,7 +1,9 @@
 import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
-import { calcGeneratorDuration, maxGeneratorDuration } from '../../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
+import { supportsLinearEasing } from '../../../../../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
 import { generateLinearEasing } from '../../../../../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
+import { calcGeneratorDuration, maxGeneratorDuration } from '../../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
+import { createGeneratorEasing } from '../../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';
 import { clamp } from '../../../utils/clamp.mjs';
 import { calcGeneratorVelocity } from '../utils/velocity.mjs';
 import { springDefaults } from './defaults.mjs';
@@ -161,8 +163,16 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
             const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
             return calculatedDuration + "ms " + easing;
         },
+        toTransition: () => { },
     };
     return generator;
 }
+spring.applyToOptions = (options) => {
+    const generatorOptions = createGeneratorEasing(options, 100, spring);
+    options.ease = supportsLinearEasing() ? generatorOptions.ease : "easeOut";
+    options.duration = secondsToMilliseconds(generatorOptions.duration);
+    options.type = "keyframes";
+    return options;
+};
 
 export { spring };

package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs

@@ -1,8 +1,8 @@
-import { GroupPlaybackControls } from '../../../../../motion-dom/dist/es/animation/controls/Group.mjs';
-import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { MotionGlobalConfig } from '../../../../../motion-utils/dist/es/global-config.mjs';
 import { secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { GroupAnimationWithThen } from '../../../../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
+import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
 import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';
@@ -100,7 +100,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             });
             // We still want to return some animation controls here rather
             // than returning undefined
-            return new GroupPlaybackControls([]);
+            return new GroupAnimationWithThen([]);
         }
     }
     /**

package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs

@@ -19,7 +19,6 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
     return shouldBlock;
 }
 function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
-    var _a;
     let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
     if (transitionOverride)
         transition = transitionOverride;
@@ -28,7 +27,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
         visualElement.animationState &&
         visualElement.animationState.getState()[type];
     for (const key in target) {
-        const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null);
+        const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
         const valueTarget = target[key];
         if (valueTarget === undefined ||
             (animationTypeState &&

package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs

@@ -2,9 +2,8 @@ import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs'
 import { animateTarget } from './visual-element-target.mjs';
 
 function animateVariant(visualElement, variant, options = {}) {
-    var _a;
     const resolved = resolveVariant(visualElement, variant, options.type === "exit"
-        ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom
+        ? visualElement.presenceContext?.custom
         : undefined);
     let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
     if (options.transitionOverride) {

package/dist/es/framer-motion/dist/es/animation/optimized-appear/handoff.mjs

@@ -2,7 +2,6 @@ import { appearAnimationStore } from './store.mjs';
 import { appearStoreId } from './store-id.mjs';
 
 function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
-    var _a;
     const storeId = appearStoreId(elementId, valueName);
     const optimisedAnimation = appearAnimationStore.get(storeId);
     if (!optimisedAnimation) {
@@ -10,8 +9,7 @@ function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
     }
     const { animation, startTime } = optimisedAnimation;
     function cancelAnimation() {
-        var _a;
-        (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, elementId, valueName, frame);
+        window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame);
     }
     /**
      * We can cancel the animation once it's finished now that we've synced
@@ -21,7 +19,7 @@ function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
      * older browsers.
      */
     animation.onfinish = cancelAnimation;
-    if (startTime === null || ((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, elementId))) {
+    if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {
         /**
          * If the startTime is null, this animation is the Paint Ready detection animation
          * and we can cancel it immediately without handoff.

package/dist/es/framer-motion/dist/es/animation/optimized-appear/start.mjs

@@ -1,6 +1,6 @@
 import '../../../../../motion-utils/dist/es/errors.mjs';
 import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
-import { startWaapiAnimation } from '../animators/waapi/index.mjs';
+import { startWaapiAnimation } from '../../../../../motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs';
 import { optimizedAppearDataId } from './data-id.mjs';
 import { getOptimisedAppearId } from './get-appear-id.mjs';
 import { handoffOptimizedAppearAnimation } from './handoff.mjs';
@@ -125,18 +125,16 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
             }
         };
         window.MotionCheckAppearSync = (visualElement, valueName, value) => {
-            var _a, _b;
             const appearId = getOptimisedAppearId(visualElement);
             if (!appearId)
                 return;
-            const valueIsOptimised = (_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
-            const externalAnimationValue = (_b = visualElement.props.values) === null || _b === void 0 ? void 0 : _b[valueName];
+            const valueIsOptimised = window.MotionHasOptimisedAnimation?.(appearId, valueName);
+            const externalAnimationValue = visualElement.props.values?.[valueName];
             if (!valueIsOptimised || !externalAnimationValue)
                 return;
             const removeSyncCheck = value.on("change", (latestValue) => {
-                var _a;
                 if (externalAnimationValue.get() !== latestValue) {
-                    (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
+                    window.MotionCancelOptimisedAnimation?.(appearId, valueName);
                     removeSyncCheck();
                 }
             });

package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs

@@ -1,8 +1,8 @@
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { progress } from '../../../../../motion-utils/dist/es/progress.mjs';
 import { secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
-import { createGeneratorEasing } from '../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';
 import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
+import { createGeneratorEasing } from '../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';
 import { getEasingForSegment } from '../../easing/utils/get-easing-for-segment.mjs';
 import { defaultOffset } from '../../utils/offsets/default.mjs';
 import { fillOffset } from '../../utils/offsets/fill.mjs';
@@ -72,7 +72,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             const numKeyframes = valueKeyframesAsList.length;
             const createGenerator = isGenerator(type)
                 ? type
-                : generators === null || generators === void 0 ? void 0 : generators[type];
+                : generators?.[type];
             if (numKeyframes <= 2 && createGenerator) {
                 /**
                  * As we're creating an easing function from a spring,
@@ -94,7 +94,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
                 ease = springEasing.ease;
                 duration = springEasing.duration;
             }
-            duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
+            duration ?? (duration = defaultDuration);
             const startTime = currentTime + calculatedDelay;
             /**
              * If there's only one time offset of 0, fill in a second with length 1

package/dist/es/framer-motion/dist/es/animation/sequence/utils/calc-time.mjs

@@ -3,7 +3,6 @@
  * calculate an absolute time for the next keyframes.
  */
 function calcNextTime(current, next, prev, labels) {
-    var _a;
     if (typeof next === "number") {
         return next;
     }
@@ -14,7 +13,7 @@ function calcNextTime(current, next, prev, labels) {
         return prev;
     }
     else {
-        return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+        return labels.get(next) ?? current;
     }
 }
 

package/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs

@@ -151,9 +151,9 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
                         isEveryExitComplete = false;
                 });
                 if (isEveryExitComplete) {
-                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();
+                    forceRender?.();
                     setRenderedChildren(pendingPresentChildren.current);
-                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());
+                    propagate && safeToRemove?.();
                     onExitComplete && onExitComplete();
                 }
             };

package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -135,11 +135,8 @@ class VisualElementDragControls {
             onDrag && onDrag(event, info);
         };
         const onSessionEnd = (event, info) => this.stop(event, info);
-        const resumeAnimation = () => eachAxis((axis) => {
-            var _a;
-            return this.getAnimationState(axis) === "paused" &&
-                ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());
-        });
+        const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" &&
+            this.getAxisMotionValue(axis).animation?.play());
         const { dragSnapToOrigin } = this.getProps();
         this.panSession = new PanSession(originEvent, {
             onSessionStart,
@@ -194,12 +191,11 @@ class VisualElementDragControls {
         axisValue.set(next);
     }
     resolveConstraints() {
-        var _a;
         const { dragConstraints, dragElastic } = this.getProps();
         const layout = this.visualElement.projection &&
             !this.visualElement.projection.layout
             ? this.visualElement.projection.measure(false)
-            : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout;
+            : this.visualElement.projection?.layout;
         const prevConstraints = this.constraints;
         if (dragConstraints && isRefObject(dragConstraints)) {
             if (!this.constraints) {
@@ -302,11 +298,10 @@ class VisualElementDragControls {
         eachAxis((axis) => this.getAxisMotionValue(axis).stop());
     }
     pauseAnimation() {
-        eachAxis((axis) => { var _a; return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause(); });
+        eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
     }
     getAnimationState(axis) {
-        var _a;
-        return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;
+        return this.getAxisMotionValue(axis).animation?.state;
     }
     /**
      * Drag works differently depending on which props are provided.

package/dist/es/framer-motion/dist/es/motion/features/animation/index.mjs

@@ -32,9 +32,8 @@ class AnimationFeature extends Feature {
         }
     }
     unmount() {
-        var _a;
         this.node.animationState.reset();
-        (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unmountControls?.();
     }
 }
 

package/dist/es/framer-motion/dist/es/motion/index.mjs

@@ -24,7 +24,6 @@ import { useVisualElement } from './utils/use-visual-element.mjs';
  * component "offline", or outside the React render cycle.
  */
 function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
-    var _a, _b;
     preloadedFeatures && loadFeatures(preloadedFeatures);
     function MotionComponent(props, externalRef) {
         /**
@@ -60,7 +59,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
     }
     MotionComponent.displayName = `motion.${typeof Component === "string"
         ? Component
-        : `create(${(_b = (_a = Component.displayName) !== null && _a !== void 0 ? _a : Component.name) !== null && _b !== void 0 ? _b : ""})`}`;
+        : `create(${Component.displayName ?? Component.name ?? ""})`}`;
     const ForwardRefMotionComponent = forwardRef(MotionComponent);
     ForwardRefMotionComponent[motionComponentSymbol] = Component;
     return ForwardRefMotionComponent;
@@ -92,7 +91,7 @@ function getProjectionFunctionality(props) {
         return {};
     const combined = { ...drag, ...layout };
     return {
-        MeasureLayout: (drag === null || drag === void 0 ? void 0 : drag.isEnabled(props)) || (layout === null || layout === void 0 ? void 0 : layout.isEnabled(props))
+        MeasureLayout: drag?.isEnabled(props) || layout?.isEnabled(props)
             ? combined.MeasureLayout
             : undefined,
         ProjectionNode: combined.ProjectionNode,

package/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs

@@ -11,7 +11,6 @@ import { isRefObject } from '../../utils/is-ref-object.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-    var _a, _b;
     const { visualElement: parent } = useContext(MotionContext);
     const lazyContext = useContext(LazyContext);
     const presenceContext = useContext(PresenceContext);
@@ -61,8 +60,8 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      */
     const optimisedAppearId = props[optimizedAppearDataAttribute];
     const wantsHandoff = useRef(Boolean(optimisedAppearId) &&
-        !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&
-        ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
+        !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
+        window.MotionHasOptimisedAnimation?.(optimisedAppearId));
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
@@ -93,8 +92,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         if (wantsHandoff.current) {
             // This ensures all future calls to animateChanges() in this component will run in useEffect
             queueMicrotask(() => {
-                var _a;
-                (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);
+                window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
             });
             wantsHandoff.current = false;
         }