@manuscripts/style-guide 2.0.22-LEAN-3902-1.1 → 2.0.23-LEAN-4134.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/components/Menus/Menus.js +4 -3
  2. package/dist/cjs/components/Menus/Submenu.js +15 -13
  3. package/dist/es/components/Menus/Menus.js +5 -4
  4. package/dist/es/components/Menus/Submenu.js +14 -12
  5. package/dist/types/components/Menus/Submenu.d.ts +1 -0
  6. package/package.json +1 -1
package/dist/cjs/components/Menus/Menus.js CHANGED
@@ -51,9 +51,10 @@ const Menus = ({ menus, innerRef, handleClick, }) => {
51
51
  handleClick([index]);
52
52
  }, isOpen: menu.isOpen },
53
53
  react_1.default.createElement(Submenu_1.Text, null, menu.label)),
54
- menu.isEnabled && menu.isOpen && menu.submenu && (react_1.default.createElement(Submenu_1.SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
55
- return (react_1.default.createElement(Submenu_1.Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }));
56
- })))));
54
+ menu.isEnabled && menu.isOpen && menu.submenu && (react_1.default.createElement(Submenu_1.SubmenusContainerWrapper, null,
55
+ react_1.default.createElement(Submenu_1.SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
56
+ return (react_1.default.createElement(Submenu_1.Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }));
57
+ }))))));
57
58
  })));
58
59
  };
59
60
  exports.Menus = Menus;
package/dist/cjs/components/Menus/Submenu.js CHANGED
@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
18
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.Submenu = exports.SubmenuLabel = exports.NestedSubmenusContainer = exports.SubmenusContainer = exports.SubmenuContainer = exports.Text = void 0;
21
+ exports.Submenu = exports.SubmenuLabel = exports.NestedSubmenusContainer = exports.SubmenusContainer = exports.SubmenusContainerWrapper = exports.SubmenuContainer = exports.Text = void 0;
22
22
  const react_1 = __importDefault(require("react"));
23
23
  const styled_components_1 = __importDefault(require("styled-components"));
24
24
  const menus_1 = require("../../lib/menus");
@@ -27,22 +27,23 @@ const Shortcut_1 = require("./Shortcut");
27
27
  exports.Text = styled_components_1.default.div `
28
28
  flex: 1 0 auto;
29
29
  `;
30
- exports.SubmenuContainer = styled_components_1.default.div `
31
- position: relative;
30
+ exports.SubmenuContainer = styled_components_1.default.div ``;
31
+ exports.SubmenusContainerWrapper = styled_components_1.default.div `
32
+ position: absolute;
33
+ z-index: 10;
34
+ min-width: 150px;
35
+ width: auto;
32
36
  `;
33
37
  exports.SubmenusContainer = styled_components_1.default.div `
34
38
  background: #fff;
39
+ color: #353535;
40
+ white-space: nowrap;
41
+ max-height: 70vh;
42
+ overflow: auto;
43
+ padding: 4px 0;
35
44
  border: 1px solid #e2e2e2;
36
45
  border-radius: 4px;
37
46
  box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);
38
- color: #353535;
39
- min-width: 150px;
40
- padding: 4px 0;
41
- white-space: nowrap;
42
- width: auto;
43
- z-index: 10;
44
-
45
- position: absolute;
46
47
 
47
48
  &[data-placement='bottom-start'] {
48
49
  border-top-left-radius: 0;
@@ -54,6 +55,7 @@ exports.SubmenusContainer = styled_components_1.default.div `
54
55
  }
55
56
  `;
56
57
  exports.NestedSubmenusContainer = (0, styled_components_1.default)(exports.SubmenusContainer) `
58
+ position: absolute;
57
59
  top: 0;
58
60
  left: 100%;
59
61
  `;
@@ -73,11 +75,11 @@ const Arrow = (0, styled_components_1.default)(icons_1.TriangleCollapsedIcon) `
73
75
  margin-left: 8px;
74
76
  `;
75
77
  const Container = styled_components_1.default.div `
78
+ position: relative;
79
+ display: flex;
76
80
  align-items: center;
77
81
  cursor: pointer;
78
- display: flex;
79
82
  padding: 8px 16px 8px 4px;
80
- position: relative;
81
83
  ${(props) => props.isOpen && 'background: #f2fbfc;'}
82
84
 
83
85
  &:hover {
package/dist/es/components/Menus/Menus.js CHANGED
@@ -15,7 +15,7 @@
15
15
  */
16
16
  import React from 'react';
17
17
  import styled from 'styled-components';
18
- import { Submenu, SubmenusContainer, Text } from './Submenu';
18
+ import { Submenu, SubmenusContainer, SubmenusContainerWrapper, Text, } from './Submenu';
19
19
  const MenusContainer = styled.div `
20
20
  display: flex;
21
21
  font-size: 14px;
@@ -45,8 +45,9 @@ export const Menus = ({ menus, innerRef, handleClick, }) => {
45
45
  handleClick([index]);
46
46
  }, isOpen: menu.isOpen },
47
47
  React.createElement(Text, null, menu.label)),
48
- menu.isEnabled && menu.isOpen && menu.submenu && (React.createElement(SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
49
- return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }));
50
- })))));
48
+ menu.isEnabled && menu.isOpen && menu.submenu && (React.createElement(SubmenusContainerWrapper, null,
49
+ React.createElement(SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
50
+ return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }));
51
+ }))))));
51
52
  })));
52
53
  };
package/dist/es/components/Menus/Submenu.js CHANGED
@@ -21,22 +21,23 @@ import { Shortcut } from './Shortcut';
21
21
  export const Text = styled.div `
22
22
  flex: 1 0 auto;
23
23
  `;
24
- export const SubmenuContainer = styled.div `
25
- position: relative;
24
+ export const SubmenuContainer = styled.div ``;
25
+ export const SubmenusContainerWrapper = styled.div `
26
+ position: absolute;
27
+ z-index: 10;
28
+ min-width: 150px;
29
+ width: auto;
26
30
  `;
27
31
  export const SubmenusContainer = styled.div `
28
32
  background: #fff;
33
+ color: #353535;
34
+ white-space: nowrap;
35
+ max-height: 70vh;
36
+ overflow: auto;
37
+ padding: 4px 0;
29
38
  border: 1px solid #e2e2e2;
30
39
  border-radius: 4px;
31
40
  box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);
32
- color: #353535;
33
- min-width: 150px;
34
- padding: 4px 0;
35
- white-space: nowrap;
36
- width: auto;
37
- z-index: 10;
38
-
39
- position: absolute;
40
41
 
41
42
  &[data-placement='bottom-start'] {
42
43
  border-top-left-radius: 0;
@@ -48,6 +49,7 @@ export const SubmenusContainer = styled.div `
48
49
  }
49
50
  `;
50
51
  export const NestedSubmenusContainer = styled(SubmenusContainer) `
52
+ position: absolute;
51
53
  top: 0;
52
54
  left: 100%;
53
55
  `;
@@ -67,11 +69,11 @@ const Arrow = styled(TriangleCollapsedIcon) `
67
69
  margin-left: 8px;
68
70
  `;
69
71
  const Container = styled.div `
72
+ position: relative;
73
+ display: flex;
70
74
  align-items: center;
71
75
  cursor: pointer;
72
- display: flex;
73
76
  padding: 8px 16px 8px 4px;
74
- position: relative;
75
77
  ${(props) => props.isOpen && 'background: #f2fbfc;'}
76
78
 
77
79
  &:hover {
package/dist/types/components/Menus/Submenu.d.ts CHANGED
@@ -17,6 +17,7 @@ import React from 'react';
17
17
  import { Menu, MenuSeparator } from '../../lib/menus';
18
18
  export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
19
19
  export declare const SubmenuContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
20
+ export declare const SubmenusContainerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
20
21
  export declare const SubmenusContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
21
22
  export declare const NestedSubmenusContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
22
23
  export interface SubmenuProps {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "2.0.22-LEAN-3902-1.1",
4
+ "version": "2.0.23-LEAN-4134.0",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",