@manuscripts/style-guide 0.31.27 → 0.31.28-LEAN-1156

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

@@ -98,6 +98,14 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
     }), [modelMap, saveModel]);
     const attachments = getAttachments();
     const { otherFiles, supplementFiles, inlineFiles } = (0, index_1.useFiles)(modelMap, attachments);
+    const handleDetachFile = (attachmentId, modelId) => {
+        var _a;
+        const model = modelMap.get(modelId);
+        if (model) {
+            const externalFileReferences = (_a = model.externalFileReferences) === null || _a === void 0 ? void 0 : _a.filter((ref) => ref.url.replace('attachment:', '') !== attachmentId);
+            saveModel(Object.assign(Object.assign({}, model), { externalFileReferences: externalFileReferences || [] }));
+        }
+    };
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === util_1.FileSectionType.Supplements ||
             fileSection === util_1.FileSectionType.OtherFile;
@@ -149,7 +157,7 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
                                 react_1.default.createElement("div", null, "Files excluded from the final submission.")))),
                     react_1.default.createElement(Inspector_1.InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
-                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { inlineFiles: inlineFiles, handleReplace: replace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { inlineFiles: inlineFiles, handleReplace: replace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
                             react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: util_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,

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

@@ -35,7 +35,7 @@ const FileManager_1 = require("../FileManager");
 const FileSectionState_1 = require("../FileSectionState");
 const ItemsAction_1 = require("../ItemsAction");
 const util_1 = require("../util");
-const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, handleUpdateInline, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
+const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, detachAttachmnetHandler, handleUpdateInline, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
     const attachmentDesignationName = attachmentDesignation !== 'undefined'
         ? util_1.namesWithDesignationMap.get(attachmentDesignation)
@@ -73,10 +73,11 @@ const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, hand
             fileInputRef.current.click();
         }
     };
-    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 96, top: 5, onClick: hideActionList },
+    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 120, top: 5, onClick: hideActionList },
         react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),
+        (can === null || can === void 0 ? void 0 : can.editArticle) && detachAttachmnetHandler && (react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => detachAttachmnetHandler() }, "Detach")),
         (can === null || can === void 0 ? void 0 : can.replaceFile) && canBeReplaced && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: openFileDialog }, "Replace"),
             react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' })))));

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

@@ -31,7 +31,7 @@ const FileInfo_1 = require("./FileSectionItem/FileInfo");
 const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
 const ItemActions_1 = require("./FileSectionItem/ItemActions");
 const util_1 = require("./util");
-const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, inlineFiles, isEditor, dispatch, }) => {
+const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, handleDetachFile, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = (0, react_1.useCallback)((e) => {
         if (!isEditor) {
             return;
@@ -46,7 +46,7 @@ const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline,
     return (react_1.default.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (react_1.default.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
-            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDownload: handleDownload, dispatch: dispatch })))),
+            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
             react_1.default.createElement(Element, { className: 'element' },
                 util_1.fileTypesWithIconMap.get(file.type),
                 react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
@@ -55,7 +55,7 @@ const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline,
     })));
 };
 exports.InlineFilesSection = InlineFilesSection;
-const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, dispatch, }) => {
+const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, handleDetachFile, dispatch, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
     if (!attachment || !attachment.name) {
         return null;
@@ -66,11 +66,13 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
             util_1.fileTypesWithIconMap.get(util_1.extensionsWithFileTypesMap.get(fileExtension)),
             react_1.default.createElement(FileReferenceName, null, attachment.name)),
         handleDownload && handleReplace && (react_1.default.createElement(DropdownContainer, { ref: wrapperRef },
-            react_1.default.createElement(FileSectionItem_1.ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace", "aria-pressed": isOpen },
+            react_1.default.createElement(FileSectionItem_1.ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace or Detach", "aria-pressed": isOpen },
                 react_1.default.createElement(dots_icon_1.default, null)),
             isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, showReplaceAction: true, handleUpdateInline: (uploadAttachment) => handleUpdateInline &&
                     (attachment === null || attachment === void 0 ? void 0 : attachment.modelId) &&
-                    handleUpdateInline(attachment.modelId, uploadAttachment), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+                    handleUpdateInline(attachment.modelId, uploadAttachment), detachAttachmnetHandler: () => handleDetachFile &&
+                    attachment.modelId &&
+                    handleDetachFile(attachment.id, attachment.modelId), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
 const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
   display: flex;

package/dist/cjs/components/ManuscriptNoteList.js

@@ -143,6 +143,8 @@ exports.NoteBodyContainer = styled_components_1.default.div `
   ${(props) => borderStyle(props.theme.colors.border.secondary)};
   ${(props) => (props.isNew || props.isSelected) &&
     borderStyle(props.theme.colors.border.primary)}
+  ${(props) => props.isSelected &&
+    `background: ${props.theme.colors.background.selected};`}
 
   .tooltip {
     border-radius: 6px;

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

@@ -73,6 +73,14 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
     }), [modelMap, saveModel]);
     const attachments = getAttachments();
     const { otherFiles, supplementFiles, inlineFiles } = useFiles(modelMap, attachments);
+    const handleDetachFile = (attachmentId, modelId) => {
+        var _a;
+        const model = modelMap.get(modelId);
+        if (model) {
+            const externalFileReferences = (_a = model.externalFileReferences) === null || _a === void 0 ? void 0 : _a.filter((ref) => ref.url.replace('attachment:', '') !== attachmentId);
+            saveModel(Object.assign(Object.assign({}, model), { externalFileReferences: externalFileReferences || [] }));
+        }
+    };
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === FileSectionType.Supplements ||
             fileSection === FileSectionType.OtherFile;
@@ -124,7 +132,7 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
                                 React.createElement("div", null, "Files excluded from the final submission.")))),
                     React.createElement(InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         React.createElement(InspectorTabPanel, null,
-                            React.createElement(InlineFilesSection, { inlineFiles: inlineFiles, handleReplace: replace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            React.createElement(InlineFilesSection, { inlineFiles: inlineFiles, handleReplace: replace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,
                             React.createElement(FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: FileSectionType.Supplements, filesItem: getFileSectionExternalFile(FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,

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

@@ -13,7 +13,7 @@ import { PermissionsContext } from '../FileManager';
 import { actions } from '../FileSectionState';
 import { ActionsItem } from '../ItemsAction';
 import { Designation, namesWithDesignationMap } from '../util';
-export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, handleUpdateInline, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
+export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, detachAttachmnetHandler, handleUpdateInline, attachmentId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, showReplaceAction, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
     const attachmentDesignationName = attachmentDesignation !== 'undefined'
         ? namesWithDesignationMap.get(attachmentDesignation)
@@ -51,10 +51,11 @@ export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandle
             fileInputRef.current.click();
         }
     };
-    return (React.createElement(DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 96, top: 5, onClick: hideActionList },
+    return (React.createElement(DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 120, top: 5, onClick: hideActionList },
         React.createElement(ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),
+        (can === null || can === void 0 ? void 0 : can.editArticle) && detachAttachmnetHandler && (React.createElement(ActionsItem, { onClick: () => detachAttachmnetHandler() }, "Detach")),
         (can === null || can === void 0 ? void 0 : can.replaceFile) && canBeReplaced && (React.createElement(React.Fragment, null,
             React.createElement(ActionsItem, { onClick: openFileDialog }, "Replace"),
             React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), value: '' })))));

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

@@ -6,7 +6,7 @@ import { FileInfoContainer, FileNameTitleContainer, FileTitle, } from './FileSec
 import { ActionsIcon, Item, } from './FileSectionItem/FileSectionItem';
 import { ItemActions } from './FileSectionItem/ItemActions';
 import { extensionsWithFileTypesMap, fileTypesWithIconMap, } from './util';
-export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, inlineFiles, isEditor, dispatch, }) => {
+export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline, handleDetachFile, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = useCallback((e) => {
         if (!isEditor) {
             return;
@@ -21,7 +21,7 @@ export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdate
     return (React.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (React.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
-            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDownload: handleDownload, dispatch: dispatch })))),
+            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
             React.createElement(Element, { className: 'element' },
                 fileTypesWithIconMap.get(file.type),
                 React.createElement(FileInfoContainer, null,
@@ -29,7 +29,7 @@ export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdate
                         React.createElement(FileTitle, null, file.label))))));
     })));
 };
-const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, dispatch, }) => {
+const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, handleDetachFile, dispatch, }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
     if (!attachment || !attachment.name) {
         return null;
@@ -40,11 +40,13 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
             fileTypesWithIconMap.get(extensionsWithFileTypesMap.get(fileExtension)),
             React.createElement(FileReferenceName, null, attachment.name)),
         handleDownload && handleReplace && (React.createElement(DropdownContainer, { ref: wrapperRef },
-            React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace", "aria-pressed": isOpen },
+            React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace or Detach", "aria-pressed": isOpen },
                 React.createElement(DotsIcon, null)),
             isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, showReplaceAction: true, handleUpdateInline: (uploadAttachment) => handleUpdateInline &&
                     (attachment === null || attachment === void 0 ? void 0 : attachment.modelId) &&
-                    handleUpdateInline(attachment.modelId, uploadAttachment), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+                    handleUpdateInline(attachment.modelId, uploadAttachment), detachAttachmnetHandler: () => handleDetachFile &&
+                    attachment.modelId &&
+                    handleDetachFile(attachment.id, attachment.modelId), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
 const ElementItem = styled(Item) `
   display: flex;

package/dist/es/components/ManuscriptNoteList.js

@@ -118,6 +118,8 @@ export const NoteBodyContainer = styled.div `
   ${(props) => borderStyle(props.theme.colors.border.secondary)};
   ${(props) => (props.isNew || props.isSelected) &&
     borderStyle(props.theme.colors.border.primary)}
+  ${(props) => props.isSelected &&
+    `background: ${props.theme.colors.background.selected};`}
 
   .tooltip {
     border-radius: 6px;

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

@@ -1,5 +1,5 @@
 import { Build } from '@manuscripts/manuscript-transform';
-import { Model, Supplement } from '@manuscripts/manuscripts-json-schema';
+import { Model } from '@manuscripts/manuscripts-json-schema';
 import React from 'react';
 import { Capabilities } from '../../lib/capabilities';
 import { SubmissionAttachment } from './FileSectionItem/FileSectionItem';
@@ -16,7 +16,7 @@ export declare const PermissionsContext: React.Context<Capabilities | null>;
 export declare const FileManager: React.FC<{
     fileManagement: FileManagement;
     modelMap: Map<string, Model>;
-    saveModel: (model: Build<Supplement>) => Promise<Build<Supplement>>;
+    saveModel: <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
     enableDragAndDrop: boolean;
     can: Capabilities;
 }>;

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

@@ -6,6 +6,7 @@ import { SubmissionAttachment } from './FileSectionItem';
 export declare const ItemActions: React.FC<{
     downloadAttachmentHandler: (url: string) => void;
     replaceAttachmentHandler: Replace;
+    detachAttachmnetHandler?: () => void;
     handleUpdateInline?: (attachment: SubmissionAttachment) => void;
     attachmentId: string;
     fileName: string;

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

@@ -19,6 +19,7 @@ export declare const InlineFilesSection: React.FC<{
     handleReplace: Replace;
     handleDownload: (url: string) => void;
     handleUpdateInline?: (modelId: string, attachment: SubmissionAttachment) => void;
+    handleDetachFile?: (attachmentLink: string, modelId: string) => void;
     isEditor: boolean;
     dispatch: Dispatch<Action>;
 }>;

package/dist/types/theme.d.ts

@@ -75,6 +75,7 @@ interface Variations {
 }
 interface Background {
     dark: string;
+    selected: string;
 }
 interface Border {
     field: States;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "0.31.27",
+  "version": "0.31.28-LEAN-1156",
   "repository": "gitlab:atypon-opensource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",