@cloud-ru/ds-uikit-product-welcome-tour 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.2.1 (2026-09-06)
+
+### Bug Fixes
+
+- **FF-8762:** swallow overlay presses so page layers stay open during the tour ([3812a8f](https://github.com/cloud-ru-tech/snack-v2/commit/3812a8f7a207a0f61e9d85d890e58a5ba5762192))
+
+# 1.2.0 (2026-09-03)
+
+### Features
+
+- **FF-8762:** add showStepIndicator prop to welcome tour ([f4beeb2](https://github.com/cloud-ru-tech/snack-v2/commit/f4beeb2d72919d58312cf2a7a00822812517ae27))
+
 # 1.1.0 (2026-09-02)
 
 ### Features

package/README.md

@@ -33,6 +33,8 @@
 
 Все слоты необязательные, кроме `target`. Индикатор прогресса появляется автоматически, когда шагов больше одного, и остаётся неинтерактивным — он показывает позицию в туре, навигация идёт кнопками.
 
+`showStepIndicator={false}` убирает индикатор вместе с озвучкой позиции для скринридера. Это нужно туру, у которого длина неизвестна заранее: шаг с ненайденной целью тур пропускает на лету (адаптив скрыл блок, раздел недоступен по правам), а пересчитать общее число он не может — «2 из 5» тогда врёт. Когда все шаги гарантированно доступны, индикатор оставляют: он показывает, сколько ещё идти.
+
 ### Placement (default `bottom`)
 
 `steps[i].placement` задаёт положение подсказки относительно целевого элемента: `top`, `bottom`, `left`, `right` и их варианты `-start` / `-end`, а также `auto` (сторона подбирается автоматически) и `center` (подсказка по центру экрана — для шага без привязки к элементу). Если выбранной стороне не хватает места, подсказка разворачивается на противоположную.
@@ -236,6 +238,7 @@ export function WithoutBackButton() {
 | `open` | `boolean` | — | Запущен ли тур. Управляемый режим. |
 | `portalContainer` | `HTMLElement \| null` | — | Контейнер для портала. По умолчанию — контейнер из `PortalContextProvider` либо `document.body`. |
 | `scrollOffset` | `number` | `20` | Отступ при скролле к целевому элементу, px. |
+| `showStepIndicator` | `boolean` | `true` | Показывать ли индикатор прогресса. Он и так появляется только у тура длиннее одного <br/> шага; `false` убирает его вместе с озвучкой позиции для скринридера — это нужно там, <br/> где часть шагов может отвалиться на лету (цели нет на странице, шаг пропускается), <br/> и «2 из 5» окажется неправдой. |
 | `spotlightPadding` | `TourSpotlightPadding` | `10` | Отступ выреза от границ целевого элемента для всех шагов. Шаг переопределяет своим <br/> `spotlightPadding`. |
 | `stepIndex` | `number` | — | Индекс текущего шага. Управляемый режим. |
 | `steps` | `TourStep` | — | Шаги тура. |
@@ -290,6 +293,8 @@ export function WithoutBackButton() {
 - ❌ Указывать `target` на элемент за пределами вьюпорта или появляющийся асинхронно — шаг не найдёт цель.
 - ✅ Формулировать шаг одним действием: что это и зачем нажимать.
 - ❌ Складывать в `content` абзац справки — для этого есть документация раздела.
+- ✅ Скрывать индикатор (`showStepIndicator={false}`), если часть шагов может оказаться недоступной.
+- ❌ Показывать «2 из 5» туру, который на узком экране проходит за три шага.
 - ✅ Оставлять `skip`: пользователь должен уметь выйти в любой момент.
 - ❌ Делать тур безвыходным (`buttons` только с `primary`) в обязательном онбординге.
 

package/dist/cjs/components/WelcomeTour/WelcomeTour.d.ts

@@ -12,4 +12,4 @@ import { WelcomeTourProps } from '../../types';
  * `data-test-id` компонент не принимает: слоты подсказки адресуются через публичную
  * константу `TEST_IDS`.
  */
-export declare function WelcomeTour({ steps, open, defaultOpen, onOpenChange, stepIndex, defaultStepIndex, onStepChange, labels: componentLabels, buttons, scrollOffset, spotlightPadding, portalContainer, }: WelcomeTourProps): import("react/jsx-runtime").JSX.Element;
+export declare function WelcomeTour({ steps, open, defaultOpen, onOpenChange, stepIndex, defaultStepIndex, onStepChange, labels: componentLabels, buttons, showStepIndicator, scrollOffset, spotlightPadding, portalContainer, }: WelcomeTourProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/WelcomeTour/WelcomeTour.js

@@ -28,7 +28,7 @@ const FLOATING_OPTIONS = { shiftOptions: { crossAxis: true, padding: 16 } };
  * `data-test-id` компонент не принимает: слоты подсказки адресуются через публичную
  * константу `TEST_IDS`.
  */
-function WelcomeTour({ steps, open, defaultOpen = false, onOpenChange, stepIndex, defaultStepIndex = 0, onStepChange, labels: componentLabels, buttons = DEFAULT_BUTTONS, scrollOffset, spotlightPadding, portalContainer, }) {
+function WelcomeTour({ steps, open, defaultOpen = false, onOpenChange, stepIndex, defaultStepIndex = 0, onStepChange, labels: componentLabels, buttons = DEFAULT_BUTTONS, showStepIndicator = true, scrollOffset, spotlightPadding, portalContainer, }) {
     const { t } = locale_1.welcomeTourLocale.useTranslations();
     const portalContextRef = (0, portal_context_1.usePortalContext)();
     const [isOpen, setOpen] = (0, utils_1.useUncontrolledProp)(open, defaultOpen, onOpenChange);
@@ -62,7 +62,8 @@ function WelcomeTour({ steps, open, defaultOpen = false, onOpenChange, stepIndex
         labels: { next: t('next'), back: t('back'), finish: t('finish'), close: t('close') },
         componentLabels,
         buttons,
-    }), [steps, t, componentLabels, buttons]);
+        showStepIndicator,
+    }), [steps, t, componentLabels, buttons, showStepIndicator]);
     const handleEvent = (0, react_1.useCallback)(({ action, controlled, type, index, status }) => {
         switch (type) {
             // Неуправляемый режим: индекс уже переключил движок, компонент сообщает о факте.
@@ -109,6 +110,21 @@ function WelcomeTour({ steps, open, defaultOpen = false, onOpenChange, stepIndex
                 break;
         }
     }, [steps, onStepChange, setOpen]);
+    // `overlayClickAction: false` отменяет только реакцию самого тура: нажатие всё равно
+    // доходит до документа, и раскрытый список, вокруг которого построен шаг, закрывается
+    // как от клика мимо себя. Гасим на подхвате в портале, вместе с уводом фокуса.
+    (0, react_1.useEffect)(() => {
+        if (!isOpen || !portalElement)
+            return;
+        const swallowPress = (event) => {
+            if (!(0, utils_2.isOverlayTarget)(event.target))
+                return;
+            event.stopPropagation();
+            event.preventDefault();
+        };
+        constants_2.OVERLAY_PRESS_EVENTS.forEach(type => portalElement.addEventListener(type, swallowPress, true));
+        return () => constants_2.OVERLAY_PRESS_EVENTS.forEach(type => portalElement.removeEventListener(type, swallowPress, true));
+    }, [isOpen, portalElement]);
     // Esc завершает тур целиком, как у остальных оверлеев ДС; `dismissKeyAction` движка
     // закрывает только текущий шаг, поэтому он выключен. Уступаем чужому слою: шаг тура
     // может открыть диалог, и Esc тогда адресован ему.

package/dist/cjs/components/WelcomeTour/constants.d.ts

@@ -27,3 +27,7 @@ export declare const TOUR_COLORS: {
  * расчётной уезжает за край экрана.
  */
 export declare const DEFAULT_HINT_WIDTH = 480;
+/** Класс затемнения у react-joyride: отличить его от подсказки в общем портале больше нечем. */
+export declare const OVERLAY_CLASS_NAME = "react-joyride__overlay";
+/** События, по которым закрываются слои страницы: floating-ui слушает `pointerdown`, прочие — `mousedown` и `click`. */
+export declare const OVERLAY_PRESS_EVENTS: readonly ["pointerdown", "mousedown", "click"];

package/dist/cjs/components/WelcomeTour/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_HINT_WIDTH = exports.TOUR_COLORS = exports.TOUR_GEOMETRY = void 0;
+exports.OVERLAY_PRESS_EVENTS = exports.OVERLAY_CLASS_NAME = exports.DEFAULT_HINT_WIDTH = exports.TOUR_COLORS = exports.TOUR_GEOMETRY = void 0;
 /**
  * Геометрия для react-joyride. Движок считает позиции и рисует стрелку инлайн-стилями,
  * поэтому нужны числа, а не CSS-переменные. Рядом с каждым значением — переменная
@@ -36,3 +36,7 @@ exports.TOUR_COLORS = {
  * расчётной уезжает за край экрана.
  */
 exports.DEFAULT_HINT_WIDTH = 480;
+/** Класс затемнения у react-joyride: отличить его от подсказки в общем портале больше нечем. */
+exports.OVERLAY_CLASS_NAME = 'react-joyride__overlay';
+/** События, по которым закрываются слои страницы: floating-ui слушает `pointerdown`, прочие — `mousedown` и `click`. */
+exports.OVERLAY_PRESS_EVENTS = ['pointerdown', 'mousedown', 'click'];

package/dist/cjs/components/WelcomeTour/utils.d.ts

@@ -5,7 +5,10 @@ type ToJoyrideStepsParams = {
     labels: TourLabels;
     componentLabels?: Partial<TourLabels>;
     buttons: TourButton[];
+    showStepIndicator: boolean;
 };
+/** Пришло ли нажатие в затемнение, а не в подсказку: в портале лежат они оба. */
+export declare function isOverlayTarget(target: EventTarget | null): boolean;
 /**
  * Приводит статус движка к публичному `TourStatus`: наружу сообщаются только терминальные
  * `finished` и `skipped`, а каст пропустил бы любую строку.
@@ -18,5 +21,5 @@ export declare function resolveLabels(base: TourLabels, componentLabels?: Partia
  * (`subtitle`, разрешённые подписи, набор кнопок), уезжают в `step.data` — оттуда
  * их читает `TourHint`.
  */
-export declare function toJoyrideSteps({ steps, labels, componentLabels, buttons }: ToJoyrideStepsParams): Step[];
+export declare function toJoyrideSteps({ steps, labels, componentLabels, buttons, showStepIndicator, }: ToJoyrideStepsParams): Step[];
 export {};

package/dist/cjs/components/WelcomeTour/utils.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOverlayTarget = isOverlayTarget;
 exports.toTourStatus = toTourStatus;
 exports.resolveLabels = resolveLabels;
 exports.toJoyrideSteps = toJoyrideSteps;
@@ -7,6 +8,10 @@ const constants_1 = require("../../constants");
 const constants_2 = require("./constants");
 const spotlight_1 = require("./spotlight");
 const targets_1 = require("./targets");
+/** Пришло ли нажатие в затемнение, а не в подсказку: в портале лежат они оба. */
+function isOverlayTarget(target) {
+    return target instanceof Element && Boolean(target.closest(`.${constants_2.OVERLAY_CLASS_NAME}`));
+}
 /**
  * Приводит статус движка к публичному `TourStatus`: наружу сообщаются только терминальные
  * `finished` и `skipped`, а каст пропустил бы любую строку.
@@ -24,7 +29,7 @@ function resolveLabels(base, componentLabels, stepLabels) {
  * (`subtitle`, разрешённые подписи, набор кнопок), уезжают в `step.data` — оттуда
  * их читает `TourHint`.
  */
-function toJoyrideSteps({ steps, labels, componentLabels, buttons }) {
+function toJoyrideSteps({ steps, labels, componentLabels, buttons, showStepIndicator, }) {
     return steps.map(({ target, title, subtitle, content, placement, width, spotlightTarget, spotlightPadding, labels: stepLabels, onBeforeShow, }) => ({
         // Со списком целей подсказка цепляется за «зеркальный» узел: раскрытый список
         // закрывается по клику мимо себя, то есть уже на `mousedown` по кнопке подсказки —
@@ -50,6 +55,7 @@ function toJoyrideSteps({ steps, labels, componentLabels, buttons }) {
             subtitle,
             labels: resolveLabels(labels, componentLabels, stepLabels),
             buttons,
+            showStepIndicator,
         },
     }));
 }

package/dist/cjs/helperComponents/TourHint/TourHint.js

@@ -30,7 +30,7 @@ function TourHint({ backProps, closeProps, primaryProps, skipProps, tooltipProps
     const contentId = (0, react_1.useId)();
     // `Partial`, а не `TourStepData`: каст к полному типу прятал бы падение на
     // `buttons.includes(...)` у шага, пришедшего мимо `toJoyrideSteps`.
-    const { subtitle, labels, buttons = [] } = (step.data ?? {});
+    const { subtitle, labels, buttons = [], showStepIndicator = true } = (step.data ?? {});
     const backButtonProps = withoutNativeTitle(backProps);
     const primaryButtonProps = withoutNativeTitle(primaryProps);
     const closeButtonProps = withoutNativeTitle(closeProps);
@@ -45,6 +45,6 @@ function TourHint({ backProps, closeProps, primaryProps, skipProps, tooltipProps
     (0, jsx_runtime_1.jsxs)("div", { ...tooltipProps, "aria-describedby": step.content ? contentId : undefined, "aria-labelledby": step.title ? titleId : undefined, className: styles_module_scss_1.default.hint, "data-test-id": constants_1.TEST_IDS.hint, 
         // Ширину шага движок отдаёт только в свои стили тултипа — у подсказки они свои.
         // `max-width` не трогаем: он держит фолбэк по ширине экрана.
-        style: step.width !== undefined ? { width: step.width } : undefined, children: [(step.title || showSkip) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [step.title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'div', id: titleId, variant: 'title', size: 'm', "data-test-id": constants_1.TEST_IDS.title, children: step.title })), showSkip && ((0, jsx_runtime_1.jsx)(button_1.Button, { ...skipButtonProps, className: styles_module_scss_1.default.close, appearance: button_1.APPEARANCE.Neutral, "aria-label": labels.close, "data-test-id": constants_1.TEST_IDS.closeIcon, icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, {}), view: button_1.VIEW.Simple }))] })), subtitle && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'p', className: styles_module_scss_1.default.subtitle, variant: 'title', size: 's', weight: 'thin', "data-test-id": constants_1.TEST_IDS.subtitle, children: subtitle })), step.content && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'div', id: contentId, className: styles_module_scss_1.default.content, variant: 'body', size: 's', "data-test-id": constants_1.TEST_IDS.content, children: step.content })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [size > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.visuallyHidden, children: t('progress', { current: index + 1, total: size }) }), (0, jsx_runtime_1.jsx)(TourSteps_1.TourSteps, { current: index, total: size })] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [showBack && ((0, jsx_runtime_1.jsx)(button_1.Button, { ...backButtonProps, appearance: button_1.APPEARANCE.Neutral, "data-test-id": constants_1.TEST_IDS.backButton, label: labels.back, view: button_1.VIEW.Outline })), showPrimary &&
+        style: step.width !== undefined ? { width: step.width } : undefined, children: [(step.title || showSkip) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [step.title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'div', id: titleId, variant: 'title', size: 'm', "data-test-id": constants_1.TEST_IDS.title, children: step.title })), showSkip && ((0, jsx_runtime_1.jsx)(button_1.Button, { ...skipButtonProps, className: styles_module_scss_1.default.close, appearance: button_1.APPEARANCE.Neutral, "aria-label": labels.close, "data-test-id": constants_1.TEST_IDS.closeIcon, icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, {}), view: button_1.VIEW.Simple }))] })), subtitle && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'p', className: styles_module_scss_1.default.subtitle, variant: 'title', size: 's', weight: 'thin', "data-test-id": constants_1.TEST_IDS.subtitle, children: subtitle })), step.content && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'div', id: contentId, className: styles_module_scss_1.default.content, variant: 'body', size: 's', "data-test-id": constants_1.TEST_IDS.content, children: step.content })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [showStepIndicator && size > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.visuallyHidden, children: t('progress', { current: index + 1, total: size }) }), (0, jsx_runtime_1.jsx)(TourSteps_1.TourSteps, { current: index, total: size })] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [showBack && ((0, jsx_runtime_1.jsx)(button_1.Button, { ...backButtonProps, appearance: button_1.APPEARANCE.Neutral, "data-test-id": constants_1.TEST_IDS.backButton, label: labels.back, view: button_1.VIEW.Outline })), showPrimary &&
                                 (isLastStep ? ((0, jsx_runtime_1.jsx)(button_1.Button, { ...closeButtonProps, "data-test-id": constants_1.TEST_IDS.finishButton, label: labels.finish, view: button_1.VIEW.Filled })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { ...primaryButtonProps, "data-test-id": constants_1.TEST_IDS.nextButton, label: labels.next, view: button_1.VIEW.Filled })))] })] })] }));
 }

package/dist/cjs/helperComponents/TourHint/types.d.ts

@@ -12,4 +12,6 @@ export type TourStepData = {
     labels: TourLabels;
     /** Набор кнопок подсказки. */
     buttons: TourButton[];
+    /** Показывать ли индикатор прогресса. */
+    showStepIndicator: boolean;
 };

package/dist/cjs/types.d.ts

@@ -113,6 +113,14 @@ export type WelcomeTourProps = {
      * @default ['back', 'primary', 'skip']
      */
     buttons?: TourButton[];
+    /**
+     * Показывать ли индикатор прогресса. Он и так появляется только у тура длиннее одного
+     * шага; `false` убирает его вместе с озвучкой позиции для скринридера — это нужно там,
+     * где часть шагов может отвалиться на лету (цели нет на странице, шаг пропускается),
+     * и «2 из 5» окажется неправдой.
+     * @default true
+     */
+    showStepIndicator?: boolean;
     /**
      * Отступ при скролле к целевому элементу, px.
      * @default 20

package/dist/esm/components/WelcomeTour/WelcomeTour.d.ts

@@ -12,4 +12,4 @@ import { WelcomeTourProps } from '../../types.js';
  * `data-test-id` компонент не принимает: слоты подсказки адресуются через публичную
  * константу `TEST_IDS`.
  */
-export declare function WelcomeTour({ steps, open, defaultOpen, onOpenChange, stepIndex, defaultStepIndex, onStepChange, labels: componentLabels, buttons, scrollOffset, spotlightPadding, portalContainer, }: WelcomeTourProps): import("react/jsx-runtime").JSX.Element;
+export declare function WelcomeTour({ steps, open, defaultOpen, onOpenChange, stepIndex, defaultStepIndex, onStepChange, labels: componentLabels, buttons, showStepIndicator, scrollOffset, spotlightPadding, portalContainer, }: WelcomeTourProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/WelcomeTour/WelcomeTour.js

@@ -7,9 +7,9 @@ import { ACTIONS, EVENTS, Joyride } from 'react-joyride';
 import { TOUR_BUTTON, TOUR_STATUS } from '../../constants.js';
 import { TourHint } from '../../helperComponents/index.js';
 import { welcomeTourLocale } from '../../locale/index.js';
-import { TOUR_COLORS, TOUR_GEOMETRY } from './constants.js';
+import { OVERLAY_PRESS_EVENTS, TOUR_COLORS, TOUR_GEOMETRY } from './constants.js';
 import { removeUnionElement } from './spotlight.js';
-import { toJoyrideSteps, toTourStatus } from './utils.js';
+import { isOverlayTarget, toJoyrideSteps, toTourStatus } from './utils.js';
 const DEFAULT_BUTTONS = [TOUR_BUTTON.Back, TOUR_BUTTON.Primary, TOUR_BUTTON.Skip];
 const FLOATING_OPTIONS = { shiftOptions: { crossAxis: true, padding: 16 } };
 /**
@@ -25,7 +25,7 @@ const FLOATING_OPTIONS = { shiftOptions: { crossAxis: true, padding: 16 } };
  * `data-test-id` компонент не принимает: слоты подсказки адресуются через публичную
  * константу `TEST_IDS`.
  */
-export function WelcomeTour({ steps, open, defaultOpen = false, onOpenChange, stepIndex, defaultStepIndex = 0, onStepChange, labels: componentLabels, buttons = DEFAULT_BUTTONS, scrollOffset, spotlightPadding, portalContainer, }) {
+export function WelcomeTour({ steps, open, defaultOpen = false, onOpenChange, stepIndex, defaultStepIndex = 0, onStepChange, labels: componentLabels, buttons = DEFAULT_BUTTONS, showStepIndicator = true, scrollOffset, spotlightPadding, portalContainer, }) {
     const { t } = welcomeTourLocale.useTranslations();
     const portalContextRef = usePortalContext();
     const [isOpen, setOpen] = useUncontrolledProp(open, defaultOpen, onOpenChange);
@@ -59,7 +59,8 @@ export function WelcomeTour({ steps, open, defaultOpen = false, onOpenChange, st
         labels: { next: t('next'), back: t('back'), finish: t('finish'), close: t('close') },
         componentLabels,
         buttons,
-    }), [steps, t, componentLabels, buttons]);
+        showStepIndicator,
+    }), [steps, t, componentLabels, buttons, showStepIndicator]);
     const handleEvent = useCallback(({ action, controlled, type, index, status }) => {
         switch (type) {
             // Неуправляемый режим: индекс уже переключил движок, компонент сообщает о факте.
@@ -106,6 +107,21 @@ export function WelcomeTour({ steps, open, defaultOpen = false, onOpenChange, st
                 break;
         }
     }, [steps, onStepChange, setOpen]);
+    // `overlayClickAction: false` отменяет только реакцию самого тура: нажатие всё равно
+    // доходит до документа, и раскрытый список, вокруг которого построен шаг, закрывается
+    // как от клика мимо себя. Гасим на подхвате в портале, вместе с уводом фокуса.
+    useEffect(() => {
+        if (!isOpen || !portalElement)
+            return;
+        const swallowPress = (event) => {
+            if (!isOverlayTarget(event.target))
+                return;
+            event.stopPropagation();
+            event.preventDefault();
+        };
+        OVERLAY_PRESS_EVENTS.forEach(type => portalElement.addEventListener(type, swallowPress, true));
+        return () => OVERLAY_PRESS_EVENTS.forEach(type => portalElement.removeEventListener(type, swallowPress, true));
+    }, [isOpen, portalElement]);
     // Esc завершает тур целиком, как у остальных оверлеев ДС; `dismissKeyAction` движка
     // закрывает только текущий шаг, поэтому он выключен. Уступаем чужому слою: шаг тура
     // может открыть диалог, и Esc тогда адресован ему.

package/dist/esm/components/WelcomeTour/constants.d.ts

@@ -27,3 +27,7 @@ export declare const TOUR_COLORS: {
  * расчётной уезжает за край экрана.
  */
 export declare const DEFAULT_HINT_WIDTH = 480;
+/** Класс затемнения у react-joyride: отличить его от подсказки в общем портале больше нечем. */
+export declare const OVERLAY_CLASS_NAME = "react-joyride__overlay";
+/** События, по которым закрываются слои страницы: floating-ui слушает `pointerdown`, прочие — `mousedown` и `click`. */
+export declare const OVERLAY_PRESS_EVENTS: readonly ["pointerdown", "mousedown", "click"];

package/dist/esm/components/WelcomeTour/constants.js

@@ -33,3 +33,7 @@ export const TOUR_COLORS = {
  * расчётной уезжает за край экрана.
  */
 export const DEFAULT_HINT_WIDTH = 480;
+/** Класс затемнения у react-joyride: отличить его от подсказки в общем портале больше нечем. */
+export const OVERLAY_CLASS_NAME = 'react-joyride__overlay';
+/** События, по которым закрываются слои страницы: floating-ui слушает `pointerdown`, прочие — `mousedown` и `click`. */
+export const OVERLAY_PRESS_EVENTS = ['pointerdown', 'mousedown', 'click'];

package/dist/esm/components/WelcomeTour/utils.d.ts

@@ -5,7 +5,10 @@ type ToJoyrideStepsParams = {
     labels: TourLabels;
     componentLabels?: Partial<TourLabels>;
     buttons: TourButton[];
+    showStepIndicator: boolean;
 };
+/** Пришло ли нажатие в затемнение, а не в подсказку: в портале лежат они оба. */
+export declare function isOverlayTarget(target: EventTarget | null): boolean;
 /**
  * Приводит статус движка к публичному `TourStatus`: наружу сообщаются только терминальные
  * `finished` и `skipped`, а каст пропустил бы любую строку.
@@ -18,5 +21,5 @@ export declare function resolveLabels(base: TourLabels, componentLabels?: Partia
  * (`subtitle`, разрешённые подписи, набор кнопок), уезжают в `step.data` — оттуда
  * их читает `TourHint`.
  */
-export declare function toJoyrideSteps({ steps, labels, componentLabels, buttons }: ToJoyrideStepsParams): Step[];
+export declare function toJoyrideSteps({ steps, labels, componentLabels, buttons, showStepIndicator, }: ToJoyrideStepsParams): Step[];
 export {};

package/dist/esm/components/WelcomeTour/utils.js

@@ -1,7 +1,11 @@
 import { TOUR_STATUS } from '../../constants.js';
-import { DEFAULT_HINT_WIDTH } from './constants.js';
+import { DEFAULT_HINT_WIDTH, OVERLAY_CLASS_NAME } from './constants.js';
 import { getUnionElement } from './spotlight.js';
 import { prepareStep, resolveTargets } from './targets.js';
+/** Пришло ли нажатие в затемнение, а не в подсказку: в портале лежат они оба. */
+export function isOverlayTarget(target) {
+    return target instanceof Element && Boolean(target.closest(`.${OVERLAY_CLASS_NAME}`));
+}
 /**
  * Приводит статус движка к публичному `TourStatus`: наружу сообщаются только терминальные
  * `finished` и `skipped`, а каст пропустил бы любую строку.
@@ -19,7 +23,7 @@ export function resolveLabels(base, componentLabels, stepLabels) {
  * (`subtitle`, разрешённые подписи, набор кнопок), уезжают в `step.data` — оттуда
  * их читает `TourHint`.
  */
-export function toJoyrideSteps({ steps, labels, componentLabels, buttons }) {
+export function toJoyrideSteps({ steps, labels, componentLabels, buttons, showStepIndicator, }) {
     return steps.map(({ target, title, subtitle, content, placement, width, spotlightTarget, spotlightPadding, labels: stepLabels, onBeforeShow, }) => ({
         // Со списком целей подсказка цепляется за «зеркальный» узел: раскрытый список
         // закрывается по клику мимо себя, то есть уже на `mousedown` по кнопке подсказки —
@@ -45,6 +49,7 @@ export function toJoyrideSteps({ steps, labels, componentLabels, buttons }) {
             subtitle,
             labels: resolveLabels(labels, componentLabels, stepLabels),
             buttons,
+            showStepIndicator,
         },
     }));
 }

package/dist/esm/helperComponents/TourHint/TourHint.js

@@ -24,7 +24,7 @@ export function TourHint({ backProps, closeProps, primaryProps, skipProps, toolt
     const contentId = useId();
     // `Partial`, а не `TourStepData`: каст к полному типу прятал бы падение на
     // `buttons.includes(...)` у шага, пришедшего мимо `toJoyrideSteps`.
-    const { subtitle, labels, buttons = [] } = (step.data ?? {});
+    const { subtitle, labels, buttons = [], showStepIndicator = true } = (step.data ?? {});
     const backButtonProps = withoutNativeTitle(backProps);
     const primaryButtonProps = withoutNativeTitle(primaryProps);
     const closeButtonProps = withoutNativeTitle(closeProps);
@@ -39,6 +39,6 @@ export function TourHint({ backProps, closeProps, primaryProps, skipProps, toolt
     _jsxs("div", { ...tooltipProps, "aria-describedby": step.content ? contentId : undefined, "aria-labelledby": step.title ? titleId : undefined, className: styles.hint, "data-test-id": TEST_IDS.hint, 
         // Ширину шага движок отдаёт только в свои стили тултипа — у подсказки они свои.
         // `max-width` не трогаем: он держит фолбэк по ширине экрана.
-        style: step.width !== undefined ? { width: step.width } : undefined, children: [(step.title || showSkip) && (_jsxs("div", { className: styles.header, children: [step.title && (_jsx(Typography, { as: 'div', id: titleId, variant: 'title', size: 'm', "data-test-id": TEST_IDS.title, children: step.title })), showSkip && (_jsx(Button, { ...skipButtonProps, className: styles.close, appearance: APPEARANCE.Neutral, "aria-label": labels.close, "data-test-id": TEST_IDS.closeIcon, icon: _jsx(CrossSVG, {}), view: VIEW.Simple }))] })), subtitle && (_jsx(Typography, { as: 'p', className: styles.subtitle, variant: 'title', size: 's', weight: 'thin', "data-test-id": TEST_IDS.subtitle, children: subtitle })), step.content && (_jsx(Typography, { as: 'div', id: contentId, className: styles.content, variant: 'body', size: 's', "data-test-id": TEST_IDS.content, children: step.content })), _jsxs("div", { className: styles.footer, children: [size > 1 && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.visuallyHidden, children: t('progress', { current: index + 1, total: size }) }), _jsx(TourSteps, { current: index, total: size })] })), _jsxs("div", { className: styles.actions, children: [showBack && (_jsx(Button, { ...backButtonProps, appearance: APPEARANCE.Neutral, "data-test-id": TEST_IDS.backButton, label: labels.back, view: VIEW.Outline })), showPrimary &&
+        style: step.width !== undefined ? { width: step.width } : undefined, children: [(step.title || showSkip) && (_jsxs("div", { className: styles.header, children: [step.title && (_jsx(Typography, { as: 'div', id: titleId, variant: 'title', size: 'm', "data-test-id": TEST_IDS.title, children: step.title })), showSkip && (_jsx(Button, { ...skipButtonProps, className: styles.close, appearance: APPEARANCE.Neutral, "aria-label": labels.close, "data-test-id": TEST_IDS.closeIcon, icon: _jsx(CrossSVG, {}), view: VIEW.Simple }))] })), subtitle && (_jsx(Typography, { as: 'p', className: styles.subtitle, variant: 'title', size: 's', weight: 'thin', "data-test-id": TEST_IDS.subtitle, children: subtitle })), step.content && (_jsx(Typography, { as: 'div', id: contentId, className: styles.content, variant: 'body', size: 's', "data-test-id": TEST_IDS.content, children: step.content })), _jsxs("div", { className: styles.footer, children: [showStepIndicator && size > 1 && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.visuallyHidden, children: t('progress', { current: index + 1, total: size }) }), _jsx(TourSteps, { current: index, total: size })] })), _jsxs("div", { className: styles.actions, children: [showBack && (_jsx(Button, { ...backButtonProps, appearance: APPEARANCE.Neutral, "data-test-id": TEST_IDS.backButton, label: labels.back, view: VIEW.Outline })), showPrimary &&
                                 (isLastStep ? (_jsx(Button, { ...closeButtonProps, "data-test-id": TEST_IDS.finishButton, label: labels.finish, view: VIEW.Filled })) : (_jsx(Button, { ...primaryButtonProps, "data-test-id": TEST_IDS.nextButton, label: labels.next, view: VIEW.Filled })))] })] })] }));
 }

package/dist/esm/helperComponents/TourHint/types.d.ts

@@ -12,4 +12,6 @@ export type TourStepData = {
     labels: TourLabels;
     /** Набор кнопок подсказки. */
     buttons: TourButton[];
+    /** Показывать ли индикатор прогресса. */
+    showStepIndicator: boolean;
 };

package/dist/esm/types.d.ts

@@ -113,6 +113,14 @@ export type WelcomeTourProps = {
      * @default ['back', 'primary', 'skip']
      */
     buttons?: TourButton[];
+    /**
+     * Показывать ли индикатор прогресса. Он и так появляется только у тура длиннее одного
+     * шага; `false` убирает его вместе с озвучкой позиции для скринридера — это нужно там,
+     * где часть шагов может отвалиться на лету (цели нет на странице, шаг пропускается),
+     * и «2 из 5» окажется неправдой.
+     * @default true
+     */
+    showStepIndicator?: boolean;
     /**
      * Отступ при скролле к целевому элементу, px.
      * @default 20