@manuscripts/style-guide 1.8.2-LEAN-3321-1 → 1.8.3

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/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/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/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-3321-1",
+  "version": "1.8.3",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@manuscripts/assets": "^0.6.4",
-    "@manuscripts/json-schema": "^2.2.6",
-    "@manuscripts/transform": "2.1.9-LEAN-3321",
+    "@manuscripts/json-schema": "^2.2.7",
+    "@manuscripts/transform": "^2.1.10",
     "@reach/tabs": "^0.18.0",
     "date-fns": "^2.29.3",
     "formik": "^2.2.9",
@@ -103,4 +103,4 @@
     "@types/react": "^17.0.2",
     "jackspeak": "2.1.1"
   }
-}
+}