framer-motion 12.23.28 → 12.24.1

package/dist/cjs/{feature-bundle-Dt2VtvSZ.js → feature-bundle-DRMwxyzS.js}

@@ -3672,6 +3672,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
  */
@@ -3712,6 +3721,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;
@@ -3870,7 +3885,11 @@ function isSVGComponent(Component) {
 }
 
 const createDomVisualElement = (Component, options) => {
-    return isSVGComponent(Component)
+    /**
+     * Use explicit isSVG override if provided, otherwise auto-detect
+     */
+    const isSVG = options.isSVG ?? isSVGComponent(Component);
+    return isSVG
         ? new SVGVisualElement(options)
         : new HTMLVisualElement(options, {
             allowProjection: Component !== React.Fragment,
@@ -3979,10 +3998,8 @@ function useSVGProps(props, visualState, _isStatic, Component) {
     return visualProps;
 }
 
-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 } : {};
@@ -4124,7 +4141,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
  */
 const SwitchLayoutGroupContext = React.createContext({});
 
-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);
@@ -4146,6 +4163,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
                 ? presenceContext.initial === false
                 : false,
             reducedMotionConfig,
+            isSVG,
         });
     }
     const visualElement = visualElementRef.current;
@@ -4261,11 +4279,15 @@ 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) {
+function createMotionComponent(Component, { forwardMotionProps = false, type } = {}, preloadedFeatures, createVisualElement) {
     preloadedFeatures && loadFeatures(preloadedFeatures);
-    const useVisualState = isSVGComponent(Component)
-        ? useSVGVisualState
-        : useHTMLVisualState;
+    /**
+     * 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
@@ -4290,13 +4312,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
@@ -5828,6 +5850,16 @@ class DragGesture extends Feature {
         }
         this.removeListeners = this.controls.addListeners() || motionUtils.noop;
     }
+    update() {
+        const { dragControls } = this.node.getProps();
+        const { dragControls: prevDragControls } = this.node.prevProps || {};
+        if (dragControls !== prevDragControls) {
+            this.removeGroupControls();
+            if (dragControls) {
+                this.removeGroupControls = dragControls.subscribe(this.controls);
+            }
+        }
+    }
     unmount() {
         this.removeGroupControls();
         this.removeListeners();
@@ -6286,4 +6318,4 @@ exports.useIsPresent = useIsPresent;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.usePresence = usePresence;
 exports.visualElementStore = visualElementStore;
-//# sourceMappingURL=feature-bundle-Dt2VtvSZ.js.map
+//# sourceMappingURL=feature-bundle-DRMwxyzS.js.map