@manuscripts/style-guide 1.8.3 → 1.8.4-LEAN-3144-4

package/dist/cjs/components/FileManager/FileManager.js

@@ -26,10 +26,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileManager = exports.PermissionsContext = void 0;
 const react_1 = __importStar(require("react"));
 const index_1 = require("../../index");
-const DragLayer_1 = require("../DragLayer");
 const Inspector_1 = require("../Inspector");
 const InspectorSection_1 = require("../InspectorSection");
 const Tooltip_1 = require("../Tooltip");
+const FileManagerDragLayer_1 = require("./FileManagerDragLayer");
 const FileManagerProvider_1 = require("./FileManagerProvider");
 const InlineFilesSection_1 = require("./InlineFilesSection");
 const OtherFilesSection_1 = require("./OtherFilesSection");
@@ -38,7 +38,7 @@ exports.PermissionsContext = (0, react_1.createContext)(null);
 const FileManager = ({ files, fileManagement, modelMap, saveModel, deleteModel, enableDragAndDrop, can, }) => {
     const { inlineFiles, supplements, otherFiles } = (0, index_1.useFiles)(modelMap, files);
     return (react_1.default.createElement(FileManagerProvider_1.FileManagerProvider, { saveModel: saveModel, deleteModel: deleteModel, modelMap: modelMap, fileManagement: fileManagement },
-        react_1.default.createElement(DragLayer_1.DragLayer, null),
+        react_1.default.createElement(FileManagerDragLayer_1.FileManagerDragLayer, null),
         react_1.default.createElement(exports.PermissionsContext.Provider, { value: can },
             react_1.default.createElement(InspectorSection_1.InspectorSection, { title: 'Files', contentStyles: { margin: '24px 16px' } },
                 react_1.default.createElement(Inspector_1.InspectorTabs, { defaultIndex: 0, "data-cy": "files-tabs", style: { overflow: 'visible' } },

package/dist/cjs/components/{DragLayer.js → FileManager/FileManagerDragLayer.js}

@@ -3,13 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DragLayer = void 0;
+exports.FileManagerDragLayer = void 0;
 const react_1 = __importDefault(require("react"));
 const react_dnd_1 = require("react-dnd");
 const styled_components_1 = __importDefault(require("styled-components"));
-const FileContainer_1 = require("./FileManager/FileContainer");
-const FileCreatedDate_1 = require("./FileManager/FileCreatedDate");
-const FileName_1 = require("./FileManager/FileName");
+const FileContainer_1 = require("./FileContainer");
+const FileCreatedDate_1 = require("./FileCreatedDate");
+const FileName_1 = require("./FileName");
 const Container = styled_components_1.default.div `
   position: fixed;
   pointer-events: none;
@@ -38,26 +38,18 @@ const getItemStyles = (currentOffset) => {
         WebkitTransform: transform,
     };
 };
-const DragLayer = () => {
+const FileManagerDragLayer = () => {
     const { itemType, isDragging, item, currentOffset } = (0, react_dnd_1.useDragLayer)((monitor) => ({
         item: monitor.getItem(),
         itemType: monitor.getItemType(),
         currentOffset: monitor.getSourceClientOffset(),
         isDragging: monitor.isDragging(),
     }));
-    const renderItem = () => {
-        switch (itemType) {
-            case 'file':
-                return (react_1.default.createElement(DraggableFileContainer, null,
-                    react_1.default.createElement(FileName_1.FileName, { file: item.file }),
-                    item.file.createdDate && react_1.default.createElement(FileCreatedDate_1.FileCreatedDate, { file: item.file })));
-            default:
-                return null;
-        }
-    };
     if (!isDragging) {
         return null;
     }
-    return (react_1.default.createElement(Container, { style: getItemStyles(currentOffset) }, renderItem()));
+    return (react_1.default.createElement(Container, { style: getItemStyles(currentOffset) }, itemType === 'file' && (react_1.default.createElement(DraggableFileContainer, null,
+        react_1.default.createElement(FileName_1.FileName, { file: item.file }),
+        item.file.createdDate && react_1.default.createElement(FileCreatedDate_1.FileCreatedDate, { file: item.file })))));
 };
-exports.DragLayer = DragLayer;
+exports.FileManagerDragLayer = FileManagerDragLayer;

package/dist/cjs/components/FileManager/FileUploader.js

@@ -22,44 +22,30 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUploader = void 0;
 const react_1 = __importStar(require("react"));
 const react_dnd_1 = require("react-dnd");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 const styled_components_1 = __importStar(require("styled-components"));
-const FileUploader = ({ handler }) => {
+const FileUploader = ({ onUpload }) => {
     const fileInputRef = (0, react_1.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);
+            onUpload(file);
         }
-    });
-    const handleFileDrop = (0, react_1.useCallback)((monitor) => __awaiter(void 0, void 0, void 0, function* () {
-        if (monitor) {
-            const file = monitor.getItem().files[0];
-            yield handler(file);
-        }
-    }), [handler]);
+    };
     const [{ canDrop, isOver }, dropRef] = (0, react_dnd_1.useDrop)({
         accept: [react_dnd_html5_backend_1.NativeTypes.FILE],
-        drop(item, monitor) {
-            handleFileDrop(monitor);
+        drop: (item) => {
+            const file = item.files[0];
+            onUpload(file);
         },
         collect: (monitor) => ({
             isOver: monitor.isOver(),
@@ -68,7 +54,7 @@ const FileUploader = ({ handler }) => {
     });
     const isActive = canDrop && isOver;
     return (react_1.default.createElement(Container, { ref: dropRef, "data-cy": "file-uploader", active: isActive, onClick: openFileDialog },
-        react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' }),
+        react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: handleChange, value: '' }),
         "Drag or click to upload a new file"));
 };
 exports.FileUploader = FileUploader;

package/dist/cjs/components/FileManager/OtherFilesSection.js

@@ -53,7 +53,7 @@ const OtherFilesSection = ({ files }) => {
         type: FileSectionAlert_1.FileSectionAlertType.NONE,
         message: '',
     });
-    const upload = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
         setAlert({
             type: FileSectionAlert_1.FileSectionAlertType.UPLOAD_IN_PROGRESS,
             message: file.name,
@@ -73,16 +73,16 @@ const OtherFilesSection = ({ files }) => {
         });
     });
     return (react_1.default.createElement("div", null,
-        (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { handler: upload }),
+        (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { onUpload: handleUpload }),
         react_1.default.createElement(FileSectionAlert_1.FileSectionAlert, { alert: alert }),
         files.map((file) => (react_1.default.createElement(OtherFile, { key: file.id, file: file, handleDownload: () => fileManagement.download(file), handleMoveToSupplements: () => __awaiter(void 0, void 0, void 0, function* () { return yield moveToSupplements(file); }) })))));
 };
 exports.OtherFilesSection = OtherFilesSection;
 const OtherFile = ({ file, handleDownload, handleMoveToSupplements }) => {
-    const [{ isDragging }, drag, preview] = (0, react_dnd_1.useDrag)({
+    const [{ isDragging }, dragRef, preview] = (0, react_dnd_1.useDrag)({
+        type: 'file',
         item: {
             file,
-            type: 'file',
         },
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
@@ -91,7 +91,7 @@ const OtherFile = ({ file, handleDownload, handleMoveToSupplements }) => {
     (0, react_1.useEffect)(() => {
         preview((0, react_dnd_html5_backend_1.getEmptyImage)());
     }, [preview]);
-    return (react_1.default.createElement(FileContainer_1.FileContainer, { key: file.id, "data-cy": "file-container", ref: drag, className: isDragging ? 'dragging' : '' },
+    return (react_1.default.createElement(FileContainer_1.FileContainer, { key: file.id, "data-cy": "file-container", ref: dragRef, className: isDragging ? 'dragging' : '' },
         react_1.default.createElement(FileName_1.FileName, { file: file }),
         react_1.default.createElement(FileCreatedDate_1.FileCreatedDate, { file: file, className: "show-on-hover" }),
         react_1.default.createElement(FileActions_1.FileActions, { sectionType: util_1.FileSectionType.OtherFile, handleDownload: handleDownload, move: {

package/dist/cjs/components/FileManager/SupplementsSection.js

@@ -84,20 +84,20 @@ const SupplementsSection = ({ supplements }) => {
         });
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { handler: handleUpload }),
+        (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { onUpload: handleUpload }),
         react_1.default.createElement(FileSectionAlert_1.FileSectionAlert, { alert: alert }),
         supplements.map((supplement) => (react_1.default.createElement(SupplementFile, { key: supplement.modelId, file: supplement, handleDownload: () => fileManagement.download(supplement), handleReplace: (f) => __awaiter(void 0, void 0, void 0, function* () { return yield handleReplace(supplement.modelId, f); }), handleDetach: () => __awaiter(void 0, void 0, void 0, function* () { return yield handleMoveToOtherFiles(supplement.modelId); }) })))));
 };
 exports.SupplementsSection = SupplementsSection;
 const SupplementFile = ({ file, handleDownload, handleReplace, handleDetach }) => {
-    const [{ isDragging }, drag, preview] = (0, react_dnd_1.useDrag)({
+    const [{ isDragging }, dragRef, preview] = (0, react_dnd_1.useDrag)({
+        type: 'file',
         item: {
             file,
             model: {
                 _id: file.modelId,
                 objectType: json_schema_1.ObjectTypes.Supplement,
             },
-            type: 'file',
         },
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
@@ -106,7 +106,7 @@ const SupplementFile = ({ file, handleDownload, handleReplace, handleDetach }) =
     (0, react_1.useEffect)(() => {
         preview((0, react_dnd_html5_backend_1.getEmptyImage)());
     }, [preview]);
-    return (react_1.default.createElement(FileContainer_1.FileContainer, { "data-cy": "file-container", key: file.id, ref: drag, className: isDragging ? 'dragging' : '' },
+    return (react_1.default.createElement(FileContainer_1.FileContainer, { "data-cy": "file-container", key: file.id, ref: dragRef, className: isDragging ? 'dragging' : '' },
         react_1.default.createElement(FileName_1.FileName, { file: file }),
         react_1.default.createElement(FileCreatedDate_1.FileCreatedDate, { file: file, className: "show-on-hover" }),
         react_1.default.createElement(FileActions_1.FileActions, { "data-cy": "file-actions", sectionType: util_1.FileSectionType.Supplements, handleDownload: file.id ? handleDownload : undefined, handleReplace: handleReplace, move: file.id

package/dist/cjs/components/TableFootnotesSelector.js

@@ -79,8 +79,14 @@ const AddNewFootnote = (0, styled_components_1.default)(Button_1.ButtonGroup) `
     }
   }
 `;
-const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) => {
-    const [selections, setSelections] = (0, react_1.useState)(new Map());
+const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel }) => {
+    let selectedNotesMap;
+    if (inlineFootnote) {
+        const rids = inlineFootnote.attrs.rids;
+        const selectedNotes = notes.filter(({ node }) => rids.includes(node.attrs.id));
+        selectedNotesMap = new Map(selectedNotes.map(({ node }) => [node.attrs.id, node]));
+    }
+    const [selections, setSelections] = (0, react_1.useState)(new Map(selectedNotesMap));
     const toggleSelection = (item) => {
         const id = item.attrs.id;
         if (selections.has(id)) {
@@ -100,7 +106,7 @@ const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) => {
     };
     return (react_1.default.createElement(Container, null,
         react_1.default.createElement(NotesContainer, null,
-            react_1.default.createElement(TableFootnotesList, { notes: notes, isSelected: isSelected, onSelect: toggleSelection })),
+            react_1.default.createElement(TableFootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
         react_1.default.createElement(Actions, null,
             react_1.default.createElement(AddNewFootnote, null,
                 react_1.default.createElement(Button_1.IconTextButton, { onClick: onAdd },
@@ -108,17 +114,38 @@ const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) => {
                     "Add new")),
             react_1.default.createElement(Button_1.ButtonGroup, null,
                 react_1.default.createElement(Button_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
-                react_1.default.createElement(Button_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Insert")))));
+                react_1.default.createElement(Button_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
 };
 exports.TableFootnotesSelector = TableFootnotesSelector;
-const TableFootnotesList = ({ notes, isSelected, onSelect }) => {
-    return (react_1.default.createElement(NotesListContainer, null, notes.map(({ node, index }) => {
-        var _a;
-        return (react_1.default.createElement(FootnoteItem, { onClick: () => onSelect(node), key: node.attrs.id },
-            react_1.default.createElement(StatusIcon, null, isSelected(node) ? (react_1.default.createElement(AddedIcon_1.default, { "data-cy": 'plus-icon-ok', width: 24, height: 24 })) : (react_1.default.createElement(AddIcon_1.default, { "data-cy": 'plus-icon', width: 24, height: 24 }))),
-            react_1.default.createElement(NoteText, null, (index ? index + '. ' : '') + ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
-    })));
+const TableFootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
+    const selectedNotes = [];
+    const remainingNotes = [];
+    notes.forEach((note) => {
+        const isNoteSelected = inlineFootnote && inlineFootnote.attrs.rids.includes(note.node.attrs.id);
+        if (isNoteSelected) {
+            selectedNotes.push(note);
+        }
+        else {
+            remainingNotes.push(note);
+        }
+    });
+    return (react_1.default.createElement(NotesListContainer, null,
+        selectedNotes.map((note) => footnoteItem(note, isSelected, onSelect)),
+        selectedNotes.length > 0 && remainingNotes.length > 0 && react_1.default.createElement(Separator, null),
+        remainingNotes.map((note) => footnoteItem(note, isSelected, onSelect))));
+};
+const footnoteItem = (note, isSelected, onSelect) => {
+    var _a;
+    const { node, index } = note;
+    return (react_1.default.createElement(FootnoteItem, { onClick: () => onSelect(node), key: node.attrs.id },
+        react_1.default.createElement(StatusIcon, null, isSelected(node) ? (react_1.default.createElement(AddedIcon_1.default, { "data-cy": 'plus-icon-ok', width: 24, height: 24 })) : (react_1.default.createElement(AddIcon_1.default, { "data-cy": 'plus-icon', width: 24, height: 24 }))),
+        react_1.default.createElement(NoteText, null, (index ? index + '. ' : '') + ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
 };
+const Separator = styled_components_1.default.div `
+  height: 0;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 4px 0;
+`;
 const NotesListContainer = styled_components_1.default.div `
   padding: ${(props) => props.theme.grid.unit * 6}px
     ${(props) => props.theme.grid.unit * 5}px;

package/dist/cjs/index.js

@@ -49,7 +49,6 @@ __exportStar(require("./components/SaveStatus"), exports);
 __exportStar(require("./components/StyledModal"), exports);
 __exportStar(require("./components/TableFootnotesSelector"), exports);
 __exportStar(require("./components/Sidebar"), exports);
-__exportStar(require("./components/DragLayer"), exports);
 __exportStar(require("./components/TextField"), exports);
 __exportStar(require("./components/TextFieldContainer"), exports);
 __exportStar(require("./components/TextFieldError"), exports);

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

@@ -1,9 +1,9 @@
 import React, { createContext } from 'react';
 import { useFiles } from '../../index';
-import { DragLayer } from '../DragLayer';
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
 import { InspectorSection } from '../InspectorSection';
 import { Tooltip } from '../Tooltip';
+import { FileManagerDragLayer } from './FileManagerDragLayer';
 import { FileManagerProvider } from './FileManagerProvider';
 import { InlineFilesSection } from './InlineFilesSection';
 import { OtherFilesSection } from './OtherFilesSection';
@@ -12,7 +12,7 @@ export const PermissionsContext = createContext(null);
 export const FileManager = ({ files, fileManagement, modelMap, saveModel, deleteModel, enableDragAndDrop, can, }) => {
     const { inlineFiles, supplements, otherFiles } = useFiles(modelMap, files);
     return (React.createElement(FileManagerProvider, { saveModel: saveModel, deleteModel: deleteModel, modelMap: modelMap, fileManagement: fileManagement },
-        React.createElement(DragLayer, null),
+        React.createElement(FileManagerDragLayer, null),
         React.createElement(PermissionsContext.Provider, { value: can },
             React.createElement(InspectorSection, { title: 'Files', contentStyles: { margin: '24px 16px' } },
                 React.createElement(InspectorTabs, { defaultIndex: 0, "data-cy": "files-tabs", style: { overflow: 'visible' } },

package/dist/es/components/{DragLayer.js → FileManager/FileManagerDragLayer.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useDragLayer } from 'react-dnd';
 import styled from 'styled-components';
-import { FileContainer } from './FileManager/FileContainer';
-import { FileCreatedDate } from './FileManager/FileCreatedDate';
-import { FileName } from './FileManager/FileName';
+import { FileContainer } from './FileContainer';
+import { FileCreatedDate } from './FileCreatedDate';
+import { FileName } from './FileName';
 const Container = styled.div `
   position: fixed;
   pointer-events: none;
@@ -32,25 +32,17 @@ const getItemStyles = (currentOffset) => {
         WebkitTransform: transform,
     };
 };
-export const DragLayer = () => {
+export const FileManagerDragLayer = () => {
     const { itemType, isDragging, item, currentOffset } = useDragLayer((monitor) => ({
         item: monitor.getItem(),
         itemType: monitor.getItemType(),
         currentOffset: monitor.getSourceClientOffset(),
         isDragging: monitor.isDragging(),
     }));
-    const renderItem = () => {
-        switch (itemType) {
-            case 'file':
-                return (React.createElement(DraggableFileContainer, null,
-                    React.createElement(FileName, { file: item.file }),
-                    item.file.createdDate && React.createElement(FileCreatedDate, { file: item.file })));
-            default:
-                return null;
-        }
-    };
     if (!isDragging) {
         return null;
     }
-    return (React.createElement(Container, { style: getItemStyles(currentOffset) }, renderItem()));
+    return (React.createElement(Container, { style: getItemStyles(currentOffset) }, itemType === 'file' && (React.createElement(DraggableFileContainer, null,
+        React.createElement(FileName, { file: item.file }),
+        item.file.createdDate && React.createElement(FileCreatedDate, { file: item.file })))));
 };

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

@@ -1,39 +1,25 @@
-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 React, { 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 }) => {
+export const FileUploader = ({ onUpload }) => {
     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);
+            onUpload(file);
         }
-    });
-    const handleFileDrop = useCallback((monitor) => __awaiter(void 0, void 0, void 0, function* () {
-        if (monitor) {
-            const file = monitor.getItem().files[0];
-            yield handler(file);
-        }
-    }), [handler]);
+    };
     const [{ canDrop, isOver }, dropRef] = useDrop({
         accept: [NativeTypes.FILE],
-        drop(item, monitor) {
-            handleFileDrop(monitor);
+        drop: (item) => {
+            const file = item.files[0];
+            onUpload(file);
         },
         collect: (monitor) => ({
             isOver: monitor.isOver(),
@@ -42,7 +28,7 @@ export const FileUploader = ({ handler }) => {
     });
     const isActive = canDrop && isOver;
     return (React.createElement(Container, { ref: dropRef, "data-cy": "file-uploader", active: isActive, onClick: openFileDialog },
-        React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' }),
+        React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: handleChange, value: '' }),
         "Drag or click to upload a new file"));
 };
 const activeBoxStyle = css `

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

@@ -27,7 +27,7 @@ export const OtherFilesSection = ({ files }) => {
         type: FileSectionAlertType.NONE,
         message: '',
     });
-    const upload = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
         setAlert({
             type: FileSectionAlertType.UPLOAD_IN_PROGRESS,
             message: file.name,
@@ -47,15 +47,15 @@ export const OtherFilesSection = ({ files }) => {
         });
     });
     return (React.createElement("div", null,
-        (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { handler: upload }),
+        (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { onUpload: handleUpload }),
         React.createElement(FileSectionAlert, { alert: alert }),
         files.map((file) => (React.createElement(OtherFile, { key: file.id, file: file, handleDownload: () => fileManagement.download(file), handleMoveToSupplements: () => __awaiter(void 0, void 0, void 0, function* () { return yield moveToSupplements(file); }) })))));
 };
 const OtherFile = ({ file, handleDownload, handleMoveToSupplements }) => {
-    const [{ isDragging }, drag, preview] = useDrag({
+    const [{ isDragging }, dragRef, preview] = useDrag({
+        type: 'file',
         item: {
             file,
-            type: 'file',
         },
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
@@ -64,7 +64,7 @@ const OtherFile = ({ file, handleDownload, handleMoveToSupplements }) => {
     useEffect(() => {
         preview(getEmptyImage());
     }, [preview]);
-    return (React.createElement(FileContainer, { key: file.id, "data-cy": "file-container", ref: drag, className: isDragging ? 'dragging' : '' },
+    return (React.createElement(FileContainer, { key: file.id, "data-cy": "file-container", ref: dragRef, className: isDragging ? 'dragging' : '' },
         React.createElement(FileName, { file: file }),
         React.createElement(FileCreatedDate, { file: file, className: "show-on-hover" }),
         React.createElement(FileActions, { sectionType: FileSectionType.OtherFile, handleDownload: handleDownload, move: {

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

@@ -58,19 +58,19 @@ export const SupplementsSection = ({ supplements }) => {
         });
     });
     return (React.createElement(React.Fragment, null,
-        (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { handler: handleUpload }),
+        (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { onUpload: handleUpload }),
         React.createElement(FileSectionAlert, { alert: alert }),
         supplements.map((supplement) => (React.createElement(SupplementFile, { key: supplement.modelId, file: supplement, handleDownload: () => fileManagement.download(supplement), handleReplace: (f) => __awaiter(void 0, void 0, void 0, function* () { return yield handleReplace(supplement.modelId, f); }), handleDetach: () => __awaiter(void 0, void 0, void 0, function* () { return yield handleMoveToOtherFiles(supplement.modelId); }) })))));
 };
 const SupplementFile = ({ file, handleDownload, handleReplace, handleDetach }) => {
-    const [{ isDragging }, drag, preview] = useDrag({
+    const [{ isDragging }, dragRef, preview] = useDrag({
+        type: 'file',
         item: {
             file,
             model: {
                 _id: file.modelId,
                 objectType: ObjectTypes.Supplement,
             },
-            type: 'file',
         },
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
@@ -79,7 +79,7 @@ const SupplementFile = ({ file, handleDownload, handleReplace, handleDetach }) =
     useEffect(() => {
         preview(getEmptyImage());
     }, [preview]);
-    return (React.createElement(FileContainer, { "data-cy": "file-container", key: file.id, ref: drag, className: isDragging ? 'dragging' : '' },
+    return (React.createElement(FileContainer, { "data-cy": "file-container", key: file.id, ref: dragRef, className: isDragging ? 'dragging' : '' },
         React.createElement(FileName, { file: file }),
         React.createElement(FileCreatedDate, { file: file, className: "show-on-hover" }),
         React.createElement(FileActions, { "data-cy": "file-actions", sectionType: FileSectionType.Supplements, handleDownload: file.id ? handleDownload : undefined, handleReplace: handleReplace, move: file.id

package/dist/es/components/TableFootnotesSelector.js

@@ -50,8 +50,14 @@ const AddNewFootnote = styled(ButtonGroup) `
     }
   }
 `;
-export const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) => {
-    const [selections, setSelections] = useState(new Map());
+export const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel }) => {
+    let selectedNotesMap;
+    if (inlineFootnote) {
+        const rids = inlineFootnote.attrs.rids;
+        const selectedNotes = notes.filter(({ node }) => rids.includes(node.attrs.id));
+        selectedNotesMap = new Map(selectedNotes.map(({ node }) => [node.attrs.id, node]));
+    }
+    const [selections, setSelections] = useState(new Map(selectedNotesMap));
     const toggleSelection = (item) => {
         const id = item.attrs.id;
         if (selections.has(id)) {
@@ -71,7 +77,7 @@ export const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) =>
     };
     return (React.createElement(Container, null,
         React.createElement(NotesContainer, null,
-            React.createElement(TableFootnotesList, { notes: notes, isSelected: isSelected, onSelect: toggleSelection })),
+            React.createElement(TableFootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
         React.createElement(Actions, null,
             React.createElement(AddNewFootnote, null,
                 React.createElement(IconTextButton, { onClick: onAdd },
@@ -79,16 +85,37 @@ export const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) =>
                     "Add new")),
             React.createElement(ButtonGroup, null,
                 React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
-                React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Insert")))));
+                React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
+};
+const TableFootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
+    const selectedNotes = [];
+    const remainingNotes = [];
+    notes.forEach((note) => {
+        const isNoteSelected = inlineFootnote && inlineFootnote.attrs.rids.includes(note.node.attrs.id);
+        if (isNoteSelected) {
+            selectedNotes.push(note);
+        }
+        else {
+            remainingNotes.push(note);
+        }
+    });
+    return (React.createElement(NotesListContainer, null,
+        selectedNotes.map((note) => footnoteItem(note, isSelected, onSelect)),
+        selectedNotes.length > 0 && remainingNotes.length > 0 && React.createElement(Separator, null),
+        remainingNotes.map((note) => footnoteItem(note, isSelected, onSelect))));
 };
-const TableFootnotesList = ({ notes, isSelected, onSelect }) => {
-    return (React.createElement(NotesListContainer, null, notes.map(({ node, index }) => {
-        var _a;
-        return (React.createElement(FootnoteItem, { onClick: () => onSelect(node), key: node.attrs.id },
-            React.createElement(StatusIcon, null, isSelected(node) ? (React.createElement(AddedIcon, { "data-cy": 'plus-icon-ok', width: 24, height: 24 })) : (React.createElement(AddIcon, { "data-cy": 'plus-icon', width: 24, height: 24 }))),
-            React.createElement(NoteText, null, (index ? index + '. ' : '') + ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
-    })));
+const footnoteItem = (note, isSelected, onSelect) => {
+    var _a;
+    const { node, index } = note;
+    return (React.createElement(FootnoteItem, { onClick: () => onSelect(node), key: node.attrs.id },
+        React.createElement(StatusIcon, null, isSelected(node) ? (React.createElement(AddedIcon, { "data-cy": 'plus-icon-ok', width: 24, height: 24 })) : (React.createElement(AddIcon, { "data-cy": 'plus-icon', width: 24, height: 24 }))),
+        React.createElement(NoteText, null, (index ? index + '. ' : '') + ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
 };
+const Separator = styled.div `
+  height: 0;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 4px 0;
+`;
 const NotesListContainer = styled.div `
   padding: ${(props) => props.theme.grid.unit * 6}px
     ${(props) => props.theme.grid.unit * 5}px;

package/dist/es/index.js

@@ -29,7 +29,6 @@ export * from './components/SaveStatus';
 export * from './components/StyledModal';
 export * from './components/TableFootnotesSelector';
 export * from './components/Sidebar';
-export * from './components/DragLayer';
 export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';

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

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

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

@@ -1,4 +1,5 @@
 import React from 'react';
-export declare const FileUploader: React.FC<{
-    handler: (file: File) => Promise<void>;
-}>;
+export interface FileUploaderProps {
+    onUpload: (file: File) => void;
+}
+export declare const FileUploader: React.FC<FileUploaderProps>;

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FootnoteNode } from '@manuscripts/transform';
+import { FootnoteNode, InlineFootnoteNode } from '@manuscripts/transform';
 import React from 'react';
 export type FootnoteWithIndex = {
     node: FootnoteNode;
@@ -21,6 +21,7 @@ export type FootnoteWithIndex = {
 };
 export declare const TableFootnotesSelector: React.FC<{
     notes: FootnoteWithIndex[];
+    inlineFootnote?: InlineFootnoteNode;
     onAdd: () => void;
     onInsert: (notes: FootnoteWithIndex[]) => void;
     onCancel: () => void;

package/dist/types/index.d.ts

@@ -30,7 +30,6 @@ export * from './components/SaveStatus';
 export * from './components/StyledModal';
 export * from './components/TableFootnotesSelector';
 export * from './components/Sidebar';
-export * from './components/DragLayer';
 export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.8.3",
+  "version": "1.8.4-LEAN-3144-4",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,8 +41,8 @@
     "fuzzysort": "^2.0.4",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-modal": "^3.16.1",
@@ -103,4 +103,4 @@
     "@types/react": "^17.0.2",
     "jackspeak": "2.1.1"
   }
-}
+}

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

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