@stack-spot/portal-layout 0.0.50 → 0.0.52

package/src/components/menu/MenuContent.tsx

@@ -1,293 +1,296 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Flex, IconBox, Text } from '@citric/core'
-import { ArrowLeft, ChevronDown } from '@citric/icons'
-import { LoadingCircular } from '@citric/ui'
-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'
-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`
-  padding: 0 0 0 16px;
-  display: flex;
-  flex-direction: column;
-  visibility: hidden;
-  transition: visibility 0s 0.3s;
-
-  &.no-indentation {
-    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;
-
-    .label {
-      flex: 1;
-      &.hidden, &.ellipsis {
-        white-space: nowrap;
-        overflow: hidden;
-      }
-      &.ellipsis {
-        text-overflow: ellipsis;
-      }
-    }
-  }
-  
-  .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;
-
-    &: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, & > li > .item-row-group > 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;
-        }
-      }
-    }
-  }
-`
-
-export const Title = 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) => {
-  const { ref, overflow: textOverflow } = useCheckTextOverflow()
-  const isTextLabel = typeof label === 'string'
-  return (
-    <a
-      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}
-    </a>
-  )
-}
-
-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="item-row"
-        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>
-    </>
-  )
-}
-
-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} />}
-    </li >
-  )
-}
-
-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])
-
-  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 && (
-        <BackLink href={goBack.href} onClick={goBack.onClick}>
-          <IconBox colorIcon="inverse.500" size="sm">
-            <ArrowLeft />
-          </IconBox>
-          {typeof goBack?.label === 'string' ?
-            <Text appearance="body2" nowrapEllipsis>{goBack.label}</Text> :
-            goBack.label.element}
-        </BackLink>
-      )}
-      {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()}
-    </>
-  )
-}
+/* eslint-disable react-refresh/only-export-components */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Flex, IconBox, Text } from '@citric/core'
+import { ArrowLeft, ChevronDown } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+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`
+  padding: 0 0 0 16px;
+  display: flex;
+  flex-direction: column;
+  visibility: hidden;
+  transition: visibility 0s 0.3s;
+
+  &.no-indentation {
+    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;
+
+    .label {
+      flex: 1;
+      &.hidden, &.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      &.ellipsis {
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  
+  .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;
+
+    &: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, & > li > .item-row-group > 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;
+        }
+      }
+    }
+  }
+`
+
+export const Title = 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) => {
+  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>
+  )
+}
+
+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="item-row"
+        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>
+    </>
+  )
+}
+
+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} />}
+    </li >
+  )
+}
+
+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])
+
+  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 && (
+        <BackLink href={goBack.href} onClick={goBack.onClick}>
+          <IconBox colorIcon="inverse.500" size="sm">
+            <ArrowLeft />
+          </IconBox>
+          {typeof goBack?.label === 'string' ?
+            <Text appearance="body2" nowrapEllipsis>{goBack.label}</Text> :
+            goBack.label.element}
+        </BackLink>
+      )}
+      {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()}
+    </>
+  )
+}