@stack-spot/portal-layout 2.35.1 → 2.36.0-beta.1

package/src/LayoutOverlayManager.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
 import { Button } from '@citric/core'
+import { ModalContent } from '@citric/ui'
 import { focusAccessibleElement, focusFirstChild } from '@stack-spot/portal-components'
+import { last } from 'lodash'
 import { ReactElement, useLayoutEffect, useState } from 'react'
 import { Dialog, DialogOptions } from './components/Dialog'
 import { CLOSE_OVERLAY_ID, OverlayContent, OverlayContentProps } from './components/OverlayContent'
@@ -20,16 +22,28 @@ interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
   showButton?: boolean,
 }
 
+interface ModalContent {
+  id?: string,
+  element: React.ReactElement,
+  size: CustomModalSize | RightPanelSize,
+  onClose?: () => void,
+  stack: boolean,
+}
+
 type BottomDialogOptions = Omit<DialogOptions, 'title'>
-type SetContentFn = ((content: ReactElement | undefined) => void) | undefined
+type SetContentFn = (content: ModalContent[]) => void
 
 interface OverlayContentSetter {
   modal?: SetContentFn,
   rightPanel?: SetContentFn,
-  bottomDialog?: SetContentFn,
+  bottomDialog?: ((content: React.ReactElement | undefined) => void),
 }
 
 interface CustomModalOptions {
+  /**
+   * An optional, unique identifier for this modal.
+   */
+  id?: string,
   /**
    * The size of the modal.
    */
@@ -43,9 +57,24 @@ interface CustomModalOptions {
    * @default true
    */
   ignoreFirstFocusOnCloseButton?: boolean,
+  /**
+   * If true, instead of replacing the previously opened modal (if any), it will open on top of it (stacked).
+   * 
+   * When a modal is stacked on top of another:
+   *   - Closing the modal, closes all opened modals.
+   *   - Popping the modal, closes only the modal at the top of the stack.
+   *   - Only the modal at the top of the stack can be interacted with.
+   * 
+   * @default false
+   */
+  stack?: boolean,
 }
 
 interface CustomRightPanelOptions {
+  /**
+   * An optional, unique identifier for this right panel.
+   */
+  id?: string,
   /**
    * The size of the right panel.
    */
@@ -54,6 +83,22 @@ interface CustomRightPanelOptions {
    * A function to call when the right panel closes. 
    */
   onClose?: () => void,
+  /**
+   * Property that defines whether the modal should ignore the initial focus on the close button. 
+   * @default true
+   */
+  ignoreFirstFocusOnCloseButton?: boolean,
+  /**
+   * If true, instead of replacing the previously opened right panel (if any), it will open on top of it (stacked).
+   * 
+   * When a right panel is stacked on top of another:
+   *   - Closing the panel, closes all opened panels.
+   *   - Popping the panel, closes only the panel at the top of the stack.
+   *   - Only the panel at the top of the stack can be interacted with.
+   * 
+   * @default false
+   */
+  stack?: boolean,
 }
 
 function multipleCallsWarning(type: 'modal' | 'rightPanel', timeMS: number) {
@@ -69,11 +114,12 @@ class LayoutOverlayManager {
   static readonly instance?: LayoutOverlayManager
   private setContent: OverlayContentSetter = {}
   private elements?: LayoutElements
-  private onModalClose?: () => void
   /**
    * Last element with focus before an overlay is shown.
    */
   private lastActiveElement: Element | null = null
+  private modals: ModalContent[] = []
+  private panels: ModalContent[] = []
 
   private closeCustomBackdrops(elements: NodeListOf<Element>) {
     // this is the easiest way to close each custom backdrop by calling their respective "onClose" callbacks. This is a hidden button
@@ -132,11 +178,17 @@ class LayoutOverlayManager {
     useLayoutEffect(() => {
       if (!this.elements) this.setupElements()
     }, [])
-    const [modal, setModal] = useState<ReactElement | undefined>()
-    const [rightPanel, setRightPanel] = useState<ReactElement | undefined>()
+    const [modal, setModal] = useState<ModalContent[]>([])
+    const [rightPanel, setRightPanel] = useState<ModalContent[]>([])
     const [bottomDialog, setBottomDialog] = useState<ReactElement | undefined>()
-    this.setContent.modal = setModal
-    this.setContent.rightPanel = setRightPanel
+    this.setContent.modal = (content) => {
+      this.modals = content
+      setModal(content)
+    }
+    this.setContent.rightPanel = (content) => {
+      this.panels = content
+      setRightPanel(content)
+    }
     this.setContent.bottomDialog = setBottomDialog
     return { modal, rightPanel, bottomDialog }
   }
@@ -170,7 +222,6 @@ class LayoutOverlayManager {
     ignoreFirstFocusOnCloseButton = true,
   ) {
     this.lastActiveElement = document.activeElement
-
     if (manageClasses) element?.classList.add('visible', ...extraClasses)
     this.setInteractivity(element, true)
     if (blockMainContent) this.setMainContentInteractivity(false)
@@ -220,6 +271,20 @@ class LayoutOverlayManager {
     return this.elements?.modal?.classList.contains('visible') ?? false
   }
 
+  /**
+   * @returns the number of modals currently tracked.
+   */
+  getNumberOfOpenModals() {
+    return this.modals.length
+  }
+
+  /**
+   * @returns the number of right panels currently tracked.
+   */
+  getNumberOfOpenRightPanels() {
+    return this.panels.length
+  }
+
   /**
    * @returns true if the right panel is currently opened. False otherwise.
    */
@@ -244,11 +309,15 @@ class LayoutOverlayManager {
    * @param options the modal options {@link CustomModalOptions}.
    */
   showCustomModal(content: React.ReactElement,
-    { size = 'medium', onClose, ignoreFirstFocusOnCloseButton = true }: CustomModalOptions = {}) {
+    { size = 'medium', onClose, ignoreFirstFocusOnCloseButton = true, stack = false, id }: CustomModalOptions = {},
+  ) {
     if (!this.elements?.modal) throw new ElementNotFound('modal', elementIds.modal)
     if (!this.setContent.modal) throw new LayoutError('unable to show modal, because it has not been setup yet.')
-    this.onModalClose = onClose
-    this.setContent.modal(content)
+    const modal = { element: content, onClose, size, stack, id }
+    const currentModalSize = last(this.modals)?.size
+    this.setContent.modal(stack ? [...this.modals, modal] : [modal])
+    // we should remove the previous size, if any, before showing the modal
+    if (currentModalSize) this.elements.modal.classList.remove(currentModalSize)
     this.showOverlay(this.elements.modal, [size], true, true, ignoreFirstFocusOnCloseButton)
   }
 
@@ -261,11 +330,12 @@ class LayoutOverlayManager {
    * @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
    */
   showModal({
-    size, ignoreFirstFocusOnCloseButton, ...props
-  }: OverlayContentProps & { size?: ModalSize, ignoreFirstFocusOnCloseButton?: boolean }) {
+    size, ignoreFirstFocusOnCloseButton, stack, onGoBack, id, ...props
+  }: OverlayContentProps & { size?: ModalSize } & Pick<CustomModalOptions, 'ignoreFirstFocusOnCloseButton' | 'stack' | 'id'>) {
+    const handleBack = onGoBack ?? ((stack && this.modals.length >= 1) ? () => this.popModal() : undefined)
     this.showCustomModal(
-      <OverlayContent {...props} onClose={() => this.closeModal()} type="modal" />,
-      { size, onClose: props.onClose, ignoreFirstFocusOnCloseButton },
+      <OverlayContent {...props} onGoBack={handleBack} onClose={() => this.closeModal()} type="modal" />,
+      { size, onClose: props.onClose, ignoreFirstFocusOnCloseButton, stack, id },
     )
   }
 
@@ -274,8 +344,8 @@ class LayoutOverlayManager {
     let dialogResult = false
     return new Promise((resolve, reject) => {
       try {
-        if (options.type === 'modal') {
-          this.showCustomModal(
+        if (options.type === 'panel') {
+          this.showCustomRightPanel(
             <Dialog
               {...options}
               onCancel={() => this.closeModal()}
@@ -284,10 +354,10 @@ class LayoutOverlayManager {
                 this.closeModal()
               }}
             />,
-            { size, onClose: () => resolve(dialogResult), ignoreFirstFocusOnCloseButton },
+            { size: size as RightPanelSize, onClose: () => resolve(dialogResult) },
           )
         } else {
-          this.showCustomRightPanel(
+          this.showCustomModal(
             <Dialog
               {...options}
               onCancel={() => this.closeModal()}
@@ -296,7 +366,7 @@ class LayoutOverlayManager {
                 this.closeModal()
               }}
             />,
-            { size: size as RightPanelSize, onClose: () => resolve(dialogResult) },
+            { size, onClose: () => resolve(dialogResult), ignoreFirstFocusOnCloseButton },
           )
         }
       } catch (error) {
@@ -380,14 +450,17 @@ class LayoutOverlayManager {
    * @param content a react element with the modal content.
    * @param options the modal options {@link CustomModalOptions}.
    */
-  showCustomRightPanel(content: ReactElement, { size = 'medium', onClose }: CustomRightPanelOptions = {}) {
+  showCustomRightPanel(content: ReactElement, { size = 'medium', onClose, ignoreFirstFocusOnCloseButton = true, stack = false, id }:
+    CustomRightPanelOptions = {}) {
     if (!this.elements?.rightPanel) throw new ElementNotFound('right panel overlay', elementIds.rightPanel)
     if (!this.setContent.rightPanel) throw new LayoutError('unable to show right panel overlay, because it has not been setup yet.')
-    this.onModalClose = onClose
-    this.setContent.rightPanel(content)
-    this.elements?.rightPanel.classList.add(size)
+    const panel = { element: content, onClose, size, stack, id }
+    const currentPanelSize = last(this.modals)?.size
+    this.setContent.rightPanel(stack ? [...this.panels, panel] : [panel])
+    // we should remove the previous size, if any, before showing the panel
+    if (currentPanelSize) this.elements.rightPanel.classList.remove(currentPanelSize)
     setTimeout(() => {
-      this.showOverlay(this.elements?.rightPanel, [], true, true)
+      this.showOverlay(this.elements?.rightPanel, [size], true, true, ignoreFirstFocusOnCloseButton)
     })
   }
 
@@ -399,10 +472,12 @@ class LayoutOverlayManager {
    * 
    * @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
    */
-  showRightPanel({ size, ...props }: OverlayContentProps & { size?: RightPanelSize }) {
+  showRightPanel({ size, ignoreFirstFocusOnCloseButton, stack, onGoBack, id, ...props }:
+    OverlayContentProps & Pick<CustomRightPanelOptions, 'size' | 'ignoreFirstFocusOnCloseButton' | 'stack' | 'id'>) {
+    const handleBack = onGoBack ?? ((stack && this.panels.length >= 1) ? () => this.popRightPanel() : undefined)
     this.showCustomRightPanel(
-      <OverlayContent {...props} onClose={() => this.closeRightPanel()} type="panel" />,
-      { size, onClose: props.onClose },
+      <OverlayContent {...props} onGoBack={handleBack} onClose={() => this.closeRightPanel()} type="panel" />,
+      { size, onClose: props.onClose, ignoreFirstFocusOnCloseButton, stack, id },
     )
   }
 
@@ -416,28 +491,31 @@ class LayoutOverlayManager {
   }
 
   /**
-   * Closes the modal if it's open.
+   * Closes all opened modals.
    * @param runCloseListener whether or not to run the function `onClose` passed to `showModal` or `showCustomModal`. Defaults to true.
    */
   closeModal(runCloseListener = true) {
     this.elements?.modal?.classList.remove('visible')
-    this.elements?.backdrop?.setAttribute('class', '')
-    if (runCloseListener && this.onModalClose) {
-      const onClose = this.onModalClose
-      // setting it to undefined before running it prevents nested calls to closeModal from generating infinite loops.
-      this.onModalClose = undefined
-      onClose()
+    const shouldHideBackdrop = this.panels.length === 0
+    if (shouldHideBackdrop) this.elements?.backdrop?.setAttribute('class', '')
+    if (runCloseListener) {
+      this.modals.forEach((modal) => {
+        const onClose = modal.onClose
+        // setting it to undefined before running it prevents nested calls to closeModal from generating infinite loops.
+        modal.onClose = undefined
+        onClose?.()
+      })
     }
     const animationMS = parseFloat(valueOfLayoutVar('--modal-animation-duration')) * 1000
     setTimeout(
       () => {
-        if (this.elements?.backdrop?.classList.contains('visible')) {
+        if (shouldHideBackdrop && this.elements?.backdrop?.classList.contains('visible')) {
           // eslint-disable-next-line no-console
           console.warn(multipleCallsWarning('modal', animationMS))
           this.elements?.modal?.classList.remove('visible')
         }
-        if (this.setContent.modal) this.setContent.modal(undefined)
-        this.hideOverlay(this.elements?.modal)
+        if (this.setContent.modal) this.setContent.modal([])
+        if (shouldHideBackdrop) this.hideOverlay(this.elements?.modal)
         this.focusLastActiveElement()
       },
       animationMS,
@@ -445,35 +523,95 @@ class LayoutOverlayManager {
   }
 
   /**
-   * Closes the right panel if it's open.
+   * Closes the top-most modal in the stack. Will behave like `closeModal` if only a single modal exists in the stack.
+   * @param amount number of modals to pop. Defaults to 1.
+   * @param runCloseListener whether or not to run the function `onClose` passed to `showModal` or `showCustomModal`. Defaults to true.
+   */
+  popModal(amount = 1, runCloseListener = true) {
+    if (amount <= 0) return
+    if (this.modals.length <= amount) return this.closeModal(runCloseListener)
+    for (let i = 0; i < amount; i++) {
+      const modalToClose = this.modals.pop()! // "!": because of the second "if", the array can't have less than "amount + 1" elements
+      if (runCloseListener) modalToClose.onClose?.()
+      this.elements?.modal?.classList.remove(modalToClose.size)
+    }
+    const topModal = last(this.modals)!  // "!": because of the second "if", the array can't have less than "amount + 1" elements
+    this.elements?.modal?.classList.add(topModal.size)
+    this.setContent.modal?.([...this.modals])
+  }
+
+  /**
+   * Close all modals in the stack of modal until the modal with the given id is found. If no modal with the given id is found, nothing
+   * happens.
+   * @param id the id of the modal to pop to.
+   * @param inclusive when true, the modal with the given id is also popped. Defaults to false.
+   */
+  popModalTo(id: string, inclusive = false) {
+    const index = this.modals.findIndex(m => m.id === id)
+    if (index >= 0) this.popModal(this.modals.length - index - (inclusive ? 0 : 1))
+  }
+
+  /**
+   * Closes all opened right panels.
    * @param runCloseListener whether or not to run the function `onClose` passed to `showRightPanel` or `showCustomRightPanel`. Defaults to
    * true.
    */
   closeRightPanel(runCloseListener = true) {
     this.elements?.rightPanel?.classList.remove('visible')
-    this.elements?.backdrop?.setAttribute('class', '')
-    if (runCloseListener && this.onModalClose) {
-      const onClose = this.onModalClose
-      // setting it to undefined before running it prevents nested calls to closeRightPanel from generating infinite loops.
-      this.onModalClose = undefined
-      onClose()
+    const shouldHideBackdrop = this.modals.length === 0
+    if (shouldHideBackdrop) this.elements?.backdrop?.setAttribute('class', '')
+    if (runCloseListener) {
+      this.panels.forEach((panel) => {
+        const onClose = panel.onClose
+        // setting it to undefined before running it prevents nested calls to closeRightPanel from generating infinite loops.
+        panel.onClose = undefined
+        onClose?.()
+      })
     }
     const animationMS = parseFloat(valueOfLayoutVar('--right-panel-animation-duration')) * 1000
     setTimeout(
       () => {
-        if (this.elements?.backdrop?.classList.contains('visible')) {
+        if (shouldHideBackdrop && this.elements?.backdrop?.classList.contains('visible')) {
           // eslint-disable-next-line no-console
           console.warn(multipleCallsWarning('rightPanel', animationMS))
           this.elements?.rightPanel?.classList.remove('visible')
         }
-        if (this.setContent.rightPanel) this.setContent.rightPanel(undefined)
-        this.hideOverlay(this.elements?.rightPanel)
+        if (this.setContent.rightPanel) this.setContent.rightPanel([])
+        if (shouldHideBackdrop) this.hideOverlay(this.elements?.rightPanel)
         this.focusLastActiveElement()
       },
       animationMS,
     )
   }
 
+  /**
+   * Closes the top-most modal in the stack. Will behave like `closeModal` if only a single modal exists in the stack.
+   * @param runCloseListener whether or not to run the function `onClose` passed to `showModal` or `showCustomModal`. Defaults to true.
+   */
+  popRightPanel(amount = 1, runCloseListener = true) {
+    if (amount <= 0) return
+    if (this.panels.length <= amount) return this.closeRightPanel(runCloseListener)
+    for (let i = 0; i < amount; i++) {
+      const panelToClose = this.panels.pop()! // "!": because of the second "if", the array can't have less than "amount + 1" elements
+      if (runCloseListener) panelToClose.onClose?.()
+      this.elements?.rightPanel?.classList.remove(panelToClose.size)
+    }
+    const topPanel = last(this.panels)!  // "!": because of the second "if", the array can't have less than "amount + 1" elements
+    this.elements?.rightPanel?.classList.add(topPanel.size)
+    this.setContent.rightPanel?.([...this.panels])
+  }
+
+  /**
+   * Close all right panels in the stack of panels until the panel with the given id is found. If no panel with the given id is found,
+   * nothing happens.
+   * @param id the id of the right panel to pop to.
+   * @param inclusive when true, the right panel with the given id is also popped. Defaults to false.
+   */
+  popRightPanelTo(id: string, inclusive = false) {
+    const index = this.panels.findIndex(m => m.id === id)
+    if (index >= 0) this.popRightPanel(this.panels.length - index - (inclusive ? 0 : 1))
+  }
+
   /**
    * Closes the bottom dialog if it's open.
    */

package/src/components/NotificationCenter/NotificationsPanelFooter.tsx

@@ -18,7 +18,7 @@ export const NotificationPanelFooter = ({ onClose }: { onClose: () => void }) =>
       href={controller.config.notificationsPath}
     >
       <Text appearance="microtext1">
-        {t.seeAll}
+        {t.viewAll}
       </Text>
     </Button>
   )

package/src/components/NotificationCenter/dictionary.ts

@@ -13,7 +13,7 @@ const dictionary = {
     'HIGH.label': 'High',
     'MEDIUM.label': 'Medium',
     'LOW.label': 'Low',
-    seeAll: 'See all notifications',
+    viewAll: 'View all notifications',
     openNotifications: 'View notifications',
     hasUnread: 'Has Unread notifications',
     close: 'Close',
@@ -32,7 +32,7 @@ const dictionary = {
     'HIGH.label': 'Alto',
     'MEDIUM.label': 'Médio',
     'LOW.label': 'Baixo',
-    seeAll: 'Ver todas as notificações',
+    viewAll: 'Ver todas as notificações',
     openNotifications: 'Visualizar notificações',
     hasUnread: 'Existem notificações não lidas',
     close: 'Fechar',

package/src/components/OverlayContent.tsx

@@ -56,7 +56,7 @@ const ContentBox = styled.section`
     flex-direction: column;
     flex: 1;
   }
-  header {
+  > header {
     display: flex;
     flex-direction: row;
     margin-bottom: 1.25rem;
@@ -79,7 +79,7 @@ export const OverlayContent = ({ children, title, subtitle, className, style, on
                 <ArrowLeft />
               </IconButton>
             )}
-            <Text as="h2" appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
+            <Text as="h1" appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
           </Flex>
           {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
         </Flex>

package/src/components/menu/MenuSections.tsx

@@ -241,6 +241,7 @@ const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content'
  */
 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)
@@ -250,8 +251,10 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
     if (!layout) return
     if (layout.classList.contains('menu-compact')) {
       layout.classList.remove('menu-compact')
+      setShowSupport(true)
     } else {
       layout.classList.add('menu-compact')
+      setShowSupport(false)
     }
 
     layout.classList.add('menu-manual')
@@ -270,6 +273,9 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   const sectionItems = useMemo(
     () => 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}`}
@@ -298,7 +304,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
 
       }, [],
     ),
-    [sections],
+    [sections, showSupport],
   )
 
   function onPressEscape() {
@@ -339,7 +345,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
       <MenuSectionGroup className="open root no-indentation">{sectionItems}</MenuSectionGroup>
 
       <Flex alignItems="center">
-        <RateAndContactUsItem {...props} />
+        <RateAndContactUsItem {...props} showSupport={showSupport} />
         <ReactTooltip
           text={t.toggle}
           position="right"
@@ -388,7 +394,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   )
 }
 
-const RateAndContactUsItem = ({ ...props }: Omit<MenuProps, 'sections'>) => {
+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
@@ -414,7 +420,7 @@ const RateAndContactUsItem = ({ ...props }: Omit<MenuProps, 'sections'>) => {
           className="collapse gradient grow-shrink" colorScheme="light.contrastText">{t.rateUs}</Text>
       </button>
     }
-    {(props.contactUs?.show) &&
+    {(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}>
@@ -423,7 +429,7 @@ const RateAndContactUsItem = ({ ...props }: Omit<MenuProps, 'sections'>) => {
         <Text appearance="microtext1" ml={8} sx={{ marginTop: '3px' }}
           className="collapse" colorScheme="light.contrastText">{t.contactUs}</Text>
       </Link>
-    }
+    )}
   </>
 }
 

package/src/components/menu/types.ts

@@ -313,6 +313,13 @@ export interface MenuPropsWithDynamicContent extends BaseMenuProps {
    * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
    */
   contentKey: React.Key,
+  /**
+   * The function that creates a config to render a third level nav menu content. It will be called only when the content is rendered,
+   * i.e. only when the content really needs to be rendered.
+   * 
+   * Tip: this function can be a React Hook.
+   */
+  innerContent?: MenuSectionContent | (() => MenuSectionContent),
 }
 
 export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent

package/src/components/tour/StepNavigation.tsx

@@ -35,7 +35,9 @@ export const StepNavigation = ({ stepKey, nextButton, prevButton }: NavigationPr
   const t = useTranslate(translations)
 
   return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between" alignItems="center">
-    <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
+    { steps.length > 1 &&
+      <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
+    }
     <Flex sx={{ gap: '8px' }}>
       {currentStep >= 1 &&
         <Button sx={{ paddingInline: '20px' }} onClick={() => {

package/src/dictionary.ts

@@ -1,4 +1,4 @@
-import { Dictionary, getLanguage, useTranslate } from '@stack-spot/portal-translate'
+import { Dictionary, getLanguage, ptEn, useTranslate } from '@stack-spot/portal-translate'
 
 const dictionary = {
   en: {
@@ -25,6 +25,6 @@ const dictionary = {
 export const useDictionary = () => useTranslate(dictionary)
 
 export function getDictionary() {
-  const language = getLanguage()
+  const language = getLanguage(ptEn)
   return dictionary[language]
 }

package/src/elements.ts

@@ -12,6 +12,7 @@ export const elementIds = {
   header: 'header',
   menu: 'menu',
   menuContent: 'menuContent',
+  menuInnerContent: 'menuInnerContent',
   menuSections: 'menuSections',
   accessibilityAnnouncer: 'accessibilityAnnouncer',
 } as const

package/src/layout.css

@@ -98,7 +98,12 @@ body {
   left: calc(var(--menu-sections-width) + var(--menu-content-width));
 }
 
-#layout.no-menu-sections:not(.menu-content-visible) #page {
+#layout.menu-inner-content-visible #page {
+  left: calc(var(--menu-sections-width) + calc(var(--menu-content-width) * 2));
+}
+
+#layout.no-menu-sections:not(.menu-content-visible) #page,
+#layout.no-menu-sections:not(.menu-inner-content-visible) #page {
   border-top-left-radius: 0;
 }
 
@@ -363,7 +368,8 @@ body {
   pointer-events: auto;
 }
 
-#menuContent {
+#menuContent,
+#menuInnerContent {
   width: var(--menu-content-width);
   transition: left ease-out var(--menu-animation-duration);
   background-color: var(--light-400);
@@ -375,7 +381,13 @@ body {
   border-top: 1px solid var(--light-300);
 }
 
-#menuContent .goBackLink {
+#menuInnerContent {
+  left: var(--menu-content-width);
+  border-left: 1px solid var(--light-300);
+}
+
+#menuContent .goBackLink,
+#menuInnerContent .goBackLink {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -482,6 +494,21 @@ body {
   right: 0;
 }
 
+#modal .modal-instance,
+#rightPanel .right-panel-instance {
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  display: none;
+  &.active {
+    display: flex;
+  }
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+}
+
 #bottomPanel {
   position: fixed;
   display: flex;