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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 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

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

@@ -110,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

@@ -7,6 +7,8 @@ type ToJoyrideStepsParams = {
     buttons: TourButton[];
     showStepIndicator: boolean;
 };
+/** Пришло ли нажатие в затемнение, а не в подсказку: в портале лежат они оба. */
+export declare function isOverlayTarget(target: EventTarget | null): boolean;
 /**
  * Приводит статус движка к публичному `TourStatus`: наружу сообщаются только терминальные
  * `finished` и `skipped`, а каст пропустил бы любую строку.

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`, а каст пропустил бы любую строку.

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 } };
 /**
@@ -107,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

@@ -7,6 +7,8 @@ type ToJoyrideStepsParams = {
     buttons: TourButton[];
     showStepIndicator: boolean;
 };
+/** Пришло ли нажатие в затемнение, а не в подсказку: в портале лежат они оба. */
+export declare function isOverlayTarget(target: EventTarget | null): boolean;
 /**
  * Приводит статус движка к публичному `TourStatus`: наружу сообщаются только терминальные
  * `finished` и `skipped`, а каст пропустил бы любую строку.

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`, а каст пропустил бы любую строку.