npm - @hh.ru/magritte-ui-menu - Versions diffs - 1.0.5 → 1.0.7 - Mend

@hh.ru/magritte-ui-menu 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/useSubmenuSafeZone.js ADDED Viewed

@@ -0,0 +1,105 @@
+import './index.css';
+import { useRef, useCallback, useEffect } from 'react';
+import { throttle } from '@hh.ru/magritte-common-func-utils';
+import { hasMovedEnough, isMovingTowardsSubmenu } from './safeZone.js';
+const MOUSE_MOVE_THROTTLE_MS = 50;
+const SCROLL_THROTTLE_MS = 300;
+const SUBMENU_CLOSE_DELAY_MS = 300;
+/**
+ * Держит подменю открытым, пока курсор движется в его сторону, иначе планирует
+ * отложенное закрытие. Инкапсулирует подписку на DOM-события, кэширование
+ * координат, троттлинг и учёт таймера закрытия, чтобы это поведение можно было
+ * проверять независимо от компонента `MenuItem`.
+ */
+const useSubmenuSafeZone = ({ active, dropContainer, itemRef, submenuRef, onClose, }) => {
+    const stateRef = useRef({
+        dropCoords: null,
+        prevMouseCoords: null,
+        submenuCoords: null,
+    });
+    const closeTimeoutRef = useRef(null);
+    // Храним в ref, чтобы новая ссылка `onClose` на каждом рендере не заставляла
+    // эффект переподписывать слушатели.
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    const cancelPendingClose = useCallback(() => {
+        if (closeTimeoutRef.current !== null) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    const trackPointer = useCallback((point) => {
+        stateRef.current.prevMouseCoords = point;
+    }, []);
+    useEffect(() => {
+        if (!active || !dropContainer || !itemRef.current || !submenuRef.current) {
+            return void 0;
+        }
+        const scheduleClose = () => {
+            if (closeTimeoutRef.current === null) {
+                closeTimeoutRef.current = setTimeout(() => {
+                    closeTimeoutRef.current = null;
+                    onCloseRef.current();
+                }, SUBMENU_CLOSE_DELAY_MS);
+            }
+        };
+        const checkIfMouseIsMovingTowardsSubmenu = throttle((event) => {
+            const currentMouseCoords = { x: event.clientX, y: event.clientY };
+            const isMouseOverItemOrSubmenu = itemRef.current?.contains(event.target) ||
+                submenuRef.current?.contains(event.target);
+            if (isMouseOverItemOrSubmenu) {
+                cancelPendingClose();
+            }
+            else if (stateRef.current.dropCoords !== null &&
+                stateRef.current.prevMouseCoords !== null &&
+                stateRef.current.submenuCoords !== null) {
+                if (!hasMovedEnough(stateRef.current.prevMouseCoords, currentMouseCoords)) {
+                    return;
+                }
+                const movingTowardsSubmenu = isMovingTowardsSubmenu(stateRef.current.prevMouseCoords, currentMouseCoords, stateRef.current.dropCoords, stateRef.current.submenuCoords);
+                if (movingTowardsSubmenu) {
+                    cancelPendingClose();
+                }
+                else {
+                    scheduleClose();
+                }
+            }
+            stateRef.current.prevMouseCoords = currentMouseCoords;
+        }, MOUSE_MOVE_THROTTLE_MS);
+        const checkIfMouseIsOverItemOrSubmenu = throttle(() => {
+            if (stateRef.current.prevMouseCoords !== null) {
+                const elementUnderMouse = document.elementFromPoint(stateRef.current.prevMouseCoords.x, stateRef.current.prevMouseCoords.y);
+                const isMouseOverItemOrSubmenu = itemRef.current?.contains(elementUnderMouse) || submenuRef.current?.contains(elementUnderMouse);
+                if (isMouseOverItemOrSubmenu) {
+                    cancelPendingClose();
+                }
+                else {
+                    scheduleClose();
+                }
+            }
+        }, SCROLL_THROTTLE_MS);
+        document.addEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);
+        dropContainer.addEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);
+        document.addEventListener('scroll', checkIfMouseIsOverItemOrSubmenu, { capture: true, passive: true });
+        stateRef.current.dropCoords = dropContainer.getBoundingClientRect();
+        stateRef.current.submenuCoords = submenuRef.current.getBoundingClientRect();
+        return () => {
+            document.removeEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);
+            dropContainer.removeEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);
+            document.removeEventListener('scroll', checkIfMouseIsOverItemOrSubmenu, { capture: true });
+            checkIfMouseIsMovingTowardsSubmenu.cancel();
+            checkIfMouseIsOverItemOrSubmenu.cancel();
+            cancelPendingClose();
+            stateRef.current = {
+                dropCoords: null,
+                prevMouseCoords: null,
+                submenuCoords: null,
+            };
+        };
+    }, [active, dropContainer, itemRef, submenuRef, cancelPendingClose]);
+    return { trackPointer, cancelPendingClose };
+};
+export { MOUSE_MOVE_THROTTLE_MS, SCROLL_THROTTLE_MS, SUBMENU_CLOSE_DELAY_MS, useSubmenuSafeZone };
+//# sourceMappingURL=useSubmenuSafeZone.js.map

package/useSubmenuSafeZone.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSubmenuSafeZone.js","sources":["src/useSubmenuSafeZone.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from 'react';\n\nimport { throttle } from '@hh.ru/magritte-common-func-utils';\nimport { type Point, hasMovedEnough, isMovingTowardsSubmenu } from '@hh.ru/magritte-ui-menu/safeZone';\n\nexport const MOUSE_MOVE_THROTTLE_MS = 50;\nexport const SCROLL_THROTTLE_MS = 300;\nexport const SUBMENU_CLOSE_DELAY_MS = 300;\n\ninterface UseSubmenuSafeZoneParams {\n /** Активно ли отслеживание безопасной зоны (подменю открыто). */\n active: boolean;\n /** Скролл-контейнер, в котором рендерится родительское меню. */\n dropContainer: HTMLElement | null;\n /** Элемент родительского пункта меню. */\n itemRef: RefObject<HTMLElement | null>;\n /** Элемент дропа подменю. */\n submenuRef: RefObject<HTMLElement | null>;\n /** Вызывается, когда безопасная зона решает, что подменю нужно закрыть. */\n onClose: () => void;\n}\n\ninterface UseSubmenuSafeZoneResult {\n /** Запоминает последнюю позицию курсора (вызывать из обработчиков указателя пункта). */\n trackPointer: (point: Point) => void;\n /** Отменяет запланированное закрытие (вызывать при (пере)открытии подменю). */\n cancelPendingClose: () => void;\n}\n\n/**\n * Держит подменю открытым, пока курсор движется в его сторону, иначе планирует\n * отложенное закрытие. Инкапсулирует подписку на DOM-события, кэширование\n * координат, троттлинг и учёт таймера закрытия, чтобы это поведение можно было\n * проверять независимо от компонента `MenuItem`.\n */\nexport const useSubmenuSafeZone = ({\n active,\n dropContainer,\n itemRef,\n submenuRef,\n onClose,\n}: UseSubmenuSafeZoneParams): UseSubmenuSafeZoneResult => {\n const stateRef = useRef<{\n dropCoords: DOMRect | null;\n prevMouseCoords: Point | null;\n submenuCoords: DOMRect | null;\n }>({\n dropCoords: null,\n prevMouseCoords: null,\n submenuCoords: null,\n });\n\n const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Храним в ref, чтобы новая ссылка `onClose` на каждом рендере не заставляла\n // эффект переподписывать слушатели.\n const onCloseRef = useRef(onClose);\n onCloseRef.current = onClose;\n\n const cancelPendingClose = useCallback(() => {\n if (closeTimeoutRef.current !== null) {\n clearTimeout(closeTimeoutRef.current);\n closeTimeoutRef.current = null;\n }\n }, []);\n\n const trackPointer = useCallback((point: Point) => {\n stateRef.current.prevMouseCoords = point;\n }, []);\n\n useEffect(() => {\n if (!active || !dropContainer || !itemRef.current || !submenuRef.current) {\n return void 0;\n }\n\n const scheduleClose = () => {\n if (closeTimeoutRef.current === null) {\n closeTimeoutRef.current = setTimeout(() => {\n closeTimeoutRef.current = null;\n onCloseRef.current();\n }, SUBMENU_CLOSE_DELAY_MS);\n }\n };\n\n const checkIfMouseIsMovingTowardsSubmenu = throttle((event: MouseEvent) => {\n const currentMouseCoords: Point = { x: event.clientX, y: event.clientY };\n\n const isMouseOverItemOrSubmenu =\n itemRef.current?.contains(event.target as HTMLElement) ||\n submenuRef.current?.contains(event.target as HTMLElement);\n\n if (isMouseOverItemOrSubmenu) {\n cancelPendingClose();\n } else if (\n stateRef.current.dropCoords !== null &&\n stateRef.current.prevMouseCoords !== null &&\n stateRef.current.submenuCoords !== null\n ) {\n if (!hasMovedEnough(stateRef.current.prevMouseCoords, currentMouseCoords)) {\n return;\n }\n\n const movingTowardsSubmenu = isMovingTowardsSubmenu(\n stateRef.current.prevMouseCoords,\n currentMouseCoords,\n stateRef.current.dropCoords,\n stateRef.current.submenuCoords\n );\n\n if (movingTowardsSubmenu) {\n cancelPendingClose();\n } else {\n scheduleClose();\n }\n }\n\n stateRef.current.prevMouseCoords = currentMouseCoords;\n }, MOUSE_MOVE_THROTTLE_MS);\n\n const checkIfMouseIsOverItemOrSubmenu = throttle(() => {\n if (stateRef.current.prevMouseCoords !== null) {\n const elementUnderMouse = document.elementFromPoint(\n stateRef.current.prevMouseCoords.x,\n stateRef.current.prevMouseCoords.y\n );\n\n const isMouseOverItemOrSubmenu =\n itemRef.current?.contains(elementUnderMouse) || submenuRef.current?.contains(elementUnderMouse);\n\n if (isMouseOverItemOrSubmenu) {\n cancelPendingClose();\n } else {\n scheduleClose();\n }\n }\n }, SCROLL_THROTTLE_MS);\n\n document.addEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);\n dropContainer.addEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);\n document.addEventListener('scroll', checkIfMouseIsOverItemOrSubmenu, { capture: true, passive: true });\n\n stateRef.current.dropCoords = dropContainer.getBoundingClientRect();\n stateRef.current.submenuCoords = submenuRef.current.getBoundingClientRect();\n\n return () => {\n document.removeEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);\n dropContainer.removeEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);\n document.removeEventListener('scroll', checkIfMouseIsOverItemOrSubmenu, { capture: true });\n checkIfMouseIsMovingTowardsSubmenu.cancel();\n checkIfMouseIsOverItemOrSubmenu.cancel();\n\n cancelPendingClose();\n\n stateRef.current = {\n dropCoords: null,\n prevMouseCoords: null,\n submenuCoords: null,\n };\n };\n }, [active, dropContainer, itemRef, submenuRef, cancelPendingClose]);\n\n return { trackPointer, cancelPendingClose };\n};\n"],"names":[],"mappings":"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"}

package/menu-ChEsgmKq.js DELETED Viewed

@@ -1,5 +0,0 @@
-import './index.css';
-var styles = {"disabled":"magritte-disabled___ZuG-J_1-0-5","drop-content-margin":"magritte-drop-content-margin___q01ll_1-0-5","dropContentMargin":"magritte-drop-content-margin___q01ll_1-0-5","item":"magritte-item___HyDAw_1-0-5","neutral":"magritte-neutral___WyGeQ_1-0-5","negative":"magritte-negative___F7a0c_1-0-5","item-icon":"magritte-item-icon___yCv9l_1-0-5","itemIcon":"magritte-item-icon___yCv9l_1-0-5","item-text":"magritte-item-text___GL3A5_1-0-5","itemText":"magritte-item-text___GL3A5_1-0-5","item-tag":"magritte-item-tag___KX5wL_1-0-5","itemTag":"magritte-item-tag___KX5wL_1-0-5","item-right-content":"magritte-item-right-content___U2hc1_1-0-5","itemRightContent":"magritte-item-right-content___U2hc1_1-0-5","mobile-menu-container":"magritte-mobile-menu-container___zlY08_1-0-5","mobileMenuContainer":"magritte-mobile-menu-container___zlY08_1-0-5","mobile-main-menu-container":"magritte-mobile-main-menu-container___fOW3d_1-0-5","mobileMainMenuContainer":"magritte-mobile-main-menu-container___fOW3d_1-0-5","mobile-submenu-container":"magritte-mobile-submenu-container___od1Ev_1-0-5","mobileSubmenuContainer":"magritte-mobile-submenu-container___od1Ev_1-0-5","mobile-menu-container-slide":"magritte-mobile-menu-container-slide___HXiEx_1-0-5","mobileMenuContainerSlide":"magritte-mobile-menu-container-slide___HXiEx_1-0-5","quick-actions":"magritte-quick-actions___HvUJ3_1-0-5","quickActions":"magritte-quick-actions___HvUJ3_1-0-5","quick-action":"magritte-quick-action___1K5Ip_1-0-5","quickAction":"magritte-quick-action___1K5Ip_1-0-5","quick-action-text":"magritte-quick-action-text___diFW5_1-0-5","quickActionText":"magritte-quick-action-text___diFW5_1-0-5"};
-export { styles as s };
-//# sourceMappingURL=menu-ChEsgmKq.js.map

package/menu-ChEsgmKq.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"menu-ChEsgmKq.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}