framer-motion 9.0.2 → 9.0.3

package/dist/es/render/VisualElement.mjs

@@ -1,7 +1,5 @@
 import { sync, cancelSync } from '../frameloop/index.mjs';
 import { warning, invariant } from 'hey-listen';
-import { createElement } from 'react';
-import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
 import { isRefObject } from '../utils/is-ref-object.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
@@ -17,6 +15,7 @@ import { isVariantLabel } from './utils/is-variant-label.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
 import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
 import { warnOnce } from '../utils/warn-once.mjs';
+import { featureDefinitions } from '../motion/features/definitions.mjs';
 
 const featureNames = Object.keys(featureDefinitions);
 const numFeatures = featureNames.length;
@@ -34,7 +33,7 @@ const propEventHandlers = [
  * HTMLElement, SVGElement, Three.Object3D etc.
  */
 class VisualElement {
-    constructor({ parent, props, reducedMotionConfig, visualState, }, options = {}) {
+    constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) {
         /**
          * A reference to the current underlying Instance, e.g. a HTMLElement
          * or Three.Mesh etc.
@@ -64,10 +63,9 @@ class VisualElement {
          */
         this.values = new Map();
         /**
-         * Tracks whether this VisualElement's React component is currently present
-         * within the defined React tree.
+         * Cleanup functions for active features (hover/tap/exit etc)
          */
-        this.isPresent = true;
+        this.features = {};
         /**
          * A map of every subscription that binds the provided or generated
          * motion values onChange listeners to this visual element.
@@ -104,6 +102,7 @@ class VisualElement {
         this.renderState = renderState;
         this.parent = parent;
         this.props = props;
+        this.presenceContext = presenceContext;
         this.depth = parent ? parent.depth + 1 : 0;
         this.reducedMotionConfig = reducedMotionConfig;
         this.options = options;
@@ -145,13 +144,12 @@ class VisualElement {
         return {};
     }
     mount(instance) {
-        var _a;
         this.current = instance;
         if (this.projection) {
             this.projection.mount(instance);
         }
         if (this.parent && this.isVariantNode && !this.isControllingVariants) {
-            this.removeFromVariantTree = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.addVariantChild(this);
+            this.removeFromVariantTree = this.parent.addVariantChild(this);
         }
         this.values.forEach((value, key) => this.bindToMotionValue(key, value));
         if (!hasReducedMotionListener.current) {
@@ -168,19 +166,21 @@ class VisualElement {
         }
         if (this.parent)
             this.parent.children.add(this);
-        this.setProps(this.props);
+        this.update(this.props, this.presenceContext);
     }
     unmount() {
-        var _a, _b, _c;
-        (_a = this.projection) === null || _a === void 0 ? void 0 : _a.unmount();
+        this.projection && this.projection.unmount();
         cancelSync.update(this.notifyUpdate);
         cancelSync.render(this.render);
         this.valueSubscriptions.forEach((remove) => remove());
-        (_b = this.removeFromVariantTree) === null || _b === void 0 ? void 0 : _b.call(this);
-        (_c = this.parent) === null || _c === void 0 ? void 0 : _c.children.delete(this);
+        this.removeFromVariantTree && this.removeFromVariantTree();
+        this.parent && this.parent.children.delete(this);
         for (const key in this.events) {
             this.events[key].clear();
         }
+        for (const key in this.features) {
+            this.features[key].unmount();
+        }
         this.current = null;
     }
     bindToMotionValue(key, value) {
@@ -205,12 +205,14 @@ class VisualElement {
          */
         if (!this.current ||
             !this.sortInstanceNodePosition ||
-            this.type !== other.type)
+            this.type !== other.type) {
             return 0;
+        }
         return this.sortInstanceNodePosition(this.current, other.current);
     }
-    loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
-        const features = [];
+    loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, projectionId, initialLayoutGroupConfig) {
+        let ProjectionNodeConstructor;
+        let MeasureLayout;
         /**
          * If we're in development mode, check to make sure we're not rendering a motion component
          * as a child of LazyMotion, as this will break the file-size benefits of using it.
@@ -225,18 +227,16 @@ class VisualElement {
         }
         for (let i = 0; i < numFeatures; i++) {
             const name = featureNames[i];
-            const { isEnabled, Component } = featureDefinitions[name];
-            /**
-             * It might be possible in the future to use this moment to
-             * dynamically request functionality. In initial tests this
-             * was producing a lot of duplication amongst bundles.
-             */
-            if (isEnabled(renderedProps) && Component) {
-                features.push(createElement(Component, {
-                    key: name,
-                    ...renderedProps,
-                    visualElement: this,
-                }));
+            const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];
+            if (ProjectionNode)
+                ProjectionNodeConstructor = ProjectionNode;
+            if (isEnabled(renderedProps)) {
+                if (!this.features[name] && FeatureConstructor) {
+                    this.features[name] = new FeatureConstructor(this);
+                }
+                if (MeasureLayoutComponent) {
+                    MeasureLayout = MeasureLayoutComponent;
+                }
             }
         }
         if (!this.projection && ProjectionNodeConstructor) {
@@ -262,7 +262,19 @@ class VisualElement {
                 layoutRoot,
             });
         }
-        return features;
+        return MeasureLayout;
+    }
+    updateFeatures() {
+        for (const key in this.features) {
+            const feature = this.features[key];
+            if (feature.isMounted) {
+                feature.update(this.props, this.prevProps);
+            }
+            else {
+                feature.mount();
+                feature.isMounted = true;
+            }
+        }
     }
     triggerBuild() {
         this.build(this.renderState, this.latestValues, this.options, this.props);
@@ -297,12 +309,14 @@ class VisualElement {
      * Update the provided props. Ensure any newly-added motion values are
      * added to our map, old ones removed, and listeners updated.
      */
-    setProps(props) {
+    update(props, presenceContext) {
         if (props.transformTemplate || this.props.transformTemplate) {
             this.scheduleRender();
         }
-        const prevProps = this.props;
+        this.prevProps = this.props;
         this.props = props;
+        this.prevPresenceContext = this.presenceContext;
+        this.presenceContext = presenceContext;
         /**
          * Update prop event handlers ie onAnimationStart, onAnimationComplete
          */
@@ -317,7 +331,7 @@ class VisualElement {
                 this.propEventSubscriptions[key] = this.on(key, listener);
             }
         }
-        this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, prevProps), this.prevMotionValues);
+        this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues);
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
@@ -329,8 +343,7 @@ class VisualElement {
      * Returns the variant definition with a given name.
      */
     getVariant(name) {
-        var _a;
-        return (_a = this.props.variants) === null || _a === void 0 ? void 0 : _a[name];
+        return this.props.variants ? this.props.variants[name] : undefined;
     }
     /**
      * Returns the defined default transition on this component.
@@ -342,15 +355,20 @@ class VisualElement {
         return this.props.transformPagePoint;
     }
     getClosestVariantNode() {
-        var _a;
-        return this.isVariantNode ? this : (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getClosestVariantNode();
+        return this.isVariantNode
+            ? this
+            : this.parent
+                ? this.parent.getClosestVariantNode()
+                : undefined;
     }
     getVariantContext(startAtParent = false) {
-        var _a, _b;
-        if (startAtParent)
-            return (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getVariantContext();
+        if (startAtParent) {
+            return this.parent ? this.parent.getVariantContext() : undefined;
+        }
         if (!this.isControllingVariants) {
-            const context = ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.getVariantContext()) || {};
+            const context = this.parent
+                ? this.parent.getVariantContext() || {}
+                : {};
             if (this.props.initial !== undefined) {
                 context.initial = this.props.initial;
             }
@@ -370,10 +388,10 @@ class VisualElement {
      * Add a child visual element to our set of children.
      */
     addVariantChild(child) {
-        var _a;
         const closestVariantNode = this.getClosestVariantNode();
         if (closestVariantNode) {
-            (_a = closestVariantNode.variantChildren) === null || _a === void 0 ? void 0 : _a.add(child);
+            closestVariantNode.variantChildren &&
+                closestVariantNode.variantChildren.add(child);
             return () => closestVariantNode.variantChildren.delete(child);
         }
     }
@@ -393,10 +411,12 @@ class VisualElement {
      * Remove a motion value and unbind any active subscriptions.
      */
     removeValue(key) {
-        var _a;
         this.values.delete(key);
-        (_a = this.valueSubscriptions.get(key)) === null || _a === void 0 ? void 0 : _a();
-        this.valueSubscriptions.delete(key);
+        const unsubscribe = this.valueSubscriptions.get(key);
+        if (unsubscribe) {
+            unsubscribe();
+            this.valueSubscriptions.delete(key);
+        }
         delete this.latestValues[key];
         this.removeValueFromRenderState(key, this.renderState);
     }
@@ -473,8 +493,9 @@ class VisualElement {
         return this.events[eventName].add(callback);
     }
     notify(eventName, ...args) {
-        var _a;
-        (_a = this.events[eventName]) === null || _a === void 0 ? void 0 : _a.notify(...args);
+        if (this.events[eventName]) {
+            this.events[eventName].notify(...args);
+        }
     }
 }
 const variantProps = ["initial", ...variantPriorityOrder];

package/dist/es/render/dom/DOMVisualElement.mjs

@@ -12,8 +12,7 @@ class DOMVisualElement extends VisualElement {
         return a.compareDocumentPosition(b) & 2 ? 1 : -1;
     }
     getBaseTargetFromProps(props, key) {
-        var _a;
-        return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key];
+        return props.style ? props.style[key] : undefined;
     }
     removeValueFromRenderState(key, { vars, style }) {
         delete vars[key];

package/dist/es/render/dom/features-max.mjs

@@ -1,7 +1,6 @@
 import { drag } from '../../motion/features/drag.mjs';
-import { layoutFeatures } from '../../motion/features/layout/index.mjs';
+import { layout } from '../../motion/features/layout.mjs';
 import { domAnimation } from './features-animation.mjs';
-import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';
 
 /**
  * @public
@@ -9,8 +8,7 @@ import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs
 const domMax = {
     ...domAnimation,
     ...drag,
-    ...layoutFeatures,
-    projectionNodeConstructor: HTMLProjectionNode,
+    ...layout,
 };
 
 export { domMax };

package/dist/es/render/dom/motion.mjs

@@ -5,14 +5,13 @@ import { gestureAnimations } from '../../motion/features/gestures.mjs';
 import { animations } from '../../motion/features/animations.mjs';
 import { drag } from '../../motion/features/drag.mjs';
 import { createDomVisualElement } from './create-visual-element.mjs';
-import { layoutFeatures } from '../../motion/features/layout/index.mjs';
-import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';
+import { layout } from '../../motion/features/layout.mjs';
 
-const featureBundle = {
+const preloadedFeatures = {
     ...animations,
     ...gestureAnimations,
     ...drag,
-    ...layoutFeatures,
+    ...layout,
 };
 /**
  * HTML & SVG components, optimised for use with gestures and animation. These can be used as
@@ -20,7 +19,7 @@ const featureBundle = {
  *
  * @public
  */
-const motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomMotionConfig(Component, config, featureBundle, createDomVisualElement, HTMLProjectionNode));
+const motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomMotionConfig(Component, config, preloadedFeatures, createDomVisualElement));
 /**
  * Create a DOM `motion` component with the provided string. This is primarily intended
  * as a full alternative to `motion` for consumers who have to support environments that don't
@@ -37,7 +36,7 @@ const motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomM
  * @public
  */
 function createDomMotionComponent(key) {
-    return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, featureBundle, createDomVisualElement, HTMLProjectionNode));
+    return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, preloadedFeatures, createDomVisualElement));
 }
 
 export { createDomMotionComponent, motion };

package/dist/es/render/dom/utils/create-config.mjs

@@ -3,7 +3,7 @@ import { createUseRender } from '../use-render.mjs';
 import { svgMotionConfig } from '../../svg/config-motion.mjs';
 import { htmlMotionConfig } from '../../html/config-motion.mjs';
 
-function createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement, projectionNodeConstructor) {
+function createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement) {
     const baseConfig = isSVGComponent(Component)
         ? svgMotionConfig
         : htmlMotionConfig;
@@ -12,7 +12,6 @@ function createDomMotionConfig(Component, { forwardMotionProps = false }, preloa
         preloadedFeatures,
         useRender: createUseRender(forwardMotionProps),
         createVisualElement,
-        projectionNodeConstructor,
         Component,
     };
 }

package/dist/es/render/dom/value-types/animatable-none.mjs

@@ -3,12 +3,13 @@ import { filter } from '../../../value/types/complex/filter.mjs';
 import { getDefaultValueType } from './defaults.mjs';
 
 function getAnimatableNone(key, value) {
-    var _a;
     let defaultValueType = getDefaultValueType(key);
     if (defaultValueType !== filter)
         defaultValueType = complex;
     // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
-    return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
+    return defaultValueType.getAnimatableNone
+        ? defaultValueType.getAnimatableNone(value)
+        : undefined;
 }
 
 export { getAnimatableNone };

package/dist/es/render/svg/SVGVisualElement.mjs

@@ -18,9 +18,9 @@ class SVGVisualElement extends DOMVisualElement {
         return props[key];
     }
     readValueFromInstance(instance, key) {
-        var _a;
         if (transformProps.has(key)) {
-            return ((_a = getDefaultValueType(key)) === null || _a === void 0 ? void 0 : _a.default) || 0;
+            const defaultType = getDefaultValueType(key);
+            return defaultType ? defaultType.default || 0 : 0;
         }
         key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
         return instance.getAttribute(key);

package/dist/es/render/utils/animation-state.mjs

@@ -276,12 +276,16 @@ function createAnimationState(visualElement) {
      * Change whether a certain animation type is active.
      */
     function setActive(type, isActive, options) {
-        var _a;
         // If the active state hasn't changed, we can safely do nothing here
         if (state[type].isActive === isActive)
             return Promise.resolve();
         // Propagate active change to children
-        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
+        if (visualElement.variantChildren) {
+            visualElement.variantChildren.forEach((child) => {
+                child.animationState &&
+                    child.animationState.setActive(type, isActive);
+            });
+        }
         state[type].isActive = isActive;
         const animations = animateChanges(options, type);
         for (const key in state) {

package/dist/es/render/utils/animation.mjs

@@ -25,7 +25,6 @@ function animateVisualElement(visualElement, definition, options = {}) {
     return animation.then(() => visualElement.notify("AnimationComplete", definition));
 }
 function animateVariant(visualElement, variant, options = {}) {
-    var _a;
     const resolved = resolveVariant(visualElement, variant, options.custom);
     let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
     if (options.transitionOverride) {
@@ -42,7 +41,7 @@ function animateVariant(visualElement, variant, options = {}) {
      * If we have children, create a callback that runs all their animations.
      * Otherwise, we resolve a Promise immediately for a composable no-op.
      */
-    const getChildAnimations = ((_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.size)
+    const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
         ? (forwardDelay = 0) => {
             const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
             return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
@@ -67,13 +66,14 @@ function animateVariant(visualElement, variant, options = {}) {
  * @internal
  */
 function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {
-    var _a;
     let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
     const willChange = visualElement.getValue("willChange");
     if (transitionOverride)
         transition = transitionOverride;
     const animations = [];
-    const animationTypeState = type && ((_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.getState()[type]);
+    const animationTypeState = type &&
+        visualElement.animationState &&
+        visualElement.animationState.getState()[type];
     for (const key in target) {
         const value = visualElement.getValue(key);
         const valueTarget = target[key];

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "9.0.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.2 may not work as expected.`);
+                warnOnce(nextValue.version === "9.0.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/render/utils/setters.mjs

@@ -31,12 +31,13 @@ function setTarget(visualElement, definition) {
 function setVariants(visualElement, variantLabels) {
     const reversedLabels = [...variantLabels].reverse();
     reversedLabels.forEach((key) => {
-        var _a;
         const variant = visualElement.getVariant(key);
         variant && setTarget(visualElement, variant);
-        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
-            setVariants(child, variantLabels);
-        });
+        if (visualElement.variantChildren) {
+            visualElement.variantChildren.forEach((child) => {
+                setVariants(child, variantLabels);
+            });
+        }
     });
 }
 function setValues(visualElement, definition) {
@@ -104,14 +105,18 @@ function getOriginFromTransition(key, transition) {
     return valueTransition.from;
 }
 function getOrigin(target, transition, visualElement) {
-    var _a;
     const origin = {};
     for (const key in target) {
         const transitionOrigin = getOriginFromTransition(key, transition);
-        origin[key] =
-            transitionOrigin !== undefined
-                ? transitionOrigin
-                : (_a = visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.get();
+        if (transitionOrigin !== undefined) {
+            origin[key] = transitionOrigin;
+        }
+        else {
+            const value = visualElement.getValue(key);
+            if (value) {
+                origin[key] = value.get();
+            }
+        }
     }
     return origin;
 }

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "9.0.2";
+        this.version = "9.0.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/utils/is-motion-value.mjs

@@ -1,3 +1,3 @@
-const isMotionValue = (value) => !!(value === null || value === void 0 ? void 0 : value.getVelocity);
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
 
 export { isMotionValue };