@stack-spot/portal-layout 0.0.26 → 0.0.28

package/src/components/menu/MenuContent.tsx

@@ -9,7 +9,7 @@ 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 './useCheckTextOverflow'
+import { useCheckTextOverflow } from './use-check-text-overflow'
 
 const BackLink = styled.a`
   display: flex;
@@ -69,7 +69,7 @@ export const MenuGroup = styled.ul`
         left: 2px;
         width: 2px;
         height: 0;
-        background: ${theme.color.primary['500']};
+        background: inherit;
         border-radius: 50%;
         transition: height 0.2s;
       }
@@ -82,9 +82,15 @@ export const MenuGroup = styled.ul`
         }
   
         &:before {
+          background: ${theme.color.primary['500']};
           height: 24px;
         }
       }
+
+      &:not(.active):hover:before {
+        background: ${theme.color.light.contrastText};
+        height: 24px;
+      }
     }
 
     .chevron {
@@ -135,6 +141,7 @@ export const Title = styled.header`
 
 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={active ? undefined : href}
@@ -145,9 +152,12 @@ export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow
       }}
       className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
       {...(active ? { 'aria-current': 'page' } : undefined)}
+      {...(!href ? { 'tabIndex': 0 } : undefined)}
     >
       {icon}
-      <Text ref={ref} appearance="body2" className={`label ${overflow}`} title={textOverflow ? label : ''}>{label}</Text>
+      {isTextLabel ?
+        <Text ref={ref} appearance="body2" className={`label ${overflow}`} title={textOverflow ? label : ''}>{label}</Text> :
+        label.element}
       {badge}
     </a>
   )
@@ -198,7 +208,8 @@ const GroupItem = ({ root, ...item }: ItemGroup & { root?: boolean }) => (
 )
 
 function renderOption({ root, ...option }: MenuItem & { root?: boolean }) {
-  return <li key={option.label}>{'children' in option ? <GroupItem root={root} {...option} /> : <ActionItem {...option} />}</li>
+  const labelText = typeof option.label === 'string' ? option.label : option.label.id
+  return <li key={labelText}>{'children' in option ? <GroupItem root={root} {...option} /> : <ActionItem {...option} />}</li>
 }
 
 export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle, options = [], loading, error }: MenuSectionContent) => {
@@ -223,7 +234,9 @@ export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle,
           <IconBox colorScheme="inverse" size="sm">
             <ArrowLeft />
           </IconBox>
-          <Text appearance="body2" nowrapEllipsis>{goBack.label}</Text>
+          {typeof goBack?.label === 'string' ?
+            <Text appearance="body2" nowrapEllipsis>{goBack.label}</Text> :
+            goBack.label.element}
         </BackLink>
       )}
       {title && (

package/src/components/menu/MenuSections.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { IconBox, Text } from '@citric/core'
-import { ChevronLeft, Menu as MenuIcon } from '@citric/icons'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { Flex, IconBox, Text } from '@citric/core'
+import { ChevronRight, Cog, Collapse, Menu as MenuIcon } from '@citric/icons'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useMemo, useState } from 'react'
 import { MenuContent } from './MenuContent'
 import { MenuProps, MenuSection } from './types'
+import { useKeyboardControls } from './use-keyboard-controls'
 
 const ARROW_HEIGHT = 24
 const HIDE_OVERLAY_DELAY_MS = 400
@@ -50,9 +50,12 @@ const Section = ({
   setCurrentOverlay,
   id,
   hasContent,
-}: MenuSection & { id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean }) => {
+  className,
+}: MenuSection & {
+  id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean,
+}) => {
   const contentToRender = typeof content === 'function' ? content() : content
-
+  const t = useTranslate(dictionary)
   function shouldShowOverlay() {
     /* The overlay should appear if:
      * 1. The section has some content to render OR:
@@ -63,7 +66,7 @@ const Section = ({
     return (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible())
   }
 
-  function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
     if (!shouldShowOverlay()) return
     onOpen?.()
     const rect = (event.target as HTMLElement)?.getBoundingClientRect()
@@ -80,23 +83,45 @@ const Section = ({
     hideOverlayImmediately()
   }
 
+  const labelText = typeof label === 'string' ? label : label.id
+
   return (
-    <li key={label} title={label} className={active ? 'active' : undefined}>
-      <a
-        href={href}
-        target={target}
-        onClick={click}
-        onMouseEnter={showOverlayAndFixArrowPosition}
-        onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
-        title={label}
-        aria-label={label}
-        onKeyDown={onClick ? e => e.key === 'Enter' && onClick() : undefined}
-        {...(active ? { 'aria-current': 'page' } : undefined)}
-      >
-        {icon}
-        <Text appearance="microtext1" className="section-label">{label}</Text>
-      </a>
-    </li>
+    <>
+      <li key={labelText} title={labelText} className={`section-submenu ${className || ''} ${active ? 'active' : ''}`}>
+        <a
+          href={href}
+          target={target}
+          onClick={click}
+          onMouseEnter={showOverlayAndFixArrowPosition}
+          onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
+          title={labelText}
+          aria-label={labelText}
+          onKeyDown={onClick ? e => e.key === 'Enter' && onClick() : undefined}
+          {...(active ? { 'aria-current': 'page' } : undefined)}
+          {...(!href ? { 'tabIndex': 0 } : undefined)}
+        >
+          <Flex alignItems="center" justifyContent="center" px={5}>
+            {icon}
+            {typeof label === 'string' ? <Text appearance="body2" className="section-label" ml={2}>{label}</Text> : label.element}
+          </Flex>
+        </a>
+        {shouldShowOverlay() &&
+          <IconBox size="sm" className="section-submenu-icon"
+            as="button"
+            aria-label={interpolate(t.menuOptions, label)}
+            aria-controls={MENU_OVERLAY_ID}
+            aria-expanded={document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible')}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                showOverlayAndFixArrowPosition(event)
+              }
+            }
+            }>
+            <ChevronRight />
+          </IconBox>
+        }
+      </li>
+    </>
   )
 }
 
@@ -104,15 +129,17 @@ const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content'
   if (customContent) {
     return <> {customContent} </>
   }
-  
+
   const data = typeof content === 'function' ? content() : content
-  return <div><MenuContent {...data} /></div>
+  return <MenuContent {...data} />
 }
 
 export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   const t = useTranslate(dictionary)
   // this is a mock state only used to force an update on the component.
   const [_, setUpdate] = useState(0)
+  const onHide = () => hideOverlay()
+
   const toggleMenu = useCallback(() => {
     const layout = document.getElementById('layout')
     if (!layout) return
@@ -132,6 +159,20 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
     [sections],
   )
 
+  function onPressEscape() {
+    hideOverlay()
+    const items = document.getElementsByClassName('section-submenu')
+    if (!!items && !!currentOverlay && items.length > currentOverlay && items[currentOverlay].children.length > 1) {
+      (items[currentOverlay].children[1] as HTMLElement).focus()
+    }
+  }
+
+  const wrapper = useKeyboardControls({
+    onHide, visible: document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible') || false,
+    querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
+    onPressEscape: () => onPressEscape(),
+  })
+
   /* 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
@@ -139,26 +180,43 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   hook, this would cause some serious problems. */
   function renderMenuOverlay() {
     if (currentOverlay === undefined) return null
-    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active && 
+    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
       (!!props.content || !!props.customContent)
     return shouldRenderMenuContentInstead
       ? <OverlayRenderer key={'contentKey' in props ? props.contentKey : undefined} content={props.content}
         customContent={props.customContent} />
-      : <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content} 
+      : <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content}
         customContent={sections[currentOverlay].customContent} />
   }
 
   return (
     <>
       <ul>{sectionItems}</ul>
-      {(!!props.content || !!props.customContent) && 
-        <button className="toggle" onClick={toggleMenu} title={t.toggle} tabIndex={-1} aria-hidden>
-          <IconBox>
-            <MenuIcon className="expand" />
-            <ChevronLeft className="collapse" />
-          </IconBox>
-        </button>}
-      <div id="menuContentOverlay" onMouseEnter={showOverlay} onMouseLeave={hideOverlay}>
+
+      {(!!props.content || !!props.customContent || props.settings?.show) &&
+        <Flex mb={7} alignItems="center" justifyContent="center">
+          {(!!props.content || !!props.customContent) &&
+            <button className="toggle sections-footer" onClick={toggleMenu} title={t.toggle} tabIndex={-1} aria-hidden>
+              <IconBox>
+                <MenuIcon className="expand" />
+                <Collapse className="collapse" />
+              </IconBox>
+            </button>}
+          {(props.settings?.show) &&
+            <a href={props.settings?.href} onClick={props.settings?.onClick}
+              className="sections-footer"
+              {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
+              <Flex alignItems="center" justifyContent="center">
+                <IconBox aria-label={t.settingsIcon}>
+                  <Cog />
+                </IconBox>
+                <Text appearance="body2" ml={2}>{t.settings}</Text>
+              </Flex>
+            </a>
+          }
+        </Flex>
+      }
+      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={wrapper}>
         {renderMenuOverlay()}
         <div className="arrow"></div>
       </div>
@@ -169,8 +227,14 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
 const dictionary = {
   en: {
     toggle: 'Show or hide the menu',
+    menuOptions: 'View $0 menu options',
+    settings: 'Settings',
+    settingsIcon: 'Settings icon',
   },
   pt: {
     toggle: 'Visualizar ou esconder o menu',
+    menuOptions: 'Visualizar opções do menu $0',
+    settings: 'Configurações',
+    settingsIcon: 'Icone de configurações',
   },
 } satisfies Dictionary

package/src/components/menu/PageSelector.tsx

@@ -8,7 +8,7 @@ import { styled } from 'styled-components'
 import { ListAction, SelectionList } from '../SelectionList'
 import { MENU_CONTENT_PADDING as PADDING } from './constants'
 import { Selector } from './types'
-import { useCheckTextOverflow } from './useCheckTextOverflow'
+import { useCheckTextOverflow } from './use-check-text-overflow'
 
 const SelectorBox = styled.div`
   position: relative;
@@ -96,13 +96,16 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
     },
     [options, value, button],
   )
-  
+
   const label = selected?.label ?? button?.label ?? value
+  const isTextLabel = typeof label == 'string'
+  const labelText = typeof label === 'string' ? label : label.id
+  const buttonLabelText = typeof button?.label == 'string' ? button?.label : button?.label.id
 
   return (
     <SelectorBox>
       {loading
-        ? <LoadingCircular /> 
+        ? <LoadingCircular />
         : (
           <>
             {title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
@@ -116,7 +119,9 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
               aria-controls={id.current}
             >
               {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
-              <Text ref={ref} appearance="body2" className="label" title={overflow ? label : ''}>{label}</Text>
+              {isTextLabel ?
+                <Text ref={ref} appearance="body2" className="label" title={overflow ? labelText : ''}>{labelText}</Text> :
+                label.element}
               <IconBox size="xs"><Select /></IconBox>
             </a>
 
@@ -125,7 +130,7 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
               visible={visible}
               items={optionsWithIcon}
               onHide={() => setVisible(false)}
-              after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{button.label}</a> : undefined}
+              after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{buttonLabelText}</a> : undefined}
               scroll
             />
           </>

package/src/components/menu/types.ts

@@ -76,12 +76,20 @@ export interface MenuSection extends Action {
   customContent?: ReactNode,
   active?: boolean,
   onOpen?: () => void,
+  className?: string,
 }
 
 interface BaseMenuProps {
   sections?: MenuSection[],
   compact?: boolean,
   customContent?: ReactNode,
+  settings?: {
+    show?: boolean,
+    onClick?: () => void,
+    href?: string,
+    active?: boolean,
+    className?: string,
+  },
 }
 
 export interface MenuPropsWithStaticContent extends BaseMenuProps {

package/src/components/menu/{useCheckTextOverflow.tsx → use-check-text-overflow.tsx}

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react'
 
 export function useCheckTextOverflow() {
   const [overflow, setOverflow] = useState<boolean>(false)
@@ -23,4 +23,4 @@ export function useCheckTextOverflow() {
   }, [ref.current])
 
   return { overflow, ref }
-}
+}

package/src/components/menu/use-keyboard-controls.tsx

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+interface Props {
+  onHide?: () => void,
+  visible: boolean,
+  querySelectors: string,
+  onPressEscape?: () => void,
+}
+
+export function useKeyboardControls({ onHide, visible, querySelectors, onPressEscape }: Props) {
+  const wrapper = useRef<HTMLDivElement>(null)
+
+  const onRemoveListeners = () =>{
+    document.removeEventListener('keydown', keyboardControls)
+    document.removeEventListener('click', hide)
+  }
+
+  const keyboardControls = useCallback((event: KeyboardEvent) => {
+    const target = event?.target as HTMLElement | null
+
+    function getSelectableAnchors() {
+      return wrapper.current?.querySelectorAll(querySelectors) ?? []
+    }
+
+    function handleArrows(key = event.key) {
+      
+      const anchors = getSelectableAnchors()
+      let i = 0
+      while (i < anchors.length && document.activeElement !== anchors[i]) i++
+      const next: any = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
+      next?.focus?.()
+    }
+      
+    const handlers: Record<string, (() => void) | undefined> = {
+      Escape: () => {
+        onPressEscape?.()
+        onHide?.()
+        onRemoveListeners()
+      },
+      Enter: () => {
+        target?.click()
+      },
+      Tab: () => {
+        const anchors = getSelectableAnchors()
+        if (document.activeElement === anchors[anchors.length - 1]) onHide?.()
+        else {
+          handleArrows('ArrowDown')
+          event.preventDefault()
+        }
+      },
+      ArrowUp: () => {
+        handleArrows()
+      },
+      ArrowDown: () => {
+        handleArrows()
+      },
+    }
+
+    handlers[event.key]?.()
+  }, [onPressEscape, visible])
+
+  const hide = useCallback((event: Event) => {
+    const target = (event.target as HTMLElement | null)
+    // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
+    const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
+    const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
+    if (!isClickInsideSelectionList || isAction) onHide?.()
+  }, [])
+
+  useEffect(() => {
+    if (visible) {
+      document.addEventListener('keydown', keyboardControls)
+      document.addEventListener('keydown', keyboardControls)
+      if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
+    }
+    else {
+      onRemoveListeners() 
+    }
+  
+    return () => {
+      // Remove the event listener
+      document.removeEventListener('keydown', keyboardControls)
+      document.removeEventListener('click', hide)
+    }
+  }, [visible, keyboardControls])
+
+  return wrapper
+}

package/src/components/types.ts

@@ -1,7 +1,11 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 
+interface CustomLabel {
+  id: string,
+  element: ReactNode,
+}
 export interface Action {
-  label: string,
+  label: string | CustomLabel,
   onClick?: () => void,
   href?: string,
   target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'],

package/src/layout.css

@@ -39,7 +39,7 @@ body {
 
 #layout {
   --header-height: 56px;
-  --menu-sections-width: 87px;
+  --menu-sections-width: 135px;
   --menu-content-width: 233px;
   --menu-item-height: 74px;
   --modal-animation-duration: 0.3s;
@@ -50,7 +50,7 @@ body {
 }
 
 #layout.menu-compact {
-  --menu-sections-width: 56px;
+  --menu-sections-width: 135px;
   --menu-item-height: 56px;
 }
 
@@ -147,8 +147,8 @@ body {
   position: relative;
 }
 
-#layout.menu-compact .section-label {
-  display: none;
+#menuSections .sections-footer {
+  padding: 16px;
 }
 
 #menuSections .toggle,
@@ -161,7 +161,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   transition: background-color 0.2s;
   cursor: pointer;
@@ -175,7 +175,6 @@ body {
   height: 24px;
   transform: scaleY(0);
   transition: transform ease-in 0.2s;
-  background-color: var(--primary-500);
   border-radius: 50%;
   left: 0;
 }
@@ -186,6 +185,7 @@ body {
 
 #menuSections > ul li.active a:before {
   transform: scaleY(1);
+  background-color: var(--primary-500);
 }
 
 #menuSections .toggle:hover,
@@ -195,6 +195,11 @@ body {
   background: var(--light-500);
 }
 
+#menuSections > ul li:not(.active) a:hover:before {
+  transform: scaleY(1); 
+  background-color: var(--light-contrastText);
+}
+
 #menuSections .toggle i {
   position: relative;
 }
@@ -430,3 +435,19 @@ i {
   height: 0;
   overflow: hidden;
 }
+
+#menuSections .section-submenu {
+  position: relative;
+}
+
+#menuSections .section-submenu-icon {
+  opacity: 0;
+  position: absolute;
+  top: 27%;
+  right: 10px;
+  background-color: inherit;
+}
+
+#menuSections .section-submenu-icon:focus-visible {
+  opacity: 1; 
+}