@stack-spot/portal-layout 0.0.3 → 0.0.4

package/dist/components/SelectionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"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"}

package/dist/components/Toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../src/components/Toaster.tsx"],"names":[],"mappings":"AAGA,OAAO,uCAAuC,CAAA;AAQ9C,eAAO,MAAM,OAAO,+CAAqD,CAAA"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../src/components/Toaster.tsx"],"names":[],"mappings":"AAGA,OAAO,uCAAuC,CAAA;AAY9C,eAAO,MAAM,OAAO,+CAAqD,CAAA"}

package/dist/components/Toaster.js

@@ -3,6 +3,10 @@ import { TimesMini } from '@citric/icons';
 import { IconButton } from '@citric/ui';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-const CloseButton = ({ closeToast }) => (_jsx(IconButton, { onClick: () => closeToast(null), title: "Dismiss", children: _jsx(TimesMini, {}) }));
+import { useDictionary } from '../dictionary';
+const CloseButton = ({ closeToast }) => {
+    const t = useDictionary();
+    return (_jsx(IconButton, { onClick: () => closeToast(null), title: t.dismiss, children: _jsx(TimesMini, {}) }));
+};
 export const Toaster = () => _jsx(ToastContainer, { closeButton: CloseButton });
 //# sourceMappingURL=Toaster.js.map

package/dist/components/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../src/components/Toaster.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAoB,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACjE,OAAO,uCAAuC,CAAA;AAE9C,MAAM,WAAW,GAAG,CAAC,EAAE,UAAU,EAAoB,EAAE,EAAE,CAAC,CACxD,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAW,CAAC,EAAE,KAAK,EAAC,SAAS,YACjE,KAAC,SAAS,KAAG,GACF,CACd,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,KAAC,cAAc,IAAC,WAAW,EAAE,WAAW,GAAI,CAAA"}
+{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../src/components/Toaster.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAoB,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACjE,OAAO,uCAAuC,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE7C,MAAM,WAAW,GAAG,CAAC,EAAE,UAAU,EAAoB,EAAE,EAAE;IACvD,MAAM,CAAC,GAAG,aAAa,EAAE,CAAA;IACzB,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAW,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,OAAO,YAClE,KAAC,SAAS,KAAG,GACF,CACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,KAAC,cAAc,IAAC,WAAW,EAAE,WAAW,GAAI,CAAA"}

package/dist/dictionary.d.ts

@@ -0,0 +1,15 @@
+export declare const useDictionary: () => Record<"cancel" | "close" | "validationLabel" | "dismiss" | "confirm", string>;
+export declare function getDictionary(): {
+    close: string;
+    validationLabel: string;
+    dismiss: string;
+    confirm: string;
+    cancel: string;
+} | {
+    close: string;
+    validationLabel: string;
+    dismiss: string;
+    confirm: string;
+    cancel: string;
+};
+//# sourceMappingURL=dictionary.d.ts.map

package/dist/dictionary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../src/dictionary.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,aAAa,sFAAiC,CAAA;AAE3D,wBAAgB,aAAa;;;;;;;;;;;;EAG5B"}

package/dist/dictionary.js

@@ -0,0 +1,23 @@
+import { getLanguage, useTranslate } from '@stack-spot/portal-translate';
+const dictionary = {
+    en: {
+        close: 'Close',
+        validationLabel: 'Please, confirm the action by typing "$0" below:',
+        dismiss: 'Dismiss',
+        confirm: 'OK',
+        cancel: 'Cancel',
+    },
+    pt: {
+        close: 'Fechar',
+        validationLabel: 'Por favor, confirme a ação digitando "$0" no campo abaixo:',
+        dismiss: 'Dispensar',
+        confirm: 'OK',
+        cancel: 'Cancelar',
+    },
+};
+export const useDictionary = () => useTranslate(dictionary);
+export function getDictionary() {
+    const language = getLanguage();
+    return dictionary[language];
+}
+//# sourceMappingURL=dictionary.js.map

package/dist/dictionary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../src/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEpF,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,kDAAkD;QACnE,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,QAAQ;KACjB;IACD,EAAE,EAAE;QACF,KAAK,EAAE,QAAQ;QACf,eAAe,EAAE,4DAA4D;QAC7E,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,UAAU;KACnB;CACmB,CAAA;AAEtB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;AAE3D,MAAM,UAAU,aAAa;IAC3B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,OAAO,UAAU,CAAC,QAAQ,CAAC,CAAA;AAC7B,CAAC"}

package/dist/layout.css

@@ -68,20 +68,23 @@ body {
 }
 
 #page {
-  flex: 1;
+  position: absolute;
+  top: var(--header-height);
+  left: var(--menu-sections-width);
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   background-color: var(--light-300);
   border-top-left-radius: 0.5rem;
   align-items: center;
   padding: 24px;
-  margin-top: var(--header-height);
-  margin-left: var(--menu-sections-width);
-  transition: margin ease-in-out var(--menu-animation-duration);
+  transition: left ease-in-out var(--menu-animation-duration);
 }
 
 #layout.menu-content-visible #page {
-  margin-left: calc(var(--menu-sections-width) + var(--menu-content-width));
+  left: calc(var(--menu-sections-width) + var(--menu-content-width));
 }
 
 #content {
@@ -330,7 +333,7 @@ body {
   bottom: -420px;
   left: 20px;
   height: 400px;
-  transition: transform bottom 0.3s;
+  transition: bottom 0.3s;
 }
 
 #bottomPanel.visible {
@@ -340,12 +343,23 @@ body {
 #bottomDialog {
   position: fixed;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   bottom: -80px;
   left: 0;
   right: 0;
   height: 80px;
-  transition: transform bottom 0.3s;
+  transition: bottom 0.3s;
+  background-color: var(--inverse-500);
+  color: var(--inverse-contrastText);
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+#bottomDialog .btn-group {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
 }
 
 #bottomDialog.visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,10 +8,11 @@
     "@citric/core": "^5.3.1",
     "@citric/icons": "^5.3.1",
     "@citric/ui": "^5.3.1",
-    "@stack-spot/portal-theme": "0.0.3",
+    "@stack-spot/portal-theme": "^0.0.3",
+    "@stack-spot/portal-translate": "^0.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "6.1.1"
+    "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

package/src/Layout.tsx

@@ -1,6 +1,6 @@
 import { CSSToCitricAdapter, listToClass, WithStyle } from '@stack-spot/portal-theme'
 import '@stack-spot/portal-theme/dist/theme.css'
-import { ReactElement, ReactNode } from 'react'
+import { ComponentClass, ReactElement, ReactNode } from 'react'
 import { Header, HeaderProps } from './components/Header'
 import { MenuContent } from './components/Menu/MenuContent'
 import { MenuSections } from './components/Menu/MenuSections'
@@ -9,10 +9,23 @@ import { Toaster } from './components/Toaster'
 import './layout.css'
 import { overlay } from './LayoutOverlayManager'
 
+type ErrorBoundaryComponent = ComponentClass<{ children: ReactNode }>
+
+interface ErrorBoundaries {
+  page?: ErrorBoundaryComponent,
+  menuSections?: ErrorBoundaryComponent,
+  menuContent?: ErrorBoundaryComponent,
+  modal?: ErrorBoundaryComponent,
+  rightPanel?: ErrorBoundaryComponent,
+  header?: ErrorBoundaryComponent,
+  bottomDialog?: ErrorBoundaryComponent,
+}
+
 interface Props extends WithStyle {
   menu: MenuProps,
   header: HeaderProps,
   children: ReactNode,
+  errorBoundaries?: ErrorBoundaries,
 }
 
 interface RawProps extends WithStyle {
@@ -21,9 +34,12 @@ interface RawProps extends WithStyle {
   header: ReactElement,
   children: ReactNode,
   compactMenu?: boolean,
+  errorBoundaries?: ErrorBoundaries,
 }
 
-export const RawLayout = ({ menuSections, menuContent, header, compactMenu = true, children, className, style }: RawProps) => {
+export const RawLayout = (
+  { menuSections, menuContent, header, compactMenu = true, children, errorBoundaries = {}, className, style }: RawProps,
+) => {
   // @ts-ignore
   const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
   const classes = [
@@ -32,21 +48,26 @@ export const RawLayout = ({ menuSections, menuContent, header, compactMenu = tru
     className,
   ]
 
+  function includeErrorBoundary(content: ReactNode, section: keyof ErrorBoundaries) {
+    const ErrorBoundary = errorBoundaries[section]
+    return ErrorBoundary ? <ErrorBoundary>{content}</ErrorBoundary> : content
+  }
+
   return (
     <CSSToCitricAdapter>
       <div id="layout" className={listToClass(classes)} style={style}>
-        <header id="header">{header}</header>
-        <aside id="menu">
-          <nav id="menuContent">{menuContent}</nav>
-          <nav id="menuSections">{menuSections}</nav>
-        </aside>
         <div id="page">
-          <article id="content">{children}</article>
+          <article id="content">{includeErrorBoundary(children, 'page')}</article>
         </div>
-        <div id="rightPanel">{rightPanel}</div>
-        <div id="bottomDialog">{bottomDialog}</div>
+        <header id="header">{includeErrorBoundary(header, 'header')}</header>
+        <aside id="menu">
+          <nav id="menuContent">{includeErrorBoundary(menuContent, 'menuContent')}</nav>
+          <nav id="menuSections">{includeErrorBoundary(menuSections, 'menuSections')}</nav>
+        </aside>
+        <div id="rightPanel">{includeErrorBoundary(rightPanel, 'rightPanel')}</div>
+        <div id="bottomDialog">{includeErrorBoundary(bottomDialog, 'bottomDialog')}</div>
         <div id="backdrop">
-          <div id="modal">{modal}</div>
+          <div id="modal">{includeErrorBoundary(modal, 'modal')}</div>
         </div>
         <Toaster />
       </div>
@@ -59,7 +80,7 @@ const MenuContentRenderer = ({ content }: Required<Pick<Props['menu'], 'content'
   return <MenuContent {...menuContent} />
 }
 
-export const Layout = ({ menu, header, children, className, style }: Props) => (
+export const Layout = ({ menu, header, children, errorBoundaries, className, style }: Props) => (
   <RawLayout
     header={<Header {...header} />}
     menuSections={<MenuSections {...menu} />}
@@ -68,6 +89,7 @@ export const Layout = ({ menu, header, children, className, style }: Props) => (
       : undefined
     }
     compactMenu={menu.compact}
+    errorBoundaries={errorBoundaries}
     className={className}
     style={style}
   >

package/src/LayoutOverlayManager.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import { Button, Flex } from '@citric/core'
+import { Button } from '@citric/core'
 import { ReactElement, useLayoutEffect, useState } from 'react'
 import { Dialog, DialogOptions } from './components/Dialog'
 import { OverlayContent, OverlayContentProps } from './components/OverlayContent'
+import { getDictionary } from './dictionary'
 import { ElementNotFound, LayoutError } from './errors'
 import { showToaster as showReactToaster } from './toaster'
 import { valueOfLayoutVar } from './utils'
@@ -115,24 +116,28 @@ class LayoutOverlayManager {
     })
   }
 
-  confirm({ confirm = 'OK', cancel = 'Cancel', ...options }: DialogOptions): Promise<boolean> {
-    return this.showDialog({ ...options, confirm, cancel })
+  confirm({ confirm, cancel, ...options }: DialogOptions): Promise<boolean> {
+    const t = getDictionary()
+    return this.showDialog({ ...options, confirm: confirm || t.confirm, cancel: cancel || t.cancel })
   }
 
-  async alert({ confirm = 'OK', showButton = true, ...options }: AlertOptions): Promise<void> {
-    await this.showDialog({ ...options, confirm: showButton ? confirm : undefined })
+  async alert({ confirm, showButton = true, ...options }: AlertOptions): Promise<void> {
+    const t = getDictionary()
+    await this.showDialog({ ...options, confirm: showButton ? (confirm || t.confirm) : undefined })
   }
 
   showBottomDialog({ message, cancel, confirm }: BottomDialogOptions): Promise<boolean> {
     if (!this.elements?.bottomDialog) throw new ElementNotFound('bottom dialog', BOTTOM_DIALOG_ID)
     if (!this.setContent.bottomDialog) throw new LayoutError('unable to show bottom dialog, because it has not been setup yet.')
     return new Promise((resolve) => {
-      this.setContent.bottomDialog!(
-        <Flex gap>
+      this.setContent.bottomDialog?.(
+        <>
           {message}
-          {cancel && <Button onClick={() => resolve(true)} colorScheme="inverse" appearance="outlined">{cancel}</Button>}
-          {confirm && <Button onClick={() => resolve(false)} colorScheme="inverse">{confirm}</Button>}
-        </Flex>,
+          <div className="btn-group">
+            {cancel && <Button onClick={() => resolve(false)} colorScheme="light" appearance="outlined">{cancel}</Button>}
+            {confirm && <Button onClick={() => resolve(true)} colorScheme="light">{confirm}</Button>}
+          </div>
+        </>,
       )
       this.elements?.bottomDialog?.setAttribute('class', 'visible')
     })

package/src/components/Dialog.tsx

@@ -1,5 +1,7 @@
 import { Button, Flex, Input, Text } from '@citric/core'
+import { interpolate } from '@stack-spot/portal-translate'
 import { ReactNode, useState } from 'react'
+import { useDictionary } from '../dictionary'
 import { OverlayContent } from './OverlayContent'
 
 interface Validation {
@@ -49,6 +51,7 @@ export const Dialog = ({
   buttonPlacement = type === 'panel' ? 'left' : 'right',
 }: Props,
 ) => {
+  const t = useDictionary()
   const [enabled, setEnabled] = useState(!validation)
 
   function renderValidation() {
@@ -56,7 +59,7 @@ export const Dialog = ({
     const value = typeof validation === 'string' ? validation : validation.value
     const label = typeof validation === 'object' && validation.label
       ? validation.label
-      : `Please, confirm the action by typing "${value}" below:`
+      : interpolate(t.validationLabel, value)
     const placeholder = typeof validation === 'object' ? validation.placeholder : undefined
     return (
       <div style={{ margin: '16px 0' }}>

package/src/components/Header.tsx

@@ -6,6 +6,7 @@ import { UserMenu } from './UserMenu'
 
 export interface HeaderProps {
   logo?: ReactNode,
+  logoHref?: string,
   userName?: string,
   email?: string,
   options?: SelectionListProps['items'],
@@ -13,9 +14,9 @@ export interface HeaderProps {
   right?: ReactNode,
 }
 
-export const Header = ({ logo, center, right, userName, email, options }: HeaderProps) => (
+export const Header = ({ logo, logoHref, center, right, userName, email, options }: HeaderProps) => (
   <>
-    {logo ?? <StackspotLogo title="stackspot" style={{ width: 130 }} />}
+    <a href={logoHref} title="Home">{logo ?? <StackspotLogo style={{ width: 130 }} />}</a>
     <Flex flex={1}>{center}</Flex>
     {right}
     {userName && <UserMenu userName={userName} email={email} options={options} />}

package/src/components/Menu/MenuContent.tsx

@@ -5,6 +5,7 @@ import { LoadingCircular } from '@citric/ui'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
+import { hideOverlayImmediately } from './MenuSections'
 import { PageSelector } from './PageSelector'
 import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants'
 import { ItemGroup, MenuAction, MenuItem, MenuSectionContent } from './types'
@@ -128,18 +129,23 @@ const Title = styled.header`
   margin: ${PADDING}px 0 24px ${PADDING}px;
 `
 
-const ActionItem = ({ label, onClick, href, active, icon, overflow = 'wrap' }: MenuAction) => (
+const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }: MenuAction) => (
   <a
     href={active ? undefined : href}
-    onClick={active ? onClick : undefined}
+    onClick={() => {
+      if (active) return
+      if (onClick) onClick()
+      hideOverlayImmediately()
+    }}
     className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
   >
     {icon}
     <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
+    {badge}
   </a>
 )
 
-const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, overflow = 'wrap' }: ItemGroup) => {
+const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, overflow = 'wrap' }: ItemGroup) => {
   const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false)
   const items = useMemo(() => children?.map(renderOption), [children])
 
@@ -148,6 +154,7 @@ const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, ov
       <a onClick={() => setOpen(!open)} className="item-row">
         {icon}
         <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
+        {badge}
         <IconBox><ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} /></IconBox>
       </a>
       <MenuGroup className={open ? 'open' : undefined}>{items}</MenuGroup>
@@ -155,7 +162,7 @@ const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, ov
   )
 }
 
-const RootGroupItem = ({ label, children, icon, overflow = 'wrap' }: ItemGroup) => {
+const RootGroupItem = ({ label, children, icon, badge, overflow = 'wrap' }: ItemGroup) => {
   const items = useMemo(() => children?.filter(i => !i.hidden).map(renderOption), [children])
 
   return (
@@ -163,6 +170,7 @@ const RootGroupItem = ({ label, children, icon, overflow = 'wrap' }: ItemGroup)
       <div className="item-row">
         {icon}
         <Text appearance="overheader2" colorScheme="light.700" className={`group-title label ${overflow}`}>{label}</Text>
+        {badge}
       </div>
       <MenuGroup className="open no-indentation">{items}</MenuGroup>
     </>

package/src/components/Menu/MenuSections.tsx

@@ -16,7 +16,8 @@ function hideOverlay() {
   hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS)
 }
 
-function hideOverlayImmediately() {
+// eslint-disable-next-line react-refresh/only-export-components
+export function hideOverlayImmediately() {
   document.getElementById(MENU_OVERLAY_ID)?.classList.remove('visible')
 }
 
@@ -45,11 +46,18 @@ const Section = ({
   onOpen,
   setCurrentOverlay,
   id,
-}: MenuSection & { id: number, setCurrentOverlay: (id: number | undefined) => void }) => {
+  hasContent,
+}: MenuSection & { id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean }) => {
   const contentToRender = typeof content === 'function' ? content() : content
 
   function shouldShowOverlay() {
-    return !!contentToRender && (!active || !isMenuContentVisible())
+    /* The overlay should appear if:
+     * 1. The section has some content to render OR:
+     *   1.1 The section is active and there is a contextual menu for the active page.
+     * 2. The section is inactive OR:
+     *   2.1. The contextual menu is hidden.
+     */
+    return (!!contentToRender || (hasContent && active)) && (!active || !isMenuContentVisible())
   }
 
   function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
@@ -106,7 +114,7 @@ export const MenuSections = ({ sections, ...props }: MenuProps) => {
   const [currentOverlay, setCurrentOverlay] = useState<number | undefined>()
   
   const sectionItems = useMemo(
-    () => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay} />),
+    () => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay} hasContent={!!props.content} />),
     [sections],
   )
 
@@ -126,12 +134,12 @@ export const MenuSections = ({ sections, ...props }: MenuProps) => {
   return (
     <>
       <ul>{sectionItems}</ul>
-      <button className="toggle" onClick={toggleMenu} title="Toggle menu panel visibility">
+      {!!props.content && <button className="toggle" onClick={toggleMenu} title="Toggle menu panel visibility">
         <IconBox>
           <MenuIcon className="expand" />
           <ChevronLeft className="collapse" />
         </IconBox>
-      </button>
+      </button>}
       <div id="menuContentOverlay" onMouseEnter={showOverlay} onMouseLeave={hideOverlay}>
         {renderMenuOverlay()}
         <div className="arrow"></div>

package/src/components/Menu/PageSelector.tsx

@@ -111,6 +111,7 @@ export const PageSelector = ({ options, value, button, loading, title }: Selecto
               items={optionsWithIcon}
               onHide={() => setVisible(false)}
               after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{button.label}</a> : undefined}
+              scroll
             />
           </>
         )

package/src/components/Menu/types.ts

@@ -3,7 +3,14 @@ import { Action } from '../types'
 
 interface BaseMenuItem {
   hidden?: boolean,
+  /**
+   * React element on the left.
+   */
   icon?: React.ReactElement,
+  /**
+   * React element on the right.
+   */
+  badge?: React.ReactElement,
   /**
    * Whether to wrap overflowing text, just hide or hide and add an ellipsis (...).
    * @default 'wrap'

package/src/components/OverlayContent.tsx

@@ -4,6 +4,7 @@ import { IconButton } from '@citric/ui'
 import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
 import { ReactNode } from 'react'
 import { styled } from 'styled-components'
+import { useDictionary } from '../dictionary'
 
 export interface OverlayContentProps extends WithStyle {
   title: string,
@@ -38,15 +39,18 @@ const ContentBox = styled.section`
   }
 `
 
-export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }: Props) => (
-  <ContentBox style={style} className={listToClass([className, type])}>
-    <header>
-      <Flex flexDirection="column" flex={1}>
-        <Text appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
-        {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
-      </Flex>
-      <IconButton onClick={onClose} title="close" aria-label="close"><TimesMini /></IconButton>
-    </header>
-    {children}
-  </ContentBox>
-)
+export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }: Props) => {
+  const t = useDictionary()
+  return (
+    <ContentBox style={style} className={listToClass([className, type])}>
+      <header>
+        <Flex flexDirection="column" flex={1}>
+          <Text appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
+          {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
+        </Flex>
+        <IconButton onClick={onClose} title={t.close} aria-label={t.close}><TimesMini /></IconButton>
+      </header>
+      {children}
+    </ContentBox>
+  )
+}

package/src/components/SelectionList.tsx

@@ -47,11 +47,12 @@ export interface SelectionListProps extends WithStyle {
   maxHeight?: string,
   before?: ReactElement,
   after?: ReactElement,
+  scroll?: boolean,
 }
 
-const SelectionBox = styled.div<{ $maxHeight: string }>`
+const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
   max-height: 0;
-  overflow-y: auto;
+  overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
   overflow-x: hidden;
   transition: max-height ease-in ${ANIMATION_DURATION_MS / 1000}s;
   z-index: 1;
@@ -145,7 +146,7 @@ function renderItem(item: ListItem, setCurrent: (current: CurrentItemList) => vo
 }
 
 export const SelectionList = ({
-  items, className, style, visible = true, maxHeight = '300px', onHide, before, after,
+  items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
 }: SelectionListProps) => {
   const wrapper = useRef<HTMLDivElement>(null)
   const itemsRef = useRef(items)
@@ -182,6 +183,7 @@ export const SelectionList = ({
       $maxHeight={maxHeight}
       style={style}
       className={listToClass(['selection-list', visible ? 'visible' : undefined, className])}
+      $scroll={scroll}
     >
       <div className="selection-list-content">
         {before}

package/src/components/Toaster.tsx

@@ -2,11 +2,15 @@ import { TimesMini } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { CloseButtonProps, ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
+import { useDictionary } from '../dictionary'
 
-const CloseButton = ({ closeToast }: CloseButtonProps) => (
-  <IconButton onClick={() => closeToast(null as any)} title="Dismiss">
-    <TimesMini />
-  </IconButton>
-)
+const CloseButton = ({ closeToast }: CloseButtonProps) => {
+  const t = useDictionary()
+  return (
+    <IconButton onClick={() => closeToast(null as any)} title={t.dismiss}>
+      <TimesMini />
+    </IconButton>
+  )
+}
 
 export const Toaster = () => <ToastContainer closeButton={CloseButton} />

package/src/dictionary.ts

@@ -0,0 +1,25 @@
+import { Dictionary, getLanguage, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    close: 'Close',
+    validationLabel: 'Please, confirm the action by typing "$0" below:',
+    dismiss: 'Dismiss',
+    confirm: 'OK',
+    cancel: 'Cancel',
+  },
+  pt: {
+    close: 'Fechar',
+    validationLabel: 'Por favor, confirme a ação digitando "$0" no campo abaixo:',
+    dismiss: 'Dispensar',
+    confirm: 'OK',
+    cancel: 'Cancelar',
+  },
+} satisfies Dictionary
+
+export const useDictionary = () => useTranslate(dictionary)
+
+export function getDictionary() {
+  const language = getLanguage()
+  return dictionary[language]
+}