@astral/ui 4.84.0 → 4.85.0

package/components/HintPopover/HintPopover.d.ts

@@ -0,0 +1,6 @@
+import { type HintPopoverProps } from './types';
+/**
+ * Поповер-подсказка, привязанная к элементу: подсвечивает возможность интерфейса.
+ * Отличие от `NewPopover`: увеличенное скругление, всегда со стрелкой и не сворачивается в BottomDrawer на mobile.
+ */
+export declare const HintPopover: ({ variant, title, action, onClose, contentRef, children, className, ...restProps }: HintPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/HintPopover/HintPopover.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
+import { useViewportType } from '../useViewportType';
+import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
+import { hintPopoverClassnames } from './constants';
+import { ActionRow, Body, CloseButton, StyledHintPopover, Title, } from './styles';
+const hintPopoverCva = cva(hintPopoverClassnames.root, {
+    variants: {
+        variant: {
+            light: '',
+            dark: hintPopoverClassnames.dark,
+        },
+    },
+});
+/**
+ * Поповер-подсказка, привязанная к элементу: подсвечивает возможность интерфейса.
+ * Отличие от `NewPopover`: увеличенное скругление, всегда со стрелкой и не сворачивается в BottomDrawer на mobile.
+ */
+export const HintPopover = ({ variant = 'dark', title, action, onClose, contentRef, children, className, ...restProps }) => {
+    const { isMobile } = useViewportType();
+    return (_jsx(StyledHintPopover, { ...restProps, className: classNames(className, hintPopoverCva({ variant })), hasArrow: true, disableMobileDrawer: true, onClose: onClose, children: _jsxs(Body, { ref: contentRef, tabIndex: -1, children: [_jsx(CloseButton, { variant: "text", onClick: onClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: _jsx(CrossOutlineMd, {}) }), title && (_jsx(Title, { component: "div", variant: isMobile ? 'h5' : 'h4', children: title })), children, action && _jsx(ActionRow, { children: action })] }) }));
+};

package/components/HintPopover/constants.d.ts

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

package/components/HintPopover/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const hintPopoverClassnames = {
+    root: createUIKitClassname('hint-popover'),
+    dark: createUIKitClassname('hint-popover_dark'),
+};

package/components/HintPopover/index.d.ts

@@ -0,0 +1,2 @@
+export { HintPopover } from './HintPopover';
+export type { HintPopoverProps, HintPopoverVariant } from './types';

package/components/HintPopover/index.js

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

package/components/HintPopover/public.d.ts

@@ -0,0 +1,2 @@
+export { HintPopover } from './HintPopover';
+export type { HintPopoverProps, HintPopoverVariant } from './types';

package/components/HintPopover/public.js

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

package/components/HintPopover/styles.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+/**
+ * styled-обёртка над NewPopover: переопределяет его CSS-переменные — всегда
+ * увеличенный радиус, а для `dark` ещё тёмную подложку и текст (цвет стрелки
+ * подтянется из подложки сам).
+ */
+export declare const StyledHintPopover: import("../styled").StyledComponent<import("../NewPopover").NewPopoverProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Body: 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<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("../styled").StyledComponent<import("../Typography/types").TypographyPropsBase & {
+    color?: import("../Typography").TypographyColor | undefined;
+    variant?: import("../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../Typography").Intensity | undefined;
+    component?: import("../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ActionRow: 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<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CloseButton: import("../styled").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;
+}, {}, {}>;

package/components/HintPopover/styles.js

@@ -0,0 +1,69 @@
+import { IconButton } from '../IconButton';
+import { NewPopover } from '../NewPopover';
+import { styled } from '../styled';
+import { Typography } from '../Typography';
+import { hintPopoverClassnames } from './constants';
+/**
+ * styled-обёртка над NewPopover: переопределяет его CSS-переменные — всегда
+ * увеличенный радиус, а для `dark` ещё тёмную подложку и текст (цвет стрелки
+ * подтянется из подложки сам).
+ */
+export const StyledHintPopover = styled(NewPopover) `
+  --popover-radius: calc(${({ theme }) => theme.shape.medium} * 2);
+
+  &.${hintPopoverClassnames.dark} {
+    --popover-surface-color: ${({ theme }) => theme.palette.grey[900]};
+    --popover-text-color: ${({ theme }) => theme.palette.common.white};
+  }
+`;
+export const Body = styled.div `
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  width: min(400px, calc(100vw - ${({ theme }) => theme.spacing(8)}));
+  padding: ${({ theme }) => theme.spacing(6)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(4)};
+  }
+
+  /* Крестик висит абсолютом в углу и идёт первым в DOM, поэтому следующий за ним
+     верхний элемент (заголовок, а без него — контент) резервирует место справа,
+     чтобы текст под крестик не залез. */
+  & > button + * {
+    padding-right: ${({ theme }) => theme.spacing(10)};
+  }
+
+  /* Тело — программная цель фокуса (tabIndex=-1) у потребителя; рамку убираем. */
+  &:focus {
+    outline: none;
+  }
+`;
+export const Title = styled(Typography) `
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-bottom: ${({ theme }) => theme.spacing(1)};
+  }
+`;
+export const ActionRow = styled.div `
+  margin-top: ${({ theme }) => theme.spacing(6)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+export const CloseButton = styled(IconButton) `
+  position: absolute;
+  top: ${({ theme }) => theme.spacing(4)};
+  right: ${({ theme }) => theme.spacing(4)};
+
+  color: inherit;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    top: ${({ theme }) => theme.spacing(2)};
+    right: ${({ theme }) => theme.spacing(2)};
+  }
+`;

package/components/HintPopover/types.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode, type Ref } from 'react';
+import { type NewPopoverProps } from '../NewPopover';
+/** Цвет подложки highlight-popover. */
+export type HintPopoverVariant = 'light' | 'dark';
+/** Параметры HintPopover */
+export type HintPopoverProps = Omit<NewPopoverProps, 'hasArrow' | 'disableMobileDrawer' | 'title'> & {
+    /**
+     * Цвет подложки.
+     * @default 'dark'
+     */
+    variant?: HintPopoverVariant;
+    /**
+     * Заголовок.
+     */
+    title?: ReactNode;
+    /**
+     * Слот действий под контентом.
+     */
+    action?: ReactNode;
+    /**
+     * Ref на узел контента — для фокус-трапа/определения кликов у потребителя.
+     */
+    contentRef?: Ref<HTMLDivElement>;
+};

package/components/HintPopover/types.js

@@ -0,0 +1 @@
+export {};

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, hasArrow, }: NewPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NewPopover: ({ children, onClose, isOpen, title, className, style, placement, anchorEl, disablePortal, disableAutoFocus, hasArrow, disableMobileDrawer, }: NewPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/NewPopover/NewPopover.js

@@ -15,18 +15,19 @@ const animatedWrapperCva = cva(popoverClassnames.animatedWrapper, {
         },
     },
 });
-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({
+export const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, hasArrow, disableMobileDrawer, }) => {
+    const { shouldRenderDrawer, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, setArrowElement, mergedModifiers, animatedWrapperStyle, } = useLogic({
         isOpen,
         anchorEl,
         onClose,
         disableAutoFocus,
         hasArrow,
+        disableMobileDrawer,
     });
-    if (isMobile) {
+    if (shouldRenderDrawer) {
         return (_jsx(BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {
                 disableAutoFocus,
             }, 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 })] }) }));
+    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 }), style: animatedWrapperStyle, 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

@@ -7,6 +7,17 @@ export declare const popoverClassnames: {
     animatedWrapperHasArrow: string;
     arrow: string;
 };
+/** Основание и высота стрелки (px). */
+export declare const ARROW_BASE = 23;
+export declare const ARROW_HEIGHT = 16;
+/** Отступ стрелки от углов (px). */
+export declare const ARROW_PADDING = 24;
+/**
+ * Мин. отступ стрелки от угла (px)
+ */
+export declare const ARROW_MIN_PADDING = 16;
+/** Мин. «ход» стрелки вдоль кромки (px). */
+export declare const ARROW_MIN_TRACK = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */

package/components/NewPopover/constants.js

@@ -7,6 +7,17 @@ export const popoverClassnames = {
     animatedWrapperHasArrow: createUIKitClassname('popover__animated-wrapper_has-arrow'),
     arrow: createUIKitClassname('popover__arrow'),
 };
+/** Основание и высота стрелки (px). */
+export const ARROW_BASE = 23;
+export const ARROW_HEIGHT = 16;
+/** Отступ стрелки от углов (px). */
+export const ARROW_PADDING = 24;
+/**
+ * Мин. отступ стрелки от угла (px)
+ */
+export const ARROW_MIN_PADDING = 16;
+/** Мин. «ход» стрелки вдоль кромки (px). */
+export const ARROW_MIN_TRACK = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */

package/components/NewPopover/styles.js

@@ -1,13 +1,15 @@
 import MuiPopper from '@mui/material/Popper';
 import { styled } from '../styled';
-import { popoverClassnames } from './constants';
+import { ARROW_BASE, ARROW_HEIGHT, popoverClassnames } from './constants';
 export const StyledMuiPopper = styled(MuiPopper) `
   &.${popoverClassnames.root} {
+    --arrow-base: ${ARROW_BASE}px;
+    --arrow-height: ${ARROW_HEIGHT}px;
+
     z-index: ${({ theme }) => theme.zIndex.tooltip};
   }
 
-  /* Anchor ушёл за скролл/вьюпорт — popper вешает reference-hidden.
-     Стрелка иначе тянется к пропавшему anchor и торчит криво — прячем её. */
+  /* Anchor ушёл за скролл/вьюпорт — прячем стрелку. */
   &[data-popper-reference-hidden] .${popoverClassnames.arrow} {
     visibility: hidden;
   }
@@ -36,7 +38,6 @@ export const StyledMuiPopper = styled(MuiPopper) `
     margin-left: ${({ theme }) => theme.spacing(2)};
   }
 
-  /* Со стрелкой отступ больше */
   &&[data-popper-placement*='top']
     .${popoverClassnames.animatedWrapperHasArrow} {
     margin-bottom: ${({ theme }) => theme.spacing(4)};
@@ -58,54 +59,52 @@ export const StyledMuiPopper = styled(MuiPopper) `
   }
 
   &&[data-popper-placement*='bottom'] .${popoverClassnames.arrow} {
-    top: -16px;
+    top: calc(var(--arrow-height) * -1);
 
-    width: 23px;
-    height: 16px;
+    width: var(--arrow-base);
+    height: var(--arrow-height);
 
     &::before {
-      border-color: transparent transparent
-        ${({ theme }) => theme.palette.background.paper};
-      border-width: 0 11.5px 16px;
+      border-color: transparent transparent var(--popover-surface-color, ${({ theme }) => theme.palette.background.paper});
+      border-width: 0 calc(var(--arrow-base) / 2) var(--arrow-height);
     }
   }
 
   &&[data-popper-placement*='top'] .${popoverClassnames.arrow} {
-    bottom: -16px;
+    bottom: calc(var(--arrow-height) * -1);
 
-    width: 23px;
-    height: 16px;
+    width: var(--arrow-base);
+    height: var(--arrow-height);
 
     &::before {
-      border-color: ${({ theme }) => theme.palette.background.paper} transparent
-        transparent;
-      border-width: 16px 11.5px 0;
+      border-color: var(--popover-surface-color, ${({ theme }) => theme.palette.background.paper}) transparent transparent;
+      border-width: var(--arrow-height) calc(var(--arrow-base) / 2) 0;
     }
   }
 
   &&[data-popper-placement*='right'] .${popoverClassnames.arrow} {
-    left: -16px;
+    left: calc(var(--arrow-height) * -1);
 
-    width: 16px;
-    height: 23px;
+    width: var(--arrow-height);
+    height: var(--arrow-base);
 
     &::before {
-      border-color: transparent ${({ theme }) => theme.palette.background.paper}
-        transparent transparent;
-      border-width: 11.5px 16px 11.5px 0;
+      border-color: transparent var(--popover-surface-color, ${({ theme }) => theme.palette.background.paper}) transparent
+        transparent;
+      border-width: calc(var(--arrow-base) / 2) var(--arrow-height) calc(var(--arrow-base) / 2) 0;
     }
   }
 
   &&[data-popper-placement*='left'] .${popoverClassnames.arrow} {
-    right: -16px;
+    right: calc(var(--arrow-height) * -1);
 
-    width: 16px;
-    height: 23px;
+    width: var(--arrow-height);
+    height: var(--arrow-base);
 
     &::before {
       border-color: transparent transparent transparent
-        ${({ theme }) => theme.palette.background.paper};
-      border-width: 11.5px 0 11.5px 16px;
+        var(--popover-surface-color, ${({ theme }) => theme.palette.background.paper});
+      border-width: calc(var(--arrow-base) / 2) 0 calc(var(--arrow-base) / 2) var(--arrow-height);
     }
   }
 `;
@@ -126,6 +125,8 @@ export const PopoverArrow = styled.span `
 `;
 export const AnimatedWrapper = styled.div `
   position: relative;
+  
+  filter: var(--drop-shadow);
 
   animation: popover-grow-out
     ${({ theme }) => theme.transitions.duration.leavingScreen}ms
@@ -169,8 +170,12 @@ export const InnerContainer = styled.div `
   &.${popoverClassnames.innerContainer} {
     overflow: hidden;
 
-    background: ${({ theme }) => theme.palette.background.paper};
-    border-radius: ${({ theme }) => theme.shape.medium};
-    box-shadow: ${({ theme }) => theme.elevation[200]};
+    color: var(--popover-text-color, ${({ theme }) => theme.palette.text.primary});
+
+    background: var(
+      --popover-surface-color,
+      ${({ theme }) => theme.palette.background.paper}
+    );
+    border-radius: var(--popover-radius, ${({ theme }) => theme.shape.medium});
   }
 `;

package/components/NewPopover/types.d.ts

@@ -62,5 +62,10 @@ export type NewPopoverProps = {
      * @default false
      */
     hasArrow?: boolean;
+    /**
+     * Отключить BottomDrawer на mobile.
+     * @default false
+     */
+    disableMobileDrawer?: boolean;
 };
 export {};

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

@@ -1,8 +1,8 @@
 /// <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;
+type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow' | 'disableMobileDrawer'>;
+export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }: UseLogicParams) => {
+    shouldRenderDrawer: boolean;
     isOpened: boolean;
     shouldRender: boolean;
     handleAnimationEnd: () => void;
@@ -11,5 +11,6 @@ export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, h
     arrowElement: HTMLSpanElement | null;
     setArrowElement: import("react").Dispatch<import("react").SetStateAction<HTMLSpanElement | null>>;
     mergedModifiers: NewPopoverModifier[];
+    animatedWrapperStyle: import("react").CSSProperties;
 };
 export {};

package/components/NewPopover/useLogic/useLogic.js

@@ -5,8 +5,10 @@ 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, hasArrow, }) => {
+import { getArrowPadding } from './utils/getArrowPadding';
+import { getPopoverCssVars } from './utils/getPopoverCssVars';
+import { resolveAnchorNode } from './utils/resolveAnchorNode';
+export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }) => {
     const containerRef = useRef(null);
     const [isContainerMounted, setIsContainerMounted] = useState(false);
     const [arrowElement, setArrowElement] = useState(null);
@@ -18,7 +20,9 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow
     const isControlled = isOpen !== undefined;
     const { isMobile } = useViewportType();
     const { shouldRender, handleAnimationEnd } = usePopoverAnimation(isOpened);
-    const isEffectActive = !isMobile && isOpened && isContainerMounted;
+    const animatedWrapperStyle = getPopoverCssVars();
+    const shouldRenderDrawer = isMobile && !disableMobileDrawer;
+    const isPopoverActive = !shouldRenderDrawer && isOpened && isContainerMounted;
     const anchorNode = useMemo(() => resolveAnchorNode(anchorEl), [anchorEl]);
     const excludeNodes = useMemo(() => [anchorNode], [anchorNode]);
     const handleClose = (event) => {
@@ -27,18 +31,18 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow
     useClickAwayEffect({
         ref: containerRef,
         onClickAway: handleClose,
-        isActive: isEffectActive && !isControlled,
+        isActive: isPopoverActive && !isControlled,
         preventBubbling: true,
         excludeNodes,
     });
     useEscapeClickEffect({
         onEscape: handleClose,
-        isActive: isEffectActive,
+        isActive: isPopoverActive,
         preventBubbling: true,
     });
     useFocusTrapEffect({
         ref: containerRef,
-        isActive: isEffectActive && !disableAutoFocus,
+        isActive: isPopoverActive && !disableAutoFocus,
         returnFocusOnDeactivate: true,
         escapeDeactivates: false,
         clickOutsideDeactivates: false,
@@ -51,11 +55,15 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow
         }
         return [
             ...DEFAULT_MODIFIERS,
-            { name: 'arrow', enabled: true, options: { element: arrowElement } },
+            {
+                name: 'arrow',
+                enabled: true,
+                options: { element: arrowElement, padding: getArrowPadding },
+            },
         ];
     }, [hasArrow, arrowElement]);
     return {
-        isMobile,
+        shouldRenderDrawer,
         isOpened,
         shouldRender,
         handleAnimationEnd,
@@ -64,5 +72,6 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow
         arrowElement,
         setArrowElement,
         mergedModifiers,
+        animatedWrapperStyle,
     };
 };

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

@@ -0,0 +1,14 @@
+import { type NewPopoverPlacement } from '../../../types';
+type ArrowPaddingArgs = {
+    /** Прямоугольник поповера от Popper (нужны только габариты). */
+    popper: {
+        width: number;
+        height: number;
+    };
+    placement: NewPopoverPlacement;
+};
+/**
+ * Фиксированный padding отобразил бы стрелку на скруглённый угол
+ */
+export declare const getArrowPadding: ({ popper, placement }: ArrowPaddingArgs) => number;
+export {};

package/components/NewPopover/useLogic/utils/getArrowPadding/getArrowPadding.js

@@ -0,0 +1,12 @@
+import { ARROW_BASE, ARROW_MIN_PADDING, ARROW_MIN_TRACK, ARROW_PADDING, } from '../../../constants';
+/**
+ * Фиксированный padding отобразил бы стрелку на скруглённый угол
+ */
+export const getArrowPadding = ({ popper, placement }) => {
+    const isVertical = placement.startsWith('left') || placement.startsWith('right');
+    const side = isVertical ? popper.height : popper.width;
+    const free = Math.max(0, side - ARROW_BASE);
+    const centerPadding = free / 2;
+    const desiredPadding = Math.min(ARROW_PADDING, Math.max(ARROW_MIN_PADDING, (free - ARROW_MIN_TRACK) / 2));
+    return Math.min(centerPadding, desiredPadding);
+};

package/components/NewPopover/useLogic/utils/getArrowPadding/index.d.ts

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

package/components/NewPopover/useLogic/utils/getArrowPadding/index.js

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

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

@@ -0,0 +1,2 @@
+import type { CSSProperties } from 'react';
+export declare const getPopoverCssVars: () => CSSProperties;

package/components/NewPopover/useLogic/utils/getPopoverCssVars/getPopoverCssVars.js

@@ -0,0 +1,6 @@
+export const getPopoverCssVars = () => ({
+    // Единая тень на весь силуэт (поповер + уголок стрелки).
+    // Эквивалент elevation[200], переведённого в drop-shadow(): box-shadow
+    // не умеет обводить единый силуэт поповера со стрелкой.
+    '--drop-shadow': 'drop-shadow(0px 0px 1px #072D574F) drop-shadow(0px 3px 5px #072D5733)',
+});

package/components/NewPopover/useLogic/utils/getPopoverCssVars/index.d.ts

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

package/components/NewPopover/useLogic/utils/getPopoverCssVars/index.js

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

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

@@ -0,0 +1,6 @@
+import { type NewPopoverAnchorEl } from '../../../types';
+/**
+ * Приводит anchorEl к DOM-ноде (virtual-anchor → null), чтобы исключить якорь из
+ * клика-вне — иначе клик по нему закрывал бы поповер.
+ */
+export declare const resolveAnchorNode: (anchorEl: NewPopoverAnchorEl | undefined) => Node | null;

package/components/NewPopover/useLogic/utils/resolveAnchorNode/resolveAnchorNode.js

@@ -0,0 +1,8 @@
+/**
+ * Приводит anchorEl к DOM-ноде (virtual-anchor → null), чтобы исключить якорь из
+ * клика-вне — иначе клик по нему закрывал бы поповер.
+ */
+export const resolveAnchorNode = (anchorEl) => {
+    const value = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
+    return value instanceof Node ? value : null;
+};

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

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CrossOutlineMd } from '../../../../../../icons/CrossOutlineMd';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Typography } from '../../../../../Typography';
 import { StepFooter } from '../StepFooter';
-import { CloseButton, Content, PopoverBody, StepPopover } from './styles';
+import { StepPopover } from './styles';
 import { useLogic } from './useLogic';
 /**
  * Шаг с подсветкой: popover рядом с hole.
@@ -15,5 +14,5 @@ export const HighlightStep = ({ activeStep, isClosing, geometry, }) => {
     if (!anchorEl) {
         return null;
     }
-    return (_jsx(_Fragment, { children: shouldShowPopover && (_jsx(StepPopover, { isOpen: isOpen, disableAutoFocus: true, hasArrow: true, anchorEl: anchorEl, placement: step.position, children: _jsxs(PopoverBody, { ref: setPopoverNode, tabIndex: -1, children: [_jsx(CloseButton, { variant: "text", onClick: handleClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: _jsx(CrossOutlineMd, {}) }), _jsxs(Content, { children: [step.title && (_jsx(Typography, { component: "div", variant: "h5", children: step.title })), step.content && (_jsx(Typography, { component: "div", variant: "body1", color: "grey", colorIntensity: "900", children: step.content }))] }), _jsx(StepFooter, { activeStep: activeStep })] }) })) }));
+    return (_jsx(_Fragment, { children: shouldShowPopover && (_jsx(StepPopover, { variant: "light", isOpen: isOpen, disableAutoFocus: true, anchorEl: anchorEl, placement: step.position, onClose: handleClose, contentRef: setPopoverNode, title: step.title, action: _jsx(StepFooter, { activeStep: activeStep }), children: step.content && (_jsx(Typography, { component: "div", variant: "body1", color: "grey", colorIntensity: "900", children: step.content })) })) }));
 };

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

@@ -1,25 +1,9 @@
 /// <reference types="react" />
-/**
- * Popover шага, z-index над overlay, быстрое закрытие.
- */
-export declare const StepPopover: import("../../../../../styled").StyledComponent<import("../../../../../NewPopover").NewPopoverProps & {
+export declare const StepPopover: import("../../../../../styled").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "hasArrow" | "disableMobileDrawer"> & {
+    variant?: import("../../../../../HintPopover").HintPopoverVariant | undefined;
+    title?: import("react").ReactNode;
+    action?: import("react").ReactNode;
+    contentRef?: import("react").Ref<HTMLDivElement> | undefined;
+} & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const PopoverBody: 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<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CloseButton: import("../../../../../styled").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("../../../../../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<HTMLDivElement>, HTMLDivElement>, {}>;