publ-echo-test 0.0.1

package/dist/lib/Draggable/Draggable.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Bounds, ControlPosition } from "./utils/types";
+import { AxisType, DraggableCoreDefaultProps, DraggablePositionType, PropsWithChildren } from "./types";
+export type DraggableDefaultProps = {
+    axis?: AxisType;
+    bounds?: Bounds | string | false;
+    defaultClassName?: string;
+    defaultClassNameDragging?: string;
+    defaultClassNameDragged?: string;
+    defaultPosition?: ControlPosition;
+    scale?: number;
+    nodeRef?: React.RefObject<HTMLElement>;
+    className?: string;
+    style?: Object;
+} & DraggableCoreDefaultProps & DraggablePositionType;
+declare const Draggable: ({ children, axis, bounds, defaultClassName, defaultClassNameDragging, defaultClassNameDragged, defaultPosition, scale, ...props }: PropsWithChildren<DraggableDefaultProps>) => React.ReactElement;
+export default Draggable;

package/dist/lib/Draggable/Draggable.js

@@ -0,0 +1,192 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import DraggableCore from "./DraggableCore";
+import { canDragX, canDragY, cloneBounds, createDraggableData, } from "./utils/positionHelpers";
+import { int, isNum } from "./utils/validationHelpers";
+import { createCSSTransform, createSVGTransform, innerHeight, innerWidth, outerHeight, outerWidth, } from "./utils/domHelpers";
+import classNames from "../../external-lib/classnames";
+var Draggable = function (_a) {
+    var _b, _c;
+    var children = _a.children, _d = _a.axis, axis = _d === void 0 ? "both" : _d, _e = _a.bounds, bounds = _e === void 0 ? false : _e, _f = _a.defaultClassName, defaultClassName = _f === void 0 ? "react-draggable" : _f, _g = _a.defaultClassNameDragging, defaultClassNameDragging = _g === void 0 ? "react-draggable-dragging" : _g, _h = _a.defaultClassNameDragged, defaultClassNameDragged = _h === void 0 ? "react-draggable-dragged" : _h, _j = _a.defaultPosition, defaultPosition = _j === void 0 ? { x: 0, y: 0 } : _j, _k = _a.scale, scale = _k === void 0 ? 1 : _k, props = __rest(_a, ["children", "axis", "bounds", "defaultClassName", "defaultClassNameDragging", "defaultClassNameDragged", "defaultPosition", "scale"]);
+    var position = props.position, positionOffset = props.positionOffset, draggableCoreProps = __rest(props, ["position", "positionOffset"]);
+    var draggableRef = useRef(null);
+    var _l = useState({
+        dragged: false,
+        dragging: false,
+        x: position ? position === null || position === void 0 ? void 0 : position.x : defaultPosition.x,
+        y: position ? position === null || position === void 0 ? void 0 : position.y : defaultPosition.y,
+        slackX: 0,
+        slackY: 0,
+        isElementSVG: false,
+        prevPropsPosition: position,
+    }), draggableState = _l[0], setDraggableState = _l[1];
+    /**
+     * @when Draggable이 화면에 그려질 때
+     * @expected 해당 DOMNode가 SVGElement인지를 확인
+     * @clear 페이지를 나갔을 때 dragging을 false로 변경하여 drag되지 않도록 설정
+     */
+    useEffect(function () {
+        if (typeof window.SVGElement !== "undefined" &&
+            findDOMNode() instanceof window.SVGElement) {
+            setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { isElementSVG: true })); });
+        }
+        return function () {
+            setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { dragging: false })); });
+        };
+    }, []);
+    var style = {};
+    var svgTransform = null;
+    var findDOMNode = function () {
+        var _a, _b;
+        return (_b = (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : draggableRef === null || draggableRef === void 0 ? void 0 : draggableRef.current;
+    };
+    var getBoundPosition = function (x, y, node) {
+        var _a;
+        if (!bounds)
+            return [x, y];
+        var newBounds = bounds;
+        newBounds = typeof bounds === "string" ? bounds : cloneBounds(bounds);
+        if (typeof newBounds === "string") {
+            var ownerWindow = (_a = node === null || node === void 0 ? void 0 : node.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+            var boundNode = void 0;
+            if (newBounds === "parent") {
+                boundNode = node === null || node === void 0 ? void 0 : node.parentNode;
+            }
+            else {
+                boundNode = node === null || node === void 0 ? void 0 : node.ownerDocument.querySelector(newBounds);
+            }
+            if (!(ownerWindow && boundNode instanceof ownerWindow.HTMLElement)) {
+                throw new Error('Bounds selector "' + newBounds + '" could not find an element');
+            }
+            var boundNodeElement = boundNode;
+            var nodeStyle = ownerWindow.getComputedStyle(node);
+            var boundNodeStyle = ownerWindow.getComputedStyle(boundNodeElement);
+            newBounds = {
+                left: -node.offsetLeft +
+                    int(boundNodeStyle.paddingLeft) +
+                    int(nodeStyle.marginLeft),
+                top: -node.offsetTop +
+                    int(boundNodeStyle.paddingTop) +
+                    int(nodeStyle.marginTop),
+                right: innerWidth(boundNodeElement) -
+                    outerWidth(node) -
+                    node.offsetLeft +
+                    int(boundNodeStyle.paddingRight) -
+                    int(nodeStyle.marginRight),
+                bottom: innerHeight(boundNodeElement) -
+                    outerHeight(node) -
+                    node.offsetTop +
+                    int(boundNodeStyle.paddingBottom) -
+                    int(nodeStyle.marginBottom),
+            };
+        }
+        if (isNum(newBounds.right))
+            x = Math.min(x, newBounds.right);
+        if (isNum(newBounds.bottom))
+            y = Math.min(y, newBounds.bottom);
+        if (isNum(newBounds.left))
+            x = Math.max(x, newBounds.left);
+        if (isNum(newBounds.top))
+            y = Math.max(y, newBounds.top);
+        return [x, y];
+    };
+    var handleDragStart = function (e, coreData) {
+        if (props.onStart) {
+            var shouldStart = props.onStart(e, createDraggableData(draggableState, scale, coreData));
+            if (shouldStart === false)
+                return false;
+        }
+        setDraggableState(function (prev) { return (__assign(__assign({}, prev), { dragged: true, dragging: true })); });
+    };
+    var handleDrag = function (e, coreData, node) {
+        if (!draggableState.dragging)
+            return false;
+        var uiData = createDraggableData(draggableState, scale, coreData);
+        var newState = __assign(__assign({}, draggableState), { x: uiData.x, y: uiData.y });
+        if (bounds) {
+            var x = newState.x, y = newState.y;
+            newState.x += draggableState.slackX;
+            newState.y += draggableState.slackY;
+            var _a = getBoundPosition(newState.x, newState.y, node), newBoundPositionX = _a[0], newBoundPositionY = _a[1];
+            newState.x = newBoundPositionX;
+            newState.y = newBoundPositionY;
+            newState.slackX = draggableState.slackX + (x - newState.x);
+            newState.slackY = draggableState.slackY + (y - newState.y);
+            uiData.x = newState.x;
+            uiData.y = newState.y;
+            uiData.deltaX = newState.x - draggableState.x;
+            uiData.deltaY = newState.y - draggableState.y;
+        }
+        if (props.onDrag) {
+            var shouldUpdate = props.onDrag(e, uiData);
+            if (shouldUpdate === false)
+                return false;
+        }
+        setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { x: newState.x, y: newState.y })); });
+    };
+    var handleDragStop = function (e, coreData) {
+        if (!draggableState.dragging)
+            return false;
+        if (props.onStop) {
+            var shouldContinue = props.onStop(e, createDraggableData(draggableState, scale, coreData));
+            if (shouldContinue === false)
+                return false;
+        }
+        if (position && Boolean(position)) {
+            var x_1 = position.x, y_1 = position.y;
+            setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { x: x_1, y: y_1, dragging: false, slackX: 0, slackY: 0 })); });
+        }
+        else {
+            setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { dragging: false, slackX: 0, slackY: 0 })); });
+        }
+    };
+    var controlled = Boolean(position);
+    var draggable = !controlled || draggableState.dragging;
+    var validPosition = position || defaultPosition;
+    var transformOptions = {
+        x: canDragX(axis) && draggable ? draggableState.x : validPosition.x,
+        y: canDragY(axis) && draggable ? draggableState.y : validPosition.y,
+    };
+    if (draggableState.isElementSVG) {
+        svgTransform = createSVGTransform(transformOptions, positionOffset);
+    }
+    else {
+        style = createCSSTransform(transformOptions, positionOffset);
+    }
+    var className = classNames(props.className || "", defaultClassName, (_b = {}, _b[defaultClassNameDragging] = draggableState.dragging, _b), (_c = {}, _c[defaultClassNameDragged] = draggableState.dragged, _c));
+    // NOTE - class형 컴포넌트에서 사용되는 getDerivedStateFromProps에 대응하기 위한 조건문입니다.
+    if (position &&
+        (!draggableState.prevPropsPosition ||
+            position.x !== draggableState.prevPropsPosition.x ||
+            position.y !== draggableState.prevPropsPosition.y)) {
+        setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { x: position.x, y: position.y, prevPropsPosition: __assign({}, position) })); });
+    }
+    return (_jsx(DraggableCore, __assign({}, draggableCoreProps, { onStart: handleDragStart, onDrag: handleDrag, onStop: handleDragStop, children: React.cloneElement(children, {
+            className: className,
+            style: __assign(__assign({}, props.style), style),
+            transform: svgTransform,
+        }) })));
+};
+export default Draggable;

package/dist/lib/Draggable/DraggableCore.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { DraggableCoreDefaultProps, PropsWithChildren } from "./types";
+type Props = DraggableCoreDefaultProps;
+declare const DraggableCore: ({ allowAnyClick, disabled, enableUserSelectHack, onStart, onDrag, onStop, onMouseDown, scale, children, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default DraggableCore;

package/dist/lib/Draggable/DraggableCore.js

@@ -0,0 +1,266 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useRef, useState } from "react";
+import { addEvent, addUserSelectStyles, getTouch, getTouchIdentifier, matchSelectorAndParentsTo, offsetXYFromParent, removeEvent, removeUserSelectStyles, } from "./utils/domHelpers";
+import { isNum } from "./utils/validationHelpers";
+import { snapToGrid } from "./utils/positionHelpers";
+import { EVENTS } from "./constants";
+var DraggableCore = function (_a) {
+    var _b;
+    var _c = _a.allowAnyClick, allowAnyClick = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.enableUserSelectHack, enableUserSelectHack = _e === void 0 ? true : _e, _f = _a.onStart, onStart = _f === void 0 ? function () { } : _f, _g = _a.onDrag, onDrag = _g === void 0 ? function () { } : _g, _h = _a.onStop, onStop = _h === void 0 ? function () { } : _h, _j = _a.onMouseDown, onMouseDown = _j === void 0 ? function () { } : _j, _k = _a.scale, scale = _k === void 0 ? 1 : _k, children = _a.children, props = __rest(_a, ["allowAnyClick", "disabled", "enableUserSelectHack", "onStart", "onDrag", "onStop", "onMouseDown", "scale", "children"]);
+    var draggableCoreRef = useRef(null);
+    var isMounted = useRef(false);
+    var _l = useState({
+        dragging: false,
+        lastX: NaN,
+        lastY: NaN,
+        touchIdentifier: null,
+    }), draggableCoreState = _l[0], setDraggableCoreState = _l[1];
+    /**
+     * @when DraggableCore가 랜더링 했을 때
+     * @expected 해당 DOMNode에서 Drag가 동작할 수 있도록 event를 추가합니다.
+     * @clear 등록된 모든 EventListener들을 remove합니다.
+     */
+    useEffect(function () {
+        var thisNode = findDOMNode();
+        if (thisNode) {
+            addEvent(thisNode, EVENTS.TOUCH.START, handleTouchStart, {
+                passive: false,
+            });
+            if (draggableCoreState.dragging) {
+                addEvent(thisNode.ownerDocument, dragEventFor.MOVE, handleDrag);
+                addEvent(thisNode.ownerDocument, dragEventFor.STOP, handleDragStop);
+            }
+            else {
+                removeEvent(thisNode.ownerDocument, dragEventFor.MOVE, handleDrag);
+                removeEvent(thisNode.ownerDocument, dragEventFor.STOP, handleDragStop);
+            }
+        }
+        return function () {
+            if (thisNode) {
+                var ownerDocument = thisNode.ownerDocument;
+                removeEvent(ownerDocument, EVENTS.MOUSE.MOVE, handleDrag);
+                removeEvent(ownerDocument, EVENTS.MOUSE.STOP, handleDragStop);
+                removeEvent(ownerDocument, EVENTS.TOUCH.MOVE, handleDrag);
+                removeEvent(ownerDocument, EVENTS.TOUCH.STOP, handleDragStop);
+                removeEvent(thisNode, EVENTS.TOUCH.START, handleTouchStart, {
+                    passive: false,
+                });
+            }
+        };
+    }, [handleDragStart, handleDrag, handleDragStop]);
+    /**
+     * @when DraggableCore가 랜더링 했을 때
+     * @expected mount된 상태를 true로 변경합니다.
+     * @clear mount된 상태를 false로 변경하고, 등록된 styles을 제거합니다.
+     */
+    useEffect(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+            var thisNode = findDOMNode();
+            if (thisNode) {
+                var ownerDocument = thisNode.ownerDocument;
+                if (enableUserSelectHack)
+                    removeUserSelectStyles(ownerDocument);
+            }
+        };
+        // NOTE - react-draggable과 동일하게 동작하게 하기 위해서 dependency를 제거하였습니다.
+    }, []);
+    var dragEventFor = EVENTS.MOUSE;
+    // NOTE - draggable할 node element를 찾는 함수
+    var findDOMNode = function () {
+        var _a, _b;
+        return (_b = (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : draggableCoreRef === null || draggableCoreRef === void 0 ? void 0 : draggableCoreRef.current;
+    };
+    // NOTE - event 발생 시 {x, y} position을 가져오는 함수
+    var getControlPosition = function (e, touchIdentifier) {
+        var _a;
+        var touchObj = typeof touchIdentifier === "number" ? getTouch(e, touchIdentifier) : null;
+        // NOTE - 올바르게 touch를 하지 않은 경우
+        if (typeof touchIdentifier === "number" && !touchObj)
+            return null;
+        var thisNode = findDOMNode();
+        var offsetParent = (props === null || props === void 0 ? void 0 : props.offsetParent) ||
+            (thisNode === null || thisNode === void 0 ? void 0 : thisNode.offsetParent) ||
+            ((_a = thisNode === null || thisNode === void 0 ? void 0 : thisNode.ownerDocument) === null || _a === void 0 ? void 0 : _a.body);
+        if (!offsetParent)
+            return null;
+        return offsetXYFromParent(touchObj || e, offsetParent, scale);
+    };
+    var createCoreData = function (x, y) {
+        var isStart = !isNum(draggableCoreState.lastX);
+        var node = findDOMNode();
+        if (!node)
+            return;
+        if (isStart) {
+            return {
+                node: node,
+                deltaX: 0,
+                deltaY: 0,
+                lastX: x,
+                lastY: y,
+                x: x,
+                y: y,
+            };
+        }
+        else {
+            return {
+                node: node,
+                deltaX: x - draggableCoreState.lastX,
+                deltaY: y - draggableCoreState.lastY,
+                lastX: draggableCoreState.lastX,
+                lastY: draggableCoreState.lastY,
+                x: x,
+                y: y,
+            };
+        }
+    };
+    function handleDragStart(e) {
+        onMouseDown && onMouseDown(e);
+        // NOTE - left clicks만 가능
+        if (!allowAnyClick && typeof e.button === "number" && e.button !== 0) {
+            return false;
+        }
+        var thisNode = findDOMNode();
+        if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
+            throw new Error("<DraggableCore> not mounted on DragStart!");
+        }
+        var ownerDocument = thisNode.ownerDocument;
+        // NOTE - handle || cancel prop이 제공되었을 때 selector와 match되는지를 확인
+        // handle prop이 존재할 때, matchSelectorAndParentsTo 메소드를 통해 thisNode와 일치하는 element만 Drag 가능
+        // cancel prop이 존재할 때,  matchSelectorAndParentsTo 메소드를 통해 thisNode와 일치하는 element는 Drag 불가능
+        if (disabled ||
+            !(ownerDocument.defaultView &&
+                e.target instanceof ownerDocument.defaultView.Node) ||
+            (props.handle &&
+                !matchSelectorAndParentsTo(e.target, props.handle, thisNode)) ||
+            (props.cancel &&
+                matchSelectorAndParentsTo(e.target, props.cancel, thisNode))) {
+            return;
+        }
+        // NOTE - ipad || iphone과 같은 mobile 기기에서 scroll 방지
+        if (e.type === "touchstart")
+            e.preventDefault();
+        // NOTE - touch event가 발생했을 때 multi touch 상황에서 각각의 터치를 구분하고 다른 처리를 할 수 있게 하기 위함입니다.
+        var touchIdentifier = getTouchIdentifier(e);
+        if (touchIdentifier) {
+            setDraggableCoreState(__assign(__assign({}, draggableCoreState), { touchIdentifier: touchIdentifier }));
+        }
+        var position = getControlPosition(e, touchIdentifier);
+        if (!position)
+            return;
+        var x = position.x, y = position.y;
+        var coreEvent = createCoreData(x, y);
+        if (!coreEvent)
+            return;
+        var shouldUpdate = onStart(e, coreEvent);
+        if (shouldUpdate === false || isMounted.current === false)
+            return;
+        if (enableUserSelectHack)
+            addUserSelectStyles(ownerDocument);
+        setDraggableCoreState(function (prev) { return (__assign(__assign({}, prev), { dragging: true, lastX: x, lastY: y })); });
+    }
+    function handleDrag(e) {
+        var _a;
+        var position = getControlPosition(e, draggableCoreState.touchIdentifier);
+        if (!position)
+            return;
+        var x = position.x, y = position.y;
+        if (Array.isArray(props.grid)) {
+            var deltaX = x - draggableCoreState.lastX;
+            var deltaY = y - draggableCoreState.lastY;
+            _a = snapToGrid(props.grid, deltaX, deltaY), deltaX = _a[0], deltaY = _a[1];
+            if (!deltaX && !deltaY)
+                return;
+            x = draggableCoreState.lastX + deltaX;
+            y = draggableCoreState.lastY + deltaY;
+        }
+        var coreEvent = createCoreData(x, y);
+        var thisNode = findDOMNode();
+        if (!coreEvent || !thisNode)
+            return;
+        var shouldUpdate = onDrag(e, coreEvent, thisNode);
+        if (shouldUpdate === false || isMounted.current === false) {
+            handleDragStop(e);
+            return;
+        }
+        setDraggableCoreState(function (prevState) { return (__assign(__assign({}, prevState), { lastX: x, lastY: y })); });
+    }
+    function handleDragStop(e) {
+        var _a;
+        if (!draggableCoreState.dragging)
+            return;
+        var position = getControlPosition(e, draggableCoreState.touchIdentifier);
+        if (!position)
+            return;
+        var x = position.x, y = position.y;
+        if (Array.isArray(props === null || props === void 0 ? void 0 : props.grid)) {
+            var deltaX = x - draggableCoreState.lastX || 0;
+            var deltaY = y - draggableCoreState.lastY || 0;
+            _a = snapToGrid(props === null || props === void 0 ? void 0 : props.grid, deltaX, deltaY), deltaX = _a[0], deltaY = _a[1];
+            x = draggableCoreState.lastX + deltaX;
+            y = draggableCoreState.lastY + deltaY;
+        }
+        var coreEvent = createCoreData(x, y);
+        if (!coreEvent)
+            return;
+        var shouldContinue = onStop(e, coreEvent);
+        if (shouldContinue === false || isMounted.current === false)
+            return false;
+        var thisNode = findDOMNode();
+        if (thisNode) {
+            if (enableUserSelectHack)
+                removeUserSelectStyles(thisNode.ownerDocument);
+        }
+        setDraggableCoreState(function (prev) { return (__assign(__assign({}, prev), { dragging: false, lastX: NaN, lastY: NaN })); });
+        if (thisNode) {
+            removeEvent(thisNode.ownerDocument, dragEventFor.MOVE, handleDrag);
+            removeEvent(thisNode.ownerDocument, dragEventFor.STOP, handleDragStop);
+        }
+    }
+    var handleMouseDown = function (e) {
+        dragEventFor = EVENTS.MOUSE;
+        return handleDragStart(e);
+    };
+    var handleMouseUp = function (e) {
+        dragEventFor = EVENTS.MOUSE;
+        return handleDragStop(e);
+    };
+    // NOTE - handleMouseDown(start drag)과 동일하지만 touch device에 대응
+    var handleTouchStart = function (e) {
+        dragEventFor = EVENTS.TOUCH;
+        return handleDragStart(e);
+    };
+    var handleTouchEnd = function (e) {
+        dragEventFor = EVENTS.TOUCH;
+        return handleDragStop(e);
+    };
+    return React.cloneElement(children, {
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onTouchEnd: handleTouchEnd,
+        ref: (_b = props.nodeRef) !== null && _b !== void 0 ? _b : draggableCoreRef,
+    });
+};
+export default DraggableCore;

package/dist/lib/Draggable/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const EVENTS: {
+    TOUCH: {
+        START: string;
+        MOVE: string;
+        STOP: string;
+    };
+    MOUSE: {
+        START: string;
+        MOVE: string;
+        STOP: string;
+    };
+};

package/dist/lib/Draggable/constants.js

@@ -0,0 +1,12 @@
+export var EVENTS = {
+    TOUCH: {
+        START: "touchstart",
+        MOVE: "touchmove",
+        STOP: "touchend",
+    },
+    MOUSE: {
+        START: "mousedown",
+        MOVE: "mousemove",
+        STOP: "mouseup",
+    },
+};

package/dist/lib/Draggable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Draggable } from "./Draggable";
+export { default as DraggableCore } from "./DraggableCore";

package/dist/lib/Draggable/index.js

@@ -0,0 +1,2 @@
+export { default as Draggable } from "./Draggable";
+export { default as DraggableCore } from "./DraggableCore";

package/dist/lib/Draggable/types.d.ts

@@ -0,0 +1,55 @@
+import { ReactElement, RefObject } from "react";
+import { ControlPosition, DraggableEventHandler, PositionOffsetControlPosition } from "./utils/types";
+export type DraggableCoreState = {
+    dragging: boolean;
+    lastX: number;
+    lastY: number;
+    touchIdentifier?: number | null;
+};
+export type DraggableData = {
+    node: HTMLElement;
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    lastX: number;
+    lastY: number;
+};
+export type DraggableCoreDefaultProps = {
+    allowAnyClick?: boolean;
+    disabled?: boolean;
+    enableUserSelectHack?: boolean;
+    onStart?: DraggableEventHandler | Function;
+    onDrag?: DraggableEventHandler | Function;
+    onStop?: DraggableEventHandler | Function;
+    onMouseDown?: (e: MouseEvent) => void;
+    scale?: number;
+    cancel?: string;
+    children: ReactElement<any>;
+    offsetParent?: HTMLElement;
+    grid?: [number, number];
+    handle?: string;
+    nodeRef?: RefObject<HTMLElement>;
+    className?: string;
+    style?: Object;
+};
+export type DraggableState = {
+    dragging: boolean;
+    dragged: boolean;
+    x: number;
+    y: number;
+    slackX: number;
+    slackY: number;
+    isElementSVG: boolean;
+    prevPropsPosition?: ControlPosition;
+};
+export type DraggablePositionType = {
+    positionOffset?: PositionOffsetControlPosition;
+    position?: ControlPosition;
+};
+export type DraggableProps = DraggablePositionType & DraggableCoreDefaultProps;
+export type PropsWithChildren<P> = P & {
+    children: ReactElement<any>;
+};
+export type AxisType = "both" | "x" | "y" | "none";
+export type DraggableEvent = React.MouseEvent<HTMLElement | SVGElement> | React.TouchEvent<HTMLElement | SVGElement> | MouseEvent | TouchEvent;

package/dist/lib/Draggable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/Draggable/utils/domHelpers.d.ts

@@ -0,0 +1,22 @@
+import type { ControlPosition, PositionOffsetControlPosition, MouseTouchEvent, EventWithOffset, EventHandler } from "./types";
+export declare const matchSelector: (el: Node, selector: string) => boolean;
+export declare const matchSelectorAndParentsTo: (el: Node, selector: string, baseNode: Node) => boolean;
+export declare const addEvent: (el: Node, eventType: string, handler: EventHandler<any>, inputOptions?: Object) => void;
+export declare const removeEvent: (el: Node, eventType: string, handler: EventHandler<any>, inputOptions?: Object) => void;
+export declare const outerHeight: (node: HTMLElement) => number;
+export declare const outerWidth: (node: HTMLElement) => number;
+export declare const innerHeight: (node: HTMLElement) => number;
+export declare const innerWidth: (node: HTMLElement) => number;
+export declare const offsetXYFromParent: (evt: EventWithOffset, offsetParent: Element, scale: number) => ControlPosition;
+export declare const createCSSTransform: (controlPos: ControlPosition, positionOffset?: PositionOffsetControlPosition) => Object;
+export declare const createSVGTransform: (controlPos: ControlPosition, positionOffset?: PositionOffsetControlPosition) => string;
+export declare const getTranslation: ({ x, y }: ControlPosition, unitSuffix: string, positionOffset?: PositionOffsetControlPosition) => string;
+export declare const getTouch: (e: MouseTouchEvent, identifier: number) => {
+    clientX: number;
+    clientY: number;
+};
+export declare const getTouchIdentifier: (e: MouseTouchEvent) => number | undefined;
+export declare const addUserSelectStyles: (doc?: Document) => void;
+export declare const removeUserSelectStyles: (doc?: Document) => void;
+export declare const addClassName: (el: HTMLElement, className: string) => void;
+export declare const removeClassName: (el: HTMLElement, className: string) => void;