@astral/ui 4.18.6 → 4.19.0

package/components/fileUploading/FileUploader/FIleList/FileList.d.ts

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

package/components/fileUploading/FileUploader/FIleList/FileList.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FileUploaderFile, } from '../../FileUploaderFile';
 import { Wrapper } from './styles';
-export const FileList = ({ isMultiple, files, className, ...restProps }) => (_jsx(Wrapper, { "$isMultiple": isMultiple, className: className, children: files?.map((file) => (_jsx("li", { children: _jsx(FileUploaderFile, { ...file, ...restProps }) }, file.id))) }));
+export const FileList = ({ isMultiple, files, className, deletingFileId, ...restProps }) => (_jsx(Wrapper, { "$isMultiple": isMultiple, className: className, children: files?.map((file) => (_jsx("li", { children: _jsx(FileUploaderFile, { ...file, ...restProps, isDeletingFile: deletingFileId === file.id }) }, file.id))) }));

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

@@ -9,13 +9,13 @@ import { Tooltip } from '../../../Tooltip';
 import { Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const Actions = (props) => {
-    const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, fileName, } = useLogic(props);
+    const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, isDeletingFile, fileName, } = useLogic(props);
     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, {}) }) })) }));
     }
     if (isError) {
-        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, children: _jsx(CrossOutlineMd, {}) }) })] }));
+        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: [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, children: _jsx(BinOutlineMd, {}) }) })] }));
+    return (_jsxs(Wrapper, { 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, {}) }) })] }));
 };

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

@@ -45,9 +45,13 @@ export type UseLogicParams = {
      * Функция, вызываемая при удалении файла
      */
     onDelete: (fileId: FileId) => void;
+    /**
+     * Флаг загрузки при удалении файла
+     */
+    isDeletingFile?: boolean;
     abortController?: AbortController;
 } & Pick<SelfFileApi, 'selfFiles' | 'setErrorStatusFile'>;
-export declare const useLogic: ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, fileName, }: UseLogicParams) => {
+export declare const useLogic: ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, fileName, }: UseLogicParams) => {
     downloadButtonProps: {
         href: string;
     };
@@ -69,5 +73,6 @@ export declare const useLogic: ({ fileId, file, fileUrl, isUploadError, generate
     handleRetry: () => void | undefined;
     isLoading: boolean | undefined;
     isError: boolean | undefined;
+    isDeletingFile: boolean | undefined;
     fileName: string;
 };

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

@@ -4,7 +4,7 @@ import { ConfigContext } from '../../../../ConfigProvider';
 import { ABORT_ERROR_MESSAGE, EXTENSIONS_IN_NEW_TAB, VIEW_NEW_TAB_ERROR_MESSAGE, } from '../../../constants';
 import { useGenerateLocalFileURL } from '../../../hooks/useGenerateLocalFileURL';
 import { generateAttrLinkNewTab } from '../../../utils/generateAttrLinkNewTab';
-export const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, fileName, }) => {
+export const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, fileName, }) => {
     const { captureException } = useContext(ConfigContext);
     const { generateUrl } = useGenerateLocalFileURL();
     const { controller } = selfFiles[fileId] || {};
@@ -71,6 +71,7 @@ export const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloa
         handleRetry,
         isLoading,
         isError,
+        isDeletingFile,
         fileName,
     };
 };

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

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

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

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

package/components/fileUploading/PreviewFileUploader/FileList/FileList.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { PreviewFileUploaderFile, } from '../../PreviewFileUploaderFile';
-export const FileList = ({ files, ...restProps }) => (_jsx(_Fragment, { children: files?.map((file) => (_jsx(PreviewFileUploaderFile, { ...file, ...restProps }, file.id))) }));
+export const FileList = ({ files, deletingFileId, ...restProps }) => (_jsx(_Fragment, { children: files?.map((file) => (_jsx(PreviewFileUploaderFile, { ...file, ...restProps, isDeletingFile: deletingFileId === file.id }, file.id))) }));

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

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

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

@@ -13,7 +13,7 @@ import { Actions, Details, StyledFileInfo, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const FilePreview = (props) => {
     const { viewButtonProps, downloadButtonProps, deleteButtonProps, isImageFile, isPdfFile, isOtherFile, } = useLogic(props);
-    const { file, fileName, fileSize, fileUrl, generateDownloadLink, isHidePersonalData, PdfViewer, } = props;
+    const { file, fileName, fileSize, fileUrl, generateDownloadLink, isHidePersonalData, PdfViewer, isDeletingFile, } = props;
     const { isMobile } = useViewportType();
-    return (_jsxs(Wrapper, { children: [_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: isMobile && isOtherFile ? (_jsx(Button, { variant: "light", color: "grey", ...deleteButtonProps, children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" })) : (_jsxs(_Fragment, { children: [!isOtherFile && (_jsx(Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", ...viewButtonProps, children: _jsx(EyeOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { component: "a", variant: "light", color: "grey", download: fileName, ...downloadButtonProps, children: _jsx(DownloadOutlineMd, {}) }) }), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", ...deleteButtonProps, children: _jsx(BinOutlineMd, {}) }) })] })) })] })] }));
+    return (_jsxs(Wrapper, { children: [_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: isMobile && isOtherFile ? (_jsx(Button, { variant: "light", color: "grey", loading: isDeletingFile, ...deleteButtonProps, children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" })) : (_jsxs(_Fragment, { children: [!isOtherFile && (_jsx(Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", ...viewButtonProps, children: _jsx(EyeOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { component: "a", variant: "light", color: "grey", download: fileName, ...downloadButtonProps, children: _jsx(DownloadOutlineMd, {}) }) }), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", loading: isDeletingFile, ...deleteButtonProps, children: _jsx(BinOutlineMd, {}) }) })] })) })] })] }));
 };

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

@@ -23,6 +23,10 @@ export type PreviewFileUploaderFileProps = UploadFile & {
      * Скрытие персональных данных от инструментов мониторинга
      */
     isHidePersonalData?: boolean;
+    /**
+     * Флаг загрузки при удалении файла
+     */
+    isDeletingFile?: 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, } = props;
+    const { id, name, type, file, url, size, status, generateDownloadLink, onRetry, onDelete, onView, selfFiles, setErrorStatusFile, isHidePersonalData, PdfViewer, isDeletingFile, } = 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 })), 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 })), 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

@@ -1,7 +1,7 @@
 import { type ChangeEvent } from 'react';
 import type { FileId, FileUploaderProps, UploadFile } from '../../types';
 export type UseFileUploaderParams = FileUploaderProps;
-export declare const useFileUploader: ({ value, isDisabled, isMultiple, accept, restrictions, maxFileSize, maxFileCount, inputRef, notify, onChange, onUploadFile, name, isError, onView, generateDownloadLink, placeholder, helperText, label, className, getErrorMessage, }: UseFileUploaderParams) => {
+export declare const useFileUploader: ({ value, isDisabled, isMultiple, accept, restrictions, maxFileSize, maxFileCount, inputRef, notify, onChange, onUploadFile, onDeleteFile, name, isError, onView, generateDownloadLink, placeholder, helperText, label, className, getErrorMessage, }: UseFileUploaderParams) => {
     dropZoneProps: {
         isLimitMaxFileCount: boolean;
         maxFileCount: number;
@@ -53,5 +53,6 @@ export declare const useFileUploader: ({ value, isDisabled, isMultiple, accept,
         selfFiles: Record<string, UploadFile & import("../../types").SpecificSelfFileParams>;
         setErrorStatusFile: (fileId: string, errorMsg: string) => void;
         getErrorMessage: ((fileId: string, error: Error) => string) | undefined;
+        deletingFileId: string | null;
     };
 };

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

@@ -1,6 +1,6 @@
 import { declensionOfWords } from '@astral/utils/declension/declensionOfWords';
 import { formatFileSizeToView } from '@astral/utils/file/formatFileSizeToView';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useGenerateLocalId } from '../../../useGenerateLocalId';
 import { useId } from '../../../useId';
 import { DEFAULT_FILE_STATUS, fileUploaderClassnames } from '../../constants';
@@ -11,8 +11,9 @@ import { toArray } from '../../utils/toArray';
 import { useDnD } from '../useDnD';
 import { useUploadFiles } from '../useUploadFiles';
 export const useFileUploader = ({ value, isDisabled, isMultiple, accept, restrictions = [], maxFileSize, maxFileCount = 1, // для случая, когда isMultiple=false
-inputRef, notify, onChange, onUploadFile, name, isError, onView, generateDownloadLink, placeholder, helperText, label, className, getErrorMessage, }) => {
+inputRef, notify, onChange, onUploadFile, onDeleteFile, name, isError, onView, generateDownloadLink, placeholder, helperText, label, className, getErrorMessage, }) => {
     const inputId = useId();
+    const [deletingFileId, setDeletingFileId] = useState(null);
     const { generateId } = useGenerateLocalId();
     // Преобразуем value к массиву
     const files = useMemo(() => toArray(value), [value]);
@@ -94,10 +95,20 @@ inputRef, notify, onChange, onUploadFile, name, isError, onView, generateDownloa
         },
     });
     const handleDelete = (fileId) => {
-        if (isMultiple) {
-            return onChange(files?.filter(({ id }) => id !== fileId));
+        const deleteFile = () => {
+            if (isMultiple) {
+                return onChange(files?.filter(({ id }) => id !== fileId));
+            }
+            return onChange(null);
+        };
+        if (!onDeleteFile) {
+            return deleteFile();
         }
-        return onChange(null);
+        setDeletingFileId(fileId);
+        onDeleteFile(fileId)
+            .then(deleteFile)
+            .catch(() => notify.error('Ошибка удаления файла'))
+            .finally(() => setDeletingFileId(null));
     };
     const getHandlerOnRetry = () => {
         if (onUploadFile) {
@@ -155,6 +166,7 @@ inputRef, notify, onChange, onUploadFile, name, isError, onView, generateDownloa
             selfFiles,
             setErrorStatusFile,
             getErrorMessage,
+            deletingFileId,
         },
     };
 };

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

@@ -117,6 +117,13 @@ export type UsePreviewFileUploaderParams = {
      * - При обновлении информации о файле после успешной загрузки
      */
     onChange: (value: UploadFile | null) => void;
+    /**
+     * Функция, вызываемая при удалении файла.
+     * Используется для сбора идентификаторов файлов, помеченных на удаление.
+     * Фактическое удаление файлов с сервера должно выполняться только при подтверждении формы,
+     * чтобы избежать потери данных при отмене действия или перезагрузке страницы.
+     */
+    onDeleteFile?: (fileId: FileId) => Promise<void>;
     /**
      * Скрытие персональных данных от инструментов мониторинга
      */
@@ -126,7 +133,7 @@ export type UsePreviewFileUploaderParams = {
      */
     PdfViewer?: ((props: PdfViewerProps) => ReactElement) | LazyExoticComponent<(props: PdfViewerProps) => ReactElement>;
 };
-export declare const usePreviewFileUploader: ({ value, isDisabled, accept, restrictions, maxFileSize, inputRef, notify, onChange, onUploadFile, label, isError, generateDownloadLink, onView, name, helperText, className, placeholder, placeholderImgSrc, isHidePersonalData, PdfViewer, }: UsePreviewFileUploaderParams) => {
+export declare const usePreviewFileUploader: ({ value, isDisabled, accept, restrictions, maxFileSize, inputRef, notify, onChange, onUploadFile, onDeleteFile, label, isError, generateDownloadLink, onView, name, helperText, className, placeholder, placeholderImgSrc, isHidePersonalData, PdfViewer, }: UsePreviewFileUploaderParams) => {
     dropZoneProps: {
         isVisibleAddFile: boolean;
         isVisibleFileList: boolean;
@@ -165,7 +172,7 @@ export declare const usePreviewFileUploader: ({ value, isDisabled, accept, restr
         isError: boolean | undefined;
     };
     fileListProps: {
-        onDelete: () => void;
+        onDelete: (fileId: FileId) => void;
         onRetry: ((fileId: FileId, file: File) => void) | undefined;
         setErrorStatusFile: (fileId: string, errorMsg: string) => void;
         selfFiles: Record<string, UploadFile & import("../../types").SpecificSelfFileParams>;
@@ -174,5 +181,6 @@ export declare const usePreviewFileUploader: ({ value, isDisabled, accept, restr
         files: UploadFile[];
         isHidePersonalData: boolean | undefined;
         PdfViewer: LazyExoticComponent<(props: PdfViewerProps) => ReactElement> | ((props: PdfViewerProps) => ReactElement) | undefined;
+        deletingFileId: string | null;
     };
 };

package/components/fileUploading/hooks/usePreviewFileUploader/usePreviewFileUploader.js

@@ -1,6 +1,6 @@
 import { declensionOfWords } from '@astral/utils/declension/declensionOfWords';
 import { formatFileSizeToView } from '@astral/utils/file/formatFileSizeToView';
-import { useMemo, } from 'react';
+import { useMemo, useState, } from 'react';
 import { useGenerateLocalId } from '../../../useGenerateLocalId';
 import { useId } from '../../../useId';
 import { DEFAULT_FILE_STATUS, previewFileUploaderClassnames, } from '../../constants';
@@ -10,8 +10,9 @@ import { rulePipe } from '../../utils/rulePipe';
 import { toArray } from '../../utils/toArray';
 import { useDnD } from '../useDnD';
 import { useUploadFiles } from '../useUploadFiles';
-export const usePreviewFileUploader = ({ value, isDisabled, accept, restrictions = [], maxFileSize, inputRef, notify, onChange, onUploadFile, label, isError, generateDownloadLink, onView, name, helperText, className, placeholder, placeholderImgSrc, isHidePersonalData, PdfViewer, }) => {
+export const usePreviewFileUploader = ({ value, isDisabled, accept, restrictions = [], maxFileSize, inputRef, notify, onChange, onUploadFile, onDeleteFile, label, isError, generateDownloadLink, onView, name, helperText, className, placeholder, placeholderImgSrc, isHidePersonalData, PdfViewer, }) => {
     const inputId = useId();
+    const [deletingFileId, setDeletingFileId] = useState(null);
     const { generateId } = useGenerateLocalId();
     // Преобразуем value к массиву
     const files = useMemo(() => toArray(value), [value]);
@@ -80,8 +81,16 @@ export const usePreviewFileUploader = ({ value, isDisabled, accept, restrictions
             });
         },
     });
-    const handleDelete = () => {
-        return onChange(null);
+    const handleDelete = (fileId) => {
+        const deleteFile = () => onChange(null);
+        if (!onDeleteFile) {
+            return deleteFile();
+        }
+        setDeletingFileId(fileId);
+        onDeleteFile(fileId)
+            .then(deleteFile)
+            .catch(() => notify.error('Ошибка удаления файла'))
+            .finally(() => setDeletingFileId(null));
     };
     const getHandlerOnRetry = () => {
         if (onUploadFile) {
@@ -135,6 +144,7 @@ export const usePreviewFileUploader = ({ value, isDisabled, accept, restrictions
             files,
             isHidePersonalData,
             PdfViewer,
+            deletingFileId,
         },
     };
 };

package/components/fileUploading/types.d.ts

@@ -188,6 +188,13 @@ type BaseFileUploaderProps = {
         signal: AbortSignal;
         setProgress: (progressFileId: FileId, progressEvent: ProgressEvent) => void;
     }) => Promise<UploadedFileData>;
+    /**
+     * Функция, вызываемая при удалении файла.
+     * Используется для сбора идентификаторов файлов, помеченных на удаление.
+     * Фактическое удаление файлов с сервера должно выполняться только при подтверждении формы,
+     * чтобы избежать потери данных при отмене действия или перезагрузке страницы.
+     */
+    onDeleteFile?: (fileId: FileId) => Promise<void>;
     /**
      * Обработчик просмотра файла
      * @param fileId - Идентификатор файла

package/node/components/fileUploading/FileUploader/FIleList/FileList.d.ts

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

package/node/components/fileUploading/FileUploader/FIleList/FileList.js

@@ -4,5 +4,5 @@ exports.FileList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FileUploaderFile_1 = require("../../FileUploaderFile");
 const styles_1 = require("./styles");
-const FileList = ({ isMultiple, files, className, ...restProps }) => ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isMultiple": isMultiple, className: className, children: files?.map((file) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(FileUploaderFile_1.FileUploaderFile, { ...file, ...restProps }) }, file.id))) }));
+const FileList = ({ isMultiple, files, className, deletingFileId, ...restProps }) => ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isMultiple": isMultiple, className: className, children: files?.map((file) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(FileUploaderFile_1.FileUploaderFile, { ...file, ...restProps, isDeletingFile: deletingFileId === file.id }) }, file.id))) }));
 exports.FileList = FileList;

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

@@ -12,14 +12,14 @@ const Tooltip_1 = require("../../../Tooltip");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const Actions = (props) => {
-    const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, fileName, } = (0, useLogic_1.useLogic)(props);
+    const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, isDeletingFile, fileName, } = (0, useLogic_1.useLogic)(props);
     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, {}) }) })) }));
     }
     if (isError) {
-        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, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }) })] }));
+        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: [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, children: (0, jsx_runtime_1.jsx)(BinOutlineMd_1.BinOutlineMd, {}) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { 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, {}) }) })] }));
 };
 exports.Actions = Actions;

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

@@ -45,9 +45,13 @@ export type UseLogicParams = {
      * Функция, вызываемая при удалении файла
      */
     onDelete: (fileId: FileId) => void;
+    /**
+     * Флаг загрузки при удалении файла
+     */
+    isDeletingFile?: boolean;
     abortController?: AbortController;
 } & Pick<SelfFileApi, 'selfFiles' | 'setErrorStatusFile'>;
-export declare const useLogic: ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, fileName, }: UseLogicParams) => {
+export declare const useLogic: ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, fileName, }: UseLogicParams) => {
     downloadButtonProps: {
         href: string;
     };
@@ -69,5 +73,6 @@ export declare const useLogic: ({ fileId, file, fileUrl, isUploadError, generate
     handleRetry: () => void | undefined;
     isLoading: boolean | undefined;
     isError: boolean | undefined;
+    isDeletingFile: boolean | undefined;
     fileName: string;
 };

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

@@ -7,7 +7,7 @@ const ConfigProvider_1 = require("../../../../ConfigProvider");
 const constants_1 = require("../../../constants");
 const useGenerateLocalFileURL_1 = require("../../../hooks/useGenerateLocalFileURL");
 const generateAttrLinkNewTab_1 = require("../../../utils/generateAttrLinkNewTab");
-const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, fileName, }) => {
+const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink, onDelete, onRetry, onView, setErrorStatusFile, selfFiles, isLoading, isError, isDeletingFile, fileName, }) => {
     const { captureException } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const { generateUrl } = (0, useGenerateLocalFileURL_1.useGenerateLocalFileURL)();
     const { controller } = selfFiles[fileId] || {};
@@ -74,6 +74,7 @@ const useLogic = ({ fileId, file, fileUrl, isUploadError, generateDownloadLink,
         handleRetry,
         isLoading,
         isError,
+        isDeletingFile,
         fileName,
     };
 };

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

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

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

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

package/node/components/fileUploading/PreviewFileUploader/FileList/FileList.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const PreviewFileUploaderFile_1 = require("../../PreviewFileUploaderFile");
-const FileList = ({ files, ...restProps }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: files?.map((file) => ((0, jsx_runtime_1.jsx)(PreviewFileUploaderFile_1.PreviewFileUploaderFile, { ...file, ...restProps }, file.id))) }));
+const FileList = ({ files, deletingFileId, ...restProps }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: files?.map((file) => ((0, jsx_runtime_1.jsx)(PreviewFileUploaderFile_1.PreviewFileUploaderFile, { ...file, ...restProps, isDeletingFile: deletingFileId === file.id }, file.id))) }));
 exports.FileList = FileList;

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

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

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

@@ -16,8 +16,8 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const FilePreview = (props) => {
     const { viewButtonProps, downloadButtonProps, deleteButtonProps, isImageFile, isPdfFile, isOtherFile, } = (0, useLogic_1.useLogic)(props);
-    const { file, fileName, fileSize, fileUrl, generateDownloadLink, isHidePersonalData, PdfViewer, } = props;
+    const { file, fileName, fileSize, fileUrl, generateDownloadLink, isHidePersonalData, PdfViewer, isDeletingFile, } = props;
     const { isMobile } = (0, useViewportType_1.useViewportType)();
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Preview_1.Preview, { isImageFile: isImageFile, isPdfFile: isPdfFile, file: file, fileUrl: fileUrl, generateDownloadLink: generateDownloadLink, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer }), (0, jsx_runtime_1.jsxs)(styles_1.Details, { className: constants_1.previewFileUploaderClassnames.details, "$isOtherFile": isOtherFile, children: [isOtherFile && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h6", children: "\u0424\u0430\u0439\u043B \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D" }), (0, jsx_runtime_1.jsx)(styles_1.StyledFileInfo, { "$isOtherFile": isOtherFile, fileName: fileName, fileSize: fileSize }), (0, jsx_runtime_1.jsx)(styles_1.Actions, { children: isMobile && isOtherFile ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "light", color: "grey", ...deleteButtonProps, children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isOtherFile && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", ...viewButtonProps, 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", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { component: "a", variant: "light", color: "grey", 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", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", ...deleteButtonProps, children: (0, jsx_runtime_1.jsx)(BinOutlineMd_1.BinOutlineMd, {}) }) })] })) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Preview_1.Preview, { isImageFile: isImageFile, isPdfFile: isPdfFile, file: file, fileUrl: fileUrl, generateDownloadLink: generateDownloadLink, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer }), (0, jsx_runtime_1.jsxs)(styles_1.Details, { className: constants_1.previewFileUploaderClassnames.details, "$isOtherFile": isOtherFile, children: [isOtherFile && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h6", children: "\u0424\u0430\u0439\u043B \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D" }), (0, jsx_runtime_1.jsx)(styles_1.StyledFileInfo, { "$isOtherFile": isOtherFile, fileName: fileName, fileSize: fileSize }), (0, jsx_runtime_1.jsx)(styles_1.Actions, { children: isMobile && isOtherFile ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "light", color: "grey", loading: isDeletingFile, ...deleteButtonProps, children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isOtherFile && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", ...viewButtonProps, 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", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { component: "a", variant: "light", color: "grey", 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", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", loading: isDeletingFile, ...deleteButtonProps, children: (0, jsx_runtime_1.jsx)(BinOutlineMd_1.BinOutlineMd, {}) }) })] })) })] })] }));
 };
 exports.FilePreview = FilePreview;

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

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

package/node/components/fileUploading/PreviewFileUploaderFile/PreviewFileUploaderFile.js

@@ -8,9 +8,9 @@ const FileLoading_1 = require("./FileLoading");
 const FilePreview_1 = require("./FilePreview");
 const styles_1 = require("./styles");
 const PreviewFileUploaderFile = (props) => {
-    const { id, name, type, file, url, size, status, generateDownloadLink, onRetry, onDelete, onView, selfFiles, setErrorStatusFile, isHidePersonalData, PdfViewer, } = props;
+    const { id, name, type, file, url, size, status, generateDownloadLink, onRetry, onDelete, onView, selfFiles, setErrorStatusFile, isHidePersonalData, PdfViewer, isDeletingFile, } = props;
     const { isLoading, isUploadError, isRestrictionError, errorMsg, progress } = status || {};
     const isError = isUploadError || isRestrictionError;
-    return ((0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: true, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isLoading": isLoading, "$isError": isError, children: [!isLoading && !isError && ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { fileId: id, fileName: name, fileType: type, file: file, fileUrl: url, fileSize: size, generateDownloadLink: generateDownloadLink, onView: onView, onDelete: onDelete, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer })), isLoading && ((0, jsx_runtime_1.jsx)(FileLoading_1.FileLoading, { selfFiles: selfFiles, setErrorStatusFile: setErrorStatusFile, fileId: id, fileName: name, fileSize: size, progress: progress })), isError && ((0, jsx_runtime_1.jsx)(FileError_1.FileError, { fileId: id, fileName: name, file: file, fileSize: size, errorMsg: errorMsg, isUploadError: isUploadError, onRetry: onRetry, onDelete: onDelete }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: true, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isLoading": isLoading, "$isError": isError, children: [!isLoading && !isError && ((0, jsx_runtime_1.jsx)(FilePreview_1.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 && ((0, jsx_runtime_1.jsx)(FileLoading_1.FileLoading, { selfFiles: selfFiles, setErrorStatusFile: setErrorStatusFile, fileId: id, fileName: name, fileSize: size, progress: progress })), isError && ((0, jsx_runtime_1.jsx)(FileError_1.FileError, { fileId: id, fileName: name, file: file, fileSize: size, errorMsg: errorMsg, isUploadError: isUploadError, onRetry: onRetry, onDelete: onDelete }))] }) }));
 };
 exports.PreviewFileUploaderFile = PreviewFileUploaderFile;

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

@@ -1,7 +1,7 @@
 import { type ChangeEvent } from 'react';
 import type { FileId, FileUploaderProps, UploadFile } from '../../types';
 export type UseFileUploaderParams = FileUploaderProps;
-export declare const useFileUploader: ({ value, isDisabled, isMultiple, accept, restrictions, maxFileSize, maxFileCount, inputRef, notify, onChange, onUploadFile, name, isError, onView, generateDownloadLink, placeholder, helperText, label, className, getErrorMessage, }: UseFileUploaderParams) => {
+export declare const useFileUploader: ({ value, isDisabled, isMultiple, accept, restrictions, maxFileSize, maxFileCount, inputRef, notify, onChange, onUploadFile, onDeleteFile, name, isError, onView, generateDownloadLink, placeholder, helperText, label, className, getErrorMessage, }: UseFileUploaderParams) => {
     dropZoneProps: {
         isLimitMaxFileCount: boolean;
         maxFileCount: number;
@@ -53,5 +53,6 @@ export declare const useFileUploader: ({ value, isDisabled, isMultiple, accept,
         selfFiles: Record<string, UploadFile & import("../../types").SpecificSelfFileParams>;
         setErrorStatusFile: (fileId: string, errorMsg: string) => void;
         getErrorMessage: ((fileId: string, error: Error) => string) | undefined;
+        deletingFileId: string | null;
     };
 };

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

@@ -14,8 +14,9 @@ const toArray_1 = require("../../utils/toArray");
 const useDnD_1 = require("../useDnD");
 const useUploadFiles_1 = require("../useUploadFiles");
 const useFileUploader = ({ value, isDisabled, isMultiple, accept, restrictions = [], maxFileSize, maxFileCount = 1, // для случая, когда isMultiple=false
-inputRef, notify, onChange, onUploadFile, name, isError, onView, generateDownloadLink, placeholder, helperText, label, className, getErrorMessage, }) => {
+inputRef, notify, onChange, onUploadFile, onDeleteFile, name, isError, onView, generateDownloadLink, placeholder, helperText, label, className, getErrorMessage, }) => {
     const inputId = (0, useId_1.useId)();
+    const [deletingFileId, setDeletingFileId] = (0, react_1.useState)(null);
     const { generateId } = (0, useGenerateLocalId_1.useGenerateLocalId)();
     // Преобразуем value к массиву
     const files = (0, react_1.useMemo)(() => (0, toArray_1.toArray)(value), [value]);
@@ -97,10 +98,20 @@ inputRef, notify, onChange, onUploadFile, name, isError, onView, generateDownloa
         },
     });
     const handleDelete = (fileId) => {
-        if (isMultiple) {
-            return onChange(files?.filter(({ id }) => id !== fileId));
+        const deleteFile = () => {
+            if (isMultiple) {
+                return onChange(files?.filter(({ id }) => id !== fileId));
+            }
+            return onChange(null);
+        };
+        if (!onDeleteFile) {
+            return deleteFile();
         }
-        return onChange(null);
+        setDeletingFileId(fileId);
+        onDeleteFile(fileId)
+            .then(deleteFile)
+            .catch(() => notify.error('Ошибка удаления файла'))
+            .finally(() => setDeletingFileId(null));
     };
     const getHandlerOnRetry = () => {
         if (onUploadFile) {
@@ -158,6 +169,7 @@ inputRef, notify, onChange, onUploadFile, name, isError, onView, generateDownloa
             selfFiles,
             setErrorStatusFile,
             getErrorMessage,
+            deletingFileId,
         },
     };
 };

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

@@ -117,6 +117,13 @@ export type UsePreviewFileUploaderParams = {
      * - При обновлении информации о файле после успешной загрузки
      */
     onChange: (value: UploadFile | null) => void;
+    /**
+     * Функция, вызываемая при удалении файла.
+     * Используется для сбора идентификаторов файлов, помеченных на удаление.
+     * Фактическое удаление файлов с сервера должно выполняться только при подтверждении формы,
+     * чтобы избежать потери данных при отмене действия или перезагрузке страницы.
+     */
+    onDeleteFile?: (fileId: FileId) => Promise<void>;
     /**
      * Скрытие персональных данных от инструментов мониторинга
      */
@@ -126,7 +133,7 @@ export type UsePreviewFileUploaderParams = {
      */
     PdfViewer?: ((props: PdfViewerProps) => ReactElement) | LazyExoticComponent<(props: PdfViewerProps) => ReactElement>;
 };
-export declare const usePreviewFileUploader: ({ value, isDisabled, accept, restrictions, maxFileSize, inputRef, notify, onChange, onUploadFile, label, isError, generateDownloadLink, onView, name, helperText, className, placeholder, placeholderImgSrc, isHidePersonalData, PdfViewer, }: UsePreviewFileUploaderParams) => {
+export declare const usePreviewFileUploader: ({ value, isDisabled, accept, restrictions, maxFileSize, inputRef, notify, onChange, onUploadFile, onDeleteFile, label, isError, generateDownloadLink, onView, name, helperText, className, placeholder, placeholderImgSrc, isHidePersonalData, PdfViewer, }: UsePreviewFileUploaderParams) => {
     dropZoneProps: {
         isVisibleAddFile: boolean;
         isVisibleFileList: boolean;
@@ -165,7 +172,7 @@ export declare const usePreviewFileUploader: ({ value, isDisabled, accept, restr
         isError: boolean | undefined;
     };
     fileListProps: {
-        onDelete: () => void;
+        onDelete: (fileId: FileId) => void;
         onRetry: ((fileId: FileId, file: File) => void) | undefined;
         setErrorStatusFile: (fileId: string, errorMsg: string) => void;
         selfFiles: Record<string, UploadFile & import("../../types").SpecificSelfFileParams>;
@@ -174,5 +181,6 @@ export declare const usePreviewFileUploader: ({ value, isDisabled, accept, restr
         files: UploadFile[];
         isHidePersonalData: boolean | undefined;
         PdfViewer: LazyExoticComponent<(props: PdfViewerProps) => ReactElement> | ((props: PdfViewerProps) => ReactElement) | undefined;
+        deletingFileId: string | null;
     };
 };

package/node/components/fileUploading/hooks/usePreviewFileUploader/usePreviewFileUploader.js

@@ -13,8 +13,9 @@ const rulePipe_1 = require("../../utils/rulePipe");
 const toArray_1 = require("../../utils/toArray");
 const useDnD_1 = require("../useDnD");
 const useUploadFiles_1 = require("../useUploadFiles");
-const usePreviewFileUploader = ({ value, isDisabled, accept, restrictions = [], maxFileSize, inputRef, notify, onChange, onUploadFile, label, isError, generateDownloadLink, onView, name, helperText, className, placeholder, placeholderImgSrc, isHidePersonalData, PdfViewer, }) => {
+const usePreviewFileUploader = ({ value, isDisabled, accept, restrictions = [], maxFileSize, inputRef, notify, onChange, onUploadFile, onDeleteFile, label, isError, generateDownloadLink, onView, name, helperText, className, placeholder, placeholderImgSrc, isHidePersonalData, PdfViewer, }) => {
     const inputId = (0, useId_1.useId)();
+    const [deletingFileId, setDeletingFileId] = (0, react_1.useState)(null);
     const { generateId } = (0, useGenerateLocalId_1.useGenerateLocalId)();
     // Преобразуем value к массиву
     const files = (0, react_1.useMemo)(() => (0, toArray_1.toArray)(value), [value]);
@@ -83,8 +84,16 @@ const usePreviewFileUploader = ({ value, isDisabled, accept, restrictions = [],
             });
         },
     });
-    const handleDelete = () => {
-        return onChange(null);
+    const handleDelete = (fileId) => {
+        const deleteFile = () => onChange(null);
+        if (!onDeleteFile) {
+            return deleteFile();
+        }
+        setDeletingFileId(fileId);
+        onDeleteFile(fileId)
+            .then(deleteFile)
+            .catch(() => notify.error('Ошибка удаления файла'))
+            .finally(() => setDeletingFileId(null));
     };
     const getHandlerOnRetry = () => {
         if (onUploadFile) {
@@ -138,6 +147,7 @@ const usePreviewFileUploader = ({ value, isDisabled, accept, restrictions = [],
             files,
             isHidePersonalData,
             PdfViewer,
+            deletingFileId,
         },
     };
 };

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

@@ -188,6 +188,13 @@ type BaseFileUploaderProps = {
         signal: AbortSignal;
         setProgress: (progressFileId: FileId, progressEvent: ProgressEvent) => void;
     }) => Promise<UploadedFileData>;
+    /**
+     * Функция, вызываемая при удалении файла.
+     * Используется для сбора идентификаторов файлов, помеченных на удаление.
+     * Фактическое удаление файлов с сервера должно выполняться только при подтверждении формы,
+     * чтобы избежать потери данных при отмене действия или перезагрузке страницы.
+     */
+    onDeleteFile?: (fileId: FileId) => Promise<void>;
     /**
      * Обработчик просмотра файла
      * @param fileId - Идентификатор файла

package/package.json

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

package/hook-form/FormFileUploader/faker.d.ts

@@ -1,2 +0,0 @@
-import { type AxiosRequestConfig } from 'axios';
-export declare const fakeFileUploadQuery: (formData: FormData, options?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any, {}>>;

package/hook-form/FormFileUploader/faker.js

@@ -1,37 +0,0 @@
-import axios from 'axios';
-import AxiosMockAdapter from 'axios-mock-adapter';
-let globalId = 0;
-const generateId = () => {
-    globalId += 1;
-    return globalId;
-};
-const progressSteps = Array.from({ length: 10 }, (_, i) => (i + 1) / 10);
-const getRandomDelay = () => Math.random() * 300 + 200; // 200-500ms
-const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
-const mock = new AxiosMockAdapter(axios);
-mock.onPost('/api/upload').reply(async (config) => {
-    const response = {
-        id: `upl-${generateId()}`,
-    };
-    const formData = config.data;
-    const file = formData.get('file');
-    const total = file.size;
-    for (const progress of progressSteps) {
-        await sleep(getRandomDelay());
-        if (config.onUploadProgress) {
-            config.onUploadProgress({
-                loaded: Math.floor(total * progress),
-                total,
-                lengthComputable: true,
-                bytes: Math.floor(total * progress),
-            });
-        }
-    }
-    return [200, response];
-});
-export const fakeFileUploadQuery = (formData, options) => axios.post('/api/upload', formData, {
-    headers: {
-        'Content-Type': 'multipart/form-data',
-    },
-    ...(options || {}),
-});

package/hook-form/FormPreviewFileUploader/faker.d.ts

@@ -1,2 +0,0 @@
-import { type AxiosRequestConfig } from 'axios';
-export declare const fakePreviewFileUploadQuery: (formData: FormData, options?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any, {}>>;

package/hook-form/FormPreviewFileUploader/faker.js

@@ -1,37 +0,0 @@
-import axios from 'axios';
-import AxiosMockAdapter from 'axios-mock-adapter';
-let globalId = 0;
-const generateId = () => {
-    globalId += 1;
-    return globalId;
-};
-const progressSteps = Array.from({ length: 10 }, (_, i) => (i + 1) / 10);
-const getRandomDelay = () => Math.random() * 300 + 200; // 200-500ms
-const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
-const mock = new AxiosMockAdapter(axios);
-mock.onPost('/api/upload').reply(async (config) => {
-    const response = {
-        id: `upl-${generateId()}`,
-    };
-    const formData = config.data;
-    const file = formData.get('file');
-    const total = file.size;
-    for (const progress of progressSteps) {
-        await sleep(getRandomDelay());
-        if (config.onUploadProgress) {
-            config.onUploadProgress({
-                loaded: Math.floor(total * progress),
-                total,
-                lengthComputable: true,
-                bytes: Math.floor(total * progress),
-            });
-        }
-    }
-    return [200, response];
-});
-export const fakePreviewFileUploadQuery = (formData, options) => axios.post('/api/upload', formData, {
-    headers: {
-        'Content-Type': 'multipart/form-data',
-    },
-    ...(options || {}),
-});

package/node/hook-form/FormFileUploader/faker.d.ts

@@ -1,2 +0,0 @@
-import { type AxiosRequestConfig } from 'axios';
-export declare const fakeFileUploadQuery: (formData: FormData, options?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any, {}>>;

package/node/hook-form/FormFileUploader/faker.js

@@ -1,44 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fakeFileUploadQuery = void 0;
-const axios_1 = __importDefault(require("axios"));
-const axios_mock_adapter_1 = __importDefault(require("axios-mock-adapter"));
-let globalId = 0;
-const generateId = () => {
-    globalId += 1;
-    return globalId;
-};
-const progressSteps = Array.from({ length: 10 }, (_, i) => (i + 1) / 10);
-const getRandomDelay = () => Math.random() * 300 + 200; // 200-500ms
-const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
-const mock = new axios_mock_adapter_1.default(axios_1.default);
-mock.onPost('/api/upload').reply(async (config) => {
-    const response = {
-        id: `upl-${generateId()}`,
-    };
-    const formData = config.data;
-    const file = formData.get('file');
-    const total = file.size;
-    for (const progress of progressSteps) {
-        await sleep(getRandomDelay());
-        if (config.onUploadProgress) {
-            config.onUploadProgress({
-                loaded: Math.floor(total * progress),
-                total,
-                lengthComputable: true,
-                bytes: Math.floor(total * progress),
-            });
-        }
-    }
-    return [200, response];
-});
-const fakeFileUploadQuery = (formData, options) => axios_1.default.post('/api/upload', formData, {
-    headers: {
-        'Content-Type': 'multipart/form-data',
-    },
-    ...(options || {}),
-});
-exports.fakeFileUploadQuery = fakeFileUploadQuery;

package/node/hook-form/FormPreviewFileUploader/faker.d.ts

@@ -1,2 +0,0 @@
-import { type AxiosRequestConfig } from 'axios';
-export declare const fakePreviewFileUploadQuery: (formData: FormData, options?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any, {}>>;

package/node/hook-form/FormPreviewFileUploader/faker.js

@@ -1,44 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fakePreviewFileUploadQuery = void 0;
-const axios_1 = __importDefault(require("axios"));
-const axios_mock_adapter_1 = __importDefault(require("axios-mock-adapter"));
-let globalId = 0;
-const generateId = () => {
-    globalId += 1;
-    return globalId;
-};
-const progressSteps = Array.from({ length: 10 }, (_, i) => (i + 1) / 10);
-const getRandomDelay = () => Math.random() * 300 + 200; // 200-500ms
-const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
-const mock = new axios_mock_adapter_1.default(axios_1.default);
-mock.onPost('/api/upload').reply(async (config) => {
-    const response = {
-        id: `upl-${generateId()}`,
-    };
-    const formData = config.data;
-    const file = formData.get('file');
-    const total = file.size;
-    for (const progress of progressSteps) {
-        await sleep(getRandomDelay());
-        if (config.onUploadProgress) {
-            config.onUploadProgress({
-                loaded: Math.floor(total * progress),
-                total,
-                lengthComputable: true,
-                bytes: Math.floor(total * progress),
-            });
-        }
-    }
-    return [200, response];
-});
-const fakePreviewFileUploadQuery = (formData, options) => axios_1.default.post('/api/upload', formData, {
-    headers: {
-        'Content-Type': 'multipart/form-data',
-    },
-    ...(options || {}),
-});
-exports.fakePreviewFileUploadQuery = fakePreviewFileUploadQuery;