@stack-spot/citric-react 0.10.2 → 0.11.1
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.
- package/dist/components/MenuOverlay/Menu.d.ts.map +1 -1
- package/dist/components/MenuOverlay/Menu.js +4 -4
- package/dist/components/MenuOverlay/Menu.js.map +1 -1
- package/dist/components/MenuOverlay/types.d.ts +10 -17
- package/dist/components/MenuOverlay/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/MenuOverlay/Menu.tsx +9 -8
- package/src/components/MenuOverlay/types.ts +10 -17
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/Menu.tsx"],"names":[],"mappings":"AASA,OAAO,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/Menu.tsx"],"names":[],"mappings":"AASA,OAAO,EAAyC,SAAS,EAA0B,MAAM,SAAS,CAAA;AAkFlG;;GAEG;AACH,wBAAgB,IAAI,CAClB,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAqDlI"}
|
|
@@ -10,9 +10,9 @@ import { MenuProvider, useMenuController, useMenuState } from './context.js';
|
|
|
10
10
|
import { keyboardNavigation } from './keyboard.js';
|
|
11
11
|
// Arbitrary time (ms) to wait before running a function that needs the view to be updated with the next state value.
|
|
12
12
|
const RENDER_DELAY = 20;
|
|
13
|
-
function Submenu({ children, label, className, icon, iconRight }) {
|
|
13
|
+
function Submenu({ children, label, className, icon, iconRight, style }) {
|
|
14
14
|
const controller = useMenuController();
|
|
15
|
-
return (_jsxs("button", { className: listToClass([className, 'submenu']), onClick: (e) => {
|
|
15
|
+
return (_jsxs("button", { className: listToClass([className, 'submenu']), style: style, onClick: (e) => {
|
|
16
16
|
e.stopPropagation();
|
|
17
17
|
const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined;
|
|
18
18
|
controller?.setValue({ items: children, label, parent: controller?.getValue() });
|
|
@@ -26,8 +26,8 @@ function Submenu({ children, label, className, icon, iconRight }) {
|
|
|
26
26
|
}
|
|
27
27
|
}, children: [icon, _jsx("span", { children: label }), iconRight] }));
|
|
28
28
|
}
|
|
29
|
-
function MenuSection({ children, label, className }) {
|
|
30
|
-
return (_jsxs("section", { className: className, children: [label && _jsx("h6", { children: label }), _jsx("nav", { children: _jsx(MenuItems, { items: children }) }), !label && _jsx("hr", {})] }));
|
|
29
|
+
function MenuSection({ children, label, className, style }) {
|
|
30
|
+
return (_jsxs("section", { className: className, style: style, children: [label && _jsx("h6", { children: label }), _jsx("nav", { children: _jsx(MenuItems, { items: children }) }), !label && _jsx("hr", {})] }));
|
|
31
31
|
}
|
|
32
32
|
function MenuAction({ label, active, href, icon, iconRight, className, onClick, ...props }) {
|
|
33
33
|
const overlayController = useOverlayController();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/MenuOverlay/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAG/C,qHAAqH;AACrH,MAAM,YAAY,GAAG,EAAE,CAAA;AAEvB,SAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAmB;
|
|
1
|
+
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/MenuOverlay/Menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { WithStyle } from '@stack-spot/portal-theme';
|
|
1
2
|
import { BaseOverlayProps } from '../Overlay/types.js';
|
|
2
3
|
interface CustomLabel {
|
|
3
4
|
/**
|
|
@@ -55,17 +56,13 @@ interface ItemWithIcon {
|
|
|
55
56
|
*/
|
|
56
57
|
iconRight?: React.ReactElement;
|
|
57
58
|
}
|
|
58
|
-
export interface
|
|
59
|
+
export interface MenuAction extends ItemWithIcon, Action, WithStyle {
|
|
59
60
|
/**
|
|
60
61
|
* Whether or not this option is currently active.
|
|
61
62
|
*/
|
|
62
63
|
active?: boolean;
|
|
63
|
-
/**
|
|
64
|
-
* A class to be added to this item.
|
|
65
|
-
*/
|
|
66
|
-
className?: string;
|
|
67
64
|
}
|
|
68
|
-
interface
|
|
65
|
+
interface MenuGroup extends WithStyle {
|
|
69
66
|
/**
|
|
70
67
|
* If this group is rendered as a section with its items right below it or a collapsible, which requires a click to open a submenu.
|
|
71
68
|
*/
|
|
@@ -73,37 +70,33 @@ interface ListGroup {
|
|
|
73
70
|
/**
|
|
74
71
|
* The items of this group.
|
|
75
72
|
*/
|
|
76
|
-
children:
|
|
77
|
-
/**
|
|
78
|
-
* A class to be added to this item.
|
|
79
|
-
*/
|
|
80
|
-
className?: string;
|
|
73
|
+
children: MenuItem[];
|
|
81
74
|
}
|
|
82
|
-
export interface
|
|
75
|
+
export interface MenuSection extends MenuGroup {
|
|
83
76
|
type: 'section';
|
|
84
77
|
/**
|
|
85
78
|
* The section's title.
|
|
86
79
|
*/
|
|
87
80
|
label?: string;
|
|
88
81
|
}
|
|
89
|
-
export interface
|
|
82
|
+
export interface MenuCollapsible extends MenuGroup, ItemWithIcon {
|
|
90
83
|
type?: 'collapsible';
|
|
91
84
|
/**
|
|
92
85
|
* The title of the collapsible menu.
|
|
93
86
|
*/
|
|
94
87
|
label: string;
|
|
95
88
|
}
|
|
96
|
-
export type
|
|
89
|
+
export type MenuItem = MenuSection | MenuCollapsible | MenuAction;
|
|
97
90
|
export interface MenuState {
|
|
98
|
-
items:
|
|
91
|
+
items: MenuItem[];
|
|
99
92
|
parent?: MenuState;
|
|
100
93
|
label?: string;
|
|
101
94
|
}
|
|
102
95
|
export interface BaseMenuProps {
|
|
103
96
|
/**
|
|
104
|
-
* The options in the
|
|
97
|
+
* The options in the menu.
|
|
105
98
|
*/
|
|
106
|
-
items:
|
|
99
|
+
items: MenuItem[];
|
|
107
100
|
/**
|
|
108
101
|
* A header for the menu.
|
|
109
102
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,MAAM;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;IACrE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -7,16 +7,17 @@ import { IconButton } from '../IconBox'
|
|
|
7
7
|
import { useOverlayController } from '../Overlay/context'
|
|
8
8
|
import { MenuProvider, useMenuController, useMenuState } from './context'
|
|
9
9
|
import { keyboardNavigation } from './keyboard'
|
|
10
|
-
import {
|
|
10
|
+
import { MenuAction, MenuCollapsible, MenuItem, MenuProps, MenuSection, MenuState } from './types'
|
|
11
11
|
|
|
12
12
|
// Arbitrary time (ms) to wait before running a function that needs the view to be updated with the next state value.
|
|
13
13
|
const RENDER_DELAY = 20
|
|
14
14
|
|
|
15
|
-
function Submenu({ children, label, className, icon, iconRight }:
|
|
15
|
+
function Submenu({ children, label, className, icon, iconRight, style }: MenuCollapsible) {
|
|
16
16
|
const controller = useMenuController()
|
|
17
17
|
return (
|
|
18
18
|
<button
|
|
19
19
|
className={listToClass([className, 'submenu'])}
|
|
20
|
+
style={style}
|
|
20
21
|
onClick={(e) => {
|
|
21
22
|
e.stopPropagation()
|
|
22
23
|
const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined
|
|
@@ -37,9 +38,9 @@ function Submenu({ children, label, className, icon, iconRight }: ListCollapsibl
|
|
|
37
38
|
)
|
|
38
39
|
}
|
|
39
40
|
|
|
40
|
-
function MenuSection({ children, label, className }:
|
|
41
|
+
function MenuSection({ children, label, className, style }: MenuSection) {
|
|
41
42
|
return (
|
|
42
|
-
<section className={className}>
|
|
43
|
+
<section className={className} style={style}>
|
|
43
44
|
{label && <h6>{label}</h6>}
|
|
44
45
|
<nav>
|
|
45
46
|
<MenuItems items={children} />
|
|
@@ -49,7 +50,7 @@ function MenuSection({ children, label, className }: ListSection) {
|
|
|
49
50
|
)
|
|
50
51
|
}
|
|
51
52
|
|
|
52
|
-
function MenuAction({ label, active, href, icon, iconRight, className, onClick, ...props }:
|
|
53
|
+
function MenuAction({ label, active, href, icon, iconRight, className, onClick, ...props }: MenuAction) {
|
|
53
54
|
const overlayController = useOverlayController()
|
|
54
55
|
const children = <>
|
|
55
56
|
{icon}
|
|
@@ -72,15 +73,15 @@ function MenuAction({ label, active, href, icon, iconRight, className, onClick,
|
|
|
72
73
|
)
|
|
73
74
|
}
|
|
74
75
|
|
|
75
|
-
function hasSections(items:
|
|
76
|
+
function hasSections(items: MenuItem[]) {
|
|
76
77
|
return items.some(i => 'children' in i && i.children.length && i.type === 'section')
|
|
77
78
|
}
|
|
78
79
|
|
|
79
|
-
function hasSubmenus(items:
|
|
80
|
+
function hasSubmenus(items: MenuItem[]) {
|
|
80
81
|
return items.some(i => 'children' in i && i.children.length && i.type === 'collapsible')
|
|
81
82
|
}
|
|
82
83
|
|
|
83
|
-
function MenuItems({ items }: { items:
|
|
84
|
+
function MenuItems({ items }: { items: MenuItem[] }) {
|
|
84
85
|
return useMemo(() => items.map((item, index) => {
|
|
85
86
|
if ('children' in item && item.type === 'section') return <MenuSection key={item.label || index} {...item} />
|
|
86
87
|
if ('children' in item && item.type === 'collapsible') return <Submenu key={item.label || index} {...item} />
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { WithStyle } from '@stack-spot/portal-theme'
|
|
1
2
|
import { BaseOverlayProps } from '../Overlay/types'
|
|
2
3
|
|
|
3
4
|
interface CustomLabel {
|
|
@@ -59,18 +60,14 @@ interface ItemWithIcon {
|
|
|
59
60
|
iconRight?: React.ReactElement,
|
|
60
61
|
}
|
|
61
62
|
|
|
62
|
-
export interface
|
|
63
|
+
export interface MenuAction extends ItemWithIcon, Action, WithStyle {
|
|
63
64
|
/**
|
|
64
65
|
* Whether or not this option is currently active.
|
|
65
66
|
*/
|
|
66
67
|
active?: boolean,
|
|
67
|
-
/**
|
|
68
|
-
* A class to be added to this item.
|
|
69
|
-
*/
|
|
70
|
-
className?: string,
|
|
71
68
|
}
|
|
72
69
|
|
|
73
|
-
interface
|
|
70
|
+
interface MenuGroup extends WithStyle {
|
|
74
71
|
/**
|
|
75
72
|
* If this group is rendered as a section with its items right below it or a collapsible, which requires a click to open a submenu.
|
|
76
73
|
*/
|
|
@@ -78,14 +75,10 @@ interface ListGroup {
|
|
|
78
75
|
/**
|
|
79
76
|
* The items of this group.
|
|
80
77
|
*/
|
|
81
|
-
children:
|
|
82
|
-
/**
|
|
83
|
-
* A class to be added to this item.
|
|
84
|
-
*/
|
|
85
|
-
className?: string,
|
|
78
|
+
children: MenuItem[],
|
|
86
79
|
}
|
|
87
80
|
|
|
88
|
-
export interface
|
|
81
|
+
export interface MenuSection extends MenuGroup {
|
|
89
82
|
type: 'section',
|
|
90
83
|
/**
|
|
91
84
|
* The section's title.
|
|
@@ -93,7 +86,7 @@ export interface ListSection extends ListGroup {
|
|
|
93
86
|
label?: string,
|
|
94
87
|
}
|
|
95
88
|
|
|
96
|
-
export interface
|
|
89
|
+
export interface MenuCollapsible extends MenuGroup, ItemWithIcon {
|
|
97
90
|
type?: 'collapsible',
|
|
98
91
|
/**
|
|
99
92
|
* The title of the collapsible menu.
|
|
@@ -101,19 +94,19 @@ export interface ListCollapsible extends ListGroup, ItemWithIcon {
|
|
|
101
94
|
label: string,
|
|
102
95
|
}
|
|
103
96
|
|
|
104
|
-
export type
|
|
97
|
+
export type MenuItem = MenuSection | MenuCollapsible | MenuAction
|
|
105
98
|
|
|
106
99
|
export interface MenuState {
|
|
107
|
-
items:
|
|
100
|
+
items: MenuItem[],
|
|
108
101
|
parent?: MenuState,
|
|
109
102
|
label?: string,
|
|
110
103
|
}
|
|
111
104
|
|
|
112
105
|
export interface BaseMenuProps {
|
|
113
106
|
/**
|
|
114
|
-
* The options in the
|
|
107
|
+
* The options in the menu.
|
|
115
108
|
*/
|
|
116
|
-
items:
|
|
109
|
+
items: MenuItem[],
|
|
117
110
|
/**
|
|
118
111
|
* A header for the menu.
|
|
119
112
|
*/
|