framer-motion 12.23.14 → 12.23.16

package/dist/es/m.mjs

@@ -1,3 +1,2 @@
-"use client";
 export { createMinimalMotionComponent as create } from './render/components/m/create.mjs';
 export { MotionA as a, MotionAbbr as abbr, MotionAddress as address, MotionAnimate as animate, MotionArea as area, MotionArticle as article, MotionAside as aside, MotionAudio as audio, MotionB as b, MotionBase as base, MotionBdi as bdi, MotionBdo as bdo, MotionBig as big, MotionBlockquote as blockquote, MotionBody as body, MotionButton as button, MotionCanvas as canvas, MotionCaption as caption, MotionCircle as circle, MotionCite as cite, MotionClipPath as clipPath, MotionCode as code, MotionCol as col, MotionColgroup as colgroup, MotionData as data, MotionDatalist as datalist, MotionDd as dd, MotionDefs as defs, MotionDel as del, MotionDesc as desc, MotionDetails as details, MotionDfn as dfn, MotionDialog as dialog, MotionDiv as div, MotionDl as dl, MotionDt as dt, MotionEllipse as ellipse, MotionEm as em, MotionEmbed as embed, MotionFeBlend as feBlend, MotionFeColorMatrix as feColorMatrix, MotionFeComponentTransfer as feComponentTransfer, MotionFeComposite as feComposite, MotionFeConvolveMatrix as feConvolveMatrix, MotionFeDiffuseLighting as feDiffuseLighting, MotionFeDisplacementMap as feDisplacementMap, MotionFeDistantLight as feDistantLight, MotionFeDropShadow as feDropShadow, MotionFeFlood as feFlood, MotionFeFuncA as feFuncA, MotionFeFuncB as feFuncB, MotionFeFuncG as feFuncG, MotionFeFuncR as feFuncR, MotionFeGaussianBlur as feGaussianBlur, MotionFeImage as feImage, MotionFeMerge as feMerge, MotionFeMergeNode as feMergeNode, MotionFeMorphology as feMorphology, MotionFeOffset as feOffset, MotionFePointLight as fePointLight, MotionFeSpecularLighting as feSpecularLighting, MotionFeSpotLight as feSpotLight, MotionFeTile as feTile, MotionFeTurbulence as feTurbulence, MotionFieldset as fieldset, MotionFigcaption as figcaption, MotionFigure as figure, MotionFilter as filter, MotionFooter as footer, MotionForeignObject as foreignObject, MotionForm as form, MotionG as g, MotionH1 as h1, MotionH2 as h2, MotionH3 as h3, MotionH4 as h4, MotionH5 as h5, MotionH6 as h6, MotionHead as head, MotionHeader as header, MotionHgroup as hgroup, MotionHr as hr, MotionHtml as html, MotionI as i, MotionIframe as iframe, MotionImage as image, MotionImg as img, MotionInput as input, MotionIns as ins, MotionKbd as kbd, MotionKeygen as keygen, MotionLabel as label, MotionLegend as legend, MotionLi as li, MotionLine as line, MotionLinearGradient as linearGradient, MotionLink as link, MotionMain as main, MotionMap as map, MotionMark as mark, MotionMarker as marker, MotionMask as mask, MotionMenu as menu, MotionMenuitem as menuitem, MotionMetadata as metadata, MotionMeter as meter, MotionNav as nav, MotionObject as object, MotionOl as ol, MotionOptgroup as optgroup, MotionOption as option, MotionOutput as output, MotionP as p, MotionParam as param, MotionPath as path, MotionPattern as pattern, MotionPicture as picture, MotionPolygon as polygon, MotionPolyline as polyline, MotionPre as pre, MotionProgress as progress, MotionQ as q, MotionRadialGradient as radialGradient, MotionRect as rect, MotionRp as rp, MotionRt as rt, MotionRuby as ruby, MotionS as s, MotionSamp as samp, MotionScript as script, MotionSection as section, MotionSelect as select, MotionSmall as small, MotionSource as source, MotionSpan as span, MotionStop as stop, MotionStrong as strong, MotionStyle as style, MotionSub as sub, MotionSummary as summary, MotionSup as sup, MotionSvg as svg, MotionSymbol as symbol, MotionTable as table, MotionTbody as tbody, MotionTd as td, MotionText as text, MotionTextPath as textPath, MotionTextarea as textarea, MotionTfoot as tfoot, MotionTh as th, MotionThead as thead, MotionTime as time, MotionTitle as title, MotionTr as tr, MotionTrack as track, MotionTspan as tspan, MotionU as u, MotionUl as ul, MotionUse as use, MotionVideo as video, MotionView as view, MotionWbr as wbr, MotionWebview as webview } from './render/components/m/elements.mjs';

package/dist/es/motion/utils/use-motion-ref.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback } from 'react';
 import { isRefObject } from '../../utils/is-ref-object.mjs';
 

package/dist/es/motion/utils/use-visual-element.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useContext, useRef, useInsertionEffect, useEffect } from 'react';
 import { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';
 import { LazyContext } from '../../context/LazyContext.mjs';

package/dist/es/motion/utils/use-visual-state.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useContext } from 'react';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
 import { MotionContext } from '../../context/MotionContext/index.mjs';

package/dist/es/render/dom/features-animation.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { animations } from '../../motion/features/animations.mjs';
 import { gestureAnimations } from '../../motion/features/gestures.mjs';
 import { createDomVisualElement } from './create-visual-element.mjs';

package/dist/es/render/dom/features-max.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { drag } from '../../motion/features/drag.mjs';
 import { layout } from '../../motion/features/layout.mjs';
 import { domAnimation } from './features-animation.mjs';

package/dist/es/render/dom/features-min.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { animations } from '../../motion/features/animations.mjs';
 import { createDomVisualElement } from './create-visual-element.mjs';
 

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

@@ -1,3 +1,4 @@
+"use client";
 import { isMotionValue } from 'motion-dom';
 import { Fragment, useMemo, createElement } from 'react';
 import { useHTMLProps } from '../html/use-props.mjs';

package/dist/es/render/html/use-html-visual-state.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { createHtmlRenderState } from './utils/create-render-state.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';

package/dist/es/render/html/use-props.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { isMotionValue } from 'motion-dom';
 import { useMemo } from 'react';
 import { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';

package/dist/es/render/svg/use-props.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 import { copyRawValuesOnly } from '../html/use-props.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';

package/dist/es/render/svg/use-svg-visual-state.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { createSvgRenderState } from './utils/create-render-state.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';

package/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useContext } from 'react';
 import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
 import { useReducedMotion } from './use-reduced-motion.mjs';

package/dist/es/utils/reduced-motion/use-reduced-motion.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { warnOnce } from 'motion-utils';
 import { useState } from 'react';
 import { initPrefersReducedMotion } from './index.mjs';

package/dist/es/utils/use-animation-frame.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { frame, cancelFrame } from 'motion-dom';
 import { useRef, useContext, useEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';

package/dist/es/utils/use-constant.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useRef } from 'react';
 
 /**

package/dist/es/utils/use-cycle.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { wrap } from 'motion-utils';
 import { useRef, useState, useCallback } from 'react';
 

package/dist/es/utils/use-force-update.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { frame } from 'motion-dom';
 import { useState, useCallback } from 'react';
 import { useIsMounted } from './use-is-mounted.mjs';

package/dist/es/utils/use-in-view.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect } from 'react';
 import { inView } from '../render/dom/viewport/index.mjs';
 

package/dist/es/utils/use-instant-transition.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { frame } from 'motion-dom';
 import { MotionGlobalConfig } from 'motion-utils';
 import { useRef, useEffect } from 'react';

package/dist/es/utils/use-is-mounted.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-effect.mjs';
 

package/dist/es/utils/use-isomorphic-effect.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useLayoutEffect, useEffect } from 'react';
 import { isBrowser } from './is-browser.mjs';
 

package/dist/es/utils/use-motion-value-event.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useInsertionEffect } from 'react';
 
 function useMotionValueEvent(value, event, callback) {

package/dist/es/utils/use-page-in-view.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect } from 'react';
 
 function usePageInView() {

package/dist/es/utils/use-unmount-effect.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from 'react';
 
 function useUnmountEffect(callback) {

package/dist/es/value/use-combine-values.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cancelFrame, frame } from 'motion-dom';
 import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 import { useMotionValue } from './use-motion-value.mjs';

package/dist/es/value/use-computed.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { collectMotionValues } from 'motion-dom';
 import { useCombineMotionValues } from './use-combine-values.mjs';
 

package/dist/es/value/use-inverted-scale.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { invariant, warning } from 'motion-utils';
 import { useContext } from 'react';
 import { MotionContext } from '../context/MotionContext/index.mjs';

package/dist/es/value/use-motion-template.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { isMotionValue } from 'motion-dom';
 import { useCombineMotionValues } from './use-combine-values.mjs';
 

package/dist/es/value/use-motion-value.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { motionValue } from 'motion-dom';
 import { useContext, useState, useEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';

package/dist/es/value/use-scroll.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { motionValue } from 'motion-dom';
 import { invariant } from 'motion-utils';
 import { useRef, useCallback, useEffect } from 'react';

package/dist/es/value/use-spring.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { attachSpring, isMotionValue } from 'motion-dom';
 import { useContext, useInsertionEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';

package/dist/es/value/use-time.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useAnimationFrame } from '../utils/use-animation-frame.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
 

package/dist/es/value/use-transform.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { transform } from 'motion-dom';
 import { useConstant } from '../utils/use-constant.mjs';
 import { useCombineMotionValues } from './use-combine-values.mjs';

package/dist/es/value/use-velocity.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { frame } from 'motion-dom';
 import { useMotionValueEvent } from '../utils/use-motion-value-event.mjs';
 import { useMotionValue } from './use-motion-value.mjs';

package/dist/es/value/use-will-change/index.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useConstant } from '../../utils/use-constant.mjs';
 import { WillChangeMotionValue } from './WillChangeMotionValue.mjs';
 

package/dist/framer-motion.dev.js

@@ -5037,6 +5037,60 @@
         reducedMotion: "never",
     });
 
+    /**
+     * Set a given ref to a given value
+     * This utility takes care of different types of refs: callback refs and RefObject(s)
+     */
+    function setRef(ref, value) {
+        if (typeof ref === "function") {
+            return ref(value);
+        }
+        else if (ref !== null && ref !== undefined) {
+            ref.current = value;
+        }
+    }
+    /**
+     * A utility to compose multiple refs together
+     * Accepts callback refs and RefObject(s)
+     */
+    function composeRefs(...refs) {
+        return (node) => {
+            let hasCleanup = false;
+            const cleanups = refs.map((ref) => {
+                const cleanup = setRef(ref, node);
+                if (!hasCleanup && typeof cleanup === "function") {
+                    hasCleanup = true;
+                }
+                return cleanup;
+            });
+            // React <19 will log an error to the console if a callback ref returns a
+            // value. We don't use ref cleanups internally so this will only happen if a
+            // user's ref callback returns a value, which we only expect if they are
+            // using the cleanup functionality added in React 19.
+            if (hasCleanup) {
+                return () => {
+                    for (let i = 0; i < cleanups.length; i++) {
+                        const cleanup = cleanups[i];
+                        if (typeof cleanup === "function") {
+                            cleanup();
+                        }
+                        else {
+                            setRef(refs[i], null);
+                        }
+                    }
+                };
+            }
+        };
+    }
+    /**
+     * A custom hook that composes multiple refs
+     * Accepts callback refs and RefObject(s)
+     */
+    function useComposedRefs(...refs) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        return React__namespace.useCallback(composeRefs(...refs), refs);
+    }
+
     /**
      * Measurement functionality has to be within a separate component
      * to leverage snapshot lifecycle.
@@ -5077,6 +5131,7 @@
             right: 0,
         });
         const { nonce } = React$1.useContext(MotionConfigContext);
+        const composedRef = useComposedRefs(ref, children?.ref);
         /**
          * We create and inject a style block so we can apply this explicit
          * sizing in a non-destructive manner by just deleting the style block.
@@ -5114,7 +5169,7 @@
                 }
             };
         }, [isPresent]);
-        return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
+        return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref: composedRef }) }));
     }
 
     const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {
@@ -14060,7 +14115,6 @@
     exports.DOMKeyframesResolver = DOMKeyframesResolver;
     exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
     exports.DragControls = DragControls;
-    exports.FlatTree = FlatTree;
     exports.GroupAnimation = GroupAnimation;
     exports.GroupAnimationWithThen = GroupAnimationWithThen;
     exports.JSAnimation = JSAnimation;