@progress/kendo-react-common 4.12.0 → 4.13.0-dev.202111290654

package/dist/es/drag-n-drop/context/index.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { noop } from '../../noop';
+/**
+ * @hidden
+ */
+export var DragContext = React.createContext([
+    undefined,
+    noop
+]);
+/**
+ * @hidden
+ */
+export var DropContext = React.createContext([
+    undefined,
+    noop
+]);
+/**
+ * @hidden
+ */
+export var DragsContext = React.createContext([[], noop, noop]);
+/**
+ * @hidden
+ */
+export var DropsContext = React.createContext([[], noop, noop]);

package/dist/es/drag-n-drop/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export { NormalizedDragEvent } from '@progress/kendo-draggable-common';
+/**
+ * Represents the properties of the `DragAndDrop` component.
+ */
+export interface DragAndDropProps {
+    /**
+     * Represents the `children` of the `DragAndDrop` component. The `children` prop can be any valid React Element.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The `DragAndDrop` component is required for the `droppable` functionality to work properly.
+ *
+ * It is used internally to synchronize the `drag` and `drop` functionalities.
+ * Accepts properties of type [DragAndDropProps]({% slug api_common_draganddropprops %}).
+ */
+export declare const DragAndDrop: {
+    (props: DragAndDropProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/drag-n-drop/index.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useCollection, COLLECTION_ACTION, useControlledState } from '../hooks';
+import { DragContext, DropContext, DragsContext, DropsContext } from './context';
+/**
+ * The `DragAndDrop` component is required for the `droppable` functionality to work properly.
+ *
+ * It is used internally to synchronize the `drag` and `drop` functionalities.
+ * Accepts properties of type [DragAndDropProps]({% slug api_common_draganddropprops %}).
+ */
+export var DragAndDrop = function (props) {
+    var _a = useControlledState(null, undefined), drag = _a[0], setDrag = _a[1];
+    var _b = useControlledState(null, undefined), drop = _b[0], setDrop = _b[1];
+    var _c = useCollection([]), drags = _c[0], dispatchDrags = _c[1];
+    var _d = useCollection([]), drops = _d[0], dispatchDrops = _d[1];
+    var registerDrag = function (item) {
+        dispatchDrags({
+            type: COLLECTION_ACTION.add,
+            item: item
+        });
+    };
+    var deregisterDrag = function (item) {
+        dispatchDrags({
+            type: COLLECTION_ACTION.remove,
+            item: item
+        });
+    };
+    var registerDrop = function (item) {
+        dispatchDrops({
+            type: COLLECTION_ACTION.add,
+            item: item
+        });
+    };
+    var deregisterDrop = function (item) {
+        dispatchDrops({
+            type: COLLECTION_ACTION.remove,
+            item: item
+        });
+    };
+    return (React.createElement(DragContext.Provider, { value: [drag, setDrag] },
+        React.createElement(DropContext.Provider, { value: [drop, setDrop] },
+            React.createElement(DragsContext.Provider, { value: [drags, registerDrag, deregisterDrag] },
+                React.createElement(DropsContext.Provider, { value: [drops, registerDrop, deregisterDrop] }, props.children)))));
+};
+DragAndDrop.displayName = 'KendoReactDragAndDrop';

package/dist/es/hooks/index.d.ts

@@ -2,5 +2,9 @@ export * from './useMouse';
 export * from './useAsyncFocusBlur';
 export * from './useDir';
 export * from './useDraggable';
+export * from './useDroppable';
 export * from './useRtl';
 export * from './useCustomComponent';
+export * from './useControlledState';
+export * from './useInheritedState';
+export * from './useCollection';

package/dist/es/hooks/index.js

@@ -2,5 +2,9 @@ export * from './useMouse';
 export * from './useAsyncFocusBlur';
 export * from './useDir';
 export * from './useDraggable';
+export * from './useDroppable';
 export * from './useRtl';
 export * from './useCustomComponent';
+export * from './useControlledState';
+export * from './useInheritedState';
+export * from './useCollection';

package/dist/es/hooks/useCollection.d.ts

@@ -0,0 +1,14 @@
+/** @hidden */
+export declare enum COLLECTION_ACTION {
+    add = 0,
+    remove = 1
+}
+/** @hidden */
+export declare type Collection<T> = T[];
+/** @hidden */
+export interface CollectionAction<T> {
+    type: COLLECTION_ACTION;
+    item: T;
+}
+/** @hidden */
+export declare const useCollection: <T extends any>(initial?: T[]) => [T[], (event: CollectionAction<T>) => void];

package/dist/es/hooks/useCollection.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/** @hidden */
+export var COLLECTION_ACTION;
+(function (COLLECTION_ACTION) {
+    COLLECTION_ACTION[COLLECTION_ACTION["add"] = 0] = "add";
+    COLLECTION_ACTION[COLLECTION_ACTION["remove"] = 1] = "remove";
+})(COLLECTION_ACTION || (COLLECTION_ACTION = {}));
+/** @hidden */
+export var useCollection = function (initial) {
+    if (initial === void 0) { initial = []; }
+    var collection = React.useRef(initial);
+    var handleCollectionAction = React.useCallback(function (action) {
+        switch (action.type) {
+            case COLLECTION_ACTION.add:
+                collection.current.push(action.item);
+                break;
+            case COLLECTION_ACTION.remove:
+                var index = collection.current.indexOf(action.item);
+                collection.current.splice(index, 1);
+                break;
+            default:
+                break;
+        }
+    }, []);
+    return [collection.current, handleCollectionAction];
+};

package/dist/es/hooks/useControlledState.d.ts

@@ -0,0 +1,4 @@
+/** @hidden */
+export declare type ControlledStateHook<T, A = any> = [T, (value: T, args?: A) => void];
+/** @hidden */
+export declare const useControlledState: <T = any, A = any>(defaultProp: T, prop?: T, callback?: any) => [T, (value: T, args?: any) => void];

package/dist/es/hooks/useControlledState.js

@@ -0,0 +1,23 @@
+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);
+};
+import * as React from 'react';
+/** @hidden */
+export var useControlledState = function (defaultProp, prop, callback) {
+    var _a = React.useState(prop || defaultProp), state = _a[0], setState = _a[1];
+    var handleSetEdit = React.useCallback(function (value, args) {
+        setState(value);
+        if (callback) {
+            callback.call(undefined, __assign({}, args, { value: value }));
+        }
+    }, [callback, setState]);
+    return [prop !== undefined ? prop : state, handleSetEdit];
+};

package/dist/es/hooks/useDraggable.d.ts

@@ -1,7 +1,63 @@
 import * as React from 'react';
-/** @hidden */
-export declare function useDraggable(ref: React.RefObject<HTMLDivElement | HTMLSpanElement | null>, { onPress, onDrag, onRelease }: {
-    onPress?: Function;
-    onDrag?: Function;
-    onRelease?: Function;
-}): void;
+import { NormalizedDragEvent } from '@progress/kendo-draggable-common';
+import { AutoScrollOptions } from '../models';
+/**
+ * Represents the `ref` object of the `Draggable` component.
+ */
+export interface DraggableHandle {
+    /**
+     * The element which is being dragged.
+     */
+    element: HTMLElement | null;
+}
+/**
+ * Represents the configuration object type of the `Draggable` component and `useDraggable` hook.
+ */
+export interface DraggableOptions {
+    /**
+     * Set the `hint` to override the element used for collision detection.
+     *
+     * For more information, refer to the [Drag Hint]({% slug drag-hint_drag-and-drop %}) article.
+     */
+    hint?: React.RefObject<HTMLElement | null | {
+        element: HTMLElement | null;
+    }> | null;
+    /**
+     * Set the `mouseOnly` property to `true` to stop the draggable from attaching `touch` event handlers.
+     *
+     * Defaults to `false`.
+     */
+    mouseOnly?: boolean;
+    /**
+     * Set the `autoScroll` property to `false` to disable automatic container scroll when close to the edge.
+     * For more information, refer to the [Auto Scroll]({% slug auto-scroll_drag-and-drop %}) article.
+     *
+     * Defaults to `true`.
+     */
+    autoScroll?: boolean | AutoScrollOptions;
+    /**
+     * @hidden
+     */
+    scrollContainer?: React.RefObject<HTMLElement | null | {
+        element: HTMLElement | null;
+    }>;
+}
+/**
+ * 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.
+ */
+export declare function useDraggable(ref: React.RefObject<HTMLElement | null | {
+    element: HTMLElement | null;
+}>, callbacks: {
+    onPress?: (event: NormalizedDragEvent) => void;
+    onRelease?: (event: NormalizedDragEvent) => void;
+    onDragStart?: (event: NormalizedDragEvent) => void;
+    onDrag?: (event: NormalizedDragEvent) => void;
+    onDragEnd?: (event: NormalizedDragEvent) => void;
+}, options?: DraggableOptions): void;

package/dist/es/hooks/useDraggable.js

@@ -1,28 +1,333 @@
 import * as React from 'react';
-import Draggable from '@telerik/kendo-draggable';
-/** @hidden */
-export function useDraggable(ref, _a) {
-    var onPress = _a.onPress, onDrag = _a.onDrag, onRelease = _a.onRelease;
-    var draggable = React.useMemo(function () { return new Draggable({
-        press: onPress,
-        drag: onDrag,
-        release: onRelease
-    }); }, []);
-    var initDraggable = function () {
-        var element = ref.current;
-        if (!element) {
+import { dispatchDragAndDrop, autoScroll as autoScrollElement, getScrollableParent } from '@progress/kendo-draggable-common';
+import { noop } from '../noop';
+import { useInheritedState } from '../hooks/useInheritedState';
+import { DragContext, DropContext, DragsContext, DropsContext } from '../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.
+ */
+export function useDraggable(ref, callbacks, options) {
+    if (options === void 0) { options = {}; }
+    var _a = callbacks.onPress, onPress = _a === void 0 ? noop : _a, _b = callbacks.onRelease, onRelease = _b === void 0 ? noop : _b, _c = callbacks.onDragStart, onDragStart = _c === void 0 ? noop : _c, _d = callbacks.onDrag, onDrag = _d === void 0 ? noop : _d, _e = callbacks.onDragEnd, onDragEnd = _e === void 0 ? 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(DropContext)[0];
+    var _m = useInheritedState(DragContext), drag = _m[0], setDrag = _m[1];
+    var drops = React.useContext(DropsContext)[0];
+    var _o = React.useContext(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) {
+        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 = 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, { 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 = 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);
+            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()
+                || getScrollableParent(document.elementFromPoint(clientOffset.current.x, clientOffset.current.y));
+            window.clearInterval(scrollInterval.current);
+            scrollInterval.current = window.setInterval(function () {
+                autoScrollElement(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]);
 }

package/dist/es/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;