framer-motion 5.5.5 → 5.5.6-beta.0

package/dist/cjs/index.js

@@ -499,8 +499,8 @@ var camelCaseAttributes = new Set([
     "pathLength",
 ]);
 
-function renderSVG(element, renderState) {
-    renderHTML(element, renderState);
+function renderSVG(element, renderState, styleProp, projection) {
+    renderHTML(element, renderState, styleProp, projection);
     for (var key in renderState.attrs) {
         element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
     }
@@ -2768,6 +2768,30 @@ function isLazyBundle(features) {
     return typeof features === "function";
 }
 
+function LayoutSVGComponent(_a, ref) {
+    var children = _a.children, props = tslib.__rest(_a, ["children"]);
+    var viewBox = useMotionValue.useMotionValue(props.viewBox);
+    return (React__namespace.createElement(motion.svg, tslib.__assign({ ref: ref }, props, { viewBox: viewBox, layout: true, preserveAspectRatio: "none" }),
+        React__namespace.createElement(ProjectViewBox, { viewBox: viewBox }),
+        children));
+}
+function ProjectViewBox(_a) {
+    var viewBox = _a.viewBox;
+    var svgVisualElement = useMotionValue.useVisualElementContext();
+    React.useEffect(function () {
+        var _a;
+        return (_a = svgVisualElement === null || svgVisualElement === void 0 ? void 0 : svgVisualElement.projection) === null || _a === void 0 ? void 0 : _a.addEventListener("projectionUpdate", function (_a) {
+            var x = _a.x, y = _a.y;
+            // TODO: A reveal option could be added where 0 0 is
+            // x.min, y.min
+            // viewBox.set(`0 0 ${calcLength(x)} ${calcLength(y)}`)
+            viewBox.set("".concat(x.min, " ").concat(y.min, " ").concat(useMotionValue.calcLength(x), " ").concat(useMotionValue.calcLength(y)));
+        });
+    }, [svgVisualElement]);
+    return null;
+}
+var LayoutSVG = React__namespace.forwardRef(LayoutSVGComponent);
+
 var ReorderContext = React.createContext(null);
 
 function checkReorder(order, value, offset, velocity) {
@@ -3674,6 +3698,7 @@ exports.AnimateSharedLayout = AnimateSharedLayout;
 exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
 exports.DragControls = DragControls;
 exports.LayoutGroup = LayoutGroup;
+exports.LayoutSVG = LayoutSVG;
 exports.LazyMotion = LazyMotion;
 exports.MotionConfig = MotionConfig;
 exports.Reorder = Reorder;

package/dist/es/components/LayoutSVG.mjs

@@ -0,0 +1,33 @@
+import { __rest, __assign } from 'tslib';
+import * as React from 'react';
+import { useEffect } from 'react';
+import { motion } from '../render/dom/motion.mjs';
+import { useMotionValue } from '../value/use-motion-value.mjs';
+import { useVisualElementContext } from '../context/MotionContext/index.mjs';
+import { calcLength } from '../projection/geometry/delta-calc.mjs';
+
+function LayoutSVGComponent(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var viewBox = useMotionValue(props.viewBox);
+    return (React.createElement(motion.svg, __assign({ ref: ref }, props, { viewBox: viewBox, layout: true, preserveAspectRatio: "none" }),
+        React.createElement(ProjectViewBox, { viewBox: viewBox }),
+        children));
+}
+function ProjectViewBox(_a) {
+    var viewBox = _a.viewBox;
+    var svgVisualElement = useVisualElementContext();
+    useEffect(function () {
+        var _a;
+        return (_a = svgVisualElement === null || svgVisualElement === void 0 ? void 0 : svgVisualElement.projection) === null || _a === void 0 ? void 0 : _a.addEventListener("projectionUpdate", function (_a) {
+            var x = _a.x, y = _a.y;
+            // TODO: A reveal option could be added where 0 0 is
+            // x.min, y.min
+            // viewBox.set(`0 0 ${calcLength(x)} ${calcLength(y)}`)
+            viewBox.set("".concat(x.min, " ").concat(y.min, " ").concat(calcLength(x), " ").concat(calcLength(y)));
+        });
+    }, [svgVisualElement]);
+    return null;
+}
+var LayoutSVG = React.forwardRef(LayoutSVGComponent);
+
+export { LayoutSVG, LayoutSVGComponent };

package/dist/es/index.mjs

@@ -5,6 +5,7 @@ export { AnimateSharedLayout } from './components/AnimateSharedLayout.mjs';
 export { MotionConfig } from './components/MotionConfig/index.mjs';
 export { LazyMotion } from './components/LazyMotion/index.mjs';
 export { LayoutGroup } from './components/LayoutGroup/index.mjs';
+export { LayoutSVG } from './components/LayoutSVG.mjs';
 export { Reorder } from './components/Reorder/index.mjs';
 export { domAnimation } from './render/dom/features-animation.mjs';
 export { domMax } from './render/dom/features-max.mjs';

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

@@ -2,8 +2,8 @@ import { camelToDash } from '../../dom/utils/camel-to-dash.mjs';
 import { renderHTML } from '../../html/utils/render.mjs';
 import { camelCaseAttributes } from './camel-case-attrs.mjs';
 
-function renderSVG(element, renderState) {
-    renderHTML(element, renderState);
+function renderSVG(element, renderState, styleProp, projection) {
+    renderHTML(element, renderState, styleProp, projection);
     for (var key in renderState.attrs) {
         element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
     }

package/dist/framer-motion.dev.js

@@ -4841,8 +4841,8 @@
         "pathLength",
     ]);
 
-    function renderSVG(element, renderState) {
-        renderHTML(element, renderState);
+    function renderSVG(element, renderState, styleProp, projection) {
+        renderHTML(element, renderState, styleProp, projection);
         for (var key in renderState.attrs) {
             element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
         }
@@ -8608,6 +8608,62 @@
         return typeof features === "function";
     }
 
+    /**
+     * Creates a `MotionValue` to track the state and velocity of a value.
+     *
+     * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
+     *
+     * ```jsx
+     * export const MyComponent = () => {
+     *   const scale = useMotionValue(1)
+     *
+     *   return <motion.div style={{ scale }} />
+     * }
+     * ```
+     *
+     * @param initial - The initial state.
+     *
+     * @public
+     */
+    function useMotionValue(initial) {
+        var value = useConstant(function () { return motionValue(initial); });
+        /**
+         * If this motion value is being used in static mode, like on
+         * the Framer canvas, force components to rerender when the motion
+         * value is updated.
+         */
+        var isStatic = React.useContext(MotionConfigContext).isStatic;
+        if (isStatic) {
+            var _a = __read(React.useState(initial), 2), setLatest_1 = _a[1];
+            React.useEffect(function () { return value.onChange(setLatest_1); }, []);
+        }
+        return value;
+    }
+
+    function LayoutSVGComponent(_a, ref) {
+        var children = _a.children, props = __rest(_a, ["children"]);
+        var viewBox = useMotionValue(props.viewBox);
+        return (React__namespace.createElement(motion.svg, __assign({ ref: ref }, props, { viewBox: viewBox, layout: true, preserveAspectRatio: "none" }),
+            React__namespace.createElement(ProjectViewBox, { viewBox: viewBox }),
+            children));
+    }
+    function ProjectViewBox(_a) {
+        var viewBox = _a.viewBox;
+        var svgVisualElement = useVisualElementContext();
+        React.useEffect(function () {
+            var _a;
+            return (_a = svgVisualElement === null || svgVisualElement === void 0 ? void 0 : svgVisualElement.projection) === null || _a === void 0 ? void 0 : _a.addEventListener("projectionUpdate", function (_a) {
+                var x = _a.x, y = _a.y;
+                // TODO: A reveal option could be added where 0 0 is
+                // x.min, y.min
+                // viewBox.set(`0 0 ${calcLength(x)} ${calcLength(y)}`)
+                viewBox.set("".concat(x.min, " ").concat(y.min, " ").concat(calcLength(x), " ").concat(calcLength(y)));
+            });
+        }, [svgVisualElement]);
+        return null;
+    }
+    var LayoutSVG = React__namespace.forwardRef(LayoutSVGComponent);
+
     var ReorderContext = React.createContext(null);
 
     function checkReorder(order, value, offset, velocity) {
@@ -8674,38 +8730,6 @@
         return a.layout.min - b.layout.min;
     }
 
-    /**
-     * Creates a `MotionValue` to track the state and velocity of a value.
-     *
-     * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
-     *
-     * ```jsx
-     * export const MyComponent = () => {
-     *   const scale = useMotionValue(1)
-     *
-     *   return <motion.div style={{ scale }} />
-     * }
-     * ```
-     *
-     * @param initial - The initial state.
-     *
-     * @public
-     */
-    function useMotionValue(initial) {
-        var value = useConstant(function () { return motionValue(initial); });
-        /**
-         * If this motion value is being used in static mode, like on
-         * the Framer canvas, force components to rerender when the motion
-         * value is updated.
-         */
-        var isStatic = React.useContext(MotionConfigContext).isStatic;
-        if (isStatic) {
-            var _a = __read(React.useState(initial), 2), setLatest_1 = _a[1];
-            React.useEffect(function () { return value.onChange(setLatest_1); }, []);
-        }
-        return value;
-    }
-
     var isCustomValueType = function (v) {
         return typeof v === "object" && v.mix;
     };
@@ -9529,6 +9553,7 @@
     exports.FlatTree = FlatTree;
     exports.LayoutGroup = LayoutGroup;
     exports.LayoutGroupContext = LayoutGroupContext;
+    exports.LayoutSVG = LayoutSVG;
     exports.LazyMotion = LazyMotion;
     exports.MotionConfig = MotionConfig;
     exports.MotionConfigContext = MotionConfigContext;