@astral/ui 4.82.0 → 4.84.0

package/_mocks/LoggerMock/LoggerMock.d.ts

@@ -0,0 +1,16 @@
+import { type Logger } from '../../services/Logger';
+/**
+ * Mock логгера для тестов
+ */
+export declare class LoggerMock {
+    configure: Logger['configure'];
+    child: Logger['child'];
+    isLevelEnabled: Logger['isLevelEnabled'];
+    success: Logger['success'];
+    info: Logger['info'];
+    warn: Logger['warn'];
+    debug: Logger['debug'];
+    error: Logger['error'];
+    constructor();
+}
+export declare const createLoggerMock: () => Logger;

package/_mocks/LoggerMock/LoggerMock.js

@@ -0,0 +1,18 @@
+import { vi } from 'vitest';
+/**
+ * Mock логгера для тестов
+ */
+export class LoggerMock {
+    constructor() {
+        this.configure = vi.fn(() => vi.fn());
+        this.child = vi.fn();
+        this.isLevelEnabled = vi.fn(() => false);
+        this.success = vi.fn();
+        this.info = vi.fn();
+        this.warn = vi.fn();
+        this.debug = vi.fn();
+        this.error = vi.fn();
+        vi.mocked(this.child).mockReturnValue(this);
+    }
+}
+export const createLoggerMock = () => new LoggerMock();

package/_mocks/LoggerMock/index.d.ts

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

package/_mocks/LoggerMock/index.js

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

package/components/ConfigProvider/ConfigProvider.d.ts

@@ -1,4 +1,5 @@
 import { type ReactElement, type ReactNode } from 'react';
+import { type LogThreshold } from '../../services/Logger';
 import { type LanguageMap } from '../DatePicker/types';
 import { type PlaceholderImageProps } from '../placeholders/Placeholder/Image';
 import { type CaptureException } from '../services/ErrorService';
@@ -138,7 +139,12 @@ export type ConfigProviderProps = Partial<ConfigContextProps> & {
      * Переданный в компонент флаг напрямую имеет приоритет выше
      */
     nextFeatureFlags?: NextFeatureFlagsContextProps;
+    /**
+     * Порог логов ui-kit в консоли. По умолчанию: prod → `error`, dev → `warn`,
+     * test → `silent`. `silent` — выключить полностью.
+     */
+    logLevel?: LogThreshold;
 };
 export declare const ConfigContext: import("react").Context<ConfigContextProps>;
-export declare const ConfigProvider: ({ children, language, datePickerLanguageMap, captureException: captureExceptionProp, emptySymbol, imagesMap, techSup, hidePersonalData, hidePersonalDataClassname, hidePersonalInputDataClassname, components: propsComponents, nextFeatureFlags, }: Partial<ConfigProviderProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfigProvider: ({ children, language, datePickerLanguageMap, captureException: captureExceptionProp, emptySymbol, imagesMap, techSup, hidePersonalData, hidePersonalDataClassname, hidePersonalInputDataClassname, components: propsComponents, nextFeatureFlags, logLevel, }: Partial<ConfigProviderProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/ConfigProvider/ConfigProvider.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useEffect, useMemo, } from 'react';
+import { createContext, useEffect, } from 'react';
+import { configureLogger } from '../../services/Logger';
 import { russianMap } from '../DatePicker/constants';
 import { ErrorService } from '../services/ErrorService';
 import { NextFeatureFlagsContext, } from './NextFeatureFlagsContext';
@@ -13,6 +14,10 @@ const techSupDefault = {
     phone: '',
     email: '',
 };
+const defaultCaptureException = (error) => {
+    // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
+    console.error(error);
+};
 const defaultHidePersonalDataClassname = 'ym-hide-content sentry-mask';
 const defaultHidePersonalInputDataClassname = 'ym-disable-keys sentry-mask';
 export const ConfigContext = createContext({
@@ -27,20 +32,21 @@ export const ConfigContext = createContext({
     hidePersonalInputDataClassname: defaultHidePersonalInputDataClassname,
     hidePersonalData: true,
 });
-export const ConfigProvider = ({ children, language = 'ru', datePickerLanguageMap = russianMap, captureException: captureExceptionProp, emptySymbol = '—', imagesMap = imagesMapDefault, techSup = techSupDefault, hidePersonalData = true, hidePersonalDataClassname = defaultHidePersonalDataClassname, hidePersonalInputDataClassname = defaultHidePersonalInputDataClassname, components: propsComponents, nextFeatureFlags = {}, }) => {
-    const captureException = 
-    // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
-    captureExceptionProp || ((error) => console.error(error));
-    useMemo(() => {
+export const ConfigProvider = ({ children, language = 'ru', datePickerLanguageMap = russianMap, captureException: captureExceptionProp, emptySymbol = '—', imagesMap = imagesMapDefault, techSup = techSupDefault, hidePersonalData = true, hidePersonalDataClassname = defaultHidePersonalDataClassname, hidePersonalInputDataClassname = defaultHidePersonalInputDataClassname, components: propsComponents, nextFeatureFlags = {}, logLevel, }) => {
+    const captureException = captureExceptionProp ?? defaultCaptureException;
+    useEffect(() => {
         ErrorService.getInstance().init(captureException);
     }, [captureException]);
     useEffect(() => {
-        if (!captureException) {
+        return configureLogger({ level: logLevel });
+    }, [logLevel]);
+    useEffect(() => {
+        if (!captureExceptionProp) {
             // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
             console.warn('ConfigProvider: Необходимо наличие captureException, связанного с сервисом мониторинга ошибок.\n' +
                 'На данный момент все ошибки, отлавливаемые в ErrorBoundary будут выводиться только в консоль');
         }
-    }, []);
+    }, [captureExceptionProp]);
     const components = {
         ...propsComponents,
         layout: {

package/components/ConfirmDialog/ConfirmDialog.js

@@ -4,6 +4,8 @@ import { Dialog } from '../Dialog';
 import { DialogActions } from '../DialogActions';
 import { DialogContent } from '../DialogContent';
 import { DialogContentText } from '../DialogContentText';
+import { classNames } from '../utils/classNames';
+import { confirmDialogClassnames } from './constants';
 import { CancelButton } from './styles';
 import { useLogic } from './useLogic';
 export const ConfirmDialog = (props) => {
@@ -11,5 +13,5 @@ export const ConfirmDialog = (props) => {
     const { open, title, description, actions, onClose, size = 'sm', ...restProps } = props;
     const { text: confirmText, ...confirmButtonProps } = actions.confirm;
     const { text: cancelText, variant, onClick, ...restCancelProps } = actions.cancel || {};
-    return (_jsxs(Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && (_jsx(DialogContent, { children: typeof description === 'string' ? (_jsx(DialogContentText, { children: description })) : (description) })), _jsxs(DialogActions, { children: [isShowCancelButton && (_jsx(CancelButton, { ...restCancelProps, ...cancelButtonProps, children: cancelText })), _jsx(Button, { ...confirmButtonProps, children: confirmText })] })] }));
+    return (_jsxs(Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && (_jsx(DialogContent, { children: typeof description === 'string' ? (_jsx(DialogContentText, { children: description })) : (description) })), _jsxs(DialogActions, { children: [isShowCancelButton && (_jsx(CancelButton, { ...restCancelProps, ...cancelButtonProps, className: classNames(actions.cancel?.className, confirmDialogClassnames.cancelButton), children: cancelText })), _jsx(Button, { ...confirmButtonProps, className: classNames(confirmButtonProps.className, confirmDialogClassnames.confirmButton), children: confirmText })] })] }));
 };

package/components/ConfirmDialog/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const confirmDialogClassnames: {
+    confirmButton: string;
+    cancelButton: string;
+};

package/components/ConfirmDialog/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const confirmDialogClassnames = {
+    confirmButton: createUIKitClassname('confirm-dialog__confirm-button'),
+    cancelButton: createUIKitClassname('confirm-dialog__cancel-button'),
+};

package/components/ConfirmDialog/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ConfirmDialog';
+export { confirmDialogClassnames } from './constants';
 export type { ConfirmDialogProps } from './types';

package/components/ConfirmDialog/index.js

@@ -1 +1,2 @@
 export * from './ConfirmDialog';
+export { confirmDialogClassnames } from './constants';

package/components/ConfirmDialog/public.d.ts

@@ -1,2 +1,3 @@
 export * from './ConfirmDialog';
+export { confirmDialogClassnames } from './constants';
 export type { ConfirmDialogProps } from './types';

package/components/ConfirmDialog/public.js

@@ -1 +1,2 @@
 export * from './ConfirmDialog';
+export { confirmDialogClassnames } from './constants';

package/components/ConfirmDialog/types.d.ts

@@ -33,4 +33,4 @@ export type ConfirmDialogProps = {
             text: string;
         };
     };
-} & Pick<DialogProps, 'aria-labelledby' | 'aria-describedby' | 'disableBackdropClick' | 'disablePortal' | 'disableScrollLock' | 'hideBackdrop' | 'keepMounted' | 'open' | 'size'>;
+} & Pick<DialogProps, 'aria-labelledby' | 'aria-describedby' | 'disableBackdropClick' | 'disablePortal' | 'disableScrollLock' | 'hideBackdrop' | 'keepMounted' | 'open' | 'size' | 'className'>;

package/components/DashboardLayout/Header/useLogic/useLogic.d.ts

@@ -5,7 +5,7 @@ export declare const useLogic: ({ profile, menuOrganization }: HeaderProps) => {
     isShowProfile: boolean;
     isMobile: boolean;
     isFocusedMode: boolean;
-    mobileHeaderPriorityFeature: "menuOrg" | "profile";
+    mobileHeaderPriorityFeature: "profile" | "menuOrg";
     isLoading: boolean;
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean | undefined) => void;

package/components/NewPopover/NewPopover.d.ts

@@ -1,2 +1,2 @@
 import { type NewPopoverProps } from './types';
-export declare const NewPopover: ({ children, onClose, isOpen, title, className, style, placement, anchorEl, disablePortal, disableAutoFocus, }: NewPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NewPopover: ({ children, onClose, isOpen, title, className, style, placement, anchorEl, disablePortal, disableAutoFocus, hasArrow, }: NewPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/NewPopover/NewPopover.js

@@ -1,23 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BottomDrawer } from '../BottomDrawer';
 import { classNames } from '../utils/classNames';
 import { cva } from '../utils/cva';
 import { popoverClassnames } from './constants';
-import { AnimatedWrapper, InnerContainer, StyledMuiPopper } from './styles';
+import { AnimatedWrapper, InnerContainer, PopoverArrow, StyledMuiPopper, } from './styles';
 import { useLogic } from './useLogic';
 const animatedWrapperCva = cva(popoverClassnames.animatedWrapper, {
     variants: {
         isOpen: {
             true: popoverClassnames.animatedWrapperOpen,
         },
+        hasArrow: {
+            true: popoverClassnames.animatedWrapperHasArrow,
+        },
     },
 });
-export const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, }) => {
-    const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, } = useLogic({ isOpen, anchorEl, onClose, disableAutoFocus });
+export const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, hasArrow, }) => {
+    const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, setArrowElement, mergedModifiers, } = useLogic({
+        isOpen,
+        anchorEl,
+        onClose,
+        disableAutoFocus,
+        hasArrow,
+    });
     if (isMobile) {
         return (_jsx(BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {
                 disableAutoFocus,
             }, children: children }));
     }
-    return (_jsx(StyledMuiPopper, { className: popoverClassnames.root, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, children: _jsx(AnimatedWrapper, { className: classNames(className, animatedWrapperCva({ isOpen: isOpened })), style: style, onAnimationEnd: handleAnimationEnd, children: _jsx(InnerContainer, { ref: setContainerRef, tabIndex: -1, className: popoverClassnames.innerContainer, children: children }) }) }));
+    return (_jsx(StyledMuiPopper, { className: classNames(popoverClassnames.root, className), style: style, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, modifiers: mergedModifiers, children: _jsxs(AnimatedWrapper, { className: animatedWrapperCva({ isOpen: isOpened, hasArrow }), onAnimationEnd: handleAnimationEnd, children: [hasArrow && (_jsx(PopoverArrow, { ref: setArrowElement, className: popoverClassnames.arrow })), _jsx(InnerContainer, { ref: setContainerRef, tabIndex: -1, className: popoverClassnames.innerContainer, children: children })] }) }));
 };

package/components/NewPopover/constants.d.ts

@@ -1,6 +1,13 @@
+import { type NewPopoverModifier } from './types';
 export declare const popoverClassnames: {
     root: string;
     innerContainer: string;
     animatedWrapper: string;
     animatedWrapperOpen: string;
+    animatedWrapperHasArrow: string;
+    arrow: string;
 };
+/**
+ * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
+ */
+export declare const DEFAULT_MODIFIERS: NewPopoverModifier[];

package/components/NewPopover/constants.js

@@ -4,4 +4,15 @@ export const popoverClassnames = {
     innerContainer: createUIKitClassname('popover__inner-container'),
     animatedWrapper: createUIKitClassname('popover__animated-wrapper'),
     animatedWrapperOpen: createUIKitClassname('popover__animated-wrapper_is-open'),
+    animatedWrapperHasArrow: createUIKitClassname('popover__animated-wrapper_has-arrow'),
+    arrow: createUIKitClassname('popover__arrow'),
 };
+/**
+ * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
+ */
+export const DEFAULT_MODIFIERS = [
+    {
+        name: 'preventOverflow',
+        options: { altAxis: true, tether: false, padding: 8 },
+    },
+];

package/components/NewPopover/styles.d.ts

@@ -2,6 +2,10 @@
 export declare const StyledMuiPopper: import("../styled").StyledComponent<import("@mui/material/Popper").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const PopoverArrow: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const AnimatedWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/NewPopover/styles.js

@@ -6,6 +6,12 @@ export const StyledMuiPopper = styled(MuiPopper) `
     z-index: ${({ theme }) => theme.zIndex.tooltip};
   }
 
+  /* Anchor ушёл за скролл/вьюпорт — popper вешает reference-hidden.
+     Стрелка иначе тянется к пропавшему anchor и торчит криво — прячем её. */
+  &[data-popper-reference-hidden] .${popoverClassnames.arrow} {
+    visibility: hidden;
+  }
+
   &&[data-popper-placement*='top'] .${popoverClassnames.animatedWrapper} {
     transform-origin: bottom center;
 
@@ -29,16 +35,106 @@ export const StyledMuiPopper = styled(MuiPopper) `
 
     margin-left: ${({ theme }) => theme.spacing(2)};
   }
+
+  /* Со стрелкой отступ больше */
+  &&[data-popper-placement*='top']
+    .${popoverClassnames.animatedWrapperHasArrow} {
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='bottom']
+    .${popoverClassnames.animatedWrapperHasArrow} {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='left']
+    .${popoverClassnames.animatedWrapperHasArrow} {
+    margin-right: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='right']
+    .${popoverClassnames.animatedWrapperHasArrow} {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='bottom'] .${popoverClassnames.arrow} {
+    top: -16px;
+
+    width: 23px;
+    height: 16px;
+
+    &::before {
+      border-color: transparent transparent
+        ${({ theme }) => theme.palette.background.paper};
+      border-width: 0 11.5px 16px;
+    }
+  }
+
+  &&[data-popper-placement*='top'] .${popoverClassnames.arrow} {
+    bottom: -16px;
+
+    width: 23px;
+    height: 16px;
+
+    &::before {
+      border-color: ${({ theme }) => theme.palette.background.paper} transparent
+        transparent;
+      border-width: 16px 11.5px 0;
+    }
+  }
+
+  &&[data-popper-placement*='right'] .${popoverClassnames.arrow} {
+    left: -16px;
+
+    width: 16px;
+    height: 23px;
+
+    &::before {
+      border-color: transparent ${({ theme }) => theme.palette.background.paper}
+        transparent transparent;
+      border-width: 11.5px 16px 11.5px 0;
+    }
+  }
+
+  &&[data-popper-placement*='left'] .${popoverClassnames.arrow} {
+    right: -16px;
+
+    width: 16px;
+    height: 23px;
+
+    &::before {
+      border-color: transparent transparent transparent
+        ${({ theme }) => theme.palette.background.paper};
+      border-width: 11.5px 0 11.5px 16px;
+    }
+  }
+`;
+export const PopoverArrow = styled.span `
+  position: absolute;
+
+  &::before {
+    content: '';
+
+    display: block;
+
+    width: 0;
+    height: 0;
+    margin: auto;
+
+    border-style: solid;
+  }
 `;
 export const AnimatedWrapper = styled.div `
+  position: relative;
+
   animation: popover-grow-out
-    ${({ theme }) => theme.transitions.duration.enteringScreen}ms
-    ${({ theme }) => theme.transitions.easing.easeInOut} forwards;
+    ${({ theme }) => theme.transitions.duration.leavingScreen}ms
+    ${({ theme }) => theme.transitions.easing.easeIn} forwards;
 
   &.${popoverClassnames.animatedWrapperOpen} {
     animation: popover-grow-in
-      ${({ theme }) => theme.transitions.duration.enteringScreen}ms
-      ${({ theme }) => theme.transitions.easing.easeInOut} forwards;
+      ${({ theme }) => theme.transitions.duration.standard}ms
+      ${({ theme }) => theme.transitions.easing.easeOut} forwards;
   }
 
   @keyframes popover-grow-in {

package/components/NewPopover/types.d.ts

@@ -5,6 +5,14 @@ type NewPopoverVirtualElement = {
     getBoundingClientRect: () => DOMRect;
 };
 export type NewPopoverAnchorEl = null | NewPopoverVirtualElement | HTMLElement | (() => HTMLElement) | (() => NewPopoverVirtualElement);
+/**
+ * Модификатор Popper.js.
+ */
+export type NewPopoverModifier = {
+    name: string;
+    enabled?: boolean;
+    options?: Record<string, unknown>;
+};
 export type NewPopoverProps = {
     /**
      * Якорь позиционирования
@@ -49,5 +57,10 @@ export type NewPopoverProps = {
      * @default false
      */
     disableAutoFocus?: boolean;
+    /**
+     * Показывать стрелку, указывающую на anchorEl
+     * @default false
+     */
+    hasArrow?: boolean;
 };
 export {};

package/components/NewPopover/useLogic/useLogic.d.ts

@@ -1,11 +1,15 @@
-import { type NewPopoverProps } from '../types';
-type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus'>;
-export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, }: UseLogicParams) => {
+/// <reference types="react" />
+import { type NewPopoverModifier, type NewPopoverProps } from '../types';
+type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow'>;
+export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }: UseLogicParams) => {
     isMobile: boolean;
     isOpened: boolean;
     shouldRender: boolean;
     handleAnimationEnd: () => void;
     handleClose: (event: Event) => void;
     setContainerRef: (node: HTMLDivElement | null) => void;
+    arrowElement: HTMLSpanElement | null;
+    setArrowElement: import("react").Dispatch<import("react").SetStateAction<HTMLSpanElement | null>>;
+    mergedModifiers: NewPopoverModifier[];
 };
 export {};

package/components/NewPopover/useLogic/useLogic.js

@@ -4,10 +4,12 @@ import { useEscapeClickEffect } from '../../useEscapeClickEffect';
 import { useFocusTrapEffect } from '../../useFocusTrapEffect';
 import { usePopoverAnimation } from '../../usePopoverAnimation';
 import { useViewportType } from '../../useViewportType';
+import { DEFAULT_MODIFIERS } from '../constants';
 import { resolveAnchorNode } from '../utils';
-export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
+export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) => {
     const containerRef = useRef(null);
     const [isContainerMounted, setIsContainerMounted] = useState(false);
+    const [arrowElement, setArrowElement] = useState(null);
     const setContainerRef = useCallback((node) => {
         containerRef.current = node;
         setIsContainerMounted(Boolean(node));
@@ -43,6 +45,15 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
         allowOutsideClick: true,
         fallbackFocus: () => containerRef.current || document.body,
     });
+    const mergedModifiers = useMemo(() => {
+        if (!hasArrow) {
+            return DEFAULT_MODIFIERS;
+        }
+        return [
+            ...DEFAULT_MODIFIERS,
+            { name: 'arrow', enabled: true, options: { element: arrowElement } },
+        ];
+    }, [hasArrow, arrowElement]);
     return {
         isMobile,
         isOpened,
@@ -50,5 +61,8 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
         handleAnimationEnd,
         handleClose,
         setContainerRef,
+        arrowElement,
+        setArrowElement,
+        mergedModifiers,
     };
 };

package/components/Onboarding/Onboarding.d.ts

@@ -0,0 +1,35 @@
+import { ErrorService } from '../services/ErrorService';
+import { ActiveStepStore } from './core/ActiveStepStore';
+import { OnboardingTour } from './core/OnboardingTour';
+import { type OnboardingConfig, type OnboardingTourConfig, type SaveStrategyFactory, type Step } from './types';
+/**
+ * Фасад Onboarding, который собирает туры.
+ *
+ * Создаётся через createOnboarding.
+ */
+export declare class Onboarding {
+    private readonly saveStrategyFactory;
+    private readonly errorService;
+    readonly activeStepStore: ActiveStepStore;
+    constructor(saveStrategyFactory: SaveStrategyFactory, errorService: ErrorService);
+    /**
+     * Создаёт тур.
+     */
+    createTour: <const TSteps extends readonly Step[]>(tourConfig: OnboardingTourConfig<TSteps>) => OnboardingTour<TSteps>;
+    /**
+     * Закрывает показанный сейчас тур.
+     */
+    closeActiveTour: () => void;
+}
+/**
+ * Создаёт экземпляр онбординга.
+ *
+ * Экземпляр передаётся контейнеру явно: `<OnboardingContainer onboarding={...}/>`.
+ *
+ * @example
+ * const onboarding = createOnboarding({ saveStrategy });
+ * const tour = onboarding.createTour({ name: 'intro', steps: [...] });
+ * <OnboardingContainer onboarding={onboarding} />
+ * tour.start();
+ */
+export declare const createOnboarding: (config?: OnboardingConfig) => Onboarding;

package/components/Onboarding/Onboarding.js

@@ -0,0 +1,56 @@
+import { createLogger } from '../../services/Logger';
+import { ErrorService } from '../services/ErrorService';
+import { ActiveStepStore } from './core/ActiveStepStore';
+import { OnboardingTour } from './core/OnboardingTour';
+import { ProgressStorage } from './core/ProgressStorage';
+import { createLocalStorageSaveStrategy } from './services/LocalStorageSaveStrategy';
+import { validateTourConfig } from './validation';
+/**
+ * Фасад Onboarding, который собирает туры.
+ *
+ * Создаётся через createOnboarding.
+ */
+export class Onboarding {
+    constructor(saveStrategyFactory, errorService) {
+        this.saveStrategyFactory = saveStrategyFactory;
+        this.errorService = errorService;
+        this.activeStepStore = new ActiveStepStore();
+        /**
+         * Создаёт тур.
+         */
+        this.createTour = (tourConfig) => {
+            const logger = createLogger('Onboarding', {
+                context: { tourName: tourConfig.name },
+            });
+            // Fail-fast на некорректной конфигурации до сборки тура.
+            try {
+                validateTourConfig(tourConfig);
+            }
+            catch (error) {
+                logger.error('Некорректная конфигурация тура', error);
+                throw error;
+            }
+            // Ключ хранилища уникален на тур, поэтому стратегия строится на createTour.
+            const progressStorage = new ProgressStorage(this.saveStrategyFactory(tourConfig.name), logger);
+            return new OnboardingTour(tourConfig, progressStorage, this.activeStepStore, this.errorService, logger);
+        };
+        /**
+         * Закрывает показанный сейчас тур.
+         */
+        this.closeActiveTour = () => {
+            this.activeStepStore.closeActiveTour();
+        };
+    }
+}
+/**
+ * Создаёт экземпляр онбординга.
+ *
+ * Экземпляр передаётся контейнеру явно: `<OnboardingContainer onboarding={...}/>`.
+ *
+ * @example
+ * const onboarding = createOnboarding({ saveStrategy });
+ * const tour = onboarding.createTour({ name: 'intro', steps: [...] });
+ * <OnboardingContainer onboarding={onboarding} />
+ * tour.start();
+ */
+export const createOnboarding = (config = {}) => new Onboarding(config.saveStrategy ?? createLocalStorageSaveStrategy, ErrorService.getInstance());

package/components/Onboarding/constants.d.ts

@@ -0,0 +1,34 @@
+/**
+ * data-атрибут, по которому highlight-шаг находит свой элемент.
+ */
+export declare const TOUR_ID_ATTR = "data-tour-id";
+/**
+ * Тайм-аут по умолчанию ожидания элемента highlight-шага в DOM (мс).
+ * `0` — элемент ищется синхронно. Ожидание включается только при заданном
+ * `waitForTimeout`.
+ */
+export declare const DEFAULT_WAIT_ELEMENT_TIMEOUT_MS = 0;
+/**
+ * Базовый отступ hole overlay вокруг подсвечиваемого элемента (px).
+ * Применяется, когда у шага не задан `highlightOffset`.
+ */
+export declare const DEFAULT_HIGHLIGHT_PADDING = 8;
+/**
+ * Скругление углов hole overlay (px).
+ */
+export declare const DEFAULT_HIGHLIGHT_RADIUS = 8;
+/**
+ * Поведение автоскролла к элементу highlight-шага.
+ */
+export declare const SCROLL_BEHAVIOR: ScrollBehavior;
+/**
+ * Надбавки к z-index собственных поверхностей онбординга поверх
+ * `theme.zIndex.tooltip`, чтобы они перекрывали
+ * обычные UIKit-модалки/подсказки.
+ */
+export declare const ONBOARDING_Z_INDEX_OFFSET: {
+    /** Overlay-backdrop и диалоги (standalone-шаг, confirm-exit). */
+    readonly base: 10;
+    /** Highlight-popover — всплывает над базовым слоем. */
+    readonly popover: 30;
+};

package/components/Onboarding/constants.js

@@ -0,0 +1,34 @@
+/**
+ * data-атрибут, по которому highlight-шаг находит свой элемент.
+ */
+export const TOUR_ID_ATTR = 'data-tour-id';
+/**
+ * Тайм-аут по умолчанию ожидания элемента highlight-шага в DOM (мс).
+ * `0` — элемент ищется синхронно. Ожидание включается только при заданном
+ * `waitForTimeout`.
+ */
+export const DEFAULT_WAIT_ELEMENT_TIMEOUT_MS = 0;
+/**
+ * Базовый отступ hole overlay вокруг подсвечиваемого элемента (px).
+ * Применяется, когда у шага не задан `highlightOffset`.
+ */
+export const DEFAULT_HIGHLIGHT_PADDING = 8;
+/**
+ * Скругление углов hole overlay (px).
+ */
+export const DEFAULT_HIGHLIGHT_RADIUS = 8;
+/**
+ * Поведение автоскролла к элементу highlight-шага.
+ */
+export const SCROLL_BEHAVIOR = 'smooth';
+/**
+ * Надбавки к z-index собственных поверхностей онбординга поверх
+ * `theme.zIndex.tooltip`, чтобы они перекрывали
+ * обычные UIKit-модалки/подсказки.
+ */
+export const ONBOARDING_Z_INDEX_OFFSET = {
+    /** Overlay-backdrop и диалоги (standalone-шаг, confirm-exit). */
+    base: 10,
+    /** Highlight-popover — всплывает над базовым слоем. */
+    popover: 30,
+};