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

package/dist/es/hooks/useDroppable.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { noop } from '../noop';
+import { useInheritedState } from '../hooks/useInheritedState';
+import { DropContext, DropsContext } from '../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.
+ */
+export function useDroppable(ref, callbacks) {
+    if (callbacks === void 0) { callbacks = {
+        onDragEnter: noop,
+        onDragOver: noop,
+        onDragLeave: noop,
+        onDrop: noop
+    }; }
+    var _a = callbacks.onDragEnter, onDragEnter = _a === void 0 ? noop : _a, _b = callbacks.onDragOver, onDragOver = _b === void 0 ? noop : _b, _c = callbacks.onDragLeave, onDragLeave = _c === void 0 ? noop : _c, _d = callbacks.onDrop, onDrop = _d === void 0 ? noop : _d;
+    var _e = useInheritedState(DropContext), setDrop = _e[1];
+    var _f = React.useContext(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]);
+}
+;

package/dist/es/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/es/hooks/useInheritedState.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export var 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/es/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/es/hooks/usePointer.js

@@ -0,0 +1,29 @@
+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 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/es/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/es/hooks/useTouch.js

@@ -0,0 +1,29 @@
+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 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/es/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/es/main.js

@@ -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';
@@ -21,11 +20,16 @@ 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 './icons/Icon';
 export * from './icons/SvgIcon';
 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/es/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;
+}

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

@@ -1 +1,4 @@
 export * from './mouse';
+export * from './touch';
+export * from './pointer';
+export * from './auto-scroll-options';

package/dist/es/models/kendo-component.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @hidden
+ */
+export interface KendoComponent {
+    element: HTMLElement;
+}

package/dist/es/models/pointer.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface KendoPointer<T, E extends HTMLElement> {
+    onPointerDown?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerMove?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerUp?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerCancel?: (args: KendoPointerEvent<T, E>) => void;
+    onGotPointerCapture?: (args: KendoPointerEvent<T, E>) => void;
+    onLostPointerCapture?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerEnter?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerOver?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerLeave?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerOut?: (args: KendoPointerEvent<T, E>) => void;
+}
+/**
+ * @hidden
+ */
+export interface KendoPointerEvent<T, E extends HTMLElement = HTMLElement> {
+    syntheticEvent: React.PointerEvent<E>;
+    target: T;
+}

package/dist/es/models/touch.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface KendoTouch<T, E extends HTMLElement> {
+    onTouchStart?: (args: KendoTouchEvent<T, E>) => void;
+    onTouchMove?: (args: KendoTouchEvent<T, E>) => void;
+    onTouchEnd?: (args: KendoTouchEvent<T, E>) => void;
+    onTouchCancel?: (args: KendoTouchEvent<T, E>) => void;
+}
+/**
+ * @hidden
+ */
+export interface KendoTouchEvent<T, E extends HTMLElement = HTMLElement> {
+    syntheticEvent: React.TouchEvent<E>;
+    target: T;
+}

package/dist/npm/Draggable.d.ts

@@ -1,78 +1,86 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-/**
- * @hidden
- */
-export interface BaseDraggableEvent<T extends React.Component> {
+import { DraggableOptions, DraggableHandle } from './hooks';
+import { NormalizedDragEvent } from '@progress/kendo-draggable-common';
+/** @hidden */
+interface BaseDraggableEvent {
     /**
-     * The target Draggable component.
+     * The DOM element.
      */
-    target: T;
+    element: HTMLElement;
     /**
-     * The original event.
+     * The target Draggable reference.
      */
-    event: any;
+    target: DraggableHandle;
+    /**
+     * The normalized drag event.
+     */
+    event: NormalizedDragEvent;
 }
 /**
- * Represents the object of the `onPress` Draggable event.
+ * Represents the object of the `onPress` callback.
  */
-export interface DraggablePressEvent extends BaseDraggableEvent<Draggable> {
-    /**
-     * The element which is pressed.
-     */
-    element: HTMLElement;
+export interface DraggablePressEvent extends BaseDraggableEvent {
 }
 /**
- * Represents the object of the `onDrag` Draggable event.
+ * Represents the object of the `onDragStart` callback.
  */
-export interface DraggableDragEvent extends BaseDraggableEvent<Draggable> {
-    /**
-     * The element which is pressed.
-     */
-    element: HTMLElement;
+export interface DraggableDragStartEvent extends BaseDraggableEvent {
+}
+/**
+ * Represents the object of the `onDrag` callback.
+ */
+export interface DraggableDragEvent extends BaseDraggableEvent {
+}
+/**
+ * Represents the object of the `onDragEnd` callback.
+ */
+export interface DraggableDragEndEvent extends BaseDraggableEvent {
 }
 /**
- * Represents the object of the `onRelease` Draggable event.
+ * Represents the object of the `onRelease` callback.
  */
-export interface DraggableReleaseEvent extends BaseDraggableEvent<Draggable> {
+export interface DraggableReleaseEvent extends BaseDraggableEvent {
 }
 /**
  * Represents the props of the KendoReact Draggable component.
  */
-export interface DraggableProps {
+export interface DraggableProps extends DraggableOptions {
     /**
      * Fires when the user press element inside the Draggable component.
      */
     onPress?: (event: DraggablePressEvent) => void;
+    /**
+     * Fires when the user starts dragging the element inside the Draggable component.
+     */
+    onDragStart?: (event: DraggableDragStartEvent) => void;
     /**
      * Fires when the user drag the element inside the Draggable component.
      */
     onDrag?: (event: DraggableDragEvent) => void;
+    /**
+     * Fires when the user finishes dragging the element inside the Draggable component.
+     */
+    onDragEnd?: (event: DraggableDragEndEvent) => void;
     /**
      * Fires when the user release the current drag action.
      */
     onRelease?: (event: DraggableReleaseEvent) => void;
     /**
-     * Callback to get the child element ref. Useful as the Draggable overrides ref of  the child element.
+     * Callback to get the child element ref. Useful as the Draggable overrides ref of the child element.
      */
-    childRef?: (childElement: HTMLElement) => void;
+    childRef?: React.Ref<HTMLElement | null | {
+        element: HTMLElement | null;
+        [key: string]: any;
+    }>;
+    /** @hidden */
+    children?: React.ReactNode;
 }
 /**
  * Represents the KendoReact Draggable component.
+ *
+ * Accepts properties of type [DraggableProps]({% slug api_common_draggableprops %}),
+ * and returns an object of type [DraggableHandle]({% slug api_common_draggablehandle %}) when the `ref` is obtained.
  */
-export declare class Draggable extends React.Component<DraggableProps, {}> {
-    static propTypes: {
-        children: PropTypes.Validator<PropTypes.ReactElementLike>;
-    };
-    /**
-     * @hidden
-     */
-    element: HTMLElement | null;
-    private draggable;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    childRef: (element: any) => void;
-    render(): React.FunctionComponentElement<{
-        ref: (element: any) => void;
-    }>;
-}
+export declare const Draggable: React.ForwardRefExoticComponent<DraggableProps & React.RefAttributes<DraggableHandle>>;
+export declare type Draggable = DraggableHandle;
+export {};

package/dist/npm/Draggable.js

@@ -1,83 +1,86 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_draggable_1 = require("@telerik/kendo-draggable");
+var hooks_1 = require("./hooks");
 /**
  * Represents the KendoReact Draggable component.
+ *
+ * Accepts properties of type [DraggableProps]({% slug api_common_draggableprops %}),
+ * and returns an object of type [DraggableHandle]({% slug api_common_draggablehandle %}) when the `ref` is obtained.
  */
-var Draggable = /** @class */ (function (_super) {
-    __extends(Draggable, _super);
-    function Draggable() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        /**
-         * @hidden
-         */
-        _this.element = null;
-        _this.draggable = new kendo_draggable_1.default({
-            press: function (event) {
-                if (_this.element && _this.props.onPress) {
-                    _this.props.onPress.call(undefined, {
-                        target: _this,
-                        event: event,
-                        element: _this.element
-                    });
-                }
-            },
-            drag: function (event) {
-                if (_this.element && _this.props.onDrag) {
-                    _this.props.onDrag.call(undefined, {
-                        target: _this,
-                        event: event,
-                        element: _this.element
-                    });
-                }
-            },
-            release: function (event) {
-                if (_this.element && _this.props.onRelease) {
-                    _this.props.onRelease.call(undefined, {
-                        target: _this,
-                        event: event
-                    });
-                }
-            }
+exports.Draggable = React.forwardRef(function (props, ref) {
+    var childRef = React.useRef(null);
+    var target = React.useRef(null);
+    var getElement = React.useCallback(function () { return childRef.current && childRef.current.element
+        ? childRef.current.element
+        : childRef.current; }, [childRef]);
+    React.useImperativeHandle(target, function () { return ({ element: getElement() || null }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    React.useImperativeHandle(props.childRef, function () { return childRef.current; });
+    var handlePress = React.useCallback(function (event) {
+        if (!props.onPress) {
+            return;
+        }
+        props.onPress({
+            element: getElement(),
+            target: target.current,
+            event: event
+        });
+    }, [getElement, props.onPress]);
+    var handleRelease = React.useCallback(function (event) {
+        if (!props.onRelease) {
+            return;
+        }
+        props.onRelease({
+            element: getElement(),
+            target: target.current,
+            event: event
+        });
+    }, [getElement, props.onRelease]);
+    var handleDragStart = React.useCallback(function (event) {
+        if (!props.onDragStart) {
+            return;
+        }
+        props.onDragStart({
+            element: getElement(),
+            target: target.current,
+            event: event
+        });
+    }, [props, getElement]);
+    var handleDrag = React.useCallback(function (event) {
+        if (!props.onDrag) {
+            return;
+        }
+        props.onDrag({
+            element: getElement(),
+            target: target.current,
+            event: event
         });
-        _this.childRef = function (element) {
-            var childRef = _this.props.childRef;
-            _this.element = element;
-            if (childRef && typeof childRef === 'function') {
-                childRef(element);
-            }
-        };
-        return _this;
-    }
-    Draggable.prototype.componentDidMount = function () {
-        if (this.element) {
-            this.draggable.bindTo(this.element);
+    }, [getElement, props.onDrag]);
+    var handleDragEnd = React.useCallback(function (event) {
+        if (!props.onDragEnd) {
+            return;
         }
-    };
-    Draggable.prototype.componentWillUnmount = function () {
-        this.draggable.destroy();
-    };
-    Draggable.prototype.render = function () {
-        return (React.cloneElement(React.Children.only(this.props.children), { ref: this.childRef }));
-    };
-    Draggable.propTypes = {
-        children: PropTypes.element.isRequired
-    };
-    return Draggable;
-}(React.Component));
-exports.Draggable = Draggable;
+        props.onDragEnd({
+            element: getElement(),
+            target: target.current,
+            event: event
+        });
+    }, [getElement, props.onDragEnd]);
+    hooks_1.useDraggable(childRef, {
+        onPress: handlePress,
+        onRelease: handleRelease,
+        onDragStart: handleDragStart,
+        onDrag: handleDrag,
+        onDragEnd: handleDragEnd
+    }, {
+        mouseOnly: props.mouseOnly,
+        autoScroll: props.autoScroll,
+        hint: props.hint,
+        scrollContainer: props.scrollContainer
+    });
+    return props.children
+        ? (React.cloneElement(React.Children.only(props.children), { ref: childRef }))
+        : null;
+});
+exports.Draggable.displayName = 'KendoReactDraggable';