@stack-spot/portal-layout 0.0.27 → 0.0.29
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/PortalSwitcher.d.ts.map +1 -1
- package/dist/components/PortalSwitcher.js +77 -49
- package/dist/components/PortalSwitcher.js.map +1 -1
- package/dist/components/SelectionList.d.ts.map +1 -1
- package/dist/components/SelectionList.js +2 -2
- package/dist/components/SelectionList.js.map +1 -1
- package/dist/components/menu/MenuContent.d.ts.map +1 -1
- package/dist/components/menu/MenuContent.js +9 -3
- package/dist/components/menu/MenuContent.js.map +1 -1
- package/dist/components/menu/MenuSections.d.ts.map +1 -1
- package/dist/components/menu/MenuSections.js +31 -17
- package/dist/components/menu/MenuSections.js.map +1 -1
- package/dist/components/menu/PageSelector.d.ts.map +1 -1
- package/dist/components/menu/PageSelector.js +6 -1
- package/dist/components/menu/PageSelector.js.map +1 -1
- package/dist/components/types.d.ts +7 -2
- package/dist/components/types.d.ts.map +1 -1
- package/dist/layout.css +21 -9
- package/package.json +2 -2
- package/src/components/PortalSwitcher.tsx +84 -69
- package/src/components/SelectionList.tsx +4 -3
- package/src/components/menu/MenuContent.tsx +9 -3
- package/src/components/menu/MenuSections.tsx +48 -31
- package/src/components/menu/PageSelector.tsx +9 -4
- package/src/components/types.ts +6 -2
- package/src/layout.css +21 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PortalSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/PortalSwitcher.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PortalSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/PortalSwitcher.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AASvC,MAAM,WAAW,MAAM;IAAG,OAAO,EAAE,aAAa,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE;AAE/D,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AA2DD,eAAO,MAAM,cAAc,gBAAsB,mBAAmB,4CA2CnE,CAAA"}
|
|
@@ -1,69 +1,97 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { Button, Flex, IconBox, Text } from '@citric/core';
|
|
3
3
|
import { ArrowRight, CheckCircleFill, Select } from '@citric/icons';
|
|
4
|
-
import {
|
|
4
|
+
import { theme } from '@stack-spot/portal-theme';
|
|
5
5
|
import { useTranslate } from '@stack-spot/portal-translate';
|
|
6
|
-
import {
|
|
6
|
+
import { useState } from 'react';
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { SelectionList, announce } from '../index.js';
|
|
7
9
|
import { AI } from '../svg/AI.js';
|
|
8
10
|
import { EDP } from '../svg/EDP.js';
|
|
9
11
|
import { HUB } from '../svg/HUB.js';
|
|
10
12
|
import { Logo } from '../svg/Logo.js';
|
|
11
|
-
import { announce } from '../index.js';
|
|
12
13
|
const Logos = {
|
|
13
14
|
'AI': _jsx(AI, {}),
|
|
14
15
|
'EDP': _jsx(EDP, {}),
|
|
15
16
|
'HUB': _jsx(HUB, {}),
|
|
16
17
|
};
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
18
|
+
const PortalSwitcherBox = styled(Flex) `
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
align-items: start;
|
|
21
|
+
|
|
22
|
+
.current-portal {
|
|
23
|
+
padding: 8px;
|
|
24
|
+
border-radius: 4px;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
&:hover {
|
|
27
|
+
background-color: ${theme.color.light[500]};
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.selection-list {
|
|
32
|
+
max-width: 360px;
|
|
33
|
+
box-shadow: 4px 4px 48px 0px #000000;
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: 50px;
|
|
36
|
+
|
|
37
|
+
.selection-list-content {
|
|
38
|
+
padding: 8px;
|
|
39
|
+
border-width: 1px;
|
|
40
|
+
border-style: solid;
|
|
41
|
+
border-color: ${theme.color.light['500']};
|
|
42
|
+
|
|
43
|
+
&> ul {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
gap: 8px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.action {
|
|
50
|
+
padding: 16px;
|
|
51
|
+
background-color: ${theme.color.light['400']};
|
|
52
|
+
border-width: 1px;
|
|
53
|
+
border-style: solid;
|
|
54
|
+
border-color: ${theme.color.light['500']};
|
|
55
|
+
border-radius: 4px;
|
|
56
|
+
|
|
57
|
+
&:hover, &:hover a {
|
|
58
|
+
background-color: ${theme.color.light['500']};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
a {
|
|
62
|
+
height: auto;
|
|
63
|
+
transition: unset;
|
|
64
|
+
align-items: flex-start;
|
|
65
|
+
|
|
66
|
+
i:nth-child(3) {
|
|
67
|
+
display: none;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
`;
|
|
75
|
+
export const PortalSwitcher = ({ portals = [] }) => {
|
|
57
76
|
const [isOpen, setIsOpen] = useState(false);
|
|
58
|
-
const dropRef = useRef(null);
|
|
59
77
|
const t = useTranslate(translations);
|
|
60
78
|
const currentPortal = portals?.find(portal => location.href.startsWith(portal.url));
|
|
61
|
-
return _jsxs(
|
|
62
|
-
_jsx(Button, { appearance: "text", colorScheme: "light", "aria-label": t.portalSwitcher, onClick: () => {
|
|
79
|
+
return _jsxs(PortalSwitcherBox, { children: [currentPortal ?
|
|
80
|
+
_jsx(Button, { className: "current-portal", appearance: "text", colorScheme: "light", "aria-label": t.portalSwitcher, onClick: () => {
|
|
63
81
|
setIsOpen(true);
|
|
64
82
|
announce(`${t.portalSwitcher} ${t.selected}`);
|
|
65
|
-
},
|
|
66
|
-
_jsx(Logo, {}), _jsx(
|
|
83
|
+
}, children: _jsxs(Flex, { alignItems: "center", children: [Logos[currentPortal.acronym], _jsx(IconBox, { size: "xs", ml: 3, children: _jsx(Select, {}) })] }) }) :
|
|
84
|
+
_jsx(Logo, {}), _jsx(SelectionList, { items: portals?.map(portal => ({
|
|
85
|
+
label: {
|
|
86
|
+
id: portal.acronym,
|
|
87
|
+
element: _jsxs(Flex, { flexDirection: "column", children: [Logos[portal.acronym], _jsx(Text, { appearance: "microtext1", mt: 3, colorScheme: "light.700", children: t[portal.acronym] })] }),
|
|
88
|
+
},
|
|
89
|
+
target: '_self',
|
|
90
|
+
href: portal.url,
|
|
91
|
+
active: currentPortal?.acronym == portal.acronym,
|
|
92
|
+
onClick: () => announce(`${portal.acronym} ${t.selected}`),
|
|
93
|
+
iconRight: portal.acronym === currentPortal?.acronym ? _jsx(CheckCircleFill, {}) : _jsx(ArrowRight, {}),
|
|
94
|
+
})), visible: isOpen, maxHeight: "21rem", onHide: () => setIsOpen(false) })] });
|
|
67
95
|
};
|
|
68
96
|
const translations = {
|
|
69
97
|
en: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PortalSwitcher.js","sourceRoot":"","sources":["../../src/components/PortalSwitcher.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"PortalSwitcher.js","sourceRoot":"","sources":["../../src/components/PortalSwitcher.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAA;AAGvD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC,QAAQ,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;
|
|
1
|
+
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAA;AAGvD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC,QAAQ,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqHD,eAAO,MAAM,aAAa,wFAEvB,kBAAkB,4CAuDpB,CAAA"}
|
|
@@ -22,7 +22,6 @@ const SelectionBox = styled.div `
|
|
|
22
22
|
.selection-list-content {
|
|
23
23
|
display: flex;
|
|
24
24
|
flex-direction: column;
|
|
25
|
-
border-radius: 0.5rem;
|
|
26
25
|
background: ${theme.color.light['500']};
|
|
27
26
|
border-radius: 0.5rem;
|
|
28
27
|
border: 1px solid ${theme.color.light['600']};
|
|
@@ -69,7 +68,8 @@ function renderAction({ label, href, onClick, icon, iconRight, active, target },
|
|
|
69
68
|
onClick?.();
|
|
70
69
|
onClose?.();
|
|
71
70
|
}
|
|
72
|
-
|
|
71
|
+
const isTextLabel = typeof label === 'string';
|
|
72
|
+
return (_jsx("li", { className: "action", children: _jsxs("a", { href: href, onClick: handleClick, target: target, tabIndex: 0, "aria-selected": active, children: [icon && _jsx(IconBox, { children: icon }), isTextLabel ? _jsx(Text, { appearance: "body2", className: "label", children: label }) : label.element, iconRight && _jsx(IconBox, { children: iconRight }), active && _jsx(IconBox, { children: _jsx(Check, {}) })] }) }, isTextLabel ? label : label.id));
|
|
73
73
|
}
|
|
74
74
|
function renderCollapsible({ label, icon, iconRight, children }, { setCurrent, controllerId }) {
|
|
75
75
|
function handleClick(ev) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAmClE,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,qBAAqB,GAAG,sBAAsB,qBAAqB,GAAG,IAAI,GAAG,CAAA;AAmBnF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA2C;;gBAE1D,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;gBAE5C,qBAAqB,mBAAmB,qBAAqB,GAAG,IAAI
|
|
1
|
+
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";;AAUA,OAAO,EAAa,UAAU,EAAY,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAY7E,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GrB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIjB,CAAA;AAED,eAAO,MAAM,UAAU,4DAAsE,UAAU,
|
|
1
|
+
{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";;AAUA,OAAO,EAAa,UAAU,EAAY,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAY7E,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GrB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIjB,CAAA;AAED,eAAO,MAAM,UAAU,4DAAsE,UAAU,4CAsBtG,CAAA;AAmDD,eAAO,MAAM,WAAW,mFAAyF,kBAAkB,4CAsClI,CAAA"}
|
|
@@ -137,13 +137,16 @@ export const Title = styled.header `
|
|
|
137
137
|
`;
|
|
138
138
|
export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }) => {
|
|
139
139
|
const { ref, overflow: textOverflow } = useCheckTextOverflow();
|
|
140
|
+
const isTextLabel = typeof label === 'string';
|
|
140
141
|
return (_jsxs("a", { href: active ? undefined : href, onClick: () => {
|
|
141
142
|
if (active)
|
|
142
143
|
return;
|
|
143
144
|
if (onClick)
|
|
144
145
|
onClick();
|
|
145
146
|
hideOverlayImmediately();
|
|
146
|
-
}, className: listToClass(['action', 'item-row', active ? 'active' : undefined]), ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: [icon,
|
|
147
|
+
}, className: listToClass(['action', 'item-row', active ? 'active' : undefined]), ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: [icon, isTextLabel ?
|
|
148
|
+
_jsx(Text, { ref: ref, appearance: "body2", className: `label ${overflow}`, title: textOverflow ? label : '', children: label }) :
|
|
149
|
+
label.element, badge] }));
|
|
147
150
|
};
|
|
148
151
|
const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, overflow = 'wrap' }) => {
|
|
149
152
|
const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false);
|
|
@@ -157,7 +160,8 @@ const RootGroupItem = ({ label, children, icon, badge, overflow = 'wrap' }) => {
|
|
|
157
160
|
};
|
|
158
161
|
const GroupItem = ({ root, ...item }) => (root ? _jsx(RootGroupItem, { ...item }) : _jsx(CollapsibleGroupItem, { ...item }));
|
|
159
162
|
function renderOption({ root, ...option }) {
|
|
160
|
-
|
|
163
|
+
const labelText = typeof option.label === 'string' ? option.label : option.label.id;
|
|
164
|
+
return _jsx("li", { children: 'children' in option ? _jsx(GroupItem, { root: root, ...option }) : _jsx(ActionItem, { ...option }) }, labelText);
|
|
161
165
|
}
|
|
162
166
|
export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle, options = [], loading, error }) => {
|
|
163
167
|
const items = useMemo(() => options.filter(o => !o.hidden).map(o => renderOption({ ...o, root: true })), [options]);
|
|
@@ -169,6 +173,8 @@ export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle,
|
|
|
169
173
|
return _jsx(Text, { colorScheme: "danger", children: error });
|
|
170
174
|
return _jsx(MenuGroup, { className: "open root no-indentation", children: items });
|
|
171
175
|
}
|
|
172
|
-
return (_jsxs(_Fragment, { children: [goBack && (_jsxs(BackLink, { href: goBack.href, onClick: goBack.onClick, children: [_jsx(IconBox, { colorScheme: "inverse", size: "sm", children: _jsx(ArrowLeft, {}) }),
|
|
176
|
+
return (_jsxs(_Fragment, { children: [goBack && (_jsxs(BackLink, { href: goBack.href, onClick: goBack.onClick, children: [_jsx(IconBox, { colorScheme: "inverse", size: "sm", children: _jsx(ArrowLeft, {}) }), typeof goBack?.label === 'string' ?
|
|
177
|
+
_jsx(Text, { appearance: "body2", nowrapEllipsis: true, children: goBack.label }) :
|
|
178
|
+
goBack.label.element] })), title && (_jsxs(Title, { children: [_jsx(Text, { appearance: "overheader1", colorScheme: "primary", sx: { fontSize: '0.75rem', mt: 2, mb: 2 }, children: title }), subtitle && _jsx(Text, { appearance: "h5", children: subtitle })] })), afterTitle, pageSelector && _jsx(PageSelector, { ...pageSelector }), renderContent()] }));
|
|
173
179
|
};
|
|
174
180
|
//# sourceMappingURL=MenuContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,yBAAyB,IAAI,YAAY,EAAE,oBAAoB,IAAI,OAAO,EAAE,MAAM,aAAa,CAAA;AAExG,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAEhE,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAA;;;;YAIb,OAAO;;;CAGlB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAkClB,OAAO,GAAG,YAAY;;iBAErB,YAAY;;;0BAGH,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;wBAuB1B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;sBAM5B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0B/B,OAAO;;;;uBAIL,OAAO;;;;;;;;;;;;;CAa7B,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAA;;;YAGtB,OAAO,aAAa,OAAO;CACtC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,GAAG,MAAM,EAAc,EAAE,EAAE;IACzG,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,oBAAoB,EAAE,CAAA;IAC9D,OAAO,CACL,aACE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC/B,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,MAAM;gBAAE,OAAM;YAClB,IAAI,OAAO;gBAAE,OAAO,EAAE,CAAA;YACtB,sBAAsB,EAAE,CAAA;QAC1B,CAAC,EACD,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,KACzE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KACjD,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,aAE1C,IAAI,
|
|
1
|
+
{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;AAehD,wBAAgB,sBAAsB,SAErC;
|
|
1
|
+
{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;AAehD,wBAAgB,sBAAsB,SAErC;AAqHD,eAAO,MAAM,YAAY,2BAAiC,SAAS,4CAgGlE,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Flex, IconBox, Text } from '@citric/core';
|
|
3
|
-
import { ChevronRight, Cog, Collapse,
|
|
3
|
+
import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons';
|
|
4
4
|
import { interpolate, useTranslate } from '@stack-spot/portal-translate';
|
|
5
5
|
import { useCallback, useMemo, useState } from 'react';
|
|
6
6
|
import { MenuContent } from './MenuContent.js';
|
|
@@ -36,12 +36,15 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
|
|
|
36
36
|
const t = useTranslate(dictionary);
|
|
37
37
|
function shouldShowOverlay() {
|
|
38
38
|
/* The overlay should appear if:
|
|
39
|
-
* 1. The
|
|
40
|
-
*
|
|
41
|
-
*
|
|
39
|
+
* 1. The menu is compacted showing only the icons
|
|
40
|
+
* 2. The section has some content to render OR:
|
|
41
|
+
* 2.1 The section is active and there is a contextual menu for the active page.
|
|
42
|
+
* 3. The section is inactive OR:
|
|
42
43
|
* 2.1. The contextual menu is hidden.
|
|
43
44
|
*/
|
|
44
|
-
|
|
45
|
+
const layout = document.getElementById('layout');
|
|
46
|
+
const isCompactedOnlyIcons = layout?.classList.contains('menu-compact-only-icons');
|
|
47
|
+
return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible());
|
|
45
48
|
}
|
|
46
49
|
function showOverlayAndFixArrowPosition(event) {
|
|
47
50
|
if (!shouldShowOverlay())
|
|
@@ -60,12 +63,13 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
|
|
|
60
63
|
onClick();
|
|
61
64
|
hideOverlayImmediately();
|
|
62
65
|
}
|
|
63
|
-
|
|
66
|
+
const labelText = typeof label === 'string' ? label : label.id;
|
|
67
|
+
return (_jsx(_Fragment, { children: _jsxs("li", { title: labelText, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, children: [_jsx("a", { href: href, target: target, onClick: click, onMouseEnter: showOverlayAndFixArrowPosition, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), title: labelText, "aria-label": labelText, onKeyDown: onClick ? e => e.key === 'Enter' && onClick() : undefined, ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", px: 5, children: [icon, typeof label === 'string' ? _jsx(Text, { appearance: "microtext1", className: "section-label", ml: 3, children: label }) : label.element] }) }), shouldShowOverlay() &&
|
|
64
68
|
_jsx(IconBox, { size: "sm", className: "section-submenu-icon", as: "button", "aria-label": interpolate(t.menuOptions, label), "aria-controls": MENU_OVERLAY_ID, "aria-expanded": document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible'), onKeyDown: (event) => {
|
|
65
69
|
if (event.key === 'Enter') {
|
|
66
70
|
showOverlayAndFixArrowPosition(event);
|
|
67
71
|
}
|
|
68
|
-
}, children: _jsx(ChevronRight, {}) })] },
|
|
72
|
+
}, children: _jsx(ChevronRight, {}) })] }, labelText) }));
|
|
69
73
|
};
|
|
70
74
|
const OverlayRenderer = ({ content, customContent }) => {
|
|
71
75
|
if (customContent) {
|
|
@@ -79,15 +83,23 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
79
83
|
// this is a mock state only used to force an update on the component.
|
|
80
84
|
const [_, setUpdate] = useState(0);
|
|
81
85
|
const onHide = () => hideOverlay();
|
|
82
|
-
const toggleMenu = useCallback(() => {
|
|
86
|
+
const toggleMenu = useCallback((hasContent) => {
|
|
83
87
|
const layout = document.getElementById('layout');
|
|
84
88
|
if (!layout)
|
|
85
89
|
return;
|
|
86
|
-
if (layout.classList.contains('menu-
|
|
87
|
-
layout.classList.remove('menu-
|
|
90
|
+
if (layout.classList.contains('menu-compact-only-icons')) {
|
|
91
|
+
layout.classList.remove('menu-compact-only-icons');
|
|
88
92
|
}
|
|
89
93
|
else {
|
|
90
|
-
layout.classList.add('menu-
|
|
94
|
+
layout.classList.add('menu-compact-only-icons');
|
|
95
|
+
}
|
|
96
|
+
if (hasContent) {
|
|
97
|
+
if (layout.classList.contains('menu-content-visible')) {
|
|
98
|
+
layout.classList.remove('menu-content-visible');
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
layout.classList.add('menu-content-visible');
|
|
102
|
+
}
|
|
91
103
|
}
|
|
92
104
|
setUpdate(current => current + 1);
|
|
93
105
|
}, []);
|
|
@@ -101,9 +113,11 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
101
113
|
items[currentOverlay].children[1].focus();
|
|
102
114
|
}
|
|
103
115
|
}
|
|
104
|
-
const wrapper = useKeyboardControls({
|
|
116
|
+
const wrapper = useKeyboardControls({
|
|
117
|
+
onHide, visible: document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible') || false,
|
|
105
118
|
querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
|
|
106
|
-
onPressEscape: () => onPressEscape()
|
|
119
|
+
onPressEscape: () => onPressEscape(),
|
|
120
|
+
});
|
|
107
121
|
/* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
|
|
108
122
|
instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
|
|
109
123
|
Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
|
|
@@ -118,10 +132,8 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
118
132
|
? _jsx(OverlayRenderer, { content: props.content, customContent: props.customContent }, 'contentKey' in props ? props.contentKey : undefined)
|
|
119
133
|
: _jsx(OverlayRenderer, { content: sections[currentOverlay].content, customContent: sections[currentOverlay].customContent }, currentOverlay);
|
|
120
134
|
}
|
|
121
|
-
return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), (!!props.content || !!props.customContent
|
|
122
|
-
|
|
123
|
-
_jsx("button", { className: "toggle sections-footer", onClick: toggleMenu, title: t.toggle, tabIndex: -1, "aria-hidden": true, children: _jsxs(IconBox, { children: [_jsx(MenuIcon, { className: "expand" }), _jsx(Collapse, { className: "collapse" })] }) }), (props.settings?.show) &&
|
|
124
|
-
_jsx("a", { href: props.settings?.href, onClick: props.settings?.onClick, className: "sections-footer", ...(props.settings.active ? { 'aria-current': 'page' } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", children: [_jsx(IconBox, { "aria-label": t.settingsIcon, children: _jsx(Cog, {}) }), _jsx(Text, { appearance: "body2", ml: 2, children: t.settings })] }) })] }), _jsxs("div", { id: MENU_OVERLAY_ID, onMouseEnter: showOverlay, onMouseLeave: hideOverlay, ref: wrapper, children: [renderMenuOverlay(), _jsx("div", { className: "arrow" })] })] }));
|
|
135
|
+
return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), _jsxs(Flex, { mb: 7, alignItems: "center", children: [_jsxs("button", { className: "toggle sections-footer", onClick: () => toggleMenu(!!props.content || !!props.customContent), title: t.toggle, tabIndex: -1, "aria-hidden": true, children: [_jsxs(IconBox, { children: [_jsx(Expand, { className: "expand" }), _jsx(Collapse, { className: "collapse" })] }), _jsx(Text, { appearance: "microtext1", ml: 8, className: "collapse", colorScheme: "light.contrastText", children: t.hide })] }), (props.settings?.show) &&
|
|
136
|
+
_jsx("a", { href: props.settings?.href, onClick: props.settings?.onClick, className: "sections-footer", ...(props.settings.active ? { 'aria-current': 'page' } : undefined), children: _jsxs(Flex, { alignItems: "center", children: [_jsx(IconBox, { "aria-label": t.settingsIcon, children: _jsx(Cog, {}) }), _jsx(Text, { appearance: "microtext1", ml: 2, children: t.settings })] }) })] }), _jsxs("div", { id: MENU_OVERLAY_ID, onMouseEnter: showOverlay, onMouseLeave: hideOverlay, ref: wrapper, children: [renderMenuOverlay(), _jsx("div", { className: "arrow" })] })] }));
|
|
125
137
|
};
|
|
126
138
|
const dictionary = {
|
|
127
139
|
en: {
|
|
@@ -129,12 +141,14 @@ const dictionary = {
|
|
|
129
141
|
menuOptions: 'View $0 menu options',
|
|
130
142
|
settings: 'Settings',
|
|
131
143
|
settingsIcon: 'Settings icon',
|
|
144
|
+
hide: 'Hide',
|
|
132
145
|
},
|
|
133
146
|
pt: {
|
|
134
147
|
toggle: 'Visualizar ou esconder o menu',
|
|
135
148
|
menuOptions: 'Visualizar opções do menu $0',
|
|
136
149
|
settings: 'Configurações',
|
|
137
150
|
settingsIcon: 'Icone de configurações',
|
|
151
|
+
hide: 'Esconder',
|
|
138
152
|
},
|
|
139
153
|
};
|
|
140
154
|
//# sourceMappingURL=MenuSections.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAsElC,eAAO,MAAM,YAAY,+CAAgD,QAAQ,
|
|
1
|
+
{"version":3,"file":"PageSelector.d.ts","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAsElC,eAAO,MAAM,YAAY,+CAAgD,QAAQ,4CA6DhF,CAAA"}
|
|
@@ -92,9 +92,14 @@ export const PageSelector = ({ options, value, button, loading, title }) => {
|
|
|
92
92
|
return { optionsWithIcon, selected };
|
|
93
93
|
}, [options, value, button]);
|
|
94
94
|
const label = selected?.label ?? button?.label ?? value;
|
|
95
|
+
const isTextLabel = typeof label == 'string';
|
|
96
|
+
const labelText = typeof label === 'string' ? label : label.id;
|
|
97
|
+
const buttonLabelText = typeof button?.label == 'string' ? button?.label : button?.label.id;
|
|
95
98
|
return (_jsx(SelectorBox, { children: loading
|
|
96
99
|
? _jsx(LoadingCircular, {})
|
|
97
|
-
: (_jsxs(_Fragment, { children: [title && _jsx(Text, { colorScheme: "light.700", sx: { mb: 3 }, children: title }), _jsxs("a", { onClick: () => setVisible(true), onKeyDown: e => e.key === 'Enter' && setVisible(true), title: value, tabIndex: 0, "aria-label": interpolate(t.accessibility, [value]), "aria-expanded": visible, "aria-controls": id.current, children: [selected?.icon && _jsx(IconBox, { children: selected?.icon }),
|
|
100
|
+
: (_jsxs(_Fragment, { children: [title && _jsx(Text, { colorScheme: "light.700", sx: { mb: 3 }, children: title }), _jsxs("a", { onClick: () => setVisible(true), onKeyDown: e => e.key === 'Enter' && setVisible(true), title: value, tabIndex: 0, "aria-label": interpolate(t.accessibility, [value]), "aria-expanded": visible, "aria-controls": id.current, children: [selected?.icon && _jsx(IconBox, { children: selected?.icon }), isTextLabel ?
|
|
101
|
+
_jsx(Text, { ref: ref, appearance: "body2", className: "label", title: overflow ? labelText : '', children: labelText }) :
|
|
102
|
+
label.element, _jsx(IconBox, { size: "xs", children: _jsx(Select, {}) })] }), _jsx(SelectionList, { id: id.current, visible: visible, items: optionsWithIcon, onHide: () => setVisible(false), after: button ? _jsx("a", { className: "view-all", href: button.href, onClick: button.onClick, children: buttonLabelText }) : undefined, scroll: true })] })) }));
|
|
98
103
|
};
|
|
99
104
|
const dictionary = {
|
|
100
105
|
en: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,oBAAoB,IAAI,OAAO,EAAE,MAAM,aAAa,CAAA;AAE7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAEhE,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;YAElB,OAAO;;;;;;;;wBAQK,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;0BAKtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+BxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;0BACxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;4BAGtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;oBAKhC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;CAU3C,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAY,EAAE,EAAE;IACnF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE,CAAA;IAChD,MAAM,EAAE,GAAG,MAAM,CAAC,eAAe,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAC1D,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,OAAO,CAC3C,GAAG,EAAE;QACH,IAAI,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;QACzB,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,CAAa,CAAC,MAAM,EAAE,EAAE;YACzD,IAAI,MAAM,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBACzB,QAAQ,GAAG,MAAM,CAAA;gBACjB,OAAO,EAAE,GAAG,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;YACpC,CAAC;YACD,OAAO,EAAE,GAAG,MAAM,EAAE,SAAS,EAAE,KAAC,UAAU,KAAG,EAAE,CAAA;QACjD,CAAC,CAAC,CAAA;QACF,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAA;IACtC,CAAC,EACD,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CACzB,CAAA;IAED,MAAM,KAAK,GAAG,QAAQ,EAAE,KAAK,IAAI,MAAM,EAAE,KAAK,IAAI,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
interface CustomLabel {
|
|
3
|
+
id: string;
|
|
4
|
+
element: ReactNode;
|
|
5
|
+
}
|
|
2
6
|
export interface Action {
|
|
3
|
-
label: string;
|
|
7
|
+
label: string | CustomLabel;
|
|
4
8
|
onClick?: () => void;
|
|
5
9
|
href?: string;
|
|
6
10
|
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
7
11
|
}
|
|
8
12
|
export type PortalAcronym = 'EDP' | 'AI' | 'HUB';
|
|
13
|
+
export {};
|
|
9
14
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,SAAS,CAAC;CACpB;AACD,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;CAClE;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,CAAA"}
|
package/dist/layout.css
CHANGED
|
@@ -40,7 +40,7 @@ body {
|
|
|
40
40
|
#layout {
|
|
41
41
|
--header-height: 56px;
|
|
42
42
|
--menu-sections-width: 135px;
|
|
43
|
-
--menu-content-width:
|
|
43
|
+
--menu-content-width: 240px;
|
|
44
44
|
--menu-item-height: 74px;
|
|
45
45
|
--modal-animation-duration: 0.3s;
|
|
46
46
|
--right-panel-animation-duration: 0.3s;
|
|
@@ -49,11 +49,16 @@ body {
|
|
|
49
49
|
--toastify-font-family: 'Roboto', sans-serif;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
#layout.menu-compact {
|
|
52
|
+
#layout.menu-compact:not(.menu-compact-only-icons) {
|
|
53
53
|
--menu-sections-width: 135px;
|
|
54
54
|
--menu-item-height: 56px;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
#layout.menu-compact-only-icons {
|
|
58
|
+
--menu-sections-width: 56px;
|
|
59
|
+
--menu-item-height: 56px;
|
|
60
|
+
}
|
|
61
|
+
|
|
57
62
|
#layout.no-menu-sections {
|
|
58
63
|
--menu-sections-width: 0px;
|
|
59
64
|
}
|
|
@@ -128,13 +133,21 @@ body {
|
|
|
128
133
|
}
|
|
129
134
|
|
|
130
135
|
#menu .toggle .expand,
|
|
131
|
-
#layout.menu-
|
|
132
|
-
opacity:
|
|
136
|
+
#layout.menu-compact-only-icons .toggle .collapse {
|
|
137
|
+
opacity: 0;
|
|
133
138
|
}
|
|
134
139
|
|
|
135
140
|
#menu .toggle .collapse,
|
|
136
|
-
#layout.menu-
|
|
137
|
-
opacity:
|
|
141
|
+
#layout.menu-compact-only-icons .toggle .expand {
|
|
142
|
+
opacity: 1;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
#layout.menu-compact-only-icons .section-label {
|
|
146
|
+
display: none;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
#layout:not(.menu-compact-only-icons) .section-label {
|
|
150
|
+
display: block;
|
|
138
151
|
}
|
|
139
152
|
|
|
140
153
|
#menuSections {
|
|
@@ -210,9 +223,8 @@ body {
|
|
|
210
223
|
top: calc(var(--header-height) + 15px);
|
|
211
224
|
left: calc(var(--menu-sections-width) + 15px);
|
|
212
225
|
bottom: 15px;
|
|
213
|
-
background-color: var(--light-
|
|
214
|
-
|
|
215
|
-
border-radius: 16px;
|
|
226
|
+
background-color: var(--light-500);
|
|
227
|
+
border-radius: 0 8px 8px 0;
|
|
216
228
|
display: flex;
|
|
217
229
|
flex-direction: column;
|
|
218
230
|
overflow: hidden;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-layout",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.29",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"peerDependencies": {
|
|
8
8
|
"@citric/core": ">=5.7.0",
|
|
9
|
-
"@citric/icons": ">=5.7.
|
|
9
|
+
"@citric/icons": ">=5.7.1",
|
|
10
10
|
"@citric/ui": ">=5.7.2",
|
|
11
11
|
"@stack-spot/portal-theme": ">=0.0.4",
|
|
12
12
|
"@stack-spot/portal-translate": ">=0.0.5",
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Button, Flex, IconBox, Text } from '@citric/core'
|
|
2
2
|
import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
|
|
3
|
-
import {
|
|
3
|
+
import { theme } from '@stack-spot/portal-theme'
|
|
4
4
|
import { useTranslate } from '@stack-spot/portal-translate'
|
|
5
|
-
import { ReactNode,
|
|
5
|
+
import { ReactNode, useState } from 'react'
|
|
6
|
+
import styled from 'styled-components'
|
|
7
|
+
import { SelectionList, announce } from '..'
|
|
6
8
|
import { AI } from '../svg/AI'
|
|
7
9
|
import { EDP } from '../svg/EDP'
|
|
8
10
|
import { HUB } from '../svg/HUB'
|
|
9
11
|
import { Logo } from '../svg/Logo'
|
|
10
|
-
import { announce } from '..'
|
|
11
12
|
import { PortalAcronym } from './types'
|
|
12
13
|
|
|
13
14
|
|
|
@@ -23,62 +24,79 @@ export interface PortalSwitcherProps {
|
|
|
23
24
|
portals?: Portal[],
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
27
|
+
const PortalSwitcherBox = styled(Flex)`
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
align-items: start;
|
|
30
|
+
|
|
31
|
+
.current-portal {
|
|
32
|
+
padding: 8px;
|
|
33
|
+
border-radius: 4px;
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
&:hover {
|
|
36
|
+
background-color: ${theme.color.light[500]};
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.selection-list {
|
|
41
|
+
max-width: 360px;
|
|
42
|
+
box-shadow: 4px 4px 48px 0px #000000;
|
|
43
|
+
position: absolute;
|
|
44
|
+
top: 50px;
|
|
45
|
+
|
|
46
|
+
.selection-list-content {
|
|
47
|
+
padding: 8px;
|
|
48
|
+
border-width: 1px;
|
|
49
|
+
border-style: solid;
|
|
50
|
+
border-color: ${theme.color.light['500']};
|
|
51
|
+
|
|
52
|
+
&> ul {
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: 8px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.action {
|
|
59
|
+
padding: 16px;
|
|
60
|
+
background-color: ${theme.color.light['400']};
|
|
61
|
+
border-width: 1px;
|
|
62
|
+
border-style: solid;
|
|
63
|
+
border-color: ${theme.color.light['500']};
|
|
64
|
+
border-radius: 4px;
|
|
65
|
+
|
|
66
|
+
&:hover, &:hover a {
|
|
67
|
+
background-color: ${theme.color.light['500']};
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
a {
|
|
71
|
+
height: auto;
|
|
72
|
+
transition: unset;
|
|
73
|
+
align-items: flex-start;
|
|
65
74
|
|
|
66
|
-
|
|
75
|
+
i:nth-child(3) {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
`
|
|
84
|
+
export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
|
|
67
85
|
const [isOpen, setIsOpen] = useState<boolean>(false)
|
|
68
|
-
const dropRef = useRef<HTMLUListElement>(null)
|
|
69
86
|
const t = useTranslate(translations)
|
|
70
87
|
const currentPortal = portals?.find(portal => location.href.startsWith(portal.url))
|
|
71
88
|
|
|
72
|
-
return <
|
|
89
|
+
return <PortalSwitcherBox>
|
|
73
90
|
{currentPortal ?
|
|
74
91
|
<Button
|
|
92
|
+
className="current-portal"
|
|
75
93
|
appearance="text"
|
|
76
94
|
colorScheme="light"
|
|
77
95
|
aria-label={t.portalSwitcher}
|
|
78
96
|
onClick={() => {
|
|
79
97
|
setIsOpen(true)
|
|
80
98
|
announce(`${t.portalSwitcher} ${t.selected}`)
|
|
81
|
-
}}
|
|
99
|
+
}}>
|
|
82
100
|
<Flex alignItems="center">
|
|
83
101
|
{Logos[currentPortal.acronym]}
|
|
84
102
|
<IconBox size="xs" ml={3}>
|
|
@@ -87,28 +105,25 @@ export const PortalSwitcher = ({ portals }: PortalSwitcherProps) => {
|
|
|
87
105
|
</Flex>
|
|
88
106
|
</Button> :
|
|
89
107
|
<Logo />}
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
{
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
</Box>
|
|
110
|
-
</Dropdown>
|
|
111
|
-
</Flex >
|
|
108
|
+
<SelectionList
|
|
109
|
+
items={portals?.map(portal => ({
|
|
110
|
+
label: {
|
|
111
|
+
id: portal.acronym,
|
|
112
|
+
element: <Flex flexDirection="column">
|
|
113
|
+
{Logos[portal.acronym]}
|
|
114
|
+
<Text appearance="microtext1" mt={3} colorScheme="light.700">{t[portal.acronym]}</Text>
|
|
115
|
+
</Flex>,
|
|
116
|
+
},
|
|
117
|
+
target: '_self',
|
|
118
|
+
href: portal.url,
|
|
119
|
+
active: currentPortal?.acronym == portal.acronym,
|
|
120
|
+
onClick: () => announce(`${portal.acronym} ${t.selected}`),
|
|
121
|
+
iconRight: portal.acronym === currentPortal?.acronym ? <CheckCircleFill /> : <ArrowRight />,
|
|
122
|
+
}))}
|
|
123
|
+
visible={isOpen}
|
|
124
|
+
maxHeight="21rem"
|
|
125
|
+
onHide={() => setIsOpen(false)} />
|
|
126
|
+
</PortalSwitcherBox >
|
|
112
127
|
}
|
|
113
128
|
|
|
114
129
|
|
|
@@ -73,7 +73,6 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
|
|
|
73
73
|
.selection-list-content {
|
|
74
74
|
display: flex;
|
|
75
75
|
flex-direction: column;
|
|
76
|
-
border-radius: 0.5rem;
|
|
77
76
|
background: ${theme.color.light['500']};
|
|
78
77
|
border-radius: 0.5rem;
|
|
79
78
|
border: 1px solid ${theme.color.light['600']};
|
|
@@ -122,11 +121,13 @@ function renderAction({ label, href, onClick, icon, iconRight, active, target }:
|
|
|
122
121
|
onClose?.()
|
|
123
122
|
}
|
|
124
123
|
|
|
124
|
+
const isTextLabel = typeof label === 'string'
|
|
125
|
+
|
|
125
126
|
return (
|
|
126
|
-
<li key={label} className="action">
|
|
127
|
+
<li key={isTextLabel ? label : label.id} className="action">
|
|
127
128
|
<a href={href} onClick={handleClick} target={target} tabIndex={0} aria-selected={active}>
|
|
128
129
|
{icon && <IconBox>{icon}</IconBox>}
|
|
129
|
-
<Text appearance="body2" className="label">{label}</Text>
|
|
130
|
+
{isTextLabel ? <Text appearance="body2" className="label">{label}</Text> : label.element}
|
|
130
131
|
{iconRight && <IconBox>{iconRight}</IconBox>}
|
|
131
132
|
{active && <IconBox><Check /></IconBox>}
|
|
132
133
|
</a>
|
|
@@ -141,6 +141,7 @@ export const Title = styled.header`
|
|
|
141
141
|
|
|
142
142
|
export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }: MenuAction) => {
|
|
143
143
|
const { ref, overflow: textOverflow } = useCheckTextOverflow()
|
|
144
|
+
const isTextLabel = typeof label === 'string'
|
|
144
145
|
return (
|
|
145
146
|
<a
|
|
146
147
|
href={active ? undefined : href}
|
|
@@ -154,7 +155,9 @@ export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow
|
|
|
154
155
|
{...(!href ? { 'tabIndex': 0 } : undefined)}
|
|
155
156
|
>
|
|
156
157
|
{icon}
|
|
157
|
-
|
|
158
|
+
{isTextLabel ?
|
|
159
|
+
<Text ref={ref} appearance="body2" className={`label ${overflow}`} title={textOverflow ? label : ''}>{label}</Text> :
|
|
160
|
+
label.element}
|
|
158
161
|
{badge}
|
|
159
162
|
</a>
|
|
160
163
|
)
|
|
@@ -205,7 +208,8 @@ const GroupItem = ({ root, ...item }: ItemGroup & { root?: boolean }) => (
|
|
|
205
208
|
)
|
|
206
209
|
|
|
207
210
|
function renderOption({ root, ...option }: MenuItem & { root?: boolean }) {
|
|
208
|
-
|
|
211
|
+
const labelText = typeof option.label === 'string' ? option.label : option.label.id
|
|
212
|
+
return <li key={labelText}>{'children' in option ? <GroupItem root={root} {...option} /> : <ActionItem {...option} />}</li>
|
|
209
213
|
}
|
|
210
214
|
|
|
211
215
|
export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle, options = [], loading, error }: MenuSectionContent) => {
|
|
@@ -230,7 +234,9 @@ export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle,
|
|
|
230
234
|
<IconBox colorScheme="inverse" size="sm">
|
|
231
235
|
<ArrowLeft />
|
|
232
236
|
</IconBox>
|
|
233
|
-
|
|
237
|
+
{typeof goBack?.label === 'string' ?
|
|
238
|
+
<Text appearance="body2" nowrapEllipsis>{goBack.label}</Text> :
|
|
239
|
+
goBack.label.element}
|
|
234
240
|
</BackLink>
|
|
235
241
|
)}
|
|
236
242
|
{title && (
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Flex, IconBox, Text } from '@citric/core'
|
|
2
|
-
import { ChevronRight, Cog, Collapse,
|
|
2
|
+
import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons'
|
|
3
3
|
import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
|
|
4
4
|
import { useCallback, useMemo, useState } from 'react'
|
|
5
5
|
import { MenuContent } from './MenuContent'
|
|
@@ -58,12 +58,15 @@ const Section = ({
|
|
|
58
58
|
const t = useTranslate(dictionary)
|
|
59
59
|
function shouldShowOverlay() {
|
|
60
60
|
/* The overlay should appear if:
|
|
61
|
-
* 1. The
|
|
62
|
-
*
|
|
63
|
-
*
|
|
61
|
+
* 1. The menu is compacted showing only the icons
|
|
62
|
+
* 2. The section has some content to render OR:
|
|
63
|
+
* 2.1 The section is active and there is a contextual menu for the active page.
|
|
64
|
+
* 3. The section is inactive OR:
|
|
64
65
|
* 2.1. The contextual menu is hidden.
|
|
65
66
|
*/
|
|
66
|
-
|
|
67
|
+
const layout = document.getElementById('layout')
|
|
68
|
+
const isCompactedOnlyIcons = layout?.classList.contains('menu-compact-only-icons')
|
|
69
|
+
return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible())
|
|
67
70
|
}
|
|
68
71
|
|
|
69
72
|
function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
|
|
@@ -83,24 +86,26 @@ const Section = ({
|
|
|
83
86
|
hideOverlayImmediately()
|
|
84
87
|
}
|
|
85
88
|
|
|
89
|
+
const labelText = typeof label === 'string' ? label : label.id
|
|
90
|
+
|
|
86
91
|
return (
|
|
87
92
|
<>
|
|
88
|
-
<li key={
|
|
93
|
+
<li key={labelText} title={labelText} className={`section-submenu ${className || ''} ${active ? 'active' : ''}`}>
|
|
89
94
|
<a
|
|
90
95
|
href={href}
|
|
91
96
|
target={target}
|
|
92
97
|
onClick={click}
|
|
93
98
|
onMouseEnter={showOverlayAndFixArrowPosition}
|
|
94
99
|
onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
|
|
95
|
-
title={
|
|
96
|
-
aria-label={
|
|
100
|
+
title={labelText}
|
|
101
|
+
aria-label={labelText}
|
|
97
102
|
onKeyDown={onClick ? e => e.key === 'Enter' && onClick() : undefined}
|
|
98
103
|
{...(active ? { 'aria-current': 'page' } : undefined)}
|
|
99
104
|
{...(!href ? { 'tabIndex': 0 } : undefined)}
|
|
100
105
|
>
|
|
101
106
|
<Flex alignItems="center" justifyContent="center" px={5}>
|
|
102
107
|
{icon}
|
|
103
|
-
<Text appearance="
|
|
108
|
+
{typeof label === 'string' ? <Text appearance="microtext1" className="section-label" ml={3}>{label}</Text> : label.element}
|
|
104
109
|
</Flex>
|
|
105
110
|
</a>
|
|
106
111
|
{shouldShowOverlay() &&
|
|
@@ -138,13 +143,21 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
|
|
|
138
143
|
const [_, setUpdate] = useState(0)
|
|
139
144
|
const onHide = () => hideOverlay()
|
|
140
145
|
|
|
141
|
-
const toggleMenu = useCallback(() => {
|
|
146
|
+
const toggleMenu = useCallback((hasContent: boolean) => {
|
|
142
147
|
const layout = document.getElementById('layout')
|
|
143
148
|
if (!layout) return
|
|
144
|
-
if (layout.classList.contains('menu-
|
|
145
|
-
layout.classList.remove('menu-
|
|
149
|
+
if (layout.classList.contains('menu-compact-only-icons')) {
|
|
150
|
+
layout.classList.remove('menu-compact-only-icons')
|
|
146
151
|
} else {
|
|
147
|
-
layout.classList.add('menu-
|
|
152
|
+
layout.classList.add('menu-compact-only-icons')
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
if (hasContent) {
|
|
156
|
+
if (layout.classList.contains('menu-content-visible')) {
|
|
157
|
+
layout.classList.remove('menu-content-visible')
|
|
158
|
+
} else {
|
|
159
|
+
layout.classList.add('menu-content-visible')
|
|
160
|
+
}
|
|
148
161
|
}
|
|
149
162
|
setUpdate(current => current + 1)
|
|
150
163
|
}, [])
|
|
@@ -165,9 +178,11 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
|
|
|
165
178
|
}
|
|
166
179
|
}
|
|
167
180
|
|
|
168
|
-
const wrapper = useKeyboardControls({
|
|
169
|
-
|
|
170
|
-
|
|
181
|
+
const wrapper = useKeyboardControls({
|
|
182
|
+
onHide, visible: document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible') || false,
|
|
183
|
+
querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
|
|
184
|
+
onPressEscape: () => onPressEscape(),
|
|
185
|
+
})
|
|
171
186
|
|
|
172
187
|
/* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
|
|
173
188
|
instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
|
|
@@ -189,29 +204,29 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
|
|
|
189
204
|
<>
|
|
190
205
|
<ul>{sectionItems}</ul>
|
|
191
206
|
|
|
192
|
-
{
|
|
193
|
-
<
|
|
194
|
-
{
|
|
195
|
-
<
|
|
196
|
-
<
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
207
|
+
<Flex mb={7} alignItems="center">
|
|
208
|
+
<button className="toggle sections-footer" onClick={() => toggleMenu(!!props.content || !!props.customContent)}
|
|
209
|
+
title={t.toggle} tabIndex={-1} aria-hidden>
|
|
210
|
+
<IconBox>
|
|
211
|
+
<Expand className="expand" />
|
|
212
|
+
<Collapse className="collapse" />
|
|
213
|
+
</IconBox>
|
|
214
|
+
<Text appearance="microtext1" ml={8} className="collapse" colorScheme="light.contrastText">{t.hide}</Text>
|
|
215
|
+
</button>
|
|
216
|
+
{(props.settings?.show) &&
|
|
202
217
|
<a href={props.settings?.href} onClick={props.settings?.onClick}
|
|
203
218
|
className="sections-footer"
|
|
204
219
|
{...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
|
|
205
|
-
<Flex alignItems="center"
|
|
220
|
+
<Flex alignItems="center" >
|
|
206
221
|
<IconBox aria-label={t.settingsIcon}>
|
|
207
222
|
<Cog />
|
|
208
223
|
</IconBox>
|
|
209
|
-
<Text appearance="
|
|
224
|
+
<Text appearance="microtext1" ml={2}>{t.settings}</Text>
|
|
210
225
|
</Flex>
|
|
211
226
|
</a>
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
227
|
+
}
|
|
228
|
+
</Flex>
|
|
229
|
+
|
|
215
230
|
<div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={wrapper}>
|
|
216
231
|
{renderMenuOverlay()}
|
|
217
232
|
<div className="arrow"></div>
|
|
@@ -226,11 +241,13 @@ const dictionary = {
|
|
|
226
241
|
menuOptions: 'View $0 menu options',
|
|
227
242
|
settings: 'Settings',
|
|
228
243
|
settingsIcon: 'Settings icon',
|
|
244
|
+
hide: 'Hide',
|
|
229
245
|
},
|
|
230
246
|
pt: {
|
|
231
247
|
toggle: 'Visualizar ou esconder o menu',
|
|
232
248
|
menuOptions: 'Visualizar opções do menu $0',
|
|
233
249
|
settings: 'Configurações',
|
|
234
250
|
settingsIcon: 'Icone de configurações',
|
|
251
|
+
hide: 'Esconder',
|
|
235
252
|
},
|
|
236
253
|
} satisfies Dictionary
|
|
@@ -96,13 +96,16 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
|
|
|
96
96
|
},
|
|
97
97
|
[options, value, button],
|
|
98
98
|
)
|
|
99
|
-
|
|
99
|
+
|
|
100
100
|
const label = selected?.label ?? button?.label ?? value
|
|
101
|
+
const isTextLabel = typeof label == 'string'
|
|
102
|
+
const labelText = typeof label === 'string' ? label : label.id
|
|
103
|
+
const buttonLabelText = typeof button?.label == 'string' ? button?.label : button?.label.id
|
|
101
104
|
|
|
102
105
|
return (
|
|
103
106
|
<SelectorBox>
|
|
104
107
|
{loading
|
|
105
|
-
? <LoadingCircular />
|
|
108
|
+
? <LoadingCircular />
|
|
106
109
|
: (
|
|
107
110
|
<>
|
|
108
111
|
{title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
|
|
@@ -116,7 +119,9 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
|
|
|
116
119
|
aria-controls={id.current}
|
|
117
120
|
>
|
|
118
121
|
{selected?.icon && <IconBox>{selected?.icon}</IconBox>}
|
|
119
|
-
|
|
122
|
+
{isTextLabel ?
|
|
123
|
+
<Text ref={ref} appearance="body2" className="label" title={overflow ? labelText : ''}>{labelText}</Text> :
|
|
124
|
+
label.element}
|
|
120
125
|
<IconBox size="xs"><Select /></IconBox>
|
|
121
126
|
</a>
|
|
122
127
|
|
|
@@ -125,7 +130,7 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
|
|
|
125
130
|
visible={visible}
|
|
126
131
|
items={optionsWithIcon}
|
|
127
132
|
onHide={() => setVisible(false)}
|
|
128
|
-
after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{
|
|
133
|
+
after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{buttonLabelText}</a> : undefined}
|
|
129
134
|
scroll
|
|
130
135
|
/>
|
|
131
136
|
</>
|
package/src/components/types.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, { ReactNode } from 'react'
|
|
2
2
|
|
|
3
|
+
interface CustomLabel {
|
|
4
|
+
id: string,
|
|
5
|
+
element: ReactNode,
|
|
6
|
+
}
|
|
3
7
|
export interface Action {
|
|
4
|
-
label: string,
|
|
8
|
+
label: string | CustomLabel,
|
|
5
9
|
onClick?: () => void,
|
|
6
10
|
href?: string,
|
|
7
11
|
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'],
|
package/src/layout.css
CHANGED
|
@@ -40,7 +40,7 @@ body {
|
|
|
40
40
|
#layout {
|
|
41
41
|
--header-height: 56px;
|
|
42
42
|
--menu-sections-width: 135px;
|
|
43
|
-
--menu-content-width:
|
|
43
|
+
--menu-content-width: 240px;
|
|
44
44
|
--menu-item-height: 74px;
|
|
45
45
|
--modal-animation-duration: 0.3s;
|
|
46
46
|
--right-panel-animation-duration: 0.3s;
|
|
@@ -49,11 +49,16 @@ body {
|
|
|
49
49
|
--toastify-font-family: 'Roboto', sans-serif;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
#layout.menu-compact {
|
|
52
|
+
#layout.menu-compact:not(.menu-compact-only-icons) {
|
|
53
53
|
--menu-sections-width: 135px;
|
|
54
54
|
--menu-item-height: 56px;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
#layout.menu-compact-only-icons {
|
|
58
|
+
--menu-sections-width: 56px;
|
|
59
|
+
--menu-item-height: 56px;
|
|
60
|
+
}
|
|
61
|
+
|
|
57
62
|
#layout.no-menu-sections {
|
|
58
63
|
--menu-sections-width: 0px;
|
|
59
64
|
}
|
|
@@ -128,13 +133,21 @@ body {
|
|
|
128
133
|
}
|
|
129
134
|
|
|
130
135
|
#menu .toggle .expand,
|
|
131
|
-
#layout.menu-
|
|
132
|
-
opacity:
|
|
136
|
+
#layout.menu-compact-only-icons .toggle .collapse {
|
|
137
|
+
opacity: 0;
|
|
133
138
|
}
|
|
134
139
|
|
|
135
140
|
#menu .toggle .collapse,
|
|
136
|
-
#layout.menu-
|
|
137
|
-
opacity:
|
|
141
|
+
#layout.menu-compact-only-icons .toggle .expand {
|
|
142
|
+
opacity: 1;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
#layout.menu-compact-only-icons .section-label {
|
|
146
|
+
display: none;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
#layout:not(.menu-compact-only-icons) .section-label {
|
|
150
|
+
display: block;
|
|
138
151
|
}
|
|
139
152
|
|
|
140
153
|
#menuSections {
|
|
@@ -210,9 +223,8 @@ body {
|
|
|
210
223
|
top: calc(var(--header-height) + 15px);
|
|
211
224
|
left: calc(var(--menu-sections-width) + 15px);
|
|
212
225
|
bottom: 15px;
|
|
213
|
-
background-color: var(--light-
|
|
214
|
-
|
|
215
|
-
border-radius: 16px;
|
|
226
|
+
background-color: var(--light-500);
|
|
227
|
+
border-radius: 0 8px 8px 0;
|
|
216
228
|
display: flex;
|
|
217
229
|
flex-direction: column;
|
|
218
230
|
overflow: hidden;
|