@manuscripts/style-guide 1.8.2-LEAN-3300 → 1.8.3-LEAN-3321-0

package/dist/cjs/components/{FileManager/FileManagerDragLayer.js → DragLayer.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.FileManagerDragLayer = void 0;
+exports.DragLayer = 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("./FileContainer");
-const FileCreatedDate_1 = require("./FileCreatedDate");
-const FileName_1 = require("./FileName");
+const FileContainer_1 = require("./FileManager/FileContainer");
+const FileCreatedDate_1 = require("./FileManager/FileCreatedDate");
+const FileName_1 = require("./FileManager/FileName");
 const Container = styled_components_1.default.div `
   position: fixed;
   pointer-events: none;
@@ -38,18 +38,26 @@ const getItemStyles = (currentOffset) => {
         WebkitTransform: transform,
     };
 };
-const FileManagerDragLayer = () => {
+const DragLayer = () => {
     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) }, 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 })))));
+    return (react_1.default.createElement(Container, { style: getItemStyles(currentOffset) }, renderItem()));
 };
-exports.FileManagerDragLayer = FileManagerDragLayer;
+exports.DragLayer = DragLayer;

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(FileManagerDragLayer_1.FileManagerDragLayer, null),
+        react_1.default.createElement(DragLayer_1.DragLayer, 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/FileManager/FileUploader.js

@@ -22,30 +22,44 @@ 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 = ({ onUpload }) => {
+const FileUploader = ({ handler }) => {
     const fileInputRef = (0, react_1.useRef)(null);
     const openFileDialog = () => {
         if (fileInputRef && fileInputRef.current) {
             fileInputRef.current.click();
         }
     };
-    const handleChange = (event) => {
+    const handleChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
         if (event && event.target && event.target.files) {
             const file = event.target.files[0];
-            onUpload(file);
+            yield handler(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) => {
-            const file = item.files[0];
-            onUpload(file);
+        drop(item, monitor) {
+            handleFileDrop(monitor);
         },
         collect: (monitor) => ({
             isOver: monitor.isOver(),
@@ -54,7 +68,7 @@ const FileUploader = ({ onUpload }) => {
     });
     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: handleChange, value: '' }),
+        react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), 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 handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const upload = (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, { onUpload: handleUpload }),
+        (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { handler: upload }),
         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 }, dragRef, preview] = (0, react_dnd_1.useDrag)({
-        type: 'file',
+    const [{ isDragging }, drag, preview] = (0, react_dnd_1.useDrag)({
         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: dragRef, className: isDragging ? 'dragging' : '' },
+    return (react_1.default.createElement(FileContainer_1.FileContainer, { key: file.id, "data-cy": "file-container", ref: drag, 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, { onUpload: handleUpload }),
+        (can === null || can === void 0 ? void 0 : can.uploadFile) && react_1.default.createElement(FileUploader_1.FileUploader, { handler: 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 }, dragRef, preview] = (0, react_dnd_1.useDrag)({
-        type: 'file',
+    const [{ isDragging }, drag, preview] = (0, react_dnd_1.useDrag)({
         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: dragRef, className: isDragging ? 'dragging' : '' },
+    return (react_1.default.createElement(FileContainer_1.FileContainer, { "data-cy": "file-container", key: file.id, ref: drag, 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/Menus/Menus.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menus = void 0;
+exports.Label = exports.Block = exports.BlockItem = exports.StyleBlock = exports.ListContainer = exports.bulletListContextMenu = exports.orderedListContextMenu = exports.Menus = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Submenu_1 = require("./Submenu");
@@ -58,3 +58,56 @@ const Menus = ({ menus, innerRef, handleClick, }) => {
     })));
 };
 exports.Menus = Menus;
+exports.orderedListContextMenu = [
+    { items: ['1.', '2.', '3.'], type: 'order' },
+    { items: ['A.', 'B.', 'C.'], type: 'alpha-upper' },
+    { items: ['a.', 'b.', 'c.'], type: 'alpha-lower' },
+    { items: ['I.', 'II.', 'III.'], type: 'roman-upper' },
+    { items: ['i.', 'ii.', 'iii.'], type: 'roman-lower' },
+];
+exports.bulletListContextMenu = [
+    { items: ['•', '•', '•'], type: 'bullet' },
+    { items: ['-', '-', '-'], type: 'simple' },
+];
+exports.ListContainer = styled_components_1.default.div `
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+  display: grid;
+  grid-template-columns:
+    ${(props) => props.theme.grid.unit * 21}px
+    ${(props) => props.theme.grid.unit * 21}px;
+  gap: 6px;
+`;
+exports.StyleBlock = styled_components_1.default.div `
+  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(props) => props.theme.grid.unit * 2}px;
+
+  &:hover {
+    background: ${(props) => props.theme.colors.button.default.border.hover};
+  }
+
+  &:active {
+    border-color: ${(props) => props.theme.colors.border.primary};
+  }
+`;
+exports.BlockItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+exports.Block = styled_components_1.default.div `
+  height: 3px;
+  width: ${(props) => props.theme.grid.unit * 14}px;
+  background: ${(props) => props.theme.colors.border.tertiary};
+`;
+exports.Label = styled_components_1.default.div `
+  font-family: Lato, serif;
+  font-size: ${(props) => props.theme.font.size.small};
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  line-height: ${(props) => props.theme.font.lineHeight.small};
+  font-style: normal;
+  color: ${(props) => (props.hide && 'white') || 'initial'};
+`;

package/dist/cjs/components/Menus/Submenu.js

@@ -23,6 +23,7 @@ const TriangleCollapsed_1 = __importDefault(require("@manuscripts/assets/react/T
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const menus_1 = require("../../lib/menus");
+const Menus_1 = require("./Menus");
 const Shortcut_1 = require("./Shortcut");
 exports.Text = styled_components_1.default.div `
   flex: 1 0 auto;
@@ -37,8 +38,6 @@ exports.SubmenusContainer = styled_components_1.default.div `
   box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);
   color: #353535;
   min-width: 150px;
-  max-height: 70vh;
-  overflow-y: auto;
   padding: 4px 0;
   white-space: nowrap;
   width: auto;
@@ -96,7 +95,7 @@ const Submenu = ({ menu, handleClick }) => {
     if ((0, menus_1.isMenuSeparator)(menu)) {
         return react_1.default.createElement(Separator, null);
     }
-    if (!menu.submenu) {
+    if (!menu.submenu && !menu.options) {
         return (react_1.default.createElement(Container, { isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
                 e.preventDefault();
                 handleClick([]);
@@ -105,6 +104,17 @@ const Submenu = ({ menu, handleClick }) => {
             react_1.default.createElement(exports.Text, null, menu.label),
             menu.shortcut && react_1.default.createElement(Shortcut_1.Shortcut, { shortcut: menu.shortcut })));
     }
+    if (menu.options) {
+        const styles = menu.id === 'bullet-list-context-menu'
+            ? Menus_1.bulletListContextMenu
+            : Menus_1.orderedListContextMenu;
+        return (react_1.default.createElement(Menus_1.ListContainer, null, styles.map((style, index) => (react_1.default.createElement(Menus_1.StyleBlock, { key: index, onClick: () => {
+                menu.options && menu.options[style.type]();
+                handleClick([-1, -1]);
+            } }, style.items.map((style, index) => (react_1.default.createElement(Menus_1.BlockItem, { key: index },
+            react_1.default.createElement(Menus_1.Label, { hide: style === '-' }, style),
+            react_1.default.createElement(Menus_1.Block, null)))))))));
+    }
     return (react_1.default.createElement(SubmenuContainer, null,
         react_1.default.createElement(Container, { onMouseDown: (e) => {
                 e.preventDefault();

package/dist/cjs/components/TableFootnotesSelector.js

@@ -96,8 +96,7 @@ const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) => {
         return selections.has(item.attrs.id);
     };
     const handleClick = () => {
-        const items = Array.from(selections.values());
-        return onInsert(items);
+        return onInsert(notes.filter(({ node }) => selections.has(node.attrs.id)));
     };
     return (react_1.default.createElement(Container, null,
         react_1.default.createElement(NotesContainer, null,
@@ -113,11 +112,11 @@ const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) => {
 };
 exports.TableFootnotesSelector = TableFootnotesSelector;
 const TableFootnotesList = ({ notes, isSelected, onSelect }) => {
-    return (react_1.default.createElement(NotesListContainer, null, notes.map((note, index) => {
+    return (react_1.default.createElement(NotesListContainer, null, notes.map(({ node, index }) => {
         var _a;
-        return (react_1.default.createElement(FootnoteItem, { onClick: () => onSelect(note), key: note.attrs.id },
-            react_1.default.createElement(StatusIcon, null, isSelected(note) ? (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 + '. ' + ((_a = note.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
+        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 NotesListContainer = styled_components_1.default.div `

package/dist/cjs/hooks/use-dropdown.js

@@ -19,8 +19,7 @@ exports.useDropdown = void 0;
 const react_1 = require("react");
 const useDropdown = () => {
     const [isOpen, setOpen] = (0, react_1.useState)(false);
-    const toggleOpen = (0, react_1.useCallback)((e) => {
-        e === null || e === void 0 ? void 0 : e.stopPropagation();
+    const toggleOpen = (0, react_1.useCallback)(() => {
         setOpen((open) => !open);
     }, []);
     const wrapperRef = (0, react_1.useRef)(null);

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

@@ -67,6 +67,9 @@ const useMenus = (menus) => {
             const index = indices[depth];
             setPointer(transformPointer(depth, index));
         }
+        if (menu.options) {
+            setPointer([-1, -1, -1]);
+        }
     }, [state]);
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {

package/dist/cjs/index.js

@@ -49,6 +49,7 @@ __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/FileManagerDragLayer.js → DragLayer.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useDragLayer } from 'react-dnd';
 import styled from 'styled-components';
-import { FileContainer } from './FileContainer';
-import { FileCreatedDate } from './FileCreatedDate';
-import { FileName } from './FileName';
+import { FileContainer } from './FileManager/FileContainer';
+import { FileCreatedDate } from './FileManager/FileCreatedDate';
+import { FileName } from './FileManager/FileName';
 const Container = styled.div `
   position: fixed;
   pointer-events: none;
@@ -32,17 +32,25 @@ const getItemStyles = (currentOffset) => {
         WebkitTransform: transform,
     };
 };
-export const FileManagerDragLayer = () => {
+export const DragLayer = () => {
     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) }, itemType === 'file' && (React.createElement(DraggableFileContainer, null,
-        React.createElement(FileName, { file: item.file }),
-        item.file.createdDate && React.createElement(FileCreatedDate, { file: item.file })))));
+    return (React.createElement(Container, { style: getItemStyles(currentOffset) }, renderItem()));
 };

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(FileManagerDragLayer, null),
+        React.createElement(DragLayer, 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/FileManager/FileUploader.js

@@ -1,25 +1,39 @@
-import React, { useRef } from 'react';
+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 = ({ onUpload }) => {
+export const FileUploader = ({ handler }) => {
     const fileInputRef = useRef(null);
     const openFileDialog = () => {
         if (fileInputRef && fileInputRef.current) {
             fileInputRef.current.click();
         }
     };
-    const handleChange = (event) => {
+    const handleChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
         if (event && event.target && event.target.files) {
             const file = event.target.files[0];
-            onUpload(file);
+            yield handler(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) => {
-            const file = item.files[0];
-            onUpload(file);
+        drop(item, monitor) {
+            handleFileDrop(monitor);
         },
         collect: (monitor) => ({
             isOver: monitor.isOver(),
@@ -28,7 +42,7 @@ export const FileUploader = ({ onUpload }) => {
     });
     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: handleChange, value: '' }),
+        React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: (e) => handleChange(e), 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 handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const upload = (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, { onUpload: handleUpload }),
+        (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { handler: upload }),
         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 }, dragRef, preview] = useDrag({
-        type: 'file',
+    const [{ isDragging }, drag, preview] = useDrag({
         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: dragRef, className: isDragging ? 'dragging' : '' },
+    return (React.createElement(FileContainer, { key: file.id, "data-cy": "file-container", ref: drag, 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, { onUpload: handleUpload }),
+        (can === null || can === void 0 ? void 0 : can.uploadFile) && React.createElement(FileUploader, { handler: 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 }, dragRef, preview] = useDrag({
-        type: 'file',
+    const [{ isDragging }, drag, preview] = useDrag({
         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: dragRef, className: isDragging ? 'dragging' : '' },
+    return (React.createElement(FileContainer, { "data-cy": "file-container", key: file.id, ref: drag, 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/Menus/Menus.js

@@ -51,3 +51,56 @@ export const Menus = ({ menus, innerRef, handleClick, }) => {
             })))));
     })));
 };
+export const orderedListContextMenu = [
+    { items: ['1.', '2.', '3.'], type: 'order' },
+    { items: ['A.', 'B.', 'C.'], type: 'alpha-upper' },
+    { items: ['a.', 'b.', 'c.'], type: 'alpha-lower' },
+    { items: ['I.', 'II.', 'III.'], type: 'roman-upper' },
+    { items: ['i.', 'ii.', 'iii.'], type: 'roman-lower' },
+];
+export const bulletListContextMenu = [
+    { items: ['•', '•', '•'], type: 'bullet' },
+    { items: ['-', '-', '-'], type: 'simple' },
+];
+export const ListContainer = styled.div `
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+  display: grid;
+  grid-template-columns:
+    ${(props) => props.theme.grid.unit * 21}px
+    ${(props) => props.theme.grid.unit * 21}px;
+  gap: 6px;
+`;
+export const StyleBlock = styled.div `
+  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(props) => props.theme.grid.unit * 2}px;
+
+  &:hover {
+    background: ${(props) => props.theme.colors.button.default.border.hover};
+  }
+
+  &:active {
+    border-color: ${(props) => props.theme.colors.border.primary};
+  }
+`;
+export const BlockItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+export const Block = styled.div `
+  height: 3px;
+  width: ${(props) => props.theme.grid.unit * 14}px;
+  background: ${(props) => props.theme.colors.border.tertiary};
+`;
+export const Label = styled.div `
+  font-family: Lato, serif;
+  font-size: ${(props) => props.theme.font.size.small};
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  line-height: ${(props) => props.theme.font.lineHeight.small};
+  font-style: normal;
+  color: ${(props) => (props.hide && 'white') || 'initial'};
+`;

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

@@ -17,6 +17,7 @@ import TriangleCollapsed from '@manuscripts/assets/react/TriangleCollapsed';
 import React from 'react';
 import styled from 'styled-components';
 import { isMenuSeparator } from '../../lib/menus';
+import { Block, BlockItem, bulletListContextMenu, Label, ListContainer, orderedListContextMenu, StyleBlock, } from './Menus';
 import { Shortcut } from './Shortcut';
 export const Text = styled.div `
   flex: 1 0 auto;
@@ -31,8 +32,6 @@ export const SubmenusContainer = styled.div `
   box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);
   color: #353535;
   min-width: 150px;
-  max-height: 70vh;
-  overflow-y: auto;
   padding: 4px 0;
   white-space: nowrap;
   width: auto;
@@ -90,7 +89,7 @@ export const Submenu = ({ menu, handleClick }) => {
     if (isMenuSeparator(menu)) {
         return React.createElement(Separator, null);
     }
-    if (!menu.submenu) {
+    if (!menu.submenu && !menu.options) {
         return (React.createElement(Container, { isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
                 e.preventDefault();
                 handleClick([]);
@@ -99,6 +98,17 @@ export const Submenu = ({ menu, handleClick }) => {
             React.createElement(Text, null, menu.label),
             menu.shortcut && React.createElement(Shortcut, { shortcut: menu.shortcut })));
     }
+    if (menu.options) {
+        const styles = menu.id === 'bullet-list-context-menu'
+            ? bulletListContextMenu
+            : orderedListContextMenu;
+        return (React.createElement(ListContainer, null, styles.map((style, index) => (React.createElement(StyleBlock, { key: index, onClick: () => {
+                menu.options && menu.options[style.type]();
+                handleClick([-1, -1]);
+            } }, style.items.map((style, index) => (React.createElement(BlockItem, { key: index },
+            React.createElement(Label, { hide: style === '-' }, style),
+            React.createElement(Block, null)))))))));
+    }
     return (React.createElement(SubmenuContainer, null,
         React.createElement(Container, { onMouseDown: (e) => {
                 e.preventDefault();

package/dist/es/components/TableFootnotesSelector.js

@@ -67,8 +67,7 @@ export const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) =>
         return selections.has(item.attrs.id);
     };
     const handleClick = () => {
-        const items = Array.from(selections.values());
-        return onInsert(items);
+        return onInsert(notes.filter(({ node }) => selections.has(node.attrs.id)));
     };
     return (React.createElement(Container, null,
         React.createElement(NotesContainer, null,
@@ -83,11 +82,11 @@ export const TableFootnotesSelector = ({ notes, onAdd, onInsert, onCancel }) =>
                 React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Insert")))));
 };
 const TableFootnotesList = ({ notes, isSelected, onSelect }) => {
-    return (React.createElement(NotesListContainer, null, notes.map((note, index) => {
+    return (React.createElement(NotesListContainer, null, notes.map(({ node, index }) => {
         var _a;
-        return (React.createElement(FootnoteItem, { onClick: () => onSelect(note), key: note.attrs.id },
-            React.createElement(StatusIcon, null, isSelected(note) ? (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 + '. ' + ((_a = note.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
+        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 NotesListContainer = styled.div `

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

@@ -16,8 +16,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 export const useDropdown = () => {
     const [isOpen, setOpen] = useState(false);
-    const toggleOpen = useCallback((e) => {
-        e === null || e === void 0 ? void 0 : e.stopPropagation();
+    const toggleOpen = useCallback(() => {
         setOpen((open) => !open);
     }, []);
     const wrapperRef = useRef(null);

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

@@ -64,6 +64,9 @@ export const useMenus = (menus) => {
             const index = indices[depth];
             setPointer(transformPointer(depth, index));
         }
+        if (menu.options) {
+            setPointer([-1, -1, -1]);
+        }
     }, [state]);
     const ref = useRef(null);
     useEffect(() => {

package/dist/es/index.js

@@ -29,6 +29,7 @@ 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/DragLayer.d.ts

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

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

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

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

@@ -21,4 +21,19 @@ interface MenusProps {
     handleClick: (position: number[]) => void;
 }
 export declare const Menus: React.FC<MenusProps>;
+export declare const orderedListContextMenu: {
+    items: string[];
+    type: string;
+}[];
+export declare const bulletListContextMenu: {
+    items: string[];
+    type: string;
+}[];
+export declare const ListContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyleBlock: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const BlockItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Block: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    hide?: boolean | undefined;
+}, never>;
 export {};

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

@@ -15,9 +15,13 @@
  */
 import { FootnoteNode } from '@manuscripts/transform';
 import React from 'react';
+export type FootnoteWithIndex = {
+    node: FootnoteNode;
+    index?: string;
+};
 export declare const TableFootnotesSelector: React.FC<{
-    notes: FootnoteNode[];
+    notes: FootnoteWithIndex[];
     onAdd: () => void;
-    onInsert: (notes: FootnoteNode[]) => void;
+    onInsert: (notes: FootnoteWithIndex[]) => void;
     onCancel: () => void;
 }>;

package/dist/types/hooks/use-dropdown.d.ts

@@ -16,6 +16,6 @@
 /// <reference types="react" />
 export declare const useDropdown: () => {
     isOpen: boolean;
-    toggleOpen: (e: any) => void;
+    toggleOpen: () => void;
     wrapperRef: import("react").RefObject<HTMLDivElement>;
 };

package/dist/types/index.d.ts

@@ -30,6 +30,7 @@ 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/lib/menus.d.ts

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ManuscriptTransaction } from '@manuscripts/transform';
+export type Dispatch = (tr: ManuscriptTransaction) => void;
 export interface MenuShortcut {
     mac: string;
     pc: string;
@@ -26,6 +28,9 @@ export interface MenuSpec {
     isEnabled: boolean;
     run?: () => void;
     submenu?: (MenuSpec | MenuSeparator)[];
+    options?: {
+        [key: string]: () => void;
+    };
 }
 export interface Menu extends MenuSpec {
     isOpen: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.8.2-LEAN-3300",
+  "version": "1.8.3-LEAN-3321-0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -33,16 +33,16 @@
   },
   "dependencies": {
     "@manuscripts/assets": "^0.6.4",
-    "@manuscripts/json-schema": "^2.2.6",
-    "@manuscripts/transform": "^2.1.6",
+    "@manuscripts/json-schema": "^2.2.7",
+    "@manuscripts/transform": "2.1.10-LEAN-3321",
     "@reach/tabs": "^0.18.0",
     "date-fns": "^2.29.3",
     "formik": "^2.2.9",
     "fuzzysort": "^2.0.4",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "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/FileManager/FileManagerDragLayer.d.ts

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