@astral/ui 4.102.0 → 4.103.0

package/components/Dialog/Dialog.d.ts

@@ -1,2 +1,2 @@
 import type { DialogProps } from './types';
-export declare const Dialog: ({ children, title, disableBackdropClick, onClose, size, headerContent, className, classes, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: ({ children, title, disableBackdropClick, onClose, size, headerContent, className, classes, disableMobileDrawer, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;

package/components/Dialog/Dialog.js

@@ -13,14 +13,15 @@ const dialogCva = cva(dialogClassnames.root, {
         },
     },
 });
-export const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', headerContent, className, classes, ...props }) => {
-    const { handleClose, isMobile, dialogClasses } = useLogic({
+export const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', headerContent, className, classes, disableMobileDrawer, ...props }) => {
+    const { handleClose, shouldRenderDrawer, dialogClasses } = useLogic({
         onClose,
         disableBackdropClick,
         classes,
+        disableMobileDrawer,
     });
-    if (isMobile) {
-        return (_jsx(BottomDrawer, { onClose: handleClose, title: title, headerContent: headerContent, ...props, children: children }));
+    if (shouldRenderDrawer) {
+        return (_jsx(BottomDrawer, { onClose: handleClose, title: title, headerContent: headerContent, className: className, ...props, children: children }));
     }
     return (_jsxs(StyledDialog, { "$size": size, onClose: handleClose, className: cn(dialogCva({ withoutTitle: !title }), className), classes: dialogClasses, ...props, children: [title && (_jsx(DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
 };

package/components/Dialog/styles.js

@@ -28,6 +28,14 @@ export const StyledDialog = styled(MuiDialog, {
     box-shadow: ${({ theme }) => theme.elevation[300]};
   }
 
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    .${dialogClassnames.paper} {
+      width: calc(100% - ${({ theme }) => theme.spacing(8)});
+      min-width: auto;
+      margin: ${({ theme }) => theme.spacing(4)};
+    }
+  }
+
   /* Причина игнора: Не критично для отображения */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:not(:has(.${dialogActionsClassnames.root})) .${dialogContentClassnames.root} {

package/components/Dialog/types.d.ts

@@ -20,4 +20,9 @@ export type DialogProps = WithoutEmotionSpecific<Omit<MuiDialogProps, 'title' |
      * Дополнительный контент хедера
      */
     headerContent?: ReactNode;
+    /**
+     * Отключить BottomDrawer на mobile: диалог остаётся центрированным модальным окном.
+     * @default false
+     */
+    disableMobileDrawer?: boolean;
 };

package/components/Dialog/useLogic/useLogic.d.ts

@@ -1,9 +1,9 @@
 import { type MouseEvent } from 'react';
 import { type DialogProps } from '../types';
-type UseLogicParams = Pick<DialogProps, 'onClose' | 'disableBackdropClick' | 'classes'>;
-export declare const useLogic: ({ onClose, disableBackdropClick, classes, }: UseLogicParams) => {
+type UseLogicParams = Pick<DialogProps, 'onClose' | 'disableBackdropClick' | 'classes' | 'disableMobileDrawer'>;
+export declare const useLogic: ({ onClose, disableBackdropClick, classes, disableMobileDrawer, }: UseLogicParams) => {
     handleClose: ((event: MouseEvent<HTMLButtonElement>, reason: 'backdropClick' | 'escapeKeyDown') => void) | undefined;
-    isMobile: boolean;
+    shouldRenderDrawer: boolean;
     dialogClasses: {
         root?: string | undefined;
         scrollPaper?: string | undefined;

package/components/Dialog/useLogic/useLogic.js

@@ -1,7 +1,7 @@
 import { useViewportType } from '../../useViewportType';
 import { cn } from '../../utils/cn';
 import { dialogClassnames } from '../constants';
-export const useLogic = ({ onClose, disableBackdropClick, classes, }) => {
+export const useLogic = ({ onClose, disableBackdropClick, classes, disableMobileDrawer, }) => {
     const { isMobile } = useViewportType();
     const handleClose = onClose &&
         ((event, reason) => {
@@ -15,5 +15,9 @@ export const useLogic = ({ onClose, disableBackdropClick, classes, }) => {
         paper: cn(dialogClassnames.paper, paper),
         ...restClasses,
     };
-    return { handleClose, isMobile, dialogClasses };
+    return {
+        handleClose,
+        shouldRenderDrawer: isMobile && !disableMobileDrawer,
+        dialogClasses,
+    };
 };

package/components/HintPopover/styles.js

@@ -22,7 +22,8 @@ export const Body = styled.div `
   display: flex;
   flex-direction: column;
 
-  width: min(400px, calc(100vw - ${({ theme }) => theme.spacing(8)}));
+  /* Отступ popover от края вьюпорта — иначе поля по краям разъедутся. */
+  width: min(400px, calc(100vw - var(--popover-viewport-padding, 16px) * 2));
   padding: ${({ theme }) => theme.spacing(6)};
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {

package/components/NewPopover/NewPopover.js

@@ -23,6 +23,7 @@ export const NewPopover = ({ children, onClose, isOpen, title, className, style,
         disableAutoFocus,
         hasArrow,
         disableMobileDrawer,
+        placement,
     });
     if (shouldRenderDrawer) {
         return (_jsx(BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {

package/components/NewPopover/constants.d.ts

@@ -18,6 +18,11 @@ export declare const ARROW_PADDING = 24;
 export declare const ARROW_MIN_PADDING = 16;
 /** Мин. «ход» стрелки вдоль кромки (px). */
 export declare const ARROW_MIN_TRACK = 16;
+/**
+ * Мин. отступ popover от края вьюпорта (px).
+ * Наружу отдаётся CSS-переменной `--popover-viewport-padding`.
+ */
+export declare const VIEWPORT_MIN_PADDING = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */

package/components/NewPopover/constants.js

@@ -18,12 +18,17 @@ export const ARROW_PADDING = 24;
 export const ARROW_MIN_PADDING = 16;
 /** Мин. «ход» стрелки вдоль кромки (px). */
 export const ARROW_MIN_TRACK = 16;
+/**
+ * Мин. отступ popover от края вьюпорта (px).
+ * Наружу отдаётся CSS-переменной `--popover-viewport-padding`.
+ */
+export const VIEWPORT_MIN_PADDING = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */
 export const DEFAULT_MODIFIERS = [
     {
         name: 'preventOverflow',
-        options: { altAxis: true, tether: false, padding: 8 },
+        options: { altAxis: true, tether: false, padding: VIEWPORT_MIN_PADDING },
     },
 ];

package/components/NewPopover/styles.js

@@ -1,10 +1,11 @@
 import MuiPopper from '@mui/material/Popper';
 import { styled } from '../styled';
-import { ARROW_BASE, ARROW_HEIGHT, popoverClassnames } from './constants';
+import { ARROW_BASE, ARROW_HEIGHT, popoverClassnames, VIEWPORT_MIN_PADDING, } from './constants';
 export const StyledMuiPopper = styled(MuiPopper) `
   &.${popoverClassnames.root} {
     --arrow-base: ${ARROW_BASE}px;
     --arrow-height: ${ARROW_HEIGHT}px;
+    --popover-viewport-padding: ${VIEWPORT_MIN_PADDING}px;
 
     z-index: ${({ theme }) => theme.zIndex.modal};
   }

package/components/NewPopover/types.d.ts

@@ -23,7 +23,7 @@ export type NewPopoverProps = {
      */
     isOpen?: boolean;
     /**
-     * Позиция относительно anchor
+     * Позиция относительно anchor.
      * @default 'bottom'
      */
     placement?: NewPopoverPlacement;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type NewPopoverModifier, type NewPopoverProps } from '../types';
-type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow' | 'disableMobileDrawer'>;
-export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }: UseLogicParams) => {
+type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow' | 'disableMobileDrawer'> & Required<Pick<NewPopoverProps, 'placement'>>;
+export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, placement, }: UseLogicParams) => {
     shouldRenderDrawer: boolean;
     isOpened: boolean;
     shouldRender: boolean;

package/components/NewPopover/useLogic/useLogic.js

@@ -5,10 +5,8 @@ import { useFocusTrapEffect } from '../../useFocusTrapEffect';
 import { usePopoverAnimation } from '../../usePopoverAnimation';
 import { useViewportType } from '../../useViewportType';
 import { DEFAULT_MODIFIERS } from '../constants';
-import { getArrowPadding } from './utils/getArrowPadding';
-import { getPopoverCssVars } from './utils/getPopoverCssVars';
-import { resolveAnchorNode } from './utils/resolveAnchorNode';
-export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }) => {
+import { getArrowPadding, getFallbackPlacements, getPopoverCssVars, resolveAnchorNode, } from './utils';
+export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, placement, }) => {
     const containerRef = useRef(null);
     const [isContainerMounted, setIsContainerMounted] = useState(false);
     const [arrowElement, setArrowElement] = useState(null);
@@ -50,18 +48,20 @@ export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow
         fallbackFocus: () => containerRef.current || document.body,
     });
     const mergedModifiers = useMemo(() => {
-        if (!hasArrow) {
-            return DEFAULT_MODIFIERS;
+        const modifiers = [...DEFAULT_MODIFIERS];
+        const fallbackPlacements = getFallbackPlacements(placement);
+        if (fallbackPlacements) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements } });
         }
-        return [
-            ...DEFAULT_MODIFIERS,
-            {
+        if (hasArrow) {
+            modifiers.push({
                 name: 'arrow',
                 enabled: true,
                 options: { element: arrowElement, padding: getArrowPadding },
-            },
-        ];
-    }, [hasArrow, arrowElement]);
+            });
+        }
+        return modifiers;
+    }, [hasArrow, arrowElement, placement]);
     return {
         shouldRenderDrawer,
         isOpened,

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

@@ -0,0 +1,7 @@
+import { type NewPopoverPlacement } from '../../../types';
+/**
+ * Значение fallbackPlacements для модификатора flip: заданная сторона не подошла —
+ * берётся следующая по списку. Для вертикальной стороны и `auto` список не задаётся,
+ * flip справляется сам.
+ */
+export declare const getFallbackPlacements: (placement: NewPopoverPlacement) => NewPopoverPlacement[] | undefined;

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

@@ -0,0 +1,19 @@
+const OPPOSITE_SIDE = {
+    left: 'right',
+    right: 'left',
+};
+const VERTICAL_SIDES = ['bottom', 'top'];
+const checkIsSidePlacement = (side) => side in OPPOSITE_SIDE;
+/**
+ * Значение fallbackPlacements для модификатора flip: заданная сторона не подошла —
+ * берётся следующая по списку. Для вертикальной стороны и `auto` список не задаётся,
+ * flip справляется сам.
+ */
+export const getFallbackPlacements = (placement) => {
+    const [side, alignment] = placement.split('-');
+    if (!checkIsSidePlacement(side)) {
+        return undefined;
+    }
+    const suffix = alignment ? `-${alignment}` : '';
+    return [OPPOSITE_SIDE[side], ...VERTICAL_SIDES].map((fallbackSide) => `${fallbackSide}${suffix}`);
+};

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

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

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

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

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

@@ -0,0 +1,4 @@
+export * from './getArrowPadding';
+export * from './getFallbackPlacements';
+export * from './getPopoverCssVars';
+export * from './resolveAnchorNode';

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

@@ -0,0 +1,4 @@
+export * from './getArrowPadding';
+export * from './getFallbackPlacements';
+export * from './getPopoverCssVars';
+export * from './resolveAnchorNode';

package/components/Onboarding/types/step.d.ts

@@ -45,7 +45,7 @@ export type Step = {
      */
     type: StepType;
     /**
-     * Желаемая позиция popover (только для highlight).
+     * Желаемая позиция popover относительно подсвечиваемого элемента (только для highlight).
      * @default 'bottom'
      */
     position?: StepPosition;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StepPopover: import("../../../../../styled").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "hasArrow" | "disableMobileDrawer"> & {
+export declare const StepPopover: import("../../../../../styled").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "disableMobileDrawer" | "hasArrow"> & {
     variant?: import("../../../../../HintPopover").HintPopoverVariant | undefined;
     title?: import("react").ReactNode;
     action?: import("react").ReactNode;

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

@@ -7,5 +7,5 @@ import { Footer, StepDialog } from './styles';
  */
 export const StandaloneStep = ({ activeStep, isClosing, }) => {
     const { step, isConfirming, requestClose } = activeStep;
-    return (_jsxs(StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, children: [_jsx(DialogContent, { children: step.content }), _jsx(Footer, { children: _jsx(StepFooter, { activeStep: activeStep }) })] }));
+    return (_jsxs(StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, disableMobileDrawer: true, children: [_jsx(DialogContent, { children: step.content }), _jsx(Footer, { children: _jsx(StepFooter, { activeStep: activeStep }) })] }));
 };

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

@@ -4,6 +4,7 @@ export declare const StepDialog: import("../../../../../styled").StyledComponent
     disableBackdropClick?: boolean | undefined;
     size?: import("../../../../../Dialog").DialogSize | undefined;
     headerContent?: import("react").ReactNode;
+    disableMobileDrawer?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Onboarding/ui/hooks/useTrackedRect/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Сколько миллисекунд без изменений области считать покоем и останавливать
+ * отслеживание по кадрам. Перекрывает длительность анимаций MUI, чтобы
+ * отслеживание не выключилось в паузе перед стартом анимации.
+ */
+export declare const TRACKING_IDLE_TIMEOUT_MS = 300;

package/components/Onboarding/ui/hooks/useTrackedRect/constants.js

@@ -0,0 +1,6 @@
+/**
+ * Сколько миллисекунд без изменений области считать покоем и останавливать
+ * отслеживание по кадрам. Перекрывает длительность анимаций MUI, чтобы
+ * отслеживание не выключилось в паузе перед стартом анимации.
+ */
+export const TRACKING_IDLE_TIMEOUT_MS = 300;

package/components/Onboarding/ui/hooks/useTrackedRect/useTrackedRect.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { clampToScrollParents, getViewport, isSameRect, rectFromDomRect, } from '../../../utils/geometry';
 import { getScrollParents } from '../../../utils/getScrollParents';
+import { TRACKING_IDLE_TIMEOUT_MS } from './constants';
 /**
  * Отслеживает область элемента для hole overlay и якоря popover.
  */
@@ -11,32 +12,53 @@ export const useTrackedRect = (element) => {
             setRect(null);
             return;
         }
-        // ID текущей рAF-очереди обновления.
+        // ID кадра активного отслеживания, 0 — отслеживание остановлено.
         let frame = 0;
+        let lastChangeTime = 0;
+        let lastRect = null;
         const scrollParents = getScrollParents(element);
         const update = () => {
             const elementRect = rectFromDomRect(element.getBoundingClientRect());
             const viewport = getViewport();
             const next = clampToScrollParents(elementRect, scrollParents.map((parent) => rectFromDomRect(parent.getBoundingClientRect())), viewport);
-            setRect((prev) => (isSameRect(prev, next) ? prev : next));
+            if (isSameRect(lastRect, next)) {
+                return false;
+            }
+            lastRect = next;
+            setRect(next);
+            return true;
         };
-        const scheduleUpdate = () => {
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(update);
+        const track = () => {
+            if (update()) {
+                lastChangeTime = performance.now();
+            }
+            if (performance.now() - lastChangeTime >= TRACKING_IDLE_TIMEOUT_MS) {
+                frame = 0;
+                return;
+            }
+            frame = requestAnimationFrame(track);
+        };
+        // Продлевает отслеживание, а если оно уже остановилось — запускает заново.
+        const scheduleTracking = () => {
+            lastChangeTime = performance.now();
+            if (!frame) {
+                frame = requestAnimationFrame(track);
+            }
         };
         update();
+        scheduleTracking();
         const scrollOptions = { passive: true };
-        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleUpdate, scrollOptions));
-        window.addEventListener('scroll', scheduleUpdate, scrollOptions);
-        window.addEventListener('resize', scheduleUpdate);
-        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleTracking, scrollOptions));
+        window.addEventListener('scroll', scheduleTracking, scrollOptions);
+        window.addEventListener('resize', scheduleTracking);
+        const resizeObserver = new ResizeObserver(scheduleTracking);
         resizeObserver.observe(element);
         return () => {
             cancelAnimationFrame(frame);
             resizeObserver.disconnect();
-            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleUpdate, scrollOptions));
-            window.removeEventListener('scroll', scheduleUpdate, scrollOptions);
-            window.removeEventListener('resize', scheduleUpdate);
+            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleTracking, scrollOptions));
+            window.removeEventListener('scroll', scheduleTracking, scrollOptions);
+            window.removeEventListener('resize', scheduleTracking);
         };
     }, [element]);
     return rect;

package/hook-form/FormFilters/FormFiltersDialog/styles.d.ts

@@ -12,6 +12,7 @@ export declare const StyledDialog: import("../../../components/styled").StyledCo
     disableBackdropClick?: boolean | undefined;
     size?: import("../../../components/Dialog").DialogSize | undefined;
     headerContent?: import("react").ReactNode;
+    disableMobileDrawer?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/Dialog/Dialog.d.ts

@@ -1,2 +1,2 @@
 import type { DialogProps } from './types';
-export declare const Dialog: ({ children, title, disableBackdropClick, onClose, size, headerContent, className, classes, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: ({ children, title, disableBackdropClick, onClose, size, headerContent, className, classes, disableMobileDrawer, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/Dialog/Dialog.js

@@ -16,14 +16,15 @@ const dialogCva = (0, cva_1.cva)(constants_1.dialogClassnames.root, {
         },
     },
 });
-const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', headerContent, className, classes, ...props }) => {
-    const { handleClose, isMobile, dialogClasses } = (0, useLogic_1.useLogic)({
+const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', headerContent, className, classes, disableMobileDrawer, ...props }) => {
+    const { handleClose, shouldRenderDrawer, dialogClasses } = (0, useLogic_1.useLogic)({
         onClose,
         disableBackdropClick,
         classes,
+        disableMobileDrawer,
     });
-    if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { onClose: handleClose, title: title, headerContent: headerContent, ...props, children: children }));
+    if (shouldRenderDrawer) {
+        return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { onClose: handleClose, title: title, headerContent: headerContent, className: className, ...props, children: children }));
     }
     return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDialog, { "$size": size, onClose: handleClose, className: (0, cn_1.cn)(dialogCva({ withoutTitle: !title }), className), classes: dialogClasses, ...props, children: [title && ((0, jsx_runtime_1.jsx)(DialogTitle_1.DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
 };

package/node/components/Dialog/styles.js

@@ -34,6 +34,14 @@ exports.StyledDialog = (0, styled_1.styled)(Dialog_1.default, {
     box-shadow: ${({ theme }) => theme.elevation[300]};
   }
 
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    .${constants_1.dialogClassnames.paper} {
+      width: calc(100% - ${({ theme }) => theme.spacing(8)});
+      min-width: auto;
+      margin: ${({ theme }) => theme.spacing(4)};
+    }
+  }
+
   /* Причина игнора: Не критично для отображения */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:not(:has(.${DialogActions_1.dialogActionsClassnames.root})) .${DialogContent_1.dialogContentClassnames.root} {

package/node/components/Dialog/types.d.ts

@@ -20,4 +20,9 @@ export type DialogProps = WithoutEmotionSpecific<Omit<MuiDialogProps, 'title' |
      * Дополнительный контент хедера
      */
     headerContent?: ReactNode;
+    /**
+     * Отключить BottomDrawer на mobile: диалог остаётся центрированным модальным окном.
+     * @default false
+     */
+    disableMobileDrawer?: boolean;
 };

package/node/components/Dialog/useLogic/useLogic.d.ts

@@ -1,9 +1,9 @@
 import { type MouseEvent } from 'react';
 import { type DialogProps } from '../types';
-type UseLogicParams = Pick<DialogProps, 'onClose' | 'disableBackdropClick' | 'classes'>;
-export declare const useLogic: ({ onClose, disableBackdropClick, classes, }: UseLogicParams) => {
+type UseLogicParams = Pick<DialogProps, 'onClose' | 'disableBackdropClick' | 'classes' | 'disableMobileDrawer'>;
+export declare const useLogic: ({ onClose, disableBackdropClick, classes, disableMobileDrawer, }: UseLogicParams) => {
     handleClose: ((event: MouseEvent<HTMLButtonElement>, reason: 'backdropClick' | 'escapeKeyDown') => void) | undefined;
-    isMobile: boolean;
+    shouldRenderDrawer: boolean;
     dialogClasses: {
         root?: string | undefined;
         scrollPaper?: string | undefined;

package/node/components/Dialog/useLogic/useLogic.js

@@ -4,7 +4,7 @@ exports.useLogic = void 0;
 const useViewportType_1 = require("../../useViewportType");
 const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
-const useLogic = ({ onClose, disableBackdropClick, classes, }) => {
+const useLogic = ({ onClose, disableBackdropClick, classes, disableMobileDrawer, }) => {
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const handleClose = onClose &&
         ((event, reason) => {
@@ -18,6 +18,10 @@ const useLogic = ({ onClose, disableBackdropClick, classes, }) => {
         paper: (0, cn_1.cn)(constants_1.dialogClassnames.paper, paper),
         ...restClasses,
     };
-    return { handleClose, isMobile, dialogClasses };
+    return {
+        handleClose,
+        shouldRenderDrawer: isMobile && !disableMobileDrawer,
+        dialogClasses,
+    };
 };
 exports.useLogic = useLogic;

package/node/components/HintPopover/styles.js

@@ -25,7 +25,8 @@ exports.Body = styled_1.styled.div `
   display: flex;
   flex-direction: column;
 
-  width: min(400px, calc(100vw - ${({ theme }) => theme.spacing(8)}));
+  /* Отступ popover от края вьюпорта — иначе поля по краям разъедутся. */
+  width: min(400px, calc(100vw - var(--popover-viewport-padding, 16px) * 2));
   padding: ${({ theme }) => theme.spacing(6)};
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {

package/node/components/NewPopover/NewPopover.js

@@ -26,6 +26,7 @@ const NewPopover = ({ children, onClose, isOpen, title, className, style, placem
         disableAutoFocus,
         hasArrow,
         disableMobileDrawer,
+        placement,
     });
     if (shouldRenderDrawer) {
         return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {

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

@@ -18,6 +18,11 @@ export declare const ARROW_PADDING = 24;
 export declare const ARROW_MIN_PADDING = 16;
 /** Мин. «ход» стрелки вдоль кромки (px). */
 export declare const ARROW_MIN_TRACK = 16;
+/**
+ * Мин. отступ popover от края вьюпорта (px).
+ * Наружу отдаётся CSS-переменной `--popover-viewport-padding`.
+ */
+export declare const VIEWPORT_MIN_PADDING = 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.ARROW_MIN_TRACK = exports.ARROW_MIN_PADDING = exports.ARROW_PADDING = exports.ARROW_HEIGHT = exports.ARROW_BASE = exports.popoverClassnames = void 0;
+exports.DEFAULT_MODIFIERS = exports.VIEWPORT_MIN_PADDING = 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'),
@@ -21,12 +21,17 @@ exports.ARROW_PADDING = 24;
 exports.ARROW_MIN_PADDING = 16;
 /** Мин. «ход» стрелки вдоль кромки (px). */
 exports.ARROW_MIN_TRACK = 16;
+/**
+ * Мин. отступ popover от края вьюпорта (px).
+ * Наружу отдаётся CSS-переменной `--popover-viewport-padding`.
+ */
+exports.VIEWPORT_MIN_PADDING = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */
 exports.DEFAULT_MODIFIERS = [
     {
         name: 'preventOverflow',
-        options: { altAxis: true, tether: false, padding: 8 },
+        options: { altAxis: true, tether: false, padding: exports.VIEWPORT_MIN_PADDING },
     },
 ];

package/node/components/NewPopover/styles.js

@@ -11,6 +11,7 @@ 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;
+    --popover-viewport-padding: ${constants_1.VIEWPORT_MIN_PADDING}px;
 
     z-index: ${({ theme }) => theme.zIndex.modal};
   }

package/node/components/NewPopover/types.d.ts

@@ -23,7 +23,7 @@ export type NewPopoverProps = {
      */
     isOpen?: boolean;
     /**
-     * Позиция относительно anchor
+     * Позиция относительно anchor.
      * @default 'bottom'
      */
     placement?: NewPopoverPlacement;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type NewPopoverModifier, type NewPopoverProps } from '../types';
-type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow' | 'disableMobileDrawer'>;
-export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }: UseLogicParams) => {
+type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow' | 'disableMobileDrawer'> & Required<Pick<NewPopoverProps, 'placement'>>;
+export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, placement, }: UseLogicParams) => {
     shouldRenderDrawer: boolean;
     isOpened: boolean;
     shouldRender: boolean;

package/node/components/NewPopover/useLogic/useLogic.js

@@ -8,10 +8,8 @@ const useFocusTrapEffect_1 = require("../../useFocusTrapEffect");
 const usePopoverAnimation_1 = require("../../usePopoverAnimation");
 const useViewportType_1 = require("../../useViewportType");
 const constants_1 = require("../constants");
-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 utils_1 = require("./utils");
+const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, placement, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [isContainerMounted, setIsContainerMounted] = (0, react_1.useState)(false);
     const [arrowElement, setArrowElement] = (0, react_1.useState)(null);
@@ -23,10 +21,10 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disab
     const isControlled = isOpen !== undefined;
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const { shouldRender, handleAnimationEnd } = (0, usePopoverAnimation_1.usePopoverAnimation)(isOpened);
-    const animatedWrapperStyle = (0, getPopoverCssVars_1.getPopoverCssVars)();
+    const animatedWrapperStyle = (0, utils_1.getPopoverCssVars)();
     const shouldRenderDrawer = isMobile && !disableMobileDrawer;
     const isPopoverActive = !shouldRenderDrawer && isOpened && isContainerMounted;
-    const anchorNode = (0, react_1.useMemo)(() => (0, resolveAnchorNode_1.resolveAnchorNode)(anchorEl), [anchorEl]);
+    const anchorNode = (0, react_1.useMemo)(() => (0, utils_1.resolveAnchorNode)(anchorEl), [anchorEl]);
     const excludeNodes = (0, react_1.useMemo)(() => [anchorNode], [anchorNode]);
     const handleClose = (event) => {
         onClose?.(event);
@@ -53,18 +51,20 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disab
         fallbackFocus: () => containerRef.current || document.body,
     });
     const mergedModifiers = (0, react_1.useMemo)(() => {
-        if (!hasArrow) {
-            return constants_1.DEFAULT_MODIFIERS;
+        const modifiers = [...constants_1.DEFAULT_MODIFIERS];
+        const fallbackPlacements = (0, utils_1.getFallbackPlacements)(placement);
+        if (fallbackPlacements) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements } });
         }
-        return [
-            ...constants_1.DEFAULT_MODIFIERS,
-            {
+        if (hasArrow) {
+            modifiers.push({
                 name: 'arrow',
                 enabled: true,
-                options: { element: arrowElement, padding: getArrowPadding_1.getArrowPadding },
-            },
-        ];
-    }, [hasArrow, arrowElement]);
+                options: { element: arrowElement, padding: utils_1.getArrowPadding },
+            });
+        }
+        return modifiers;
+    }, [hasArrow, arrowElement, placement]);
     return {
         shouldRenderDrawer,
         isOpened,

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

@@ -0,0 +1,7 @@
+import { type NewPopoverPlacement } from '../../../types';
+/**
+ * Значение fallbackPlacements для модификатора flip: заданная сторона не подошла —
+ * берётся следующая по списку. Для вертикальной стороны и `auto` список не задаётся,
+ * flip справляется сам.
+ */
+export declare const getFallbackPlacements: (placement: NewPopoverPlacement) => NewPopoverPlacement[] | undefined;

package/node/components/NewPopover/useLogic/utils/getFallbackPlacements/getFallbackPlacements.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFallbackPlacements = void 0;
+const OPPOSITE_SIDE = {
+    left: 'right',
+    right: 'left',
+};
+const VERTICAL_SIDES = ['bottom', 'top'];
+const checkIsSidePlacement = (side) => side in OPPOSITE_SIDE;
+/**
+ * Значение fallbackPlacements для модификатора flip: заданная сторона не подошла —
+ * берётся следующая по списку. Для вертикальной стороны и `auto` список не задаётся,
+ * flip справляется сам.
+ */
+const getFallbackPlacements = (placement) => {
+    const [side, alignment] = placement.split('-');
+    if (!checkIsSidePlacement(side)) {
+        return undefined;
+    }
+    const suffix = alignment ? `-${alignment}` : '';
+    return [OPPOSITE_SIDE[side], ...VERTICAL_SIDES].map((fallbackSide) => `${fallbackSide}${suffix}`);
+};
+exports.getFallbackPlacements = getFallbackPlacements;

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

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

package/node/components/NewPopover/useLogic/utils/getFallbackPlacements/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("./getFallbackPlacements"), exports);

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

@@ -0,0 +1,4 @@
+export * from './getArrowPadding';
+export * from './getFallbackPlacements';
+export * from './getPopoverCssVars';
+export * from './resolveAnchorNode';

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

@@ -0,0 +1,20 @@
+"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);
+__exportStar(require("./getFallbackPlacements"), exports);
+__exportStar(require("./getPopoverCssVars"), exports);
+__exportStar(require("./resolveAnchorNode"), exports);

package/node/components/Onboarding/types/step.d.ts

@@ -45,7 +45,7 @@ export type Step = {
      */
     type: StepType;
     /**
-     * Желаемая позиция popover (только для highlight).
+     * Желаемая позиция popover относительно подсвечиваемого элемента (только для highlight).
      * @default 'bottom'
      */
     position?: StepPosition;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StepPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "hasArrow" | "disableMobileDrawer"> & {
+export declare const StepPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "disableMobileDrawer" | "hasArrow"> & {
     variant?: import("../../../../../HintPopover").HintPopoverVariant | undefined;
     title?: import("react").ReactNode;
     action?: import("react").ReactNode;

package/node/components/Onboarding/ui/StepStrategy/steps/StandaloneStep/StandaloneStep.js

@@ -10,6 +10,6 @@ const styles_1 = require("./styles");
  */
 const StandaloneStep = ({ activeStep, isClosing, }) => {
     const { step, isConfirming, requestClose } = activeStep;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, children: [(0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: step.content }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(StepFooter_1.StepFooter, { activeStep: activeStep }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, disableMobileDrawer: true, children: [(0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: step.content }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(StepFooter_1.StepFooter, { activeStep: activeStep }) })] }));
 };
 exports.StandaloneStep = StandaloneStep;

package/node/components/Onboarding/ui/StepStrategy/steps/StandaloneStep/styles.d.ts

@@ -4,6 +4,7 @@ export declare const StepDialog: import("@emotion/styled/dist/declarations/src/t
     disableBackdropClick?: boolean | undefined;
     size?: import("../../../../../Dialog").DialogSize | undefined;
     headerContent?: import("react").ReactNode;
+    disableMobileDrawer?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/Onboarding/ui/hooks/useTrackedRect/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Сколько миллисекунд без изменений области считать покоем и останавливать
+ * отслеживание по кадрам. Перекрывает длительность анимаций MUI, чтобы
+ * отслеживание не выключилось в паузе перед стартом анимации.
+ */
+export declare const TRACKING_IDLE_TIMEOUT_MS = 300;

package/node/components/Onboarding/ui/hooks/useTrackedRect/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRACKING_IDLE_TIMEOUT_MS = void 0;
+/**
+ * Сколько миллисекунд без изменений области считать покоем и останавливать
+ * отслеживание по кадрам. Перекрывает длительность анимаций MUI, чтобы
+ * отслеживание не выключилось в паузе перед стартом анимации.
+ */
+exports.TRACKING_IDLE_TIMEOUT_MS = 300;

package/node/components/Onboarding/ui/hooks/useTrackedRect/useTrackedRect.js

@@ -4,6 +4,7 @@ exports.useTrackedRect = void 0;
 const react_1 = require("react");
 const geometry_1 = require("../../../utils/geometry");
 const getScrollParents_1 = require("../../../utils/getScrollParents");
+const constants_1 = require("./constants");
 /**
  * Отслеживает область элемента для hole overlay и якоря popover.
  */
@@ -14,32 +15,53 @@ const useTrackedRect = (element) => {
             setRect(null);
             return;
         }
-        // ID текущей рAF-очереди обновления.
+        // ID кадра активного отслеживания, 0 — отслеживание остановлено.
         let frame = 0;
+        let lastChangeTime = 0;
+        let lastRect = null;
         const scrollParents = (0, getScrollParents_1.getScrollParents)(element);
         const update = () => {
             const elementRect = (0, geometry_1.rectFromDomRect)(element.getBoundingClientRect());
             const viewport = (0, geometry_1.getViewport)();
             const next = (0, geometry_1.clampToScrollParents)(elementRect, scrollParents.map((parent) => (0, geometry_1.rectFromDomRect)(parent.getBoundingClientRect())), viewport);
-            setRect((prev) => ((0, geometry_1.isSameRect)(prev, next) ? prev : next));
+            if ((0, geometry_1.isSameRect)(lastRect, next)) {
+                return false;
+            }
+            lastRect = next;
+            setRect(next);
+            return true;
         };
-        const scheduleUpdate = () => {
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(update);
+        const track = () => {
+            if (update()) {
+                lastChangeTime = performance.now();
+            }
+            if (performance.now() - lastChangeTime >= constants_1.TRACKING_IDLE_TIMEOUT_MS) {
+                frame = 0;
+                return;
+            }
+            frame = requestAnimationFrame(track);
+        };
+        // Продлевает отслеживание, а если оно уже остановилось — запускает заново.
+        const scheduleTracking = () => {
+            lastChangeTime = performance.now();
+            if (!frame) {
+                frame = requestAnimationFrame(track);
+            }
         };
         update();
+        scheduleTracking();
         const scrollOptions = { passive: true };
-        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleUpdate, scrollOptions));
-        window.addEventListener('scroll', scheduleUpdate, scrollOptions);
-        window.addEventListener('resize', scheduleUpdate);
-        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleTracking, scrollOptions));
+        window.addEventListener('scroll', scheduleTracking, scrollOptions);
+        window.addEventListener('resize', scheduleTracking);
+        const resizeObserver = new ResizeObserver(scheduleTracking);
         resizeObserver.observe(element);
         return () => {
             cancelAnimationFrame(frame);
             resizeObserver.disconnect();
-            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleUpdate, scrollOptions));
-            window.removeEventListener('scroll', scheduleUpdate, scrollOptions);
-            window.removeEventListener('resize', scheduleUpdate);
+            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleTracking, scrollOptions));
+            window.removeEventListener('scroll', scheduleTracking, scrollOptions);
+            window.removeEventListener('resize', scheduleTracking);
         };
     }, [element]);
     return rect;

package/node/hook-form/FormFilters/FormFiltersDialog/styles.d.ts

@@ -12,6 +12,7 @@ export declare const StyledDialog: import("@emotion/styled/dist/declarations/src
     disableBackdropClick?: boolean | undefined;
     size?: import("../../../components/Dialog").DialogSize | undefined;
     headerContent?: import("react").ReactNode;
+    disableMobileDrawer?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.102.0",
+  "version": "4.103.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {