framer-motion 12.23.28 → 12.24.1

package/dist/cjs/m.js

@@ -369,6 +369,15 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
+/**
+ * CSS Motion Path properties that should remain as CSS styles on SVG elements.
+ */
+const cssMotionPathProperties = [
+    "offsetDistance",
+    "offsetPath",
+    "offsetRotate",
+    "offsetAnchor",
+];
 /**
  * Build SVG visual attributes, like cx and style.transform
  */
@@ -409,6 +418,12 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing
         style.transformBox = styleProp?.transformBox ?? "fill-box";
         delete attrs.transformBox;
     }
+    for (const key of cssMotionPathProperties) {
+        if (attrs[key] !== undefined) {
+            style[key] = attrs[key];
+            delete attrs[key];
+        }
+    }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)
         attrs.x = attrX;
@@ -617,10 +632,8 @@ function isSVGComponent(Component) {
     return false;
 }
 
-function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false) {
-    const useVisualProps = isSVGComponent(Component)
-        ? useSVGProps
-        : useHTMLProps;
+function useRender(Component, props, ref, { latestValues, }, isStatic, forwardMotionProps = false, isSVG) {
+    const useVisualProps = (isSVG ?? isSVGComponent(Component)) ? useSVGProps : useHTMLProps;
     const visualProps = useVisualProps(props, latestValues, isStatic, Component);
     const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
     const elementProps = Component !== react.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
@@ -891,7 +904,7 @@ const SwitchLayoutGroupContext = react.createContext({});
 
 const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
 
-function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
+function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor, isSVG) {
     const { visualElement: parent } = react.useContext(MotionContext);
     const lazyContext = react.useContext(LazyContext);
     const presenceContext = react.useContext(PresenceContext);
@@ -913,6 +926,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
                 ? presenceContext.initial === false
                 : false,
             reducedMotionConfig,
+            isSVG,
         });
     }
     const visualElement = visualElementRef.current;
@@ -1028,10 +1042,14 @@ function getClosestProjectingNode(visualElement) {
  * Alongside this is a config option which provides a way of rendering the provided
  * component "offline", or outside the React render cycle.
  */
-function createMotionComponent(Component, { forwardMotionProps = false } = {}, preloadedFeatures, createVisualElement) {
-    const useVisualState = isSVGComponent(Component)
-        ? useSVGVisualState
-        : useHTMLVisualState;
+function createMotionComponent(Component, { forwardMotionProps = false, type } = {}, preloadedFeatures, createVisualElement) {
+    /**
+     * Determine whether to use SVG or HTML rendering based on:
+     * 1. Explicit `type` option (highest priority)
+     * 2. Auto-detection via `isSVGComponent`
+     */
+    const isSVG = type ? type === "svg" : isSVGComponent(Component);
+    const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState;
     function MotionDOMComponent(props, externalRef) {
         /**
          * If we need to measure the element we load this functionality in a
@@ -1056,13 +1074,13 @@ function createMotionComponent(Component, { forwardMotionProps = false } = {}, p
              * providing a way of rendering to these APIs outside of the React render loop
              * for more performant animations and interactions
              */
-            context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
+            context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode, isSVG);
         }
         /**
          * The mount order and hierarchy is specific to ensure our element ref
          * is hydrated by the time features fire their effects.
          */
-        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, forwardMotionProps)] }));
+        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, forwardMotionProps, isSVG)] }));
     }
     MotionDOMComponent.displayName = `motion.${typeof Component === "string"
         ? Component