@stack-spot/portal-layout 0.0.2 → 0.0.3

package/src/components/Menu/MenuSections.tsx

@@ -3,7 +3,7 @@ import { IconBox, Text } from '@citric/core'
 import { ChevronLeft, Menu as MenuIcon } from '@citric/icons'
 import { useCallback, useMemo, useState } from 'react'
 import { MenuContent } from './MenuContent'
-import { MenuProps, MenuSection, MenuSectionContent } from './types'
+import { MenuProps, MenuSection } from './types'
 
 const ARROW_HEIGHT = 24
 const HIDE_OVERLAY_DELAY_MS = 400
@@ -35,19 +35,29 @@ function isMenuContentVisible() {
   return !!document.getElementById('layout')?.classList?.contains('menu-content-visible')
 }
 
-function renderSection(
-  { icon, label, href, onClick, active, content }: MenuSection,
-  setOverlayContent: (content: MenuSectionContent | undefined) => void,
-) {
+const Section = ({ 
+  icon,
+  label,
+  href,
+  onClick,
+  active,
+  content,
+  onOpen,
+  setCurrentOverlay,
+  id,
+}: MenuSection & { id: number, setCurrentOverlay: (id: number | undefined) => void }) => {
+  const contentToRender = typeof content === 'function' ? content() : content
+
   function shouldShowOverlay() {
-    return !!content && (!active || !isMenuContentVisible())
+    return !!contentToRender && (!active || !isMenuContentVisible())
   }
 
   function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
     if (!shouldShowOverlay()) return
+    onOpen?.()
     const rect = (event.target as HTMLElement)?.getBoundingClientRect()
     const arrow: HTMLElement | null = document.querySelector(`#${MENU_OVERLAY_ID} .arrow`)
-    setOverlayContent(content)
+    setCurrentOverlay(id)
     showOverlay()
     if (rect && arrow) {
       arrow.style.top = `${rect.top + rect.height / 2 - ARROW_HEIGHT / 2}px`
@@ -74,7 +84,14 @@ function renderSection(
   )
 }
 
-export const MenuSections = ({ sections }: Pick<MenuProps, 'sections'>) => {
+const OverlayRenderer = ({ content }: Pick<MenuSection, 'content'>) => {
+  const data = typeof content === 'function' ? content() : content
+  return <div><MenuContent {...data} /></div>
+}
+
+export const MenuSections = ({ sections, ...props }: MenuProps) => {
+  // this is a mock state only used to force an update on the component.
+  const [_, setUpdate] = useState(0)
   const toggleMenu = useCallback(() => {
     const layout = document.getElementById('layout')
     if (!layout) return
@@ -83,10 +100,29 @@ export const MenuSections = ({ sections }: Pick<MenuProps, 'sections'>) => {
     } else {
       layout.classList.add('menu-content-visible')
     }
+    setUpdate(current => current + 1)
   }, [])
-  const [overlayContent, setOverlayContent] = useState<MenuSectionContent | undefined>()
+  // the current overlay showing, when the user hovers the section icon. This is the index of the item in the sections array.
+  const [currentOverlay, setCurrentOverlay] = useState<number | undefined>()
   
-  const sectionItems = useMemo(() => sections.map(s => renderSection(s, setOverlayContent)), [sections])
+  const sectionItems = useMemo(
+    () => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay} />),
+    [sections],
+  )
+
+  /* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
+  instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
+  Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
+  component. Without this, React would see the content changing every time a new section is hovered. Since the content might be a
+  hook, this would cause some serious problems. */
+  function renderMenuOverlay() {
+    if (currentOverlay === undefined) return null
+    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active && !!props.content
+    return shouldRenderMenuContentInstead
+      ? <OverlayRenderer key={'contentKey' in props ? props.contentKey : undefined} content={props.content} />
+      : <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content} />
+  }
+
   return (
     <>
       <ul>{sectionItems}</ul>
@@ -97,7 +133,7 @@ export const MenuSections = ({ sections }: Pick<MenuProps, 'sections'>) => {
         </IconBox>
       </button>
       <div id="menuContentOverlay" onMouseEnter={showOverlay} onMouseLeave={hideOverlay}>
-        {overlayContent && <div><MenuContent {...overlayContent} /></div>}
+        {renderMenuOverlay()}
         <div className="arrow"></div>
       </div>
     </>

package/src/components/Menu/PageSelector.tsx

@@ -1,5 +1,6 @@
 import { IconBox, Text } from '@citric/core'
 import { ArrowRight, Select } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
@@ -27,6 +28,9 @@ const SelectorBox = styled.div`
 
     .label {
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
@@ -71,7 +75,7 @@ const SelectorBox = styled.div`
   }
 `
 
-export const PageSelector = ({ options, value, button }: Selector) => {
+export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
   const [visible, setVisible] = useState(false)
   const { optionsWithIcon, selected } = useMemo(
     () => {
@@ -91,18 +95,26 @@ export const PageSelector = ({ options, value, button }: Selector) => {
 
   return (
     <SelectorBox>
-      <a onClick={() => setVisible(true)} aria-label={value}>
-        {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
-        <Text appearance="body2" className="label">{selected?.label ?? button?.label ?? value}</Text>
-        <IconBox size="xs"><Select /></IconBox>
-      </a>
+      {loading
+        ? <LoadingCircular /> 
+        : (
+          <>
+            {title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
+            <a onClick={() => setVisible(true)} aria-label={value}>
+              {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
+              <Text appearance="body2" className="label">{selected?.label ?? button?.label ?? value}</Text>
+              <IconBox size="xs"><Select /></IconBox>
+            </a>
 
-      <SelectionList
-        visible={visible}
-        items={optionsWithIcon}
-        onHide={() => setVisible(false)}
-        after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{button.label}</a> : undefined}
-      />
+            <SelectionList
+              visible={visible}
+              items={optionsWithIcon}
+              onHide={() => setVisible(false)}
+              after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{button.label}</a> : undefined}
+            />
+          </>
+        )
+      }
     </SelectorBox>
   )
 }

package/src/components/Menu/types.ts

@@ -1,16 +1,24 @@
 import { ReactElement } from 'react'
 import { Action } from '../types'
 
-export interface ItemGroup {
+interface BaseMenuItem {
+  hidden?: boolean,
+  icon?: React.ReactElement,
+  /**
+   * Whether to wrap overflowing text, just hide or hide and add an ellipsis (...).
+   * @default 'wrap'
+   */
+  overflow?: 'hidden' | 'wrap' | 'ellipsis',
+}
+
+export interface ItemGroup extends BaseMenuItem {
   label: string,
   children: MenuItem[],
   open?: boolean,
-  hidden?: boolean,
 }
 
-export interface MenuAction extends Action {
+export interface MenuAction extends Action, BaseMenuItem {
   active?: boolean,
-  hidden?: boolean,
 }
 
 export type MenuItem = ItemGroup | MenuAction
@@ -30,6 +38,7 @@ export interface Selector {
   button?: Action,
   title?: string,
   subtitle?: string,
+  loading?: boolean,
 }
 
 export interface MenuSectionContent {
@@ -38,16 +47,43 @@ export interface MenuSectionContent {
   subtitle?: string,
   pageSelector?: Selector,
   options?: MenuItem[],
+  loading?: boolean,
+  error?: string,
 }
 
 export interface MenuSection extends Action {
   icon: ReactElement,
-  content?: MenuSectionContent,
+  /**
+   * The content or a function that creates the content.
+   * 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.
+   * Tip: this function can be a React Hook.
+   */
+  content?: MenuSectionContent | (() => MenuSectionContent),
   active?: boolean,
+  onOpen?: () => void,
 }
 
-export interface MenuProps {
+interface BaseMenuProps {
   sections: MenuSection[],
-  content?: MenuSectionContent,
   compact?: boolean,
 }
+
+interface MenuPropsWithStaticContent extends BaseMenuProps {
+  content?: MenuSectionContent,
+}
+
+interface MenuPropsWithDynamicContent extends BaseMenuProps {
+  /**
+   * 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
+   * be rendered.
+   * 
+   * Tip: this function can be a React Hook.
+   */
+  content: MenuSectionContent | (() => MenuSectionContent),
+  /**
+   * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
+   */
+  contentKey: React.Key,
+}
+
+export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent

package/src/components/OverlayContent.tsx

@@ -27,11 +27,13 @@ const ContentBox = styled.section`
   }
   &.panel {
     padding: 20px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
   header {
     display: flex;
     flex-direction: row;
-    flex: 1;
     margin-bottom: 1.25rem;
   }
 `

package/src/components/SelectionList.tsx

@@ -51,7 +51,8 @@ export interface SelectionListProps extends WithStyle {
 
 const SelectionBox = styled.div<{ $maxHeight: string }>`
   max-height: 0;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
   transition: max-height ease-in ${ANIMATION_DURATION_MS / 1000}s;
   z-index: 1;
   box-shadow: 4px 4px 48px #000;
@@ -83,6 +84,9 @@ const SelectionBox = styled.div<{ $maxHeight: string }>`
     }
     .label {
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 

package/src/index.ts

@@ -1,10 +1,12 @@
 export { Layout } from './Layout'
 export { overlay } from './LayoutOverlayManager'
+export { Dialog } from './components/Dialog'
 export { Header, HeaderProps } from './components/Header'
 export { StackspotLogo } from './components/Logo'
 export { MenuContent } from './components/Menu/MenuContent'
 export { MenuSections } from './components/Menu/MenuSections'
 export * from './components/Menu/types'
+export { OverlayContent } from './components/OverlayContent'
 export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList'
 export * from './components/types'
 export * from './errors'

package/src/layout.css

@@ -298,11 +298,25 @@ body {
   display: flex;
   flex-direction: column;
   top: var(--header-height);
-  right: -307px;
   bottom: 0;
-  width: 307px;
   transition: right var(--right-panel-animation-duration);
   background-color: var(--light-400);
+  right: -800px;
+}
+
+#rightPanel.small {
+  right: -400px;
+  width: 400px;
+}
+
+#rightPanel.medium {
+  right: -600px;
+  width: 600px;
+}
+
+#rightPanel.large {
+  right: -800px;
+  width: 800px;
 }
 
 #rightPanel.visible {