@astral/ui 4.102.0 → 4.103.1

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/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/components/fileUploading/FileUploaderFile/Actions/Actions.js

@@ -10,7 +10,7 @@ import { useViewportType } from '../../../useViewportType';
 import { Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const Actions = (props) => {
-    const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, isDeletingFile, fileName, } = useLogic(props);
+    const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, isDeletingFile, isDisabled, fileName, } = useLogic(props);
     const { isMobile } = useViewportType();
     if (isLoading) {
         return (_jsx(Wrapper, { children: isVisibleAbortButton && (_jsx(Tooltip, { title: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", children: _jsx(IconButton, { variant: "text", onClick: handleAbort, children: _jsx(CrossOutlineMd, {}) }) })) }));
@@ -19,5 +19,5 @@ export const Actions = (props) => {
         return (_jsxs(Wrapper, { children: [isVisibleRetryButton && (_jsx(Tooltip, { title: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", children: _jsx(IconButton, { variant: "text", onClick: handleRetry, children: _jsx(RetryOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: _jsx(IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: _jsx(CrossOutlineMd, {}) }) })] }));
     }
     const { isShowViewButton, ...restViewButtonProps } = viewButtonProps;
-    return (_jsxs(Wrapper, { children: [!isMobile && (_jsxs(_Fragment, { children: [isShowViewButton && (_jsx(Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", children: _jsx(IconButton, { variant: "text", ...restViewButtonProps, children: _jsx(EyeOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: _jsx(IconButton, { component: "a", variant: "text", download: fileName, ...downloadButtonProps, children: _jsx(DownloadOutlineMd, {}) }) })] })), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: _jsx(IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: _jsx(BinOutlineMd, {}) }) })] }));
+    return (_jsxs(Wrapper, { children: [!isMobile && (_jsxs(_Fragment, { children: [isShowViewButton && (_jsx(Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", children: _jsx(IconButton, { variant: "text", ...restViewButtonProps, children: _jsx(EyeOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: _jsx(IconButton, { component: "a", variant: "text", download: fileName, ...downloadButtonProps, children: _jsx(DownloadOutlineMd, {}) }) })] })), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", withoutContainer: !isDisabled, children: _jsx(IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, disabled: isDisabled, "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: _jsx(BinOutlineMd, {}) }) })] }));
 };

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

@@ -1,4 +1,11 @@
 import { styled } from '../../../styled';
+import { tooltipClassnames } from '../../../Tooltip';
 export const Wrapper = styled.div `
   text-align: right;
+
+  & .${tooltipClassnames.contentWrapper} {
+    display: inline-flex;
+
+    vertical-align: middle;
+  }
 `;

package/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/components/fileUploading/FileUploaderFile/Actions/useLogic/useLogic.js

@@ -3,7 +3,7 @@ import { ABORT_ERROR_MESSAGE, EXTENSIONS_IN_NEW_TAB, VIEW_NEW_TAB_ERROR_MESSAGE,
 import { useGenerateLocalFileURL } from '../../../hooks/useGenerateLocalFileURL';
 import { MimeTypeRegistry } from '../../../services/MimeTypeRegistry';
 import { generateAttrLinkNewTab } from '../../../utils/generateAttrLinkNewTab';
-export const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, fileName, }) => {
+export const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, isDisabled, fileName, }) => {
     const { generateUrl } = useGenerateLocalFileURL();
     const { controller } = selfFiles[fileId] || {};
     const isVisibleAbortButton = Boolean(controller);
@@ -71,6 +71,7 @@ export const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloa
         isLoading,
         isError,
         isDeletingFile,
+        isDisabled,
         fileName,
     };
 };

package/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;

package/components/fileUploading/PreviewFileUploader/FileList/FileList.d.ts

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

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

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

package/components/fileUploading/PreviewFileUploaderFile/FilePreview/FilePreview.js

@@ -10,5 +10,5 @@ import { useLogic } from './useLogic';
 export const FilePreview = (props) => {
     const { getActionsList, isImageFile, isPdfFile, isOtherFile } = useLogic(props);
     const { file, fileName, fileSize, fileUrl, generateDownloadLink, isHidePersonalData, PdfViewer, } = props;
-    return (_jsxs(Wrapper, { children: [!isOtherFile && (_jsx(Preview, { isImageFile: isImageFile, isPdfFile: isPdfFile, file: file, fileUrl: fileUrl, generateDownloadLink: generateDownloadLink, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer })), _jsxs(Details, { className: previewFileUploaderClassnames.details, "$isOtherFile": isOtherFile, children: [isOtherFile && _jsx(Typography, { variant: "h6", children: "\u0424\u0430\u0439\u043B \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D" }), _jsx(StyledFileInfo, { "$isOtherFile": isOtherFile, fileName: fileName, fileSize: fileSize }), _jsx(Actions, { children: getActionsList().map(({ type, ...action }) => (_jsx(Tooltip, { title: action.tooltip, disableInteractive: true, children: type === 'iconButton' ? (_jsx(IconButton, { ...action, children: action.icon })) : (_jsx(Button, { ...action, children: 'title' in action ? action.title : '' })) }, action.tooltip))) })] })] }));
+    return (_jsxs(Wrapper, { children: [!isOtherFile && (_jsx(Preview, { isImageFile: isImageFile, isPdfFile: isPdfFile, file: file, fileUrl: fileUrl, generateDownloadLink: generateDownloadLink, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer })), _jsxs(Details, { className: previewFileUploaderClassnames.details, "$isOtherFile": isOtherFile, children: [isOtherFile && _jsx(Typography, { variant: "h6", children: "\u0424\u0430\u0439\u043B \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D" }), _jsx(StyledFileInfo, { "$isOtherFile": isOtherFile, fileName: fileName, fileSize: fileSize }), _jsx(Actions, { children: getActionsList().map(({ type, ...action }) => (_jsx(Tooltip, { title: action.tooltip, disableInteractive: true, withoutContainer: !action.disabled, children: type === 'iconButton' ? (_jsx(IconButton, { ...action, children: action.icon })) : (_jsx(Button, { ...action, children: action.title ?? '' })) }, action.tooltip))) })] })] }));
 };

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

@@ -1,61 +1,23 @@
-/// <reference types="react" />
+import { type ReactElement } from 'react';
+import { type ButtonProps } from '../../../../Button';
 import { type FilePreviewProps } from '../FilePreview';
 type UseLogicParams = FilePreviewProps;
-export declare const useLogic: ({ fileId, file, fileUrl, fileName, generateDownloadLink, onDelete, onView, fileType, isDeletingFile, }: UseLogicParams) => {
+/**
+ * Действие в списке actions превью файла.
+ */
+type FileAction = Omit<ButtonProps, 'type'> & {
+    type: 'button' | 'iconButton';
+    tooltip: string;
+    icon?: ReactElement;
+    title?: string;
+};
+export declare const useLogic: ({ fileId, file, fileUrl, fileName, generateDownloadLink, onDelete, onView, fileType, isDeletingFile, isDisabled, }: UseLogicParams) => {
     isImageFile: boolean;
     isPdfFile: boolean;
     /**
      * Формат файла отличающийся от pdf и изображения
      */
     isOtherFile: boolean;
-    getActionsList: () => {
-        type: string;
-        tooltip: string;
-        title: string;
-        variant: "light";
-        color: "grey";
-        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
-        loading: boolean | undefined;
-        onClick: () => void;
-    }[] | ({
-        component: import("react").ElementType;
-        href: string;
-        target: string;
-        rel: string;
-        type: string;
-        tooltip: string;
-        variant: "light";
-        color: "grey";
-        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
-    } | {
-        onClick: () => void | undefined;
-        type: string;
-        tooltip: string;
-        variant: "light";
-        color: "grey";
-        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
-    } | {
-        type: string;
-        tooltip: string;
-        component: "a";
-        variant: "light";
-        color: "grey";
-        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
-        download: string;
-        href: string;
-        loading?: undefined;
-        onClick?: undefined;
-    } | {
-        type: string;
-        tooltip: string;
-        variant: "light";
-        color: "grey";
-        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
-        loading: boolean | undefined;
-        onClick: () => void;
-        component?: undefined;
-        download?: undefined;
-        href?: undefined;
-    })[];
+    getActionsList: () => FileAction[];
 };
 export {};

package/components/fileUploading/PreviewFileUploaderFile/FilePreview/useLogic/useLogic.js

@@ -8,7 +8,7 @@ import { EXTENSIONS_IN_NEW_TAB, VIEW_NEW_TAB_ERROR_MESSAGE, } from '../../../con
 import { useGenerateLocalFileURL } from '../../../hooks/useGenerateLocalFileURL';
 import { MimeTypeRegistry } from '../../../services/MimeTypeRegistry';
 import { generateAttrLinkNewTab } from '../../../utils/generateAttrLinkNewTab';
-export const useLogic = ({ fileId, file, fileUrl, fileName, generateDownloadLink, onDelete, onView, fileType, isDeletingFile, }) => {
+export const useLogic = ({ fileId, file, fileUrl, fileName, generateDownloadLink, onDelete, onView, fileType, isDeletingFile, isDisabled, }) => {
     const { generateUrl } = useGenerateLocalFileURL();
     const { isMobile } = useViewportType();
     const isPdfFile = MimeTypeRegistry.getInstance()
@@ -81,6 +81,8 @@ export const useLogic = ({ fileId, file, fileUrl, fileName, generateDownloadLink
                     color: 'grey',
                     icon: createElement(BinOutlineMd),
                     loading: isDeletingFile,
+                    disabled: isDisabled,
+                    'aria-label': 'Удалить',
                     onClick: handleDelete,
                 },
             ];
@@ -104,6 +106,8 @@ export const useLogic = ({ fileId, file, fileUrl, fileName, generateDownloadLink
                 color: 'grey',
                 icon: createElement(BinOutlineMd),
                 loading: isDeletingFile,
+                disabled: isDisabled,
+                'aria-label': 'Удалить',
                 onClick: handleDelete,
             },
         ];