@astral/ui 4.82.0 → 4.83.0

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

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

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

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

package/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/components/Onboarding/ui/hooks/useFocusTrap/useFocusTrap.js

@@ -0,0 +1,33 @@
+import { createFocusTrap } from 'focus-trap';
+import { useEffect } from 'react';
+/**
+ * Мульти-контейнерный фокус-трап для highlight-шага.
+ * @param nodes контейнеры
+ * @param isActive включение трапа
+ */
+export const useFocusTrap = (nodes, isActive = true) => {
+    useEffect(() => {
+        const containers = nodes.filter((node) => node !== null);
+        if (!isActive || containers.length === 0) {
+            return;
+        }
+        const trap = 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]);
+};

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

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

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

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

package/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/components/Onboarding/ui/hooks/useKeyboardNav/useKeyboardNav.js

@@ -0,0 +1,62 @@
+import { useEffect } from '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 раньше
+ * вложенных обработчиков и не зависеть от фокуса.
+ */
+export const useKeyboardNav = (activeStep) => {
+    const isActive = Boolean(activeStep) && !activeStep?.isConfirming;
+    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]);
+};

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

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

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

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

package/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/components/Onboarding/ui/hooks/useStepTransition/useStepTransition.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react';
+const IDLE_PHASE = {
+    isPopoverHidden: false,
+    isHoleMoving: false,
+};
+const HIDDEN_PHASE = {
+    isPopoverHidden: true,
+    isHoleMoving: true,
+};
+/**
+ * Координирует скрытие popover и движение hole при переходе между highlight-шагами.
+ */
+export const useStepTransition = (stepKey, { popoverHiddenMs, holeMovingMs, hasHole = true }) => {
+    const [phase, setPhase] = useState(IDLE_PHASE);
+    const prevKey = useRef(stepKey);
+    const prevHadHole = useRef(hasHole);
+    // Триггер для эффекта: `prevKey` мутируется во время render, поэтому в эффекте не сравнить.
+    const [transitionId, setTransitionId] = 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);
+        }
+    }
+    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;
+};

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

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

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

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

package/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/components/Onboarding/ui/hooks/useTargetAnchor/useTargetAnchor.js

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { getTargetElement } from '../../../utils/getTargetElement';
+import { observeRemoval } from '../../../utils/observeRemoval';
+import { scrollIntoView } from '../../../utils/scrollIntoView';
+import { waitForElement } from '../../../utils/waitForElement';
+import { useTrackedRect } from '../useTrackedRect';
+/**
+ * Находит элемент по `data-tour-id` и синхронизирует его область.
+ */
+export const useTargetAnchor = (targetName, { onError, shouldTrack = true, scrollOnEnter = false, timeout, }) => {
+    const [element, setElement] = useState(null);
+    useEffect(() => {
+        if (!shouldTrack) {
+            // Очищаем элемент, чтобы useTrackedRect не отслеживал его.
+            setElement(null);
+            return;
+        }
+        let isCancelled = false;
+        let stopRemovalWatch;
+        const track = () => {
+            // Устанавливаем найденный элемент сразу, без задержки.
+            setElement(getTargetElement(targetName));
+            waitForElement(targetName, { timeout })
+                .then(async (target) => {
+                if (isCancelled) {
+                    return;
+                }
+                if (scrollOnEnter) {
+                    await scrollIntoView(target);
+                }
+                if (isCancelled) {
+                    return;
+                }
+                setElement(target);
+                stopRemovalWatch = 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 = useTrackedRect(element);
+    return { element, rect };
+};

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

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

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

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

package/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/components/Onboarding/ui/hooks/useTrackedRect/useTrackedRect.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { clampToScrollParents, getViewport, isSameRect, rectFromDomRect, } from '../../../utils/geometry';
+import { getScrollParents } from '../../../utils/getScrollParents';
+/**
+ * Отслеживает область элемента для hole overlay и якоря popover.
+ */
+export const useTrackedRect = (element) => {
+    const [rect, setRect] = useState(null);
+    useEffect(() => {
+        if (!element) {
+            setRect(null);
+            return;
+        }
+        // ID текущей рAF-очереди обновления.
+        let frame = 0;
+        const scrollParents = getScrollParents(element);
+        const update = () => {
+            const elementRect = rectFromDomRect(element.getBoundingClientRect());
+            const viewport = getViewport();
+            const next = clampToScrollParents(elementRect, scrollParents.map((parent) => rectFromDomRect(parent.getBoundingClientRect())), viewport);
+            setRect((prev) => (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;
+};

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import { getViewport } from '../../../utils/geometry';
+/**
+ * Синхронизирует размеры viewport без полос прокрутки окна.
+ */
+export const useViewportSize = () => {
+    const [viewport, setViewport] = useState(getViewport);
+    useEffect(() => {
+        const handleResize = () => setViewport(getViewport());
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return viewport;
+};

package/components/Onboarding/ui/styles.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from '../../theme/types';
+/**
+ * Каркас модальных поверхностей: прозрачный backdrop, приподнятый z-index.
+ */
+export declare const onboardingModalSurface: (theme: Theme) => import("@emotion/utils").SerializedStyles;

package/components/Onboarding/ui/styles.js

@@ -0,0 +1,15 @@
+import { backdropClasses } from '@mui/material/Backdrop';
+import { css } from '../../styled';
+import { ONBOARDING_Z_INDEX_OFFSET } from '../constants';
+/**
+ * Каркас модальных поверхностей: прозрачный backdrop, приподнятый z-index.
+ */
+export const onboardingModalSurface = (theme) => css `
+  && {
+    z-index: ${theme.zIndex.tooltip + ONBOARDING_Z_INDEX_OFFSET.base};
+  }
+
+  && .${backdropClasses.root} {
+    background-color: transparent;
+  }
+`;

package/components/Onboarding/utils/createVirtualAnchor/createVirtualAnchor.d.ts

@@ -0,0 +1,12 @@
+import { type Rect } from '../geometry';
+/**
+ * Виртуальный anchor для NewPopover — объект с `getBoundingClientRect`,
+ * который MUI Popper внутри NewPopover принимает вместо реального узла.
+ */
+export type VirtualAnchor = {
+    getBoundingClientRect: () => DOMRect;
+};
+/**
+ * Превращает область hole в anchor для позиционирования popover.
+ */
+export declare const createVirtualAnchor: (hole: Rect) => VirtualAnchor;

package/components/Onboarding/utils/createVirtualAnchor/createVirtualAnchor.js

@@ -0,0 +1,6 @@
+/**
+ * Превращает область hole в anchor для позиционирования popover.
+ */
+export const createVirtualAnchor = (hole) => ({
+    getBoundingClientRect: () => new DOMRect(hole.x, hole.y, hole.width, hole.height),
+});

package/components/Onboarding/utils/createVirtualAnchor/index.d.ts

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

package/components/Onboarding/utils/createVirtualAnchor/index.js

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

package/components/Onboarding/utils/geometry/index.d.ts

@@ -0,0 +1,4 @@
+export * from './overlayPath';
+export * from './parseOffset';
+export * from './rect';
+export * from './viewport';

package/components/Onboarding/utils/geometry/index.js

@@ -0,0 +1,4 @@
+export * from './overlayPath';
+export * from './parseOffset';
+export * from './rect';
+export * from './viewport';

package/components/Onboarding/utils/geometry/overlayPath/index.d.ts

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

package/components/Onboarding/utils/geometry/overlayPath/index.js

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

package/components/Onboarding/utils/geometry/overlayPath/overlayPath.d.ts

@@ -0,0 +1,6 @@
+import { type Rect } from '../rect';
+import { type Viewport } from '../viewport';
+/**
+ * SVG-путь overlay: viewport + hole-отверстие.
+ */
+export declare const buildOverlayPath: (viewport: Viewport, hole: Rect | null, radius: number) => string;

package/components/Onboarding/utils/geometry/overlayPath/overlayPath.js

@@ -0,0 +1,29 @@
+/**
+ * SVG-путь скруглённой области (по часовой стрелке).
+ */
+const roundedRectPath = (rect, radius) => {
+    const r = Math.max(0, Math.min(radius, rect.width / 2, rect.height / 2));
+    const { x, y, width, height } = rect;
+    return [
+        `M${x + r},${y}`,
+        `H${x + width - r}`,
+        `A${r},${r} 0 0 1 ${x + width},${y + r}`,
+        `V${y + height - r}`,
+        `A${r},${r} 0 0 1 ${x + width - r},${y + height}`,
+        `H${x + r}`,
+        `A${r},${r} 0 0 1 ${x},${y + height - r}`,
+        `V${y + r}`,
+        `A${r},${r} 0 0 1 ${x + r},${y}`,
+        'Z',
+    ].join(' ');
+};
+/**
+ * SVG-путь overlay: viewport + hole-отверстие.
+ */
+export const buildOverlayPath = (viewport, hole, radius) => {
+    const outer = `M0,0 H${viewport.width} V${viewport.height} H0 Z`;
+    if (!hole) {
+        return outer;
+    }
+    return `${outer} ${roundedRectPath(hole, radius)}`;
+};

package/components/Onboarding/utils/geometry/parseOffset/index.d.ts

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

package/components/Onboarding/utils/geometry/parseOffset/index.js

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

package/components/Onboarding/utils/geometry/parseOffset/parseOffset.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Парсит `highlightOffset` вида `'4px'` в число.
+ */
+export declare const parseOffset: (offset?: `${number}px`) => number;

package/components/Onboarding/utils/geometry/parseOffset/parseOffset.js

@@ -0,0 +1,5 @@
+import { DEFAULT_HIGHLIGHT_PADDING } from '../../../constants';
+/**
+ * Парсит `highlightOffset` вида `'4px'` в число.
+ */
+export const parseOffset = (offset) => offset ? Number.parseFloat(offset) : DEFAULT_HIGHLIGHT_PADDING;

package/components/Onboarding/utils/geometry/rect/index.d.ts

@@ -0,0 +1,2 @@
+export { clampToScrollParents, clampToViewport, inflateRect, isSameRect, rectFromDomRect, } from './rect';
+export type { Rect } from './rect';

package/components/Onboarding/utils/geometry/rect/index.js

@@ -0,0 +1 @@
+export { clampToScrollParents, clampToViewport, inflateRect, isSameRect, rectFromDomRect, } from './rect';

package/components/Onboarding/utils/geometry/rect/rect.d.ts

@@ -0,0 +1,34 @@
+import { type Viewport } from '../viewport';
+/**
+ * Область hole/элемента в координатах viewport.
+ */
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * Приводит нативный `DOMRect` к нашему `Rect` (только позиция и размеры).
+ */
+export declare const rectFromDomRect: (domRect: DOMRect) => Rect;
+/**
+ * Равны ли области покомпонентно.
+ */
+export declare const isSameRect: (a: Rect | null, b: Rect) => boolean;
+/**
+ * Расширяет область на padding во все стороны.
+ */
+export declare const inflateRect: (rect: Rect, padding: number) => Rect;
+/**
+ * Обрезает область hole по границам viewport.
+ */
+export declare const clampToViewport: (rect: Rect, viewport: Viewport) => Rect;
+export declare const isViewportSizedRect: (rect: Rect, viewport: Viewport) => boolean;
+/**
+ * Обрезает область элемента видимой областью каждого scroll-предка.
+ * Если элемент лежит во вложенном scroll-контейнере и частично уехал за его
+ * границу — и hole overlay, и якорь popover считаются уже по видимой
+ * части, а не по полной области элемента.
+ */
+export declare const clampToScrollParents: (rect: Rect, scrollParents: readonly Rect[], viewport: Viewport) => Rect;

package/components/Onboarding/utils/geometry/rect/rect.js

@@ -0,0 +1,60 @@
+/**
+ * Приводит нативный `DOMRect` к нашему `Rect` (только позиция и размеры).
+ */
+export const rectFromDomRect = (domRect) => ({
+    x: domRect.left,
+    y: domRect.top,
+    width: domRect.width,
+    height: domRect.height,
+});
+/**
+ * Равны ли области покомпонентно.
+ */
+export const isSameRect = (a, b) => a !== null &&
+    a.x === b.x &&
+    a.y === b.y &&
+    a.width === b.width &&
+    a.height === b.height;
+/**
+ * Расширяет область на padding во все стороны.
+ */
+export const inflateRect = (rect, padding) => ({
+    x: rect.x - padding,
+    y: rect.y - padding,
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2,
+});
+/**
+ * Пересечение двух областей. Не пересекаются — ширина/высота 0.
+ */
+const intersectRect = (a, b) => {
+    const x = Math.max(a.x, b.x);
+    const y = Math.max(a.y, b.y);
+    const right = Math.min(a.x + a.width, b.x + b.width);
+    const bottom = Math.min(a.y + a.height, b.y + b.height);
+    return {
+        x,
+        y,
+        width: Math.max(0, right - x),
+        height: Math.max(0, bottom - y),
+    };
+};
+/**
+ * Обрезает область hole по границам viewport.
+ */
+export const clampToViewport = (rect, viewport) => intersectRect(rect, {
+    x: 0,
+    y: 0,
+    width: viewport.width,
+    height: viewport.height,
+});
+export const isViewportSizedRect = (rect, viewport) => rect.width >= viewport.width - 1 && rect.height >= viewport.height - 1;
+/**
+ * Обрезает область элемента видимой областью каждого scroll-предка.
+ * Если элемент лежит во вложенном scroll-контейнере и частично уехал за его
+ * границу — и hole overlay, и якорь popover считаются уже по видимой
+ * части, а не по полной области элемента.
+ */
+export const clampToScrollParents = (rect, scrollParents, viewport) => scrollParents
+    .filter((parent) => !isViewportSizedRect(parent, viewport))
+    .reduce(intersectRect, rect);

package/components/Onboarding/utils/geometry/viewport/index.d.ts

@@ -0,0 +1,2 @@
+export { getViewport } from './viewport';
+export type { Viewport } from './viewport';

package/components/Onboarding/utils/geometry/viewport/index.js

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