@aiszlab/relax 2.0.8-beta.2 → 2.0.8-beta.4

package/dist/dom/contains.cjs

@@ -6,7 +6,7 @@ var contains = function contains(root) {
     return false;
   }
   // Use native if support
-  if (!!root.contains) {
+  if (root.contains) {
     return root.contains(node);
   }
   // `document.contains` not support with IE11

package/dist/dom/contains.mjs

@@ -4,7 +4,7 @@ var contains = function contains(root) {
     return false;
   }
   // Use native if support
-  if (!!root.contains) {
+  if (root.contains) {
     return root.contains(node);
   }
   // `document.contains` not support with IE11

package/dist/hooks/use-hover.cjs

@@ -1,34 +1,44 @@
 'use strict';
 
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
 var useBoolean = require('./use-boolean.cjs');
-var chain = require('../utils/chain.cjs');
 var useEvent = require('./use-event.cjs');
-var useDefault = require('./use-default.cjs');
+var contains = require('../dom/contains.cjs');
 
 var useHover = function useHover() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     onEnter = _ref.onEnter,
-    onLeave = _ref.onLeave;
+    onLeave = _ref.onLeave,
+    ref = _ref.ref;
   var _useBoolean = useBoolean.useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isHovered = _useBoolean2[0],
     _useBoolean2$ = _useBoolean2[1],
     turnOn = _useBoolean2$.turnOn,
     turnOff = _useBoolean2$.turnOff;
-  var onPointerEnter = useEvent.useEvent(function (event) {
-    chain.chain(onEnter, turnOn)(event);
+  var enter = useEvent.useEvent(function (event) {
+    onEnter === null || onEnter === void 0 || onEnter(event);
+    turnOn();
   });
-  var onPointerLeave = useEvent.useEvent(function (event) {
-    chain.chain(onLeave, turnOff)(event);
+  var leave = useEvent.useEvent(function (event) {
+    onLeave === null || onLeave === void 0 || onLeave(event);
+    turnOff();
   });
-  var hoverProps = useDefault.useDefault(function () {
-    return {
-      onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave
-    };
-  });
-  return [isHovered, hoverProps];
+  var moveOut = react.useCallback(function (event) {
+    if (!(ref !== null && ref !== void 0 && ref.current)) return;
+    if (contains.contains(ref === null || ref === void 0 ? void 0 : ref.current, event.relatedTarget)) return;
+    leave(event);
+  }, []);
+  return [isHovered, _objectSpread({
+    onMouseEnter: enter,
+    onPointerEnter: enter,
+    onMouseLeave: leave,
+    onPointerLeave: leave
+  }, !!ref && {
+    onMouseOut: moveOut
+  })];
 };
 
 exports.useHover = useHover;

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

@@ -1,14 +1,19 @@
-import { type PointerEventHandler } from "react";
+import { type PointerEventHandler, type MouseEventHandler, type RefObject } from "react";
+import type { Nullable } from "../types";
 type UsingHover<T> = {
-    onEnter?: PointerEventHandler<T>;
-    onLeave?: PointerEventHandler<T>;
+    onEnter?: MouseEventHandler<T>;
+    onLeave?: MouseEventHandler<T>;
+    ref?: RefObject<Nullable<T>>;
 };
 type UsedHover<T> = [
     boolean,
     {
         onPointerEnter: PointerEventHandler<T>;
         onPointerLeave: PointerEventHandler<T>;
+        onMouseEnter: MouseEventHandler<T>;
+        onMouseLeave: MouseEventHandler<T>;
+        onMouseOut?: MouseEventHandler<T>;
     }
 ];
-export declare const useHover: <T extends Element = Element>({ onEnter, onLeave, }?: UsingHover<T>) => UsedHover<T>;
+export declare const useHover: <T extends Element = Element>({ onEnter, onLeave, ref, }?: UsingHover<T>) => UsedHover<T>;
 export {};

package/dist/hooks/use-hover.mjs

@@ -1,32 +1,42 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useCallback } from 'react';
 import { useBoolean } from './use-boolean.mjs';
-import { chain } from '../utils/chain.mjs';
 import { useEvent } from './use-event.mjs';
-import { useDefault } from './use-default.mjs';
+import { contains } from '../dom/contains.mjs';
 
 var useHover = function useHover() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     onEnter = _ref.onEnter,
-    onLeave = _ref.onLeave;
+    onLeave = _ref.onLeave,
+    ref = _ref.ref;
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isHovered = _useBoolean2[0],
     _useBoolean2$ = _useBoolean2[1],
     turnOn = _useBoolean2$.turnOn,
     turnOff = _useBoolean2$.turnOff;
-  var onPointerEnter = useEvent(function (event) {
-    chain(onEnter, turnOn)(event);
+  var enter = useEvent(function (event) {
+    onEnter === null || onEnter === void 0 || onEnter(event);
+    turnOn();
   });
-  var onPointerLeave = useEvent(function (event) {
-    chain(onLeave, turnOff)(event);
+  var leave = useEvent(function (event) {
+    onLeave === null || onLeave === void 0 || onLeave(event);
+    turnOff();
   });
-  var hoverProps = useDefault(function () {
-    return {
-      onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave
-    };
-  });
-  return [isHovered, hoverProps];
+  var moveOut = useCallback(function (event) {
+    if (!(ref !== null && ref !== void 0 && ref.current)) return;
+    if (contains(ref === null || ref === void 0 ? void 0 : ref.current, event.relatedTarget)) return;
+    leave(event);
+  }, []);
+  return [isHovered, _objectSpread({
+    onMouseEnter: enter,
+    onPointerEnter: enter,
+    onMouseLeave: leave,
+    onPointerLeave: leave
+  }, !!ref && {
+    onMouseOut: moveOut
+  })];
 };
 
 export { useHover };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "2.0.8-beta.2",
+  "version": "2.0.8-beta.4",
   "description": "react utils collection",
   "exports": {
     ".": {