@astral/ui 4.82.0 → 4.84.0

package/node/components/Onboarding/ui/Overlay/Overlay.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { type Rect } from '../../utils/geometry';
+export type OverlayProps = {
+    /**
+     * Hole (null для сплошного затемнения).
+     */
+    hole: Rect | null;
+    /**
+     * Проходят ли клики сквозь overlay
+     */
+    isInteractive?: boolean;
+    /**
+     * Показан ли overlay.
+     * @default true
+     */
+    isVisible?: boolean;
+    /**
+     * Идёт переезд hole на новую цель.
+     */
+    isHoleMoving?: boolean;
+    /**
+     * Клик по overlay.
+     */
+    onClose: () => void;
+};
+/**
+ * SVG-overlay с hole и порталом в document.body.
+ */
+export declare const Overlay: ({ hole, isInteractive, isVisible, isHoleMoving, onClose, }: OverlayProps) => import("react").ReactPortal;

package/node/components/Onboarding/ui/Overlay/Overlay.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
+const cva_1 = require("../../../utils/cva");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const rootCva = (0, cva_1.cva)(constants_2.overlayClassnames.root, {
+    variants: {
+        isHidden: {
+            true: constants_2.overlayClassnames.hidden,
+        },
+        isHoleMoving: {
+            true: constants_2.overlayClassnames.holeMoving,
+        },
+    },
+});
+/**
+ * SVG-overlay с hole и порталом в document.body.
+ */
+const Overlay = ({ hole, isInteractive, isVisible = true, isHoleMoving = false, onClose, }) => {
+    const { viewport, clampedHole, path } = (0, useLogic_1.useLogic)(hole);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(styles_1.OverlayRoot, { viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "none", className: rootCva({ isHidden: !isVisible, isHoleMoving }), children: [(0, jsx_runtime_1.jsx)(styles_1.Backdrop, { d: path, fillRule: "evenodd", onClick: onClose, className: constants_2.overlayClassnames.backdrop }), !isInteractive && clampedHole && ((0, jsx_runtime_1.jsx)(styles_1.HoleBlocker, { x: clampedHole.x, y: clampedHole.y, width: clampedHole.width, height: clampedHole.height, rx: constants_1.DEFAULT_HIGHLIGHT_RADIUS, className: constants_2.overlayClassnames.holeBlocker }))] }), document.body);
+};
+exports.Overlay = Overlay;

package/node/components/Onboarding/ui/Overlay/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const overlayClassnames: {
+    root: string;
+    hidden: string;
+    holeMoving: string;
+    backdrop: string;
+    holeBlocker: string;
+};

package/node/components/Onboarding/ui/Overlay/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.overlayClassnames = void 0;
+const createUIKitClassname_1 = require("../../../utils/createUIKitClassname");
+exports.overlayClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay'),
+    hidden: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay_hidden'),
+    holeMoving: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay_hole-moving'),
+    backdrop: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay__backdrop'),
+    holeBlocker: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-overlay__hole-blocker'),
+};

package/node/components/Onboarding/ui/Overlay/index.d.ts

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

package/node/components/Onboarding/ui/Overlay/index.js

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * Контейнер overlay с затуханием при открытии/закрытии.
+ */
+export declare const OverlayRoot: 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").SVGProps<SVGSVGElement>, {}>;
+/**
+ * Затемненная часть с hole, перехватывает клики.
+ */
+export declare const Backdrop: 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").SVGProps<SVGPathElement>, {}>;
+/**
+ * Блокатор кликов для неинтерактивных шагов.
+ */
+export declare const HoleBlocker: 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").SVGProps<SVGRectElement>, {}>;

package/node/components/Onboarding/ui/Overlay/styles.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoleBlocker = exports.Backdrop = exports.OverlayRoot = void 0;
+const styled_1 = require("../../../styled");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+/**
+ * Контейнер overlay с затуханием при открытии/закрытии.
+ */
+exports.OverlayRoot = styled_1.styled.svg `
+  pointer-events: none;
+
+  position: fixed;
+  z-index: ${({ theme }) => theme.zIndex.tooltip + constants_1.ONBOARDING_Z_INDEX_OFFSET.base};
+  inset: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: 1;
+
+  transition: opacity ${({ theme }) => theme.transitions.duration.enteringScreen}ms
+    ${({ theme }) => theme.transitions.easing.easeInOut};
+
+  &.${constants_2.overlayClassnames.hidden} {
+    opacity: 0;
+
+    .${constants_2.overlayClassnames.backdrop}, .${constants_2.overlayClassnames.holeBlocker} {
+      pointer-events: none;
+    }
+  }
+`;
+/**
+ * Затемненная часть с hole, перехватывает клики.
+ */
+exports.Backdrop = styled_1.styled.path `
+  pointer-events: auto;
+  cursor: pointer;
+
+  fill: ${({ theme }) => theme.palette.background.modalShadow};
+
+  .${constants_2.overlayClassnames.holeMoving} & {
+    transition: d ${({ theme }) => theme.transitions.duration.standard}ms
+      ${({ theme }) => theme.transitions.easing.easeInOut};
+  }
+`;
+/**
+ * Блокатор кликов для неинтерактивных шагов.
+ */
+exports.HoleBlocker = styled_1.styled.rect `
+  pointer-events: auto;
+
+  fill: transparent;
+
+  .${constants_2.overlayClassnames.holeMoving} & {
+    transition-timing-function: ${({ theme }) => theme.transitions.easing.easeInOut};
+    transition-duration: ${({ theme }) => theme.transitions.duration.standard}ms;
+    transition-property: x, y, width, height, rx;
+  }
+`;

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

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

package/node/components/Onboarding/ui/Overlay/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/Overlay/useLogic/useLogic.d.ts

@@ -0,0 +1,13 @@
+import { type Rect, type Viewport } from '../../../utils/geometry';
+export type UseLogicResult = {
+    viewport: Viewport;
+    /**
+     * Hole, обрезанный по viewport (null для standalone-шага).
+     */
+    clampedHole: Rect | null;
+    /**
+     * SVG-путь overlay.
+     */
+    path: string;
+};
+export declare const useLogic: (hole: Rect | null) => UseLogicResult;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const constants_1 = require("../../../constants");
+const geometry_1 = require("../../../utils/geometry");
+const useViewportSize_1 = require("../../hooks/useViewportSize");
+const useLogic = (hole) => {
+    const viewport = (0, useViewportSize_1.useViewportSize)();
+    const clampedHole = hole ? (0, geometry_1.clampToViewport)(hole, viewport) : null;
+    // Путь строится по необрезанной hole для скруглённых углов у края.
+    const path = (0, geometry_1.buildOverlayPath)(viewport, hole, constants_1.DEFAULT_HIGHLIGHT_RADIUS);
+    return { viewport, clampedHole, path };
+};
+exports.useLogic = useLogic;

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

@@ -0,0 +1,6 @@
+import { type StepViewProps } from './steps/types';
+export type StepStrategyProps = Omit<StepViewProps, 'geometry'>;
+/**
+ * Стратегия отрисовки по типу шага, единый overlay для всего тура.
+ */
+export declare const StepStrategy: ({ activeStep, isClosing }: StepStrategyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepStrategy = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Overlay_1 = require("../Overlay");
+const HighlightStep_1 = require("./steps/HighlightStep");
+const StandaloneStep_1 = require("./steps/StandaloneStep");
+const useLogic_1 = require("./useLogic");
+const STEP_VIEWS = {
+    standalone: StandaloneStep_1.StandaloneStep,
+    highlight: HighlightStep_1.HighlightStep,
+};
+/**
+ * Стратегия отрисовки по типу шага, единый overlay для всего тура.
+ */
+const StepStrategy = ({ activeStep, isClosing }) => {
+    const { geometry, shouldShowOverlay, isVisible, isHoleMoving, onOverlayClose, } = (0, useLogic_1.useLogic)(activeStep, isClosing);
+    const StepView = STEP_VIEWS[activeStep.step.type];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shouldShowOverlay && ((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { hole: geometry.hole, isInteractive: activeStep.isInteractive, isVisible: isVisible, isHoleMoving: isHoleMoving, onClose: onOverlayClose })), (0, jsx_runtime_1.jsx)(StepView, { activeStep: activeStep, isClosing: isClosing, geometry: geometry })] }));
+};
+exports.StepStrategy = StepStrategy;

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

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

package/node/components/Onboarding/ui/StepStrategy/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("./StepStrategy"), exports);

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

@@ -0,0 +1,6 @@
+import { type StepViewProps } from '../types';
+export type HighlightStepProps = StepViewProps;
+/**
+ * Шаг с подсветкой: popover рядом с hole.
+ */
+export declare const HighlightStep: ({ activeStep, isClosing, geometry, }: HighlightStepProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HighlightStep = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CrossOutlineMd_1 = require("../../../../../../icons/CrossOutlineMd");
+const Typography_1 = require("../../../../../Typography");
+const StepFooter_1 = require("../StepFooter");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+/**
+ * Шаг с подсветкой: popover рядом с hole.
+ */
+const HighlightStep = ({ activeStep, isClosing, geometry, }) => {
+    const { step } = activeStep;
+    const { anchorEl } = geometry;
+    const { isOpen, shouldShowPopover, setPopoverNode, handleClose } = (0, useLogic_1.useLogic)(activeStep, isClosing, geometry);
+    // Без якоря popover не рисуем.
+    if (!anchorEl) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: shouldShowPopover && ((0, jsx_runtime_1.jsx)(styles_1.StepPopover, { isOpen: isOpen, disableAutoFocus: true, hasArrow: true, anchorEl: anchorEl, placement: step.position, children: (0, jsx_runtime_1.jsxs)(styles_1.PopoverBody, { ref: setPopoverNode, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(styles_1.CloseButton, { variant: "text", onClick: handleClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_1.Content, { children: [step.title && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "div", variant: "h5", children: step.title })), step.content && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "div", variant: "body1", color: "grey", colorIntensity: "900", children: step.content }))] }), (0, jsx_runtime_1.jsx)(StepFooter_1.StepFooter, { activeStep: activeStep })] }) })) }));
+};
+exports.HighlightStep = HighlightStep;

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

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

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

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

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+/**
+ * Popover шага, z-index над overlay, быстрое закрытие.
+ */
+export declare const StepPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../../../../NewPopover").NewPopoverProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const PopoverBody: 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 CloseButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Content: 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/HighlightStep/styles.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = exports.CloseButton = exports.PopoverBody = exports.StepPopover = void 0;
+const IconButton_1 = require("../../../../../IconButton");
+const NewPopover_1 = require("../../../../../NewPopover");
+const constants_1 = require("../../../../../NewPopover/constants");
+const styled_1 = require("../../../../../styled");
+const constants_2 = require("../../../../constants");
+/**
+ * Popover шага, z-index над overlay, быстрое закрытие.
+ */
+exports.StepPopover = (0, styled_1.styled)(NewPopover_1.NewPopover) `
+  && {
+    z-index: ${({ theme }) => theme.zIndex.tooltip + constants_2.ONBOARDING_Z_INDEX_OFFSET.popover};
+  }
+  
+  .${constants_1.popoverClassnames.innerContainer} {
+    border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
+  }
+
+  .${constants_1.popoverClassnames.animatedWrapper}:not(.${constants_1.popoverClassnames.animatedWrapperOpen}) {
+    animation-duration: ${({ theme }) => theme.transitions.duration.shortest}ms;
+  }
+`;
+exports.PopoverBody = styled_1.styled.div `
+  position: relative;
+
+  width: 400px;
+  padding: ${({ theme }) => theme.spacing(6)};
+
+  border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
+
+  /* Фокус-трап ставит фокус на контейнер, браузерную рамку убираем. */
+  &:focus {
+    outline: none;
+  }
+`;
+exports.CloseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
+  position: absolute;
+  top: ${({ theme }) => theme.spacing(6)};
+  right: ${({ theme }) => theme.spacing(6)};
+`;
+exports.Content = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Резерв справа под крестик — только у верхнего элемента (заголовок, а если
+     его нет — текст) */
+  & > *:first-of-type {
+    padding-right: ${({ theme }) => theme.spacing(10)};
+  }
+`;

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

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

package/node/components/Onboarding/ui/StepStrategy/steps/HighlightStep/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/HighlightStep/useLogic/useLogic.d.ts

@@ -0,0 +1,12 @@
+import { type ActiveStepState } from '../../../../../types';
+import { type OverlayGeometry } from '../../../useLogic';
+export type UseLogicResult = {
+    isOpen: boolean;
+    shouldShowPopover: boolean;
+    setPopoverNode: (node: HTMLElement | null) => void;
+    handleClose: () => void;
+};
+/**
+ * Логика highlight-шага: задержка popover, фокус-трап, закрытие.
+ */
+export declare const useLogic: (activeStep: ActiveStepState, isClosing: boolean, geometry: OverlayGeometry) => UseLogicResult;

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

@@ -0,0 +1,41 @@
+"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 useFocusTrap_1 = require("../../../../hooks/useFocusTrap");
+/**
+ * Логика highlight-шага: задержка popover, фокус-трап, закрытие.
+ */
+const useLogic = (activeStep, isClosing, geometry) => {
+    const { isInteractive, isConfirming } = activeStep;
+    const { anchorEl, element, isTransitioning } = geometry;
+    const theme = (0, useTheme_1.useTheme)();
+    const isOpen = !isClosing;
+    // Задержка до появления popover после готовности hole.
+    const isHoleReady = anchorEl !== null;
+    const [isEntered, setIsEntered] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (isEntered || !isHoleReady) {
+            return;
+        }
+        const timer = setTimeout(() => setIsEntered(true), theme.transitions.duration.shortest);
+        return () => clearTimeout(timer);
+    }, [isEntered, isHoleReady]);
+    const [popoverNode, setPopoverNode] = (0, react_1.useState)(null);
+    const trapNodes = (0, react_1.useMemo)(() => [popoverNode, isInteractive ? element : null], [popoverNode, isInteractive, element]);
+    // Трап выключен при закрытии/подтверждении.
+    (0, useFocusTrap_1.useFocusTrap)(trapNodes, isOpen && !isConfirming);
+    const handleClose = (0, react_1.useCallback)(() => {
+        activeStep.requestClose();
+    }, [activeStep]);
+    // При переходе popover размонтируется; при закрытии — grow-out.
+    const shouldShowPopover = !isConfirming && !isTransitioning && isEntered;
+    return {
+        isOpen,
+        shouldShowPopover,
+        setPopoverNode,
+        handleClose,
+    };
+};
+exports.useLogic = useLogic;

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

@@ -0,0 +1,6 @@
+import { type StepViewProps } from '../types';
+export type StandaloneStepProps = StepViewProps;
+/**
+ * Standalone шаг-модалка.
+ */
+export declare const StandaloneStep: ({ activeStep, isClosing, }: StandaloneStepProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StandaloneStep = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DialogContent_1 = require("../../../../../DialogContent");
+const StepFooter_1 = require("../StepFooter");
+const styles_1 = require("./styles");
+/**
+ * Standalone шаг-модалка.
+ */
+const StandaloneStep = ({ activeStep, isClosing, }) => {
+    const { step, isConfirming, requestClose } = activeStep;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, children: [(0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: step.content }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(StepFooter_1.StepFooter, { activeStep: activeStep }) })] }));
+};
+exports.StandaloneStep = StandaloneStep;

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

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

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

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

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StepDialog: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../../../..").WithoutEmotionSpecific<Omit<import("@mui/material").DialogProps, "title" | "maxWidth">> & {
+    title?: string | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    disableBackdropClick?: boolean | undefined;
+    size?: import("../../../../../Dialog").DialogSize | undefined;
+    headerContent?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Footer: 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/StandaloneStep/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = exports.StepDialog = void 0;
+const Dialog_1 = require("../../../../../Dialog");
+const styled_1 = require("../../../../../styled");
+const styles_1 = require("../../../styles");
+exports.StepDialog = (0, styled_1.styled)(Dialog_1.Dialog) `
+  ${({ theme }) => (0, styles_1.onboardingModalSurface)(theme)};
+`;
+exports.Footer = styled_1.styled.div `
+    padding: ${({ theme }) => theme.spacing(0, 6, 6)};
+`;

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

@@ -0,0 +1,6 @@
+import { type ActiveStepState } from '../../../../../types';
+export type ProgressDotsProps = Pick<ActiveStepState, 'position' | 'total' | 'onSelectStep'>;
+/**
+ * Индикатор прогресса точками
+ */
+export declare const ProgressDots: ({ position, total, onSelectStep, }: ProgressDotsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressDots = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cva_1 = require("../../../../../../utils/cva");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const dotCva = (0, cva_1.cva)(constants_1.progressDotClassnames.root, {
+    variants: {
+        isActive: {
+            true: constants_1.progressDotClassnames.active,
+        },
+    },
+});
+/**
+ * Индикатор прогресса точками
+ */
+const ProgressDots = ({ position, total, onSelectStep, }) => ((0, jsx_runtime_1.jsx)(styles_1.Dots, { children: Array.from({ length: total }, (_, index) => ((0, jsx_runtime_1.jsx)(styles_1.Dot, { type: "button", className: dotCva({ isActive: index === position }), "aria-label": `Перейти к шагу ${index + 1}`, "aria-current": index === position, onClick: () => onSelectStep(index) }, index))) }));
+exports.ProgressDots = ProgressDots;

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

@@ -0,0 +1,4 @@
+export declare const progressDotClassnames: {
+    root: string;
+    active: string;
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.progressDotClassnames = void 0;
+const createUIKitClassname_1 = require("../../../../../../utils/createUIKitClassname");
+exports.progressDotClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-progress-dot'),
+    active: (0, createUIKitClassname_1.createUIKitClassname)('onboarding-progress-dot_active'),
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Dots: 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 Dot: 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").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;