framer-motion 6.3.10 → 6.3.13

package/types/context/ReorderContext.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ReorderContextProps } from "../components/Reorder/types";
-export declare const ReorderContext: import("react").Context<ReorderContextProps<any> | null>;

package/types/context/SwitchLayoutGroupContext.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import { IProjectionNode } from "../projection/node/types";
-import { Transition } from "../types";
-export interface SwitchLayoutGroup {
-    register?: (member: IProjectionNode) => void;
-    deregister?: (member: IProjectionNode) => void;
-}
-export declare type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConfig;
-export declare type InitialPromotionConfig = {
-    /**
-     * The initial transition to use when the elements in this group mount (and automatically promoted).
-     * Subsequent updates should provide a transition in the promote method.
-     */
-    transition?: Transition;
-    /**
-     * If the follow tree should preserve its opacity when the lead is promoted on mount
-     */
-    shouldPreserveFollowOpacity?: (member: IProjectionNode) => boolean;
-};
-/**
- * @internal
- */
-export declare const SwitchLayoutGroupContext: import("react").Context<SwitchLayoutGroupContext>;

package/types/events/event-info.d.ts

@@ -1,5 +0,0 @@
-import { EventInfo } from "./types";
-export declare type EventListenerWithPointInfo = (e: MouseEvent | TouchEvent | PointerEvent, info: EventInfo) => void;
-export declare function extractEventInfo(event: MouseEvent | TouchEvent | PointerEvent, pointType?: "page" | "client"): EventInfo;
-export declare function getViewportPointFromEvent(event: MouseEvent | TouchEvent | PointerEvent): EventInfo;
-export declare const wrapHandler: (handler: EventListenerWithPointInfo, shouldFilterPrimaryPointer?: boolean) => EventListener;

package/types/events/types.d.ts

@@ -1,10 +0,0 @@
-import { RefObject } from "react";
-import { Point } from "../projection/geometry/types";
-/** @public */
-export interface EventInfo {
-    point: Point;
-}
-export declare type EventHandler = (event: MouseEvent | TouchEvent | PointerEvent, info: EventInfo) => void;
-export declare type ListenerControls = [() => void, () => void];
-export declare type TargetOrRef = EventTarget | RefObject<EventTarget>;
-export declare type TargetBasedReturnType<Target> = Target extends EventTarget ? ListenerControls : undefined;

package/types/events/use-dom-event.d.ts

@@ -1,24 +0,0 @@
-import { RefObject } from "react";
-export declare function addDomEvent(target: EventTarget, eventName: string, handler: EventListener, options?: AddEventListenerOptions): () => void;
-/**
- * Attaches an event listener directly to the provided DOM element.
- *
- * Bypassing React's event system can be desirable, for instance when attaching non-passive
- * event handlers.
- *
- * ```jsx
- * const ref = useRef(null)
- *
- * useDomEvent(ref, 'wheel', onWheel, { passive: false })
- *
- * return <div ref={ref} />
- * ```
- *
- * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
- * @param eventName - Name of the event you want listen for.
- * @param handler - Function to fire when receiving the event.
- * @param options - Options to pass to `Event.addEventListener`.
- *
- * @public
- */
-export declare function useDomEvent(ref: RefObject<EventTarget>, eventName: string, handler?: EventListener | undefined, options?: AddEventListenerOptions): void;

package/types/events/use-pointer-event.d.ts

@@ -1,4 +0,0 @@
-import { RefObject } from "react";
-import { EventListenerWithPointInfo } from "./event-info";
-export declare function addPointerEvent(target: EventTarget, eventName: string, handler: EventListenerWithPointInfo, options?: AddEventListenerOptions): () => void;
-export declare function usePointerEvent(ref: RefObject<Element>, eventName: string, handler?: EventListenerWithPointInfo | undefined, options?: AddEventListenerOptions): void;

package/types/events/utils.d.ts

@@ -1,3 +0,0 @@
-export declare const supportsPointerEvents: () => boolean;
-export declare const supportsTouchEvents: () => boolean;
-export declare const supportsMouseEvents: () => boolean;

package/types/gestures/PanSession.d.ts

@@ -1,127 +0,0 @@
-import { Point, TransformPoint } from "../projection/geometry/types";
-export declare type AnyPointerEvent = MouseEvent | TouchEvent | PointerEvent;
-/**
- * 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
- */
-export 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;
-}
-export declare type PanHandler = (event: Event, info: PanInfo) => void;
-interface PanSessionHandlers {
-    onSessionStart: PanHandler;
-    onStart: PanHandler;
-    onMove: PanHandler;
-    onEnd: PanHandler;
-    onSessionEnd: PanHandler;
-}
-interface PanSessionOptions {
-    transformPagePoint?: TransformPoint;
-}
-/**
- * @internal
- */
-export declare class PanSession {
-    /**
-     * @internal
-     */
-    private history;
-    /**
-     * @internal
-     */
-    private startEvent;
-    /**
-     * @internal
-     */
-    private lastMoveEvent;
-    /**
-     * @internal
-     */
-    private lastMoveEventInfo;
-    /**
-     * @internal
-     */
-    private transformPagePoint?;
-    /**
-     * @internal
-     */
-    private handlers;
-    /**
-     * @internal
-     */
-    private removeListeners;
-    constructor(event: AnyPointerEvent, handlers: Partial<PanSessionHandlers>, { transformPagePoint }?: PanSessionOptions);
-    private updatePoint;
-    private handlePointerMove;
-    private handlePointerUp;
-    updateHandlers(handlers: Partial<PanSessionHandlers>): void;
-    end(): void;
-}
-export {};

package/types/gestures/drag/VisualElementDragControls.d.ts

@@ -1,56 +0,0 @@
-import { AnyPointerEvent } from "../../gestures/PanSession";
-import { VisualElement } from "../../render/types";
-import { MotionProps } from "../../motion/types";
-import { Point } from "../../projection/geometry/types";
-export declare const elementDragControls: WeakMap<VisualElement<any, any>, VisualElementDragControls>;
-export interface DragControlOptions {
-    snapToCursor?: boolean;
-    cursorProgress?: Point;
-}
-/**
- *
- */
-export declare class VisualElementDragControls {
-    private visualElement;
-    private panSession?;
-    private openGlobalLock;
-    isDragging: boolean;
-    private currentDirection;
-    private originPoint;
-    /**
-     * The permitted boundaries of travel, in pixels.
-     */
-    private constraints;
-    private hasMutatedConstraints;
-    /**
-     * The per-axis resolved elastic values.
-     */
-    private elastic;
-    constructor(visualElement: VisualElement);
-    start(originEvent: AnyPointerEvent, { snapToCursor }?: DragControlOptions): void;
-    private stop;
-    private cancel;
-    private updateAxis;
-    private resolveConstraints;
-    private resolveRefConstraints;
-    private startAnimation;
-    private startAxisValueAnimation;
-    private stopAnimation;
-    /**
-     * Drag works differently depending on which props are provided.
-     *
-     * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
-     * - Otherwise, we apply the delta to the x/y motion values.
-     */
-    private getAxisMotionValue;
-    private snapToCursor;
-    /**
-     * When the viewport resizes we want to check if the measured constraints
-     * have changed and, if so, reposition the element within those new constraints
-     * relative to where it was before the resize.
-     */
-    scalePositionWithinConstraints(): void;
-    addListeners(): () => void;
-    getProps(): MotionProps;
-}
-export declare function expectsResolvedDragConstraints({ dragConstraints, onMeasureDragConstraints, }: MotionProps): boolean;

package/types/gestures/drag/types.d.ts

@@ -1,294 +0,0 @@
-import { RefObject } from "react";
-import { PanInfo } from "../PanSession";
-import { Inertia, TargetAndTransition } from "../../types";
-import { DragControls } from "./use-drag-controls";
-import { MotionValue } from "../../value";
-import { VariantLabels } from "../../motion/types";
-import { Axis, BoundingBox } from "../../projection/geometry/types";
-export declare type DragHandler = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => void;
-export declare type DragElastic = boolean | number | Partial<BoundingBox>;
-export interface ResolvedConstraints {
-    x: Partial<Axis>;
-    y: Partial<Axis>;
-}
-export interface ResolvedElastic {
-    x: Axis;
-    y: Axis;
-}
-/**
- * @public
- */
-export interface DragHandlers {
-    /**
-     * Callback function that fires when dragging starts.
-     *
-     * ```jsx
-     * <motion.div
-     *   drag
-     *   onDragStart={
-     *     (event, info) => console.log(info.point.x, info.point.y)
-     *   }
-     * />
-     * ```
-     *
-     * @public
-     */
-    onDragStart?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
-    /**
-     * Callback function that fires when dragging ends.
-     *
-     * ```jsx
-     * <motion.div
-     *   drag
-     *   onDragEnd={
-     *     (event, info) => console.log(info.point.x, info.point.y)
-     *   }
-     * />
-     * ```
-     *
-     * @public
-     */
-    onDragEnd?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
-    /**
-     * Callback function that fires when the component is dragged.
-     *
-     * ```jsx
-     * <motion.div
-     *   drag
-     *   onDrag={
-     *     (event, info) => console.log(info.point.x, info.point.y)
-     *   }
-     * />
-     * ```
-     *
-     * @public
-     */
-    onDrag?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
-    /**
-     * Callback function that fires a drag direction is determined.
-     *
-     * ```jsx
-     * <motion.div
-     *   drag
-     *   dragDirectionLock
-     *   onDirectionLock={axis => console.log(axis)}
-     * />
-     * ```
-     *
-     * @public
-     */
-    onDirectionLock?(axis: "x" | "y"): void;
-    /**
-     * Callback function that fires when drag momentum/bounce transition finishes.
-     *
-     * ```jsx
-     * <motion.div
-     *   drag
-     *   onDragTransitionEnd={() => console.log('Drag transition complete')}
-     * />
-     * ```
-     *
-     * @public
-     */
-    onDragTransitionEnd?(): void;
-}
-/**
- * @public
- */
-export declare type InertiaOptions = Partial<Omit<Inertia, "velocity" | "type">>;
-/**
- * @public
- */
-export interface DraggableProps extends DragHandlers {
-    /**
-     * Enable dragging for this element. Set to `false` by default.
-     * Set `true` to drag in both directions.
-     * Set `"x"` or `"y"` to only drag in a specific direction.
-     *
-     * ```jsx
-     * <motion.div drag="x" />
-     * ```
-     */
-    drag?: boolean | "x" | "y";
-    /**
-     * Properties or variant label to animate to while the drag gesture is recognised.
-     *
-     * ```jsx
-     * <motion.div whileDrag={{ scale: 1.2 }} />
-     * ```
-     */
-    whileDrag?: VariantLabels | TargetAndTransition;
-    /**
-     * If `true`, this will lock dragging to the initially-detected direction. Defaults to `false`.
-     *
-     * ```jsx
-     * <motion.div drag dragDirectionLock />
-     * ```
-     */
-    dragDirectionLock?: boolean;
-    /**
-     * Allows drag gesture propagation to child components. Set to `false` by
-     * default.
-     *
-     * ```jsx
-     * <motion.div drag="x" dragPropagation />
-     * ```
-     */
-    dragPropagation?: boolean;
-    /**
-     * Applies constraints on the permitted draggable area.
-     *
-     * It can accept an object of optional `top`, `left`, `right`, and `bottom` values, measured in pixels.
-     * This will define a distance the named edge of the draggable component.
-     *
-     * Alternatively, it can accept a `ref` to another component created with React's `useRef` hook.
-     * This `ref` should be passed both to the draggable component's `dragConstraints` prop, and the `ref`
-     * of the component you want to use as constraints.
-     *
-     * ```jsx
-     * // In pixels
-     * <motion.div
-     *   drag="x"
-     *   dragConstraints={{ left: 0, right: 300 }}
-     * />
-     *
-     * // As a ref to another component
-     * const MyComponent = () => {
-     *   const constraintsRef = useRef(null)
-     *
-     *   return (
-     *      <motion.div ref={constraintsRef}>
-     *          <motion.div drag dragConstraints={constraintsRef} />
-     *      </motion.div>
-     *   )
-     * }
-     * ```
-     */
-    dragConstraints?: false | Partial<BoundingBox> | RefObject<Element>;
-    /**
-     * The degree of movement allowed outside constraints. 0 = no movement, 1 =
-     * full movement.
-     *
-     * Set to `0.5` by default. Can also be set as `false` to disable movement.
-     *
-     * By passing an object of `top`/`right`/`bottom`/`left`, individual values can be set
-     * per constraint. Any missing values will be set to `0`.
-     *
-     * ```jsx
-     * <motion.div
-     *   drag
-     *   dragConstraints={{ left: 0, right: 300 }}
-     *   dragElastic={0.2}
-     * />
-     * ```
-     */
-    dragElastic?: DragElastic;
-    /**
-     * Apply momentum from the pan gesture to the component when dragging
-     * finishes. Set to `true` by default.
-     *
-     * ```jsx
-     * <motion.div
-     *   drag
-     *   dragConstraints={{ left: 0, right: 300 }}
-     *   dragMomentum={false}
-     * />
-     * ```
-     */
-    dragMomentum?: boolean;
-    /**
-     * Allows you to change dragging inertia parameters.
-     * When releasing a draggable Frame, an animation with type `inertia` starts. The animation is based on your dragging velocity. This property allows you to customize it.
-     * See {@link https://framer.com/api/animation/#inertia | Inertia} for all properties you can use.
-     *
-     * ```jsx
-     * <motion.div
-     *   drag
-     *   dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
-     * />
-     * ```
-     */
-    dragTransition?: InertiaOptions;
-    /**
-     * Usually, dragging is initiated by pressing down on a component and moving it. For some
-     * use-cases, for instance clicking at an arbitrary point on a video scrubber, we
-     * might want to initiate dragging from a different component than the draggable one.
-     *
-     * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
-     * the draggable component's `dragControls` prop. It exposes a `start` method
-     * that can start dragging from pointer events on other components.
-     *
-     * ```jsx
-     * const dragControls = useDragControls()
-     *
-     * function startDrag(event) {
-     *   dragControls.start(event, { snapToCursor: true })
-     * }
-     *
-     * return (
-     *   <>
-     *     <div onPointerDown={startDrag} />
-     *     <motion.div drag="x" dragControls={dragControls} />
-     *   </>
-     * )
-     * ```
-     */
-    dragControls?: DragControls;
-    /**
-     * If true, element will snap back to its origin when dragging ends.
-     *
-     * Enabling this is the equivalent of setting all `dragConstraints` axes to `0`
-     * with `dragElastic={1}`, but when used together `dragConstraints` can define
-     * a wider draggable area and `dragSnapToOrigin` will ensure the element
-     * animates back to its origin on release.
-     */
-    dragSnapToOrigin?: boolean;
-    /**
-     * By default, if `drag` is defined on a component then an event listener will be attached
-     * to automatically initiate dragging when a user presses down on it.
-     *
-     * By setting `dragListener` to `false`, this event listener will not be created.
-     *
-     * ```jsx
-     * const dragControls = useDragControls()
-     *
-     * function startDrag(event) {
-     *   dragControls.start(event, { snapToCursor: true })
-     * }
-     *
-     * return (
-     *   <>
-     *     <div onPointerDown={startDrag} />
-     *     <motion.div
-     *       drag="x"
-     *       dragControls={dragControls}
-     *       dragListener={false}
-     *     />
-     *   </>
-     * )
-     * ```
-     */
-    dragListener?: boolean;
-    /**
-     * If `dragConstraints` is set to a React ref, this callback will call with the measured drag constraints.
-     *
-     * @public
-     */
-    onMeasureDragConstraints?: (constraints: BoundingBox) => BoundingBox | void;
-    /**
-     * Usually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement.
-     * Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values.
-     * This allows you to manually control how updates from a drag gesture on an element is applied.
-     *
-     * @public
-     */
-    _dragX?: MotionValue<number>;
-    /**
-     * Usually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement.
-     * Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values.
-     * This allows you to manually control how updates from a drag gesture on an element is applied.
-     *
-     * @public
-     */
-    _dragY?: MotionValue<number>;
-}

package/types/gestures/drag/use-drag-controls.d.ts

@@ -1,74 +0,0 @@
-import * as React from "react";
-import { VisualElementDragControls, DragControlOptions } from "./VisualElementDragControls";
-/**
- * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
- *
- * ```jsx
- * const dragControls = useDragControls()
- *
- * function startDrag(event) {
- *   dragControls.start(event, { snapToCursor: true })
- * }
- *
- * return (
- *   <>
- *     <div onPointerDown={startDrag} />
- *     <motion.div drag="x" dragControls={dragControls} />
- *   </>
- * )
- * ```
- *
- * @public
- */
-export declare class DragControls {
-    private componentControls;
-    /**
-     * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
-     *
-     * @internal
-     */
-    subscribe(controls: VisualElementDragControls): () => void;
-    /**
-     * Start a drag gesture on every `motion` component that has this set of drag controls
-     * passed into it via the `dragControls` prop.
-     *
-     * ```jsx
-     * dragControls.start(e, {
-     *   snapToCursor: true
-     * })
-     * ```
-     *
-     * @param event - PointerEvent
-     * @param options - Options
-     *
-     * @public
-     */
-    start(event: React.MouseEvent | React.TouchEvent | React.PointerEvent | MouseEvent | TouchEvent | PointerEvent, options?: DragControlOptions): void;
-}
-/**
- * Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
- * and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
- * might want to initiate that dragging from a different component than the draggable one.
- *
- * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
- * the draggable component's `dragControls` prop. It exposes a `start` method
- * that can start dragging from pointer events on other components.
- *
- * ```jsx
- * const dragControls = useDragControls()
- *
- * function startDrag(event) {
- *   dragControls.start(event, { snapToCursor: true })
- * }
- *
- * return (
- *   <>
- *     <div onPointerDown={startDrag} />
- *     <motion.div drag="x" dragControls={dragControls} />
- *   </>
- * )
- * ```
- *
- * @public
- */
-export declare function useDragControls(): DragControls;

package/types/gestures/drag/use-drag.d.ts

@@ -1,7 +0,0 @@
-import { FeatureProps } from "../../motion/features/types";
-/**
- * A hook that allows an element to be dragged.
- *
- * @internal
- */
-export declare function useDrag(props: FeatureProps): void;