@teamturing/react-kit 2.22.3 → 2.23.0

package/dist/core/OverlayPopper/index.d.ts

@@ -4,9 +4,10 @@ import { FocusTrapHookSettings } from '../../hook/useFocusTrap';
 import { FocusZoneHookSettings } from '../../hook/useFocusZone';
 import { OverlayProps } from '../Overlay';
 type Props = {
-    children: ReactNode | ((popperProps: HTMLAttributes<HTMLElement>, { isOpen, openOverlay }: {
+    children: ReactNode | ((popperProps: HTMLAttributes<HTMLElement>, { isOpen, openOverlay, closeOverlay }: {
         isOpen: boolean;
         openOverlay: () => void;
+        closeOverlay: () => void;
     }) => ReactNode);
     renderOverlay: (overlayProps: OverlayProps & {
         ref?: ForwardedRef<HTMLDivElement>;
@@ -16,12 +17,13 @@ type Props = {
     }, { elements }: {
         elements: UseFloatingReturn['elements'];
     }) => ReactNode;
+    triggeredBy?: 'click' | 'hover';
     placement?: Placement;
     focusZoneSettings?: Partial<FocusZoneHookSettings>;
     focusTrapSettings?: Partial<FocusTrapHookSettings>;
     onOpen?: () => void;
     onClose?: () => void;
 };
-declare const OverlayPopper: ({ children: propChildren, renderOverlay, placement, focusZoneSettings, focusTrapSettings, onOpen, onClose, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const OverlayPopper: ({ children: propChildren, renderOverlay, triggeredBy, placement, focusZoneSettings, focusTrapSettings, onOpen, onClose, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default OverlayPopper;
 export type { Props as OverlayPopperProps };

package/dist/hook/useDelayedFunction.d.ts

@@ -0,0 +1,10 @@
+type Options<T extends (...args: any) => void> = {
+    func: T;
+    /**
+     * ms
+     */
+    delay?: number;
+};
+declare const useDelayedFunction: <T extends (...args: any) => void>({ func, delay }: Options<T>) => T;
+export default useDelayedFunction;
+export type { Options as UseDelayedFunctionOptions };

package/dist/hook/useHover.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type Options<T extends HTMLElement = HTMLDivElement> = {
+    targetRef?: React.RefObject<T>;
+};
+declare const useHover: <T extends HTMLElement = HTMLDivElement>({ targetRef }: Options<T>) => {
+    ref: import("react").RefObject<T>;
+    hovered: boolean;
+};
+export default useHover;
+export type { Options as UseHoverOptions };

package/dist/hook/useMousePosition.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+type Options<T extends HTMLElement> = {
+    resetOnExit?: boolean;
+    targetRef?: RefObject<T>;
+};
+declare const useMousePosition: <T extends HTMLElement = any>({ targetRef, resetOnExit }: Options<T>) => {
+    x: number;
+    y: number;
+    ref: RefObject<T>;
+};
+export default useMousePosition;
+export type { Options as UseMousePositionOptions };

package/dist/index.d.ts

@@ -92,10 +92,13 @@ export { default as EnigmaUI } from './enigma/EnigmaUI';
 /**
  * hooks
  */
+export { default as useDelayedFunction } from './hook/useDelayedFunction';
 export { default as useDevice } from './hook/useDevice';
 export { default as useFocusTrap } from './hook/useFocusTrap';
 export { default as useFocusZone } from './hook/useFocusZone';
+export { default as useHover } from './hook/useHover';
 export { default as useMediaQuery } from './hook/useMediaQuery';
+export { default as useMousePosition } from './hook/useMousePosition';
 export { default as useOutsideClick } from './hook/useOutsideClick';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef';
 export { default as useRelocation } from './hook/useRelocation';

package/dist/index.js

@@ -20835,6 +20835,22 @@ function useFloating(options) {
   }), [data, update, refs, elements, floatingStyles]);
 }
 
+const useDelayedFunction = ({
+  func,
+  delay
+}) => {
+  const timeout = React.useRef(-1);
+  const delayedFunc = (...args) => {
+    if (delay === 0 || delay === undefined) {
+      func(...args);
+    } else {
+      timeout.current = window.setTimeout(func, delay);
+    }
+  };
+  React.useEffect(() => () => window.clearTimeout(timeout.current), []);
+  return delayedFunc;
+};
+
 const useFocusZone = (settings = {}, dependencies = []) => {
   const containerRef = useProvidedOrCreatedRef(settings.containerRef);
   const useActiveDescendant = !!settings.activeDescendantFocus;
@@ -20864,6 +20880,50 @@ 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
 }) => {
@@ -20883,6 +20943,7 @@ const useToggleState = ({
 const OverlayPopper = ({
   children: propChildren,
   renderOverlay,
+  triggeredBy = 'click',
   placement = 'bottom-start',
   focusZoneSettings,
   focusTrapSettings,
@@ -20904,6 +20965,12 @@ 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();
@@ -20916,28 +20983,40 @@ const OverlayPopper = ({
     onClose?.();
     closeOverlay();
   };
+  const delayedHandleOverlayClose = useDelayedFunction({
+    func: handleOverlayClose,
+    delay: 150
+  });
   const handleDismiss = () => {
     handleOverlayClose();
   };
   const defaultPopperProps = {
-    onClick: handleOverlayToggle,
-    onKeyDown: e => {
-      if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-        e.preventDefault();
-        handleOverlayOpen();
-      }
-      e.stopPropagation();
-    },
     tabIndex: 0,
+    ...(triggeredBy === 'click' ? {
+      onClick: handleOverlayToggle,
+      onKeyDown: e => {
+        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+          e.preventDefault();
+          handleOverlayOpen();
+        }
+        e.stopPropagation();
+      }
+    } : triggeredBy === 'hover' ? {
+      onMouseEnter: handleOverlayOpen,
+      onMouseLeave: () => {
+        if (x === 0 && y === 0) {
+          delayedHandleOverlayClose();
+        }
+      }
+    } : {}),
     ...{
       ref: refs.setReference
     }
   };
-  const children = isFunction$1(propChildren) ? propChildren({
-    ...defaultPopperProps
-  }, {
+  const children = isFunction$1(propChildren) ? propChildren(defaultPopperProps, {
     isOpen,
-    openOverlay: handleOverlayOpen
+    openOverlay: handleOverlayOpen,
+    closeOverlay: handleOverlayClose
   }) : React.Children.map(propChildren, child => /*#__PURE__*/React.cloneElement(child, {
     ...defaultPopperProps
   }));
@@ -20960,7 +21039,9 @@ const OverlayPopper = ({
       style: {
         ...floatingStyles
       },
-      onDismiss: handleDismiss
+      onDismiss: handleDismiss,
+      onMouseEnter: openOverlay,
+      onMouseLeave: delayedHandleOverlayClose
     }, {
       isOpen,
       closeOverlay: handleOverlayClose
@@ -26000,6 +26081,30 @@ const useDevice = () => {
   return deviceState || {};
 };
 
+const useHover = ({
+  targetRef
+}) => {
+  const [hovered, setHovered] = React.useState(false);
+  const ref = useProvidedOrCreatedRef(targetRef);
+  const onMouseEnter = React.useCallback(() => setHovered(true), []);
+  const onMouseLeave = React.useCallback(() => setHovered(false), []);
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.addEventListener('mouseenter', onMouseEnter);
+      ref.current.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        ref.current?.removeEventListener('mouseenter', onMouseEnter);
+        ref.current?.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+    return undefined;
+  }, []);
+  return {
+    ref,
+    hovered
+  };
+};
+
 /**
  * 특정 컴포넌트을 제외한 바깥쪽을 클릭했을 때를 핸들링하기 위한 훅입니다.
  */
@@ -26078,10 +26183,13 @@ exports.lineClamp = lineClamp;
 exports.sx = sx;
 exports.textDecoration = textDecoration;
 exports.theme = theme;
+exports.useDelayedFunction = useDelayedFunction;
 exports.useDevice = useDevice;
 exports.useFocusTrap = useFocusTrap;
 exports.useFocusZone = useFocusZone;
+exports.useHover = useHover;
 exports.useMediaQuery = useMediaQuery;
+exports.useMousePosition = useMousePosition;
 exports.useOutsideClick = useOutsideClick;
 exports.useProvidedOrCreatedRef = useProvidedOrCreatedRef;
 exports.useRelocation = useRelocation;

package/esm/core/OverlayPopper/index.js

@@ -2,8 +2,10 @@ import { useFloating } from '../../node_modules/@floating-ui/react-dom/dist/floa
 import { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { Children, cloneElement } from 'react';
 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';
@@ -12,6 +14,7 @@ import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/f
 const OverlayPopper = ({
   children: propChildren,
   renderOverlay,
+  triggeredBy = 'click',
   placement = 'bottom-start',
   focusZoneSettings,
   focusTrapSettings,
@@ -33,6 +36,12 @@ 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();
@@ -45,28 +54,40 @@ const OverlayPopper = ({
     onClose?.();
     closeOverlay();
   };
+  const delayedHandleOverlayClose = useDelayedFunction({
+    func: handleOverlayClose,
+    delay: 150
+  });
   const handleDismiss = () => {
     handleOverlayClose();
   };
   const defaultPopperProps = {
-    onClick: handleOverlayToggle,
-    onKeyDown: e => {
-      if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-        e.preventDefault();
-        handleOverlayOpen();
-      }
-      e.stopPropagation();
-    },
     tabIndex: 0,
+    ...(triggeredBy === 'click' ? {
+      onClick: handleOverlayToggle,
+      onKeyDown: e => {
+        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+          e.preventDefault();
+          handleOverlayOpen();
+        }
+        e.stopPropagation();
+      }
+    } : triggeredBy === 'hover' ? {
+      onMouseEnter: handleOverlayOpen,
+      onMouseLeave: () => {
+        if (x === 0 && y === 0) {
+          delayedHandleOverlayClose();
+        }
+      }
+    } : {}),
     ...{
       ref: refs.setReference
     }
   };
-  const children = isFunction(propChildren) ? propChildren({
-    ...defaultPopperProps
-  }, {
+  const children = isFunction(propChildren) ? propChildren(defaultPopperProps, {
     isOpen,
-    openOverlay: handleOverlayOpen
+    openOverlay: handleOverlayOpen,
+    closeOverlay: handleOverlayClose
   }) : Children.map(propChildren, child => /*#__PURE__*/cloneElement(child, {
     ...defaultPopperProps
   }));
@@ -89,7 +110,9 @@ const OverlayPopper = ({
       style: {
         ...floatingStyles
       },
-      onDismiss: handleDismiss
+      onDismiss: handleDismiss,
+      onMouseEnter: openOverlay,
+      onMouseLeave: delayedHandleOverlayClose
     }, {
       isOpen,
       closeOverlay: handleOverlayClose

package/esm/hook/useDelayedFunction.js

@@ -0,0 +1,19 @@
+import { useRef, useEffect } from 'react';
+
+const useDelayedFunction = ({
+  func,
+  delay
+}) => {
+  const timeout = useRef(-1);
+  const delayedFunc = (...args) => {
+    if (delay === 0 || delay === undefined) {
+      func(...args);
+    } else {
+      timeout.current = window.setTimeout(func, delay);
+    }
+  };
+  useEffect(() => () => window.clearTimeout(timeout.current), []);
+  return delayedFunc;
+};
+
+export { useDelayedFunction as default };

package/esm/hook/useHover.js

@@ -0,0 +1,28 @@
+import { useState, useCallback, useEffect } from 'react';
+import useProvidedOrCreatedRef from './useProvidedOrCreatedRef.js';
+
+const useHover = ({
+  targetRef
+}) => {
+  const [hovered, setHovered] = useState(false);
+  const ref = useProvidedOrCreatedRef(targetRef);
+  const onMouseEnter = useCallback(() => setHovered(true), []);
+  const onMouseLeave = useCallback(() => setHovered(false), []);
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.addEventListener('mouseenter', onMouseEnter);
+      ref.current.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        ref.current?.removeEventListener('mouseenter', onMouseEnter);
+        ref.current?.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+    return undefined;
+  }, []);
+  return {
+    ref,
+    hovered
+  };
+};
+
+export { useHover as default };

package/esm/hook/useMousePosition.js

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import useProvidedOrCreatedRef from './useProvidedOrCreatedRef.js';
+
+const useMousePosition = ({
+  targetRef,
+  resetOnExit = false
+}) => {
+  const [position, setPosition] = 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
+  });
+  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
+  };
+};
+
+export { useMousePosition as default };

package/esm/index.js

@@ -41,10 +41,13 @@ export { default as Tooltip } from './core/Tooltip/index.js';
 export { default as View } from './core/View/index.js';
 export { default as UnstyledButton } from './core/_UnstyledButton.js';
 export { default as EnigmaUI } from './enigma/EnigmaUI/index.js';
+export { default as useDelayedFunction } from './hook/useDelayedFunction.js';
 export { default as useDevice } from './hook/useDevice.js';
 export { default as useFocusTrap } from './hook/useFocusTrap.js';
 export { default as useFocusZone } from './hook/useFocusZone.js';
+export { default as useHover } from './hook/useHover.js';
 export { default as useMediaQuery } from './hook/useMediaQuery.js';
+export { default as useMousePosition } from './hook/useMousePosition.js';
 export { default as useOutsideClick } from './hook/useOutsideClick.js';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef.js';
 export { default as useRelocation } from './hook/useRelocation.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.22.3",
+  "version": "2.23.0",
   "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": "8954829533862df7f2899b1f9bc80d689b5afab8"
+  "gitHead": "b1e684052cbf2fb69649fd93db8a1b76cca52ad7"
 }