@astral/ui 4.84.0 → 4.85.0

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

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

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

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

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

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

package/node/components/HintPopover/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hintPopoverClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.hintPopoverClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('hint-popover'),
+    dark: (0, createUIKitClassname_1.createUIKitClassname)('hint-popover_dark'),
+};

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

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

package/node/components/HintPopover/index.js

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

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

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

package/node/components/HintPopover/public.js

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

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+/**
+ * styled-обёртка над NewPopover: переопределяет его CSS-переменные — всегда
+ * увеличенный радиус, а для `dark` ещё тёмную подложку и текст (цвет стрелки
+ * подтянется из подложки сам).
+ */
+export declare const StyledHintPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../NewPopover").NewPopoverProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Body: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CloseButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/HintPopover/styles.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseButton = exports.ActionRow = exports.Title = exports.Body = exports.StyledHintPopover = void 0;
+const IconButton_1 = require("../IconButton");
+const NewPopover_1 = require("../NewPopover");
+const styled_1 = require("../styled");
+const Typography_1 = require("../Typography");
+const constants_1 = require("./constants");
+/**
+ * styled-обёртка над NewPopover: переопределяет его CSS-переменные — всегда
+ * увеличенный радиус, а для `dark` ещё тёмную подложку и текст (цвет стрелки
+ * подтянется из подложки сам).
+ */
+exports.StyledHintPopover = (0, styled_1.styled)(NewPopover_1.NewPopover) `
+  --popover-radius: calc(${({ theme }) => theme.shape.medium} * 2);
+
+  &.${constants_1.hintPopoverClassnames.dark} {
+    --popover-surface-color: ${({ theme }) => theme.palette.grey[900]};
+    --popover-text-color: ${({ theme }) => theme.palette.common.white};
+  }
+`;
+exports.Body = styled_1.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;
+  }
+`;
+exports.Title = (0, styled_1.styled)(Typography_1.Typography) `
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-bottom: ${({ theme }) => theme.spacing(1)};
+  }
+`;
+exports.ActionRow = styled_1.styled.div `
+  margin-top: ${({ theme }) => theme.spacing(6)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+exports.CloseButton = (0, styled_1.styled)(IconButton_1.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/node/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/node/components/HintPopover/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -18,19 +18,20 @@ const animatedWrapperCva = (0, cva_1.cva)(constants_1.popoverClassnames.animated
         },
     },
 });
-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)({
+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, } = (0, useLogic_1.useLogic)({
         isOpen,
         anchorEl,
         onClose,
         disableAutoFocus,
         hasArrow,
+        disableMobileDrawer,
     });
-    if (isMobile) {
+    if (shouldRenderDrawer) {
         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: (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 })] }) }));
+    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 }), style: animatedWrapperStyle, 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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_MODIFIERS = exports.popoverClassnames = void 0;
+exports.DEFAULT_MODIFIERS = exports.ARROW_MIN_TRACK = exports.ARROW_MIN_PADDING = exports.ARROW_PADDING = exports.ARROW_HEIGHT = exports.ARROW_BASE = exports.popoverClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.popoverClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('popover'),
@@ -10,6 +10,17 @@ exports.popoverClassnames = {
     animatedWrapperHasArrow: (0, createUIKitClassname_1.createUIKitClassname)('popover__animated-wrapper_has-arrow'),
     arrow: (0, createUIKitClassname_1.createUIKitClassname)('popover__arrow'),
 };
+/** Основание и высота стрелки (px). */
+exports.ARROW_BASE = 23;
+exports.ARROW_HEIGHT = 16;
+/** Отступ стрелки от углов (px). */
+exports.ARROW_PADDING = 24;
+/**
+ * Мин. отступ стрелки от угла (px)
+ */
+exports.ARROW_MIN_PADDING = 16;
+/** Мин. «ход» стрелки вдоль кромки (px). */
+exports.ARROW_MIN_TRACK = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */

package/node/components/NewPopover/styles.js

@@ -9,11 +9,13 @@ const styled_1 = require("../styled");
 const constants_1 = require("./constants");
 exports.StyledMuiPopper = (0, styled_1.styled)(Popper_1.default) `
   &.${constants_1.popoverClassnames.root} {
+    --arrow-base: ${constants_1.ARROW_BASE}px;
+    --arrow-height: ${constants_1.ARROW_HEIGHT}px;
+
     z-index: ${({ theme }) => theme.zIndex.tooltip};
   }
 
-  /* Anchor ушёл за скролл/вьюпорт — popper вешает reference-hidden.
-     Стрелка иначе тянется к пропавшему anchor и торчит криво — прячем её. */
+  /* Anchor ушёл за скролл/вьюпорт — прячем стрелку. */
   &[data-popper-reference-hidden] .${constants_1.popoverClassnames.arrow} {
     visibility: hidden;
   }
@@ -42,7 +44,6 @@ 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)};
@@ -64,54 +65,52 @@ exports.StyledMuiPopper = (0, styled_1.styled)(Popper_1.default) `
   }
 
   &&[data-popper-placement*='bottom'] .${constants_1.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'] .${constants_1.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'] .${constants_1.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'] .${constants_1.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);
     }
   }
 `;
@@ -132,6 +131,8 @@ exports.PopoverArrow = styled_1.styled.span `
 `;
 exports.AnimatedWrapper = styled_1.styled.div `
   position: relative;
+  
+  filter: var(--drop-shadow);
 
   animation: popover-grow-out
     ${({ theme }) => theme.transitions.duration.leavingScreen}ms
@@ -175,8 +176,12 @@ exports.InnerContainer = styled_1.styled.div `
   &.${constants_1.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/node/components/NewPopover/types.d.ts

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

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

@@ -8,8 +8,10 @@ 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, hasArrow, }) => {
+const getArrowPadding_1 = require("./utils/getArrowPadding");
+const getPopoverCssVars_1 = require("./utils/getPopoverCssVars");
+const resolveAnchorNode_1 = require("./utils/resolveAnchorNode");
+const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [isContainerMounted, setIsContainerMounted] = (0, react_1.useState)(false);
     const [arrowElement, setArrowElement] = (0, react_1.useState)(null);
@@ -21,8 +23,10 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) =>
     const isControlled = isOpen !== undefined;
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const { shouldRender, handleAnimationEnd } = (0, usePopoverAnimation_1.usePopoverAnimation)(isOpened);
-    const isEffectActive = !isMobile && isOpened && isContainerMounted;
-    const anchorNode = (0, react_1.useMemo)(() => (0, utils_1.resolveAnchorNode)(anchorEl), [anchorEl]);
+    const animatedWrapperStyle = (0, getPopoverCssVars_1.getPopoverCssVars)();
+    const shouldRenderDrawer = isMobile && !disableMobileDrawer;
+    const isPopoverActive = !shouldRenderDrawer && isOpened && isContainerMounted;
+    const anchorNode = (0, react_1.useMemo)(() => (0, resolveAnchorNode_1.resolveAnchorNode)(anchorEl), [anchorEl]);
     const excludeNodes = (0, react_1.useMemo)(() => [anchorNode], [anchorNode]);
     const handleClose = (event) => {
         onClose?.(event);
@@ -30,18 +34,18 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) =>
     (0, useClickAwayEffect_1.useClickAwayEffect)({
         ref: containerRef,
         onClickAway: handleClose,
-        isActive: isEffectActive && !isControlled,
+        isActive: isPopoverActive && !isControlled,
         preventBubbling: true,
         excludeNodes,
     });
     (0, useEscapeClickEffect_1.useEscapeClickEffect)({
         onEscape: handleClose,
-        isActive: isEffectActive,
+        isActive: isPopoverActive,
         preventBubbling: true,
     });
     (0, useFocusTrapEffect_1.useFocusTrapEffect)({
         ref: containerRef,
-        isActive: isEffectActive && !disableAutoFocus,
+        isActive: isPopoverActive && !disableAutoFocus,
         returnFocusOnDeactivate: true,
         escapeDeactivates: false,
         clickOutsideDeactivates: false,
@@ -54,11 +58,15 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) =>
         }
         return [
             ...constants_1.DEFAULT_MODIFIERS,
-            { name: 'arrow', enabled: true, options: { element: arrowElement } },
+            {
+                name: 'arrow',
+                enabled: true,
+                options: { element: arrowElement, padding: getArrowPadding_1.getArrowPadding },
+            },
         ];
     }, [hasArrow, arrowElement]);
     return {
-        isMobile,
+        shouldRenderDrawer,
         isOpened,
         shouldRender,
         handleAnimationEnd,
@@ -67,6 +75,7 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, }) =>
         arrowElement,
         setArrowElement,
         mergedModifiers,
+        animatedWrapperStyle,
     };
 };
 exports.useLogic = useLogic;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getArrowPadding = void 0;
+const constants_1 = require("../../../constants");
+/**
+ * Фиксированный padding отобразил бы стрелку на скруглённый угол
+ */
+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 - constants_1.ARROW_BASE);
+    const centerPadding = free / 2;
+    const desiredPadding = Math.min(constants_1.ARROW_PADDING, Math.max(constants_1.ARROW_MIN_PADDING, (free - constants_1.ARROW_MIN_TRACK) / 2));
+    return Math.min(centerPadding, desiredPadding);
+};
+exports.getArrowPadding = getArrowPadding;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./getArrowPadding"), exports);

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

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