@stack-spot/portal-layout 0.0.65 → 1.0.0-dev.1768482785050

package/src/Layout.tsx

@@ -1,8 +1,9 @@
-import { TourProps, TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components'
-import { CSSToCitricAdapter, WithStyle, listToClass } from '@stack-spot/portal-theme'
+import { FadingOverflow } from '@stack-spot/portal-components/FadingOverflow'
+import { CSSToCitricAdapter, listToClass, WithStyle } from '@stack-spot/portal-theme'
 import '@stack-spot/portal-theme/dist/theme.css'
 import { ReactElement, ReactNode, useEffect } from 'react'
 import { overlay } from './LayoutOverlayManager'
+import { WelcomeTour } from './WelcomeTour'
 import { Header, HeaderProps } from './components/Header'
 import { Toaster } from './components/Toaster'
 import { ErrorBoundary } from './components/error/ErrorBoundary'
@@ -10,88 +11,180 @@ import { DescriptionFn, ErrorHandler, ErrorManager } from './components/error/Er
 import { SilentErrorBoundary } from './components/error/SilentErrorBoundary'
 import { MenuContent } from './components/menu/MenuContent'
 import { MenuSections } from './components/menu/MenuSections'
-import { MenuProps } from './components/menu/types'
-import { usePortalSwitcherStep } from './components/tour/PortalSwitcherStep'
-import { elementIds, getLayoutElements } from './elements'
-import { LayoutContext, LayoutProvider } from './layout-context'
+import { MenuProps, MenuPropsWithDynamicContent, MenuSectionContent } from './components/menu/types'
+import { elementIds } from './elements'
 import './layout.css'
 
-interface Props extends WithStyle, LayoutContext {
+interface Props extends WithStyle {
+  /**
+   * The config for the menu.
+   */
   menu: MenuProps,
+  /**
+   * The config for the header.
+   */
   header: HeaderProps,
+  /**
+   * The React node to go in the page content.
+   */
   children: ReactNode,
+  /**
+   * A React node to place right after the page.
+   */
   extra?: ReactNode,
+  /**
+   * A function to convert errors into a readable format so they're properly rendered and logged.
+   */
   errorDescriptor?: DescriptionFn,
+  /**
+   * A function to run whenever an error is catch by an error boundary.
+   */
   onError?: ErrorHandler,
-  tourProps?: TourProps,
+  /**
+   * When true, the sections menu auto-collapses whenever a secondary (contextual) menu appears.
+   * @default false
+   */
+  autoCollapseSectionsMenu?: boolean,
 }
 
-interface RawProps extends WithStyle, LayoutContext {
+interface RawProps extends WithStyle {
+  /**
+   * The React element to go in the menu sections.
+   */
   menuSections?: ReactElement,
+  /**
+   * The React element to go in the menu content.
+   */
   menuContent?: ReactElement,
+  /**
+   * The React element to go in the menu inner content (third level nav).
+   */
+  menuInnerContent?: ReactElement,
+  /**
+   * The React element to go in the header.
+   */
   header?: ReactElement,
+  /**
+   * The React node to go in the page content.
+   */
   children?: ReactNode,
+  /**
+   * A React node to place right after the page.
+   */
   extra?: ReactNode,
+  /**
+   * A function to convert errors into a readable format so they're properly rendered and logged.
+   */
   errorDescriptor?: DescriptionFn,
+  /**
+   * A function to run whenever an error is catch by an error boundary.
+   */
   onError?: ErrorHandler,
-  tourProps?: TourProps,
 }
 
+/**
+ * Renders the layout with the React elements passed in the props.
+ * @param props the component's props {@link RawProps}.
+ */
 export const RawLayout = (
-  { menuSections, menuContent, header, children, tourProps,
-    extra, errorDescriptor, onError, className, style, anchorTag }:
+  { menuSections, menuContent, menuInnerContent, header, children,
+    extra, errorDescriptor, onError, className, style }:
     RawProps,
 ) => {
-  // @ts-ignore
   const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
-  const { layout } = getLayoutElements()
-  const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
-  const portalSwitcherStep = usePortalSwitcherStep()
-
-  const classes = [
-    menuContent && !isCompactedOnlyIcons ? 'menu-content-visible' : undefined,
-    menuSections ? undefined : 'no-menu-sections',
-    className,
-    isCompactedOnlyIcons ? 'menu-compact' : undefined,
-  ]
-
-  const tourPropsWithDefaults = { ...defaultTourConfig, ...(tourProps || {}) }
-  tourPropsWithDefaults.steps = [
-    portalSwitcherStep,
-    ...tourPropsWithDefaults.steps,
-  ].filter(isNewTourStep)
 
   useEffect(() => {
     if (errorDescriptor) ErrorManager.setDescriptionFunction(errorDescriptor)
     if (onError) ErrorManager.setErrorHandler(onError)
   }, [])
 
+  // controls classes in the layout element. This can't be a React prop because we don't want classes to be replaced, we want them to be
+  // merged with the previous set of classes.
+  useEffect(() => {
+    const classList = document.getElementById(elementIds.layout)?.classList
+    if (!classList) return
+    const hasMenuContent = !!menuContent && !!document.getElementById(elementIds.menuContent)?.children.length
+    const hasMenuInnerContent = !!menuInnerContent && !!document.getElementById(elementIds.menuInnerContent)?.children.length
+
+    if (hasMenuContent) {
+      classList.add('menu-content-visible')
+      if (!classList.contains('menu-manual')) {
+        classList.add('menu-compact')
+      }
+    } else {
+      classList.remove('menu-content-visible')
+    }
+
+    if (hasMenuInnerContent) {
+      classList.add('menu-inner-content-visible')
+    } else {
+      classList.remove('menu-inner-content-visible')
+    }
+
+    classList[menuSections ? 'remove' : 'add']('no-menu-sections')
+    if (className) classList.add(...className.split(/\s+/))
+  }, [menuContent, menuInnerContent, menuSections, className])
+
   return (
     <CSSToCitricAdapter>
-      <LayoutProvider anchorTag={anchorTag}>
-        <TourProvider config={tourPropsWithDefaults} >
-          <div id={elementIds.layout} className={listToClass(classes)} style={style}>
-            {children && <div id={elementIds.page}>
-              <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>
-            </div>}
-            {extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
-            <aside id={elementIds.menu}>
-              <nav role="menu" id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
-              {menuSections &&
-                <nav role="menu" id={elementIds.menuSections}><SilentErrorBoundary>{menuSections}</SilentErrorBoundary></nav>}
-            </aside>
-            {header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
-            <div id={elementIds.bottomDialog} role="dialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
-            <div id={elementIds.backdrop}>
-              <div id={elementIds.rightPanel} aria-modal role="dialog"><ErrorBoundary>{rightPanel}</ErrorBoundary></div>
-              <div id={elementIds.modal} aria-modal role="dialog"><ErrorBoundary>{modal}</ErrorBoundary></div>
-            </div>
-            <Toaster />
-            <div id={elementIds.accessibilityAnnouncer} aria-atomic aria-live="assertive">
-            </div>
+      <WelcomeTour />
+      <div id={elementIds.layout} style={style} className="menu-manual menu-compact">
+        {header && <header id={elementIds.header}><SilentErrorBoundary>{header}</SilentErrorBoundary></header>}
+        {extra && <SilentErrorBoundary>{extra}</SilentErrorBoundary>}
+        <aside id={elementIds.menu}>
+          {menuInnerContent &&
+            <nav role="menubar" id={elementIds.menuInnerContent}><SilentErrorBoundary>{menuInnerContent}</SilentErrorBoundary></nav>
+          }
+          <nav role="menubar" id={elementIds.menuContent}><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
+          {menuSections &&
+            <FadingOverflow sides={['top', 'bottom']} scroll="arrows">
+              <nav role="menubar" id={elementIds.menuSections}>
+                <SilentErrorBoundary>{menuSections}</SilentErrorBoundary>
+              </nav>
+            </FadingOverflow>
+          }
+        </aside>
+        {children && <div id={elementIds.page}>
+          <article id={elementIds.content}><ErrorBoundary>{children}</ErrorBoundary></article>
+        </div>}
+        <div id={elementIds.bottomDialog} role="dialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
+        <div id={elementIds.backdrop}>
+          <div id={elementIds.rightPanel} aria-modal role="dialog">
+            <ErrorBoundary>
+              {rightPanel.length === 1 && !rightPanel[0].stack
+                ? rightPanel[0].element
+                : rightPanel.map(
+                  (m, i) => <div
+                    key={i}
+                    className={listToClass([
+                      'right-panel-instance',
+                      (i === rightPanel.length - 1) && 'active',
+                      modal.length > 0 && 'disabled',
+                    ])}
+                    {...(modal.length > 0 ? { inert: true } : {})}
+                  >
+                    {m.element}
+                  </div>,
+                )
+              }
+            </ErrorBoundary>
+          </div>
+          <div id={elementIds.modal} aria-modal role="dialog">
+            <ErrorBoundary>
+              {modal.length === 1 && !modal[0].stack
+                ? modal[0].element
+                : modal.map(
+                  (m, i) =>
+                    <div key={i} className={listToClass(['modal-instance', (i === modal.length - 1) && 'active'])}>{m.element}</div>,
+                )
+              }
+            </ErrorBoundary>
           </div>
-        </TourProvider>
-      </LayoutProvider>
+        </div>
+        <Toaster />
+        <div id={elementIds.accessibilityAnnouncer} aria-atomic aria-live="assertive">
+        </div>
+      </div>
     </CSSToCitricAdapter>
   )
 }
@@ -99,23 +192,38 @@ export const RawLayout = (
 const MenuContentRenderer = ({ content }: Required<Pick<Props['menu'], 'content'>>) => {
   const menuContent = typeof content === 'function' ? content() : content
   return <MenuContent {...menuContent} />
+
 }
+const MenuInnerContentRenderer = ({ content }: { content?: MenuSectionContent | (() => MenuSectionContent | undefined) }) => {
+  const menuContent = typeof content === 'function' ? content() : content
+  return menuContent && <MenuContent {...menuContent} />
+}
+
+const hasInnerContent = (menu: MenuProps): menu is MenuPropsWithDynamicContent => 'innerContent' in menu
 
-export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps, anchorTag }: Props) => (
+/**
+ * Renders the layout with a menu and header that follow the config objects passed as parameter.
+ * @param props the component's props {@link Props}.
+ */
+export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style }: Props) => (
   <RawLayout
     header={<Header {...header} />}
     menuSections={menu.sections ? <MenuSections {...menu} /> : undefined}
-    menuContent={menu.content
-      ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
-      : undefined
+    menuContent={
+      menu.content
+        ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
+        : undefined
+    }
+    menuInnerContent={
+      hasInnerContent(menu) && menu.innerContent
+        ? <MenuInnerContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.innerContent} />
+        : undefined
     }
     errorDescriptor={errorDescriptor}
     onError={onError}
     extra={extra}
     className={className}
     style={style}
-    tourProps={tourProps}
-    anchorTag={anchorTag}
   >
     {children}
   </RawLayout>