@manuscripts/style-guide 1.5.0 → 1.6.0-LEAN-3074-0

package/dist/cjs/components/Avatar.js

@@ -46,7 +46,7 @@ const AvatarNormal_1 = __importDefault(require("@manuscripts/assets/react/Avatar
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const AvatarContainer = styled_components_1.default.div `
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   position: relative;

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

@@ -0,0 +1,60 @@
+"use strict";
+/*!
+ * © 2019 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.Menus = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Submenu_1 = require("./Submenu");
+const MenusContainer = styled_components_1.default.div `
+  display: flex;
+  font-size: 14px;
+`;
+const MenuHeading = styled_components_1.default.div `
+  padding: 4px 8px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-bottom: none;
+`;
+const MenuContainer = styled_components_1.default.div `
+  position: relative;
+
+  & ${MenuHeading} {
+    background-color: #fff;
+    color: ${(props) => (props.isEnabled ? '#353535' : '#e2e2e2')};
+
+    &:hover {
+      background-color: ${(props) => (props.isEnabled ? '#f2fbfc' : '#fff')};
+    }
+  }
+`;
+const Menus = ({ menus, innerRef, handleClick, }) => {
+    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;

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

@@ -0,0 +1,64 @@
+"use strict";
+/*!
+ * © 2019 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.Shortcut = exports.ShortcutContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const isMac = /Mac/.test(window.navigator.platform);
+exports.ShortcutContainer = styled_components_1.default.div `
+  display: inline-flex;
+  color: #6e6e6e;
+  margin-left: 16px;
+  flex-shrink: 0;
+  justify-content: flex-end;
+`;
+const macModifiers = {
+    Option: '⌥',
+    CommandOrControl: '⌘',
+    Shift: '⇧',
+};
+const pcModifiers = {
+    Option: 'Alt',
+    CommandOrControl: 'Ctrl',
+    Shift: 'Shift',
+};
+const modifiers = isMac ? macModifiers : pcModifiers;
+const system = isMac ? 'mac' : 'pc';
+const separator = isMac ? '' : '-';
+const Character = styled_components_1.default.span `
+  display: inline-block;
+  min-width: 1ch;
+`;
+const parts = (shortcut) => {
+    const nodes = [];
+    for (const part of shortcut[system].split('+')) {
+        const modifier = modifiers[part];
+        if (modifier) {
+            nodes.push(modifier);
+            nodes.push(separator);
+        }
+        else {
+            nodes.push(react_1.default.createElement(Character, { key: part }, part));
+        }
+    }
+    return nodes;
+};
+const Shortcut = ({ shortcut }) => (react_1.default.createElement(exports.ShortcutContainer, null, parts(shortcut)));
+exports.Shortcut = Shortcut;

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

@@ -0,0 +1,119 @@
+"use strict";
+/*!
+ * © 2019 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.Submenu = exports.SubmenusContainer = exports.Text = void 0;
+const TriangleCollapsed_1 = __importDefault(require("@manuscripts/assets/react/TriangleCollapsed"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const menus_1 = require("../../lib/menus");
+const Shortcut_1 = require("./Shortcut");
+exports.Text = styled_components_1.default.div `
+  flex: 1 0 auto;
+`;
+const SubmenuContainer = styled_components_1.default.div `
+  position: relative;
+`;
+exports.SubmenusContainer = styled_components_1.default.div `
+  background: #fff;
+  border: 1px solid #e2e2e2;
+  border-radius: 4px;
+  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;
+  z-index: 10;
+
+  position: absolute;
+
+  &[data-placement='bottom-start'] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &[data-placement='right-start'] {
+    top: 8px;
+  }
+`;
+const NestedSubmenusContainer = (0, styled_components_1.default)(exports.SubmenusContainer) `
+  top: 0;
+  left: 100%;
+`;
+const Separator = styled_components_1.default.div `
+  height: 0;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 4px 0;
+`;
+const Active = styled_components_1.default.div `
+  width: 16px;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+`;
+const Arrow = (0, styled_components_1.default)(TriangleCollapsed_1.default) `
+  margin-left: 8px;
+`;
+const Container = styled_components_1.default.div `
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 8px 16px 8px 4px;
+  position: relative;
+  ${(props) => props.isOpen && 'background: #f2fbfc;'}
+
+  &:hover {
+    background: #f2fbfc;
+  }
+
+  &.disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+`;
+const activeContent = (menu) => (menu.isActive ? '✓' : '');
+const Submenu = ({ menu, handleClick }) => {
+    if ((0, menus_1.isMenuSeparator)(menu)) {
+        return react_1.default.createElement(Separator, null);
+    }
+    if (!menu.submenu) {
+        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 })));
+    }
+    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) => handleClick([index, ...i]) })))))));
+};
+exports.Submenu = Submenu;

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

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Menus"), exports);

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenus = void 0;
+const react_1 = require("react");
+const menus_1 = require("../lib/menus");
+const initialPointer = [-1, -1, -1];
+const transformPointer = (depth, index) => (pointer) => pointer.map((pointerPart, i) => {
+    if (i === depth) {
+        return index;
+    }
+    if (i > depth) {
+        return -1;
+    }
+    return pointerPart;
+});
+const isPart = (pointer, position) => {
+    const limit = position.length < 3 ? position.length : 3;
+    for (let i = 0; i < limit; i++) {
+        if (position[i] !== pointer[i]) {
+            return false;
+        }
+    }
+    return true;
+};
+const getSubmenuState = (specs, pointer, position) => {
+    return specs.map((spec, index) => {
+        if ((0, menus_1.isMenuSeparator)(spec)) {
+            return spec;
+        }
+        const current = [...position, index];
+        return Object.assign(Object.assign({}, spec), { submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current), isOpen: isPart(pointer, current) });
+    });
+};
+const getMenuState = (specs, pointer) => {
+    return specs.map((spec, index) => {
+        const position = [index];
+        return Object.assign(Object.assign({}, spec), { submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position), isOpen: isPart(pointer, position) });
+    });
+};
+const getMenuAt = (state, position) => {
+    const [head, ...tail] = position.filter((i) => i !== -1);
+    const menu = state[head];
+    if ((0, menus_1.isMenuSeparator)(menu)) {
+        return;
+    }
+    if (!tail.length) {
+        return menu;
+    }
+    else if (menu.submenu) {
+        return getMenuAt(menu.submenu, tail);
+    }
+};
+const useMenus = (menus) => {
+    const [pointer, setPointer] = (0, react_1.useState)(initialPointer);
+    const state = getMenuState(menus, pointer);
+    const handleClick = (0, react_1.useCallback)((indices) => {
+        const menu = getMenuAt(state, indices);
+        if (!menu || !menu.isEnabled) {
+            return;
+        }
+        if (menu.run) {
+            menu.run();
+            setPointer([-1, -1, -1]);
+        }
+        else if (menu.submenu) {
+            const depth = indices.length - 1;
+            const index = indices[depth];
+            setPointer(transformPointer(depth, index));
+        }
+    }, [state]);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setPointer([-1, -1, -1]);
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    return {
+        menus: state,
+        handleClick,
+        ref,
+    };
+};
+exports.useMenus = useMenus;

package/dist/cjs/index.js

@@ -73,8 +73,10 @@ __exportStar(require("./components/Text"), exports);
 __exportStar(require("./components/ManuscriptNoteList"), exports);
 __exportStar(require("./components/Comments"), exports);
 __exportStar(require("./components/RelativeDate"), exports);
+__exportStar(require("./components/Menus"), exports);
 __exportStar(require("./hooks/use-dropdown"), exports);
 __exportStar(require("./hooks/use-files"), exports);
+__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; } });
@@ -82,6 +84,7 @@ __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/menus.js

@@ -0,0 +1,22 @@
+"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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMenuSeparator = void 0;
+const isMenuSeparator = (menu) => {
+    return (menu === null || menu === void 0 ? void 0 : menu.role) === 'separator';
+};
+exports.isMenuSeparator = isMenuSeparator;

package/dist/es/components/Avatar.js

@@ -17,7 +17,7 @@ import AvatarNormal from '@manuscripts/assets/react/AvatarNormal';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 const AvatarContainer = styled.div `
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   position: relative;

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

@@ -0,0 +1,53 @@
+/*!
+ * © 2019 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 { Submenu, SubmenusContainer, Text } from './Submenu';
+const MenusContainer = styled.div `
+  display: flex;
+  font-size: 14px;
+`;
+const MenuHeading = styled.div `
+  padding: 4px 8px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-bottom: none;
+`;
+const MenuContainer = styled.div `
+  position: relative;
+
+  & ${MenuHeading} {
+    background-color: #fff;
+    color: ${(props) => (props.isEnabled ? '#353535' : '#e2e2e2')};
+
+    &:hover {
+      background-color: ${(props) => (props.isEnabled ? '#f2fbfc' : '#fff')};
+    }
+  }
+`;
+export const Menus = ({ menus, innerRef, handleClick, }) => {
+    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]) }));
+            })))));
+    })));
+};

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

@@ -0,0 +1,57 @@
+/*!
+ * © 2019 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';
+const isMac = /Mac/.test(window.navigator.platform);
+export const ShortcutContainer = styled.div `
+  display: inline-flex;
+  color: #6e6e6e;
+  margin-left: 16px;
+  flex-shrink: 0;
+  justify-content: flex-end;
+`;
+const macModifiers = {
+    Option: '⌥',
+    CommandOrControl: '⌘',
+    Shift: '⇧',
+};
+const pcModifiers = {
+    Option: 'Alt',
+    CommandOrControl: 'Ctrl',
+    Shift: 'Shift',
+};
+const modifiers = isMac ? macModifiers : pcModifiers;
+const system = isMac ? 'mac' : 'pc';
+const separator = isMac ? '' : '-';
+const Character = styled.span `
+  display: inline-block;
+  min-width: 1ch;
+`;
+const parts = (shortcut) => {
+    const nodes = [];
+    for (const part of shortcut[system].split('+')) {
+        const modifier = modifiers[part];
+        if (modifier) {
+            nodes.push(modifier);
+            nodes.push(separator);
+        }
+        else {
+            nodes.push(React.createElement(Character, { key: part }, part));
+        }
+    }
+    return nodes;
+};
+export const Shortcut = ({ shortcut }) => (React.createElement(ShortcutContainer, null, parts(shortcut)));

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

@@ -0,0 +1,112 @@
+/*!
+ * © 2019 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 TriangleCollapsed from '@manuscripts/assets/react/TriangleCollapsed';
+import React from 'react';
+import styled from 'styled-components';
+import { isMenuSeparator } from '../../lib/menus';
+import { Shortcut } from './Shortcut';
+export const Text = styled.div `
+  flex: 1 0 auto;
+`;
+const SubmenuContainer = styled.div `
+  position: relative;
+`;
+export const SubmenusContainer = styled.div `
+  background: #fff;
+  border: 1px solid #e2e2e2;
+  border-radius: 4px;
+  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;
+  z-index: 10;
+
+  position: absolute;
+
+  &[data-placement='bottom-start'] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &[data-placement='right-start'] {
+    top: 8px;
+  }
+`;
+const NestedSubmenusContainer = styled(SubmenusContainer) `
+  top: 0;
+  left: 100%;
+`;
+const Separator = styled.div `
+  height: 0;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 4px 0;
+`;
+const Active = styled.div `
+  width: 16px;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+`;
+const Arrow = styled(TriangleCollapsed) `
+  margin-left: 8px;
+`;
+const Container = styled.div `
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 8px 16px 8px 4px;
+  position: relative;
+  ${(props) => props.isOpen && 'background: #f2fbfc;'}
+
+  &:hover {
+    background: #f2fbfc;
+  }
+
+  &.disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+`;
+const activeContent = (menu) => (menu.isActive ? '✓' : '');
+export const Submenu = ({ menu, handleClick }) => {
+    if (isMenuSeparator(menu)) {
+        return React.createElement(Separator, null);
+    }
+    if (!menu.submenu) {
+        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 })));
+    }
+    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) => handleClick([index, ...i]) })))))));
+};

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

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

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

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { isMenuSeparator, } from '../lib/menus';
+const initialPointer = [-1, -1, -1];
+const transformPointer = (depth, index) => (pointer) => pointer.map((pointerPart, i) => {
+    if (i === depth) {
+        return index;
+    }
+    if (i > depth) {
+        return -1;
+    }
+    return pointerPart;
+});
+const isPart = (pointer, position) => {
+    const limit = position.length < 3 ? position.length : 3;
+    for (let i = 0; i < limit; i++) {
+        if (position[i] !== pointer[i]) {
+            return false;
+        }
+    }
+    return true;
+};
+const getSubmenuState = (specs, pointer, position) => {
+    return specs.map((spec, index) => {
+        if (isMenuSeparator(spec)) {
+            return spec;
+        }
+        const current = [...position, index];
+        return Object.assign(Object.assign({}, spec), { submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current), isOpen: isPart(pointer, current) });
+    });
+};
+const getMenuState = (specs, pointer) => {
+    return specs.map((spec, index) => {
+        const position = [index];
+        return Object.assign(Object.assign({}, spec), { submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position), isOpen: isPart(pointer, position) });
+    });
+};
+const getMenuAt = (state, position) => {
+    const [head, ...tail] = position.filter((i) => i !== -1);
+    const menu = state[head];
+    if (isMenuSeparator(menu)) {
+        return;
+    }
+    if (!tail.length) {
+        return menu;
+    }
+    else if (menu.submenu) {
+        return getMenuAt(menu.submenu, tail);
+    }
+};
+export const useMenus = (menus) => {
+    const [pointer, setPointer] = useState(initialPointer);
+    const state = getMenuState(menus, pointer);
+    const handleClick = useCallback((indices) => {
+        const menu = getMenuAt(state, indices);
+        if (!menu || !menu.isEnabled) {
+            return;
+        }
+        if (menu.run) {
+            menu.run();
+            setPointer([-1, -1, -1]);
+        }
+        else if (menu.submenu) {
+            const depth = indices.length - 1;
+            const index = indices[depth];
+            setPointer(transformPointer(depth, index));
+        }
+    }, [state]);
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setPointer([-1, -1, -1]);
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    return {
+        menus: state,
+        handleClick,
+        ref,
+    };
+};

package/dist/es/index.js

@@ -53,12 +53,15 @@ export * from './components/Text';
 export * from './components/ManuscriptNoteList';
 export * from './components/Comments';
 export * from './components/RelativeDate';
+export * from './components/Menus';
 export * from './hooks/use-dropdown';
 export * from './hooks/use-files';
+export * from './hooks/use-menus';
 export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';
 export * from './lib/authors';
 export * from './lib/capabilities';
 export * from './lib/files';
 export * from './lib/comments';
+export * from './lib/menus';
 export { default as errorsDecoder } from './lib/errors-decoder';
 export * from './types';

package/dist/es/lib/menus.js

@@ -0,0 +1,18 @@
+/*!
+ * © 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.
+ */
+export const isMenuSeparator = (menu) => {
+    return (menu === null || menu === void 0 ? void 0 : menu.role) === 'separator';
+};

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

@@ -0,0 +1,24 @@
+/*!
+ * © 2019 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, { Ref } from 'react';
+import { Menu } from '../../lib/menus';
+interface MenusProps {
+    menus: Menu[];
+    innerRef: Ref<HTMLDivElement>;
+    handleClick: (position: number[]) => void;
+}
+export declare const Menus: React.FC<MenusProps>;
+export {};

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

@@ -0,0 +1,23 @@
+/*!
+ * © 2019 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 { MenuShortcut } from '../../lib/menus';
+export declare const ShortcutContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface ShortcutProps {
+    shortcut: MenuShortcut;
+}
+export declare const Shortcut: React.FC<ShortcutProps>;
+export {};

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

@@ -0,0 +1,25 @@
+/*!
+ * © 2019 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 { Menu, MenuSeparator } from '../../lib/menus';
+export declare const Text: 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 {
+    menu: Menu | MenuSeparator;
+    handleClick: (position: number[]) => void;
+}
+export declare const Submenu: React.FC<SubmenuProps>;
+export {};

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

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

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

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

package/dist/types/index.d.ts

@@ -54,12 +54,15 @@ export * from './components/Text';
 export * from './components/ManuscriptNoteList';
 export * from './components/Comments';
 export * from './components/RelativeDate';
+export * from './components/Menus';
 export * from './hooks/use-dropdown';
 export * from './hooks/use-files';
+export * from './hooks/use-menus';
 export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';
 export * from './lib/authors';
 export * from './lib/capabilities';
 export * from './lib/files';
 export * from './lib/comments';
+export * from './lib/menus';
 export { default as errorsDecoder } from './lib/errors-decoder';
 export * from './types';

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

@@ -0,0 +1,38 @@
+/*!
+ * © 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.
+ */
+export interface MenuShortcut {
+    mac: string;
+    pc: string;
+}
+export interface MenuSpec {
+    id: string;
+    label: string;
+    role?: string;
+    shortcut?: MenuShortcut;
+    isActive?: boolean;
+    isEnabled: boolean;
+    run?: () => void;
+    submenu?: (MenuSpec | MenuSeparator)[];
+}
+export interface Menu extends MenuSpec {
+    isOpen: boolean;
+    submenu?: (Menu | MenuSeparator)[];
+}
+export type MenuSeparator = {
+    role: 'separator';
+};
+export declare const isMenuSeparator: (menu: any) => menu is MenuSeparator;
+export type MenuPointer = [number, number, number];

package/dist/types/theme.d.ts

@@ -76,9 +76,11 @@ interface Variations {
 interface Background {
     dark: string;
     selected: string;
+    tracked: States;
 }
 interface Border {
     field: States;
+    tracked: States;
 }
 interface Brand {
     dark: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.5.0",
+  "version": "1.6.0-LEAN-3074-0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -36,7 +36,7 @@
     "@formatjs/intl-relativetimeformat": "^4.5.9",
     "@formatjs/intl-utils": "^2.2.0",
     "@manuscripts/assets": "^0.6.2",
-    "@manuscripts/transform": "2.0.0",
+    "@manuscripts/transform": "2.0.3-LEAN-3074-0",
     "@manuscripts/json-schema": "2.2.1",
     "@reach/tabs": "^0.11.2",
     "formik": "^2.2.9",
@@ -113,4 +113,4 @@
   "resolutions": {
     "@types/react": "^17.0.2"
   }
-}
+}