@manuscripts/style-guide 1.13.12-LEAN-3771.0 → 1.13.12-LEAN-3645

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

@@ -0,0 +1,128 @@
+import React from 'react';
+import { FileAudioIcon, FileCodeIcon, FileCompressedIcon, FileDocumentIcon, FileFigureIcon, FileGraphicalAbstractIcon, FileImageIcon, FileLatexIcon, FilePdfIcon, FileTableIcon, FileUnknownIcon, FileVideoIcon, } from '../icons';
+export var FileSectionType;
+(function (FileSectionType) {
+    FileSectionType["Inline"] = "Inline files";
+    FileSectionType["Supplements"] = "Supplements";
+    FileSectionType["OtherFile"] = "Other files";
+})(FileSectionType || (FileSectionType = {}));
+export var FileType;
+(function (FileType) {
+    FileType[FileType["Image"] = 0] = "Image";
+    FileType[FileType["Audio"] = 1] = "Audio";
+    FileType[FileType["Video"] = 2] = "Video";
+    FileType[FileType["PlainDocument"] = 3] = "PlainDocument";
+    FileType[FileType["SheetsWorkbooks"] = 4] = "SheetsWorkbooks";
+    FileType[FileType["Latex"] = 5] = "Latex";
+    FileType[FileType["CodeFile"] = 6] = "CodeFile";
+    FileType[FileType["PdfFile"] = 7] = "PdfFile";
+    FileType[FileType["CompressedFile"] = 8] = "CompressedFile";
+    FileType[FileType["PlainText"] = 9] = "PlainText";
+    FileType[FileType["Figure"] = 10] = "Figure";
+    FileType[FileType["GraphicalAbstract"] = 11] = "GraphicalAbstract";
+})(FileType || (FileType = {}));
+const extension2type = new Map([
+    ['png', FileType.Image],
+    ['jpg', FileType.Image],
+    ['jpeg', FileType.Image],
+    ['jfif', FileType.Image],
+    ['gif', FileType.Image],
+    ['svg', FileType.Image],
+    ['tif', FileType.Image],
+    ['tiff', FileType.Image],
+    ['mp3', FileType.Audio],
+    ['wav', FileType.Audio],
+    ['wma', FileType.Audio],
+    ['flac', FileType.Audio],
+    ['avi', FileType.Video],
+    ['mp4', FileType.Video],
+    ['mov', FileType.Video],
+    ['wmv', FileType.Video],
+    ['doc', FileType.PlainDocument],
+    ['docx', FileType.PlainDocument],
+    ['rtf', FileType.PlainDocument],
+    ['xls', FileType.SheetsWorkbooks],
+    ['xlsx', FileType.SheetsWorkbooks],
+    ['xml', FileType.SheetsWorkbooks],
+    ['tex', FileType.Latex],
+    ['js', FileType.CodeFile],
+    ['py', FileType.CodeFile],
+    ['tsx', FileType.CodeFile],
+    ['html', FileType.CodeFile],
+    ['pdf', FileType.PdfFile],
+    ['zip', FileType.CompressedFile],
+    ['rar', FileType.CompressedFile],
+    ['arj', FileType.CompressedFile],
+    ['tar.gz', FileType.CompressedFile],
+    ['tgz', FileType.CompressedFile],
+    ['txt', FileType.PlainText],
+]);
+const type2icon = new Map([
+    [
+        FileType.Audio,
+        React.createElement(FileAudioIcon, { key: FileType.Audio, className: "file-icon" }),
+    ],
+    [
+        FileType.Video,
+        React.createElement(FileVideoIcon, { key: FileType.Video, className: "file-icon" }),
+    ],
+    [
+        FileType.PlainDocument,
+        React.createElement(FileDocumentIcon, { key: FileType.PlainDocument, color: "#1A9BC7", className: "file-icon" }),
+    ],
+    [
+        FileType.SheetsWorkbooks,
+        React.createElement(FileTableIcon, { key: FileType.SheetsWorkbooks, className: "file-icon" }),
+    ],
+    [
+        FileType.Latex,
+        React.createElement(FileLatexIcon, { key: FileType.Latex, color: "#1A9BC7", className: "file-icon" }),
+    ],
+    [
+        FileType.CodeFile,
+        React.createElement(FileCodeIcon, { key: FileType.CodeFile, className: "file-icon" }),
+    ],
+    [
+        FileType.PdfFile,
+        React.createElement(FilePdfIcon, { key: FileType.PdfFile, className: "file-icon" }),
+    ],
+    [
+        FileType.CompressedFile,
+        React.createElement(FileCompressedIcon, { key: FileType.CompressedFile, className: "file-icon" }),
+    ],
+    [
+        FileType.PlainText,
+        React.createElement(FileDocumentIcon, { key: FileType.PlainText, color: "#FFBD26", className: "file-icon" }),
+    ],
+    [
+        FileType.Image,
+        React.createElement(FileImageIcon, { key: FileType.Image, className: "file-icon" }),
+    ],
+    [
+        FileType.Figure,
+        React.createElement(FileFigureIcon, { key: FileType.Figure, className: "file-icon" }),
+    ],
+    [
+        FileType.GraphicalAbstract,
+        React.createElement(FileGraphicalAbstractIcon, { key: FileType.GraphicalAbstract, className: "file-icon" }),
+    ],
+    [undefined, React.createElement(FileUnknownIcon, { key: undefined, className: "file-icon" })],
+]);
+export const getFileType = (file) => {
+    const extension = getExtension(file.name);
+    return extension2type.get(extension.toLowerCase());
+};
+export const getFileIcon = (file) => {
+    const type = getFileType(file);
+    return type2icon.get(type);
+};
+export const getFileTypeIcon = (type) => {
+    return type2icon.get(type);
+};
+export const isImageFile = (file) => {
+    return getFileType(file) === FileType.Image;
+};
+const getExtension = (name) => {
+    const index = name.indexOf('.');
+    return index ? name.substring(index + 1) : '';
+};

package/dist/es/components/{TableFootnotesSelector.js → FootnotesSelector.js}

@@ -48,7 +48,7 @@ const AddNewFootnote = styled(ButtonGroup) `
     }
   }
 `;
-export const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel }) => {
+export const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, addNewLabel }) => {
     let selectedNotesMap;
     if (inlineFootnote) {
         const rids = inlineFootnote.attrs.rids;
@@ -75,17 +75,17 @@ export const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert,
     };
     return (React.createElement(Container, null,
         React.createElement(NotesContainer, null,
-            React.createElement(TableFootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
+            React.createElement(FootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
         React.createElement(Actions, null,
             React.createElement(AddNewFootnote, null,
                 React.createElement(IconTextButton, { onClick: onAdd },
                     React.createElement(AddNewIcon, null),
-                    "Add new")),
+                    addNewLabel || 'Add new')),
             React.createElement(ButtonGroup, null,
                 React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
                 React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
 };
-const TableFootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
+const FootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
     const selectedNotes = [];
     const remainingNotes = [];
     notes.forEach((note) => {
@@ -140,5 +140,5 @@ const NoteText = styled.div `
   color: ${(props) => props.theme.colors.text.primary};
   flex: 1;
   font-weight: ${(props) => props.theme.font.weight.normal};
-  margin-top: ${(props) => props.theme.grid.unit}px;
+  margin-top: 2px;
 `;

package/dist/es/components/InsertTableDialog.js

@@ -0,0 +1,100 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useState } from 'react';
+import Select from 'react-select';
+import styled from 'styled-components';
+import { CheckboxField, CheckboxLabel } from './Checkbox';
+import { Category, Dialog } from './Dialog';
+const Label = styled.div `
+  padding-right: 16px;
+  width: 150px;
+`;
+const SelectContainer = styled.div `
+  width: 182px;
+  height: 30px;
+`;
+const Container = styled.div `
+  display: flex;
+  align-items: center;
+  padding-bottom: 16px;
+`;
+const OptionWrapper = styled.div `
+  padding-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 2}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
+
+  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+export const InsertTableDialog = ({ run, open, onClose }) => {
+    const [numberOfColumns, setNumColumns] = useState({ value: 4, label: `4` });
+    const [numberOfRows, setNumRows] = useState({ value: 4, label: `4` });
+    const [includeHeader, setIncludeHeader] = useState(true);
+    const handleColumnChange = (newValue) => {
+        setNumColumns(newValue);
+    };
+    const handleRowChange = (newValue) => {
+        setNumRows(newValue);
+    };
+    const options = Array.from({ length: 20 }, (_, index) => ({
+        value: index + 1,
+        label: `${index + 1}`,
+    }));
+    const OptionComponent = ({ innerProps, data, }) => {
+        return (React.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
+    };
+    const insertTableDialogActions = {
+        primary: {
+            action: () => {
+                const tableConfig = {
+                    numberOfColumns: numberOfColumns.value,
+                    numberOfRows: numberOfRows.value,
+                    includeHeader,
+                };
+                run(tableConfig);
+                onClose();
+            },
+            title: 'Create table',
+        },
+        secondary: {
+            action: onClose,
+            title: 'Cancel',
+        },
+    };
+    return (React.createElement(Dialog, { isOpen: open, actions: insertTableDialogActions, category: Category.confirmation, header: 'Insert table', message: '' },
+        React.createElement(React.Fragment, null,
+            React.createElement(React.Fragment, null,
+                React.createElement(Container, null,
+                    React.createElement(Label, null, "Number of columns:"),
+                    React.createElement(SelectContainer, null,
+                        React.createElement(Select, { onChange: (newValue) => handleColumnChange(newValue), value: numberOfColumns, options: options, components: {
+                                Option: OptionComponent,
+                            }, menuPosition: "fixed", maxMenuHeight: 150 }))),
+                React.createElement(Container, null,
+                    React.createElement(Label, null, "Number of rows:"),
+                    React.createElement(SelectContainer, null,
+                        React.createElement(Select, { onChange: (newValue) => handleRowChange(newValue), value: numberOfRows, options: options, components: {
+                                Option: OptionComponent,
+                            }, menuPosition: "fixed", maxMenuHeight: 150 })))),
+            React.createElement(CheckboxLabel, null,
+                React.createElement(CheckboxField, { name: 'include-header', checked: includeHeader, onChange: (e) => {
+                        setIncludeHeader(e.target.checked);
+                    } }),
+                React.createElement("div", null, "Include header row")))));
+};

package/dist/es/components/Menus/Menus.js

@@ -16,6 +16,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Category, Dialog } from '../Dialog';
+import { InsertTableDialog } from '../InsertTableDialog';
 import { Submenu, SubmenusContainer, Text } from './Submenu';
 const MenusContainer = styled.div `
   display: flex;
@@ -40,6 +41,11 @@ const MenuContainer = styled.div `
 `;
 export const Menus = ({ menus, innerRef, handleClick, }) => {
     const [columnMenu, setColumnMenu] = useState(undefined);
+    const [openDialog, setOpenDialog] = useState(false);
+    const [indices, setIndices] = useState([]);
+    const toggleDialog = () => {
+        setOpenDialog(!openDialog);
+    };
     return (React.createElement(MenusContainer, { ref: innerRef },
         menus.map((menu, index) => {
             return (React.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
@@ -49,7 +55,17 @@ export const Menus = ({ menus, innerRef, handleClick, }) => {
                     }, isOpen: menu.isOpen },
                     React.createElement(Text, null, menu.label)),
                 menu.isEnabled && menu.isOpen && menu.submenu && (React.createElement(SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
-                    return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), setColumnMenu: setColumnMenu }));
+                    return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => {
+                            const indices = [index, sindex, ...i];
+                            if ('id' in submenu &&
+                                submenu.id === 'insert-table-element') {
+                                setIndices(indices);
+                                toggleDialog();
+                            }
+                            else {
+                                handleClick(indices);
+                            }
+                        }, setColumnMenu: setColumnMenu }));
                 })))));
         }),
         React.createElement(ColumnChangeWarningDialog, { isOpen: !!columnMenu, primaryAction: () => {
@@ -57,7 +73,8 @@ export const Menus = ({ menus, innerRef, handleClick, }) => {
                     columnMenu.run();
                     setColumnMenu(undefined);
                 }
-            }, secondaryAction: () => setColumnMenu(undefined) })));
+            }, secondaryAction: () => setColumnMenu(undefined) }),
+        openDialog && (React.createElement(InsertTableDialog, { run: (tableConfig) => handleClick(indices, tableConfig), open: openDialog, onClose: toggleDialog }))));
 };
 export const orderedListContextMenu = [
     { items: ['1.', '2.', '3.'], type: 'order' },

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

@@ -0,0 +1,35 @@
+import { ObjectTypes } from '@manuscripts/json-schema';
+import { getInlineFiles, getSupplements, } from '../lib/files';
+import { useDeepCompareMemo } from './use-deep-compare';
+const types = [
+    ObjectTypes.Section,
+    ObjectTypes.FigureElement,
+    ObjectTypes.Figure,
+    ObjectTypes.Supplement,
+    ObjectTypes.ElementsOrder,
+];
+const getOtherFiles = (inlineFiles, supplements, files) => {
+    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));
+};
+export const useFiles = (modelMap, files) => {
+    const models = [];
+    for (const [_, model] of modelMap.entries()) {
+        if (types.includes(model.objectType)) {
+            models.push(model);
+        }
+    }
+    return useDeepCompareMemo(() => {
+        const inlineFiles = getInlineFiles(modelMap, files);
+        const supplements = getSupplements(modelMap, files);
+        const otherFiles = getOtherFiles(inlineFiles, supplements, files);
+        return {
+            inlineFiles,
+            supplements,
+            otherFiles,
+        };
+    }, [models, files]);
+};
+export default useFiles;

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

@@ -50,13 +50,13 @@ const getMenuAt = (state, position) => {
 export const useMenus = (menus) => {
     const [pointer, setPointer] = useState(initialPointer);
     const state = getMenuState(menus, pointer);
-    const handleClick = useCallback((indices) => {
+    const handleClick = useCallback((indices, tableConfig) => {
         const menu = getMenuAt(state, indices);
         if (!menu || !menu.isEnabled) {
             return;
         }
         if (menu.run) {
-            menu.run();
+            menu.run(tableConfig);
             setPointer([-1, -1, -1]);
         }
         else if (menu.submenu) {

package/dist/es/index.js

@@ -20,12 +20,15 @@ export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';
 export * from './components/Dialog';
+export * from './components/InsertTableDialog';
 export * from './components/Checkbox';
 export * from './components/Form';
+export * from './components/FileManager';
+export * from './components/FileManager/util';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
 export * from './components/StyledModal';
-export * from './components/TableFootnotesSelector';
+export * from './components/FootnotesSelector';
 export * from './components/Sidebar';
 export * from './components/RichText';
 export * from './components/TextField';
@@ -46,6 +49,7 @@ export * from './components/RelativeDate';
 export * from './components/Menus';
 export * from './components/SelectField';
 export * from './hooks/use-dropdown';
+export * from './hooks/use-files';
 export * from './hooks/use-menus';
 export * from './hooks/use-scroll-detection';
 export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';

package/dist/es/lib/files.js

@@ -1,122 +1,78 @@
-import React from 'react';
-import { FileAudioIcon, FileCodeIcon, FileCompressedIcon, FileDocumentIcon, FileFigureIcon, FileGraphicalAbstractIcon, FileImageIcon, FileLatexIcon, FilePdfIcon, FileTableIcon, FileUnknownIcon, FileVideoIcon, } from '../components/icons';
-export var FileType;
-(function (FileType) {
-    FileType[FileType["Image"] = 0] = "Image";
-    FileType[FileType["Audio"] = 1] = "Audio";
-    FileType[FileType["Video"] = 2] = "Video";
-    FileType[FileType["PlainDocument"] = 3] = "PlainDocument";
-    FileType[FileType["SheetsWorkbooks"] = 4] = "SheetsWorkbooks";
-    FileType[FileType["Latex"] = 5] = "Latex";
-    FileType[FileType["CodeFile"] = 6] = "CodeFile";
-    FileType[FileType["PdfFile"] = 7] = "PdfFile";
-    FileType[FileType["CompressedFile"] = 8] = "CompressedFile";
-    FileType[FileType["PlainText"] = 9] = "PlainText";
-    FileType[FileType["Figure"] = 10] = "Figure";
-    FileType[FileType["GraphicalAbstract"] = 11] = "GraphicalAbstract";
-})(FileType || (FileType = {}));
-const extension2type = new Map([
-    ['png', FileType.Image],
-    ['jpg', FileType.Image],
-    ['jpeg', FileType.Image],
-    ['jfif', FileType.Image],
-    ['gif', FileType.Image],
-    ['svg', FileType.Image],
-    ['tif', FileType.Image],
-    ['tiff', FileType.Image],
-    ['mp3', FileType.Audio],
-    ['wav', FileType.Audio],
-    ['wma', FileType.Audio],
-    ['flac', FileType.Audio],
-    ['avi', FileType.Video],
-    ['mp4', FileType.Video],
-    ['mov', FileType.Video],
-    ['wmv', FileType.Video],
-    ['doc', FileType.PlainDocument],
-    ['docx', FileType.PlainDocument],
-    ['rtf', FileType.PlainDocument],
-    ['xls', FileType.SheetsWorkbooks],
-    ['xlsx', FileType.SheetsWorkbooks],
-    ['xml', FileType.SheetsWorkbooks],
-    ['tex', FileType.Latex],
-    ['js', FileType.CodeFile],
-    ['py', FileType.CodeFile],
-    ['tsx', FileType.CodeFile],
-    ['html', FileType.CodeFile],
-    ['pdf', FileType.PdfFile],
-    ['zip', FileType.CompressedFile],
-    ['rar', FileType.CompressedFile],
-    ['arj', FileType.CompressedFile],
-    ['tar.gz', FileType.CompressedFile],
-    ['tgz', FileType.CompressedFile],
-    ['txt', FileType.PlainText],
-]);
-const type2icon = new Map([
-    [
-        FileType.Audio,
-        React.createElement(FileAudioIcon, { key: FileType.Audio, className: "file-icon" }),
-    ],
-    [
-        FileType.Video,
-        React.createElement(FileVideoIcon, { key: FileType.Video, className: "file-icon" }),
-    ],
-    [
-        FileType.PlainDocument,
-        React.createElement(FileDocumentIcon, { key: FileType.PlainDocument, color: "#1A9BC7", className: "file-icon" }),
-    ],
-    [
-        FileType.SheetsWorkbooks,
-        React.createElement(FileTableIcon, { key: FileType.SheetsWorkbooks, className: "file-icon" }),
-    ],
-    [
-        FileType.Latex,
-        React.createElement(FileLatexIcon, { key: FileType.Latex, color: "#1A9BC7", className: "file-icon" }),
-    ],
-    [
-        FileType.CodeFile,
-        React.createElement(FileCodeIcon, { key: FileType.CodeFile, className: "file-icon" }),
-    ],
-    [
-        FileType.PdfFile,
-        React.createElement(FilePdfIcon, { key: FileType.PdfFile, className: "file-icon" }),
-    ],
-    [
-        FileType.CompressedFile,
-        React.createElement(FileCompressedIcon, { key: FileType.CompressedFile, className: "file-icon" }),
-    ],
-    [
-        FileType.PlainText,
-        React.createElement(FileDocumentIcon, { key: FileType.PlainText, color: "#FFBD26", className: "file-icon" }),
-    ],
-    [
-        FileType.Image,
-        React.createElement(FileImageIcon, { key: FileType.Image, className: "file-icon" }),
-    ],
-    [
-        FileType.Figure,
-        React.createElement(FileFigureIcon, { key: FileType.Figure, className: "file-icon" }),
-    ],
-    [
-        FileType.GraphicalAbstract,
-        React.createElement(FileGraphicalAbstractIcon, { key: FileType.GraphicalAbstract, className: "file-icon" }),
-    ],
-    [undefined, React.createElement(FileUnknownIcon, { key: undefined, className: "file-icon" })],
-]);
-export const getFileType = (name) => {
-    const extension = getExtension(name);
-    return extension2type.get(extension.toLowerCase());
+import { getModelsByType, ObjectTypes, } from '@manuscripts/json-schema';
+import { FileType } from '../components/FileManager/util';
+export const isModelFile = (file) => {
+    return file.modelId;
 };
-export const getFileIcon = (name) => {
-    const type = getFileType(name);
-    return type2icon.get(type);
+const MISSING_FILE = {
+    id: '',
+    name: 'Missing file',
+    type: {
+        id: 'missing',
+    },
 };
-export const getFileTypeIcon = (type) => {
-    return type2icon.get(type);
+const getFile = (files, id) => {
+    return files.filter((f) => f.id === id)[0] || MISSING_FILE;
 };
-export const isImageFile = (name) => {
-    return getFileType(name) === FileType.Image;
+const getFigureFiles = (element, modelMap, files) => {
+    const figureFiles = [];
+    element.containedObjectIDs.map((id) => {
+        const model = modelMap.get(id);
+        if (model && model.objectType === ObjectTypes.Figure) {
+            const figure = model;
+            if (figure.src) {
+                figureFiles.push(Object.assign(Object.assign({}, getFile(files, figure.src)), { modelId: figure._id }));
+            }
+        }
+    });
+    return figureFiles;
 };
-const getExtension = (name) => {
-    const index = name.indexOf('.');
-    return index ? name.substring(index + 1) : '';
+const getSupplementFiles = (supplement, files) => {
+    if (supplement.href) {
+        const href = supplement.href;
+        if (href) {
+            return [
+                Object.assign(Object.assign({}, getFile(files, href)), { modelId: supplement._id }),
+            ];
+        }
+    }
+    return [];
+};
+export const getInlineFiles = (modelMap, files) => {
+    var _a;
+    const elements = [];
+    const orders = getOrderByType(modelMap);
+    const sections = getModelsByType(modelMap, ObjectTypes.Section);
+    const graphicalAbstractElementIds = (_a = sections.filter((s) => s.category === 'MPSectionCategory:abstract-graphical')[0]) === null || _a === void 0 ? void 0 : _a.elementIDs;
+    graphicalAbstractElementIds === null || graphicalAbstractElementIds === void 0 ? void 0 : graphicalAbstractElementIds.map((id) => {
+        const figure = modelMap.get(id);
+        if (figure) {
+            elements.push({
+                modelId: id,
+                type: FileType.GraphicalAbstract,
+                label: 'Graphical Abstract',
+                files: getFigureFiles(figure, modelMap, files),
+            });
+        }
+    });
+    const figures = getModelsByType(modelMap, ObjectTypes.FigureElement);
+    const figureOrder = orders.get(ObjectTypes.FigureElement);
+    if (figureOrder) {
+    }
+    figures === null || figures === void 0 ? void 0 : figures.filter((f) => !(graphicalAbstractElementIds === null || graphicalAbstractElementIds === void 0 ? void 0 : graphicalAbstractElementIds.includes(f._id))).map((figure, index) => ({
+        modelId: figure._id,
+        type: FileType.Figure,
+        label: `Figure ${index + 1}`,
+        files: getFigureFiles(figure, modelMap, files),
+    })).forEach((e) => elements.push(e));
+    return elements;
+};
+export const getSupplements = (modelMap, files) => {
+    const supplements = getModelsByType(modelMap, ObjectTypes.Supplement);
+    return supplements.flatMap((s) => getSupplementFiles(s, files));
+};
+const getOrderByType = (modelMap) => {
+    const groups = new Map();
+    const orders = getModelsByType(modelMap, ObjectTypes.ElementsOrder);
+    orders.forEach((o) => groups.set(o.elementType, o));
+    return groups;
 };

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Move, Replace } from './FileManager';
+import { FileSectionType } from './util';
+export declare const FileActions: React.FC<{
+    sectionType: FileSectionType;
+    handleDownload?: () => void;
+    handleReplace?: Replace;
+    handleDetach?: () => void;
+    move?: Move;
+    className?: string;
+}>;
+export declare const ActionsIcon: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const FileActionDropdownList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    direction?: "right" | "left" | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    top?: number | undefined;
+}, never>;
+export declare const FileAction: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1 @@
+export declare const FileContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FileAttachment } from '../../lib/files';
+export declare const FileCreatedDate: React.FC<{
+    file: FileAttachment;
+    className?: string;
+}>;
+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>;

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

@@ -0,0 +1,30 @@
+import { Build, Model } from '@manuscripts/json-schema';
+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>;
+};
+export interface FileManagement {
+    upload: Upload;
+    download: Download;
+    previewLink: PreviewLink;
+}
+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;
+    enableDragAndDrop: boolean;
+    can: Capabilities;
+}>;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FileManagerDragLayer: React.FC;