framer-motion 12.23.27 → 12.24.0

package/dist/es/render/dom/create-visual-element.mjs

@@ -4,7 +4,11 @@ import { SVGVisualElement } from '../svg/SVGVisualElement.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
 
 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 !== Fragment,

package/dist/es/render/dom/create-visual-element.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"create-visual-element.mjs","sources":["../../../../src/render/dom/create-visual-element.ts"],"sourcesContent":["import { ComponentType, Fragment } from \"react\"\nimport { HTMLVisualElement } from \"../html/HTMLVisualElement\"\nimport { SVGVisualElement } from \"../svg/SVGVisualElement\"\nimport { CreateVisualElement, VisualElementOptions } from \"../types\"\nimport { isSVGComponent } from \"./utils/is-svg-component\"\n\nexport const createDomVisualElement: CreateVisualElement = (\n    Component: string | ComponentType<React.PropsWithChildren<unknown>>,\n    options: VisualElementOptions<HTMLElement | SVGElement>\n) => {\n    return isSVGComponent(Component)\n        ? new SVGVisualElement(options)\n        : new HTMLVisualElement(options, {\n              allowProjection: Component !== Fragment,\n          })\n}\n"],"names":[],"mappings":";;;;;MAMa,sBAAsB,GAAwB,CACvD,SAAmE,EACnE,OAAuD,KACvD;IACA,OAAO,cAAc,CAAC,SAAS,CAAC;AAC5B,UAAE,IAAI,gBAAgB,CAAC,OAAO,CAAC;AAC/B,UAAE,IAAI,iBAAiB,CAAC,OAAO,EAAE;YAC3B,eAAe,EAAE,SAAS,KAAK,QAAQ;AAC1C,SAAA,CAAC,CAAA;AACZ;;;;"}
+{"version":3,"file":"create-visual-element.mjs","sources":["../../../../src/render/dom/create-visual-element.ts"],"sourcesContent":["import { ComponentType, Fragment } from \"react\"\nimport { HTMLVisualElement } from \"../html/HTMLVisualElement\"\nimport { SVGVisualElement } from \"../svg/SVGVisualElement\"\nimport { CreateVisualElement, VisualElementOptions } from \"../types\"\nimport { isSVGComponent } from \"./utils/is-svg-component\"\n\nexport const createDomVisualElement: CreateVisualElement = (\n    Component: string | ComponentType<React.PropsWithChildren<unknown>>,\n    options: VisualElementOptions<HTMLElement | SVGElement>\n) => {\n    /**\n     * Use explicit isSVG override if provided, otherwise auto-detect\n     */\n    const isSVG = options.isSVG ?? isSVGComponent(Component)\n\n    return isSVG\n        ? new SVGVisualElement(options)\n        : new HTMLVisualElement(options, {\n              allowProjection: Component !== Fragment,\n          })\n}\n"],"names":[],"mappings":";;;;;MAMa,sBAAsB,GAAwB,CACvD,SAAmE,EACnE,OAAuD,KACvD;AACA;;AAEG;IACH,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,cAAc,CAAC,SAAS,CAAC,CAAA;AAExD,IAAA,OAAO,KAAK;AACR,UAAE,IAAI,gBAAgB,CAAC,OAAO,CAAC;AAC/B,UAAE,IAAI,iBAAiB,CAAC,OAAO,EAAE;YAC3B,eAAe,EAAE,SAAS,KAAK,QAAQ;AAC1C,SAAA,CAAC,CAAA;AACZ;;;;"}

package/dist/es/render/dom/use-render.mjs

@@ -6,10 +6,8 @@ import { useSVGProps } from '../svg/use-props.mjs';
 import { filterProps } from './utils/filter-props.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
 
-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 !== Fragment ? { ...filteredProps, ...visualProps, ref } : {};

package/dist/es/render/dom/use-render.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.mjs","sources":["../../../../src/render/dom/use-render.ts"],"sourcesContent":["\"use client\"\n\nimport { isMotionValue } from \"motion-dom\"\nimport { Fragment, createElement, useMemo } from \"react\"\nimport { MotionProps } from \"../../motion/types\"\nimport { VisualState } from \"../../motion/utils/use-visual-state\"\nimport { HTMLRenderState } from \"../html/types\"\nimport { useHTMLProps } from \"../html/use-props\"\nimport { SVGRenderState } from \"../svg/types\"\nimport { useSVGProps } from \"../svg/use-props\"\nimport { DOMMotionComponents } from \"./types\"\nimport { filterProps } from \"./utils/filter-props\"\nimport { isSVGComponent } from \"./utils/is-svg-component\"\n\nexport function useRender<\n    Props = {},\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    props: MotionProps,\n    ref: React.Ref<HTMLElement | SVGElement>,\n    {\n        latestValues,\n    }: VisualState<HTMLElement | SVGElement, HTMLRenderState | SVGRenderState>,\n    isStatic: boolean,\n    forwardMotionProps: boolean = false\n) {\n    const useVisualProps = isSVGComponent(Component)\n        ? useSVGProps\n        : useHTMLProps\n\n    const visualProps = useVisualProps(\n        props as any,\n        latestValues,\n        isStatic,\n        Component as any\n    )\n    const filteredProps = filterProps(\n        props,\n        typeof Component === \"string\",\n        forwardMotionProps\n    )\n    const elementProps =\n        Component !== Fragment ? { ...filteredProps, ...visualProps, ref } : {}\n\n    /**\n     * If component has been handed a motion value as its child,\n     * memoise its initial value and render that. Subsequent updates\n     * will be handled by the onChange handler\n     */\n    const { children } = props\n    const renderedChildren = useMemo(\n        () => (isMotionValue(children) ? children.get() : children),\n        [children]\n    )\n\n    return createElement<any>(Component, {\n        ...elementProps,\n        children: renderedChildren,\n    })\n}\n"],"names":[],"mappings":";;;;;;;;;AA2BI;AACI;;AAGJ;AAMA;;AAQA;;;;AAIG;AACH;AACA;;AAMI;AACA;AACH;AACL;;"}
+{"version":3,"file":"use-render.mjs","sources":["../../../../src/render/dom/use-render.ts"],"sourcesContent":["\"use client\"\n\nimport { isMotionValue } from \"motion-dom\"\nimport { Fragment, createElement, useMemo } from \"react\"\nimport { MotionProps } from \"../../motion/types\"\nimport { VisualState } from \"../../motion/utils/use-visual-state\"\nimport { HTMLRenderState } from \"../html/types\"\nimport { useHTMLProps } from \"../html/use-props\"\nimport { SVGRenderState } from \"../svg/types\"\nimport { useSVGProps } from \"../svg/use-props\"\nimport { DOMMotionComponents } from \"./types\"\nimport { filterProps } from \"./utils/filter-props\"\nimport { isSVGComponent } from \"./utils/is-svg-component\"\n\nexport function useRender<\n    Props = {},\n    TagName extends keyof DOMMotionComponents | string = \"div\"\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    props: MotionProps,\n    ref: React.Ref<HTMLElement | SVGElement>,\n    {\n        latestValues,\n    }: VisualState<HTMLElement | SVGElement, HTMLRenderState | SVGRenderState>,\n    isStatic: boolean,\n    forwardMotionProps: boolean = false,\n    isSVG?: boolean\n) {\n    const useVisualProps =\n        (isSVG ?? isSVGComponent(Component)) ? useSVGProps : useHTMLProps\n\n    const visualProps = useVisualProps(\n        props as any,\n        latestValues,\n        isStatic,\n        Component as any\n    )\n    const filteredProps = filterProps(\n        props,\n        typeof Component === \"string\",\n        forwardMotionProps\n    )\n    const elementProps =\n        Component !== Fragment ? { ...filteredProps, ...visualProps, ref } : {}\n\n    /**\n     * If component has been handed a motion value as its child,\n     * memoise its initial value and render that. Subsequent updates\n     * will be handled by the onChange handler\n     */\n    const { children } = props\n    const renderedChildren = useMemo(\n        () => (isMotionValue(children) ? children.get() : children),\n        [children]\n    )\n\n    return createElement<any>(Component, {\n        ...elementProps,\n        children: renderedChildren,\n    })\n}\n"],"names":[],"mappings":";;;;;;;;;AA4BI;AAGA;AAMA;;AAQA;;;;AAIG;AACH;AACA;;AAMI;AACA;AACH;AACL;;"}

package/dist/framer-motion.dev.js

@@ -119,7 +119,8 @@
 
     exports.warning = () => { };
     exports.invariant = () => { };
-    {
+    if (typeof process !== "undefined" &&
+        process.env?.NODE_ENV !== "production") {
         exports.warning = (check, message, errorCode) => {
             if (!check && typeof console !== "undefined") {
                 console.warn(formatErrorMessage(message, errorCode));
@@ -2608,7 +2609,7 @@
         /**
          * WAAPI doesn't natively have any interruption capabilities.
          *
-         * Rather than read commited styles back out of the DOM, we can
+         * Rather than read committed styles back out of the DOM, we can
          * create a renderless JS animation and sample it twice to calculate
          * its current value, "previous" value, and therefore allow
          * Motion to calculate velocity for any subsequent animation.
@@ -2804,7 +2805,7 @@
              * progress, which would feel snappier.
              *
              * However, if there's a delay (main thread work) between the creation of
-             * the animation and the first commited frame, we prefer to use resolvedAt
+             * the animation and the first committed frame, we prefer to use resolvedAt
              * to avoid a sudden jump into the animation.
              */
             const startTime = sync
@@ -3178,17 +3179,36 @@
         right: px,
         bottom: px,
         left: px,
+        inset: px,
+        insetBlock: px,
+        insetBlockStart: px,
+        insetBlockEnd: px,
+        insetInline: px,
+        insetInlineStart: px,
+        insetInlineEnd: px,
         // Spacing props
         padding: px,
         paddingTop: px,
         paddingRight: px,
         paddingBottom: px,
         paddingLeft: px,
+        paddingBlock: px,
+        paddingBlockStart: px,
+        paddingBlockEnd: px,
+        paddingInline: px,
+        paddingInlineStart: px,
+        paddingInlineEnd: px,
         margin: px,
         marginTop: px,
         marginRight: px,
         marginBottom: px,
         marginLeft: px,
+        marginBlock: px,
+        marginBlockStart: px,
+        marginBlockEnd: px,
+        marginInline: px,
+        marginInlineStart: px,
+        marginInlineEnd: px,
         // Misc
         backgroundPositionX: px,
         backgroundPositionY: px,
@@ -3404,17 +3424,36 @@
         "right",
         "bottom",
         "left",
+        "inset",
+        "insetBlock",
+        "insetBlockStart",
+        "insetBlockEnd",
+        "insetInline",
+        "insetInlineStart",
+        "insetInlineEnd",
         // Spacing props
         "padding",
         "paddingTop",
         "paddingRight",
         "paddingBottom",
         "paddingLeft",
+        "paddingBlock",
+        "paddingBlockStart",
+        "paddingBlockEnd",
+        "paddingInline",
+        "paddingInlineStart",
+        "paddingInlineEnd",
         "margin",
         "marginTop",
         "marginRight",
         "marginBottom",
         "marginLeft",
+        "marginBlock",
+        "marginBlockStart",
+        "marginBlockEnd",
+        "marginInline",
+        "marginInlineStart",
+        "marginInlineEnd",
         // Misc
         "backgroundPositionX",
         "backgroundPositionY",
@@ -5981,7 +6020,7 @@
                 });
             }
             if (delta) {
-                // Incoporate each ancestor's scale into a culmulative treeScale for this component
+                // Incoporate each ancestor's scale into a cumulative treeScale for this component
                 treeScale.x *= delta.x.scale;
                 treeScale.y *= delta.y.scale;
                 // Apply each ancestor's calculated delta into this component's recorded layout box
@@ -6707,7 +6746,7 @@
                             /**
                              * If the layout hasn't changed and we have an animation that hasn't started yet,
                              * finish it immediately. Otherwise it will be animating from a location
-                             * that was probably never commited to screen and look like a jumpy box.
+                             * that was probably never committed to screen and look like a jumpy box.
                              */
                             if (!hasLayoutChanged) {
                                 finishAnimation(this);
@@ -9424,7 +9463,11 @@
     }
 
     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$1.Fragment,
@@ -9533,10 +9576,8 @@
         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$1.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
@@ -9678,7 +9719,7 @@
      */
     const SwitchLayoutGroupContext = React$1.createContext({});
 
-    function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
+    function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor, isSVG) {
         const { visualElement: parent } = React$1.useContext(MotionContext);
         const lazyContext = React$1.useContext(LazyContext);
         const presenceContext = React$1.useContext(PresenceContext);
@@ -9700,6 +9741,7 @@
                     ? presenceContext.initial === false
                     : false,
                 reducedMotionConfig,
+                isSVG,
             });
         }
         const visualElement = visualElementRef.current;
@@ -9815,11 +9857,15 @@
      * 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
@@ -9844,13 +9890,13 @@
                  * 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 (jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps)] }));
+            return (jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (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
@@ -11422,6 +11468,16 @@
             }
             this.removeListeners = this.controls.addListeners() || 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();