@manuscripts/style-guide 1.3.2-LEAN-2859-1 → 1.3.2-LEAN-2880-1

package/dist/es/components/FileManager/{FileUploader.js → UploadFileArea.js}

@@ -1,35 +1,27 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import React, { useCallback, useRef } from 'react';
 import { useDrop } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
 import styled, { css } from 'styled-components';
-export const FileUploader = ({ handler }) => {
+import { actions } from './FileSectionState';
+export const UploadFileArea = ({ fileSection, dispatch }) => {
     const fileInputRef = useRef(null);
     const openFileDialog = () => {
         if (fileInputRef && fileInputRef.current) {
             fileInputRef.current.click();
         }
     };
-    const handleChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleChange = (event) => {
         if (event && event.target && event.target.files) {
             const file = event.target.files[0];
-            yield handler(file);
+            dispatch(actions.UPLOAD_FILE(file, fileSection));
         }
-    });
-    const handleFileDrop = useCallback((monitor) => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const handleFileDrop = useCallback((monitor) => {
         if (monitor) {
             const file = monitor.getItem().files[0];
-            yield handler(file);
+            dispatch(actions.UPLOAD_FILE(file, fileSection));
         }
-    }), [handler]);
+    }, [dispatch, fileSection]);
     const [{ canDrop, isOver }, dropRef] = useDrop({
         accept: [NativeTypes.FILE],
         drop(item, monitor) {
@@ -63,7 +55,8 @@ const Container = styled.div `
   font-family: ${(props) => props.theme.font.family.Lato};
   color: ${(props) => props.theme.colors.text.onLight};
   cursor: pointer;
-  margin: 16px 16px 8px;
+  margin-bottom: 7px;
+  margin-top: 16px;
   ${(props) => props.active
     ? css `
           ${activeBoxStyle}

package/dist/es/components/FileManager/util.js

@@ -13,9 +13,9 @@ import UnknownFormatFileIcon from '../icons/unknown-format-file-icon';
 import VideoIcon from '../icons/video-icon';
 export var FileSectionType;
 (function (FileSectionType) {
-    FileSectionType["Inline"] = "Inline files";
-    FileSectionType["Supplements"] = "Supplements";
-    FileSectionType["OtherFile"] = "Other files";
+    FileSectionType[FileSectionType["Inline"] = 0] = "Inline";
+    FileSectionType[FileSectionType["Supplements"] = 1] = "Supplements";
+    FileSectionType[FileSectionType["OtherFile"] = 2] = "OtherFile";
 })(FileSectionType || (FileSectionType = {}));
 export var FileType;
 (function (FileType) {
@@ -68,42 +68,78 @@ export const extensionsWithFileTypesMap = new Map([
     ['tgz', FileType.CompressedFile],
     ['txt', FileType.PlainText],
 ]);
+export const fileTypesWithTitlesMap = new Map([
+    [FileType.Image, 'Image'],
+    [FileType.Audio, 'Audio'],
+    [FileType.Video, 'Video'],
+    [FileType.PlainDocument, 'Doc'],
+    [FileType.SheetsWorkbooks, 'Table'],
+    [FileType.Latex, 'Doc'],
+    [FileType.CodeFile, 'Code File'],
+    [FileType.PdfFile, 'Doc'],
+    [FileType.CompressedFile, 'Compressed File'],
+    [FileType.PlainText, 'Plain Text'],
+    [undefined, 'Unknown'],
+]);
 export const fileTypesWithIconMap = new Map([
-    [FileType.Audio, React.createElement(AudioIcon, { key: FileType.Audio, className: "file-icon" })],
-    [FileType.Video, React.createElement(VideoIcon, { key: FileType.Video, className: "file-icon" })],
+    [FileType.Audio, React.createElement(AudioIcon, { key: FileType.Audio })],
+    [FileType.Video, React.createElement(VideoIcon, { key: FileType.Video })],
     [
         FileType.PlainDocument,
-        React.createElement(DocumentIcon, { key: FileType.PlainDocument, color: "#1A9BC7", className: "file-icon" }),
-    ],
-    [
-        FileType.SheetsWorkbooks,
-        React.createElement(TableIcon, { key: FileType.SheetsWorkbooks, className: "file-icon" }),
-    ],
-    [
-        FileType.Latex,
-        React.createElement(LatexIcon, { key: FileType.Latex, color: "#1A9BC7", className: "file-icon" }),
-    ],
-    [
-        FileType.CodeFile,
-        React.createElement(CodeFileIcon, { key: FileType.CodeFile, className: "file-icon" }),
-    ],
-    [
-        FileType.PdfFile,
-        React.createElement(PdfFileIcon, { key: FileType.PdfFile, className: "file-icon" }),
+        React.createElement(DocumentIcon, { key: FileType.PlainDocument, color: "#1A9BC7" }),
     ],
+    [FileType.SheetsWorkbooks, React.createElement(TableIcon, { key: FileType.SheetsWorkbooks })],
+    [FileType.Latex, React.createElement(LatexIcon, { key: FileType.Latex, color: "#1A9BC7" })],
+    [FileType.CodeFile, React.createElement(CodeFileIcon, { key: FileType.CodeFile })],
+    [FileType.PdfFile, React.createElement(PdfFileIcon, { key: FileType.PdfFile })],
     [
         FileType.CompressedFile,
-        React.createElement(CompressedFileIcon, { key: FileType.CompressedFile, className: "file-icon" }),
+        React.createElement(CompressedFileIcon, { key: FileType.CompressedFile }),
     ],
     [
         FileType.PlainText,
-        React.createElement(DocumentIcon, { key: FileType.PlainText, color: "#FFBD26", className: "file-icon" }),
+        React.createElement(DocumentIcon, { key: FileType.PlainText, color: "#FFBD26" }),
     ],
-    [FileType.Image, React.createElement(ImageIcon, { key: FileType.Image, className: "file-icon" })],
-    [FileType.Figure, React.createElement(FigureIcon, { key: FileType.Figure, className: "file-icon" })],
+    [FileType.Image, React.createElement(ImageIcon, { key: FileType.Image })],
+    [FileType.Figure, React.createElement(FigureIcon, { key: FileType.Figure })],
     [
         FileType.GraphicalAbstract,
-        React.createElement(GraphicalAbstractIcon, { key: FileType.GraphicalAbstract, className: "file-icon" }),
+        React.createElement(GraphicalAbstractIcon, { key: FileType.GraphicalAbstract }),
     ],
-    [undefined, React.createElement(UnknownFormatFileIcon, { key: undefined, className: "file-icon" })],
+    [undefined, React.createElement(UnknownFormatFileIcon, { key: undefined })],
 ]);
+export const generateAttachmentsTitles = (externalFiles, fileSectionType) => {
+    const titleCountersMap = new Map();
+    const externalFilesWithTitlesMap = new Map();
+    externalFiles.forEach((element) => {
+        const fileExtension = element.name.substring(element.name.lastIndexOf('.') + 1);
+        const fileType = extensionsWithFileTypesMap.get(fileExtension.toLowerCase());
+        const fileTitle = fileTypesWithTitlesMap.get(fileType);
+        if (fileSectionType === FileSectionType.Inline) {
+            externalFilesWithTitlesMap.set(element.name, element);
+        }
+        else {
+            if (fileTitle !== undefined) {
+                const oldCount = titleCountersMap.get(fileTitle);
+                if (oldCount) {
+                    const newCount = oldCount + 1;
+                    titleCountersMap.set(fileTitle, newCount);
+                    externalFilesWithTitlesMap.set(`${fileTitle} ${newCount}`, element);
+                }
+                else {
+                    titleCountersMap.set(fileTitle, 1);
+                    externalFilesWithTitlesMap.set(`${fileTitle} 1`, element);
+                }
+            }
+        }
+    });
+    const result = Array.from(externalFilesWithTitlesMap, ([key, value]) => ({
+        title: key,
+        externalFile: value,
+    }));
+    return result;
+};
+export const droppableSections = [
+    FileSectionType.Supplements,
+    FileSectionType.OtherFile,
+];

package/dist/es/components/icons/document-icon-with-dot.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-const DocumentIconWithDot = (props) => (React.createElement("svg", { className: props.className, width: "28", height: "33", style: { marginLeft: -7, marginTop: -4 }, viewBox: "0 0 28 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-for": "dot", "data-tip": true },
+const DocumentIconWithDot = (props) => (React.createElement("svg", { width: "28", height: "33", viewBox: "0 0 28 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-for": "dot", "data-tip": true },
     React.createElement("rect", { x: "9", y: "9.71973", width: "18", height: "22", rx: "2", stroke: "#1A9BC7", strokeWidth: "2" }),
     React.createElement("rect", { x: "13.167", y: "14.0771", width: "5.66667", height: "1.14286", rx: "0.5", fill: "#1A9BC7", stroke: "#1A9BC7" }),
     React.createElement("rect", { x: "13.167", y: "19.791", width: "9.66667", height: "1.14286", rx: "0.5", fill: "#1A9BC7", stroke: "#1A9BC7" }),

package/dist/es/hooks/use-files.js

@@ -1,20 +1,46 @@
-import { getInlineFiles, getSupplements, } from '../lib/files';
+import { ObjectTypes } from '@manuscripts/json-schema';
+import { getModelsByType } from '@manuscripts/transform';
+import getInlineFiles from '../lib/inlineFiles';
 import { useDeepCompareMemo } from './use-deep-compare';
-const getOtherFiles = (inlineFiles, supplements, files, filter) => {
-    const excluded = new Set();
-    inlineFiles.flatMap((f) => f.files).forEach((f) => excluded.add(f.id));
-    supplements.forEach((s) => excluded.add(s.id));
-    return files.filter((f) => !excluded.has(f.id) && (!filter || filter(f)));
+const getInlineFilesIds = (inlineFiles) => {
+    return inlineFiles
+        .map(({ attachments }) => (attachments === null || attachments === void 0 ? void 0 : attachments.map(({ id }) => ({ id }))) || [])
+        .flat();
 };
-export const useFiles = (modelMap, files, filter) => useDeepCompareMemo(() => {
-    const inlineFiles = getInlineFiles(modelMap, files);
-    const supplements = getSupplements(modelMap, files);
-    const otherFiles = getOtherFiles(inlineFiles, supplements, files, filter);
-    console.log('useFiles called');
+const getSupplementFiles = (modelMap, inlineFiles, attachments, filePredicate) => {
+    const supplements = new Map(getModelsByType(modelMap, ObjectTypes.Supplement).map((supplement) => { var _a; return [(_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''), supplement]; }));
+    const excludedAttachmentsIds = new Set(getInlineFilesIds(inlineFiles).map(({ id }) => id));
+    return attachments.filter((attachment) => {
+        if (supplements.has(attachment.id) && filePredicate) {
+            return (!excludedAttachmentsIds.has(attachment.id) &&
+                filePredicate(attachment.name));
+        }
+        else {
+            return (!excludedAttachmentsIds.has(attachment.id) &&
+                supplements.has(attachment.id));
+        }
+    });
+};
+const getOtherFiles = (inlineFiles, supplementFiles, attachments, filePredicate) => {
+    const inlineFilesAttachmentIds = getInlineFilesIds(inlineFiles);
+    const excludedAttachmentsIds = new Set([...inlineFilesAttachmentIds, ...supplementFiles].map(({ id }) => id));
+    return attachments.filter(({ id, name }) => {
+        if (!excludedAttachmentsIds.has(id) && filePredicate) {
+            return filePredicate(name);
+        }
+        else {
+            return !excludedAttachmentsIds.has(id);
+        }
+    });
+};
+export const useFiles = (modelMap, attachments, filePredicate) => useDeepCompareMemo(() => {
+    const inlineFiles = getInlineFiles(modelMap, attachments);
+    const supplementFiles = getSupplementFiles(modelMap, inlineFiles, attachments, filePredicate);
+    const otherFiles = getOtherFiles(inlineFiles, supplementFiles, attachments, filePredicate);
     return {
-        inlineFiles,
-        supplements,
         otherFiles,
+        supplementFiles,
+        inlineFiles,
     };
-}, [...Array.from(modelMap.values()), ...files]);
+}, [...Array.from(modelMap.values()), ...attachments]);
 export default useFiles;

package/dist/es/index.js

@@ -31,6 +31,7 @@ export * from './components/Checkbox';
 export * from './components/Form';
 export * from './components/FileManager';
 export * from './components/FileManager/util';
+export * from './components/FileManager/FileSectionItem/FileSectionItem';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
 export * from './components/SimpleModal';
@@ -48,11 +49,10 @@ export * from './components/NavDropdown';
 export * from './components/SubmissionInspector';
 export * from './components/Dropdown';
 export * from './hooks/use-dropdown';
-export * from './hooks/use-files';
+export { useFiles } from './hooks/use-files';
 export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';
 export * from './lib/authors';
 export * from './lib/capabilities';
-export * from './lib/files';
 export { default as errorsDecoder } from './lib/errors-decoder';
 export * from './types';
 export * from './components/LoadingOverlay';

package/dist/es/lib/inlineFiles.js

@@ -0,0 +1,90 @@
+import { ObjectTypes, } from '@manuscripts/json-schema';
+import { hasObjectType } from '@manuscripts/transform';
+import { FileType } from '../components/FileManager/util';
+const getFigureData = (element, modelMap, attachmentsMap) => {
+    const attachments = [];
+    element.containedObjectIDs.map((id) => {
+        const object = modelMap.get(id);
+        if (object && object.objectType === ObjectTypes.Figure) {
+            const figure = object;
+            if (figure.src) {
+                const attachment = attachmentsMap.get(figure.src.replace('attachment:', ''));
+                if (attachment) {
+                    attachment.modelId = id;
+                    attachments.push(attachment);
+                }
+            }
+        }
+    });
+    return {
+        id: element._id,
+        attachments,
+    };
+};
+export default (modelMap, attachments) => {
+    const files = [];
+    const attachmentsMap = new Map(attachments.map((attachment) => [attachment.id, attachment]));
+    const { graphicalAbstractFigureId, figureElement } = getAuxiliaryObjects(modelMap);
+    if (graphicalAbstractFigureId) {
+        const element = modelMap.get(graphicalAbstractFigureId);
+        files.unshift(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Graphical Abstract`, type: FileType.GraphicalAbstract }));
+    }
+    figureElement.map((id, index) => {
+        const element = modelMap.get(id);
+        files.push(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Figure ${index + 1}`, type: FileType.Figure }));
+    });
+    return files;
+};
+const getAuxiliaryObjects = (modelMap) => {
+    var _a, _b;
+    let graphicalAbstractFigureId, figureElementIds = [];
+    const tableElementIds = [], orderObjects = {};
+    for (const model of modelMap.values()) {
+        switch (model.objectType) {
+            case ObjectTypes.Section: {
+                const section = model;
+                if (section.category === 'MPSectionCategory:abstract-graphical') {
+                    graphicalAbstractFigureId = (_a = section.elementIDs) === null || _a === void 0 ? void 0 : _a.find((id) => {
+                        const obj = modelMap.get(id);
+                        return obj && hasObjectType(ObjectTypes.FigureElement)(obj);
+                    });
+                }
+                else {
+                    (_b = section.elementIDs) === null || _b === void 0 ? void 0 : _b.map((elementId) => {
+                        const element = modelMap.get(elementId);
+                        if (!element) {
+                            return;
+                        }
+                        switch (element.objectType) {
+                            case ObjectTypes.FigureElement:
+                                figureElementIds.push(element._id);
+                                break;
+                            case ObjectTypes.TableElement:
+                                tableElementIds.push(element._id);
+                                break;
+                        }
+                    });
+                }
+                break;
+            }
+            case ObjectTypes.ElementsOrder: {
+                const elementsOrder = model;
+                orderObjects[elementsOrder.elementType] = elementsOrder;
+            }
+        }
+    }
+    if (graphicalAbstractFigureId) {
+        figureElementIds = figureElementIds.filter((id) => id != graphicalAbstractFigureId);
+    }
+    return {
+        graphicalAbstractFigureId,
+        figureElement: sortAuxiliaryObject(figureElementIds, orderObjects[ObjectTypes.FigureElement]),
+        tableElement: sortAuxiliaryObject(tableElementIds, orderObjects[ObjectTypes.TableElement]),
+    };
+};
+const sortAuxiliaryObject = (auxiliaryObjectIds, orderObject) => {
+    if (!orderObject) {
+        return auxiliaryObjectIds;
+    }
+    return auxiliaryObjectIds.sort((a, b) => orderObject.elements.indexOf(a) - orderObject.elements.indexOf(b));
+};

package/dist/types/components/FileManager/ConfirmationPopUp.d.ts

@@ -0,0 +1,12 @@
+import React, { Dispatch } from 'react';
+import { Action } from './FileSectionState';
+export declare const ConfirmationPopUp: React.FC<{
+    popupHeader: string;
+    popUpMessage: string;
+    isOpen: boolean;
+    handleClose: () => void;
+    handleMove: () => void;
+}>;
+export declare const MoveFilePopup: React.FC<{
+    dispatch: Dispatch<Action>;
+}>;

package/dist/types/components/FileManager/DragItemArea.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const DragItemArea: React.FC<{
+    text: string;
+}>;

package/dist/types/components/FileManager/FileManager.d.ts

@@ -1,31 +1,22 @@
 import { Model } from '@manuscripts/json-schema';
 import { Build } from '@manuscripts/transform';
 import React from 'react';
-import { FileSectionType } from '../../index';
 import { Capabilities } from '../../lib/capabilities';
-import { FileAttachment } from '../../lib/files';
-export type Upload = (file: File) => Promise<FileAttachment>;
-export type Download = (file: FileAttachment) => void;
-export type PreviewLink = (file: FileAttachment) => string | undefined;
-export type Replace = (file: File) => Promise<void>;
-export type Move = {
-    sectionType: FileSectionType;
-    handler: () => Promise<void>;
-};
+import { FileAttachment } from './FileSectionItem/FileSectionItem';
+export type Upload = (file: File) => Promise<boolean | FileAttachment | undefined>;
+export type Replace = (attachmentId: string, name: string, file: File) => Promise<boolean | FileAttachment | undefined>;
 export interface FileManagement {
+    getAttachments: () => FileAttachment[];
     upload: Upload;
-    download: Download;
-    previewLink: PreviewLink;
+    replace: Replace;
 }
-export type SaveModel = <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
-export type DeleteModel = (id: string) => Promise<string>;
 export declare const PermissionsContext: React.Context<Capabilities | null>;
 export declare const FileManager: React.FC<{
-    files: FileAttachment[];
     fileManagement: FileManagement;
     modelMap: Map<string, Model>;
-    saveModel: SaveModel;
-    deleteModel: DeleteModel;
+    saveModel: <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
+    deleteModel: (id: string) => Promise<string>;
     enableDragAndDrop: boolean;
     can: Capabilities;
+    addAttachmentToState?: (a: FileAttachment) => void;
 }>;

package/dist/types/components/FileManager/FileManagerProvider.d.ts

@@ -1,15 +1,25 @@
 import { Model } from '@manuscripts/json-schema';
-import React from 'react';
-import { DeleteModel, FileManagement, SaveModel } from './FileManager';
+import { Build } from '@manuscripts/transform';
+import React, { Dispatch, SetStateAction } from 'react';
+import { FileAttachment } from './FileSectionItem/FileSectionItem';
+import { FileSectionType } from './util';
+type MoveFilePopup = {
+    isOpen: boolean;
+    fileSection?: FileSectionType;
+    attachmentId?: string;
+};
 export declare const FileManagerContext: React.Context<{
-    saveModel: SaveModel;
-    deleteModel: DeleteModel;
+    saveModel: <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
+    deleteModel: (id: string) => Promise<string>;
     modelMap: Map<string, Model>;
-    fileManagement: FileManagement;
+    getAttachments: () => FileAttachment[];
+    moveFilePopup: MoveFilePopup;
+    setMoveFilePopupData: Dispatch<SetStateAction<MoveFilePopup>>;
 }>;
 export declare const FileManagerProvider: React.FC<{
-    saveModel: SaveModel;
-    deleteModel: DeleteModel;
+    saveModel: <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
+    deleteModel: (id: string) => Promise<string>;
     modelMap: Map<string, Model>;
-    fileManagement: FileManagement;
+    getAttachments: () => FileAttachment[];
 }>;
+export {};

package/dist/types/components/FileManager/FileSectionItem/DraggableFileSectionItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FileSectionItemProps } from './FileSectionItem';
+export declare const DraggableFileSectionItem: React.FC<FileSectionItemProps>;

package/dist/types/components/FileManager/FileSectionItem/FileInfo.d.ts

@@ -0,0 +1,19 @@
+import React, { Dispatch } from 'react';
+import { Action } from '../FileSectionState';
+export declare const FileInfo: React.FC<{
+    showAttachmentName: boolean;
+    title: string;
+    fileAttachmentName: string;
+    fileExtension: string;
+    attachmentId: string;
+    fileCreatedDate: Date;
+    dispatch?: Dispatch<Action>;
+}>;
+export declare const FileDateContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileInfoContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileNameTitleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileNameContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileName: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileDescription: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/FileManager/FileSectionItem/FileSectionItem.d.ts

@@ -0,0 +1,38 @@
+import React, { CSSProperties, Dispatch } from 'react';
+import { DragElementWrapper, DragSourceOptions } from 'react-dnd';
+import { Maybe } from '../../SubmissionInspector/types';
+import { Replace } from '../FileManager';
+import { Action } from '../FileSectionState';
+import { FileSectionType } from '../util';
+export type FileAttachment = {
+    id: string;
+    name: string;
+    type: FileAttachmentType;
+    link: string;
+    createdDate: Date;
+};
+export type FileAttachmentType = {
+    id: string;
+    label?: Maybe<string> | undefined;
+};
+export interface FileSectionItemProps {
+    externalFile: FileAttachment;
+    fileSection: FileSectionType;
+    title: string;
+    showAttachmentName?: boolean;
+    showActions?: boolean;
+    showReplaceAction?: boolean;
+    handleDownload?: (url: string) => void;
+    handleReplace?: Replace;
+    handleSupplementReplace?: (attachment: FileAttachment, oldAttachmentId: string) => void;
+    dispatch?: Dispatch<Action>;
+    dragRef?: DragElementWrapper<DragSourceOptions>;
+    className?: string;
+    style?: CSSProperties;
+    onClose?: () => void;
+    isEditor?: boolean;
+}
+export declare const FileSectionItem: React.FC<FileSectionItemProps>;
+export declare const ActionsIcon: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const Item: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/FileManager/FileSectionItem/FileSectionUploadItem.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+import { DragElementWrapper, DragSourceOptions } from 'react-dnd';
+export interface FileSectionItemProps {
+    fileName: string;
+    isLoading: boolean;
+    dragRef?: DragElementWrapper<DragSourceOptions>;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const FileSectionUploadItem: React.FC<FileSectionItemProps>;
+export declare const UploadItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ProgressBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/FileManager/{FileTypeIcon.d.ts → FileSectionItem/FileTypeIcon.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FileAttachment } from '../../lib/files';
 export declare const FileTypeIcon: React.FC<{
-    file: FileAttachment;
+    withDot: boolean;
+    fileExtension?: string;
+    alt?: string;
 }>;

package/dist/types/components/FileManager/FileSectionItem/ItemActions.d.ts

@@ -0,0 +1,21 @@
+import React, { Dispatch } from 'react';
+import { Replace } from '../FileManager';
+import { Action } from '../FileSectionState';
+import { FileSectionType } from '../util';
+import { FileAttachment } from './FileSectionItem';
+export declare const ItemActions: React.FC<{
+    fileSection: FileSectionType;
+    isMainManuscript?: boolean;
+    downloadAttachmentHandler: (url: string) => void;
+    replaceAttachmentHandler: Replace;
+    detachAttachmnetHandler?: () => void;
+    handleUpdateInline?: (attachment: FileAttachment) => void;
+    handleSupplementReplace?: (attachment: FileAttachment, oldAttachmentId: string) => void;
+    attachmentId: string;
+    fileName: string;
+    publicUrl: string | undefined;
+    hideActionList: (e?: React.MouseEvent) => void;
+    dispatch?: Dispatch<Action>;
+    dropDownClassName?: string;
+    showReplaceAction?: boolean;
+}>;

package/dist/types/components/FileManager/FileSectionItem/ProgressBarUploadItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ProgressBarUploadItem: React.FC;
+export declare const LinearProgress: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Bar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/FileManager/FileSectionState.d.ts

@@ -0,0 +1,38 @@
+import { FileSectionType } from './util';
+export declare const getInitialState: () => State;
+export interface State {
+    uploadedFile: File | undefined;
+    isUploadFile: boolean;
+    moveToOtherState: {
+        typeId: string;
+        name: string;
+    } | undefined;
+    fileUploadedSuccessfullySection: FileSectionType | undefined;
+    successMessage: string;
+    isShowSuccessMessage: boolean;
+    currentSection: FileSectionType | undefined;
+}
+declare enum ActionTypes {
+    UPLOAD_FILE = "UploadFile",
+    MOVE_FILE = "moveFile",
+    HANDLE_CANCEL_UPLOAD = "handleCancel",
+    HANDLE_UPLOAD_ACTION = "handleUpload",
+    HANDLE_FINISH_UPLOAD = "handleFinishUpload",
+    HANDLE_SUCCESS_MESSAGE = "handleSuccessMessage",
+    HANDLE_SUCCESS_MESSAGE_DISMISS = "handleSuccessMessageDismiss"
+}
+export declare const reducer: (state: State, action: Action) => State;
+export interface Action {
+    type: ActionTypes;
+    [key: string]: any;
+}
+export declare const actions: {
+    UPLOAD_FILE: (uploadFile: File, sectionType: FileSectionType) => Action;
+    HANDLE_UPLOAD_ACTION: () => Action;
+    HANDLE_CANCEL_UPLOAD: () => Action;
+    MOVE_FILE: (attachmentId: string, typeId: string, name: string, successMoveMessage: string) => Action;
+    HANDLE_FINISH_UPLOAD: () => Action;
+    HANDLE_SUCCESS_MESSAGE: (successMessage: string, sectionType?: FileSectionType) => Action;
+    HANDLE_SUCCESS_MESSAGE_DISMISS: () => Action;
+};
+export {};

package/dist/types/components/FileManager/FilesSection.d.ts

@@ -0,0 +1,12 @@
+import React, { Dispatch } from 'react';
+import { Upload } from './FileManager';
+import { Action, State } from './FileSectionState';
+import { FileSectionType } from './util';
+export declare const FilesSection: React.FC<{
+    enableDragAndDrop: boolean;
+    handleUpload: Upload;
+    fileSection: FileSectionType;
+    filesItem: JSX.Element[];
+    dispatch: Dispatch<Action>;
+    state: State;
+}>;

package/dist/types/components/FileManager/InlineFilesSection.d.ts

@@ -1,6 +1,22 @@
-import React from 'react';
-import { ElementFiles } from '../../lib/files';
+import React, { Dispatch } from 'react';
+import { Replace } from './FileManager';
+import { FileAttachment } from './FileSectionItem/FileSectionItem';
+import { Action } from './FileSectionState';
+import { FileType } from './util';
 export declare const InlineFilesSection: React.FC<{
-    elements: ElementFiles[];
+    inlineFiles: {
+        id: string;
+        label: string;
+        type: FileType;
+        caption?: string;
+        attachments?: FileAttachment[];
+    }[];
+    handleReplace: Replace;
+    handleDownload: (url: string) => void;
+    handleUpdateInline?: (modelId: string, attachment: FileAttachment) => void;
+    handleDetachFile?: (attachmentLink: string, modelId: string) => void;
     isEditor: boolean;
+    dispatch: Dispatch<Action>;
 }>;
+export declare const FileDateContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;