framer-motion 7.8.0 → 7.9.0

package/dist/three-entry.d.ts

@@ -2,134 +2,6 @@
 import * as React$1 from 'react';
 import { SVGAttributes, CSSProperties, RefObject, useEffect } from 'react';
 
-/**
- * @public
- */
-declare type Subscriber<T> = (v: T) => void;
-/**
- * `MotionValue` is used to track the state and velocity of motion values.
- *
- * @public
- */
-declare class MotionValue<V = any> {
-    /**
-     * 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.
-     */
-    version: string;
-    /**
-     * Adds a function that will be notified when the `MotionValue` is updated.
-     *
-     * It returns a function that, when called, will cancel the subscription.
-     *
-     * When calling `onChange` inside a React component, it should be wrapped with the
-     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-     * from the `useEffect` function to ensure you don't add duplicate subscribers..
-     *
-     * ```jsx
-     * export const MyComponent = () => {
-     *   const x = useMotionValue(0)
-     *   const y = useMotionValue(0)
-     *   const opacity = useMotionValue(1)
-     *
-     *   useEffect(() => {
-     *     function updateOpacity() {
-     *       const maxXY = Math.max(x.get(), y.get())
-     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-     *       opacity.set(newOpacity)
-     *     }
-     *
-     *     const unsubscribeX = x.onChange(updateOpacity)
-     *     const unsubscribeY = y.onChange(updateOpacity)
-     *
-     *     return () => {
-     *       unsubscribeX()
-     *       unsubscribeY()
-     *     }
-     *   }, [])
-     *
-     *   return <motion.div style={{ x }} />
-     * }
-     * ```
-     *
-     * @privateRemarks
-     *
-     * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
-     *
-     * ```jsx
-     * useOnChange(x, () => {})
-     * ```
-     *
-     * @param subscriber - A function that receives the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @public
-     */
-    onChange(subscription: Subscriber<V>): () => void;
-    clearListeners(): void;
-    /**
-     * Sets the state of the `MotionValue`.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * const x = useMotionValue(0)
-     * x.set(10)
-     * ```
-     *
-     * @param latest - Latest value to set.
-     * @param render - Whether to notify render subscribers. Defaults to `true`
-     *
-     * @public
-     */
-    set(v: V, render?: boolean): void;
-    updateAndNotify: (v: V, render?: boolean) => void;
-    /**
-     * Returns the latest state of `MotionValue`
-     *
-     * @returns - The latest state of `MotionValue`
-     *
-     * @public
-     */
-    get(): V;
-    /**
-     * @public
-     */
-    getPrevious(): V;
-    /**
-     * Returns the latest velocity of `MotionValue`
-     *
-     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-     *
-     * @public
-     */
-    getVelocity(): number;
-    hasAnimated: boolean;
-    /**
-     * Stop the currently active animation.
-     *
-     * @public
-     */
-    stop(): void;
-    /**
-     * Returns `true` if this value is currently animating.
-     *
-     * @public
-     */
-    isAnimating(): boolean;
-    private clearAnimation;
-    /**
-     * Destroy and clean up subscribers to this `MotionValue`.
-     *
-     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-     * created a `MotionValue` via the `motionValue` function.
-     *
-     * @public
-     */
-    destroy(): void;
-}
-
 declare type EasingFunction = (v: number) => number;
 declare type BezierDefinition = [number, number, number, number];
 declare type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
@@ -980,67 +852,11 @@ interface CustomValueType {
     toValue: () => number | string;
 }
 
-/**
- * @public
- */
-declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
-/**
- * @public
- */
-interface AnimationControls {
-    /**
-     * Starts an animation on all linked components.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * controls.start("variantLabel")
-     * controls.start({
-     *   x: 0,
-     *   transition: { duration: 1 }
-     * })
-     * ```
-     *
-     * @param definition - Properties or variant label to animate to
-     * @param transition - Optional `transtion` to apply to a variant
-     * @returns - A `Promise` that resolves when all animations have completed.
-     *
-     * @public
-     */
-    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
-    /**
-     * Instantly set to a set of properties or a variant.
-     *
-     * ```jsx
-     * // With properties
-     * controls.set({ opacity: 0 })
-     *
-     * // With variants
-     * controls.set("hidden")
-     * ```
-     *
-     * @privateRemarks
-     * We could perform a similar trick to `.start` where this can be called before mount
-     * and we maintain a list of of pending actions that get applied on mount. But the
-     * expectation of `set` is that it happens synchronously and this would be difficult
-     * to do before any children have even attached themselves. It's also poor practise
-     * and we should discourage render-synchronous `.start` calls rather than lean into this.
-     *
-     * @public
-     */
-    set(definition: ControlsAnimationDefinition): void;
-    /**
-     * Stops animations on all linked components.
-     *
-     * ```jsx
-     * controls.stop()
-     * ```
-     *
-     * @public
-     */
-    stop(): void;
-    mount(): () => void;
-}
+declare type FrameData = {
+    delta: number;
+    timestamp: number;
+};
+declare type Process = (data: FrameData) => void;
 
 interface Point {
     x: number;
@@ -1072,110 +888,29 @@ interface Delta {
 }
 declare type TransformPoint = (point: Point) => Point;
 
+declare type ReducedMotionConfig = "always" | "never" | "user";
 /**
- * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
- * information about the current state of the tap gesture such as its
- * `point`, `delta`, `offset` and `velocity`.
- *
- * ```jsx
- * <motion.div onPan={(event, info) => {
- *   console.log(info.point.x, info.point.y)
- * }} />
- * ```
- *
  * @public
  */
-interface PanInfo {
+interface MotionConfigContext {
     /**
-     * Contains `x` and `y` values for the current pan position relative
-     * to the device or page.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.point.x, info.point.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
+     * Internal, exported only for usage in Framer
      */
-    point: Point;
+    transformPagePoint: TransformPoint;
     /**
-     * Contains `x` and `y` values for the distance moved since
-     * the last event.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.delta.x, info.delta.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
+     * Internal. Determines whether this is a static context ie the Framer canvas. If so,
+     * it'll disable all dynamic functionality.
      */
-    delta: Point;
+    isStatic: boolean;
     /**
-     * Contains `x` and `y` values for the distance moved from
-     * the first pan event.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.offset.x, info.offset.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
+     * Defines a new default transition for the entire tree.
      *
      * @public
      */
-    offset: Point;
+    transition?: Transition;
     /**
-     * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.velocity.x, info.velocity.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
-     */
-    velocity: Point;
-}
-
-declare type FrameData = {
-    delta: number;
-    timestamp: number;
-};
-declare type Process = (data: FrameData) => void;
-
-declare type ReducedMotionConfig = "always" | "never" | "user";
-/**
- * @public
- */
-interface MotionConfigContext {
-    /**
-     * Internal, exported only for usage in Framer
-     */
-    transformPagePoint: TransformPoint;
-    /**
-     * Internal. Determines whether this is a static context ie the Framer canvas. If so,
-     * it'll disable all dynamic functionality.
-     */
-    isStatic: boolean;
-    /**
-     * Defines a new default transition for the entire tree.
-     *
-     * @public
-     */
-    transition?: Transition;
-    /**
-     * If true, will respect the device prefersReducedMotion setting by switching
-     * transform animations off.
+     * If true, will respect the device prefersReducedMotion setting by switching
+     * transform animations off.
      *
      * @public
      */
@@ -1725,6 +1460,277 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
     notify<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, ...args: any): void;
 }
 
+/**
+ * @public
+ */
+declare type Subscriber<T> = (v: T) => void;
+/**
+ * `MotionValue` is used to track the state and velocity of motion values.
+ *
+ * @public
+ */
+declare class MotionValue<V = any> {
+    /**
+     * 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.
+     */
+    version: string;
+    /**
+     * If a MotionValue has an owner, it was created internally within Framer Motion
+     * and therefore has no external listeners. It is therefore safe to animate via WAAPI.
+     */
+    owner?: VisualElement;
+    /**
+     * Adds a function that will be notified when the `MotionValue` is updated.
+     *
+     * It returns a function that, when called, will cancel the subscription.
+     *
+     * When calling `onChange` inside a React component, it should be wrapped with the
+     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+     * from the `useEffect` function to ensure you don't add duplicate subscribers..
+     *
+     * ```jsx
+     * export const MyComponent = () => {
+     *   const x = useMotionValue(0)
+     *   const y = useMotionValue(0)
+     *   const opacity = useMotionValue(1)
+     *
+     *   useEffect(() => {
+     *     function updateOpacity() {
+     *       const maxXY = Math.max(x.get(), y.get())
+     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+     *       opacity.set(newOpacity)
+     *     }
+     *
+     *     const unsubscribeX = x.onChange(updateOpacity)
+     *     const unsubscribeY = y.onChange(updateOpacity)
+     *
+     *     return () => {
+     *       unsubscribeX()
+     *       unsubscribeY()
+     *     }
+     *   }, [])
+     *
+     *   return <motion.div style={{ x }} />
+     * }
+     * ```
+     *
+     * @privateRemarks
+     *
+     * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
+     *
+     * ```jsx
+     * useOnChange(x, () => {})
+     * ```
+     *
+     * @param subscriber - A function that receives the latest value.
+     * @returns A function that, when called, will cancel this subscription.
+     *
+     * @public
+     */
+    onChange(subscription: Subscriber<V>): () => void;
+    clearListeners(): void;
+    /**
+     * Sets the state of the `MotionValue`.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * const x = useMotionValue(0)
+     * x.set(10)
+     * ```
+     *
+     * @param latest - Latest value to set.
+     * @param render - Whether to notify render subscribers. Defaults to `true`
+     *
+     * @public
+     */
+    set(v: V, render?: boolean): void;
+    setWithVelocity(prev: V, current: V, delta: number): void;
+    updateAndNotify: (v: V, render?: boolean) => void;
+    /**
+     * Returns the latest state of `MotionValue`
+     *
+     * @returns - The latest state of `MotionValue`
+     *
+     * @public
+     */
+    get(): V;
+    /**
+     * @public
+     */
+    getPrevious(): V;
+    /**
+     * Returns the latest velocity of `MotionValue`
+     *
+     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+     *
+     * @public
+     */
+    getVelocity(): number;
+    hasAnimated: boolean;
+    /**
+     * Stop the currently active animation.
+     *
+     * @public
+     */
+    stop(): void;
+    /**
+     * Returns `true` if this value is currently animating.
+     *
+     * @public
+     */
+    isAnimating(): boolean;
+    private clearAnimation;
+    /**
+     * Destroy and clean up subscribers to this `MotionValue`.
+     *
+     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+     * created a `MotionValue` via the `motionValue` function.
+     *
+     * @public
+     */
+    destroy(): void;
+}
+
+/**
+ * @public
+ */
+declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
+/**
+ * @public
+ */
+interface AnimationControls {
+    /**
+     * Starts an animation on all linked components.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * controls.start("variantLabel")
+     * controls.start({
+     *   x: 0,
+     *   transition: { duration: 1 }
+     * })
+     * ```
+     *
+     * @param definition - Properties or variant label to animate to
+     * @param transition - Optional `transtion` to apply to a variant
+     * @returns - A `Promise` that resolves when all animations have completed.
+     *
+     * @public
+     */
+    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
+    /**
+     * Instantly set to a set of properties or a variant.
+     *
+     * ```jsx
+     * // With properties
+     * controls.set({ opacity: 0 })
+     *
+     * // With variants
+     * controls.set("hidden")
+     * ```
+     *
+     * @privateRemarks
+     * We could perform a similar trick to `.start` where this can be called before mount
+     * and we maintain a list of of pending actions that get applied on mount. But the
+     * expectation of `set` is that it happens synchronously and this would be difficult
+     * to do before any children have even attached themselves. It's also poor practise
+     * and we should discourage render-synchronous `.start` calls rather than lean into this.
+     *
+     * @public
+     */
+    set(definition: ControlsAnimationDefinition): void;
+    /**
+     * Stops animations on all linked components.
+     *
+     * ```jsx
+     * controls.stop()
+     * ```
+     *
+     * @public
+     */
+    stop(): void;
+    mount(): () => void;
+}
+
+/**
+ * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
+ * information about the current state of the tap gesture such as its
+ * `point`, `delta`, `offset` and `velocity`.
+ *
+ * ```jsx
+ * <motion.div onPan={(event, info) => {
+ *   console.log(info.point.x, info.point.y)
+ * }} />
+ * ```
+ *
+ * @public
+ */
+interface PanInfo {
+    /**
+     * Contains `x` and `y` values for the current pan position relative
+     * to the device or page.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    point: Point;
+    /**
+     * Contains `x` and `y` values for the distance moved since
+     * the last event.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.delta.x, info.delta.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    delta: Point;
+    /**
+     * Contains `x` and `y` values for the distance moved from
+     * the first pan event.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.offset.x, info.offset.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    offset: Point;
+    /**
+     * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.velocity.x, info.velocity.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    velocity: Point;
+}
+
 interface DragControlOptions {
     snapToCursor?: boolean;
     cursorProgress?: Point;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "7.8.0",
+    "version": "7.9.0",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -39,7 +39,7 @@
         "clean": "rm -rf types dist lib",
         "test": "yarn test-server && yarn test-client",
         "test-ci": "yarn test",
-        "test-client": "jest --config jest.config.json --max-workers=2",
+        "test-client": "jest --config jest.config.json --max-workers=2 src/motion/__tests__/waapi.test.tsx",
         "test-server": "jest --config jest.config.ssr.json ",
         "test-watch": "jest --watch --coverage --coverageReporters=lcov --config jest.config.json",
         "test-appear": "yarn run collect-appear-tests && start-server-and-test 'pushd ../../; python -m SimpleHTTPServer; popd' http://0.0.0.0:8000 'cypress run -s cypress/integration/appear.chrome.ts --config baseUrl=http://localhost:8000/'",
@@ -72,7 +72,7 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "28.92 kB"
+            "maxSize": "29.5 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
@@ -80,11 +80,11 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.17kB"
+            "maxSize": "14.65kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "24.9 kB"
+            "maxSize": "25.4 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
@@ -92,12 +92,12 @@
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "18.37 kB"
+            "maxSize": "18.85 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "29.91kB"
+            "maxSize": "30.5kB"
         }
     ],
-    "gitHead": "1ae0750b75ad0cb0c1a7cb5ff14844104b652e64"
+    "gitHead": "eb9d9a9df5f911a5906c05df56dcc47207100bbc"
 }