publ-echo 0.0.5 → 0.0.7

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;

package/dist/lib/Draggable/utils/domHelpers.js

@@ -0,0 +1,222 @@
+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);
+};
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import browserPrefix, { browserPrefixToKey } from "./getPrefix";
+import { findInArray, int, isFunction } from "./validationHelpers";
+export var matchSelector = function (el, selector) {
+    var matchedSelector = "";
+    var selectors = [
+        "matches",
+        "webkitMatchesSelector",
+        // "mozMatchesSelector",
+        // "msMatchesSelector",
+        // "oMatchesSelector",
+    ];
+    var callback = function (method) {
+        return isFunction(el[method]);
+    };
+    if (!matchedSelector) {
+        matchedSelector = findInArray(selectors, callback);
+        if (matchedSelector === "matches" ||
+            matchedSelector === "webkitMatchesSelector") {
+            return el[matchedSelector](selector);
+        }
+    }
+    return false;
+};
+export var matchSelectorAndParentsTo = function (el, selector, baseNode) {
+    var node = el;
+    do {
+        if (matchSelector(node, selector))
+            return true;
+        if (node === baseNode)
+            return false;
+        if (node.parentNode)
+            node = node.parentNode;
+    } while (node);
+    return false;
+};
+export var addEvent = function (el, eventType, handler, inputOptions) {
+    if (!el)
+        return;
+    var options = __assign({ capture: true }, inputOptions);
+    if (el.addEventListener) {
+        el.addEventListener(eventType, handler, options);
+    }
+    // if (el.addEventListener) {
+    //   el.addEventListener(eventType, handler, options);
+    // } else {
+    //   (el as { [key: string]: any })['on' + eventType] = handler;
+    // }
+};
+export var removeEvent = function (el, eventType, handler, inputOptions) {
+    if (!el)
+        return;
+    var options = __assign({ capture: true }, inputOptions);
+    if (el.removeEventListener) {
+        el.removeEventListener(eventType, handler, options);
+    }
+    // if (el.removeEventListener) {
+    //   el.removeEventListener(eventType, handler, options);
+    // } else {
+    //   (el as { [key: string]: any })['on' + eventType] = null;
+    // }
+};
+export var outerHeight = function (node) {
+    var _a;
+    var height = node.clientHeight;
+    var computedStyle = (_a = node.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(node);
+    if (computedStyle) {
+        height += int(computedStyle.borderTopWidth);
+        height += int(computedStyle.borderBottomWidth);
+        return height;
+    }
+    else {
+        return height;
+    }
+};
+export var outerWidth = function (node) {
+    var _a;
+    var width = node.clientWidth;
+    var computedStyle = (_a = node.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(node);
+    if (computedStyle) {
+        width += int(computedStyle.borderLeftWidth);
+        width += int(computedStyle.borderRightWidth);
+        return width;
+    }
+    else {
+        return width;
+    }
+};
+export var innerHeight = function (node) {
+    var _a;
+    var height = node.clientHeight;
+    var computedStyle = (_a = node.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(node);
+    if (computedStyle) {
+        height -= int(computedStyle.paddingTop);
+        height -= int(computedStyle.paddingBottom);
+        return height;
+    }
+    else {
+        return height;
+    }
+};
+export var innerWidth = function (node) {
+    var _a;
+    var width = node.clientWidth;
+    var computedStyle = (_a = node.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(node);
+    if (computedStyle) {
+        width -= int(computedStyle.paddingLeft);
+        width -= int(computedStyle.paddingRight);
+        return width;
+    }
+    else {
+        return width;
+    }
+};
+export var offsetXYFromParent = function (evt, offsetParent, scale) {
+    var isBody = offsetParent.ownerDocument.body;
+    var offsetParentRect = isBody
+        ? { left: 0, top: 0 }
+        : offsetParent.getBoundingClientRect();
+    var x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
+    var y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
+    return { x: x, y: y };
+};
+export var createCSSTransform = function (controlPos, positionOffset) {
+    var _a;
+    var translation = getTranslation(controlPos, "px", positionOffset);
+    return _a = {}, _a[browserPrefixToKey("transform", browserPrefix)] = translation, _a;
+};
+export var createSVGTransform = function (controlPos, positionOffset) {
+    var translation = getTranslation(controlPos, "", positionOffset);
+    return translation;
+};
+export var getTranslation = function (_a, unitSuffix, positionOffset) {
+    var x = _a.x, y = _a.y;
+    var translation = "translate(".concat(x).concat(unitSuffix, ",").concat(y).concat(unitSuffix, ")");
+    if (positionOffset) {
+        var defaultX = "".concat(typeof positionOffset.x === "string"
+            ? positionOffset.x
+            : positionOffset.x + unitSuffix);
+        var defaultY = "".concat(typeof positionOffset.y === "string"
+            ? positionOffset.y
+            : positionOffset.y + unitSuffix);
+        translation = "translate(".concat(defaultX, ", ").concat(defaultY, ")") + translation;
+    }
+    return translation;
+};
+export var getTouch = function (e, identifier) {
+    return ((e.targetTouches &&
+        findInArray(e.targetTouches, function (t) { return identifier === t.identifier; })) ||
+        (e.changedTouches &&
+            findInArray(e.changedTouches, function (t) { return identifier === t.identifier; })));
+};
+export var getTouchIdentifier = function (e) {
+    if (e.targetTouches && e.targetTouches[0]) {
+        return e.targetTouches[0].identifier;
+    }
+    if (e.changedTouches && e.changedTouches[0]) {
+        return e.changedTouches[0].identifier;
+    }
+};
+export var addUserSelectStyles = function (doc) {
+    if (!doc)
+        return;
+    var styleEl = doc.getElementById("react-draggable-style-el");
+    if (!styleEl) {
+        styleEl = doc.createElement("style");
+        styleEl.id = "react-draggable-style-el";
+        styleEl.innerHTML =
+            ".react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n";
+        styleEl.innerHTML +=
+            ".react-draggable-transparent-selection *::selection {all: inherit;}\n";
+        doc.getElementsByTagName("head")[0].appendChild(styleEl);
+    }
+    if (doc.body)
+        addClassName(doc.body, "react-draggable-transparent-selection");
+};
+export var removeUserSelectStyles = function (doc) {
+    var _a;
+    if (!doc)
+        return;
+    if (doc.body) {
+        removeClassName(doc.body, "react-draggable-transparent-selection");
+    }
+    if (doc.getSelection()) {
+        (_a = doc.getSelection()) === null || _a === void 0 ? void 0 : _a.empty();
+    }
+    else {
+        var selection = (doc.defaultView || window).getSelection();
+        if (selection && selection.type !== "Caret") {
+            selection.removeAllRanges();
+        }
+    }
+};
+export var addClassName = function (el, className) {
+    if (el.classList) {
+        el.classList.add(className);
+    }
+    else {
+        if (!el.className.match(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)")))) {
+            el.className += " ".concat(className);
+        }
+    }
+};
+export var removeClassName = function (el, className) {
+    if (el.classList) {
+        el.classList.remove(className);
+    }
+    else {
+        el.className = el.className.replace(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)"), "g"), "");
+    }
+};

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

@@ -0,0 +1,5 @@
+export declare function getPrefix(prop?: string): string;
+export declare function browserPrefixToKey(prop: string, prefix: string): string;
+export declare function browserPrefixToStyle(prop: string, prefix: string): string;
+declare const _default: string;
+export default _default;

package/dist/lib/Draggable/utils/getPrefix.js

@@ -0,0 +1,41 @@
+var prefixes = ["Moz", "Webkit", "O", "ms"];
+export function getPrefix(prop) {
+    var _a, _b;
+    if (prop === void 0) { prop = "transform"; }
+    if (typeof window === "undefined")
+        return "";
+    var style = (_b = (_a = window.document) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.style;
+    if (!style)
+        return "";
+    if (prop in style)
+        return "";
+    for (var i = 0; i < prefixes.length; i++) {
+        if (browserPrefixToKey(prop, prefixes[i]) in style)
+            return prefixes[i];
+    }
+    return "";
+}
+export function browserPrefixToKey(prop, prefix) {
+    return prefix ? "".concat(prefix).concat(kebabToTitleCase(prop)) : prop;
+}
+export function browserPrefixToStyle(prop, prefix) {
+    return prefix ? "-".concat(prefix.toLowerCase(), "-").concat(prop) : prop;
+}
+function kebabToTitleCase(str) {
+    var out = "";
+    var shouldCapitalize = true;
+    for (var i = 0; i < str.length; i++) {
+        if (shouldCapitalize) {
+            out += str[i].toUpperCase();
+            shouldCapitalize = false;
+        }
+        else if (str[i] === "-") {
+            shouldCapitalize = true;
+        }
+        else {
+            out += str[i];
+        }
+    }
+    return out;
+}
+export default getPrefix();

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

@@ -0,0 +1,7 @@
+import { AxisType, DraggableData, DraggableState } from "./../types";
+import type { Bounds } from "./types";
+export declare function snapToGrid(grid: [number, number], pendingX: number, pendingY: number): [number, number];
+export declare function canDragX(axis: AxisType): boolean;
+export declare function canDragY(axis: AxisType): boolean;
+export declare const cloneBounds: (bounds: Bounds) => Bounds;
+export declare const createDraggableData: (draggableState: DraggableState, scale: number, coreData: DraggableData) => DraggableData;