@mantine/hooks 9.1.1 → 9.2.1

package/lib/index.d.ts

@@ -79,6 +79,7 @@ export { useCollapse } from './use-collapse/use-collapse.js';
 export { useHorizontalCollapse } from './use-collapse/use-horizontal-collapse.js';
 export { useMask, formatMask, unformatMask, isMaskComplete, generatePattern, } from './use-mask/use-mask.js';
 export { useRovingIndex } from './use-roving-index/use-roving-index.js';
+export { useDrag } from './use-drag/use-drag.js';
 export type { UseMediaQueryOptions } from './use-media-query/use-media-query';
 export type { UseClipboardInput as UseClipboardOptions, UseClipboardReturnValue, } from './use-clipboard/use-clipboard';
 export type { UseColorSchemeValue } from './use-color-scheme/use-color-scheme';
@@ -130,3 +131,4 @@ export type { UseCollapseInput, UseCollapseReturnValue, UseCollapseState, } from
 export type { UseHorizontalCollapseInput, UseHorizontalCollapseReturnValue, UseHorizontalCollapseState, } from './use-collapse/use-horizontal-collapse';
 export type { UseMaskOptions, UseMaskReturnValue, MaskState } from './use-mask/use-mask';
 export type { UseRovingIndexInput, UseRovingIndexGetItemPropsInput, UseRovingIndexReturnValue, } from './use-roving-index/use-roving-index';
+export type { UseDragState, UseDragOptions, UseDragReturnValue } from './use-drag/use-drag';

package/lib/use-drag/use-drag.d.ts

@@ -0,0 +1,60 @@
+type Vector2 = [number, number];
+export interface UseDragState {
+    /** Current pointer position [x, y] */
+    xy: Vector2;
+    /** Position where the gesture started [x, y] */
+    initial: Vector2;
+    /** Displacement from start [x, y], respects axis constraint */
+    movement: Vector2;
+    /** Change since previous event [x, y] */
+    delta: Vector2;
+    /** Absolute distance per axis [x, y] */
+    distance: Vector2;
+    /** Movement direction per axis: -1, 0, or 1 */
+    direction: Vector2;
+    /** Speed per axis in px/ms */
+    velocity: Vector2;
+    /** Time since drag started in ms */
+    elapsedTime: number;
+    /** `true` on the first handler call after the threshold is met */
+    first: boolean;
+    /** `true` on the last handler call (pointer released or canceled) */
+    last: boolean;
+    /** `true` while the gesture is ongoing */
+    active: boolean;
+    /** `true` when the gesture qualifies as a tap (requires `filterTaps: true`) */
+    tap: boolean;
+    /** `true` when the gesture was interrupted by a `pointercancel` event */
+    canceled: boolean;
+    /** Function to programmatically cancel the current gesture */
+    cancel: () => void;
+    /** The source `PointerEvent` */
+    event: PointerEvent;
+}
+export interface UseDragOptions {
+    /** Constrain movement to a specific axis. `'lock'` locks to whichever axis has more movement after `axisThreshold` is exceeded. */
+    axis?: 'x' | 'y' | 'lock';
+    /** Movement in px required to determine axis when `axis` is `'lock'`, `1` by default */
+    axisThreshold?: number;
+    /** When `true`, the last state includes `tap: true` when total distance is below `tapThreshold`, `false` by default */
+    filterTaps?: boolean;
+    /** Max displacement in px to still be considered a tap, `3` by default */
+    tapThreshold?: number;
+    /** Minimum displacement in px before the drag activates. Can be a number (both axes) or `[x, y]`. `0` by default */
+    threshold?: number | Vector2;
+    /** Enable or disable the hook, `true` by default */
+    enabled?: boolean;
+}
+export interface UseDragReturnValue<T extends HTMLElement = any> {
+    /** Ref callback to attach to the draggable element */
+    ref: React.RefCallback<T | null>;
+    /** `true` while the element is being dragged */
+    active: boolean;
+}
+export declare function useDrag<T extends HTMLElement = any>(handler: (state: UseDragState) => void, options?: UseDragOptions): UseDragReturnValue<T>;
+export declare namespace useDrag {
+    type State = UseDragState;
+    type Options = UseDragOptions;
+    type ReturnValue<T extends HTMLElement = any> = UseDragReturnValue<T>;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/hooks",
-  "version": "9.1.1",
+  "version": "9.2.1",
   "description": "A collection of 50+ hooks for state and UI management",
   "homepage": "https://mantine.dev",
   "license": "MIT",