@astral/ui 4.102.0 → 4.103.1

package/components/fileUploading/PreviewFileUploaderFile/PreviewFileUploaderFile.d.ts

@@ -27,6 +27,10 @@ export type PreviewFileUploaderFileProps = UploadFile & {
      * Флаг загрузки при удалении файла
      */
     isDeletingFile?: boolean;
+    /**
+     * Флаг блокировки действий
+     */
+    isDisabled?: boolean;
     /**
      * Компонент для отображения превью pdf-файлов
      */

package/components/fileUploading/PreviewFileUploaderFile/PreviewFileUploaderFile.js

@@ -5,8 +5,8 @@ import { FileLoading } from './FileLoading';
 import { FilePreview } from './FilePreview';
 import { Wrapper } from './styles';
 export const PreviewFileUploaderFile = (props) => {
-    const { id, name, type, file, url, size, status, generateDownloadLink, onRetry, onDelete, onView, selfFiles, setErrorStatusFile, isHidePersonalData, PdfViewer, isDeletingFile, } = props;
+    const { id, name, type, file, url, size, status, generateDownloadLink, onRetry, onDelete, onView, selfFiles, setErrorStatusFile, isHidePersonalData, PdfViewer, isDeletingFile, isDisabled, } = props;
     const { isLoading, isUploadError, isRestrictionError, errorMsg, progress } = status || {};
     const isError = isUploadError || isRestrictionError;
-    return (_jsx(Fade, { in: true, children: _jsxs(Wrapper, { "$isLoading": isLoading, "$isError": isError, children: [!isLoading && !isError && (_jsx(FilePreview, { fileId: id, fileName: name, fileType: type, file: file, fileUrl: url, fileSize: size, generateDownloadLink: generateDownloadLink, onView: onView, onDelete: onDelete, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer, isDeletingFile: isDeletingFile })), isLoading && (_jsx(FileLoading, { selfFiles: selfFiles, setErrorStatusFile: setErrorStatusFile, fileId: id, fileName: name, fileSize: size, progress: progress })), isError && (_jsx(FileError, { fileId: id, fileName: name, file: file, fileSize: size, errorMsg: errorMsg, isUploadError: isUploadError, onRetry: onRetry, onDelete: onDelete }))] }) }));
+    return (_jsx(Fade, { in: true, children: _jsxs(Wrapper, { "$isLoading": isLoading, "$isError": isError, children: [!isLoading && !isError && (_jsx(FilePreview, { fileId: id, fileName: name, fileType: type, file: file, fileUrl: url, fileSize: size, generateDownloadLink: generateDownloadLink, onView: onView, onDelete: onDelete, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer, isDeletingFile: isDeletingFile, isDisabled: isDisabled })), isLoading && (_jsx(FileLoading, { selfFiles: selfFiles, setErrorStatusFile: setErrorStatusFile, fileId: id, fileName: name, fileSize: size, progress: progress })), isError && (_jsx(FileError, { fileId: id, fileName: name, file: file, fileSize: size, errorMsg: errorMsg, isUploadError: isUploadError, onRetry: onRetry, onDelete: onDelete }))] }) }));
 };

package/components/fileUploading/hooks/useFileUploader/useFileUploader.d.ts

@@ -44,6 +44,7 @@ export declare const useFileUploader: ({ value, isDisabled, isMultiple, accept,
         className: string;
     };
     fileListProps: {
+        isDisabled: boolean | undefined;
         onDelete: (fileId: FileId) => void;
         onRetry: ((fileId: FileId, file: File) => void) | undefined;
         onView: ((fileId: string, file?: File | undefined, fileUrl?: string | undefined) => void) | undefined;

package/components/fileUploading/hooks/useFileUploader/useFileUploader.js

@@ -162,6 +162,7 @@ inputRef, notify, onChange, onUploadFile, onDeleteFile, name, isError, onView, g
             },
         },
         fileListProps: {
+            isDisabled,
             onDelete: handleDelete,
             onRetry: getHandlerOnRetry(),
             onView,

package/components/fileUploading/hooks/usePreviewFileUploader/usePreviewFileUploader.d.ts

@@ -90,6 +90,7 @@ export declare const usePreviewFileUploader: ({ placeholderImgSrc, isHidePersona
     fileListProps: {
         isHidePersonalData: boolean | undefined;
         PdfViewer: LazyExoticComponent<(props: PdfViewerProps) => ReactElement> | ((props: PdfViewerProps) => ReactElement) | undefined;
+        isDisabled: boolean | undefined;
         onDelete: (fileId: string) => void;
         onRetry: ((fileId: string, file: File) => void) | undefined;
         onView: ((fileId: string, file?: File | undefined, fileUrl?: string | undefined) => void) | undefined;

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/components/fileUploading/FileUploader/FIleList/FileList.d.ts

@@ -11,5 +11,5 @@ export type FileListProps = {
      * Идентификатор файла, для которого выполняется удаление
      */
     deletingFileId?: FileId | null;
-} & Pick<FileUploaderFileProps, 'onDelete' | 'onRetry' | 'onView' | 'generateDownloadLink' | 'selfFiles' | 'setErrorStatusFile'>;
+} & Pick<FileUploaderFileProps, 'onDelete' | 'onRetry' | 'onView' | 'generateDownloadLink' | 'selfFiles' | 'setErrorStatusFile' | 'isDisabled'>;
 export declare const FileList: ({ isMultiple, files, className, deletingFileId, ...restProps }: FileListProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/fileUploading/FileUploaderFile/Actions/Actions.js

@@ -13,7 +13,7 @@ const useViewportType_1 = require("../../../useViewportType");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const Actions = (props) => {
-    const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, isDeletingFile, fileName, } = (0, useLogic_1.useLogic)(props);
+    const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, isDeletingFile, isDisabled, fileName, } = (0, useLogic_1.useLogic)(props);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: isVisibleAbortButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleAbort, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }) })) }));
@@ -22,6 +22,6 @@ const Actions = (props) => {
         return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [isVisibleRetryButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleRetry, children: (0, jsx_runtime_1.jsx)(RetryOutlineMd_1.RetryOutlineMd, {}) }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }) })] }));
     }
     const { isShowViewButton, ...restViewButtonProps } = viewButtonProps;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [!isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isShowViewButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", ...restViewButtonProps, children: (0, jsx_runtime_1.jsx)(EyeOutlineMd_1.EyeOutlineMd, {}) }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { component: "a", variant: "text", download: fileName, ...downloadButtonProps, children: (0, jsx_runtime_1.jsx)(DownloadOutlineMd_1.DownloadOutlineMd, {}) }) })] })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: (0, jsx_runtime_1.jsx)(BinOutlineMd_1.BinOutlineMd, {}) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [!isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isShowViewButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", ...restViewButtonProps, children: (0, jsx_runtime_1.jsx)(EyeOutlineMd_1.EyeOutlineMd, {}) }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { component: "a", variant: "text", download: fileName, ...downloadButtonProps, children: (0, jsx_runtime_1.jsx)(DownloadOutlineMd_1.DownloadOutlineMd, {}) }) })] })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", withoutContainer: !isDisabled, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, disabled: isDisabled, "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: (0, jsx_runtime_1.jsx)(BinOutlineMd_1.BinOutlineMd, {}) }) })] }));
 };
 exports.Actions = Actions;

package/node/components/fileUploading/FileUploaderFile/Actions/styles.js

@@ -2,6 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
 const styled_1 = require("../../../styled");
+const Tooltip_1 = require("../../../Tooltip");
 exports.Wrapper = styled_1.styled.div `
   text-align: right;
+
+  & .${Tooltip_1.tooltipClassnames.contentWrapper} {
+    display: inline-flex;
+
+    vertical-align: middle;
+  }
 `;

package/node/components/fileUploading/FileUploaderFile/Actions/useLogic/useLogic.d.ts

@@ -49,9 +49,13 @@ export type UseLogicParams = {
      * Флаг загрузки при удалении файла
      */
     isDeletingFile?: boolean;
+    /**
+     * Флаг блокировки действий
+     */
+    isDisabled?: boolean;
     abortController?: AbortController;
 } & Pick<SelfFileApi, 'selfFiles' | 'setErrorStatusFile'>;
-export declare const useLogic: ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, fileName, }: UseLogicParams) => {
+export declare const useLogic: ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, isDisabled, fileName, }: UseLogicParams) => {
     downloadButtonProps: {
         href: string;
     };
@@ -74,5 +78,6 @@ export declare const useLogic: ({ fileId, file, fileUrl, isUploadError, generate
     isLoading: boolean | undefined;
     isError: boolean | undefined;
     isDeletingFile: boolean | undefined;
+    isDisabled: boolean | undefined;
     fileName: string;
 };

package/node/components/fileUploading/FileUploaderFile/Actions/useLogic/useLogic.js

@@ -6,7 +6,7 @@ const constants_1 = require("../../../constants");
 const useGenerateLocalFileURL_1 = require("../../../hooks/useGenerateLocalFileURL");
 const MimeTypeRegistry_1 = require("../../../services/MimeTypeRegistry");
 const generateAttrLinkNewTab_1 = require("../../../utils/generateAttrLinkNewTab");
-const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, fileName, }) => {
+const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, isDisabled, fileName, }) => {
     const { generateUrl } = (0, useGenerateLocalFileURL_1.useGenerateLocalFileURL)();
     const { controller } = selfFiles[fileId] || {};
     const isVisibleAbortButton = Boolean(controller);
@@ -74,6 +74,7 @@ const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink,
         isLoading,
         isError,
         isDeletingFile,
+        isDisabled,
         fileName,
     };
 };

package/node/components/fileUploading/FileUploaderFile/FileUploaderFile.d.ts

@@ -21,5 +21,5 @@ export type FileUploaderFileProps = UploadFile & {
      * Флаг загрузки при удалении файла
      */
     isDeletingFile?: boolean;
-} & Pick<ActionsProps, 'selfFiles' | 'setErrorStatusFile'>;
+} & Pick<ActionsProps, 'selfFiles' | 'setErrorStatusFile' | 'isDisabled'>;
 export declare const FileUploaderFile: (props: FileUploaderFileProps) => import("react/jsx-runtime").JSX.Element;