@astral/ui 4.82.0 → 4.84.0

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/ProgressDots/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dot = exports.Dots = void 0;
+const styled_1 = require("../../../../../../styled");
+const constants_1 = require("./constants");
+exports.Dots = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  align-items: center;
+`;
+exports.Dot = styled_1.styled.button `
+  cursor: pointer;
+
+  width: 8px;
+  height: 8px;
+  padding: 0;
+
+  background-color: ${({ theme }) => theme.palette.grey[200]};
+  border: none;
+  border-radius: 50%;
+
+  transition: background-color 0.2s;
+
+  &.${constants_1.progressDotClassnames.active} {
+    background-color: ${({ theme }) => theme.palette.grey[600]};
+  }
+
+  /* Круглый фокус вместо браузерной рамки. */
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
+    outline-offset: 2px;
+  }
+`;

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/StepFooter.d.ts

@@ -0,0 +1,9 @@
+import { type ActiveStepState } from '../../../../types';
+export type StepFooterProps = {
+    activeStep: ActiveStepState;
+};
+/**
+ * Футер шага: индикатор прогресса и кнопки навигации.
+ * Общий для standalone и highlight.
+ */
+export declare const StepFooter: ({ activeStep }: StepFooterProps) => import("react/jsx-runtime").JSX.Element | null;

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/StepFooter.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepFooter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../../../../Button");
+const Typography_1 = require("../../../../../Typography");
+const ProgressDots_1 = require("./ProgressDots");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+/**
+ * Футер шага: индикатор прогресса и кнопки навигации.
+ * Общий для standalone и highlight.
+ */
+const StepFooter = ({ activeStep }) => {
+    const { isPrevVisible, isNextVisible, isDotsVisible, isCounterVisible, position, total, prevButtonText, nextButtonText, nextButtonVariant, onNext, onPrev, onSelectStep, } = (0, useLogic_1.useLogic)(activeStep);
+    // Нечего показывать — не отрисовываем пустой футер
+    if (!isPrevVisible && !isNextVisible && !isDotsVisible && !isCounterVisible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.Root, { children: (0, jsx_runtime_1.jsxs)(styles_1.NavigationRow, { children: [(0, jsx_runtime_1.jsx)(styles_1.LeftSlot, { children: isPrevVisible && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", onClick: onPrev, children: prevButtonText })) }), (0, jsx_runtime_1.jsxs)(styles_1.CenterSlot, { children: [isDotsVisible && ((0, jsx_runtime_1.jsx)(ProgressDots_1.ProgressDots, { position: position, total: total, onSelectStep: onSelectStep })), isCounterVisible && ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "caption", color: "grey", colorIntensity: "600", children: [position + 1, " / ", total] }))] }), (0, jsx_runtime_1.jsx)(styles_1.RightSlot, { children: isNextVisible && ((0, jsx_runtime_1.jsx)(Button_1.Button, { "data-focus": "next", variant: nextButtonVariant, onClick: onNext, children: nextButtonText }, nextButtonVariant)) })] }) }));
+};
+exports.StepFooter = StepFooter;

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/constants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Максимум точек в индикаторе прогресса
+ */
+export declare const MAX_PROGRESS_DOTS = 6;

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_PROGRESS_DOTS = void 0;
+/**
+ * Максимум точек в индикаторе прогресса
+ */
+exports.MAX_PROGRESS_DOTS = 6;

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/index.d.ts

@@ -0,0 +1,2 @@
+export { StepFooter } from './StepFooter';
+export type { StepFooterProps } from './StepFooter';

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/index.js

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

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/styles.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const Root: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NavigationRow: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LeftSlot: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CenterSlot: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RightSlot: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightSlot = exports.CenterSlot = exports.LeftSlot = exports.NavigationRow = exports.Root = void 0;
+const styled_1 = require("../../../../../styled");
+exports.Root = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  width: 100%;
+  padding:0;
+`;
+exports.NavigationRow = styled_1.styled.div `
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+`;
+exports.LeftSlot = styled_1.styled.div `
+  display: flex;
+  justify-content: flex-start;
+`;
+exports.CenterSlot = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+  align-items: center;
+`;
+exports.RightSlot = styled_1.styled.div `
+  display: flex;
+  justify-content: flex-end;
+`;

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/useLogic/index.d.ts

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

package/node/components/Onboarding/ui/StepStrategy/steps/StepFooter/useLogic/index.js

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

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

@@ -0,0 +1,16 @@
+import { type ActiveStepState } from '../../../../../types';
+export type UseLogicResult = {
+    isPrevVisible: boolean;
+    isNextVisible: boolean;
+    isDotsVisible: boolean;
+    isCounterVisible: boolean;
+    position: number;
+    total: number;
+    prevButtonText: string;
+    nextButtonText: string;
+    nextButtonVariant: 'text' | 'contained';
+    onNext: () => void;
+    onPrev: () => void;
+    onSelectStep: (position: number) => void;
+};
+export declare const useLogic: (activeStep: ActiveStepState) => UseLogicResult;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const constants_1 = require("../constants");
+const useLogic = (activeStep) => {
+    const { step, position, total, hasNext, hasPrev, isDotsVisible, isCounterVisible, buttons, onNext, onPrev, onSelectStep, } = activeStep;
+    // Прогресс имеет смысл только при total > 1.
+    const hasProgress = total > 1;
+    // Последний шаг: кнопка «вперёд» превращается в завершающую.
+    const isFinishStep = !hasNext;
+    return {
+        isPrevVisible: step.isPrevButtonVisible && hasPrev,
+        isNextVisible: step.isNextButtonVisible,
+        isDotsVisible: isDotsVisible && hasProgress && total <= constants_1.MAX_PROGRESS_DOTS,
+        isCounterVisible: isCounterVisible && hasProgress,
+        position,
+        total,
+        prevButtonText: buttons.prevLabel,
+        nextButtonText: isFinishStep ? buttons.finishLabel : buttons.nextLabel,
+        nextButtonVariant: isFinishStep ? buttons.finishVariant : 'contained',
+        onNext,
+        onPrev,
+        onSelectStep,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/Onboarding/ui/StepStrategy/steps/types.d.ts

@@ -0,0 +1,16 @@
+import { type ActiveStepState } from '../../../types';
+import { type OverlayGeometry } from '../useLogic';
+/**
+ * Контракт step-view, передаётся стратегией по типу шага.
+ */
+export type StepViewProps = {
+    activeStep: ActiveStepState;
+    /**
+     * Тур в процессе закрытия
+     */
+    isClosing: boolean;
+    /**
+     * Геометрия подсветки (единый источник для overlay и popover).
+     */
+    geometry: OverlayGeometry;
+};

package/node/components/Onboarding/ui/StepStrategy/steps/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1 @@
+export { useLogic, type OverlayGeometry } from './useLogic';

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

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

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;