@teamturing/react-kit 2.23.0 → 2.23.1

package/dist/index.js

@@ -20880,50 +20880,6 @@ const useFocusZone = (settings = {}, dependencies = []) => {
   };
 };
 
-const useMousePosition = ({
-  targetRef,
-  resetOnExit = false
-}) => {
-  const [position, setPosition] = React.useState({
-    x: 0,
-    y: 0
-  });
-  const ref = useProvidedOrCreatedRef(targetRef);
-  const setMousePosition = event => {
-    if (ref.current) {
-      const rect = event.currentTarget.getBoundingClientRect();
-      const x = Math.max(0, Math.round(event.pageX - rect.left - (window.pageXOffset || window.scrollX)));
-      const y = Math.max(0, Math.round(event.pageY - rect.top - (window.pageYOffset || window.scrollY)));
-      setPosition({
-        x,
-        y
-      });
-    } else {
-      setPosition({
-        x: event.clientX,
-        y: event.clientY
-      });
-    }
-  };
-  const resetMousePosition = () => setPosition({
-    x: 0,
-    y: 0
-  });
-  React.useEffect(() => {
-    const element = ref?.current ? ref.current : document;
-    element.addEventListener('mousemove', setMousePosition);
-    if (resetOnExit) element.addEventListener('mouseleave', resetMousePosition);
-    return () => {
-      element.removeEventListener('mousemove', setMousePosition);
-      if (resetOnExit) element.removeEventListener('mouseleave', resetMousePosition);
-    };
-  }, [ref.current]);
-  return {
-    ref,
-    ...position
-  };
-};
-
 const useToggleState = ({
   initialState = false
 }) => {
@@ -20965,12 +20921,6 @@ const OverlayPopper = ({
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({
     initialState: false
   });
-  const {
-    x,
-    y
-  } = useMousePosition({
-    targetRef: refs.floating
-  });
   const handleOverlayToggle = () => {
     if (!isOpen) onOpen?.();else onClose?.();
     toggleOverlay();
@@ -21003,11 +20953,7 @@ const OverlayPopper = ({
       }
     } : triggeredBy === 'hover' ? {
       onMouseEnter: handleOverlayOpen,
-      onMouseLeave: () => {
-        if (x === 0 && y === 0) {
-          delayedHandleOverlayClose();
-        }
-      }
+      onMouseLeave: delayedHandleOverlayClose
     } : {}),
     ...{
       ref: refs.setReference
@@ -21039,9 +20985,7 @@ const OverlayPopper = ({
       style: {
         ...floatingStyles
       },
-      onDismiss: handleDismiss,
-      onMouseEnter: openOverlay,
-      onMouseLeave: delayedHandleOverlayClose
+      onDismiss: handleDismiss
     }, {
       isOpen,
       closeOverlay: handleOverlayClose
@@ -26105,6 +26049,50 @@ const useHover = ({
   };
 };
 
+const useMousePosition = ({
+  targetRef,
+  resetOnExit = false
+}) => {
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
+  const ref = useProvidedOrCreatedRef(targetRef);
+  const setMousePosition = event => {
+    if (ref.current) {
+      const rect = event.currentTarget.getBoundingClientRect();
+      const x = Math.max(0, Math.round(event.pageX - rect.left - (window.pageXOffset || window.scrollX)));
+      const y = Math.max(0, Math.round(event.pageY - rect.top - (window.pageYOffset || window.scrollY)));
+      setPosition({
+        x,
+        y
+      });
+    } else {
+      setPosition({
+        x: event.clientX,
+        y: event.clientY
+      });
+    }
+  };
+  const resetMousePosition = () => setPosition({
+    x: 0,
+    y: 0
+  });
+  React.useEffect(() => {
+    const element = ref?.current ? ref.current : document;
+    element.addEventListener('mousemove', setMousePosition);
+    if (resetOnExit) element.addEventListener('mouseleave', resetMousePosition);
+    return () => {
+      element.removeEventListener('mousemove', setMousePosition);
+      if (resetOnExit) element.removeEventListener('mouseleave', resetMousePosition);
+    };
+  }, [ref.current]);
+  return {
+    ref,
+    ...position
+  };
+};
+
 /**
  * 특정 컴포넌트을 제외한 바깥쪽을 클릭했을 때를 핸들링하기 위한 훅입니다.
  */

package/esm/core/OverlayPopper/index.js

@@ -5,7 +5,6 @@ import { useTheme } from 'styled-components';
 import useDelayedFunction from '../../hook/useDelayedFunction.js';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import useFocusZone from '../../hook/useFocusZone.js';
-import useMousePosition from '../../hook/useMousePosition.js';
 import useToggleState from '../../hook/useToggleState.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
@@ -36,12 +35,6 @@ const OverlayPopper = ({
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({
     initialState: false
   });
-  const {
-    x,
-    y
-  } = useMousePosition({
-    targetRef: refs.floating
-  });
   const handleOverlayToggle = () => {
     if (!isOpen) onOpen?.();else onClose?.();
     toggleOverlay();
@@ -74,11 +67,7 @@ const OverlayPopper = ({
       }
     } : triggeredBy === 'hover' ? {
       onMouseEnter: handleOverlayOpen,
-      onMouseLeave: () => {
-        if (x === 0 && y === 0) {
-          delayedHandleOverlayClose();
-        }
-      }
+      onMouseLeave: delayedHandleOverlayClose
     } : {}),
     ...{
       ref: refs.setReference
@@ -110,9 +99,7 @@ const OverlayPopper = ({
       style: {
         ...floatingStyles
       },
-      onDismiss: handleDismiss,
-      onMouseEnter: openOverlay,
-      onMouseLeave: delayedHandleOverlayClose
+      onDismiss: handleDismiss
     }, {
       isOpen,
       closeOverlay: handleOverlayClose

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.23.0",
+  "version": "2.23.1",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "b1e684052cbf2fb69649fd93db8a1b76cca52ad7"
+  "gitHead": "5268a60ac707cb805ced97d347b7ab20de29b0f9"
 }