@stack-spot/portal-layout 0.0.64 → 1.0.0

package/src/LayoutOverlayManager.tsx

@@ -1,16 +1,21 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
 import { Button } from '@citric/core'
+import { focusAccessibleElement, focusFirstChild } from '@stack-spot/portal-components'
 import { ReactElement, useLayoutEffect, useState } from 'react'
 import { Dialog, DialogOptions } from './components/Dialog'
 import { CLOSE_OVERLAY_ID, OverlayContent, OverlayContentProps } from './components/OverlayContent'
 import { getDictionary } from './dictionary'
 import { LayoutElements, elementIds, getLayoutElements } from './elements'
 import { ElementNotFound, LayoutError } from './errors'
-import { showToaster as showReactToaster } from './toaster'
-import { focusAccessibleElement, focusFirstChild, valueOfLayoutVar } from './utils'
+import { CustomToasterOptions, DefaultToasterOptions, closeReactToaster, showToaster as showReactToaster } from './toaster'
+import { valueOfLayoutVar } from './utils'
 
 interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
+  /**
+   * Whether or not to show an "ok" button. If false, the dialog can still be closed through the close button, by clicking outside it or by
+   * pressing ESC.
+   */
   showButton?: boolean,
 }
 
@@ -26,12 +31,24 @@ interface OverlayContentSetter {
 }
 
 interface CustomModalOptions {
+  /**
+   * The size of the modal.
+   */
   size?: ModalSize,
+  /**
+   * A function to call when the modal closes. 
+   */
   onClose?: () => void,
 }
 
 interface CustomRightPanelOptions {
+  /**
+   * The size of the right panel.
+   */
   size?: OverlaySize,
+  /**
+   * A function to call when the right panel closes. 
+   */
   onClose?: () => void,
 }
 
@@ -72,9 +89,12 @@ class LayoutOverlayManager {
     this.setInteractivity(this.elements?.rightPanel, false)
     this.setInteractivity(this.elements?.bottomDialog, false)
   }
-
-  // this should actually be like Kotlin's "internal", i.e. private to any user of the lib, but public to the lib itself.
-  // @ts-ignore
+  
+  /**
+   * Setup the overlay layout elements.
+   * @returns the content for the modal, rightPanel and bottomDialog.
+   */
+  // @ts-ignore: this should actually be like Kotlin's "internal", i.e. private to any user of the lib, but public to the lib itself.
   private useOverlays() {
     useLayoutEffect(() => {
       if (!this.elements) this.setupElements()
@@ -88,6 +108,11 @@ class LayoutOverlayManager {
     return { modal, rightPanel, bottomDialog }
   }
 
+  /**
+   * Enables or disables the interactivity of an element.
+   * @param element the element to have its interactivity changed.
+   * @param interactive false to disable interactivity, true to enable.
+   */
   private setInteractivity(element: HTMLElement | null | undefined, interactive: boolean) {
     if (interactive) {
       element?.removeAttribute('inert')
@@ -122,18 +147,36 @@ class LayoutOverlayManager {
     this.setMainContentInteractivity(true)
   }
 
+  /**
+   * @returns true if the modal is currently opened. False otherwise.
+   */
   isModalOpen() {
     return this.elements?.modal?.classList.contains('visible') ?? false
   }
 
+  /**
+   * @returns true if the right panel is currently opened. False otherwise.
+   */
   isRightPanelOpen() {
     return this.elements?.rightPanel?.classList.contains('visible') ?? false
   }
 
+  /**
+   * @returns true if the bottom dialog is currently opened. False otherwise.
+   */
   isBottomDialogOpen() {
     return this.elements?.bottomDialog?.classList.contains('visible') ?? false
   }
 
+  /**
+   * Opens a modal with custom content.
+   * 
+   * Attention: the modal state must be declared within the modal. If the state is declared outside the modal, its content won't be updated
+   * accordingly. To force an update of an outside state, you need to call `showCustomModal` again with the new state value.
+   * 
+   * @param content a react element with the modal content.
+   * @param options the modal options {@link CustomModalOptions}.
+   */
   showCustomModal(content: React.ReactElement, { size = 'medium', onClose }: 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.')
@@ -142,6 +185,14 @@ class LayoutOverlayManager {
     this.showOverlay(this.elements.modal, [size])
   }
 
+  /**
+   * Opens a modal.
+   * 
+   * Attention: the modal state must be declared within the modal. If the state is declared outside the modal, its content won't be updated
+   * accordingly. To force an update of an outside state, you need to call `showModal` again with the new state value.
+   * 
+   * @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
+   */
   showModal({ size, ...props }: OverlayContentProps & { size?: ModalSize }) {
     this.showCustomModal(<OverlayContent {...props} onClose={() => this.closeModal()} type="modal" />, { size, onClose: props.onClose })
   }
@@ -167,23 +218,47 @@ class LayoutOverlayManager {
     })
   }
 
+  /**
+   * Shows a confirmation dialog and returns a promise that resolves as soon as the dialog is closed. The result of the promise is true if
+   * the user confirms and false otherwise.
+   * 
+   * If you need the user to type something to confirm the action, use the property `validate` in the options parameter.
+   * @param options the dialog options: {@link DialogOptions}.
+   * @returns a promise that resolves with the user's answer.
+   */
   confirm({ confirm, cancel, ...options }: DialogOptions): Promise<boolean> {
     const t = getDictionary()
     return this.showDialog({ ...options, confirm: confirm || t.confirm, cancel: cancel || t.cancel })
   }
 
+  /**
+   * Shows an alert dialog and returns a promise that resolves as soon as the dialog is closed.
+   * 
+   * @param options the dialog options: {@link AlertOptions}.
+   * @returns a promise that resolves to undefined as soon as the dialog is closed.
+   */
   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> {
+  /**
+   * Shows a message at the bottom of the window and asks the user to confirm or decline it. The return value is a promise that resolves as
+   * soon as the user presses one of the buttons. The result of the promise is true if the user confirms and false otherwise.
+   * 
+   * Differently than `confirm` and `alert`, this message can only be closed if the user clicks one of the buttons or `closeBottomDialog`
+   * is called.
+   * 
+   * @param options the dialog options: {@link BottomDialogOptions}.
+   * @returns a promise that resolves with the user's answer.
+   */
+  showBottomDialog({ children, cancel, confirm }: BottomDialogOptions): Promise<boolean> {
     if (!this.elements?.bottomDialog) throw new ElementNotFound('bottom dialog', elementIds.bottomDialog)
     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?.(
         <>
-          {message}
+          {children}
           <div className="btn-group">
             {cancel && <Button onClick={() => resolve(false)} colorScheme="light" appearance="outlined">{cancel}</Button>}
             {confirm && <Button onClick={() => resolve(true)} colorScheme="light">{confirm}</Button>}
@@ -194,6 +269,16 @@ class LayoutOverlayManager {
     })
   }
 
+  /**
+   * Opens a right panel with custom content.
+   * 
+   * Attention: the right panel state must be declared within the right panel. If the state is declared outside the right panel, its content
+   * won't be updated accordingly. To force an update of an outside state, you need to call `showCustomRightPanel` again with the new state
+   * value.
+   * 
+   * @param content a react element with the modal content.
+   * @param options the modal options {@link CustomModalOptions}.
+   */
   showCustomRightPanel(content: ReactElement, { size = 'medium', onClose }: 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.')
@@ -205,6 +290,14 @@ class LayoutOverlayManager {
     })
   }
 
+  /**
+   * Opens a right panel.
+   * 
+   * Attention: the right panel state must be declared within the right panel. If the state is declared outside the right panel, its content
+   * won't be updated accordingly. To force an update of an outside state, you need to call `showRightPanel` again with the new state value.
+   * 
+   * @param options the modal options: {@link OverlayContentProps} & { size: {@link ModalSize} }.
+   */
   showRightPanel({ size, ...props }: OverlayContentProps & { size?: OverlaySize }) {
     this.showCustomRightPanel(
       <OverlayContent {...props} onClose={() => this.closeRightPanel()} type="panel" />,
@@ -212,7 +305,7 @@ class LayoutOverlayManager {
     )
   }
 
-  /**
+  /*
    * Focus the element that had focus before the last overlay was opened. If the element is not visible anymore, another one that makes
    * sense (accessibility-wise) is focused.
    */
@@ -221,6 +314,10 @@ class LayoutOverlayManager {
     this.lastActiveElement = null
   }
 
+  /**
+   * Closes the modal if it's open.
+   * @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', '')
@@ -246,6 +343,11 @@ class LayoutOverlayManager {
     )
   }
 
+  /**
+   * Closes the right panel if it's open.
+   * @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', '')
@@ -271,19 +373,92 @@ class LayoutOverlayManager {
     )
   }
 
+  /**
+   * Closes the bottom dialog if it's open.
+   */
   closeBottomDialog() {
     this.hideOverlay(this.elements?.bottomDialog)
   }
 
+  /**
+   * Verifies if the HTML element passed as parameter is inside the modal.
+   * @param element the HTML element to check.
+   * @returns true if `element` is inside the modal; false otherwise.
+   */
   isInsideModal(element: HTMLElement) {
     return !!this.elements?.modal?.contains(element)
   }
 
+  /**
+   * Verifies if the HTML element passed as parameter is inside the right panel.
+   * @param element the HTML element to check.
+   * @returns true if `element` is inside the right panel; false otherwise.
+   */
   isInsideRightPanel(element: HTMLElement) {
     return !!this.elements?.rightPanel?.contains(element)
   }
 
-  showToaster = showReactToaster
+  /**
+   * Shows a new toaster on the top right corner of the layout.
+   * @example
+   * ```
+   * overlay.showToaster({ title: 'Welcome', message: 'Hello World' })
+   * overlay.showToaster({
+   *   title: 'Welcome',
+   *   message: 'Hello World',
+   *   actions: [
+   *     { label: 'Got it!' },
+   *     {
+   *       label: 'Tell me more',
+   *       closeOnClick: false,
+   *       onClick: (event) => {
+   *         // do something...
+   *       },
+   *     },
+   *   ]
+   * })
+   * ```
+   * @param options the options for the toaster: {@link DefaultToasterOptions}.
+   * @returns the toaster's id.
+   */
+  showToaster(defaultToasterConfig: DefaultToasterOptions): number | string
+  /**
+   * Shows a fully customized toaster on the top right corner of the layout.
+   * @example
+   * ```
+   * overlay.showToaster({
+   *   custom: true,
+   *   message: <MyCustomToasterContent />,
+   *   closeButton: <MyCustomCloseButton />,
+   * })
+   * ```
+   * @param options the options for the toaster: {@link CustomToasterOptions}.
+   * @returns the toaster's id.
+   */
+  showToaster(customToasterConfig: CustomToasterOptions): number | string
+  /**
+   * Shows the message passed as parameter in a new toaster on the top right corner of the layout.
+   * @example
+   * ```
+   * overlay.showToaster('Hello World!')
+   * overlay.showToaster(<p>Hello World</p>)
+   * ```
+   * @param message the message to show, can be either a string or React Element.
+   * @returns the toaster's id.
+   */
+  showToaster(message: React.ReactNode): number | string
+  showToaster(options: any): number | string {
+    return showReactToaster(options)
+  }
+
+  /**
+   * Closes the toaster with the specified id.
+   * @param id the id of the toaster to close.
+   */
+  closeToaster = closeReactToaster
 }
 
+/**
+ * Manages overlay components of the layout like: modal, rightPanel, bottomDialog and toaster.
+ */
 export const overlay = new LayoutOverlayManager()

package/src/components/Dialog.tsx

@@ -6,35 +6,73 @@ import { useDictionary } from '../dictionary'
 import { OverlayContent } from './OverlayContent'
 
 interface Validation {
+  /**
+   * The expected value of the field.
+   */
   value: string,
+  /**
+   * A custom label for the input field.
+   */
   label?: string | ReactNode,
+  /**
+   * A placeholder for the input field.
+   */
   placeholder?: string,
 }
 
 export interface DialogOptions {
+  /**
+   * The dialog's title.
+   */
   title: string,
+  /**
+   * The dialog's subtitle.
+   */
   subtitle?: string,
-  message: ReactNode,
+  /**
+   * The dialog's content.
+   */
+  children: ReactNode,
+  /**
+   * A text for the confirm button. If left blank, the confirm button won't render.
+   */
   confirm?: string,
+  /**
+   * A text for the cancel button. If left blank, the cancel button won't render.
+   */
   cancel?: string,
+  /**
+   * A validation input field. If the validation is incorrect, the confirm button is disabled.
+   * If this is a string, the validation input's value must be equal to this string in order to enable the confirm button.
+   * If this is an object, a value, label and placeholder may be specified.
+   * Use false or undefined to not include a validation field.
+   */
   validation?: false | string | Validation,
   /**
+   * If this is a modal or a rightPanel.
    * @default modal
    */
   type?: 'modal' | 'panel',
   /**
-   * @default right if type is "panel", "right" otherwise.
+   * The placement for the confirm/cancel buttons.
+   * @default "left" if type is "panel", "right" otherwise.
    */
   buttonPlacement?: 'left' | 'center' | 'right',
   /**
    * The color of the primary button.
-   * @default primary
+   * @default "primary"
    */
   buttonColor?: ColorSchemeName,
 }
 
-interface Props extends DialogOptions {
+interface Props extends Omit<DialogOptions, 'message'> {
+  /**
+   * Function to run when the confirm button is clicked.
+   */
   onConfirm: () => void,
+  /**
+   * Function to run when the cancel button is clicked.
+   */
   onCancel: () => void,
 }
 
@@ -44,8 +82,13 @@ const justifyButtons: Record<Required<DialogOptions>['buttonPlacement'], React.C
   right: 'end',
 }
 
+/**
+ * A dialog, i.e. A UI with title, subtitle, close button, content and a set of buttons: cancel and confirm. May be placed under a Modal or
+ * RightPanel.
+ * @param props the React props of the component {@link Props}.
+ */
 export const Dialog = ({
-  message,
+  children,
   title,
   subtitle,
   cancel,
@@ -83,7 +126,7 @@ export const Dialog = ({
   return (
     <OverlayContent title={title} subtitle={subtitle} onClose={onCancel} type={type}>
       <Flex flexDirection="column" flex={1}>
-        {message}
+        {children}
         {renderValidation()}
       </Flex>
       {(cancel || confirm) && <Flex gap justifyContent={justifyButtons[buttonPlacement]} alignItems="center" sx={{ mt: 6 }}>

package/src/components/Header.tsx

@@ -1,22 +1,50 @@
 import { Flex } from '@citric/core'
+import { SelectionListProps } from '@stack-spot/portal-components/SelectionList'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { Logo } from '@stack-spot/portal-components/svg'
 import { ReactNode } from 'react'
-import { useAnchorTag } from '../layout-context'
-import { Logo } from '../svg/Logo'
 import { PortalSwitcher, PortalSwitcherProps } from './PortalSwitcher'
-import { SelectionListProps } from './SelectionList'
 import { UserMenu } from './UserMenu'
 
 export interface HeaderProps {
+  /**
+   * The logo to show in the header, if the portal switch feature is disabled.
+   */
   logo?: ReactNode,
+  /**
+   * The url the logo links to, if the portal switch feature is disabled.
+   */
   logoHref?: string,
+  /**
+   * The username to show in the user menu.
+   */
   userName?: string,
+  /**
+   * The email to show in the user menu.
+   */
   email?: string,
+  /**
+   * A portal switch config. If not specified, disables the portal switch feature.
+   */
   portalSwitch?: PortalSwitcherProps['portals'],
+  /**
+   * The options to show in the user menu.
+   */
   options?: SelectionListProps['items'],
+  /**
+   * A custom React Node to show at the center of the header. This is a good place for a search field, for instance.
+   */
   center?: ReactNode,
+  /**
+   * A custom React Node to show at the right (end) of the header.
+   */
   right?: ReactNode,
 }
 
+/**
+ * The page header.
+ * @param props the React props for the header {@link HeaderProps}.
+ */
 export const Header = ({ logo, logoHref, center, right, userName, email, options, portalSwitch }: HeaderProps) => {
   const Link = useAnchorTag()
 

package/src/components/OverlayContent.tsx

@@ -9,14 +9,32 @@ import { useDictionary } from '../dictionary'
 export const CLOSE_OVERLAY_ID = 'close-overlay'
 
 export interface OverlayContentProps extends WithStyle {
+  /**
+   * The title for the modal or right panel.
+   */
   title: string,
+  /**
+   * The subtitle for the modal or right panel.
+   */
   subtitle?: string,
+  /**
+   * The content for the modal or right panel.
+   */
   children: ReactNode,
+  /**
+   * A function to run when the close button is pressed.
+   */
   onClose?: () => void,
 }
 
 interface Props extends OverlayContentProps {
+  /**
+   * A function to run when the close button is pressed.
+   */
   onClose: () => void,
+  /**
+   * Whether this is a modal or a right panel.
+   */
   type: 'modal' | 'panel',
 }
 
@@ -41,6 +59,10 @@ const ContentBox = styled.section`
   }
 `
 
+/**
+ * Renders a modal or right panel with title, subtitle, close button and content.
+ * @param props the React props for the component {@link Props}.
+ */
 export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }: Props) => {
   const t = useDictionary()
   return (

package/src/components/PortalSwitcher.tsx

@@ -1,26 +1,35 @@
 import { Button, Flex, IconBox, Text } from '@citric/core'
 import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { AI, EDP, HUB, Logo } from '@stack-spot/portal-components/svg'
 import { theme } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components'
-import { SelectionList, announce } from '..'
-import { AI } from '../svg/AI'
-import { EDP } from '../svg/EDP'
-import { HUB } from '../svg/HUB'
-import { Logo } from '../svg/Logo'
+import { announce } from '../utils'
 import { PortalAcronym } from './types'
 
-
 const Logos: Record<PortalAcronym, ReactNode> = {
   'AI': <AI />,
   'EDP': <EDP />,
   'HUB': <HUB />,
 }
 
-export interface Portal { acronym: PortalAcronym, url: string }
+export interface Portal {
+  /**
+   * A Stackspot Portal.
+   */
+  acronym: PortalAcronym,
+  /**
+   * The URL to the Stackspot Portal.
+   */
+  url: string,
+}
 
 export interface PortalSwitcherProps {
+  /**
+   * The Stackspot portals to show in the selector.
+   */
   portals?: Portal[],
 }
 
@@ -80,6 +89,11 @@ const PortalSwitcherBox = styled(Flex)`
 `
 const PORTAL_SWITCHER_ID = 'PortalSwitcher'
 
+/**
+ * A selector with different Stackspot portals.
+ * Each item contains a logo with a link to the portal.
+ * @param props the component Props {@link PortalSwitcherProps}.
+ */
 export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
   const [visible, setVisible] = useState<boolean>(false)
   const t = useTranslate(translations)
@@ -140,7 +154,7 @@ const translations = {
   pt: {
     EDP: 'Soluções eficientes e seguras do código até a implantação em produção.',
     AI: 'Acelere o desenvolvimento com sugestões eficientes e resultados de alta qualidade.',
-    HUB: 'Descubra AI Stacks, knownledge sources e quick commands, tudo em um hub simplificado.',
+    HUB: 'Descubra AI Stacks, knowledge sources e quick commands, tudo em um hub simplificado.',
     portalSwitcher: 'Seletor de portais',
     selected: 'selecionado',
   },

package/src/components/Toaster.tsx

@@ -1,16 +1,24 @@
 import { TimesMini } from '@citric/icons'
 import { IconButton } from '@citric/ui'
-import { CloseButtonProps, ToastContainer } from 'react-toastify'
+import type { CloseButton as DefaultCloseButton } from 'react-toastify'
+import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 import { useDictionary } from '../dictionary'
 
+type CloseButtonProps = Parameters<typeof DefaultCloseButton>[0]
+
+export const TOASTER_CLOSE_BTN_CLASS = 'btn-close'
+
 const CloseButton = ({ closeToast }: CloseButtonProps) => {
   const t = useDictionary()
   return (
-    <IconButton onClick={() => closeToast(null as any)} title={t.dismiss}>
+    <IconButton className={TOASTER_CLOSE_BTN_CLASS} onClick={closeToast} title={t.dismiss}>
       <TimesMini />
     </IconButton>
   )
 }
 
+/**
+ * Uses react-toastify to render a Toaster based on the Citric DS.
+ */
 export const Toaster = () => <ToastContainer closeButton={CloseButton} />

package/src/components/UserMenu.tsx

@@ -1,15 +1,24 @@
 import { Flex, IconBox, LinkBox, Text } from '@citric/core'
 import { ChevronDown } from '@citric/icons'
 import { Avatar } from '@citric/ui'
+import { SelectionList, SelectionListProps } from '@stack-spot/portal-components/SelectionList'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useState } from 'react'
 import { styled } from 'styled-components'
-import { SelectionList, SelectionListProps } from './SelectionList'
 
 interface Props {
+  /**
+   * The user name.
+   */
   userName: string,
+  /**
+   * The user email.
+   */
   email?: string,
+  /**
+   * The menu options.
+   */
   options?: SelectionListProps['items'],
 }
 
@@ -65,6 +74,10 @@ const UserMenuHeader = ({ userName, email }: Omit<Props, 'options'>) => (
   </div>
 )
 
+/**
+ * Renders the user menu.
+ * @param props the component's props {@link Props}.
+ */
 export const UserMenu = ({ userName, email, options }: Props) => {
   const t = useTranslate(dictionary)
   const [visible, setVisible] = useState(false)

package/src/components/error/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
+import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/ErrorFeedback'
 import { Component } from 'react'
-import { ErrorFeedback } from './ErrorFeedback'
-import { ErrorDescription, ErrorManager } from './ErrorManager'
+import { ErrorManager } from './ErrorManager'
 
 interface State extends ErrorDescription {
   hasError: boolean,
@@ -10,6 +10,15 @@ interface Props {
   children: React.ReactNode,
 }
 
+/**
+ * An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
+ * 
+ * To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
+ * 
+ * To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
+ * using the component `Layout` or `RawLayout`, you can use the property `onError`.
+ */
 export class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props)