motion-start 0.0.1 → 0.1.0

package/{src/gestures/drag/types.ts → dist/gestures/drag/types.d.ts}

@@ -1,307 +1,309 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { RefObject } from "react";
-import type { VariantLabels } from "../../motion/types";
-import type { Inertia, TargetAndTransition } from "../../types";
-import type { Axis, BoundingBox2D } from "../../types/geometry";
-import { MotionValue } from "../../value";
-import type { PanInfo } from "../PanSession";
-import { DragControls } from "./use-drag-controls";
-export type DragHandler = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => void;
-export type DragElastic = boolean | number | Partial<BoundingBox2D>;
-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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv
-     *   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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv
-     *   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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv
-     *   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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv
-     *   drag
-     *   dragDirectionLock
-     *   onDirectionLock={axis => console.log(axis)}
-     * />
-     * ```
-     *
-     * @public
-     */
-    onDirectionLock?(axis: "x" | "y"): void;
-    /**
-     * Callback function that fires when drag momentum/bounce transition finishes.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv
-     *   drag
-     *   onDragTransitionEnd={() => console.log('Drag transition complete')}
-     * />
-     * ```
-     *
-     * @public
-     */
-    onDragTransitionEnd?(): void;
-}
-/**
- * @public
- */
-export 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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv drag="x" />
-     * ```
-     */
-    drag?: boolean | "x" | "y";
-    /**
-     * Properties or variant label to animate to while the drag gesture is recognised.
-     *
-     * ```jsx
-     * <MotionDiv whileDrag={{ scale: 1.2 }} />
-     * ```
-     */
-    whileDrag?: VariantLabels | TargetAndTransition;
-    /**
-     * If `true`, this will lock dragging to the initially-detected direction. Defaults to `false`.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv drag dragDirectionLock />
-     * ```
-     */
-    dragDirectionLock?: boolean;
-    /**
-     * Allows drag gesture propagation to child components. Set to `false` by
-     * default.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv 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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * // In pixels
-     * <MotionDiv
-     *   drag="x"
-     *   dragConstraints={{ left: 0, right: 300 }}
-     * />
-     *
-     * // As a ref to another component
-     *     let constraintsRef;
-     *
-     *      <MotionDiv bind:this={constraintsRef}>
-     *          <MotionDiv drag dragConstraints={constraintsRef} />
-     *      </MotionDiv>
-     *   )
-     * }
-     * ```
-     */
-    dragConstraints?: false | Partial<BoundingBox2D> | 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`.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv
-     *   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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv
-     *   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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * <MotionDiv
-     *   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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * const dragControls = useDragControls()
-     *
-     * function startDrag(event) {
-     *   dragControls.start(event, { snapToCursor: true })
-     * }
-     *
-     * <div onPointerDown={startDrag} />
-     * <MotionDiv drag="x" dragControls={dragControls} />
-     * ```
-     */
-    dragControls?: DragControls;
-    /**
-     * 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.
-     *
-     * @motion
-     *
-     * ```jsx
-     * const dragControls = useDragControls()
-     *
-     * function startDrag(event) {
-     *   dragControls.start(event, { snapToCursor: true })
-     * }
-     *
-     * <div onPointerDown={startDrag} />
-     * <MotionDiv
-     *   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: BoundingBox2D) => BoundingBox2D | 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>;
-}
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VariantLabels } from '../../motion/types';
+import type { Inertia, TargetAndTransition } from '../../types';
+import type { Axis, BoundingBox2D } from '../../types/geometry';
+import type { MotionValue } from '../../value';
+import type { PanInfo } from '../PanSession';
+import type { DragControls } from './use-drag-controls';
+export type DragHandler = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => void;
+export type DragElastic = boolean | number | Partial<BoundingBox2D>;
+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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   dragDirectionLock
+     *   onDirectionLock={axis => console.log(axis)}
+     * />
+     * ```
+     *
+     * @public
+     */
+    onDirectionLock?(axis: 'x' | 'y'): void;
+    /**
+     * Callback function that fires when drag momentum/bounce transition finishes.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   onDragTransitionEnd={() => console.log('Drag transition complete')}
+     * />
+     * ```
+     *
+     * @public
+     */
+    onDragTransitionEnd?(): void;
+}
+/**
+ * @public
+ */
+export 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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv drag="x" />
+     * ```
+     */
+    drag?: boolean | 'x' | 'y';
+    /**
+     * Properties or variant label to animate to while the drag gesture is recognised.
+     *
+     * ```jsx
+     * <MotionDiv whileDrag={{ scale: 1.2 }} />
+     * ```
+     */
+    whileDrag?: VariantLabels | TargetAndTransition;
+    /**
+     * If `true`, this will lock dragging to the initially-detected direction. Defaults to `false`.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv drag dragDirectionLock />
+     * ```
+     */
+    dragDirectionLock?: boolean;
+    /**
+     * Allows drag gesture propagation to child components. Set to `false` by
+     * default.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv 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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * // In pixels
+     * <MotionDiv
+     *   drag="x"
+     *   dragConstraints={{ left: 0, right: 300 }}
+     * />
+     *
+     * // As a ref to another component
+     *     let constraintsRef;
+     *
+     *      <MotionDiv bind:this={constraintsRef}>
+     *          <MotionDiv drag dragConstraints={constraintsRef} />
+     *      </MotionDiv>
+     *   )
+     * }
+     * ```
+     */
+    dragConstraints?: false | Partial<BoundingBox2D> | {
+        current: Element | null;
+    };
+    /**
+     * 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`.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * const dragControls = useDragControls()
+     *
+     * function startDrag(event) {
+     *   dragControls.start(event, { snapToCursor: true })
+     * }
+     *
+     * <div onPointerDown={startDrag} />
+     * <MotionDiv drag="x" dragControls={dragControls} />
+     * ```
+     */
+    dragControls?: DragControls;
+    /**
+     * 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.
+     *
+     * @motion
+     *
+     * ```jsx
+     * const dragControls = useDragControls()
+     *
+     * function startDrag(event) {
+     *   dragControls.start(event, { snapToCursor: true })
+     * }
+     *
+     * <div onPointerDown={startDrag} />
+     * <MotionDiv
+     *   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: BoundingBox2D) => BoundingBox2D | 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>;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/gestures/drag/types.ts"],"names":[],"mappings":"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"}

package/dist/gestures/drag/types.js

@@ -0,0 +1 @@
+export {};