framer-motion 6.4.2 → 6.5.1

package/dist/es/index.mjs

@@ -15,6 +15,7 @@ export { resolveMotionValue } from './value/utils/resolve-motion-value.mjs';
 export { useTransform } from './value/use-transform.mjs';
 export { useSpring } from './value/use-spring.mjs';
 export { useVelocity } from './value/use-velocity.mjs';
+export { useScroll } from './value/use-scroll.mjs';
 export { useElementScroll } from './value/scroll/use-element-scroll.mjs';
 export { useViewportScroll } from './value/scroll/use-viewport-scroll.mjs';
 export { useTime } from './value/use-time.mjs';

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -4,7 +4,7 @@ import React__default, { useContext } from 'react';
 import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
 import { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';
 import { SwitchLayoutGroupContext } from '../../../context/SwitchLayoutGroupContext.mjs';
-import { globalProjectionState } from '../../../projection/node/create-projection-node.mjs';
+import { globalProjectionState } from '../../../projection/node/state.mjs';
 import { correctBorderRadius } from '../../../projection/styles/scale-border-radius.mjs';
 import { correctBoxShadow } from '../../../projection/styles/scale-box-shadow.mjs';
 import { addScaleCorrector } from '../../../projection/styles/scale-correction.mjs';

package/dist/es/projection/node/create-projection-node.mjs

@@ -19,29 +19,13 @@ import { hasTransform, hasScale } from '../utils/has-transform.mjs';
 import { transformAxes } from '../../render/html/utils/transform.mjs';
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
+import { globalProjectionState } from './state.mjs';
 
 /**
  * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
  * which has a noticeable difference in spring animations
  */
 var animationTarget = 1000;
-/**
- * This should only ever be modified on the client otherwise it'll
- * persist through server requests. If we need instanced states we
- * could lazy-init via root.
- */
-var globalProjectionState = {
-    /**
-     * Global flag as to whether the tree has animated since the last time
-     * we resized the window
-     */
-    hasAnimatedSinceResize: true,
-    /**
-     * We set this to true once, on the first update. Any nodes added to the tree beyond that
-     * update will be given a `data-projection-id` attribute.
-     */
-    hasEverUpdated: false,
-};
 function createProjectionNode(_a) {
     var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
     return /** @class */ (function () {
@@ -1220,4 +1204,4 @@ function roundBox(box) {
     roundAxis(box.y);
 }
 
-export { createProjectionNode, globalProjectionState, mixAxis, mixAxisDelta, mixBox };
+export { createProjectionNode, mixAxis, mixAxisDelta, mixBox };

package/dist/es/projection/node/id.mjs

@@ -1,5 +1,5 @@
 import { useConstant } from '../../utils/use-constant.mjs';
-import { globalProjectionState } from './create-projection-node.mjs';
+import { globalProjectionState } from './state.mjs';
 
 var id = 1;
 function useProjectionId() {

package/dist/es/projection/node/state.mjs

@@ -0,0 +1,19 @@
+/**
+ * This should only ever be modified on the client otherwise it'll
+ * persist through server requests. If we need instanced states we
+ * could lazy-init via root.
+ */
+var globalProjectionState = {
+    /**
+     * Global flag as to whether the tree has animated since the last time
+     * we resized the window
+     */
+    hasAnimatedSinceResize: true,
+    /**
+     * We set this to true once, on the first update. Any nodes added to the tree beyond that
+     * update will be given a `data-projection-id` attribute.
+     */
+    hasEverUpdated: false,
+};
+
+export { globalProjectionState };

package/dist/es/render/utils/motion-values.mjs

@@ -18,7 +18,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "6.4.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.4.2 may not work as expected."));
+                warnOnce(nextValue.version === "6.5.1", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.5.1 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ var MotionValue = /** @class */ (function () {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "6.4.2";
+        this.version = "6.5.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

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

@@ -1,58 +1,9 @@
-import { useConstant } from '../../utils/use-constant.mjs';
-import { createScrollUpdater, createScrollMotionValues } from './utils.mjs';
-import { addDomEvent } from '../../events/use-dom-event.mjs';
-import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
-import { invariant } from 'hey-listen';
+import { warnOnce } from '../../utils/warn-once.mjs';
+import { useScroll } from '../use-scroll.mjs';
 
-var getElementScrollOffsets = function (element) { return function () {
-    return {
-        xOffset: element.scrollLeft,
-        yOffset: element.scrollTop,
-        xMaxOffset: element.scrollWidth - element.offsetWidth,
-        yMaxOffset: element.scrollHeight - element.offsetHeight,
-    };
-}; };
-/**
- * Returns MotionValues that update when the provided element scrolls:
- *
- * - `scrollX` — Horizontal scroll distance in pixels.
- * - `scrollY` — Vertical scroll distance in pixels.
- * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
- * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
- *
- * This element must be set to `overflow: scroll` on either or both axes to report scroll offset.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const ref = useRef()
- *   const { scrollYProgress } = useElementScroll(ref)
- *
- *   return (
- *     <div ref={ref}>
- *       <motion.div style={{ scaleX: scrollYProgress }} />
- *     </div>
- *   )
- * }
- * ```
- *
- * @public
- */
 function useElementScroll(ref) {
-    var values = useConstant(createScrollMotionValues);
-    useIsomorphicLayoutEffect(function () {
-        var element = ref.current;
-        invariant(!!element, "ref provided to useScroll must be passed into a HTML element.");
-        if (!element)
-            return;
-        var updateScrollValues = createScrollUpdater(values, getElementScrollOffsets(element));
-        var scrollListener = addDomEvent(element, "scroll", updateScrollValues);
-        var resizeListener = addDomEvent(element, "resize", updateScrollValues);
-        return function () {
-            scrollListener && scrollListener();
-            resizeListener && resizeListener();
-        };
-    }, []);
-    return values;
+    warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+    return useScroll({ container: ref });
 }
 
 export { useElementScroll };

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

@@ -1,54 +1,9 @@
-import { createScrollMotionValues, createScrollUpdater } from './utils.mjs';
-import { addDomEvent } from '../../events/use-dom-event.mjs';
-import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
+import { warnOnce } from '../../utils/warn-once.mjs';
+import { useScroll } from '../use-scroll.mjs';
 
-var viewportScrollValues;
-function getViewportScrollOffsets() {
-    return {
-        xOffset: window.pageXOffset,
-        yOffset: window.pageYOffset,
-        xMaxOffset: document.body.clientWidth - window.innerWidth,
-        yMaxOffset: document.body.clientHeight - window.innerHeight,
-    };
-}
-var hasListeners = false;
-function addEventListeners() {
-    hasListeners = true;
-    var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
-    addDomEvent(window, "scroll", updateScrollValues);
-    addDomEvent(window, "resize", updateScrollValues);
-}
-/**
- * Returns MotionValues that update when the viewport scrolls:
- *
- * - `scrollX` — Horizontal scroll distance in pixels.
- * - `scrollY` — Vertical scroll distance in pixels.
- * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
- * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
- *
- * **Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress`
- * values as this breaks the browser's capability to accurately measure the page length.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const { scrollYProgress } = useViewportScroll()
- *   return <motion.div style={{ scaleX: scrollYProgress }} />
- * }
- * ```
- *
- * @public
- */
 function useViewportScroll() {
-    /**
-     * Lazy-initialise the viewport scroll values
-     */
-    if (!viewportScrollValues) {
-        viewportScrollValues = createScrollMotionValues();
-    }
-    useIsomorphicLayoutEffect(function () {
-        !hasListeners && addEventListeners();
-    }, []);
-    return viewportScrollValues;
+    warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+    return useScroll();
 }
 
 export { useViewportScroll };

package/dist/es/value/use-on-change.mjs

@@ -1,14 +1,14 @@
-import { useEffect } from 'react';
 import { isMotionValue } from './utils/is-motion-value.mjs';
+import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 
 function useOnChange(value, callback) {
-    useEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         if (isMotionValue(value))
             return value.onChange(callback);
     }, [callback]);
 }
 function useMultiOnChange(values, handler) {
-    useEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         var subscriptions = values.map(function (value) { return value.onChange(handler); });
         return function () { return subscriptions.forEach(function (unsubscribe) { return unsubscribe(); }); };
     });

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

@@ -0,0 +1,29 @@
+import { __rest, __assign } from 'tslib';
+import { scroll } from '@motionone/dom';
+import { motionValue } from './index.mjs';
+import { useConstant } from '../utils/use-constant.mjs';
+import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
+
+var createScrollMotionValues = function () { return ({
+    scrollX: motionValue(0),
+    scrollY: motionValue(0),
+    scrollXProgress: motionValue(0),
+    scrollYProgress: motionValue(0),
+}); };
+function useScroll(_a) {
+    if (_a === void 0) { _a = {}; }
+    var container = _a.container, target = _a.target, options = __rest(_a, ["container", "target"]);
+    var values = useConstant(createScrollMotionValues);
+    useIsomorphicLayoutEffect(function () {
+        return scroll(function (_a) {
+            var x = _a.x, y = _a.y;
+            values.scrollX.set(x.current);
+            values.scrollXProgress.set(x.progress);
+            values.scrollY.set(y.current);
+            values.scrollYProgress.set(y.progress);
+        }, __assign(__assign({}, options), { container: (container === null || container === void 0 ? void 0 : container.current) || undefined, target: (target === null || target === void 0 ? void 0 : target.current) || undefined }));
+    }, []);
+    return values;
+}
+
+export { useScroll };