framer-motion 12.23.27 → 12.24.0

package/dist/cjs/m.js

@@ -617,10 +617,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 +889,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 +911,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
                 ? presenceContext.initial === false
                 : false,
             reducedMotionConfig,
+            isSVG,
         });
     }
     const visualElement = visualElementRef.current;
@@ -1028,10 +1027,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 +1059,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