framer-motion 2.1.0 → 2.2.0

package/dist/framer-motion.d.ts

@@ -22,6 +22,11 @@ export declare function addScaleCorrection(correctors: ScaleCorrectionDefinition
 
 declare type AlwaysPresent = [true, null];
 
+/**
+ * @public
+ */
+export declare const AnimateLayoutFeature: MotionFeature;
+
 /**
  * `AnimatePresence` enables the animation of components that have been removed from the tree.
  *
@@ -359,6 +364,11 @@ declare interface AnimationControlsConfig {
 
 declare type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
 
+/**
+ * @public
+ */
+export declare const AnimationFeature: MotionFeature;
+
 declare type AnimationOptions = {
     delay?: number;
     priority?: number;
@@ -620,36 +630,16 @@ declare interface ControlsProp {
  *
  * @internal
  */
-export declare function createMotionComponent<P extends {}, E>(Component: string | React.ComponentType<P>, { useVisualElement, render, animationControlsConfig, }: MotionComponentConfig<E>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & MotionProps> & React.RefAttributes<E>>;
+export declare function createMotionComponent<P extends {}, E>(Component: string | React.ComponentType<P>, { defaultFeatures, useVisualElement, render, animationControlsConfig, }: MotionComponentConfig<E>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & MotionProps> & React.RefAttributes<E>>;
 
 declare type CSSPropertiesWithoutTransitionOrSingleTransforms = Omit<CSSProperties, "transition" | "rotate" | "scale" | "perspective">;
 
-/**
- * Convert any React component into a `motion` component. The provided component
- * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
- *
- * ```jsx
- * const Component = React.forwardRef((props, ref) => {
- *   return <div ref={ref} />
- * })
- *
- * const MotionComponent = motion.custom(Component)
- * ```
- *
- * @public
- */
-declare function custom<Props>(Component: string | React.ComponentType<Props>): CustomDomComponent<Props>;
-
 /**
  * I'd rather the return type of `custom` to be implicit but this throws
  * incorrect relative paths in the exported types and API Extractor throws
  * a wobbly.
  */
-declare type CustomDomComponent<Props> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotionProps> & React.RefAttributes<SVGElement | HTMLElement>>;
-
-declare type CustomMotionComponent = {
-    custom: typeof custom;
-};
+export declare type CustomDomComponent<Props> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotionProps> & React.RefAttributes<SVGElement | HTMLElement>>;
 
 declare interface CustomStyles {
     /**
@@ -791,6 +781,11 @@ declare interface DragControlsProps extends DraggableProps {
 
 declare type DragDirection = "x" | "y";
 
+/**
+ * @public
+ */
+export declare const DragFeature: MotionFeature;
+
 /**
  * @public
  */
@@ -1265,6 +1260,11 @@ export declare interface EventInfo {
     point: Point;
 }
 
+/**
+ * @public
+ */
+export declare const ExitFeature: MotionFeature;
+
 /**
  * @public
  */
@@ -1285,6 +1285,11 @@ export declare type ForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsW
  */
 export declare type GestureHandlers = PanHandlers & TapHandlers & HoverHandlers;
 
+/**
+ * @public
+ */
+export declare const GesturesFeature: MotionFeature;
+
 /**
  * @public
  */
@@ -1445,11 +1450,6 @@ declare class HTMLVisualElement<E extends HTMLElement | SVGElement = HTMLElement
      * ========================================
      */
     isLayoutProjectionEnabled: boolean;
-    /**
-     * A boolean that flags whether this component has children that need to be update
-     * when this component changes layout.
-     */
-    hasLayoutChildren: boolean;
     enableLayoutProjection(): void;
     /**
      * A set of layout update event handlers. These are only called once all layouts have been read,
@@ -1501,7 +1501,7 @@ declare class HTMLVisualElement<E extends HTMLElement | SVGElement = HTMLElement
      *
      * This is considered mutable to avoid object creation on each frame.
      */
-    private targetBoxFinal;
+    protected targetBoxFinal: AxisBox2D;
     /**
      * Can be used to store a snapshot of the measured viewport bounding box before
      * a re-render.
@@ -1532,6 +1532,12 @@ declare class HTMLVisualElement<E extends HTMLElement | SVGElement = HTMLElement
      * This is considered mutable to avoid object creation on each frame.
      */
     deltaFinal: BoxDelta;
+    /**
+     * The computed transform string to apply deltaFinal to the element. Currently this is only
+     * being used to diff and decide whether to render on the current frame, but a minor optmisation
+     * could be to provide this to the buildHTMLStyle function.
+     */
+    deltaTransform: string;
     /**
      *
      */
@@ -1599,11 +1605,13 @@ declare class HTMLVisualElement<E extends HTMLElement | SVGElement = HTMLElement
      */
     startLayoutAxisAnimation(axis: "x" | "y", transition: Transition): Promise<void>;
     stopLayoutAnimation(): void;
+    updateLayoutDelta: () => void;
     /**
      * Update the layout deltas to reflect the relative positions of the layout
      * and the desired target box
      */
-    updateLayoutDeltas(isReactRender: boolean): void;
+    updateLayoutDeltas(): void;
+    updateTransformDeltas(): void;
     /**
      * ========================================
      * Build & render
@@ -1612,7 +1620,7 @@ declare class HTMLVisualElement<E extends HTMLElement | SVGElement = HTMLElement
     /**
      * Build a style prop using the latest resolved MotionValues
      */
-    build(isReactRender: boolean): void;
+    build(): void;
     /**
      * Render the Element by rebuilding and applying the latest styles and vars.
      */
@@ -2158,6 +2166,9 @@ export declare interface Keyframes {
  */
 export declare type KeyframesTarget = ResolvedKeyframesTarget | [null, ...CustomValueType[]] | CustomValueType[];
 
+/**
+ * @public
+ */
 export declare interface LayoutProps {
     /**
      * If `true`, this component will automatically animate to its new position when
@@ -2176,6 +2187,9 @@ export declare interface LayoutProps {
      * `boxShadow` and `borderRadius` will automatically be corrected if they are already being
      * animated on this component. Otherwise, set them directly via the `initial` prop.
      *
+     * If `layout` is set to `"position"`, the size of the component will change instantly and
+     * only its position will animate.
+     *
      * @public
      */
     layout?: boolean | "position";
@@ -2240,6 +2254,13 @@ declare class LayoutStack {
 
 declare type LayoutUpdateHandler = (layout: AxisBox2D, prev: AxisBox2D, config?: SharedLayoutAnimationConfig) => void;
 
+/**
+ * @public
+ */
+export declare const m: HTMLMotionComponents & SVGMotionComponents & {
+    custom: <Props>(Component: string | React.ComponentClass<Props, any> | React.FunctionComponent<Props>) => CustomDomComponent<Props>;
+};
+
 declare type MakeCustomValueType<T> = {
     [K in keyof T]: T[K] | CustomValueType;
 };
@@ -2258,15 +2279,15 @@ declare type MakeTargetAnimatable = (visualElement: VisualElement, target: Targe
     transitionEnd?: Target;
 };
 
-declare type Motion = HTMLMotionComponents & SVGMotionComponents & CustomMotionComponent;
-
 /**
  * HTML & SVG components, optimised for use with gestures and animation. These can be used as
  * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
  *
  * @public
  */
-export declare const motion: Motion;
+export declare const motion: HTMLMotionComponents & SVGMotionComponents & {
+    custom: <Props>(Component: string | React.ComponentClass<Props, any> | React.FunctionComponent<Props>) => CustomDomComponent<Props>;
+};
 
 /**
  * @public
@@ -2402,11 +2423,61 @@ export declare interface MotionCallbacks {
 }
 
 declare interface MotionComponentConfig<E> {
+    defaultFeatures: MotionFeature[];
     useVisualElement: UseVisualElement<E>;
     render: RenderComponent;
     animationControlsConfig: AnimationControlsConfig;
 }
 
+/**
+ * MotionConfig can be used in combination with the `m` component to cut bundle size
+ * and dynamically load only the features you use.
+ *
+ * ```jsx
+ * import {
+ *   m as motion,
+ *   AnimationFeature,
+ *   MotionConfig
+ * } from "framer-motion"
+ *
+ * export function App() {
+ *   return (
+ *     <MotionConfig features={[AnimationFeature]}>
+ *       <motion.div animate={{ x: 100 }} />
+ *     </MotionConfig>
+ *   )
+ * }
+ * ```
+ *
+ * @public
+ */
+export declare function MotionConfig({ children, features, ...props }: MotionConfigProps): JSX.Element;
+
+/**
+ * @public
+ */
+export declare interface MotionConfigContext {
+    /**
+     * @internal
+     */
+    transformPagePoint: TransformPoint2D;
+    /**
+     * An array of features to provide to children.
+     *
+     * @public
+     */
+    features: MotionFeature[];
+}
+
+/**
+ * @public
+ */
+export declare const MotionConfigContext: React.Context<MotionConfigContext>;
+
+declare interface MotionConfigProps extends Partial<MotionConfigContext> {
+    children?: React.ReactNode;
+}
+
 /**
  * @internal
  */
@@ -2431,29 +2502,7 @@ declare type MotionCSS = MakeMotion<Omit<CSSProperties, "rotate" | "scale" | "pe
 export declare interface MotionFeature {
     key: string;
     shouldRender: (props: MotionProps, parentContext: MotionContextProps) => boolean;
-    Component: React.ComponentType<FeatureProps>;
-}
-
-/**
- * @internal
- */
-export declare const MotionPluginContext: React.Context<MotionPluginsContext>;
-
-declare interface MotionPluginProps extends Partial<MotionPluginsContext> {
-    children?: React.ReactNode;
-}
-
-/**
- * @remarks For now I think this should remain a private API for our own use
- * until we can figure out a nicer way of allowing people to add these
- *
- * @internal
- */
-export declare function MotionPlugins({ children, ...props }: MotionPluginProps): JSX.Element;
-
-declare interface MotionPluginsContext {
-    transformPagePoint: TransformPoint2D;
-    features: MotionFeature[];
+    getComponent: (props: MotionProps) => React.ComponentType<FeatureProps> | undefined;
 }
 
 declare interface MotionPoint {
@@ -4649,7 +4698,7 @@ declare namespace React_2 {
      *
      * target - a reference to the element from which the event was originally dispatched.
      * This might be a child element to the element on which the event listener is registered.
-     * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
+     * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
      */
     interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}
 
@@ -5476,6 +5525,7 @@ declare namespace React_2 {
 
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
+        onToggle?: ReactEventHandler<T>;
     }
 
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -6490,7 +6540,6 @@ declare interface SharedLayoutAnimationConfig {
     targetBox?: AxisBox2D;
     transition?: Transition;
     crossfadeOpacity?: MotionValue<number>;
-    onLayoutAnimationComplete?: () => void;
 }
 
 export declare interface SharedLayoutProps {
@@ -7796,6 +7845,8 @@ export declare function useDragControls(): DragControls;
  * - `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.
+ *
  * @library
  *
  * ```jsx
@@ -8192,6 +8243,7 @@ declare enum VisibilityAction {
  */
 declare abstract class VisualElement<E = any> {
     parent?: VisualElement<E>;
+    rootParent: VisualElement<E>;
     children: Set<VisualElement<E>>;
     prevSnapshot?: Snapshot;
     private removeFromParent?;
@@ -8221,10 +8273,12 @@ declare abstract class VisualElement<E = any> {
     abstract clean(): void;
     abstract readNativeValue(key: string): string | number;
     abstract getBoundingBox(): AxisBox2D;
+    abstract updateLayoutDelta(): void;
     private setSingleStaticValue;
     setStaticValues(values: string | ResolvedValues, value?: string | number): void;
     triggerRender: () => void;
     scheduleRender: () => import("framesync").Process;
+    scheduleUpdateLayoutDelta(): void;
     private subscribeToValue;
     protected mount(element: E): void;
     private unmount;
@@ -8454,11 +8508,6 @@ declare class VisualElementDragControls {
     prepareBoundingBox(): void;
     resolveDragConstraints(): void;
     resolveRefConstraints(layoutBox: AxisBox2D, constraints: RefObject<Element>): {
-        /**
-         * Instantiate a PanSession for the drag gesture
-         *
-         * @public
-         */
         x: {
             min: number;
             max: number;