@stack-spot/portal-layout 2.37.1 → 2.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/Layout.d.ts +5 -1
  3. package/dist/Layout.d.ts.map +1 -1
  4. package/dist/Layout.js +20 -6
  5. package/dist/Layout.js.map +1 -1
  6. package/dist/components/menu/types.d.ts +7 -0
  7. package/dist/components/menu/types.d.ts.map +1 -1
  8. package/dist/components/tour/StepNavigation.d.ts.map +1 -1
  9. package/dist/components/tour/StepNavigation.js +2 -1
  10. package/dist/components/tour/StepNavigation.js.map +1 -1
  11. package/dist/elements.d.ts +1 -0
  12. package/dist/elements.d.ts.map +1 -1
  13. package/dist/elements.js +1 -0
  14. package/dist/elements.js.map +1 -1
  15. package/dist/layout.css +15 -3
  16. package/package.json +1 -1
  17. package/src/Layout.tsx +36 -13
  18. package/src/components/menu/types.ts +7 -0
  19. package/src/components/tour/StepNavigation.tsx +3 -1
  20. package/src/elements.ts +1 -0
  21. package/src/layout.css +15 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.38.0](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.37.1...portal-layout@v2.38.0) (2025-11-10)
4
+
5
+
6
+ ### Features
7
+
8
+ * add third-level menu for inner content ([#1742](https://github.com/stack-spot/portal-commons/issues/1742)) ([9966a5c](https://github.com/stack-spot/portal-commons/commit/9966a5c6970ba676542ead228cf6a887bf8260f6))
9
+
3
10
  ## [2.37.1](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.37.0...portal-layout@v2.37.1) (2025-11-07)
4
11
 
5
12
 
package/dist/Layout.d.ts CHANGED
@@ -45,6 +45,10 @@ interface RawProps extends WithStyle {
45
45
  * The React element to go in the menu content.
46
46
  */
47
47
  menuContent?: ReactElement;
48
+ /**
49
+ * The React element to go in the menu inner content (third level nav).
50
+ */
51
+ menuInnerContent?: ReactElement;
48
52
  /**
49
53
  * The React element to go in the header.
50
54
  */
@@ -70,7 +74,7 @@ interface RawProps extends WithStyle {
70
74
  * Renders the layout with the React elements passed in the props.
71
75
  * @param props the component's props {@link RawProps}.
72
76
  */
73
- export declare const RawLayout: ({ menuSections, menuContent, header, children, extra, errorDescriptor, onError, className, style }: RawProps) => import("react/jsx-runtime").JSX.Element;
77
+ export declare const RawLayout: ({ menuSections, menuContent, menuInnerContent, header, children, extra, errorDescriptor, onError, className, style }: RawProps) => import("react/jsx-runtime").JSX.Element;
74
78
  /**
75
79
  * Renders the layout with a menu and header that follow the config objects passed as parameter.
76
80
  * @param props the component's props {@link Props}.
package/dist/Layout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAG1D,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGzD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAgB,MAAM,iCAAiC,CAAA;AAI3F,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAEnD,OAAO,cAAc,CAAA;AAErB,UAAU,KAAM,SAAQ,SAAS;IAC/B;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,UAAU,QAAS,SAAQ,SAAS;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,GACpB,oGAEE,QAAQ,4CA6DX,CAAA;AAOD;;;GAGG;AACH,eAAO,MAAM,MAAM,GAAI,+EAA+E,KAAK,4CAgB1G,CAAA"}
1
+ {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAG1D,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGzD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAgB,MAAM,iCAAiC,CAAA;AAI3F,OAAO,EAAE,SAAS,EAA+B,MAAM,yBAAyB,CAAA;AAEhF,OAAO,cAAc,CAAA;AAErB,UAAU,KAAM,SAAQ,SAAS;IAC/B;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,UAAU,QAAS,SAAQ,SAAS;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,GACpB,sHAEE,QAAQ,4CAwEX,CAAA;AASD;;;GAGG;AACH,eAAO,MAAM,MAAM,GAAI,+EAA+E,KAAK,4CAsB1G,CAAA"}
package/dist/Layout.js CHANGED
@@ -18,7 +18,7 @@ import './layout.css';
18
18
  * Renders the layout with the React elements passed in the props.
19
19
  * @param props the component's props {@link RawProps}.
20
20
  */
21
- export const RawLayout = ({ menuSections, menuContent, header, children, extra, errorDescriptor, onError, className, style }) => {
21
+ export const RawLayout = ({ menuSections, menuContent, menuInnerContent, header, children, extra, errorDescriptor, onError, className, style }) => {
22
22
  const { bottomDialog, modal, rightPanel } = overlay.useOverlays();
23
23
  useEffect(() => {
24
24
  if (errorDescriptor)
@@ -32,32 +32,46 @@ export const RawLayout = ({ menuSections, menuContent, header, children, extra,
32
32
  const classList = document.getElementById(elementIds.layout)?.classList;
33
33
  if (!classList)
34
34
  return;
35
- if (menuContent && document.getElementById(elementIds.menuContent)?.children.length) {
35
+ const hasMenuContent = !!menuContent && !!document.getElementById(elementIds.menuContent)?.children.length;
36
+ const hasMenuInnerContent = !!menuInnerContent && !!document.getElementById(elementIds.menuInnerContent)?.children.length;
37
+ if (hasMenuContent) {
36
38
  classList.add('menu-content-visible');
37
- if (!classList.contains('menu-manual'))
39
+ if (!classList.contains('menu-manual')) {
38
40
  classList.add('menu-compact');
41
+ }
39
42
  }
40
43
  else {
41
44
  classList.remove('menu-content-visible');
42
- if (!classList.contains('menu-manual'))
45
+ if (!classList.contains('menu-manual')) {
43
46
  classList.remove('menu-compact');
47
+ }
48
+ }
49
+ if (hasMenuInnerContent) {
50
+ classList.add('menu-inner-content-visible');
51
+ }
52
+ else {
53
+ classList.remove('menu-inner-content-visible');
44
54
  }
45
55
  classList[menuSections ? 'remove' : 'add']('no-menu-sections');
46
56
  if (className)
47
57
  classList.add(...className.split(/\s+/));
48
- });
49
- return (_jsxs(CSSToCitricAdapter, { children: [_jsx(WelcomeTour, {}), _jsxs("div", { id: elementIds.layout, style: style, children: [header && _jsx("header", { id: elementIds.header, children: _jsx(SilentErrorBoundary, { children: header }) }), extra && _jsx(SilentErrorBoundary, { children: extra }), _jsxs("aside", { id: elementIds.menu, children: [_jsx("nav", { role: "menubar", id: elementIds.menuContent, children: _jsx(SilentErrorBoundary, { children: menuContent }) }), menuSections &&
58
+ }, [menuContent, menuInnerContent, menuSections, className]);
59
+ return (_jsxs(CSSToCitricAdapter, { children: [_jsx(WelcomeTour, {}), _jsxs("div", { id: elementIds.layout, style: style, children: [header && _jsx("header", { id: elementIds.header, children: _jsx(SilentErrorBoundary, { children: header }) }), extra && _jsx(SilentErrorBoundary, { children: extra }), _jsxs("aside", { id: elementIds.menu, children: [menuInnerContent &&
60
+ _jsx("nav", { role: "menubar", id: elementIds.menuInnerContent, children: _jsx(SilentErrorBoundary, { children: menuInnerContent }) }), _jsx("nav", { role: "menubar", id: elementIds.menuContent, children: _jsx(SilentErrorBoundary, { children: menuContent }) }), menuSections &&
50
61
  _jsx(FadingOverflow, { sides: ['top', 'bottom'], scroll: "arrows", children: _jsx("nav", { role: "menubar", id: elementIds.menuSections, children: _jsx(SilentErrorBoundary, { children: menuSections }) }) })] }), children && _jsx("div", { id: elementIds.page, children: _jsx("article", { id: elementIds.content, children: _jsx(ErrorBoundary, { children: children }) }) }), _jsx("div", { id: elementIds.bottomDialog, role: "dialog", children: _jsx(ErrorBoundary, { children: bottomDialog }) }), _jsxs("div", { id: elementIds.backdrop, children: [_jsx("div", { id: elementIds.rightPanel, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: rightPanel }) }), _jsx("div", { id: elementIds.modal, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: modal }) })] }), _jsx(Toaster, {}), _jsx("div", { id: elementIds.accessibilityAnnouncer, "aria-atomic": true, "aria-live": "assertive" })] })] }));
51
62
  };
52
63
  const MenuContentRenderer = ({ content }) => {
53
64
  const menuContent = typeof content === 'function' ? content() : content;
54
65
  return _jsx(MenuContent, { ...menuContent });
55
66
  };
67
+ const hasInnerContent = (menu) => 'innerContent' in menu;
56
68
  /**
57
69
  * Renders the layout with a menu and header that follow the config objects passed as parameter.
58
70
  * @param props the component's props {@link Props}.
59
71
  */
60
72
  export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style }) => (_jsx(RawLayout, { header: _jsx(Header, { ...header }), menuSections: menu.sections ? _jsx(MenuSections, { ...menu }) : undefined, menuContent: menu.content
61
73
  ? _jsx(MenuContentRenderer, { content: menu.content }, 'contentKey' in menu ? menu.contentKey : undefined)
74
+ : undefined, menuInnerContent: hasInnerContent(menu) && menu.innerContent
75
+ ? _jsx(MenuContentRenderer, { content: menu.innerContent }, 'contentKey' in menu ? menu.contentKey : undefined)
62
76
  : undefined, errorDescriptor: errorDescriptor, onError: onError, extra: extra, className: className, style: style, children: children }));
63
77
  //# sourceMappingURL=Layout.js.map
package/dist/Layout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"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"}
package/dist/components/menu/types.d.ts CHANGED
@@ -300,6 +300,13 @@ export interface MenuPropsWithDynamicContent extends BaseMenuProps {
300
300
  * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
301
301
  */
302
302
  contentKey: React.Key;
303
+ /**
304
+ * The function that creates a config to render a third level nav menu content. It will be called only when the content is rendered,
305
+ * i.e. only when the content really needs to be rendered.
306
+ *
307
+ * Tip: this function can be a React Hook.
308
+ */
309
+ innerContent?: MenuSectionContent | (() => MenuSectionContent);
303
310
  }
304
311
  export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent;
305
312
  export {};
package/dist/components/menu/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"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"}
package/dist/components/tour/StepNavigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StepNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAA;AAIhD,UAAU,sBAAsB;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,qCAAqC,eAAe,4CAsBlF,CAAA"}
1
+ {"version":3,"file":"StepNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAA;AAIhD,UAAU,sBAAsB;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,qCAAqC,eAAe,4CAwBlF,CAAA"}
package/dist/components/tour/StepNavigation.js CHANGED
@@ -10,7 +10,8 @@ import { useTour } from './hook.js';
10
10
  export const StepNavigation = ({ stepKey, nextButton, prevButton }) => {
11
11
  const { currentStep, steps, prevStep, finishStep } = useTour();
12
12
  const t = useTranslate(translations);
13
- return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep >= 1 &&
13
+ return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", alignItems: "center", children: [steps.length > 1 &&
14
+ _jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep >= 1 &&
14
15
  _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
15
16
  prevStep?.();
16
17
  prevButton?.onClick?.();
package/dist/components/tour/StepNavigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StepNavigation.js","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAyBhC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAmB,EAAE,EAAE;IACrF,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,OAAO,EAAE,CAAA;IAC9D,MAAM,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IAEpC,OAAO,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC7G,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,aAAE,WAAW,GAAG,CAAC,OAAG,CAAC,CAAC,EAAE,OAAG,KAAK,CAAC,MAAM,IAAQ,EAC/G,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,aACrB,WAAW,IAAI,CAAC;wBACf,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;gCACnD,QAAQ,EAAE,EAAE,CAAA;gCACZ,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,OAAO,YAC/C,UAAU,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,GACpB,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACvB,UAAU,CAAC,OAAO,CAAC,CAAA;wBACrB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAChE,IACJ,IACF,CAAA;AACT,CAAC,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE;QACF,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,YAAY;KACnB;CACF,CAAA"}
1
+ {"version":3,"file":"StepNavigation.js","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAyBhC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAmB,EAAE,EAAE;IACrF,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,OAAO,EAAE,CAAA;IAC9D,MAAM,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IAEpC,OAAO,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC3G,KAAK,CAAC,MAAM,GAAG,CAAC;gBAChB,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,aAAE,WAAW,GAAG,CAAC,OAAG,CAAC,CAAC,EAAE,OAAG,KAAK,CAAC,MAAM,IAAQ,EAEjH,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,aACrB,WAAW,IAAI,CAAC;wBACf,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;gCACnD,QAAQ,EAAE,EAAE,CAAA;gCACZ,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,OAAO,YAC/C,UAAU,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,GACpB,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACvB,UAAU,CAAC,OAAO,CAAC,CAAA;wBACrB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAChE,IACJ,IACF,CAAA;AACT,CAAC,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE;QACF,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,YAAY;KACnB;CACF,CAAA"}
package/dist/elements.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const elementIds: {
12
12
  readonly header: "header";
13
13
  readonly menu: "menu";
14
14
  readonly menuContent: "menuContent";
15
+ readonly menuInnerContent: "menuInnerContent";
15
16
  readonly menuSections: "menuSections";
16
17
  readonly accessibilityAnnouncer: "accessibilityAnnouncer";
17
18
  };
package/dist/elements.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAab,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAA;AACnD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC,CAAA;AAEtE;;GAEG;AACH,wBAAgB,iBAAiB,mBAKhC"}
1
+ {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;CAcb,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAA;AACnD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC,CAAA;AAEtE;;GAEG;AACH,wBAAgB,iBAAiB,mBAKhC"}
package/dist/elements.js CHANGED
@@ -12,6 +12,7 @@ export const elementIds = {
12
12
  header: 'header',
13
13
  menu: 'menu',
14
14
  menuContent: 'menuContent',
15
+ menuInnerContent: 'menuInnerContent',
15
16
  menuSections: 'menuSections',
16
17
  accessibilityAnnouncer: 'accessibilityAnnouncer',
17
18
  };
package/dist/elements.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,YAAY;IACxB,YAAY,EAAE,cAAc;IAC5B,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,aAAa;IAC1B,YAAY,EAAE,cAAc;IAC5B,sBAAsB,EAAE,wBAAwB;CACxC,CAAA;AAKV;;GAEG;AACH,MAAM,UAAU,iBAAiB;IAC/B,OAAQ,MAAM,CAAC,IAAI,CAAC,UAAU,CAAqB,CAAC,MAAM,CACxD,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,EAClE,EAAoB,CACrB,CAAA;AACH,CAAC"}
1
+ {"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,YAAY;IACxB,YAAY,EAAE,cAAc;IAC5B,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,aAAa;IAC1B,gBAAgB,EAAE,kBAAkB;IACpC,YAAY,EAAE,cAAc;IAC5B,sBAAsB,EAAE,wBAAwB;CACxC,CAAA;AAKV;;GAEG;AACH,MAAM,UAAU,iBAAiB;IAC/B,OAAQ,MAAM,CAAC,IAAI,CAAC,UAAU,CAAqB,CAAC,MAAM,CACxD,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,EAClE,EAAoB,CACrB,CAAA;AACH,CAAC"}
package/dist/layout.css CHANGED
@@ -98,7 +98,12 @@ body {
98
98
  left: calc(var(--menu-sections-width) + var(--menu-content-width));
99
99
  }
100
100
 
101
- #layout.no-menu-sections:not(.menu-content-visible) #page {
101
+ #layout.menu-inner-content-visible #page {
102
+ left: calc(var(--menu-sections-width) + calc(var(--menu-content-width) * 2));
103
+ }
104
+
105
+ #layout.no-menu-sections:not(.menu-content-visible) #page,
106
+ #layout.no-menu-sections:not(.menu-inner-content-visible) #page {
102
107
  border-top-left-radius: 0;
103
108
  }
104
109
 
@@ -363,7 +368,8 @@ body {
363
368
  pointer-events: auto;
364
369
  }
365
370
 
366
- #menuContent {
371
+ #menuContent,
372
+ #menuInnerContent {
367
373
  width: var(--menu-content-width);
368
374
  transition: left ease-out var(--menu-animation-duration);
369
375
  background-color: var(--light-400);
@@ -375,7 +381,13 @@ body {
375
381
  border-top: 1px solid var(--light-300);
376
382
  }
377
383
 
378
- #menuContent .goBackLink {
384
+ #menuInnerContent {
385
+ left: var(--menu-content-width);
386
+ border-left: 1px solid var(--light-300);
387
+ }
388
+
389
+ #menuContent .goBackLink,
390
+ #menuInnerContent .goBackLink {
379
391
  display: flex;
380
392
  flex-direction: row;
381
393
  align-items: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/portal-layout",
3
- "version": "2.37.1",
3
+ "version": "2.38.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/Layout.tsx CHANGED
@@ -11,7 +11,7 @@ import { DescriptionFn, ErrorHandler, ErrorManager } from './components/error/Er
11
11
  import { SilentErrorBoundary } from './components/error/SilentErrorBoundary'
12
12
  import { MenuContent } from './components/menu/MenuContent'
13
13
  import { MenuSections } from './components/menu/MenuSections'
14
- import { MenuProps } from './components/menu/types'
14
+ import { MenuProps, MenuPropsWithDynamicContent } from './components/menu/types'
15
15
  import { elementIds } from './elements'
16
16
  import './layout.css'
17
17
 
@@ -56,6 +56,10 @@ interface RawProps extends WithStyle {
56
56
  * The React element to go in the menu content.
57
57
  */
58
58
  menuContent?: ReactElement,
59
+ /**
60
+ * The React element to go in the menu inner content (third level nav).
61
+ */
62
+ menuInnerContent?: ReactElement,
59
63
  /**
60
64
  * The React element to go in the header.
61
65
  */
@@ -83,7 +87,7 @@ interface RawProps extends WithStyle {
83
87
  * @param props the component's props {@link RawProps}.
84
88
  */
85
89
  export const RawLayout = (
86
- { menuSections, menuContent, header, children,
90
+ { menuSections, menuContent, menuInnerContent, header, children,
87
91
  extra, errorDescriptor, onError, className, style }:
88
92
  RawProps,
89
93
  ) => {
@@ -99,22 +103,30 @@ export const RawLayout = (
99
103
  useEffect(() => {
100
104
  const classList = document.getElementById(elementIds.layout)?.classList
101
105
  if (!classList) return
106
+ const hasMenuContent = !!menuContent && !!document.getElementById(elementIds.menuContent)?.children.length
107
+ const hasMenuInnerContent = !!menuInnerContent && !!document.getElementById(elementIds.menuInnerContent)?.children.length
102
108
 
103
- if (menuContent && document.getElementById(elementIds.menuContent)?.children.length) {
109
+ if (hasMenuContent) {
104
110
  classList.add('menu-content-visible')
105
- if (!classList.contains('menu-manual'))
111
+ if (!classList.contains('menu-manual')) {
106
112
  classList.add('menu-compact')
107
- }
108
- else {
113
+ }
114
+ } else {
109
115
  classList.remove('menu-content-visible')
110
- if (!classList.contains('menu-manual'))
116
+ if (!classList.contains('menu-manual')) {
111
117
  classList.remove('menu-compact')
118
+ }
119
+ }
120
+
121
+ if (hasMenuInnerContent) {
122
+ classList.add('menu-inner-content-visible')
123
+ } else {
124
+ classList.remove('menu-inner-content-visible')
112
125
  }
126
+
113
127
  classList[menuSections ? 'remove' : 'add']('no-menu-sections')
114
128
  if (className) classList.add(...className.split(/\s+/))
115
-
116
- })
117
-
129
+ }, [menuContent, menuInnerContent, menuSections, className])
118
130
 
119
131
  return (
120
132
  <CSSToCitricAdapter>
@@ -123,6 +135,9 @@ export const RawLayout = (
123
135
  {header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
124
136
  {extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
125
137
  <aside id={elementIds.menu}>
138
+ { menuInnerContent &&
139
+ <nav role="menubar" id={elementIds.menuInnerContent}><SilentErrorBoundary>{menuInnerContent}</SilentErrorBoundary></nav>
140
+ }
126
141
  <nav role="menubar" id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
127
142
  {menuSections &&
128
143
  <FadingOverflow sides={['top', 'bottom']} scroll="arrows">
@@ -153,6 +168,8 @@ const MenuContentRenderer = ({ content }: Required<Pick<Props['menu'], 'content'
153
168
  return <MenuContent {...menuContent} />
154
169
  }
155
170
 
171
+ const hasInnerContent = (menu: MenuProps): menu is MenuPropsWithDynamicContent => 'innerContent' in menu
172
+
156
173
  /**
157
174
  * Renders the layout with a menu and header that follow the config objects passed as parameter.
158
175
  * @param props the component's props {@link Props}.
@@ -161,9 +178,15 @@ export const Layout = ({ menu, header, children, extra, errorDescriptor, onError
161
178
  <RawLayout
162
179
  header={<Header {...header} />}
163
180
  menuSections={menu.sections ? <MenuSections {...menu} /> : undefined}
164
- menuContent={menu.content
165
- ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
166
- : undefined
181
+ menuContent={
182
+ menu.content
183
+ ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
184
+ : undefined
185
+ }
186
+ menuInnerContent={
187
+ hasInnerContent(menu) && menu.innerContent
188
+ ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.innerContent} />
189
+ : undefined
167
190
  }
168
191
  errorDescriptor={errorDescriptor}
169
192
  onError={onError}
package/src/components/menu/types.ts CHANGED
@@ -313,6 +313,13 @@ export interface MenuPropsWithDynamicContent extends BaseMenuProps {
313
313
  * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
314
314
  */
315
315
  contentKey: React.Key,
316
+ /**
317
+ * The function that creates a config to render a third level nav menu content. It will be called only when the content is rendered,
318
+ * i.e. only when the content really needs to be rendered.
319
+ *
320
+ * Tip: this function can be a React Hook.
321
+ */
322
+ innerContent?: MenuSectionContent | (() => MenuSectionContent),
316
323
  }
317
324
 
318
325
  export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent
package/src/components/tour/StepNavigation.tsx CHANGED
@@ -35,7 +35,9 @@ export const StepNavigation = ({ stepKey, nextButton, prevButton }: NavigationPr
35
35
  const t = useTranslate(translations)
36
36
 
37
37
  return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between" alignItems="center">
38
- <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
38
+ { steps.length > 1 &&
39
+ <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
40
+ }
39
41
  <Flex sx={{ gap: '8px' }}>
40
42
  {currentStep >= 1 &&
41
43
  <Button sx={{ paddingInline: '20px' }} onClick={() => {
package/src/elements.ts CHANGED
@@ -12,6 +12,7 @@ export const elementIds = {
12
12
  header: 'header',
13
13
  menu: 'menu',
14
14
  menuContent: 'menuContent',
15
+ menuInnerContent: 'menuInnerContent',
15
16
  menuSections: 'menuSections',
16
17
  accessibilityAnnouncer: 'accessibilityAnnouncer',
17
18
  } as const
package/src/layout.css CHANGED
@@ -98,7 +98,12 @@ body {
98
98
  left: calc(var(--menu-sections-width) + var(--menu-content-width));
99
99
  }
100
100
 
101
- #layout.no-menu-sections:not(.menu-content-visible) #page {
101
+ #layout.menu-inner-content-visible #page {
102
+ left: calc(var(--menu-sections-width) + calc(var(--menu-content-width) * 2));
103
+ }
104
+
105
+ #layout.no-menu-sections:not(.menu-content-visible) #page,
106
+ #layout.no-menu-sections:not(.menu-inner-content-visible) #page {
102
107
  border-top-left-radius: 0;
103
108
  }
104
109
 
@@ -363,7 +368,8 @@ body {
363
368
  pointer-events: auto;
364
369
  }
365
370
 
366
- #menuContent {
371
+ #menuContent,
372
+ #menuInnerContent {
367
373
  width: var(--menu-content-width);
368
374
  transition: left ease-out var(--menu-animation-duration);
369
375
  background-color: var(--light-400);
@@ -375,7 +381,13 @@ body {
375
381
  border-top: 1px solid var(--light-300);
376
382
  }
377
383
 
378
- #menuContent .goBackLink {
384
+ #menuInnerContent {
385
+ left: var(--menu-content-width);
386
+ border-left: 1px solid var(--light-300);
387
+ }
388
+
389
+ #menuContent .goBackLink,
390
+ #menuInnerContent .goBackLink {
379
391
  display: flex;
380
392
  flex-direction: row;
381
393
  align-items: center;