motion-v 0.12.0-beta.2 → 0.13.0-alpha.0

package/dist/es/features/gestures/drag/VisualElementDragControls.d.ts

@@ -1,57 +0,0 @@
-import { MotionProps } from '../../../components/motion/Motion';
-import { Options } from '../../../types';
-import { Point, VisualElement } from 'framer-motion';
-export declare const elementDragControls: WeakMap<VisualElement<unknown, unknown, {}>, 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<HTMLElement>);
-    start(originEvent: PointerEvent, { snapToCursor }?: DragControlOptions): void;
-    private stop;
-    private cancel;
-    private updateAxis;
-    private resolveConstraints;
-    private resolveRefConstraints;
-    private startAnimation;
-    private startAxisValueAnimation;
-    private stopAnimation;
-    private pauseAnimation;
-    private getAnimationState;
-    /**
-     * 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(): Options;
-}
-export declare function expectsResolvedDragConstraints({ dragConstraints, onMeasureDragConstraints, }: MotionProps): boolean;

package/dist/es/features/gestures/drag/index.d.ts

@@ -1,10 +0,0 @@
-import { Feature } from '../../feature';
-import { VisualElementDragControls } from './VisualElementDragControls';
-export declare class DragGesture extends Feature {
-    controls: VisualElementDragControls;
-    removeGroupControls: Function;
-    removeListeners: Function;
-    constructor(state: any);
-    mount(): void;
-    unmount(): void;
-}

package/dist/es/features/gestures/drag/lock.d.ts

@@ -1,4 +0,0 @@
-export type Lock = (() => void) | false;
-export declare function createLock(name: string): () => Lock;
-export declare function getGlobalLock(drag: boolean | 'x' | 'y' | 'lockDirection'): Lock;
-export declare function isDragActive(): boolean;

package/dist/es/features/gestures/drag/types.d.ts

@@ -1,225 +0,0 @@
-import { DragControls } from './use-drag-controls';
-import { Variant, VariantLabels } from '../../../types';
-import { Axis, BoundingBox, DragElastic, InertiaOptions, PanInfo } from 'framer-motion';
-export interface ResolvedConstraints {
-    x: Partial<Axis>;
-    y: Partial<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: 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: 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: 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;
-    /**
-     * If `dragConstraints` is set to a HTMLElement, this callback will call with the measured drag constraints.
-     *
-     * @public
-     */
-    onMeasureDragConstraints?: (constraints: BoundingBox) => BoundingBox | void;
-}
-export interface DragProps 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';
-    /**
-     * 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;
-    /**
-     * 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;
-    dragConstraints?: false | Partial<BoundingBox> | HTMLElement;
-    /**
-     * 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;
-    /**
-     * 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;
-    /**
-     * 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;
-    whileDrag?: VariantLabels | Variant;
-}

package/dist/es/features/gestures/drag/use-drag-controls.d.ts

@@ -1,73 +0,0 @@
-import { DragControlOptions, VisualElementDragControls } 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: 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 const useDragControls: () => DragControls;

package/dist/es/features/gestures/drag/utils/constraints.d.ts

@@ -1,55 +0,0 @@
-import { ResolvedConstraints } from '../types';
-import { Axis, BoundingBox, Box, DragElastic } from 'framer-motion';
-/**
- * Apply constraints to a point. These constraints are both physical along an
- * axis, and an elastic factor that determines how much to constrain the point
- * by if it does lie outside the defined parameters.
- */
-export declare function applyConstraints(point: number, { min, max }: Partial<Axis>, elastic?: Axis): number;
-export declare const defaultElastic = 0.35;
-/**
- * Calculate constraints in terms of the viewport when
- * defined relatively to the measured bounding box.
- */
-export declare function calcRelativeConstraints(layoutBox: Box, { top, left, bottom, right }: Partial<BoundingBox>): ResolvedConstraints;
-/**
- * Calculate constraints in terms of the viewport when defined relatively to the
- * measured axis. This is measured from the nearest edge, so a max constraint of 200
- * on an axis with a max value of 300 would return a constraint of 500 - axis length
- */
-export declare function calcRelativeAxisConstraints(axis: Axis, min?: number, max?: number): Partial<Axis>;
-/**
- * Accepts a dragElastic prop and returns resolved elastic values for each axis.
- */
-export declare function resolveDragElastic(dragElastic?: DragElastic): Box;
-export declare function resolveAxisElastic(dragElastic: DragElastic, minLabel: string, maxLabel: string): Axis;
-export declare function resolvePointElastic(dragElastic: DragElastic, label: string): number;
-/**
- * Rebase the calculated viewport constraints relative to the layout.min point.
- */
-export declare function rebaseAxisConstraints(layout: Axis, constraints: Partial<Axis>): Partial<Axis>;
-/**
- * Calculate viewport constraints when defined as another viewport-relative box
- */
-export declare function calcViewportConstraints(layoutBox: Box, constraintsBox: Box): {
-    x: {
-        min: number;
-        max: number;
-    };
-    y: {
-        min: number;
-        max: number;
-    };
-};
-/**
- * Calculate viewport constraints when defined as another viewport-relative axis
- */
-export declare function calcViewportAxisConstraints(layoutAxis: Axis, constraintsAxis: Axis): {
-    min: number;
-    max: number;
-};
-/**
- * Calculate a transform origin relative to the source axis, between 0-1, that results
- * in an asthetically pleasing scale/transform needed to project from source to target.
- */
-export declare function calcOrigin(source: Axis, target: Axis): number;

package/dist/es/features/gestures/drag/utils/is.d.ts

@@ -1 +0,0 @@
-export declare function isHTMLElement(value: any): value is HTMLElement;

package/dist/es/features/gestures/focus/index.d.ts

@@ -1,7 +0,0 @@
-import { Feature } from '../../feature';
-export declare class FocusGesture extends Feature {
-    private isActive;
-    onFocus(): void;
-    onBlur(): void;
-    mount(): void;
-}

package/dist/es/features/gestures/focus/types.d.ts

@@ -1,13 +0,0 @@
-import { Variant, VariantLabels } from '../../../types';
-export type FocusProps = {
-    /**
-     * @deprecated Use `whileFocus` instead.
-     */
-    focus?: VariantLabels | Variant;
-    /**
-     * Variant to apply when the element is focused.
-     */
-    whileFocus?: VariantLabels | Variant;
-    onFocus?: (e: FocusEvent) => void;
-    onBlur?: (e: FocusEvent) => void;
-};

package/dist/es/features/gestures/hover/index.d.ts

@@ -1,7 +0,0 @@
-import { MotionState } from '../../../state/motion-state';
-import { Feature } from '../..';
-export declare class HoverGesture extends Feature {
-    isActive(): boolean;
-    constructor(state: MotionState);
-    mount(): void;
-}

package/dist/es/features/gestures/hover/types.d.ts

@@ -1,15 +0,0 @@
-import { Variant, VariantLabels } from '../../../types';
-import { EventInfo } from 'framer-motion';
-export type HoverEvent = (event: MouseEvent, info: EventInfo) => void;
-export interface HoverProps {
-    /**
-     * @deprecated Use `whileHover` instead.
-     */
-    hover?: VariantLabels | Variant;
-    /**
-     * Variant to apply when the element is hovered.
-     */
-    whileHover?: VariantLabels | Variant;
-    onHoverStart?: HoverEvent;
-    onHoverEnd?: HoverEvent;
-}

package/dist/es/features/gestures/in-view/index.d.ts

@@ -1,9 +0,0 @@
-import { MotionState } from '../../../state/motion-state';
-import { Feature } from '../..';
-export declare class InViewGesture extends Feature {
-    isActive(): boolean;
-    constructor(state: MotionState);
-    startObserver(): void;
-    mount(): void;
-    update(): void;
-}

package/dist/es/features/gestures/in-view/types.d.ts

@@ -1,25 +0,0 @@
-import { Variant, VariantLabels } from '../../../types';
-type MarginValue = `${number}${'px' | '%'}`;
-type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
-export interface InViewOptions {
-    root?: Element | Document;
-    margin?: MarginType;
-    amount?: 'some' | 'all' | number;
-}
-type ViewportEventHandler = (entry: IntersectionObserverEntry | null) => void;
-export interface InViewProps {
-    inViewOptions?: InViewOptions & {
-        once?: boolean;
-    };
-    /**
-     * @deprecated Use `whileInView` instead.
-     */
-    inView?: VariantLabels | Variant;
-    /**
-     * Variant to apply when the element is in view.
-     */
-    whileInView?: VariantLabels | Variant;
-    onViewportEnter?: ViewportEventHandler;
-    onViewportLeave?: ViewportEventHandler;
-}
-export {};

package/dist/es/features/gestures/index.d.ts

@@ -1,5 +0,0 @@
-export * from './base';
-export * from './hover';
-export * from './press';
-export * from './in-view';
-export * from './drag';

package/dist/es/features/gestures/pan/PanSession.d.ts

@@ -1,139 +0,0 @@
-import { Point, TransformPoint } from 'framer-motion';
-/**
- * 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 type PanHandler = (event: Event, info: PanInfo) => void;
-interface PanSessionHandlers {
-    onSessionStart: PanHandler;
-    onStart: PanHandler;
-    onMove: PanHandler;
-    onEnd: PanHandler;
-    onSessionEnd: PanHandler;
-    resumeAnimation: () => void;
-}
-interface PanSessionOptions {
-    transformPagePoint?: TransformPoint;
-    contextWindow?: (Window & typeof globalThis) | null;
-    dragSnapToOrigin?: boolean;
-}
-/**
- * @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;
-    /**
-     * For determining if an animation should resume after it is interupted
-     *
-     * @internal
-     */
-    private dragSnapToOrigin;
-    /**
-     * @internal
-     */
-    private contextWindow;
-    constructor(event: PointerEvent, handlers: Partial<PanSessionHandlers>, { transformPagePoint, contextWindow, dragSnapToOrigin }?: PanSessionOptions);
-    private updatePoint;
-    private handlePointerMove;
-    private handlePointerUp;
-    updateHandlers(handlers: Partial<PanSessionHandlers>): void;
-    end(): void;
-}
-export {};

package/dist/es/features/gestures/pan/index.d.ts

@@ -1,16 +0,0 @@
-import { PanInfo } from './PanSession';
-import { Feature } from '../../feature';
-export declare class PanGesture extends Feature {
-    private session?;
-    private removePointerDownListener;
-    onPointerDown(pointerDownEvent: PointerEvent): void;
-    createPanHandlers(): {
-        onSessionStart: (event: PointerEvent, info: PanInfo) => void;
-        onStart: (event: PointerEvent, info: PanInfo) => void;
-        onMove: (event: any, info: any) => void;
-        onEnd: (event: PointerEvent, info: PanInfo) => void;
-    };
-    mount(): void;
-    update(): void;
-    unmount(): void;
-}

package/dist/es/features/gestures/pan/types.d.ts

@@ -1,7 +0,0 @@
-import { PanInfo } from './PanSession';
-export interface PanProps {
-    onPanSessionStart?: (event: PointerEvent, info: PanInfo) => void;
-    onPanStart?: (event: PointerEvent, info: PanInfo) => void;
-    onPan?: (event: PointerEvent, info: PanInfo) => void;
-    onPanEnd?: (event: PointerEvent, info: PanInfo) => void;
-}