@astral/ui 4.84.0 → 4.86.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/components/PageHeader/HeaderContent/HeaderContent.d.ts

@@ -1,5 +1,5 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
-type HeaderContentProps<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType> = Pick<PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>, 'breadcrumbs' | 'backButton' | 'description' | 'actions' | 'subheader' | 'filters' | 'title' | 'isLoading'>;
-export declare const HeaderContent: <TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType>({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }: HeaderContentProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => import("react/jsx-runtime").JSX.Element;
+type HeaderContentProps<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType> = Pick<PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>, 'breadcrumbs' | 'backButton' | 'description' | 'actions' | 'subheader' | 'tabs' | 'filters' | 'title' | 'isLoading'>;
+export declare const HeaderContent: <TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType>({ backButton, description, subheader, breadcrumbs, tabs, actions, title, filters, isLoading, }: HeaderContentProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/PageHeader/HeaderContent/HeaderContent.js

@@ -6,13 +6,13 @@ import { PageActions } from '../PageActions';
 import { Title } from '../Title';
 import { Description } from './Description';
 import { FormFiltersProvider } from './FormFiltersProvider';
-import { BreadcrumbsWrapper, DesktopTitleWrapper, PageSubheader, } from './styles';
-export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }) => {
+import { BreadcrumbsWrapper, DesktopTitleWrapper, PageSubheader, TabsWrapper, } from './styles';
+export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, tabs, actions, title, filters, isLoading, }) => {
     const renderBreadcrumbs = () => {
         if (!breadcrumbs) {
             return null;
         }
         return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, children: subheader }))] }));
+    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), tabs && _jsx(TabsWrapper, { children: tabs }), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, children: subheader }))] }));
 };

package/components/PageHeader/HeaderContent/styles.d.ts

@@ -3,6 +3,10 @@ export declare const BreadcrumbsWrapper: 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 TabsWrapper: 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 PageSubheader: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/PageHeader/HeaderContent/styles.js

@@ -9,9 +9,19 @@ export const BreadcrumbsWrapper = styled.div `
     display: none;
   }
 `;
+export const TabsWrapper = styled.div `
+  grid-column: 1 / -1;
+  grid-row: 4;
+
+  padding-top:  ${({ theme }) => theme.spacing(3)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 3, 3, 3)};
+  }
+`;
 export const PageSubheader = styled.div `
   grid-column: 1 / -1;
-  grid-row: 6;
+  grid-row: 5;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 

package/components/PageHeader/PageHeader.js

@@ -31,7 +31,7 @@ const rootCva = cva(pageHeaderClassnames.root, {
     },
 });
 export const PageHeader = (props) => {
-    const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
+    const { title, description, subheader, breadcrumbs, tabs, actions, backButton, className, filters, } = props;
     const { isLoading, mobileTitleActions, isShowMobileActions } = useLogic(props);
     return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobilePageHeaderCva({
                     hasTitle: Boolean(title) || isLoading,
@@ -40,5 +40,5 @@ export const PageHeader = (props) => {
                     hasActions: Boolean(actions),
                     hasSubheader: Boolean(subheader),
                     hasFilters: Boolean(filters),
-                }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+                }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, tabs: tabs, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };

package/components/PageHeader/styles.js

@@ -38,7 +38,7 @@ export const Wrapper = styled.header `
 
   .${pageHeaderClassnames.filters} {
     grid-column: 1 / -1;
-    grid-row: 4;
+    grid-row: 6;
 
     ${({ theme }) => theme.breakpoints.down('laptop')} {
       grid-column: 3;
@@ -48,7 +48,7 @@ export const Wrapper = styled.header `
 
   .${pageHeaderClassnames.quickFilters} {
     grid-column: 1 / -1;
-    grid-row: 5;
+    grid-row: 7;
 
     margin-top: ${({ theme }) => theme.spacing(4)};
 

package/components/PageHeader/types.d.ts

@@ -34,6 +34,16 @@ export type PageHeaderProps<TMainActionComponent extends ElementType = ElementTy
      * } />
      */
     breadcrumbs?: ReactNode;
+    /**
+     * Слот для tabs
+     * @example <PageHeader tabs={
+     * <Tabs value={tabValue} onChange={handleChange}>
+     *  <Tab label="Вкладка 1" />
+     *  <Tab label="Вкладка 2" />
+     * </Tabs>
+     * } />
+     */
+    tabs?: ReactNode;
     /**
      * Набор кнопок, видимые конфигурируются через объект main, скрытые в меню -
      * через secondary

package/hook-form/FormPageLayoutBase/useLogic/useLogic.d.ts

@@ -9,6 +9,7 @@ export declare const useLogic: <TFormValues extends Record<string, unknown>>({ a
         subheader?: import("react").ReactNode;
         filters?: import("react").ReactNode;
         breadcrumbs?: import("react").ReactNode;
+        tabs?: import("react").ReactNode;
         className?: string | undefined;
         isLoading?: boolean | undefined;
         shouldUpdateDocumentTitle?: boolean | undefined;

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 {};