@stack-spot/portal-layout 1.0.2 → 1.1.0

package/src/components/menu/MenuContent.tsx

@@ -1,270 +1,270 @@
-import { 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 { 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'
-
-/**
- * The list (<ul>) used for grouping items in a menu.
- */
-export const MenuGroup = 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;
-    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;
-        }
-  
-        &:before {
-          background: ${theme.color.primary['500']};
-          height: 24px;
-        }
-      }
-
-      &:not(.active):hover:before {
-        background: ${theme.color.light.contrastText};
-        height: 24px;
-      }
-    }
-
-    .chevron {
-      transition: transform 0.3s;
-      &:not(.open) {
-        transform: rotate(-90deg);
-      }
-    }
-
-    .item-row-title {
-      opacity: 0.7;
-    }
-  }
-
-  &.open {
-    visibility: visible;
-    transition: unset;
-    & > li > a  {
-      height: 40px;
-    }
-  }
-
-  &: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;
-        }
-      }
-    }
-  }
-`
-
-/**
- * The header (<header>) for a group of items in a menu. Contains the title of the group.
- */
-export const Title = styled.header`
-  display: flex;
-  flex-direction: column;
-  margin: ${PADDING}px 0 24px ${PADDING}px;
-`
-
-/**
- * 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, overflow = 'wrap' }: MenuAction) => {
-  const Link = useAnchorTag()
-  const { ref, overflow: textOverflow } = useCheckTextOverflow()
-  const isTextLabel = typeof label === 'string'
-  return (
-    <Link
-      href={href}
-      onClick={() => {
-        if (active) return
-        if (onClick) onClick()
-        hideOverlayImmediately()
-      }}
-      className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
-      {...(active ? { 'aria-current': 'page' } : undefined)}
-      {...(!href ? { 'tabIndex': 0 } : undefined)}
-    >
-      {icon}
-      {isTextLabel ?
-        <Text ref={ref} appearance="body2" className={`label ${overflow}`} title={textOverflow ? label : ''}>{label}</Text> :
-        label.element}
-      {badge}
-    </Link>
-  )
-}
-
-/**
- * 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, 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])
-  const id = `menuGroup${label}`
-
-  return (
-    <>
-      <a
-        onClick={() => setOpen(!open)}
-        onKeyDown={e => e.key === 'Enter' && setOpen(!open)}
-        className={listToClass(['item-row', root && 'root'])}
-        tabIndex={0}
-        aria-controls={id}
-        aria-expanded={open}
-      >
-        {icon}
-        <Text appearance={root ? 'overheader2' : 'body2'}
-          colorScheme="light.contrastText"
-          className={`label ${overflow} ${root ? 'item-row-title' : ''}`}>
-          {label}
-        </Text>
-        {badge}
-        <IconBox sx={{ mr: root ? undefined : '5' }}>
-          <ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} />
-        </IconBox>
-      </a>
-      <MenuGroup id={id}
-        className={`${open ? 'open' : ''} ${root ? 'no-indentation' : ''}`}
-        aria-hidden={!open}>{items}</MenuGroup>
-    </>
-  )
-}
-
-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 ? <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 (
-        <Flex justifyContent="center" alignItems="center" flex={1} sx={{ padding: '40px' }}>
-          <LoadingCircular />
-        </Flex>
-      )
-    }
-    if (error) return <Text colorScheme="danger">{error}</Text>
-    return <MenuGroup className="open root no-indentation">{items}</MenuGroup>
-  }
-
-  return (
-    <>
-      {goBack && (
-        <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}
-        </Link>
-      )}
-      {title && (
-        <Title>
-          <Text appearance="overheader1" colorScheme="primary" sx={{ fontSize: '0.75rem', mt: 2, mb: 2 }}>{title}</Text>
-          {subtitle && <Text appearance="h5">{subtitle}</Text>}
-        </Title>
-      )}
-      {afterTitle}
-      {pageSelector && <PageSelector {...pageSelector} />}
-      {renderContent()}
-    </>
-  )
-}
+import { 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 { 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'
+
+/**
+ * The list (<ul>) used for grouping items in a menu.
+ */
+export const MenuGroup = 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;
+    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;
+        }
+  
+        &:before {
+          background: ${theme.color.primary['500']};
+          height: 24px;
+        }
+      }
+
+      &:not(.active):hover:before {
+        background: ${theme.color.light.contrastText};
+        height: 24px;
+      }
+    }
+
+    .chevron {
+      transition: transform 0.3s;
+      &:not(.open) {
+        transform: rotate(-90deg);
+      }
+    }
+
+    .item-row-title {
+      opacity: 0.7;
+    }
+  }
+
+  &.open {
+    visibility: visible;
+    transition: unset;
+    & > li > a  {
+      height: 40px;
+    }
+  }
+
+  &: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;
+        }
+      }
+    }
+  }
+`
+
+/**
+ * The header (<header>) for a group of items in a menu. Contains the title of the group.
+ */
+export const Title = styled.header`
+  display: flex;
+  flex-direction: column;
+  margin: ${PADDING}px 0 24px ${PADDING}px;
+`
+
+/**
+ * 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, overflow = 'wrap' }: MenuAction) => {
+  const Link = useAnchorTag()
+  const { ref, overflow: textOverflow } = useCheckTextOverflow()
+  const isTextLabel = typeof label === 'string'
+  return (
+    <Link
+      href={href}
+      onClick={() => {
+        if (active) return
+        if (onClick) onClick()
+        hideOverlayImmediately()
+      }}
+      className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
+      {...(active ? { 'aria-current': 'page' } : undefined)}
+      {...(!href ? { 'tabIndex': 0 } : undefined)}
+    >
+      {icon}
+      {isTextLabel ?
+        <Text ref={ref} appearance="body2" className={`label ${overflow}`} title={textOverflow ? label : ''}>{label}</Text> :
+        label.element}
+      {badge}
+    </Link>
+  )
+}
+
+/**
+ * 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, 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])
+  const id = `menuGroup${label}`
+
+  return (
+    <>
+      <a
+        onClick={() => setOpen(!open)}
+        onKeyDown={e => e.key === 'Enter' && setOpen(!open)}
+        className={listToClass(['item-row', root && 'root'])}
+        tabIndex={0}
+        aria-controls={id}
+        aria-expanded={open}
+      >
+        {icon}
+        <Text appearance={root ? 'overheader2' : 'body2'}
+          colorScheme="light.contrastText"
+          className={`label ${overflow} ${root ? 'item-row-title' : ''}`}>
+          {label}
+        </Text>
+        {badge}
+        <IconBox sx={{ mr: root ? undefined : '5' }}>
+          <ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} />
+        </IconBox>
+      </a>
+      <MenuGroup id={id}
+        className={`${open ? 'open' : ''} ${root ? 'no-indentation' : ''}`}
+        aria-hidden={!open}>{items}</MenuGroup>
+    </>
+  )
+}
+
+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 ? <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 (
+        <Flex justifyContent="center" alignItems="center" flex={1} sx={{ padding: '40px' }}>
+          <LoadingCircular />
+        </Flex>
+      )
+    }
+    if (error) return <Text colorScheme="danger">{error}</Text>
+    return <MenuGroup className="open root no-indentation">{items}</MenuGroup>
+  }
+
+  return (
+    <>
+      {goBack && (
+        <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}
+        </Link>
+      )}
+      {title && (
+        <Title>
+          <Text appearance="overheader1" colorScheme="primary" sx={{ fontSize: '0.75rem', mt: 2, mb: 2 }}>{title}</Text>
+          {subtitle && <Text appearance="h5">{subtitle}</Text>}
+        </Title>
+      )}
+      {afterTitle}
+      {pageSelector && <PageSelector {...pageSelector} />}
+      {renderContent()}
+    </>
+  )
+}