@manuscripts/style-guide 2.0.16 → 2.0.17-LEAN-3573-menus.0

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

@@ -14,38 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-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.ColumnChangeWarningDialog = exports.Label = exports.Block = exports.BlockItem = exports.StyleBlock = exports.ListContainer = exports.bulletListContextMenu = exports.orderedListContextMenu = exports.Menus = void 0;
-const react_1 = __importStar(require("react"));
+exports.Menus = void 0;
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Dialog_1 = require("../Dialog");
-const InsertTableDialog_1 = require("../InsertTableDialog");
 const Submenu_1 = require("./Submenu");
 const MenusContainer = styled_components_1.default.div `
   display: flex;
@@ -69,104 +44,16 @@ const MenuContainer = styled_components_1.default.div `
   }
 `;
 const Menus = ({ menus, innerRef, handleClick, }) => {
-    const [columnMenu, setColumnMenu] = (0, react_1.useState)(undefined);
-    const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
-    const [indices, setIndices] = (0, react_1.useState)([]);
-    const toggleDialog = () => {
-        setOpenDialog(!openDialog);
-    };
-    return (react_1.default.createElement(MenusContainer, { ref: innerRef },
-        menus.map((menu, index) => {
-            return (react_1.default.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
-                react_1.default.createElement(MenuHeading, { onMouseDown: (e) => {
-                        e.preventDefault();
-                        handleClick([index]);
-                    }, isOpen: menu.isOpen },
-                    react_1.default.createElement(Submenu_1.Text, null, menu.label)),
-                menu.isEnabled && menu.isOpen && menu.submenu && (react_1.default.createElement(Submenu_1.SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
-                    return (react_1.default.createElement(Submenu_1.Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => {
-                            const indices = [index, sindex, ...i];
-                            if ('id' in submenu &&
-                                submenu.id === 'insert-table-element') {
-                                setIndices(indices);
-                                toggleDialog();
-                            }
-                            else {
-                                handleClick(indices);
-                            }
-                        }, setColumnMenu: setColumnMenu }));
-                })))));
-        }),
-        react_1.default.createElement(exports.ColumnChangeWarningDialog, { isOpen: !!columnMenu, primaryAction: () => {
-                if (columnMenu === null || columnMenu === void 0 ? void 0 : columnMenu.run) {
-                    columnMenu.run();
-                    setColumnMenu(undefined);
-                }
-            }, secondaryAction: () => setColumnMenu(undefined) }),
-        openDialog && (react_1.default.createElement(InsertTableDialog_1.InsertTableDialog, { run: (tableConfig) => handleClick(indices, tableConfig), open: openDialog, onClose: toggleDialog }))));
+    return (react_1.default.createElement(MenusContainer, { ref: innerRef }, menus.map((menu, index) => {
+        return (react_1.default.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
+            react_1.default.createElement(MenuHeading, { onMouseDown: (e) => {
+                    e.preventDefault();
+                    handleClick([index]);
+                }, isOpen: menu.isOpen },
+                react_1.default.createElement(Submenu_1.Text, null, menu.label)),
+            menu.isEnabled && menu.isOpen && menu.submenu && (react_1.default.createElement(Submenu_1.SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
+                return (react_1.default.createElement(Submenu_1.Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }));
+            })))));
+    })));
 };
 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'};
-`;
-const ColumnChangeWarningDialog = ({ isOpen, primaryAction, secondaryAction }) => (react_1.default.createElement(Dialog_1.Dialog, { isOpen: isOpen, category: Dialog_1.Category.confirmation, header: "This change can't be tracked", message: "This column action won't be marked as chnage. Do you want to continue?", actions: {
-        primary: {
-            action: primaryAction,
-            title: 'Ok',
-        },
-        secondary: {
-            action: secondaryAction,
-            title: 'Cancel',
-        },
-    } }));
-exports.ColumnChangeWarningDialog = ColumnChangeWarningDialog;

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

@@ -18,17 +18,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Submenu = exports.SubmenusContainer = exports.Text = void 0;
+exports.Submenu = exports.SubmenuLabel = exports.NestedSubmenusContainer = exports.SubmenusContainer = exports.SubmenuContainer = exports.Text = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const menus_1 = require("../../lib/menus");
 const icons_1 = require("../icons");
-const Menus_1 = require("./Menus");
 const Shortcut_1 = require("./Shortcut");
 exports.Text = styled_components_1.default.div `
   flex: 1 0 auto;
 `;
-const SubmenuContainer = styled_components_1.default.div `
+exports.SubmenuContainer = styled_components_1.default.div `
   position: relative;
 `;
 exports.SubmenusContainer = styled_components_1.default.div `
@@ -54,7 +53,7 @@ exports.SubmenusContainer = styled_components_1.default.div `
     top: 8px;
   }
 `;
-const NestedSubmenusContainer = (0, styled_components_1.default)(exports.SubmenusContainer) `
+exports.NestedSubmenusContainer = (0, styled_components_1.default)(exports.SubmenusContainer) `
   top: 0;
   left: 100%;
 `;
@@ -91,45 +90,32 @@ const Container = styled_components_1.default.div `
   }
 `;
 const activeContent = (menu) => (menu.isActive ? '✓' : '');
-const isColumnMenu = (menu) => (menu.role !== 'separator' &&
-    menu.id === 'format-table-add-column-before') ||
-    menu.id === 'format-table-add-column-after' ||
-    menu.id === 'format-table-delete-column';
-const Submenu = ({ menu, handleClick, setColumnMenu, }) => {
+const SubmenuLabel = ({ menu, handleClick }) => {
+    if ((0, menus_1.isMenuSeparator)(menu)) {
+        return null;
+    }
+    return (react_1.default.createElement(Container, { isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
+            e.preventDefault();
+            handleClick([]);
+        } },
+        react_1.default.createElement(Active, null, activeContent(menu)),
+        react_1.default.createElement(exports.Text, null, menu.label),
+        menu.submenu && react_1.default.createElement(Arrow, null),
+        menu.shortcut && react_1.default.createElement(Shortcut_1.Shortcut, { shortcut: menu.shortcut })));
+};
+exports.SubmenuLabel = SubmenuLabel;
+const Submenu = ({ menu, handleClick }) => {
     if ((0, menus_1.isMenuSeparator)(menu)) {
         return react_1.default.createElement(Separator, null);
     }
-    if (!menu.submenu && !menu.options) {
-        return (react_1.default.createElement(Container, { isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
-                e.preventDefault();
-                handleClick([]);
-            } },
-            react_1.default.createElement(Active, null, activeContent(menu)),
-            react_1.default.createElement(exports.Text, null, menu.label),
-            menu.shortcut && react_1.default.createElement(Shortcut_1.Shortcut, { shortcut: menu.shortcut })));
+    if (menu.component) {
+        return react_1.default.createElement(menu.component, { menu: menu, handleClick: handleClick });
     }
-    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)))))))));
+    if (!menu.submenu) {
+        return react_1.default.createElement(exports.SubmenuLabel, { menu: menu, handleClick: handleClick });
     }
-    return (react_1.default.createElement(SubmenuContainer, null,
-        react_1.default.createElement(Container, { onMouseDown: (e) => {
-                e.preventDefault();
-                handleClick([]);
-            }, isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled' },
-            react_1.default.createElement(Active, null, activeContent(menu)),
-            react_1.default.createElement(exports.Text, null, menu.label),
-            menu.submenu && react_1.default.createElement(Arrow, null),
-            menu.shortcut && react_1.default.createElement(Shortcut_1.Shortcut, { shortcut: menu.shortcut })),
-        menu.submenu && menu.isOpen && (react_1.default.createElement(NestedSubmenusContainer, null, menu.submenu.map((submenu, index) => (react_1.default.createElement(exports.Submenu, { key: `menu-${index}`, menu: submenu, handleClick: (i) => isColumnMenu(submenu) && setColumnMenu
-                ? setColumnMenu(submenu)
-                : handleClick([index, ...i]) })))))));
+    return (react_1.default.createElement(exports.SubmenuContainer, null,
+        react_1.default.createElement(exports.SubmenuLabel, { menu: menu, handleClick: handleClick }),
+        menu.submenu && menu.isOpen && (react_1.default.createElement(exports.NestedSubmenusContainer, null, menu.submenu.map((submenu, index) => (react_1.default.createElement(exports.Submenu, { key: `menu-${index}`, menu: submenu, handleClick: (i) => handleClick([index, ...i]) })))))));
 };
 exports.Submenu = Submenu;

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

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Menus"), exports);
+__exportStar(require("./Submenu"), exports);

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

@@ -53,13 +53,13 @@ const getMenuAt = (state, position) => {
 const useMenus = (menus) => {
     const [pointer, setPointer] = (0, react_1.useState)(initialPointer);
     const state = getMenuState(menus, pointer);
-    const handleClick = (0, react_1.useCallback)((indices, tableConfig) => {
+    const handleClick = (0, react_1.useCallback)((indices) => {
         const menu = getMenuAt(state, indices);
         if (!menu || !menu.isEnabled) {
             return;
         }
         if (menu.run) {
-            menu.run(tableConfig);
+            menu.run();
             setPointer([-1, -1, -1]);
         }
         else if (menu.submenu) {
@@ -67,9 +67,6 @@ 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

@@ -40,7 +40,6 @@ __exportStar(require("./components/RadioButton"), exports);
 __exportStar(require("./components/AutoSaveInput"), exports);
 __exportStar(require("./components/Avatar"), exports);
 __exportStar(require("./components/Dialog"), exports);
-__exportStar(require("./components/InsertTableDialog"), exports);
 __exportStar(require("./components/Checkbox"), exports);
 __exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/Resizer"), exports);

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

@@ -13,10 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
-import { Category, Dialog } from '../Dialog';
-import { InsertTableDialog } from '../InsertTableDialog';
 import { Submenu, SubmenusContainer, Text } from './Submenu';
 const MenusContainer = styled.div `
   display: flex;
@@ -40,102 +38,15 @@ const MenuContainer = styled.div `
   }
 `;
 export const Menus = ({ menus, innerRef, handleClick, }) => {
-    const [columnMenu, setColumnMenu] = useState(undefined);
-    const [openDialog, setOpenDialog] = useState(false);
-    const [indices, setIndices] = useState([]);
-    const toggleDialog = () => {
-        setOpenDialog(!openDialog);
-    };
-    return (React.createElement(MenusContainer, { ref: innerRef },
-        menus.map((menu, index) => {
-            return (React.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
-                React.createElement(MenuHeading, { onMouseDown: (e) => {
-                        e.preventDefault();
-                        handleClick([index]);
-                    }, isOpen: menu.isOpen },
-                    React.createElement(Text, null, menu.label)),
-                menu.isEnabled && menu.isOpen && menu.submenu && (React.createElement(SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
-                    return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => {
-                            const indices = [index, sindex, ...i];
-                            if ('id' in submenu &&
-                                submenu.id === 'insert-table-element') {
-                                setIndices(indices);
-                                toggleDialog();
-                            }
-                            else {
-                                handleClick(indices);
-                            }
-                        }, setColumnMenu: setColumnMenu }));
-                })))));
-        }),
-        React.createElement(ColumnChangeWarningDialog, { isOpen: !!columnMenu, primaryAction: () => {
-                if (columnMenu === null || columnMenu === void 0 ? void 0 : columnMenu.run) {
-                    columnMenu.run();
-                    setColumnMenu(undefined);
-                }
-            }, secondaryAction: () => setColumnMenu(undefined) }),
-        openDialog && (React.createElement(InsertTableDialog, { run: (tableConfig) => handleClick(indices, tableConfig), open: openDialog, onClose: toggleDialog }))));
+    return (React.createElement(MenusContainer, { ref: innerRef }, menus.map((menu, index) => {
+        return (React.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
+            React.createElement(MenuHeading, { onMouseDown: (e) => {
+                    e.preventDefault();
+                    handleClick([index]);
+                }, isOpen: menu.isOpen },
+                React.createElement(Text, null, menu.label)),
+            menu.isEnabled && menu.isOpen && menu.submenu && (React.createElement(SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
+                return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }));
+            })))));
+    })));
 };
-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'};
-`;
-export const ColumnChangeWarningDialog = ({ isOpen, primaryAction, secondaryAction }) => (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: "This change can't be tracked", message: "This column action won't be marked as chnage. Do you want to continue?", actions: {
-        primary: {
-            action: primaryAction,
-            title: 'Ok',
-        },
-        secondary: {
-            action: secondaryAction,
-            title: 'Cancel',
-        },
-    } }));

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

@@ -17,12 +17,11 @@ import React from 'react';
 import styled from 'styled-components';
 import { isMenuSeparator } from '../../lib/menus';
 import { TriangleCollapsedIcon } from '../icons';
-import { Block, BlockItem, bulletListContextMenu, Label, ListContainer, orderedListContextMenu, StyleBlock, } from './Menus';
 import { Shortcut } from './Shortcut';
 export const Text = styled.div `
   flex: 1 0 auto;
 `;
-const SubmenuContainer = styled.div `
+export const SubmenuContainer = styled.div `
   position: relative;
 `;
 export const SubmenusContainer = styled.div `
@@ -48,7 +47,7 @@ export const SubmenusContainer = styled.div `
     top: 8px;
   }
 `;
-const NestedSubmenusContainer = styled(SubmenusContainer) `
+export const NestedSubmenusContainer = styled(SubmenusContainer) `
   top: 0;
   left: 100%;
 `;
@@ -85,44 +84,30 @@ const Container = styled.div `
   }
 `;
 const activeContent = (menu) => (menu.isActive ? '✓' : '');
-const isColumnMenu = (menu) => (menu.role !== 'separator' &&
-    menu.id === 'format-table-add-column-before') ||
-    menu.id === 'format-table-add-column-after' ||
-    menu.id === 'format-table-delete-column';
-export const Submenu = ({ menu, handleClick, setColumnMenu, }) => {
+export const SubmenuLabel = ({ menu, handleClick }) => {
+    if (isMenuSeparator(menu)) {
+        return null;
+    }
+    return (React.createElement(Container, { isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
+            e.preventDefault();
+            handleClick([]);
+        } },
+        React.createElement(Active, null, activeContent(menu)),
+        React.createElement(Text, null, menu.label),
+        menu.submenu && React.createElement(Arrow, null),
+        menu.shortcut && React.createElement(Shortcut, { shortcut: menu.shortcut })));
+};
+export const Submenu = ({ menu, handleClick }) => {
     if (isMenuSeparator(menu)) {
         return React.createElement(Separator, null);
     }
-    if (!menu.submenu && !menu.options) {
-        return (React.createElement(Container, { isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
-                e.preventDefault();
-                handleClick([]);
-            } },
-            React.createElement(Active, null, activeContent(menu)),
-            React.createElement(Text, null, menu.label),
-            menu.shortcut && React.createElement(Shortcut, { shortcut: menu.shortcut })));
+    if (menu.component) {
+        return React.createElement(menu.component, { menu: menu, handleClick: handleClick });
     }
-    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)))))))));
+    if (!menu.submenu) {
+        return React.createElement(SubmenuLabel, { menu: menu, handleClick: handleClick });
     }
     return (React.createElement(SubmenuContainer, null,
-        React.createElement(Container, { onMouseDown: (e) => {
-                e.preventDefault();
-                handleClick([]);
-            }, isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled' },
-            React.createElement(Active, null, activeContent(menu)),
-            React.createElement(Text, null, menu.label),
-            menu.submenu && React.createElement(Arrow, null),
-            menu.shortcut && React.createElement(Shortcut, { shortcut: menu.shortcut })),
-        menu.submenu && menu.isOpen && (React.createElement(NestedSubmenusContainer, null, menu.submenu.map((submenu, index) => (React.createElement(Submenu, { key: `menu-${index}`, menu: submenu, handleClick: (i) => isColumnMenu(submenu) && setColumnMenu
-                ? setColumnMenu(submenu)
-                : handleClick([index, ...i]) })))))));
+        React.createElement(SubmenuLabel, { menu: menu, handleClick: handleClick }),
+        menu.submenu && menu.isOpen && (React.createElement(NestedSubmenusContainer, null, menu.submenu.map((submenu, index) => (React.createElement(Submenu, { key: `menu-${index}`, menu: submenu, handleClick: (i) => handleClick([index, ...i]) })))))));
 };

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

@@ -1 +1,2 @@
 export * from './Menus';
+export * from './Submenu';

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

@@ -50,13 +50,13 @@ const getMenuAt = (state, position) => {
 export const useMenus = (menus) => {
     const [pointer, setPointer] = useState(initialPointer);
     const state = getMenuState(menus, pointer);
-    const handleClick = useCallback((indices, tableConfig) => {
+    const handleClick = useCallback((indices) => {
         const menu = getMenuAt(state, indices);
         if (!menu || !menu.isEnabled) {
             return;
         }
         if (menu.run) {
-            menu.run(tableConfig);
+            menu.run();
             setPointer([-1, -1, -1]);
         }
         else if (menu.submenu) {
@@ -64,9 +64,6 @@ 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

@@ -20,7 +20,6 @@ export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';
 export * from './components/Dialog';
-export * from './components/InsertTableDialog';
 export * from './components/Checkbox';
 export * from './components/Form';
 export * from './components/Resizer';

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

@@ -14,31 +14,11 @@
  * limitations under the License.
  */
 import React, { Ref } from 'react';
-import { Menu, TableConfig } from '../../lib/menus';
+import { Menu } from '../../lib/menus';
 interface MenusProps {
     menus: Menu[];
     innerRef: Ref<HTMLDivElement>;
-    handleClick: (position: number[], tableConfig?: TableConfig) => void;
+    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 declare const ColumnChangeWarningDialog: React.FC<{
-    isOpen: boolean;
-    primaryAction: () => void;
-    secondaryAction: () => void;
-}>;
 export {};

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

@@ -16,11 +16,12 @@
 import React from 'react';
 import { Menu, MenuSeparator } from '../../lib/menus';
 export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SubmenuContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SubmenusContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-interface SubmenuProps {
+export declare const NestedSubmenusContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export interface SubmenuProps {
     menu: Menu | MenuSeparator;
     handleClick: (position: number[]) => void;
-    setColumnMenu?: React.Dispatch<React.SetStateAction<undefined | Menu>>;
 }
+export declare const SubmenuLabel: React.FC<SubmenuProps>;
 export declare const Submenu: React.FC<SubmenuProps>;
-export {};

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

@@ -1 +1,2 @@
 export * from './Menus';
+export * from './Submenu';

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Menu, MenuSpec, TableConfig } from '../lib/menus';
+import { Menu, MenuSpec } from '../lib/menus';
 export declare const useMenus: (menus: MenuSpec[]) => {
     menus: Menu[];
-    handleClick: (indices: number[], tableConfig?: TableConfig) => void;
+    handleClick: (indices: number[]) => void;
     ref: import("react").RefObject<HTMLDivElement>;
 };

package/dist/types/index.d.ts

@@ -21,7 +21,6 @@ export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';
 export * from './components/Dialog';
-export * from './components/InsertTableDialog';
 export * from './components/Checkbox';
 export * from './components/Form';
 export * from './components/Resizer';

package/dist/types/lib/menus.d.ts

@@ -13,29 +13,25 @@
  * 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;
+import React from 'react';
 export interface MenuShortcut {
     mac: string;
     pc: string;
 }
-export type TableConfig = {
-    numberOfColumns: number;
-    numberOfRows: number;
-    includeHeader: boolean;
-};
+export interface MenuComponentProps {
+    menu: Menu;
+    handleClick: (position: number[]) => void;
+}
 export interface MenuSpec {
     id: string;
     label: string;
     role?: string;
     shortcut?: MenuShortcut;
+    component?: React.FC<MenuComponentProps>;
     isActive?: boolean;
     isEnabled: boolean;
-    run?: (tableConfig?: TableConfig) => void;
+    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": "2.0.16",
+  "version": "2.0.17-LEAN-3573-menus.0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/dist/cjs/components/InsertTableDialog.js

@@ -1,130 +0,0 @@
-"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 __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.InsertTableDialog = void 0;
-const react_1 = __importStar(require("react"));
-const react_select_1 = __importDefault(require("react-select"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Checkbox_1 = require("./Checkbox");
-const Dialog_1 = require("./Dialog");
-const Label = styled_components_1.default.div `
-  padding-right: 16px;
-  width: 150px;
-`;
-const SelectContainer = styled_components_1.default.div `
-  width: 182px;
-  height: 30px;
-`;
-const Container = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  padding-bottom: 16px;
-`;
-const OptionWrapper = styled_components_1.default.div `
-  padding-left: ${(props) => props.theme.grid.unit * 4}px;
-  padding-top: ${(props) => props.theme.grid.unit * 2}px;
-  padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
-
-  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.background.fifth};
-  }
-`;
-const InsertTableDialog = ({ run, open, onClose }) => {
-    const [numberOfColumns, setNumColumns] = (0, react_1.useState)({ value: 4, label: `4` });
-    const [numberOfRows, setNumRows] = (0, react_1.useState)({ value: 4, label: `4` });
-    const [includeHeader, setIncludeHeader] = (0, react_1.useState)(true);
-    const handleColumnChange = (newValue) => {
-        setNumColumns(newValue);
-    };
-    const handleRowChange = (newValue) => {
-        setNumRows(newValue);
-    };
-    const options = Array.from({ length: 20 }, (_, index) => ({
-        value: index + 1,
-        label: `${index + 1}`,
-    }));
-    const OptionComponent = ({ innerProps, data, }) => {
-        return (react_1.default.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
-    };
-    const insertTableDialogActions = {
-        primary: {
-            action: () => {
-                const tableConfig = {
-                    numberOfColumns: numberOfColumns.value,
-                    numberOfRows: numberOfRows.value,
-                    includeHeader,
-                };
-                run(tableConfig);
-                onClose();
-            },
-            title: 'Create table',
-        },
-        secondary: {
-            action: onClose,
-            title: 'Cancel',
-        },
-    };
-    return (react_1.default.createElement(Dialog_1.Dialog, { isOpen: open, actions: insertTableDialogActions, category: Dialog_1.Category.confirmation, header: 'Insert table', message: '' },
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Container, null,
-                    react_1.default.createElement(Label, null, "Number of columns:"),
-                    react_1.default.createElement(SelectContainer, null,
-                        react_1.default.createElement(react_select_1.default, { onChange: (newValue) => handleColumnChange(newValue), value: numberOfColumns, options: options, components: {
-                                Option: OptionComponent,
-                            }, menuPosition: "fixed", maxMenuHeight: 150 }))),
-                react_1.default.createElement(Container, null,
-                    react_1.default.createElement(Label, null, "Number of rows:"),
-                    react_1.default.createElement(SelectContainer, null,
-                        react_1.default.createElement(react_select_1.default, { onChange: (newValue) => handleRowChange(newValue), value: numberOfRows, options: options, components: {
-                                Option: OptionComponent,
-                            }, menuPosition: "fixed", maxMenuHeight: 150 })))),
-            react_1.default.createElement(Checkbox_1.CheckboxLabel, null,
-                react_1.default.createElement(Checkbox_1.CheckboxField, { name: 'include-header', checked: includeHeader, onChange: (e) => {
-                        setIncludeHeader(e.target.checked);
-                    } }),
-                react_1.default.createElement("div", null, "Include header row")))));
-};
-exports.InsertTableDialog = InsertTableDialog;

package/dist/es/components/InsertTableDialog.js

@@ -1,100 +0,0 @@
-/*!
- * © 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, { useState } from 'react';
-import Select from 'react-select';
-import styled from 'styled-components';
-import { CheckboxField, CheckboxLabel } from './Checkbox';
-import { Category, Dialog } from './Dialog';
-const Label = styled.div `
-  padding-right: 16px;
-  width: 150px;
-`;
-const SelectContainer = styled.div `
-  width: 182px;
-  height: 30px;
-`;
-const Container = styled.div `
-  display: flex;
-  align-items: center;
-  padding-bottom: 16px;
-`;
-const OptionWrapper = styled.div `
-  padding-left: ${(props) => props.theme.grid.unit * 4}px;
-  padding-top: ${(props) => props.theme.grid.unit * 2}px;
-  padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
-
-  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.background.fifth};
-  }
-`;
-export const InsertTableDialog = ({ run, open, onClose }) => {
-    const [numberOfColumns, setNumColumns] = useState({ value: 4, label: `4` });
-    const [numberOfRows, setNumRows] = useState({ value: 4, label: `4` });
-    const [includeHeader, setIncludeHeader] = useState(true);
-    const handleColumnChange = (newValue) => {
-        setNumColumns(newValue);
-    };
-    const handleRowChange = (newValue) => {
-        setNumRows(newValue);
-    };
-    const options = Array.from({ length: 20 }, (_, index) => ({
-        value: index + 1,
-        label: `${index + 1}`,
-    }));
-    const OptionComponent = ({ innerProps, data, }) => {
-        return (React.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
-    };
-    const insertTableDialogActions = {
-        primary: {
-            action: () => {
-                const tableConfig = {
-                    numberOfColumns: numberOfColumns.value,
-                    numberOfRows: numberOfRows.value,
-                    includeHeader,
-                };
-                run(tableConfig);
-                onClose();
-            },
-            title: 'Create table',
-        },
-        secondary: {
-            action: onClose,
-            title: 'Cancel',
-        },
-    };
-    return (React.createElement(Dialog, { isOpen: open, actions: insertTableDialogActions, category: Category.confirmation, header: 'Insert table', message: '' },
-        React.createElement(React.Fragment, null,
-            React.createElement(React.Fragment, null,
-                React.createElement(Container, null,
-                    React.createElement(Label, null, "Number of columns:"),
-                    React.createElement(SelectContainer, null,
-                        React.createElement(Select, { onChange: (newValue) => handleColumnChange(newValue), value: numberOfColumns, options: options, components: {
-                                Option: OptionComponent,
-                            }, menuPosition: "fixed", maxMenuHeight: 150 }))),
-                React.createElement(Container, null,
-                    React.createElement(Label, null, "Number of rows:"),
-                    React.createElement(SelectContainer, null,
-                        React.createElement(Select, { onChange: (newValue) => handleRowChange(newValue), value: numberOfRows, options: options, components: {
-                                Option: OptionComponent,
-                            }, menuPosition: "fixed", maxMenuHeight: 150 })))),
-            React.createElement(CheckboxLabel, null,
-                React.createElement(CheckboxField, { name: 'include-header', checked: includeHeader, onChange: (e) => {
-                        setIncludeHeader(e.target.checked);
-                    } }),
-                React.createElement("div", null, "Include header row")))));
-};

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

@@ -1,22 +0,0 @@
-/*!
- * © 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 { TableConfig } from '../lib/menus';
-export declare const InsertTableDialog: React.FC<{
-    run: (tableConfig: TableConfig) => void;
-    open: boolean;
-    onClose: () => void;
-}>;