@manuscripts/style-guide 1.8.1 → 1.8.2-LEAN-3429-0

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/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/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/index.js

@@ -35,6 +35,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.errorsDecoder = exports.useDeepCompareCallback = exports.useDeepCompareMemo = void 0;
 __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);

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

@@ -5,7 +5,6 @@ import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, IconButton, IconTextButton, PrimaryButton, SecondaryButton, } from '../Button';
 import { Category, Dialog } from '../Dialog';
-import { AddComment } from '../icons';
 import { CitedItem, CitedItems } from './CitationViewer';
 import { ReferenceLine } from './ReferenceLine';
 import { ReferenceSearch } from './ReferenceSearch';
@@ -107,9 +106,7 @@ export const CitationEditor = ({ query, rids, items, citationCounts, sources, on
                     React.createElement(CloseIconDark, { className: 'remove-icon' }))))))),
         React.createElement(ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: onSave, onDelete: onDelete }),
         React.createElement(Actions, null,
-            React.createElement(IconTextButton, { onClick: onComment },
-                React.createElement(AddComment, null),
-                React.createElement(AddCommentButtonText, null, "Add Comment")),
+            React.createElement(IconTextButton, null),
             React.createElement(ButtonGroup, null,
                 React.createElement(SecondaryButton, { onClick: onCancel }, "Done"),
                 React.createElement(PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation")))));

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/index.js

@@ -15,6 +15,7 @@
  */
 export * from './components/AlertMessage';
 export * from './components/Button';
+export * from './components/ContextMenu';
 export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';

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

@@ -95,3 +95,4 @@ export declare const SecondaryIconButton: import("styled-components").StyledComp
     iconColor?: string | undefined;
 }, "type">;
 export declare const ButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,25 @@
+/*!
+ * © 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';
+export interface Actions {
+    label: string;
+    action: () => void;
+    icon: string;
+}
+export interface ContextMenuProps {
+    actions: Actions[];
+}
+export declare const ContextMenu: React.FC<ContextMenuProps>;

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/index.d.ts

@@ -16,6 +16,7 @@
 export { Theme } from './theme';
 export * from './components/AlertMessage';
 export * from './components/Button';
+export * from './components/ContextMenu';
 export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.8.1",
+  "version": "1.8.2-LEAN-3429-0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -103,4 +103,4 @@
     "@types/react": "^17.0.2",
     "jackspeak": "2.1.1"
   }
-}
+}