@astral/ui 4.82.0 → 4.84.0

package/node/components/ConfigProvider/ConfigProvider.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfigProvider = exports.ConfigContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Logger_1 = require("../../services/Logger");
 const constants_1 = require("../DatePicker/constants");
 const ErrorService_1 = require("../services/ErrorService");
 const NextFeatureFlagsContext_1 = require("./NextFeatureFlagsContext");
@@ -16,6 +17,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';
 exports.ConfigContext = (0, react_1.createContext)({
@@ -30,20 +35,21 @@ exports.ConfigContext = (0, react_1.createContext)({
     hidePersonalInputDataClassname: defaultHidePersonalInputDataClassname,
     hidePersonalData: true,
 });
-const ConfigProvider = ({ children, language = 'ru', datePickerLanguageMap = constants_1.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));
-    (0, react_1.useMemo)(() => {
+const ConfigProvider = ({ children, language = 'ru', datePickerLanguageMap = constants_1.russianMap, captureException: captureExceptionProp, emptySymbol = '—', imagesMap = imagesMapDefault, techSup = techSupDefault, hidePersonalData = true, hidePersonalDataClassname = defaultHidePersonalDataClassname, hidePersonalInputDataClassname = defaultHidePersonalInputDataClassname, components: propsComponents, nextFeatureFlags = {}, logLevel, }) => {
+    const captureException = captureExceptionProp ?? defaultCaptureException;
+    (0, react_1.useEffect)(() => {
         ErrorService_1.ErrorService.getInstance().init(captureException);
     }, [captureException]);
     (0, react_1.useEffect)(() => {
-        if (!captureException) {
+        return (0, Logger_1.configureLogger)({ level: logLevel });
+    }, [logLevel]);
+    (0, react_1.useEffect)(() => {
+        if (!captureExceptionProp) {
             // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
             console.warn('ConfigProvider: Необходимо наличие captureException, связанного с сервисом мониторинга ошибок.\n' +
                 'На данный момент все ошибки, отлавливаемые в ErrorBoundary будут выводиться только в консоль');
         }
-    }, []);
+    }, [captureExceptionProp]);
     const components = {
         ...propsComponents,
         layout: {

package/node/components/ConfirmDialog/ConfirmDialog.js

@@ -7,6 +7,8 @@ const Dialog_1 = require("../Dialog");
 const DialogActions_1 = require("../DialogActions");
 const DialogContent_1 = require("../DialogContent");
 const DialogContentText_1 = require("../DialogContentText");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const ConfirmDialog = (props) => {
@@ -14,6 +16,6 @@ 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 ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && ((0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.DialogContentText, { children: description })) : (description) })), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [isShowCancelButton && ((0, jsx_runtime_1.jsx)(styles_1.CancelButton, { ...restCancelProps, ...cancelButtonProps, children: cancelText })), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: confirmText })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && ((0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.DialogContentText, { children: description })) : (description) })), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [isShowCancelButton && ((0, jsx_runtime_1.jsx)(styles_1.CancelButton, { ...restCancelProps, ...cancelButtonProps, className: (0, classNames_1.classNames)(actions.cancel?.className, constants_1.confirmDialogClassnames.cancelButton), children: cancelText })), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, className: (0, classNames_1.classNames)(confirmButtonProps.className, constants_1.confirmDialogClassnames.confirmButton), children: confirmText })] })] }));
 };
 exports.ConfirmDialog = ConfirmDialog;

package/node/components/ConfirmDialog/constants.d.ts

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

package/node/components/ConfirmDialog/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.confirmDialogClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.confirmDialogClassnames = {
+    confirmButton: (0, createUIKitClassname_1.createUIKitClassname)('confirm-dialog__confirm-button'),
+    cancelButton: (0, createUIKitClassname_1.createUIKitClassname)('confirm-dialog__cancel-button'),
+};

package/node/components/ConfirmDialog/index.d.ts

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

package/node/components/ConfirmDialog/index.js

@@ -14,4 +14,7 @@ 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 });
+exports.confirmDialogClassnames = void 0;
 __exportStar(require("./ConfirmDialog"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "confirmDialogClassnames", { enumerable: true, get: function () { return constants_1.confirmDialogClassnames; } });

package/node/components/ConfirmDialog/public.d.ts

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

package/node/components/ConfirmDialog/public.js

@@ -14,4 +14,7 @@ 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 });
+exports.confirmDialogClassnames = void 0;
 __exportStar(require("./ConfirmDialog"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "confirmDialogClassnames", { enumerable: true, get: function () { return constants_1.confirmDialogClassnames; } });

package/node/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/node/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/node/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/node/components/NewPopover/NewPopover.js

@@ -13,15 +13,24 @@ const animatedWrapperCva = (0, cva_1.cva)(constants_1.popoverClassnames.animated
         isOpen: {
             true: constants_1.popoverClassnames.animatedWrapperOpen,
         },
+        hasArrow: {
+            true: constants_1.popoverClassnames.animatedWrapperHasArrow,
+        },
     },
 });
-const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, }) => {
-    const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, } = (0, useLogic_1.useLogic)({ isOpen, anchorEl, onClose, disableAutoFocus });
+const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, hasArrow, }) => {
+    const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, setArrowElement, mergedModifiers, } = (0, useLogic_1.useLogic)({
+        isOpen,
+        anchorEl,
+        onClose,
+        disableAutoFocus,
+        hasArrow,
+    });
     if (isMobile) {
         return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {
                 disableAutoFocus,
             }, children: children }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledMuiPopper, { className: constants_1.popoverClassnames.root, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, children: (0, jsx_runtime_1.jsx)(styles_1.AnimatedWrapper, { className: (0, classNames_1.classNames)(className, animatedWrapperCva({ isOpen: isOpened })), style: style, onAnimationEnd: handleAnimationEnd, children: (0, jsx_runtime_1.jsx)(styles_1.InnerContainer, { ref: setContainerRef, tabIndex: -1, className: constants_1.popoverClassnames.innerContainer, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledMuiPopper, { className: (0, classNames_1.classNames)(constants_1.popoverClassnames.root, className), style: style, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, modifiers: mergedModifiers, children: (0, jsx_runtime_1.jsxs)(styles_1.AnimatedWrapper, { className: animatedWrapperCva({ isOpen: isOpened, hasArrow }), onAnimationEnd: handleAnimationEnd, children: [hasArrow && ((0, jsx_runtime_1.jsx)(styles_1.PopoverArrow, { ref: setArrowElement, className: constants_1.popoverClassnames.arrow })), (0, jsx_runtime_1.jsx)(styles_1.InnerContainer, { ref: setContainerRef, tabIndex: -1, className: constants_1.popoverClassnames.innerContainer, children: children })] }) }));
 };
 exports.NewPopover = NewPopover;

package/node/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/node/components/NewPopover/constants.js

@@ -1,10 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.popoverClassnames = void 0;
+exports.DEFAULT_MODIFIERS = exports.popoverClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.popoverClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('popover'),
     innerContainer: (0, createUIKitClassname_1.createUIKitClassname)('popover__inner-container'),
     animatedWrapper: (0, createUIKitClassname_1.createUIKitClassname)('popover__animated-wrapper'),
     animatedWrapperOpen: (0, createUIKitClassname_1.createUIKitClassname)('popover__animated-wrapper_is-open'),
+    animatedWrapperHasArrow: (0, createUIKitClassname_1.createUIKitClassname)('popover__animated-wrapper_has-arrow'),
+    arrow: (0, createUIKitClassname_1.createUIKitClassname)('popover__arrow'),
 };
+/**
+ * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
+ */
+exports.DEFAULT_MODIFIERS = [
+    {
+        name: 'preventOverflow',
+        options: { altAxis: true, tether: false, padding: 8 },
+    },
+];

package/node/components/NewPopover/styles.d.ts

@@ -2,6 +2,10 @@
 export declare const StyledMuiPopper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/Popper").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const PopoverArrow: 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<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const AnimatedWrapper: 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;

package/node/components/NewPopover/styles.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnerContainer = exports.AnimatedWrapper = exports.StyledMuiPopper = void 0;
+exports.InnerContainer = exports.AnimatedWrapper = exports.PopoverArrow = exports.StyledMuiPopper = void 0;
 const Popper_1 = __importDefault(require("@mui/material/Popper"));
 const styled_1 = require("../styled");
 const constants_1 = require("./constants");
@@ -12,6 +12,12 @@ exports.StyledMuiPopper = (0, styled_1.styled)(Popper_1.default) `
     z-index: ${({ theme }) => theme.zIndex.tooltip};
   }
 
+  /* Anchor ушёл за скролл/вьюпорт — popper вешает reference-hidden.
+     Стрелка иначе тянется к пропавшему anchor и торчит криво — прячем её. */
+  &[data-popper-reference-hidden] .${constants_1.popoverClassnames.arrow} {
+    visibility: hidden;
+  }
+
   &&[data-popper-placement*='top'] .${constants_1.popoverClassnames.animatedWrapper} {
     transform-origin: bottom center;
 
@@ -35,16 +41,106 @@ exports.StyledMuiPopper = (0, styled_1.styled)(Popper_1.default) `
 
     margin-left: ${({ theme }) => theme.spacing(2)};
   }
+
+  /* Со стрелкой отступ больше */
+  &&[data-popper-placement*='top']
+    .${constants_1.popoverClassnames.animatedWrapperHasArrow} {
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='bottom']
+    .${constants_1.popoverClassnames.animatedWrapperHasArrow} {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='left']
+    .${constants_1.popoverClassnames.animatedWrapperHasArrow} {
+    margin-right: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='right']
+    .${constants_1.popoverClassnames.animatedWrapperHasArrow} {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+
+  &&[data-popper-placement*='bottom'] .${constants_1.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'] .${constants_1.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'] .${constants_1.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'] .${constants_1.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;
+    }
+  }
+`;
+exports.PopoverArrow = styled_1.styled.span `
+  position: absolute;
+
+  &::before {
+    content: '';
+
+    display: block;
+
+    width: 0;
+    height: 0;
+    margin: auto;
+
+    border-style: solid;
+  }
 `;
 exports.AnimatedWrapper = styled_1.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;
 
   &.${constants_1.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/node/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/node/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/node/components/NewPopover/useLogic/useLogic.js

@@ -7,10 +7,12 @@ const useEscapeClickEffect_1 = require("../../useEscapeClickEffect");
 const useFocusTrapEffect_1 = require("../../useFocusTrapEffect");
 const usePopoverAnimation_1 = require("../../usePopoverAnimation");
 const useViewportType_1 = require("../../useViewportType");
+const constants_1 = require("../constants");
 const utils_1 = require("../utils");
-const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
+const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [isContainerMounted, setIsContainerMounted] = (0, react_1.useState)(false);
+    const [arrowElement, setArrowElement] = (0, react_1.useState)(null);
     const setContainerRef = (0, react_1.useCallback)((node) => {
         containerRef.current = node;
         setIsContainerMounted(Boolean(node));
@@ -46,6 +48,15 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
         allowOutsideClick: true,
         fallbackFocus: () => containerRef.current || document.body,
     });
+    const mergedModifiers = (0, react_1.useMemo)(() => {
+        if (!hasArrow) {
+            return constants_1.DEFAULT_MODIFIERS;
+        }
+        return [
+            ...constants_1.DEFAULT_MODIFIERS,
+            { name: 'arrow', enabled: true, options: { element: arrowElement } },
+        ];
+    }, [hasArrow, arrowElement]);
     return {
         isMobile,
         isOpened,
@@ -53,6 +64,9 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
         handleAnimationEnd,
         handleClose,
         setContainerRef,
+        arrowElement,
+        setArrowElement,
+        mergedModifiers,
     };
 };
 exports.useLogic = useLogic;

package/node/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/node/components/Onboarding/Onboarding.js

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

package/node/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/node/components/Onboarding/constants.js

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