@progress/kendo-react-common 4.11.0 → 4.13.0-dev.202111231559

package/dist/npm/hooks/useDraggable.js

@@ -1,31 +1,336 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var kendo_draggable_1 = require("@telerik/kendo-draggable");
-/** @hidden */
-function useDraggable(ref, _a) {
-    var onPress = _a.onPress, onDrag = _a.onDrag, onRelease = _a.onRelease;
-    var draggable = React.useMemo(function () { return new kendo_draggable_1.default({
-        press: onPress,
-        drag: onDrag,
-        release: onRelease
-    }); }, []);
-    var initDraggable = function () {
-        var element = ref.current;
-        if (!element) {
+var kendo_draggable_common_1 = require("@progress/kendo-draggable-common");
+var noop_1 = require("../noop");
+var useInheritedState_1 = require("../hooks/useInheritedState");
+var context_1 = require("../drag-n-drop/context");
+var IGNORE_MOUSE_TIMEOUT = 2000;
+/**
+ * Represents the KendoReact `useDraggable` hook.
+ * Use it to attach `drag` events to a native HTML DOM elements, or custom React Components.
+ *
+ * For more information, refer to the [KendoReact Draggable]({% slug draggable_drag-and-drop %}) article.
+ *
+ * @param ref - The `ref` of the HTML Element or React Component which will enable the `draggable` functionality.
+ * @param callbacks - A collection of callbacks, called by the `useDraggable` hook when a specific action occurs.
+ * @param options - Additional configuration of the `useDraggable` hook.
+ */
+function useDraggable(ref, callbacks, options) {
+    if (options === void 0) { options = {}; }
+    var _a = callbacks.onPress, onPress = _a === void 0 ? noop_1.noop : _a, _b = callbacks.onRelease, onRelease = _b === void 0 ? noop_1.noop : _b, _c = callbacks.onDragStart, onDragStart = _c === void 0 ? noop_1.noop : _c, _d = callbacks.onDrag, onDrag = _d === void 0 ? noop_1.noop : _d, _e = callbacks.onDragEnd, onDragEnd = _e === void 0 ? noop_1.noop : _e;
+    var _f = options.hint, hint = _f === void 0 ? null : _f, _g = options.mouseOnly, mouseOnly = _g === void 0 ? false : _g, _h = options.autoScroll, autoScroll = _h === void 0 ? true : _h, _j = options.scrollContainer, scrollContainer = _j === void 0 ? null : _j;
+    var _k = React.useState(false), pressed = _k[0], setPressed = _k[1];
+    var _l = React.useState(false), scrolling = _l[0], setScrolling = _l[1];
+    var drop = useInheritedState_1.useInheritedState(context_1.DropContext)[0];
+    var _m = useInheritedState_1.useInheritedState(context_1.DragContext), drag = _m[0], setDrag = _m[1];
+    var drops = React.useContext(context_1.DropsContext)[0];
+    var _o = React.useContext(context_1.DragsContext), drags = _o[0], registerDrag = _o[1], deregisterDrag = _o[2];
+    var velocity = React.useRef({ x: 0, y: 0 });
+    var scrollInterval = React.useRef();
+    var ignoreMouse = React.useRef(false);
+    var restoreMouseTimeout = React.useRef();
+    var unmount = React.useRef(false);
+    var offset = React.useRef({ x: 0, y: 0 });
+    var pageOffset = React.useRef({ x: 0, y: 0 });
+    var clientOffset = React.useRef({ x: 0, y: 0 });
+    var initialClientOffset = React.useRef({ x: 0, y: 0 });
+    var scrollOffset = React.useRef({ x: 0, y: 0 });
+    var initialScrollOffset = React.useRef({ x: 0, y: 0 });
+    var supportPointerEvent = Boolean(window && (typeof window !== 'undefined') && window.PointerEvent);
+    var pointers = !mouseOnly && supportPointerEvent;
+    var getElement = React.useCallback(function () { return ref.current && ref.current.element
+        ? ref.current.element
+        : ref.current; }, [ref]);
+    var getHintElement = React.useCallback(function () { return hint && hint.current && hint.current.element
+        ? hint.current.element
+        : hint
+            ? hint.current
+            : null; }, [hint]);
+    var getScrollContainer = React.useCallback(function () { return scrollContainer && scrollContainer.current && scrollContainer.current.element
+        ? scrollContainer.current.element
+        : scrollContainer
+            ? scrollContainer.current
+            : null; }, [scrollContainer]);
+    var getAutoScrollContainer = React.useCallback(function () { return typeof autoScroll === 'object' && autoScroll.boundaryElementRef
+        && autoScroll.boundaryElementRef.current && autoScroll.boundaryElementRef.current.element
+        ? autoScroll.boundaryElementRef.current.element
+        : typeof autoScroll === 'object' && autoScroll.boundaryElementRef && autoScroll.boundaryElementRef.current
+            ? autoScroll.boundaryElementRef.current
+            : null; }, [autoScroll]);
+    var target = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({
+        element: getElement(),
+        hint: getHintElement(),
+        onPress: handlePress,
+        onDragStart: handleDragStart,
+        onDrag: handleDrag,
+        onDragEnd: handleDragEnd,
+        onRelease: handleRelease,
+        data: ref.current
+    }); });
+    var getDocument = React.useCallback(function () {
+        var element = getElement();
+        return element ? element.ownerDocument || document : document;
+    }, [getElement]);
+    var getWindow = React.useCallback(function () {
+        var document = getDocument();
+        return document
+            ? document.defaultView || window
+            : window;
+    }, [getDocument]);
+    var getState = React.useCallback(function () { return ({
+        drag: drag ? drag.current : null,
+        drop: drop ? drop.current : null,
+        drags: drags.map(function (d) { return d.current; }),
+        drops: drops.map(function (d) { return d.current; }),
+        pressed: pressed,
+        ignoreMouse: ignoreMouse.current,
+        scrollOffset: scrollOffset.current,
+        offset: offset.current,
+        pageOffset: pageOffset.current,
+        initialScrollOffset: initialScrollOffset.current,
+        clientOffset: clientOffset.current,
+        initialClientOffset: initialClientOffset.current,
+        velocity: velocity.current,
+        autoScroll: Boolean(typeof autoScroll === 'object' ? autoScroll.enabled !== false : autoScroll),
+        scrollableParent: getAutoScrollContainer(),
+        autoScrollDirection: typeof autoScroll === 'object' ? autoScroll.direction : { horizontal: true, vertical: true },
+        isScrolling: scrolling
+    }); }, [drag, drop, drags, drops, pressed, autoScroll, getAutoScrollContainer, scrolling]);
+    var handlePressedChange = React.useCallback(function (value) {
+        setPressed(value);
+    }, []);
+    var handleScrollingChange = React.useCallback(function (value) {
+        setScrolling(value);
+    }, []);
+    var handleVelocityChange = React.useCallback(function (value) {
+        velocity.current = value;
+    }, []);
+    var handleOffsetChange = React.useCallback(function (value) {
+        offset.current = value;
+    }, []);
+    var handleClientOffsetChange = React.useCallback(function (value) {
+        clientOffset.current = value;
+    }, []);
+    var handlePageOffsetChange = React.useCallback(function (value) {
+        pageOffset.current = value;
+    }, []);
+    var handleInitialClientOffsetChange = React.useCallback(function (value) {
+        initialClientOffset.current = value;
+    }, []);
+    var handleScrollOffsetChange = React.useCallback(function (value) {
+        scrollOffset.current = value;
+    }, []);
+    var handleInitialScrollOffsetChange = React.useCallback(function (value) {
+        initialScrollOffset.current = value;
+    }, []);
+    // Drag Events
+    var handlePress = React.useCallback(function (event) {
+        onPress(event);
+    }, [onPress]);
+    var handleRelease = React.useCallback(function (event) {
+        onRelease(event);
+    }, [onRelease]);
+    var handleDragStart = React.useCallback(function (event) {
+        setDrag(target, { target: ref.current, event: event });
+        onDragStart(event);
+    }, [setDrag, ref, onDragStart]);
+    var handleDrag = React.useCallback(function (event) {
+        onDrag(event);
+    }, [onDrag]);
+    var handleDragEnd = React.useCallback(function (event) {
+        if (unmount.current) {
             return;
         }
-        draggable.bindTo(element);
-        return function () { draggable.destroy(); };
-    };
-    var updateDraggable = function () {
-        draggable.update({
-            press: onPress,
-            drag: onDrag,
-            release: onRelease
+        setDrag(null, { target: ref.current, event: event });
+        onDragEnd(event);
+    }, [onDragEnd, setDrag, ref]);
+    var dispatchDragEvent = React.useCallback(function (event) {
+        kendo_draggable_common_1.dispatchDragAndDrop(getState(), { event: event, payload: target.current }, {
+            onVelocityChange: handleVelocityChange,
+            onOffsetChange: handleOffsetChange,
+            onClientOffsetChange: handleClientOffsetChange,
+            onPageOffsetChange: handlePageOffsetChange,
+            onInitialClientOffsetChange: handleInitialClientOffsetChange,
+            onScrollOffsetChange: handleScrollOffsetChange,
+            onInitialScrollOffsetChange: handleInitialScrollOffsetChange,
+            onIsPressedChange: handlePressedChange,
+            onIsScrollingChange: handleScrollingChange
         });
+    }, [
+        getState,
+        handleVelocityChange,
+        handleOffsetChange,
+        handlePageOffsetChange,
+        handleClientOffsetChange,
+        handleInitialClientOffsetChange,
+        handleInitialScrollOffsetChange,
+        handlePressedChange,
+        handleScrollOffsetChange,
+        handleScrollingChange
+    ]);
+    // Pointer Events
+    var handlePointerDown = React.useCallback(function (event) {
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    var handlePointerMove = React.useCallback(function (event) {
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    var handlePointerCancel = React.useCallback(function (event) {
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    var handlePointerUp = React.useCallback(function (event) {
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    // Mouse Events
+    var handleMouseDown = React.useCallback(function (event) {
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    var handleMouseMove = React.useCallback(function (event) {
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    var handleMouseUp = React.useCallback(function (event) {
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    var handleContextMenu = React.useCallback(function (event) {
+        event.preventDefault();
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    // Touch Events
+    var handleTouchStart = React.useCallback(function (event) {
+        event.preventDefault();
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    var handleTouchMove = React.useCallback(function (event) {
+        event.preventDefault();
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    var handleTouchEnd = React.useCallback(function (event) {
+        if (event.touches.length === 0 && event.changedTouches.length === 1) {
+            var currentWindow = getWindow();
+            ignoreMouse.current = true;
+            restoreMouseTimeout.current = currentWindow.setTimeout(function () { ignoreMouse.current = false; }, IGNORE_MOUSE_TIMEOUT);
+        }
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent, getWindow]);
+    var handleScroll = React.useCallback(function (event) {
+        dispatchDragEvent(event);
+    }, [dispatchDragEvent]);
+    // Misc
+    var prerequisites = React.useCallback(function () {
+        var element = getElement();
+        if (element) {
+            var initialTouchAction_1 = element.style.touchAction;
+            element.style.touchAction = 'none';
+            return function () {
+                element.style.touchAction = initialTouchAction_1;
+            };
+        }
+    }, [getElement]);
+    var register = React.useCallback(function () {
+        registerDrag(target);
+        return function () {
+            deregisterDrag(target);
+        };
+    }, [deregisterDrag, registerDrag]);
+    var init = function () {
+        var window = getWindow();
+        var element = getElement();
+        var document = getDocument();
+        if (pointers) {
+            if (element) {
+                var scrollable = kendo_draggable_common_1.getScrollableParent(element);
+                scrollable.addEventListener('scroll', handleScroll, { passive: true });
+                element.addEventListener('pointerdown', handlePointerDown, { passive: true });
+            }
+            if (pressed) {
+                document.addEventListener('pointermove', handlePointerMove);
+                document.addEventListener('pointerup', handlePointerUp, true);
+                document.addEventListener('contextmenu', handleContextMenu);
+                document.addEventListener('pointercancel', handlePointerCancel, { passive: true });
+            }
+        }
+        else {
+            // Hacky-hacky iOS Safari
+            window.addEventListener('touchmove', noop_1.noop, { capture: false, passive: false });
+            if (element) {
+                element.addEventListener('mousedown', handleMouseDown, { passive: true });
+                if (!mouseOnly) {
+                    element.addEventListener('touchstart', handleTouchStart, { passive: true });
+                    if (pressed) {
+                        element.addEventListener('touchmove', handleTouchMove, { passive: true });
+                        element.addEventListener('touchend', handleTouchEnd, { passive: true });
+                    }
+                }
+            }
+            if (pressed) {
+                document.addEventListener('mousemove', handleMouseMove, { passive: true });
+                document.addEventListener('mouseup', handleMouseUp, { passive: true });
+            }
+        }
+        return function () {
+            if (element) {
+                var scrollable = kendo_draggable_common_1.getScrollableParent(element);
+                if (scrollable) {
+                    scrollable.removeEventListener('scroll', handleScroll);
+                }
+                element.removeEventListener('pointerdown', handlePointerDown);
+                element.removeEventListener('mousedown', handleMouseDown);
+                element.removeEventListener('touchstart', handleTouchStart);
+                element.removeEventListener('touchmove', handleTouchMove);
+                element.removeEventListener('touchend', handleTouchEnd);
+            }
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp, true);
+            document.removeEventListener('contextmenu', handleContextMenu);
+            document.removeEventListener('pointercancel', handlePointerCancel);
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('touchmove', noop_1.noop);
+            window.clearTimeout(restoreMouseTimeout.current);
+        };
     };
-    React.useEffect(initDraggable, []);
-    React.useEffect(updateDraggable, [onPress, onDrag, onRelease]);
+    React.useEffect(function () {
+        var window = getWindow();
+        if (scrolling) {
+            var scrollableParent_1 = getScrollContainer()
+                || kendo_draggable_common_1.getScrollableParent(document.elementFromPoint(clientOffset.current.x, clientOffset.current.y));
+            window.clearInterval(scrollInterval.current);
+            scrollInterval.current = window.setInterval(function () {
+                kendo_draggable_common_1.autoScroll(scrollableParent_1, { x: velocity.current.x, y: velocity.current.y });
+            }, 50);
+        }
+        return function () {
+            window.clearInterval(scrollInterval.current);
+        };
+    }, [getElement, getScrollContainer, getWindow, scrolling]);
+    React.useEffect(prerequisites, [prerequisites]);
+    React.useEffect(init, [
+        pressed,
+        getWindow,
+        getElement,
+        getDocument,
+        mouseOnly,
+        pointers,
+        handleContextMenu,
+        handleMouseDown,
+        handleMouseMove,
+        handleMouseUp,
+        handlePointerCancel,
+        handlePointerDown,
+        handlePointerMove,
+        handlePointerUp,
+        handleTouchEnd,
+        handleTouchMove,
+        handleTouchStart,
+        handleScroll
+    ]);
+    React.useEffect(function () {
+        return function () {
+            unmount.current = true;
+        };
+    }, []);
+    React.useLayoutEffect(register, [register]);
 }
 exports.useDraggable = useDraggable;

package/dist/npm/hooks/useDroppable.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { NormalizedDragEvent } from '@progress/kendo-draggable-common';
+/**
+ * Represents the `ref` object of the `Droppable` component.
+ */
+export interface DroppableHandle {
+    /**
+     * The element which is registered as droppable.
+     */
+    element?: HTMLElement;
+}
+/**
+ * Represents the KendoReact `useDroppable` hook.
+ * Use it to attach `drop` events to a native HTML DOM elements, or custom React Components.
+ *
+ * For more information, refer to the [KendoReact Droppable]({% slug droppable_drag-and-drop %}) article.
+ *
+ * @param ref - The `ref` of the HTML Element or React Component which will enable the `droppable` functionality.
+ * @param callbacks - A collection of callbacks, called by the `useDroppable` hook when a specific action occurs.
+ */
+export declare function useDroppable(ref: React.RefObject<HTMLElement | null | {
+    element: HTMLElement | null;
+}>, callbacks?: {
+    onDragEnter?: (event: NormalizedDragEvent) => void;
+    onDragOver?: (event: NormalizedDragEvent) => void;
+    onDragLeave?: (event: NormalizedDragEvent) => void;
+    onDrop?: (event: NormalizedDragEvent) => void;
+}): void;

package/dist/npm/hooks/useDroppable.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var noop_1 = require("../noop");
+var useInheritedState_1 = require("../hooks/useInheritedState");
+var context_1 = require("../drag-n-drop/context");
+/**
+ * Represents the KendoReact `useDroppable` hook.
+ * Use it to attach `drop` events to a native HTML DOM elements, or custom React Components.
+ *
+ * For more information, refer to the [KendoReact Droppable]({% slug droppable_drag-and-drop %}) article.
+ *
+ * @param ref - The `ref` of the HTML Element or React Component which will enable the `droppable` functionality.
+ * @param callbacks - A collection of callbacks, called by the `useDroppable` hook when a specific action occurs.
+ */
+function useDroppable(ref, callbacks) {
+    if (callbacks === void 0) { callbacks = {
+        onDragEnter: noop_1.noop,
+        onDragOver: noop_1.noop,
+        onDragLeave: noop_1.noop,
+        onDrop: noop_1.noop
+    }; }
+    var _a = callbacks.onDragEnter, onDragEnter = _a === void 0 ? noop_1.noop : _a, _b = callbacks.onDragOver, onDragOver = _b === void 0 ? noop_1.noop : _b, _c = callbacks.onDragLeave, onDragLeave = _c === void 0 ? noop_1.noop : _c, _d = callbacks.onDrop, onDrop = _d === void 0 ? noop_1.noop : _d;
+    var _e = useInheritedState_1.useInheritedState(context_1.DropContext), setDrop = _e[1];
+    var _f = React.useContext(context_1.DropsContext), registerDrop = _f[1], deregisterDrop = _f[2];
+    var getElement = React.useCallback(function () { return ref.current && ref.current.element
+        ? ref.current.element
+        : ref.current; }, [ref]);
+    var target = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({
+        element: getElement(),
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        data: ref.current
+    }); });
+    var handleDragEnter = React.useCallback(function (event) {
+        setDrop(target, { target: ref.current, event: event });
+        onDragEnter(event);
+    }, [setDrop, ref, onDragEnter]);
+    var handleDragOver = React.useCallback(function (event) {
+        onDragOver(event);
+    }, [onDragOver]);
+    var handleDragLeave = React.useCallback(function (event) {
+        setDrop(null, { target: ref.current, event: event });
+        onDragLeave(event);
+    }, [setDrop, ref, onDragLeave]);
+    var handleDrop = React.useCallback(function (event) {
+        setDrop(null, { target: ref.current, event: event });
+        onDrop(event);
+    }, [setDrop, ref, onDrop]);
+    var register = React.useCallback(function () {
+        registerDrop(target);
+        return function () {
+            deregisterDrop(target);
+        };
+    }, [deregisterDrop, registerDrop]);
+    React.useLayoutEffect(register, [register]);
+}
+exports.useDroppable = useDroppable;
+;

package/dist/npm/hooks/useInheritedState.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+interface Setter<T> extends Array<any> {
+    0?: T;
+    [index: number]: any;
+}
+/**
+ * @hidden
+ */
+export declare const useInheritedState: <T>(context: React.Context<[T, (...event: Setter<T>) => void]>, defaultValue?: any) => [T, (...event: Setter<T>) => void];
+export {};

package/dist/npm/hooks/useInheritedState.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+/**
+ * @hidden
+ */
+exports.useInheritedState = function (context, defaultValue) {
+    var _a = React.useContext(context), contextValue = _a[0], contextSetter = _a[1];
+    var _b = React.useState(defaultValue), localValue = _b[0], localSetter = _b[1];
+    var value = contextValue !== undefined ? contextValue : localValue;
+    var handleValueChange = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        contextValue !== undefined
+            ? contextSetter.apply(void 0, args) : localSetter(args[0]);
+    };
+    return [
+        value,
+        handleValueChange
+    ];
+};

package/dist/npm/hooks/usePointer.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { KendoPointer } from '../models';
+declare type ElementPointer = {
+    [P in keyof KendoPointer<any, any>]: (event: React.PointerEvent<any>) => void;
+};
+/**
+ * @hidden
+ */
+export declare const usePointer: <E extends HTMLElement, P extends KendoPointer<any, any>, R extends {}>(props: P, target: React.RefObject<R>, extend?: {
+    onPointerDown?: (args: React.PointerEvent<E>) => void;
+    onPointerMove?: (args: React.PointerEvent<E>) => void;
+    onPointerUp?: (args: React.PointerEvent<E>) => void;
+    onPointerCancel?: (args: React.PointerEvent<E>) => void;
+    onGotPointerCapture?: (args: React.PointerEvent<E>) => void;
+    onLostPointerCapture?: (args: React.PointerEvent<E>) => void;
+    onPointerEnter?: (args: React.PointerEvent<E>) => void;
+    onPointerOver?: (args: React.PointerEvent<E>) => void;
+    onPointerLeave?: (args: React.PointerEvent<E>) => void;
+    onPointerOut?: (args: React.PointerEvent<E>) => void;
+}) => ElementPointer;
+export {};

package/dist/npm/hooks/usePointer.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+/**
+ * @hidden
+ */
+exports.usePointer = function (props, target, extend) {
+    if (extend === void 0) { extend = {}; }
+    return Object.keys(extend).reduce(function (acc, key) {
+        var _a;
+        return (__assign({}, acc, (_a = {}, _a[key] = React.useCallback(function (syntheticEvent) {
+            if (extend[key]) {
+                extend[key](syntheticEvent);
+            }
+            if (props[key]) {
+                props[key]({ target: target.current, syntheticEvent: syntheticEvent });
+            }
+        }, [props[key], extend[key], target]), _a)));
+    }, {});
+};

package/dist/npm/hooks/useTouch.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { KendoTouch } from '../models';
+declare type ElementTouch = {
+    [P in keyof KendoTouch<any, any>]: (event: React.TouchEvent<any>) => void;
+};
+/**
+ * @hidden
+ */
+export declare const useMouse: <E extends HTMLElement, P extends KendoTouch<any, any>, R extends {}>(props: P, target: React.RefObject<R>, extend?: {
+    onTouchStart?: (args: React.TouchEvent<E>) => void;
+    onTouchMove?: (args: React.TouchEvent<E>) => void;
+    onTouchEnd?: (args: React.TouchEvent<E>) => void;
+    onTouchCancel?: (args: React.TouchEvent<E>) => void;
+}) => ElementTouch;
+export {};

package/dist/npm/hooks/useTouch.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+/**
+ * @hidden
+ */
+exports.useMouse = function (props, target, extend) {
+    if (extend === void 0) { extend = {}; }
+    return Object.keys(extend).reduce(function (acc, key) {
+        var _a;
+        return (__assign({}, acc, (_a = {}, _a[key] = React.useCallback(function (syntheticEvent) {
+            if (extend[key]) {
+                extend[key](syntheticEvent);
+            }
+            if (props[key]) {
+                props[key]({ target: target.current, syntheticEvent: syntheticEvent });
+            }
+        }, [props[key], extend[key], target]), _a)));
+    }, {});
+};

package/dist/npm/main.d.ts

@@ -3,7 +3,6 @@ export * from './canUseDOM';
 export * from './canUseRef';
 export * from './classNames';
 export * from './clone';
-export * from './Draggable';
 export * from './focus';
 export * from './FormComponent';
 export * from './getTabIndex';
@@ -22,11 +21,11 @@ export * from './hocs/AsyncFocusBlur';
 export * from './hocs/withPropsContext';
 export * from './hooks/useDir';
 export * from './hooks/useAsyncFocusBlur';
-export * from './hooks/useDraggable';
 export * from './hooks/useRtl';
 export * from './hooks/useMouse';
 export * from './hooks/useCustomComponent';
 export * from './hooks/usePropsContext';
+export * from './hooks/useCollection';
 export * from './models';
 export * from './icons/Icon';
 export * from './icons/SvgIcon';
@@ -36,3 +35,8 @@ export * from './icons/models/theme-color';
 export * from './typography/models/margin';
 export * from './typography/TypographyProps';
 export * from './typography/Typography';
+export * from './drag-n-drop';
+export * from './Draggable';
+export * from './Droppable';
+export * from './hooks/useDraggable';
+export * from './hooks/useDroppable';

package/dist/npm/main.js

@@ -8,7 +8,6 @@ __export(require("./canUseDOM"));
 __export(require("./canUseRef"));
 __export(require("./classNames"));
 __export(require("./clone"));
-__export(require("./Draggable"));
 __export(require("./focus"));
 __export(require("./FormComponent"));
 __export(require("./getTabIndex"));
@@ -26,11 +25,16 @@ __export(require("./hocs/AsyncFocusBlur"));
 __export(require("./hocs/withPropsContext"));
 __export(require("./hooks/useDir"));
 __export(require("./hooks/useAsyncFocusBlur"));
-__export(require("./hooks/useDraggable"));
 __export(require("./hooks/useRtl"));
 __export(require("./hooks/useMouse"));
 __export(require("./hooks/useCustomComponent"));
 __export(require("./hooks/usePropsContext"));
+__export(require("./hooks/useCollection"));
 __export(require("./icons/Icon"));
 __export(require("./icons/SvgIcon"));
 __export(require("./typography/Typography"));
+__export(require("./drag-n-drop"));
+__export(require("./Draggable"));
+__export(require("./Droppable"));
+__export(require("./hooks/useDraggable"));
+__export(require("./hooks/useDroppable"));

package/dist/npm/models/auto-scroll-options.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+/**
+ * Represents additional configuration options for the `autoScroll` options of the `useDraggable` hook and `Draggable` component.
+ */
+export interface AutoScrollOptions {
+    /**
+     * Set to `false` to disable the `autoScroll` feature.
+     */
+    enabled?: boolean;
+    /**
+     * Allows the user to toggle `autoScroll` in a specific direction.
+     */
+    direction?: {
+        horizontal: boolean;
+        vertical: boolean;
+    };
+    /**
+     * Overrides the calculated element used for boundary detection, used to calculate the `autoScroll` velocity.
+     */
+    boundaryElementRef?: React.RefObject<HTMLElement | null | {
+        element: HTMLElement | null;
+    }> | null;
+}