@manuscripts/style-guide 3.4.1 → 3.4.2

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 (11) hide show
  1. package/dist/cjs/components/Menus/Menus.js +3 -3
  2. package/dist/cjs/components/Menus/Submenu.js +11 -7
  3. package/dist/cjs/hooks/use-menus.js +5 -3
  4. package/dist/es/components/Menus/Menus.js +3 -3
  5. package/dist/es/components/Menus/Submenu.js +11 -7
  6. package/dist/es/hooks/use-menus.js +5 -3
  7. package/dist/types/components/Menus/Menus.d.ts +1 -1
  8. package/dist/types/components/Menus/Submenu.d.ts +1 -1
  9. package/dist/types/hooks/use-menus.d.ts +1 -1
  10. package/dist/types/lib/menus.d.ts +2 -1
  11. package/package.json +1 -1
package/dist/cjs/components/Menus/Menus.js CHANGED
@@ -34,7 +34,7 @@ const MenuContainer = styled_components_1.default.div `
34
34
  }
35
35
  }
36
36
  `;
37
- const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
37
+ const Menus = ({ menus, innerRef, handleClick, close, }) => {
38
38
  const menuHeadingsRef = (0, react_1.useRef)([]);
39
39
  (0, react_1.useEffect)(() => {
40
40
  menuHeadingsRef.current.forEach((heading, index) => {
@@ -71,7 +71,7 @@ const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
71
71
  case 'Escape': {
72
72
  event.preventDefault();
73
73
  event.stopPropagation();
74
- closeAll();
74
+ close();
75
75
  break;
76
76
  }
77
77
  case 'ArrowDown': {
@@ -96,7 +96,7 @@ const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
96
96
  e.preventDefault();
97
97
  handleClick([index]);
98
98
  }, isOpen: menu.isOpen, children: (0, jsx_runtime_1.jsx)(Submenu_1.Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && ((0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainerWrapper, { children: (0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainer, { "data-submenu-container": true, tabIndex: -1, children: menu.submenu.map((submenu, sindex) => {
99
- return ((0, jsx_runtime_1.jsx)(Submenu_1.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), closeAll: closeAll }, `${index}-${sindex}`));
99
+ return ((0, jsx_runtime_1.jsx)(Submenu_1.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), close: close }, `${index}-${sindex}`));
100
100
  }) }) }))] }, `menu-${index}`));
101
101
  }) }));
102
102
  };
package/dist/cjs/components/Menus/Submenu.js CHANGED
@@ -83,7 +83,7 @@ const Container = styled_components_1.default.div `
83
83
  }
84
84
  `;
85
85
  const activeContent = (menu) => (menu.isActive ? '✓' : '');
86
- const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
86
+ const SubmenuLabel = ({ menu, handleClick, close, }) => {
87
87
  if ((0, menus_1.isMenuSeparator)(menu)) {
88
88
  return null;
89
89
  }
@@ -132,17 +132,21 @@ const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
132
132
  case 'ArrowLeft': {
133
133
  const parentContainer = submenuContainer?.parentElement?.closest('[data-submenu-container]');
134
134
  if (parentContainer) {
135
+ if (menu.position) {
136
+ const currentDepth = menu.position.length - 2;
137
+ close(currentDepth);
138
+ }
135
139
  const parentLabel = parentContainer.querySelector(':scope > [data-submenu-item]');
136
140
  parentLabel?.focus();
137
141
  }
138
142
  else {
139
143
  focusMenuHeading();
140
- closeAll();
144
+ close();
141
145
  }
142
146
  break;
143
147
  }
144
148
  case 'Escape': {
145
- closeAll();
149
+ close();
146
150
  focusMenuHeading();
147
151
  break;
148
152
  }
@@ -160,16 +164,16 @@ const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
160
164
  }, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)(Active, { children: activeContent(menu) }), (0, jsx_runtime_1.jsx)(exports.Text, { children: menu.label }), menu.submenu && (0, jsx_runtime_1.jsx)(Arrow, {}), menu.shortcut && (0, jsx_runtime_1.jsx)(Shortcut_1.Shortcut, { shortcut: menu.shortcut })] }));
161
165
  };
162
166
  exports.SubmenuLabel = SubmenuLabel;
163
- const Submenu = ({ menu, handleClick, closeAll, }) => {
167
+ const Submenu = ({ menu, handleClick, close, }) => {
164
168
  if ((0, menus_1.isMenuSeparator)(menu)) {
165
169
  return (0, jsx_runtime_1.jsx)(Separator, {});
166
170
  }
167
171
  if (menu.component) {
168
- return (0, jsx_runtime_1.jsx)(menu.component, { menu: menu, handleClick: handleClick, closeAll: closeAll });
172
+ return ((0, jsx_runtime_1.jsx)(menu.component, { menu: menu, handleClick: handleClick, close: close }));
169
173
  }
170
174
  if (!menu.submenu) {
171
- return ((0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }));
175
+ return (0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick, close: close });
172
176
  }
173
- return ((0, jsx_runtime_1.jsxs)(exports.SubmenuContainer, { "data-cy": 'submenu', children: [(0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }), menu.submenu && menu.isOpen && ((0, jsx_runtime_1.jsx)(exports.NestedSubmenusContainer, { "data-submenu-container": true, children: menu.submenu.map((submenu, index) => ((0, jsx_runtime_1.jsx)(exports.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]), closeAll: closeAll }, `menu-${index}`))) }))] }));
177
+ return ((0, jsx_runtime_1.jsxs)(exports.SubmenuContainer, { "data-cy": 'submenu', children: [(0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick, close: close }), menu.submenu && menu.isOpen && ((0, jsx_runtime_1.jsx)(exports.NestedSubmenusContainer, { "data-submenu-container": true, children: menu.submenu.map((submenu, index) => ((0, jsx_runtime_1.jsx)(exports.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]), close: close }, `menu-${index}`))) }))] }));
174
178
  };
175
179
  exports.Submenu = Submenu;
package/dist/cjs/hooks/use-menus.js CHANGED
@@ -31,6 +31,7 @@ const getSubmenuState = (specs, pointer, position) => {
31
31
  const current = [...position, index];
32
32
  return {
33
33
  ...spec,
34
+ position: current,
34
35
  submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current),
35
36
  isOpen: isPart(pointer, current),
36
37
  };
@@ -41,6 +42,7 @@ const getMenuState = (specs, pointer) => {
41
42
  const position = [index];
42
43
  return {
43
44
  ...spec,
45
+ position,
44
46
  submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position),
45
47
  isOpen: isPart(pointer, position),
46
48
  };
@@ -89,13 +91,13 @@ const useMenus = (menus) => {
89
91
  document.removeEventListener('click', handleClickOutside);
90
92
  };
91
93
  }, []);
92
- const closeAll = (0, react_1.useCallback)(() => {
93
- setPointer(initialPointer);
94
+ const close = (0, react_1.useCallback)((depth) => {
95
+ setPointer(depth === undefined ? initialPointer : transformPointer(depth, -1));
94
96
  }, []);
95
97
  return {
96
98
  menus: state,
97
99
  handleClick,
98
- closeAll,
100
+ close,
99
101
  ref,
100
102
  };
101
103
  };
package/dist/es/components/Menus/Menus.js CHANGED
@@ -28,7 +28,7 @@ const MenuContainer = styled.div `
28
28
  }
29
29
  }
30
30
  `;
31
- export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
31
+ export const Menus = ({ menus, innerRef, handleClick, close, }) => {
32
32
  const menuHeadingsRef = useRef([]);
33
33
  useEffect(() => {
34
34
  menuHeadingsRef.current.forEach((heading, index) => {
@@ -65,7 +65,7 @@ export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
65
65
  case 'Escape': {
66
66
  event.preventDefault();
67
67
  event.stopPropagation();
68
- closeAll();
68
+ close();
69
69
  break;
70
70
  }
71
71
  case 'ArrowDown': {
@@ -90,7 +90,7 @@ export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
90
90
  e.preventDefault();
91
91
  handleClick([index]);
92
92
  }, isOpen: menu.isOpen, children: _jsx(Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && (_jsx(SubmenusContainerWrapper, { children: _jsx(SubmenusContainer, { "data-submenu-container": true, tabIndex: -1, children: menu.submenu.map((submenu, sindex) => {
93
- return (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), closeAll: closeAll }, `${index}-${sindex}`));
93
+ return (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), close: close }, `${index}-${sindex}`));
94
94
  }) }) }))] }, `menu-${index}`));
95
95
  }) }));
96
96
  };
package/dist/es/components/Menus/Submenu.js CHANGED
@@ -77,7 +77,7 @@ const Container = styled.div `
77
77
  }
78
78
  `;
79
79
  const activeContent = (menu) => (menu.isActive ? '✓' : '');
80
- export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
80
+ export const SubmenuLabel = ({ menu, handleClick, close, }) => {
81
81
  if (isMenuSeparator(menu)) {
82
82
  return null;
83
83
  }
@@ -126,17 +126,21 @@ export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
126
126
  case 'ArrowLeft': {
127
127
  const parentContainer = submenuContainer?.parentElement?.closest('[data-submenu-container]');
128
128
  if (parentContainer) {
129
+ if (menu.position) {
130
+ const currentDepth = menu.position.length - 2;
131
+ close(currentDepth);
132
+ }
129
133
  const parentLabel = parentContainer.querySelector(':scope > [data-submenu-item]');
130
134
  parentLabel?.focus();
131
135
  }
132
136
  else {
133
137
  focusMenuHeading();
134
- closeAll();
138
+ close();
135
139
  }
136
140
  break;
137
141
  }
138
142
  case 'Escape': {
139
- closeAll();
143
+ close();
140
144
  focusMenuHeading();
141
145
  break;
142
146
  }
@@ -153,15 +157,15 @@ export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
153
157
  handleClick([]);
154
158
  }, onKeyDown: handleKeyDown, children: [_jsx(Active, { children: activeContent(menu) }), _jsx(Text, { children: menu.label }), menu.submenu && _jsx(Arrow, {}), menu.shortcut && _jsx(Shortcut, { shortcut: menu.shortcut })] }));
155
159
  };
156
- export const Submenu = ({ menu, handleClick, closeAll, }) => {
160
+ export const Submenu = ({ menu, handleClick, close, }) => {
157
161
  if (isMenuSeparator(menu)) {
158
162
  return _jsx(Separator, {});
159
163
  }
160
164
  if (menu.component) {
161
- return _jsx(menu.component, { menu: menu, handleClick: handleClick, closeAll: closeAll });
165
+ return (_jsx(menu.component, { menu: menu, handleClick: handleClick, close: close }));
162
166
  }
163
167
  if (!menu.submenu) {
164
- return (_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }));
168
+ return _jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, close: close });
165
169
  }
166
- return (_jsxs(SubmenuContainer, { "data-cy": 'submenu', children: [_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }), menu.submenu && menu.isOpen && (_jsx(NestedSubmenusContainer, { "data-submenu-container": true, children: menu.submenu.map((submenu, index) => (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]), closeAll: closeAll }, `menu-${index}`))) }))] }));
170
+ return (_jsxs(SubmenuContainer, { "data-cy": 'submenu', children: [_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, close: close }), menu.submenu && menu.isOpen && (_jsx(NestedSubmenusContainer, { "data-submenu-container": true, children: menu.submenu.map((submenu, index) => (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]), close: close }, `menu-${index}`))) }))] }));
167
171
  };
package/dist/es/hooks/use-menus.js CHANGED
@@ -28,6 +28,7 @@ const getSubmenuState = (specs, pointer, position) => {
28
28
  const current = [...position, index];
29
29
  return {
30
30
  ...spec,
31
+ position: current,
31
32
  submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current),
32
33
  isOpen: isPart(pointer, current),
33
34
  };
@@ -38,6 +39,7 @@ const getMenuState = (specs, pointer) => {
38
39
  const position = [index];
39
40
  return {
40
41
  ...spec,
42
+ position,
41
43
  submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position),
42
44
  isOpen: isPart(pointer, position),
43
45
  };
@@ -86,13 +88,13 @@ export const useMenus = (menus) => {
86
88
  document.removeEventListener('click', handleClickOutside);
87
89
  };
88
90
  }, []);
89
- const closeAll = useCallback(() => {
90
- setPointer(initialPointer);
91
+ const close = useCallback((depth) => {
92
+ setPointer(depth === undefined ? initialPointer : transformPointer(depth, -1));
91
93
  }, []);
92
94
  return {
93
95
  menus: state,
94
96
  handleClick,
95
- closeAll,
97
+ close,
96
98
  ref,
97
99
  };
98
100
  };
package/dist/types/components/Menus/Menus.d.ts CHANGED
@@ -19,7 +19,7 @@ interface MenusProps {
19
19
  menus: Menu[];
20
20
  innerRef: Ref<HTMLDivElement>;
21
21
  handleClick: (position: number[]) => void;
22
- closeAll: () => void;
22
+ close: (depth?: number) => void;
23
23
  }
24
24
  export declare const Menus: React.FC<MenusProps>;
25
25
  export {};
package/dist/types/components/Menus/Submenu.d.ts CHANGED
@@ -23,7 +23,7 @@ export declare const NestedSubmenusContainer: import("styled-components").Styled
23
23
  export interface SubmenuProps {
24
24
  menu: Menu | MenuSeparator;
25
25
  handleClick: (position: number[]) => void;
26
- closeAll: () => void;
26
+ close: (depth?: number) => void;
27
27
  }
28
28
  export declare const SubmenuLabel: React.FC<SubmenuProps>;
29
29
  export declare const Submenu: React.FC<SubmenuProps>;
package/dist/types/hooks/use-menus.d.ts CHANGED
@@ -2,6 +2,6 @@ import { Menu, MenuSpec } from '../lib/menus';
2
2
  export declare const useMenus: (menus: MenuSpec[]) => {
3
3
  menus: Menu[];
4
4
  handleClick: (indices: number[]) => void;
5
- closeAll: () => void;
5
+ close: (depth?: number) => void;
6
6
  ref: import("react").RefObject<HTMLDivElement | null>;
7
7
  };
package/dist/types/lib/menus.d.ts CHANGED
@@ -21,7 +21,7 @@ export interface MenuShortcut {
21
21
  export interface MenuComponentProps {
22
22
  menu: Menu;
23
23
  handleClick: (position: number[]) => void;
24
- closeAll: () => void;
24
+ close: (depth?: number) => void;
25
25
  }
26
26
  export interface MenuSpec {
27
27
  id: string;
@@ -38,6 +38,7 @@ export interface MenuSpec {
38
38
  export interface Menu extends MenuSpec {
39
39
  isOpen: boolean;
40
40
  submenu?: (Menu | MenuSeparator)[];
41
+ position?: number[];
41
42
  }
42
43
  export type MenuSeparator = {
43
44
  role: 'separator';
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": "3.4.1",
4
+ "version": "3.4.2",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",