@stack-spot/portal-layout 0.0.65 → 1.0.0

package/dist/Layout.d.ts

@@ -1,32 +1,84 @@
-import { TourProps } from '@stack-spot/portal-components';
+import { TourProps } from '@stack-spot/portal-components/Tour';
 import { WithStyle } from '@stack-spot/portal-theme';
 import '@stack-spot/portal-theme/dist/theme.css';
 import { ReactElement, ReactNode } from 'react';
 import { HeaderProps } from './components/Header.js';
 import { DescriptionFn, ErrorHandler } from './components/error/ErrorManager.js';
 import { MenuProps } from './components/menu/types.js';
-import { LayoutContext } from './layout-context.js';
 import './layout.css';
-interface Props extends WithStyle, LayoutContext {
+interface Props extends WithStyle {
+    /**
+     * The config for the menu.
+     */
     menu: MenuProps;
+    /**
+     * The config for the header.
+     */
     header: HeaderProps;
+    /**
+     * The React node to go in the page content.
+     */
     children: ReactNode;
+    /**
+     * A React node to place right after the page.
+     */
     extra?: ReactNode;
+    /**
+     * A function to convert errors into a readable format so they're properly rendered and logged.
+     */
     errorDescriptor?: DescriptionFn;
+    /**
+     * A function to run whenever an error is catch by an error boundary.
+     */
     onError?: ErrorHandler;
+    /**
+     * The options for the React Tour's tutorial.
+     */
     tourProps?: TourProps;
 }
-interface RawProps extends WithStyle, LayoutContext {
+interface RawProps extends WithStyle {
+    /**
+     * The React element to go in the menu sections.
+     */
     menuSections?: ReactElement;
+    /**
+     * The React element to go in the menu content.
+     */
     menuContent?: ReactElement;
+    /**
+     * The React element to go in the header.
+     */
     header?: ReactElement;
+    /**
+     * The React node to go in the page content.
+     */
     children?: ReactNode;
+    /**
+     * A React node to place right after the page.
+     */
     extra?: ReactNode;
+    /**
+     * A function to convert errors into a readable format so they're properly rendered and logged.
+     */
     errorDescriptor?: DescriptionFn;
+    /**
+     * A function to run whenever an error is catch by an error boundary.
+     */
     onError?: ErrorHandler;
+    /**
+     * The options for the React Tour's tutorial.
+     */
     tourProps?: TourProps;
 }
-export declare const RawLayout: ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style, anchorTag }: RawProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Layout: ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps, anchorTag }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the layout with the React elements passed in the props.
+ * @param props the component's props {@link RawProps}.
+ */
+export declare const RawLayout: ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style }: RawProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the layout with a menu and header that follow the config objects passed as parameter.
+ * @param props the component's props {@link Props}.
+ */
+export declare const Layout: ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Layout.d.ts.map

package/dist/Layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkD,MAAM,+BAA+B,CAAA;AACzG,OAAO,EAAsB,SAAS,EAAe,MAAM,0BAA0B,CAAA;AACrF,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGzD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAgB,MAAM,iCAAiC,CAAA;AAI3F,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAGnD,OAAO,EAAE,aAAa,EAAkB,MAAM,kBAAkB,CAAA;AAChE,OAAO,cAAc,CAAA;AAErB,UAAU,KAAM,SAAQ,SAAS,EAAE,aAAa;IAC9C,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,SAAS,EAAE,aAAa;IACjD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,6HAGlB,QAAQ,4CAsDX,CAAA;AAOD,eAAO,MAAM,MAAM,wGAAyG,KAAK,4CAkBhI,CAAA"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkD,MAAM,oCAAoC,CAAA;AAC9G,OAAO,EAAsB,SAAS,EAAe,MAAM,0BAA0B,CAAA;AACrF,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAGzD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAgB,MAAM,iCAAiC,CAAA;AAI3F,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAGnD,OAAO,cAAc,CAAA;AAErB,UAAU,KAAM,SAAQ,SAAS;IAC/B;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,SAAS;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,kHAGlB,QAAQ,4CAoDX,CAAA;AAOD;;;GAGG;AACH,eAAO,MAAM,MAAM,6FAA8F,KAAK,4CAiBrH,CAAA"}

package/dist/Layout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components';
+import { TourProvider, defaultTourConfig, isNewTourStep } from '@stack-spot/portal-components/Tour';
 import { CSSToCitricAdapter, listToClass } from '@stack-spot/portal-theme';
 import '@stack-spot/portal-theme/dist/theme.css';
 import { useEffect } from 'react';
@@ -13,9 +13,12 @@ import { MenuContent } from './components/menu/MenuContent.js';
 import { MenuSections } from './components/menu/MenuSections.js';
 import { usePortalSwitcherStep } from './components/tour/PortalSwitcherStep.js';
 import { elementIds, getLayoutElements } from './elements.js';
-import { LayoutProvider } from './layout-context.js';
 import './layout.css';
-export const RawLayout = ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style, anchorTag }) => {
+/**
+ * Renders the layout with the React elements passed in the props.
+ * @param props the component's props {@link RawProps}.
+ */
+export const RawLayout = ({ menuSections, menuContent, header, children, tourProps, extra, errorDescriptor, onError, className, style }) => {
     // @ts-ignore
     const { bottomDialog, modal, rightPanel } = overlay.useOverlays();
     const { layout } = getLayoutElements();
@@ -38,14 +41,18 @@ export const RawLayout = ({ menuSections, menuContent, header, children, tourPro
         if (onError)
             ErrorManager.setErrorHandler(onError);
     }, []);
-    return (_jsx(CSSToCitricAdapter, { children: _jsx(LayoutProvider, { anchorTag: anchorTag, children: _jsx(TourProvider, { config: tourPropsWithDefaults, children: _jsxs("div", { id: elementIds.layout, className: listToClass(classes), style: style, children: [children && _jsx("div", { id: elementIds.page, children: _jsx("article", { id: elementIds.content, children: _jsx(ErrorBoundary, { children: children }) }) }), extra && _jsx(SilentErrorBoundary, { children: extra }), _jsxs("aside", { id: elementIds.menu, children: [_jsx("nav", { role: "menu", id: elementIds.menuContent, children: _jsx(SilentErrorBoundary, { children: menuContent }) }), menuSections &&
-                                    _jsx("nav", { role: "menu", id: elementIds.menuSections, children: _jsx(SilentErrorBoundary, { children: menuSections }) })] }), header && _jsx("header", { id: elementIds.header, children: _jsx(SilentErrorBoundary, { children: header }) }), _jsx("div", { id: elementIds.bottomDialog, role: "dialog", children: _jsx(ErrorBoundary, { children: bottomDialog }) }), _jsxs("div", { id: elementIds.backdrop, children: [_jsx("div", { id: elementIds.rightPanel, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: rightPanel }) }), _jsx("div", { id: elementIds.modal, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: modal }) })] }), _jsx(Toaster, {}), _jsx("div", { id: elementIds.accessibilityAnnouncer, "aria-atomic": true, "aria-live": "assertive" })] }) }) }) }));
+    return (_jsx(CSSToCitricAdapter, { children: _jsx(TourProvider, { config: tourPropsWithDefaults, children: _jsxs("div", { id: elementIds.layout, className: listToClass(classes), style: style, children: [children && _jsx("div", { id: elementIds.page, children: _jsx("article", { id: elementIds.content, children: _jsx(ErrorBoundary, { children: children }) }) }), extra && _jsx(SilentErrorBoundary, { children: extra }), _jsxs("aside", { id: elementIds.menu, children: [_jsx("nav", { role: "menu", id: elementIds.menuContent, children: _jsx(SilentErrorBoundary, { children: menuContent }) }), menuSections &&
+                                _jsx("nav", { role: "menu", id: elementIds.menuSections, children: _jsx(SilentErrorBoundary, { children: menuSections }) })] }), header && _jsx("header", { id: elementIds.header, children: _jsx(SilentErrorBoundary, { children: header }) }), _jsx("div", { id: elementIds.bottomDialog, role: "dialog", children: _jsx(ErrorBoundary, { children: bottomDialog }) }), _jsxs("div", { id: elementIds.backdrop, children: [_jsx("div", { id: elementIds.rightPanel, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: rightPanel }) }), _jsx("div", { id: elementIds.modal, "aria-modal": true, role: "dialog", children: _jsx(ErrorBoundary, { children: modal }) })] }), _jsx(Toaster, {}), _jsx("div", { id: elementIds.accessibilityAnnouncer, "aria-atomic": true, "aria-live": "assertive" })] }) }) }));
 };
 const MenuContentRenderer = ({ content }) => {
     const menuContent = typeof content === 'function' ? content() : content;
     return _jsx(MenuContent, { ...menuContent });
 };
-export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps, anchorTag }) => (_jsx(RawLayout, { header: _jsx(Header, { ...header }), menuSections: menu.sections ? _jsx(MenuSections, { ...menu }) : undefined, menuContent: menu.content
+/**
+ * Renders the layout with a menu and header that follow the config objects passed as parameter.
+ * @param props the component's props {@link Props}.
+ */
+export const Layout = ({ menu, header, children, extra, errorDescriptor, onError, className, style, tourProps }) => (_jsx(RawLayout, { header: _jsx(Header, { ...header }), menuSections: menu.sections ? _jsx(MenuSections, { ...menu }) : undefined, menuContent: menu.content
         ? _jsx(MenuContentRenderer, { content: menu.content }, 'contentKey' in menu ? menu.contentKey : undefined)
-        : undefined, errorDescriptor: errorDescriptor, onError: onError, extra: extra, className: className, style: style, tourProps: tourProps, anchorTag: anchorTag, children: children }));
+        : undefined, errorDescriptor: errorDescriptor, onError: onError, extra: extra, className: className, style: style, tourProps: tourProps, children: children }));
 //# sourceMappingURL=Layout.js.map

package/dist/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AACzG,OAAO,EAAE,kBAAkB,EAAa,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACrF,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,EAA+B,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAE7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAA;AAC5E,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAC1D,OAAO,EAAiB,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAChE,OAAO,cAAc,CAAA;AAuBrB,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EACtD,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EACpD,EACV,EAAE;IACF,aAAa;IACb,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,WAAW,EAAE,CAAA;IACjE,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,oBAAoB,GAAG,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAA;IACvE,MAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAA;IAElD,MAAM,OAAO,GAAG;QACd,WAAW,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS;QACzE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB;QAC7C,SAAS;QACT,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;KAClD,CAAA;IAED,MAAM,qBAAqB,GAAG,EAAE,GAAG,iBAAiB,EAAE,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAA;IAC5E,qBAAqB,CAAC,KAAK,GAAG;QAC5B,kBAAkB;QAClB,GAAG,qBAAqB,CAAC,KAAK;KAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe;YAAE,YAAY,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAA;QACzE,IAAI,OAAO;YAAE,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;IACpD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,KAAC,kBAAkB,cACjB,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAClC,KAAC,YAAY,IAAC,MAAM,EAAE,qBAAqB,YACzC,eAAK,EAAE,EAAE,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,aACtE,QAAQ,IAAI,cAAK,EAAE,EAAE,UAAU,CAAC,IAAI,YACnC,kBAAS,EAAE,EAAE,UAAU,CAAC,OAAO,YAAE,KAAC,aAAa,cAAE,QAAQ,GAAiB,GAAU,GAChF,EACL,KAAK,IAAI,KAAC,mBAAmB,cAAE,KAAK,GAAuB,EAC5D,iBAAO,EAAE,EAAE,UAAU,CAAC,IAAI,aACxB,cAAK,IAAI,EAAC,MAAM,EAAC,EAAE,EAAE,UAAU,CAAC,WAAW,YAAE,KAAC,mBAAmB,cAAE,WAAW,GAAuB,GAAM,EAC1G,YAAY;oCACX,cAAK,IAAI,EAAC,MAAM,EAAC,EAAE,EAAE,UAAU,CAAC,YAAY,YAAE,KAAC,mBAAmB,cAAE,YAAY,GAAuB,GAAM,IACzG,EACP,MAAM,IAAI,iBAAQ,EAAE,EAAE,UAAU,CAAC,MAAM,YAAE,KAAC,mBAAmB,cAAE,MAAM,GAAuB,GAAS,EACtG,cAAK,EAAE,EAAE,UAAU,CAAC,YAAY,EAAE,IAAI,EAAC,QAAQ,YAAC,KAAC,aAAa,cAAE,YAAY,GAAiB,GAAM,EACnG,eAAK,EAAE,EAAE,UAAU,CAAC,QAAQ,aAC1B,cAAK,EAAE,EAAE,UAAU,CAAC,UAAU,sBAAa,IAAI,EAAC,QAAQ,YAAC,KAAC,aAAa,cAAE,UAAU,GAAiB,GAAM,EAC1G,cAAK,EAAE,EAAE,UAAU,CAAC,KAAK,sBAAa,IAAI,EAAC,QAAQ,YAAC,KAAC,aAAa,cAAE,KAAK,GAAiB,GAAM,IAC5F,EACN,KAAC,OAAO,KAAG,EACX,cAAK,EAAE,EAAE,UAAU,CAAC,sBAAsB,oCAAwB,WAAW,GACvE,IACF,GACO,GACA,GACE,CACtB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAAE,OAAO,EAA4C,EAAE,EAAE;IACpF,MAAM,WAAW,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IACvE,OAAO,KAAC,WAAW,OAAK,WAAW,GAAI,CAAA;AACzC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAS,EAAE,EAAE,CAAC,CACpI,KAAC,SAAS,IACR,MAAM,EAAE,KAAC,MAAM,OAAK,MAAM,GAAI,EAC9B,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,YAAY,OAAK,IAAI,GAAI,CAAC,CAAC,CAAC,SAAS,EACpE,WAAW,EAAE,IAAI,CAAC,OAAO;QACvB,CAAC,CAAC,KAAC,mBAAmB,IAA0D,OAAO,EAAE,IAAI,CAAC,OAAO,IAAzE,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAA2B;QACzG,CAAC,CAAC,SAAS,EAEb,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,YAEnB,QAAQ,GACC,CACb,CAAA"}
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":"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"}

package/dist/LayoutOverlayManager.d.ts

@@ -1,19 +1,35 @@
 import { ReactElement } from 'react';
 import { DialogOptions } from './components/Dialog.js';
 import { OverlayContentProps } from './components/OverlayContent.js';
-import { showToaster as showReactToaster } from './toaster.js';
+import { CustomToasterOptions, DefaultToasterOptions, closeReactToaster } from './toaster.js';
 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;
 }
 type BottomDialogOptions = Omit<DialogOptions, 'title'>;
 type OverlaySize = 'small' | 'medium' | 'large';
 type ModalSize = 'fit-content' | OverlaySize;
 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;
 }
 declare class LayoutOverlayManager {
@@ -26,38 +42,189 @@ declare class LayoutOverlayManager {
      */
     private lastActiveElement;
     private setupElements;
+    /**
+     * Setup the overlay layout elements.
+     * @returns the content for the modal, rightPanel and bottomDialog.
+     */
     private useOverlays;
+    /**
+     * 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;
     private setMainContentInteractivity;
     private showOverlay;
     private hideOverlay;
+    /**
+     * @returns true if the modal is currently opened. False otherwise.
+     */
     isModalOpen(): boolean;
+    /**
+     * @returns true if the right panel is currently opened. False otherwise.
+     */
     isRightPanelOpen(): boolean;
+    /**
+     * @returns true if the bottom dialog is currently opened. False otherwise.
+     */
     isBottomDialogOpen(): boolean;
+    /**
+     * 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, onClose }?: CustomModalOptions): void;
+    /**
+     * 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;
     }): void;
     private showDialog;
+    /**
+     * 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>;
+    /**
+     * 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.
+     */
     alert({ confirm, showButton, ...options }: AlertOptions): Promise<void>;
-    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>;
+    /**
+     * 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, onClose }?: CustomRightPanelOptions): void;
+    /**
+     * 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;
     }): void;
+    private focusLastActiveElement;
     /**
-     * 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.
+     * 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.
      */
-    private focusLastActiveElement;
     closeModal(runCloseListener?: boolean): void;
+    /**
+     * 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?: boolean): void;
+    /**
+     * Closes the bottom dialog if it's open.
+     */
     closeBottomDialog(): void;
+    /**
+     * 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): boolean;
+    /**
+     * 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): boolean;
-    showToaster: typeof 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;
+    /**
+     * Closes the toaster with the specified id.
+     * @param id the id of the toaster to close.
+     */
+    closeToaster: typeof closeReactToaster;
 }
+/**
+ * Manages overlay components of the layout like: modal, rightPanel, bottomDialog and toaster.
+ */
 export declare const overlay: LayoutOverlayManager;
 export {};
 //# sourceMappingURL=LayoutOverlayManager.d.ts.map

package/dist/LayoutOverlayManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAU,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAoC,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAInG,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG3D,UAAU,YAAa,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;AACvD,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC/C,KAAK,SAAS,GAAG,aAAa,GAAG,WAAW,CAAA;AAS5C,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,cAAM,oBAAoB;IACxB,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAA;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,QAAQ,CAAC,CAAgB;IACjC,OAAO,CAAC,YAAY,CAAC,CAAY;IACjC;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAAuB;IAEhD,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;IAMnB,WAAW;IAIX,gBAAgB;IAIhB,kBAAkB;IAIlB,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,kBAAuB;IAQlG,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE;IAIxE,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAKnE,KAAK,CAAC,EAAE,OAAO,EAAE,UAAiB,EAAE,GAAG,OAAO,EAAE,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAKpF,gBAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,GAAG,OAAO,CAAC,OAAO,CAAC;IAiBrF,oBAAoB,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,uBAA4B;IAWtG,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE;IAO/E;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAK9B,UAAU,CAAC,gBAAgB,UAAO;IAyBlC,eAAe,CAAC,gBAAgB,UAAO;IAyBvC,iBAAiB;IAIjB,aAAa,CAAC,OAAO,EAAE,WAAW;IAIlC,kBAAkB,CAAC,OAAO,EAAE,WAAW;IAIvC,WAAW,0BAAmB;CAC/B;AAED,eAAO,MAAM,OAAO,sBAA6B,CAAA"}
+{"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAU,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAoC,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAInG,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,iBAAiB,EAAmC,MAAM,WAAW,CAAA;AAG3H,UAAU,YAAa,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC1D;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;AACvD,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC/C,KAAK,SAAS,GAAG,aAAa,GAAG,WAAW,CAAA;AAS5C,UAAU,kBAAkB;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,cAAM,oBAAoB;IACxB,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAA;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,QAAQ,CAAC,CAAgB;IACjC,OAAO,CAAC,YAAY,CAAC,CAAY;IACjC;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAAuB;IAEhD,OAAO,CAAC,aAAa;IAmBrB;;;OAGG;IAEH,OAAO,CAAC,WAAW;IAanB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,WAAW;IAIX;;OAEG;IACH,gBAAgB;IAIhB;;OAEG;IACH,kBAAkB;IAIlB;;;;;;;;OAQG;IACH,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,kBAAuB;IAQlG;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE;IAIxE,OAAO,CAAC,UAAU;IAqBlB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAKzE;;;;;OAKG;IACG,KAAK,CAAC,EAAE,OAAO,EAAE,UAAiB,EAAE,GAAG,OAAO,EAAE,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAKpF;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,GAAG,OAAO,CAAC,OAAO,CAAC;IAiBtF;;;;;;;;;OASG;IACH,oBAAoB,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,uBAA4B;IAWtG;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE;IAW/E,OAAO,CAAC,sBAAsB;IAK9B;;;OAGG;IACH,UAAU,CAAC,gBAAgB,UAAO;IAyBlC;;;;OAIG;IACH,eAAe,CAAC,gBAAgB,UAAO;IAyBvC;;OAEG;IACH,iBAAiB;IAIjB;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,WAAW;IAIlC;;;;OAIG;IACH,kBAAkB,CAAC,OAAO,EAAE,WAAW;IAIvC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,WAAW,CAAC,oBAAoB,EAAE,qBAAqB,GAAG,MAAM,GAAG,MAAM;IACzE;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,mBAAmB,EAAE,oBAAoB,GAAG,MAAM,GAAG,MAAM;IACvE;;;;;;;;;OASG;IACH,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM;IAKtD;;;OAGG;IACH,YAAY,2BAAoB;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,sBAA6B,CAAA"}

package/dist/LayoutOverlayManager.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Button } from '@citric/core';
+import { focusAccessibleElement, focusFirstChild } from '@stack-spot/portal-components';
 import { useLayoutEffect, useState } from 'react';
 import { Dialog } from './components/Dialog.js';
 import { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent.js';
 import { getDictionary } from './dictionary.js';
 import { elementIds, getLayoutElements } from './elements.js';
 import { ElementNotFound, LayoutError } from './errors.js';
-import { showToaster as showReactToaster } from './toaster.js';
-import { focusAccessibleElement, focusFirstChild, valueOfLayoutVar } from './utils.js';
+import { closeReactToaster, showToaster as showReactToaster } from './toaster.js';
+import { valueOfLayoutVar } from './utils.js';
 function multipleCallsWarning(type, timeMS) {
     return `
     Attempted to show a modal or rightPanel while a ${type} was still being closed. Closing a ${type} takes only ${timeMS}ms, so this action
@@ -46,11 +47,15 @@ class LayoutOverlayManager {
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "showToaster", {
+        /**
+         * Closes the toaster with the specified id.
+         * @param id the id of the toaster to close.
+         */
+        Object.defineProperty(this, "closeToaster", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: showReactToaster
+            value: closeReactToaster
         });
     }
     setupElements() {
@@ -78,8 +83,11 @@ 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.
     useOverlays() {
         useLayoutEffect(() => {
             if (!this.elements)
@@ -93,6 +101,11 @@ class LayoutOverlayManager {
         this.setContent.bottomDialog = setBottomDialog;
         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.
+     */
     setInteractivity(element, interactive) {
         if (interactive) {
             element?.removeAttribute('inert');
@@ -122,15 +135,33 @@ class LayoutOverlayManager {
         this.setInteractivity(element, false);
         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, { size = 'medium', onClose } = {}) {
         if (!this.elements?.modal)
             throw new ElementNotFound('modal', elementIds.modal);
@@ -140,6 +171,14 @@ class LayoutOverlayManager {
         this.setContent.modal(content);
         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 }) {
         this.showCustomModal(_jsx(OverlayContent, { ...props, onClose: () => this.closeModal(), type: "modal" }), { size, onClose: props.onClose });
     }
@@ -157,24 +196,58 @@ 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 }) {
         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 }) {
         const t = getDictionary();
         await this.showDialog({ ...options, confirm: showButton ? (confirm || t.confirm) : undefined });
     }
-    showBottomDialog({ message, cancel, confirm }) {
+    /**
+     * 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 }) {
         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?.(_jsxs(_Fragment, { children: [message, _jsxs("div", { className: "btn-group", children: [cancel && _jsx(Button, { onClick: () => resolve(false), colorScheme: "light", appearance: "outlined", children: cancel }), confirm && _jsx(Button, { onClick: () => resolve(true), colorScheme: "light", children: confirm })] })] }));
+            this.setContent.bottomDialog?.(_jsxs(_Fragment, { children: [children, _jsxs("div", { className: "btn-group", children: [cancel && _jsx(Button, { onClick: () => resolve(false), colorScheme: "light", appearance: "outlined", children: cancel }), confirm && _jsx(Button, { onClick: () => resolve(true), colorScheme: "light", children: confirm })] })] }));
             this.showOverlay(this.elements?.bottomDialog, undefined, false);
         });
     }
+    /**
+     * 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, { size = 'medium', onClose } = {}) {
         if (!this.elements?.rightPanel)
             throw new ElementNotFound('right panel overlay', elementIds.rightPanel);
@@ -187,10 +260,18 @@ class LayoutOverlayManager {
             this.showOverlay(this.elements?.rightPanel);
         });
     }
+    /**
+     * 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 }) {
         this.showCustomRightPanel(_jsx(OverlayContent, { ...props, onClose: () => this.closeRightPanel(), type: "panel" }), { size, onClose: props.onClose });
     }
-    /**
+    /*
      * 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.
      */
@@ -198,6 +279,10 @@ class LayoutOverlayManager {
         focusAccessibleElement(this.lastActiveElement);
         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', '');
@@ -220,6 +305,11 @@ class LayoutOverlayManager {
             this.focusLastActiveElement();
         }, animationMS);
     }
+    /**
+     * 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', '');
@@ -242,15 +332,34 @@ class LayoutOverlayManager {
             this.focusLastActiveElement();
         }, animationMS);
     }
+    /**
+     * 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) {
         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) {
         return !!this.elements?.rightPanel?.contains(element);
     }
+    showToaster(options) {
+        return showReactToaster(options);
+    }
 }
+/**
+ * Manages overlay components of the layout like: modal, rightPanel, bottomDialog and toaster.
+ */
 export const overlay = new LayoutOverlayManager();
 //# sourceMappingURL=LayoutOverlayManager.js.map