framer-motion 7.6.4 → 7.6.6

package/dist/es/render/VisualElement.mjs

@@ -0,0 +1,480 @@
+import sync, { cancelSync } from 'framesync';
+import { 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 { env } from '../utils/process.mjs';
+import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
+import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
+import { SubscriptionManager } from '../utils/subscription-manager.mjs';
+import { motionValue } from '../value/index.mjs';
+import { isWillChangeMotionValue } from '../value/use-will-change/is.mjs';
+import { isMotionValue } from '../value/utils/is-motion-value.mjs';
+import { variantPriorityOrder } from './utils/animation-state.mjs';
+import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
+import { isVariantLabel } from './utils/is-variant-label.mjs';
+import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
+import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
+
+const featureNames = Object.keys(featureDefinitions);
+const numFeatures = featureNames.length;
+const propEventHandlers = [
+    "AnimationStart",
+    "AnimationComplete",
+    "Update",
+    "Unmount",
+    "BeforeLayoutMeasure",
+    "LayoutMeasure",
+    "LayoutAnimationStart",
+    "LayoutAnimationComplete",
+];
+/**
+ * A VisualElement is an imperative abstraction around UI elements such as
+ * HTMLElement, SVGElement, Three.Object3D etc.
+ */
+class VisualElement {
+    constructor({ parent, props, reducedMotionConfig, visualState, }, options = {}) {
+        /**
+         * A reference to the current underlying Instance, e.g. a HTMLElement
+         * or Three.Mesh etc.
+         */
+        this.current = null;
+        /**
+         * A set containing references to this VisualElement's children.
+         */
+        this.children = new Set();
+        /**
+         * Determine what role this visual element should take in the variant tree.
+         */
+        this.isVariantNode = false;
+        this.isControllingVariants = false;
+        /**
+         * Decides whether this VisualElement should animate in reduced motion
+         * mode.
+         *
+         * TODO: This is currently set on every individual VisualElement but feels
+         * like it could be set globally.
+         */
+        this.shouldReduceMotion = null;
+        /**
+         * A map of all motion values attached to this visual element. Motion
+         * values are source of truth for any given animated value. A motion
+         * value might be provided externally by the component via props.
+         */
+        this.values = new Map();
+        /**
+         * Tracks whether this VisualElement's React component is currently present
+         * within the defined React tree.
+         */
+        this.isPresent = true;
+        /**
+         * A map of every subscription that binds the provided or generated
+         * motion values onChange listeners to this visual element.
+         */
+        this.valueSubscriptions = new Map();
+        /**
+         * A reference to the previously-provided motion values as returned
+         * from scrapeMotionValuesFromProps. We use the keys in here to determine
+         * if any motion values need to be removed after props are updated.
+         */
+        this.prevMotionValues = {};
+        /**
+         * An object containing a SubscriptionManager for each active event.
+         */
+        this.events = {};
+        /**
+         * An object containing an unsubscribe function for each prop event subscription.
+         * For example, every "Update" event can have multiple subscribers via
+         * VisualElement.on(), but only one of those can be defined via the onUpdate prop.
+         */
+        this.propEventSubscriptions = {};
+        this.notifyUpdate = () => this.notify("Update", this.latestValues);
+        this.render = () => {
+            if (!this.current)
+                return;
+            this.triggerBuild();
+            this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
+        };
+        this.scheduleRender = () => sync.render(this.render, false, true);
+        const { latestValues, renderState } = visualState;
+        this.latestValues = latestValues;
+        this.baseTarget = { ...latestValues };
+        this.initialValues = props.initial ? { ...latestValues } : {};
+        this.renderState = renderState;
+        this.parent = parent;
+        this.props = props;
+        this.depth = parent ? parent.depth + 1 : 0;
+        this.reducedMotionConfig = reducedMotionConfig;
+        this.options = options;
+        this.isControllingVariants = isControllingVariants(props);
+        this.isVariantNode = isVariantNode(props);
+        if (this.isVariantNode) {
+            this.variantChildren = new Set();
+        }
+        this.manuallyAnimateOnMount = Boolean(parent && parent.current);
+        /**
+         * Any motion values that are provided to the element when created
+         * aren't yet bound to the element, as this would technically be impure.
+         * However, we iterate through the motion values and set them to the
+         * initial values for this component.
+         *
+         * TODO: This is impure and we should look at changing this to run on mount.
+         * Doing so will break some tests but this isn't neccessarily a breaking change,
+         * more a reflection of the test.
+         */
+        const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props);
+        for (const key in initialMotionValues) {
+            const value = initialMotionValues[key];
+            if (latestValues[key] !== undefined && isMotionValue(value)) {
+                value.set(latestValues[key], false);
+                if (isWillChangeMotionValue(willChange)) {
+                    willChange.add(key);
+                }
+            }
+        }
+        /**
+         * Update external values with initial values
+         */
+        if (props.values) {
+            for (const key in props.values) {
+                const value = props.values[key];
+                if (latestValues[key] !== undefined && isMotionValue(value)) {
+                    value.set(latestValues[key]);
+                }
+            }
+        }
+    }
+    /**
+     * This method takes React props and returns found MotionValues. For example, HTML
+     * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
+     *
+     * This isn't an abstract method as it needs calling in the constructor, but it is
+     * intended to be one.
+     */
+    scrapeMotionValuesFromProps(_props) {
+        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.values.forEach((value, key) => this.bindToMotionValue(key, value));
+        if (!hasReducedMotionListener.current) {
+            initPrefersReducedMotion();
+        }
+        this.shouldReduceMotion =
+            this.reducedMotionConfig === "never"
+                ? false
+                : this.reducedMotionConfig === "always"
+                    ? true
+                    : prefersReducedMotion.current;
+        if (this.parent)
+            this.parent.children.add(this);
+        this.setProps(this.props);
+    }
+    unmount() {
+        var _a, _b, _c;
+        (_a = this.projection) === null || _a === void 0 ? void 0 : _a.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);
+        for (const key in this.events) {
+            this.events[key].clear();
+        }
+        this.current = null;
+    }
+    bindToMotionValue(key, value) {
+        const removeOnChange = value.onChange((latestValue) => {
+            this.latestValues[key] = latestValue;
+            this.props.onUpdate &&
+                sync.update(this.notifyUpdate, false, true);
+        });
+        const removeOnRenderRequest = value.onRenderRequest(this.scheduleRender);
+        this.valueSubscriptions.set(key, () => {
+            removeOnChange();
+            removeOnRenderRequest();
+        });
+    }
+    sortNodePosition(other) {
+        /**
+         * If these nodes aren't even of the same type we can't compare their depth.
+         */
+        if (!this.current ||
+            !this.sortInstanceNodePosition ||
+            this.type !== other.type)
+            return 0;
+        return this.sortInstanceNodePosition(this.current, other.current);
+    }
+    loadFeatures(renderedProps, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
+        const features = [];
+        /**
+         * 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.
+         */
+        if (env !== "production" && preloadedFeatures && isStrict) {
+            invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
+        }
+        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,
+                }));
+            }
+        }
+        if (!this.projection && ProjectionNodeConstructor) {
+            this.projection = new ProjectionNodeConstructor(projectionId, this.latestValues, this.parent && this.parent.projection);
+            const { layoutId, layout, drag, dragConstraints, layoutScroll } = renderedProps;
+            this.projection.setOptions({
+                layoutId,
+                layout,
+                alwaysMeasureLayout: Boolean(drag) ||
+                    (dragConstraints && isRefObject(dragConstraints)),
+                visualElement: this,
+                scheduleRender: () => this.scheduleRender(),
+                /**
+                 * TODO: Update options in an effect. This could be tricky as it'll be too late
+                 * to update by the time layout animations run.
+                 * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+                 * ensuring it gets called if there's no potential layout animations.
+                 *
+                 */
+                animationType: typeof layout === "string" ? layout : "both",
+                initialPromotionConfig: initialLayoutGroupConfig,
+                layoutScroll,
+            });
+        }
+        return features;
+    }
+    triggerBuild() {
+        this.build(this.renderState, this.latestValues, this.options, this.props);
+    }
+    /**
+     * Measure the current viewport box with or without transforms.
+     * Only measures axis-aligned boxes, rotate and skew must be manually
+     * removed with a re-render to work.
+     */
+    measureViewportBox() {
+        return this.current
+            ? this.measureInstanceViewportBox(this.current, this.props)
+            : createBox();
+    }
+    getStaticValue(key) {
+        return this.latestValues[key];
+    }
+    setStaticValue(key, value) {
+        this.latestValues[key] = value;
+    }
+    /**
+     * Make a target animatable by Popmotion. For instance, if we're
+     * trying to animate width from 100px to 100vw we need to measure 100vw
+     * in pixels to determine what we really need to animate to. This is also
+     * pluggable to support Framer's custom value types like Color,
+     * and CSS variables.
+     */
+    makeTargetAnimatable(target, canMutate = true) {
+        return this.makeTargetAnimatableFromInstance(target, this.props, canMutate);
+    }
+    /**
+     * Update the provided props. Ensure any newly-added motion values are
+     * added to our map, old ones removed, and listeners updated.
+     */
+    setProps(props) {
+        if (props.transformTemplate || this.props.transformTemplate) {
+            this.scheduleRender();
+        }
+        this.props = props;
+        /**
+         * Update prop event handlers ie onAnimationStart, onAnimationComplete
+         */
+        for (let i = 0; i < propEventHandlers.length; i++) {
+            const key = propEventHandlers[i];
+            if (this.propEventSubscriptions[key]) {
+                this.propEventSubscriptions[key]();
+                delete this.propEventSubscriptions[key];
+            }
+            const listener = props["on" + key];
+            if (listener) {
+                this.propEventSubscriptions[key] = this.on(key, listener);
+            }
+        }
+        this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props), this.prevMotionValues);
+    }
+    getProps() {
+        return this.props;
+    }
+    /**
+     * 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];
+    }
+    /**
+     * Returns the defined default transition on this component.
+     */
+    getDefaultTransition() {
+        return this.props.transition;
+    }
+    getTransformPagePoint() {
+        return this.props.transformPagePoint;
+    }
+    getClosestVariantNode() {
+        var _a;
+        return this.isVariantNode ? this : (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getClosestVariantNode();
+    }
+    getVariantContext(startAtParent = false) {
+        var _a, _b;
+        if (startAtParent)
+            return (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getVariantContext();
+        if (!this.isControllingVariants) {
+            const context = ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.getVariantContext()) || {};
+            if (this.props.initial !== undefined) {
+                context.initial = this.props.initial;
+            }
+            return context;
+        }
+        const context = {};
+        for (let i = 0; i < numVariantProps; i++) {
+            const name = variantProps[i];
+            const prop = this.props[name];
+            if (isVariantLabel(prop) || prop === false) {
+                context[name] = prop;
+            }
+        }
+        return context;
+    }
+    /**
+     * 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);
+            return () => closestVariantNode.variantChildren.delete(child);
+        }
+    }
+    /**
+     * Add a motion value and bind it to this visual element.
+     */
+    addValue(key, value) {
+        // Remove existing value if it exists
+        if (this.hasValue(key))
+            this.removeValue(key);
+        this.values.set(key, value);
+        this.latestValues[key] = value.get();
+        this.bindToMotionValue(key, value);
+    }
+    /**
+     * 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);
+        delete this.latestValues[key];
+        this.removeValueFromRenderState(key, this.renderState);
+    }
+    /**
+     * Check whether we have a motion value for this key
+     */
+    hasValue(key) {
+        return this.values.has(key);
+    }
+    /**
+     * Get a motion value for this key. If called with a default
+     * value, we'll create one if none exists.
+     */
+    getValue(key, defaultValue) {
+        if (this.props.values && this.props.values[key]) {
+            return this.props.values[key];
+        }
+        let value = this.values.get(key);
+        if (value === undefined && defaultValue !== undefined) {
+            value = motionValue(defaultValue);
+            this.addValue(key, value);
+        }
+        return value;
+    }
+    /**
+     * If we're trying to animate to a previously unencountered value,
+     * we need to check for it in our state and as a last resort read it
+     * directly from the instance (which might have performance implications).
+     */
+    readValue(key) {
+        return this.latestValues[key] !== undefined || !this.current
+            ? this.latestValues[key]
+            : this.readValueFromInstance(this.current, key, this.options);
+    }
+    /**
+     * Set the base target to later animate back to. This is currently
+     * only hydrated on creation and when we first read a value.
+     */
+    setBaseTarget(key, value) {
+        this.baseTarget[key] = value;
+    }
+    /**
+     * Find the base target for a value thats been removed from all animation
+     * props.
+     */
+    getBaseTarget(key) {
+        var _a;
+        const { initial } = this.props;
+        const valueFromInitial = typeof initial === "string" || typeof initial === "object"
+            ? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key]
+            : undefined;
+        /**
+         * If this value still exists in the current initial variant, read that.
+         */
+        if (initial && valueFromInitial !== undefined) {
+            return valueFromInitial;
+        }
+        /**
+         * Alternatively, if this VisualElement config has defined a getBaseTarget
+         * so we can read the value from an alternative source, try that.
+         */
+        const target = this.getBaseTargetFromProps(this.props, key);
+        if (target !== undefined && !isMotionValue(target))
+            return target;
+        /**
+         * If the value was initially defined on initial, but it doesn't any more,
+         * return undefined. Otherwise return the value as initially read from the DOM.
+         */
+        return this.initialValues[key] !== undefined &&
+            valueFromInitial === undefined
+            ? undefined
+            : this.baseTarget[key];
+    }
+    on(eventName, callback) {
+        if (!this.events[eventName]) {
+            this.events[eventName] = new SubscriptionManager();
+        }
+        return this.events[eventName].add(callback);
+    }
+    notify(eventName, ...args) {
+        var _a;
+        (_a = this.events[eventName]) === null || _a === void 0 ? void 0 : _a.notify(...args);
+    }
+}
+const variantProps = ["initial", ...variantPriorityOrder];
+const numVariantProps = variantProps.length;
+
+export { VisualElement };

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

@@ -0,0 +1,49 @@
+import { getOrigin, checkTargetForNewValues } from '../utils/setters.mjs';
+import { parseDomVariant } from './utils/parse-dom-variant.mjs';
+import { VisualElement } from '../VisualElement.mjs';
+
+class DOMVisualElement extends VisualElement {
+    sortInstanceNodePosition(a, b) {
+        /**
+         * compareDocumentPosition returns a bitmask, by using the bitwise &
+         * we're returning true if 2 in that bitmask is set to true. 2 is set
+         * to true if b preceeds a.
+         */
+        return a.compareDocumentPosition(b) & 2 ? 1 : -1;
+    }
+    getBaseTargetFromProps(props, key) {
+        var _a;
+        return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key];
+    }
+    removeValueFromRenderState(key, { vars, style }) {
+        delete vars[key];
+        delete style[key];
+    }
+    makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) {
+        let origin = getOrigin(target, transition || {}, this);
+        /**
+         * If Framer has provided a function to convert `Color` etc value types, convert them
+         */
+        if (transformValues) {
+            if (transitionEnd)
+                transitionEnd = transformValues(transitionEnd);
+            if (target)
+                target = transformValues(target);
+            if (origin)
+                origin = transformValues(origin);
+        }
+        if (isMounted) {
+            checkTargetForNewValues(this, target, origin);
+            const parsed = parseDomVariant(this, target, origin, transitionEnd);
+            transitionEnd = parsed.transitionEnd;
+            target = parsed.target;
+        }
+        return {
+            transition,
+            transitionEnd,
+            ...target,
+        };
+    }
+}
+
+export { DOMVisualElement };

package/dist/es/render/dom/create-visual-element.mjs

@@ -1,11 +1,11 @@
-import { htmlVisualElement } from '../html/visual-element.mjs';
-import { svgVisualElement } from '../svg/visual-element.mjs';
+import { HTMLVisualElement } from '../html/HTMLVisualElement.mjs';
+import { SVGVisualElement } from '../svg/SVGVisualElement.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
 
 const createDomVisualElement = (Component, options) => {
     return isSVGComponent(Component)
-        ? svgVisualElement(options, { enableHardwareAcceleration: false })
-        : htmlVisualElement(options, { enableHardwareAcceleration: true });
+        ? new SVGVisualElement(options, { enableHardwareAcceleration: false })
+        : new HTMLVisualElement(options, { enableHardwareAcceleration: true });
 };
 
 export { createDomVisualElement };

package/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -46,7 +46,7 @@ function getVariableValue(current, element, depth = 1) {
  * @internal
  */
 function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
-    const element = visualElement.getInstance();
+    const element = visualElement.current;
     if (!(element instanceof Element))
         return { target, transitionEnd };
     // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
@@ -55,7 +55,7 @@ function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
         transitionEnd = { ...transitionEnd };
     }
     // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
-    visualElement.forEachValue((value) => {
+    visualElement.values.forEach((value) => {
         const current = value.get();
         if (!isCSSVariable(current))
             return;

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -66,7 +66,7 @@ function removeNonTranslationalTransform(visualElement) {
     });
     // Apply changes to element before measurement
     if (removedTransforms.length)
-        visualElement.syncRender();
+        visualElement.render();
     return removedTransforms;
 }
 const positionalValues = {
@@ -83,7 +83,7 @@ const positionalValues = {
 };
 const convertChangedValueTypes = (target, visualElement, changedKeys) => {
     const originBbox = visualElement.measureViewportBox();
-    const element = visualElement.getInstance();
+    const element = visualElement.current;
     const elementComputedStyle = getComputedStyle(element);
     const { display } = elementComputedStyle;
     const origin = {};
@@ -99,7 +99,7 @@ const convertChangedValueTypes = (target, visualElement, changedKeys) => {
         origin[key] = positionalValues[key](originBbox, elementComputedStyle);
     });
     // Apply the latest values (as set in checkAndConvertChangedValueTypes)
-    visualElement.syncRender();
+    visualElement.render();
     const targetBbox = visualElement.measureViewportBox();
     changedKeys.forEach((key) => {
         // Restore styles to their **calculated computed style**, not their actual
@@ -206,7 +206,7 @@ const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, tr
             });
         }
         // Reapply original values
-        visualElement.syncRender();
+        visualElement.render();
         // Restore scroll position
         if (isBrowser && scrollY !== null) {
             window.scrollTo({ top: scrollY });

package/dist/es/render/html/HTMLVisualElement.mjs

@@ -0,0 +1,41 @@
+import { buildHTMLStyles } from './utils/build-styles.mjs';
+import { isCSSVariable } from '../dom/utils/is-css-variable.mjs';
+import { transformProps } from './utils/transform.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
+import { renderHTML } from './utils/render.mjs';
+import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
+import { measureViewportBox } from '../../projection/utils/measure.mjs';
+import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
+
+function getComputedStyle(element) {
+    return window.getComputedStyle(element);
+}
+class HTMLVisualElement extends DOMVisualElement {
+    readValueFromInstance(instance, key) {
+        if (transformProps.has(key)) {
+            const defaultType = getDefaultValueType(key);
+            return defaultType ? defaultType.default || 0 : 0;
+        }
+        else {
+            const computedStyle = getComputedStyle(instance);
+            const value = (isCSSVariable(key)
+                ? computedStyle.getPropertyValue(key)
+                : computedStyle[key]) || 0;
+            return typeof value === "string" ? value.trim() : value;
+        }
+    }
+    measureInstanceViewportBox(instance, { transformPagePoint }) {
+        return measureViewportBox(instance, transformPagePoint);
+    }
+    build(renderState, latestValues, options, props) {
+        buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);
+    }
+    scrapeMotionValuesFromProps(props) {
+        return scrapeMotionValuesFromProps(props);
+    }
+    renderInstance(instance, renderState, styleProp, projection) {
+        renderHTML(instance, renderState, styleProp, projection);
+    }
+}
+
+export { HTMLVisualElement, getComputedStyle };