@stack-spot/portal-layout 0.0.64 → 1.0.0-dev.1768482785050

package/src/components/menu/MenuSections.tsx

@@ -1,32 +1,62 @@
-import { Flex, IconBox, Text } from '@citric/core'
-import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons'
-import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useMemo, useState } from 'react'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// todo: remove unused code as soon as this is validated by the design team: "remove overlays on hover".
+import { Box, Flex, IconBox, Text } from '@citric/core'
+import { ChevronUpFill, Cog, Collapse, Expand, Support } from '@citric/icons'
+import { ReactTooltip } from '@citric/ui'
+import { useKeyboardControls } from '@stack-spot/portal-components'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { listToClass } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { elementIds, getLayoutElements } from '../../elements'
-import { useAnchorTag } from '../../layout-context'
+import { StarFillWithGradient } from '../../svg/StarFillWithGradient'
+import { isLessThan30Days } from '../Rate/hook'
 import { MenuContent } from './MenuContent'
+import { MenuSectionGroup } from './MenuSectionGroup'
 import { MenuProps, MenuSection } from './types'
-import { useKeyboardControls } from './use-keyboard-controls'
 
+/**
+ * Amount of time to wait before hiding the menu overlay once the mouse leaves its area.
+ */
 const HIDE_OVERLAY_DELAY_MS = 400
 const MENU_OVERLAY_ID = 'menuContentOverlay'
 
+/**
+ * Pointer to the latest "hideOverlay" task. This allows the operation to be cancelled.
+ */
 let hideOverlayTask: number | undefined
 
-// fixme: this should definitely not be handled like this...
+/**
+ * Accessibility. Makes the menu overlay accessible through the keyboard.
+ */
 let attachKeyboardListenersForOverlay: () => void
+/**
+ * Accessibility. Makes the menu overlay invisible to the keyboard.
+ */
 let detachKeyboardListenersForOverlay: () => void
 
+/**
+ * Hides the menu overlay after HIDE_OVERLAY_DELAY_MS. This operation may be canceled.
+ * 
+ * This gives the user some time to move the mouse outside the overlay for while before it disappears. If the user moves the mouse out of
+ * the overlay and, before HIDE_OVERLAY_DELAY_MS, moves the mouse back, we want the overlay to keep showing.
+ */
+// @ts-ignore: unused (remove when validated by the design team)
 function hideOverlay() {
   if (hideOverlayTask !== undefined) return
   hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS)
 }
 
+/**
+ * Accessibility. Returns the accessibility button of the section with the preview (overlay) currently active. 
+ */
 function getAccessibilityButtonOfSectionWithActiveOverlay(): HTMLElement | null | undefined {
   return document.getElementById(elementIds.menuSections)?.querySelector('button[aria-expanded="true"]')
 }
 
-// eslint-disable-next-line react-refresh/only-export-components
+/**
+ * Hides the menu overlay without waiting for anything. This is not cancellable.
+ */
 export function hideOverlayImmediately() {
   detachKeyboardListenersForOverlay?.()
   const overlay = document.getElementById(MENU_OVERLAY_ID)
@@ -36,12 +66,18 @@ export function hideOverlayImmediately() {
   getAccessibilityButtonOfSectionWithActiveOverlay()?.setAttribute('aria-expanded', 'false')
 }
 
+/**
+ * If `hideOverlay` was called and not fulfilled yet, this cancels the task, preventing the overlay from closing.
+ */
 function cancelHideOverlayTask() {
   if (hideOverlayTask === undefined) return
   clearTimeout(hideOverlayTask)
   hideOverlayTask = undefined
 }
 
+/**
+ * Shows the menu overlay.
+ */
 function showOverlay() {
   cancelHideOverlayTask()
   const overlay = document.getElementById(MENU_OVERLAY_ID)
@@ -51,10 +87,23 @@ function showOverlay() {
   attachKeyboardListenersForOverlay?.()
 }
 
+/**
+ * Checks if the menu content (2nd menu list from left to right) is visible or not.
+ * The menu content is visible if:
+ * 1. The menu is not compact (the button at the end of the section list compacts/expands the menu);
+ * 2. If the current section has any menu content.
+ */
 function isMenuContentVisible() {
-  return !!document.getElementById('layout')?.classList?.contains('menu-content-visible')
+  return !!document.getElementById(elementIds.layout)?.classList?.contains('menu-content-visible')
 }
 
+/**
+ * A section in the the menu-sections.
+ * 
+ * A section in the menu is responsible for rendering the section icon, label, accessibility button and controlling the menu overlay.
+ * @param props React props for the component {@link MenuSection} & { id, setCurrentOverlay }. Id identifies the current section and
+ * setCurrentOverlay controls the overlay (preview) content.
+ */
 const Section = ({
   icon,
   label,
@@ -64,31 +113,32 @@ const Section = ({
   active,
   content,
   customContent,
-  onOpen,
   setCurrentOverlay,
   id,
-  hasContent,
-  className,
+  badge,
 }: MenuSection & {
-  id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean,
+  id: number,
+  setCurrentOverlay: (id: number | undefined) => void,
+  hasContent: boolean,
 }) => {
   const Link = useAnchorTag()
+  // const t = useTranslate(dictionary)
   const contentToRender = typeof content === 'function' ? content() : content
-  const t = useTranslate(dictionary)
+
   function shouldShowOverlay() {
     /* The overlay should appear if:
-     * 1. The menu is compacted showing only the icons 
+     * 1. The menu is compacted showing only the icons
      * 2. The section has some content to render OR:
-     * 3. The section is active and there is a contextual menu for the active page.
+     * 3. There is a contextual menu for the active page.
      */
     const { layout } = getLayoutElements()
     const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
-    return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active))
+    return isCompactedOnlyIcons && (!!contentToRender || !!customContent)
   }
 
+  // @ts-ignore: unused (remove when validated by the design team)
   function prepareShowOverlay(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
     if (!shouldShowOverlay()) return
-    onOpen?.()
     const anchorElement = event.target as HTMLElement
     const accessibilityButton = anchorElement?.parentElement?.querySelector('button') as HTMLElement
     accessibilityButton?.setAttribute('aria-expanded', 'true')
@@ -99,94 +149,162 @@ const Section = ({
   function click() {
     if (onClick) onClick()
     hideOverlayImmediately()
+    const classList = document.getElementById(elementIds.layout)?.classList
+    if (!classList) return
+    classList.remove('menu-manual')
   }
 
   const labelText = typeof label === 'string' ? label : label.id
 
   return (
     <>
-      <li
-        role="menuitem"
-        key={labelText}
-        title={labelText}
-        className={`section-submenu ${className || ''} ${active ? 'active' : ''}`}
-        aria-selected={active}>
-        <Link
-          href={href}
-          target={target}
-          onClick={click}
-          onMouseEnter={prepareShowOverlay}
-          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)}
+      <Link
+        href={href}
+        target={target}
+        onClick={click}
+        // onMouseEnter={prepareShowOverlay}
+        // onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
+        aria-label={labelText}
+        onKeyDown={onClick ? e => e.key === 'Enter' && onClick() : undefined}
+        {...(active ? { 'aria-current': 'page' } : undefined)}
+        {...(!href ? { 'tabIndex': 0 } : undefined)}
+      >
+        <ReactTooltip
+          text={labelText}
+          position="right"
+          tabIndex={-1}
+          target={document.getElementById(elementIds.layout)}
+          disableTooltip={() => !document.getElementById(elementIds.layout)}
+          sx={{ width: 'inherit' }}
         >
-          <Flex alignItems="center" justifyContent="center" px={5}>
-            <IconBox>{icon}</IconBox>
-            {typeof label === 'string' ? <Text appearance="microtext1" className="section-label" ml={3}>{label}</Text> : label.element}
+          <Flex alignItems="center" justifyContent="center" flexWrap="nowrap" px={3} w="100%">
+            <IconBox className={badge ? 'section-icon-with-badge' : 'section-icon'}>
+              {icon}
+            </IconBox>
+            <Flex alignItems="center" justifyContent="space-between" w="100%" className="section-text">
+              {typeof label === 'string' ? (
+                <Text appearance="microtext1" className="section-label" ml={3}>
+                  {label}
+                </Text>
+              ) : (label.element)}
+              {badge && <Box className="section-badge">{badge}</Box>}
+            </Flex>
           </Flex>
-        </Link>
-        {shouldShowOverlay() &&
-          <IconBox size="sm" className="section-submenu-icon"
-            as="button"
-            aria-label={interpolate(t.menuOptions, label)}
-            aria-controls={MENU_OVERLAY_ID}
-            aria-expanded={false}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                prepareShowOverlay(event)
-              }
-            }}>
-            <ChevronRight />
-          </IconBox>
-        }
-      </li>
+        </ReactTooltip>
+      </Link>
+      {/*shouldShowOverlay() &&
+        <IconBox size="sm" className="section-submenu-icon"
+          as="button"
+          aria-label={interpolate(t.menuOptions, label)}
+          aria-controls={MENU_OVERLAY_ID}
+          aria-expanded={false}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              prepareShowOverlay(event)
+            }
+          }}>
+          <ChevronRight />
+        </IconBox>
+      */}
     </>
   )
 }
 
+/**
+ * Renders the overlay content.
+ * @param props the content of the overlay, can be either customized (react component), a config object or a function that creates the
+ * config object.
+ * @returns the content
+ */
 const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content' | 'customContent'>) => {
   if (customContent) {
-    return <div id="custom-selectable-item"> {customContent} </div>
+    return <div id="custom-selectable-item">{customContent}</div>
   }
 
   const data = typeof content === 'function' ? content() : content
   return <MenuContent {...data} />
 }
 
+/**
+ * Renders a menu-sections interface.
+ * 
+ * Considering the Stackspot UI, this is the "menu sections", not the "menu content", i.e. it's the first menu from left to right, the
+ * one with the icons and section names: the main menu.
+ * 
+ * Attention: each section in the menu is identified by its index. To avoid errors, the array passed to this component must never change.
+ * To control whether or not to show an item, use the property `hidden`, instead of adding/removing it to the array. Example of error:
+ * start the section menu with 5 items, remove the 5th item and add another item. The previous 5th item and the new 5th items are different,
+ * but since we identify the item by its index, the two different sections will be rendered as if they were the same, causing a react hook
+ * call order problem.
+ * 
+ * @param props the props for the component {@link MenuProps}.
+ */
 export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   const Link = useAnchorTag()
+  const [showSupport, setShowSupport] = useState(true)
   const t = useTranslate(dictionary)
   // this is a mock state only used to force an update on the component.
   const [_, setUpdate] = useState(0)
 
-  const toggleMenu = useCallback((hasContent: boolean) => {
+  const toggleMenu = useCallback(() => {
     const layout = document.getElementById('layout')
     if (!layout) return
     if (layout.classList.contains('menu-compact')) {
       layout.classList.remove('menu-compact')
+      setShowSupport(true)
     } else {
       layout.classList.add('menu-compact')
+      setShowSupport(false)
     }
 
-    if (hasContent) {
-      if (layout.classList.contains('menu-content-visible')) {
-        layout.classList.remove('menu-content-visible')
-      } else {
-        layout.classList.add('menu-content-visible')
-      }
-    }
+    layout.classList.add('menu-manual')
+
     setUpdate(current => current + 1)
   }, [])
   // 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>()
 
+  //Custom items don't have overlay.
+  const sectionsWithoutCustom = useMemo(() => sections.filter((s) => !s.type), [sections]) as MenuSection[]
+  const sectionItemsOverlay = useMemo(
+    () => sectionsWithoutCustom.flatMap((s: MenuSection) => 'children' in s ? s.children?.map((c) => c) : s), [sectionsWithoutCustom],
+  )
+
   const sectionItems = useMemo(
-    () => sections.filter(s => !s.hidden).map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay}
-      hasContent={!!props.content || !!props.customContent} />),
-    [sections],
+    () => sections.reduce<JSX.Element[]>(
+      (result, s, i) => {
+        if (s.label === t.contactUs && !showSupport) {
+          return result
+        }
+        if (s.type) {
+          return (s.hidden ? result : [
+            ...result, <Box key={`custom-element-${i}`}
+              className={s.className || ''}>
+              <Flex alignItems="center" justifyContent="center" flexWrap="nowrap" px={3} w="100%">
+                <IconBox className="custom-element-icon section-icon" >{s.icon}</IconBox>
+              </Flex>
+              <Box className="custom-element">
+                {s.children}
+              </Box>
+            </Box>,
+          ])
+        }
+        return (s.hidden ? result : [
+          ...result,
+          <li
+            role="menuitem"
+            key={s.label as string}
+            className={listToClass(['section-submenu', 'no-indentation', s.className || undefined, s.active ? 'active' : undefined])}>
+            {'children' in s
+              ? <CollapsibleSection listItems={sectionItemsOverlay} {...s} setCurrentOverlay={setCurrentOverlay} />
+              : <Section key={i} id={sectionItemsOverlay.findIndex((sio) => sio?.label === s.label)}
+                {...s} setCurrentOverlay={setCurrentOverlay} hasContent={!!props.content || !!props.customContent} />}
+          </li>,
+        ])
+
+      }, [],
+    ),
+    [sections, showSupport],
   )
 
   function onPressEscape() {
@@ -194,12 +312,14 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
     hideOverlayImmediately()
   }
 
+  // @ts-ignore: unused (remove when validated by the design team)
   const { keyboardControlledElement: overlayRef, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls({
     onPressEscape,
     querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
   })
 
-  // fixme: this should definitely not be handled like this...
+  // this only works because we have a single section menu in the site. This workaround was created since the keyboard controls were
+  // transformed into a hook. This is not ideal and it would be a good idea to rewrite this code without the need for this.
   attachKeyboardListenersForOverlay = attachKeyboardListeners
   detachKeyboardListenersForOverlay = detachKeyboardListeners
 
@@ -208,63 +328,192 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   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. */
+  // @ts-ignore: unused (remove when validated by the design team)
   function renderMenuOverlay() {
     if (currentOverlay === undefined) return null
-    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
+    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sectionItemsOverlay[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}
-        customContent={sections[currentOverlay].customContent} />
+      : <OverlayRenderer key={currentOverlay} content={sectionItemsOverlay[currentOverlay]?.content}
+        customContent={sectionItemsOverlay[currentOverlay]?.customContent} />
   }
 
   return (
     <>
-      <ul>{sectionItems}</ul>
-
-      <Flex mb={7} alignItems="center">
-        <button className="toggle sections-footer" onClick={() => toggleMenu(!!props.content || !!props.customContent)}
-          title={t.toggle} tabIndex={-1}>
-          <IconBox>
-            <Expand className="expand" />
-            <Collapse className="collapse" />
-          </IconBox>
-          <Text appearance="microtext1" ml={8} className="collapse" colorScheme="light.contrastText">{t.hide}</Text>
-        </button>
+      <MenuSectionGroup className="open root no-indentation">{sectionItems}</MenuSectionGroup>
+
+      <Flex alignItems="center">
+        <RateAndContactUsItem {...props} showSupport={showSupport} />
+        <ReactTooltip
+          text={t.toggle}
+          position="right"
+          tabIndex={-1}
+          disableTooltip={() => !document.getElementById(elementIds.layout)}
+          target={document.getElementById(elementIds.layout)}
+          sx={{ width: 'inherit' }}
+        >
+          <button aria-label={t.toggle} role="menuitem" className="toggle sections-footer" onClick={toggleMenu}>
+            <IconBox>
+              <Expand className="expand" />
+              <Collapse className="collapse" />
+            </IconBox>
+            <Text appearance="microtext1" ml={8} className="collapse" colorScheme="light.contrastText">{t.hide}</Text>
+          </button>
+        </ReactTooltip>
         {(props.settings?.show) &&
-          <Link href={props.settings?.href} onClick={props.settings?.onClick}
+          <Link
+            href={props.settings?.href}
+            onClick={props.settings?.onClick}
             className="sections-footer toggle"
-            {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
-            <IconBox aria-label={t.settingsIcon}>
-              <Cog />
-            </IconBox>
-            <Text appearance="microtext1"  ml={8} className="collapse">{t.settings}</Text>
+            aria-label={t.settings}
+            {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}
+          >
+            <ReactTooltip
+              text={t.settings}
+              position="right"
+              tabIndex={-1}
+              disableTooltip={() => !document.getElementById(elementIds.layout)}
+              target={document.getElementById(elementIds.layout)}
+              sx={{ width: 'inherit' }}
+            >
+              <IconBox aria-label={t.settingsIcon}>
+                <Cog />
+              </IconBox>
+              <Text appearance="microtext1" ml={8} className="collapse">{t.settings}</Text>
+            </ReactTooltip>
           </Link>
         }
       </Flex>
 
-      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={overlayRef}>
+      {/* <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={overlayRef}>
         {renderMenuOverlay()}
-        <div className="arrow"></div>
-      </div>
+      </div> */}
+    </>
+  )
+}
+
+const RateAndContactUsItem = ({ showSupport, ...props }: Omit<MenuProps, 'sections'> & { showSupport?: boolean }) => {
+  const t = useTranslate(dictionary)
+  const alreadyAnswered = localStorage.getItem('RATED_US_IN')
+  const hasAnsweredLess30Days = alreadyAnswered ? isLessThan30Days(new Date(+alreadyAnswered), new Date(Date.now())) : false
+  const Link = useAnchorTag()
+
+  //This effect is only used to remove from local storage unused keys from 
+  //previous rate us and contact us versions. We do not want to fill the users storage
+  //with things that are not used anymore.
+  useEffect(() => {
+    localStorage.removeItem('CONTACT_POPOVER')
+    localStorage.removeItem('RATE_POPOVER')
+    localStorage.removeItem('viewNpsItem')
+  }, [])
+
+  return <>
+    {(props.rateUs?.show && !hasAnsweredLess30Days) &&
+      <button role="menuitem" className="toggle sections-footer" onClick={props.rateUs?.onClick}
+        {...(props.rateUs.active ? { 'aria-current': 'page' } : undefined)}>
+        <IconBox aria-label={t.rateUsIcon} sx={{ paddingTop: '2px' }}>
+          <StarFillWithGradient id="svg-icon" className="gradient-svg rotate-icon" />
+        </IconBox>
+        <Text appearance="microtext1" ml={8} sx={{ marginTop: '3px' }}
+          className="collapse gradient grow-shrink" colorScheme="light.contrastText">{t.rateUs}</Text>
+      </button>
+    }
+    {(props.contactUs?.show && showSupport) && (
+      <Link href={props.contactUs?.href} className="toggle sections-footer" onClick={props.contactUs?.onClick}
+        {...(props.contactUs.active ? { 'aria-current': 'page' } : undefined)} target={props.contactUs?.target}>
+        <IconBox aria-label={t.contactIcon}>
+          <Support />
+        </IconBox>
+        <Text appearance="microtext1" ml={8} sx={{ marginTop: '3px' }}
+          className="collapse" colorScheme="light.contrastText">{t.contactUs}</Text>
+      </Link>
+    )}
+  </>
+}
+
+/**
+ * A menu item that is actually a subgroup and can be collapsed/expanded.
+ * @param props the props for the component {@link MenuSectionGroup}. 
+ */
+const CollapsibleSection = (
+  { label, open: initialValue, children, icon, setCurrentOverlay, listItems, replaceWithChildrenWhenCollapsed = true }: (
+    MenuSection & { setCurrentOverlay: (id: number | undefined) => void, listItems: (MenuSection | undefined)[] }
+  )) => {
+  const [open, setOpen] = useState(initialValue || false)
+  const menuGroupId = `menuGroup${label}`
+  const items = useMemo(() => children?.filter(i => !i.hidden).map(
+    (c) => (
+      <li
+        role="menuitem"
+        key={c.label as string}
+        title={c.label as string}
+        className={`section-submenu ${c.className} ${c.active ? 'active' : ''}`}>
+        <Section
+          id={listItems?.findIndex((item) => item?.label === c.label)} key={c.label as string}
+          {...c} hasContent={false} setCurrentOverlay={setCurrentOverlay} />
+      </li>
+    )), [children])
+
+  return (
+    <>
+      <a
+        onClick={() => setOpen(!open)}
+        onKeyDown={e => e.key === 'Enter' && setOpen(!open)}
+        className={listToClass(['item-row', replaceWithChildrenWhenCollapsed && 'hidden-when-collapsed'])}
+        tabIndex={0}
+        aria-controls={menuGroupId}
+        aria-expanded={open}
+      >
+        <ReactTooltip
+          text={label as string}
+          position="right"
+          tabIndex={-1}
+          target={document.getElementById(elementIds.layout)}
+          sx={{ width: 'inherit' }}
+        >
+          <Flex alignItems="center" px={3} style={{ width: '100%' }}>
+            <IconBox className="section-icon">{icon}</IconBox>
+            <Text appearance="microtext1" className="section-label" ml={3} colorScheme="light.contrastText">
+              {label as string}
+            </Text>
+            <IconBox style={{ marginLeft: 'auto' }} className="chevron-icon-box">
+              <ChevronUpFill className={listToClass(['chevron', open ? 'open' : ''])} />
+            </IconBox>
+          </Flex>
+        </ReactTooltip>
+      </a>
+      <MenuSectionGroup id={menuGroupId}
+        className={`${open ? 'open' : ''} root no-indentation`}
+        aria-hidden={!open}>
+        {items}
+      </MenuSectionGroup>
     </>
   )
 }
 
 const dictionary = {
   en: {
-    toggle: 'Show or hide the menu',
+    toggle: 'Collapse or expand the menu',
     menuOptions: 'View $0 menu options',
     settings: 'Settings',
     settingsIcon: 'Settings icon',
     hide: 'Hide',
+    contactUs: 'Support',
+    contactIcon: 'Contact icon',
+    rateUs: 'Rate us',
+    rateUsIcon: 'Rate us icon',
   },
   pt: {
-    toggle: 'Visualizar ou esconder o menu',
+    toggle: 'Contrair ou expandir o menu',
     menuOptions: 'Visualizar opções do menu $0',
     settings: 'Configurações',
-    settingsIcon: 'Icone de configurações',
+    settingsIcon: 'Ícone de configurações',
     hide: 'Esconder',
+    contactUs: 'Suporte',
+    contactIcon: 'Ícone de contato',
+    rateUs: 'Avalie-nos',
+    rateUsIcon: 'Avalie-nos icon',
   },
 } satisfies Dictionary

package/src/components/menu/PageSelector.tsx

@@ -1,15 +1,15 @@
 import { IconBox, Text } from '@citric/core'
 import { ArrowRight, Select } from '@citric/icons'
 import { LoadingCircular } from '@citric/ui'
+import { useCheckTextOverflow } from '@stack-spot/portal-components'
+import { ListAction, SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { KeyboardEvent, useMemo, useRef, useState } from 'react'
 import { styled } from 'styled-components'
-import { useAnchorTag } from '../../layout-context'
-import { ListAction, SelectionList } from '../SelectionList'
 import { MENU_CONTENT_PADDING as PADDING } from './constants'
 import { Selector } from './types'
-import { useCheckTextOverflow } from './use-check-text-overflow'
 
 const SelectorBox = styled.div`
   position: relative;
@@ -81,6 +81,11 @@ const SelectorBox = styled.div`
   }
 `
 
+/**
+ * A selector component to render inside a menu-content. Allows the user to select another page.
+ * 
+ * @param props the React props for the component {@link Selector}.
+ */
 export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
   const Link = useAnchorTag()
   const t = useTranslate(dictionary)
@@ -113,7 +118,13 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
         ? <LoadingCircular />
         : (
           <>
-            {title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
+            {title && <Text 
+              colorScheme="light.700" 
+              sx={{ mb: 3 }}
+              id="pageSelectorTitle"
+              aria-label={title}>
+              {title}
+            </Text>}
             <button
               onClick={() => setVisible(true)}
               onKeyDown={(e: KeyboardEvent<HTMLButtonElement>) => e.key === 'Enter' && setVisible(true)}
@@ -123,6 +134,7 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
               aria-expanded={visible}
               aria-controls={id.current}
               aria-haspopup="listbox"
+              aria-labelledby="pageSelectorTitle"
             >
               {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
               {isTextLabel ?