@manuscripts/style-guide 1.5.0-LEAN-3083 → 1.5.0-LEAN-2992

package/dist/cjs/components/AffiliationsList.js

@@ -0,0 +1,43 @@
+"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.AffiliationsList = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const formatAddress_1 = __importDefault(require("../lib/formatAddress"));
+const Container = styled_components_1.default.table `
+  border-collapse: collapse;
+  font: inherit;
+  color: ${(props) => props.theme.colors.text.secondary};
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+`;
+const Header = styled_components_1.default.th `
+  font-weight: ${(props) => props.theme.font.weight.normal}
+  padding: 0 4px 0 0;
+  vertical-align: top;
+`;
+const Body = styled_components_1.default.td `
+  padding: 0;
+`;
+const AffiliationsList = ({ affiliations, }) => (react_1.default.createElement(Container, null,
+    react_1.default.createElement("tbody", null, Array.from(affiliations.values()).map((affiliation, index) => (react_1.default.createElement("tr", { key: affiliation._id },
+        react_1.default.createElement(Header, null, index + 1),
+        react_1.default.createElement(Body, null, (0, formatAddress_1.default)(affiliation))))))));
+exports.AffiliationsList = AffiliationsList;

package/dist/cjs/components/AuthorsContainer.js

@@ -0,0 +1,71 @@
+"use strict";
+/*!
+ * © 2021 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.AuthorsContainer = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AffiliationsList_1 = require("./AffiliationsList");
+const AuthorsList_1 = require("./AuthorsList");
+const AuthorsContainer = ({ authorData, showEditButton, startEditing, selectAuthor, disableEditButton, }) => {
+    const authorAffiliations = (0, react_1.useMemo)(() => authorData.authors.filter((author) => author.role === 'author'), [authorData.authors]);
+    const isThereJointContributor = (0, react_1.useMemo)(() => authorData.authors.find((contributor) => contributor.isJointContributor), [authorData.authors]);
+    return (react_1.default.createElement(Container, { "data-cy": 'author-container' },
+        react_1.default.createElement(AuthorsList_1.AuthorsList, { authors: authorAffiliations, authorAffiliations: authorData.authorAffiliations, startEditing: startEditing, showEditButton: showEditButton, selectAuthor: selectAuthor, disableEditButton: disableEditButton }),
+        react_1.default.createElement(AffiliationsList_1.AffiliationsList, { affiliations: authorData.affiliations }),
+        isThereJointContributor && (react_1.default.createElement(LegendWrapper, null,
+            react_1.default.createElement(Legend, null, "\u2020"),
+            "These authors contributed equally to this work."))));
+};
+exports.AuthorsContainer = AuthorsContainer;
+const Container = styled_components_1.default.div `
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+`;
+const LegendWrapper = styled_components_1.default.p `
+  margin: ${(props) => props.theme.grid.unit * 4}px 0 0 0;
+`;
+const Legend = styled_components_1.default.span `
+  display: inline-block;
+  font-size: 0.75em;
+  line-height: 1;
+  vertical-align: top;
+`;

package/dist/cjs/components/AuthorsList/Author.js

@@ -0,0 +1,99 @@
+"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 __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.Author = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const AuthorName_1 = require("../AuthorName");
+const AuthorNotes = styled_components_1.default.span `
+  display: inline-block;
+  font-size: 0.75em;
+  line-height: 1;
+  vertical-align: top;
+`;
+const LinkSharedStyles = (0, styled_components_1.css) `
+  text-decoration: none;
+  color: inherit;
+  outline: none;
+
+  &:not(:disabled) {
+    &:hover,
+    &:focus {
+      &,
+      span {
+        color: ${(props) => props.theme.colors.text.tertiary};
+      }
+    }
+  }
+`;
+const AuthorAffiliation = styled_components_1.default.span `
+  ${LinkSharedStyles}
+`;
+const AuthorsContainer = styled_components_1.default.button `
+  display: inline-flex;
+  background: transparent;
+  border: 0;
+  font-size: 1rem;
+  ${LinkSharedStyles}
+
+  &:not(:disabled) {
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer !important;
+    }
+  }
+`;
+const Author = ({ author, affiliations, jointFirstAuthor, startEditing, selectAuthor, showEditButton, disableEditButton, }) => (react_1.default.createElement("span", { key: author._id },
+    showEditButton ? (react_1.default.createElement(AuthorsContainer, { disabled: disableEditButton, onClick: (e) => {
+            e.preventDefault();
+            startEditing && startEditing();
+            selectAuthor && selectAuthor(author);
+        } },
+        react_1.default.createElement(AuthorName_1.AuthorName, { name: author.bibliographicName, email: (author.isCorresponding && author.email) || undefined }))) : (react_1.default.createElement(AuthorName_1.AuthorName, { name: author.bibliographicName, email: (author.isCorresponding && author.email) || undefined })),
+    affiliations && (react_1.default.createElement(AuthorNotes, null, affiliations.map((affiliation, index) => (react_1.default.createElement(react_1.default.Fragment, { key: affiliation.data._id },
+        !!index && ',',
+        react_1.default.createElement(AuthorAffiliation, null, affiliation.ordinal)))))),
+    author.isCorresponding && (react_1.default.createElement(AuthorNotes, { title: 'Corresponding author' }, "*")),
+    jointFirstAuthor && (react_1.default.createElement(AuthorNotes, { title: 'Joint contributor' }, "\u2020"))));
+exports.Author = Author;
+exports.default = exports.Author;

package/dist/cjs/components/AuthorsList/AuthorsList.js

@@ -0,0 +1,52 @@
+"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.AuthorsList = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const authors_1 = require("../../lib/authors");
+const Button_1 = require("../Button");
+const Author_1 = require("./Author");
+const AuthorsContainer = styled_components_1.default.div `
+  align-items: center;
+  display: flex;
+
+  @media (min-width: 768px) {
+    & ${Button_1.PrimaryButton} {
+      display: ${(props) => (props.isEmpty ? 'initial' : 'none')};
+    }
+
+    &:hover ${Button_1.PrimaryButton} {
+      display: initial;
+    }
+  }
+`;
+const AuthorsActions = styled_components_1.default.div `
+  align-items: center;
+  display: flex;
+  margin-left: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const AuthorsList = ({ authors, authorAffiliations, startEditing, showEditButton, disableEditButton, selectAuthor, }) => (react_1.default.createElement(AuthorsContainer, { isEmpty: !authors.length },
+    react_1.default.createElement("div", null, authors.map((author, index) => (react_1.default.createElement(react_1.default.Fragment, { key: author._id },
+        !!index && ', ',
+        react_1.default.createElement(Author_1.Author, { author: author, jointFirstAuthor: (0, authors_1.isJointFirstAuthor)(authors, index), affiliations: authorAffiliations.get(author._id), selectAuthor: selectAuthor, startEditing: startEditing, showEditButton: showEditButton, disableEditButton: disableEditButton }))))),
+    showEditButton && startEditing && (react_1.default.createElement(AuthorsActions, null,
+        react_1.default.createElement(Button_1.PrimaryButton, { mini: true, onClick: startEditing, className: 'edit_authors_button', disabled: disableEditButton }, "Edit Authors")))));
+exports.AuthorsList = AuthorsList;

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

@@ -0,0 +1,32 @@
+"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 __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("./AuthorsList"), exports);

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

@@ -0,0 +1,62 @@
+"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 react_modal_1 = __importDefault(require("react-modal"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Submenu_1 = require("./Submenu");
+react_modal_1.default.setAppElement('#root');
+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;