framer-motion 9.0.2 → 9.0.3

package/dist/three-entry.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import * as React$1 from 'react';
+import * as react from 'react';
 import { SVGAttributes, CSSProperties, RefObject, useEffect } from 'react';
 
 declare type EasingFunction = (v: number) => number;
@@ -919,7 +919,7 @@ interface MotionConfigContext {
 /**
  * @public
  */
-declare const MotionConfigContext: React$1.Context<MotionConfigContext>;
+declare const MotionConfigContext: react.Context<MotionConfigContext>;
 
 declare class NodeStack {
     lead?: IProjectionNode;
@@ -1102,7 +1102,7 @@ declare type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConf
 /**
  * Internal, exported only for usage in Framer
  */
-declare const SwitchLayoutGroupContext: React$1.Context<SwitchLayoutGroupContext>;
+declare const SwitchLayoutGroupContext: react.Context<SwitchLayoutGroupContext>;
 
 interface VisualState<Instance, RenderState> {
     renderState: RenderState;
@@ -1117,27 +1117,46 @@ 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 FeatureComponent = React$1.ComponentType<React$1.PropsWithChildren<FeatureProps>>;
-interface FeatureComponents {
-    animation?: FeatureComponent;
-    exit?: FeatureComponent;
-    drag?: FeatureComponent;
-    tap?: FeatureComponent;
-    focus?: FeatureComponent;
-    hover?: FeatureComponent;
-    pan?: FeatureComponent;
-    inView?: FeatureComponent;
-    measureLayout?: FeatureComponent;
+
+declare function MeasureLayout(props: MotionProps & {
+    visualElement: VisualElement;
+}): JSX.Element;
+
+declare type HydratedFeatureDefinition = {
+    isEnabled: (props: MotionProps) => boolean;
+    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;
 }
-interface FeatureBundle extends FeatureComponents {
+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>;
-    projectionNodeConstructor?: any;
 }
 
 declare enum AnimationType {
@@ -1180,6 +1199,18 @@ 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;
+}
+
 /**
  * A VisualElement is an imperative abstraction around UI elements such as
  * HTMLElement, SVGElement, Three.Object3D etc.
@@ -1318,11 +1349,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.
      */
@@ -1335,7 +1361,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.
@@ -1375,12 +1408,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.ComponentType<MotionProps> | undefined;
+    updateFeatures(): void;
     notifyUpdate: () => void;
     triggerBuild(): void;
     render: () => void;
@@ -1405,7 +1439,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.
@@ -1784,7 +1818,7 @@ declare class DragControls {
      *
      * @public
      */
-    start(event: React$1.PointerEvent | PointerEvent, options?: DragControlOptions): void;
+    start(event: react.PointerEvent | PointerEvent, options?: DragControlOptions): void;
 }
 
 declare type DragElastic = boolean | number | Partial<BoundingBox>;
@@ -2285,7 +2319,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.
      *
@@ -2305,7 +2339,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`.
@@ -2323,7 +2357,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.
      *
@@ -2343,7 +2377,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
@@ -2381,6 +2415,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 {
@@ -2664,7 +2701,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;
@@ -2680,7 +2717,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;
@@ -2750,7 +2786,7 @@ interface AnimationLifecycles {
 declare type EventProps = LayoutLifecycles & AnimationLifecycles;
 declare type CreateVisualElement<Instance> = (Component: string | React.ComponentType<React.PropsWithChildren<unknown>>, options: VisualElementOptions<Instance>) => VisualElement<Instance>;
 
-declare const animations: FeatureComponents;
+declare const animations: FeaturePackages;
 
 declare function useVisualElementContext(): VisualElement<unknown, unknown, {}> | undefined;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "9.0.2",
+    "version": "9.0.3",
     "description": "A simple and powerful React animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -76,28 +76,28 @@
         },
         {
             "path": "./dist/size-rollup-m.js",
-            "maxSize": "4.78 kB"
+            "maxSize": "4.68 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.97kB"
+            "maxSize": "14.88 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "25.75 kB"
+            "maxSize": "25.56 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
-            "maxSize": "4.99 kB"
+            "maxSize": "4.8 kB"
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "19.05 kB"
+            "maxSize": "18.91 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "30.68 kB"
+            "maxSize": "30.43 kB"
         }
     ],
-    "gitHead": "caab57697ca24152a57bdbb9dd4618400880863e"
+    "gitHead": "80400267dedc1e899949428217cd496a1ba687c3"
 }

package/dist/es/events/use-pointer-event.mjs

@@ -1,11 +0,0 @@
-import { addDomEvent, useDomEvent } from './use-dom-event.mjs';
-import { addPointerInfo } from './event-info.mjs';
-
-function addPointerEvent(target, eventName, handler, options) {
-    return addDomEvent(target, eventName, addPointerInfo(handler), options);
-}
-function usePointerEvent(ref, eventName, handler, options) {
-    return useDomEvent(ref, eventName, handler && addPointerInfo(handler), options);
-}
-
-export { addPointerEvent, usePointerEvent };

package/dist/es/gestures/drag/use-drag.mjs

@@ -1,20 +0,0 @@
-import { useEffect } from 'react';
-import { VisualElementDragControls } from './VisualElementDragControls.mjs';
-import { useConstant } from '../../utils/use-constant.mjs';
-
-/**
- * A hook that allows an element to be dragged.
- *
- * @internal
- */
-function useDrag(props) {
-    const { dragControls: groupDragControls, visualElement } = props;
-    const dragControls = useConstant(() => new VisualElementDragControls(visualElement));
-    // If we've been provided a DragControls for manual control over the drag gesture,
-    // subscribe this component to it on mount.
-    useEffect(() => groupDragControls && groupDragControls.subscribe(dragControls), [dragControls, groupDragControls]);
-    // Apply the event listeners to the element
-    useEffect(() => dragControls.addListeners(), [dragControls]);
-}
-
-export { useDrag };

package/dist/es/gestures/use-focus-gesture.mjs

@@ -1,37 +0,0 @@
-import { AnimationType } from '../render/utils/types.mjs';
-import { useDomEvent } from '../events/use-dom-event.mjs';
-import { useRef, useCallback } from 'react';
-
-function useFocusGesture({ whileFocus, visualElement, }) {
-    const isFocusActive = useRef(false);
-    const { animationState } = visualElement;
-    const onFocus = useCallback(() => {
-        let isFocusVisible = false;
-        /**
-         * If this element doesn't match focus-visible then don't
-         * apply whileHover. But, if matches throws that focus-visible
-         * is not a valid selector then in that browser outline styles will be applied
-         * to the element by default and we want to match that behaviour with whileFocus.
-         */
-        try {
-            isFocusVisible = visualElement.current.matches(":focus-visible");
-        }
-        catch (e) {
-            isFocusVisible = true;
-        }
-        if (!isFocusVisible || !animationState)
-            return;
-        animationState.setActive(AnimationType.Focus, true);
-        isFocusActive.current = true;
-    }, [animationState]);
-    const onBlur = useCallback(() => {
-        if (!isFocusActive.current || !animationState)
-            return;
-        animationState.setActive(AnimationType.Focus, false);
-        isFocusActive.current = false;
-    }, [animationState]);
-    useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined);
-    useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
-}
-
-export { useFocusGesture };

package/dist/es/gestures/use-hover-gesture.mjs

@@ -1,32 +0,0 @@
-import { AnimationType } from '../render/utils/types.mjs';
-import { usePointerEvent } from '../events/use-pointer-event.mjs';
-import { isDragActive } from './drag/utils/lock.mjs';
-import { useMemo } from 'react';
-
-function createHoverEvent(visualElement, isActive, applyVariants, callback) {
-    return (event, info) => {
-        if (event.type === "touch" || isDragActive())
-            return;
-        /**
-         * Ensure we trigger animations before firing event callback
-         */
-        if (applyVariants && visualElement.animationState) {
-            visualElement.animationState.setActive(AnimationType.Hover, isActive);
-        }
-        callback && callback(event, info);
-    };
-}
-function useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {
-    usePointerEvent(visualElement, "pointerenter", useMemo(() => {
-        return onHoverStart || whileHover
-            ? createHoverEvent(visualElement, true, Boolean(whileHover), onHoverStart)
-            : undefined;
-    }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverStart });
-    usePointerEvent(visualElement, "pointerleave", useMemo(() => {
-        return onHoverEnd || whileHover
-            ? createHoverEvent(visualElement, false, Boolean(whileHover), onHoverEnd)
-            : undefined;
-    }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverEnd });
-}
-
-export { useHoverGesture };

package/dist/es/gestures/use-pan-gesture.mjs

@@ -1,46 +0,0 @@
-import { useRef, useContext, useEffect } from 'react';
-import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
-import { useUnmountEffect } from '../utils/use-unmount-effect.mjs';
-import { usePointerEvent } from '../events/use-pointer-event.mjs';
-import { PanSession } from './PanSession.mjs';
-
-/**
- *
- * @param handlers -
- * @param ref -
- *
- * @privateRemarks
- * Currently this sets new pan gesture functions every render. The memo route has been explored
- * in the past but ultimately we're still creating new functions every render. An optimisation
- * to explore is creating the pan gestures and loading them into a `ref`.
- *
- * @internal
- */
-function usePanGesture({ onPan, onPanStart, onPanEnd, onPanSessionStart, visualElement, }) {
-    const hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;
-    const panSession = useRef(null);
-    const { transformPagePoint } = useContext(MotionConfigContext);
-    const handlers = {
-        onSessionStart: onPanSessionStart,
-        onStart: onPanStart,
-        onMove: onPan,
-        onEnd: (event, info) => {
-            panSession.current = null;
-            onPanEnd && onPanEnd(event, info);
-        },
-    };
-    useEffect(() => {
-        if (panSession.current !== null) {
-            panSession.current.updateHandlers(handlers);
-        }
-    });
-    function onPointerDown(event) {
-        panSession.current = new PanSession(event, handlers, {
-            transformPagePoint,
-        });
-    }
-    usePointerEvent(visualElement, "pointerdown", hasPanEvents && onPointerDown);
-    useUnmountEffect(() => panSession.current && panSession.current.end());
-}
-
-export { usePanGesture };

package/dist/es/gestures/use-tap-gesture.mjs

@@ -1,115 +0,0 @@
-import { useRef, useCallback } from 'react';
-import { isNodeOrChild } from './utils/is-node-or-child.mjs';
-import { addPointerEvent, usePointerEvent } from '../events/use-pointer-event.mjs';
-import { useUnmountEffect } from '../utils/use-unmount-effect.mjs';
-import { AnimationType } from '../render/utils/types.mjs';
-import { isDragActive } from './drag/utils/lock.mjs';
-import { pipe } from '../utils/pipe.mjs';
-import { addDomEvent, useDomEvent } from '../events/use-dom-event.mjs';
-import { extractEventInfo } from '../events/event-info.mjs';
-
-function fireSyntheticPointerEvent(name, handler) {
-    if (!handler)
-        return;
-    const syntheticPointerEvent = new PointerEvent("pointer" + name);
-    handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
-}
-/**
- * @param handlers -
- * @internal
- */
-function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement, ...props }) {
-    const hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
-    const isPressing = useRef(false);
-    const cancelPointerEndListeners = useRef(null);
-    /**
-     * Only set listener to passive if there are no external listeners.
-     */
-    const eventOptions = {
-        passive: !(onTapStart ||
-            onTap ||
-            onTapCancel ||
-            props["onPointerDown"]),
-    };
-    function removePointerEndListener() {
-        cancelPointerEndListeners.current && cancelPointerEndListeners.current();
-        cancelPointerEndListeners.current = null;
-    }
-    function checkPointerEnd() {
-        removePointerEndListener();
-        isPressing.current = false;
-        const latestProps = visualElement.getProps();
-        if (latestProps.whileTap && visualElement.animationState) {
-            visualElement.animationState.setActive(AnimationType.Tap, false);
-        }
-        return !isDragActive();
-    }
-    function onPointerUp(event, info) {
-        var _a, _b, _c, _d;
-        if (!checkPointerEnd())
-            return;
-        /**
-         * We only count this as a tap gesture if the event.target is the same
-         * as, or a child of, this component's element
-         */
-        !isNodeOrChild(visualElement.current, event.target)
-            ? (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info)
-            : (_d = (_c = visualElement.getProps()).onTap) === null || _d === void 0 ? void 0 : _d.call(_c, event, info);
-    }
-    function onPointerCancel(event, info) {
-        var _a, _b;
-        if (!checkPointerEnd())
-            return;
-        (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
-    }
-    function onPointerStart(event, info) {
-        var _a;
-        const latestProps = visualElement.getProps();
-        /**
-         * Ensure we trigger animations before firing event callback
-         */
-        if (latestProps.whileTap && visualElement.animationState) {
-            visualElement.animationState.setActive(AnimationType.Tap, true);
-        }
-        (_a = latestProps.onTapStart) === null || _a === void 0 ? void 0 : _a.call(latestProps, event, info);
-    }
-    const callbackDependencies = [
-        Boolean(onTapStart),
-        Boolean(onTap),
-        Boolean(whileTap),
-        visualElement,
-    ];
-    const startPress = useCallback((event, info) => {
-        removePointerEndListener();
-        if (isPressing.current)
-            return;
-        isPressing.current = true;
-        cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
-        onPointerStart(event, info);
-    }, callbackDependencies);
-    usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
-    const startAccessiblePress = useCallback(() => {
-        const stopKeydownListener = addDomEvent(visualElement.current, "keydown", (event) => {
-            if (event.key !== "Enter" || isPressing.current)
-                return;
-            isPressing.current = true;
-            cancelPointerEndListeners.current = addDomEvent(visualElement.current, "keyup", () => {
-                if (event.key !== "Enter" || !checkPointerEnd())
-                    return;
-                fireSyntheticPointerEvent("up", visualElement.getProps().onTap);
-            }, eventOptions);
-            fireSyntheticPointerEvent("down", onPointerStart);
-        });
-        const stopBlurListener = addDomEvent(visualElement.current, "blur", () => {
-            stopKeydownListener();
-            stopBlurListener();
-            if (isPressing.current) {
-                fireSyntheticPointerEvent("cancel", onPointerCancel);
-            }
-        });
-    }, callbackDependencies);
-    useDomEvent(visualElement, "focus", hasPressListeners ? startAccessiblePress : undefined);
-    useUnmountEffect(removePointerEndListener);
-}
-
-export { useTapGesture };

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

@@ -1,7 +0,0 @@
-import { MeasureLayout } from './MeasureLayout.mjs';
-
-const layoutFeatures = {
-    measureLayout: MeasureLayout,
-};
-
-export { layoutFeatures };

package/dist/es/motion/features/viewport/use-viewport.mjs

@@ -1,97 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { AnimationType } from '../../../render/utils/types.mjs';
-import { warnOnce } from '../../../utils/warn-once.mjs';
-import { observeIntersection } from './observers.mjs';
-
-function useViewport({ visualElement, whileInView, onViewportEnter, onViewportLeave, viewport = {}, }) {
-    const state = useRef({
-        hasEnteredView: false,
-        isInView: false,
-    });
-    let shouldObserve = Boolean(whileInView || onViewportEnter || onViewportLeave);
-    if (viewport.once && state.current.hasEnteredView)
-        shouldObserve = false;
-    const useObserver = typeof IntersectionObserver === "undefined"
-        ? useMissingIntersectionObserver
-        : useIntersectionObserver;
-    useObserver(shouldObserve, state.current, visualElement, viewport);
-}
-const thresholdNames = {
-    some: 0,
-    all: 1,
-};
-function useIntersectionObserver(shouldObserve, state, visualElement, { root, margin: rootMargin, amount = "some", once }) {
-    useEffect(() => {
-        if (!shouldObserve || !visualElement.current)
-            return;
-        const options = {
-            root: root === null || root === void 0 ? void 0 : root.current,
-            rootMargin,
-            threshold: typeof amount === "number" ? amount : thresholdNames[amount],
-        };
-        const intersectionCallback = (entry) => {
-            const { isIntersecting } = entry;
-            /**
-             * If there's been no change in the viewport state, early return.
-             */
-            if (state.isInView === isIntersecting)
-                return;
-            state.isInView = isIntersecting;
-            /**
-             * Handle hasEnteredView. If this is only meant to run once, and
-             * element isn't visible, early return. Otherwise set hasEnteredView to true.
-             */
-            if (once && !isIntersecting && state.hasEnteredView) {
-                return;
-            }
-            else if (isIntersecting) {
-                state.hasEnteredView = true;
-            }
-            if (visualElement.animationState) {
-                visualElement.animationState.setActive(AnimationType.InView, isIntersecting);
-            }
-            /**
-             * Use the latest committed props rather than the ones in scope
-             * when this observer is created
-             */
-            const props = visualElement.getProps();
-            const callback = isIntersecting
-                ? props.onViewportEnter
-                : props.onViewportLeave;
-            callback && callback(entry);
-        };
-        return observeIntersection(visualElement.current, options, intersectionCallback);
-    }, [shouldObserve, root, rootMargin, amount]);
-}
-/**
- * If IntersectionObserver is missing, we activate inView and fire onViewportEnter
- * on mount. This way, the page will be in the state the author expects users
- * to see it in for everyone.
- */
-function useMissingIntersectionObserver(shouldObserve, state, visualElement, { fallback = true }) {
-    useEffect(() => {
-        if (!shouldObserve || !fallback)
-            return;
-        if (process.env.NODE_ENV !== "production") {
-            warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
-        }
-        /**
-         * Fire this in an rAF because, at this point, the animation state
-         * won't have flushed for the first time and there's certain logic in
-         * there that behaves differently on the initial animation.
-         *
-         * This hook should be quite rarely called so setting this in an rAF
-         * is preferred to changing the behaviour of the animation state.
-         */
-        requestAnimationFrame(() => {
-            state.hasEnteredView = true;
-            const { onViewportEnter } = visualElement.getProps();
-            onViewportEnter && onViewportEnter(null);
-            if (visualElement.animationState) {
-                visualElement.animationState.setActive(AnimationType.InView, true);
-            }
-        });
-    }, [shouldObserve]);
-}
-
-export { useViewport };

package/dist/es/motion/utils/VisualElementHandler.mjs

@@ -1,19 +0,0 @@
-import React__default from 'react';
-
-class VisualElementHandler extends React__default.Component {
-    /**
-     * Update visual element props as soon as we know this update is going to be commited.
-     */
-    getSnapshotBeforeUpdate() {
-        const { visualElement, props } = this.props;
-        if (visualElement)
-            visualElement.setProps(props);
-        return null;
-    }
-    componentDidUpdate() { }
-    render() {
-        return this.props.children;
-    }
-}
-
-export { VisualElementHandler };