Improve useManageState hook

Author: Kubit

src/hooks/useManageState/useManageState.tsx

@@ -35,39 +35,54 @@ export const useManageState = ({
     []
   );
 
-  const onMouseOver = () => {
+  const supportHover = () => {
+    if (typeof window !== 'undefined' && window?.matchMedia) {
+      const query = window.matchMedia('(hover: none)');
+      return !query.matches;
+    }
+    return true;
+  };
+
+  const onMouseEnter = () => {
     setOver(true);
   };
 
-  const onMouseOut = () => {
+  const onMouseLeave = () => {
     setOver(false);
   };
 
-  const onMouseDown = () => {
+  const onPointerDown = () => {
     setPressed(true);
   };
 
-  const onMouseUp = () => {
+  const onPointerCancel = () => {
+    setPressed(false);
+  };
+
+  const onPointerUp = () => {
     setPressed(false);
   };
 
   const setRef = useCallback(node => {
     if (node) {
       innerRef.current = node;
       if (props.states.includes(STATES.PRESSED)) {
-        innerRef?.current?.addEventListener('mousedown', onMouseDown);
-        innerRef?.current?.addEventListener('mouseup', onMouseUp);
-      } else if (props.states.includes(STATES.HOVER)) {
-        innerRef?.current?.addEventListener('mouseover', onMouseOver);
-        innerRef?.current?.addEventListener('mouseout', onMouseOut);
+        innerRef?.current?.addEventListener('pointerdown', onPointerDown);
+        innerRef?.current?.addEventListener('pointercancel', onPointerCancel);
+        window.addEventListener('pointerup', onPointerUp);
+      }
+      if (supportHover() && props.states.includes(STATES.HOVER)) {
+        innerRef?.current?.addEventListener('mouseenter', onMouseEnter);
+        innerRef?.current?.addEventListener('mouseleave', onMouseLeave);
       }
     } else {
       // delete over listeners
-      innerRef?.current?.removeEventListener('mouseover', onMouseOver);
-      innerRef?.current?.removeEventListener('mouseout', onMouseOut);
+      innerRef?.current?.removeEventListener('mouseenter', onMouseEnter);
+      innerRef?.current?.removeEventListener('mouseleave', onMouseLeave);
       // delete pressed listeners
-      innerRef?.current?.removeEventListener('mousedown', onMouseDown);
-      innerRef?.current?.removeEventListener('mouseup', onMouseUp);
+      innerRef?.current?.removeEventListener('pointerdown', onPointerDown);
+      innerRef?.current?.removeEventListener('pointercancel', onPointerCancel);
+      window.removeEventListener('pointerup', onPointerUp);
       innerRef.current = node;
     }
   }, []);