@astral/ui 4.83.0 → 4.85.0

package/_mocks/LoggerMock/LoggerMock.d.ts

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

package/_mocks/LoggerMock/LoggerMock.js

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

package/_mocks/LoggerMock/index.d.ts

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

package/_mocks/LoggerMock/index.js

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

package/components/ConfigProvider/ConfigProvider.d.ts

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

package/components/ConfigProvider/ConfigProvider.js

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

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

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

package/components/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 {};