@aiszlab/relax 1.5.7 → 1.5.9

package/dist/hooks/use-debounce-callback.d.ts

@@ -15,6 +15,6 @@ import type { AnyFunction } from "@aiszlab/relax/types";
  * @example
  * 1000
  */
-declare function useDebounceCallback<T extends AnyFunction>(callback: T, wait: number): Debounced<T>;
-declare function useDebounceCallback<T extends AnyFunction, R = unknown>(debouncer: Debouncer<T, R>, wait: number): Debounced<T>;
+declare function useDebounceCallback<T extends AnyFunction>(callback: T, wait?: number): Debounced<T>;
+declare function useDebounceCallback<T extends AnyFunction, R = unknown>(debouncer: Debouncer<T, R>, wait?: number): Debounced<T>;
 export { useDebounceCallback };

package/dist/hooks/use-drag.cjs

@@ -5,6 +5,34 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var useUpdateState = require('./use-update-state.cjs');
 var useEvent = require('./use-event.cjs');
 
+/**
+ * @description convert any event to position
+ */
+var toPosition = function toPosition(event) {
+  if (event instanceof MouseEvent) {
+    return {
+      x: event.pageX,
+      y: event.pageY,
+      offsetX: event.offsetX,
+      offsetY: event.offsetY
+    };
+  }
+  if (event instanceof TouchEvent && event.touches.length === 1) {
+    var _event$touches$item$p, _event$touches$item, _event$touches$item$p2, _event$touches$item2;
+    return {
+      x: (_event$touches$item$p = (_event$touches$item = event.touches.item(0)) === null || _event$touches$item === void 0 ? void 0 : _event$touches$item.pageX) !== null && _event$touches$item$p !== void 0 ? _event$touches$item$p : 0,
+      y: (_event$touches$item$p2 = (_event$touches$item2 = event.touches.item(0)) === null || _event$touches$item2 === void 0 ? void 0 : _event$touches$item2.pageY) !== null && _event$touches$item$p2 !== void 0 ? _event$touches$item$p2 : 0,
+      offsetX: 0,
+      offsetY: 0
+    };
+  }
+  return {
+    x: 0,
+    y: 0,
+    offsetX: 0,
+    offsetY: 0
+  };
+};
 /**
  * @description
  * Hook for dragging
@@ -28,24 +56,28 @@ var useDrag = function useDrag() {
     dragState = _useUpdateState2[0],
     setDragState = _useUpdateState2[1];
   var onDragStart = useEvent.useEvent(function (event) {
-    event.persist();
+    var _toPosition = toPosition(event),
+      x = _toPosition.x,
+      y = _toPosition.y,
+      offsetX = _toPosition.offsetX,
+      offsetY = _toPosition.offsetY;
     setDragState(function () {
       return {
         isDragging: true,
         isDragged: true,
-        x: event.clientX,
-        y: event.clientY,
+        x: x,
+        y: y,
         movementX: 0,
         movementY: 0,
-        offsetX: event.nativeEvent.layerX,
-        offsetY: event.nativeEvent.layerY
+        offsetX: offsetX,
+        offsetY: offsetY
       };
     }, _onDragStart && function (_state) {
       _onDragStart(event, _objectSpread({}, _state));
     });
   });
   var onDragMove = useEvent.useEvent(function (event) {
-    event.persist();
+    var position = toPosition(event);
     setDragState(function (_state) {
       if (!_state.isDragging) return _state;
       var x = _state.x,
@@ -59,8 +91,8 @@ var useDrag = function useDrag() {
         y: y,
         offsetX: offsetX,
         offsetY: offsetY,
-        movementX: event.clientX - x,
-        movementY: event.clientY - y
+        movementX: position.x - x,
+        movementY: position.y - y
       };
     }, _onDragMove && function (_state) {
       if (!_state.isDragging) return;
@@ -68,13 +100,15 @@ var useDrag = function useDrag() {
     });
   });
   var onDragEnd = useEvent.useEvent(function (event) {
-    event.persist();
+    var _toPosition2 = toPosition(event),
+      x = _toPosition2.x,
+      y = _toPosition2.y;
     setDragState(function (_state) {
       return {
         isDragging: false,
         isDragged: true,
-        x: event.clientX - _state.offsetX,
-        y: event.clientY - _state.offsetY,
+        x: x - _state.offsetX,
+        y: y - _state.offsetY,
         movementX: 0,
         movementY: 0,
         offsetX: 0,

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

@@ -1,11 +1,10 @@
-import { type MouseEvent } from "react";
 export type UsingDrag = {
     /** Optional callback invoked upon drag end. */
-    onDragEnd?: (event: MouseEvent<HTMLDivElement>, state: DragState) => void;
+    onDragEnd?: (event: UIEvent, state: DragState) => void;
     /** Optional callback invoked upon drag movement. */
-    onDragMove?: (event: MouseEvent<HTMLDivElement>, state: DragState) => void;
+    onDragMove?: (event: UIEvent, state: DragState) => void;
     /** Optional callback invoked upon drag start. */
-    onDragStart?: (event: MouseEvent<HTMLDivElement>, state: DragState) => void;
+    onDragStart?: (event: UIEvent, state: DragState) => void;
 };
 export type DragState = {
     /**
@@ -52,9 +51,9 @@ export type DragState = {
 export type UsedDrag = [
     DragState,
     {
-        onDragEnd: (event: MouseEvent<HTMLDivElement>) => void;
-        onDragMove: (event: MouseEvent<HTMLDivElement>) => void;
-        onDragStart: (event: MouseEvent<HTMLDivElement>) => void;
+        onDragEnd: (event: UIEvent) => void;
+        onDragMove: (event: UIEvent) => void;
+        onDragStart: (event: UIEvent) => void;
     }
 ];
 /**

package/dist/hooks/use-drag.mjs

@@ -3,6 +3,34 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useUpdateState } from './use-update-state.mjs';
 import { useEvent } from './use-event.mjs';
 
+/**
+ * @description convert any event to position
+ */
+var toPosition = function toPosition(event) {
+  if (event instanceof MouseEvent) {
+    return {
+      x: event.pageX,
+      y: event.pageY,
+      offsetX: event.offsetX,
+      offsetY: event.offsetY
+    };
+  }
+  if (event instanceof TouchEvent && event.touches.length === 1) {
+    var _event$touches$item$p, _event$touches$item, _event$touches$item$p2, _event$touches$item2;
+    return {
+      x: (_event$touches$item$p = (_event$touches$item = event.touches.item(0)) === null || _event$touches$item === void 0 ? void 0 : _event$touches$item.pageX) !== null && _event$touches$item$p !== void 0 ? _event$touches$item$p : 0,
+      y: (_event$touches$item$p2 = (_event$touches$item2 = event.touches.item(0)) === null || _event$touches$item2 === void 0 ? void 0 : _event$touches$item2.pageY) !== null && _event$touches$item$p2 !== void 0 ? _event$touches$item$p2 : 0,
+      offsetX: 0,
+      offsetY: 0
+    };
+  }
+  return {
+    x: 0,
+    y: 0,
+    offsetX: 0,
+    offsetY: 0
+  };
+};
 /**
  * @description
  * Hook for dragging
@@ -26,24 +54,28 @@ var useDrag = function useDrag() {
     dragState = _useUpdateState2[0],
     setDragState = _useUpdateState2[1];
   var onDragStart = useEvent(function (event) {
-    event.persist();
+    var _toPosition = toPosition(event),
+      x = _toPosition.x,
+      y = _toPosition.y,
+      offsetX = _toPosition.offsetX,
+      offsetY = _toPosition.offsetY;
     setDragState(function () {
       return {
         isDragging: true,
         isDragged: true,
-        x: event.clientX,
-        y: event.clientY,
+        x: x,
+        y: y,
         movementX: 0,
         movementY: 0,
-        offsetX: event.nativeEvent.layerX,
-        offsetY: event.nativeEvent.layerY
+        offsetX: offsetX,
+        offsetY: offsetY
       };
     }, _onDragStart && function (_state) {
       _onDragStart(event, _objectSpread({}, _state));
     });
   });
   var onDragMove = useEvent(function (event) {
-    event.persist();
+    var position = toPosition(event);
     setDragState(function (_state) {
       if (!_state.isDragging) return _state;
       var x = _state.x,
@@ -57,8 +89,8 @@ var useDrag = function useDrag() {
         y: y,
         offsetX: offsetX,
         offsetY: offsetY,
-        movementX: event.clientX - x,
-        movementY: event.clientY - y
+        movementX: position.x - x,
+        movementY: position.y - y
       };
     }, _onDragMove && function (_state) {
       if (!_state.isDragging) return;
@@ -66,13 +98,15 @@ var useDrag = function useDrag() {
     });
   });
   var onDragEnd = useEvent(function (event) {
-    event.persist();
+    var _toPosition2 = toPosition(event),
+      x = _toPosition2.x,
+      y = _toPosition2.y;
     setDragState(function (_state) {
       return {
         isDragging: false,
         isDragged: true,
-        x: event.clientX - _state.offsetX,
-        y: event.clientY - _state.offsetY,
+        x: x - _state.offsetX,
+        y: y - _state.offsetY,
         movementX: 0,
         movementY: 0,
         offsetX: 0,

package/dist/hooks/use-draggable.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var useDrag = require('./use-drag.cjs');
+var useMounted = require('./use-mounted.cjs');
+
+var useDraggable = function useDraggable() {
+  var _useDrag = useDrag.useDrag(),
+    _useDrag2 = _slicedToArray(_useDrag, 2),
+    dragState = _useDrag2[0],
+    _useDrag2$ = _useDrag2[1],
+    onDragStart = _useDrag2$.onDragStart,
+    onDragEnd = _useDrag2$.onDragEnd,
+    onDragMove = _useDrag2$.onDragMove;
+  var draggableRef = react.useRef(null);
+  var isDragging = dragState.isDragging;
+  useMounted.useMounted(function () {
+    var _draggable = draggableRef.current;
+    if (!_draggable) return;
+    _draggable.addEventListener("mousedown", onDragStart);
+    _draggable.addEventListener("touchstart", onDragStart);
+    return function () {
+      _draggable.removeEventListener("mousedown", onDragStart);
+      _draggable.removeEventListener("touchstart", onDragStart);
+    };
+  });
+  react.useEffect(function () {
+    if (!isDragging) return;
+    window.addEventListener("mousemove", onDragMove);
+    window.addEventListener("touchmove", onDragMove);
+    window.addEventListener("mouseup", onDragEnd);
+    window.addEventListener("touchend", onDragEnd);
+    return function () {
+      window.removeEventListener("mousemove", onDragMove);
+      window.removeEventListener("touchmove", onDragMove);
+      window.removeEventListener("mouseup", onDragEnd);
+      window.removeEventListener("touchend", onDragEnd);
+    };
+  }, [isDragging]);
+  return [draggableRef, dragState];
+};
+
+exports.useDraggable = useDraggable;

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

@@ -0,0 +1 @@
+export declare const useDraggable: <T extends HTMLElement = HTMLElement>() => readonly [import("react").RefObject<T>, import("./use-drag").DragState];

package/dist/hooks/use-draggable.mjs

@@ -0,0 +1,42 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useEffect } from 'react';
+import { useDrag } from './use-drag.mjs';
+import { useMounted } from './use-mounted.mjs';
+
+var useDraggable = function useDraggable() {
+  var _useDrag = useDrag(),
+    _useDrag2 = _slicedToArray(_useDrag, 2),
+    dragState = _useDrag2[0],
+    _useDrag2$ = _useDrag2[1],
+    onDragStart = _useDrag2$.onDragStart,
+    onDragEnd = _useDrag2$.onDragEnd,
+    onDragMove = _useDrag2$.onDragMove;
+  var draggableRef = useRef(null);
+  var isDragging = dragState.isDragging;
+  useMounted(function () {
+    var _draggable = draggableRef.current;
+    if (!_draggable) return;
+    _draggable.addEventListener("mousedown", onDragStart);
+    _draggable.addEventListener("touchstart", onDragStart);
+    return function () {
+      _draggable.removeEventListener("mousedown", onDragStart);
+      _draggable.removeEventListener("touchstart", onDragStart);
+    };
+  });
+  useEffect(function () {
+    if (!isDragging) return;
+    window.addEventListener("mousemove", onDragMove);
+    window.addEventListener("touchmove", onDragMove);
+    window.addEventListener("mouseup", onDragEnd);
+    window.addEventListener("touchend", onDragEnd);
+    return function () {
+      window.removeEventListener("mousemove", onDragMove);
+      window.removeEventListener("touchmove", onDragMove);
+      window.removeEventListener("mouseup", onDragEnd);
+      window.removeEventListener("touchend", onDragEnd);
+    };
+  }, [isDragging]);
+  return [draggableRef, dragState];
+};
+
+export { useDraggable };

package/dist/hooks/use-resize.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var useEvent = require('./use-event.cjs');
+var useMount = require('./use-mount.cjs');
+
+/**
+ * @description window resize callback hook
+ */
+var useResize = function useResize(callback) {
+  var resize = useEvent.useEvent(function () {
+    callback();
+  });
+  useMount.useMount(function () {
+    window.addEventListener("resize", resize);
+    return function () {
+      window.removeEventListener("resize", resize);
+    };
+  });
+};
+
+exports.useResize = useResize;

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

@@ -0,0 +1,5 @@
+/**
+ * @description window resize callback hook
+ */
+declare const useResize: (callback: Function) => void;
+export { useResize };

package/dist/hooks/use-resize.mjs

@@ -0,0 +1,19 @@
+import { useEvent } from './use-event.mjs';
+import { useMount } from './use-mount.mjs';
+
+/**
+ * @description window resize callback hook
+ */
+var useResize = function useResize(callback) {
+  var resize = useEvent(function () {
+    callback();
+  });
+  useMount(function () {
+    window.addEventListener("resize", resize);
+    return function () {
+      window.removeEventListener("resize", resize);
+    };
+  });
+};
+
+export { useResize };

package/dist/hooks/use-throttle-callback.d.ts

@@ -15,6 +15,6 @@ import type { AnyFunction } from "@aiszlab/relax/types";
  * @example
  * 1000
  */
-declare function useThrottleCallback<T extends AnyFunction>(callback: T, wait: number): Throttled<T>;
-declare function useThrottleCallback<T extends AnyFunction, R>(throttler: Throttler<T, R>, wait: number): Throttled<T>;
+declare function useThrottleCallback<T extends AnyFunction>(callback: T, wait?: number): Throttled<T>;
+declare function useThrottleCallback<T extends AnyFunction, R>(throttler: Throttler<T, R>, wait?: number): Throttled<T>;
 export { useThrottleCallback };

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

@@ -8,10 +8,10 @@ function useUpdateState(initialState) {
   var _useState = react.useState(initialState),
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
-    setState = _useState2[1];
+    _setState = _useState2[1];
   var callbackRef = react.useRef(null);
-  var setter = react.useCallback(function (state, callback) {
-    setState(state);
+  var setState = react.useCallback(function (state, callback) {
+    _setState(state);
     callbackRef.current = callback !== null && callback !== void 0 ? callback : null;
   }, []);
   useUpdateEffect.useUpdateEffect(function () {
@@ -21,7 +21,7 @@ function useUpdateState(initialState) {
     _callback(state);
     callbackRef.current = null;
   }, [state]);
-  return [state, setter];
+  return [state, setState];
 }
 
 exports.useUpdateState = useUpdateState;

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

@@ -6,10 +6,10 @@ function useUpdateState(initialState) {
   var _useState = useState(initialState),
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
-    setState = _useState2[1];
+    _setState = _useState2[1];
   var callbackRef = useRef(null);
-  var setter = useCallback(function (state, callback) {
-    setState(state);
+  var setState = useCallback(function (state, callback) {
+    _setState(state);
     callbackRef.current = callback !== null && callback !== void 0 ? callback : null;
   }, []);
   useUpdateEffect(function () {
@@ -19,7 +19,7 @@ function useUpdateState(initialState) {
     _callback(state);
     callbackRef.current = null;
   }, [state]);
-  return [state, setter];
+  return [state, setState];
 }
 
 export { useUpdateState };

package/dist/index.cjs

@@ -37,6 +37,8 @@ var useParentSize = require('./hooks/use-parent-size.cjs');
 var useScreenSize = require('./hooks/use-screen-size.cjs');
 var useDrag = require('./hooks/use-drag.cjs');
 var useEventSource = require('./hooks/use-event-source.cjs');
+var useResize = require('./hooks/use-resize.cjs');
+var useDraggable = require('./hooks/use-draggable.cjs');
 var isRefable = require('./is/is-refable.cjs');
 var isUndefined = require('./is/is-undefined.cjs');
 var isNull = require('./is/is-null.cjs');
@@ -115,6 +117,8 @@ exports.useParentSize = useParentSize.useParentSize;
 exports.useScreenSize = useScreenSize.useScreenSize;
 exports.useDrag = useDrag.useDrag;
 exports.useEventSource = useEventSource.useEventSource;
+exports.useResize = useResize.useResize;
+exports.useDraggable = useDraggable.useDraggable;
 exports.isRefable = isRefable.isRefable;
 exports.isUndefined = isUndefined.isUndefined;
 exports.isNull = isNull.isNull;

package/dist/index.d.ts

@@ -39,6 +39,8 @@ export { useParentSize } from "./hooks/use-parent-size";
 export { useScreenSize } from "./hooks/use-screen-size";
 export { useDrag } from "./hooks/use-drag";
 export { useEventSource } from "./hooks/use-event-source";
+export { useResize } from "./hooks/use-resize";
+export { useDraggable } from "./hooks/use-draggable";
 /**
  * @description
  * is

package/dist/index.mjs

@@ -35,6 +35,8 @@ export { useParentSize } from './hooks/use-parent-size.mjs';
 export { useScreenSize } from './hooks/use-screen-size.mjs';
 export { useDrag } from './hooks/use-drag.mjs';
 export { useEventSource } from './hooks/use-event-source.mjs';
+export { useResize } from './hooks/use-resize.mjs';
+export { useDraggable } from './hooks/use-draggable.mjs';
 export { isRefable } from './is/is-refable.mjs';
 export { isUndefined } from './is/is-undefined.mjs';
 export { isNull } from './is/is-null.mjs';

package/dist/react/mount-ref.cjs

@@ -1,8 +1,12 @@
 'use strict';
 
 var isFunction = require('../is/is-function.cjs');
+var isVoid = require('../is/is-void.cjs');
 
 var mountRef = function mountRef(refable, reference) {
+  if (isVoid.isVoid(refable)) {
+    return;
+  }
   if (isFunction.isFunction(refable)) {
     refable(reference);
     return;

package/dist/react/mount-ref.d.ts

@@ -1,3 +1,4 @@
 import type { MutableRefObject, RefCallback } from "react";
+import { Voidable } from "../types";
 export type Refable<T> = RefCallback<T> | MutableRefObject<T> | string;
-export declare const mountRef: <T>(refable: Refable<T>, reference: T) => void;
+export declare const mountRef: <T>(refable: Voidable<Refable<T>>, reference: T) => void;

package/dist/react/mount-ref.mjs

@@ -1,6 +1,10 @@
 import { isFunction } from '../is/is-function.mjs';
+import { isVoid } from '../is/is-void.mjs';
 
 var mountRef = function mountRef(refable, reference) {
+  if (isVoid(refable)) {
+    return;
+  }
   if (isFunction(refable)) {
     refable(reference);
     return;

package/dist/utils/concat.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @description
+ * concat array
+ */
+declare const concat: <T>(...arrays: T[][]) => T[];
+export { concat };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "description": "react utils collection",
   "exports": {
     ".": {
@@ -43,7 +43,7 @@
     "@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",
+    "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7.20.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -52,8 +52,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.24.4",
-    "typescript": "5.6.2"
+    "rollup": "^4.28.1",
+    "typescript": "5.7.3"
   },
   "peerDependencies": {
     "react": "18",