framer-motion 11.16.0 → 11.16.1

package/dist/cjs/client.js

@@ -399,7 +399,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 = "11.16.0";
+        this.version = "11.16.1";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5206,7 +5206,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.16.0", `Attempting to mix Motion versions ${nextValue.version} with 11.16.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.16.1", `Attempting to mix Motion versions ${nextValue.version} with 11.16.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -8576,6 +8576,8 @@ const layout = {
     },
 };
 
+const LazyContext = react.createContext({ strict: false });
+
 /**
  * @public
  */
@@ -8587,9 +8589,71 @@ const MotionConfigContext = react.createContext({
 
 const MotionContext = react.createContext({});
 
-const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
+function getCurrentTreeVariants(props, context) {
+    if (isControllingVariants(props)) {
+        const { initial, animate } = props;
+        return {
+            initial: initial === false || isVariantLabel(initial)
+                ? initial
+                : undefined,
+            animate: isVariantLabel(animate) ? animate : undefined,
+        };
+    }
+    return props.inherit !== false ? context : {};
+}
 
-const LazyContext = react.createContext({ strict: false });
+function useCreateMotionContext(props) {
+    const { initial, animate } = getCurrentTreeVariants(props, react.useContext(MotionContext));
+    return react.useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
+}
+function variantLabelsAsDependency(prop) {
+    return Array.isArray(prop) ? prop.join(" ") : prop;
+}
+
+function loadFeatures(features) {
+    for (const key in features) {
+        featureDefinitions[key] = {
+            ...featureDefinitions[key],
+            ...features[key],
+        };
+    }
+}
+
+const motionComponentSymbol = Symbol.for("motionComponentSymbol");
+
+/**
+ * Creates a ref function that, when called, hydrates the provided
+ * external ref and VisualElement.
+ */
+function useMotionRef(visualState, visualElement, externalRef) {
+    return react.useCallback((instance) => {
+        instance && visualState.mount && visualState.mount(instance);
+        if (visualElement) {
+            if (instance) {
+                visualElement.mount(instance);
+            }
+            else {
+                visualElement.unmount();
+            }
+        }
+        if (externalRef) {
+            if (typeof externalRef === "function") {
+                externalRef(instance);
+            }
+            else if (isRefObject(externalRef)) {
+                externalRef.current = instance;
+            }
+        }
+    }, 
+    /**
+     * Only pass a new ref callback to React if we've received a visual element
+     * factory. Otherwise we'll be mounting/remounting every time externalRef
+     * or other dependencies change.
+     */
+    [visualElement]);
+}
+
+const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
 
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
     var _a, _b;
@@ -8713,70 +8777,6 @@ function getClosestProjectingNode(visualElement) {
         : getClosestProjectingNode(visualElement.parent);
 }
 
-/**
- * Creates a ref function that, when called, hydrates the provided
- * external ref and VisualElement.
- */
-function useMotionRef(visualState, visualElement, externalRef) {
-    return react.useCallback((instance) => {
-        instance && visualState.mount && visualState.mount(instance);
-        if (visualElement) {
-            if (instance) {
-                visualElement.mount(instance);
-            }
-            else {
-                visualElement.unmount();
-            }
-        }
-        if (externalRef) {
-            if (typeof externalRef === "function") {
-                externalRef(instance);
-            }
-            else if (isRefObject(externalRef)) {
-                externalRef.current = instance;
-            }
-        }
-    }, 
-    /**
-     * Only pass a new ref callback to React if we've received a visual element
-     * factory. Otherwise we'll be mounting/remounting every time externalRef
-     * or other dependencies change.
-     */
-    [visualElement]);
-}
-
-function getCurrentTreeVariants(props, context) {
-    if (isControllingVariants(props)) {
-        const { initial, animate } = props;
-        return {
-            initial: initial === false || isVariantLabel(initial)
-                ? initial
-                : undefined,
-            animate: isVariantLabel(animate) ? animate : undefined,
-        };
-    }
-    return props.inherit !== false ? context : {};
-}
-
-function useCreateMotionContext(props) {
-    const { initial, animate } = getCurrentTreeVariants(props, react.useContext(MotionContext));
-    return react.useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
-}
-function variantLabelsAsDependency(prop) {
-    return Array.isArray(prop) ? prop.join(" ") : prop;
-}
-
-function loadFeatures(features) {
-    for (const key in features) {
-        featureDefinitions[key] = {
-            ...featureDefinitions[key],
-            ...features[key],
-        };
-    }
-}
-
-const motionComponentSymbol = Symbol.for("motionComponentSymbol");
-
 /**
  * Create a `motion` component.
  *
@@ -8787,6 +8787,7 @@ const motionComponentSymbol = Symbol.for("motionComponentSymbol");
  * 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) {
         /**
@@ -8820,6 +8821,9 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
          */
         return (jsxRuntime.jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsxRuntime.jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] }));
     }
+    MotionComponent.displayName = `motion.${typeof Component === "string"
+        ? Component
+        : `create(${(_b = (_a = Component.displayName) !== null && _a !== void 0 ? _a : Component.name) !== null && _b !== void 0 ? _b : ""})`}`;
     const ForwardRefMotionComponent = react.forwardRef(MotionComponent);
     ForwardRefMotionComponent[motionComponentSymbol] = Component;
     return ForwardRefMotionComponent;

package/dist/cjs/dom.js

@@ -984,7 +984,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 = "11.16.0";
+        this.version = "11.16.1";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3920,7 +3920,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.16.0", `Attempting to mix Motion versions ${nextValue.version} with 11.16.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.16.1", `Attempting to mix Motion versions ${nextValue.version} with 11.16.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -468,7 +468,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 = "11.16.0";
+        this.version = "11.16.1";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5634,7 +5634,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.16.0", `Attempting to mix Motion versions ${nextValue.version} with 11.16.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.16.1", `Attempting to mix Motion versions ${nextValue.version} with 11.16.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -10023,6 +10023,8 @@ const layout = {
     },
 };
 
+const LazyContext = React.createContext({ strict: false });
+
 /**
  * @public
  */
@@ -10034,9 +10036,71 @@ const MotionConfigContext = React.createContext({
 
 const MotionContext = React.createContext({});
 
-const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+function getCurrentTreeVariants(props, context) {
+    if (isControllingVariants(props)) {
+        const { initial, animate } = props;
+        return {
+            initial: initial === false || isVariantLabel(initial)
+                ? initial
+                : undefined,
+            animate: isVariantLabel(animate) ? animate : undefined,
+        };
+    }
+    return props.inherit !== false ? context : {};
+}
 
-const LazyContext = React.createContext({ strict: false });
+function useCreateMotionContext(props) {
+    const { initial, animate } = getCurrentTreeVariants(props, React.useContext(MotionContext));
+    return React.useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
+}
+function variantLabelsAsDependency(prop) {
+    return Array.isArray(prop) ? prop.join(" ") : prop;
+}
+
+function loadFeatures(features) {
+    for (const key in features) {
+        featureDefinitions[key] = {
+            ...featureDefinitions[key],
+            ...features[key],
+        };
+    }
+}
+
+const motionComponentSymbol = Symbol.for("motionComponentSymbol");
+
+/**
+ * Creates a ref function that, when called, hydrates the provided
+ * external ref and VisualElement.
+ */
+function useMotionRef(visualState, visualElement, externalRef) {
+    return React.useCallback((instance) => {
+        instance && visualState.mount && visualState.mount(instance);
+        if (visualElement) {
+            if (instance) {
+                visualElement.mount(instance);
+            }
+            else {
+                visualElement.unmount();
+            }
+        }
+        if (externalRef) {
+            if (typeof externalRef === "function") {
+                externalRef(instance);
+            }
+            else if (isRefObject(externalRef)) {
+                externalRef.current = instance;
+            }
+        }
+    }, 
+    /**
+     * Only pass a new ref callback to React if we've received a visual element
+     * factory. Otherwise we'll be mounting/remounting every time externalRef
+     * or other dependencies change.
+     */
+    [visualElement]);
+}
+
+const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
     var _a, _b;
@@ -10160,70 +10224,6 @@ function getClosestProjectingNode(visualElement) {
         : getClosestProjectingNode(visualElement.parent);
 }
 
-/**
- * Creates a ref function that, when called, hydrates the provided
- * external ref and VisualElement.
- */
-function useMotionRef(visualState, visualElement, externalRef) {
-    return React.useCallback((instance) => {
-        instance && visualState.mount && visualState.mount(instance);
-        if (visualElement) {
-            if (instance) {
-                visualElement.mount(instance);
-            }
-            else {
-                visualElement.unmount();
-            }
-        }
-        if (externalRef) {
-            if (typeof externalRef === "function") {
-                externalRef(instance);
-            }
-            else if (isRefObject(externalRef)) {
-                externalRef.current = instance;
-            }
-        }
-    }, 
-    /**
-     * Only pass a new ref callback to React if we've received a visual element
-     * factory. Otherwise we'll be mounting/remounting every time externalRef
-     * or other dependencies change.
-     */
-    [visualElement]);
-}
-
-function getCurrentTreeVariants(props, context) {
-    if (isControllingVariants(props)) {
-        const { initial, animate } = props;
-        return {
-            initial: initial === false || isVariantLabel(initial)
-                ? initial
-                : undefined,
-            animate: isVariantLabel(animate) ? animate : undefined,
-        };
-    }
-    return props.inherit !== false ? context : {};
-}
-
-function useCreateMotionContext(props) {
-    const { initial, animate } = getCurrentTreeVariants(props, React.useContext(MotionContext));
-    return React.useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
-}
-function variantLabelsAsDependency(prop) {
-    return Array.isArray(prop) ? prop.join(" ") : prop;
-}
-
-function loadFeatures(features) {
-    for (const key in features) {
-        featureDefinitions[key] = {
-            ...featureDefinitions[key],
-            ...features[key],
-        };
-    }
-}
-
-const motionComponentSymbol = Symbol.for("motionComponentSymbol");
-
 /**
  * Create a `motion` component.
  *
@@ -10234,6 +10234,7 @@ const motionComponentSymbol = Symbol.for("motionComponentSymbol");
  * 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) {
         /**
@@ -10267,6 +10268,9 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
          */
         return (jsxRuntime.jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsxRuntime.jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] }));
     }
+    MotionComponent.displayName = `motion.${typeof Component === "string"
+        ? Component
+        : `create(${(_b = (_a = Component.displayName) !== null && _a !== void 0 ? _a : Component.name) !== null && _b !== void 0 ? _b : ""})`}`;
     const ForwardRefMotionComponent = React.forwardRef(MotionComponent);
     ForwardRefMotionComponent[motionComponentSymbol] = Component;
     return ForwardRefMotionComponent;