@os-design/use-drag 1.0.0

package/LICENCE.md

@@ -0,0 +1 @@
+Copyright (c) 2019-present, Ilya Ordin, all rights reserved

package/README.md

@@ -0,0 +1,15 @@
+# @os-design/use-drag [![NPM version](https://img.shields.io/npm/v/@os-design/use-drag)](https://yarnpkg.com/package/@os-design/use-drag) [![BundlePhobia](https://img.shields.io/bundlephobia/minzip/@os-design/use-drag)](https://bundlephobia.com/result?p=@os-design/use-drag)
+
+Handles the drag gesture. On touch devices, the event is triggered by a long press. On the mouse devices, the event is triggered when you click on the element and start dragging it.
+
+## Installation
+
+Install the package using the following command:
+
+```
+yarn add @os-design/use-drag
+```
+
+---
+
+See all the features in the [Storybook](https://os-team.gitlab.io/libs/os-design/).

package/dist/cjs/index.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _useLongPress2 = _interopRequireDefault(require("@os-design/use-long-press"));
+
+var _useEvent = _interopRequireDefault(require("@os-design/use-event"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var userSelection = {
+  disable: function disable() {
+    document.body.style.userSelect = 'none';
+  },
+  enable: function enable() {
+    document.body.style.userSelect = '';
+  }
+};
+
+var useDrag = function useDrag(props) {
+  var _props$minMouseDistPx = props.minMouseDistPx,
+      minMouseDistPx = _props$minMouseDistPx === void 0 ? 10 : _props$minMouseDistPx,
+      _props$longPressMs = props.longPressMs,
+      longPressMs = _props$longPressMs === void 0 ? 500 : _props$longPressMs;
+  var isDraggingRef = (0, _react.useRef)(false);
+  var startMousePosRef = (0, _react.useRef)(null);
+  var minMouseDistPxRef = (0, _react.useRef)(minMouseDistPx);
+  var handlersRef = (0, _react.useRef)({
+    onDragStart: props.onDragStart || function () {},
+    onDragMove: props.onDragMove || function () {},
+    onDragEnd: props.onDragEnd || function () {}
+  });
+  (0, _react.useEffect)(function () {
+    minMouseDistPxRef.current = minMouseDistPx;
+  }, [minMouseDistPx]);
+  (0, _react.useEffect)(function () {
+    handlersRef.current = {
+      onDragStart: props.onDragStart || function () {},
+      onDragMove: props.onDragMove || function () {},
+      onDragEnd: props.onDragEnd || function () {}
+    };
+  }, [props.onDragEnd, props.onDragMove, props.onDragStart]);
+  var dragStartHandler = (0, _react.useCallback)(function (position, startPosition) {
+    var onDragStart = handlersRef.current.onDragStart;
+    onDragStart(position, startPosition);
+    isDraggingRef.current = true;
+    startMousePosRef.current = null;
+  }, []);
+  var dragEndHandler = (0, _react.useCallback)(function () {
+    var onDragEnd = handlersRef.current.onDragEnd;
+    if (isDraggingRef.current) onDragEnd();
+    isDraggingRef.current = false;
+    startMousePosRef.current = null;
+    userSelection.enable();
+  }, []);
+  var onMouseDown = (0, _react.useCallback)(function (e) {
+    if (e.button !== 0) return; // Allow only the left mouse button
+
+    startMousePosRef.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    userSelection.disable();
+  }, []);
+  var onMouseMove = (0, _react.useCallback)(function (e) {
+    var pos = {
+      x: e.clientX,
+      y: e.clientY
+    };
+
+    if (isDraggingRef.current) {
+      var onDragMove = handlersRef.current.onDragMove;
+      onDragMove(pos);
+      return;
+    }
+
+    var startPos = startMousePosRef.current;
+    if (!startPos) return;
+    var diffX = Math.abs(pos.x - startPos.x);
+    var diffY = Math.abs(pos.y - startPos.y);
+    var diff = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
+
+    if (diff >= minMouseDistPxRef.current) {
+      dragStartHandler(pos, startPos);
+    }
+  }, [dragStartHandler]);
+  var onMouseUp = (0, _react.useCallback)(function () {
+    dragEndHandler();
+  }, [dragEndHandler]);
+  var longPressHandler = (0, _react.useCallback)(function (e) {
+    if (e.touches.length === 0) return;
+    var pos = {
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    };
+    dragStartHandler(pos, pos);
+  }, [dragStartHandler]);
+
+  var _useLongPress = (0, _useLongPress2["default"])(longPressHandler, longPressMs),
+      onTouchStart = _useLongPress.onTouchStart,
+      onTouchMove = _useLongPress.onTouchMove,
+      onTouchEnd = _useLongPress.onTouchEnd;
+
+  var touchStartHandler = (0, _react.useCallback)(function (e) {
+    onTouchStart(e);
+    userSelection.disable();
+  }, [onTouchStart]);
+  var touchMoveHandler = (0, _react.useCallback)(function (e) {
+    onTouchMove();
+    if (!isDraggingRef.current || e.touches.length === 0) return;
+    var onDragMove = handlersRef.current.onDragMove;
+    onDragMove({
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    });
+  }, [onTouchMove]);
+  var touchEndHandler = (0, _react.useCallback)(function () {
+    onTouchEnd();
+    dragEndHandler();
+  }, [dragEndHandler, onTouchEnd]);
+  (0, _useEvent["default"])(document, 'mousemove', onMouseMove);
+  (0, _useEvent["default"])(document, 'mouseup', onMouseUp);
+  (0, _useEvent["default"])(document, 'touchmove', touchMoveHandler);
+  (0, _useEvent["default"])(document, 'touchend', touchEndHandler);
+  return {
+    onMouseDown: onMouseDown,
+    onTouchStart: touchStartHandler
+  };
+};
+
+var _default = useDrag;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"names":["userSelection","disable","document","body","style","userSelect","enable","useDrag","props","minMouseDistPx","longPressMs","isDraggingRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","current","dragStartHandler","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","onMouseUp","longPressHandler","touches","length","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler"],"mappings":"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","sourcesContent":["import {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport useLongPress from '@os-design/use-long-press';\nimport useEvent from '@os-design/use-event';\n\nexport interface Position {\n  x: number;\n  y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n  minMouseDistPx?: number;\n  longPressMs?: number;\n  onDragStart?: OnDragStart;\n  onDragMove?: OnDragMove;\n  onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n  disable: () => {\n    document.body.style.userSelect = 'none';\n  },\n  enable: () => {\n    document.body.style.userSelect = '';\n  },\n};\n\nexport interface DragHandlers {\n  onMouseDown: MouseEventHandler;\n  onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n  const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n  const isDraggingRef = useRef(false);\n  const startMousePosRef = useRef<Position | null>(null);\n  const minMouseDistPxRef = useRef(minMouseDistPx);\n  const handlersRef = useRef({\n    onDragStart: props.onDragStart || (() => {}),\n    onDragMove: props.onDragMove || (() => {}),\n    onDragEnd: props.onDragEnd || (() => {}),\n  });\n\n  useEffect(() => {\n    minMouseDistPxRef.current = minMouseDistPx;\n  }, [minMouseDistPx]);\n\n  useEffect(() => {\n    handlersRef.current = {\n      onDragStart: props.onDragStart || (() => {}),\n      onDragMove: props.onDragMove || (() => {}),\n      onDragEnd: props.onDragEnd || (() => {}),\n    };\n  }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n  const dragStartHandler = useCallback(\n    (position: Position, startPosition: Position) => {\n      const { onDragStart } = handlersRef.current;\n      onDragStart(position, startPosition);\n      isDraggingRef.current = true;\n      startMousePosRef.current = null;\n    },\n    []\n  );\n\n  const dragEndHandler = useCallback(() => {\n    const { onDragEnd } = handlersRef.current;\n    if (isDraggingRef.current) onDragEnd();\n    isDraggingRef.current = false;\n    startMousePosRef.current = null;\n    userSelection.enable();\n  }, []);\n\n  const onMouseDown = useCallback<MouseEventHandler>((e) => {\n    if (e.button !== 0) return; // Allow only the left mouse button\n    startMousePosRef.current = { x: e.clientX, y: e.clientY };\n    userSelection.disable();\n  }, []);\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      const pos = { x: e.clientX, y: e.clientY };\n      if (isDraggingRef.current) {\n        const { onDragMove } = handlersRef.current;\n        onDragMove(pos);\n        return;\n      }\n      const startPos = startMousePosRef.current;\n      if (!startPos) return;\n      const diffX = Math.abs(pos.x - startPos.x);\n      const diffY = Math.abs(pos.y - startPos.y);\n      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n      if (diff >= minMouseDistPxRef.current) {\n        dragStartHandler(pos, startPos);\n      }\n    },\n    [dragStartHandler]\n  );\n\n  const onMouseUp = useCallback(() => {\n    dragEndHandler();\n  }, [dragEndHandler]);\n\n  const longPressHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      if (e.touches.length === 0) return;\n      const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n      dragStartHandler(pos, pos);\n    },\n    [dragStartHandler]\n  );\n\n  const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n    longPressHandler,\n    longPressMs\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      onTouchStart(e);\n      userSelection.disable();\n    },\n    [onTouchStart]\n  );\n\n  const touchMoveHandler = useCallback(\n    (e: TouchEvent) => {\n      onTouchMove();\n      if (!isDraggingRef.current || e.touches.length === 0) return;\n      const { onDragMove } = handlersRef.current;\n      onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n    },\n    [onTouchMove]\n  );\n\n  const touchEndHandler = useCallback(() => {\n    onTouchEnd();\n    dragEndHandler();\n  }, [dragEndHandler, onTouchEnd]);\n\n  useEvent(document, 'mousemove', onMouseMove);\n  useEvent(document, 'mouseup', onMouseUp);\n  useEvent(document, 'touchmove', touchMoveHandler);\n  useEvent(document, 'touchend', touchEndHandler);\n\n  return {\n    onMouseDown,\n    onTouchStart: touchStartHandler,\n  };\n};\n\nexport default useDrag;\n"],"file":"index.js"}

package/dist/esm/index.js

@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useRef } from 'react';
+import useLongPress from '@os-design/use-long-press';
+import useEvent from '@os-design/use-event';
+const userSelection = {
+  disable: () => {
+    document.body.style.userSelect = 'none';
+  },
+  enable: () => {
+    document.body.style.userSelect = '';
+  }
+};
+
+const useDrag = props => {
+  const {
+    minMouseDistPx = 10,
+    longPressMs = 500
+  } = props;
+  const isDraggingRef = useRef(false);
+  const startMousePosRef = useRef(null);
+  const minMouseDistPxRef = useRef(minMouseDistPx);
+  const handlersRef = useRef({
+    onDragStart: props.onDragStart || (() => {}),
+    onDragMove: props.onDragMove || (() => {}),
+    onDragEnd: props.onDragEnd || (() => {})
+  });
+  useEffect(() => {
+    minMouseDistPxRef.current = minMouseDistPx;
+  }, [minMouseDistPx]);
+  useEffect(() => {
+    handlersRef.current = {
+      onDragStart: props.onDragStart || (() => {}),
+      onDragMove: props.onDragMove || (() => {}),
+      onDragEnd: props.onDragEnd || (() => {})
+    };
+  }, [props.onDragEnd, props.onDragMove, props.onDragStart]);
+  const dragStartHandler = useCallback((position, startPosition) => {
+    const {
+      onDragStart
+    } = handlersRef.current;
+    onDragStart(position, startPosition);
+    isDraggingRef.current = true;
+    startMousePosRef.current = null;
+  }, []);
+  const dragEndHandler = useCallback(() => {
+    const {
+      onDragEnd
+    } = handlersRef.current;
+    if (isDraggingRef.current) onDragEnd();
+    isDraggingRef.current = false;
+    startMousePosRef.current = null;
+    userSelection.enable();
+  }, []);
+  const onMouseDown = useCallback(e => {
+    if (e.button !== 0) return; // Allow only the left mouse button
+
+    startMousePosRef.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    userSelection.disable();
+  }, []);
+  const onMouseMove = useCallback(e => {
+    const pos = {
+      x: e.clientX,
+      y: e.clientY
+    };
+
+    if (isDraggingRef.current) {
+      const {
+        onDragMove
+      } = handlersRef.current;
+      onDragMove(pos);
+      return;
+    }
+
+    const startPos = startMousePosRef.current;
+    if (!startPos) return;
+    const diffX = Math.abs(pos.x - startPos.x);
+    const diffY = Math.abs(pos.y - startPos.y);
+    const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
+
+    if (diff >= minMouseDistPxRef.current) {
+      dragStartHandler(pos, startPos);
+    }
+  }, [dragStartHandler]);
+  const onMouseUp = useCallback(() => {
+    dragEndHandler();
+  }, [dragEndHandler]);
+  const longPressHandler = useCallback(e => {
+    if (e.touches.length === 0) return;
+    const pos = {
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    };
+    dragStartHandler(pos, pos);
+  }, [dragStartHandler]);
+  const {
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd
+  } = useLongPress(longPressHandler, longPressMs);
+  const touchStartHandler = useCallback(e => {
+    onTouchStart(e);
+    userSelection.disable();
+  }, [onTouchStart]);
+  const touchMoveHandler = useCallback(e => {
+    onTouchMove();
+    if (!isDraggingRef.current || e.touches.length === 0) return;
+    const {
+      onDragMove
+    } = handlersRef.current;
+    onDragMove({
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    });
+  }, [onTouchMove]);
+  const touchEndHandler = useCallback(() => {
+    onTouchEnd();
+    dragEndHandler();
+  }, [dragEndHandler, onTouchEnd]);
+  useEvent(document, 'mousemove', onMouseMove);
+  useEvent(document, 'mouseup', onMouseUp);
+  useEvent(document, 'touchmove', touchMoveHandler);
+  useEvent(document, 'touchend', touchEndHandler);
+  return {
+    onMouseDown,
+    onTouchStart: touchStartHandler
+  };
+};
+
+export default useDrag;
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"names":["useCallback","useEffect","useRef","useLongPress","useEvent","userSelection","disable","document","body","style","userSelect","enable","useDrag","props","minMouseDistPx","longPressMs","isDraggingRef","startMousePosRef","minMouseDistPxRef","handlersRef","onDragStart","onDragMove","onDragEnd","current","dragStartHandler","position","startPosition","dragEndHandler","onMouseDown","e","button","x","clientX","y","clientY","onMouseMove","pos","startPos","diffX","Math","abs","diffY","diff","sqrt","onMouseUp","longPressHandler","touches","length","onTouchStart","onTouchMove","onTouchEnd","touchStartHandler","touchMoveHandler","touchEndHandler"],"mappings":"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","sourcesContent":["import {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport useLongPress from '@os-design/use-long-press';\nimport useEvent from '@os-design/use-event';\n\nexport interface Position {\n  x: number;\n  y: number;\n}\n\nexport type OnDragStart = (position: Position, startPosition: Position) => void;\nexport type OnDragMove = (position: Position) => void;\nexport type OnDragEnd = () => void;\n\nexport interface UseDragProps {\n  minMouseDistPx?: number;\n  longPressMs?: number;\n  onDragStart?: OnDragStart;\n  onDragMove?: OnDragMove;\n  onDragEnd?: OnDragEnd;\n}\n\nconst userSelection = {\n  disable: () => {\n    document.body.style.userSelect = 'none';\n  },\n  enable: () => {\n    document.body.style.userSelect = '';\n  },\n};\n\nexport interface DragHandlers {\n  onMouseDown: MouseEventHandler;\n  onTouchStart: TouchEventHandler;\n}\n\nconst useDrag = (props: UseDragProps): DragHandlers => {\n  const { minMouseDistPx = 10, longPressMs = 500 } = props;\n\n  const isDraggingRef = useRef(false);\n  const startMousePosRef = useRef<Position | null>(null);\n  const minMouseDistPxRef = useRef(minMouseDistPx);\n  const handlersRef = useRef({\n    onDragStart: props.onDragStart || (() => {}),\n    onDragMove: props.onDragMove || (() => {}),\n    onDragEnd: props.onDragEnd || (() => {}),\n  });\n\n  useEffect(() => {\n    minMouseDistPxRef.current = minMouseDistPx;\n  }, [minMouseDistPx]);\n\n  useEffect(() => {\n    handlersRef.current = {\n      onDragStart: props.onDragStart || (() => {}),\n      onDragMove: props.onDragMove || (() => {}),\n      onDragEnd: props.onDragEnd || (() => {}),\n    };\n  }, [props.onDragEnd, props.onDragMove, props.onDragStart]);\n\n  const dragStartHandler = useCallback(\n    (position: Position, startPosition: Position) => {\n      const { onDragStart } = handlersRef.current;\n      onDragStart(position, startPosition);\n      isDraggingRef.current = true;\n      startMousePosRef.current = null;\n    },\n    []\n  );\n\n  const dragEndHandler = useCallback(() => {\n    const { onDragEnd } = handlersRef.current;\n    if (isDraggingRef.current) onDragEnd();\n    isDraggingRef.current = false;\n    startMousePosRef.current = null;\n    userSelection.enable();\n  }, []);\n\n  const onMouseDown = useCallback<MouseEventHandler>((e) => {\n    if (e.button !== 0) return; // Allow only the left mouse button\n    startMousePosRef.current = { x: e.clientX, y: e.clientY };\n    userSelection.disable();\n  }, []);\n\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      const pos = { x: e.clientX, y: e.clientY };\n      if (isDraggingRef.current) {\n        const { onDragMove } = handlersRef.current;\n        onDragMove(pos);\n        return;\n      }\n      const startPos = startMousePosRef.current;\n      if (!startPos) return;\n      const diffX = Math.abs(pos.x - startPos.x);\n      const diffY = Math.abs(pos.y - startPos.y);\n      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n      if (diff >= minMouseDistPxRef.current) {\n        dragStartHandler(pos, startPos);\n      }\n    },\n    [dragStartHandler]\n  );\n\n  const onMouseUp = useCallback(() => {\n    dragEndHandler();\n  }, [dragEndHandler]);\n\n  const longPressHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      if (e.touches.length === 0) return;\n      const pos = { x: e.touches[0].clientX, y: e.touches[0].clientY };\n      dragStartHandler(pos, pos);\n    },\n    [dragStartHandler]\n  );\n\n  const { onTouchStart, onTouchMove, onTouchEnd } = useLongPress(\n    longPressHandler,\n    longPressMs\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler>(\n    (e) => {\n      onTouchStart(e);\n      userSelection.disable();\n    },\n    [onTouchStart]\n  );\n\n  const touchMoveHandler = useCallback(\n    (e: TouchEvent) => {\n      onTouchMove();\n      if (!isDraggingRef.current || e.touches.length === 0) return;\n      const { onDragMove } = handlersRef.current;\n      onDragMove({ x: e.touches[0].clientX, y: e.touches[0].clientY });\n    },\n    [onTouchMove]\n  );\n\n  const touchEndHandler = useCallback(() => {\n    onTouchEnd();\n    dragEndHandler();\n  }, [dragEndHandler, onTouchEnd]);\n\n  useEvent(document, 'mousemove', onMouseMove);\n  useEvent(document, 'mouseup', onMouseUp);\n  useEvent(document, 'touchmove', touchMoveHandler);\n  useEvent(document, 'touchend', touchEndHandler);\n\n  return {\n    onMouseDown,\n    onTouchStart: touchStartHandler,\n  };\n};\n\nexport default useDrag;\n"],"file":"index.js"}

package/dist/types/index.d.ts

@@ -0,0 +1,22 @@
+import { MouseEventHandler, TouchEventHandler } from 'react';
+export interface Position {
+    x: number;
+    y: number;
+}
+export declare type OnDragStart = (position: Position, startPosition: Position) => void;
+export declare type OnDragMove = (position: Position) => void;
+export declare type OnDragEnd = () => void;
+export interface UseDragProps {
+    minMouseDistPx?: number;
+    longPressMs?: number;
+    onDragStart?: OnDragStart;
+    onDragMove?: OnDragMove;
+    onDragEnd?: OnDragEnd;
+}
+export interface DragHandlers {
+    onMouseDown: MouseEventHandler;
+    onTouchStart: TouchEventHandler;
+}
+declare const useDrag: (props: UseDragProps) => DragHandlers;
+export default useDrag;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,WAAW,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;AAChF,oBAAY,UAAU,GAAG,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;AACtD,oBAAY,SAAS,GAAG,MAAM,IAAI,CAAC;AAEnC,MAAM,WAAW,YAAY;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAWD,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,QAAA,MAAM,OAAO,UAAW,YAAY,KAAG,YAsHtC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@os-design/use-drag",
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "repository": "git@gitlab.com:os-team/libs/os-design.git",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build": "yarn clean && npm-run-all build:*",
+    "ncu": "ncu -u"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@os-design/use-event": "^1.0.5",
+    "@os-design/use-long-press": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "gitHead": "4f41a962d4c0afb57d65e8c3e104215794d3c6a7"
+}