@stack-spot/portal-layout 0.0.24 → 0.0.26
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/Layout.d.ts +2 -2
- package/dist/Layout.d.ts.map +1 -1
- package/dist/Layout.js +1 -1
- package/dist/Layout.js.map +1 -1
- package/dist/LayoutOverlayManager.js.map +1 -1
- package/dist/components/PortalSwitcher.d.ts.map +1 -1
- package/dist/components/PortalSwitcher.js +12 -4
- package/dist/components/PortalSwitcher.js.map +1 -1
- package/dist/components/SelectionList.js.map +1 -1
- package/dist/components/menu/MenuContent.d.ts +548 -1
- package/dist/components/menu/MenuContent.d.ts.map +1 -1
- package/dist/components/menu/MenuContent.js +3 -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 +13 -8
- package/dist/components/menu/MenuSections.js.map +1 -1
- package/dist/components/menu/PageSelector.js.map +1 -1
- package/dist/components/menu/types.d.ts +11 -3
- package/dist/components/menu/types.d.ts.map +1 -1
- package/dist/components/menu/useCheckTextOverflow.js.map +1 -1
- package/dist/dictionary.d.ts +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/layout.css +2 -1
- package/dist/utils.js.map +1 -1
- package/package.json +5 -5
- package/src/Layout.tsx +8 -6
- package/src/components/PortalSwitcher.tsx +32 -17
- package/src/components/menu/MenuContent.tsx +3 -3
- package/src/components/menu/MenuSections.tsx +22 -12
- package/src/components/menu/types.ts +11 -3
- package/src/index.ts +2 -2
- package/src/layout.css +2 -1
|
@@ -31,7 +31,7 @@ function showOverlay() {
|
|
|
31
31
|
function isMenuContentVisible() {
|
|
32
32
|
return !!document.getElementById('layout')?.classList?.contains('menu-content-visible');
|
|
33
33
|
}
|
|
34
|
-
const Section = ({ icon, label, href, target, onClick, active, content, onOpen, setCurrentOverlay, id, hasContent, }) => {
|
|
34
|
+
const Section = ({ icon, label, href, target, onClick, active, content, customContent, onOpen, setCurrentOverlay, id, hasContent, }) => {
|
|
35
35
|
const contentToRender = typeof content === 'function' ? content() : content;
|
|
36
36
|
function shouldShowOverlay() {
|
|
37
37
|
/* The overlay should appear if:
|
|
@@ -40,7 +40,7 @@ const Section = ({ icon, label, href, target, onClick, active, content, onOpen,
|
|
|
40
40
|
* 2. The section is inactive OR:
|
|
41
41
|
* 2.1. The contextual menu is hidden.
|
|
42
42
|
*/
|
|
43
|
-
return (!!contentToRender || (hasContent && active)) && (!active || !isMenuContentVisible());
|
|
43
|
+
return (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible());
|
|
44
44
|
}
|
|
45
45
|
function showOverlayAndFixArrowPosition(event) {
|
|
46
46
|
if (!shouldShowOverlay())
|
|
@@ -61,7 +61,10 @@ const Section = ({ icon, label, href, target, onClick, active, content, onOpen,
|
|
|
61
61
|
}
|
|
62
62
|
return (_jsx("li", { title: label, className: active ? 'active' : undefined, children: _jsxs("a", { href: href, target: target, onClick: click, onMouseEnter: showOverlayAndFixArrowPosition, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), title: label, "aria-label": label, onKeyDown: onClick ? e => e.key === 'Enter' && onClick() : undefined, ...(active ? { 'aria-current': 'page' } : undefined), children: [icon, _jsx(Text, { appearance: "microtext1", className: "section-label", children: label })] }) }, label));
|
|
63
63
|
};
|
|
64
|
-
const OverlayRenderer = ({ content }) => {
|
|
64
|
+
const OverlayRenderer = ({ content, customContent }) => {
|
|
65
|
+
if (customContent) {
|
|
66
|
+
return _jsxs(_Fragment, { children: [" ", customContent, " "] });
|
|
67
|
+
}
|
|
65
68
|
const data = typeof content === 'function' ? content() : content;
|
|
66
69
|
return _jsx("div", { children: _jsx(MenuContent, { ...data }) });
|
|
67
70
|
};
|
|
@@ -83,7 +86,7 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
83
86
|
}, []);
|
|
84
87
|
// the current overlay showing, when the user hovers the section icon. This is the index of the item in the sections array.
|
|
85
88
|
const [currentOverlay, setCurrentOverlay] = useState();
|
|
86
|
-
const sectionItems = useMemo(() => sections.map((s, i) => _jsx(Section, { id: i, ...s, setCurrentOverlay: setCurrentOverlay, hasContent: !!props.content }, i)), [sections]);
|
|
89
|
+
const sectionItems = useMemo(() => sections.map((s, i) => _jsx(Section, { id: i, ...s, setCurrentOverlay: setCurrentOverlay, hasContent: !!props.content || !!props.customContent }, i)), [sections]);
|
|
87
90
|
/* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
|
|
88
91
|
instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
|
|
89
92
|
Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
|
|
@@ -92,12 +95,14 @@ export const MenuSections = ({ sections = [], ...props }) => {
|
|
|
92
95
|
function renderMenuOverlay() {
|
|
93
96
|
if (currentOverlay === undefined)
|
|
94
97
|
return null;
|
|
95
|
-
const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
|
|
98
|
+
const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
|
|
99
|
+
(!!props.content || !!props.customContent);
|
|
96
100
|
return shouldRenderMenuContentInstead
|
|
97
|
-
? _jsx(OverlayRenderer, { content: props.content }, 'contentKey' in props ? props.contentKey : undefined)
|
|
98
|
-
: _jsx(OverlayRenderer, { content: sections[currentOverlay].content }, currentOverlay);
|
|
101
|
+
? _jsx(OverlayRenderer, { content: props.content, customContent: props.customContent }, 'contentKey' in props ? props.contentKey : undefined)
|
|
102
|
+
: _jsx(OverlayRenderer, { content: sections[currentOverlay].content, customContent: sections[currentOverlay].customContent }, currentOverlay);
|
|
99
103
|
}
|
|
100
|
-
return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), !!props.content
|
|
104
|
+
return (_jsxs(_Fragment, { children: [_jsx("ul", { children: sectionItems }), (!!props.content || !!props.customContent) &&
|
|
105
|
+
_jsx("button", { className: "toggle", onClick: toggleMenu, title: t.toggle, tabIndex: -1, "aria-hidden": true, children: _jsxs(IconBox, { children: [_jsx(MenuIcon, { className: "expand" }), _jsx(ChevronLeft, { className: "collapse" })] }) }), _jsxs("div", { id: "menuContentOverlay", onMouseEnter: showOverlay, onMouseLeave: hideOverlay, children: [renderMenuOverlay(), _jsx("div", { className: "arrow" })] })] }));
|
|
101
106
|
};
|
|
102
107
|
const dictionary = {
|
|
103
108
|
en: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAG3C,MAAM,YAAY,GAAG,EAAE,CAAA;AACvB,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,eAAe,GAAG,oBAAoB,CAAA;AAE5C,IAAI,eAAmC,CAAA;AAEvC,SAAS,WAAW;IAClB,IAAI,eAAe,KAAK,SAAS;QAAE,OAAM;IACzC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,sBAAsB,EAAE,qBAAqB,CAAC,CAAA;AACpF,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,sBAAsB;IACpC,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;AACvE,CAAC;AAED,SAAS,qBAAqB;IAC5B,IAAI,eAAe,KAAK,SAAS;QAAE,OAAM;IACzC,YAAY,CAAC,eAAe,CAAC,CAAA;IAC7B,eAAe,GAAG,SAAS,CAAA;AAC7B,CAAC;AAED,SAAS,WAAW;IAClB,qBAAqB,EAAE,CAAA;IACvB,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;AACpE,CAAC;AAED,SAAS,oBAAoB;IAC3B,OAAO,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAA;AACzF,CAAC;AAED,MAAM,OAAO,GAAG,CAAC,EACf,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAO,EACP,MAAM,EACN,iBAAiB,EACjB,EAAE,EACF,UAAU,GAC6F,EAAE,EAAE;IAC3G,MAAM,eAAe,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IAE3E,SAAS,iBAAiB;QACxB;;;;;WAKG;QACH,OAAO,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAA;
|
|
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.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,wBAAwB,CAAA;AAE7D,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
|
|
1
|
+
{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/menu/PageSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { Action } from '../types.js';
|
|
3
3
|
interface BaseMenuItem {
|
|
4
4
|
hidden?: boolean;
|
|
@@ -58,17 +58,25 @@ export interface MenuSection extends Action {
|
|
|
58
58
|
* Tip: this function can be a React Hook.
|
|
59
59
|
*/
|
|
60
60
|
content?: MenuSectionContent | (() => MenuSectionContent);
|
|
61
|
+
/**
|
|
62
|
+
* The content or a function that creates the content.
|
|
63
|
+
* If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
|
|
64
|
+
* Tip: this function can be a React Hook.
|
|
65
|
+
* This should be used when the content you want to render is not the default content
|
|
66
|
+
*/
|
|
67
|
+
customContent?: ReactNode;
|
|
61
68
|
active?: boolean;
|
|
62
69
|
onOpen?: () => void;
|
|
63
70
|
}
|
|
64
71
|
interface BaseMenuProps {
|
|
65
72
|
sections?: MenuSection[];
|
|
66
73
|
compact?: boolean;
|
|
74
|
+
customContent?: ReactNode;
|
|
67
75
|
}
|
|
68
|
-
interface MenuPropsWithStaticContent extends BaseMenuProps {
|
|
76
|
+
export interface MenuPropsWithStaticContent extends BaseMenuProps {
|
|
69
77
|
content?: MenuSectionContent;
|
|
70
78
|
}
|
|
71
|
-
interface MenuPropsWithDynamicContent extends BaseMenuProps {
|
|
79
|
+
export interface MenuPropsWithDynamicContent extends BaseMenuProps {
|
|
72
80
|
/**
|
|
73
81
|
* The function that creates the content. It will be called only when the content is rendered, i.e. only when the content really needs to
|
|
74
82
|
* be rendered.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;CAC3C;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM,EAAE,YAAY;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE7C,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,IAAI,EAAE,YAAY,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,GAAG,CAAC,MAAM,kBAAkB,CAAC,CAAC;IAC1D;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,0BAA2B,SAAQ,aAAa;IAC/D,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,2BAA4B,SAAQ,aAAa;IAChE;;;;;OAKG;IACH,OAAO,EAAE,kBAAkB,GAAG,CAAC,MAAM,kBAAkB,CAAC,CAAC;IACzD;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC;CACvB;AAED,MAAM,MAAM,SAAS,GAAG,0BAA0B,GAAG,2BAA2B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCheckTextOverflow.js","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE
|
|
1
|
+
{"version":3,"file":"useCheckTextOverflow.js","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAM;SACP;QAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAA;QAErE,IAAI,WAAW,KAAK,QAAQ,EAAE;YAC5B,OAAM;SACP;QAED,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;IACjB,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAC1B,CAAC"}
|
package/dist/dictionary.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const useDictionary: () => Record<"
|
|
1
|
+
export declare const useDictionary: () => Record<"close" | "validationLabel" | "dismiss" | "confirm" | "cancel", string>;
|
|
2
2
|
export declare function getDictionary(): {
|
|
3
3
|
close: string;
|
|
4
4
|
validationLabel: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export { Layout } from './Layout.js';
|
|
1
|
+
export { Layout, RawLayout } from './Layout.js';
|
|
2
2
|
export { overlay } from './LayoutOverlayManager.js';
|
|
3
3
|
export { Dialog } from './components/Dialog.js';
|
|
4
4
|
export { Header, HeaderProps } from './components/Header.js';
|
|
5
5
|
export { OverlayContent } from './components/OverlayContent.js';
|
|
6
6
|
export { PortalSwitcher } from './components/PortalSwitcher.js';
|
|
7
7
|
export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList.js';
|
|
8
|
-
export { MenuContent } from './components/menu/MenuContent.js';
|
|
8
|
+
export { MenuContent, Title, MenuGroup, ActionItem } from './components/menu/MenuContent.js';
|
|
9
9
|
export { MenuSections } from './components/menu/MenuSections.js';
|
|
10
10
|
export * from './components/menu/types.js';
|
|
11
11
|
export * from './components/types.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export { Layout } from './Layout.js';
|
|
1
|
+
export { Layout, RawLayout } from './Layout.js';
|
|
2
2
|
export { overlay } from './LayoutOverlayManager.js';
|
|
3
3
|
export { Dialog } from './components/Dialog.js';
|
|
4
4
|
export { Header } from './components/Header.js';
|
|
5
5
|
export { OverlayContent } from './components/OverlayContent.js';
|
|
6
6
|
export { PortalSwitcher } from './components/PortalSwitcher.js';
|
|
7
7
|
export { SelectionList } from './components/SelectionList.js';
|
|
8
|
-
export { MenuContent } from './components/menu/MenuContent.js';
|
|
8
|
+
export { MenuContent, Title, MenuGroup, ActionItem } from './components/menu/MenuContent.js';
|
|
9
9
|
export { MenuSections } from './components/menu/MenuSections.js';
|
|
10
10
|
export * from './components/menu/types.js';
|
|
11
11
|
export * from './components/types.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,YAAY,CAAA;AAClD,cAAc,SAAS,CAAA"}
|
package/dist/layout.css
CHANGED
|
@@ -45,6 +45,7 @@ body {
|
|
|
45
45
|
--modal-animation-duration: 0.3s;
|
|
46
46
|
--right-panel-animation-duration: 0.3s;
|
|
47
47
|
--menu-animation-duration: 0.3s;
|
|
48
|
+
--menu-overlay-width: 332px;
|
|
48
49
|
--toastify-font-family: 'Roboto', sans-serif;
|
|
49
50
|
}
|
|
50
51
|
|
|
@@ -199,7 +200,7 @@ body {
|
|
|
199
200
|
}
|
|
200
201
|
|
|
201
202
|
#menuContentOverlay {
|
|
202
|
-
width:
|
|
203
|
+
width: var(--menu-overlay-width);
|
|
203
204
|
position: fixed;
|
|
204
205
|
top: calc(var(--header-height) + 15px);
|
|
205
206
|
left: calc(var(--menu-sections-width) + 15px);
|
package/dist/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAE9C,MAAM,UAAU,gBAAgB,CAAC,OAAe;IAC9C,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;IAChD,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAA;IACtB,OAAO,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;AACjC,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,yBAAyB,CAAC,OAA4B;IACpE,OAAO,GAAG,OAAO,IAAI,QAAQ,CAAC,aAA4B,CAAA;IAC1D,OAAO,OAAO,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-layout",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.26",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
|
|
9
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
10
|
-
},
|
|
11
7
|
"peerDependencies": {
|
|
12
8
|
"@citric/core": ">=5.7.0",
|
|
13
9
|
"@citric/icons": ">=5.7.0",
|
|
@@ -37,5 +33,9 @@
|
|
|
37
33
|
},
|
|
38
34
|
"dependencies": {
|
|
39
35
|
"react-toastify": "^9.1.3"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
|
|
39
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
40
40
|
}
|
|
41
41
|
}
|
package/src/Layout.tsx
CHANGED
|
@@ -25,8 +25,8 @@ interface Props extends WithStyle {
|
|
|
25
25
|
interface RawProps extends WithStyle {
|
|
26
26
|
menuSections?: ReactElement,
|
|
27
27
|
menuContent?: ReactElement,
|
|
28
|
-
header
|
|
29
|
-
children
|
|
28
|
+
header?: ReactElement,
|
|
29
|
+
children?: ReactNode,
|
|
30
30
|
compactMenu?: boolean,
|
|
31
31
|
extra?: ReactNode,
|
|
32
32
|
errorDescriptor?: DescriptionFn,
|
|
@@ -34,7 +34,9 @@ interface RawProps extends WithStyle {
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
export const RawLayout = (
|
|
37
|
-
{ menuSections, menuContent, header, compactMenu = true, children,
|
|
37
|
+
{ menuSections, menuContent, header, compactMenu = true, children,
|
|
38
|
+
extra, errorDescriptor, onError, className, style }:
|
|
39
|
+
RawProps,
|
|
38
40
|
) => {
|
|
39
41
|
// @ts-ignore
|
|
40
42
|
const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
|
|
@@ -53,15 +55,15 @@ export const RawLayout = (
|
|
|
53
55
|
return (
|
|
54
56
|
<CSSToCitricAdapter>
|
|
55
57
|
<div id={elementIds.layout} className={listToClass(classes)} style={style}>
|
|
56
|
-
<div id={elementIds.page}>
|
|
58
|
+
{children && <div id={elementIds.page}>
|
|
57
59
|
<article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>
|
|
58
|
-
</div>
|
|
60
|
+
</div>}
|
|
59
61
|
{extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
|
|
60
62
|
<aside id={elementIds.menu}>
|
|
61
63
|
<nav id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
|
|
62
64
|
{menuSections && <nav id={elementIds.menuSections}><SilentErrorBoundary>{menuSections}</SilentErrorBoundary></nav>}
|
|
63
65
|
</aside>
|
|
64
|
-
<header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>
|
|
66
|
+
{header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
|
|
65
67
|
<div id={elementIds.bottomDialog} role="dialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
|
|
66
68
|
<div id={elementIds.backdrop}>
|
|
67
69
|
<div id={elementIds.rightPanel} aria-modal role="dialog"><ErrorBoundary>{rightPanel}</ErrorBoundary></div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Box, Flex, IconBox,
|
|
1
|
+
import { Box, Button, Flex, IconBox, Styles, Text } from '@citric/core'
|
|
2
2
|
import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
|
|
3
3
|
import { Dropdown, DropdownItem } from '@citric/ui'
|
|
4
4
|
import { useTranslate } from '@stack-spot/portal-translate'
|
|
@@ -7,6 +7,7 @@ import { AI } from '../svg/AI'
|
|
|
7
7
|
import { EDP } from '../svg/EDP'
|
|
8
8
|
import { HUB } from '../svg/HUB'
|
|
9
9
|
import { Logo } from '../svg/Logo'
|
|
10
|
+
import { announce } from '..'
|
|
10
11
|
import { PortalAcronym } from './types'
|
|
11
12
|
|
|
12
13
|
|
|
@@ -69,31 +70,41 @@ export const PortalSwitcher = ({ portals }: PortalSwitcherProps) => {
|
|
|
69
70
|
const currentPortal = portals?.find(portal => location.href.startsWith(portal.url))
|
|
70
71
|
|
|
71
72
|
return <Flex flexDirection="column">
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
{currentPortal ?
|
|
74
|
+
<Button
|
|
75
|
+
appearance="text"
|
|
76
|
+
colorScheme="light"
|
|
77
|
+
aria-label={t.portalSwitcher}
|
|
78
|
+
onClick={() => {
|
|
79
|
+
setIsOpen(true)
|
|
80
|
+
announce(`${t.portalSwitcher} ${t.selected}`)
|
|
81
|
+
}} sx={styles.currentPortal}>
|
|
74
82
|
<Flex alignItems="center">
|
|
75
83
|
{Logos[currentPortal.acronym]}
|
|
76
84
|
<IconBox size="xs" ml={3}>
|
|
77
85
|
<Select />
|
|
78
86
|
</IconBox>
|
|
79
|
-
</Flex>
|
|
80
|
-
|
|
81
|
-
|
|
87
|
+
</Flex>
|
|
88
|
+
</Button> :
|
|
89
|
+
<Logo />}
|
|
82
90
|
<Dropdown sx={styles.dropdown} ref={dropRef} onClose={() => setIsOpen(false)} visible={isOpen} visibleHeight="24rem">
|
|
83
91
|
<Box sx={styles.dropdownWraper}>
|
|
84
92
|
{portals?.map((portal, index) => (
|
|
85
|
-
<DropdownItem
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
</
|
|
93
|
+
<DropdownItem
|
|
94
|
+
as="a"
|
|
95
|
+
key={index}
|
|
96
|
+
onClick={() => announce(`${portal.acronym} ${t.selected}`)}
|
|
97
|
+
sx={styles.dropdownItem}
|
|
98
|
+
aria-label={`${portal.acronym}: ${t[portal.acronym]}`} href={portal.url}>
|
|
99
|
+
<Flex flexWrap="nowrap">
|
|
100
|
+
<Flex flexDirection="column">
|
|
101
|
+
{Logos[portal.acronym]}
|
|
102
|
+
<Text appearance="microtext1" mt={3} colorScheme="light.700">{t[portal.acronym]}</Text>
|
|
95
103
|
</Flex>
|
|
96
|
-
|
|
104
|
+
<IconBox>
|
|
105
|
+
{portal.acronym === currentPortal?.acronym ? <CheckCircleFill /> : <ArrowRight />}
|
|
106
|
+
</IconBox>
|
|
107
|
+
</Flex>
|
|
97
108
|
</DropdownItem>))}
|
|
98
109
|
</Box>
|
|
99
110
|
</Dropdown>
|
|
@@ -106,10 +117,14 @@ const translations = {
|
|
|
106
117
|
EDP: 'Efficient and secure solutions from code to production deployment.',
|
|
107
118
|
AI: 'Speed up coding with efficient suggestions and high-quality results.',
|
|
108
119
|
HUB: 'Discover AI Stacks, knowledge sources, and quick commands, all in one streamlined hub.',
|
|
120
|
+
portalSwitcher: 'Portal switcher',
|
|
121
|
+
selected: 'selected',
|
|
109
122
|
},
|
|
110
123
|
pt: {
|
|
111
124
|
EDP: 'Soluções eficientes e seguras do código até a implantação em produção.',
|
|
112
125
|
AI: 'Acelere o desenvolvimento com sugestões eficientes e resultados de alta qualidade.',
|
|
113
126
|
HUB: 'Descubra AI Stacks, knownledge sources e quick commands, tudo em um hub simplificado.',
|
|
127
|
+
portalSwitcher: 'Seletor de portais',
|
|
128
|
+
selected: 'selecionado',
|
|
114
129
|
},
|
|
115
130
|
}
|
|
@@ -20,7 +20,7 @@ const BackLink = styled.a`
|
|
|
20
20
|
gap: 6px;
|
|
21
21
|
`
|
|
22
22
|
|
|
23
|
-
const MenuGroup = styled.ul`
|
|
23
|
+
export const MenuGroup = styled.ul`
|
|
24
24
|
padding: 0 0 0 16px;
|
|
25
25
|
display: flex;
|
|
26
26
|
flex-direction: column;
|
|
@@ -127,13 +127,13 @@ const MenuGroup = styled.ul`
|
|
|
127
127
|
}
|
|
128
128
|
`
|
|
129
129
|
|
|
130
|
-
const Title = styled.header`
|
|
130
|
+
export const Title = styled.header`
|
|
131
131
|
display: flex;
|
|
132
132
|
flex-direction: column;
|
|
133
133
|
margin: ${PADDING}px 0 24px ${PADDING}px;
|
|
134
134
|
`
|
|
135
135
|
|
|
136
|
-
const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }: MenuAction) => {
|
|
136
|
+
export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }: MenuAction) => {
|
|
137
137
|
const { ref, overflow: textOverflow } = useCheckTextOverflow()
|
|
138
138
|
return (
|
|
139
139
|
<a
|
|
@@ -45,6 +45,7 @@ const Section = ({
|
|
|
45
45
|
onClick,
|
|
46
46
|
active,
|
|
47
47
|
content,
|
|
48
|
+
customContent,
|
|
48
49
|
onOpen,
|
|
49
50
|
setCurrentOverlay,
|
|
50
51
|
id,
|
|
@@ -59,7 +60,7 @@ const Section = ({
|
|
|
59
60
|
* 2. The section is inactive OR:
|
|
60
61
|
* 2.1. The contextual menu is hidden.
|
|
61
62
|
*/
|
|
62
|
-
return (!!contentToRender || (hasContent && active)) && (!active || !isMenuContentVisible())
|
|
63
|
+
return (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible())
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
|
|
@@ -99,7 +100,11 @@ const Section = ({
|
|
|
99
100
|
)
|
|
100
101
|
}
|
|
101
102
|
|
|
102
|
-
const OverlayRenderer = ({ content }: Pick<MenuSection, 'content'>) => {
|
|
103
|
+
const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content' | 'customContent'>) => {
|
|
104
|
+
if (customContent) {
|
|
105
|
+
return <> {customContent} </>
|
|
106
|
+
}
|
|
107
|
+
|
|
103
108
|
const data = typeof content === 'function' ? content() : content
|
|
104
109
|
return <div><MenuContent {...data} /></div>
|
|
105
110
|
}
|
|
@@ -122,7 +127,8 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
|
|
|
122
127
|
const [currentOverlay, setCurrentOverlay] = useState<number | undefined>()
|
|
123
128
|
|
|
124
129
|
const sectionItems = useMemo(
|
|
125
|
-
() => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay}
|
|
130
|
+
() => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay}
|
|
131
|
+
hasContent={!!props.content || !!props.customContent} />),
|
|
126
132
|
[sections],
|
|
127
133
|
)
|
|
128
134
|
|
|
@@ -133,21 +139,25 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
|
|
|
133
139
|
hook, this would cause some serious problems. */
|
|
134
140
|
function renderMenuOverlay() {
|
|
135
141
|
if (currentOverlay === undefined) return null
|
|
136
|
-
const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
|
|
142
|
+
const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
|
|
143
|
+
(!!props.content || !!props.customContent)
|
|
137
144
|
return shouldRenderMenuContentInstead
|
|
138
|
-
? <OverlayRenderer key={'contentKey' in props ? props.contentKey : undefined} content={props.content}
|
|
139
|
-
|
|
145
|
+
? <OverlayRenderer key={'contentKey' in props ? props.contentKey : undefined} content={props.content}
|
|
146
|
+
customContent={props.customContent} />
|
|
147
|
+
: <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content}
|
|
148
|
+
customContent={sections[currentOverlay].customContent} />
|
|
140
149
|
}
|
|
141
150
|
|
|
142
151
|
return (
|
|
143
152
|
<>
|
|
144
153
|
<ul>{sectionItems}</ul>
|
|
145
|
-
{!!props.content
|
|
146
|
-
<
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
154
|
+
{(!!props.content || !!props.customContent) &&
|
|
155
|
+
<button className="toggle" onClick={toggleMenu} title={t.toggle} tabIndex={-1} aria-hidden>
|
|
156
|
+
<IconBox>
|
|
157
|
+
<MenuIcon className="expand" />
|
|
158
|
+
<ChevronLeft className="collapse" />
|
|
159
|
+
</IconBox>
|
|
160
|
+
</button>}
|
|
151
161
|
<div id="menuContentOverlay" onMouseEnter={showOverlay} onMouseLeave={hideOverlay}>
|
|
152
162
|
{renderMenuOverlay()}
|
|
153
163
|
<div className="arrow"></div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactElement } from 'react'
|
|
1
|
+
import { ReactElement, ReactNode } from 'react'
|
|
2
2
|
import { Action } from '../types'
|
|
3
3
|
|
|
4
4
|
interface BaseMenuItem {
|
|
@@ -67,6 +67,13 @@ export interface MenuSection extends Action {
|
|
|
67
67
|
* Tip: this function can be a React Hook.
|
|
68
68
|
*/
|
|
69
69
|
content?: MenuSectionContent | (() => MenuSectionContent),
|
|
70
|
+
/**
|
|
71
|
+
* The content or a function that creates the content.
|
|
72
|
+
* If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
|
|
73
|
+
* Tip: this function can be a React Hook.
|
|
74
|
+
* This should be used when the content you want to render is not the default content
|
|
75
|
+
*/
|
|
76
|
+
customContent?: ReactNode,
|
|
70
77
|
active?: boolean,
|
|
71
78
|
onOpen?: () => void,
|
|
72
79
|
}
|
|
@@ -74,13 +81,14 @@ export interface MenuSection extends Action {
|
|
|
74
81
|
interface BaseMenuProps {
|
|
75
82
|
sections?: MenuSection[],
|
|
76
83
|
compact?: boolean,
|
|
84
|
+
customContent?: ReactNode,
|
|
77
85
|
}
|
|
78
86
|
|
|
79
|
-
interface MenuPropsWithStaticContent extends BaseMenuProps {
|
|
87
|
+
export interface MenuPropsWithStaticContent extends BaseMenuProps {
|
|
80
88
|
content?: MenuSectionContent,
|
|
81
89
|
}
|
|
82
90
|
|
|
83
|
-
interface MenuPropsWithDynamicContent extends BaseMenuProps {
|
|
91
|
+
export interface MenuPropsWithDynamicContent extends BaseMenuProps {
|
|
84
92
|
/**
|
|
85
93
|
* The function that creates the content. It will be called only when the content is rendered, i.e. only when the content really needs to
|
|
86
94
|
* be rendered.
|
package/src/index.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export { Layout } from './Layout'
|
|
1
|
+
export { Layout, RawLayout } from './Layout'
|
|
2
2
|
export { overlay } from './LayoutOverlayManager'
|
|
3
3
|
export { Dialog } from './components/Dialog'
|
|
4
4
|
export { Header, HeaderProps } from './components/Header'
|
|
5
5
|
export { OverlayContent } from './components/OverlayContent'
|
|
6
6
|
export { PortalSwitcher } from './components/PortalSwitcher'
|
|
7
7
|
export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList'
|
|
8
|
-
export { MenuContent } from './components/menu/MenuContent'
|
|
8
|
+
export { MenuContent, Title, MenuGroup, ActionItem } from './components/menu/MenuContent'
|
|
9
9
|
export { MenuSections } from './components/menu/MenuSections'
|
|
10
10
|
export * from './components/menu/types'
|
|
11
11
|
export * from './components/types'
|
package/src/layout.css
CHANGED
|
@@ -45,6 +45,7 @@ body {
|
|
|
45
45
|
--modal-animation-duration: 0.3s;
|
|
46
46
|
--right-panel-animation-duration: 0.3s;
|
|
47
47
|
--menu-animation-duration: 0.3s;
|
|
48
|
+
--menu-overlay-width: 332px;
|
|
48
49
|
--toastify-font-family: 'Roboto', sans-serif;
|
|
49
50
|
}
|
|
50
51
|
|
|
@@ -199,7 +200,7 @@ body {
|
|
|
199
200
|
}
|
|
200
201
|
|
|
201
202
|
#menuContentOverlay {
|
|
202
|
-
width:
|
|
203
|
+
width: var(--menu-overlay-width);
|
|
203
204
|
position: fixed;
|
|
204
205
|
top: calc(var(--header-height) + 15px);
|
|
205
206
|
left: calc(var(--menu-sections-width) + 15px);
|