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

package/dist/npm/Droppable.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { DroppableHandle } from './hooks';
+import { NormalizedDragEvent } from '@progress/kendo-draggable-common';
+/** @hidden */
+interface BaseDroppableEvent {
+    /**
+     * The DOM element.
+     */
+    element: HTMLElement;
+    /**
+     * The target Draggable reference.
+     */
+    target: DroppableHandle;
+    /**
+     * The normalized drag event.
+     */
+    event: NormalizedDragEvent;
+}
+/**
+ * Represents the object of the `onDragEnter` callback.
+ */
+export interface DroppableDragEnterEvent extends BaseDroppableEvent {
+}
+/**
+ * Represents the object of the `onDragOver` callback.
+ */
+export interface DroppableDragOverEvent extends BaseDroppableEvent {
+}
+/**
+ * Represents the object of the `onDragLeave` callback.
+ */
+export interface DroppableDragLeaveEvent extends BaseDroppableEvent {
+}
+/**
+ * Represents the object of the `onDrop` callback.
+ */
+export interface DroppableDropEvent extends BaseDroppableEvent {
+}
+/**
+ * Represents the props of the KendoReact Droppable component.
+ */
+export interface DroppableProps {
+    /**
+     * Fires when the user enters the element during drag.
+     */
+    onDragEnter?: (event: DroppableDragEnterEvent) => void;
+    /**
+     * Fires when the user is dragging an element over the Droppable component.
+     */
+    onDragOver?: (event: DroppableDragOverEvent) => void;
+    /**
+     * Fires when the user leaves the element during drag.
+     */
+    onDragLeave?: (event: DroppableDragLeaveEvent) => void;
+    /**
+     * Fires when the user drops a draggable element inside the Droppable component.
+     */
+    onDrop?: (event: DroppableDropEvent) => void;
+    /**
+     * Callback to get the child element ref. Useful as the Droppable overrides ref of the child element.
+     */
+    childRef?: React.Ref<HTMLElement | null | {
+        element: HTMLElement | null;
+        [key: string]: any;
+    }>;
+    /** @hidden */
+    children?: React.ReactNode;
+}
+/**
+ * Represents the KendoReact Droppable component.
+ *
+ * Accepts properties of type [DroppableProps]({% slug api_common_droppableprops %}),
+ * and returns an object of type [DroppableHandle]({% slug api_common_droppablehandle %}) when the `ref` is obtained.
+ */
+export declare const Droppable: React.ForwardRefExoticComponent<DroppableProps & React.RefAttributes<DroppableHandle>>;
+export declare type Droppable = DroppableHandle;
+export {};

package/dist/npm/Droppable.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var hooks_1 = require("./hooks");
+/**
+ * Represents the KendoReact Droppable component.
+ *
+ * Accepts properties of type [DroppableProps]({% slug api_common_droppableprops %}),
+ * and returns an object of type [DroppableHandle]({% slug api_common_droppablehandle %}) when the `ref` is obtained.
+ */
+exports.Droppable = 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() || undefined }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    React.useImperativeHandle(props.childRef, function () { return childRef.current; });
+    var handleDragEnter = React.useCallback(function (event) {
+        if (!props.onDragEnter) {
+            return;
+        }
+        props.onDragEnter({
+            element: getElement(),
+            target: target.current,
+            event: event
+        });
+    }, [props.onDragEnter, getElement]);
+    var handleDragOver = React.useCallback(function (event) {
+        if (!props.onDragOver) {
+            return;
+        }
+        props.onDragOver({
+            element: getElement(),
+            target: target.current,
+            event: event
+        });
+    }, [getElement, props.onDragOver]);
+    var handleDragLeave = React.useCallback(function (event) {
+        if (!props.onDragLeave) {
+            return;
+        }
+        props.onDragLeave({
+            element: getElement(),
+            target: target.current,
+            event: event
+        });
+    }, [props.onDragLeave, getElement]);
+    var handleDrop = React.useCallback(function (event) {
+        if (!props.onDrop) {
+            return;
+        }
+        props.onDrop({
+            element: getElement(),
+            target: target.current,
+            event: event
+        });
+    }, [props.onDrop, getElement]);
+    hooks_1.useDroppable(childRef, {
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop
+    });
+    return props.children
+        ? (React.cloneElement(React.Children.only(props.children), { ref: childRef }))
+        : null;
+});
+exports.Droppable.displayName = 'KendoReactDroppable';

package/dist/npm/drag-n-drop/context/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DragTarget, DropTarget } from '@progress/kendo-draggable-common';
+/**
+ * @hidden
+ */
+export declare const DragContext: React.Context<[React.RefObject<DragTarget>, (value: React.RefObject<DragTarget>, args?: any) => void]>;
+/**
+ * @hidden
+ */
+export declare const DropContext: React.Context<[React.RefObject<DropTarget>, (value: React.RefObject<DropTarget>, args?: any) => void]>;
+/**
+ * @hidden
+ */
+export declare const DragsContext: React.Context<[React.RefObject<DragTarget>[], Function, Function]>;
+/**
+ * @hidden
+ */
+export declare const DropsContext: React.Context<[React.RefObject<DropTarget>[], Function, Function]>;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var noop_1 = require("../../noop");
+/**
+ * @hidden
+ */
+exports.DragContext = React.createContext([
+    undefined,
+    noop_1.noop
+]);
+/**
+ * @hidden
+ */
+exports.DropContext = React.createContext([
+    undefined,
+    noop_1.noop
+]);
+/**
+ * @hidden
+ */
+exports.DragsContext = React.createContext([[], noop_1.noop, noop_1.noop]);
+/**
+ * @hidden
+ */
+exports.DropsContext = React.createContext([[], noop_1.noop, noop_1.noop]);

package/dist/npm/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/npm/drag-n-drop/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var hooks_1 = require("../hooks");
+var context_1 = require("./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 %}).
+ */
+exports.DragAndDrop = function (props) {
+    var _a = hooks_1.useControlledState(null, undefined), drag = _a[0], setDrag = _a[1];
+    var _b = hooks_1.useControlledState(null, undefined), drop = _b[0], setDrop = _b[1];
+    var _c = hooks_1.useCollection([]), drags = _c[0], dispatchDrags = _c[1];
+    var _d = hooks_1.useCollection([]), drops = _d[0], dispatchDrops = _d[1];
+    var registerDrag = function (item) {
+        dispatchDrags({
+            type: hooks_1.COLLECTION_ACTION.add,
+            item: item
+        });
+    };
+    var deregisterDrag = function (item) {
+        dispatchDrags({
+            type: hooks_1.COLLECTION_ACTION.remove,
+            item: item
+        });
+    };
+    var registerDrop = function (item) {
+        dispatchDrops({
+            type: hooks_1.COLLECTION_ACTION.add,
+            item: item
+        });
+    };
+    var deregisterDrop = function (item) {
+        dispatchDrops({
+            type: hooks_1.COLLECTION_ACTION.remove,
+            item: item
+        });
+    };
+    return (React.createElement(context_1.DragContext.Provider, { value: [drag, setDrag] },
+        React.createElement(context_1.DropContext.Provider, { value: [drop, setDrop] },
+            React.createElement(context_1.DragsContext.Provider, { value: [drags, registerDrag, deregisterDrag] },
+                React.createElement(context_1.DropsContext.Provider, { value: [drops, registerDrop, deregisterDrop] }, props.children)))));
+};
+exports.DragAndDrop.displayName = 'KendoReactDragAndDrop';

package/dist/npm/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/npm/hooks/index.js

@@ -7,5 +7,9 @@ __export(require("./useMouse"));
 __export(require("./useAsyncFocusBlur"));
 __export(require("./useDir"));
 __export(require("./useDraggable"));
+__export(require("./useDroppable"));
 __export(require("./useRtl"));
 __export(require("./useCustomComponent"));
+__export(require("./useControlledState"));
+__export(require("./useInheritedState"));
+__export(require("./useCollection"));

package/dist/npm/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/npm/hooks/useCollection.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+/** @hidden */
+var COLLECTION_ACTION;
+(function (COLLECTION_ACTION) {
+    COLLECTION_ACTION[COLLECTION_ACTION["add"] = 0] = "add";
+    COLLECTION_ACTION[COLLECTION_ACTION["remove"] = 1] = "remove";
+})(COLLECTION_ACTION = exports.COLLECTION_ACTION || (exports.COLLECTION_ACTION = {}));
+/** @hidden */
+exports.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/npm/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/npm/hooks/useControlledState.js

@@ -0,0 +1,25 @@
+"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.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/npm/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;