framer-motion 12.23.1 → 12.23.3

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-C-c1JfhA.js');
+var create = require('./create-Ch9BUY4E.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-C-c1JfhA.js → create-Ch9BUY4E.js}

@@ -4827,7 +4827,7 @@ class VisualElementDragControls {
         if (!constraints || !isRefObject(constraints))
             return false;
         const constraintsElement = constraints.current;
-        motionUtils.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+        motionUtils.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.", "drag-constraints-ref");
         const { projection } = this.visualElement;
         // TODO
         if (!projection || !projection.layout)
@@ -5752,8 +5752,8 @@ function useStrictMode(configAndProps, preloadedFeatures) {
         isStrict) {
         const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
         configAndProps.ignoreStrict
-            ? motionUtils.warning(false, strictMessage)
-            : motionUtils.invariant(false, strictMessage);
+            ? motionUtils.warning(false, strictMessage, "lazy-strict-mode")
+            : motionUtils.invariant(false, strictMessage, "lazy-strict-mode");
     }
 }
 function getProjectionFunctionality(props) {

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-C-c1JfhA.js');
+var create = require('./create-Ch9BUY4E.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -571,7 +571,7 @@ function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, val
     const Component = create.useConstant(() => motion[as]);
     const order = [];
     const isReordering = React.useRef(false);
-    motionUtils.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+    motionUtils.invariant(Boolean(values), "Reorder.Group must be provided a values prop", "reorder-values");
     const context = {
         axis,
         registerItem: (value, layout) => {
@@ -1852,24 +1852,23 @@ function useMotionValueEvent(value, event, callback) {
     React.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
 }
 
-function refWarning(name, ref) {
-    motionUtils.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
-}
 const createScrollMotionValues = () => ({
     scrollX: motionDom.motionValue(0),
     scrollY: motionDom.motionValue(0),
     scrollXProgress: motionDom.motionValue(0),
     scrollYProgress: motionDom.motionValue(0),
 });
-function useScroll({ container, target, layoutEffect = true, ...options } = {}) {
+const isRefPending = (ref) => {
+    if (!ref)
+        return false;
+    return !ref.current;
+};
+function useScroll({ container, target, ...options } = {}) {
     const values = create.useConstant(createScrollMotionValues);
-    const useLifecycleEffect = layoutEffect
-        ? create.useIsomorphicLayoutEffect
-        : React.useEffect;
-    useLifecycleEffect(() => {
-        refWarning("target", target);
-        refWarning("container", container);
-        return scroll((_progress, { x, y, }) => {
+    const scrollAnimation = React.useRef(null);
+    const needsStart = React.useRef(false);
+    const start = React.useCallback(() => {
+        scrollAnimation.current = scroll((_progress, { x, y, }) => {
             values.scrollX.set(x.current);
             values.scrollXProgress.set(x.progress);
             values.scrollY.set(y.current);
@@ -1879,7 +1878,30 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
             container: container?.current || undefined,
             target: target?.current || undefined,
         });
+        return () => {
+            scrollAnimation.current?.();
+        };
     }, [container, target, JSON.stringify(options.offset)]);
+    create.useIsomorphicLayoutEffect(() => {
+        needsStart.current = false;
+        if (isRefPending(container) || isRefPending(target)) {
+            needsStart.current = true;
+            return;
+        }
+        else {
+            return start();
+        }
+    }, [start]);
+    React.useEffect(() => {
+        if (needsStart.current) {
+            motionUtils.invariant(!isRefPending(container), "Container ref is defined but not hydrated", "use-scroll-ref");
+            motionUtils.invariant(!isRefPending(target), "Target ref is defined but not hydrated", "use-scroll-ref");
+            return start();
+        }
+        else {
+            return;
+        }
+    }, [start]);
     return values;
 }
 

package/dist/cjs/m.js

@@ -364,8 +364,8 @@ function useStrictMode(configAndProps, preloadedFeatures) {
         isStrict) {
         const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
         configAndProps.ignoreStrict
-            ? motionUtils.warning(false, strictMessage)
-            : motionUtils.invariant(false, strictMessage);
+            ? motionUtils.warning(false, strictMessage, "lazy-strict-mode")
+            : motionUtils.invariant(false, strictMessage, "lazy-strict-mode");
     }
 }
 function getProjectionFunctionality(props) {

package/dist/es/components/Reorder/Group.mjs

@@ -11,7 +11,7 @@ function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, val
     const Component = useConstant(() => motion[as]);
     const order = [];
     const isReordering = useRef(false);
-    invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+    invariant(Boolean(values), "Reorder.Group must be provided a values prop", "reorder-values");
     const context = {
         axis,
         registerItem: (value, layout) => {

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -251,7 +251,7 @@ class VisualElementDragControls {
         if (!constraints || !isRefObject(constraints))
             return false;
         const constraintsElement = constraints.current;
-        invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+        invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.", "drag-constraints-ref");
         const { projection } = this.visualElement;
         // TODO
         if (!projection || !projection.layout)

package/dist/es/motion/index.mjs

@@ -81,8 +81,8 @@ function useStrictMode(configAndProps, preloadedFeatures) {
         isStrict) {
         const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
         configAndProps.ignoreStrict
-            ? warning(false, strictMessage)
-            : invariant(false, strictMessage);
+            ? warning(false, strictMessage, "lazy-strict-mode")
+            : invariant(false, strictMessage, "lazy-strict-mode");
     }
 }
 function getProjectionFunctionality(props) {

package/dist/es/value/use-scroll.mjs

@@ -1,28 +1,27 @@
 import { motionValue } from 'motion-dom';
-import { warning } from 'motion-utils';
-import { useEffect } from 'react';
+import { invariant } from 'motion-utils';
+import { useRef, useCallback, useEffect } from 'react';
 import { scroll } from '../render/dom/scroll/index.mjs';
 import { useConstant } from '../utils/use-constant.mjs';
 import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 
-function refWarning(name, ref) {
-    warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
-}
 const createScrollMotionValues = () => ({
     scrollX: motionValue(0),
     scrollY: motionValue(0),
     scrollXProgress: motionValue(0),
     scrollYProgress: motionValue(0),
 });
-function useScroll({ container, target, layoutEffect = true, ...options } = {}) {
+const isRefPending = (ref) => {
+    if (!ref)
+        return false;
+    return !ref.current;
+};
+function useScroll({ container, target, ...options } = {}) {
     const values = useConstant(createScrollMotionValues);
-    const useLifecycleEffect = layoutEffect
-        ? useIsomorphicLayoutEffect
-        : useEffect;
-    useLifecycleEffect(() => {
-        refWarning("target", target);
-        refWarning("container", container);
-        return scroll((_progress, { x, y, }) => {
+    const scrollAnimation = useRef(null);
+    const needsStart = useRef(false);
+    const start = useCallback(() => {
+        scrollAnimation.current = scroll((_progress, { x, y, }) => {
             values.scrollX.set(x.current);
             values.scrollXProgress.set(x.progress);
             values.scrollY.set(y.current);
@@ -32,7 +31,30 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
             container: container?.current || undefined,
             target: target?.current || undefined,
         });
+        return () => {
+            scrollAnimation.current?.();
+        };
     }, [container, target, JSON.stringify(options.offset)]);
+    useIsomorphicLayoutEffect(() => {
+        needsStart.current = false;
+        if (isRefPending(container) || isRefPending(target)) {
+            needsStart.current = true;
+            return;
+        }
+        else {
+            return start();
+        }
+    }, [start]);
+    useEffect(() => {
+        if (needsStart.current) {
+            invariant(!isRefPending(container), "Container ref is defined but not hydrated", "use-scroll-ref");
+            invariant(!isRefPending(target), "Target ref is defined but not hydrated", "use-scroll-ref");
+            return start();
+        }
+        else {
+            return;
+        }
+    }, [start]);
     return values;
 }
 

package/dist/framer-motion.dev.js

@@ -116,7 +116,7 @@
     {
         const formatMessage = (message, errorCode) => {
             return errorCode
-                ? `${message}. For more information and steps for solving, visit https://motion.dev/error/${errorCode}`
+                ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`
                 : message;
         };
         exports.warning = (check, message, errorCode) => {
@@ -375,13 +375,13 @@
     const easingDefinitionToFunction = (definition) => {
         if (isBezierDefinition(definition)) {
             // If cubic bezier definition, create bezier curve
-            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`, "cubic-bezier-length");
             const [x1, y1, x2, y2] = definition;
             return cubicBezier(x1, y1, x2, y2);
         }
         else if (isValidEasing(definition)) {
             // Else lookup from table
-            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`, "invalid-easing-type");
             return easingLookup[definition];
         }
         return definition;
@@ -941,7 +941,7 @@
     const getColorType = (v) => colorTypes.find((type) => type.test(v));
     function asRGBA(color) {
         const type = getColorType(color);
-        exports.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+        exports.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable");
         if (!Boolean(type))
             return false;
         let model = type.parse(color);
@@ -1059,7 +1059,7 @@
             return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
         }
         else {
-            exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
+            exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different");
             return mixImmediate(origin, target);
         }
     };
@@ -1165,7 +1165,7 @@
     function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
         let envelope;
         let derivative;
-        exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
+        exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
         let dampingRatio = 1 - bounce;
         /**
          * Restrict dampingRatio and duration to within acceptable ranges.
@@ -1525,7 +1525,7 @@
      */
     function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
         const inputLength = input.length;
-        exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+        exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length", "range-length");
         /**
          * If we're only provided a single input, we can just make a function
          * that returns the output.
@@ -2418,7 +2418,7 @@
             this.isPseudoElement = Boolean(pseudoElement);
             this.allowFlatten = allowFlatten;
             this.options = options;
-            exports.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+            exports.invariant(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
             const transition = applyGeneratorOptions(options);
             this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
             if (transition.autoplay === false) {
@@ -2634,7 +2634,7 @@
      * @internal
      */
     const isAnimatable = (value, name) => {
-        // If the list of keys tat might be non-animatable grows, replace with Set
+        // If the list of keys that might be non-animatable grows, replace with Set
         if (name === "zIndex")
             return false;
         // If it's a number or a keyframes array, we can animate it. We might at some point
@@ -2679,7 +2679,7 @@
         const targetKeyframe = keyframes[keyframes.length - 1];
         const isOriginAnimatable = isAnimatable(originKeyframe, name);
         const isTargetAnimatable = isAnimatable(targetKeyframe, name);
-        exports.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+        exports.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${isOriginAnimatable ? targetKeyframe : originKeyframe}" is not an animatable value.`, "value-not-animatable");
         // Always skip if any of these are true
         if (!isOriginAnimatable || !isTargetAnimatable) {
             return false;
@@ -3009,7 +3009,7 @@
     }
     const maxDepth = 4;
     function getVariableValue(current, element, depth = 1) {
-        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
         const [token, fallback] = parseCSSVariable(current);
         // No CSS variable detected
         if (!token)
@@ -10330,7 +10330,7 @@
             if (!constraints || !isRefObject(constraints))
                 return false;
             const constraintsElement = constraints.current;
-            exports.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+            exports.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.", "drag-constraints-ref");
             const { projection } = this.visualElement;
             // TODO
             if (!projection || !projection.layout)
@@ -11254,8 +11254,8 @@
             isStrict) {
             const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
             configAndProps.ignoreStrict
-                ? exports.warning(false, strictMessage)
-                : exports.invariant(false, strictMessage);
+                ? exports.warning(false, strictMessage, "lazy-strict-mode")
+                : exports.invariant(false, strictMessage, "lazy-strict-mode");
         }
     }
     function getProjectionFunctionality(props) {
@@ -11741,7 +11741,7 @@
         const Component = useConstant(() => motion[as]);
         const order = [];
         const isReordering = React$1.useRef(false);
-        exports.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+        exports.invariant(Boolean(values), "Reorder.Group must be provided a values prop", "reorder-values");
         const context = {
             axis,
             registerItem: (value, layout) => {
@@ -13022,24 +13022,23 @@
         React$1.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
     }
 
-    function refWarning(name, ref) {
-        exports.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
-    }
     const createScrollMotionValues = () => ({
         scrollX: motionValue(0),
         scrollY: motionValue(0),
         scrollXProgress: motionValue(0),
         scrollYProgress: motionValue(0),
     });
-    function useScroll({ container, target, layoutEffect = true, ...options } = {}) {
+    const isRefPending = (ref) => {
+        if (!ref)
+            return false;
+        return !ref.current;
+    };
+    function useScroll({ container, target, ...options } = {}) {
         const values = useConstant(createScrollMotionValues);
-        const useLifecycleEffect = layoutEffect
-            ? useIsomorphicLayoutEffect
-            : React$1.useEffect;
-        useLifecycleEffect(() => {
-            refWarning("target", target);
-            refWarning("container", container);
-            return scroll((_progress, { x, y, }) => {
+        const scrollAnimation = React$1.useRef(null);
+        const needsStart = React$1.useRef(false);
+        const start = React$1.useCallback(() => {
+            scrollAnimation.current = scroll((_progress, { x, y, }) => {
                 values.scrollX.set(x.current);
                 values.scrollXProgress.set(x.progress);
                 values.scrollY.set(y.current);
@@ -13049,7 +13048,30 @@
                 container: container?.current || undefined,
                 target: target?.current || undefined,
             });
+            return () => {
+                scrollAnimation.current?.();
+            };
         }, [container, target, JSON.stringify(options.offset)]);
+        useIsomorphicLayoutEffect(() => {
+            needsStart.current = false;
+            if (isRefPending(container) || isRefPending(target)) {
+                needsStart.current = true;
+                return;
+            }
+            else {
+                return start();
+            }
+        }, [start]);
+        React$1.useEffect(() => {
+            if (needsStart.current) {
+                exports.invariant(!isRefPending(container), "Container ref is defined but not hydrated", "use-scroll-ref");
+                exports.invariant(!isRefPending(target), "Target ref is defined but not hydrated", "use-scroll-ref");
+                return start();
+            }
+            else {
+                return;
+            }
+        }, [start]);
         return values;
     }