@aiszlab/relax 1.5.2 → 1.5.3

package/dist/dom/contains.d.ts

@@ -13,4 +13,4 @@ export type Containable = {
      */
     contains?: (node: Nullable<Node>) => boolean;
 };
-export declare const contains: (root: Voidable<Containable>, node?: Voidable<Node>) => boolean;
+export declare const contains: (root: Voidable<Containable>, node?: Voidable<Node | EventTarget>) => boolean;

package/dist/hooks/use-drag.cjs

@@ -0,0 +1,94 @@
+'use strict';
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var useUpdateState = require('./use-update-state.cjs');
+var useEvent = require('./use-event.cjs');
+
+/**
+ * @description
+ * Hook for dragging
+ */
+var useDrag = function useDrag() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _onDragEnd = _ref.onDragEnd,
+    _onDragMove = _ref.onDragMove,
+    _onDragStart = _ref.onDragStart;
+  var _useUpdateState = useUpdateState.useUpdateState({
+      x: 0,
+      y: 0,
+      movementX: 0,
+      movementY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      isDragging: false,
+      isDragged: false
+    }),
+    _useUpdateState2 = _slicedToArray(_useUpdateState, 2),
+    dragState = _useUpdateState2[0],
+    setDragState = _useUpdateState2[1];
+  var onDragStart = useEvent.useEvent(function (event) {
+    event.persist();
+    setDragState(function () {
+      return {
+        isDragging: true,
+        isDragged: true,
+        x: event.clientX,
+        y: event.clientY,
+        movementX: 0,
+        movementY: 0,
+        offsetX: event.nativeEvent.layerX,
+        offsetY: event.nativeEvent.layerY
+      };
+    }, _onDragStart && function (_state) {
+      _onDragStart(event, _objectSpread({}, _state));
+    });
+  });
+  var onDragMove = useEvent.useEvent(function (event) {
+    event.persist();
+    setDragState(function (_state) {
+      if (!_state.isDragging) return _state;
+      var x = _state.x,
+        y = _state.y,
+        offsetX = _state.offsetX,
+        offsetY = _state.offsetY;
+      return {
+        isDragging: true,
+        isDragged: true,
+        x: x,
+        y: y,
+        offsetX: offsetX,
+        offsetY: offsetY,
+        movementX: event.clientX - x,
+        movementY: event.clientY - y
+      };
+    }, _onDragMove && function (_state) {
+      if (!_state.isDragging) return;
+      _onDragMove(event, _objectSpread({}, _state));
+    });
+  });
+  var onDragEnd = useEvent.useEvent(function (event) {
+    event.persist();
+    setDragState(function (_state) {
+      return {
+        isDragging: false,
+        isDragged: true,
+        x: event.clientX - _state.offsetX,
+        y: event.clientY - _state.offsetY,
+        movementX: 0,
+        movementY: 0,
+        offsetX: 0,
+        offsetY: 0
+      };
+    }, _onDragEnd && function (_state) {
+      _onDragEnd(event, _objectSpread({}, _state));
+    });
+  });
+  return [dragState, {
+    onDragEnd: onDragEnd,
+    onDragMove: onDragMove,
+    onDragStart: onDragStart
+  }];
+};
+
+exports.useDrag = useDrag;

package/dist/hooks/use-drag.d.ts

@@ -1,11 +1,11 @@
-import { type DragEvent } from "react";
+import { type MouseEvent } from "react";
 export type UsingDrag = {
     /** Optional callback invoked upon drag end. */
-    onDragEnd?: (event: DragEvent<HTMLDivElement>, state: DragState) => void;
+    onDragEnd?: (event: MouseEvent<HTMLDivElement>, state: DragState) => void;
     /** Optional callback invoked upon drag movement. */
-    onDragMove?: (event: DragEvent<HTMLDivElement>, state: DragState) => void;
+    onDragMove?: (event: MouseEvent<HTMLDivElement>, state: DragState) => void;
     /** Optional callback invoked upon drag start. */
-    onDragStart?: (event: DragEvent<HTMLDivElement>, state: DragState) => void;
+    onDragStart?: (event: MouseEvent<HTMLDivElement>, state: DragState) => void;
 };
 export type DragState = {
     /**
@@ -18,32 +18,48 @@ export type DragState = {
      * y position
      */
     y: number;
+    /**
+     * @description
+     * moved x
+     */
+    movementX: number;
+    /**
+     * @description
+     * moved y
+     */
+    movementY: number;
     /**
      * @description
      * offset X
      */
-    offsetX?: number;
+    offsetX: number;
     /**
      * @description
      * offset Y
      */
-    offsetY?: number;
+    offsetY: number;
     /**
      * @description
      * Whether a drag is currently in progress.
      */
     isDragging: boolean;
+    /**
+     * @description
+     * isDragged
+     */
+    isDragged: boolean;
 };
 export type UsedDrag = [
     DragState,
     {
-        onDragEnd: (event: DragEvent<HTMLDivElement>) => void;
-        onDragMove: (event: DragEvent<HTMLDivElement>) => void;
-        onDragStart: (event: DragEvent<HTMLDivElement>) => void;
+        onDragEnd: (event: MouseEvent<HTMLDivElement>) => void;
+        onDragMove: (event: MouseEvent<HTMLDivElement>) => void;
+        onDragStart: (event: MouseEvent<HTMLDivElement>) => void;
     }
 ];
 /**
  * @description
  * Hook for dragging
  */
-export default function useDrag({ onDragEnd: _onDragEnd, onDragMove: _onDragMove, onDragStart: _onDragStart, }?: UsingDrag | undefined): UsedDrag;
+declare const useDrag: ({ onDragEnd: _onDragEnd, onDragMove: _onDragMove, onDragStart: _onDragStart, }?: UsingDrag | undefined) => UsedDrag;
+export { useDrag };

package/dist/hooks/use-drag.mjs

@@ -0,0 +1,92 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useUpdateState } from './use-update-state.mjs';
+import { useEvent } from './use-event.mjs';
+
+/**
+ * @description
+ * Hook for dragging
+ */
+var useDrag = function useDrag() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _onDragEnd = _ref.onDragEnd,
+    _onDragMove = _ref.onDragMove,
+    _onDragStart = _ref.onDragStart;
+  var _useUpdateState = useUpdateState({
+      x: 0,
+      y: 0,
+      movementX: 0,
+      movementY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      isDragging: false,
+      isDragged: false
+    }),
+    _useUpdateState2 = _slicedToArray(_useUpdateState, 2),
+    dragState = _useUpdateState2[0],
+    setDragState = _useUpdateState2[1];
+  var onDragStart = useEvent(function (event) {
+    event.persist();
+    setDragState(function () {
+      return {
+        isDragging: true,
+        isDragged: true,
+        x: event.clientX,
+        y: event.clientY,
+        movementX: 0,
+        movementY: 0,
+        offsetX: event.nativeEvent.layerX,
+        offsetY: event.nativeEvent.layerY
+      };
+    }, _onDragStart && function (_state) {
+      _onDragStart(event, _objectSpread({}, _state));
+    });
+  });
+  var onDragMove = useEvent(function (event) {
+    event.persist();
+    setDragState(function (_state) {
+      if (!_state.isDragging) return _state;
+      var x = _state.x,
+        y = _state.y,
+        offsetX = _state.offsetX,
+        offsetY = _state.offsetY;
+      return {
+        isDragging: true,
+        isDragged: true,
+        x: x,
+        y: y,
+        offsetX: offsetX,
+        offsetY: offsetY,
+        movementX: event.clientX - x,
+        movementY: event.clientY - y
+      };
+    }, _onDragMove && function (_state) {
+      if (!_state.isDragging) return;
+      _onDragMove(event, _objectSpread({}, _state));
+    });
+  });
+  var onDragEnd = useEvent(function (event) {
+    event.persist();
+    setDragState(function (_state) {
+      return {
+        isDragging: false,
+        isDragged: true,
+        x: event.clientX - _state.offsetX,
+        y: event.clientY - _state.offsetY,
+        movementX: 0,
+        movementY: 0,
+        offsetX: 0,
+        offsetY: 0
+      };
+    }, _onDragEnd && function (_state) {
+      _onDragEnd(event, _objectSpread({}, _state));
+    });
+  });
+  return [dragState, {
+    onDragEnd: onDragEnd,
+    onDragMove: onDragMove,
+    onDragStart: onDragStart
+  }];
+};
+
+export { useDrag };

package/dist/hooks/use-raf.cjs

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var useEvent = require('./use-event.cjs');
+var useUnmount = require('./use-unmount.cjs');
 
 /**
  * @description
@@ -10,18 +11,28 @@ var useEvent = require('./use-event.cjs');
 var useRaf = function useRaf(_callback) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     timely = _ref.timely;
-  var callback = useEvent.useEvent(_callback);
   var timed = react.useRef(null);
   var isTimed = react.useRef(false);
-  return function () {
+  useUnmount.useUnmount(function () {
+    if (!timed.current) return;
+    cancelAnimationFrame(timed.current);
+  });
+  var callback = useEvent.useEvent(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
     if (isTimed.current) return;
     isTimed.current = true;
-    timely && callback();
+    if (timely) {
+      _callback.apply(void 0, args);
+      return;
+    }
     timed.current = requestAnimationFrame(function () {
       isTimed.current = false;
-      !timely && callback();
+      _callback.apply(void 0, args);
     });
-  };
+  });
+  return callback;
 };
 
 exports.useRaf = useRaf;

package/dist/hooks/use-raf.d.ts

@@ -1,21 +1,16 @@
 import type { AnyFunction } from "@aiszlab/relax/types";
-type UsingRaf = [
-    callback: AnyFunction,
-    {
-        /**
-         * @description
-         * run callback immediately
-         * if `timely` is true, run callback immediately
-         * otherwise, wait for next frame
-         */
-        timely?: boolean;
-    }?
-];
-type UsedRaf = () => void;
-type UseRaf = (...args: UsingRaf) => UsedRaf;
+type UsingRaf = {
+    /**
+     * @description
+     * run callback immediately
+     * if `timely` is true, run callback immediately
+     * otherwise, wait for next frame
+     */
+    timely?: boolean;
+};
 /**
  * @description
  * raf
  */
-export declare const useRaf: UseRaf;
+export declare const useRaf: <T extends AnyFunction<any[], void>>(_callback: T, { timely }?: UsingRaf) => T;
 export {};

package/dist/hooks/use-raf.mjs

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { useEvent } from './use-event.mjs';
+import { useUnmount } from './use-unmount.mjs';
 
 /**
  * @description
@@ -8,18 +9,28 @@ import { useEvent } from './use-event.mjs';
 var useRaf = function useRaf(_callback) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     timely = _ref.timely;
-  var callback = useEvent(_callback);
   var timed = useRef(null);
   var isTimed = useRef(false);
-  return function () {
+  useUnmount(function () {
+    if (!timed.current) return;
+    cancelAnimationFrame(timed.current);
+  });
+  var callback = useEvent(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
     if (isTimed.current) return;
     isTimed.current = true;
-    timely && callback();
+    if (timely) {
+      _callback.apply(void 0, args);
+      return;
+    }
     timed.current = requestAnimationFrame(function () {
       isTimed.current = false;
-      !timely && callback();
+      _callback.apply(void 0, args);
     });
-  };
+  });
+  return callback;
 };
 
 export { useRaf };

package/dist/hooks/use-update-state.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var useUpdateEffect = require('./use-update-effect.cjs');
+
+function useUpdateState(initialState) {
+  var _useState = react.useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var callbackRef = react.useRef(null);
+  var setter = react.useCallback(function (state, callback) {
+    setState(state);
+    callbackRef.current = callback !== null && callback !== void 0 ? callback : null;
+  }, []);
+  useUpdateEffect.useUpdateEffect(function () {
+    var _callback = callbackRef.current;
+    if (!_callback) return;
+    // execution & reset
+    _callback(state);
+    callbackRef.current = null;
+  }, [state]);
+  return [state, setter];
+}
+
+exports.useUpdateState = useUpdateState;

package/dist/hooks/use-update-state.mjs

@@ -0,0 +1,25 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useCallback } from 'react';
+import { useUpdateEffect } from './use-update-effect.mjs';
+
+function useUpdateState(initialState) {
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var callbackRef = useRef(null);
+  var setter = useCallback(function (state, callback) {
+    setState(state);
+    callbackRef.current = callback !== null && callback !== void 0 ? callback : null;
+  }, []);
+  useUpdateEffect(function () {
+    var _callback = callbackRef.current;
+    if (!_callback) return;
+    // execution & reset
+    _callback(state);
+    callbackRef.current = null;
+  }, [state]);
+  return [state, setter];
+}
+
+export { useUpdateState };

package/dist/index.cjs

@@ -35,6 +35,7 @@ var useInfiniteScroll = require('./hooks/use-infinite-scroll.cjs');
 var useReactive = require('./hooks/use-reactive.cjs');
 var useParentSize = require('./hooks/use-parent-size.cjs');
 var useScreenSize = require('./hooks/use-screen-size.cjs');
+var useDrag = require('./hooks/use-drag.cjs');
 var isRefable = require('./is/is-refable.cjs');
 var isUndefined = require('./is/is-undefined.cjs');
 var isNull = require('./is/is-null.cjs');
@@ -112,6 +113,7 @@ exports.useInfiniteScroll = useInfiniteScroll.useInfiniteScroll;
 exports.useReactive = useReactive.useReactive;
 exports.useParentSize = useParentSize.useParentSize;
 exports.useScreenSize = useScreenSize.useScreenSize;
+exports.useDrag = useDrag.useDrag;
 exports.isRefable = isRefable.isRefable;
 exports.isUndefined = isUndefined.isUndefined;
 exports.isNull = isNull.isNull;

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { useInfiniteScroll } from "./hooks/use-infinite-scroll";
 export { useReactive } from "./hooks/use-reactive";
 export { useParentSize } from "./hooks/use-parent-size";
 export { useScreenSize } from "./hooks/use-screen-size";
+export { useDrag } from "./hooks/use-drag";
 /**
  * @description
  * is

package/dist/index.mjs

@@ -33,6 +33,7 @@ export { useInfiniteScroll } from './hooks/use-infinite-scroll.mjs';
 export { useReactive } from './hooks/use-reactive.mjs';
 export { useParentSize } from './hooks/use-parent-size.mjs';
 export { useScreenSize } from './hooks/use-screen-size.mjs';
+export { useDrag } from './hooks/use-drag.mjs';
 export { isRefable } from './is/is-refable.mjs';
 export { isUndefined } from './is/is-undefined.mjs';
 export { isNull } from './is/is-null.mjs';

package/dist/types/any-function.d.ts

@@ -1 +1 @@
-export type AnyFunction = (...args: any) => any;
+export type AnyFunction<P extends any[] = any[], R = any> = (...args: P) => R;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "react utils collection",
   "exports": {
     ".": {
@@ -36,30 +36,30 @@
     "publish:npm": "npm publish"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
+    "@babel/runtime": "^7.26.0",
     "react-is": "^18.3.1",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.8",
-    "@babel/plugin-transform-runtime": "^7.25.7",
-    "@babel/preset-env": "^7.25.8",
-    "@babel/preset-react": "^7.25.7",
-    "@babel/preset-typescript": "^7.25.7",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
     "@jest/globals": "^29.7.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/react": "^16.0.1",
     "@types/babel__core": "^7.20.5",
-    "@types/react": "^18.3.11",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-is": "^18.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.24.0",
+    "rollup": "^4.24.1",
     "typescript": "5.6.2"
   },
   "peerDependencies": {