framer-motion 7.2.0 → 7.3.1

package/dist/three-entry.d.ts

@@ -649,9 +649,12 @@ interface LayoutProps {
      * If `layout` is set to `"size"`, the position of the component will change instantly and
      * only its size will animate.
      *
+     * If `layout` is set to `"preserve-aspect"`, the component will animate size & position if
+     * the aspect ratio remains the same between renders, and just position if the ratio changes.
+     *
      * @public
      */
-    layout?: boolean | "position" | "size";
+    layout?: boolean | "position" | "size" | "preserve-aspect";
     /**
      * Enable shared layout transitions between different components with the same `layoutId`.
      *
@@ -2256,6 +2259,10 @@ declare class FlatTree {
     forEach(callback: (child: WithDepth) => void): void;
 }
 
+interface SwitchLayoutGroup {
+    register?: (member: IProjectionNode) => void;
+    deregister?: (member: IProjectionNode) => void;
+}
 declare type InitialPromotionConfig = {
     /**
      * The initial transition to use when the elements in this group mount (and automatically promoted).
@@ -2267,6 +2274,11 @@ declare type InitialPromotionConfig = {
      */
     shouldPreserveFollowOpacity?: (member: IProjectionNode) => boolean;
 };
+declare type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConfig;
+/**
+ * Internal, exported only for usage in Framer
+ */
+declare const SwitchLayoutGroupContext: React.Context<SwitchLayoutGroupContext>;
 
 interface Snapshot {
     measured: Box;
@@ -2373,7 +2385,7 @@ interface ProjectionNodeOptions {
     alwaysMeasureLayout?: boolean;
     scheduleRender?: VoidFunction;
     onExitComplete?: VoidFunction;
-    animationType?: "size" | "position" | "both";
+    animationType?: "size" | "position" | "both" | "preserve-aspect";
     layoutId?: string;
     layout?: boolean | string;
     visualElement?: VisualElement;
@@ -2382,8 +2394,33 @@ interface ProjectionNodeOptions {
     initialPromotionConfig?: InitialPromotionConfig;
 }
 
+declare type ReducedMotionConfig = "always" | "never" | "user";
+
 declare function filterProps(props: MotionProps, isDom: boolean, forwardMotionProps: boolean): {};
 
+/**
+ * @public
+ */
+interface FeatureProps extends MotionProps {
+    visualElement: VisualElement;
+}
+declare type FeatureComponent = React.ComponentType<React.PropsWithChildren<FeatureProps>>;
+interface FeatureComponents {
+    animation?: FeatureComponent;
+    exit?: FeatureComponent;
+    drag?: FeatureComponent;
+    tap?: FeatureComponent;
+    focus?: FeatureComponent;
+    hover?: FeatureComponent;
+    pan?: FeatureComponent;
+    inView?: FeatureComponent;
+    measureLayout?: FeatureComponent;
+}
+interface FeatureBundle extends FeatureComponents {
+    renderer: CreateVisualElement<any>;
+    projectionNodeConstructor?: any;
+}
+
 interface VisualElement<Instance = any, RenderState = any> extends LifecycleManager {
     treeType: string;
     depth: number;
@@ -2405,6 +2442,7 @@ interface VisualElement<Instance = any, RenderState = any> extends LifecycleMana
     getClosestVariantNode(): VisualElement | undefined;
     shouldReduceMotion?: boolean | null;
     animateMotionValue?: typeof startAnimation;
+    loadFeatures(props: MotionProps, isStrict?: boolean, preloadedFeatures?: FeatureBundle, projectionId?: number, ProjectionNodeConstructor?: any, initialPromotionConfig?: SwitchLayoutGroupContext): JSX.Element[];
     projection?: IProjectionNode;
     /**
      * Visibility
@@ -2458,7 +2496,7 @@ declare type VisualElementOptions<Instance, RenderState = any> = {
     presenceId?: string | undefined;
     props: MotionProps;
     blockInitialAnimation?: boolean;
-    shouldReduceMotion?: boolean | null;
+    reducedMotionConfig?: ReducedMotionConfig;
 };
 declare type CreateVisualElement<Instance> = (Component: string | React.ComponentType<React.PropsWithChildren<unknown>>, options: VisualElementOptions<Instance>) => VisualElement<Instance>;
 /**
@@ -2468,25 +2506,6 @@ interface ResolvedValues {
     [key: string]: string | number;
 }
 
-/**
- * @public
- */
-interface FeatureProps extends MotionProps {
-    visualElement: VisualElement;
-}
-declare type FeatureComponent = React.ComponentType<React.PropsWithChildren<FeatureProps>>;
-interface FeatureComponents {
-    animation?: FeatureComponent;
-    exit?: FeatureComponent;
-    drag?: FeatureComponent;
-    tap?: FeatureComponent;
-    focus?: FeatureComponent;
-    hover?: FeatureComponent;
-    pan?: FeatureComponent;
-    inView?: FeatureComponent;
-    measureLayout?: FeatureComponent;
-}
-
 declare const animations: FeatureComponents;
 
 declare function useVisualElementContext(): VisualElement<any, any> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "7.2.0",
+    "version": "7.3.1",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -71,30 +71,34 @@
         "@emotion/is-prop-valid": "^0.8.2"
     },
     "bundlesize": [
+        {
+            "path": "./dist/size-rollup-motion.js",
+            "maxSize": "29.2 kB"
+        },
         {
             "path": "./dist/size-rollup-m.js",
-            "maxSize": "5.5 kB"
+            "maxSize": "4.67 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "16.6 kB"
+            "maxSize": "16.75 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "27.1 kB"
+            "maxSize": "27.2 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
-            "maxSize": "5.7 kB"
+            "maxSize": "4.9 kB"
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "19 kB"
+            "maxSize": "19.1 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "30.1kB"
+            "maxSize": "30.3kB"
         }
     ],
-    "gitHead": "3fc155b6afa513a2d38dc3728ccd69853480df3d"
+    "gitHead": "650ba252cf541f4108e8b514d20105d171fc35e3"
 }

package/dist/es/motion/features/use-features.mjs

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { useContext } from 'react';
-import { env } from '../../utils/process.mjs';
-import { featureDefinitions } from './definitions.mjs';
-import { invariant } from 'hey-listen';
-import { LazyContext } from '../../context/LazyContext.mjs';
-
-const featureNames = Object.keys(featureDefinitions);
-const numFeatures = featureNames.length;
-/**
- * Load features via renderless components based on the provided MotionProps.
- */
-function useFeatures(props, visualElement, preloadedFeatures) {
-    const features = [];
-    const lazyContext = useContext(LazyContext);
-    if (!visualElement)
-        return null;
-    /**
-     * 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 && lazyContext.strict) {
-        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(props) && Component) {
-            features.push(React.createElement(Component, Object.assign({ key: name }, props, { visualElement: visualElement })));
-        }
-    }
-    return features;
-}
-
-export { useFeatures };

package/dist/es/motion/features/use-projection.mjs

@@ -1,33 +0,0 @@
-import { isRefObject } from '../../utils/is-ref-object.mjs';
-import { useContext } from 'react';
-import { SwitchLayoutGroupContext } from '../../context/SwitchLayoutGroupContext.mjs';
-
-function useProjection(projectionId, { layoutId, layout, drag, dragConstraints, layoutScroll }, visualElement, ProjectionNodeConstructor) {
-    var _a;
-    const initialPromotionConfig = useContext(SwitchLayoutGroupContext);
-    if (!ProjectionNodeConstructor ||
-        !visualElement ||
-        (visualElement === null || visualElement === void 0 ? void 0 : visualElement.projection)) {
-        return;
-    }
-    visualElement.projection = new ProjectionNodeConstructor(projectionId, visualElement.getLatestValues(), (_a = visualElement.parent) === null || _a === void 0 ? void 0 : _a.projection);
-    visualElement.projection.setOptions({
-        layoutId,
-        layout,
-        alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),
-        visualElement,
-        scheduleRender: () => visualElement.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,
-        layoutScroll,
-    });
-}
-
-export { useProjection };

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

@@ -1,73 +0,0 @@
-/**
- * Decides if the supplied variable is an array of variant labels
- */
-function isVariantLabels(v) {
-    return Array.isArray(v);
-}
-/**
- * Decides if the supplied variable is variant label
- */
-function isVariantLabel(v) {
-    return typeof v === "string" || isVariantLabels(v);
-}
-/**
- * Creates an object containing the latest state of every MotionValue on a VisualElement
- */
-function getCurrent(visualElement) {
-    const current = {};
-    visualElement.forEachValue((value, key) => (current[key] = value.get()));
-    return current;
-}
-/**
- * Creates an object containing the latest velocity of every MotionValue on a VisualElement
- */
-function getVelocity(visualElement) {
-    const velocity = {};
-    visualElement.forEachValue((value, key) => (velocity[key] = value.getVelocity()));
-    return velocity;
-}
-function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {
-    var _a;
-    /**
-     * If the variant definition is a function, resolve.
-     */
-    if (typeof definition === "function") {
-        definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
-    }
-    /**
-     * If the variant definition is a variant label, or
-     * the function returned a variant label, resolve.
-     */
-    if (typeof definition === "string") {
-        definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];
-    }
-    /**
-     * At this point we've resolved both functions and variant labels,
-     * but the resolved variant label might itself have been a function.
-     * If so, resolve. This can only have returned a valid target object.
-     */
-    if (typeof definition === "function") {
-        definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
-    }
-    return definition;
-}
-function resolveVariant(visualElement, definition, custom) {
-    const props = visualElement.getProps();
-    return resolveVariantFromProps(props, definition, custom !== null && custom !== void 0 ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement));
-}
-function checkIfControllingVariants(props) {
-    var _a;
-    return (typeof ((_a = props.animate) === null || _a === void 0 ? void 0 : _a.start) === "function" ||
-        isVariantLabel(props.initial) ||
-        isVariantLabel(props.animate) ||
-        isVariantLabel(props.whileHover) ||
-        isVariantLabel(props.whileDrag) ||
-        isVariantLabel(props.whileTap) ||
-        isVariantLabel(props.whileFocus) ||
-        isVariantLabel(props.exit));
-}
-function checkIfVariantNode(props) {
-    return Boolean(checkIfControllingVariants(props) || props.variants);
-}
-
-export { checkIfControllingVariants, checkIfVariantNode, isVariantLabel, isVariantLabels, resolveVariant, resolveVariantFromProps };

package/dist/es/utils/use-reduced-motion.mjs

@@ -1,73 +0,0 @@
-import { useState, useContext } from 'react';
-import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
-import { isBrowser } from './is-browser.mjs';
-
-// Does this device prefer reduced motion? Returns `null` server-side.
-const prefersReducedMotion = { current: null };
-let hasDetected = false;
-function initPrefersReducedMotion() {
-    hasDetected = true;
-    if (!isBrowser)
-        return;
-    if (window.matchMedia) {
-        const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
-        const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
-        motionMediaQuery.addListener(setReducedMotionPreferences);
-        setReducedMotionPreferences();
-    }
-    else {
-        prefersReducedMotion.current = false;
-    }
-}
-/**
- * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
- *
- * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
- * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
- *
- * It will actively respond to changes and re-render your components with the latest setting.
- *
- * ```jsx
- * export function Sidebar({ isOpen }) {
- *   const shouldReduceMotion = useReducedMotion()
- *   const closedX = shouldReduceMotion ? 0 : "-100%"
- *
- *   return (
- *     <motion.div animate={{
- *       opacity: isOpen ? 1 : 0,
- *       x: isOpen ? 0 : closedX
- *     }} />
- *   )
- * }
- * ```
- *
- * @return boolean
- *
- * @public
- */
-function useReducedMotion() {
-    /**
-     * Lazy initialisation of prefersReducedMotion
-     */
-    !hasDetected && initPrefersReducedMotion();
-    const [shouldReduceMotion] = useState(prefersReducedMotion.current);
-    /**
-     * TODO See if people miss automatically updating shouldReduceMotion setting
-     */
-    return shouldReduceMotion;
-}
-function useReducedMotionConfig() {
-    const reducedMotionPreference = useReducedMotion();
-    const { reducedMotion } = useContext(MotionConfigContext);
-    if (reducedMotion === "never") {
-        return false;
-    }
-    else if (reducedMotion === "always") {
-        return true;
-    }
-    else {
-        return reducedMotionPreference;
-    }
-}
-
-export { useReducedMotion, useReducedMotionConfig };