@stack-spot/portal-layout 0.0.65 → 1.0.0-stg.1768483038644

package/src/components/menu/MenuContent.tsx

@@ -1,28 +1,21 @@
-/* eslint-disable react-refresh/only-export-components */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Flex, IconBox, Text } from '@citric/core'
+import { Box, Flex, IconBox, Text } from '@citric/core'
 import { ArrowLeft, ChevronDown } from '@citric/icons'
 import { LoadingCircular } from '@citric/ui'
+import { useCheckTextOverflow } from '@stack-spot/portal-components'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
-import { useAnchorTag } from '../../layout-context'
 import { hideOverlayImmediately } from './MenuSections'
 import { PageSelector } from './PageSelector'
 import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants'
 import { ItemGroup, MenuAction, MenuItem, MenuSectionContent } from './types'
-import { useCheckTextOverflow } from './use-check-text-overflow'
 
-const BackLink = styled.a`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin: ${PADDING}px;
-  margin-bottom: 16px;
-  gap: 6px;
-`
-
-export const MenuGroup = styled.ul`
+/**
+ * The list (`<ul>`) used for grouping items in a menu.
+ */
+// fixme: remove explicit type when TS is upgraded to 5.5 or greater
+export const MenuGroup: React.FC<React.HTMLAttributes<HTMLUListElement>> = styled.ul`
   padding: 0 0 0 16px;
   display: flex;
   flex-direction: column;
@@ -33,30 +26,18 @@ export const MenuGroup = styled.ul`
     padding: 0;
   }
 
-  .item-row-group > a {
-    padding: 0 16px;
-    margin: 0;
-    border-radius: 0;
-  }
-
-  .item-row-group > a::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--light-300);
-    opacity: 0.24;
-    border-radius: inherit;
-  }
-
   .item-row {
     display: flex;
     flex-direction: row;
     gap: 8px;
     align-items: center;
 
+    &.root {
+      padding: 0 16px;
+      margin-top: 16px;
+      border-radius: 0;
+    }
+
     .label {
       flex: 1;
       &.hidden, &.ellipsis {
@@ -68,73 +49,77 @@ export const MenuGroup = styled.ul`
       }
     }
   }
-  
-  .item-row-group {
-    margin-top: 16px;
-  }
 
-  li a {
-    position: relative;
-    height: 0;
-    overflow: hidden;
-    transition: height 0.3s, background-color 0.2s;
-    margin-left: ${PADDING - ITEM_PADDING}px;
-    padding-left: ${ITEM_PADDING}px;
+  li {
+    .item-row-title {
+      opacity: 0.7;
+    }
 
-    &:hover {
-      background-color: ${theme.color.light['500']};
+    .item-as-title {
+      position: relative;
+      overflow: hidden;
+      margin-left: ${PADDING - ITEM_PADDING}px;
     }
     
-    &.action {
-      &:before {
-        content: '';
-        position: absolute;
-        left: 2px;
-        width: 2px;
-        height: 0;
-        background: inherit;
-        transition: height 0.2s;
+    a {
+      position: relative;
+      height: 0;
+      overflow: hidden;
+      transition: height 0.3s, background-color 0.2s;
+      margin-left: ${PADDING - ITEM_PADDING}px;
+      padding-left: ${ITEM_PADDING}px;
+
+      &:hover {
+        background-color: ${theme.color.light['500']};
       }
+      
+      &.action {
+        &:before {
+          content: '';
+          position: absolute;
+          left: 2px;
+          width: 2px;
+          height: 0;
+          background: inherit;
+          transition: height 0.2s;
+        }
 
-      &.active {
-  
-        &:hover {
-          background-color: transparent;
+        &.active {
+    
+          &:hover {
+            background-color: transparent;
+          }
+    
+          &:before {
+            background: ${theme.color.primary['500']};
+            height: 24px;
+          }
         }
-  
-        &:before {
-          background: ${theme.color.primary['500']};
+
+        &:not(.active):hover:before {
+          background: ${theme.color.light.contrastText};
           height: 24px;
         }
       }
 
-      &:not(.active):hover:before {
-        background: ${theme.color.light.contrastText};
-        height: 24px;
-      }
-    }
-
-    .chevron {
-      transition: transform 0.3s;
-      &:not(.open) {
-        transform: rotate(-90deg);
+      .chevron {
+        transition: transform 0.3s;
+        &:not(.open) {
+          transform: rotate(-90deg);
+        }
       }
     }
-
-    .item-row-title {
-      opacity: 0.7;
-    }
   }
 
   &.open {
     visibility: visible;
     transition: unset;
-    & > li > a, & > li > .item-row-group > a  {
+    & > li > a, & > li > .item-as-title  {
       height: 40px;
     }
   }
 
-  &:not(.open) &.open > li > a {
+  &:not(.open) &.open > li > a, &:not(.open) &.open > li > .item-as-title {
     height: 0;
   }
 
@@ -158,13 +143,21 @@ export const MenuGroup = styled.ul`
   }
 `
 
-export const Title = styled.header`
+/**
+ * The header (<header>) for a group of items in a menu. Contains the title of the group.
+ */
+// fixme: remove explicit type when TS is upgraded to 5.5 or greater
+export const Title: React.FC<React.HTMLAttributes<HTMLElement>> = styled.header`
   display: flex;
   flex-direction: column;
   margin: ${PADDING}px 0 24px ${PADDING}px;
 `
 
-export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }: MenuAction) => {
+/**
+ * A menu item that performs an action.
+ * @param props the props for the component {@link MenuAction}.
+ */
+export const ActionItem = ({ label, onClick, href, active, icon, badge, target, overflow = 'wrap' }: MenuAction) => {
   const Link = useAnchorTag()
   const { ref, overflow: textOverflow } = useCheckTextOverflow()
   const isTextLabel = typeof label === 'string'
@@ -176,6 +169,7 @@ export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow
         if (onClick) onClick()
         hideOverlayImmediately()
       }}
+      target={target}
       className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
       {...(active ? { 'aria-current': 'page' } : undefined)}
       {...(!href ? { 'tabIndex': 0 } : undefined)}
@@ -189,7 +183,12 @@ export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow
   )
 }
 
-const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, root, overflow = 'wrap' }:
+/**
+ * A menu item that is actually a subgroup and can be collapsed/expanded.
+ * @param props the props for the component {@link ItemGroup} & { root: boolean }. Pass root=true to style this group as a root group.
+ * Root groups have slightly different visuals.
+ */
+const CollapsibleGroupItem = ({ label, showAsTitle, open: initiallyOpened, children, icon, badge, root, overflow = 'wrap' }:
   ItemGroup & { root?: boolean }) => {
   const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false)
   const items = useMemo(() => children?.filter(i => !i.hidden).map(renderOption), [children])
@@ -197,10 +196,17 @@ const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, ba
 
   return (
     <>
-      <a
+      {showAsTitle ? <Box className={listToClass(['item-row', root && 'root', 'item-as-title'])}>
+        {icon}
+        <Text appearance={root ? 'overheader2' : 'body2'}
+          colorScheme="light.contrastText"
+          className={`label ${overflow} ${root ? 'item-row-title' : ''}`}>
+          {label}
+        </Text>
+      </Box> : <a
         onClick={() => setOpen(!open)}
         onKeyDown={e => e.key === 'Enter' && setOpen(!open)}
-        className="item-row"
+        className={listToClass(['item-row', root && 'root'])}
         tabIndex={0}
         aria-controls={id}
         aria-expanded={open}
@@ -215,7 +221,7 @@ const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, ba
         <IconBox sx={{ mr: root ? undefined : '5' }}>
           <ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} />
         </IconBox>
-      </a>
+      </a>}
       <MenuGroup id={id}
         className={`${open ? 'open' : ''} ${root ? 'no-indentation' : ''}`}
         aria-hidden={!open}>{items}</MenuGroup>
@@ -223,41 +229,27 @@ const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, ba
   )
 }
 
-const RootGroupItem = (props: ItemGroup) => {
-  const items = useMemo(() => props.children?.filter(i => !i.hidden).map(renderOption), [props.children])
-
-  return <>
-    {items.length ? <div className="item-row-group">
-      <CollapsibleGroupItem {...props} open={true} root={true} />
-    </div> :
-      <>
-        <div className="item-row">
-          {props.icon}
-          <Text appearance="overheader2" colorScheme="light.700" className={`group-title label ${props.overflow}`}>{props.label}</Text>
-          {props.badge}
-        </div>
-        <MenuGroup className="open no-indentation">{items}</MenuGroup>
-      </>
-    }
-  </>
-}
-
-const GroupItem = ({ root, ...item }: ItemGroup & { root?: boolean }) => (
-  root ? <RootGroupItem {...item} /> : <CollapsibleGroupItem {...item} />
-)
-
 function renderOption({ root, ...option }: MenuItem & { root?: boolean }) {
   const labelText = typeof option.label === 'string' ? option.label : option.label.id
   return (
     <li key={labelText} role="menuitem" aria-selected={'children' in option ? undefined : option.active}>
-      {'children' in option ? <GroupItem root={root} {...option} /> : <ActionItem {...option} />}
+      {'children' in option ? <CollapsibleGroupItem {...option} root={root} open={option.open ?? root} /> : <ActionItem {...option} />}
     </li >
   )
 }
 
+/**
+ * Renders a menu-content interface.
+ * 
+ * Considering the Stackspot UI, this is the "menu content", not the "menu sections", i.e. it's the second menu from left to right, the
+ * one that changes according to section selected. 
+ * @param props the props for the component {@link MenuSectionContent}.
+ */
 export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle, options = [], loading, error }: MenuSectionContent) => {
   const items = useMemo(() => options.filter(o => !o.hidden).map(o => renderOption({ ...o, root: true })), [options])
 
+  const Link = useAnchorTag()
+
   function renderContent() {
     if (loading) {
       return (
@@ -273,14 +265,14 @@ export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle,
   return (
     <>
       {goBack && (
-        <BackLink href={goBack.href} onClick={goBack.onClick}>
+        <Link href={goBack.href} onClick={goBack.onClick} className="goBackLink">
           <IconBox colorIcon="inverse.500" size="sm">
             <ArrowLeft />
           </IconBox>
           {typeof goBack?.label === 'string' ?
             <Text appearance="body2" nowrapEllipsis>{goBack.label}</Text> :
             goBack.label.element}
-        </BackLink>
+        </Link>
       )}
       {title && (
         <Title>

package/src/components/menu/MenuSectionGroup.tsx

@@ -0,0 +1,121 @@
+import { theme } from '@stack-spot/portal-theme'
+import styled from 'styled-components'
+import { MENU_CONTENT_PADDING as PADDING } from './constants'
+
+export const MenuSectionGroup: React.FC<React.HTMLAttributes<HTMLUListElement>> = styled.ul`
+  padding: 0 0 0 16px;
+  display: flex;
+  flex-direction: column;
+  visibility: hidden;
+  transition: visibility 0s 0.3s;
+
+  &.no-indentation {
+    padding: 0;
+  }
+
+  .item-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    &.root {
+      padding: 0 16px;
+      margin-top: 16px;
+      border-radius: 0;
+    }
+
+    .label {
+      flex: 1;
+      &.hidden, &.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      &.ellipsis {
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  li a {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s, background-color 0.2s;
+
+    &:hover {
+      background-color: ${theme.color.light['500']};
+    }
+    
+    &.action {
+      &:before {
+        content: '';
+        position: absolute;
+        left: 2px;
+        width: 2px;
+        height: 0;
+        background: inherit;
+        transition: height 0.2s;
+      }
+
+      &.active {
+  
+        &:hover {
+          background-color: transparent;
+        }
+  
+        &:before {
+          background: ${theme.color.primary['500']};
+          height: 24px;
+        }
+      }
+
+      &:not(.active):hover:before {
+        background: ${theme.color.light.contrastText};
+        height: 24px;
+      }
+    }
+
+    .chevron {
+      transition: transform 0.5s;
+      &:not(.open) {
+        transform: rotate(180deg);
+      }
+    }
+
+    .item-row-title {
+      opacity: 0.7;
+    }
+  }
+
+  &.open {
+    visibility: visible;
+    transition: unset;
+    & > li > a  {
+      height: 56px;
+    }
+  }
+
+  &:not(.open) &.open > li > a {
+    height: 0;
+  }
+
+  &.root {
+    /* margin-bottom: ${PADDING}px; */
+
+    & > li {
+      .group-title {
+        margin-left: ${PADDING}px;
+        margin-bottom: 5px;
+        margin-top: 40px;
+        display: block;
+      }
+
+      &:first-child {
+        .group-title {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+`