@manuscripts/style-guide 1.7.11 → 1.8.0-LEAN-3423-5

package/dist/cjs/components/Button.js

@@ -38,7 +38,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonGroup = exports.SecondaryIconButton = exports.RoundIconButton = exports.IconButton = exports.ToggleButtonAlt = exports.ToggleButton = exports.IconTextButton = exports.TertiaryButton = exports.PrimaryButton = exports.SecondaryButton = void 0;
+exports.IconButtonGroup = exports.ButtonGroup = exports.SecondaryIconButton = exports.RoundIconButton = exports.IconButton = exports.ToggleButtonAlt = exports.ToggleButton = exports.IconTextButton = exports.TertiaryButton = exports.PrimaryButton = exports.SecondaryButton = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const dangerBtnStyles = (0, styled_components_1.css) `
   ${(props) => btnColors(props.theme.colors.button.error.color.default, props.theme.colors.button.error.background.default, props.theme.colors.button.error.border.default, true)}
@@ -288,3 +288,14 @@ exports.ButtonGroup = styled_components_1.default.div `
     margin-left: ${(props) => props.theme.grid.unit}px;
   }
 `;
+exports.IconButtonGroup = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+
+  button {
+    width: 28px;
+    height: 28px;
+  }
+`;

package/dist/cjs/components/ContextMenu.js

@@ -0,0 +1,52 @@
+"use strict";
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("./Button");
+const icons_1 = require("./icons");
+const Tooltip_1 = require("./Tooltip");
+const ContextMenuIconButton = (0, styled_components_1.default)(Button_1.IconButton) `
+  color: #6e6e6e;
+  &:not([disabled]):hover,
+  &:not([disabled]):focus {
+    color: #363636;
+    background-color: #f2f2f2;
+    border-color: #f2f2f2;
+  }
+`;
+const ContextMenu = ({ actions }) => {
+    const IconSelector = ({ iconName }) => {
+        const icons = {
+            AddComment: icons_1.AddComment,
+            EditIcon: icons_1.EditIcon,
+        };
+        const Icon = icons[iconName];
+        return react_1.default.createElement(Icon, null);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.IconButtonGroup, null, actions.map((action) => {
+            return (react_1.default.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
+                react_1.default.createElement(IconSelector, { iconName: action.icon }),
+                react_1.default.createElement(Tooltip_1.Tooltip, { id: action.icon, place: "bottom" }, action.label)));
+        }))));
+};
+exports.ContextMenu = ContextMenu;

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

@@ -1,40 +1,32 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DragLayer = void 0;
-const react_1 = __importStar(require("react"));
+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");
-function getItemStyles(initialOffset, currentOffset) {
-    if (!initialOffset || !currentOffset) {
+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;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  max-width: 400px;
+`;
+const DraggableFileContainer = (0, styled_components_1.default)(FileContainer_1.FileContainer) `
+  padding: 16px 32px;
+  background: #f2fbfc;
+  border: 1px solid #bce7f6;
+  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+`;
+const getItemStyles = (currentOffset) => {
+    if (!currentOffset) {
         return {
             display: 'none',
         };
@@ -45,16 +37,15 @@ function getItemStyles(initialOffset, currentOffset) {
         transform,
         WebkitTransform: transform,
     };
-}
+};
 const DragLayer = () => {
-    const { itemType, isDragging, item, initialOffset, currentOffset } = (0, react_dnd_1.useDragLayer)((monitor) => ({
+    const { itemType, isDragging, item, currentOffset } = (0, react_dnd_1.useDragLayer)((monitor) => ({
         item: monitor.getItem(),
         itemType: monitor.getItemType(),
-        initialOffset: monitor.getInitialSourceClientOffset(),
         currentOffset: monitor.getSourceClientOffset(),
         isDragging: monitor.isDragging(),
     }));
-    const renderItem = (0, react_1.useCallback)(() => {
+    const renderItem = () => {
         switch (itemType) {
             case 'file':
                 return (react_1.default.createElement(DraggableFileContainer, null,
@@ -63,25 +54,10 @@ const DragLayer = () => {
             default:
                 return null;
         }
-    }, [itemType, item]);
+    };
     if (!isDragging) {
         return null;
     }
-    return (react_1.default.createElement(Container, { style: getItemStyles(initialOffset, currentOffset) }, renderItem()));
+    return (react_1.default.createElement(Container, { style: getItemStyles(currentOffset) }, renderItem()));
 };
 exports.DragLayer = DragLayer;
-const Container = styled_components_1.default.div `
-  position: fixed;
-  pointer-events: none;
-  z-index: 999;
-  left: 0;
-  top: 0;
-  max-width: 400px;
-`;
-const DraggableFileContainer = (0, styled_components_1.default)(FileContainer_1.FileContainer) `
-  padding: 16px 32px;
-  background: #f2fbfc;
-  border: 1px solid #bce7f6;
-  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
-`;

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 DragLayer_1 = require("./DragLayer");
 const FileManagerProvider_1 = require("./FileManagerProvider");
 const InlineFilesSection_1 = require("./InlineFilesSection");
 const OtherFilesSection_1 = require("./OtherFilesSection");

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/References/CitationEditor.js

@@ -34,7 +34,6 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button");
 const Dialog_1 = require("../Dialog");
-const icons_1 = require("../icons");
 const CitationViewer_1 = require("./CitationViewer");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ReferenceSearch_1 = require("./ReferenceSearch");
@@ -136,9 +135,7 @@ const CitationEditor = ({ query, rids, items, citationCounts, sources, onCite, o
                     react_1.default.createElement(CloseIconDark_1.default, { className: 'remove-icon' }))))))),
         react_1.default.createElement(ReferencesModal_1.ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: onSave, onDelete: onDelete }),
         react_1.default.createElement(Actions, null,
-            react_1.default.createElement(Button_1.IconTextButton, { onClick: onComment },
-                react_1.default.createElement(icons_1.AddComment, null),
-                react_1.default.createElement(AddCommentButtonText, null, "Add Comment")),
+            react_1.default.createElement(Button_1.IconTextButton, null),
             react_1.default.createElement(Button_1.ButtonGroup, null,
                 react_1.default.createElement(Button_1.SecondaryButton, { onClick: onCancel }, "Done"),
                 react_1.default.createElement(Button_1.PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation")))));

package/dist/cjs/components/icons/index.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.PlusIcon = exports.PullQuoteIcon = exports.BlockQuoteIcon = exports.LeftArrow = exports.AnnotatorIcon = exports.ReadingIcon = exports.EditIcon = exports.UnsupportedFormatFileIcon = exports.MissingImage = exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.AddComment = exports.CloseOIcon = exports.CloseIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
+exports.DeleteIcon = exports.PlusIcon = exports.PullQuoteIcon = exports.BlockQuoteIcon = exports.LeftArrow = exports.AnnotatorIcon = exports.ReadingIcon = exports.EditIcon = exports.UnsupportedFormatFileIcon = exports.MissingImage = exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.AddComment = exports.CloseOIcon = exports.CloseIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
 var add_author_1 = require("./add-author");
 Object.defineProperty(exports, "AddAuthor", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
 var add_icon_active_1 = require("./add-icon-active");
@@ -83,3 +83,5 @@ var pull_quote_icon_1 = require("./pull-quote-icon");
 Object.defineProperty(exports, "PullQuoteIcon", { enumerable: true, get: function () { return __importDefault(pull_quote_icon_1).default; } });
 var plus_icon_1 = require("./plus-icon");
 Object.defineProperty(exports, "PlusIcon", { enumerable: true, get: function () { return __importDefault(plus_icon_1).default; } });
+var delete_icon_1 = require("./delete-icon");
+Object.defineProperty(exports, "DeleteIcon", { enumerable: true, get: function () { return delete_icon_1.DeleteIcon; } });

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

@@ -33,12 +33,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.errorsDecoder = exports.useDeepCompareCallback = exports.useDeepCompareMemo = void 0;
-__exportStar(require("./components/AffiliationsEditor"), exports);
-__exportStar(require("./components/AuthorForm"), exports);
-__exportStar(require("./components/AuthorName"), exports);
-__exportStar(require("./components/AuthorsDND"), exports);
 __exportStar(require("./components/AlertMessage"), exports);
 __exportStar(require("./components/Button"), exports);
+__exportStar(require("./components/ContextMenu"), exports);
 __exportStar(require("./components/RadioButton"), exports);
 __exportStar(require("./components/AutoSaveInput"), exports);
 __exportStar(require("./components/Avatar"), exports);
@@ -51,6 +48,8 @@ __exportStar(require("./components/Resizer"), exports);
 __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);
@@ -77,11 +76,9 @@ __exportStar(require("./hooks/use-menus"), exports);
 var use_deep_compare_1 = require("./hooks/use-deep-compare");
 Object.defineProperty(exports, "useDeepCompareMemo", { enumerable: true, get: function () { return use_deep_compare_1.useDeepCompareMemo; } });
 Object.defineProperty(exports, "useDeepCompareCallback", { enumerable: true, get: function () { return use_deep_compare_1.useDeepCompareCallback; } });
-__exportStar(require("./lib/authors"), exports);
 __exportStar(require("./lib/capabilities"), exports);
 __exportStar(require("./lib/files"), exports);
 __exportStar(require("./lib/comments"), exports);
 __exportStar(require("./lib/menus"), exports);
 var errors_decoder_1 = require("./lib/errors-decoder");
 Object.defineProperty(exports, "errorsDecoder", { enumerable: true, get: function () { return __importDefault(errors_decoder_1).default; } });
-__exportStar(require("./types"), exports);

package/dist/cjs/lib/capabilities.js

@@ -23,6 +23,7 @@ const getCapabilities = (project, profile, role, actions) => {
     const allowed = (action) => !!(actions === null || actions === void 0 ? void 0 : actions.includes(action));
     return {
         handleSuggestion: isOwner() || isEditor() || isWriter(),
+        editWithoutTracking: isWriter(),
         rejectOwnSuggestion: !isViewer(),
         createSuggestion: !isViewer(),
         viewSuggestion: true,
@@ -52,7 +53,6 @@ const getCapabilities = (project, profile, role, actions) => {
         putOnHoldTask: isProdEditor(),
         changeDueDate: isProdEditor() && allowed(Actions.updateDueDate),
         previewAccess: true,
-        editNotTracked: false,
         accessEditor: true,
         formatArticle: !isViewer(),
         editArticle: !isViewer(),

package/dist/es/components/Button.js

@@ -262,3 +262,14 @@ export const ButtonGroup = styled.div `
     margin-left: ${(props) => props.theme.grid.unit}px;
   }
 `;
+export const IconButtonGroup = styled.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+
+  button {
+    width: 28px;
+    height: 28px;
+  }
+`;

package/dist/es/components/ContextMenu.js

@@ -0,0 +1,45 @@
+/*!
+ * © 2024 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import styled from 'styled-components';
+import { IconButton, IconButtonGroup } from './Button';
+import { AddComment, EditIcon } from './icons';
+import { Tooltip } from './Tooltip';
+const ContextMenuIconButton = styled(IconButton) `
+  color: #6e6e6e;
+  &:not([disabled]):hover,
+  &:not([disabled]):focus {
+    color: #363636;
+    background-color: #f2f2f2;
+    border-color: #f2f2f2;
+  }
+`;
+export const ContextMenu = ({ actions }) => {
+    const IconSelector = ({ iconName }) => {
+        const icons = {
+            AddComment: AddComment,
+            EditIcon: EditIcon,
+        };
+        const Icon = icons[iconName];
+        return React.createElement(Icon, null);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButtonGroup, null, actions.map((action) => {
+            return (React.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
+                React.createElement(IconSelector, { iconName: action.icon }),
+                React.createElement(Tooltip, { id: action.icon, place: "bottom" }, action.label)));
+        }))));
+};

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

@@ -1,11 +1,26 @@
-import React, { useCallback } from 'react';
+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';
-function getItemStyles(initialOffset, currentOffset) {
-    if (!initialOffset || !currentOffset) {
+import { FileContainer } from './FileManager/FileContainer';
+import { FileCreatedDate } from './FileManager/FileCreatedDate';
+import { FileName } from './FileManager/FileName';
+const Container = styled.div `
+  position: fixed;
+  pointer-events: none;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  max-width: 400px;
+`;
+const DraggableFileContainer = styled(FileContainer) `
+  padding: 16px 32px;
+  background: #f2fbfc;
+  border: 1px solid #bce7f6;
+  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+`;
+const getItemStyles = (currentOffset) => {
+    if (!currentOffset) {
         return {
             display: 'none',
         };
@@ -16,16 +31,15 @@ function getItemStyles(initialOffset, currentOffset) {
         transform,
         WebkitTransform: transform,
     };
-}
+};
 export const DragLayer = () => {
-    const { itemType, isDragging, item, initialOffset, currentOffset } = useDragLayer((monitor) => ({
+    const { itemType, isDragging, item, currentOffset } = useDragLayer((monitor) => ({
         item: monitor.getItem(),
         itemType: monitor.getItemType(),
-        initialOffset: monitor.getInitialSourceClientOffset(),
         currentOffset: monitor.getSourceClientOffset(),
         isDragging: monitor.isDragging(),
     }));
-    const renderItem = useCallback(() => {
+    const renderItem = () => {
         switch (itemType) {
             case 'file':
                 return (React.createElement(DraggableFileContainer, null,
@@ -34,24 +48,9 @@ export const DragLayer = () => {
             default:
                 return null;
         }
-    }, [itemType, item]);
+    };
     if (!isDragging) {
         return null;
     }
-    return (React.createElement(Container, { style: getItemStyles(initialOffset, currentOffset) }, renderItem()));
+    return (React.createElement(Container, { style: getItemStyles(currentOffset) }, renderItem()));
 };
-const Container = styled.div `
-  position: fixed;
-  pointer-events: none;
-  z-index: 999;
-  left: 0;
-  top: 0;
-  max-width: 400px;
-`;
-const DraggableFileContainer = styled(FileContainer) `
-  padding: 16px 32px;
-  background: #f2fbfc;
-  border: 1px solid #bce7f6;
-  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
-`;

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 { DragLayer } from './DragLayer';
 import { FileManagerProvider } from './FileManagerProvider';
 import { InlineFilesSection } from './InlineFilesSection';
 import { OtherFilesSection } from './OtherFilesSection';

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'};
+`;