framer-motion 12.4.13 → 12.6.0

package/dist/m.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
+import { Easing, TransformProperties, SVGPathProperties, VariableKeyframesDefinition, MotionValue, Transition as Transition$1, ProgressTimeline, Batcher } from 'motion-dom';
 import * as React$1 from 'react';
 import { SVGAttributes, CSSProperties, PropsWithoutRef, RefAttributes, JSX } from 'react';
-import { Easing, TransformProperties, SVGPathProperties, VariableKeyframesDefinition, AnimationPlaybackControls, Transition as Transition$1, ProgressTimeline } from 'motion-dom';
-
-type RefObject<T> = {
-    current: T | null;
-};
 
 interface Point {
     x: number;
@@ -26,81 +22,6 @@ interface BoundingBox {
     left: number;
 }
 
-/**
- * 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;
-}
-
 /**
  * Options for orchestrating the timing of animations.
  *
@@ -952,184 +873,83 @@ interface CustomValueType {
     toValue: () => number | string;
 }
 
+type RefObject<T> = {
+    current: T | null;
+};
+
 /**
- * @public
- */
-type Subscriber<T> = (v: T) => void;
-interface MotionValueEventCallbacks<V> {
-    animationStart: () => void;
-    animationComplete: () => void;
-    animationCancel: () => void;
-    change: (latestValue: V) => void;
-    renderRequest: () => void;
-}
-interface ResolvedValues$1 {
-    [key: string]: string | number;
-}
-interface Owner {
-    current: HTMLElement | unknown;
-    getProps: () => {
-        onUpdate?: (latest: ResolvedValues$1) => void;
-        transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
-    };
-}
-/**
- * `MotionValue` is used to track the state and velocity of motion values.
+ * 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
  */
-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 Motion
-     * and therefore has no external listeners. It is therefore safe to animate via WAAPI.
-     */
-    owner?: Owner;
-    /**
-     * The current state of the `MotionValue`.
-     */
-    private current;
-    /**
-     * The previous state of the `MotionValue`.
-     */
-    private prev;
-    /**
-     * The previous state of the `MotionValue` at the end of the previous frame.
-     */
-    private prevFrameValue;
-    /**
-     * The last time the `MotionValue` was updated.
-     */
-    updatedAt: number;
-    /**
-     * The time `prevFrameValue` was updated.
-     */
-    prevUpdatedAt: number | undefined;
-    private stopPassiveEffect?;
-    /**
-     * A reference to the currently-controlling animation.
-     */
-    animation?: AnimationPlaybackControls;
-    setCurrent(current: V): void;
-    setPrevFrameValue(prevFrameValue?: V | undefined): void;
+interface PanInfo {
     /**
-     * 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..
+     * Contains `x` and `y` values for the current pan position relative
+     * to the device or page.
      *
      * ```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.on("change", updateOpacity)
-     *     const unsubscribeY = y.on("change", updateOpacity)
-     *
-     *     return () => {
-     *       unsubscribeX()
-     *       unsubscribeY()
-     *     }
-     *   }, [])
-     *
-     *   return <motion.div style={{ x }} />
+     * function onPan(event, info) {
+     *   console.log(info.point.x, info.point.y)
      * }
-     * ```
-     *
-     * @param subscriber - A function that receives the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @deprecated
-     */
-    onChange(subscription: Subscriber<V>): () => void;
-    /**
-     * An object containing a SubscriptionManager for each active event.
-     */
-    private events;
-    on<EventName extends keyof MotionValueEventCallbacks<V>>(eventName: EventName, callback: MotionValueEventCallbacks<V>[EventName]): VoidFunction;
-    clearListeners(): void;
-    /**
-     * Sets the state of the `MotionValue`.
-     *
-     * @remarks
      *
-     * ```jsx
-     * const x = useMotionValue(0)
-     * x.set(10)
+     * <motion.div onPan={onPan} />
      * ```
      *
-     * @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;
-    /**
-     * Set the state of the `MotionValue`, stopping any active animations,
-     * effects, and resets velocity to `0`.
-     */
-    jump(v: V, endAnimation?: boolean): void;
-    updateAndNotify: (v: V, render?: boolean) => void;
+    point: Point;
     /**
-     * Returns the latest state of `MotionValue`
+     * Contains `x` and `y` values for the distance moved since
+     * the last event.
      *
-     * @returns - The latest state of `MotionValue`
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.delta.x, info.delta.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
      *
      * @public
      */
-    get(): NonNullable<V>;
-    /**
-     * @public
-     */
-    getPrevious(): V | undefined;
+    delta: Point;
     /**
-     * Returns the latest velocity of `MotionValue`
+     * Contains `x` and `y` values for the distance moved from
+     * the first pan event.
      *
-     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.offset.x, info.offset.y)
+     * }
      *
-     * @public
-     */
-    getVelocity(): number;
-    hasAnimated: boolean;
-    /**
-     * Stop the currently active animation.
+     * <motion.div onPan={onPan} />
+     * ```
      *
      * @public
      */
-    stop(): void;
+    offset: Point;
     /**
-     * Returns `true` if this value is currently animating.
+     * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
      *
-     * @public
-     */
-    isAnimating(): boolean;
-    private clearAnimation;
-    /**
-     * Destroy and clean up subscribers to this `MotionValue`.
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.velocity.x, info.velocity.y)
+     * }
      *
-     * 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.
+     * <motion.div onPan={onPan} />
+     * ```
      *
      * @public
      */
-    destroy(): void;
+    velocity: Point;
 }
 
 interface DragControlOptions {
@@ -2305,18 +2125,6 @@ declare class ScrollTimeline implements ProgressTimeline {
     cancel?: VoidFunction;
 }
 
-type Process = (data: FrameData) => void;
-type Schedule = (process: Process, keepAlive?: boolean, immediate?: boolean) => Process;
-type StepId = "read" | "resolveKeyframes" | "update" | "preRender" | "render" | "postRender";
-type Batcher = {
-    [key in StepId]: Schedule;
-};
-interface FrameData {
-    delta: number;
-    timestamp: number;
-    isProcessing: boolean;
-}
-
 type UnionStringArray<T extends Readonly<string[]>> = T[number];
 declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
 type SVGElements = UnionStringArray<typeof svgElements>;
@@ -2378,7 +2186,7 @@ type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
 
 declare const createMinimalMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | React$1.ComponentType<Props>, { forwardMotionProps }?: {
     forwardMotionProps: boolean;
-}) => TagName extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "stop" | "animate" | "path" | "image" | "circle" | "switch" | "svg" | keyof HTMLElements | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "textPath" | "tspan" | "use" | "view" ? DOMMotionComponents[TagName] : React$1.ComponentType<Omit<MotionComponentProps<Props>, "children"> & {
+}) => TagName extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "animate" | "path" | "image" | "circle" | "switch" | "stop" | "svg" | keyof HTMLElements | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "textPath" | "tspan" | "use" | "view" ? DOMMotionComponents[TagName] : React$1.ComponentType<Omit<MotionComponentProps<Props>, "children"> & {
     children?: ("children" extends keyof Props ? Props[keyof Props & "children"] | MotionComponentProps<Props>[keyof Props & "children"] : MotionComponentProps<Props>["children"]) | undefined;
 }>;