@astral/ui 4.82.0 → 4.83.0

package/node/components/Onboarding/ui/StepStrategy/useLogic/useLogic.d.ts

@@ -0,0 +1,47 @@
+import { type ActiveStepState } from '../../../types';
+import { type VirtualAnchor } from '../../../utils/createVirtualAnchor';
+import { type Rect } from '../../../utils/geometry';
+/**
+ * Геометрия подсветки, общая для overlay и popover.
+ */
+export type OverlayGeometry = {
+    /**
+     * Область hole (null для standalone или пока элемент не найден).
+     */
+    hole: Rect | null;
+    /**
+     * Якорь popover (null пока нет hole).
+     */
+    anchorEl: VirtualAnchor | null;
+    /**
+     * Подсвечиваемый элемент (null для standalone или пока не найден).
+     */
+    element: HTMLElement | null;
+    /**
+     * Hole движется между элементами.
+     */
+    isTransitioning: boolean;
+};
+export type UseLogicResult = {
+    geometry: OverlayGeometry;
+    /**
+     * Показывать ли overlay.
+     */
+    shouldShowOverlay: boolean;
+    /**
+     * Overlay виден.
+     */
+    isVisible: boolean;
+    /**
+     * Hole анимируется.
+     */
+    isHoleMoving: boolean;
+    /**
+     * Клик по overlay — запрос выхода.
+     */
+    onOverlayClose: () => void;
+};
+/**
+ * Логика стратегии: держит единый overlay на весь тур.
+ */
+export declare const useLogic: (activeStep: ActiveStepState, isClosing: boolean) => UseLogicResult;

package/node/components/Onboarding/ui/StepStrategy/useLogic/useLogic.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const useTheme_1 = require("../../../../theme/hooks/useTheme");
+const createVirtualAnchor_1 = require("../../../utils/createVirtualAnchor");
+const geometry_1 = require("../../../utils/geometry");
+const useStepTransition_1 = require("../../hooks/useStepTransition");
+const useTargetAnchor_1 = require("../../hooks/useTargetAnchor");
+/**
+ * Логика стратегии: держит единый overlay на весь тур.
+ */
+const useLogic = (activeStep, isClosing) => {
+    const { step, onError } = activeStep;
+    const theme = (0, useTheme_1.useTheme)();
+    const isHighlight = step.type === 'highlight';
+    const { element, rect } = (0, useTargetAnchor_1.useTargetAnchor)(step.name, {
+        onError,
+        // Трекинг только для highlight-шага.
+        shouldTrack: isHighlight,
+        scrollOnEnter: true,
+        timeout: step.waitForTimeout,
+    });
+    const padding = (0, geometry_1.parseOffset)(step.highlightOffset);
+    const hole = (0, react_1.useMemo)(() => (rect ? (0, geometry_1.inflateRect)(rect, padding) : null), [rect, padding]);
+    const anchorEl = (0, react_1.useMemo)(() => (hole ? (0, createVirtualAnchor_1.createVirtualAnchor)(hole) : null), [hole]);
+    const { isPopoverHidden, isHoleMoving } = (0, useStepTransition_1.useStepTransition)(step.name, {
+        // Popover скрыт пока hole движется.
+        popoverHiddenMs: theme.transitions.duration.short,
+        holeMovingMs: theme.transitions.duration.short,
+        hasHole: isHighlight,
+    });
+    const onOverlayClose = (0, react_1.useCallback)(() => {
+        activeStep.requestClose();
+    }, [activeStep]);
+    // Overlay залипает на весь тур после первого показа (без моргания).
+    const wantsOverlay = hole !== null || !isHighlight;
+    const hasShownOverlayRef = (0, react_1.useRef)(false);
+    if (wantsOverlay) {
+        hasShownOverlayRef.current = true;
+    }
+    return {
+        geometry: {
+            hole,
+            anchorEl,
+            element,
+            isTransitioning: isPopoverHidden,
+        },
+        shouldShowOverlay: hasShownOverlayRef.current,
+        isVisible: !isClosing,
+        isHoleMoving,
+        onOverlayClose,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/Onboarding/ui/hooks/useActiveStep/index.d.ts

@@ -0,0 +1 @@
+export { useActiveStep } from './useActiveStep';

package/node/components/Onboarding/ui/hooks/useActiveStep/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActiveStep = void 0;
+var useActiveStep_1 = require("./useActiveStep");
+Object.defineProperty(exports, "useActiveStep", { enumerable: true, get: function () { return useActiveStep_1.useActiveStep; } });

package/node/components/Onboarding/ui/hooks/useActiveStep/useActiveStep.d.ts

@@ -0,0 +1,6 @@
+import { type ActiveStepStore } from '../../../core/ActiveStepStore';
+import { type ActiveStepState } from '../../../types';
+/**
+ * Подписка на активный шаг из store экземпляра.
+ */
+export declare const useActiveStep: (store: ActiveStepStore) => ActiveStepState | null;

package/node/components/Onboarding/ui/hooks/useActiveStep/useActiveStep.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActiveStep = void 0;
+// TODO После ухода с React 17 — заменить импорт на `react` и убрать use-sync-external-store.
+// https://track.astral.ru/soft/browse/UIKIT-3285
+const shim_1 = require("use-sync-external-store/shim");
+/**
+ * Подписка на активный шаг из store экземпляра.
+ */
+const useActiveStep = (store) => (0, shim_1.useSyncExternalStore)(store.subscribe, store.getActiveStep, store.getActiveStep);
+exports.useActiveStep = useActiveStep;

package/node/components/Onboarding/ui/hooks/useDelayedActiveStep/index.d.ts

@@ -0,0 +1 @@
+export * from './useDelayedActiveStep';

package/node/components/Onboarding/ui/hooks/useDelayedActiveStep/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useDelayedActiveStep"), exports);

package/node/components/Onboarding/ui/hooks/useDelayedActiveStep/useDelayedActiveStep.d.ts

@@ -0,0 +1,15 @@
+import { type ActiveStepState } from '../../../types';
+export type DelayedActiveStep = {
+    /**
+     * Шаг, удержанный на экране на время закрытия.
+     */
+    active: ActiveStepState | null;
+    /**
+     * Анимация закрытия в процессе.
+     */
+    isClosing: boolean;
+};
+/**
+ * Откладывает обнуление шага на время закрытия анимаций.
+ */
+export declare const useDelayedActiveStep: (active: ActiveStepState | null, exitDurationMs: number) => DelayedActiveStep;

package/node/components/Onboarding/ui/hooks/useDelayedActiveStep/useDelayedActiveStep.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDelayedActiveStep = void 0;
+const react_1 = require("react");
+/**
+ * Откладывает обнуление шага на время закрытия анимаций.
+ */
+const useDelayedActiveStep = (active, exitDurationMs) => {
+    const [displayedStep, setDisplayedStep] = (0, react_1.useState)(active);
+    (0, react_1.useEffect)(() => {
+        if (active) {
+            setDisplayedStep(active);
+            return;
+        }
+        const timer = setTimeout(() => setDisplayedStep(null), exitDurationMs);
+        return () => clearTimeout(timer);
+    }, [active, exitDurationMs]);
+    return {
+        active: displayedStep,
+        isClosing: displayedStep !== null && active === null,
+    };
+};
+exports.useDelayedActiveStep = useDelayedActiveStep;

package/node/components/Onboarding/ui/hooks/useFocusTrap/index.d.ts

@@ -0,0 +1 @@
+export { useFocusTrap } from './useFocusTrap';

package/node/components/Onboarding/ui/hooks/useFocusTrap/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = void 0;
+var useFocusTrap_1 = require("./useFocusTrap");
+Object.defineProperty(exports, "useFocusTrap", { enumerable: true, get: function () { return useFocusTrap_1.useFocusTrap; } });

package/node/components/Onboarding/ui/hooks/useFocusTrap/useFocusTrap.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Мульти-контейнерный фокус-трап для highlight-шага.
+ * @param nodes контейнеры
+ * @param isActive включение трапа
+ */
+export declare const useFocusTrap: (nodes: (HTMLElement | null)[], isActive?: boolean) => void;

package/node/components/Onboarding/ui/hooks/useFocusTrap/useFocusTrap.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = void 0;
+const focus_trap_1 = require("focus-trap");
+const react_1 = require("react");
+/**
+ * Мульти-контейнерный фокус-трап для highlight-шага.
+ * @param nodes контейнеры
+ * @param isActive включение трапа
+ */
+const useFocusTrap = (nodes, isActive = true) => {
+    (0, react_1.useEffect)(() => {
+        const containers = nodes.filter((node) => node !== null);
+        if (!isActive || containers.length === 0) {
+            return;
+        }
+        const trap = (0, focus_trap_1.createFocusTrap)(containers, {
+            escapeDeactivates: false,
+            clickOutsideDeactivates: false,
+            allowOutsideClick: true,
+            returnFocusOnDeactivate: false,
+            fallbackFocus: containers[0],
+            initialFocus: () => containers[0],
+        });
+        try {
+            trap.activate();
+        }
+        catch {
+            // Нет фокусируемых узлов.
+            return;
+        }
+        return () => {
+            trap.deactivate();
+        };
+    }, [nodes, isActive]);
+};
+exports.useFocusTrap = useFocusTrap;

package/node/components/Onboarding/ui/hooks/useKeyboardNav/index.d.ts

@@ -0,0 +1 @@
+export { useKeyboardNav } from './useKeyboardNav';

package/node/components/Onboarding/ui/hooks/useKeyboardNav/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardNav = void 0;
+var useKeyboardNav_1 = require("./useKeyboardNav");
+Object.defineProperty(exports, "useKeyboardNav", { enumerable: true, get: function () { return useKeyboardNav_1.useKeyboardNav; } });

package/node/components/Onboarding/ui/hooks/useKeyboardNav/useKeyboardNav.d.ts

@@ -0,0 +1,11 @@
+import { type ActiveStepState } from '../../../types';
+/**
+ * Клавиатурная навигация по туру.
+ *
+ * → / ← — next/prev, Esc — единая точка выхода `requestClose()`.
+ * Слушатель вешается только при активном туре и снимается при закрытии.
+ *
+ * Слушаем в capture-фазе на window, чтобы перехватить стрелки/Esc раньше
+ * вложенных обработчиков и не зависеть от фокуса.
+ */
+export declare const useKeyboardNav: (activeStep: ActiveStepState | null) => void;

package/node/components/Onboarding/ui/hooks/useKeyboardNav/useKeyboardNav.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardNav = void 0;
+const react_1 = require("react");
+const isEditableTarget = (target) => {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    const tag = target.tagName;
+    return (tag === 'INPUT' ||
+        tag === 'TEXTAREA' ||
+        tag === 'SELECT' ||
+        target.isContentEditable);
+};
+/**
+ * Стрелки игнорируются при фокусе в поле ввода (чтобы свободно двигать каретку) и при
+ * скрытой кнопке навигации.
+ */
+const goNext = (activeStep, event) => {
+    if (isEditableTarget(event.target) || !activeStep.step.isNextButtonVisible) {
+        return;
+    }
+    event.preventDefault();
+    activeStep.onNext();
+};
+const goPrev = (activeStep, event) => {
+    if (isEditableTarget(event.target) || !activeStep.step.isPrevButtonVisible) {
+        return;
+    }
+    event.preventDefault();
+    activeStep.onPrev();
+};
+const requestExit = (activeStep, event) => {
+    event.preventDefault();
+    activeStep.requestClose();
+};
+const KEY_HANDLERS = {
+    ArrowRight: goNext,
+    ArrowLeft: goPrev,
+    Escape: requestExit,
+};
+/**
+ * Клавиатурная навигация по туру.
+ *
+ * → / ← — next/prev, Esc — единая точка выхода `requestClose()`.
+ * Слушатель вешается только при активном туре и снимается при закрытии.
+ *
+ * Слушаем в capture-фазе на window, чтобы перехватить стрелки/Esc раньше
+ * вложенных обработчиков и не зависеть от фокуса.
+ */
+const useKeyboardNav = (activeStep) => {
+    const isActive = Boolean(activeStep) && !activeStep?.isConfirming;
+    (0, react_1.useEffect)(() => {
+        if (!activeStep || !isActive) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            KEY_HANDLERS[event.key]?.(activeStep, event);
+        };
+        window.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [activeStep, isActive]);
+};
+exports.useKeyboardNav = useKeyboardNav;

package/node/components/Onboarding/ui/hooks/useStepTransition/index.d.ts

@@ -0,0 +1 @@
+export { useStepTransition } from './useStepTransition';

package/node/components/Onboarding/ui/hooks/useStepTransition/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStepTransition = void 0;
+var useStepTransition_1 = require("./useStepTransition");
+Object.defineProperty(exports, "useStepTransition", { enumerable: true, get: function () { return useStepTransition_1.useStepTransition; } });

package/node/components/Onboarding/ui/hooks/useStepTransition/useStepTransition.d.ts

@@ -0,0 +1,30 @@
+export type StepTransitionDurations = {
+    /**
+     * Время скрытия popover при смене шага (не меньше `holeMovingMs`).
+     */
+    popoverHiddenMs: number;
+    /**
+     * Время движения hole к новому элементу.
+     */
+    holeMovingMs: number;
+    /**
+     * Есть ли hole в текущем шаге (highlight). Скрытие popover нужно только для
+     * переезда hole (highlight → highlight).
+     * @default true
+     */
+    hasHole?: boolean;
+};
+export type StepTransitionPhase = {
+    /**
+     * Popover скрыт, пока hole движется.
+     */
+    isPopoverHidden: boolean;
+    /**
+     * Идёт анимированный переезд hole.
+     */
+    isHoleMoving: boolean;
+};
+/**
+ * Координирует скрытие popover и движение hole при переходе между highlight-шагами.
+ */
+export declare const useStepTransition: (stepKey: string, { popoverHiddenMs, holeMovingMs, hasHole }: StepTransitionDurations) => StepTransitionPhase;

package/node/components/Onboarding/ui/hooks/useStepTransition/useStepTransition.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStepTransition = void 0;
+const react_1 = require("react");
+const IDLE_PHASE = {
+    isPopoverHidden: false,
+    isHoleMoving: false,
+};
+const HIDDEN_PHASE = {
+    isPopoverHidden: true,
+    isHoleMoving: true,
+};
+/**
+ * Координирует скрытие popover и движение hole при переходе между highlight-шагами.
+ */
+const useStepTransition = (stepKey, { popoverHiddenMs, holeMovingMs, hasHole = true }) => {
+    const [phase, setPhase] = (0, react_1.useState)(IDLE_PHASE);
+    const prevKey = (0, react_1.useRef)(stepKey);
+    const prevHadHole = (0, react_1.useRef)(hasHole);
+    // Триггер для эффекта: `prevKey` мутируется во время render, поэтому в эффекте не сравнить.
+    const [transitionId, setTransitionId] = (0, react_1.useState)(0);
+    // Скрываем popover синхронно во время render, иначе виден «прыжок» позиции.
+    if (prevKey.current !== stepKey) {
+        // Прячем popover только для переезда hole (highlight → highlight).
+        const isHoleTravel = prevHadHole.current && hasHole;
+        prevKey.current = stepKey;
+        prevHadHole.current = hasHole;
+        if (isHoleTravel) {
+            setPhase(HIDDEN_PHASE);
+            setTransitionId((id) => id + 1);
+        }
+        else {
+            setPhase(IDLE_PHASE);
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        // Первый render (mount) — переход не запускаем.
+        if (transitionId === 0) {
+            return;
+        }
+        const popoverTimer = setTimeout(() => setPhase((prev) => ({ ...prev, isPopoverHidden: false })), popoverHiddenMs);
+        const holeTimer = setTimeout(() => setPhase((prev) => ({ ...prev, isHoleMoving: false })), holeMovingMs);
+        return () => {
+            clearTimeout(popoverTimer);
+            clearTimeout(holeTimer);
+        };
+    }, [transitionId, popoverHiddenMs, holeMovingMs]);
+    return phase;
+};
+exports.useStepTransition = useStepTransition;

package/node/components/Onboarding/ui/hooks/useTargetAnchor/index.d.ts

@@ -0,0 +1 @@
+export * from './useTargetAnchor';

package/node/components/Onboarding/ui/hooks/useTargetAnchor/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useTargetAnchor"), exports);

package/node/components/Onboarding/ui/hooks/useTargetAnchor/useTargetAnchor.d.ts

@@ -0,0 +1,37 @@
+import { type Rect } from '../../../utils/geometry';
+type UseTargetAnchorOptions = {
+    /**
+     * Обратный вызов при ошибке (элемент не найден за timeout).
+     */
+    onError: (error: Error) => void;
+    /**
+     * Отслеживать ли элемент.
+     * @default true
+     */
+    shouldTrack?: boolean;
+    /**
+     * Прокрутить к элементу при его появлении.
+     * @default false
+     */
+    scrollOnEnter?: boolean;
+    /**
+     * Тайм-аут ожидания появления элемента (мс).
+     * @default DEFAULT_WAIT_ELEMENT_TIMEOUT_MS
+     */
+    timeout?: number;
+};
+type UseTargetAnchorResult = {
+    /**
+     * Найденный элемент.
+     */
+    element: HTMLElement | null;
+    /**
+     * Область элемента (синхронизируется при scroll/resize).
+     */
+    rect: Rect | null;
+};
+/**
+ * Находит элемент по `data-tour-id` и синхронизирует его область.
+ */
+export declare const useTargetAnchor: (targetName: string, { onError, shouldTrack, scrollOnEnter, timeout, }: UseTargetAnchorOptions) => UseTargetAnchorResult;
+export {};

package/node/components/Onboarding/ui/hooks/useTargetAnchor/useTargetAnchor.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTargetAnchor = void 0;
+const react_1 = require("react");
+const getTargetElement_1 = require("../../../utils/getTargetElement");
+const observeRemoval_1 = require("../../../utils/observeRemoval");
+const scrollIntoView_1 = require("../../../utils/scrollIntoView");
+const waitForElement_1 = require("../../../utils/waitForElement");
+const useTrackedRect_1 = require("../useTrackedRect");
+/**
+ * Находит элемент по `data-tour-id` и синхронизирует его область.
+ */
+const useTargetAnchor = (targetName, { onError, shouldTrack = true, scrollOnEnter = false, timeout, }) => {
+    const [element, setElement] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!shouldTrack) {
+            // Очищаем элемент, чтобы useTrackedRect не отслеживал его.
+            setElement(null);
+            return;
+        }
+        let isCancelled = false;
+        let stopRemovalWatch;
+        const track = () => {
+            // Устанавливаем найденный элемент сразу, без задержки.
+            setElement((0, getTargetElement_1.getTargetElement)(targetName));
+            (0, waitForElement_1.waitForElement)(targetName, { timeout })
+                .then(async (target) => {
+                if (isCancelled) {
+                    return;
+                }
+                if (scrollOnEnter) {
+                    await (0, scrollIntoView_1.scrollIntoView)(target);
+                }
+                if (isCancelled) {
+                    return;
+                }
+                setElement(target);
+                stopRemovalWatch = (0, observeRemoval_1.observeRemoval)(target, () => {
+                    if (!isCancelled) {
+                        setElement(null);
+                        track();
+                    }
+                });
+            })
+                .catch((error) => {
+                if (!isCancelled) {
+                    onError(error);
+                }
+            });
+        };
+        track();
+        return () => {
+            isCancelled = true;
+            stopRemovalWatch?.();
+        };
+    }, [targetName, onError, shouldTrack, scrollOnEnter, timeout]);
+    const rect = (0, useTrackedRect_1.useTrackedRect)(element);
+    return { element, rect };
+};
+exports.useTargetAnchor = useTargetAnchor;

package/node/components/Onboarding/ui/hooks/useTrackedRect/index.d.ts

@@ -0,0 +1 @@
+export { useTrackedRect } from './useTrackedRect';

package/node/components/Onboarding/ui/hooks/useTrackedRect/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrackedRect = void 0;
+var useTrackedRect_1 = require("./useTrackedRect");
+Object.defineProperty(exports, "useTrackedRect", { enumerable: true, get: function () { return useTrackedRect_1.useTrackedRect; } });

package/node/components/Onboarding/ui/hooks/useTrackedRect/useTrackedRect.d.ts

@@ -0,0 +1,5 @@
+import { type Rect } from '../../../utils/geometry';
+/**
+ * Отслеживает область элемента для hole overlay и якоря popover.
+ */
+export declare const useTrackedRect: (element: HTMLElement | null) => Rect | null;

package/node/components/Onboarding/ui/hooks/useTrackedRect/useTrackedRect.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrackedRect = void 0;
+const react_1 = require("react");
+const geometry_1 = require("../../../utils/geometry");
+const getScrollParents_1 = require("../../../utils/getScrollParents");
+/**
+ * Отслеживает область элемента для hole overlay и якоря popover.
+ */
+const useTrackedRect = (element) => {
+    const [rect, setRect] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!element) {
+            setRect(null);
+            return;
+        }
+        // ID текущей рAF-очереди обновления.
+        let frame = 0;
+        const scrollParents = (0, getScrollParents_1.getScrollParents)(element);
+        const update = () => {
+            const elementRect = (0, geometry_1.rectFromDomRect)(element.getBoundingClientRect());
+            const viewport = (0, geometry_1.getViewport)();
+            const next = (0, geometry_1.clampToScrollParents)(elementRect, scrollParents.map((parent) => (0, geometry_1.rectFromDomRect)(parent.getBoundingClientRect())), viewport);
+            setRect((prev) => ((0, geometry_1.isSameRect)(prev, next) ? prev : next));
+        };
+        const scheduleUpdate = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(update);
+        };
+        update();
+        const scrollOptions = { passive: true };
+        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleUpdate, scrollOptions));
+        window.addEventListener('scroll', scheduleUpdate, scrollOptions);
+        window.addEventListener('resize', scheduleUpdate);
+        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        resizeObserver.observe(element);
+        return () => {
+            cancelAnimationFrame(frame);
+            resizeObserver.disconnect();
+            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleUpdate, scrollOptions));
+            window.removeEventListener('scroll', scheduleUpdate, scrollOptions);
+            window.removeEventListener('resize', scheduleUpdate);
+        };
+    }, [element]);
+    return rect;
+};
+exports.useTrackedRect = useTrackedRect;

package/node/components/Onboarding/ui/hooks/useViewportSize/index.d.ts

@@ -0,0 +1 @@
+export { useViewportSize } from './useViewportSize';

package/node/components/Onboarding/ui/hooks/useViewportSize/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useViewportSize = void 0;
+var useViewportSize_1 = require("./useViewportSize");
+Object.defineProperty(exports, "useViewportSize", { enumerable: true, get: function () { return useViewportSize_1.useViewportSize; } });

package/node/components/Onboarding/ui/hooks/useViewportSize/useViewportSize.d.ts

@@ -0,0 +1,5 @@
+import { type Viewport } from '../../../utils/geometry';
+/**
+ * Синхронизирует размеры viewport без полос прокрутки окна.
+ */
+export declare const useViewportSize: () => Viewport;