framer-motion 9.0.2 → 9.0.3

package/dist/index.d.ts

@@ -1193,53 +1193,57 @@ interface UseVisualStateConfig<Instance, RenderState> {
 }
 declare const makeUseVisualState: <I, RS>(config: UseVisualStateConfig<I, RS>) => UseVisualState<I, RS>;
 
-/**
- * @public
- */
-interface FeatureProps<T = unknown> extends MotionProps {
-    visualElement: VisualElement<T>;
+declare abstract class Feature<T> {
+    isMounted: boolean;
+    node: VisualElement<T>;
+    constructor(node: VisualElement<T>);
+    abstract mount(): void;
+    abstract unmount(): void;
+    update(): void;
 }
-declare type FeatureNames = {
-    animation: true;
-    exit: true;
-    drag: true;
-    tap: true;
-    focus: true;
-    hover: true;
-    pan: true;
-    inView: true;
-    measureLayout: true;
-};
-declare type FeatureComponent = React$1.ComponentType<React$1.PropsWithChildren<FeatureProps>>;
-/**
- * @public
- */
-interface FeatureDefinition {
+
+declare function MeasureLayout(props: MotionProps & {
+    visualElement: VisualElement;
+}): JSX.Element;
+
+declare type HydratedFeatureDefinition = {
     isEnabled: (props: MotionProps) => boolean;
-    Component?: FeatureComponent;
-}
-interface FeatureComponents {
-    animation?: FeatureComponent;
-    exit?: FeatureComponent;
-    drag?: FeatureComponent;
-    tap?: FeatureComponent;
-    focus?: FeatureComponent;
-    hover?: FeatureComponent;
-    pan?: FeatureComponent;
-    inView?: FeatureComponent;
-    measureLayout?: FeatureComponent;
-}
-interface FeatureBundle extends FeatureComponents {
-    renderer: CreateVisualElement<any>;
-    projectionNodeConstructor?: any;
+    Feature: typeof Feature<any>;
+    ProjectionNode?: any;
+    MeasureLayout?: typeof MeasureLayout;
+};
+interface HydratedFeatureDefinitions {
+    animation?: HydratedFeatureDefinition;
+    exit?: HydratedFeatureDefinition;
+    drag?: HydratedFeatureDefinition;
+    tap?: HydratedFeatureDefinition;
+    focus?: HydratedFeatureDefinition;
+    hover?: HydratedFeatureDefinition;
+    pan?: HydratedFeatureDefinition;
+    inView?: HydratedFeatureDefinition;
+    layout?: HydratedFeatureDefinition;
 }
-declare type LazyFeatureBundle$1 = () => Promise<FeatureBundle>;
+declare type FeatureDefinition = {
+    isEnabled: HydratedFeatureDefinition["isEnabled"];
+    Feature?: HydratedFeatureDefinition["Feature"];
+    ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
+    MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
+};
 declare type FeatureDefinitions = {
-    [K in keyof FeatureNames]: FeatureDefinition;
+    [K in keyof HydratedFeatureDefinition]: FeatureDefinition;
 };
-declare type LoadedFeatures = FeatureDefinitions & {
-    projectionNodeConstructor?: any;
+declare type FeaturePackage = {
+    Feature?: HydratedFeatureDefinition["Feature"];
+    ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
+    MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
 };
+declare type FeaturePackages = {
+    [K in keyof HydratedFeatureDefinitions]: FeaturePackage;
+};
+interface FeatureBundle extends FeaturePackages {
+    renderer: CreateVisualElement<any>;
+}
+declare type LazyFeatureBundle$1 = () => Promise<FeatureBundle>;
 declare type RenderComponent<Instance, RenderState> = (Component: string | React$1.ComponentType<React$1.PropsWithChildren<unknown>>, props: MotionProps, projectionId: number | undefined, ref: React$1.Ref<Instance>, visualState: VisualState<Instance, RenderState>, isStatic: boolean, visualElement?: VisualElement<Instance>) => any;
 
 declare enum AnimationType {
@@ -1283,6 +1287,22 @@ interface AnimationTypeState {
     prevProp?: VariantLabels | TargetAndTransition;
 }
 
+/**
+ * @public
+ */
+interface PresenceContextProps {
+    id: string;
+    isPresent: boolean;
+    register: (id: string | number) => () => void;
+    onExitComplete?: (id: string | number) => void;
+    initial?: false | VariantLabels;
+    custom?: any;
+}
+/**
+ * @public
+ */
+declare const PresenceContext: React$1.Context<PresenceContextProps | null>;
+
 /**
  * A VisualElement is an imperative abstraction around UI elements such as
  * HTMLElement, SVGElement, Three.Object3D etc.
@@ -1421,11 +1441,6 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
      * value might be provided externally by the component via props.
      */
     values: Map<string, MotionValue<any>>;
-    /**
-     * Tracks whether this VisualElement's React component is currently present
-     * within the defined React tree.
-     */
-    isPresent: boolean;
     /**
      * The AnimationState, this is hydrated by the animation Feature.
      */
@@ -1438,7 +1453,14 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
     /**
      * A reference to the latest props provided to the VisualElement's host React component.
      */
-    protected props: MotionProps;
+    props: MotionProps;
+    prevProps?: MotionProps;
+    presenceContext: PresenceContextProps | null;
+    prevPresenceContext?: PresenceContextProps | null;
+    /**
+     * Cleanup functions for active features (hover/tap/exit etc)
+     */
+    private features;
     /**
      * A map of every subscription that binds the provided or generated
      * motion values onChange listeners to this visual element.
@@ -1478,12 +1500,13 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
      * VisualElement.on(), but only one of those can be defined via the onUpdate prop.
      */
     private propEventSubscriptions;
-    constructor({ parent, props, reducedMotionConfig, visualState, }: VisualElementOptions<Instance, RenderState>, options?: Options);
+    constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }: VisualElementOptions<Instance, RenderState>, options?: Options);
     mount(instance: Instance): void;
     unmount(): void;
     private bindToMotionValue;
     sortNodePosition(other: VisualElement<Instance>): number;
-    loadFeatures({ children, ...renderedProps }: MotionProps, isStrict: boolean, preloadedFeatures?: FeatureBundle, projectionId?: number, ProjectionNodeConstructor?: any, initialLayoutGroupConfig?: SwitchLayoutGroupContext): JSX.Element[];
+    loadFeatures({ children, ...renderedProps }: MotionProps, isStrict: boolean, preloadedFeatures?: FeatureBundle, projectionId?: number, initialLayoutGroupConfig?: SwitchLayoutGroupContext): React$1.ComponentType<MotionProps> | undefined;
+    updateFeatures(): void;
     notifyUpdate: () => void;
     triggerBuild(): void;
     render: () => void;
@@ -1508,7 +1531,7 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
      * Update the provided props. Ensure any newly-added motion values are
      * added to our map, old ones removed, and listeners updated.
      */
-    setProps(props: MotionProps): void;
+    update(props: MotionProps, presenceContext: PresenceContextProps | null): void;
     getProps(): MotionProps;
     /**
      * Returns the variant definition with a given name.
@@ -2494,7 +2517,7 @@ interface PanHandlers {
      *   - `offset`: Offset from the original pan event.
      *   - `velocity`: Current velocity of the pointer.
      */
-    onPan?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+    onPan?(event: PointerEvent, info: PanInfo): void;
     /**
      * Callback function that fires when the pan gesture begins on this element.
      *
@@ -2514,7 +2537,7 @@ interface PanHandlers {
      *   - `offset`: Offset from the original pan event.
      *   - `velocity`: Current velocity of the pointer.
      */
-    onPanStart?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+    onPanStart?(event: PointerEvent, info: PanInfo): void;
     /**
      * Callback function that fires when we begin detecting a pan gesture. This
      * is analogous to `onMouseStart` or `onTouchStart`.
@@ -2532,7 +2555,7 @@ interface PanHandlers {
      *
      *   - `point`: Relative to the device or page.
      */
-    onPanSessionStart?(event: MouseEvent | TouchEvent | PointerEvent, info: EventInfo): void;
+    onPanSessionStart?(event: PointerEvent, info: EventInfo): void;
     /**
      * Callback function that fires when the pan gesture ends on this element.
      *
@@ -2552,7 +2575,7 @@ interface PanHandlers {
      *   - `offset`: Offset from the original pan event.
      *   - `velocity`: Current velocity of the pointer.
      */
-    onPanEnd?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+    onPanEnd?(event: PointerEvent, info: PanInfo): void;
 }
 /**
  * @public
@@ -2590,6 +2613,9 @@ interface ViewportOptions {
     once?: boolean;
     margin?: string;
     amount?: "some" | "all" | number;
+    /**
+     * @deprecated IntersectionObserver fallback will always be disabled from 10.0. Prefer polyfill for older browser support.
+     */
     fallback?: boolean;
 }
 interface ViewportProps {
@@ -2888,7 +2914,7 @@ declare type VisualElementOptions<Instance, RenderState = any> = {
     visualState: VisualState<Instance, RenderState>;
     parent?: VisualElement<unknown>;
     variantParent?: VisualElement<unknown>;
-    presenceId?: string | undefined;
+    presenceContext: PresenceContextProps | null;
     props: MotionProps;
     blockInitialAnimation?: boolean;
     reducedMotionConfig?: ReducedMotionConfig;
@@ -2904,7 +2930,6 @@ interface VisualElementEventCallbacks {
     LayoutMeasure: (layout: Box, prevLayout?: Box) => void;
     LayoutUpdate: (layout: Axis, prevLayout: Axis) => void;
     Update: (latest: ResolvedValues) => void;
-    Render: () => void;
     AnimationStart: (definition: AnimationDefinition) => void;
     AnimationComplete: (definition: AnimationDefinition) => void;
     LayoutAnimationStart: () => void;
@@ -3064,7 +3089,6 @@ declare type SVGMotionComponents = {
 interface MotionComponentConfig<Instance, RenderState> {
     preloadedFeatures?: FeatureBundle;
     createVisualElement?: CreateVisualElement<Instance>;
-    projectionNodeConstructor?: any;
     useRender: RenderComponent<Instance, RenderState>;
     useVisualState: UseVisualState<Instance, RenderState>;
     Component: string | React$1.ComponentType<React$1.PropsWithChildren<unknown>>;
@@ -3078,7 +3102,7 @@ interface MotionComponentConfig<Instance, RenderState> {
  * Alongside this is a config option which provides a way of rendering the provided
  * component "offline", or outside the React render cycle.
  */
-declare function createMotionComponent<Props extends {}, Instance, RenderState>({ preloadedFeatures, createVisualElement, projectionNodeConstructor, useRender, useVisualState, Component, }: MotionComponentConfig<Instance, RenderState>): React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<Props & MotionProps> & React$1.RefAttributes<Instance>>;
+declare function createMotionComponent<Props extends {}, Instance, RenderState>({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }: MotionComponentConfig<Instance, RenderState>): React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<Props & MotionProps> & React$1.RefAttributes<Instance>>;
 
 /**
  * I'd rather the return type of `custom` to be implicit but this throws
@@ -3666,7 +3690,6 @@ declare const Reorder: {
         onAnimationIterationCapture?: React$1.AnimationEventHandler<any> | undefined;
         onTransitionEnd?: React$1.TransitionEventHandler<any> | undefined;
         onTransitionEndCapture?: React$1.TransitionEventHandler<any> | undefined;
-        slot?: string | undefined;
         title?: string | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -3678,6 +3701,7 @@ declare const Reorder: {
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
         placeholder?: string | undefined;
+        slot?: string | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
         radioGroup?: string | undefined;
         about?: string | undefined;
@@ -3706,7 +3730,7 @@ declare const Reorder: {
     } & React$1.RefAttributes<any>>;
 };
 
-declare const animations: FeatureComponents;
+declare const animations: FeaturePackages;
 
 interface MotionContextProps<Instance = unknown> {
     visualElement?: VisualElement<Instance>;
@@ -4171,22 +4195,6 @@ declare function useCycle<T>(...items: T[]): CycleState<T>;
  */
 declare function isValidMotionProp(key: string): boolean;
 
-/**
- * @public
- */
-interface PresenceContextProps {
-    id: string;
-    isPresent: boolean;
-    register: (id: string) => () => void;
-    onExitComplete?: (id: string) => void;
-    initial?: false | VariantLabels;
-    custom?: any;
-}
-/**
- * @public
- */
-declare const PresenceContext: React$1.Context<PresenceContextProps | null>;
-
 declare type SafeToRemove = () => void;
 declare type AlwaysPresent = [true, null];
 declare type Present = [true];
@@ -4425,4 +4433,4 @@ interface ScaleMotionValues {
  */
 declare function useInvertedScale(scale?: Partial<ScaleMotionValues>): ScaleMotionValues;
 
-export { AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationLifecycles, AnimationOptions$2 as AnimationOptions, AnimationPlaybackControls, AnimationProps, AnimationType, Axis, AxisDelta, BezierDefinition, BoundingBox, Box, CreateVisualElement, CustomDomComponent, CustomValueType, Cycle, CycleState, DelayedFunction, Delta, DeprecatedLayoutGroupContext, DragControls, DragElastic, DragHandlers, DraggableProps, Easing, EasingDefinition, EasingFunction, EasingModifier, EventInfo, FeatureBundle, FeatureComponent, FeatureComponents, FeatureDefinition, FeatureDefinitions, FeatureNames, FeatureProps, FlatTree, FocusHandlers, ForwardRefComponent, HTMLMotionProps, HoverHandlers, IProjectionNode, Inertia, Keyframes, KeyframesTarget, LayoutGroup, LayoutGroupContext, LayoutProps, LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, LazyProps, LoadedFeatures, MotionAdvancedProps, MotionConfig, MotionConfigContext, MotionConfigProps, MotionContext, MotionProps, MotionStyle, MotionTransform, MotionValue, None, Orchestration, PanHandlers, PanInfo, PassiveEffect, Point, PresenceContext, RelayoutInfo, RenderComponent, Reorder, Repeat, ResolveLayoutTransition, ResolvedKeyframesTarget, ResolvedSingleTarget, ResolvedValueTarget, ResolvedValues, SVGAttributesAsMotionValues, SVGMotionProps, ScrapeMotionValuesFromProps, ScrollMotionValues, SingleTarget, Spring, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition, Tween, ValueTarget, Variant, VariantLabels, Variants, VisualElement, VisualState, addPointerEvent, addPointerInfo, addScaleCorrector, animate, animateVisualElement, animationControls, animations, anticipate, backIn, backInOut, backOut, buildTransform, calcLength, checkTargetForNewValues, circIn, circInOut, circOut, clamp, createBox, createDomMotionComponent, createMotionComponent, cubicBezier, delay, distance, distance2D, domAnimation, domMax, easeIn, easeInOut, easeOut, filterProps, frameData, isBrowser, isDragActive, isMotionComponent, isMotionValue, isValidMotionProp, m, makeUseVisualState, mix, motion, motionValue, optimizedAppearDataAttribute, pipe, resolveMotionValue, spring, startOptimizedAppearAnimation, sync, transform, unwrapMotionComponent, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, useMotionValueEvent, usePresence, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useVisualElementContext, useWillChange, wrap };
+export { AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationLifecycles, AnimationOptions$2 as AnimationOptions, AnimationPlaybackControls, AnimationProps, AnimationType, Axis, AxisDelta, BezierDefinition, BoundingBox, Box, CreateVisualElement, CustomDomComponent, CustomValueType, Cycle, CycleState, DelayedFunction, Delta, DeprecatedLayoutGroupContext, DragControls, DragElastic, DragHandlers, DraggableProps, Easing, EasingDefinition, EasingFunction, EasingModifier, EventInfo, FeatureBundle, FeatureDefinition, FeatureDefinitions, FeaturePackage, FeaturePackages, FlatTree, FocusHandlers, ForwardRefComponent, HTMLMotionProps, HoverHandlers, HydratedFeatureDefinition, HydratedFeatureDefinitions, IProjectionNode, Inertia, Keyframes, KeyframesTarget, LayoutGroup, LayoutGroupContext, LayoutProps, LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, LazyProps, MotionAdvancedProps, MotionConfig, MotionConfigContext, MotionConfigProps, MotionContext, MotionProps, MotionStyle, MotionTransform, MotionValue, None, Orchestration, PanHandlers, PanInfo, PassiveEffect, Point, PresenceContext, RelayoutInfo, RenderComponent, Reorder, Repeat, ResolveLayoutTransition, ResolvedKeyframesTarget, ResolvedSingleTarget, ResolvedValueTarget, ResolvedValues, SVGAttributesAsMotionValues, SVGMotionProps, ScrapeMotionValuesFromProps, ScrollMotionValues, SingleTarget, Spring, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition, Tween, ValueTarget, Variant, VariantLabels, Variants, VisualElement, VisualState, addPointerEvent, addPointerInfo, addScaleCorrector, animate, animateVisualElement, animationControls, animations, anticipate, backIn, backInOut, backOut, buildTransform, calcLength, checkTargetForNewValues, circIn, circInOut, circOut, clamp, createBox, createDomMotionComponent, createMotionComponent, cubicBezier, delay, distance, distance2D, domAnimation, domMax, easeIn, easeInOut, easeOut, filterProps, frameData, isBrowser, isDragActive, isMotionComponent, isMotionValue, isValidMotionProp, m, makeUseVisualState, mix, motion, motionValue, optimizedAppearDataAttribute, pipe, resolveMotionValue, spring, startOptimizedAppearAnimation, sync, transform, unwrapMotionComponent, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, useMotionValueEvent, usePresence, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useVisualElementContext, useWillChange, wrap };