@astral/ui 4.82.0 → 4.83.0

package/components/Onboarding/utils/geometry/viewport/viewport.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Размеры viewport.
+ */
+export type Viewport = {
+    width: number;
+    height: number;
+};
+/**
+ * Текущие размеры viewport.
+ *
+ * Именно `documentElement.clientWidth/Height`, а не `window.innerWidth/Height`:
+ * inner-размеры включают полосы прокрутки окна.
+ */
+export declare const getViewport: () => Viewport;

package/components/Onboarding/utils/geometry/viewport/viewport.js

@@ -0,0 +1,10 @@
+/**
+ * Текущие размеры viewport.
+ *
+ * Именно `documentElement.clientWidth/Height`, а не `window.innerWidth/Height`:
+ * inner-размеры включают полосы прокрутки окна.
+ */
+export const getViewport = () => ({
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+});

package/components/Onboarding/utils/getScrollParents/getScrollParents.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Возвращает цепочку scroll-предков элемента (от ближайшего к корню).
+ *
+ * Нужна, чтобы прокручивать вложенные контейнеры и слушать их `scroll`
+ * для синхронизации hole overlay.
+ */
+export declare const getScrollParents: (element: Element | null) => HTMLElement[];

package/components/Onboarding/utils/getScrollParents/getScrollParents.js

@@ -0,0 +1,24 @@
+/**
+ * Является ли элемент scroll-контейнером.
+ */
+const isScrollable = (element) => {
+    const { overflow, overflowX, overflowY } = getComputedStyle(element);
+    return /(auto|scroll|overlay)/.test(`${overflow}${overflowX}${overflowY}`);
+};
+/**
+ * Возвращает цепочку scroll-предков элемента (от ближайшего к корню).
+ *
+ * Нужна, чтобы прокручивать вложенные контейнеры и слушать их `scroll`
+ * для синхронизации hole overlay.
+ */
+export const getScrollParents = (element) => {
+    const parents = [];
+    let node = element?.parentElement ?? null;
+    while (node && node !== document.body && node !== document.documentElement) {
+        if (isScrollable(node)) {
+            parents.push(node);
+        }
+        node = node.parentElement;
+    }
+    return parents;
+};

package/components/Onboarding/utils/getScrollParents/index.d.ts

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

package/components/Onboarding/utils/getScrollParents/index.js

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

package/components/Onboarding/utils/getTargetElement/getTargetElement.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Находит элемент highlight-шага по `[data-tour-id="<stepName>"]`.
+ */
+export declare const getTargetElement: (stepName: string, root?: ParentNode) => HTMLElement | null;

package/components/Onboarding/utils/getTargetElement/getTargetElement.js

@@ -0,0 +1,9 @@
+import { TOUR_ID_ATTR } from '../../constants';
+/**
+ * Экранирует значение для безопасной подстановки в CSS-селектор атрибута.
+ */
+const escapeAttrValue = (value) => value.replace(/["\\]/g, '\\$&');
+/**
+ * Находит элемент highlight-шага по `[data-tour-id="<stepName>"]`.
+ */
+export const getTargetElement = (stepName, root = document) => root.querySelector(`[${TOUR_ID_ATTR}="${escapeAttrValue(stepName)}"]`);

package/components/Onboarding/utils/getTargetElement/index.d.ts

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

package/components/Onboarding/utils/getTargetElement/index.js

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

package/components/Onboarding/utils/observeRemoval/index.d.ts

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

package/components/Onboarding/utils/observeRemoval/index.js

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

package/components/Onboarding/utils/observeRemoval/observeRemoval.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Следит за удалением элемента из DOM (размонтирование, условный render).
+ */
+export declare const observeRemoval: (element: HTMLElement, onRemoved: () => void) => VoidFunction;

package/components/Onboarding/utils/observeRemoval/observeRemoval.js

@@ -0,0 +1,13 @@
+/**
+ * Следит за удалением элемента из DOM (размонтирование, условный render).
+ */
+export const observeRemoval = (element, onRemoved) => {
+    const observer = new MutationObserver(() => {
+        if (!element.isConnected) {
+            observer.disconnect();
+            onRemoved();
+        }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+};

package/components/Onboarding/utils/scrollIntoView/index.d.ts

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

package/components/Onboarding/utils/scrollIntoView/index.js

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

package/components/Onboarding/utils/scrollIntoView/scrollIntoView.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Доводит элемент highlight-шага до центра viewport и ждёт, пока прокрутка
+ * реально доедет.
+ *
+ * Зачем: цель может быть за пределами экрана или внутри прокрученного
+ * контейнера — её надо показать, прежде чем подсвечивать. Нативный
+ * `scrollIntoView` сам прокручивает всю цепочку вложенных scroll-контейнеров.
+ *
+ * Почему ждём: прокрутка плавная (анимированная), позиция элемента меняется
+ * кадр за кадром. Дожидаемся её стабилизации, чтобы hole overlay и popover встали
+ * по финальной позиции, а не по промежуточной «едущей».
+ */
+export declare const scrollIntoView: (element: HTMLElement, behavior?: ScrollBehavior) => Promise<void>;

package/components/Onboarding/utils/scrollIntoView/scrollIntoView.js

@@ -0,0 +1,85 @@
+import { SCROLL_BEHAVIOR } from '../../constants';
+import { getViewport } from '../geometry';
+import { getScrollParents } from '../getScrollParents';
+/**
+ * Сколько кадров подряд позиция не меняется, чтобы счесть прокрутку стабилизировавшейся.
+ */
+const STABLE_FRAMES = 3;
+/**
+ * Предохранитель: если позиция так и не стабилизировалась (постоянные
+ * layout-сдвиги), делаем resolve по тайм-ауту, чтобы Promise не завис и тур не застрял.
+ */
+const SETTLE_TIMEOUT_MS = 1000;
+/**
+ * Дожидается окончания плавной прокрутки.
+ *
+ * У браузера нет надёжного сигнала «плавная прокрутка доехала».
+ * Поэтому отслеживаем позицию элемента покадрово и считаем прокрутку
+ * законченной, когда `top` перестаёт меняться 3 кадра
+ * подряд — либо когда срабатывает предохранитель 1000мс.
+ */
+const waitForScrollSettle = (element) => new Promise((resolve) => {
+    let raf = 0;
+    let stableFrames = 0;
+    let prevTop = Number.NaN;
+    const timer = setTimeout(() => {
+        cancelAnimationFrame(raf);
+        resolve();
+    }, SETTLE_TIMEOUT_MS);
+    const tick = () => {
+        const { top } = element.getBoundingClientRect();
+        // Позиция не изменилась за кадр — копим «стабильные» кадры; дёрнулась —
+        // сбрасываем счётчик и запоминаем новую позицию.
+        if (top === prevTop) {
+            stableFrames += 1;
+        }
+        else {
+            stableFrames = 0;
+            prevTop = top;
+        }
+        // Достаточно кадров без движения → анимация закончилась.
+        if (stableFrames >= STABLE_FRAMES) {
+            clearTimeout(timer);
+            resolve();
+            return;
+        }
+        raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+});
+/**
+ * Элемент целиком видим: помещается и во viewport, и в рамки каждого своего
+ * scroll-предка.
+ */
+const isFullyVisible = (element) => {
+    const rect = element.getBoundingClientRect();
+    const { width, height } = getViewport();
+    const viewport = new DOMRect(0, 0, width, height);
+    const frames = [
+        viewport,
+        ...getScrollParents(element).map((parent) => parent.getBoundingClientRect()),
+    ];
+    return frames.every((frame) => rect.top >= frame.top &&
+        rect.left >= frame.left &&
+        rect.bottom <= frame.bottom &&
+        rect.right <= frame.right);
+};
+/**
+ * Доводит элемент highlight-шага до центра viewport и ждёт, пока прокрутка
+ * реально доедет.
+ *
+ * Зачем: цель может быть за пределами экрана или внутри прокрученного
+ * контейнера — её надо показать, прежде чем подсвечивать. Нативный
+ * `scrollIntoView` сам прокручивает всю цепочку вложенных scroll-контейнеров.
+ *
+ * Почему ждём: прокрутка плавная (анимированная), позиция элемента меняется
+ * кадр за кадром. Дожидаемся её стабилизации, чтобы hole overlay и popover встали
+ * по финальной позиции, а не по промежуточной «едущей».
+ */
+export const scrollIntoView = async (element, behavior = SCROLL_BEHAVIOR) => {
+    if (isFullyVisible(element)) {
+        return;
+    }
+    element.scrollIntoView({ behavior, block: 'center', inline: 'center' });
+    await waitForScrollSettle(element);
+};

package/components/Onboarding/utils/waitForElement/index.d.ts

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

package/components/Onboarding/utils/waitForElement/index.js

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

package/components/Onboarding/utils/waitForElement/waitForElement.d.ts

@@ -0,0 +1,21 @@
+export type WaitForElementOptions = {
+    /**
+     * Тайм-аут ожидания, мс. `0` — не ждём: проверяем DOM синхронно и, если
+     * элемента нет, сразу делаем reject.
+     * @default 0
+     */
+    timeout?: number;
+    /**
+     * Корень для поиска и наблюдения за DOM.
+     * @default document
+     */
+    root?: Document | HTMLElement;
+};
+/**
+ * Дожидается появления элемента highlight-шага в DOM.
+ *
+ * Если элемент уже есть — синхронный resolve. При `timeout <= 0` ожидание
+ * отключено. Иначе подписывается через MutationObserver и resolve при появлении,
+ * либо reject по тайм-ауту.
+ */
+export declare const waitForElement: (stepName: string, { timeout, root, }?: WaitForElementOptions) => Promise<HTMLElement>;

package/components/Onboarding/utils/waitForElement/waitForElement.js

@@ -0,0 +1,45 @@
+import { DEFAULT_WAIT_ELEMENT_TIMEOUT_MS, TOUR_ID_ATTR } from '../../constants';
+import { getTargetElement } from '../getTargetElement';
+/**
+ * Дожидается появления элемента highlight-шага в DOM.
+ *
+ * Если элемент уже есть — синхронный resolve. При `timeout <= 0` ожидание
+ * отключено. Иначе подписывается через MutationObserver и resolve при появлении,
+ * либо reject по тайм-ауту.
+ */
+export const waitForElement = (stepName, { timeout = DEFAULT_WAIT_ELEMENT_TIMEOUT_MS, root = document, } = {}) => new Promise((resolve, reject) => {
+    const existing = getTargetElement(stepName, root);
+    if (existing) {
+        resolve(existing);
+        return;
+    }
+    // Ожидание отключено (по умолчанию): элемента в DOM нет — ждать нечего,
+    // делаем reject сразу, не подписываясь на мутации.
+    if (timeout <= 0) {
+        reject(new Error(`Элемент шага "${stepName}" не найден в DOM, а ожидание отключено (waitForTimeout=0). Навесьте data-tour-id через getHighlightProps() либо задайте waitForTimeout, если элемент появляется асинхронно.`));
+        return;
+    }
+    const observeRoot = root instanceof Document ? root.body : root;
+    let timer;
+    const observer = new MutationObserver(() => {
+        const element = getTargetElement(stepName, root);
+        if (element) {
+            cleanup();
+            resolve(element);
+        }
+    });
+    const cleanup = () => {
+        observer.disconnect();
+        clearTimeout(timer);
+    };
+    observer.observe(observeRoot, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: [TOUR_ID_ATTR],
+    });
+    timer = setTimeout(() => {
+        cleanup();
+        reject(new Error(`Элемент шага "${stepName}" не найден за ${timeout}мс. Убедитесь, что на нём навешен data-tour-id через getHighlightProps().`));
+    }, timeout);
+});

package/components/Onboarding/validation/index.d.ts

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

package/components/Onboarding/validation/index.js

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

package/components/Onboarding/validation/validateTourConfig/index.d.ts

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

package/components/Onboarding/validation/validateTourConfig/index.js

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

package/components/Onboarding/validation/validateTourConfig/validateTourConfig.d.ts

@@ -0,0 +1,12 @@
+import { type OnboardingTourConfig, type Step } from '../../types';
+/**
+ * Ошибка конфигурации тура
+ */
+export declare class OnboardingConfigError extends Error {
+    constructor(errors: unknown);
+}
+/**
+ * Проверяет конфигурацию тура и бросает ошибку при нарушениях.
+ * Вызывается при создании тура (в `createTour`).
+ */
+export declare const validateTourConfig: <TSteps extends readonly Step[]>(config: OnboardingTourConfig<TSteps>) => void;

package/components/Onboarding/validation/validateTourConfig/validateTourConfig.js

@@ -0,0 +1,52 @@
+import * as v from '@astral/validations';
+/**
+ * Имя шага в camelCase.
+ * Гарантирует доступ `tour.steps.stepName` и чистый `data-tour-id`.
+ */
+const CAMEL_CASE = /^[a-z][a-zA-Z0-9]*$/;
+/**
+ * Правило: имена шагов уникальны в рамках тура.
+ */
+const uniqueStepName = () => v.createRule((steps, ctx) => {
+    const seenNames = new Set();
+    for (const { name } of steps) {
+        if (seenNames.has(name)) {
+            return ctx.createError({
+                code: 'DUPLICATE_STEP_NAME',
+                message: `Имя шага «${name}» не уникально`,
+            });
+        }
+        seenNames.add(name);
+    }
+    return undefined;
+});
+/**
+ * Схема валидации конфигурации тура.
+ */
+const tourConfigSchema = v.object({
+    name: v.string(v.min(1)),
+    steps: v.array(v.min(1), v.arrayItem(v.object({
+        name: v.string(v.min(1), v.pattern(CAMEL_CASE, {
+            message: 'Имя шага должно быть в camelCase',
+        })),
+    })), uniqueStepName()),
+});
+/**
+ * Ошибка конфигурации тура
+ */
+export class OnboardingConfigError extends Error {
+    constructor(errors) {
+        super(`Некорректная конфигурация тура:\n${JSON.stringify(errors, null, 2)}`);
+        this.name = 'OnboardingConfigError';
+    }
+}
+/**
+ * Проверяет конфигурацию тура и бросает ошибку при нарушениях.
+ * Вызывается при создании тура (в `createTour`).
+ */
+export const validateTourConfig = (config) => {
+    const errors = tourConfigSchema(config);
+    if (errors) {
+        throw new OnboardingConfigError(v.toPrettyError(errors));
+    }
+};

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/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;