@stack-spot/portal-layout 0.0.33 → 0.0.34

package/src/components/menu/MenuSections.tsx

@@ -2,6 +2,8 @@ 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'
@@ -12,14 +14,27 @@ 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() {
-  document.getElementById(MENU_OVERLAY_ID)?.classList.remove('visible')
+  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() {
@@ -30,7 +45,11 @@ function cancelHideOverlayTask() {
 
 function showOverlay() {
   cancelHideOverlayTask()
-  document.getElementById(MENU_OVERLAY_ID)?.classList.add('visible')
+  const overlay = document.getElementById(MENU_OVERLAY_ID)
+  overlay?.removeAttribute('inert')
+  overlay?.removeAttribute('aria-hidden')
+  overlay?.classList.add('visible')
+  attachKeyboardListenersForOverlay?.()
 }
 
 function isMenuContentVisible() {
@@ -60,19 +79,20 @@ const Section = ({
     /* The overlay should appear if:
      * 1. The menu is compacted showing only the icons 
      * 2. The section has some content to render OR:
-     *   2.1 The section is active and there is a contextual menu for the active page.
-     * 3. The section is inactive OR:
-     *   2.1. The contextual menu is hidden.
+     * 3. The section is active and there is a contextual menu for the active page.
      */
-    const layout = document.getElementById('layout')
-    const isCompactedOnlyIcons = layout?.classList.contains('menu-compact-only-icons')
-    return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible())
+    const { layout } = getLayoutElements()
+    const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
+    return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active))
   }
 
   function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
     if (!shouldShowOverlay()) return
     onOpen?.()
-    const rect = (event.target as HTMLElement)?.getBoundingClientRect()
+    const anchorElement = event.target as HTMLElement
+    const accessibilityButton = anchorElement?.parentElement?.querySelector('button') as HTMLElement
+    accessibilityButton?.setAttribute('aria-expanded', 'true')
+    const rect = anchorElement?.getBoundingClientRect()
     const arrow: HTMLElement | null = document.querySelector(`#${MENU_OVERLAY_ID} .arrow`)
     setCurrentOverlay(id)
     showOverlay()
@@ -104,7 +124,7 @@ const Section = ({
           {...(!href ? { 'tabIndex': 0 } : undefined)}
         >
           <Flex alignItems="center" justifyContent="center" px={5}>
-            {icon}
+            <IconBox>{icon}</IconBox>
             {typeof label === 'string' ? <Text appearance="microtext1" className="section-label" ml={3}>{label}</Text> : label.element}
           </Flex>
         </a>
@@ -113,13 +133,12 @@ const Section = ({
             as="button"
             aria-label={interpolate(t.menuOptions, label)}
             aria-controls={MENU_OVERLAY_ID}
-            aria-expanded={document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible')}
+            aria-expanded={false}
             onKeyDown={(event) => {
               if (event.key === 'Enter') {
                 showOverlayAndFixArrowPosition(event)
               }
-            }
-            }>
+            }}>
             <ChevronRight />
           </IconBox>
         }
@@ -130,7 +149,7 @@ const Section = ({
 
 const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content' | 'customContent'>) => {
   if (customContent) {
-    return <> {customContent} </>
+    return <div id="custom-selectable-item"> {customContent} </div>
   }
 
   const data = typeof content === 'function' ? content() : content
@@ -141,15 +160,14 @@ 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((hasContent: boolean) => {
     const layout = document.getElementById('layout')
     if (!layout) return
-    if (layout.classList.contains('menu-compact-only-icons')) {
-      layout.classList.remove('menu-compact-only-icons')
+    if (layout.classList.contains('menu-compact')) {
+      layout.classList.remove('menu-compact')
     } else {
-      layout.classList.add('menu-compact-only-icons')
+      layout.classList.add('menu-compact')
     }
 
     if (hasContent) {
@@ -171,19 +189,19 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   )
 
   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()
-    }
+    getAccessibilityButtonOfSectionWithActiveOverlay()?.focus()
+    hideOverlayImmediately()
   }
 
-  const wrapper = useKeyboardControls({
-    onHide, visible: document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible') || false,
+  const { keyboardControlledElement: overlayRef, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls({
+    onPressEscape,
     querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
-    onPressEscape: () => onPressEscape(),
   })
 
+  // 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
@@ -206,7 +224,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
 
       <Flex mb={7} alignItems="center">
         <button className="toggle sections-footer" onClick={() => toggleMenu(!!props.content || !!props.customContent)}
-          title={t.toggle} tabIndex={-1} aria-hidden>
+          title={t.toggle} tabIndex={-1}>
           <IconBox>
             <Expand className="expand" />
             <Collapse className="collapse" />
@@ -217,7 +235,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
           <a href={props.settings?.href} onClick={props.settings?.onClick}
             className="sections-footer"
             {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
-            <Flex alignItems="center" >
+            <Flex alignItems="center" justifyContent="center">
               <IconBox aria-label={t.settingsIcon}>
                 <Cog />
               </IconBox>
@@ -227,7 +245,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
         }
       </Flex>
 
-      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={wrapper}>
+      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={overlayRef}>
         {renderMenuOverlay()}
         <div className="arrow"></div>
       </div>

package/src/components/menu/types.ts

@@ -81,7 +81,6 @@ export interface MenuSection extends Action {
 
 interface BaseMenuProps {
   sections?: MenuSection[],
-  compact?: boolean,
   customContent?: ReactNode,
   settings?: {
     show?: boolean,

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

@@ -1,29 +1,34 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useRef } from 'react'
 
 interface Props {
-  onHide?: () => void,
-  visible: boolean,
+  /**
+   * A query selector that returns every html element that must be navigable through the keyboard.
+   */
   querySelectors: string,
+  /**
+   * Function to call when ESC is pressed. or when TAB is pressed at the last item in the list of items returned by the query selector.
+   */
   onPressEscape?: () => void,
+  /**
+   * Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
+   * onPressEscape if not specified.
+   */
+  onPressLastTab?: () => void,
 }
 
-export function useKeyboardControls({ onHide, visible, querySelectors, onPressEscape }: Props) {
-  const wrapper = useRef<HTMLDivElement>(null)
-
-  const onRemoveListeners = () =>{
-    document.removeEventListener('keydown', keyboardControls)
-    document.removeEventListener('click', hide)
-  }
+export function useKeyboardControls({ querySelectors, onPressEscape, onPressLastTab = onPressEscape }: Props) {
+  const keyboardControlledElement = useRef<HTMLDivElement>(null)
+  const listeners = useRef<Pick<Props, 'onPressEscape' | 'onPressLastTab'>>({})
+  listeners.current = { onPressEscape, onPressLastTab }
 
   const keyboardControls = useCallback((event: KeyboardEvent) => {
     const target = event?.target as HTMLElement | null
 
     function getSelectableAnchors() {
-      return wrapper.current?.querySelectorAll(querySelectors) ?? []
+      return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? []
     }
 
     function handleArrows(key = event.key) {
-      
       const anchors = getSelectableAnchors()
       let i = 0
       while (i < anchors.length && document.activeElement !== anchors[i]) i++
@@ -33,56 +38,33 @@ export function useKeyboardControls({ onHide, visible, querySelectors, onPressEs
       
     const handlers: Record<string, (() => void) | undefined> = {
       Escape: () => {
-        onPressEscape?.()
-        onHide?.()
-        onRemoveListeners()
+        listeners.current.onPressEscape?.()
+        event.stopPropagation()
+        event.preventDefault()
       },
       Enter: () => {
         target?.click()
       },
       Tab: () => {
         const anchors = getSelectableAnchors()
-        if (document.activeElement === anchors[anchors.length - 1]) onHide?.()
-        else {
-          handleArrows('ArrowDown')
-          event.preventDefault()
-        }
-      },
-      ArrowUp: () => {
-        handleArrows()
-      },
-      ArrowDown: () => {
-        handleArrows()
+        if (document.activeElement === anchors[anchors.length - 1]) listeners.current.onPressLastTab?.()
+        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?.()
+  const attachKeyboardListeners = useCallback(() => {
+    document.addEventListener('keydown', keyboardControls)
   }, [])
 
-  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])
+  const detachKeyboardListeners = useCallback(() => {
+    document.removeEventListener('keydown', keyboardControls)
+  }, [])
 
-  return wrapper
+  return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners }
 }

package/src/layout.css

@@ -49,12 +49,12 @@ body {
   --toastify-font-family: 'Roboto', sans-serif;
 }
 
-#layout.menu-compact:not(.menu-compact-only-icons) {
+#layout:not(.menu-compact) {
   --menu-sections-width: 135px;
   --menu-item-height: 56px;
 }
 
-#layout.menu-compact-only-icons  {
+#layout.menu-compact  {
   --menu-sections-width: 56px;
   --menu-item-height: 56px;
 }
@@ -133,20 +133,24 @@ body {
 }
 
 #menu .toggle .expand,
-#layout.menu-compact-only-icons .toggle .collapse {
+#layout.menu-compact .toggle .collapse {
   opacity: 0;
 }
 
 #menu .toggle .collapse,
-#layout.menu-compact-only-icons .toggle .expand {
+#layout.menu-compact .toggle .expand {
   opacity: 1;
 }
 
-#layout.menu-compact-only-icons .section-label {
+#layout .section-label {
+  line-height: 0.875rem;
+}
+
+#layout.menu-compact .section-label {
   display: none;
 }
 
-#layout:not(.menu-compact-only-icons) .section-label {
+#layout:not(.menu-compact) .section-label {
   display: block;
 }
 
@@ -179,6 +183,7 @@ body {
   transition: background-color 0.2s;
   cursor: pointer;
   position: relative;
+  z-index: 2;
 }
 
 #menuSections > ul li a:before {
@@ -224,7 +229,7 @@ body {
   left: calc(var(--menu-sections-width) + 15px);
   bottom: 15px;
   background-color: var(--light-500);
-  border-radius: 0 8px 8px 0;
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -249,7 +254,7 @@ body {
   height: 0; 
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent; 
-  border-right: 12px solid var(--light-400);
+  border-right: 12px solid var(--light-500);
   position: fixed;
   /* header + menu sections padding + item height / 2 - arrow height / 2 */
   top: calc(var(--header-height) + 10px + var(--menu-item-height) / 2 - 12px);
@@ -458,6 +463,7 @@ i {
   top: 27%;
   right: 10px;
   background-color: inherit;
+  z-index: 1;
 }
 
 #menuSections .section-submenu-icon:focus-visible {

package/dist/components/error/ErrorDescriptor.d.ts

@@ -1,12 +0,0 @@
-export interface ErrorDescription {
-    code?: number;
-    message?: string;
-    debug?: boolean;
-}
-export type DescriptionFn = (error: any) => ErrorDescription;
-export declare class ErrorDescriptor {
-    private static descriptionFunction;
-    static setDescriptionFunction(fn: DescriptionFn): void;
-    static describe(error: any): ErrorDescription;
-}
-//# sourceMappingURL=ErrorDescriptor.d.ts.map

package/dist/components/error/ErrorDescriptor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorDescriptor.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorDescriptor.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,gBAAgB,CAAA;AAE5D,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAEhC;IAEF,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,aAAa;IAI/C,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG;CAG3B"}

package/dist/components/error/ErrorDescriptor.js

@@ -1,17 +0,0 @@
-export class ErrorDescriptor {
-    static setDescriptionFunction(fn) {
-        this.descriptionFunction = fn;
-    }
-    static describe(error) {
-        return this.descriptionFunction(error);
-    }
-}
-Object.defineProperty(ErrorDescriptor, "descriptionFunction", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: error => ({
-        message: error.message || `${error}`,
-    })
-});
-//# sourceMappingURL=ErrorDescriptor.js.map

package/dist/components/error/ErrorDescriptor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorDescriptor.js","sourceRoot":"","sources":["../../../src/components/error/ErrorDescriptor.ts"],"names":[],"mappings":"AAQA,MAAM,OAAO,eAAe;IAK1B,MAAM,CAAC,sBAAsB,CAAC,EAAiB;QAC7C,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAA;IAC/B,CAAC;IAED,MAAM,CAAC,QAAQ,CAAC,KAAU;QACxB,OAAO,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;;AAVc;;;;WAAqC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC5D,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,GAAG,KAAK,EAAE;KACrC,CAAC;GAAA"}

package/dist/components/menu/useCheckTextOverflow.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare function useCheckTextOverflow(): {
-    overflow: boolean;
-    ref: import("react").RefObject<HTMLParagraphElement>;
-};
-//# sourceMappingURL=useCheckTextOverflow.d.ts.map

package/dist/components/menu/useCheckTextOverflow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCheckTextOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":";AAEA,wBAAgB,oBAAoB;;;EAuBnC"}

package/dist/components/menu/useCheckTextOverflow.js

@@ -1,20 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-export function useCheckTextOverflow() {
-    const [overflow, setOverflow] = useState(false);
-    const ref = useRef(null);
-    const checkOverflow = () => {
-        if (!ref.current) {
-            return;
-        }
-        const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth;
-        if (hasOverflow === overflow) {
-            return;
-        }
-        setOverflow(hasOverflow);
-    };
-    useEffect(() => {
-        checkOverflow();
-    }, [ref.current]);
-    return { overflow, ref };
-}
-//# sourceMappingURL=useCheckTextOverflow.js.map

package/dist/components/menu/useCheckTextOverflow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCheckTextOverflow.js","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAM;QACR,CAAC;QAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAA;QAErE,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAM;QACR,CAAC;QAED,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;IACjB,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAC1B,CAAC"}