@stack-spot/portal-layout 0.0.49 → 0.0.51

package/src/components/menu/MenuSections.tsx

@@ -1,268 +1,270 @@
-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'
-import { getLayoutElements } from '../../elements'
-import { elementIds } from '../../elements'
-import { MenuContent } from './MenuContent'
-import { MenuProps, MenuSection } from './types'
-import { useKeyboardControls } from './use-keyboard-controls'
-
-const HIDE_OVERLAY_DELAY_MS = 400
-const MENU_OVERLAY_ID = 'menuContentOverlay'
-
-let hideOverlayTask: number | undefined
-
-// fixme: this should definitely not be handled like this...
-let attachKeyboardListenersForOverlay: () => void
-let detachKeyboardListenersForOverlay: () => void
-
-function hideOverlay() {
-  if (hideOverlayTask !== undefined) return
-  hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS)
-}
-
-function getAccessibilityButtonOfSectionWithActiveOverlay(): HTMLElement | null | undefined {
-  return document.getElementById(elementIds.menuSections)?.querySelector('button[aria-expanded="true"]')
-}
-
-// eslint-disable-next-line react-refresh/only-export-components
-export function hideOverlayImmediately() {
-  detachKeyboardListenersForOverlay?.()
-  const overlay = document.getElementById(MENU_OVERLAY_ID)
-  overlay?.setAttribute('inert', '')
-  overlay?.setAttribute('aria-hidden', '')
-  overlay?.classList.remove('visible')
-  getAccessibilityButtonOfSectionWithActiveOverlay()?.setAttribute('aria-expanded', 'false')
-}
-
-function cancelHideOverlayTask() {
-  if (hideOverlayTask === undefined) return
-  clearTimeout(hideOverlayTask)
-  hideOverlayTask = undefined
-}
-
-function showOverlay() {
-  cancelHideOverlayTask()
-  const overlay = document.getElementById(MENU_OVERLAY_ID)
-  overlay?.removeAttribute('inert')
-  overlay?.removeAttribute('aria-hidden')
-  overlay?.classList.add('visible')
-  attachKeyboardListenersForOverlay?.()
-}
-
-function isMenuContentVisible() {
-  return !!document.getElementById('layout')?.classList?.contains('menu-content-visible')
-}
-
-const Section = ({
-  icon,
-  label,
-  href,
-  target,
-  onClick,
-  active,
-  content,
-  customContent,
-  onOpen,
-  setCurrentOverlay,
-  id,
-  hasContent,
-  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 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.
-     */
-    const { layout } = getLayoutElements()
-    const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
-    return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active))
-  }
-
-  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')
-    setCurrentOverlay(id)
-    showOverlay()
-  }
-
-  function click() {
-    if (onClick) onClick()
-    hideOverlayImmediately()
-  }
-
-  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}>
-        <a
-          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)}
-        >
-          <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>
-        </a>
-        {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>
-    </>
-  )
-}
-
-const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content' | 'customContent'>) => {
-  if (customContent) {
-    return <div id="custom-selectable-item"> {customContent} </div>
-  }
-
-  const data = typeof content === 'function' ? content() : content
-  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 toggleMenu = useCallback((hasContent: boolean) => {
-    const layout = document.getElementById('layout')
-    if (!layout) return
-    if (layout.classList.contains('menu-compact')) {
-      layout.classList.remove('menu-compact')
-    } else {
-      layout.classList.add('menu-compact')
-    }
-
-    if (hasContent) {
-      if (layout.classList.contains('menu-content-visible')) {
-        layout.classList.remove('menu-content-visible')
-      } else {
-        layout.classList.add('menu-content-visible')
-      }
-    }
-    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>()
-
-  const sectionItems = useMemo(
-    () => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay}
-      hasContent={!!props.content || !!props.customContent} />),
-    [sections],
-  )
-
-  function onPressEscape() {
-    getAccessibilityButtonOfSectionWithActiveOverlay()?.focus()
-    hideOverlayImmediately()
-  }
-
-  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...
-  attachKeyboardListenersForOverlay = attachKeyboardListeners
-  detachKeyboardListenersForOverlay = detachKeyboardListeners
-
-  /* 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
-  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. */
-  function renderMenuOverlay() {
-    if (currentOverlay === undefined) return null
-    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}
-        customContent={sections[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>
-        {(props.settings?.show) &&
-          <a 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>
-          </a>
-        }
-      </Flex>
-
-      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={overlayRef}>
-        {renderMenuOverlay()}
-        <div className="arrow"></div>
-      </div>
-    </>
-  )
-}
-
-const dictionary = {
-  en: {
-    toggle: 'Show or hide the menu',
-    menuOptions: 'View $0 menu options',
-    settings: 'Settings',
-    settingsIcon: 'Settings icon',
-    hide: 'Hide',
-  },
-  pt: {
-    toggle: 'Visualizar ou esconder o menu',
-    menuOptions: 'Visualizar opções do menu $0',
-    settings: 'Configurações',
-    settingsIcon: 'Icone de configurações',
-    hide: 'Esconder',
-  },
-} satisfies Dictionary
+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'
+import { elementIds, getLayoutElements } from '../../elements'
+import { useAnchorTag } from '../../layout-context'
+import { MenuContent } from './MenuContent'
+import { MenuProps, MenuSection } from './types'
+import { useKeyboardControls } from './use-keyboard-controls'
+
+const HIDE_OVERLAY_DELAY_MS = 400
+const MENU_OVERLAY_ID = 'menuContentOverlay'
+
+let hideOverlayTask: number | undefined
+
+// fixme: this should definitely not be handled like this...
+let attachKeyboardListenersForOverlay: () => void
+let detachKeyboardListenersForOverlay: () => void
+
+function hideOverlay() {
+  if (hideOverlayTask !== undefined) return
+  hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS)
+}
+
+function getAccessibilityButtonOfSectionWithActiveOverlay(): HTMLElement | null | undefined {
+  return document.getElementById(elementIds.menuSections)?.querySelector('button[aria-expanded="true"]')
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function hideOverlayImmediately() {
+  detachKeyboardListenersForOverlay?.()
+  const overlay = document.getElementById(MENU_OVERLAY_ID)
+  overlay?.setAttribute('inert', '')
+  overlay?.setAttribute('aria-hidden', '')
+  overlay?.classList.remove('visible')
+  getAccessibilityButtonOfSectionWithActiveOverlay()?.setAttribute('aria-expanded', 'false')
+}
+
+function cancelHideOverlayTask() {
+  if (hideOverlayTask === undefined) return
+  clearTimeout(hideOverlayTask)
+  hideOverlayTask = undefined
+}
+
+function showOverlay() {
+  cancelHideOverlayTask()
+  const overlay = document.getElementById(MENU_OVERLAY_ID)
+  overlay?.removeAttribute('inert')
+  overlay?.removeAttribute('aria-hidden')
+  overlay?.classList.add('visible')
+  attachKeyboardListenersForOverlay?.()
+}
+
+function isMenuContentVisible() {
+  return !!document.getElementById('layout')?.classList?.contains('menu-content-visible')
+}
+
+const Section = ({
+  icon,
+  label,
+  href,
+  target,
+  onClick,
+  active,
+  content,
+  customContent,
+  onOpen,
+  setCurrentOverlay,
+  id,
+  hasContent,
+  className,
+}: MenuSection & {
+  id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean,
+}) => {
+  const Link = useAnchorTag()
+  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 
+     * 2. The section has some content to render OR:
+     * 3. The section is active and 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))
+  }
+
+  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')
+    setCurrentOverlay(id)
+    showOverlay()
+  }
+
+  function click() {
+    if (onClick) onClick()
+    hideOverlayImmediately()
+  }
+
+  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)}
+        >
+          <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>
+        </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>
+    </>
+  )
+}
+
+const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content' | 'customContent'>) => {
+  if (customContent) {
+    return <div id="custom-selectable-item"> {customContent} </div>
+  }
+
+  const data = typeof content === 'function' ? content() : content
+  return <MenuContent {...data} />
+}
+
+export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
+  const Link = useAnchorTag()
+  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 layout = document.getElementById('layout')
+    if (!layout) return
+    if (layout.classList.contains('menu-compact')) {
+      layout.classList.remove('menu-compact')
+    } else {
+      layout.classList.add('menu-compact')
+    }
+
+    if (hasContent) {
+      if (layout.classList.contains('menu-content-visible')) {
+        layout.classList.remove('menu-content-visible')
+      } else {
+        layout.classList.add('menu-content-visible')
+      }
+    }
+    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>()
+
+  const sectionItems = useMemo(
+    () => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay}
+      hasContent={!!props.content || !!props.customContent} />),
+    [sections],
+  )
+
+  function onPressEscape() {
+    getAccessibilityButtonOfSectionWithActiveOverlay()?.focus()
+    hideOverlayImmediately()
+  }
+
+  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...
+  attachKeyboardListenersForOverlay = attachKeyboardListeners
+  detachKeyboardListenersForOverlay = detachKeyboardListeners
+
+  /* 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
+  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. */
+  function renderMenuOverlay() {
+    if (currentOverlay === undefined) return null
+    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}
+        customContent={sections[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>
+        {(props.settings?.show) &&
+          <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>
+          </Link>
+        }
+      </Flex>
+
+      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={overlayRef}>
+        {renderMenuOverlay()}
+        <div className="arrow"></div>
+      </div>
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    toggle: 'Show or hide the menu',
+    menuOptions: 'View $0 menu options',
+    settings: 'Settings',
+    settingsIcon: 'Settings icon',
+    hide: 'Hide',
+  },
+  pt: {
+    toggle: 'Visualizar ou esconder o menu',
+    menuOptions: 'Visualizar opções do menu $0',
+    settings: 'Configurações',
+    settingsIcon: 'Icone de configurações',
+    hide: 'Esconder',
+  },
+} satisfies Dictionary